/* ============================================
   XForum - 仿推特(X)微博客主题样式
   ============================================ */

/* ===== CSS 变量 - 深色模式 ===== */
.theme-dark {
    --bg-primary: #000000;
    --bg-secondary: #16181c;
    --bg-tertiary: #1d1f23;
    --bg-hover: #1d1f23;
    --bg-active: #1d1f23;
    --text-primary: #e7e9ea;
    --text-secondary: #71767b;
    --text-tertiary: #536471;
    --border-color: #2f3336;
    --accent: #1d9bf0;
    --accent-hover: #1a8cd8;
    --accent-bg: rgba(29, 155, 240, 0.1);
    --red: #f4212e;
    --red-bg: rgba(244, 33, 46, 0.1);
    --green: #00ba7c;
    --green-bg: rgba(0, 186, 124, 0.1);
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* ===== CSS 变量 - 浅色模式 ===== */
.theme-light {
    --bg-primary: #ffffff;
    --bg-secondary: #f7f9f9;
    --bg-tertiary: #eff3f4;
    --bg-hover: #eff3f4;
    --bg-active: #eff3f4;
    --text-primary: #0f1419;
    --text-secondary: #536471;
    --text-tertiary: #536471;
    --border-color: #eff3f4;
    --accent: #1d9bf0;
    --accent-hover: #1a8cd8;
    --accent-bg: rgba(29, 155, 240, 0.1);
    --red: #f4212e;
    --red-bg: rgba(244, 33, 46, 0.1);
    --green: #00ba7c;
    --green-bg: rgba(0, 186, 124, 0.1);
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* ===== 基础重置 ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover { text-decoration: none; }

img { max-width: 100%; display: block; }

::selection { background: var(--accent-bg); }

/* ===== 主布局 ===== */
.app {
    display: flex;
    flex-wrap: wrap;
    min-height: 100vh;
    justify-content: center;
    width: 100%;
}

.left-sidebar {
    position: sticky;
    top: 0;
    width: 275px;
    height: 100vh;
    flex-shrink: 0;
    align-self: flex-start;
    border-right: 1px solid var(--border-color);
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
}

.sidebar-inner {
    flex: 1;
    overflow-y: auto;
    padding-top: 10px;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
}

/* ===== 站点名称 ===== */
.sidebar-site-title {
    padding: 12px 12px 12px;
    margin-bottom: 4px;
}
.sidebar-site-title a {
    display: block;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}
.sidebar-site-title a:hover {
    color: var(--accent);
    text-decoration: none;
}

/* ===== Logo ===== */
.logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin: 4px 4px 12px;
    border-radius: 12px;
    color: var(--accent);
    width: fit-content;
    font-size: 30px;
    line-height: 1;
    transition: background 0.2s, transform 0.2s;
}
.logo:hover {
    background: var(--accent-bg);
    text-decoration: none;
    transform: scale(1.06);
}
.logo .layui-icon { font-size: 30px; }

/* ===== 导航菜单 ===== */
.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 11px 12px;
    border-radius: 999px;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
    position: relative;
}
.nav-item:hover {
    background: var(--bg-hover);
    text-decoration: none;
}
.nav-item.active {
    font-weight: 700;
    background: var(--bg-active);
    box-shadow: inset 3px 0 0 0 var(--accent), 0 2px 8px rgba(0, 0, 0, 0.12);
}
.nav-item.active::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 28px;
    background: var(--accent);
    border-radius: 0 4px 4px 0;
}
.nav-item .layui-icon {
    font-size: 22px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    color: var(--text-primary);
    transition: color 0.2s;
}
.nav-item.active .layui-icon { color: var(--accent); }
.nav-item span { white-space: nowrap; }

/* ===== 按钮 ===== */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 16px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s, transform 0.15s;
    text-decoration: none;
    line-height: 1;
}
.btn-primary:hover {
    background: var(--accent-hover);
    text-decoration: none;
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary:disabled:hover { background: var(--accent); transform: none; }

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 16px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    text-decoration: none;
    line-height: 1;
}
.btn-outline:hover {
    background: var(--accent-bg);
    text-decoration: none;
    transform: translateY(-1px);
}
.btn-outline:active { transform: translateY(0); }

.nav-compose-btn {
    margin: 18px 0 14px;
    min-height: 50px;
    gap: 6px;
    width: 100%;
    box-shadow: 0 4px 12px var(--accent-bg);
}
.nav-compose-btn .layui-icon { font-size: 18px; }

/* ===== 登录/注册按钮组 ===== */
.auth-buttons {
    display: flex;
    gap: 8px;
    margin: 18px 6px 14px;
    flex-wrap: wrap;
}
.auth-btn {
    flex: 1;
    min-width: 90px;
    padding: 11px 14px;
    min-height: 44px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
}

/* ===== 用户卡片 ===== */
.user-card-wrap {
    position: relative;
}
.user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
    background: none;
    border: none;
    width: 100%;
    color: inherit;
}
.user-card:hover { background: var(--bg-hover); text-decoration: none; }
.user-card img { border-radius: 50%; flex-shrink: 0; }
.user-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: left;
}
.user-card-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-card-handle {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-card-arrow {
    font-size: 14px;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: transform 0.2s;
}
.user-card-wrap.open .user-card-arrow {
    transform: rotate(180deg);
}
.user-card-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    z-index: 100;
    min-width: 180px;
}
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-decoration: none;
    text-align: left;
    transition: background 0.15s;
}
.dropdown-item:hover {
    background: var(--bg-hover);
    text-decoration: none;
}
.dropdown-item .layui-icon {
    font-size: 16px;
    color: var(--text-secondary);
    width: 20px;
    text-align: center;
}
.logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: none;
    border: none;
    padding: 6px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    transition: color 0.2s, background 0.2s;
}
.logout-btn:hover {
    color: var(--red);
    background: var(--red-bg);
}
.logout-btn .layui-icon { font-size: 18px; }

/* ===== 侧边栏底部固定区域 ===== */
.sidebar-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

/* ===== 主题切换浮动按钮（固定右下角） ===== */
.theme-toggle-fab {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.theme-toggle-fab:hover {
    background: var(--bg-hover);
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.theme-toggle-fab:active { transform: scale(0.96); }
.theme-toggle-fab .layui-icon { font-size: 22px; line-height: 1; }
.theme-dark .theme-icon-moon { display: none; }
.theme-light .theme-icon-sun { display: none; }

/* ===== 内容区域 ===== */
.content-area {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    min-width: 0;
    max-width: 990px;
}

.main-content {
    display: flex;
    max-width: 990px;
    width: 100%;
    gap: 0;
}

/* ===== 信息流 ===== */
.feed {
    flex: 1;
    max-width: 600px;
    min-width: 0;
    border-right: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
}

.feed-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
}
.theme-light .feed-header { background: rgba(255, 255, 255, 0.65); }

.feed-title {
    padding: 10px 16px;
    font-size: 17px;
    font-weight: 700;
}

.feed-tabs {
    display: flex;
}
.feed-tab {
    flex: 1;
    text-align: center;
    padding: 14px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 400;
    transition: background 0.2s, color 0.2s;
    border-bottom: 3px solid transparent;
}
.feed-tab:hover {
    background: var(--bg-hover);
    text-decoration: none;
    color: var(--accent);
}
.feed-tab.active {
    color: var(--text-primary);
    font-weight: 700;
    border-bottom-color: var(--accent);
}

/* ===== 发布推文框 ===== */
.compose-box {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}
.compose-avatar img { border-radius: 50%; }
.compose-area { flex: 1; position: relative; }
.compose-area textarea,
.modal-textarea textarea {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 20px;
    font-family: inherit;
    resize: none;
    outline: none;
    padding: 12px 0;
    line-height: 1.4;
}
.compose-area textarea::placeholder,
.modal-textarea textarea::placeholder { color: var(--text-secondary); }

.compose-footer,
.modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
}
#compose-count,
#modal-compose-count {
    font-size: 13px;
    color: var(--text-secondary);
}
#compose-count.over-limit,
#modal-compose-count.over-limit {
    color: var(--red);
}

