/* 全局样式重置 */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



/* 全局变量 */

:root {

    --primary-color: #0071e3;

    --primary-hover: #0077ed;

    --secondary-color: #f5f5f7;

    --text-primary: #1d1d1f;

    --text-secondary: #6e6e73;

    --border-color: #d2d2d7;

    --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.05);

    --shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.1);

    --border-radius: 12px;

    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

}



/* 基础样式 */

body {

    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    font-size: 16px;

    line-height: 1.6;

    color: var(--text-primary);

    background-color: #fafafa;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



/* 容器 */

.container {

    max-width: 1280px;

    margin: 0 auto;

    padding: 0 20px;

}



/* 头部导航 */

.header {

    background-color: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(10px);

    border-bottom: 1px solid var(--border-color);

    position: sticky;

    top: 0;

    z-index: 1000;

}



.header-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 72px;

}



.logo {

    display: flex;

    align-items: center;

    font-size: 24px;

    font-weight: 700;

    color: var(--text-primary);

}



.logo i {

    margin-right: 10px;

    color: var(--primary-color);

    font-size: 28px;

}



/* 菜单按钮 */

.menu-toggle {

    display: none;

}



.btn-toggle {

    background: transparent;

    border: none;

    font-size: 20px;

    color: var(--text-primary);

    cursor: pointer;

    padding: 8px;

    border-radius: 8px;

    transition: var(--transition);

}



.btn-toggle:hover {

    background-color: var(--secondary-color);

}



/* 主导航 */

.main-nav ul {

    display: flex;

    list-style: none;

    gap: 10px;

}



.main-nav a {

    display: flex;

    align-items: center;

    padding: 8px 16px;

    border-radius: 8px;

    color: var(--text-secondary);

    text-decoration: none;

    font-weight: 500;

    transition: var(--transition);

}



.main-nav a:hover,

.main-nav a.active {

    color: var(--primary-color);

    background-color: rgba(0, 113, 227, 0.1);

}



.main-nav i {

    margin-right: 6px;

    font-size: 16px;

}



/* 通知徽章样式 */

.notification-badge {

    position: absolute;

    top: -5px;

    right: -10px;

    background-color: #ff3b30;

    color: white;

    font-size: 12px;

    font-weight: 600;

    padding: 2px 6px;

    border-radius: 10px;

    min-width: 20px;

    text-align: center;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

}



/* 导航通知链接样式 */

.main-nav li:last-child a {

    position: relative;

}



/* 用户操作按钮 */

.user-actions {

    display: flex;

    gap: 10px;

}



/* 按钮样式 */

.btn {

    padding: 10px 20px;

    border-radius: 8px;

    font-weight: 500;

    text-decoration: none;

    border: none;

    cursor: pointer;

    transition: var(--transition);

    font-size: 15px;

    font-family: inherit;

}



.btn-primary {

    background-color: var(--primary-color);

    color: white;

}



.btn-primary:hover {

    background-color: var(--primary-hover);

    transform: translateY(-1px);

    box-shadow: var(--shadow-medium);

}



.btn-secondary {

    background-color: white;

    color: var(--text-primary);

    border: 1px solid var(--border-color);

}



.btn-secondary:hover {

    background-color: var(--secondary-color);

    transform: translateY(-1px);

}



/* 搜索栏 */

.search-section {

    padding: 20px 0;

    background-color: white;

    border-bottom: 1px solid var(--border-color);

}



.search-box {

    display: flex;

    align-items: center;

    gap: 14px;

    background-color: var(--secondary-color);

    border-radius: var(--border-radius);

    padding: 0 24px;

    max-width: 980px;

    margin: 0 auto;

    min-height: 64px;

}



.search-box i {

    color: var(--text-secondary);

    margin-right: 0;

    font-size: 20px;

}



.search-box input {

    flex: 1;

    background: transparent;

    border: none;

    outline: none;

    font-size: 17px;

    color: var(--text-primary);

}



.search-btn {

    background-color: var(--primary-color);

    color: white;

    border: none;

    min-height: 44px;

    padding: 0 22px;

    border-radius: 12px;

    cursor: pointer;

    font-weight: 600;

    transition: var(--transition);

}



.search-btn:hover {

    background-color: var(--primary-hover);

}



/* 主要内容区域 */

.main-content {

    padding: 30px 0;

    min-height: calc(100vh - 300px);

}



.content-grid {

    display: grid;

    grid-template-columns: 260px 1fr 300px;

    gap: 30px;

    align-items: start;

}



/* 侧边栏通用样式 */

.sidebar-section {

    background-color: white;

    border-radius: var(--border-radius);

    padding: 20px;

    margin-bottom: 20px;

    box-shadow: var(--shadow-light);

    border: 1px solid var(--border-color);

}



.sidebar-section h3 {

    font-size: 18px;

    font-weight: 600;

    margin-bottom: 15px;

    color: var(--text-primary);

    padding-bottom: 10px;

    border-bottom: 1px solid var(--border-color);

}



/* 左侧边栏 */

.sidebar-left {

    position: sticky;

    top: 92px;

    height: fit-content;

}



.category-list {

    list-style: none;

}



.category-list li {

    margin-bottom: 8px;

}



.category-list a {

    display: flex;

    align-items: center;

    padding: 10px 12px;

    border-radius: 8px;

    color: var(--text-secondary);

    text-decoration: none;

    transition: var(--transition);

}



.category-list a:hover {

    color: var(--primary-color);

    background-color: rgba(0, 113, 227, 0.1);

}



.category-list i {

    margin-right: 12px;

    font-size: 16px;

    width: 20px;

    text-align: center;

}



/* 用户列表 */

.user-list {

    list-style: none;

}



.user-list li {

    display: flex;

    align-items: center;

    margin-bottom: 12px;

    gap: 12px;

}



.user-list img {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    object-fit: cover;

}



.section-link-button {

    border: 0;

    background: transparent;

    padding: 0;

    cursor: pointer;

}



.category-list--rich,

.user-list--rich {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.category-list--rich li,

.user-list--rich li {

    margin-bottom: 0;

}



.leaderboard-panel .section-title-row {

    align-items: flex-start;

}



.leaderboard-subtitle {

    margin-top: 6px;

    font-size: 0.84rem;

    line-height: 1.6;

    color: var(--text-secondary);

}



.leaderboard-panel__eyebrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 12px;

    border-radius: 999px;

    border: 1px solid rgba(148, 163, 184, 0.22);

    background: rgba(248, 250, 252, 0.92);

    color: #475569;

    font-size: 0.78rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    white-space: nowrap;

}



.author-leaderboard-summary {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 6px;

    margin-bottom: 16px;

    padding: 14px 16px 14px 20px;

    border-radius: 16px;

    border: 1px solid rgba(148, 163, 184, 0.18);

    background: rgba(248, 250, 252, 0.92);

    overflow: hidden;

}



.author-leaderboard-summary::before {

    content: '';

    position: absolute;

    inset: 12px auto 12px 0;

    width: 3px;

    border-radius: 999px;

    background: linear-gradient(180deg, #7c3aed, #a78bfa);

}



.author-leaderboard-summary strong {

    color: var(--text-primary);

    font-size: 0.96rem;

}



.author-leaderboard-summary span {

    color: var(--text-secondary);

    font-size: 0.82rem;

    line-height: 1.6;

}



.leaderboard-entry {

    display: flex;

    align-items: stretch;

    gap: 12px;

}



.leaderboard-entry--category {

    display: block;

}



.leaderboard-rank {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 40px;

    height: 40px;

    border-radius: 14px;

    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(167, 139, 250, 0.28));

    color: #6d28d9;

    font-family: 'Poppins', sans-serif;

    font-size: 0.92rem;

    font-weight: 700;

    letter-spacing: 0.08em;

}



.leaderboard-entry[data-rank="1"] .leaderboard-rank {

    background: linear-gradient(135deg, rgba(124, 58, 237, 0.24), rgba(250, 204, 21, 0.38));

}



.leaderboard-entry[data-rank="2"] .leaderboard-rank {

    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(148, 163, 184, 0.28));

}



.category-link-card {

    width: 100%;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 14px;

    border-radius: 18px;

    border: 1px solid rgba(124, 58, 237, 0.10);

    background: rgba(124, 58, 237, 0.05);

    color: inherit;

    text-align: left;

    cursor: pointer;

    transition: var(--transition);

}



.category-link-card:hover,

.user-list__action:hover,

.announcement-highlight--leaderboard:hover {

    transform: translateY(-1px);

    box-shadow: var(--shadow-light);

}



.category-link-card i {

    margin-top: 2px;

    color: var(--primary-color);

}



.category-link-card--leaderboard {

    padding: 16px;

    gap: 14px;

}



.category-link-card__content {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.leaderboard-heading,

.leaderboard-footer,

.user-list__hero {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 6px;

}



.user-list__hero {

    width: 100%;

}



.category-link-card__content strong,

.user-list__title-row strong,

.leaderboard-heading strong {

    color: var(--text-primary);

    word-break: break-word;

    min-width: 0;

}



.category-link-card__meta,

.user-list__title-row span,

.user-list__main p,

.announcement__meta,

.leaderboard-subtitle,

.announcement__footer,

.category-link-card__footer,

.leaderboard-note {

    font-size: 0.84rem;

    color: var(--text-secondary);

}



.user-list__item {

    align-items: flex-start;

    padding: 14px;

    border-radius: 18px;

    border: 1px solid rgba(124, 58, 237, 0.10);

    background: rgba(124, 58, 237, 0.05);

}



.user-list__item--leaderboard {

    width: 100%;

    gap: 14px;

    padding: 16px;

}



.user-list__main {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.user-list__title-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

}



.user-list__main p {

    margin: 0;

    line-height: 1.6;

}



.leaderboard-chip {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 4px 8px;

    border-radius: 999px;

    background: rgba(124, 58, 237, 0.10);

    color: #6d28d9;

    font-size: 0.75rem;

    font-weight: 700;

    white-space: nowrap;

    flex-shrink: 0;

}



.leaderboard-metrics {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;

}



.leaderboard-metrics span {

    display: flex;

    flex-direction: column;

    gap: 4px;

    padding: 8px 6px;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.64);

    color: var(--text-secondary);

    font-size: 0.8rem;

}



.leaderboard-metrics strong {

    color: var(--text-primary);

    font-size: 0.88rem;

    word-break: break-all;

    line-height: 1.2;

}



.leaderboard-metrics--compact {

    grid-template-columns: repeat(3, minmax(0, 1fr));

}



.leaderboard-bar {

    position: relative;

    width: 100%;

    height: 8px;

    border-radius: 999px;

    background: rgba(124, 58, 237, 0.10);

    overflow: hidden;

}



.leaderboard-bar span {

    position: absolute;

    inset: 0 auto 0 0;

    border-radius: inherit;

    background: linear-gradient(90deg, #7c3aed, #a78bfa);

}



.leaderboard-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

}



.category-link-card__footer {

    line-height: 1.5;

}



.user-list__action {

    align-self: flex-start;

    border: 1px solid rgba(124, 58, 237, 0.14);

    border-radius: 999px;

    padding: 8px 12px;

    background: rgba(255, 255, 255, 0.82);

    color: var(--primary-color);

    font-size: 0.82rem;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);

}



.leaderboard-entry--author-featured,

.leaderboard-entry--author-compact {

    display: block;

}



.user-list__item--author-card {

    width: 100%;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 14px;

    padding: 18px;

    border-radius: 20px;

    border: 1px solid rgba(15, 23, 42, 0.08);

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));

    color: inherit;

    text-decoration: none;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);

    transition: var(--transition);

}



.user-list__item--author-card:hover,

.user-list__item--author-compact:hover {

    transform: translateY(-1px);

    box-shadow: var(--shadow-light);

}



.author-featured__topline {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

}



.user-list__featured-head {

    display: grid;

    grid-template-columns: 48px minmax(0, 1fr);

    align-items: start;

    gap: 12px;

    padding-bottom: 14px;

    border-bottom: 1px solid rgba(148, 163, 184, 0.18);

}



.author-featured__identity {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    min-width: 0;

}



.author-featured__avatar,

.author-row__avatar {

    flex-shrink: 0;

    width: 48px;

    height: 48px;

    border-radius: 14px;

    overflow: hidden;

    background: rgba(124, 58, 237, 0.08);

}



.author-featured__avatar img,

.author-row__avatar img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.author-featured__heading {

    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;

}



.author-featured__eyebrow {

    color: var(--text-secondary);

    font-size: 0.74rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



.author-featured__heading strong {

    color: var(--text-primary);

    font-size: 1.04rem;

    line-height: 1.3;

    word-break: keep-all;

}



.author-featured__bio {

    margin: 0;

    color: var(--text-secondary);

    font-size: 0.82rem;

    line-height: 1.55;

    word-break: break-word;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden;

}



.author-featured__score {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    justify-content: center;

    gap: 4px;

    min-width: 96px;

    margin-left: auto;

    padding: 10px 12px;

    border-radius: 16px;

    border: 1px solid rgba(148, 163, 184, 0.18);

    background: rgba(15, 23, 42, 0.03);

}



.author-featured__score span {

    color: var(--text-secondary);

    font-size: 0.76rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



.author-featured__score strong {

    color: var(--text-primary);

    font-size: 1.24rem;

    line-height: 1;

}



.leaderboard-rank--featured {

    min-width: 48px;

    height: 48px;

    border-radius: 16px;

}



.leaderboard-rank--compact {

    min-width: 40px;

    height: 40px;

    border-radius: 13px;

    font-size: 0.82rem;

}



.author-featured__meta {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.author-featured__meta span {

    display: inline-flex;

    align-items: center;

    padding: 5px 10px;

    border-radius: 999px;

    background: rgba(15, 23, 42, 0.05);

    color: var(--text-secondary);

    font-size: 0.78rem;

    line-height: 1.4;

}



.leaderboard-metrics--author-board {

    grid-template-columns: repeat(2, minmax(0, 1fr));

}



.leaderboard-metrics--author-board span,

.author-row__metrics span {

    align-items: flex-start;

}



.leaderboard-metrics--author-board em,

.author-row__metrics em {

    font-style: normal;

    font-size: 0.76rem;

    color: var(--text-secondary);

}



.author-featured__footer {

    display: flex;

    align-items: center;

    gap: 12px;

}



.author-featured__footer .leaderboard-bar {

    flex: 1;

}



.author-featured__link {

    color: var(--primary-color);

    font-size: 0.82rem;

    font-weight: 600;

    white-space: nowrap;

}



.leaderboard-bar--glow {

    height: 7px;

    background: rgba(15, 23, 42, 0.06);

    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);

}



.user-list__item--author-compact {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 12px;

    padding: 14px 16px;

    border-radius: 16px;

    border: 1px solid rgba(15, 23, 42, 0.08);

    background: rgba(255, 255, 255, 0.94);

    color: inherit;

    text-decoration: none;

    transition: var(--transition);

}



.author-row__main {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    min-width: 0;

}



.user-list__compact-main {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.user-list__compact-head {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

}



.user-list__compact-head strong {

    color: var(--text-primary);

    width: 100%;

    min-width: 0;

    line-height: 1.4;

    word-break: keep-all;

}



.user-list__compact-main p {

    margin: 0;

    color: var(--text-secondary);

    font-size: 0.8rem;

    line-height: 1.55;

    word-break: break-word;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

    overflow: hidden;

}



.author-row__metrics {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;

}



.author-row__metrics span {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 4px;

    min-width: 0;

    padding: 10px 12px;

    border-radius: 12px;

    background: rgba(15, 23, 42, 0.04);

    color: var(--text-secondary);

    font-size: 0.72rem;

    letter-spacing: 0.04em;

    text-transform: uppercase;

}



.author-row__metrics strong {

    color: var(--text-primary);

    font-size: 0.96rem;

    line-height: 1;

}



.author-row__bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding-top: 2px;

}



.author-row__note {

    flex: 1;

    min-width: 0;

    color: var(--text-secondary);

    font-size: 0.78rem;

    line-height: 1.55;

}



.user-list__compact-arrow {

    color: var(--primary-color);

    font-size: 0.78rem;

    font-weight: 600;

    white-space: nowrap;

    flex-shrink: 0;

}



.leaderboard-chip--soft {

    align-self: flex-start;

    flex-shrink: 0;

    background: rgba(15, 23, 42, 0.05);

    color: #475569;

}



.announcement-highlight--leaderboard {

    display: block;

    text-decoration: none;

    color: inherit;

    padding: 18px;

}



.announcement__header,

.announcement__footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

}



.announcement__header {

    margin-bottom: 12px;

}



.announcement__badge {

    display: inline-flex;

    align-items: center;

    padding: 6px 10px;

    border-radius: 999px;

    background: rgba(34, 197, 94, 0.12);

    color: #15803d;

    font-size: 0.78rem;

    font-weight: 700;

}



.announcement__meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 10px;

}



