/* =========================================================================
   论坛样式表
   ========================================================================= */

:root {
    --bg:          #f4f9ff;
    --bg-soft:     #e9f4ff;
    --surface:     #ffffff;
    --surface-2:   #f8fafd;
    --border:      #dcebfd;
    --border-soft: #eef2f6;
    --text:        #17324d;
    --text-2:      #6f88a0;
    --text-3:      #8a98a8;
    --primary:     #4da3ff;
    --primary-600: #4d91ff;
    --primary-soft:#eef6ff;
    --success:     #16a34a;
    --success-soft:#e8f8ee;
    --danger:      #e11d48;
    --danger-soft: #fdeaee;
    --warning:     #d97706;
    --warning-soft:#fdf3e3;
    --info:        #0284c7;
    --info-soft:   #e6f4fd;
    --shadow-sm:   0 1px 2px rgba(23, 50, 77, .05);
    --shadow:      0 4px 16px rgba(23, 50, 77, .07);
    --shadow-lg:   0 12px 40px rgba(20, 30, 60, .13);
    --radius:      12px;
    --radius-sm:   8px;
    --radius-lg:   16px;
    /* —— 统一补充令牌 —— */
    --violet:      #51c4ff;
    --violet-600:  #3fb4f0;
    --violet-soft: #eaf7ff;
    --on-primary:  #ffffff;
    --success-line: color-mix(in srgb, var(--success) 25%, transparent);
    --danger-line:  color-mix(in srgb, var(--danger) 25%, transparent);
    --warning-line: color-mix(in srgb, var(--warning) 25%, transparent);
    --info-line:    color-mix(in srgb, var(--info) 25%, transparent);
    --shadow-card:       0 4px 14px rgba(23, 50, 77, .05);
    --shadow-card-hover: 0 7px 21px rgba(23, 50, 77, .07);
    --brand-grad:      linear-gradient(135deg, #4da3ff, #4d91ff);
    --brand-grad-hero: linear-gradient(135deg, #7dd3fc, #38bdf8 48%, #0ea5e9);
    /* —— 参考站（毓米社）补充令牌 —— */
    --ref-line:      #eef2f6;
    --ref-tab:       #4db6ff;
    --ref-tab-glow:  0 0 9px rgba(92, 178, 255, .85);
    --ref-ink:       #25384a;
    --ref-ink-2:     #5f7c95;
    --ref-hint:      #7b95ad;
    --ref-meta:      #8a98a8;
    --ref-chip-bg:   #f4f7fb;
    --grad-follow:   linear-gradient(135deg, #ff6b9d, #ff4f8c);
    --grad-msg:      linear-gradient(135deg, #4aa3ff, #388bff);
    --grad-strong:   linear-gradient(135deg, #7ed6ff, #3c9dff);
    --grad-login:    linear-gradient(135deg, #7dd3fc, #38bdf8 48%, #0ea5e9);
    --grad-gold:     linear-gradient(135deg, #f8dfb0, #f7ce86);
    --shadow-ref:    0 4px 14px rgba(23, 50, 77, .05);
    --shadow-ref-lg: 0 7px 21px rgba(23, 50, 77, .07);
}

[data-theme="dark"] {
    --bg:          #0f1420;
    --bg-soft:     #161d2c;
    --surface:     #1a2130;
    --surface-2:   #202839;
    --border:      #2b3446;
    --border-soft: #232b3b;
    --text:        #e6ebf4;
    --text-2:      #a3adc0;
    --text-3:      #74809a;
    --primary:     #6fa8ff;
    --primary-600: #5b98f0;
    --primary-soft:#1b2a40;
    --success-soft:#16281e;
    --danger-soft: #2d1a22;
    --warning-soft:#2c2417;
    --info-soft:   #14252f;
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, .3);
    --shadow:      0 4px 16px rgba(0, 0, 0, .35);
    --shadow-lg:   0 12px 40px rgba(0, 0, 0, .5);
    --violet:      #51c4ff;
    --violet-600:  #3fb4f0;
    --violet-soft: #16283a;
    --shadow-card:       0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .28);
    --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-600); }

img { max-width: 100%; }

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 20px 0;
}

.container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px 20px 60px;
    flex: 1;
}

.container-narrow { max-width: 560px; }

/* ------------------------------ 顶部导航 ------------------------------ */

.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
}

.topbar-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: 17px;
    color: var(--text);
    flex-shrink: 0;
}
.brand:hover { color: var(--text); }
.brand-text { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 手机端/App 顶栏专用标题：桌面端不显示 */
.brand-text-mobile { display: none; }

.brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--brand-grad);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 16px;
    box-shadow: var(--shadow-sm);
}

.nav { display: flex; gap: 2px; }

.nav-link {
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
}
.nav-link:hover { background: var(--bg-soft); color: var(--text); }
.nav-link.active { background: var(--primary-soft); color: var(--primary); }

.search {
    margin-left: auto;
    position: relative;
    display: flex;
    align-items: center;
    max-width: 260px;
    flex: 1;
}
.search input {
    width: 100%;
    height: 36px;
    padding: 0 36px 0 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 14px;
    outline: none;
    transition: border-color .15s, background .15s;
}
.search input:focus { border-color: var(--primary); background: var(--surface); }
.search button {
    position: absolute;
    right: 4px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    display: grid;
    place-items: center;
}
.search button:hover { color: var(--primary); background: var(--primary-soft); }

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.icon-btn {
    position: relative;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
}
.icon-btn:hover { background: var(--bg-soft); color: var(--text); }

.badge-dot {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--danger);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    border: 2px solid var(--surface);
    box-sizing: content-box;
}

.theme-toggle .ico-moon { display: none; }
[data-theme="dark"] .theme-toggle .ico-sun { display: none; }
[data-theme="dark"] .theme-toggle .ico-moon { display: block; }

/* ------------------------------ 用户菜单 ------------------------------ */

.user-menu { position: relative; }

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 9px 3px 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-size: 14px;
}
.user-menu-trigger:hover { border-color: var(--primary); }
.user-menu-name { font-weight: 500; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 230px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    /* 菜单项较多时，限制高度并在内部滚动，避免超出屏幕被裁掉 */
    max-height: min(70vh, calc(100vh - 96px));
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 110;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all .16s ease;
}
.user-menu.open .user-menu-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

.um-head {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 5px;
}
.um-name { font-weight: 600; }
.um-sub { font-size: 12.5px; color: var(--text-3); }

.user-menu-dropdown a {
    display: block;
    padding: 8px 11px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 14px;
}
.user-menu-dropdown a:hover { background: var(--bg-soft); color: var(--text); }
.user-menu-dropdown .um-admin { color: var(--primary); font-weight: 500; }
.user-menu-dropdown .um-logout { color: var(--danger); }

/* ------------------------------ 按钮 ------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 14.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
    background: var(--bg-soft);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
.btn:hover { box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13.5px; }
.btn-lg { height: 44px; padding: 0 22px; font-size: 15.5px; }
.btn-block { width: 100%; }

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-600));
    color: var(--on-primary);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 34%, transparent);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-600), var(--primary));
    color: var(--on-primary);
    box-shadow: 0 5px 18px color-mix(in srgb, var(--primary) 46%, transparent);
}

.btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text-2); }
.btn-ghost:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }

.btn-danger {
    background: linear-gradient(135deg, #f43f5e, var(--danger));
    color: var(--on-primary);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--danger) 34%, transparent);
}
.btn-danger:hover {
    background: linear-gradient(135deg, var(--danger), #be123c);
    color: var(--on-primary);
    box-shadow: 0 5px 18px color-mix(in srgb, var(--danger) 46%, transparent);
}

.btn-danger-ghost { background: var(--surface); border-color: var(--border); color: var(--danger); }
.btn-danger-ghost:hover { background: var(--danger-soft); border-color: var(--danger); }

.btn-success {
    background: linear-gradient(135deg, #22c55e, var(--success));
    color: var(--on-primary);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--success) 34%, transparent);
}
.btn-success:hover {
    background: linear-gradient(135deg, var(--success), #15803d);
    color: var(--on-primary);
    box-shadow: 0 5px 18px color-mix(in srgb, var(--success) 46%, transparent);
}

.btn[disabled], .btn.disabled { opacity: .5; pointer-events: none; }

/* ------------------------------ 卡片 ------------------------------ */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-soft);
    font-weight: 600;
    font-size: 15px;
}
.card-header .card-sub { font-weight: 400; font-size: 13px; color: var(--text-3); }
.card-body { padding: 18px; }
.card-body-flush { padding: 0; }

.page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 4px 0 18px;
    flex-wrap: wrap;
}
.page-title h1 {
    font-size: 22px;
    margin: 0;
    letter-spacing: -.2px;
}
.page-title .sub { color: var(--text-3); font-size: 13.5px; margin-top: 2px; }

/* ------------------------------ 提示条 ------------------------------ */

.flash-wrap {
    max-width: 1080px;
    margin: 14px auto 0;
    padding: 0 20px;
}
.flash {
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    font-size: 14px;
    border: 1px solid transparent;
}
.flash-success { background: var(--success-soft); color: var(--success); border-color: var(--success-line); }
.flash-error   { background: var(--danger-soft);  color: var(--danger);  border-color: var(--danger-line); }
.flash-info    { background: var(--info-soft);    color: var(--info);    border-color: var(--info-line); }
.flash-warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-line); }

/* ------------------------------ 头像 & 等级 ------------------------------ */

.avatar {
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-soft);
    display: block;
    flex-shrink: 0;
}
.avatar-xs { width: 24px; height: 24px; }
.avatar-sm { width: 32px; height: 32px; }
.avatar-md { width: 44px; height: 44px; }
.avatar-lg { width: 72px; height: 72px; }
.avatar-xl { width: 104px; height: 104px; }

.lv-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 17px;
    color: #fff;
    background: #94a3b8;
    vertical-align: middle;
}
/* 等级配色统一由下方「等级徽章」渐变定义提供（唯一来源） */

/* ------------------------------ 帖子列表 ------------------------------ */

/* 首页标签区：模式标签组（推荐/最新评论/最新发布/精华）+ 板块标签组 */
.home-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.home-tabs-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}
/* 板块标签组不套底框，避免整页出现两层底色 */
.home-tabs-cats {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    background: transparent;
    border-color: transparent;
}

/* 通用胶囊标签行（系统通知等页面） */
.cat-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.cat-tab {
    position: relative;
    padding: 6px 12px 10px;
    border-radius: 6px;
    background: transparent;
    border: 0;
    color: var(--text-2);
    font-size: 14.5px;
    white-space: nowrap;
    transition: color .18s ease;
}
.cat-tab:hover { color: var(--primary); }
.cat-tab.active { color: var(--primary); font-weight: 600; }
/* 排序标签选中态：发光下划线（与参考系统一致） */
.cat-tab.active::after,
.seg-tab.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    width: 26px;
    height: 3.5px;
    border-radius: 999px;
    background: #4db6ff;
    box-shadow: 0 0 8px rgba(92, 178, 255, .85);
}

/* 模式标签：带图标，字重稍重 */
.cat-tab-mode {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}
.cat-tab-mode .ico { flex: none; }

/* 板块页头：面包屑 + 板块信息 + 发帖入口 */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-3);
    margin-bottom: 12px;
}
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { color: var(--border); }

.cat-hero {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px;
    margin-bottom: 16px;
}
.cat-hero-body {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cat-hero-ico {
    width: 46px;
    height: 46px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--primary);
}
.cat-hero-text { flex: 1; min-width: 0; }
.cat-hero-name {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 3px;
    line-height: 1.25;
}
.cat-hero-desc {
    margin: 0;
    font-size: 13.5px;
    color: var(--text-3);
}
.cat-hero-act {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: none;
}
.cat-hero-count { text-align: center; line-height: 1.2; }
.cat-hero-count b { display: block; font-size: 17px; }
.cat-hero-count span { font-size: 12px; color: var(--text-3); }

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

.topic-item {
    display: flex;
    gap: 14px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--border-soft);
    transition: background .12s;
}
.topic-item:last-child { border-bottom: none; }
.topic-item:hover { background: var(--surface-2); }

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

/* 作者信息行：仅手机端显示（桌面端沿用左侧头像 + 底部作者信息） */
.topic-author { display: none; }

/* 快捷入口宫格：仅手机端显示 */
.quick-grid { display: none; }

.topic-title {
    font-size: 15.5px;
    font-weight: 650;
    color: var(--text);
    display: block;
    margin-bottom: 4px;
    word-break: break-word;
}
.topic-title:hover { color: var(--primary); }

.topic-excerpt {
    color: var(--text-3);
    font-size: 13.5px;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.topic-thumbs {
    display: flex;
    gap: 8px;
    margin: 0 0 10px;
    flex-wrap: nowrap;
    overflow: hidden;
}
.topic-thumb {
    display: block;
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-soft);
    flex: none;
}
.topic-thumb img,
.topic-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .18s ease;
}
.topic-thumb:hover img { transform: scale(1.05); }
.topic-thumb.is-video video { pointer-events: none; }
.topic-thumb .thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, .26);
    pointer-events: none;
}

.topic-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--text-3);
}
.topic-meta .meta-user { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.topic-meta .meta-item { display: inline-flex; align-items: center; gap: 4px; }

.topic-flags { display: inline-flex; gap: 5px; }
.flag {
    display: inline-block;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 18px;
}
.flag-pin    { background: linear-gradient(135deg, #fff0f7, #ffe2ef); color: #d62c72; }
.flag-closed { background: var(--bg-soft); color: var(--text-3); }
.flag-cat    { background: var(--primary-soft); color: var(--primary); }
.flag-featured  { background: linear-gradient(135deg, #fff7e8, #ffedc8); color: #b86a00; }
.flag-recommend { background: linear-gradient(135deg, #eef6ff, #ddecff); color: #2467d6; }
.flag-featured .ico,
.flag-recommend .ico { vertical-align: -2px; margin-right: 1px; }

.topic-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    gap: 2px;
    color: var(--text-3);
    font-size: 12px;
    text-align: center;
}
.topic-side strong { font-size: 16px; color: var(--text-2); display: block; line-height: 1.2; }

/* ------------------------------ 帖子详情 ------------------------------ */

.post-head { padding: 20px 22px 0; }
.post-head h1 { font-size: 22px; margin: 0 0 10px; line-height: 1.45; word-break: break-word; }

.post-author-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-soft);
    flex-wrap: wrap;
}
.post-author-bar .pa-name { font-weight: 600; color: var(--text); }
.post-author-bar .pa-time { font-size: 12.5px; color: var(--text-3); }

.post-body {
    padding: 20px 22px;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 15.5px;
    line-height: 1.85;
    min-height: 80px;
}

.post-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px 18px;
    flex-wrap: wrap;
}

.like-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    transition: all .15s;
}
.like-btn:hover { border-color: var(--danger); color: var(--danger); }
.like-btn.liked { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); font-weight: 600; }
.like-btn.pop { animation: pop .3s ease; }
@keyframes pop { 50% { transform: scale(1.14); } }

/* ------------------------------ 评论区 ------------------------------ */

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

.comment-item {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
}
.comment-item:last-child { border-bottom: none; }
.comment-body { flex: 1; min-width: 0; }

.comment-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}
.comment-head .c-name { font-weight: 600; color: var(--text); font-size: 14.5px; }
.comment-head .c-time { font-size: 12.5px; color: var(--text-3); }
.comment-head .c-floor { font-size: 12.5px; color: var(--text-3); margin-left: auto; }