.compose-guest {
    flex-direction: column;
    padding: 24px 16px;
    text-align: center;
}
.compose-guest-text strong {
    font-size: 19px;
    display: block;
    margin-bottom: 8px;
}
.compose-guest-text p {
    color: var(--text-secondary);
    margin-bottom: 16px;
}
.compose-guest-text .btn-primary,
.compose-guest-text .btn-outline {
    display: inline-block;
    padding: 12px 32px;
    min-width: 120px;
}
.guest-auth-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
}

/* ===== 推文卡片 ===== */
.tweet {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
    cursor: pointer;
    position: relative;
}
.tweet:hover { background: var(--bg-hover); }

/* 正在审核标志（仅作者可见的待审核推文） */
.tweet-pending { opacity: 0.85; }
.tweet-pending-badge {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    pointer-events: none;
}
.tweet-pending-badge .layui-icon { font-size: 12px; }

.tweet-avatar img {
    border-radius: 50%;
    flex-shrink: 0;
}

.tweet-body { flex: 1; min-width: 0; }

.tweet-header {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}
.tweet-name {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 15px;
}
.tweet-name:hover { text-decoration: none; }
.tweet-handle,
.tweet-time,
.tweet-dot {
    color: var(--text-secondary);
    font-size: 15px;
}
.tweet-time:hover { text-decoration: none; }

.tweet-follow-btn {
    margin-left: auto;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--text-primary);
    color: var(--bg-primary);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.tweet-follow-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.tweet-follow-btn.following {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-color);
}
.tweet-follow-btn.following:hover {
    background: var(--red-bg);
    color: var(--red);
    border-color: var(--red);
}
.tweet-follow-btn.following:hover::after { content: ' 取消关注'; }
.tweet-follow-btn.following::after { content: ''; }

.tweet-content {
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.tweet-content a.mention,
.tweet-content a.hashtag,
.tweet-detail-content a.mention,
.tweet-detail-content a.hashtag,
.comment-body a.mention,
.comment-body a.hashtag { color: var(--accent); text-decoration: none; }
.tweet-content a.mention,
.tweet-detail-content a.mention,
.comment-body a.mention {
    background: var(--accent-bg, rgba(29,155,240,0.1));
    border-radius: 4px;
    padding: 0 4px;
    font-weight: 500;
    transition: background 0.2s;
}
.tweet-content a.mention:hover,
.tweet-detail-content a.mention:hover,
.comment-body a.mention:hover {
    background: var(--accent);
    color: #fff !important;
    text-decoration: none;
}
.tweet-content span.mention,
.tweet-detail-content span.mention,
.comment-body span.mention { color: var(--accent); }

/* 日间模式：@提及仅保留文字颜色，去除背景 */
.theme-light .tweet-content a.mention,
.theme-light .tweet-detail-content a.mention,
.theme-light .comment-body a.mention {
    background: transparent;
    padding: 0;
}
.theme-light .tweet-content a.mention:hover,
.theme-light .tweet-detail-content a.mention:hover,
.theme-light .comment-body a.mention:hover {
    background: transparent !important;
    color: var(--accent-hover) !important;
    text-decoration: underline;
}

.tweet-media {
    margin-top: 12px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.tweet-media img { width: 100%; border-radius: 16px; }

/* ===== 推文操作栏 ===== */
.tweet-actions {
    display: flex;
    justify-content: space-between;
    max-width: 425px;
    margin-top: 12px;
    padding-right: 8px;
}
.tweet-action {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 999px;
    transition: color 0.2s, background 0.2s;
}
.tweet-action svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}
.tweet-action-reply:hover { color: var(--accent); background: var(--accent-bg); }
.tweet-action-retweet:hover { color: var(--green); background: var(--green-bg); }
.tweet-action-like:hover { color: var(--red); background: var(--red-bg); }
.tweet-action-like.liked { color: var(--red); }
.tweet-action-like.liked svg { fill: currentColor; }
.tweet-action-share:hover { color: var(--accent); background: var(--accent-bg); }
.tweet-action span { min-width: 16px; }

/* ===== 右侧边栏 ===== */
.sidebar {
    width: 350px;
    flex-shrink: 0;
    padding: 0 16px;
}
.sidebar-section { margin-top: 16px; }

.search-box {
    position: sticky;
    top: 0;
    z-index: 90;
    padding: 12px 0;
    margin: -12px 0 0;
    background: var(--bg-primary);
}
.search-form {
    display: flex;
    align-items: center;
    background: var(--bg-tertiary);
    border-radius: 999px;
    padding: 10px 16px;
    border: 1px solid transparent;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.search-form:focus-within {
    background: var(--bg-secondary);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-bg);
}
.search-form input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 14px;
    width: 100%;
    font-family: inherit;
}
.search-form input::placeholder { color: var(--text-secondary); }
.search-form svg {
    width: 18px;
    height: 18px;
    fill: var(--text-secondary);
    margin-right: 10px;
    flex-shrink: 0;
}

.sidebar-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    margin-bottom: 16px;
    overflow: hidden;
}
.sidebar-card-title {
    padding: 12px 16px 8px;
    font-size: 20px;
    font-weight: 800;
}

.trend-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
}
.trend-item:hover { background: var(--bg-hover); }
.trend-category {
    font-size: 13px;
    color: var(--text-secondary);
}
.trend-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 2px 0;
}
.trend-count {
    font-size: 13px;
    color: var(--text-secondary);
}

.sidebar-card-more {
    display: block;
    padding: 12px 16px;
    color: var(--accent);
    font-size: 15px;
    transition: background 0.2s;
}
.sidebar-card-more:hover { background: var(--bg-hover); text-decoration: none; }

/* 收藏入口卡片 */
.sidebar-bookmark-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s;
}
.sidebar-bookmark-link:hover {
    background: var(--bg-hover);
    text-decoration: none;
}
.sidebar-bookmark-link svg {
    color: var(--red, #f56c6c);
    flex-shrink: 0;
}
.bookmark-count-badge {
    margin-left: auto;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

/* 推荐关注 */
.suggest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
}
.suggest-item:hover { background: var(--bg-hover); }
.suggest-item img { border-radius: 50%; flex-shrink: 0; }
.suggest-info { flex: 1; min-width: 0; }
.suggest-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
    line-height: 1.2;
    max-width: 100%;
}
.suggest-name:hover { text-decoration: none; }
.suggest-handle {
    font-size: 13px;
    color: var(--text-secondary);
}

.follow-small-btn {
    padding: 6px 16px;
    border-radius: 999px;
    border: none;
    background: var(--text-primary);
    color: var(--bg-primary);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.follow-small-btn:hover { background: var(--accent-hover); color: #fff; }
.follow-small-btn.following {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* ===== 空状态 ===== */
.empty-state {
    padding: 48px 16px;
    text-align: center;
}
.empty-state h3 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
}
.empty-state p {
    color: var(--text-secondary);
}

/* ===== 搜索用户结果 ===== */
.search-users-section {
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    margin-bottom: 20px;
}
.search-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary);
}
.search-section-title .layui-icon { font-size: 16px; }
.search-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: var(--text-primary);
    transition: background 0.2s;
}
.search-user-card:hover {
    background: var(--bg-hover);
    text-decoration: none;
}
.search-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}
.search-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.search-user-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.search-user-handle {
    font-size: 13px;
    color: var(--text-secondary);
}
.search-users-toggle {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s;
}
.search-users-toggle:hover { background: var(--bg-hover); }