.announcement__footer {

    margin-top: 14px;

}



.announcement h4 {

    color: var(--text-primary);

}



.announcement h4 a {

    color: inherit;

    text-decoration: none;

}



.announcement h4 a:hover {

    color: var(--primary-color);

}



/* 中间内容区 */

.main-posts {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



/* 创建帖子 */

.create-post {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    background-color: white;

    border-radius: var(--border-radius);

    padding: 20px;

    box-shadow: var(--shadow-light);

    border: 1px solid var(--border-color);

}



.create-post img {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    object-fit: cover;

    flex-shrink: 0;

}



.post-input {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 15px;

}



.post-input input,

.post-input textarea,

.post-input select {

    width: 100%;

    padding: 12px 16px;

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius);

    font-size: 16px;

    outline: none;

    transition: var(--transition);

    resize: vertical;

    font-family: inherit;

}



.post-input input:focus,

.post-input textarea:focus,

.post-input select:focus {

    border-color: var(--primary-color);

    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);

}



.post-input textarea {

    min-height: 120px;

}



.post-category-select {

    margin: 10px 0;

}



.post-category-select label {

    display: block;

    margin-bottom: 5px;

    font-weight: 500;

    color: var(--text-primary);

}



.post-category-select select {

    cursor: pointer;

    background-color: white;

}



.post-actions {

    display: flex;

    align-items: center;

    gap: 10px;

}



.action-btn {

    display: flex;

    align-items: center;

    gap: 5px;

    padding: 8px 12px;

    border: 1px solid var(--border-color);

    background-color: white;

    border-radius: 8px;

    color: var(--text-secondary);

    cursor: pointer;

    transition: var(--transition);

    font-size: 14px;

}



.action-btn:hover {

    background-color: var(--secondary-color);

    border-color: var(--primary-color);

    color: var(--primary-color);

}



.btn-post {

    margin-left: auto;

}



/* 内容区域 */

.content-section {

    display: none;

}



.content-section.active {

    display: block;

}



/* 帖子列表 */

.posts-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



/* 帖子卡片 */

.post {

    background-color: white;

    border-radius: var(--border-radius);

    padding: 20px;

    box-shadow: var(--shadow-light);

    border: 1px solid var(--border-color);

    transition: var(--transition);

}



.post:hover {

    box-shadow: var(--shadow-medium);

    transform: translateY(-2px);

}



.post-header {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 15px;

}



.post-author-link {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    color: inherit;

    text-decoration: none;

    transition: var(--transition);

}



.post-author-link:hover {

    transform: translateY(-1px);

}



.post-header img {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    object-fit: cover;

    flex-shrink: 0;

}



.post-meta h4 {

    font-size: 16px;

    font-weight: 600;

    margin-bottom: 2px;

    color: var(--text-primary);

}



.post-time {

    font-size: 14px;

    color: var(--text-secondary);

    margin-right: 10px;

}



.post-category {

    font-size: 12px;

    color: var(--primary-color);

    background-color: rgba(0, 113, 227, 0.1);

    padding: 2px 8px;

    border-radius: 12px;

}



.post-content h3 {

    font-size: 20px;

    font-weight: 600;

    margin-bottom: 12px;

    color: var(--text-primary);

}



.post-content p {

    color: var(--text-secondary);

    margin-bottom: 15px;

    line-height: 1.7;

}



.post-content img {

    width: 100%;

    border-radius: 12px;

    margin: 15px 0;

    object-fit: cover;

}



.post-tags {

    display: flex;

    gap: 8px;

    margin-top: 15px;

}



.tag {

    font-size: 14px;

    color: var(--primary-color);

    background-color: rgba(0, 113, 227, 0.1);

    padding: 4px 12px;

    border-radius: 16px;

}



.post-footer {

    display: flex;

    align-items: center;

    gap: 20px;

    padding-top: 15px;

    border-top: 1px solid var(--border-color);

}



.post-action {

    display: flex;

    align-items: center;

    gap: 5px;

    padding: 8px 12px;

    border: none;

    background: transparent;

    color: var(--text-secondary);

    cursor: pointer;

    border-radius: 8px;

    transition: var(--transition);

    font-size: 14px;

}



.post-action:hover {

    background-color: var(--secondary-color);

    color: var(--primary-color);

}



/* 加载更多 */

.load-more {

    text-align: center;

    padding: 20px 0;

}



.home-load-more {

    display: grid;

    gap: 10px;

    justify-items: center;

}



.home-load-state {

    margin: 0;

    font-size: 0.9rem;

    color: var(--text-secondary);

}



.home-feed-sentinel {

    width: 100%;

    height: 1px;

}



/* 右侧边栏 */

.trending-topics {

    list-style: none;

}



.trending-topics li {

    margin-bottom: 12px;

}



.trending-topics a {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px;

    border-radius: 8px;

    color: var(--text-primary);

    text-decoration: none;

    transition: var(--transition);

}



.trending-topics a:hover {

    background-color: var(--secondary-color);

}



.topic-title {

    font-weight: 500;

}



.topic-count {

    font-size: 13px;

    color: var(--text-secondary);

    background-color: rgba(0, 0, 0, 0.05);

    padding: 2px 8px;

    border-radius: 12px;

}



/* 统计信息 */

.stats-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

}



.stat-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 12px 8px;

    background-color: var(--secondary-color);

    border-radius: 12px;

    min-width: 0;

    overflow: hidden;

}



.stat-item i {

    font-size: 24px;

    color: var(--primary-color);

    margin-bottom: 8px;

}



.stat-number {

    display: block;

    font-size: clamp(13px, 1.5vw, 18px);

    font-weight: 700;

    color: var(--text-primary);

    word-break: break-all;

    line-height: 1.2;

}



.stat-label {

    font-size: 13px;

    color: var(--text-secondary);

}



/* 公告 */

.announcement {

    background-color: rgba(0, 113, 227, 0.05);

    border-radius: 12px;

    padding: 15px;

    border-left: 4px solid var(--primary-color);

}



.announcement h4 {

    font-size: 16px;

    margin-bottom: 8px;

    color: var(--text-primary);

}



.announcement p {

    font-size: 14px;

    color: var(--text-secondary);

    margin-bottom: 8px;

}



.announcement-date {

    font-size: 12px;

    color: var(--text-secondary);

}



/* 页脚 */

.footer {

    background-color: white;

    border-top: 1px solid var(--border-color);

    padding: 40px 0;

    margin-top: 50px;

}



.footer-content {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1fr;

    gap: 40px;

    margin-bottom: 30px;

}



.footer-info .logo {

    margin-bottom: 20px;

}



.footer-info p {

    color: var(--text-secondary);

    font-size: 14px;

    line-height: 1.7;

}



.footer-links h4 {

    font-size: 16px;

    font-weight: 600;

    margin-bottom: 20px;

    color: var(--text-primary);

}



.footer-links ul {

    list-style: none;

}



.footer-links li {

    margin-bottom: 12px;

}



.footer-links a {

    color: var(--text-secondary);

    text-decoration: none;

    font-size: 14px;

    transition: var(--transition);

}



.footer-links a:hover {

    color: var(--primary-color);

}



.social-icons {

    display: flex;

    gap: 15px;

}



.social-icons a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background-color: var(--secondary-color);

    color: var(--text-primary);

    transition: var(--transition);

}



.social-icons a:hover {

    background-color: var(--primary-color);

    color: white;

    transform: translateY(-2px);

}



.footer-bottom {

    border-top: 1px solid var(--border-color);

    padding-top: 20px;

    text-align: center;

    color: var(--text-secondary);

    font-size: 14px;

}



/* 响应式设计 */

@media (max-width: 1200px) {

    .content-grid {

        grid-template-columns: 240px 1fr 280px;

        gap: 20px;

    }

}



@media (max-width: 1024px) {

    .content-grid {

        grid-template-columns: 1fr;

    }

    

    .sidebar-left,

    .sidebar-right {

        display: none;

    }

    

    .footer-content {

        grid-template-columns: 1fr 1fr;

        gap: 30px;

    }

}



@media (max-width: 768px) {

    .menu-toggle {

        display: block;

    }

    

    .header-content {

        flex-wrap: wrap;

        height: auto;

        padding: 15px 0;

    }

    

    .main-nav {

        order: 3;

        width: 100%;

        overflow-x: auto;

        margin-top: 10px;

    }

    

    .main-nav ul {

        flex-wrap: nowrap;

    }

    

    .user-actions {

        gap: 5px;

    }

    

    .btn {

        padding: 6px 12px;

        font-size: 14px;

    }

    

    .search-box {

        padding: 0 15px;

        height: 48px;

    }

    

    .post-content h3 {

        font-size: 18px;

    }

    

    .footer-content {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    

    /* 触摸优化 */

    .post-action,

    .action-btn,

    .btn {

        min-height: 44px;

        min-width: 44px;

    }

}



@media (max-width: 480px) {

    .container {

        padding: 0 15px;

    }

    

    .main-content {

        padding: 20px 0;

    }

    

    .create-post {

        flex-direction: column;

        gap: 10px;

    }

    

    .post-actions {

        flex-wrap: wrap;

    }

    

    .action-btn span {

        display: none;

    }

    

    .post-footer {

        gap: 10px;

    }

    

    .post-action span {

        display: none;

    }

}



/* 模态框样式 */

.modal {

    display: none;

    position: fixed;

    z-index: 2000;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(5px);

    animation: fadeIn 0.3s ease;

}



.modal-content {

    background-color: white;

    margin: 5% auto;

    padding: 0;

    border-radius: var(--border-radius);

    width: 90%;

    max-width: 480px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);

    animation: slideUp 0.3s ease;

}



.modal-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 24px 30px;

    border-bottom: 1px solid var(--border-color);

}



.modal-header h2 {

    font-size: 24px;

    font-weight: 600;

    color: var(--text-primary);

    margin: 0;

}



.close-btn {

    background: transparent;

    border: none;

    font-size: 32px;

    color: var(--text-secondary);

    cursor: pointer;

    padding: 0;

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    transition: var(--transition);

}



.close-btn:hover {

    background-color: var(--secondary-color);

    color: var(--text-primary);

}



.modal-body {

    padding: 30px;

}



/* 表单样式 */

.form-group {

    margin-bottom: 20px;

}



.form-group label {

    display: block;

    margin-bottom: 8px;

    font-weight: 500;

    color: var(--text-primary);

    font-size: 14px;

}



.form-group input {

    width: 100%;

    padding: 12px 16px;

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius);

    font-size: 16px;

    outline: none;

    transition: var(--transition);

    background-color: white;

}



.form-group input:focus {

    border-color: var(--primary-color);

    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);

}



.form-options {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;

}



.checkbox-label {

    display: flex;

    align-items: center;

    cursor: pointer;

    font-size: 14px;

    color: var(--text-secondary);

}



.checkbox-label input {

    margin-right: 8px;

    width: auto;

}



.forgot-password {

    color: var(--primary-color);

    text-decoration: none;

    font-size: 14px;

    transition: var(--transition);

}



.forgot-password:hover {

    text-decoration: underline;

}



.btn-block {

    width: 100%;

    padding: 14px;

    font-size: 16px;

}



/* 分隔线 */

.auth-divider {

    position: relative;

    text-align: center;

    margin: 30px 0;

}



.auth-divider span {

    background-color: white;

    padding: 0 20px;

    color: var(--text-secondary);

    font-size: 14px;

}



.auth-divider::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 0;

    right: 0;

    height: 1px;

    background-color: var(--border-color);

    z-index: 0;

}



/* 社交登录 */

.social-login {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.social-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 12px 16px;

    border: 1px solid var(--border-color);

    border-radius: var(--border-radius);

    background-color: white;

    font-size: 16px;

    font-weight: 500;

    cursor: pointer;

    transition: var(--transition);

}



.social-btn:hover {

    background-color: var(--secondary-color);

    border-color: var(--primary-color);

    transform: translateY(-1px);

}



.social-btn.wechat {

    color: #07c160;

    border-color: #07c160;

}



.social-btn.wechat:hover {

    background-color: rgba(7, 193, 96, 0.1);

}



.social-btn.qq {

    color: #12b7f5;

    border-color: #12b7f5;

}



.social-btn.qq:hover {

    background-color: rgba(18, 183, 245, 0.1);

}



.social-btn.weibo {

    color: #e6162d;

    border-color: #e6162d;

}



.social-btn.weibo:hover {

    background-color: rgba(230, 22, 45, 0.1);

}



/* 动画 */

@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}



