/* ============================================================
   tieba.css — 织网 · 贴吧
   类名一律 tieba- / weave- 前缀，绝不新增裸类名
   （.card / .list / .item / .avatar 这类都危险，creator-space/crystal.css 是全局加载的）。
   内页永远浅色，不跟主题走——别按「暗色主题要变深」去改这里。
   ============================================================ */

/* ---------- 顶栏让位：贴吧自己画头栏（含返回键），全局那条整条藏 ----------
   ★ 声明式：靠 .tieba-page 属性，不靠 JS 改 style。
   四页签与所有子页一视同仁（口径 1：进贴吧就没有上面的功能栏）。 */
.phone-screen:has(.tieba-page) #topBar {
    display: none !important;
}

/* ============================================================
   织网外壳
   ============================================================ */

.weave-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f6f7fa;
    overflow: hidden;
}

.weave-head {
    padding: 20px 18px 14px;
    background: #fff;
    border-bottom: 1px solid #e6e8ef;
}

.weave-head-title {
    font-size: 20px;
    font-weight: 700;
    color: #2e3238;
    letter-spacing: 0.04em;
}

.weave-head-sub {
    margin-top: 4px;
    font-size: 12px;
    color: #878c99;
}

.weave-list {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-content: start;
}

.weave-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 6px rgba(46, 50, 56, 0.06);
    text-align: left;
    cursor: pointer;
}

.weave-card:active {
    background: #f2f3f8;
}

.weave-card-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eaecf6;
    color: #5C6BC0;
    line-height: 0;
}

.weave-card-icon svg {
    width: 21px;
    height: 21px;
}

.weave-card-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.weave-card-label {
    font-size: 15px;
    font-weight: 600;
    color: #2e3238;
}

.weave-card-desc {
    font-size: 12px;
    color: #878c99;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weave-card-arrow {
    flex-shrink: 0;
    font-size: 18px;
    color: #c3c7d2;
}

/* ============================================================
   贴吧 · 骨架
   ============================================================ */

.tieba-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f6f7fa;
    overflow: hidden;
}

.tieba-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 16px;
}

.tieba-scroll::-webkit-scrollbar {
    width: 6px;
}

.tieba-scroll::-webkit-scrollbar-thumb {
    background: #d6d9e2;
    border-radius: 3px;
}

/* ---------- 可点的头像与名字 ---------- */

/*
 * 楼层的头像与名字都是可点的：点了进这个人的页。
 * 这组必须写在前面 —— 它把 font / color 交还给外层（inherit），
 * 后面那些给 .tieba-floor-author 之类定色的规则才压得住它（同权重看谁在后）。
 */
.tieba-avatar-btn,
.tieba-name-btn {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.tieba-avatar-btn {
    flex-shrink: 0;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
}

.tieba-avatar-btn:active,
.tieba-name-btn:active {
    opacity: 0.6;
}

/*
 * 帖页里的头像（正文头与每一楼）比默认那枚小一号。
 * 正文头与楼层用的是同一个尺寸 + 同一个间距 ⇒ 两边「文字那一列」的左边缘正好对齐。
 */
.tieba-avatar-sm .tieba-avatar {
    width: 32px;
    height: 32px;
    font-size: 13px;
}

/* ---------- 头栏 ---------- */

.tieba-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 12px 14px;
    background: #fff;
    border-bottom: 1px solid #e6e8ef;
    flex-shrink: 0;
}

.tieba-head-mid {
    flex: 1;
    min-width: 0;
}

.tieba-head-title {
    font-size: 16px;
    font-weight: 700;
    color: #2e3238;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 头栏只有一行标题：**高度处处一样**（加一行小字就会比没有小字的页高一截）。
   要显示条数 / 简介这类信息，放进正文里。 */
.tieba-head.is-center .tieba-head-mid {
    text-align: center;
}

.tieba-head.is-center .tieba-head-link {
    width: 100%;
    text-align: center;
}

/* 居中时右边没有按钮，补一个和 ← 等宽的占位，标题才是真的居中 */
.tieba-head-spacer {
    width: 32px;
    flex-shrink: 0;
}

/* 头栏里的文字按钮（＋ 建吧 / 关注）跟图标按钮一样高：
   `.tieba-btn` 默认按 padding 撑高，会比 32px 的 ← 高出几像素，整条头栏就跟着变高 */
.tieba-head > .tieba-btn {
    box-sizing: border-box;
    height: 32px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
}

.tieba-icon-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #f0f1f6;
    color: #4a4f5c;
    line-height: 0;
    cursor: pointer;
}