/* ===== 分页 ===== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 16px;
    list-style: none;
}
.page-item {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    background: var(--bg-primary);
}
.page-item:hover {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent);
    text-decoration: none;
}
.page-item.current {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 700;
}
.page-nav {
    padding: 16px;
    text-align: center;
}
.page-nav .pagination {
    display: inline-flex;
    padding: 0;
}

/* ===== 个人资料页 ===== */
.profile-header {
    border-bottom: 1px solid var(--border-color);
}
.profile-banner {
    height: 200px;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.profile-info {
    padding: 0 16px;
    margin-top: -67px;
    margin-bottom: 16px;
    position: relative;
}
.profile-avatar {
    width: 134px;
    height: 134px;
    border-radius: 50%;
    border: 4px solid var(--bg-primary);
    overflow: hidden;
    display: inline-block;
    margin-bottom: 16px;
    background: var(--bg-primary);
}
.profile-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.profile-actions {
    position: absolute;
    top: 0;
    right: 16px;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0;
    z-index: 2;
}
.profile-details {
    padding-bottom: 16px;
}
.profile-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    line-height: 1.2;
}
.profile-handle {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.profile-bio {
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 12px;
    line-height: 1.4;
}
.profile-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.profile-meta a { color: var(--text-secondary); }
.profile-meta a:hover { text-decoration: none; color: var(--accent); }
.profile-meta a span { color: var(--text-primary); font-weight: 700; }
.profile-stats {
    display: flex;
    gap: 20px;
    font-size: 15px;
    color: var(--text-secondary);
}
.profile-stats a { color: var(--text-secondary); }
.profile-stats a:hover { text-decoration: none; color: var(--accent); }
.profile-stats span { color: var(--text-primary); font-weight: 700; }

.profile-follow-btn {
    padding: 8px 24px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--text-primary);
    color: var(--bg-primary);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.profile-follow-btn:hover { background: var(--accent-hover); color: #fff; border-color: var(--accent-hover); }
.profile-follow-btn.following {
    background: transparent;
    color: var(--text-primary);
}
.profile-follow-btn.following:hover {
    background: var(--red-bg);
    color: var(--red);
    border-color: var(--red);
}

/* ===== 推文详情页 ===== */
.tweet-detail {
    border-bottom: 1px solid var(--border-color);
}
.tweet-detail .tweet {
    cursor: default;
}
.tweet-detail .tweet-content {
    font-size: 15px;
    line-height: 1.5;
    margin: 12px 0;
}
.tweet-detail-time {
    color: var(--text-secondary);
    font-size: 15px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}
.tweet-detail-stats {
    display: flex;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 15px;
    color: var(--text-secondary);
}
.tweet-detail-stats span { color: var(--text-primary); font-weight: 700; }

/* ===== 评论/回复 ===== */
.comments-section {
    padding: 0;
}
.comment-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}
.comment-avatar img { border-radius: 50%; }
.comment-body { flex: 1; min-width: 0; }
.comment-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}
.comment-name {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
    line-height: 1.2;
}
.comment-name:hover { text-decoration: none; }
.comment-handle,
.comment-time {
    color: var(--text-secondary);
    font-size: 15px;
}

.comment-form {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}
.comment-form img { border-radius: 50%; flex-shrink: 0; }
.comment-form-area { flex: 1; }
.comment-form textarea {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 20px;
    font-family: inherit;
    resize: none;
    outline: none;
    padding: 12px 0;
}
.comment-form textarea::placeholder { color: var(--text-secondary); }
.comment-form-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
}
/* 评论字数统计：放在表情按钮左侧，垂直居中对齐 */
.comment-count-left {
    margin-right: auto;
    align-self: center;
    line-height: 1;
}

.comment-login-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 16px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
}
.comment-login-prompt .layui-icon {
    font-size: 32px;
    color: var(--text-secondary);
}
.comment-login-prompt p {
    color: var(--text-secondary);
    font-size: 15px;
    margin: 0;
}

/* 评论排序工具栏 */
.comment-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 8px;
}
.comment-toolbar-count {
    color: var(--text-secondary);
    font-size: 13px;
}
.comment-sort-tabs {
    display: flex;
    gap: 4px;
}
.comment-sort-tab {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.comment-sort-tab:hover {
    background: var(--bg-hover);
}
.comment-sort-tab.active {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 600;
}

/* 评论点赞按钮 */
.comment-actions-row {
    display: flex;
    gap: 16px;
    margin-top: 8px;
    align-items: center;
}
.comment-like-btn {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    transition: color 0.2s, background 0.2s;
    line-height: 1;
}
.comment-like-btn:hover {
    color: var(--accent);
    background: var(--accent-bg);
}
.comment-like-btn.liked {
    color: var(--red);
}
.comment-like-btn.liked:hover {
    background: var(--red-bg);
}
.comment-like-btn .layui-icon {
    font-size: 15px;
}
.comment-like-btn span {
    min-width: 12px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.comment-op-badge {
    display: inline-block;
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 4px;
    font-weight: 600;
}

/* 评论正在审核标识（仅作者可见的待审核评论） */
.comment-pending { opacity: 0.85; }
.comment-pending-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-bottom: 6px;
    border-radius: 999px;
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    pointer-events: none;
}
.comment-pending-badge .layui-icon { font-size: 12px; }

/* ===== 管理员审核按钮条（文章/评论共用） ===== */
.tweet-moderate-bar,
.comment-moderate-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    margin-top: 8px;
    border-radius: 4px;
    background: rgba(243, 156, 18, 0.06);
    border: 1px dashed rgba(243, 156, 18, 0.4);
    flex-wrap: wrap;
}
.comment-moderate-bar { margin-top: 6px; margin-bottom: 0; }
.moderate-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #f39c12;
    margin-right: auto;
}
.moderate-label .layui-icon { font-size: 13px; }
.moderate-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 3px;
    border: 1px solid transparent;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.4;
    transition: background .15s, border-color .15s, color .15s;
}
.moderate-btn .layui-icon { font-size: 14px; }
.moderate-btn:hover { background: var(--bg-tertiary); }
.moderate-btn:disabled { cursor: not-allowed; opacity: 0.6; }
.moderate-approve {
    border-color: #27ae60;
    color: #27ae60;
    background: rgba(39, 174, 96, 0.08);
}
.moderate-approve:hover {
    background: #27ae60;
    color: #fff;
    border-color: #27ae60;
}
.moderate-reject {
    border-color: #e74c3c;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.08);
}
.moderate-reject:hover {
    background: #e74c3c;
    color: #fff;
    border-color: #e74c3c;
}

/* 评论回复按钮 */
.comment-reply-btn {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    transition: color 0.2s, background 0.2s;
    line-height: 1;
}
.comment-reply-btn:hover {
    color: var(--accent);
    background: var(--accent-bg);
}
.comment-reply-btn .layui-icon {
    font-size: 15px;
}

/* 回复父评论标记 */
.comment-reply-to {
    font-size: 12px;
    color: var(--text-tertiary);
    margin: 2px 0 4px;
    line-height: 1.4;
}
.comment-reply-to .reply-target {
    color: var(--accent);
    text-decoration: none;
}
.comment-reply-to .reply-target:hover {
    text-decoration: underline;
}

/* 嵌套子评论容器 */
.comment-children {
    margin-left: 28px;
    padding-left: 16px;
    border-left: 2px solid var(--border-color);
    margin-top: 2px;
}
/* 子评论排序切换按钮 */
.comment-children-sort {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0 8px;
    margin-bottom: 2px;
}
.children-sort-label {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-right: 4px;
}
.child-sort-tab {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.4;
}
.child-sort-tab:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.child-sort-tab.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}
.comment-children .comment-item {
    padding: 10px 12px;
    border-bottom: none;
}
.comment-children .comment-avatar img {
    width: 32px;
    height: 32px;
}
.comment-children .comment-name,
.comment-children .comment-handle,
.comment-children .comment-time {
    font-size: 14px;
}
.comment-children .tweet-content {
    font-size: 14px;
}

