/* ============================================
   有话想说（话题广场）样式
   依赖 news.css 的基础 reset / header / 变量风格
   ============================================ */

/* ---------- 主容器 ---------- */
.sq-container {
    max-width: 680px;
    margin: 20px auto 40px;
    padding: 0 16px;
}

/* ---------- 发布框 ---------- */
.sq-composer-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.sq-composer {
    display: flex;
    gap: 12px;
}

.sq-composer-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

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

.sq-composer-input {
    width: 100%;
    min-height: 72px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.6;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.sq-composer-input:focus {
    outline: none;
    border-color: #1976d2;
}

.sq-composer-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.sq-composer-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sq-emoji-btn {
    border: none;
    background: #f5f5f5;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.2s;
}

.sq-emoji-btn:hover {
    background: #e8e8e8;
}

.sq-topic-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #e8f0fe;
    color: #1976d2;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.sq-topic-btn:hover {
    background: #d2e3fc;
}

/* 发布框内推荐话题：**只占一行**。
   话题多时横向滑动，而不是换行——「数量一多就换行」会在发布框里堆出好几行，
   白白占掉输入区的高度。各分辨率通用：容器宽度自适应，放得下就全显示、
   放不下就滑动，不需要为断点写特例。 */
.sq-quick-topics {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 0;
    border-top: 1px dashed #eee;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;              /* Firefox：隐藏横向滚动条 */
}
.sq-quick-topics::-webkit-scrollbar {
    display: none;                      /* WebKit / Blink：同上 */
}
.sq-quick-label {
    font-size: 12px;
    color: #888;
    flex-shrink: 0;
}
.sq-quick-chip {
    flex-shrink: 0;
    white-space: nowrap;
    border: none;
    background: #f0f4f8;
    color: #1976d2;
    border-radius: 10px;
    padding: 2px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.sq-quick-chip:hover {
    background: #e0ecff;
    transform: translateY(-1px);
}
/* 点了一个正文里已经写过的推荐话题：不重复插入，闪一下做反馈（否则像点了没反应） */
.sq-quick-chip.is-dup {
    animation: sqQuickDup 0.7s ease;
}
@keyframes sqQuickDup {
    0%, 100% { background: #f0f4f8; }
    50% { background: #ffe9b8; }
}

/* ---------- 系统自动识别（正文命中标签库里的词，发布时会自动带上） ----------
   绿色表示"不是用户亲手选的"，让用户一眼看出哪些是系统给的，可以 × 掉。
   （原先还与蓝色的手选 chips 形成"绿=系统给 / 蓝=用户选"的对照，
     手选控件已于 2026-09-20 移除，现在只剩这一种来源。） ---------- */
.sq-auto-topics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 0;
    border-top: 1px dashed #eee;
}
.sq-auto-label {
    font-size: 12px;
    color: #888;
    flex-shrink: 0;
}
.sq-auto-chip {
    display: inline-flex;
    align-items: center;
    background: rgba(26, 127, 55, 0.10);
    border-radius: 12px;
    padding: 2px 2px 2px 10px;
}
.sq-auto-chip-name {
    color: #1a7f37;
    font-size: 12px;
    line-height: 1.6;
}
.sq-auto-chip-del {
    border: none;
    background: transparent;
    color: #1a7f37;
    opacity: 0.55;
    font-size: 13px;
    line-height: 1;
    padding: 0 6px;
    cursor: pointer;
}
.sq-auto-chip-del:hover {
    opacity: 1;
}

/* 「添加话题（最多 5 个）」结构化选择器的样式（输入框 / 联想下拉 / 已选 chips / 提示文案）
   已于 2026-09-20 随控件一并移除：正文命中标签库的词会自动识别并直接生效，
   手选入口剩下的价值只有"挑一个正文里根本没出现的词"，不值得再养这一整套样式。 */
/* 卡片上的结构化话题行（只显示正文里没写的那些，避免与正文标签重复） */
.sq-card-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* 底部话题行的胶囊：13px，比正文小但别小到难点中——只作"这是哪些话题"的提示，
   不承担阅读功能。12px 实测偏小，13px 是"明显小于正文、又不显单薄"的平衡点。 */
.sq-card-topics .sq-topic-tag {
    font-size: 13px;
    line-height: 1.6;
    padding: 1px 8px;
    border-radius: 11px;
}

.sq-char-count {
    font-size: 12px;
    color: #999;
}

.sq-submit-btn {
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 18px;
    padding: 8px 28px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.sq-submit-btn:hover {
    background: #1565c0;
}

.sq-submit-btn:disabled {
    background: #a0c4e8;
    cursor: not-allowed;
}

/* 表情面板 */
.sq-emoji-panel {
    display: none;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 100%;
}

.sq-emoji-panel.show {
    display: flex;
}

.sq-emoji-item {
    border: none;
    background: transparent;
    font-size: 20px;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1;
}

.sq-emoji-item:hover {
    background: #e3f2fd;
}

/* 未登录引导 */
.sq-login-tip {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    color: #666;
    font-size: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.sq-login-link {
    color: #1976d2;
    margin-left: 8px;
    font-weight: 500;
}

/* ---------- Tab 行（含「共 N 条」） ---------- */
/* 「共 N 条」并进这一行排在「我的」之后（原先独立成行，白占一行高度）。
   nowrap：三个 Tab 不换行；统计文字放不下时自己截断，不把 Tab 挤下去。 */
.sq-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin: 16px 0 12px;
}

.sq-tab {
    flex-shrink: 0;
    border: none;
    background: #fff;
    border-radius: 16px;
    padding: 7px 18px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}

.sq-tab.active {
    background: #1976d2;
    color: #fff;
}

.sq-tab:not(.active):hover {
    color: #1976d2;
}

/* ---------- 帖子卡片 ---------- */
.sq-feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sq-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.sq-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.sq-card-avatar-link {
    display: block;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    line-height: 0;
}

.sq-card-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sq-card-author {
    flex: 1;
    min-width: 0;
}

.sq-card-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sq-card-level {
    display: inline-block;
    background: #e3f2fd;
    color: #1976d2;
    font-size: 11px;
    font-weight: 500;
    border-radius: 8px;
    padding: 1px 7px;
}

.sq-card-time {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

.sq-card-del {
    border: none;
    background: transparent;
    color: #bbb;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
}

.sq-card-del:hover {
    color: #e53935;
    background: #fbe9e7;
}

/* 正文 */
.sq-card-content {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    word-break: break-word;
    white-space: pre-wrap;
}

.sq-topic-tag {
    color: #1976d2;
    background: rgba(25, 118, 210, 0.08);
    border: none;
    border-radius: 12px;
    padding: 1px 8px;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    line-height: inherit;
    vertical-align: baseline;
    transition: background 0.15s;
}
.sq-topic-tag:hover {
    background: rgba(25, 118, 210, 0.18);
}

/* 话题筛选返回条 */
.sq-topic-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #e8f0fe, #f0e8fe);
    border-radius: 8px;
    font-size: 14px;
}
.sq-topic-bar-label {
    color: #666;
    font-size: 12px;
}
.sq-topic-bar-name {
    color: #1565c0;
    font-weight: 600;
    flex: 1;
}
.sq-topic-bar-close {
    border: none;
    background: rgba(0,0,0,0.08);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
    color: #555;
}
.sq-topic-bar-close:hover {
    background: rgba(0,0,0,0.18);
}

/* 「热门话题胶囊栏」（Tab 下方 `#话题#` + 用量计数那一排）的样式已于 2026-09-20 移除：
   它和 Tab 行、筛选条挤在同一视觉区，而"点话题加筛选"在卡片标签行、
   「全部话题」抽屉、右栏热门榜三处都有入口，重复占位。
   右栏热门榜的样式见下方 .sq-side-* 。 */

/* 操作条 */
.sq-card-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f2f2f2;
}

.sq-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    color: #888;
    font-size: 13px;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 14px;
    transition: all 0.2s;
}

.sq-action-btn:hover {
    background: #f5f5f5;
    color: #1976d2;
}

.sq-action-btn.liked {
    color: #e91e63;
}

.sq-action-btn.liked:hover {
    background: #fce4ec;
    color: #e91e63;
}

/* 举报按钮（C2）：弱化到比普通操作更安静，hover 才显红 */
.sq-action-btn.sq-action-report {
    color: #bbb;
}

.sq-action-btn.sq-action-report:hover {
    background: #fdf2f2;
    color: #d32f2f;
}

/* 楼中楼 */
.sq-replies {
    margin-top: 10px;
    background: #fafafa;
    border-radius: 8px;
    padding: 12px;
    /* 分页翻页时会把回复区滚到视口顶部（replies.js），需要给 sticky 的站点头部（56px）留出空间，
       否则第 1 条回复会被头部压住。见 news.css .site-header。 */
    scroll-margin-top: 68px;
}

.sq-reply-item {
    display: flex;
    gap: 8px;
    padding: 6px 0;
}

.sq-reply-item + .sq-reply-item {
    border-top: 1px dashed #eee;
}

.sq-reply-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 2px;
}

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