@keyframes slideUp {

    from {

        opacity: 0;

        transform: translateY(50px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* 响应式 */

@media (max-width: 480px) {

    .modal-content {

        margin: 10% auto;

        width: 95%;

    }

    

    .modal-header,

    .modal-body {

        padding: 20px;

    }

    

    .modal-header h2 {

        font-size: 20px;

    }

}



/* 个人中心页面样式 */

.profile-page {

    padding: 30px 0;

    min-height: calc(100vh - 144px);

}



.profile-content {

    display: flex;

    gap: 30px;

}



/* 个人中心侧边栏 */

.profile-sidebar {

    width: 300px;

    background: white;

    border-radius: var(--border-radius);

    box-shadow: var(--shadow-light);

    padding: 30px;

    position: sticky;

    top: 100px;

    height: fit-content;

}



.profile-header {

    text-align: center;

    margin-bottom: 30px;

}



.avatar-container {

    position: relative;

    display: inline-block;

    margin-bottom: 20px;

}



.avatar-container img {

    width: 120px;

    height: 120px;

    border-radius: 50%;

    object-fit: cover;

    border: 3px solid white;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}



.avatar-edit-btn {

    position: absolute;

    bottom: 0;

    right: 0;

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: var(--primary-color);

    color: white;

    border: none;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

    transition: var(--transition);

}



.avatar-edit-btn:hover {

    background: var(--primary-hover);

    transform: scale(1.1);

}



.profile-header h2 {

    font-size: 24px;

    font-weight: 700;

    margin-bottom: 10px;

    color: var(--text-primary);

}



.profile-header .bio {

    color: var(--text-secondary);

    margin-bottom: 20px;

    line-height: 1.5;

}



.profile-stats {

    display: flex;

    justify-content: space-around;

    margin-top: 20px;

    padding-top: 20px;

    border-top: 1px solid var(--border-color);

}



.stat-item {

    text-align: center;

}



.stat-number {

    display: block;

    font-size: 20px;

    font-weight: 700;

    color: var(--primary-color);

    margin-bottom: 5px;

}



.stat-label {

    display: block;

    font-size: 14px;

    color: var(--text-secondary);

}



/* 个人中心导航 */

.profile-nav {

    margin-top: 30px;

}



.profile-nav ul {

    list-style: none;

}



.profile-nav .nav-item {

    display: flex;

    align-items: center;

    padding: 15px 20px;

    border-radius: 8px;

    color: var(--text-primary);

    text-decoration: none;

    transition: var(--transition);

    margin-bottom: 5px;

}



.profile-nav .nav-item:hover {

    background-color: var(--secondary-color);

    transform: translateX(5px);

}



.profile-nav .nav-item.active {

    background-color: rgba(0, 113, 227, 0.1);

    color: var(--primary-color);

}



.profile-nav .nav-item i {

    margin-right: 12px;

    font-size: 18px;

    width: 20px;

}



/* 个人中心主内容 */

.profile-main {

    flex: 1;

    min-width: 0;

}



.profile-section {

    background: white;

    border-radius: var(--border-radius);

    box-shadow: var(--shadow-light);

    padding: 30px;

    margin-bottom: 30px;

    display: none;

}



.profile-section.active {

    display: block;

}



.section-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;

    padding-bottom: 20px;

    border-bottom: 1px solid var(--border-color);

}



.section-header h2 {

    font-size: 24px;

    font-weight: 700;

    color: var(--text-primary);

    margin: 0;

}



/* 个人信息样式 */

.info-content {

    margin-bottom: 30px;

}



.info-item {

    display: flex;

    align-items: center;

    padding: 15px 0;

    border-bottom: 1px solid var(--border-color);

}



.info-item label {

    width: 100px;

    font-weight: 500;

    color: var(--text-secondary);

}



.info-item span {

    flex: 1;

    color: var(--text-primary);

}



/* 编辑表单样式 */

.edit-form {

    margin-top: 30px;

}



.form-group {

    margin-bottom: 20px;

}



.form-group label {

    display: block;

    margin-bottom: 8px;

    font-weight: 500;

    color: var(--text-primary);

}



.form-group input,

.form-group textarea {

    width: 100%;

    padding: 12px;

    border: 1px solid var(--border-color);

    border-radius: 8px;

    font-size: 15px;

    font-family: inherit;

    transition: var(--transition);

}



.form-group input:focus,

.form-group textarea:focus {

    outline: none;

    border-color: var(--primary-color);

    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);

}



.form-actions {

    display: flex;

    gap: 10px;

    margin-top: 30px;

}



/* 帖子列表样式 */

.posts-list {

    margin-top: 30px;

}



.posts-list .post {

    border-bottom: 1px solid var(--border-color);

    padding: 20px 0;

}



.posts-list .post:last-child {

    border-bottom: none;

}



.posts-list .post-header {

    margin-bottom: 15px;

}



.posts-list .post-content h3 {

    margin-bottom: 10px;

}



.posts-list .post-content h3 a {

    color: var(--text-primary);

    text-decoration: none;

    transition: var(--transition);

}



.posts-list .post-content h3 a:hover {

    color: var(--primary-color);

}



/* 评论列表样式 */

.comments-list {

    margin-top: 30px;

}



.comment-item {

    border-bottom: 1px solid var(--border-color);

    padding: 20px 0;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

}



.comment-item:last-child {

    border-bottom: none;

}



.comment-content {

    flex: 1;

    margin-right: 20px;

}



.comment-content p {

    margin-bottom: 10px;

    line-height: 1.6;

}



.comment-meta {

    display: flex;

    gap: 15px;

    font-size: 14px;

    color: var(--text-secondary);

}



.comment-meta a {

    color: var(--primary-color);

    text-decoration: none;

}



.comment-meta a:hover {

    text-decoration: underline;

}



/* 设置样式 */

.settings-content {

    margin-top: 30px;

}



.setting-group {

    margin-bottom: 30px;

    padding-bottom: 30px;

    border-bottom: 1px solid var(--border-color);

}



.setting-group:last-child {

    border-bottom: none;

}



.setting-group h3 {

    font-size: 18px;

    font-weight: 600;

    margin-bottom: 20px;

    color: var(--text-primary);

}



.setting-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px 0;

}



.setting-item label {

    font-weight: 500;

    color: var(--text-primary);

}



/* 开关按钮样式 */

.switch {

    position: relative;

    display: inline-block;

    width: 50px;

    height: 24px;

}



.switch input {

    opacity: 0;

    width: 0;

    height: 0;

}



.slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #ccc;

    transition: .4s;

    border-radius: 24px;

}



.slider:before {

    position: absolute;

    content: "";

    height: 16px;

    width: 16px;

    left: 4px;

    bottom: 4px;

    background-color: white;

    transition: .4s;

    border-radius: 50%;

}



input:checked + .slider {

    background-color: var(--primary-color);

}



input:focus + .slider {

    box-shadow: 0 0 1px var(--primary-color);

}



input:checked + .slider:before {

    transform: translateX(26px);

}



/* 设备列表样式 */

.device-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px;

    background: var(--secondary-color);

    border-radius: 8px;

    margin-bottom: 15px;

}



.device-info {

    display: flex;

    align-items: center;

    gap: 15px;

}



.device-info i {

    font-size: 24px;

    color: var(--primary-color);

}



.device-info h4 {

    margin: 0 0 5px 0;

    font-size: 16px;

    font-weight: 600;

}



.device-info p {

    margin: 0;

    font-size: 14px;

    color: var(--text-secondary);

}



/* 空状态样式 */

.empty-state {

    text-align: center;

    padding: 60px 30px;

    color: var(--text-secondary);

}



.empty-state i {

    font-size: 48px;

    margin-bottom: 20px;

    opacity: 0.5;

}



.empty-state p {

    margin-bottom: 30px;

    font-size: 16px;

}



/* 小按钮样式 */

.btn-small {

    padding: 6px 12px;

    font-size: 14px;

}



/* 危险按钮样式 */

.btn-danger {

    background-color: #ff3b30;

    color: white;

}



.btn-danger:hover {

    background-color: #ff453a;

    transform: translateY(-1px);

    box-shadow: var(--shadow-medium);

}



/* 响应式设计 */

@media (max-width: 1024px) {

    .profile-content {

        flex-direction: column;

    }

    

    .profile-sidebar {

        width: 100%;

        position: static;

    }

    

    .profile-main {

        width: 100%;

    }

}



@media (max-width: 768px) {

    .profile-sidebar {

        padding: 20px;

    }

    

    .profile-section {

        padding: 20px;

    }

    

    .section-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }

    

    .info-item {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

    }

    

    .info-item label {

        width: 100%;

    }

    

    .form-actions {

        flex-direction: column;

    }

    

    .form-actions .btn {

        width: 100%;

    }

    

    .device-item {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }

    

    .comment-item {

        flex-direction: column;

        align-items: flex-start;

        gap: 15px;

    }

}



:root {

    --primary-color: #7c3aed;

    --primary-hover: #6d28d9;

    --secondary-color: #f6f3ff;

    --accent-color: #22c55e;

    --text-primary: #24154f;

    --text-secondary: #6f63a8;

    --border-color: rgba(124, 58, 237, 0.14);

    --shadow-light: 0 12px 32px rgba(76, 29, 149, 0.08);

    --shadow-medium: 0 24px 60px rgba(76, 29, 149, 0.16);

    --border-radius: 18px;

}



body {

    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    background:

        radial-gradient(circle at top left, rgba(167, 139, 250, 0.20), transparent 32%),

        radial-gradient(circle at top right, rgba(34, 197, 94, 0.12), transparent 28%),

        #f8f7ff;

}



h1,

h2,

h3,

h4,

h5,

h6,

.logo span,

.btn,

.feed-tab,

.feed-sort,

.section-link,

.theme-toggle {

    font-family: 'Poppins', 'Open Sans', sans-serif;

}



.header {

    background: rgba(255, 255, 255, 0.72);

    backdrop-filter: blur(18px);

    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.06);

}



.logo {

    text-decoration: none;

    color: var(--text-primary);

}



.logo i {

    color: var(--primary-color);

}



.header-actions {

    align-items: center;

}



.theme-toggle {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 42px;

    padding: 0 16px;

    border: 1px solid rgba(124, 58, 237, 0.16);

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.86);

    color: var(--text-primary);

    cursor: pointer;

    transition: var(--transition);

}



.theme-toggle:hover {

    transform: translateY(-1px);

    box-shadow: var(--shadow-light);

}



.btn-primary {

    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);

    border: none;

}



.btn-primary:hover {

    background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);

}



.btn-secondary {

    border: 1px solid rgba(124, 58, 237, 0.12);

    color: var(--text-primary);

    background: rgba(255, 255, 255, 0.9);

}



.search-section {

    background: transparent;

    border-bottom: none;

    padding: 30px 0 14px;

}



.search-shell {

    display: flex;

    flex-direction: column;

    gap: 14px;

    max-width: 980px;

    margin: 0 auto;

}



.search-box {

    width: 100%;

    background: rgba(255, 255, 255, 0.9);

    border: 1px solid rgba(124, 58, 237, 0.12);

    border-radius: 24px;

    box-shadow: var(--shadow-light);

}



.search-box input {

    background: transparent;

}



.search-box input::placeholder {

    color: rgba(76, 29, 149, 0.62);

}



.search-btn {

    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);

    box-shadow: 0 12px 28px rgba(124, 58, 237, 0.2);

}



.search-trending {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.trend-chip {

    border: 1px solid rgba(124, 58, 237, 0.14);

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.74);

    color: var(--text-primary);

    padding: 8px 14px;

    cursor: pointer;

    transition: var(--transition);

}



.trend-chip:hover {

    border-color: rgba(124, 58, 237, 0.28);

    color: var(--primary-color);

    transform: translateY(-1px);

}



.forum-home {

    padding-top: 10px;

}



.hero-banner {

    display: grid;

    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);

    gap: 22px;

    margin-bottom: 30px;

}



.hero-banner__content,

.hero-banner__panel,

.panel-card,

.quick-link-card,

.community-card,

.sidebar-section,

.create-post,

.feed-toolbar,

.posts-section,

.stat-item,

.announcement-highlight,

.modal-content {

    background: rgba(255, 255, 255, 0.82);

    border: 1px solid rgba(255, 255, 255, 0.56);

    box-shadow: var(--shadow-light);

    backdrop-filter: blur(16px);

}



.hero-banner__content,

.hero-banner__panel {

    border-radius: 28px;

    padding: 30px;

}



.hero-banner__content {

    position: relative;

    overflow: hidden;

}



.hero-banner__content::after {

    content: '';

    position: absolute;

    right: -70px;

    top: -60px;

    width: 220px;

    height: 220px;

    border-radius: 50%;

    background: radial-gradient(circle, rgba(124, 58, 237, 0.20), transparent 65%);

}



.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 14px;

    border-radius: 999px;

    color: var(--primary-color);

    background: rgba(124, 58, 237, 0.10);

    font-weight: 600;

    margin-bottom: 18px;

}



.hero-banner__content h1 {

    font-size: clamp(2rem, 4vw, 3.5rem);

    line-height: 1.15;

    margin-bottom: 16px;

    max-width: 720px;

}



.hero-banner__content p {

    color: var(--text-secondary);

    font-size: 1.05rem;

    max-width: 640px;

}



.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin: 28px 0 24px;

}



.hero-metrics {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 14px;

}



.metric-card {

    border-radius: 20px;

    padding: 18px;

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(246, 243, 255, 0.90));

    border: 1px solid rgba(124, 58, 237, 0.10);

}



.metric-label,

.metric-meta {

    display: block;

}



.metric-label {

    font-size: 0.9rem;

    color: var(--text-secondary);

    margin-bottom: 8px;

}



.metric-value {

    font-size: 1.7rem;

    color: var(--text-primary);

}



.metric-meta {

    margin-top: 8px;

    color: var(--text-secondary);

    font-size: 0.88rem;

}



.hero-banner__panel {

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.panel-card {

    border-radius: 22px;

    padding: 22px;

}



.panel-card__header,

.section-title-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

    margin-bottom: 16px;

}



.panel-card__header span,

.section-title-row span {

    color: var(--text-secondary);

    font-size: 0.88rem;

}



.bullet-list {

    display: flex;

    flex-direction: column;

    gap: 12px;

    padding-left: 18px;

    color: var(--text-secondary);

}



.quick-links {

    display: grid;

    gap: 14px;

}



.quick-link-card {

    display: flex;

    align-items: center;

    gap: 14px;

    border-radius: 22px;

    padding: 18px;

    text-decoration: none;

    color: inherit;

    transition: var(--transition);

}



.quick-link-card:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow-medium);

}



.quick-link-card i {

    width: 44px;

    height: 44px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: rgba(124, 58, 237, 0.12);

    color: var(--primary-color);

}



.quick-link-card strong,

.quick-link-card span {

    display: block;

}



.quick-link-card span {

    color: var(--text-secondary);

    font-size: 0.9rem;

    margin-top: 2px;

}



.community-card p {

    color: var(--text-secondary);

    margin-bottom: 18px;

}



.community-card__items {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 12px;

}



.community-card__items div {

    border-radius: 16px;

    padding: 14px;

    background: rgba(124, 58, 237, 0.08);

}



.community-card__items strong,

.community-card__items span {

    display: block;

}



.community-card__items strong {

    font-size: 1.15rem;

    margin-bottom: 4px;

}



.feed-toolbar,