.comment-text { white-space: pre-wrap; word-break: break-word; font-size: 14.8px; }

/* 个人签名：帖子 / 评论 / 个人主页共用 */
.pa-signature, .c-signature {
    margin-top: 6px;
    padding-left: 9px;
    border-left: 2px solid var(--border);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-3);
    white-space: pre-wrap;
    word-break: break-word;
}
.c-signature { margin-top: 4px; }
.profile-signature {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 9px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 12.5px;
    color: var(--text-3);
}
.profile-signature svg { flex: none; }

.comment-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    font-size: 12.5px;
}
.comment-foot button, .comment-foot a {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-3);
    cursor: pointer;
    font-size: 12.5px;
    font-family: inherit;
}
.comment-foot button:hover, .comment-foot a:hover { color: var(--primary); }
.comment-foot .del:hover { color: var(--danger); }

.reply-quote {
    background: var(--bg-soft);
    border-left: 3px solid var(--border);
    padding: 6px 11px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 8px;
}

.comment-children {
    list-style: none;
    margin: 12px 0 0;
    padding: 0 0 0 14px;
    border-left: 2px solid var(--border-soft);
}

.reply-form { margin-top: 10px; display: none; }
.reply-form.open { display: block; }

/* ------------------------------ 表单 ------------------------------ */

.form-group { margin-bottom: 16px; }

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}
.form-label .req { color: var(--danger); }

.form-control {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 14.5px;
    font-family: inherit;
    line-height: 1.6;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .16);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
textarea.form-control { resize: vertical; min-height: 110px; }

.form-help { font-size: 12.5px; color: var(--text-3); margin-top: 5px; }

.form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.form-row > * { flex: 1; min-width: 200px; }

.char-count { font-size: 12px; color: var(--text-3); float: right; }
.char-count.over { color: var(--danger); font-weight: 600; }

.field-error { color: var(--danger); font-size: 12.5px; margin-top: 5px; }

/* ------------------------------ 认证页 ------------------------------ */

.auth-wrap {
    max-width: 430px;
    margin: 30px auto;
}
.auth-logo {
    width: 58px;
    height: 58px;
    border-radius: 17px;
    background: var(--brand-grad);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 28px;
    font-weight: 700;
    margin: 0 auto 18px;
    box-shadow: var(--shadow);
}
.auth-title { text-align: center; font-size: 21px; margin: 0 0 6px; }
.auth-sub { text-align: center; color: var(--text-3); font-size: 13.5px; margin: 0 0 24px; }
.auth-foot { text-align: center; font-size: 13.5px; color: var(--text-3); margin-top: 18px; }

/* ------------------------------ 个人中心 / 会员卡 ------------------------------ */

.profile-head {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}
.profile-info { flex: 1; min-width: 220px; }
.profile-name { font-size: 21px; font-weight: 700; margin: 0 0 4px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.profile-sub { color: var(--text-3); font-size: 13.5px; }

.progress {
    height: 8px;
    background: var(--bg-soft);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 9px;
}
.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--violet));
    border-radius: 999px;
    transition: width .4s ease;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 15px 17px;
}
.stat-card .stat-num { font-size: 23px; font-weight: 700; line-height: 1.25; }
.stat-card .stat-label { font-size: 12.5px; color: var(--text-3); }

/* ------------------------------ 私信 ------------------------------ */

.msg-list { list-style: none; margin: 0; padding: 0; }
.msg-row {
    display: flex;
    gap: 13px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--border-soft);
    align-items: center;
}
.msg-row:last-child { border-bottom: none; }
.msg-row:hover { background: var(--surface-2); }
.msg-row.unread { background: var(--primary-soft); }
.msg-row-main { flex: 1; min-width: 0; }
.msg-row-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.msg-row-name { font-weight: 600; color: var(--text); }
.msg-row-time { font-size: 12.5px; color: var(--text-3); margin-left: auto; white-space: nowrap; }
.msg-row-preview {
    color: var(--text-3);
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-box {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    max-height: 560px;
    overflow-y: auto;
    background: var(--surface-2);
}
.bubble-row { display: flex; gap: 10px; align-items: flex-end; }
.bubble-row.mine { flex-direction: row-reverse; }
.bubble {
    max-width: 72%;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 14.5px;
}
.bubble-row.mine .bubble {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.bubble-time { font-size: 11.5px; color: var(--text-3); align-self: flex-end; padding-bottom: 3px; }

/* 私信里的图片 / 视频气泡 */
.bubble-media { padding: 6px; max-width: min(320px, 72%); }
.bubble-media .bubble-image { display: block; line-height: 0; border-radius: 10px; overflow: hidden; }
.bubble-media .bubble-image img {
    display: block;
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
}
.bubble-media .bubble-video {
    display: block;
    max-width: 100%;
    max-height: 300px;
    border-radius: 10px;
    background: #000;
}
.bubble-caption {
    padding: 6px 6px 2px;
    font-size: 14.5px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 私信输入区：附件按钮 + 输入框 + 发送按钮 */
.chat-compose { display: flex; align-items: flex-end; gap: 10px; }
.chat-compose .chat-input { flex: 1; min-width: 0; }
.chat-attach {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-2);
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
}
.chat-attach:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.chat-attach-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.chat-attach-preview:empty { display: none; }
@media (max-width: 400px) {
    .chat-compose { gap: 8px; }
    .chat-compose .btn { padding-left: 12px; padding-right: 12px; }
}

/* ------------------------------ 表格 ------------------------------ */

.table-wrap { overflow-x: auto; }
table.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
table.table th, table.table td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}
table.table th {
    font-size: 12.5px;
    color: var(--text-3);
    font-weight: 600;
    background: var(--surface-2);
    white-space: nowrap;
}
table.table tbody tr:hover { background: var(--surface-2); }
table.table td.actions { white-space: nowrap; }

/* ------------------------------ 操作按钮组 ------------------------------ */

.actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    vertical-align: middle;
}
.actions form { display: inline-flex; margin: 0; padding: 0; }

.actions > a,
.actions > button,
.actions form > button,
.actions .act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 30px;
    padding: 0 11px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
}
.actions > a:hover,
.actions > button:hover,
.actions form > button:hover,
.actions .act:hover {
    background: var(--bg-soft);
    border-color: var(--text-3);
    color: var(--text);
    box-shadow: var(--shadow);
}
.actions > a:active,
.actions > button:active,
.actions form > button:active,
.actions .act:active { transform: scale(.95); }
.actions .ico { width: 14px; height: 14px; }

/* 语义色：编辑 / 查看 */
.actions .act-edit,
.actions .act-view { color: var(--info); border-color: color-mix(in srgb, var(--info) 32%, var(--border)); }
.actions .act-edit:hover,
.actions .act-view:hover { background: var(--info-soft); border-color: var(--info); color: var(--info); }

/* 语义色：通过 / 恢复 / 解禁 */
.actions .act-ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 32%, var(--border)); }
.actions .act-ok:hover { background: var(--success-soft); border-color: var(--success); color: var(--success); }

/* 语义色：警告 / 禁言 / 置顶 */
.actions .act-warn { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 32%, var(--border)); }
.actions .act-warn:hover { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }

/* 语义色：删除 / 封禁 / 驳回 */
.actions .act-del { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 32%, var(--border)); }
.actions .act-del:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

/* 语义色：主色 / 普通 */
.actions .act-primary { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 32%, var(--border)); }
.actions .act-primary:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }

/* ------------------------------ 分页 ------------------------------ */

.pager {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 18px;
}
.pager-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
    font-size: 13.5px;
}
.pager-btn:hover { border-color: var(--primary); color: var(--primary); }
.pager-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.pager-btn.disabled { opacity: .45; pointer-events: none; }
.pager-gap { color: var(--text-3); padding: 0 3px; }
.pager-info { margin-left: 8px; font-size: 12.5px; color: var(--text-3); }

/* ------------------------------ 空状态 ------------------------------ */

.empty {
    text-align: center;
    padding: 54px 20px;
    color: var(--text-3);
}
.empty-icon { font-size: 40px; margin-bottom: 10px; opacity: .6; }
.empty-title { font-size: 15.5px; color: var(--text-2); margin-bottom: 5px; }
.empty-desc { font-size: 13.5px; }

/* ------------------------------ 布局 ------------------------------ */

.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 288px;
    gap: 20px;
    align-items: start;
}
.side-card .card-body { padding: 16px 18px; }

.side-user {
    display: flex;
    gap: 11px;
    align-items: center;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 13px;
}
.side-user-name { font-weight: 600; font-size: 15px; }

.side-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    gap: 4px;
}
.side-stats .n { font-weight: 700; font-size: 16px; }
.side-stats .l { font-size: 11.5px; color: var(--text-3); }

.side-links { display: flex; flex-direction: column; gap: 2px; }
.side-links a {
    padding: 8px 11px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.side-links a:hover { background: var(--bg-soft); color: var(--text); }

.notice {
    background: var(--warning-soft);
    border: 1px solid rgba(217, 119, 6, .22);
    color: var(--text-2);
    padding: 9px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 14px;
}
.notice strong { color: var(--warning); }

/* ------------------------------ 管理后台 ------------------------------ */

.admin-wrap {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: 100vh;
}
.admin-side {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 16px 12px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.admin-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 8px 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-soft);
    font-weight: 700;
}
.admin-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.admin-brand-text strong { font-size: 15px; }
.admin-brand-text small {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.admin-nav .nav-group { display: flex; flex-direction: column; gap: 2px; }
.admin-nav .nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-3);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.admin-nav .nav-group-toggle:hover { background: var(--bg-soft); color: var(--text-2); }
.admin-nav .nav-group-name { flex: 1; min-width: 0; }
.admin-nav .nav-chevron { display: grid; place-items: center; transition: transform .22s ease; }
.admin-nav .nav-group.open .nav-chevron { transform: rotate(90deg); }
.admin-nav .nav-group-badge {
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}
.admin-nav .nav-group-items {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 1px 0 4px;
}
.admin-nav .nav-group.open .nav-group-items { display: flex; }

.admin-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 14px;
    border-left: 3px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 13.5px;
}
.admin-nav a:hover { background: var(--bg-soft); color: var(--text); }
.admin-nav a.active {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
    border-left-color: var(--primary);
}
.admin-nav .nav-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.admin-me {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.admin-me-avatar {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--brand-grad);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}
.admin-me-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}
.admin-me-name {
    max-width: 100%;
    font-weight: 600;
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-main { padding: 24px 26px 60px; min-width: 0; }
.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.admin-topbar h1 { font-size: 21px; margin: 0; }

/* 概览页：带图标的统计卡 */
.stat-card.has-icon { display: flex; align-items: center; gap: 13px; }
.stat-icon {
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--primary);
}
.stat-icon.is-success { background: var(--success-soft); color: var(--success); }
.stat-icon.is-info    { background: var(--info-soft);    color: var(--info); }
.stat-icon.is-warning { background: var(--warning-soft); color: var(--warning); }
.stat-body { min-width: 0; }

/* 概览页：待办清单 */
.todo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-soft);
    color: inherit;
    transition: background .15s ease;
}
.todo-row:last-child { border-bottom: none; }
.todo-row:hover { background: var(--surface-2); }
.todo-row > .ico { color: var(--text-3); flex: none; }
.todo-row .todo-icon {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--warning-soft);
    color: var(--warning);
}
.todo-row .todo-text { flex: 1; min-width: 0; font-size: 14px; }
.todo-row .todo-text strong { color: var(--warning); }
.todo-row .todo-count {
    min-width: 26px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--warning-soft);
    color: var(--warning);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.admin-search {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.admin-search .form-control { max-width: 240px; }

/* ------------------------------ 其它 ------------------------------ */

.chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--bg-soft);
    color: var(--text-2);
}
.chip-success { background: var(--success-soft); color: var(--success); }
.chip-danger  { background: var(--danger-soft);  color: var(--danger); }
.chip-warning { background: var(--warning-soft); color: var(--warning); }
.chip-info    { background: var(--info-soft);    color: var(--info); }
.chip-primary { background: var(--primary-soft); color: var(--primary); }

.muted { color: var(--text-3); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-16 { margin-bottom: 16px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.site-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 22px 0;
    margin-top: auto;
}
.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-3);
    padding-top: 0;
    padding-bottom: 0;
}
.footer-desc { margin-left: 10px; }
.footer-meta { font-size: 12.5px; }

.toast {
    position: fixed;
    left: 50%;
    bottom: 34px;
    transform: translate(-50%, 18px);
    background: var(--text);
    color: var(--surface);
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 14px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transition: all .25s ease;
    pointer-events: none;
    z-index: 999;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------ 图片上传与画廊 ------------------------------ */

.upload-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 22px 16px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    cursor: pointer;
    text-align: center;
    transition: border-color .2s, background .2s;
}
.upload-box:hover { border-color: var(--primary); background: var(--primary-soft); }
.upload-icon { font-size: 26px; line-height: 1; }
.upload-text { font-weight: 600; color: var(--text); }
.upload-hint { font-size: 12.5px; color: var(--text-3); }

.upload-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.upload-preview:empty { display: none; }

.preview-item {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-2);
}
.preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-item video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }

.preview-video-tag {
    position: absolute;
    left: 4px;
    bottom: 4px;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: 11px;
    line-height: 1.6;
    pointer-events: none;
}

.preview-del {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.preview-del:hover { background: var(--danger); }

/* 编辑帖子时可直接拖动排序的图片 / 视频 */
[data-media-sort] .preview-item {
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
[data-media-sort] .preview-item.dragging {
    opacity: .55;
    cursor: grabbing;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary);
}
body.media-dragging {
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none;
}

.post-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 22px 20px;
}
.gallery-item {
    display: block;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    line-height: 0;
}
.gallery-item img {
    display: block;
    width: auto;
    height: auto;
    max-width: 220px;
    max-height: 220px;
    object-fit: cover;
    transition: transform .25s;
}
.gallery-item:hover img { transform: scale(1.04); }
.post-gallery.gallery-single .gallery-item img { max-width: 100%; max-height: 460px; }