.sq-reply-head {
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sq-reply-head b {
    color: #333;
    font-weight: 600;
}

.sq-reply-to {
    color: #999;
}

.sq-reply-content {
    font-size: 13px;
    line-height: 1.6;
    color: #444;
    margin-top: 2px;
    word-break: break-word;
    white-space: pre-wrap;
}

.sq-reply-box {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

.sq-reply-input {
    flex: 1;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 13px;
    resize: none;
    height: 34px;
    font-family: inherit;
}

.sq-reply-input:focus {
    outline: none;
    border-color: #1976d2;
}

.sq-reply-send {
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0 16px;
    font-size: 13px;
    cursor: pointer;
}

.sq-reply-send:hover {
    background: #1565c0;
}

.sq-reply-send:disabled {
    background: #a0c4e8;
    cursor: not-allowed;
}

/* ---------- 回复分页（每页 5 条） ---------- */
/* 回复条数多的老帖（最多 75 条）原来一次铺 50 条，把卡片撑成一条长走廊。
   分页后条数不再决定卡片高度。 */
.sq-reply-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
}

.sq-reply-page-btn {
    border: 1px solid #d0d0d0;
    background: #fff;
    color: #555;
    border-radius: 14px;
    padding: 3px 12px;
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
    transition: all 0.2s;
}

.sq-reply-page-btn:hover:not(:disabled) {
    border-color: #1976d2;
    color: #1976d2;
}

.sq-reply-page-btn:disabled {
    color: #c0c0c0;
    border-color: #e8e8e8;
    background: #fafafa;
    cursor: not-allowed;
}

.sq-reply-page-info {
    color: #888;
    font-size: 12px;
    padding: 0 4px;
}

.sq-reply-page-info b {
    color: #1976d2;
    font-weight: 600;
}

/* ---------- 加载更多 ---------- */
.sq-load-more-wrap {
    text-align: center;
    padding: 20px 0;
}

.sq-load-more {
    border: 1px solid #d0d0d0;
    background: #fff;
    color: #666;
    border-radius: 20px;
    padding: 8px 40px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.sq-load-more:hover {
    border-color: #1976d2;
    color: #1976d2;
}

.sq-feed-end {
    color: #bbb;
    font-size: 13px;
}

/* ---------- 通知铃铛 ---------- */
.sq-bell-item {
    position: relative;
}

.sq-bell-btn {
    position: relative;
    border: none;
    background: transparent;
    color: #666;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.sq-bell-btn:hover {
    background: #f0f0f0;
    color: #1976d2;
}

.sq-bell-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    background: #e53935;
    color: #fff;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    box-sizing: border-box;
}

.sq-notify-panel {
    display: none;
    position: absolute;
    top: 42px;
    right: 0;
    width: 300px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    overflow: hidden;
}

.sq-notify-panel.show {
    display: block;
}

.sq-notify-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.sq-notify-head button {
    border: none;
    background: transparent;
    color: #1976d2;
    font-size: 12px;
    cursor: pointer;
}

.sq-notify-list {
    max-height: 320px;
    overflow-y: auto;
}

.sq-notify-item {
    padding: 10px 14px;
    font-size: 13px;
    color: #444;
    border-bottom: 1px solid #f7f7f7;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.sq-notify-item.unread {
    background: #f3f8ff;
}

/* follow 通知可点击跳主页（§19 P0-B） */
.sq-notify-item.is-clickable {
    cursor: pointer;
}

.sq-notify-item.is-clickable:hover {
    background: #eaf3ff;
}

.sq-notify-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1976d2;
    flex-shrink: 0;
    margin-top: 6px;
}