.posts-section {

    border-radius: 24px;

    padding: 22px;

}



.main-posts {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.feed-toolbar {

    display: flex;

    flex-direction: column;

    gap: 18px;

}



.feed-tabs,

.feed-sorts {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.feed-toolbar__meta {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    color: var(--text-secondary);

}



.feed-tab,

.feed-sort {

    padding: 10px 16px;

    border-radius: 999px;

    border: 1px solid rgba(124, 58, 237, 0.12);

    background: rgba(255, 255, 255, 0.88);

    color: var(--text-primary);

    cursor: pointer;

    transition: var(--transition);

}



.feed-tab:hover,

.feed-sort:hover,

.feed-tab.active,

.feed-sort.active {

    color: white;

    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);

    border-color: transparent;

}



.section-header {

    margin-bottom: 18px;

    border-bottom-color: rgba(124, 58, 237, 0.10);

}



.section-header h2 {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 1.45rem;

}



.section-link {

    text-decoration: none;

    color: var(--primary-color);

    font-weight: 600;

}



.section-link--muted {

    color: var(--text-secondary);

}



#hotPostsList .post,

#financePostsList .post,

#latestPostsList .post {

    padding: 24px;

    margin-bottom: 16px;

    border: 1px solid rgba(124, 58, 237, 0.10);

    border-bottom: none;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.88);

}



#hotPostsList .post:last-child,

#financePostsList .post:last-child,

#latestPostsList .post:last-child {

    margin-bottom: 0;

}



.post {

    box-shadow: none;

}



.post:hover {

    box-shadow: var(--shadow-medium);

    transform: translateY(-4px);

}



.post-content a {

    text-decoration: none;

    color: inherit;

}



.post-content h3 {

    font-size: 1.35rem;

}



.post-footer {

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 10px;

    border-top-color: rgba(124, 58, 237, 0.10);

}



.post-action {

    border-radius: 999px;

    padding: 10px 14px;

}



.post-action.is-active {

    color: var(--primary-color);

    background: rgba(124, 58, 237, 0.10);

}



.create-post {

    border-radius: 24px;

}



.action-btn {

    border-radius: 999px;

}



.loading-state,

.feed-empty {

    border-radius: 20px;

    padding: 28px 18px;

    text-align: center;

    color: var(--text-secondary);

    background: rgba(124, 58, 237, 0.05);

    border: 1px dashed rgba(124, 58, 237, 0.18);

}



.feed-empty i {

    font-size: 1.4rem;

    margin-bottom: 10px;

    color: var(--primary-color);

}



.ranked-topics {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.ranked-topics li {

    margin-bottom: 0;

}



.topic-rank {

    display: grid;

    grid-template-columns: auto 1fr auto;

    gap: 14px;

    align-items: center;

    border-radius: 18px;

    background: rgba(124, 58, 237, 0.05);

    border: 1px solid rgba(124, 58, 237, 0.08);

}



.topic-rank__index {

    width: 40px;

    height: 40px;

    border-radius: 14px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);

    color: white;

    font-weight: 700;

}



.topic-rank__main {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.topic-rank__trend {

    border-radius: 999px;

    padding: 6px 10px;

    font-size: 0.82rem;

    font-weight: 600;

}



.topic-rank__trend.up {

    color: #16a34a;

    background: rgba(34, 197, 94, 0.12);

}



.topic-rank__trend.flat {

    color: #6b7280;

    background: rgba(107, 114, 128, 0.12);

}



.topic-rank__trend.down {

    color: #dc2626;

    background: rgba(239, 68, 68, 0.12);

}



.stats-grid {

    gap: 12px;

}



.stat-item {

    border-radius: 18px;

    padding: 14px 8px;

    border: 1px solid rgba(124, 58, 237, 0.08);

    min-width: 0;

    overflow: hidden;

}



.stat-item i {

    color: var(--primary-color);

}



.stat-number {

    font-family: 'Poppins', sans-serif;

    font-size: clamp(13px, 1.4vw, 17px);

    word-break: break-all;

    line-height: 1.2;

}



.announcement-highlight {

    border-radius: 20px;

}



.announcement-highlight p {

    color: var(--text-secondary);

}



.footer {

    margin-top: 38px;

    background: rgba(255, 255, 255, 0.72);

}



.back-to-top {

    position: fixed;

    right: 24px;

    bottom: 24px;

    width: 52px;

    height: 52px;

    border: none;

    border-radius: 50%;

    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);

    color: white;

    box-shadow: var(--shadow-medium);

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform: translateY(12px);

    transition: var(--transition);

    z-index: 1200;

}



.back-to-top.visible {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.toast-container {

    position: fixed;

    right: 24px;

    top: 92px;

    z-index: 1400;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.toast {

    min-width: 220px;

    max-width: 320px;

    padding: 14px 16px;

    border-radius: 16px;

    color: white;

    background: rgba(36, 21, 79, 0.92);

    box-shadow: var(--shadow-medium);

    animation: toast-in 0.25s ease;

}



@keyframes toast-in {

    from {

        opacity: 0;

        transform: translateY(-8px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.skeleton-card {

    position: relative;

    overflow: hidden;

}



.skeleton-card::after {

    content: '';

    position: absolute;

    inset: 0;

    transform: translateX(-100%);

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);

    animation: shimmer 1.4s infinite;

}



.skeleton-block {

    border-radius: 999px;

    background: rgba(124, 58, 237, 0.10);

}



.skeleton-block.title {

    width: 62%;

    height: 18px;

    margin-bottom: 14px;

}



.skeleton-block.line {

    width: 100%;

    height: 12px;

    margin-bottom: 10px;

}



.skeleton-block.line.short {

    width: 72%;

}



@keyframes shimmer {

    100% {

        transform: translateX(100%);

    }

}



.channel-page {

    background:

        radial-gradient(circle at top left, rgba(124, 58, 237, 0.18), transparent 30%),

        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 24%),

        linear-gradient(180deg, #f6f3ff 0%, #faf7ff 42%, #ffffff 100%);

}



.forum-channel-page {

    padding-top: 34px;

}



.channel-hero {

    display: grid;

    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);

    gap: 22px;

    margin-bottom: 30px;

}



.channel-layout {

    grid-template-columns: 260px minmax(0, 1fr) 320px;

}



.channel-hero__main,

.channel-hero__side .panel-card,

.channel-featured-section,

.channel-feed-toolbar,

.channel-post-card,

.channel-empty-state {

    background: rgba(255, 255, 255, 0.82);

    backdrop-filter: blur(18px);

    border: 1px solid rgba(124, 58, 237, 0.12);

    box-shadow: 0 20px 48px rgba(91, 33, 182, 0.08);

}



.channel-hero__main {

    position: relative;

    overflow: hidden;

    padding: 28px;

    border-radius: 28px;

}



.channel-hero__main::after {

    content: '';

    position: absolute;

    inset: auto -40px -40px auto;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background: radial-gradient(circle, rgba(167, 139, 250, 0.24), transparent 70%);

    pointer-events: none;

}



.channel-hero__title-row {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 22px;

    margin-bottom: 18px;

}



.channel-hero__title-row h1 {

    margin: 12px 0 10px;

    font-size: clamp(2rem, 4vw, 3.05rem);

    line-height: 1.08;

    font-family: 'Poppins', 'Open Sans', sans-serif;

}



.channel-hero__title-row p {

    max-width: 760px;

    color: var(--text-secondary);

}



.channel-hero__actions {

    display: flex;

    flex-direction: column;

    gap: 12px;

    min-width: 210px;

}



.channel-hero__actions .btn {

    justify-content: center;

    text-align: center;

}



.channel-sync-strip {

    display: grid;

    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);

    gap: 16px;

    align-items: center;

    padding: 18px 20px;

    border-radius: 24px;

    background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(59, 130, 246, 0.07));

    border: 1px solid rgba(124, 58, 237, 0.12);

    margin-bottom: 20px;

}



.channel-sync-strip__copy {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.channel-sync-strip__copy p {

    margin: 0;

    color: var(--text-secondary);

}



.channel-sync-strip__eyebrow {

    font-size: 0.76rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: #6d28d9;

    font-weight: 700;

}



.channel-sync-strip__chips {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    justify-content: flex-end;

}



.channel-sync-chip {

    display: inline-flex;

    flex-direction: column;

    gap: 4px;

    min-width: 94px;

    padding: 10px 12px;

    border-radius: 16px;

    border: 1px solid rgba(124, 58, 237, 0.12);

    background: rgba(255, 255, 255, 0.7);

}



.channel-sync-chip span {

    font-size: 0.72rem;

    color: var(--text-secondary);

}



.channel-sync-chip strong {

    font-size: 0.92rem;

}



.channel-hero__chips {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin: 20px 0 22px;

}



.channel-hero__badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

}



.channel-stat-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 14px;

}



.channel-hero__side {

    display: flex;

    flex-direction: column;

    gap: 18px;

}



.channel-hero__side .panel-card {

    border-radius: 24px;

}



.channel-featured-section,

.channel-feed-toolbar {

    margin-bottom: 22px;

}



.channel-featured-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;

}



.channel-posts-list {

    display: grid;

    gap: 16px;

}



.channel-post-card {

    position: relative;

    overflow: hidden;

    padding: 20px;

    border-radius: 24px;

    transition: var(--transition);

}



.channel-post-card:hover {

    transform: translateY(-3px);

    box-shadow: 0 22px 46px rgba(91, 33, 182, 0.14);

}



.channel-post-card__cover {

    width: 100%;

    height: 180px;

    object-fit: cover;

    border-radius: 18px;

    margin-bottom: 16px;

}



.channel-post-card__eyebrow {

    display: flex;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 12px;

    font-size: 0.84rem;

    color: var(--text-secondary);

}



.channel-chip {

    display: inline-flex;

    align-items: center;

    padding: 6px 10px;

    border-radius: 999px;

    background: rgba(124, 58, 237, 0.10);

    color: #6d28d9;

    font-weight: 600;

}



.channel-post-card h3 {

    margin-bottom: 10px;

    font-size: 1.16rem;

    line-height: 1.45;

}



.channel-post-card h3 a {

    color: var(--text-primary);

    text-decoration: none;

}



.channel-post-card h3 a:hover {

    color: #6d28d9;

}



.channel-post-card p {

    color: var(--text-secondary);

    margin-bottom: 14px;

}



.channel-post-card__author {

    margin-bottom: 14px;

}



.channel-author-inline {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: inherit;

    text-decoration: none;

    font-weight: 600;

}



.channel-author-inline img {

    width: 32px;

    height: 32px;

    border-radius: 50%;

    object-fit: cover;

}



.channel-post-card__tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.channel-tag {

    padding: 5px 10px;

    border-radius: 999px;

    background: rgba(124, 58, 237, 0.08);

    color: #7c3aed;

    font-size: 0.8rem;

}



.channel-post-card__footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 16px;

    padding-top: 14px;

    border-top: 1px solid rgba(124, 58, 237, 0.10);

}



.channel-post-card__metrics,

.channel-post-card__actions {

    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

}



.channel-post-card__metrics {

    color: var(--text-secondary);

    font-size: 0.86rem;

}



.channel-empty-state {

    padding: 28px;

    border-radius: 24px;

    text-align: center;

}



.channel-topic-cloud {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.channel-topic-cloud .detail-topic-chip,

#channelTrendingShortcuts .trend-chip {

    border: none;

    cursor: pointer;

}



.channel-author-link {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px;

    border-radius: 18px;

    text-decoration: none;

    color: inherit;

    border: 1px solid rgba(124, 58, 237, 0.08);

    background: rgba(124, 58, 237, 0.05);

    transition: var(--transition);

}



.channel-author-link:hover,

.channel-sibling-card:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow-light);

}



.channel-author-link img {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    object-fit: cover;

}



.channel-author-link__meta {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.channel-author-link__stats {

    font-size: 0.82rem;

    color: var(--text-secondary);

}



.channel-hub-panel {

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.channel-hub-primary {

    padding: 18px;

    border-radius: 22px;

    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(167, 139, 250, 0.08));

    border: 1px solid rgba(124, 58, 237, 0.14);

}



.channel-hub-primary__eyebrow {

    font-size: 0.76rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: #6d28d9;

    font-weight: 700;

}



.channel-hub-primary__title {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 10px 0;

    font-size: 1.05rem;

}



.channel-hub-primary__title i {

    width: 38px;

    height: 38px;

    border-radius: 14px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: rgba(255, 255, 255, 0.7);

    color: #6d28d9;

}



.channel-hub-primary p {

    margin: 0;

    color: var(--text-secondary);

    font-size: 0.92rem;

}



.channel-hub-primary__stats {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 14px;

}



.channel-hub-primary__stats span {

    padding: 8px 12px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.66);

    border: 1px solid rgba(124, 58, 237, 0.1);

    font-size: 0.82rem;

}



.channel-hub-actions {

    display: grid;

    gap: 12px;

}



.channel-hub-action-card {

    display: flex;

    flex-direction: column;

    gap: 4px;

    padding: 14px 16px;

    border-radius: 18px;

    text-decoration: none;

    color: inherit;

    border: 1px solid rgba(124, 58, 237, 0.12);

    background: rgba(124, 58, 237, 0.05);

    transition: var(--transition);

}



.channel-hub-action-card:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow-light);

}



.channel-hub-action-card span {

    color: var(--text-secondary);

    font-size: 0.88rem;

}



.channel-hub-list {

    margin-top: 2px;

}



.channel-load-more {

    display: grid;

    gap: 10px;

    justify-items: center;

}



.channel-load-state {

    margin: 0;

    font-size: 0.9rem;

    color: var(--text-secondary);

}



.channel-feed-sentinel {

    width: 100%;

    height: 1px;

}



.channel-sibling-card {

    text-decoration: none;

    color: inherit;

}



.channel-sibling-card.is-active {

    border-color: rgba(124, 58, 237, 0.24);

    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(139, 92, 246, 0.06));

}



body.dark-mode .channel-hero__main,

body.dark-mode .channel-hero__side .panel-card,

body.dark-mode .channel-featured-section,

body.dark-mode .channel-feed-toolbar,

body.dark-mode .channel-post-card,

body.dark-mode .channel-empty-state,

body.dark-mode .channel-author-link,

body.dark-mode .channel-sibling-card {

    background: rgba(22, 16, 46, 0.82);

    border-color: rgba(167, 139, 250, 0.16);

    color: #f5f3ff;

}



body.dark-mode .channel-post-card p,

body.dark-mode .channel-post-card__metrics,

body.dark-mode .channel-author-link__stats,

body.dark-mode .channel-hero__title-row p,

body.dark-mode .channel-sync-strip__copy p,

body.dark-mode .channel-hub-primary p,

body.dark-mode .channel-hub-action-card span,

body.dark-mode .channel-load-state {

    color: #c4b5fd;

}



body.dark-mode .channel-post-card h3 a,

body.dark-mode .channel-author-inline,