/* 帖子里的视频：用原生播放器展示 */
.gallery-item.gallery-video { line-height: 0; background: #000; }
.gallery-item video {
    display: block;
    width: auto;
    height: auto;
    max-width: 420px;
    max-height: 460px;
    background: #000;
}
.post-gallery.gallery-single .gallery-item video { max-width: 100%; }

/* ------------------------------ 等级排行榜 ------------------------------ */

.my-rank {
    display: flex;
    align-items: center;
    gap: 14px;
}
.my-rank-info { flex: 1; min-width: 0; }
.my-rank-name { font-weight: 700; font-size: 15.5px; }
.my-rank-pos { text-align: right; }
.my-rank-pos .n { font-size: 17px; font-weight: 700; color: var(--primary); }
.my-rank-pos .l { font-size: 12.5px; color: var(--text-3); }

.podium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
.podium-item {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 16px 18px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.podium-medal { font-size: 26px; line-height: 1; margin-bottom: 8px; }
.podium-item .avatar { display: block; margin: 0 auto 8px; }
.podium-name {
    display: block;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 5px;
    word-break: break-word;
}
.podium-level { font-size: 13px; color: var(--text-2); margin-bottom: 10px; }
.podium-value { font-size: 17px; font-weight: 700; color: var(--primary); }
.podium-rank { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }

.podium-1 { border-color: #e0b64b; box-shadow: 0 6px 22px rgba(224, 182, 75, .22); }
.podium-2 { border-color: #c2c8d4; }
.podium-3 { border-color: #d8a97e; }
.podium-1 .podium-medal { font-size: 32px; }

.rank-table td { vertical-align: middle; }
.rank-no {
    display: inline-grid;
    place-items: center;
    flex: none;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 700;
}
.rank-user { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rank-user a { font-weight: 600; color: var(--text); }
.rank-me { background: var(--primary-soft); }
.rank-me .rank-no { background: var(--primary); color: #fff; }

@media (max-width: 720px) {
    .post-gallery { padding-left: 16px; padding-right: 16px; }
    .podium { grid-template-columns: 1fr; }
    .my-rank { flex-wrap: wrap; }
    .my-rank-pos { text-align: left; }
}

/* ------------------------------ 响应式 ------------------------------ */

@media (max-width: 900px) {
    /* 用 !important 覆盖各页面写在 style 属性里的两栏网格，保证手机端一定变成单栏 */
    .layout { grid-template-columns: minmax(0, 1fr) !important; }
    .admin-wrap { grid-template-columns: 1fr; }
    .admin-side {
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .admin-nav { flex-direction: row; flex-wrap: wrap; }
    .admin-nav .nav-group { display: flex; flex-direction: column; }
}

@media (max-width: 720px) {
    .topbar-inner { height: auto; padding: 9px 14px; flex-wrap: wrap; gap: 10px; }
    .nav { order: 3; width: 100%; }
    .search { order: 4; max-width: none; margin-left: 0; width: 100%; }
    .brand-text { display: none; }
    .user-menu-name { display: none; }
    .container { padding: 16px 14px 50px; }
    .post-head, .post-body, .post-actions { padding-left: 16px; padding-right: 16px; }
    .topic-item, .comment-item, .msg-row { padding-left: 14px; padding-right: 14px; }
    .topic-side { display: none; }
    .bubble { max-width: 84%; }
    .flash-wrap { padding: 0 14px; }
}

/* 中等宽度（721–900px）：压缩顶栏，避免导航 + 搜索 + 操作区挤出横向滚动条 */
@media (max-width: 900px) and (min-width: 721px) {
    .topbar-inner { padding: 0 14px; gap: 10px; }
    .nav-link { padding: 7px 9px; font-size: 14px; }
    .search { max-width: 190px; }
    .user-menu-name { display: none; }
    .topbar-actions { gap: 4px; }
}

/* =======================================================================
   网站 Logo（后台可上传）
   ======================================================================= */

.brand-logo.has-image {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: transparent;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.brand-logo.has-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 后台 Logo 设置 */
.logo-setting {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.logo-setting-main { flex: 1; min-width: 200px; }
.logo-preview {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-2);
    display: grid;
    place-items: center;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    background: var(--brand-grad);
    flex-shrink: 0;
}
.logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =======================================================================
   金币展示
   ======================================================================= */

.um-coins {
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--warning);
}

.coin-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--warning-soft);
    color: var(--warning);
    font-size: 12.5px;
    font-weight: 700;
}

/* =======================================================================
   付费帖标识
   ======================================================================= */

.flag-pay { background: var(--warning-soft); color: var(--warning); }

/* =======================================================================
   付费帖解锁
   ======================================================================= */

.locked-body {
    position: relative;
    overflow: hidden;
    max-height: 220px;
}
.locked-preview {
    position: relative;
    z-index: 1;
    white-space: pre-wrap;
    word-break: break-word;
}
.locked-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 130px;
    background: linear-gradient(to top, var(--surface) 12%, transparent);
    z-index: 2;
    pointer-events: none;
}

.unlock-box {
    margin: 4px 22px 22px;
    padding: 26px 22px;
    text-align: center;
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}
.unlock-icon { font-size: 42px; line-height: 1; margin-bottom: 10px; }
.unlock-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.unlock-desc { color: var(--text-2); font-size: 14px; margin-bottom: 16px; }
.unlock-desc strong { color: var(--warning); }

.unlocked-hint {
    margin: 0 22px 20px;
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    background: var(--success-soft);
    color: var(--success);
    font-size: 13.5px;
    font-weight: 600;
}

/* =======================================================================
   首页公告弹窗
   ======================================================================= */

.notice-popup {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.notice-popup-mask {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 32, .5);
    backdrop-filter: blur(3px);
    animation: noticeFade .22s ease;
}
.notice-popup-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    margin: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: noticePop .28s cubic-bezier(.2, .9, .3, 1.2);
}
.notice-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
    font-weight: 700;
    font-size: 15.5px;
}
.notice-popup-close {
    border: none;
    background: transparent;
    color: var(--text-3);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    border-radius: 8px;
}
.notice-popup-close:hover { color: var(--danger); background: var(--bg-soft); }
.notice-popup-body {
    padding: 20px;
    color: var(--text-2);
    font-size: 14.5px;
    max-height: 52vh;
    overflow-y: auto;
}
.notice-popup-foot {
    padding: 0 20px 20px;
    text-align: right;
}

@keyframes noticeFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes noticePop {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 更新说明区块（在线更新页 + 后台弹窗共用） */
.update-notes {
    margin-top: 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    overflow: hidden;
}
.update-notes-title {
    padding: 10px 14px;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--text);
    border-bottom: 1px solid var(--border-soft);
}
.update-notes-body {
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--text-2);
    max-height: 260px;
    overflow-y: auto;
}

/* =======================================================================
   前台管理员操作卡片
   ======================================================================= */

.admin-inline .card-header { border-bottom: 1px solid var(--border-soft); }

.admin-inline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}
.admin-inline-grid form {
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.admin-inline-row { display: flex; gap: 8px; align-items: center; }
.admin-inline-row .form-control { flex: 1; min-width: 0; }

.check-line {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    font-size: 13.5px;
    color: var(--text-2);
    cursor: pointer;
}
.check-line input { width: auto; }

/* =======================================================================
   圆角细节优化
   ======================================================================= */

.card,
.topic-item,
.side-card,
.post-card {
    border-radius: var(--radius);
}

.topic-item { border-radius: var(--radius); }
.topic-item:hover { background: var(--surface-2); }

.form-control {
    border-radius: var(--radius-sm);
}

.flash { border-radius: var(--radius-sm); }

.msg-bubble,
.bubble { border-radius: var(--radius); }

@media (max-width: 720px) {
    .unlock-box { margin: 4px 16px 18px; }
    .unlocked-hint { margin: 0 16px 16px; }
    .admin-inline-grid { grid-template-columns: 1fr; }
}

/* =======================================================================
   图标
   ======================================================================= */

.ico {
    display: inline-block;
    flex: none;
    vertical-align: -3px;
}
.btn .ico { vertical-align: -2px; }


.icon-btn { transition: background .15s, color .15s, transform .08s; }
.icon-btn:hover { transform: translateY(-1px); }

/* =======================================================================
   等级徽章
   ======================================================================= */

.lv-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 9px 1px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 18px;
    color: #fff;
    background: #94a3b8;
    vertical-align: middle;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 4px rgba(20, 30, 60, .2);
    overflow: hidden;
}
.lv-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 58%);
    pointer-events: none;
}