.sq-notify-item.read .sq-notify-dot {
    background: #ddd;
}

.sq-notify-text {
    flex: 1;
}

.sq-notify-time {
    display: block;
    font-size: 11px;
    color: #aaa;
    margin-top: 2px;
}

.sq-notify-empty {
    padding: 30px 0;
    text-align: center;
    color: #bbb;
    font-size: 13px;
}

/* ---------- 页脚 ---------- */
.site-footer {
    text-align: center;
    padding: 24px 0;
    color: #bbb;
    font-size: 12px;
}

/* ---------- 移动端 ---------- */
@media (max-width: 768px) {
    .sq-container {
        /* 补偿 news.css 移动端 56px 固定 header，否则发布框被遮挡 */
        margin-top: 60px;
        padding: 0 10px;
    }

    /* ===== header 移动端折叠 =====
       news.css 的 768px 块会把 .site-nav-right 整个 display:none，
       广场页需要保留它（内含铃铛），这里显式恢复并让其靠右，
       汉堡按钮跟在铃铛后面。
       下拉导航复用 news.css 已有的 .site-nav max-height 动画方案，不重复实现。 */
    .site-nav-right {
        display: flex;
        margin-left: auto;
    }
    /* 右侧链接区只保留铃铛，其余收进下拉菜单 */
    .site-nav-right ul li:not(#sq-bell-item) {
        display: none;
    }
    .site-nav-right ul {
        gap: 12px;
    }
    /* 铃铛触控区加大（移动端触摸标准 ≥44px） */
    #sq-bell-item {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sq-bell-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    /* 汉堡按钮：news.css 在 768px 下已 display:block 并给了 40x40，
       这里只微调对齐 */
    .mobile-menu-btn {
        margin-left: 4px;
    }

    .sq-composer-avatar {
        display: none;
    }

    .sq-composer-input {
        font-size: 14px;
        min-height: 60px;
    }

    .sq-card-content {
        font-size: 14px;
    }

    .sq-notify-panel {
        position: fixed;
        top: 56px;
        left: 10px;
        right: 10px;
        width: auto;
    }
}