body.dark-mode .channel-author-link,

body.dark-mode .channel-hub-action-card,

body.dark-mode .channel-sync-chip,

body.dark-mode .channel-hub-primary__stats span {

    color: #f5f3ff;

}



body.dark-mode .channel-sync-strip,

body.dark-mode .channel-hub-primary,

body.dark-mode .channel-hub-action-card,

body.dark-mode .channel-sync-chip,

body.dark-mode .channel-hub-primary__stats span {

    background: rgba(49, 32, 92, 0.72);

    border-color: rgba(167, 139, 250, 0.18);

}



body.dark-mode .channel-hub-primary__title i {

    background: rgba(91, 33, 182, 0.34);

    color: #ddd6fe;

}



body.dark-mode .channel-chip,

body.dark-mode .channel-tag {

    background: rgba(167, 139, 250, 0.16);

    color: #ddd6fe;

}



body.dark-mode .channel-post-card__footer {

    border-color: rgba(167, 139, 250, 0.14);

}



@media (max-width: 1200px) {

    .channel-hero,

    .channel-layout,

    .channel-featured-grid,

    .channel-sync-strip,

    .feed-crosslink {

        grid-template-columns: 1fr;

    }



    .channel-hero__actions {

        flex-direction: row;

        flex-wrap: wrap;

        min-width: 0;

    }



    .channel-sync-strip__chips,

    .feed-crosslink__actions {

        justify-content: flex-start;

        justify-self: start;

    }

}



@media (max-width: 768px) {

    .channel-hero__title-row,

    .channel-post-card__footer {

        flex-direction: column;

        align-items: flex-start;

    }



    .channel-hero__actions,

    .channel-hero__actions .btn,

    .feed-crosslink__actions,

    .feed-crosslink__actions .btn {

        width: 100%;

    }



    .channel-sync-strip__chips,

    .feed-crosslink__chips {

        width: 100%;

    }



    .channel-stat-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (max-width: 560px) {

    .channel-hero__main,

    .channel-feed-toolbar,

    .channel-post-card,

    .channel-featured-section {

        padding: 18px;

    }



    .channel-stat-grid {

        grid-template-columns: 1fr;

    }

}



body.dark-mode {

    background:

        radial-gradient(circle at top left, rgba(124, 58, 237, 0.25), transparent 28%),

        radial-gradient(circle at top right, rgba(34, 197, 94, 0.18), transparent 20%),

        #0f0b1f;

    color: #f5f3ff;

}



body.dark-mode .header,

body.dark-mode .hero-banner__content,

body.dark-mode .hero-banner__panel,

body.dark-mode .panel-card,

body.dark-mode .quick-link-card,

body.dark-mode .community-card,

body.dark-mode .sidebar-section,

body.dark-mode .create-post,

body.dark-mode .feed-toolbar,

body.dark-mode .feed-crosslink,

body.dark-mode .posts-section,

body.dark-mode .stat-item,

body.dark-mode .announcement-highlight,

body.dark-mode .modal-content,

body.dark-mode #hotPostsList .post,

body.dark-mode #financePostsList .post,

body.dark-mode #latestPostsList .post,

body.dark-mode .search-box,

body.dark-mode .theme-toggle,

body.dark-mode .btn-secondary {

    background: rgba(22, 16, 46, 0.82);

    border-color: rgba(167, 139, 250, 0.16);

    color: #f5f3ff;

}



body.dark-mode .logo,

body.dark-mode .main-nav a,

body.dark-mode .theme-toggle,

body.dark-mode .section-header h2,

body.dark-mode .post-meta h4,

body.dark-mode .post-content h3,

body.dark-mode .footer,

body.dark-mode .footer a,

body.dark-mode .footer p,

body.dark-mode .footer .logo span,

body.dark-mode .form-group label {

    color: #f5f3ff;

}



body.dark-mode .post-content p,

body.dark-mode .hero-banner__content p,

body.dark-mode .metric-label,

body.dark-mode .metric-meta,

body.dark-mode .panel-card__header span,

body.dark-mode .section-title-row span,

body.dark-mode .topic-count,

body.dark-mode .feed-toolbar__meta,

body.dark-mode .feed-crosslink__copy p,

body.dark-mode .feed-crosslink__chip span,

body.dark-mode .search-box input,

body.dark-mode .announcement-highlight p,

body.dark-mode .bullet-list,

body.dark-mode .community-card p,

body.dark-mode .community-card__items span,

body.dark-mode .section-link--muted,

body.dark-mode .stat-label,

body.dark-mode .post-time,

body.dark-mode .footer-links a,

body.dark-mode .footer-info p,

body.dark-mode .checkbox-label,

body.dark-mode .forgot-password {

    color: #c4b5fd;

}



body.dark-mode .post-category,

body.dark-mode .hero-badge,

body.dark-mode .quick-link-card i,

body.dark-mode .community-card__items div,

body.dark-mode .feed-tab,

body.dark-mode .feed-sort,

body.dark-mode .action-btn,

body.dark-mode .topic-rank,

body.dark-mode .loading-state,

body.dark-mode .feed-empty,

body.dark-mode .feed-crosslink__chip {

    background: rgba(124, 58, 237, 0.16);

    border-color: rgba(167, 139, 250, 0.16);

}



body.dark-mode input,

body.dark-mode textarea,

body.dark-mode select {

    background: rgba(15, 11, 31, 0.7);

    border-color: rgba(167, 139, 250, 0.18);

    color: #f5f3ff;

}



body.dark-mode .main-nav a:hover,

body.dark-mode .main-nav a.active,

body.dark-mode .post-action:hover {

    background: rgba(124, 58, 237, 0.16);

}



@media (max-width: 1200px) {

    .hero-banner {

        grid-template-columns: 1fr;

    }



    .hero-metrics {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (max-width: 1024px) {

    .hero-banner__content,

    .hero-banner__panel,

    .feed-toolbar,

    .posts-section {

        padding: 24px;

    }



    .sidebar-left,

    .sidebar-right {

        display: none;

    }



    .main-nav {

        position: absolute;

        top: calc(100% + 12px);

        left: 20px;

        right: 20px;

        display: none;

        padding: 14px;

        border-radius: 20px;

        background: rgba(255, 255, 255, 0.92);

        border: 1px solid rgba(124, 58, 237, 0.12);

        box-shadow: var(--shadow-light);

    }



    .main-nav.is-open {

        display: block;

    }



    body.dark-mode .main-nav {

        background: rgba(22, 16, 46, 0.96);

    }



    .main-nav ul {

        flex-direction: column;

        align-items: stretch;

    }

}



@media (max-width: 768px) {

    .hero-banner__content h1 {

        font-size: 2rem;

    }



    .hero-metrics {

        grid-template-columns: 1fr;

    }



    .community-card__items {

        grid-template-columns: 1fr;

    }



    .header-actions {

        gap: 8px;

    }



    .theme-toggle span,

    .btn-secondary,

    #registerBtn {

        display: none;

    }



    .search-box {

        flex-wrap: wrap;

        gap: 12px;

        min-height: auto;

        padding: 14px 16px;

        border-radius: 20px;

    }



    .search-box input {

        min-width: 100%;

        font-size: 16px;

    }



    .search-btn {

        width: 100%;

        min-height: 42px;

        display: inline-flex;

        align-items: center;

        justify-content: center;

    }



    .hero-actions .btn,

    .load-more .btn {

        width: 100%;

        justify-content: center;

    }



    .toast-container {

        left: 16px;

        right: 16px;

        top: 84px;

    }



    .toast {

        min-width: 0;

        max-width: none;

    }

}



.auth-actions {

    display: inline-flex;

    align-items: center;

    gap: 10px;

}



.header-user-menu {

    display: inline-flex;

    align-items: center;

    gap: 12px;

}



.user-chip {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 8px 12px;

    border-radius: 999px;

    border: 1px solid rgba(124, 58, 237, 0.14);

    background: rgba(255, 255, 255, 0.82);

}



.user-chip img,

.composer-identity img {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    object-fit: cover;

}



.user-chip strong,

.user-chip span,

.composer-user strong,

.composer-user span {

    display: block;

}



.user-chip strong,

.composer-user strong {

    font-size: 0.95rem;

    color: var(--text-primary);

}



.user-chip span,

.composer-user span,

.composer-tip,

.data-mode-badge {

    font-size: 0.84rem;

    color: var(--text-secondary);

}



.composer-identity {

    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 190px;

    padding-top: 6px;

}



.composer-user {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.composer-tip {

    margin: -2px 0 0;

}



.feed-toolbar__status {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

}



.feed-crosslink {

    display: grid;

    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto;

    gap: 16px;

    align-items: center;

    padding: 18px 20px;

    border-radius: 24px;

    border: 1px solid rgba(124, 58, 237, 0.14);

    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(59, 130, 246, 0.08));

}



.feed-crosslink.is-passive {

    background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(148, 163, 184, 0.08));

}



.feed-crosslink__copy {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.feed-crosslink__eyebrow {

    font-size: 0.76rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: #6d28d9;

    font-weight: 700;

}



.feed-crosslink__copy p {

    margin: 0;

    color: var(--text-secondary);

    font-size: 0.92rem;

}



.feed-crosslink__chips {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.feed-crosslink__chip {

    display: inline-flex;

    flex-direction: column;

    gap: 4px;

    min-width: 90px;

    padding: 10px 12px;

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.64);

    border: 1px solid rgba(124, 58, 237, 0.12);

}



.feed-crosslink__chip span {

    font-size: 0.72rem;

    color: var(--text-secondary);

}



.feed-crosslink__chip strong {

    font-size: 0.92rem;

}



.feed-crosslink__actions {

    justify-self: end;

}



.data-mode-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 38px;

    padding: 0 14px;

    border-radius: 999px;

    border: 1px solid rgba(124, 58, 237, 0.12);

    background: rgba(124, 58, 237, 0.08);

    font-weight: 600;

}



.data-mode-badge[data-mode="live"] {

    color: #15803d;

    background: rgba(34, 197, 94, 0.12);

    border-color: rgba(34, 197, 94, 0.22);

}



.data-mode-badge[data-mode="fallback"] {

    color: var(--primary-color);

}



.hero-badge.is-live {

    color: #15803d;

    background: rgba(34, 197, 94, 0.12);

}



.ranked-topics .loading-state {

    padding: 20px 16px;

}



body.dark-mode .user-chip {

    background: rgba(22, 16, 46, 0.82);

    border-color: rgba(167, 139, 250, 0.16);

}



body.dark-mode .user-chip strong,

body.dark-mode .composer-user strong {

    color: #f5f3ff;

}



body.dark-mode .user-chip span,

body.dark-mode .composer-user span,

body.dark-mode .composer-tip,

body.dark-mode .data-mode-badge {

    color: #c4b5fd;

}



body.dark-mode .data-mode-badge[data-mode="live"] {

    color: #86efac;

    background: rgba(34, 197, 94, 0.14);

    border-color: rgba(34, 197, 94, 0.26);

}



body.dark-mode .category-link-card,

body.dark-mode .user-list__item,

body.dark-mode .user-list__action,

body.dark-mode .announcement-highlight--leaderboard,

body.dark-mode .leaderboard-metrics span {

    background: rgba(22, 16, 46, 0.82);

    border-color: rgba(167, 139, 250, 0.16);

}



body.dark-mode .leaderboard-rank {

    color: #ede9fe;

    background: linear-gradient(135deg, rgba(124, 58, 237, 0.34), rgba(167, 139, 250, 0.28));

}



body.dark-mode .leaderboard-entry[data-rank="1"] .leaderboard-rank {

    background: linear-gradient(135deg, rgba(124, 58, 237, 0.34), rgba(250, 204, 21, 0.28));

}



body.dark-mode .leaderboard-chip,

body.dark-mode .announcement__badge {

    color: #ddd6fe;

}



body.dark-mode .leaderboard-chip {

    background: rgba(124, 58, 237, 0.18);

}



body.dark-mode .announcement__badge {

    background: rgba(34, 197, 94, 0.18);

    color: #86efac;

}



body.dark-mode .category-link-card__content strong,

body.dark-mode .user-list__title-row strong,

body.dark-mode .announcement h4,

body.dark-mode .announcement h4 a,

body.dark-mode .leaderboard-heading strong,

body.dark-mode .leaderboard-metrics strong {

    color: #f5f3ff;

}



body.dark-mode .category-link-card__meta,

body.dark-mode .user-list__title-row span,

body.dark-mode .user-list__main p,

body.dark-mode .announcement__meta,

body.dark-mode .announcement__footer,

body.dark-mode .category-link-card__footer,

body.dark-mode .leaderboard-note,

body.dark-mode .leaderboard-subtitle,

body.dark-mode .leaderboard-metrics span {

    color: #c4b5fd;

}



body.dark-mode .leaderboard-bar {

    background: rgba(167, 139, 250, 0.16);

}



body.dark-mode .leaderboard-bar span {

    background: linear-gradient(90deg, #8b5cf6, #c4b5fd);

}



body.dark-mode .user-list__action {

    color: #c4b5fd;

}



body.dark-mode .leaderboard-panel__eyebrow {

    background: rgba(30, 41, 59, 0.9);

    border-color: rgba(167, 139, 250, 0.18);

    color: #ddd6fe;

}



body.dark-mode .author-leaderboard-summary,

body.dark-mode .user-list__item--author-card,

body.dark-mode .user-list__item--author-compact {

    background: rgba(22, 16, 46, 0.9);

    border-color: rgba(167, 139, 250, 0.16);

}



body.dark-mode .author-leaderboard-summary strong,

body.dark-mode .author-featured__heading strong,

body.dark-mode .author-featured__score strong,

body.dark-mode .user-list__compact-head strong,

body.dark-mode .author-row__metrics strong {

    color: #f5f3ff;

}



body.dark-mode .author-leaderboard-summary span,

body.dark-mode .author-featured__eyebrow,

body.dark-mode .author-featured__bio,

body.dark-mode .author-featured__score span,

body.dark-mode .author-featured__meta span,

body.dark-mode .user-list__compact-main p,

body.dark-mode .author-row__metrics span,

body.dark-mode .author-row__metrics em,

body.dark-mode .leaderboard-metrics--author-board em,

body.dark-mode .user-list__compact-arrow,

body.dark-mode .leaderboard-chip--soft {

    color: #c4b5fd;

}



body.dark-mode .author-featured__meta span,

body.dark-mode .leaderboard-chip--soft,

body.dark-mode .author-row__metrics span,

body.dark-mode .author-featured__score,

body.dark-mode .author-featured__avatar,

body.dark-mode .author-row__avatar {

    background: rgba(124, 58, 237, 0.16);

}



body.dark-mode .author-row__note {

    color: rgba(226, 232, 240, 0.72);

}



body.dark-mode .author-leaderboard-summary::before {

    background: linear-gradient(180deg, #8b5cf6, #c4b5fd);

}



body.dark-mode .user-list__featured-head,

body.dark-mode .author-featured__score {

    border-color: rgba(167, 139, 250, 0.14);

}



body.dark-mode .leaderboard-bar--glow {

    background: rgba(167, 139, 250, 0.18);

}



@media (max-width: 768px) {

    .auth-actions,

    .header-user-menu {

        width: 100%;

        justify-content: flex-end;

    }



    .header-user-menu {

        flex-wrap: wrap;

    }



    .composer-identity {

        width: 100%;

    }



    .feed-toolbar__status {

        width: 100%;

        justify-content: space-between;

    }



    .leaderboard-entry {

        flex-direction: column;

    }



    .leaderboard-footer,

    .leaderboard-heading,

    .user-list__hero,

    .user-list__title-row {

        flex-direction: column;

        align-items: flex-start;

    }



    .user-list__featured-head {

        grid-template-columns: 1fr;

    }



    .author-featured__identity,

    .user-list__compact-head,

    .author-row__bottom,

    .author-featured__footer {

        flex-direction: column;

        align-items: flex-start;

    }



    .leaderboard-metrics,

    .leaderboard-metrics--compact,

    .leaderboard-metrics--author-board,

    .author-row__metrics {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .user-list__item--author-card,

    .user-list__item--author-compact {

        padding: 16px;

    }



    .author-featured__score {

        min-width: 0;

        margin-left: 0;

        align-items: flex-start;

    }



    .leaderboard-panel__eyebrow,

    .user-list__compact-arrow,

    .author-featured__link {

        white-space: normal;

    }



    .announcement-highlight--leaderboard {

        padding: 16px;

    }

}



/* 帖子详情页 */

.post-detail-page .main-content {

    padding-top: 8px;

}



.detail-hero {

    display: grid;

    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);

    gap: 22px;

    margin-bottom: 26px;

}



.detail-hero__main {

    position: relative;

    overflow: hidden;

    border-radius: 28px;

    padding: 30px;

    background: rgba(255, 255, 255, 0.82);

    border: 1px solid rgba(255, 255, 255, 0.56);

    box-shadow: var(--shadow-light);

    backdrop-filter: blur(16px);

}



.detail-hero__main::after {

    content: '';

    position: absolute;

    right: -80px;

    top: -70px;

    width: 240px;

    height: 240px;

    border-radius: 50%;

    background: radial-gradient(circle, rgba(124, 58, 237, 0.18), transparent 66%);

}



.detail-breadcrumb,

.detail-status-row,

.detail-author-inline__meta,

.detail-author-meta,

.detail-comments__summary {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

}



.detail-breadcrumb {

    margin-bottom: 14px;

    color: var(--text-secondary);

    font-size: 0.92rem;

}



.detail-breadcrumb a {

    color: var(--primary-color);

    text-decoration: none;

}



.detail-status-row {

    margin-bottom: 18px;

}



.detail-publish-status {

    color: var(--text-secondary);

    font-size: 0.9rem;

}



.detail-hero__main h1 {

    font-size: clamp(2rem, 4vw, 3rem);

    line-height: 1.15;

    margin-bottom: 14px;

    max-width: 840px;

}



.detail-hero__main > p {

    color: var(--text-secondary);

    font-size: 1.02rem;

    max-width: 760px;

}



.detail-hero__meta {

    margin-top: 28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    flex-wrap: wrap;

}



.detail-author-inline,

.detail-comment-author,

.comment-form-card__user,

.detail-author-card__header {

    display: flex;

    align-items: center;

    gap: 14px;

}



.detail-author-inline img,

.detail-author-card__header img,

.detail-comment-author img,

.comment-form-card__user img {

    border-radius: 50%;

    object-fit: cover;

}



.detail-author-inline img {

    width: 56px;

    height: 56px;

}



.detail-author-inline__meta,

.detail-comment-author span,

.detail-author-card__bio,

.detail-callout-card p,

.detail-insight-item span,

.detail-related-item span,

.detail-comments__summary,

.detail-comments__header p {

    color: var(--text-secondary);

}



.detail-hero__metrics {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 12px;

}



.detail-mini-metric,

.detail-insight-item {

    border-radius: 18px;

    padding: 16px;

    background: rgba(124, 58, 237, 0.06);

    border: 1px solid rgba(124, 58, 237, 0.10);

}



.detail-mini-metric span,

.detail-insight-item span {

    display: block;

    font-size: 0.86rem;

    margin-bottom: 8px;

}



.detail-mini-metric strong,

.detail-insight-item strong {

    font-family: 'Poppins', sans-serif;

    font-size: 1.25rem;

}



.detail-hero__side {

    display: flex;

    align-items: stretch;

}



.detail-callout-card {

    width: 100%;

    border-radius: 28px;

}



.detail-callout-actions {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 20px;

}



.detail-layout {

    grid-template-columns: 280px minmax(0, 1fr) 300px;

    gap: 22px;

}



.detail-sidebar-left,

.detail-sidebar-right {

    position: sticky;

    top: 96px;

}



.detail-post-card,

.detail-comments-section {

    border-radius: 24px;

}



.detail-cover {

    margin-bottom: 22px;

}



.detail-cover img {

    width: 100%;

    display: block;

    border-radius: 22px;

    aspect-ratio: 16 / 9;

    object-fit: cover;

}



.detail-content {

    display: flex;

    flex-direction: column;

    gap: 16px;

    color: var(--text-primary);

    font-size: 1rem;

    line-height: 1.85;

}



.detail-content p {

    color: inherit;

}



.detail-tags {

    margin-top: 18px;

}



.detail-action-bar {

    margin-top: 24px;

    padding-top: 22px;

    border-top: 1px solid rgba(124, 58, 237, 0.10);

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 12px;

}



.detail-action-bar .post-action {

    width: 100%;

    justify-content: space-between;

    background: rgba(255, 255, 255, 0.72);

    border: 1px solid rgba(124, 58, 237, 0.12);

}



.detail-action-bar .post-action strong {

    font-family: 'Poppins', sans-serif;

    font-size: 0.95rem;

}



.detail-author-card__header {

    margin-bottom: 14px;

}



.detail-author-card__header img {

    width: 64px;

    height: 64px;

}



.detail-author-card__header h3,

.detail-comments__header h2 {

    margin-bottom: 4px;

    font-size: 1.28rem;

}



.detail-author-stats,

.detail-insight-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 12px;

}



.detail-author-stats {

    margin: 18px 0;

}



.detail-author-stats div {

    border-radius: 18px;

    padding: 14px;

    text-align: center;

    background: rgba(124, 58, 237, 0.06);

    border: 1px solid rgba(124, 58, 237, 0.10);

}



.detail-author-stats strong,

.detail-author-stats span {

    display: block;

}



.detail-author-stats strong {

    font-family: 'Poppins', sans-serif;

    margin-bottom: 6px;

}



.detail-author-meta {

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

    font-size: 0.92rem;

}



.detail-guideline-card .bullet-list {

    margin-top: 4px;

}



.detail-comments__header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 18px;

    margin-bottom: 18px;

}



.comment-form-card {

    border-radius: 22px;

    padding: 20px;

    margin-bottom: 18px;

    background: rgba(124, 58, 237, 0.04);

    border: 1px solid rgba(124, 58, 237, 0.10);

}



.comment-form-card textarea {

    width: 100%;

    min-height: 140px;

    resize: vertical;

    margin: 18px 0 14px;

    padding: 16px 18px;

    border-radius: 18px;

    border: 1px solid rgba(124, 58, 237, 0.12);

    font-family: inherit;

    font-size: 1rem;

    outline: none;

    transition: var(--transition);

}



.comment-form-card textarea:focus {

    border-color: rgba(124, 58, 237, 0.36);

    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.10);

}