/* 折叠/展开按钮 */
.comment-collapse-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 4px 0 8px 28px;
    padding: 6px 12px;
    background: var(--accent-bg);
    color: var(--accent);
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s, opacity 0.2s;
}
.comment-collapse-btn:hover {
    opacity: 0.85;
}
.comment-collapse-btn .layui-icon {
    font-size: 13px;
}
.comment-collapse-btn .collapse-text {
    line-height: 1;
}
.comment-children-hidden {
    /* 默认 display:none（由 inline style 控制） */
}

/* 评论加载占位符 */
.comment-loading {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

/* 内联回复框 */
.inline-reply-box {
    margin-top: 10px;
    padding: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.inline-reply-text {
    width: 100%;
    min-height: 56px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
}
.inline-reply-text:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg);
}
.inline-reply-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
}
.inline-reply-cancel {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
}
.inline-reply-cancel:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.inline-reply-submit {
    padding: 6px 16px;
    font-size: 13px;
}
.inline-reply-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 用户自定义头衔 */
.user-title-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 4px;
    border: 1px solid var(--border-color);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* 验证码容器 */
.xforum-captcha-container {
    margin: 18px 0;
    min-height: 0;
}
/* 极验 v4 浮层在弹窗内显示时需要高于 modal 蒙层 */
.xforum-captcha-container iframe {
    position: relative;
    z-index: 1;
}
.geetest_popup_wrap,
.geetest_panel {
    z-index: 100000 !important;
}

/* 邮箱验证码输入组（输入框 + 发送按钮） */
.email-code-group {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.email-code-group input[type="text"] {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
}
.email-code-group .email-code-btn {
    flex: 0 0 auto;
    width: auto;
    padding: 10px 16px;
    font-size: 14px;
    white-space: nowrap;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.email-code-group .email-code-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--accent);
}
.email-code-group .email-code-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 收藏按钮高亮（爱心图标） */
.tweet-action-bookmark {
    color: var(--text-tertiary);
}
.tweet-action-bookmark:hover {
    color: var(--red, #f56c6c);
}
.tweet-action-bookmark .bookmark-icon {
    transition: fill 0.2s;
    fill: none;
}
.tweet-action-bookmark.bookmarked {
    color: var(--red, #f56c6c);
}
.tweet-action-bookmark.bookmarked .bookmark-icon {
    fill: var(--red, #f56c6c);
}

/* 设置页面标签 */
.settings-page {
    padding: 0 16px;
}
.settings-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
    overflow-x: auto;
}
.settings-tab {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 12px 20px;
    cursor: pointer;
    font-size: 15px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.settings-tab:hover {
    color: var(--text-primary);
}
.settings-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.settings-panel {
    display: none;
}
.settings-panel.active {
    display: block;
}
.settings-section {
    margin-bottom: 20px;
}
.settings-section h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-primary);
}
.settings-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}
.settings-option:last-child {
    border-bottom: none;
}
.settings-option-label {
    flex: 1;
    color: var(--text-primary);
    font-size: 14px;
}
.settings-option-desc {
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 2px;
}
.blocklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}
.blocklist-item:last-child {
    border-bottom: none;
}

/* ===== 表情选择器 ===== */
.emoji-picker {
    position: absolute;
    z-index: 1100;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 360px;
    max-width: 92vw;
    overflow: hidden;
}
.emoji-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    padding: 0 8px 0 0;
}
.emoji-picker-tabs {
    display: flex;
    overflow-x: auto;
}
.emoji-tab {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 10px 14px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}
.emoji-tab:hover {
    color: var(--text-primary);
}
.emoji-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}
.emoji-picker-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.emoji-picker-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.emoji-picker-body {
    max-height: 280px;
    overflow-y: auto;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 2px;
}
.emoji-picker-body .emoji-loading {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 0;
    color: var(--text-secondary);
    font-size: 13px;
}
.emoji-loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: emoji-spin 0.8s linear infinite;
}
@keyframes emoji-spin {
    to { transform: rotate(360deg); }
}
.emoji-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 22px;
    transition: background 0.15s, transform 0.1s;
    user-select: none;
}
.emoji-item:hover {
    background: var(--bg-hover);
    transform: scale(1.15);
}
.emoji-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* ===== 弹窗 ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal-box {
    background: var(--bg-primary);
    border-radius: 16px;
    width: 600px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}
.modal-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}
.modal-close {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 50%;
    transition: background 0.2s;
}
.modal-close:hover { background: var(--bg-hover); }

/* 发布推文弹窗：标题在弹窗内 header 中 */
.modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1;
}

.modal-body {
    display: flex;
    gap: 12px;
    padding: 16px;
}
.modal-avatar img { border-radius: 50%; }
.modal-textarea { flex: 1; position: relative; }
.modal-textarea textarea {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 20px;
    font-family: inherit;
    resize: none;
    outline: none;
    line-height: 1.4;
}
.modal-textarea textarea::placeholder { color: var(--text-secondary); }

/* ===== 认证表单 ===== */
.auth-form {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}
.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--accent);
}
.form-group textarea {
    resize: vertical;
    min-height: 80px;
}
.form-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}
.avatar-upload-area {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}
.avatar-upload-area img {
    border: 2px solid var(--border-color);
}
.avatar-upload-actions {
    flex: 1;
}
.avatar-upload-actions .btn-outline {
    margin-bottom: 4px;
}
.auth-form button {
    width: 100%;
    padding: 10px;
}
#login-to-register,
#register-to-login {
    margin-top: 8px;
}
/* OAuth 登录按钮（复用 .btn-outline 样式） */
.oauth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 14px 0 10px;
    color: var(--text-secondary);
    font-size: 12px;
}
.oauth-divider::before,
.oauth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}
.oauth-divider span {
    padding: 0 10px;
}
.oauth-btn {
    width: 100%;
    gap: 6px;
}
.oauth-icon {
    font-size: 16px;
    line-height: 1;
}
.oauth-userinfo-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
}
.oauth-userinfo-preview img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.profile-bio {
    margin: 8px 0;
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.5;
}

/* ===== 页脚 ===== */
.site-footer {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    border-top: 1px solid var(--border-color);
}
.footer-inner {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.footer-inner a { color: var(--text-secondary); }
.footer-inner a:hover { text-decoration: none; }

/* ===== 归档页标题 ===== */
.archive-title-bar {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 20px;
    font-weight: 800;
}

/* ===== 404页面 ===== */
.error-page {
    padding: 48px 16px;
    text-align: center;
}
.error-page h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 16px;
}
.error-page p {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

/* ===== 移动端底部导航 ===== */
.mobile-nav {
    display: none;
}

/* ===== 响应式设计 ===== */
@media (max-width: 1100px) {
    .sidebar { display: none; }
    .feed { border-right: none; }
}

@media (max-width: 900px) {
    .left-sidebar {
        width: 88px;
        padding: 0 8px;
    }
    .nav-item span,
    .nav-compose-btn span,
    .user-card-info {
        display: none;
    }
    .nav-item {
        justify-content: center;
        padding: 12px;
    }
    .nav-compose-btn {
        padding: 16px;
        margin: 16px auto 12px;
    }
    .nav-compose-btn::after {
        content: '+';
        font-size: 24px;
    }
    .user-card {
        justify-content: center;
        padding: 8px;
    }
    .user-card img { width: 40px; height: 40px; }
}

@media (max-width: 600px) {
    .left-sidebar {
        position: fixed;
        bottom: 0;
        top: auto;
        left: 0;
        right: 0;
        width: 100%;
        height: 56px;
        border-right: none;
        border-top: 1px solid var(--border-color);
        padding: 0;
        z-index: 200;
        background: var(--bg-primary);
    }
    .sidebar-inner {
        display: none;
    }
    .mobile-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 100%;
        padding: 0 8px;
    }
    .mobile-nav-item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 16px;
        color: var(--text-secondary);
        border-radius: 50%;
        transition: color 0.2s;
    }
    .mobile-nav-item.active { color: var(--accent); }
    .mobile-nav-item svg { width: 26px; height: 26px; fill: currentColor; }
    .mobile-nav-compose {
        display: flex;
        align-items: center;
        padding: 8px;
        background: none;
        color: var(--text-secondary);
        border: none;
        border-radius: 50%;
    }
    .mobile-nav-compose svg { width: 22px; height: 22px; fill: currentColor; }
}