.tieba-icon-btn svg {
    width: 17px;
    height: 17px;
}

.tieba-icon-btn:active {
    background: #e2e4ee;
}

.tieba-icon-btn.is-busy {
    color: #9aa0b0;
}

/* 帖页的「发送」在等人接话时就灰着（同 ↻ 那颗按钮的忙态） */
.tieba-btn.is-busy {
    background: #9aa0b0;
    cursor: default;
}

.tieba-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    border: none;
    border-radius: 9px;
    background: #5C6BC0;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

.tieba-btn:active {
    background: #4d5aab;
}

.tieba-btn-plain {
    background: #f0f1f6;
    color: #4a4f5c;
}

.tieba-btn-plain:active {
    background: #e2e4ee;
}

.tieba-btn-wide {
    width: 100%;
    padding: 11px;
}

.tieba-text-btn {
    border: none;
    background: none;
    padding: 2px 4px;
    font-size: 12px;
    color: #5C6BC0;
    cursor: pointer;
}

.tieba-danger {
    color: #d0503f;
}

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

.tieba-empty {
    margin: 48px 20px;
    text-align: center;
}

.tieba-empty-inline {
    margin: 26px 16px;
}

.tieba-empty-icon {
    line-height: 0;
    color: #b6bac6;
}

.tieba-empty-icon svg {
    width: 34px;
    height: 34px;
}

.tieba-empty-text {
    margin-top: 10px;
    font-size: 14px;
    color: #6c7280;
}

.tieba-empty-hint {
    margin-top: 6px;
    font-size: 12px;
    color: #a2a7b3;
    line-height: 1.6;
}

/* ---------- 列表（吧 / 帖） ---------- */

.tieba-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tieba-post-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 13px 14px;
    border: none;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(46, 50, 56, 0.05);
    text-align: left;
    cursor: pointer;
}

.tieba-post-card:active {
    background: #f2f3f8;
}

/* 吧卡片：形制照织网的 `\.weave-card`（图标 + 名字 / 一行小字 + ›），整体小一号、窄一路 */
.tieba-board-card {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 11px;
    border: none;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(46, 50, 56, 0.05);
    text-align: left;
    cursor: pointer;
}

.tieba-board-card:active {
    background: #f2f3f8;
}

.tieba-board-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #eaecf6;
    color: #5C6BC0;
    font-size: 14px;
    font-weight: 600;
}

.tieba-board-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tieba-board-name,
.tieba-post-title {
    font-size: 15px;
    font-weight: 600;
    color: #2e3238;
    line-height: 1.4;
}