/* 更窄屏幕（≤480px）：Tab 与操作条进一步紧凑 */
@media (max-width: 480px) {
    .sq-tabs {
        gap: 6px;
    }

    .sq-tab {
        padding: 6px 12px;
        font-size: 13px;
    }

    /* Tab 行里塞不下「，已加载 M 条」了，只留「共 N 条」这一半 ——
       它是需要"一眼看到"的信息，加载进度滚到底就知道了 */
    .sq-result-meta {
        font-size: 12px;
    }
    .sq-result-loaded {
        display: none;
    }

    .sq-action-btn {
        font-size: 13px;
        padding: 6px 10px;
    }

    .sq-load-more {
        width: 100%;
    }

    /* 窄屏：回复分页条 5 个控件横排会折行，收紧内边距与间距，尽量一行放完 */
    .sq-reply-pager {
        gap: 4px;
    }

    .sq-reply-page-btn {
        padding: 3px 8px;
    }

    .sq-reply-page-info {
        padding: 0 2px;
    }
}

/* ============================================================================
   浏览体验（第二批 × 第四批合并批）
   工具栏 / 筛选条 / 结果统计 / 双栏侧栏 / 卡片补全 / 全部话题抽屉 / 无限滚动
   ============================================================================ */

/* ---------- 布局：默认单栏，≥1200px 变两栏 ---------- */
.sq-layout {
    display: block;
}

.sq-main {
    /* grid/flex 子项默认 min-width:auto，长正文会把栅格撑破，必须显式收一下 */
    min-width: 0;
}

.sq-sidebar {
    display: none;
}

/* ---------- 工具栏（搜索框 + 全部话题入口） ---------- */
.sq-toolbar {
    display: flex;
    gap: 10px;
    margin: 0 0 12px;
}