.lv-1 { background: linear-gradient(135deg, #aab4c5, #7f8ca3); }
.lv-2 { background: linear-gradient(135deg, #4cc9f0, #2b8fd6); }
.lv-3 { background: linear-gradient(135deg, #34d399, #12a150); }
.lv-4 { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.lv-5 { background: linear-gradient(135deg, #fb923c, #ea580c); }
.lv-6 { background: linear-gradient(135deg, #f472b6, #db2777); }
.lv-7 { background: linear-gradient(135deg, #7fb8ff, #3d7eea); }
.lv-8 {
    background: linear-gradient(120deg, #f43f5e, #f59e0b 48%, #8b5cf6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 12px rgba(244, 63, 94, .55);
    animation: lvShine 3s ease-in-out infinite;
}
@keyframes lvShine {
    0%, 100% { filter: saturate(1) brightness(1); }
    50%      { filter: saturate(1.35) brightness(1.12); }
}

/* =======================================================================
   头像 & 头像框
   ======================================================================= */

.avatar {
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1.5px var(--border);
    transition: box-shadow .2s, transform .2s;
}

/* 按等级给头像描一圈彩色边框 */
.avatar-lv-1 { box-shadow: 0 0 0 2px #aab4c5; }
.avatar-lv-2 { box-shadow: 0 0 0 2px #38bdf8; }
.avatar-lv-3 { box-shadow: 0 0 0 2px #22c55e; }
.avatar-lv-4 { box-shadow: 0 0 0 2px #f59e0b; }
.avatar-lv-5 { box-shadow: 0 0 0 2px #f97316; }
.avatar-lv-6 { box-shadow: 0 0 0 2px #ec4899; }
.avatar-lv-7 { box-shadow: 0 0 0 2px var(--violet); }
.avatar-lv-8 { box-shadow: 0 0 0 2px #f43f5e, 0 0 12px rgba(244, 63, 94, .55); }

/* 渐变头像框（用于个人主页 / 领奖台） */
.avatar-ring {
    position: relative;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from 140deg, #6366f1, #a855f7, #ec4899, #f59e0b, #6366f1);
    box-shadow: 0 6px 18px rgba(99, 102, 241, .3);
}
.avatar-ring > .avatar { border: 2px solid var(--surface); box-shadow: none; }
.avatar-ring.lv-1 { background: conic-gradient(from 140deg, #cbd5e1, #94a3b8, #cbd5e1); }
.avatar-ring.lv-2 { background: conic-gradient(from 140deg, #7dd3fc, #38bdf8, #7dd3fc); }
.avatar-ring.lv-3 { background: conic-gradient(from 140deg, #6ee7b7, #22c55e, #6ee7b7); }
.avatar-ring.lv-4 { background: conic-gradient(from 140deg, #fcd34d, #f59e0b, #fcd34d); }
.avatar-ring.lv-5 { background: conic-gradient(from 140deg, #fdba74, #f97316, #fdba74); }
.avatar-ring.lv-6 { background: conic-gradient(from 140deg, #f9a8d4, #ec4899, #f9a8d4); }
.avatar-ring.lv-7 { background: conic-gradient(from 140deg, #c4b5fd, var(--violet), #c4b5fd); }
.avatar-ring.lv-8 { background: conic-gradient(from 140deg, #f43f5e, #f59e0b, var(--violet), #f43f5e); }
.avatar-ring.lv-8 { box-shadow: 0 6px 22px rgba(244, 63, 94, .45); }

/* =======================================================================
   职位徽章
   ======================================================================= */

.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    vertical-align: middle;
    border: 1px solid transparent;
    white-space: nowrap;
}
.role-admin {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    color: #fff;
    box-shadow: 0 1px 5px rgba(225, 29, 72, .35);
}
.role-mod {
    background: linear-gradient(135deg, #a78bfa, #6d28d9);
    color: #fff;
    box-shadow: 0 1px 5px rgba(109, 40, 217, .32);
}
.role-cat {
    background: linear-gradient(135deg, #38bdf8, #0284c7);
    color: #fff;
    box-shadow: 0 1px 5px rgba(2, 132, 199, .32);
}
.role-audit {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #fff;
    box-shadow: 0 1px 5px rgba(217, 119, 6, .32);
}
.role-patrol {
    background: linear-gradient(135deg, #34d399, #059669);
    color: #fff;
    box-shadow: 0 1px 5px rgba(5, 150, 105, .32);
}
.role-user { background: var(--bg-soft); color: var(--text-2); }
.role-custom { background: var(--primary-soft); color: var(--primary); }

/* =======================================================================
   评论区操作按钮
   ======================================================================= */

.comment-foot { gap: 8px; }
.comment-foot button,
.comment-foot a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    color: var(--text-3);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s, color .15s;
}
.comment-foot button:hover,
.comment-foot a:hover {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
}
.comment-foot .del:hover {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}
.comment-foot .ico { width: 13px; height: 13px; }

/* =======================================================================
   小标签 / 其它细节
   ======================================================================= */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: 1px solid transparent;
    line-height: 18px;
}
.chip-primary { border-color: color-mix(in srgb, var(--primary) 26%, transparent); }
.chip-warning { border-color: color-mix(in srgb, var(--warning) 26%, transparent); }
.chip-danger  { border-color: color-mix(in srgb, var(--danger) 26%, transparent); }
.chip-success { border-color: color-mix(in srgb, var(--success) 26%, transparent); }
.chip-info    { border-color: color-mix(in srgb, var(--info) 26%, transparent); }

/* .rank-no 统一由基础定义提供，不再叠加内阴影 */
.podium-item .avatar-ring { margin: 0 auto 8px; }

/* 私信 / 通知 顶部标签 */
.msg-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.msg-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: all .15s;
}
.msg-tab:hover { border-color: var(--primary); color: var(--primary); }
.msg-tab.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-600));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 38%, transparent);
}
.msg-tab-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.msg-tab.active .msg-tab-badge { background: rgba(255, 255, 255, .28); }

/* =======================================================================
   安装向导 · 数据库选择
   ======================================================================= */

/* ---- 安装向导 ---- */

.install-wrap {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 22px;
    align-items: start;
    max-width: 1000px;
    margin: 26px auto;
}
.install-side { display: grid; gap: 16px; }

.install-hero {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-radius: var(--radius);
    background: var(--brand-grad);
    color: #fff;
    box-shadow: var(--shadow);
}
.install-hero::after {
    content: "";
    position: absolute;
    right: -50px;
    top: -70px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .13);
}
.install-hero-brand { position: relative; display: flex; align-items: center; gap: 12px; }
.install-hero-logo {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 14px;
    background: rgba(255, 255, 255, .2);
    display: grid;
    place-items: center;
    font-size: 22px;
    font-weight: 700;
}
.install-hero-name { font-size: 19px; font-weight: 700; }
.install-hero-ver { margin-top: 2px; font-size: 12.5px; color: rgba(255, 255, 255, .85); }
.install-hero-lead { position: relative; margin: 16px 0 0; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .95); }
.install-hero-tags { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.install-hero-tags span {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    background: rgba(255, 255, 255, .18);
}

.install-side-title { font-size: 14px; font-weight: 700; margin: 0 0 14px; }
.install-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.install-features li { display: flex; gap: 10px; align-items: flex-start; }
.install-features .fi-ico {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--primary-soft);
    color: var(--primary);
}
.install-features b { display: block; font-size: 13.5px; color: var(--text); }
.install-features small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-3); line-height: 1.5; }

.install-title { font-size: 21px; margin: 0 0 6px; }
.install-sub { color: var(--text-3); font-size: 13.5px; margin: 0 0 18px; }

.install-section {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    margin: 22px 0 12px;
}
.install-section:first-child { margin-top: 0; }
.install-section .step {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 11.5px;
    display: grid;
    place-items: center;
}
.install-section::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); }

.install-done { max-width: 460px; margin: 64px auto; }
.install-done .card-body { text-align: center; padding: 40px 26px; }
.install-done-ico { font-size: 46px; line-height: 1; }
.install-done-title { font-size: 21px; margin: 14px 0 8px; }
.install-done-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }

@media (max-width: 900px) {
    .install-wrap { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 520px) {
    .install-features { grid-template-columns: 1fr; }
    .install-hero { padding: 20px; }
}

.db-choice { display: grid; gap: 10px; }
.db-choice-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.db-choice-item:hover { border-color: var(--primary); }
.db-choice-item input { margin-top: 3px; accent-color: var(--primary); }
.db-choice-item b { display: block; font-size: 14px; color: var(--text); }
.db-choice-item small { display: block; margin-top: 2px; color: var(--text-3); font-size: 12.5px; line-height: 1.5; }
.db-choice-item:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 0 0 1px var(--primary) inset;
}

/* =======================================================================
   超小屏微调（≤ 400px，覆盖 360 / 375 / 390 等常见手机宽度）
   ======================================================================= */

@media (max-width: 400px) {
    /* ---- 基础留白收紧 ---- */
    .container { padding: 14px 12px 44px; }
    .topbar-inner { padding: 8px 12px; gap: 8px; }
    .brand { gap: 7px; font-size: 16px; }
    .brand-logo { width: 30px; height: 30px; border-radius: 8px; font-size: 15px; }

    /* ---- 顶部导航：允许换行，杜绝横向溢出 ---- */
    .nav { flex-wrap: wrap; gap: 0; }
    .nav-link { padding: 7px 10px; font-size: 14px; }
    .topbar-actions { gap: 4px; }
    .icon-btn { width: 34px; height: 34px; }
    .user-menu-dropdown { width: min(230px, calc(100vw - 24px)); }

    /* ---- 卡片 / 列表内边距收紧 ---- */
    .card-body { padding: 14px; }
    .card-header { padding-left: 14px; padding-right: 14px; }
    .post-head, .post-body, .post-actions, .post-gallery { padding-left: 13px; padding-right: 13px; }
    .topic-item, .comment-item, .msg-row { padding-left: 12px; padding-right: 12px; gap: 10px; }
    .unlock-box { margin: 4px 13px 18px; }
    .unlocked-hint { margin: 0 13px 16px; }

    /* ---- 标题缩放，避免大字号把行挤爆 ---- */
    .post-head h1 { font-size: 19px; }
    .auth-title { font-size: 19px; }
    .admin-topbar h1 { font-size: 18px; }
    .card-header { font-size: 14.5px; }

    /* ---- 统计卡片：小屏尽量一排 3 个 ---- */
    .stat-grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 9px; }
    .stat-card { padding: 12px; }
    .stat-card .stat-num { font-size: 20px; }

    /* ---- 配图：小屏单列铺满，不再固定 220px ---- */
    .gallery-item img { max-width: 100%; max-height: none; }

    /* ---- 领奖台 / 个人排名 ---- */
    .podium-item { padding: 16px 12px 14px; }
    .podium-medal { font-size: 22px; }
    .podium-1 .podium-medal { font-size: 27px; }

    /* ---- 私信气泡 ---- */
    .bubble { max-width: 90%; }

    /* ---- 表单：小屏一律单列 ---- */
    .form-row > * { min-width: 100%; }
    .auth-wrap { margin: 18px auto; }

    /* ---- 分页：压缩尺寸，避免撑破一行 ---- */
    .pager { padding: 14px 4px; gap: 4px; }
    .pager-btn { min-width: 30px; height: 30px; padding: 0 9px; font-size: 13px; }
    .pager-info { margin-left: 0; width: 100%; text-align: center; }

    /* ---- 后台：整体留白收紧 ---- */
    .admin-side { padding: 12px 8px; }
    .admin-main { padding: 16px 12px 48px; }
    .admin-nav a { padding: 8px 10px; font-size: 13.5px; }
    .admin-search .form-control { max-width: none; }

    /* ---- 表格：更紧凑（仍可横向滚动） ---- */
    table.table { font-size: 13.5px; }
    table.table th, table.table td { padding: 9px 10px; }

    /* ---- 弹窗内边距 ---- */
    .notice-popup { padding: 12px; }
    .notice-popup-head { padding: 13px 15px; }
    .notice-popup-body { padding: 15px; max-height: 44vh; }
    .notice-popup-foot {
        padding: 0 15px 15px;
        display: flex;
        flex-direction: column-reverse;
        gap: 8px;
        text-align: center;
    }
    .notice-popup-foot .btn { width: 100%; }
}

/* =======================================================================
   手机端左侧抽屉菜单（前台）
   ======================================================================= */

.menu-toggle {
    display: none;
    width: 38px;
    height: 38px;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-2);
    cursor: pointer;
    transition: color .15s, border-color .15s, transform .08s;
}
.menu-toggle:hover { color: var(--primary); border-color: var(--primary); }
.menu-toggle:active { transform: scale(.95); }

.user-menu-trigger { position: relative; }
.um-dot { display: none; }

.drawer {
    position: fixed;
    inset: 0;
    z-index: 300;
    visibility: hidden;
    pointer-events: none;
}
.drawer.open { visibility: visible; pointer-events: auto; }

.drawer-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    opacity: 0;
    transition: opacity .26s ease;
}
.drawer.open .drawer-mask { opacity: 1; }

.drawer-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(70vw, 268px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.drawer.open .drawer-panel { transform: translateX(0); }

.drawer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 15px 13px;
    border-bottom: 1px solid var(--border-soft);
}
.drawer-head-text { flex: 1; min-width: 0; }
.drawer-head-text strong { display: block; font-size: 15.5px; }
.drawer-head-text span {
    display: block;
    font-size: 12.5px;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drawer-close {
    width: 32px;
    height: 32px;
    flex: none;
    display: grid;
    place-items: center;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    color: var(--text-2);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}
.drawer-close:hover { background: var(--danger-soft); color: var(--danger); }

.drawer-user {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 15px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text);
}
.drawer-user-name {
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.drawer-user-coins { font-size: 12.5px; font-weight: 600; color: var(--warning); margin-top: 3px; }

.drawer-nav { padding: 6px 10px 4px; display: flex; flex-direction: column; gap: 2px; }
.drawer-group {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--text-3);
    padding: 13px 10px 5px;
}
.drawer-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 14.5px;
}
.drawer-nav a:active,
.drawer-nav a:hover { background: var(--bg-soft); color: var(--text); }
.drawer-nav a.active { background: var(--primary-soft); color: var(--primary); font-weight: 500; }
.drawer-nav a.drawer-admin { color: var(--primary); font-weight: 500; }
.drawer-count {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.drawer-foot {
    margin-top: auto;
    padding: 12px 15px 20px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.drawer-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-2);
    font-size: 14.5px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.drawer-link:hover { background: var(--bg-soft); color: var(--text); }
.drawer-link.danger { color: var(--danger); }
.drawer-link.danger:hover { background: var(--danger-soft); }

body.drawer-open { overflow: hidden; }

@media (min-width: 721px) {
    .drawer { display: none !important; }
}

@media (max-width: 720px) {
    .menu-toggle { display: inline-flex; }

    .topbar-inner {
        height: auto;
        padding: 8px 12px 10px;
        gap: 8px;
        flex-wrap: wrap;
    }
    .nav,
    .msg-btn,
    .topbar-post,
    .topbar .theme-toggle { display: none; }
    .topbar-actions { margin-left: auto; gap: 6px; }
    .user-menu-dropdown { display: none; }
    .um-dot { display: block; }

    /* 顶部通栏长条搜索框 */
    .search {
        order: 3;
        display: flex;
        flex: 1 0 100%;
        max-width: none;
        margin-left: 0;
        width: 100%;
    }
    .search input { height: 38px; background: var(--surface); }
}

/* =======================================================================
   手机版底部导航（首页 / 板块 / 发帖 / 消息 / 我的）
   ======================================================================= */

.mobile-tabbar { display: none; }

@media (max-width: 720px) {
    body.site-body { padding-bottom: 78px; }

    /* 首页标签：单行横向滑动，避免换行把内容顶下去 */
    .home-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        gap: 8px;
        margin-bottom: 12px;
        padding-bottom: 2px;
    }
    .home-tabs::-webkit-scrollbar { display: none; }
    .home-tabs-group { flex: none; gap: 5px; padding: 3px; }
    .home-tabs-cats { flex: none; }
    .cat-tab { padding: 5px 11px; font-size: 13px; }

    /* 手机版帖子缩略图：缩小并保持同一行 */
    .topic-thumbs { gap: 6px; }
    .topic-thumb { width: 56px; height: 56px; border-radius: 7px; }

    /* 板块页头：操作区换到第二行铺满 */
    .cat-hero { padding: 14px 15px; }
    .cat-hero-body { flex-wrap: wrap; row-gap: 12px; }
    .cat-hero-text { flex: 1 1 160px; }
    .cat-hero-act {
        flex: 1 1 100%;
        justify-content: space-between;
        border-top: 1px solid var(--border-soft);
        padding-top: 12px;
    }
    .cat-hero-name { font-size: 17px; }

    .mobile-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 130;
        height: 58px;
        padding: 0 4px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--surface);
        background: color-mix(in srgb, var(--surface) 94%, transparent);
        backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid var(--border);
    }

    .mtab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: var(--text-3);
        font-size: 11px;
        line-height: 1.1;
    }
    .mtab.active { color: var(--primary); }
    .mtab-ico { position: relative; display: grid; place-items: center; height: 22px; }
    .mtab-dot {
        position: absolute;
        top: -4px;
        right: -9px;
        min-width: 15px;
        height: 15px;
        padding: 0 3px;
        border-radius: 999px;
        background: var(--danger);
        color: #fff;
        font-size: 10px;
        line-height: 15px;
        text-align: center;
        font-weight: 600;
    }

    /* 发帖按钮：融入底部栏（不再凸起） */
    .mtab-post { justify-content: center; }
    .mtab-post-btn {
        width: 42px;
        height: 26px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        background: var(--brand-grad);
        color: #fff;
        box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 35%, transparent);
    }
    .mtab-post .mtab-txt { margin-top: 3px; }
}

/* =======================================================================
   手机端左侧抽屉菜单（管理后台）
   ======================================================================= */

.admin-mobilebar { display: none; }

.admin-side-close {
    display: none;
    margin-left: auto;
    width: 30px;
    height: 30px;
    place-items: center;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    color: var(--text-2);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.admin-side-close:hover { background: var(--danger-soft); color: var(--danger); }

.admin-mask {
    position: fixed;
    inset: 0;
    z-index: 240;
    background: rgba(15, 23, 42, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .26s ease, visibility .26s ease;
}

@media (max-width: 900px) {
    .admin-wrap { grid-template-columns: minmax(0, 1fr); }
    .admin-main { padding: 0 14px 48px; }

    .admin-mobilebar {
        display: flex;
        align-items: center;
        gap: 10px;
        position: sticky;
        top: 0;
        z-index: 120;
        margin: 0 -14px 16px;
        padding: 9px 14px;
        background: var(--surface);
        background: color-mix(in srgb, var(--surface) 92%, transparent);
        backdrop-filter: saturate(180%) blur(12px);
        border-bottom: 1px solid var(--border);
    }
    .admin-menu-btn {
        width: 36px;
        height: 36px;
        flex: none;
        display: grid;
        place-items: center;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--surface);
        color: var(--text-2);
        cursor: pointer;
    }
    .admin-menu-btn:active { transform: scale(.95); }
    .admin-mobilebar-title {
        flex: 1;
        min-width: 0;
        font-weight: 600;
        font-size: 15.5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .admin-mobilebar-home {
        width: 36px;
        height: 36px;
        flex: none;
        display: grid;
        place-items: center;
        border-radius: var(--radius-sm);
        background: var(--bg-soft);
        color: var(--text-2);
    }

    .admin-side {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100vh;
        width: min(80vw, 300px);
        z-index: 260;
        padding: 18px 12px;
        border-right: 1px solid var(--border);
        border-bottom: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.22, .61, .36, 1);
        box-shadow: none;
    }
    body.admin-menu-open .admin-side {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }
    body.admin-menu-open .admin-mask { opacity: 1; visibility: visible; }
    body.admin-menu-open { overflow: hidden; }

    .admin-side-close { display: grid; }
    .admin-nav { flex-direction: column; flex-wrap: nowrap; }
    .admin-nav .nav-group { display: flex; }
}

@media (max-width: 400px) {
    .topbar-inner { padding: 0 10px; gap: 8px; }
    .menu-toggle { width: 34px; height: 34px; }
    .admin-main { padding: 0 12px 44px; }
    .admin-mobilebar { margin: 0 -12px 14px; padding: 9px 12px; }
    .admin-side { padding: 14px 10px; }
}

/* =======================================================================
   后台「站点设置」：左侧设置项列表
   ======================================================================= */

.settings-layout {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.settings-nav {
    position: sticky;
    top: 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.settings-nav-title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--text-3);
    padding: 4px 10px 8px;
}
.settings-nav a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 14px;
}
.settings-nav a:hover { background: var(--bg-soft); color: var(--text); }
.settings-nav a.active { background: var(--primary-soft); color: var(--primary); font-weight: 500; }

.settings-main { min-width: 0; }
.settings-main .card { scroll-margin-top: 16px; }

.settings-actions {
    position: sticky;
    bottom: 12px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .settings-nav {
        position: static;
        flex-direction: row;
        gap: 6px;
        padding: 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .settings-nav::-webkit-scrollbar { display: none; }
    .settings-nav-title { display: none; }
    .settings-nav a {
        white-space: nowrap;
        padding: 7px 13px;
        border-radius: 999px;
        background: var(--bg-soft);
        font-size: 13.5px;
    }
    .settings-nav a.active { background: var(--primary); color: #fff; }
    .settings-main .card { scroll-margin-top: 66px; }
    .settings-actions { bottom: 8px; }
}

/* =======================================================================
   独立板块页（categories.php）
   ======================================================================= */

/* ---- 页面横幅 ---- */
.cat-hero-page {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 22px 24px;
    margin-bottom: 22px;
    border-radius: var(--radius-lg);
    color: #fff;
    background: var(--brand-grad-hero);
    box-shadow: 0 12px 30px color-mix(in srgb, #4d91ff 26%, transparent);
}
.cat-hero-page::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -70px;
    top: -110px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
}
.cat-hero-page::after {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    right: 96px;
    bottom: -96px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
}
.chp-main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}
.chp-ico {
    width: 52px;
    height: 52px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .32);
    color: #fff;
}
.chp-title { margin: 0; font-size: 23px; font-weight: 750; letter-spacing: -.5px; line-height: 1.25; }
.chp-sub { margin: 3px 0 0; font-size: 13px; opacity: .88; }
.chp-stats { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; }
.chp-stat { text-align: center; line-height: 1.2; }
.chp-stat b { display: block; font-size: 21px; font-weight: 750; }
.chp-stat span { font-size: 11.5px; opacity: .85; }
.chp-divider { width: 1px; height: 26px; background: rgba(255, 255, 255, .3); }

/* ---- 板块网格 ---- */
.cat-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* 二级分类分组标题 */
.cat-group { margin-bottom: 26px; }
.cat-group:last-child { margin-bottom: 0; }
.cat-group-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
}
.cat-group-ico {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--brand-grad);
    color: #fff;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--primary) 30%, transparent);
}
.cat-group-text { flex: 1; min-width: 0; }
.cat-group-name { font-size: 17px; font-weight: 750; margin: 0; line-height: 1.3; letter-spacing: -.3px; }
.cat-group-desc { margin: 2px 0 0; font-size: 12.5px; color: var(--text-3); }
.cat-group-meta {
    flex: none;
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
}

/* ---- 板块卡片：每个板块一种配色 ---- */
.cat-card {
    --cc: var(--primary);
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 18px 18px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat-card--c1 { --cc: #4d91ff; }
.cat-card--c2 { --cc: #0ea5e9; }
.cat-card--c3 { --cc: #10b981; }
.cat-card--c4 { --cc: #f59e0b; }
.cat-card--c5 { --cc: #ef4444; }
.cat-card--c6 { --cc: #ec4899; }
.cat-card--c7 { --cc: var(--violet); }
.cat-card--c8 { --cc: #14b8a6; }

.cat-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cc), color-mix(in srgb, var(--cc) 30%, transparent));
    opacity: .5;
    transition: opacity .2s ease;
}
.cat-card::after {
    content: "";
    position: absolute;
    width: 132px;
    height: 132px;
    right: -48px;
    top: -58px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cc) 15%, transparent);
    pointer-events: none;
    transition: transform .3s ease, opacity .3s ease;
}
.cat-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--cc) 45%, var(--border));
    box-shadow: 0 8px 24px color-mix(in srgb, var(--cc) 18%, rgba(20, 30, 60, .12));
}
.cat-card:hover::before { opacity: 1; }
.cat-card:hover::after { transform: scale(1.18); }

.cat-card-go {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 2;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cc) 13%, transparent);
    color: var(--cc);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .18s ease, transform .18s ease;
}
.cat-card:hover .cat-card-go { opacity: 1; transform: translateX(0); }

.cat-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 11px;
}
.cat-card-ico {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--cc), color-mix(in srgb, var(--cc) 62%, #fff));
    box-shadow: 0 7px 16px color-mix(in srgb, var(--cc) 32%, transparent);
    transition: transform .18s ease;
}
.cat-card:hover .cat-card-ico { transform: scale(1.06) rotate(-3deg); }
.cat-card-head { min-width: 0; }
.cat-card-name { font-size: 15.5px; font-weight: 700; letter-spacing: -.1px; }
.cat-card-count { margin-top: 2px; font-size: 12px; color: var(--text-3); }

.cat-card-desc {
    position: relative;
    z-index: 1;
    margin: 12px 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cat-card-latest {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    font-size: 12.5px;
    color: var(--text-3);
    overflow: hidden;
}
.cat-card-latest .ccl-ico { flex: none; display: inline-flex; color: var(--cc); opacity: .85; }
.cat-card-latest .ccl-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-card-latest .ccl-empty { color: var(--text-3); opacity: .75; }

@media (hover: none) {
    .cat-card-go { display: none; }
}

/* =======================================================================
   我的金币 / 卡密充值（coins.php）
   ======================================================================= */

.coin-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.coin-balance {
    display: flex;
    align-items: center;
    gap: 14px;
}
.coin-balance-ico {
    width: 52px;
    height: 52px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 26px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 6px 16px rgba(245, 158, 11, .35);
}
.coin-balance-num { font-size: 26px; font-weight: 700; line-height: 1.1; }
.coin-balance-label { font-size: 12.5px; color: var(--text-3); }

.card-key-input {
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width: 900px) {
    .cat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .cat-card { padding: 16px; }
    .cat-group { margin-bottom: 22px; }
    .cat-hero-page { padding: 18px 20px; }
    .chp-title { font-size: 20px; }
    .chp-ico { width: 46px; height: 46px; border-radius: 14px; }
}

@media (max-width: 720px) {
    .cat-card { padding: 14px 15px; }
    .cat-card-ico { width: 40px; height: 40px; border-radius: 12px; }
    .cat-card-name { font-size: 15px; }
    .coin-hero { gap: 12px; }
}

@media (max-width: 400px) {
    .topic-thumbs { gap: 5px; }
    .topic-thumb { width: 48px; height: 48px; border-radius: 6px; }
    .coin-balance-num { font-size: 22px; }
    .coin-balance-ico { width: 46px; height: 46px; font-size: 22px; }
    /* 板块卡片一行两个，窄屏下收紧内边距并只留一行简介 */
    .cat-cards { gap: 10px; }
    .cat-card { padding: 12px 13px 12px; }
    .cat-card-top { gap: 9px; }
    .cat-card-ico { width: 32px; height: 32px; border-radius: 10px; }
    .cat-card-name { font-size: 14.5px; }
    .cat-card-count { font-size: 11.5px; }
    .cat-card-desc { -webkit-line-clamp: 1; margin: 8px 0; }
    .cat-card-latest { padding-top: 8px; font-size: 12px; }
    .cat-group-name { font-size: 15px; }
    .cat-hero-page { padding: 16px; gap: 14px; border-radius: var(--radius); }
    .chp-ico { width: 42px; height: 42px; border-radius: 13px; }
    .chp-title { font-size: 18px; }
    .chp-sub { font-size: 12px; }
    .chp-stat b { font-size: 18px; }
    .chp-stats { gap: 12px; }
}

/* =========================================================================
   社区互动三件套 / 用户中心 / 分成提现 / 兑换中心 / 焦点图 / 图片灯箱
   ========================================================================= */

/* ------------------------------ 首页焦点图轮播 ------------------------------ */

.focus-slider {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    aspect-ratio: 21 / 9;
    min-height: 210px;
}
.focus-track { position: absolute; inset: 0; }
.focus-slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.03);
    transition: opacity .6s ease, transform .6s ease;
}
.focus-slide.active { opacity: 1; visibility: visible; transform: scale(1); }
.focus-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.focus-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), #51c4ff 70%);
}
.focus-shade {
    position: absolute;
    inset: 0;
}
.focus-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #fff;
}
.focus-cat {
    align-self: flex-start;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .24);
    backdrop-filter: blur(6px);
}
.focus-title {
    font-size: 20px;
    font-weight: 750;
    line-height: 1.35;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.focus-meta { display: flex; gap: 14px; font-size: 13px; opacity: .92; }
.focus-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    background: rgba(0, 0, 0, .34);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s, background .2s;
    z-index: 3;
}
.focus-slider:hover .focus-nav { opacity: 1; }
.focus-nav:hover { background: rgba(0, 0, 0, .62); }
.focus-prev { left: 12px; }
.focus-next { right: 12px; }
.focus-dots {
    position: absolute;
    bottom: 16px;
    right: 22px;
    display: flex;
    gap: 7px;
    z-index: 3;
}
.focus-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .5);
    cursor: pointer;
    transition: all .25s;
}
.focus-dot.active { width: 22px; background: #fff; }

/* ------------------------------ 图片灯箱 ------------------------------ */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-mask {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 18, .9);
    backdrop-filter: blur(3px);
}
.lightbox-img {
    position: relative;
    z-index: 1;
    max-width: 92vw;
    max-height: 86vh;
    border-radius: var(--radius-sm);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.lightbox-close,
.lightbox-nav {
    position: absolute;
    z-index: 2;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255, 255, 255, .3); }
.lightbox-close { top: 18px; right: 20px; width: 42px; height: 42px; font-size: 26px; line-height: 1; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 30px; line-height: 1; }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-counter {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 5px 14px;
    border-radius: 999px;
    color: #fff;
    font-size: 13.5px;
    background: rgba(255, 255, 255, .16);
}
body.lightbox-open { overflow: hidden; }

/* ------------------------------ 分享菜单 ------------------------------ */

.share-wrap { position: relative; display: inline-flex; }
.share-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 172px;
    padding: 6px;
    display: none;
    flex-direction: column;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}
.share-wrap.open .share-menu { display: flex; }
.share-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--text-2);
    font-size: 14px;
}
.share-menu a:hover { background: var(--bg-soft); color: var(--text); }

/* 帖子详情卡片放行溢出：否则「管理 / 分享」下拉菜单会被卡片 overflow:hidden 裁掉而看不见 */
.card.post-card { overflow: visible; }

/* 收藏按钮激活态 */
.js-fav.is-on { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); font-weight: 600; }
.js-fav.is-on:hover { background: var(--warning-soft); color: var(--warning); }

/* ------------------------------ 每日签到 ------------------------------ */

.checkin-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 6px 4px 20px;
}
.checkin-hero-left { flex: none; text-align: center; padding: 0 10px; }
.checkin-streak { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.checkin-streak-num {
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    background: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.checkin-streak-unit { font-size: 18px; font-weight: 700; color: var(--primary); }
.checkin-streak-label { color: var(--text-3); font-size: 13.5px; margin-top: 6px; }
.checkin-hero-right { flex: 1; min-width: 220px; text-align: right; }
.checkin-reward { margin-bottom: 12px; }
.checkin-reward-label { color: var(--text-3); font-size: 13.5px; }
.checkin-reward-num { font-size: 26px; font-weight: 800; color: var(--text); margin: 3px 0; }
.checkin-reward-hint { color: var(--text-3); font-size: 12.5px; }
.checkin-btn { padding: 0 30px; }
.checkin-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}
.checkin-stat { text-align: center; }
.checkin-stat .n { font-size: 22px; font-weight: 700; color: var(--text); }
.checkin-stat .l { color: var(--text-3); font-size: 13px; margin-top: 2px; }

.checkin-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-head { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--text-3); padding: 4px 0; }
.cal-cell {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 13.5px;
}
.cal-empty { background: transparent; }
.cal-done { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.cal-today { border-color: var(--primary); }
.cal-dot {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary);
}