.comment-form-card textarea:disabled {

    cursor: not-allowed;

    opacity: 0.72;

}



.comment-form-card__actions {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    flex-wrap: wrap;

}



#commentsSection {

    scroll-margin-top: 108px;

}



.detail-comments-list,

.detail-comments-skeleton {

    display: flex;

    flex-direction: column;

    gap: 14px;

}



.detail-comment-card--skeleton {

    pointer-events: none;

}



.detail-comment-skeleton__header,

.detail-comment-skeleton__author {

    display: flex;

    align-items: center;

    gap: 12px;

}



.detail-comment-skeleton__header {

    justify-content: space-between;

    margin-bottom: 16px;

}



.detail-comment-skeleton__author {

    flex: 1;

    min-width: 0;

}



.detail-comment-skeleton__avatar {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    flex-shrink: 0;

}



.detail-comment-skeleton__meta,

.detail-comment-skeleton__content {

    display: grid;

    gap: 8px;

}



.detail-comment-skeleton__meta {

    flex: 1;

}



.detail-comment-skeleton__title {

    width: 132px;

    height: 12px;

}



.detail-comment-skeleton__subtitle {

    width: 84px;

    height: 10px;

}



.detail-comment-skeleton__badge {

    width: 78px;

    height: 28px;

}



.detail-comment-skeleton__line {

    height: 12px;

}



.detail-comment-skeleton__line--long {

    width: 100%;

}



.detail-comment-skeleton__line--mid {

    width: 82%;

}



.detail-comment-skeleton__line--short {

    width: 58%;

}



.detail-comments-load-more {

    display: grid;

    gap: 10px;

    justify-items: center;

    margin-top: 18px;

}



.detail-comments-load-state {

    margin: 0;

    font-size: 0.9rem;

    color: var(--text-secondary);

    text-align: center;

}



.detail-comments-sentinel {

    width: 100%;

    height: 1px;

}



.detail-comment-card,

.detail-comment-reply,

.detail-related-item,

.detail-topic-chip {

    border: 1px solid rgba(124, 58, 237, 0.10);

}



.detail-comment-card {

    border-radius: 22px;

    padding: 18px;

    background: rgba(255, 255, 255, 0.78);

}



.detail-comment-card__header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 14px;

}



.detail-comment-card__badge {

    border-radius: 999px;

    padding: 6px 10px;

    font-size: 0.82rem;

    font-weight: 600;

    color: var(--primary-color);

    background: rgba(124, 58, 237, 0.10);

}



.detail-comment-author img,

.comment-form-card__user img {

    width: 44px;

    height: 44px;

}



.detail-comment-author strong,

.comment-form-card__user strong {

    display: block;

    margin-bottom: 2px;

}



.detail-comment-card__content,

.detail-comment-reply p {

    color: var(--text-primary);

    line-height: 1.78;

}



.detail-comment-replies-toggle {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 14px;

    padding: 8px 14px;

    border-radius: 999px;

    border: 1px solid rgba(124, 58, 237, 0.12);

    background: rgba(124, 58, 237, 0.08);

    color: var(--primary-color);

    font-size: 0.88rem;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);

}



.detail-comment-replies-toggle:hover,

.detail-comment-replies-toggle:focus-visible {

    transform: translateY(-1px);

    box-shadow: var(--shadow-light);

}



.detail-comment-replies {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 14px;

    padding-top: 14px;

    border-top: 1px dashed rgba(124, 58, 237, 0.16);

}



.detail-comment-replies[hidden] {

    display: none;

}



.detail-comment-reply {

    border-radius: 18px;

    padding: 14px;

    background: rgba(124, 58, 237, 0.04);

}



.detail-comment-reply .detail-comment-author {

    margin-bottom: 10px;

}