.tieba-board-card .tieba-board-name {
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tieba-board-meta,
.tieba-post-meta {
    font-size: 11px;
    color: #9aa0b0;
}

.tieba-board-card .tieba-board-meta {
    font-size: 10.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tieba-board-arrow {
    flex-shrink: 0;
    font-size: 15px;
    color: #c3c7d2;
}

.tieba-post-excerpt {
    font-size: 12px;
    color: #6c7280;
    line-height: 1.55;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tieba-board-intro {
    flex-shrink: 0;
    padding: 9px 14px;
    background: #f0f1f6;
    color: #5d626f;
    font-size: 12px;
    line-height: 1.6;
    border-bottom: 1px solid #e6e8ef;
}

/* 「N 人关注 · M 帖 · 上次刷新…」——原先挂在头栏那行小字上，头栏固定高度后挪到这儿 */
.tieba-board-stat {
    font-size: 11px;
    color: #9aa0b0;
}

.tieba-board-desc-line + .tieba-board-stat {
    margin-top: 3px;
}

/* ---------- 板块：筛选条与帖子上的标 ---------- */

/* 一行横滑，不换行（形制照上面的「最近进入」那一行） */
.tieba-chip-row {
    display: flex;
    gap: 8px;
    margin: 10px 0 0;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.tieba-chip-row::-webkit-scrollbar {
    display: none;
}

.tieba-chip {
    flex: 0 0 auto;
    padding: 6px 12px;
    border: none;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(46, 50, 56, 0.05);
    font-family: inherit;
    font-size: 12px;
    color: #5d626f;
    cursor: pointer;
}

.tieba-chip:active {
    background: #f2f3f8;
}

.tieba-chip.is-on {
    background: #5C6BC0;
    color: #fff;
    box-shadow: none;
}

/* 帖子上的标：一排小药丸，跟标题分开一行 */
.tieba-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tieba-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.6;
}

/* 三类的颜色各认各的：精华金、热门橙红、自定义板块跟着模块主色走 */
.tieba-tag-essence {
    background: #fbf1dc;
    color: #a2762a;
}

.tieba-tag-hot {
    background: #fdeceb;
    color: #c0563f;
}

.tieba-tag-section {
    background: #eaecf6;
    color: #5C6BC0;
}

.tieba-bottom-bar {
    flex-shrink: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #e6e8ef;
}

/* ---------- 帖页 ---------- */

/* 帖子详情不套卡片壳：正文与楼层都直接落在页面上，靠一条细分线分段
   （口径同聊天通讯录那一轮：去掉底色/圆角/投影，只留下边线）。 */
.tieba-post-body {
    padding: 2px 0 14px;
    border-bottom: 1px solid #e6e8ef;
}

/* 间距与 .tieba-floor 一样（10px）：两处「文字那一列」的左边缘才会对齐 */
.tieba-post-body-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tieba-post-body-author {
    font-size: 12px;
    font-weight: 600;
    color: #5C6BC0;
}

.tieba-post-body-time {
    margin-left: auto;
    font-size: 11px;
    color: #9aa0b0;
}

.tieba-post-body-title {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #2e3238;
    line-height: 1.45;
}

.tieba-post-body-text {
    margin-top: 8px;
    font-size: 14px;
    color: #3a3f48;
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-word;
}

.tieba-post-body .tieba-text-btn {
    margin-top: 10px;
}

/* ---------- 楼层 ---------- */

/* 楼层之间不再各是一张卡：一条细分线连着往下排（行距 0，线才是分隔） */
.tieba-floor-list {
    display: flex;
    flex-direction: column;
}

.tieba-floor {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #eef0f5;
}

/* 头像右边那一列：楼里除头像之外的一切都装在这儿 */
.tieba-floor-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tieba-floor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tieba-floor-author {
    font-size: 12px;
    font-weight: 600;
    color: #4a4f5c;
}

.tieba-floor-no {
    font-size: 11px;
    color: #b3b8c4;
}

/* 被 @ 的人：一行小字摆在正文上面（@ 就是这一条回复的指向，不混在正文里）。
   点了也进那个人的页，所以它自己是一枚按钮 —— 宽度按内容走，别拉满一行 */
.tieba-floor-mention {
    align-self: flex-start;
    margin-top: 4px;
    font-size: 12px;
    color: #5C6BC0;
}

.tieba-floor-text {
    margin-top: 5px;
    font-size: 13.5px;
    color: #3a3f48;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

.tieba-floor-foot {
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tieba-floor-time {
    font-size: 11px;
    color: #b3b8c4;
}

/* ---------- 楼中楼（主楼底下摊的那一小块 + 抽屉） ---------- */

/* 主楼底下：最近两条 + 一个进抽屉的口。整块缩在楼内，左边不再有头像 */
.tieba-subs {
    margin-top: 8px;
    padding: 7px 10px;
    border-radius: 9px;
    background: #f6f7fb;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tieba-sub-line {
    display: flex;
    gap: 6px;
    font-size: 12px;
    line-height: 1.6;
}

.tieba-sub-who {
    flex-shrink: 0;
    max-width: 84px;
    font-weight: 600;
    color: #5C6BC0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tieba-sub-who::after {
    content: '：';
    color: #b3b8c4;
    font-weight: 400;
}

.tieba-sub-text {
    flex: 1;
    min-width: 0;
    color: #4a4f5c;
    word-break: break-word;
}

.tieba-subs-more {
    align-self: flex-start;
    font-size: 11.5px;
    color: #5C6BC0;
}

/* 抽屉：这一层主楼在上，下面一行一条；要回哪一条，光标就落在哪一条上 */
.tieba-sub-root {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f6f7fb;
}

.tieba-sub-list {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
}

.tieba-sub-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 2px;
    border-bottom: 1px solid #eef0f5;
}

/* 正被回的那一条：左边一道色，一眼知道这句话是回给谁的 */
.tieba-sub-item.is-target {
    background: #f4f5fd;
    box-shadow: inset 3px 0 0 #5C6BC0;
    border-radius: 0 8px 8px 0;
}

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

.tieba-sub-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.tieba-sub-author {
    font-size: 12px;
    font-weight: 600;
    color: #4a4f5c;
}

.tieba-sub-time {
    font-size: 11px;
    color: #b3b8c4;
}

.tieba-sub-content {
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.7;
    color: #3a3f48;
    white-space: pre-wrap;
    word-break: break-word;
}

.tieba-sub-acts {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

/* 抽屉底部：一枚「回谁」的小片 + 一行输入 */
.tieba-sub-compose {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.tieba-sub-compose-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tieba-target-chip {
    align-self: flex-start;
    max-width: 100%;
    padding: 4px 9px;
    border-radius: 999px;
    background: #eef0f8;
    font-size: 11.5px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 点了某一条的「回复」：小片变色，点它退回本楼 */
.tieba-target-chip.is-picked {
    background: #e8eafb;
    color: #3f4ba8;
}

/* ---------- 回复条 ---------- */

.tieba-reply-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #e6e8ef;
}

.tieba-reply-input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid #dfe2ea;
    border-radius: 9px;
    background: #f8f9fc;
    font-size: 13px;
    color: #2e3238;
    outline: none;
}

.tieba-reply-input:focus {
    border-color: #5C6BC0;
    background: #fff;
}

/* 回复栏上的 @ 入口：没点人时就是一个 @，点了人就把名字顶在按钮上 */
.tieba-reply-at {
    flex-shrink: 0;
    max-width: 96px;
    padding: 9px 10px;
    border: 1px solid #dfe2ea;
    border-radius: 9px;
    background: #f8f9fc;
    font-size: 13px;
    line-height: 1;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tieba-reply-at.is-on {
    border-color: #5C6BC0;
    background: #eef0fb;
    color: #5C6BC0;
}

/* ============================================================
   弹层
   ============================================================ */

.tieba-overlay {
    position: absolute;
    inset: 0;
    z-index: 420;
    display: flex;
    align-items: flex-end;
}

.tieba-sheet-mask {
    position: absolute;
    inset: 0;
    background: rgba(30, 33, 40, 0.34);
}

.tieba-sheet {
    position: relative;
    width: 100%;
    max-height: 80%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(30, 33, 40, 0.12);
}

.tieba-sheet-title {
    flex-shrink: 0;
    padding: 16px 18px 10px;
    font-size: 15px;
    font-weight: 700;
    color: #2e3238;
}

.tieba-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 18px 4px;
}

.tieba-sheet-foot {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #eef0f5;
}

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

.tieba-field {
    display: block;
    margin-bottom: 12px;
}

.tieba-field-label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    color: #6c7280;
}

.tieba-input,
.tieba-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #dfe2ea;
    border-radius: 9px;
    background: #f8f9fc;
    font-family: inherit;
    font-size: 13.5px;
    color: #2e3238;
    outline: none;
}

.tieba-input:focus,
.tieba-textarea:focus {
    border-color: #5C6BC0;
    background: #fff;
}

.tieba-textarea {
    min-height: 74px;
    resize: vertical;
    line-height: 1.65;
}

.tieba-textarea-tall {
    min-height: 140px;
}

.tieba-field-hint {
    margin: 6px 0 10px;
    font-size: 11.5px;
    color: #9aa0b0;
    line-height: 1.65;
}

/* ---------- 设置弹层 ---------- */

.tieba-settings-board {
    margin-bottom: 10px;
    font-size: 12px;
    color: #878c99;
}

.tieba-settings-group {
    margin-bottom: 16px;
}

.tieba-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #eef0f5;
}

.tieba-settings-title {
    font-size: 13px;
    font-weight: 600;
    color: #3a3f48;
}

/* 板块那一组：一行 = 名字输入框 + 改名 + 删除（输入框吃掉剩下的宽度） */
.tieba-section-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.tieba-section-row .tieba-input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    font-size: 13px;
}

.tieba-section-row .tieba-text-btn {
    flex-shrink: 0;
}

.tieba-settings-actions {
    display: flex;
    gap: 2px;
}

.tieba-check {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 2px;
    cursor: pointer;
}

.tieba-check input {
    width: 16px;
    height: 16px;
    accent-color: #5C6BC0;
    flex-shrink: 0;
}

.tieba-check-name {
    font-size: 13.5px;
    color: #3a3f48;
}

/* ---------- 管理菜单 ---------- */

.tieba-menu-item {
    display: block;
    width: 100%;
    padding: 13px 2px;
    border: none;
    border-bottom: 1px solid #eef0f5;
    background: none;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

/* ============================================================
   v2 · 底部四页签
   ============================================================ */

.tieba-tabbar {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    background: #fff;
    border-top: 1px solid #e6e8ef;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tieba-tab {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0 7px;
    border: none;
    background: none;
    cursor: pointer;
}

.tieba-tab-icon {
    display: block;
    line-height: 0;
    color: #9aa0b0;
}

.tieba-tab-icon svg {
    width: 21px;
    height: 21px;
}

.tieba-tab-label {
    font-size: 11px;
    color: #878c99;
}

.tieba-tab.is-on .tieba-tab-icon {
    color: #5C6BC0;
}

.tieba-tab.is-on .tieba-tab-label {
    color: #5C6BC0;
    font-weight: 600;
}

/* 未读点：行内是个红色小药丸，挂在页签上时绝对定位到图标右上角 */
.tieba-dot {
    display: inline-block;
    min-width: 16px;
    padding: 0 5px;
    border-radius: 8px;
    background: #e5484d;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    vertical-align: middle;
}

.tieba-tab .tieba-dot {
    position: absolute;
    top: 3px;
    left: 50%;
    margin-left: 3px;
}

/* ============================================================
   v2 · 页内分区 / 头像 / 横滑行
   ============================================================ */

.tieba-section {
    margin-bottom: 18px;
}

.tieba-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 2px 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #6b7180;
}

.tieba-avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #eceef4;
    font-size: 15px;
    color: #6c7280;
}