/* ------------------------------ 排行榜列表 ------------------------------ */

.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--border-soft);
}
.rank-item:last-child { border-bottom: none; }

.rank-no-1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; }
.rank-no-2 { background: linear-gradient(135deg, #cbd5e1, #94a3b8); color: #fff; }
.rank-no-3 { background: linear-gradient(135deg, #fdba74, #f97316); color: #fff; }
.rank-user {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    color: var(--text);
    font-weight: 500;
}
.rank-user > span:not(.lv-badge) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-score { flex: none; font-weight: 700; font-size: 14px; color: var(--primary); }

/* ------------------------------ 分段标签（关注/粉丝） ------------------------------ */

.seg-tabs {
    display: inline-flex;
    gap: 4px;
    max-width: 100%;
    padding: 0;
    margin-bottom: 16px;
    overflow-x: auto;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
    box-shadow: none;
}
.seg-tab {
    position: relative;
    padding: 8px 14px 12px;
    border-radius: 6px;
    color: var(--text-2);
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: color .18s ease;
}
.seg-tab:hover { color: var(--primary); background: transparent; }
.seg-tab.active, .seg-tab.active:hover { color: var(--primary); background: transparent; font-weight: 600; }

/* ------------------------------ 用户卡片网格 ------------------------------ */

.user-grid {
    list-style: none;
    margin: 0;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.user-card-avatar { flex: none; }
.user-card-body { flex: 1; min-width: 0; }
.user-card-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--text);
}
.user-card-name > span:not(.lv-badge) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card-sub { color: var(--text-3); font-size: 12.5px; margin-top: 2px; }

.suggest-row {
    list-style: none;
    margin: 0;
    padding: 0 0 4px;
    display: flex;
    gap: 14px;
    overflow-x: auto;
}
.suggest-user {
    flex: none;
    width: 108px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.suggest-user-name {
    max-width: 100%;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topic-side-action { flex: none; }

/* ------------------------------ 用户中心 ------------------------------ */

.uc-hero { background: linear-gradient(135deg, var(--primary-soft), var(--surface) 62%); }
.uc-hero-main { display: flex; align-items: center; gap: 18px; }
.uc-hero-info { flex: 1; min-width: 0; }
.uc-hero-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 19px;
    font-weight: 700;
}
.uc-hero-sub { color: var(--text-3); font-size: 13.5px; margin-top: 3px; }
.uc-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.uc-hero-avatar { display: inline-flex; flex: 0 0 auto; text-decoration: none; border-radius: 999px; }
.uc-hero-avatar:hover .avatar-ring { box-shadow: 0 0 0 3px var(--primary-soft); }
.uc-hero-stats { display: flex; gap: 10px; margin-top: 16px; }
.uc-hero-stat {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 10px 6px; border-radius: 12px; text-decoration: none;
    background: var(--surface); border: 1px solid var(--border);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.uc-hero-stat:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow); }
.uc-hero-stat-num { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.2; }
.uc-hero-stat-label { font-size: 12px; color: var(--text-3); }

.uc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.uc-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.uc-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--primary); }
.uc-tile-ico {
    flex: none;
    width: 40px;
    height: 40px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--primary);
}
.uc-tile-title { font-weight: 600; font-size: 15px; }
.uc-tile-desc { color: var(--text-3); font-size: 12.5px; line-height: 1.5; }
.uc-tile-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
}
.uc-badge-done { background: var(--success-soft); color: var(--success); }