.detail-topic-chips {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.detail-topic-chip {

    border-radius: 999px;

    padding: 9px 14px;

    background: rgba(255, 255, 255, 0.76);

    color: var(--text-primary);

    cursor: pointer;

    transition: var(--transition);

}



.detail-topic-chip:hover,

.detail-related-item:hover {

    transform: translateY(-1px);

    box-shadow: var(--shadow-light);

}



.detail-related-list {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.detail-related-item {

    display: flex;

    flex-direction: column;

    gap: 8px;

    padding: 16px;

    border-radius: 18px;

    background: rgba(124, 58, 237, 0.05);

    text-decoration: none;

    color: inherit;

}



.detail-related-item__category {

    font-size: 0.82rem;

    color: var(--primary-color);

    font-weight: 600;

}



.detail-mini-list {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.detail-mini-link,

.detail-author-link {

    width: 100%;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 14px;

    border-radius: 18px;

    border: 1px solid rgba(124, 58, 237, 0.10);

    background: rgba(124, 58, 237, 0.05);

    color: inherit;

    text-decoration: none;

    text-align: left;

    transition: var(--transition);

}



.detail-mini-link--button {

    cursor: pointer;

}



.detail-mini-link--static {

    cursor: default;

}



.detail-mini-link:hover,

.detail-author-link:hover {

    transform: translateY(-1px);

    box-shadow: var(--shadow-light);

}



.detail-mini-link strong,

.detail-author-link strong {

    display: block;

    color: var(--text-primary);

}



.detail-mini-link span,

.detail-author-link span {

    display: block;

    margin-top: 4px;

    font-size: 0.84rem;

    color: var(--text-secondary);

}



.detail-author-link {

    align-items: center;

    cursor: pointer;

}



.detail-author-link img {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    object-fit: cover;

}



.detail-author-link__main {

    flex: 1;

}



.detail-mini-link--announcement {

    align-items: center;

}



.detail-mini-link__rank {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    border-radius: 14px;

    background: linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(167, 139, 250, 0.24));

    color: #6d28d9;

    font-family: 'Poppins', sans-serif;

    font-size: 0.86rem;

    font-weight: 700;

    flex-shrink: 0;

}



.detail-mini-link__content {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.detail-mini-link--announcement.is-current {

    border-color: rgba(34, 197, 94, 0.24);

    background: rgba(34, 197, 94, 0.08);

}



.detail-related-item--compact strong,

.detail-related-item--featured strong {

    line-height: 1.6;

}



.detail-related-item--featured {

    position: relative;

    overflow: hidden;

}



.detail-related-item--featured::after {

    content: '';

    position: absolute;

    inset: auto 0 0;

    height: 3px;

    background: linear-gradient(90deg, #7c3aed, #22c55e);

}



.detail-section-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: 14px;

    padding: 10px 14px;

    border-radius: 999px;

    border: 1px solid rgba(124, 58, 237, 0.14);

    background: rgba(124, 58, 237, 0.06);

    color: var(--primary-color);

    text-decoration: none;

    font-size: 0.84rem;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);

}



.detail-section-link:hover {

    transform: translateY(-1px);

    box-shadow: var(--shadow-light);

}



.detail-section-link--button {

    width: 100%;

}



.detail-section-link--inline {

    margin-top: 10px;

    padding: 8px 12px;

    font-size: 0.8rem;

}



body.dark-mode .detail-hero__main,

body.dark-mode .detail-callout-card,

body.dark-mode .detail-comment-card,

body.dark-mode .comment-form-card,

body.dark-mode .detail-mini-metric,

body.dark-mode .detail-insight-item,

body.dark-mode .detail-author-stats div,

body.dark-mode .detail-topic-chip,

body.dark-mode .detail-related-item,

body.dark-mode .detail-mini-link,

body.dark-mode .detail-author-link,

body.dark-mode .detail-action-bar .post-action,

body.dark-mode .detail-comment-reply,

body.dark-mode .detail-section-link {

    background: rgba(22, 16, 46, 0.82);

    border-color: rgba(167, 139, 250, 0.16);

    color: #f5f3ff;

}



body.dark-mode .detail-mini-link__rank {

    background: linear-gradient(135deg, rgba(124, 58, 237, 0.34), rgba(167, 139, 250, 0.28));

    color: #ede9fe;

}



body.dark-mode .detail-mini-link--announcement.is-current {

    border-color: rgba(34, 197, 94, 0.26);

    background: rgba(34, 197, 94, 0.12);

}



body.dark-mode .detail-hero__main > p,

body.dark-mode .detail-author-inline__meta,

body.dark-mode .detail-publish-status,

body.dark-mode .detail-author-card__bio,

body.dark-mode .detail-author-meta,

body.dark-mode .detail-comments__summary,

body.dark-mode .detail-comments__header p,

body.dark-mode .detail-related-item span,

body.dark-mode .detail-mini-link span,

body.dark-mode .detail-author-link span,

body.dark-mode .detail-comment-author span,

body.dark-mode .detail-callout-card p,

body.dark-mode .detail-section-link,

body.dark-mode #commentModeHint,

body.dark-mode #commentComposerHint {

    color: #c4b5fd;

}



body.dark-mode .detail-topic-chip {

    color: #f5f3ff;

}



body.dark-mode .detail-topic-chip:hover,

body.dark-mode .detail-related-item:hover,

body.dark-mode .detail-mini-link:hover,

body.dark-mode .detail-author-link:hover,

body.dark-mode .detail-action-bar .post-action:hover {

    background: rgba(124, 58, 237, 0.18);

}



body.dark-mode .detail-comment-card__content,

body.dark-mode .detail-comment-reply p,

body.dark-mode .detail-hero__main h1,

body.dark-mode .detail-content,

body.dark-mode .detail-author-card__header h3,

body.dark-mode .detail-comments__header h2,

body.dark-mode .detail-mini-link strong,

body.dark-mode .detail-author-link strong {

    color: #f5f3ff;

}



body.dark-mode .detail-comment-card--skeleton {

    background: rgba(15, 23, 42, 0.78);

}



body.dark-mode .detail-comment-replies-toggle {

    border-color: rgba(167, 139, 250, 0.24);

    background: rgba(124, 58, 237, 0.18);

    color: #ddd6fe;

}



body.dark-mode .detail-comments-load-state {

    color: #c4b5fd;

}



@media (max-width: 1200px) {

    .detail-hero,

    .detail-layout {

        grid-template-columns: 1fr;

    }



    .detail-sidebar-left,

    .detail-sidebar-right {

        position: static;

        top: auto;

    }

}



@media (max-width: 768px) {

    .detail-hero__main,

    .detail-callout-card,

    .detail-post-card,

    .detail-comments-section {

        padding: 22px;

    }



    .detail-hero__meta,

    .detail-comments__header,

    .comment-form-card__actions {

        flex-direction: column;

        align-items: flex-start;

    }



    .detail-hero__metrics,

    .detail-author-stats,

    .detail-insight-grid,

    .detail-action-bar {

        grid-template-columns: 1fr 1fr;

    }



    .detail-callout-actions .btn,

    .comment-form-card__actions .btn {

        width: 100%;

        justify-content: center;

    }



    .detail-comment-card__header,

    .detail-mini-link--announcement,

    .detail-author-link {

        flex-direction: column;

        align-items: flex-start;

    }



    .detail-section-link {

        width: 100%;

    }

}



@media (max-width: 520px) {

    .detail-hero__metrics,

    .detail-author-stats,

    .detail-insight-grid,

    .detail-action-bar {

        grid-template-columns: 1fr;

    }



    .detail-hero__main,

    .detail-callout-card,

    .detail-post-card,

    .detail-comments-section {

        padding: 20px;

    }

}



@media (prefers-reduced-motion: reduce) {

    *,

    *::before,

    *::after {

        animation: none !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }

}



.profile-shell-card {

    background: rgba(255, 255, 255, 0.82);

    border: 1px solid rgba(124, 58, 237, 0.10);

    box-shadow: var(--shadow-light);

    border-radius: 24px;

    backdrop-filter: blur(18px);

}



.profile-header-actions {

    align-items: center;

}



.header-user-label {

    display: inline-flex;

    align-items: center;

    min-height: 42px;

    padding: 0 16px;

    border-radius: 999px;

    background: rgba(124, 58, 237, 0.08);

    color: var(--text-primary);

    font-weight: 600;

    white-space: nowrap;

}



.profile-toolbar,

.notification-hero {

    display: grid;

    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);

    gap: 24px;

    padding: 32px;

    margin-bottom: 28px;

}



.profile-toolbar__eyebrow {

    margin-bottom: 10px;

    font-size: 0.9rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--primary-color);

}



.profile-toolbar h1,

.notification-hero h1 {

    margin: 0 0 12px;

    font-size: clamp(1.9rem, 2.8vw, 2.8rem);

    line-height: 1.15;

    color: var(--text-primary);

}



.profile-toolbar__desc {

    color: var(--text-secondary);

    line-height: 1.75;

    max-width: 760px;

}



.profile-highlights,

.notification-summary-grid {

    display: grid;

    gap: 16px;

}



.profile-highlight,

.notification-summary-card {

    padding: 18px 20px;

    border-radius: 20px;

    background: rgba(124, 58, 237, 0.08);

    border: 1px solid rgba(124, 58, 237, 0.12);

}



.profile-highlight span,

.notification-summary-card span {

    display: block;

    margin-bottom: 10px;

    color: var(--text-secondary);

    font-size: 0.92rem;

}



.profile-highlight strong,

.notification-summary-card strong {

    display: block;

    margin-bottom: 6px;

    font-size: 2rem;

    color: var(--text-primary);

}



.notification-summary-card p {

    margin: 0;

    color: var(--text-secondary);

    line-height: 1.6;

}



.profile-sidebar {

    background: rgba(255, 255, 255, 0.82);

}



.profile-sidebar-actions {

    display: grid;

    gap: 12px;

    margin-bottom: 26px;

}



.profile-sidebar-actions .btn {

    width: 100%;

    justify-content: center;

}



.section-subtitle {

    color: var(--text-secondary);

    font-size: 0.95rem;

}



.status-chip {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 6px 12px;

    border-radius: 999px;

    font-size: 0.82rem;

    font-weight: 700;

    letter-spacing: 0.02em;

}



.status-chip--success {

    color: #0f766e;

    background: rgba(45, 212, 191, 0.18);

}



.status-chip--muted {

    color: var(--text-secondary);

    background: rgba(111, 99, 168, 0.12);

}



.status-chip--accent {

    color: #92400e;

    background: rgba(251, 191, 36, 0.22);

}



.post-manage-card .post-footer--manage {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    flex-wrap: wrap;

}



.post-manage-card .post-footer--manage > span {

    color: var(--text-secondary);

    font-size: 0.95rem;

}



.post-footer__actions {

    display: flex;

    gap: 10px;

    margin-left: auto;

}



.resource-list--cards {

    display: grid;

    gap: 16px;

    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

}



.saved-post-card {

    padding: 22px;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.76);

    border: 1px solid rgba(124, 58, 237, 0.10);

    box-shadow: var(--shadow-light);

}



.saved-post-card__top,

.saved-post-card__footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    flex-wrap: wrap;

}



.saved-post-card__top {

    margin-bottom: 12px;

}



.saved-post-card h3 {

    margin-bottom: 10px;

    font-size: 1.08rem;

}



.saved-post-card h3 a {

    color: var(--text-primary);

    text-decoration: none;

}



.saved-post-card h3 a:hover {

    color: var(--primary-color);

}



.saved-post-card p,

.saved-post-card__meta,

.saved-post-card__footer {

    color: var(--text-secondary);

    line-height: 1.7;

}



.saved-post-card__footer {

    margin-top: 14px;

    font-size: 0.92rem;

}



.settings-grid {

    display: grid;

    gap: 18px;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

}



.setting-panel {

    padding: 22px;

    border-radius: 20px;

    background: rgba(124, 58, 237, 0.05);

    border: 1px solid rgba(124, 58, 237, 0.10);

}



.setting-panel h3 {

    margin-bottom: 10px;

}



.setting-panel p {

    color: var(--text-secondary);

    line-height: 1.7;

    margin-bottom: 18px;

}



.setting-panel__actions {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}



.danger-panel {

    background: rgba(255, 59, 48, 0.06);

    border-color: rgba(255, 59, 48, 0.12);

}



.notification-page {

    padding: 30px 0 60px;

    min-height: calc(100vh - 144px);

}



.notification-center {

    padding: 28px;

}



.notification-center__toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 20px;

    flex-wrap: wrap;

}



.notification-filters {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}



.notification-filter {

    border: 1px solid rgba(124, 58, 237, 0.14);

    background: rgba(255, 255, 255, 0.78);

    color: var(--text-primary);

    padding: 10px 16px;

    border-radius: 999px;

    cursor: pointer;

    font-weight: 600;

    transition: var(--transition);

}



.notification-filter:hover,

.notification-filter.active {

    background: rgba(124, 58, 237, 0.10);

    color: var(--primary-color);

    border-color: rgba(124, 58, 237, 0.24);

}



.notification-center__meta {

    color: var(--text-secondary);

    font-size: 0.95rem;

}



.notification-list {

    display: flex;

    flex-direction: column;

    gap: 14px;

}



.notification-item {

    display: grid;

    grid-template-columns: 64px minmax(0, 1fr);

    gap: 18px;

    padding: 22px;

    border-radius: 22px;

    border: 1px solid rgba(124, 58, 237, 0.12);

    background: rgba(255, 255, 255, 0.74);

    transition: var(--transition);

}



.notification-item.is-unread {

    box-shadow: 0 18px 40px rgba(124, 58, 237, 0.10);

}



.notification-item:hover {

    transform: translateY(-1px);

    box-shadow: var(--shadow-light);

}



.notification-item__icon {

    width: 64px;

    height: 64px;

    border-radius: 20px;

    background: rgba(124, 58, 237, 0.08);

    color: var(--primary-color);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.4rem;

    overflow: hidden;

}



.notification-item__icon img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.notification-item__header,

.notification-item__footer,

.notification-item__meta,

.notification-item__actions {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    flex-wrap: wrap;

}



.notification-item__header {

    margin-bottom: 10px;

}



.notification-item__header h3 {

    margin: 10px 0 0;

    color: var(--text-primary);

    font-size: 1.08rem;

}



.notification-item__content p {

    margin: 0 0 14px;

    color: var(--text-secondary);

    line-height: 1.75;

}



.notification-item__time {

    color: var(--text-secondary);

    font-size: 0.92rem;

    text-align: right;

}



.notification-item__read {

    display: block;

    margin-top: 6px;

}



.notification-item__read--strong {

    color: var(--primary-color);

    font-weight: 700;

}



.notification-item__meta {

    color: var(--text-secondary);

    font-size: 0.92rem;

}



.notification-item__meta span {

    display: inline-flex;

    align-items: center;

    gap: 6px;

}



.footer-bottom--simple {

    justify-content: center;

    text-align: center;

}



body.dark-mode .profile-shell-card,

body.dark-mode .profile-sidebar,

body.dark-mode .saved-post-card,

body.dark-mode .notification-item,

body.dark-mode .notification-filter,

body.dark-mode .setting-panel {

    background: rgba(22, 16, 46, 0.82);

    border-color: rgba(167, 139, 250, 0.16);

    color: #f5f3ff;

}



body.dark-mode .profile-toolbar__desc,

body.dark-mode .section-subtitle,

body.dark-mode .saved-post-card p,

body.dark-mode .saved-post-card__meta,

body.dark-mode .saved-post-card__footer,

body.dark-mode .notification-item__content p,

body.dark-mode .notification-item__meta,

body.dark-mode .notification-item__time,

body.dark-mode .setting-panel p,

body.dark-mode .header-user-label {

    color: #c4b5fd;

}



body.dark-mode .header-user-label,

body.dark-mode .profile-highlight,

body.dark-mode .notification-summary-card,

body.dark-mode .status-chip--muted,

body.dark-mode .notification-item__icon {

    background: rgba(124, 58, 237, 0.16);

}



body.dark-mode .saved-post-card h3 a,

body.dark-mode .notification-item__header h3,

body.dark-mode .profile-toolbar h1,

body.dark-mode .notification-hero h1 {

    color: #f5f3ff;

}



@media (max-width: 1024px) {

    .profile-toolbar,

    .notification-hero {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 768px) {

    .profile-header-actions {

        width: 100%;

        justify-content: flex-start;

        flex-wrap: wrap;

    }



    .header-user-label {

        width: 100%;

        justify-content: center;

    }



    .profile-toolbar,

    .notification-hero,

    .notification-center,

    .profile-section {

        padding: 22px;

    }



    .notification-item {

        grid-template-columns: 1fr;

    }



    .notification-item__icon {

        width: 56px;

        height: 56px;

    }



    .post-footer__actions,

    .setting-panel__actions,

    .notification-item__actions {

        width: 100%;

    }



    .post-footer__actions .btn,

    .setting-panel__actions .btn,

    .notification-item__actions .btn {

        flex: 1;

        justify-content: center;

    }

}



.notification-summary-card {
    position: relative;
    transition: var(--transition);
}

.notification-summary-card.is-highlight {
    transform: translateY(-2px);
    border-color: rgba(124, 58, 237, 0.22);
    box-shadow: 0 20px 36px rgba(124, 58, 237, 0.14);
}

.notification-center__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.notification-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.12);
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1;
}

.notification-meta-pill i {
    color: var(--primary-color);
}

.notification-meta-pill.is-emphasis {
    color: var(--primary-color);
    border-color: rgba(124, 58, 237, 0.2);
    background: rgba(124, 58, 237, 0.12);
}

.notification-state-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 52px 28px;
    border-radius: 24px;
    background: rgba(124, 58, 237, 0.05);
    border: 1px dashed rgba(124, 58, 237, 0.18);
    color: var(--text-secondary);
}

.notification-state-card__icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    margin-bottom: 18px;
    background: rgba(124, 58, 237, 0.12);
    color: var(--primary-color);
    font-size: 1.8rem;
}

.notification-state-card h3 {
    margin: 6px 0 12px;
    font-size: 1.4rem;
    color: var(--text-primary);
}

.notification-state-card p {
    max-width: 620px;
    margin: 0;
    line-height: 1.75;
}

.notification-state-card__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.notification-item {
    position: relative;
    align-items: flex-start;
    overflow: hidden;
}

.notification-item::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 999px;
    background: transparent;
}

.notification-item.is-unread::before {
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.95), rgba(167, 139, 250, 0.65));
}

.notification-item__content {
    min-width: 0;
}