/* ===== 图片上传预览（发布推文弹窗内） ===== */
.compose-preview {
    margin: 8px 0;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    max-height: 300px;
}
.compose-preview-item {
    position: relative;
    display: block;
}
.compose-preview-item img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    display: block;
    border-radius: 16px;
}
.compose-preview-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.compose-preview-remove:hover {
    background: rgba(244, 33, 46, 0.9);
}

/* ===== 电脑端内联发推工具栏左右布局 ===== */
.compose-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: row;
}

/* ===== 推文图片样式 ===== */
.tweet-media {
    margin: 10px 0 4px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    position: relative;
    cursor: zoom-in;
}
.tweet-media img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.tweet-media:hover img {
    transform: scale(1.02);
}

/* ===== 推文多图网格布局 ===== */
.tweet-media-grid {
    margin: 10px 0 4px;
    display: grid;
    gap: 3px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.tweet-media-grid.count-1 { grid-template-columns: 1fr; }
.tweet-media-grid.count-2 { grid-template-columns: repeat(2, 1fr); }
.tweet-media-grid.count-3 { grid-template-columns: repeat(3, 1fr); }
.tweet-media-grid.count-4 { grid-template-columns: repeat(2, 1fr); }
.tweet-media-grid.count-5,
.tweet-media-grid.count-6 { grid-template-columns: repeat(3, 1fr); }
.tweet-media-grid.count-7,
.tweet-media-grid.count-8,
.tweet-media-grid.count-9 { grid-template-columns: repeat(3, 1fr); }
.tweet-media-item {
    position: relative;
    cursor: zoom-in;
    overflow: hidden;
    background: #000;
}
.tweet-media-item img {
    width: 100%;
    height: 100%;
    min-height: 140px;
    max-height: 320px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.tweet-media-item:hover img {
    transform: scale(1.03);
}
/* 单图保持较大尺寸 */
.tweet-media-grid.count-1 .tweet-media-item img {
    max-height: 500px;
}

/* ===== 编辑框多图预览网格 ===== */
.compose-preview {
    margin: 8px 0;
}
.compose-image-grid {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}
.compose-image-grid.count-1 { grid-template-columns: 1fr; }
.compose-image-grid.count-2,
.compose-image-grid.count-4 { grid-template-columns: repeat(2, 1fr); }
.compose-image-grid.count-3,
.compose-image-grid.count-5,
.compose-image-grid.count-6,
.compose-image-grid.count-7,
.compose-image-grid.count-8,
.compose-image-grid.count-9 { grid-template-columns: repeat(3, 1fr); }
.compose-image-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    aspect-ratio: 1 / 1;
    background: var(--bg-secondary);
}
.compose-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.compose-image-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: none;
    font-size: 16px;
    line-height: 20px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.compose-image-remove:hover {
    background: rgba(244,33,46,0.85);
}

/* ===== 媒体嵌入（音频/视频/B站/YouTube） ===== */
.media-wrapper {
    margin: 12px 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    position: relative;
}
.media-audio-wrapper {
    padding: 12px 16px;
    border-radius: 28px;
}
.media-audio {
    width: 100%;
    height: 40px;
    outline: none;
}
.media-video-wrapper {
    background: #000;
}
.media-video {
    width: 100%;
    max-height: 540px;
    display: block;
    background: #000;
    outline: none;
}
.media-bilibili-wrapper,
.media-youtube-wrapper {
    position: relative;
    padding-top: 56.25%;
    background: #000;
    height: 0;
}
.media-bilibili,
.media-youtube {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
}

/* ===== 发布推文弹窗工具栏 ===== */
.modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}
.modal-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}
.compose-tool-btn {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.compose-tool-btn:hover {
    background: var(--accent-bg);
}
.compose-tool-btn svg {
    fill: currentColor;
}

/* ===== 灯箱样式 ===== */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.lightbox-container {
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-container img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
    user-select: none;
    -webkit-user-drag: none;
}
.lightbox-close,
.lightbox-nav {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    backdrop-filter: blur(4px);
}
.lightbox-close {
    top: 20px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
}
.lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 32px;
    line-height: 1;
}
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-close:hover,
.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}
.lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.5);
    padding: 4px 12px;
    border-radius: 12px;
}

/* ===== 优化布局美化 ===== */

/* 侧边栏卡片美化 */
.sidebar-card {
    background: var(--bg-secondary);
    border-radius: 14px;
    margin-top: 14px;
    padding: 4px 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.sidebar-card-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--text-primary);
    padding: 12px 16px 8px;
    margin: 0;
}
.trend-item,
.suggest-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
    gap: 10px;
}
.trend-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.trend-item:hover,
.suggest-item:hover {
    background: var(--bg-hover);
}
.trend-category {
    font-size: 12px;
    color: var(--text-secondary);
}
.trend-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.trend-count {
    font-size: 13px;
    color: var(--text-secondary);
}
.sidebar-card-more {
    display: block;
    padding: 12px 16px;
    color: var(--accent);
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s;
}
.sidebar-card-more:hover {
    background: var(--bg-hover);
}