.uc-ico-checkin  { background: rgba(234, 88, 12, .13);  color: #ea580c; }
.uc-ico-coin     { background: rgba(217, 119, 6, .14);  color: #d97706; }
.uc-ico-exchange { background: rgba(219, 39, 119, .13); color: #db2777; }
.uc-ico-wallet   { background: rgba(22, 163, 74, .14);  color: #16a34a; }
.uc-ico-fav      { background: rgba(245, 158, 11, .15); color: #d97706; }
.uc-ico-follow   { background: rgba(2, 132, 199, .13);  color: #0284c7; }
.uc-ico-msg      { background: rgba(77, 145, 255, .13);  color: #4d91ff; }
.uc-ico-notice   { background: rgba(217, 119, 6, .14);  color: #d97706; }
.uc-ico-level    { background: rgba(202, 138, 4, .16);  color: #ca8a04; }
.uc-ico-rank     { background: var(--violet-soft); color: var(--violet-600); }

/* ------------------------------ 兑换中心 ------------------------------ */

.ex-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.ex-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.ex-card-top { display: flex; align-items: center; justify-content: space-between; }
.ex-card-ico {
    flex: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--primary);
}
.ex-card-cost { font-weight: 700; font-size: 15px; color: var(--warning); }
.ex-card-name { font-weight: 600; font-size: 15.5px; }
.ex-card-desc { color: var(--text-3); font-size: 13px; line-height: 1.55; }
.ex-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}
.ex-card-action { margin-top: 6px; }
.ex-soldout { opacity: .6; }

.code-chip {
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 12.5px;
    letter-spacing: .5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.page-title-side { display: flex; align-items: center; gap: 10px; }

/* ------------------------------ 新增页面响应式 ------------------------------ */

@media (max-width: 900px) {
    .uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .focus-slider { aspect-ratio: 16 / 9; min-height: 190px; }
    .focus-body { padding: 16px 16px 14px; }
    .focus-title { font-size: 16.5px; }
    .focus-meta { gap: 10px; font-size: 12px; }
    .focus-nav { opacity: 1; width: 32px; height: 32px; }
    .focus-dots { bottom: 12px; right: 14px; }

    .checkin-hero { gap: 14px; }
    .checkin-hero-left { flex: 1; }
    .checkin-streak-num { font-size: 42px; }
    .checkin-hero-right { text-align: center; }
    .checkin-reward { margin-bottom: 10px; }
    .checkin-btn { width: 100%; }
    .checkin-hero-right form { display: block; }

    .user-grid { grid-template-columns: minmax(0, 1fr); padding: 14px; }

    .lightbox-nav { width: 40px; height: 40px; font-size: 26px; }
    .lightbox-prev { left: 10px; }
    .lightbox-next { right: 10px; }
    .lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; }

    .uc-hero-main { gap: 14px; }
    .uc-hero-name { font-size: 17.5px; }
    .uc-grid { gap: 10px; }
    .uc-tile { padding: 14px; }
    .ex-grid { gap: 12px; }
    .ex-card { padding: 14px; }
}

@media (max-width: 400px) {
    .focus-slider { aspect-ratio: 4 / 3; min-height: 175px; }
    .focus-title { font-size: 15px; -webkit-line-clamp: 2; }
    .focus-cat { font-size: 11.5px; padding: 2px 9px; }
    .focus-meta span:nth-child(3) { display: none; }

    .checkin-streak-num { font-size: 36px; }
    .checkin-stat .n { font-size: 19px; }
    .checkin-cal { gap: 4px; }
    .cal-cell { font-size: 12.5px; border-radius: 8px; }

    .rank-item { padding: 10px 13px; gap: 9px; }
    .uc-grid { gap: 8px; }
    .uc-tile { padding: 12px; }
    .uc-tile-ico { width: 36px; height: 36px; }
    .uc-tile-title { font-size: 14px; }
    .uc-tile-desc { font-size: 12px; }
    .ex-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   通知列表 / 打赏 / 审核横幅 / 推荐用户 / 付费设置 / 转账气泡
   ========================================================================= */

.flex-gap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ------------------------------ 消息中心：系统通知列表 ------------------------------ */

.notice-list { list-style: none; margin: 0; padding: 0; }
.notice-item {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
}
.notice-item:last-child { border-bottom: none; }
.notice-item.unread { background: var(--primary-soft); }
.notice-dot {
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--border);
}
.notice-item.unread .notice-dot { background: var(--danger); }
.notice-main { flex: 1; min-width: 0; }
.notice-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notice-top strong { font-size: 14.5px; }
.notice-time { margin-left: auto; color: var(--text-3); font-size: 12.5px; }
.notice-content {
    margin-top: 6px;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.7;
    word-break: break-word;
}
.notice-link { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 500; }

/* 待审核标记 */
.flag-pending { background: var(--warning-soft); color: var(--warning); }

/* ------------------------------ 帖子审核横幅 ------------------------------ */

.review-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 4px 22px 16px;
    padding: 14px 18px;
    border: 1px solid var(--warning);
    border-radius: var(--radius-sm);
    background: var(--warning-soft);
}
.review-banner-text { color: var(--warning); font-size: 14px; font-weight: 500; }
.review-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------ 打赏 ------------------------------ */

.tip-amounts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tip-amount {
    min-width: 54px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-2);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all .15s;
}
.tip-amount:hover { border-color: var(--primary); color: var(--primary); }
.tip-amount.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.tip-input-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tip-input-row > .form-control:nth-child(1) { flex: none; width: 132px; }
.tip-input-row > .form-control:nth-child(2) { flex: 1; min-width: 160px; }
.tip-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tip-list li { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13.5px; }
.tip-user { font-weight: 600; }
.tip-coins { font-weight: 700; color: var(--warning); }
.tip-msg { color: var(--text-3); }

/* ------------------------------ 私信侧栏：推荐用户 ------------------------------ */

.reco-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.reco-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 6px;
    border-radius: var(--radius-sm);
}
.reco-list li:hover { background: var(--bg-soft); }
.reco-main { flex: 1; min-width: 0; }
.reco-name { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--text); }
.reco-desc { display: block; margin-top: 1px; color: var(--text-3); font-size: 12px; }

/* ------------------------------ 发帖 / 编辑：付费设置 ------------------------------ */

.pay-setting { display: flex; align-items: center; gap: 8px; max-width: 260px; }
.pay-icon { flex: none; font-size: 18px; }
.pay-setting .form-control { flex: 1; }
.pay-unit { flex: none; color: var(--text-2); font-size: 14px; font-weight: 500; }

/* ------------------------------ 私信：金币转账气泡 ------------------------------ */

.bubble.bubble-transfer {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    border-color: transparent;
    color: #fff;
}
.bubble-transfer-amount { font-weight: 700; font-size: 16px; }
.bubble-transfer-note { margin-top: 4px; font-size: 13px; opacity: .95; }

@media (max-width: 720px) {
    .review-banner { margin: 4px 16px 14px; padding: 12px 14px; }
    .tip-input-row > .form-control:nth-child(1) { width: 110px; }
}

/* =======================================================================
   全局视觉统一 v2：层次 / 阴影 / 动效 / 排版
   ======================================================================= */

/* --- 卡片：统一柔和投影 + 悬停微抬升 --- */
.card {
    box-shadow: var(--shadow-card);
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.card:hover {
    box-shadow: var(--shadow-card-hover);
}

/* 侧边栏卡片不抬升，避免干扰阅读 */
.side-card { box-shadow: var(--shadow-sm); }
.side-card:hover { box-shadow: var(--shadow-sm); }

/* --- 卡片头部：更清晰的分层与层次 --- */
.card-header {
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    letter-spacing: .1px;
}


/* --- 标题排版：统一字重与字距，建立视觉层次 --- */
.page-title h1,
.cat-hero-name {
    font-weight: 750;
    letter-spacing: -.35px;
}
.topic-title { font-weight: 650; letter-spacing: -.1px; }

/* --- 帖子列表：悬停左侧高亮条 + 平滑过渡 --- */
.topic-item {
    position: relative;
    transition: background .16s ease, transform .16s ease;
}
.topic-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--primary), var(--violet));
    opacity: 0;
    transform: scaleY(.4);
    transition: opacity .18s ease, transform .18s ease;
}
.topic-item:hover::before { opacity: 1; transform: scaleY(1); }
.topic-item:hover { transform: translateX(2px); }
.topic-item .avatar { transition: transform .18s ease; }
.topic-item:hover .avatar { transform: scale(1.04); }

/* --- 焦点图：底部渐变遮罩更浓，标题更醒目，轻微 Ken Burns --- */
.focus-slide .focus-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 6s ease;
}
.focus-slide.active .focus-img { transform: scale(1.06); }
.focus-shade {
    background: linear-gradient(180deg, rgba(10, 15, 30, 0) 28%, rgba(10, 15, 30, .42) 62%, rgba(10, 15, 30, .82));
}
.focus-title { font-weight: 750; letter-spacing: -.2px; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.focus-dot { transition: width .25s ease, background .25s ease, opacity .25s ease; }
.focus-dot.active { width: 22px; border-radius: 4px; }

/* --- 帖子详情：正文阅读排版优化 --- */
.post-body {
    font-size: 15.5px;
    line-height: 1.85;
    letter-spacing: .1px;
    word-break: break-word;
}
.post-body p { margin: 0 0 14px; }
.post-body p:last-child { margin-bottom: 0; }
.post-head h1 {
    font-size: 23px;
    font-weight: 750;
    letter-spacing: -.4px;
    line-height: 1.45;
}

/* --- 页面进入：轻微淡入上移，降低生硬感 --- */
@keyframes pageIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.layout,
.page-title { animation: pageIn .3s ease both; }
@media (prefers-reduced-motion: reduce) {
    .layout, .page-title, .focus-slide .focus-img { animation: none; transition: none; }
}

/* --- 空状态：更柔和的呈现 --- */
.empty-icon {
    font-size: 40px;
    opacity: .85;
    filter: grayscale(.15);
}

/* --- 页脚留白收紧 --- */
.site-footer { margin-top: 28px; }

@media (max-width: 720px) {
    .card:hover { box-shadow: 0 1px 2px rgba(20, 30, 60, .05), 0 6px 20px rgba(20, 30, 60, .05); }
    .topic-item:hover { transform: none; }
    .post-head h1 { font-size: 20px; }
    .post-body { font-size: 15px; line-height: 1.8; }
}

@media (max-width: 400px) {
    .post-head h1 { font-size: 19px; letter-spacing: -.2px; }
    .post-body { font-size: 14.5px; line-height: 1.78; }
    .card:hover { box-shadow: 0 1px 2px rgba(20, 30, 60, .05), 0 6px 20px rgba(20, 30, 60, .05); }
}

/* =======================================================================
   后台 · 首页焦点图管理
   ======================================================================= */
.focus-admin-row {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.focus-admin-row:first-child { padding-top: 0; }
.focus-admin-row:last-child { border-bottom: 0; padding-bottom: 0; }

.focus-admin-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 168px;
    height: 72px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.focus-admin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.focus-admin-noimg { color: var(--text-3); }
.focus-admin-order {
    position: absolute;
    top: 5px;
    left: 5px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 6px;
    background: rgba(10, 15, 30, .68);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    backdrop-filter: blur(4px);
}

.focus-admin-main { flex: 1 1 auto; min-width: 0; }
.focus-admin-title {
    display: block;
    font-weight: 650;
    color: var(--text);
    margin-bottom: 4px;
    word-break: break-word;
}
.focus-admin-title:hover { color: var(--primary); }

.focus-admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.focus-admin-upload,
.focus-admin-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.focus-admin-upload .focus-file { max-width: 200px; font-size: 13px; }
.focus-admin-upload .form-control,
.focus-admin-inline .form-control { height: auto; padding: 6px 8px; }

@media (max-width: 720px) {
    .focus-admin-row { flex-direction: column; gap: 10px; }
    .focus-admin-thumb { width: 100%; height: 130px; }
    .focus-admin-upload,
    .focus-admin-inline { width: 100%; }
    .focus-admin-upload .focus-file { flex: 1; max-width: none; }
    .focus-admin-actions { flex-direction: column; align-items: stretch; }
    .focus-admin-actions .btn { width: 100%; justify-content: center; }
}

/* =========================================================================
   「安装到手机桌面」提示条（PWA）
   ========================================================================= */
.install-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 78px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.install-bar[hidden],
.install-bar [hidden] { display: none !important; }
.install-bar.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.install-bar-logo {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
}
.install-bar-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-2);
}
.install-bar-close {
    flex: none;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-3);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.install-bar-close:hover { color: var(--text); }

@media (min-width: 721px) {
    .install-bar {
        left: auto;
        right: 20px;
        bottom: 20px;
        max-width: 400px;
    }
}

@media (max-width: 400px) {
    .install-bar { gap: 8px; padding: 9px 10px; }
    .install-bar-logo { width: 34px; height: 34px; }
    .install-bar-text { font-size: 12px; }
}