.sq-search {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 20px;
    padding: 0 6px 0 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.sq-search-icon {
    color: #bbb;
    flex-shrink: 0;
}

.sq-search-input {
    flex: 1;
    min-width: 0;
    height: 38px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    color: #333;
}

.sq-search-btn {
    flex-shrink: 0;
    border: none;
    background: #1976d2;
    color: #fff;
    border-radius: 16px;
    padding: 6px 16px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.sq-search-btn:hover {
    background: #1565c0;
}

.sq-all-topics {
    flex-shrink: 0;
    border: none;
    background: #fff;
    color: #1976d2;
    border-radius: 20px;
    padding: 0 16px;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: background 0.15s;
}

.sq-all-topics:hover {
    background: #e8f1fb;
}

/* ---------- 生效中的筛选条件（多选话题 + 关键词） ---------- */
.sq-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
}

.sq-filter-label {
    font-size: 13px;
    color: #999;
}

.sq-filter-kw {
    font-size: 13px;
    color: #1976d2;
    background: rgba(25, 118, 210, 0.08);
    border-radius: 12px;
    padding: 3px 10px;
}

.sq-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: rgba(25, 118, 210, 0.12);
    color: #1976d2;
    border-radius: 12px;
    padding: 3px 8px 3px 10px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.sq-filter-chip:hover {
    background: rgba(25, 118, 210, 0.22);
}

.sq-filter-chip-x {
    font-size: 14px;
    line-height: 1;
    opacity: 0.7;
}

.sq-filter-clear {
    border: none;
    background: none;
    color: #999;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    padding: 3px 4px;
}

.sq-filter-clear:hover {
    color: #1976d2;
}

/* ---------- 结果统计（并进 Tab 行，见上方 .sq-tabs） ---------- */
.sq-result-meta {
    margin-left: 4px;          /* 紧跟「我的」Tab 之后 */
    min-width: 0;              /* flex 子项默认 min-width:auto，不收敛就没法截断 */
    font-size: 13px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- 卡片补全：标题 / 浏览量 / 正文折叠 ---------- */
.sq-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    line-height: 1.5;
    margin: 0 0 6px;
}

/* 运营位徽标（C1）：置顶/精华，后台可设；与信息流置顶排序配套 */
.sq-op-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: 2px;
}
.sq-op-pinned { color: #b45309; background: #fef3c7; border: 1px solid #fcd34d; }
.sq-op-featured { color: #b91c1c; background: #fee2e2; border: 1px solid #fca5a5; }

/* 正文超过 4 行折叠。折叠用 -webkit-line-clamp（按行数截断），
   而不是按字符数猜——中英混排、含换行的时候字符数判不准。 */
.sq-card-content {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sq-card-content.expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.sq-card-expand {
    border: none;
    background: none;
    color: #1976d2;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    padding: 4px 0 0;
}

.sq-card-expand:hover {
    text-decoration: underline;
}

.sq-card-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #999;
    font-size: 13px;
}

/* 「分享」按钮：把它和浏览量一起顶到操作行右侧。
   ⚠️ auto 外边距只给它一个——两个元素都写 auto 的话，
   剩余空间会被平分，赞/回复和分享之间会裂出一道空档。 */
.sq-action-share {
    margin-left: auto;
}

/* ---------- 单帖模式（深链 ?post=ID） ---------- */
.sq-single-bar {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: #f5f7fa;
    border-radius: 8px;
}

.sq-single-back {
    padding: 0;
    border: 0;
    background: none;
    color: #1976d2;
    font-size: 14px;
    cursor: pointer;
}

.sq-single-back:hover {
    text-decoration: underline;
}

/* ---------- 轻提示（复制链接等） ---------- */
.sq-toast {
    position: fixed;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    z-index: 3000;
    max-width: 80vw;
    padding: 10px 16px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

/* ---------- 无限滚动 ---------- */
.sq-sentinel {
    width: 100%;
    height: 1px;
}

.sq-loading {
    color: #bbb;
    font-size: 13px;
}

/* ---------- 右侧栏 ---------- */
.sq-side-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.sq-side-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.sq-side-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sq-side-topic {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: none;
    padding: 5px 0;
    font-size: 13px;
    font-family: inherit;
    color: #444;
    text-align: left;
    cursor: pointer;
}

.sq-side-topic:hover {
    color: #1976d2;
}

.sq-side-rank {
    flex-shrink: 0;
    width: 16px;
    color: #bbb;
    font-size: 12px;
}

.sq-side-topic-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sq-side-count {
    flex-shrink: 0;
    color: #999;
    font-size: 12px;
}

.sq-side-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
}

.sq-side-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sq-side-user-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sq-side-user-name {
    font-size: 13px;
    color: #444;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sq-side-user-meta {
    font-size: 12px;
    color: #999;
}

.sq-side-empty {
    color: #bbb;
    font-size: 13px;
}

.sq-side-notice {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
}

.sq-side-notice p {
    margin: 0 0 8px;
}

.sq-side-notice p:last-child {
    margin-bottom: 0;
}

.sq-side-notice b {
    color: #1976d2;
    font-weight: 600;
}

/* ---------- 右栏幻灯片（热门话题 / 活跃用户共用） ---------- */
/* 结构：.sq-carousel > .sq-carousel-viewport > .sq-carousel-track > .sq-carousel-page[]
                                              └ .sq-carousel-nav（仅多于一页时渲染）
   目的：把「视口内可见条数」和「可翻到的总条数」解耦。
   右栏每页能放几条被视口高度锁死，轮播让总量不再受这个上限约束。 */
.sq-carousel {
    position: relative;
}

.sq-carousel-viewport {
    overflow: hidden;
    /* ⚠️ 刻意不给定高：track 用 align-items:stretch，各页自动撑到最高页的高度，
       viewport 随之取该高度 ⇒ 翻页时卡片高度恒定。
       若页高不齐（比如末页只剩 1 条），换页会让下方卡片上下跳动。 */
}

.sq-carousel-track {
    display: flex;
    align-items: stretch;
    transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.sq-carousel-page {
    flex: 0 0 100%;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;   /* 与 .sq-side-list 的行间距保持一致 */
}

.sq-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

.sq-carousel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: none;
    border-radius: 50%;
    color: #bbb;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.sq-carousel-arrow:hover {
    color: #1976d2;
    background: rgba(25, 118, 210, 0.08);
}

.sq-carousel-dots {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sq-carousel-dot {
    width: 5px;
    height: 5px;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: #dcdcdc;
    cursor: pointer;
    transition: width 0.25s, background 0.2s;
}

.sq-carousel-dot:hover {
    background: #b8b8b8;
}

/* 当前页：拉长成小药丸，比单纯变色更容易一眼看出第几页 */
.sq-carousel-dot.is-active {
    width: 14px;
    background: #1976d2;
}

@media (prefers-reduced-motion: reduce) {
    .sq-carousel-track {
        transition: none;
    }

    .sq-carousel-dot {
        transition: none;
    }
}

/* ---------- 全部话题抽屉 ---------- */
.sq-drawer-mask {
    position: fixed;
    inset: 0;
    /* 必须高于站点头部：news.css 里 .site-header 是 position:sticky + z-index:1000，
       遮罩原来给 999，结果抽屉顶部 56px 全被头部压住——关闭按钮正好落在那一块，
       elementFromPoint 命中的是 header，用户点关闭毫无反应。
       层级值统一往上抬到 1600（同时高于 news.css 里其它 1000/1500 的浮层）。 */
    z-index: 1600;
    display: none;
    background: rgba(0, 0, 0, 0.35);
}

.sq-drawer-mask.show {
    display: block;
}

.sq-drawer {
    position: absolute;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 90vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.12);
}

.sq-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}

.sq-drawer-close {
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: #999;
    cursor: pointer;
}

.sq-drawer-close:hover {
    color: #1976d2;
}

.sq-drawer-search-wrap {
    padding: 12px 16px 8px;
}

.sq-drawer-search {
    width: 100%;
    height: 36px;
    border: 1px solid #e4e4e4;
    border-radius: 18px;
    padding: 0 14px;
    font-size: 14px;
    font-family: inherit;
    color: #333;
    outline: none;
}

.sq-drawer-search:focus {
    border-color: #1976d2;
}

.sq-drawer-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sq-drawer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    border: 1px solid #eee;
    background: #fafafa;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #444;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s;
}