/* 推荐关注项 */
.suggest-item img {
    border-radius: 50%;
    flex-shrink: 0;
}
.suggest-info {
    flex: 1;
    min-width: 0;
}
.suggest-name {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 100%;
    overflow: hidden;
}
.suggest-name:hover {
    text-decoration: none;
}
.suggest-handle {
    color: var(--text-secondary);
    font-size: 13px;
}
.follow-small-btn {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--text-primary);
    color: var(--bg-primary);
    border: none;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.2s, transform 0.1s;
}
.follow-small-btn:hover {
    opacity: 0.9;
}
.follow-small-btn.following {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.follow-small-btn.following:hover {
    background: var(--red-bg);
    color: var(--red);
    border-color: var(--red);
}

/* 页脚链接美化 */
.site-footer {
    width: 100%;
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
    box-sizing: border-box;
}
.footer-inner {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 990px;
    margin: 0 auto;
}
.footer-inner a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-inner a:hover {
    color: var(--accent);
}

/* 推文卡片整体优化 */
.tweet {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.15s;
}
.tweet:hover {
    background: var(--bg-hover);
}
.tweet-avatar img {
    border-radius: 50%;
    flex-shrink: 0;
}
.tweet-body {
    flex: 1;
    min-width: 0;
}
.tweet-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.tweet-name {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
}
.tweet-name:hover {
    text-decoration: none;
}
.tweet-handle,
.tweet-dot,
.tweet-time {
    color: var(--text-secondary);
    font-size: 14px;
    text-decoration: none;
}
.tweet-time:hover {
    text-decoration: none;
    color: var(--accent);
}
.tweet-content {
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.tweet-content a {
    color: var(--accent);
    text-decoration: none;
}
.tweet-content a:hover {
    text-decoration: none;
}
.tweet-actions {
    display: flex;
    justify-content: space-between;
    max-width: 425px;
    margin-top: 10px;
}
.tweet-action {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 999px;
    transition: color 0.15s, background 0.15s;
    text-decoration: none;
}
.tweet-action svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}
.tweet-action-reply:hover {
    color: var(--accent);
    background: var(--accent-bg);
}
.tweet-action-retweet:hover {
    color: var(--green);
    background: var(--green-bg);
}
.tweet-action-like:hover {
    color: var(--red);
    background: var(--red-bg);
}
.tweet-action-like.liked {
    color: var(--red);
}
.tweet-action-like.liked svg {
    fill: currentColor;
}
.tweet-follow-btn {
    margin-left: auto;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--text-primary);
    color: var(--bg-primary);
    border: none;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.tweet-follow-btn.following {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.tweet-follow-btn.following:hover {
    background: var(--red-bg);
    color: var(--red);
    border-color: var(--red);
}

/* 发推按钮 */
.btn-primary,
.btn-outline {
    border-radius: 999px;
    padding: 8px 20px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14px;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-primary {
    background: var(--accent);
    color: #fff;
}
.btn-primary:hover {
    background: var(--accent-hover);
}
.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-outline {
    background: transparent;
    color: var(--accent);
    border-color: var(--border-color);
}
.btn-outline:hover {
    background: var(--accent-bg);
}


/* ===== 响应式（移动端） ===== */
@media (max-width: 1100px) {
    .sidebar { display: none; }
}
@media (max-width: 700px) {
    .left-sidebar {
        display: none;
    }
    .theme-toggle-fab {
        display: none;
    }
    .mobile-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 56px;
        border-right: none;
        border-top: 1px solid var(--border-color);
        padding: 0;
        z-index: 200;
        background: var(--bg-primary);
        box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.06);
    }
    .mobile-nav-item {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        border-radius: 50%;
        transition: color 0.2s, background 0.2s;
        cursor: pointer;
        border: none;
        background: none;
        text-decoration: none;
    }
    .mobile-nav-item.active {
        color: var(--accent);
        background: var(--accent-bg);
    }
    .mobile-nav-compose {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-tertiary);
        border: none;
        border-radius: 50%;
        width: 44px;
        height: 44px;
        cursor: pointer;
        transition: transform 0.15s, background 0.2s;
    }
    .mobile-nav-compose:active { transform: scale(0.92); }
    .mobile-nav-compose .layui-icon { font-size: 20px; color: var(--text-primary); }
    .desktop-only-compose { display: none !important; }
    .mobile-nav-compose {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        border-radius: 50%;
        width: 44px;
        height: 44px;
        cursor: pointer;
        transition: transform 0.15s, color 0.2s;
        color: var(--text-secondary);
    }
    .mobile-nav-compose:active { transform: scale(0.92); }
    .mobile-nav-compose .layui-icon { font-size: 22px; color: inherit; }
    .mobile-nav-compose:hover { color: var(--accent); }
    .main-content { padding-bottom: 64px; padding-top: 53px; }
    .feed { border-left: none; }
    .compose-box { padding: 12px; }
    .compose-area textarea { font-size: 16px; }
    .modal-box { width: calc(100vw - 24px); max-width: 560px; max-height: 90vh; border-radius: 16px; overflow-y: auto; display: flex; flex-direction: column; margin: 12px; }
    .modal-overlay { padding-top: 0; align-items: flex-start; justify-content: center; padding: 12px; }
    .modal-body { padding: 12px; gap: 8px; flex: 1; }
    .modal-textarea textarea { font-size: 18px; }
    .modal-avatar img { width: 40px; height: 40px; }
    .modal-footer { gap: 8px; }
    .modal-header { padding: 8px 12px; flex-shrink: 0; }
}

@media (max-width: 400px) {
    .tweet-avatar img { width: 40px; height: 40px; }
    .tweet-actions { max-width: 100%; }
}

/* ===== 滚动条美化 ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ===== 认证徽章（SVG 精致图标） ===== */
.verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-left: 2px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(29, 155, 240, 0.3));
    transition: transform 0.2s;
    line-height: 0;
}
.verified-badge:hover { transform: scale(1.12); }
.verified-badge svg { display: block; }
.profile-name .verified-badge { margin-left: 4px; }
.tweet-name { display: inline-flex; align-items: center; gap: 2px; }

/* ===== 个人主页头衔列表（昵称旁 inline 展示） ===== */
.titles-list {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    vertical-align: middle;
}
.title-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    font-size: 11px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: default;
    line-height: 1.4;
    box-sizing: border-box;
    transition: all 0.2s;
}
.titles-list.editable .title-chip {
    cursor: pointer;
}
.titles-list.editable .title-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.title-chip.active {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
}
.title-chip.title-off {
    background: transparent;
    color: var(--text-tertiary);
    border-style: dashed;
}

/* ===== 无限滚动加载 ===== */
.infinite-scroll-sentinel {
    text-align: center;
    padding: 24px 16px;
    color: var(--text-secondary);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.infinite-scroll-sentinel .loading-spinner {
    padding: 0;
}
.infinite-scroll-sentinel .loading-spinner::after {
    width: 18px;
    height: 18px;
    border-width: 2px;
}
.infinite-scroll-text { color: var(--text-tertiary); }

/* ===== 引用块样式 ===== */
.tweet-content blockquote.quote-block,
.tweet-detail-content blockquote.quote-block,
.quote-block {
    margin: 8px 0;
    padding: 10px 14px;
    border-left: 3px solid var(--accent);
    background: var(--bg-tertiary);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}
.quote-block a { color: var(--accent); text-decoration: none; }
.quote-block a:hover { text-decoration: none; }
.quote-block .quote-link { font-weight: 600; }
.quote-block p { margin: 0; }

/* ===== Markdown 工具栏 ===== */
.md-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 6px 8px;
    border-top: 1px dashed var(--border-color);
    margin-top: 6px;
}
.md-tool-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    transition: background 0.2s, color 0.2s;
    min-width: 28px;
    text-align: center;
}
.md-tool-btn:hover { background: var(--bg-hover); color: var(--accent); }
.md-tool-btn:active { transform: scale(0.95); }
.md-tool-btn .layui-icon { font-size: 14px; }
.md-tool-sep {
    width: 1px;
    height: 16px;
    background: var(--border-color);
    margin: 0 2px;
}