.tieba-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tieba-avatar-plain {
    font-weight: 600;
}

/* 最近进入：一行横滑，不换行 */
.tieba-recent-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.tieba-recent-row::-webkit-scrollbar {
    display: none;
}

/* 最近进入：同一族的概括版 —— 一行、无箭头，比上面的吧卡片更窄更小 */
.tieba-recent-chip {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px 7px 8px;
    border: none;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(46, 50, 56, 0.05);
    text-align: left;
    cursor: pointer;
}

.tieba-recent-chip:active {
    background: #f2f3f8;
}

.tieba-recent-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #eaecf6;
    color: #5C6BC0;
    font-size: 11.5px;
    font-weight: 600;
}

.tieba-recent-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #2e3238;
    white-space: nowrap;
}

.tieba-recent-meta {
    font-size: 10.5px;
    color: #9aa0b0;
    white-space: nowrap;
}

/* 两列吧卡片（.tieba-list 那套 flex 列会被这条覆盖成 grid） */
.tieba-board-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ============================================================
   v2 · 首页推荐流
   ============================================================ */

.tieba-feed-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 13px 14px;
    border: none;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(46, 50, 56, 0.05);
    text-align: left;
    cursor: pointer;
}

.tieba-feed-card:active {
    background: #f2f3f8;
}