/* 认证用户徽章 */
.verified-badge{display:inline-flex;align-items:center;gap:3px;margin-left:5px;padding:1px 6px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.7;color:#fff;background:linear-gradient(135deg,#4F46E5,#7C3AED);vertical-align:middle;}
.verified-badge svg{width:11px;height:11px;}

/* VIP 会员徽章 */
.vip-badge{display:inline-flex;align-items:center;gap:3px;margin-left:5px;padding:1px 6px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.7;color:#7c4a03;background:linear-gradient(135deg,#FFD86B,#F0A93B);vertical-align:middle;}
.vip-badge svg{width:11px;height:11px;}

/* 认证申请 · 达标条件清单 */
.verify-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.verify-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:14px;background:var(--surface-2,#f8f9fb);}
.verify-row-label{font-weight:600;min-width:70px;}
.verify-row-need{color:var(--text-2);font-size:13px;}
.verify-row-now{color:var(--text-3);font-size:13px;}
.verify-row-state{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:13px;}
.verify-row-state svg{width:14px;height:14px;}
.verify-ok{border-color:rgba(22,163,74,.28);}
.verify-ok .verify-row-state{color:var(--success);}
.verify-no{border-color:rgba(225,29,72,.22);}
.verify-no .verify-row-state{color:var(--danger);}
.admin-verify-metrics{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;margin-top:6px;}
.admin-verify-metrics span{display:inline-flex;align-items:center;gap:3px;}
.admin-verify-metrics .yes{color:var(--success);}
.admin-verify-metrics .no{color:var(--danger);}

/* =========================================================================
   手机端 App 化（对齐安卓 App 版视觉）
   仅 @media (max-width:720px) 内生效，721px 以上（含后台）视觉零变化
   ========================================================================= */

/* 顶栏搜索图标按钮：桌面端不存在，仅手机端显示 */
.topbar-search-btn { display: none; }

@media (max-width: 720px) {

    /* ---------- 顶栏：紫色细标题栏（对齐 App 的 AppBar，高 46px） ---------- */
    .topbar {
        background: var(--primary);
        border-bottom: 0;
        backdrop-filter: none;
    }
    .topbar-inner {
        position: relative;
        height: 46px;
        padding: 0 10px;
        gap: 8px;
        flex-wrap: nowrap;
    }
    .menu-toggle,
    .topbar .icon-btn { color: #fff; }
    .menu-toggle:hover,
    .topbar .icon-btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }

    .brand { color: #fff; gap: 8px; }
    .brand:hover { color: #fff; }
    .brand-text {
        display: block;
        color: #fff;
        font-size: 17px;
        font-weight: 600;
        max-width: 46vw;
    }
    .brand-logo { width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .2); box-shadow: none; font-size: 14px; }
    .brand-logo.has-image { width: 26px; height: 26px; border-radius: 8px; }

    /* 顶栏内的操作区：头像 / 登录按钮都要在紫底上看得清 */
    .topbar .lv-badge { display: none; }
    .topbar .user-menu-trigger .avatar { border: 2px solid rgba(255, 255, 255, .55); }
    .topbar-actions .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .55); background: transparent; }
    .topbar-actions .btn-primary { background: #fff; color: var(--primary); box-shadow: none; }
    .topbar-search-btn { display: none; }

    /* 手机端顶栏：去掉图片 logo，改为显示顶栏标题文字（后台「站点设置」可自定义） */
    .brand-logo { display: none; }
    .brand-text { display: none; }
    .brand-text-mobile {
        display: block;
        max-width: 28vw;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
    }

    /* ---------- 搜索框：常驻在顶栏中间（居中，带放大镜，无加号） ---------- */
    .search {
        order: 0;
        position: relative;
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        max-width: none;
        width: auto;
        margin: 0 6px;
        height: 34px;
        padding: 0 6px;
        background: rgba(255, 255, 255, .92);
        border: 0;
        border-radius: 999px;
        box-shadow: none;
    }
    .search input {
        height: 34px;
        padding: 0 34px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #1f2430;
        font-size: 13.5px;
        text-align: center;
    }
    .search input::placeholder { color: #7b8494; }
    .search input:focus { background: transparent; }
    .search button { color: var(--primary); }

    /* ---------- 内容区：收紧边距，底部给标签栏留位 ---------- */
    body.site-body { padding-bottom: 78px; }
    .container { padding: 12px 12px 18px; }
    .install-bar { bottom: 74px; }

    /* ---------- 卡片统一圆角 14（对齐 App 的卡片） ---------- */
    .container .card { border-radius: 14px; }

    /* ---------- 帖子列表：一张帖子一个圆角白卡片 ---------- */
    .card:has(> .topic-list) {
        background: transparent;
        border: 0;
        box-shadow: none;
        margin-bottom: 0;
        overflow: visible;
    }
    .card:has(> .topic-list) > .card-header {
        padding: 2px 2px 10px;
        border-bottom: 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-2);
    }

    .topic-item {
        gap: 12px;
        padding: 12px;
        margin-bottom: 10px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
    }
    .topic-item:last-child { border-bottom: 1px solid var(--border); margin-bottom: 0; }
    .topic-item::before { display: none; }
    .topic-item:hover { background: var(--surface); transform: none; }

    .topic-title { font-size: 15.5px; line-height: 1.4; }
    .topic-excerpt { font-size: 12.8px; color: var(--text-2); }
    .topic-thumbs { gap: 6px; }
    .topic-thumb { width: 64px; height: 64px; border-radius: 9px; }
    .topic-meta { font-size: 12px; gap: 10px; }
    .flag { border-radius: 5px; font-size: 11px; line-height: 17px; }

    /* ---------- 帖子卡片：作者信息提到卡片顶部（仿 App 信息流） ---------- */
    .topic-item > .avatar { display: none; }
    .topic-author {
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
        margin-bottom: 6px;
        font-size: 12.5px;
        color: var(--text-2);
    }
    .topic-author .avatar { width: 26px; height: 26px; flex: none; }
    .topic-author-name { font-weight: 600; color: var(--text-2); }
    .topic-author-name:active { color: var(--primary); }
    .topic-author-time { margin-left: auto; color: var(--text-3); font-size: 12px; }
    .topic-meta .meta-user { display: none; }
    .topic-meta .meta-time { display: none; }

    /* 紧凑列表下：作者行独占一行，并恢复被隐藏的小头像 */
    .topic-list.is-compact .topic-author { flex: 1 1 100%; }
    .topic-list.is-compact .topic-item .topic-author .avatar {
        display: block;
        width: 26px;
        height: 26px;
    }

    /* ---------- 快捷入口图标格（仿 App 宫格） ---------- */
    .quick-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 6px 0;
        padding: 14px 6px;
        margin-bottom: 14px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 14px;
    }
    .quick-tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        padding: 6px 2px;
        color: var(--text-2);
    }
    .quick-ico {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        background: var(--primary-soft);
        color: var(--primary);
    }
    .quick-tile:active .quick-ico { background: var(--primary); color: #fff; }
    .quick-txt { font-size: 11.5px; line-height: 1.2; text-align: center; }

    /* ---------- 首页标签：模式标签选中用紫渐变，板块标签用淡紫底 ---------- */
    .home-tabs-group { background: transparent; border: 0; padding: 0; gap: 8px; }
    .home-tabs .cat-tab.active {
        background: var(--brand-grad);
        border-color: transparent;
        box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 28%, transparent);
    }
    .home-tabs-cats .cat-tab { border-radius: 8px; }
    .home-tabs-cats .cat-tab.active {
        background: var(--primary-soft);
        border-color: var(--primary);
        color: var(--primary);
        box-shadow: none;
    }

    /* ---------- 焦点图：去边框去阴影 ---------- */
    .focus-slider {
        border: 0;
        box-shadow: none;
        border-radius: 14px;
        min-height: 150px;
        margin-bottom: 14px;
    }

    /* ---------- 底部标签栏：高度对齐 App（62px），发帖改圆环加号 ---------- */
    .mobile-tabbar { height: 62px; border-top: 0; box-shadow: 0 -1px 0 var(--border-soft); }
    .mtab { font-size: 12px; gap: 3px; }
    .mtab.active { font-weight: 600; }
    .mtab-post-btn {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: transparent;
        border: 2px solid currentColor;
        color: var(--primary);
        box-shadow: none;
    }
    .mtab-post .mtab-txt { margin-top: 3px; color: var(--primary); }

    /* ---------- 板块页：改单列卡片 ---------- */
    .cat-cards { grid-template-columns: 1fr; gap: 12px; }
    .cat-card { border-radius: 14px; }
    .cat-card-ico { background: var(--brand-grad); box-shadow: 0 6px 14px color-mix(in srgb, var(--primary) 30%, transparent); }

    /* ---------- 我的页 / 帖子详情：统一圆角与左右边距 ---------- */
    .uc-hero, .uc-tile { border-radius: 14px; }
    .post-head, .post-body, .post-actions { padding-left: 14px; padding-right: 14px; }

    /* ---------- 帖子详情：移动端排版细化 ---------- */
    .post-card { border-radius: 14px; }
    .post-head { padding-top: 16px; }
    .post-head h1 { font-size: 19px; line-height: 1.45; margin-bottom: 12px; }
    .post-author-bar { gap: 9px; padding-bottom: 13px; }
    .post-author-bar .avatar-md { width: 38px; height: 38px; }
    .post-body { padding-top: 16px; padding-bottom: 16px; font-size: 15.5px; line-height: 1.8; }
    .post-actions {
        gap: 8px;
        margin-top: 4px;
        padding-top: 14px;
        padding-bottom: 14px;
        border-top: 1px solid var(--border-soft);
    }
    .post-actions .btn,
    .post-actions .like-btn { height: 34px; padding: 0 13px; font-size: 13px; }
    .share-menu { min-width: 158px; }
    .share-menu a,
    .share-menu .menu-btn { padding: 10px 12px; font-size: 13.5px; }

    /* ---------- 帖子配图：改为九宫格（与 App 版一致） ---------- */
    .post-gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        padding: 0 14px 16px;
    }
    .post-gallery .gallery-item { border-radius: 10px; border-color: transparent; }
    .post-gallery .gallery-item img {
        width: 100%;
        height: auto;
        max-width: none;
        max-height: none;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
    /* 视频占满一整行 */
    .post-gallery .gallery-item.gallery-video { grid-column: 1 / -1; background: #000; }
    .post-gallery .gallery-item video { width: 100%; max-width: none; max-height: 320px; }
    /* 只有一张图时铺满整行 */
    .post-gallery.gallery-single { grid-template-columns: 1fr; }
    .post-gallery.gallery-single .gallery-item img { aspect-ratio: 4 / 3; }
    /* 隐藏区块里的配图：外层已有内边距，去掉重复留白 */
    .hidden-block .post-gallery { padding: 12px 0 0; }
}

/* =========================================================================
   隐藏区块（帖子正文里的付费 / 评论解锁内容）+「管理」下拉菜单
   ========================================================================= */

.hidden-block {
    margin: 0 22px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}
.hidden-block-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--warning);
    background: var(--warning-soft);
}
.hidden-block-body {
    padding: 16px;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--text);
    word-break: break-word;
}
.hidden-block-body a { color: var(--primary); text-decoration: underline; }

/* 发帖 / 编辑页的「隐藏区块」编辑面板 */
.hidden-editor {
    padding: 16px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.hidden-editor > .form-label { margin-top: 0; }
.hidden-body { margin-top: 4px; }
.hidden-body .form-group:last-child { margin-bottom: 0; }

/* 「管理」下拉菜单：表单项里的按钮与链接同款样式 */
.share-menu .menu-form { margin: 0; }
.share-menu .menu-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text-2);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.share-menu .menu-btn:hover { background: var(--bg-soft); color: var(--text); }
.share-menu .menu-btn.danger { color: var(--danger); }
.share-menu .menu-btn.danger:hover { background: rgba(225, 29, 72, .1); }
.share-menu .menu-sep { height: 1px; margin: 4px 6px; background: var(--border-soft); }

@media (max-width: 720px) {
    .hidden-block { margin: 0 14px 16px; }
    .hidden-block-body { padding: 14px; font-size: 15px; }
}




/* ------------------------------ 上传等待遮罩 ------------------------------ */

.upload-mask {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 20, 32, .55);
    backdrop-filter: blur(3px);
    animation: noticeFade .2s ease;
}
.upload-mask-box {
    width: 100%;
    max-width: 320px;
    padding: 26px 22px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: noticePop .26s cubic-bezier(.2, .9, .3, 1.2);
}
.upload-spinner {
    width: 38px;
    height: 38px;
    margin: 0 auto 14px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: uploadSpin .8s linear infinite;
}
.upload-mask-title { font-size: 15.5px; font-weight: 700; }
.upload-mask-sub { margin-top: 6px; font-size: 13px; color: var(--text-2); line-height: 1.6; }

@keyframes uploadSpin { to { transform: rotate(360deg); } }

/* =======================================================================
   管理后台重构 v2：侧栏统一 / 概览增强 / 三端适配
   ======================================================================= */

/* ---------- 侧栏：整体比例与层次 ---------- */
.admin-wrap { grid-template-columns: 252px minmax(0, 1fr); }

.admin-side {
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 68%, var(--surface-2) 100%);
    padding: 16px 12px 14px;
}

.admin-brand .brand-logo {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 17px;
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--primary) 80%, transparent);
}

/* 左侧菜单统一字号：分组标题与子项完全一致 */
.admin-nav .nav-group-toggle,
.admin-nav a { font-size: 13.5px; }

.admin-nav .nav-group-toggle {
    padding: 8px 10px;
    color: var(--text-2);
    font-weight: 700;
    border-radius: var(--radius-sm);
    transition: background .16s ease, color .16s ease;
}
.admin-nav .nav-group.open > .nav-group-toggle { color: var(--text); }
.admin-nav .nav-chevron { color: var(--text-3); }
.admin-nav .nav-group.open .nav-chevron { color: var(--primary); }

.admin-nav .nav-group-items { padding: 2px 0 6px; }

.admin-nav a {
    position: relative;
    padding: 9px 12px;
    border-left: 0;
    border-radius: var(--radius-sm);
    transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.admin-nav a .ico { opacity: .75; transition: opacity .16s ease; }
.admin-nav a:hover { transform: translateX(2px); }
.admin-nav a:hover .ico { opacity: 1; }
.admin-nav a.active {
    background: var(--brand-grad);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--primary) 90%, transparent);
}
.admin-nav a.active .ico { opacity: 1; }
.admin-nav a.active .nav-badge { background: rgba(255, 255, 255, .28); color: #fff; }

/* ---------- 概览页：欢迎横幅 ---------- */
.ov-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 20px 24px;
    border-radius: var(--radius);
    color: #fff;
    background: var(--brand-grad-hero);
    box-shadow: 0 18px 40px -22px rgba(79, 70, 229, .85);
}
.ov-hero::after,
.ov-hero::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
}
.ov-hero::after { right: -40px; top: -60px; width: 220px; height: 220px; }
.ov-hero::before { right: 90px; bottom: -70px; width: 150px; height: 150px; background: rgba(255, 255, 255, .07); }
.ov-hero-main { position: relative; z-index: 1; min-width: 0; }
.ov-hero-main h1 { margin: 0 0 4px; font-size: 22px; font-weight: 750; letter-spacing: -.3px; }
.ov-hero-main p { margin: 0; font-size: 13.5px; opacity: .92; }
.ov-hero-actions { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; }
.ov-hero .btn-hero {
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .32);
    color: #fff;
    backdrop-filter: blur(6px);
}
.ov-hero .btn-hero:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.ov-hero .btn-white { background: #fff; color: var(--primary); border: 1px solid transparent; }
.ov-hero .btn-white:hover { background: #f2f1ff; color: var(--primary); }

/* ---------- 概览页：统计卡片增强 ---------- */
.stat-card {
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}
.stat-card .stat-num { letter-spacing: -.4px; }
.stat-icon.is-danger { background: var(--danger-soft); color: var(--danger); }
.stat-icon.is-violet { background: color-mix(in srgb, var(--violet) 15%, transparent); color: var(--violet); }
.stat-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--success); }