.sq-drawer-item:hover {
    border-color: #1976d2;
    color: #1976d2;
}

.sq-drawer-item.selected {
    border-color: #1976d2;
    background: rgba(25, 118, 210, 0.1);
    color: #1976d2;
}

.sq-drawer-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sq-drawer-used {
    flex-shrink: 0;
    font-size: 12px;
    color: #999;
}

.sq-drawer-used-zero {
    color: #ccc;
}

.sq-drawer-empty {
    padding: 20px 0;
    text-align: center;
    color: #bbb;
    font-size: 13px;
}

.sq-drawer-foot {
    padding: 10px 16px;
    border-top: 1px solid #f0f0f0;
    font-size: 12px;
    color: #999;
}

/* ---------- 移动端底部发布按钮（≤768px 且已登录） ---------- */
.sq-mobile-publish {
    position: fixed;
    right: 16px;
    bottom: 72px;
    z-index: 900;
    display: none;
    align-items: center;
    border: none;
    background: #1976d2;
    color: #fff;
    border-radius: 24px;
    padding: 12px 20px;
    font-size: 15px;
    font-family: inherit;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

/* ---------- 断点补充：1024 / 1200（原来只有 768 / 480） ---------- */
@media (min-width: 1024px) and (max-width: 1199px) {
    .sq-container {
        max-width: 760px;
    }
}

@media (min-width: 1200px) {
    .sq-container {
        max-width: 1100px;
    }

    .sq-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 24px;
        align-items: start;
    }

    /* 右栏吸顶。⚠️ 这里有个 sticky 的经典陷阱：
       sticky 只能"钉住顶部"，元素一旦比视口还高，被钉住的那部分就永远滚不出来。
       侧栏三张卡实测高 911px（含末卡 12px 下边距），加上 top:80 需要 991px 视口：
         · 1440x900 → 底部少 79px，站点公告看不全
         · 1366x768 → 少 211px，活跃用户就已被切
         · 1280x800 → 少 191px
       而且正文无限滚动让栅格行一直很高 ⇒ 侧栏永远处于"被钉住"状态，
       底部内容在整页范围内都不可达（不是"要往下滚滚"，是根本滚不出来）。
       修法：给侧栏一个不超过视口的最大高度 + 自身可滚。
         · 100dvh 优先（移动端地址栏收起时 100vh 偏大，会顶出屏幕）
         · 细滚动条，别在 300px 宽的栏里插一根 15px 的系统默认滚动条
       注意**不要**加 overscroll-behavior: contain：内滚距离通常只有几十像素，
       一旦掐断滚动链，鼠标停在右栏时整页就会"冻住"（滚轮毫无反应、要先把鼠标
       移开才能继续翻），比让它自然接力更烦人。默认的滚动链接力在这里才是想要的。 */
    .sq-sidebar {
        display: block;
        position: sticky;
        top: 68px;                          /* 吸顶位置：站点头部 56px + 12px 呼吸 */
        max-height: calc(100vh - 76px);     /* 68 顶部 + 8 底部留白 */
        max-height: calc(100dvh - 76px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
    }

    .sq-sidebar::-webkit-scrollbar {
        width: 6px;
    }

    .sq-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

    .sq-sidebar::-webkit-scrollbar-thumb {
        /* 这是"下面还有内容"的唯一提示，别调太淡——300px 宽的栏里看不见就等于没滚动条 */
        background: rgba(0, 0, 0, 0.22);
        border-radius: 3px;
    }

    .sq-sidebar:hover::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.4);
    }

    /* 末张卡片的 12px 下边距会变成"滚到底还剩一段空白"的假溢出，去掉 */
    .sq-sidebar .sq-side-card:last-child {
        margin-bottom: 0;
    }
}