.tieba-feed-board {
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 7px;
    background: #eef0fb;
    color: #5C6BC0;
    font-size: 11px;
    line-height: 16px;
}

/* ============================================================
   v2 · 消息页与私信
   ============================================================ */

.tieba-msg-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 13px;
    border: none;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(46, 50, 56, 0.05);
    text-align: left;
    cursor: pointer;
}

.tieba-msg-row + .tieba-msg-row {
    margin-top: 10px;
}

.tieba-msg-row:active {
    background: #f2f3f8;
}

.tieba-msg-mid {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tieba-msg-name {
    font-size: 14px;
    font-weight: 600;
    color: #2e3238;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tieba-msg-text {
    font-size: 12px;
    color: #878c99;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tieba-msg-side {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    align-self: flex-start;
}

.tieba-msg-time {
    font-size: 11px;
    color: #9aa0b0;
    white-space: nowrap;
}

/* 会话页气泡 */
.tieba-dm-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tieba-dm {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    max-width: 78%;
    align-self: flex-start;
}

.tieba-dm.is-me {
    align-self: flex-end;
    align-items: flex-end;
}

.tieba-dm-text {
    padding: 9px 12px;
    border-radius: 13px;
    background: #fff;
    color: #2e3238;
    font-size: 13.5px;
    line-height: 1.6;
    word-break: break-word;
    box-shadow: 0 1px 5px rgba(46, 50, 56, 0.05);
}

.tieba-dm.is-me .tieba-dm-text {
    background: #5C6BC0;
    color: #fff;
}

.tieba-dm-time {
    font-size: 10.5px;
    color: #9aa0b0;
}

/* ============================================================
   v2 · 我的页 / 关注列表
   ============================================================ */

.tieba-me-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 20px 14px 16px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(46, 50, 56, 0.05);
}