/* ===== @提及 下拉列表 ===== */
.mention-picker {
    position: absolute;
    z-index: 1100;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    max-height: 240px;
    overflow-y: auto;
    min-width: 220px;
    display: none;
}
.mention-picker.open { display: block; }
.mention-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}
.mention-picker-item:last-child { border-bottom: none; }
.mention-picker-item:hover,
.mention-picker-item.active {
    background: var(--bg-hover);
}
.mention-picker-item img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.mention-picker-item-info { flex: 1; min-width: 0; }
.mention-picker-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mention-picker-item-handle {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mention-picker-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}
.mention-picker-loading {
    padding: 12px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

/* ===== 引用搜索弹窗 ===== */
.quote-search-box {
    margin: 8px 0 12px;
    padding: 10px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}
.quote-search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    box-sizing: border-box;
}
.quote-search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg);
}
.quote-search-results {
    max-height: 280px;
    overflow-y: auto;
    margin-top: 8px;
}
.quote-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
.quote-search-item:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}
.quote-search-item-info { flex: 1; min-width: 0; }
.quote-search-item-title {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quote-search-item-meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.quote-search-item-btn {
    padding: 4px 10px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
}
.quote-search-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

/* ===== 用户搜索结果卡片 ===== */
.user-search-results {
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}
.user-search-results .user-list-item {
    padding: 12px 16px;
}

/* ===== 加载动画 ===== */
.loading-spinner {
    display: flex;
    justify-content: center;
    padding: 24px;
}
.loading-spinner::after {
    content: '';
    width: 24px;
    height: 24px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== 通知提示（统一） ===== */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.88);
    color: #fff;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 14px;
    z-index: 10000;
    animation: toast-in 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-width: 90vw;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
@keyframes toast-in {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* ===== 布局优化增强 ===== */

/* 弹窗打开动画 */
.modal-overlay {
    animation: modal-fade-in 0.2s ease;
}
.modal-box {
    animation: modal-slide-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes modal-slide-up {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 推文图片悬停效果增强 */
.tweet-media {
    transition: border-color 0.2s;
}
.tweet-media:hover {
    border-color: var(--text-tertiary);
}
.tweet-media img {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tweet-media:hover img {
    transform: scale(1.03);
}

/* 侧边栏卡片悬停增强 */
.sidebar-card {
    transition: box-shadow 0.2s;
}
.trend-item,
.suggest-item {
    transition: background 0.15s, padding-left 0.15s;
}
.trend-item:hover,
.suggest-item:hover {
    padding-left: 20px;
}

/* 灯箱图片加载效果 */
.lightbox-container img {
    transition: opacity 0.2s;
}
.lightbox-nav:hover {
    transform: translateY(-50%) scale(1.1);
}
.lightbox-prev:hover {
    transform: translateY(-50%) scale(1.1);
}

/* 按钮交互增强 */
.btn-primary,
.btn-outline {
    transition: background 0.2s, transform 0.1s;
}
.btn-primary:active,
.btn-outline:active {
    transform: scale(0.97);
}

/* 推文操作按钮交互增强 */
.tweet-action {
    transition: color 0.2s, background 0.2s, transform 0.1s;
}
.tweet-action:active {
    transform: scale(0.9);
}

/* 平滑滚动 */
html {
    scroll-behavior: smooth;
}

/* 选中文本样式 */
::selection {
    background: var(--accent-bg);
    color: var(--accent);
}

/* 链接焦点可访问性 */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* 无障碍跳过链接 */
.skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: 9999;
    padding: 8px 16px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    border-radius: 0 0 6px 6px;
    font-size: 14px;
    font-weight: 600;
    transition: top 0.2s;
}
.skip-link:focus {
    top: 0;
}

/* 屏幕阅读器专用文本（视觉隐藏但屏幕阅读器可读） */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 图片加载占位 */
.tweet-media img {
    background: var(--bg-tertiary);
}

/* ===== 找回密码 / 重置密码 表单提示 ===== */
.form-hint {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.4;
}
.btn-link {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 13px;
    cursor: pointer;
    padding: 8px 0;
    transition: opacity 0.2s;
}
.btn-link:hover {
    opacity: 0.7;
}

/* ===== 热门文章模块 ===== */
.hot-tabs {
    display: inline-flex;
    gap: 2px;
    margin-left: auto;
    background: var(--bg-tertiary);
    border-radius: 999px;
    padding: 2px;
}
.hot-tab {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.hot-tab:hover {
    color: var(--accent);
}
.hot-tab.active {
    background: var(--accent);
    color: #fff;
}
.hot-posts-list {
    margin-top: 4px;
}
.hot-loading {
    padding: 24px 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}
.hot-post-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.15s;
}
.hot-post-item:hover {
    background: var(--bg-hover);
    text-decoration: none;
}
.hot-rank {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    margin-top: 1px;
}
.hot-rank-1 .hot-rank {
    background: #f4212e;
    color: #fff;
}
.hot-rank-2 .hot-rank {
    background: #ff6f00;
    color: #fff;
}
.hot-rank-3 .hot-rank {
    background: #ffa726;
    color: #fff;
}
.hot-post-info {
    flex: 1;
    min-width: 0;
}
.hot-post-title {
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 2px;
}
.hot-post-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 调整 sidebar-card-title 以容纳 tabs */
.sidebar-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* ===== Layui 图标基础适配 ===== */
.mobile-nav-item .layui-icon,
.mobile-drawer-item .layui-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}
.mobile-nav-item .layui-icon { font-size: 24px; }
/* mobile-drawer-item 的图标尺寸见下方移动端抽屉样式区 */
.mobile-menu-btn .layui-icon,
.mobile-search-btn .layui-icon,
.mobile-logo .layui-icon { font-size: 22px; }
.tweet-action .layui-icon { font-size: 18px; line-height: 1; }
.tweet-action-views .layui-icon { font-size: 16px; }
.profile-meta .layui-icon { font-size: 16px; vertical-align: middle; margin-right: 4px; }
.modal-toolbar .layui-icon { font-size: 20px; }

/* ===== 通知徽标 ===== */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    background: var(--red);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.mobile-nav-item .nav-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
}
.mobile-nav-item { position: relative; }

/* ===== 浏览量样式 ===== */
.tweet-action-views {
    color: var(--text-secondary);
    cursor: default;
}
.tweet-action-views:hover {
    color: var(--accent);
    background: var(--accent-bg);
}

/* ===== 关注者/正在关注 用户列表 ===== */
.user-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
}
.user-list-item:hover { background: var(--bg-hover); }
.user-list-avatar img {
    border-radius: 50%;
    flex-shrink: 0;
}
.user-list-info {
    flex: 1;
    min-width: 0;
}
.user-list-name {
    display: block;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
}
.user-list-name:hover { text-decoration: none; }
.user-list-handle {
    color: var(--text-secondary);
    font-size: 13px;
}

/* ===== 通知列表 ===== */
.notifications-list .notif-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
    position: relative;
}
.notifications-list .notif-item:hover { background: var(--bg-hover); text-decoration: none; }
.notifications-list .notif-item.unread {
    background: rgba(29, 155, 240, 0.06);
}
.notifications-list .notif-item.unread::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}
.notifications-list .notif-item.unread .notif-author {
    font-weight: 600;
}
.notif-tabs {
    background: var(--bg-primary);
    position: sticky;
    top: 0;
    z-index: 5;
}
.notif-tab {
    transition: all 0.2s;
}
.notif-tab:hover {
    color: var(--accent);
    background: var(--bg-hover);
}
.notif-tab.active {
    color: var(--accent);
}

/* ===== 加载更多按钮（无障碍回退） ===== */
.infinite-load-more-btn {
    display: block;
    margin: 16px auto;
    padding: 10px 24px;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.infinite-load-more-btn:hover:not(:disabled) {
    background: var(--accent);
    color: #fff;
}
.infinite-load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.infinite-load-more-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.notif-avatar {
    border-radius: 50%;
    flex-shrink: 0;
}
.notif-body { flex: 1; min-width: 0; }
.notif-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.notif-author {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 14px;
}
.notif-time {
    color: var(--text-secondary);
    font-size: 12px;
}
.notif-text {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ===== 移动端顶部栏 ===== */
.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
}
.theme-light .mobile-header { background: rgba(255, 255, 255, 0.65); }
.mobile-menu-btn, .mobile-search-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: background 0.2s;
}
.mobile-menu-btn:hover, .mobile-search-btn:hover { background: var(--bg-hover); }
.mobile-logo {
    color: var(--text-primary);
    display: flex;
    align-items: center;
    text-decoration: none;
}
.mobile-logo:hover { text-decoration: none; }