/* 超宽屏：内容区放宽到 1200px 与站点头部（news.css 的 .header-content）对齐，
   右栏同步 300 → 320px，免得 1920/2560 下两边留白过大、正文栏也偏窄。
   只对广场页有效——user.html 复用 .sq-container，但里面 .up-wrap 自带 760px 上限。 */
@media (min-width: 1600px) {
    .sq-container {
        max-width: 1200px;
    }

    .sq-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

@media (max-width: 768px) {
    .sq-toolbar {
        flex-wrap: wrap;
    }

    .sq-all-topics {
        height: 38px;
    }

    .sq-mobile-publish.is-on {
        display: inline-flex;
    }

    .sq-drawer {
        width: 100%;
        max-width: 100%;
    }
}

/* ============ 用户公开主页（user.html） ============
   复用广场的容器宽度与卡片观感；头部是"资料 + 三计数 + 动作"的横排，
   窄屏时计数与按钮换行到昵称下方。 */
.up-wrap { max-width: 760px; margin: 0 auto; padding: 20px 16px 40px; }

.up-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 12px;
}
.up-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.up-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.up-info { flex: 1; min-width: 180px; }
.up-name { font-size: 18px; font-weight: 600; color: #222; display: flex; align-items: center; gap: 8px; }
.up-bio { margin-top: 6px; font-size: 13px; color: #555; line-height: 1.6; }
.up-joined { margin-top: 4px; font-size: 12px; color: #aaa; }
.up-side { display: flex; gap: 6px; }
.up-stat {
    display: flex; flex-direction: column; align-items: center;
    background: none; border: none; cursor: pointer; padding: 4px 10px;
    border-radius: 8px; min-width: 56px;
}
.up-stat:hover { background: #f5f7fa; }
.up-stat b { font-size: 16px; color: #222; }
.up-stat span { font-size: 12px; color: #888; }
.up-action { display: flex; align-items: center; }
.up-follow-btn {
    display: inline-block; padding: 7px 22px; border-radius: 18px;
    background: #1976d2; color: #fff; border: none; font-size: 14px;
    cursor: pointer; text-decoration: none; transition: background 0.2s;
}
.up-follow-btn:hover { background: #1565c0; }
.up-follow-btn.is-following { background: #fff; color: #666; border: 1px solid #ddd; }
.up-follow-btn.is-following:hover { color: #d32f2f; border-color: #d32f2f; }
.up-follow-btn.is-self { background: #f5f5f5; color: #555; }
.up-follow-btn.is-self:hover { background: #eee; }

/* Tab 行沿用 .sq-tabs/.sq-tab；列表区 */
.up-list { min-height: 120px; }
.up-empty { padding: 48px 0; text-align: center; color: #999; font-size: 14px; }
.up-empty a { color: #1976d2; }
.up-missing { padding: 32px 0; text-align: center; color: #666; font-size: 14px; }
.up-missing a { color: #1976d2; }

/* TA 的帖子卡片：在 sq-card 基础上补一个紧凑头部（头像+时间）与底栏（互动+入口） */
.up-post { padding: 14px 16px; }
.up-post-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.up-post-head .sq-card-avatar { width: 32px; height: 32px; }
.up-post-time { font-size: 12px; color: #aaa; }
.up-post-content { font-size: 14px; }
.up-post-foot { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: 12px; color: #999; }
.up-post-stat { display: inline-flex; align-items: center; gap: 3px; }
.up-post-link { margin-left: auto; color: #1976d2; text-decoration: none; font-size: 13px; }
.up-post-link:hover { text-decoration: underline; }

/* 关注 / 粉丝列表行 */
.up-user-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; background: #fff;
    border: 1px solid #f0f0f0; border-radius: 10px; margin-bottom: 8px;
    transition: border-color 0.15s;
}
.up-user-row:hover { border-color: #1976d2; }
.up-row-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.up-row-name { font-size: 14px; color: #222; font-weight: 500; }
/* 行主体可点区占满剩余宽度（§19 P1-C：右侧让位给关注小按钮） */
.up-row-main {
    display: flex; align-items: center; gap: 12px;
    flex: 1; min-width: 0; text-decoration: none;
}
/* 互关徽标：社交产品的经典激励回路 */
.up-row-mutual {
    flex-shrink: 0;
    font-size: 11px; line-height: 1;
    color: #1976d2; background: #e8f2fd;
    border: 1px solid #bbdcfb; border-radius: 9px;
    padding: 3px 8px;
}
/* 行内关注小按钮：与页头主按钮 .up-follow-btn 同风格，尺寸缩小 */
.up-row-follow {
    flex-shrink: 0;
    background: #1976d2; color: #fff;
    border: 1px solid #1976d2; border-radius: 14px;
    padding: 4px 14px; font-size: 12px;
    cursor: pointer; transition: all 0.15s;
}
.up-row-follow:hover { background: #1565c0; border-color: #1565c0; }
.up-row-follow.is-following {
    background: #fff; color: #444; border-color: #ccc;
}
.up-row-follow.is-following:hover {
    color: #d32f2f; border-color: #d32f2f; background: #fff5f5;
}
.up-row-follow:disabled { opacity: 0.6; cursor: default; }

/* 广场卡片作者名：现在是可点的（跳用户主页），去掉链接默认样式 */
.sq-card-name-link { color: inherit; text-decoration: none; }
.sq-card-name-link:hover { color: #1976d2; }

/* 窄屏：头像+昵称一行，计数与关注按钮合到一行，压掉大段空白 */
@media (max-width: 640px) {
    .up-card { padding: 16px; }
    .up-head { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 10px; }
    .up-avatar { width: 56px; height: 56px; }
    .up-info { flex: 1 1 calc(100% - 66px); min-width: 0; }
    .up-side { order: 3; width: auto; margin: 0 0 0 66px; justify-content: flex-start; gap: 4px; }
    .up-stat { padding: 2px 10px; min-width: 48px; }
    .up-action { order: 4; margin-left: auto; }
}

/* ---------- 关注流红点横幅（P2-E：聚合轻提示） ---------- */

.sq-follow-tip {
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    font-size: 14px;
}

.sq-follow-tip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sq-follow-tip-text {
    color: #1d4ed8;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sq-follow-tip-actions {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
}

.sq-follow-tip-btn {
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 4px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}

.sq-follow-tip-btn:hover { background: #1565c0; }

.sq-follow-tip-btn.is-quiet {
    background: #fff;
    color: #666;
    border: 1px solid #ddd;
}

.sq-follow-tip-btn.is-quiet:hover {
    background: #f5f5f5;
    color: #333;
}

.sq-follow-tip-list {
    margin-top: 10px;
    border-top: 1px solid #eef2f7;
    padding-top: 6px;
}

.sq-follow-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}

.sq-follow-item:hover { background: #f5f9ff; }

.sq-follow-item-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sq-follow-item-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sq-follow-item-body b {
    font-size: 13px;
    color: #333;
}

.sq-follow-item-text {
    font-size: 13px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sq-follow-item-time {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 12px;
    color: #999;
}

.sq-follow-empty {
    padding: 12px 4px;
    text-align: center;
    color: #999;
    font-size: 13px;
}

@media (max-width: 480px) {
    .sq-follow-item-time { display: none; }
}

/* ---------- 关注触点铺开（§19 P1-D） ---------- */

/* 活跃榜行尾「+关注」小按钮；sq-card-follow 复用于单帖模式作者行 */
.sq-side-user-main { flex: 1; min-width: 0; }

.sq-side-follow {
    flex-shrink: 0;
    background: #1976d2; color: #fff;
    border: 1px solid #1976d2; border-radius: 12px;
    padding: 2px 10px; font-size: 12px;
    cursor: pointer; transition: all 0.15s;
}
.sq-side-follow:hover { background: #1565c0; border-color: #1565c0; }
.sq-side-follow.is-following {
    background: #fff; color: #444; border-color: #ccc;
}
.sq-side-follow.is-following:hover {
    color: #d32f2f; border-color: #d32f2f; background: #fff5f5;
}
.sq-side-follow:disabled { opacity: 0.6; cursor: default; }

/* 单帖模式作者行里的按钮：与名字/等级徽标同排 */
.sq-card-follow {
    margin-left: 6px;
    vertical-align: middle;
}