.tieba-me-card .tieba-avatar {
    width: 58px;
    height: 58px;
    font-size: 22px;
}

.tieba-me-name {
    font-size: 16px;
    font-weight: 700;
    color: #2e3238;
}

/* 一个人的页顶上那块：形制照「我的」页那张卡（大一号头像 + 名字 + 数字 + 一行动作） */
.tieba-char-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 20px 14px 16px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(46, 50, 56, 0.05);
}

.tieba-char-hero .tieba-avatar {
    width: 58px;
    height: 58px;
    font-size: 22px;
}

.tieba-char-hero-name {
    font-size: 16px;
    font-weight: 700;
    color: #2e3238;
}

.tieba-char-note {
    font-size: 12.5px;
    color: #878c99;
}

.tieba-me-nums {
    display: flex;
    width: 100%;
    margin-top: 4px;
}

.tieba-me-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.tieba-me-num {
    font-size: 15px;
    font-weight: 700;
    color: #2e3238;
}

.tieba-me-label {
    font-size: 11px;
    color: #878c99;
}

.tieba-menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(46, 50, 56, 0.05);
    color: #2e3238;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.tieba-menu-row:active {
    background: #f2f3f8;
}

.tieba-arrow {
    color: #b6bac6;
    font-size: 15px;
}

.tieba-char-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(46, 50, 56, 0.05);
}

.tieba-char-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #2e3238;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 关注 / 粉丝行右边那枚小按钮，以及「已关注」那行小字 */
.tieba-btn-small {
    flex-shrink: 0;
    padding: 5px 13px;
    font-size: 12.5px;
}

.tieba-char-note {
    flex-shrink: 0;
    color: #a9aebc;
    font-size: 12.5px;
}

/* ============================================================
   v2 · 头栏可点标题 / 临时吧小标
   ============================================================ */

.tieba-head-link {
    max-width: 100%;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}

.tieba-temp-tag {
    flex-shrink: 0;
    padding: 7px 14px;
    background: #fdf4e3;
    border-bottom: 1px solid #f2e2c4;
    color: #97742a;
    font-size: 11.5px;
    line-height: 1.5;
}

/* ============================================================
   全吧搜索
   ============================================================ */

.tieba-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #dfe2ea;
    border-radius: 11px;
    background: #f8f9fc;
}

.tieba-search-box:focus-within {
    border-color: #5C6BC0;
    background: #fff;
}

.tieba-search-icon {
    flex-shrink: 0;
    line-height: 0;
    color: #9aa0b0;
}

.tieba-search-icon svg {
    width: 17px;
    height: 17px;
}

.tieba-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13.5px;
    color: #2e3238;
    outline: none;
}

.tieba-search-input::placeholder {
    color: #b6bac6;
}

.tieba-search-results {
    margin-top: 14px;
}

/* 搜索结果里吧卡片多的那行简介（说明为什么搜到它） */
.tieba-board-sub {
    font-size: 10.5px;
    color: #8d93a2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 推送开关那一行：比勾选列表里的行更重一点 */
.tieba-check-lead {
    padding: 10px 2px 2px;
}

.tieba-check-lead .tieba-check-name {
    font-size: 14.5px;
    font-weight: 600;
}

/* ============================================================
   轻提示
   ============================================================ */

.tieba-toast {
    position: fixed;
    left: 50%;
    bottom: 96px;
    transform: translateX(-50%) translateY(8px);
    z-index: 500;
    max-width: 78%;
    padding: 9px 15px;
    border-radius: 10px;
    background: rgba(38, 41, 48, 0.9);
    color: #fff;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
}

.tieba-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}