/* ---------- 概览页：快捷操作 ---------- */
.ov-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }
.ov-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ov-action:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
    box-shadow: var(--shadow);
    color: var(--text);
}
.ov-action-icon {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--primary);
}
.ov-action-icon.is-success { background: var(--success-soft); color: var(--success); }
.ov-action-icon.is-warning { background: var(--warning-soft); color: var(--warning); }
.ov-action-icon.is-info    { background: var(--info-soft);    color: var(--info); }
.ov-action-icon.is-danger  { background: var(--danger-soft);  color: var(--danger); }
.ov-action-word { min-width: 0; }
.ov-action-word strong { display: block; font-size: 14px; font-weight: 650; }
.ov-action-word span {
    display: block;
    font-size: 12.5px;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- 概览页：7 天趋势 ---------- */
.ov-trend { display: flex; align-items: flex-end; gap: 8px; height: 168px; padding: 12px 6px 0; }
.ov-trend-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ov-trend-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.ov-trend-bar { width: 11px; min-height: 3px; border-radius: 5px 5px 2px 2px; }
.ov-trend-bar.b-topics   { background: linear-gradient(180deg, var(--violet), var(--primary)); }
.ov-trend-bar.b-comments { background: linear-gradient(180deg, #6ee7b7, var(--success)); }
.ov-trend-label { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.ov-legend { display: inline-flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--text-3); }
.ov-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.ov-legend .l-topics   { background: var(--primary); }
.ov-legend .l-comments { background: var(--success); }

/* ---------- 概览页：系统信息 ---------- */
.ov-info-list { display: flex; flex-direction: column; }
.ov-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13.5px;
}
.ov-info-row:last-child { border-bottom: 0; }
.ov-info-key { flex: none; width: 104px; color: var(--text-3); }
.ov-info-val { flex: 1; min-width: 0; text-align: right; word-break: break-word; }

/* ---------- 概览页：两栏网格 ---------- */
.ov-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ov-grid-2 > .card { margin-bottom: 0; height: 100%; }
.ov-grid-2 + .card, .ov-grid-2 { margin-bottom: 18px; }

/* ---------- 概览页：排行榜名次 ---------- */

.rank-no.top1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; }
.rank-no.top2 { background: linear-gradient(135deg, #cbd5e1, #94a3b8); color: #fff; }
.rank-no.top3 { background: linear-gradient(135deg, #fdba74, #f97316); color: #fff; }

.ov-empty { padding: 28px 18px; text-align: center; color: var(--text-3); font-size: 13.5px; }

/* ---------- 三端适配：电脑 / 手机网页 / App ---------- */
@media (max-width: 900px) {
    .admin-wrap { grid-template-columns: minmax(0, 1fr); }
    .ov-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .admin-side { width: min(84vw, 300px); }
}

@media (max-width: 720px) {
    .ov-hero { padding: 18px; }
    .ov-hero-main h1 { font-size: 19px; }
    .ov-actions { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ov-trend { height: 150px; }
    .ov-info-key { width: 88px; }
}

@media (max-width: 400px) {
    .stat-card { padding: 12px 13px; }
    .stat-card .stat-num { font-size: 19px; }
    .stat-icon { width: 36px; height: 36px; border-radius: 10px; }
    .ov-trend { gap: 4px; height: 140px; }
    .ov-trend-bar { width: 8px; }
    .ov-trend-label { font-size: 10px; }
    .ov-hero-actions { width: 100%; }
    .ov-hero .btn { flex: 1; justify-content: center; }
    .ov-info-row { padding: 10px 14px; }
}

/* =======================================================================
   管理后台重构 v3：页面头部 / 卡片头 / 表格 / 搜索条 / 空状态 全局统一
   ======================================================================= */

/* ---------- 页面头部：图标 + 标题 + 说明 + 右侧操作 ---------- */
.admin-topbar { align-items: center; gap: 14px; margin-bottom: 20px; }
.admin-topbar-main { display: flex; align-items: center; gap: 13px; min-width: 0; }
.admin-topbar-ico {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--primary-soft);
    color: var(--primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent);
}
.admin-topbar-ico.is-success { background: var(--success-soft); color: var(--success); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 18%, transparent); }
.admin-topbar-ico.is-warning { background: var(--warning-soft); color: var(--warning); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 18%, transparent); }
.admin-topbar-ico.is-info    { background: var(--info-soft);    color: var(--info);    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 18%, transparent); }
.admin-topbar-ico.is-danger  { background: var(--danger-soft);  color: var(--danger);  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 18%, transparent); }
.admin-topbar-word { min-width: 0; }
.admin-topbar h1 { font-size: 20px; margin: 0; letter-spacing: -.3px; font-weight: 750; }
.admin-topbar-sub { margin-top: 3px; font-size: 13px; color: var(--text-3); line-height: 1.5; }
.admin-topbar-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- 卡片头部：标题带图标 ---------- */
.card-header > span:first-child { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.card-header > span:first-child > .ico { flex: none; color: var(--primary); width: 17px; height: 17px; }
.card-header .card-sub { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- 表格：层次与可读性 ---------- */
table.table { font-size: 13.5px; }
table.table th:first-child,
table.table td:first-child { padding-left: 18px; }
table.table th:last-child,
table.table td:last-child { padding-right: 18px; }
table.table thead th { font-weight: 650; letter-spacing: .2px; }
table.table tbody tr:last-child td { border-bottom: 0; }
table.table td { color: var(--text-2); }
table.table td > a { color: var(--text); font-weight: 600; }
table.table td > a:hover { color: var(--primary); }
table.table .row-strong { color: var(--text); font-weight: 600; }

/* ---------- 搜索 / 筛选条：独立面板 ---------- */
.admin-search {
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.admin-search .form-control { height: 36px; }
.admin-search .btn { height: 36px; }

/* ---------- 空状态：支持 SVG 图标 ---------- */
.empty { padding: 46px 20px; }
.empty-icon { display: flex; justify-content: center; opacity: 1; color: var(--text-3); }
.empty-icon svg { width: 40px; height: 40px; stroke-width: 1.5; opacity: .5; }
.ov-empty { padding: 28px 18px; text-align: center; color: var(--text-3); font-size: 13.5px; }

/* ---------- 表单：小节标题与必填标记 ---------- */
.form-label { font-weight: 600; }
.form-help { line-height: 1.55; }

/* ---------- 后台两栏网格 ---------- */
.admin-grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.admin-grid-2 > .card { margin-bottom: 0; }

/* ---------- 三端适配 ---------- */
@media (max-width: 900px) {
    .admin-topbar h1 { font-size: 18px; }
    .admin-topbar-ico { width: 40px; height: 40px; border-radius: 12px; }
    .admin-topbar-ico svg { width: 18px; height: 18px; }
    .admin-grid-2 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 720px) {
    .admin-main { padding: 16px 14px 84px; }
    .admin-topbar { margin-bottom: 16px; }
    .admin-topbar-main { gap: 11px; }
    .admin-search { padding: 10px 12px; }
    .admin-search .form-control,
    .admin-search .btn { max-width: none; flex: 1 1 auto; }
    table.table th, table.table td { padding: 10px 12px; }
    table.table th:first-child, table.table td:first-child { padding-left: 14px; }
    table.table th:last-child, table.table td:last-child { padding-right: 14px; }
    .card-header { font-size: 14.5px; }
    .empty { padding: 34px 16px; }
}

@media (max-width: 400px) {
    .admin-topbar-ico { width: 38px; height: 38px; border-radius: 11px; }
    .admin-topbar h1 { font-size: 17px; }
    .admin-topbar-sub { font-size: 12.5px; }
    .admin-search { flex-direction: column; align-items: stretch; }
    .admin-search .form-control { max-width: none; width: 100%; }
    .admin-search .btn { width: 100%; }
}

/* =======================================================================
   前台重构 v3：图标统一 / 元信息排版 / 移动端细节
   ======================================================================= */

/* 元信息（浏览/评论/点赞）里的 SVG 图标对齐统一 */
.meta-row { display: inline-flex; align-items: center; gap: 12px; }
.meta-row .meta-item { display: inline-flex; align-items: center; gap: 4px; }
.meta-item .ico { flex: none; opacity: .6; }
.topic-meta .meta-item { gap: 5px; }
.topic-meta .meta-item .ico { width: 14px; height: 14px; }
.member-stat .ico,
.follow-meta .ico { opacity: .6; vertical-align: -2px; }

/* 按钮与链接内的图标不参与压缩 */
.btn > .ico { flex: none; }
.chip > .ico { vertical-align: -2px; margin-right: 3px; }

/* 提示区块（后台与前台共用）图标对齐 */
.tip .ico,
.notice .ico { vertical-align: -2px; margin-right: 4px; }

@media (max-width: 720px) {
    .topic-meta .meta-item .ico { width: 13px; height: 13px; }
    .card-header > span:first-child { gap: 7px; }
}

/* ---------- 帖子列表：紧凑模式（每行一条，显示标题 + 摘要 + 最多三张横排配图，后台可切换） ---------- */
.topic-list.is-compact .topic-item {
    align-items: flex-start;
    gap: 12px;
    padding: 12px 18px;
    overflow: hidden;
    box-sizing: border-box;
}
.topic-list.is-compact .topic-item::before { top: 10px; bottom: 10px; }
.topic-list.is-compact .topic-item .avatar { width: 30px; height: 30px; flex: none; margin-top: 1px; }
.topic-list.is-compact .topic-item:hover .avatar { transform: none; }
.topic-list.is-compact .topic-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    min-width: 0;
}
.topic-list.is-compact .topic-title {
    flex: 1 1 100%;
    min-width: 0;
    margin: 0;
    font-size: 14.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topic-list.is-compact .topic-excerpt {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 12.8px;
    -webkit-line-clamp: 1;
}
.topic-list.is-compact .topic-thumbs { flex: none; margin: 0; gap: 6px; }
.topic-list.is-compact .topic-thumb { width: 52px; height: 52px; border-radius: 8px; }
.topic-list.is-compact .topic-meta {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    gap: 12px;
    margin: 0;
    font-size: 12px;
}
.topic-list.is-compact .flag-cat,
.topic-list.is-compact .flag-closed { display: none; }
.topic-list.is-compact .topic-meta .meta-user a {
    display: inline-block;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

@media (max-width: 720px) {
    /* 紧凑列表手机端 */
    .topic-list.is-compact .topic-item {
        padding: 11px 12px;
        gap: 0;
        margin-bottom: 8px;
        border-radius: 14px;
    }
    .topic-list.is-compact .topic-item .avatar { display: none; }
    .topic-list.is-compact .topic-title { font-size: 14.5px; }
    .topic-list.is-compact .topic-excerpt { font-size: 12.5px; }
    .topic-list.is-compact .topic-thumb { width: 46px; height: 46px; }
    .topic-list.is-compact .topic-meta { gap: 10px; font-size: 12px; }
    .topic-list.is-compact .topic-meta .meta-user,
    .topic-list.is-compact .topic-meta .meta-time { display: none; }
}

@media (max-width: 400px) {
    .topic-list.is-compact .topic-item { padding: 10px; }
    .topic-list.is-compact .topic-title { font-size: 14px; }
    .topic-list.is-compact .topic-thumb { width: 42px; height: 42px; }
    .topic-list.is-compact .topic-meta { gap: 8px; font-size: 11.5px; }
    .topic-list.is-compact .topic-meta .meta-item .ico { width: 12px; height: 12px; }
}

/* =======================================================================
   通用工具类（收纳重复内联样式，保持单一来源）
   ======================================================================= */

.m-0 { margin: 0; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.flex-1 { flex: 1; }
.inline { display: inline; }
.text-center { text-align: center; }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.no-underline { text-decoration: none; }
.empty-pad { text-align: center; padding: 22px; }

/* 说明条目行：左侧说明 + 右侧数值 */
.rule-row { display: flex; justify-content: space-between; padding: 7px 4px; font-size: 14px; }
/* ---------- 举报表单 ---------- */
.report-target{display:flex;flex-direction:column;gap:4px;padding:12px 14px;margin-bottom:16px;background:var(--surface-2,#f8fafd);border:1px solid var(--border-soft,#eef2f6);border-radius:var(--radius-sm,8px)}
.report-target a{font-weight:600;color:var(--primary,#4d91ff);text-decoration:none;word-break:break-all}
.report-target a:hover{text-decoration:underline}
.radio-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.radio-row{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--border,#e4ebf4);border-radius:var(--radius-sm,8px);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.radio-row:hover{border-color:var(--primary,#4d91ff);background:var(--primary-soft,#eef6ff)}
.radio-row input{margin:0;accent-color:var(--primary,#4d91ff)}
.radio-row:has(input:checked){border-color:var(--primary,#4d91ff);background:var(--primary-soft,#eef6ff);box-shadow:0 0 0 2px rgba(77,145,255,.12)}

/* ---------- 问题反馈（后台） ---------- */
.fb-pri{display:inline-block;font-size:11px;line-height:1.7;padding:0 8px;border-radius:999px;font-weight:600;white-space:nowrap}
.fb-pri-1{background:var(--danger-soft,#fdeaee);color:var(--danger,#e5484d)}
.fb-pri-2{background:#ffedd5;color:#ea580c}
.fb-pri-3{background:var(--bg-soft,#e9f4ff);color:var(--text-3,#8a98a8)}
.fb-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fb-filters .form-control{max-width:200px;margin:0}
.fb-meta{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:13px;color:var(--text-3,#8a98a8);padding-bottom:12px;border-bottom:1px dashed var(--border,#e4ebf4);margin-bottom:14px}
.fb-content{font-size:14.5px;line-height:1.9;color:var(--text,#1a2130);word-break:break-word}
.fb-reply{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--bg-soft,#e9f4ff);color:var(--text-2,#4a5568);font-size:13.5px;line-height:1.8}
.fb-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:14px}
.fb-col{background:var(--bg-soft,#e9f4ff);border:1px solid var(--border,#e4ebf4);border-radius:12px;padding:10px;min-height:120px}
.fb-col-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:8px}
.fb-col-head .n{color:var(--text-3,#8a98a8);font-weight:500}
.fb-item{display:block;background:var(--surface,#fff);border:1px solid var(--border,#e4ebf4);border-radius:10px;padding:10px;margin-bottom:8px;color:inherit;transition:border-color .15s}
.fb-item:hover{border-color:var(--primary,#4da3ff)}
.fb-item-title{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px;word-break:break-word}
.fb-item-meta{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:11.5px;color:var(--text-3,#8a98a8)}
@media (max-width:1100px){.fb-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.fb-board{grid-template-columns:1fr}.fb-filters .form-control{max-width:none;flex:1 1 45%}}