/* ===== 移动端侧边栏抽屉（仿推特 X 风格） ===== */
.mobile-drawer-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.25s;
}
.mobile-drawer-overlay.open {
    display: block;
    opacity: 1;
}
.mobile-drawer {
    position: fixed;
    top: 0;
    left: -320px;
    width: 320px;
    max-width: 88vw;
    height: 100vh;
    background: var(--bg-primary);
    z-index: 1000;
    overflow-y: auto;
    transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    box-shadow: 2px 0 24px rgba(0, 0, 0, 0.18);
}
.mobile-drawer.open { left: 0; }
/* 顶部用户信息区 */
.mobile-drawer-header {
    padding: 16px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.mobile-drawer-close {
    align-self: flex-end;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    font-size: 18px;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.mobile-drawer-close:hover { background: var(--bg-hover); color: var(--accent); }
.mobile-drawer-user {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}
.mobile-drawer-user img {
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}
.mobile-drawer-userinfo { min-width: 0; }
.mobile-drawer-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-drawer-handle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.mobile-drawer-auth {
    display: flex;
    gap: 10px;
}
.mobile-drawer-auth .auth-btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 14px;
    min-height: 40px;
}
/* 菜单区 */
.mobile-drawer-menu {
    flex: 1;
    padding: 4px 12px;
    display: flex;
    flex-direction: column;
}
.mobile-drawer-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 16px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    border-radius: 9999px;
    transition: background 0.15s, color 0.15s;
    position: relative;
    line-height: 1.4;
}
.mobile-drawer-item:hover {
    background: var(--bg-hover);
    text-decoration: none;
}
.mobile-drawer-item:active { background: var(--bg-hover); }
.mobile-drawer-item.active {
    color: var(--accent);
    font-weight: 700;
}
.mobile-drawer-item .layui-icon {
    font-size: 24px;
    width: 26px;
    text-align: center;
    flex-shrink: 0;
}
/* 未读数 badge */
.mobile-drawer-item .drawer-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* 退出登录项红色 */
.mobile-drawer-logout { color: #f04747; }
.mobile-drawer-logout:hover { background: rgba(240, 71, 71, 0.1); }
/* 底部发推按钮 + 版权 */
.mobile-drawer-footer {
    padding: 16px 16px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}
.mobile-drawer-compose {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 9999px;
    background: var(--accent);
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s, transform 0.1s;
}
.mobile-drawer-compose:hover { opacity: 0.9; }
.mobile-drawer-compose:active { transform: scale(0.97); }
.mobile-drawer-copy {
    color: var(--text-secondary);
    font-size: 12px;
    text-align: center;
}

/* ===== 移动端搜索框（fixed 覆盖式，不挤压内容） ===== */
.mobile-search-box {
    display: none;
    position: fixed;
    top: 53px;
    left: 0;
    right: 0;
    z-index: 110;
    padding: 10px 12px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.mobile-search-box.open { display: flex; align-items: center; gap: 8px; }
.mobile-search-box .search-form {
    flex: 1;
    background: var(--bg-tertiary);
}
.mobile-search-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.mobile-search-close:hover { background: var(--bg-hover); color: var(--red); }

/* ===== 移动端响应式覆盖 ===== */
@media (max-width: 700px) {
    .mobile-header { display: flex; }
    .mobile-drawer { display: flex; }
    .mobile-drawer-overlay { display: none; }
    .mobile-drawer-overlay.open { display: block; }
    .left-sidebar { display: none; }
    /* 移动端改用 block 布局，彻底避免 flex 容器对子项宽度的限制 */
    .app { display: block !important; justify-content: flex-start; flex-wrap: nowrap; width: 100% !important; }
    .content-area { display: block !important; max-width: 100% !important; width: 100% !important; flex: none !important; }
    .main-content { display: block !important; max-width: 100% !important; width: 100% !important; padding-top: 53px; flex: none !important; gap: 0 !important; }
    .feed { display: block !important; border-left: none; border-right: none; max-width: 100% !important; width: 100% !important; flex: none !important; }
    .feed-header {
        background: rgba(0, 0, 0, 0.65);
        top: 53px;
        width: 100%;
        transition: transform 0.25s ease, opacity 0.25s ease;
        will-change: transform;
    }
    /* 上拉（向下滚动）时隐藏顶部 tabs 栏 */
    .feed-header.feed-header-hidden {
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
    }
    .feed-tabs { width: 100%; display: flex; }
}

/* 大屏隐藏移动端元素 */
@media (min-width: 701px) {
    .mobile-header { display: none; }
    .mobile-drawer { display: none; }
    .mobile-drawer-overlay { display: none !important; }
    .mobile-search-box { display: none !important; }
}

/* ===== 推文内容折叠 ===== */
.tweet-content-foldable {
    max-height: 200px;
    overflow: hidden;
    position: relative;
}
.tweet-content-foldable::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(transparent, var(--bg-primary));
    pointer-events: none;
}
.tweet-content-foldable.expanded {
    max-height: none;
    overflow: visible;
}
.tweet-content-foldable.expanded::after {
    display: none;
}
.tweet-fold-btn {
    display: inline-block;
    margin-top: 4px;
    padding: 4px 12px;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}
.tweet-fold-btn:hover { text-decoration: none; }

/* ===== 投票卡片 ===== */
.poll-card {
    margin: 10px 0;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
}
.poll-question {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}
.poll-expired-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 999px;
    font-size: 11px;
    margin-bottom: 8px;
}
.poll-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.poll-option {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    min-height: 36px;
}
.poll-option.voted {
    border-color: var(--accent);
}
.poll-option-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: var(--accent-bg);
    transition: width 0.3s;
}
.poll-option-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    z-index: 1;
}
.poll-option-text {
    color: var(--text-primary);
    font-size: 14px;
}
.poll-option-percent {
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
}
.poll-option-vote-btn {
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
}
.poll-option-vote-btn:hover {
    background: var(--bg-hover);
}
.poll-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}
.poll-anonymous-tag {
    padding: 1px 6px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 11px;
}

/* ===== 投票构建器 ===== */
.vote-builder {
    margin: 8px 0;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
}
.vote-builder h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
}
.vote-builder input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
}
.vote-builder input[type="text"]:focus {
    border-color: var(--accent);
    outline: none;
}
.vote-add-option {
    margin: 4px 0 8px;
    padding: 6px 12px;
    font-size: 13px;
}
.vote-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 8px 0;
    font-size: 13px;
    color: var(--text-secondary);
}
.vote-settings label {
    display: flex;
    align-items: center;
    gap: 4px;
}
.vote-settings input[type="datetime-local"] {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
}

/* ===== 分享弹窗 ===== */
.share-copy-btn,
.share-native-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
}
#share-link-input {
    font-family: monospace;
    font-size: 12px;
}

/* ===== AI 写作按钮 ===== */
.md-tool-btn.ai-btn {
    color: var(--accent);
    border: 1px dashed var(--accent);
}
.md-tool-btn.ai-btn:hover {
    background: var(--accent);
    color: #fff;
}
.md-tool-btn.ai-btn.loading {
    pointer-events: none;
    opacity: 0.6;
}
.md-tool-btn.ai-btn.loading .layui-icon {
    animation: ai-spin 1s linear infinite;
}
@keyframes ai-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== AI 结果弹窗 ===== */
#ai-result-text {
    color: var(--text-primary);
}
#ai-result-loading .layui-icon {
    animation: ai-spin 1s linear infinite;
}
#ai-result-actions .btn-outline {
    border-radius: 4px;
}

/* ===== AI 风格选择弹窗 ===== */
.ai-style-option {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: all 0.15s;
    text-align: center;
}
.ai-style-option:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.ai-style-option.active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

/* ===== 免打扰设置 ===== */
.dnd-settings {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
}
.dnd-settings > label:first-child {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
}
.dnd-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
}
.dnd-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ===== 编辑个人资料弹窗 ===== */
#edit-profile-modal .modal-box {
    max-height: 90vh;
    overflow-y: auto;
}
#edit-profile-modal .modal-body {
    flex-direction: column;
    gap: 12px;
}
#edit-profile-modal .form-group {
    margin-bottom: 0;
}
#edit-profile-modal .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
#edit-profile-modal .form-group input[type="text"],
#edit-profile-modal .form-group input[type="email"],
#edit-profile-modal .form-group input[type="url"],
#edit-profile-modal .form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
}
#edit-profile-modal .form-group input:focus,
#edit-profile-modal .form-group textarea:focus {
    border-color: var(--accent);
    outline: none;
}
#edit-profile-modal .avatar-upload-area {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
#edit-profile-modal .avatar-upload-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#edit-profile-modal .form-hint {
    font-size: 12px;
    color: var(--text-tertiary);
}
#edit-profile-modal #edit-profile-submit {
    margin-top: 8px;
}

/* ===== 个人资料编辑按钮 ===== */
.profile-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
}
.profile-edit-btn:hover {
    background: var(--accent-bg);
    text-decoration: none;
}

/* ===== 个人资料背景图（响应式） ===== */
@media (max-width: 700px) {
    .profile-banner { height: 150px; }
    .profile-avatar { width: 100px; height: 100px; border-width: 3px; }
    .profile-info { margin-top: -50px; }
}