.notification-item__content--loading {
    display: grid;
    gap: 12px;
}

.notification-item__header-main {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.notification-item__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.notification-item__eyebrow--loading {
    margin-bottom: 2px;
}

.notification-item__pulse {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.1);
    color: var(--primary-color);
    font-size: 0.82rem;
    font-weight: 700;
}

.notification-item__pulse::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.1);
}

.notification-item__pulse--muted {
    background: rgba(111, 99, 168, 0.12);
    color: var(--text-secondary);
}

.notification-item__pulse--muted::before {
    box-shadow: none;
}

.notification-item__header h3 {
    line-height: 1.4;
}

.notification-item__time {
    align-items: flex-end;
    gap: 6px;
}

.notification-item__timestamp {
    font-size: 0.82rem;
}

.notification-item__meta {
    justify-content: flex-start;
}

.notification-item__meta span {
    min-height: 28px;
    padding: 0;
}

.notification-item__meta a {
    color: inherit;
    text-decoration: none;
}

.notification-item__meta a:hover {
    color: var(--primary-color);
}

.notification-item__excerpt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(124, 58, 237, 0.06);
    color: var(--text-secondary);
    line-height: 1.7;
}

.notification-item__excerpt i {
    margin-top: 3px;
    color: var(--primary-color);
}

.notification-item__footer {
    margin-top: 6px;
}

.notification-item__icon--skeleton {
    background: rgba(124, 58, 237, 0.05);
}

.notification-item__avatar-skeleton {
    width: 64px;
    height: 64px;
    border-radius: 20px;
}

.notification-item__pill-skeleton {
    width: 96px;
    height: 30px;
}

.notification-item__pill-skeleton--short {
    width: 72px;
}

.notification-item__meta--loading {
    gap: 10px;
}

.notification-item__meta-skeleton {
    width: 160px;
    height: 14px;
}

.notification-item__meta-skeleton--short {
    width: 104px;
}

.notification-item__actions--loading {
    justify-content: flex-start;
    gap: 12px;
}

.notification-item__button-skeleton {
    width: 110px;
    height: 36px;
    border-radius: 999px;
}

.notification-item__button-skeleton--secondary {
    width: 96px;
}

.notification-item--loading::before,
.notification-item--loading:hover {
    transform: none;
    box-shadow: none;
}

body.dark-mode .notification-summary-card.is-highlight {
    border-color: rgba(167, 139, 250, 0.28);
    box-shadow: 0 20px 40px rgba(9, 5, 26, 0.36);
}

body.dark-mode .notification-meta-pill,
body.dark-mode .notification-state-card,
body.dark-mode .notification-item__excerpt,
body.dark-mode .notification-item__pulse--muted {
    background: rgba(124, 58, 237, 0.14);
    border-color: rgba(167, 139, 250, 0.2);
    color: #c4b5fd;
}

body.dark-mode .notification-meta-pill.is-emphasis,
body.dark-mode .notification-state-card__icon,
body.dark-mode .notification-item__pulse {
    background: rgba(167, 139, 250, 0.18);
    color: #f5f3ff;
}

body.dark-mode .notification-state-card h3,
body.dark-mode .notification-item__meta a:hover {
    color: #f5f3ff;
}

body.dark-mode .notification-item.is-unread::before {
    background: linear-gradient(180deg, rgba(196, 181, 253, 0.95), rgba(124, 58, 237, 0.65));
}

@media (max-width: 1024px) {
    .notification-center__meta {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .notification-center__meta,
    .notification-state-card__actions,
    .notification-item__eyebrow,
    .notification-item__meta,
    .notification-item__footer {
        width: 100%;
    }

    .notification-meta-pill,
    .notification-item__pulse {
        width: 100%;
        justify-content: center;
    }

    .notification-item__time {
        width: 100%;
        align-items: flex-start;
    }

    .notification-item__excerpt {
        padding: 12px 14px;
    }
}

.author-mini-home {

    margin-bottom: 16px;

    padding: 18px;

    border-radius: 22px;

    background: rgba(124, 58, 237, 0.06);

    border: 1px solid rgba(124, 58, 237, 0.12);

}



.author-mini-home__header,

.author-toolbar__identity {

    display: flex;

    align-items: center;

    gap: 16px;

}



.author-mini-home__header img {

    width: 56px;

    height: 56px;

    border-radius: 18px;

    object-fit: cover;

}



.author-mini-home__header strong,

.author-toolbar__identity h1 {

    color: var(--text-primary);

}



.author-mini-home__header span,

.author-toolbar__role,

.author-sidebar-card__desc,

.author-highlight-card p {

    color: var(--text-secondary);

}



.author-mini-home__bio {

    margin: 14px 0;

    color: var(--text-secondary);

    line-height: 1.7;

}



.author-mini-home__stats {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 12px;

}



.author-mini-home__stats span {

    padding: 10px 12px;

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.78);

    border: 1px solid rgba(124, 58, 237, 0.1);

    color: var(--text-secondary);

    font-size: 0.9rem;

}



.author-mini-home__stats strong {

    display: block;

    margin-bottom: 4px;

    color: var(--text-primary);

    font-size: 1rem;

}



.author-mini-home__chips,

.author-tag-cloud {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.author-directory-page__main {

    padding: 30px 0 48px;

}



.author-toolbar {

    align-items: start;

}



.author-toolbar__identity {

    margin: 18px 0 14px;

}



.author-toolbar__identity img {

    width: 96px;

    height: 96px;

    border-radius: 28px;

    object-fit: cover;

    box-shadow: 0 16px 36px rgba(124, 58, 237, 0.18);

}



.author-toolbar__role {

    margin: 10px 0 0;

    font-size: 1rem;

    font-weight: 600;

}



.author-toolbar__actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 20px;

}



.author-highlights {

    grid-template-columns: repeat(2, minmax(0, 1fr));

}



.author-highlight-card p {

    margin: 0;

    line-height: 1.6;

}



.author-page-grid {

    align-items: start;

}



.author-sidebar {

    padding: 26px;

}



.author-sidebar-card + .author-sidebar-card {

    margin-top: 18px;

}



.author-sidebar-card__desc {

    line-height: 1.8;

}



.author-card-meta {

    margin-top: 16px;

}



.author-category-list .detail-mini-link {

    width: 100%;

}



.author-tag-cloud .detail-topic-chip {

    text-decoration: none;

}



.author-sidebar-actions .btn {

    width: 100%;

    justify-content: center;

}



.author-featured-section,

.author-posts-section {

    padding: 28px;

}



.author-featured-list,

.author-posts-list {

    margin-top: 6px;

}



.author-featured-card,

.author-post-card {

    border: 1px solid rgba(124, 58, 237, 0.1);

    box-shadow: var(--shadow-light);

}



.author-featured-card h3,

.author-post-card h3 {

    margin-bottom: 10px;

}



.author-post-card + .author-post-card {

    margin-top: 16px;

}



.author-post-card__footer > span {

    display: inline-flex;

    align-items: center;

    gap: 6px;

}



body.dark-mode .author-mini-home,

body.dark-mode .author-featured-card,

body.dark-mode .author-post-card,

body.dark-mode .author-sidebar,

body.dark-mode .author-sidebar-card {

    background: rgba(22, 16, 46, 0.82);

    border-color: rgba(167, 139, 250, 0.16);

}



body.dark-mode .author-mini-home__stats span {

    background: rgba(124, 58, 237, 0.16);

    border-color: rgba(167, 139, 250, 0.14);

    color: #ddd6fe;

}



body.dark-mode .author-mini-home__header strong,

body.dark-mode .author-toolbar__identity h1,

body.dark-mode .author-mini-home__stats strong,

body.dark-mode .author-category-list .detail-mini-link strong {

    color: #f5f3ff;

}



body.dark-mode .author-mini-home__header span,

body.dark-mode .author-mini-home__bio,

body.dark-mode .author-toolbar__role,

body.dark-mode .author-sidebar-card__desc,

body.dark-mode .author-highlight-card p {

    color: #c4b5fd;

}



@media (max-width: 1024px) {

    .author-highlights {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (max-width: 768px) {

    .author-toolbar__identity {

        align-items: flex-start;

    }



    .author-toolbar__identity img {

        width: 80px;

        height: 80px;

        border-radius: 24px;

    }



    .author-highlights,

    .author-mini-home__stats {

        grid-template-columns: 1fr;

    }



    .author-toolbar__actions .btn,

    .author-sidebar-actions .btn {

        width: 100%;

        justify-content: center;

    }

}


/* ========= 导航栏紧凑用户菜单 ========= */
.user-chip {
    text-decoration: none;
    white-space: nowrap;
}
.user-chip--compact {
    padding: 4px 10px 4px 4px !important;
    gap: 7px !important;
}
.user-chip--compact img {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
}
.user-chip--compact strong {
    font-size: 0.88rem !important;
    max-width: 100px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
    color: var(--text-primary) !important;
}
.btn-sm {
    padding: 5px 12px !important;
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
}
/* ========= 热榜/财经「查看更多」链接 ========= */
.section-view-more {
    display: block;
    text-align: center;
    margin: 12px 0 4px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1.5px dashed rgba(124, 58, 237, 0.25);
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.18s, border-color 0.18s;
}
.section-view-more:hover {
    background: rgba(124, 58, 237, 0.07);
    border-color: rgba(124, 58, 237, 0.45);
}

/* ========= 首页帖子流末尾「查看更多精彩内容」引导卡片 ========= */
.feed-view-more {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
    gap: 18px;
    align-items: stretch;
    padding: 22px;
    margin-top: 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(167, 139, 250, 0.16));
    border: 1px solid rgba(124, 58, 237, 0.15);
    box-shadow: 0 18px 40px rgba(124, 58, 237, 0.08);
}

.feed-view-more__intro {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
}

.feed-view-more__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.14);
    color: var(--primary-color);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.feed-view-more__headline {
    display: grid;
    gap: 8px;
}

.feed-view-more__headline strong {
    display: block;
    font-size: 1.34rem;
    line-height: 1.35;
    color: var(--text-primary);
}

.feed-view-more__headline span {
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--text-secondary);
    max-width: 26em;
}

.feed-view-more__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.feed-view-more__meta-item {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(124, 58, 237, 0.12);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
}

.feed-view-more__panel {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.feed-view-more__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    white-space: nowrap;
    font-weight: 700;
    box-shadow: 0 12px 24px rgba(124, 58, 237, 0.18);
}

.feed-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.feed-shortcut-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    min-height: 92px;
    padding: 16px 16px 14px;
    border-radius: 16px;
    text-decoration: none;
    color: var(--text-primary);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 245, 255, 0.9));
    border: 1px solid rgba(124, 58, 237, 0.1);
    box-shadow: 0 8px 22px rgba(124, 58, 237, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    overflow: hidden;
}

.feed-shortcut-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
}

.feed-shortcut-card:nth-child(2)::before {
    background: linear-gradient(90deg, #8b5cf6, #c4b5fd);
}

.feed-shortcut-card:nth-child(3)::before {
    background: linear-gradient(90deg, #6d28d9, #8b5cf6);
}

.feed-shortcut-card:nth-child(4)::before {
    background: linear-gradient(90deg, #7c3aed, #ddd6fe);
}

.feed-shortcut-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(124, 58, 237, 0.14);
    border-color: rgba(124, 58, 237, 0.22);
}

.feed-shortcut-card strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.feed-shortcut-card span {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-secondary);
}




#latestPostsList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
}

#latestPostsList .post {
    padding: 18px 18px 16px;
    margin-bottom: 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#latestPostsList .post-header {
    margin-bottom: 0;
    gap: 12px;
}

#latestPostsList .post-author-link {
    gap: 12px;
    width: 100%;
}

#latestPostsList .post-header img {
    width: 40px;
    height: 40px;
}

#latestPostsList .post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

#latestPostsList .post-meta h4 {
    width: 100%;
    margin-bottom: 0;
    font-size: 0.95rem;
}

#latestPostsList .post-time {
    margin-right: 0;
    font-size: 0.78rem;
}

#latestPostsList .post-category {
    font-size: 0.72rem;
    padding: 3px 8px;
}

#latestPostsList .post-content {
    display: flex;
    flex: 1;
}

#latestPostsList .post-content a {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

#latestPostsList .post-content h3 {
    font-size: 1.04rem;
    line-height: 1.5;
    margin-bottom: 0;
}

#latestPostsList .post-content p {
    margin-bottom: 0;
    font-size: 0.86rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#latestPostsList .post-tags {
    margin-top: 0;
    flex-wrap: wrap;
    gap: 6px;
}

#latestPostsList .tag {
    font-size: 0.72rem;
    padding: 4px 10px;
}

#latestPostsList .post-footer {
    margin-top: auto;
    padding-top: 12px;
    gap: 8px;
}

#latestPostsList .post-action {
    padding: 8px 11px;
    font-size: 0.82rem;
}

#latestPostsList .post-action span {
    white-space: nowrap;
}

body.dark-mode .feed-view-more {
    background: linear-gradient(135deg, rgba(76, 29, 149, 0.5), rgba(91, 33, 182, 0.36));
    border-color: rgba(167, 139, 250, 0.24);
    box-shadow: 0 18px 42px rgba(6, 4, 20, 0.36);
}

body.dark-mode .feed-view-more__eyebrow {
    background: rgba(167, 139, 250, 0.18);
    color: #ddd6fe;
}

body.dark-mode .feed-view-more__headline strong,
body.dark-mode .feed-shortcut-card strong,
body.dark-mode #latestPostsList .post-meta h4,
body.dark-mode #latestPostsList .post-content h3 {
    color: #f5f3ff;
}

body.dark-mode .feed-view-more__headline span,
body.dark-mode .feed-view-more__meta-item,
body.dark-mode #latestPostsList .post-content p,
body.dark-mode #latestPostsList .post-time,
body.dark-mode .feed-shortcut-card span {
    color: #c4b5fd;
}

body.dark-mode .feed-view-more__panel,
body.dark-mode .feed-shortcut-card,
body.dark-mode #latestPostsList .post {
    background: rgba(22, 16, 46, 0.88);
    border-color: rgba(167, 139, 250, 0.16);
}

body.dark-mode .feed-view-more__meta-item {
    background: rgba(30, 22, 60, 0.72);
    border-color: rgba(167, 139, 250, 0.16);
}



@media (max-width: 1100px) {
    .feed-view-more {
        grid-template-columns: 1fr;
    }

    .feed-view-more__headline span {
        max-width: none;
    }

    #latestPostsList {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .feed-view-more {
        padding: 18px;
        gap: 14px;
    }

    .feed-view-more__panel {
        padding: 14px;
    }

    .feed-view-more__link {
        width: 100%;
    }

    .feed-shortcuts {
        grid-template-columns: 1fr;
    }

    .feed-shortcut-card {
        min-height: 82px;
    }

    #latestPostsList .post {
        padding: 16px;
    }

    #latestPostsList .post-action {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
    }
}