/* 蓝图圈公开站点样式：照 2026-10-10 定稿效果图（docs/2026-10-09-蓝图圈Web站点-HTML效果图.html）实现。
   品牌金 #D98B1E 系（styles/tokens.wxss 同源），中性灰阶，白卡浅灰底。 */
:root {
  --brand: #D98B1E;
  --brand-deep: #B96F0E;
  --brand-tint: rgba(217, 139, 30, .10);
  --brand-tint-2: rgba(217, 139, 30, .12);
  --ink-1: #1F2329;
  --ink-2: #65686C;
  --ink-3: #86898E;
  --ink-4: #B0B3B8;
  --line: #EEF0F2;
  --line-strong: #E5E7EA;
  --page-bg: #F7F8F9;
  --card: #FFFFFF;
  --bg-soft: #F2F3F5;
  --hover-bg: #FAFBFC;
  --ink-body: #2A2E36;
  --quote-bg: #FFF6E0;
  --quote-ink: #6E5220;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--ink-1); background: var(--page-bg); min-height: 100vh; }
button { font-family: inherit; cursor: pointer; }
a { text-decoration: none; color: inherit; }
img { display: block; }

/* ============ 顶导航 ============ */
.topbar { background: var(--card); position: sticky; top: 0; z-index: 50; }
.topbar .wrap { max-width: 1440px; margin: 0 auto; padding: 0 32px; height: 62px; display: flex; align-items: center; gap: 26px; }
.logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.logo .mark {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 700;
}
.logo .name { font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { position: relative; font-size: 15px; color: var(--ink-1); padding: 19px 13px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.nav a:hover { color: var(--brand-deep); }
.nav a.on { color: var(--brand-deep); font-weight: 600; }
.nav a.on::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); }
.nav .caret { font-size: 10px; color: var(--ink-3); }

/* 导航下拉菜单（专题/圈子/经验包）：桌面悬停展开，触屏点击开合（.open）。 */
.nav-drop { position: relative; display: flex; }
.nav-menu {
  position: absolute; top: 100%; left: 0; min-width: 232px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(31, 35, 41, .10); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 60; max-height: 60vh; overflow-y: auto;
}
.nav-drop:hover .nav-menu, .nav-drop.open .nav-menu { opacity: 1; visibility: visible; transform: none; }
.nav-drop.open > a { color: var(--brand-deep); }
.nav-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink-1); }
.nav-menu-item:hover { background: var(--bg-soft); color: var(--brand-deep); }
.nav-menu-item .nt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-menu-item .nn { flex-shrink: 0; font-size: 12px; color: var(--ink-3); }
.nav-menu-foot { padding: 8px 12px 6px; border-top: 1px solid var(--line); margin-top: 4px; font-size: 12px; color: var(--ink-4); line-height: 1.6; }
.nav-menu-note { padding: 12px; font-size: 13px; color: var(--ink-3); line-height: 1.6; }
.nav-menu-pack { padding: 12px; }
.nav-menu-pack .npm-t { font-size: 14px; font-weight: 600; color: var(--ink-1); }
.nav-menu-pack .npm-d { margin: 4px 0 8px; font-size: 12px; color: var(--ink-2); line-height: 1.6; }
.search { flex: 1; max-width: 360px; margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--bg-soft); border-radius: 999px; padding: 9px 16px; }
.search input { flex: 1; border: none; outline: none; background: transparent; font-size: 13.5px; color: var(--ink-1); min-width: 0; }
.search input::placeholder { color: var(--ink-4); }
.btn-outline-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--brand); color: var(--brand-deep); border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 500; }
.fab-post { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; font-size: 20px; font-weight: 500; line-height: 1; box-shadow: 0 4px 10px rgba(217,139,30,.35); display: inline-flex; align-items: center; justify-content: center; }
.bell { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-soft); border: none; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); }
.me { flex-shrink: 0; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 600; }
/* 未登录：圆角矩形登录按钮；登录后：圆形头像位（两者不共用 50% 圆角，避免文字撑宽变椭圆） */
.me-login { padding: 0 16px; border-radius: 8px; background: linear-gradient(135deg, var(--brand), var(--brand-deep)); box-shadow: 0 3px 8px rgba(217,139,30,.3); }
.me-avatar { width: 34px; border-radius: 50%; overflow: hidden; background: var(--bg-soft); padding: 0; }
.me-avatar img { width: 34px; height: 34px; object-fit: cover; }

/* 登录下拉菜单 */
.me-wrap { position: relative; flex-shrink: 0; }
.user-menu {
  position: absolute; right: 0; top: calc(100% + 10px); width: 200px; z-index: 90;
  background: var(--card); border-radius: 12px; box-shadow: 0 12px 32px rgba(13,16,22,.16);
  padding: 6px; border: 1px solid var(--line);
}
.user-menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); }
.user-menu-head .un { font-size: 14.5px; font-weight: 600; }
.user-menu-head .ud { margin-top: 3px; font-size: 12px; color: var(--ink-3); }
.user-menu-item { display: block; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; color: var(--ink-1); }
.user-menu-item:hover { background: var(--brand-tint); color: var(--brand-deep); }
.user-menu-item.danger { color: #E03E2D; }
.user-menu-item.danger:hover { background: #FFF1EE; color: #E03E2D; }

/* ============ 主体两栏 ============ */
.layout { max-width: 1440px; margin: 0 auto; padding: 16px 32px 80px; display: grid; grid-template-columns: 1fr 400px; gap: 20px; align-items: start; }

/* 左主栏 */
.feed-card { background: var(--card); border-radius: 14px; padding: 0 28px; min-width: 0; }
.cat-row { display: flex; align-items: center; gap: 6px; padding: 6px 0 14px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.cat-row::-webkit-scrollbar { display: none; }
.cat { flex-shrink: 0; font-size: 15px; color: var(--ink-2); padding: 6px 12px; border-radius: 8px; white-space: nowrap; cursor: pointer; }
.cat:hover { color: var(--ink-1); background: var(--brand-tint); }
.cat.on { color: var(--brand-deep); font-weight: 600; }
.cat .caret { font-size: 10px; color: var(--ink-3); }
.cat-more { flex-shrink: 0; font-size: 14px; color: var(--ink-3); padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.cat .caret { font-size: 11px; color: var(--ink-4); margin-left: 2px; }
.cat.topic-chip { background: var(--brand-tint-2); color: var(--brand-deep); font-weight: 600; }
.cat.topic-chip b { font-weight: 400; margin-left: 4px; cursor: pointer; }
.topic-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; cursor: pointer; }
.topic-row .tt { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topic-row:hover .tt { color: var(--brand-deep); }
.topic-row .tn { flex-shrink: 0; font-size: 11.5px; color: var(--ink-4); }
.filter-row { display: flex; align-items: center; padding: 14px 0 4px; }
.ftab { position: relative; font-size: 15px; color: var(--ink-2); padding: 8px 14px; cursor: pointer; }
.ftab.on { color: var(--brand-deep); font-weight: 600; }
.ftab.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -2px; height: 3px; border-radius: 3px; background: var(--brand); }
.filter-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pill-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 8px; padding: 6px 12px; font-size: 13px; }
.feed-empty { padding: 60px 0; text-align: center; font-size: 14px; color: var(--ink-3); }

/* 帖子条目 */
.post-item { display: flex; gap: 18px; padding: 22px 0 20px; border-bottom: 1px solid var(--line); border-radius: 10px; transition: background .12s; }
.post-item:hover { background: var(--hover-bg); }
.post-item.kb-selected { background: var(--brand-tint); }
.post-item:last-of-type { border-bottom: none; }
.post-main { flex: 1; min-width: 0; }
.post-head { display: flex; align-items: center; gap: 9px; }
.p-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 600; overflow: hidden; }
.p-avatar img { width: 100%; height: 100%; object-fit: cover; }
.p-name { font-size: 14.5px; font-weight: 600; color: var(--ink-1); }
.p-badge { font-size: 11px; color: #fff; background: linear-gradient(135deg, #E8A13C, var(--brand)); border-radius: 4px; padding: 1.5px 6px; font-weight: 500; flex-shrink: 0; }
.p-time { font-size: 13px; color: var(--ink-4); }
.p-title { margin-top: 10px; font-size: 17.5px; font-weight: 600; line-height: 1.5; color: var(--ink-1); cursor: pointer; display: inline; }
.p-title:hover, .post-item:hover .p-title { color: var(--brand-deep); }
.p-read-hint { display: none; font-size: 12.5px; color: var(--brand-deep); font-weight: 500; margin-left: 8px; }
.post-item:hover .p-read-hint { display: inline; }
.p-excerpt { margin-top: 8px; font-size: 15px; line-height: 1.75; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* 简洁密度：隐藏摘要 + 压紧行距 */
.feed-card.compact .p-excerpt { display: none; }
.feed-card.compact .post-item { padding: 14px 0 13px; }
.feed-card.compact .p-title { font-size: 16px; margin-top: 7px; }
.feed-card.compact .p-acts { margin-top: 9px; }
.p-acts { margin-top: 14px; display: flex; align-items: center; gap: 26px; }
.p-acts span { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-3); cursor: pointer; }
.p-acts span:hover { color: var(--brand-deep); }
.p-acts svg { flex-shrink: 0; }
.p-side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 10px; max-width: 200px; }
.p-thumb { width: 168px; height: 106px; border-radius: 10px; object-fit: cover; }
.p-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.p-tag { font-size: 12.5px; color: var(--ink-2); background: var(--bg-soft); border-radius: 6px; padding: 4px 10px; white-space: nowrap; }

/* 分页 */
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px 0 28px; font-size: 14px; color: var(--ink-2); flex-wrap: wrap; }
.pagination .total { margin-right: 8px; }
.pg { min-width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-2); }
.pg:hover:not(:disabled) { color: var(--brand-deep); border-color: var(--brand); }
.pg.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.pg.ellipsis { border: none; background: none; cursor: default; }
.pg[disabled] { opacity: .45; cursor: default; }
.load-more-btn { margin: 0 auto; display: block; padding: 10px 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink-2); font-size: 14px; }
.load-more-btn:hover { color: var(--brand-deep); border-color: var(--brand); }
.jump { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; }
.jump input { width: 44px; height: 34px; border: 1px solid var(--line); border-radius: 8px; text-align: center; font-size: 14px; outline: none; }

/* 右栏 */
.side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 78px; }
.side-card { background: var(--card); border-radius: 14px; padding: 18px; }
.func-card { display: flex; align-items: center; gap: 13px; cursor: pointer; }
.func-card:hover { box-shadow: 0 6px 18px rgba(13,16,22,.06); }
.func-icon { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: #fff; }
.func-body { flex: 1; min-width: 0; }
.func-body .t { display: flex; align-items: center; font-size: 15.5px; font-weight: 600; }
.func-body .t .n { margin-left: auto; font-size: 12px; color: var(--ink-3); font-weight: 400; }
.func-body .d { margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
.func-arrow { color: var(--ink-4); font-size: 14px; flex-shrink: 0; }

.rank-tabs { display: flex; align-items: center; }
.rank-tab { position: relative; font-size: 15px; font-weight: 600; color: var(--ink-2); padding: 2px 0 10px; margin-right: 18px; cursor: pointer; white-space: nowrap; }
.rank-tab.on { color: var(--ink-1); }
.rank-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--brand); }
.switch-row { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.switch { width: 34px; height: 19px; border-radius: 999px; background: var(--bg-soft); position: relative; transition: .15s; cursor: pointer; flex-shrink: 0; }
.switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: .15s; }
.switch.on { background: var(--brand); }
.switch.on::after { left: 17px; }
.time-chips { display: flex; align-items: center; margin: 14px 0 6px; flex-wrap: wrap; gap: 0 8px; }
.tchip { font-size: 12.5px; color: var(--ink-2); background: var(--bg-soft); border-radius: 6px; padding: 4px 11px; margin-right: 0; cursor: pointer; }
.tchip.on { color: var(--brand-deep); background: var(--brand-tint); font-weight: 600; }
.full-link { margin-left: auto; font-size: 12.5px; color: var(--ink-3); cursor: pointer; }
.full-link:hover { color: var(--brand-deep); }
.rank-list { margin-top: 6px; }
.rank-loading { padding: 14px 0; text-align: center; font-size: 12.5px; color: var(--ink-4); }
.rank-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; cursor: pointer; }
.rank-idx { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--ink-3); background: var(--bg-soft); }
.rank-idx.r1 { background: linear-gradient(135deg,#F5553B,#E03E2D); color: #fff; }
.rank-idx.r2 { background: linear-gradient(135deg,#F59A3B,#E87B1E); color: #fff; }
.rank-idx.r3 { background: linear-gradient(135deg,#F5C13B,#E8A81E); color: #fff; }
.rank-body { flex: 1; min-width: 0; }
.rank-title { font-size: 13.5px; line-height: 1.55; color: var(--ink-1); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.rank-row:hover .rank-title { color: var(--brand-deep); }
.rank-meta { margin-top: 3px; font-size: 12px; color: var(--ink-4); display: flex; align-items: center; gap: 4px; }
.rank-anchors { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.view-more { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 10px 0 0; font-size: 13px; color: var(--ink-3); cursor: pointer; }
.view-more:hover { color: var(--brand-deep); }
.author-row { display: flex; align-items: center; gap: 11px; padding: 10px 0 2px; }
.a-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; overflow: hidden; }
.a-avatar img { width: 100%; height: 100%; object-fit: cover; }
.a-trophy { font-size: 16px; }
.a-name { font-size: 14.5px; font-weight: 600; }
.a-meta { margin-top: 3px; font-size: 12px; color: var(--ink-3); }

/* 浮动发布钮 */
.float-fab { position: fixed; right: 36px; bottom: 40px; width: 52px; height: 52px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; box-shadow: 0 8px 22px rgba(217,139,30,.45); z-index: 60; display: flex; align-items: center; justify-content: center; }

/* ============ 详情页 ============ */
.post-layout { max-width: 1200px; margin: 0 auto; padding: 24px 32px 60px; display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
.article-card { background: var(--card); border-radius: 14px; padding: 40px 44px; min-width: 0; }
.crumb { font-size: 12.5px; color: var(--ink-3); }
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--brand-deep); }
.article-card h1 { margin-top: 16px; font-size: 25px; font-weight: 600; line-height: 1.55; }
.article-meta { margin-top: 18px; display: flex; align-items: center; gap: 11px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #fff; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.article-meta .who .n { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.article-meta .who .n span { font-size: 11px; color: var(--brand-deep); background: var(--brand-tint); border-radius: 4px; padding: 1px 6px; font-weight: 500; }
.article-meta .who .d { font-size: 12px; color: var(--ink-4); margin-top: 2px; }
.btn-follow { margin-left: auto; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-deep)); border: none; border-radius: 999px; padding: 8px 20px; font-weight: 500; flex-shrink: 0; }
.btn-follow.following { background: var(--bg-soft); color: var(--ink-3); }
.article-body { margin-top: 24px; font-size: 16px; line-height: 2.0; color: var(--ink-body); word-break: break-word; }
.article-body p { margin-bottom: 18px; }
.article-body h1, .article-body h2, .article-body h3 { margin: 26px 0 14px; font-size: 18px; font-weight: 600; }
.article-body ul, .article-body ol { margin: 0 0 18px 22px; }
.article-body li { margin-bottom: 6px; }
.article-body blockquote { margin: 18px 0; padding: 14px 18px; background: var(--quote-bg); border-left: 3px solid var(--brand); border-radius: 0 10px 10px 0; font-size: 14.5px; color: var(--quote-ink); line-height: 1.9; }
.article-body figcaption { font-size: 13px; color: var(--ink-3); text-align: center; margin-top: 6px; }
.article-body img { max-width: 100%; border-radius: 10px; margin: 14px auto; display: block; }
.article-body span { white-space: pre-wrap; }
.article-body h4 { margin: 26px 0 14px; font-size: 18px; font-weight: 600; }
.reward-box { margin-top: 30px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, #FFFDF7, #fff); padding: 24px 26px; }
.reward-box .rt { text-align: center; font-size: 17px; font-weight: 600; }
.reward-box .rd { margin-top: 6px; text-align: center; font-size: 12.5px; color: var(--ink-3); }
.reward-opts { margin-top: 18px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.ropt { min-width: 86px; text-align: center; background: var(--card); border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 14px; font-size: 14px; color: var(--ink-2); }
.ropt b { display: block; font-size: 17px; color: var(--ink-1); }
.ropt small { font-size: 11px; color: var(--ink-3); }
.ropt.on { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-deep); box-shadow: 0 0 0 1px var(--brand); }
.reward-input { margin: 16px auto 0; max-width: 380px; display: flex; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: var(--card); }
.reward-input input { flex: 1; border: none; outline: none; padding: 11px 14px; font-size: 13px; background: transparent; color: var(--ink-1); min-width: 0; }
.reward-input .send { flex: none; border: none; background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; font-size: 13px; font-weight: 500; padding: 0 22px; }
.reward-stat { margin-top: 14px; text-align: center; font-size: 12.5px; color: var(--ink-3); }
.reward-stat b { color: var(--brand-deep); }
.comment-input { margin-top: 30px; display: flex; gap: 12px; }
.comment-input .box { flex: 1; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--page-bg); padding: 12px 14px; font-size: 13.5px; color: var(--ink-4); min-width: 0; }
.comment-input .go { flex: none; align-self: stretch; display: inline-flex; align-items: center; padding: 0 22px; border: none; border-radius: 10px; background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; font-size: 13.5px; font-weight: 500; }
.comments { margin-top: 30px; }
.comments h3 { font-size: 18px; font-weight: 600; }
.comment { display: flex; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.comment .cbody { flex: 1; min-width: 0; }
.comment .cn { font-size: 13px; font-weight: 600; }
.comment .ct { margin-top: 6px; font-size: 14px; line-height: 1.8; color: var(--ink-body); white-space: pre-wrap; word-break: break-word; }
.comment .cm { margin-top: 8px; font-size: 12px; color: var(--ink-3); display: flex; gap: 16px; }
.aside-panel { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 14px; }
.panel { background: var(--card); border-radius: 14px; padding: 18px; }
.panel h4 { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.side-author { display: flex; align-items: center; gap: 10px; }
.side-author .n { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.side-author .n span { font-size: 11px; color: var(--brand-deep); background: var(--brand-tint); border-radius: 4px; padding: 1px 6px; font-weight: 500; }
.side-author .d { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.side-author .fl { margin-left: auto; font-size: 12.5px; color: var(--brand-deep); border: 1px solid var(--brand); border-radius: 999px; padding: 5px 14px; background: none; flex-shrink: 0; }
.side-author .fl.following { color: var(--ink-3); border-color: var(--line); }
.panel .bio { font-size: 12.5px; color: var(--ink-3); line-height: 1.8; margin-top: 10px; }
.panel .btn-solid { width: 100%; margin-top: 14px; padding: 10px 0; border: none; border-radius: 999px; background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; font-size: 13.5px; font-weight: 500; }
.panel .btn-solid.following { background: var(--bg-soft); color: var(--ink-3); }
.panel .rank-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.panel .rank-item:last-child { border-bottom: none; }
.panel .rank-no { flex: none; width: 20px; height: 20px; border-radius: 6px; margin-top: 2px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--bg-soft); color: var(--ink-3); }
.panel .rt2 { font-size: 13.5px; font-weight: 500; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.panel .rank-item:hover .rt2 { color: var(--brand-deep); }
.panel .rm { margin-top: 4px; font-size: 11.5px; color: var(--ink-4); }

/* ============ 登录浮层 ============ */
.modal-mask { position: fixed; inset: 0; background: rgba(15,18,22,.55); z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal { position: relative; width: 320px; background: var(--card); border-radius: 16px; padding: 26px 24px 20px; text-align: center; }
.modal-close { position: absolute; right: 14px; top: 10px; font-size: 22px; color: var(--ink-3); cursor: pointer; line-height: 1; }
.modal-title { font-size: 18px; font-weight: 700; }
.modal-sub { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }
.qr-area { position: relative; width: 200px; height: 200px; margin: 18px auto 0; }
.qr-area img { width: 200px; height: 200px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.qr-area img:not([src]) { visibility: hidden; }
.qr-mask { position: absolute; inset: 0; background: rgba(255,255,255,.94); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.qr-mask button { border: none; background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; border-radius: 8px; padding: 8px 18px; font-size: 13px; }
.qr-status { margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.qr-agree { margin-top: 12px; font-size: 11.5px; color: var(--ink-4); display: flex; align-items: flex-start; justify-content: center; gap: 6px; cursor: pointer; line-height: 1.6; text-align: left; }
.qr-agree input[type="checkbox"] { margin: 2px 0 0; width: 14px; height: 14px; accent-color: var(--brand); cursor: pointer; flex-shrink: 0; }
.qr-agree a { color: var(--brand-deep); }

/* 轻提示 */
.toast { position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%); background: rgba(31,35,41,.92); color: #fff; font-size: 13.5px; border-radius: 10px; padding: 11px 20px; z-index: 120; max-width: 80vw; }

@media (max-width: 1080px) {
  .topbar .wrap { padding: 0 16px; gap: 12px; }
  .nav a { padding: 19px 8px; font-size: 14px; }
  .layout, .post-layout { grid-template-columns: 1fr; padding: 12px 16px 60px; }
  .side, .aside-panel { position: static; }
  .p-thumb { width: 120px; height: 82px; }
  .article-card { padding: 24px 18px; }
  .p-acts { gap: 16px; }
}

/* ============ 宽屏（≥1600）：容器与右栏适度放大 ============ */
@media (min-width: 1600px) {
  .layout { max-width: 1560px; grid-template-columns: 1fr 440px; }
  .post-layout { max-width: 1280px; }
  .search-layout, .hot-layout { max-width: 1560px; }
  .topbar .wrap, .layout, .post-layout { padding-left: 40px; padding-right: 40px; }
}

/* ============ 热榜页 ============ */
.hot-layout { max-width: 1440px; margin: 0 auto; padding: 24px 32px 80px; }
.hot-card { padding: 0 32px 28px; }
.hot-head { padding: 30px 0 18px; border-bottom: 1px solid var(--line); }
.hot-head h2 { font-size: 24px; font-weight: 700; }
.hot-head p { margin-top: 8px; font-size: 13.5px; color: var(--ink-3); }
.hot-tabs { padding: 16px 0 0; }
.hot-official { margin-left: auto; }
.hot-rank-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 4px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 8px; }
.hot-rank-row:hover { background: var(--hover-bg); }
.hot-rank-idx { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--ink-3); background: var(--bg-soft); }
.hot-rank-idx.r1 { background: linear-gradient(135deg,#F5553B,#E03E2D); color: #fff; }
.hot-rank-idx.r2 { background: linear-gradient(135deg,#F59A3B,#E87B1E); color: #fff; }
.hot-rank-idx.r3 { background: linear-gradient(135deg,#F5C13B,#E8A81E); color: #fff; }
.hot-rank-main { flex: 1; min-width: 0; }
.hot-rank-title { font-size: 15.5px; font-weight: 600; line-height: 1.55; color: var(--ink-1); }
.hot-rank-row:hover .hot-rank-title { color: var(--brand-deep); }
.hot-rank-meta { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.hot-rank-num { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; color: var(--brand-deep); margin-top: 2px; }
.author-rank-row { display: flex; align-items: center; gap: 14px; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.author-rank-row:last-child { border-bottom: none; }

/* ============ 搜索结果页 ============ */
.search-layout { max-width: 1440px; }
.search-head { padding: 8px 0 16px; border-bottom: 1px solid var(--line); }
.search-head h2 { font-size: 21px; font-weight: 700; }
.search-head p { margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.p-title em, .p-excerpt em, .rank-title em { color: var(--brand-deep); font-style: normal; background: var(--brand-tint); border-radius: 3px; padding: 0 1px; }

/* ============ 话题落地页 ============ */
.topic-hero { position: relative; overflow: hidden; background: linear-gradient(120deg, #FDF3DF, #FFF9EE 60%, #FBEED3); }
.topic-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .28; }
.topic-hero-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 46px 32px 38px; }
.topic-hero-inner h1 { margin-top: 12px; font-size: 30px; font-weight: 700; letter-spacing: .02em; }
.topic-guide { margin-top: 12px; font-size: 14.5px; color: var(--ink-2); line-height: 1.9; max-width: 720px; white-space: pre-wrap; }
.topic-stats { margin-top: 16px; display: flex; gap: 22px; font-size: 13px; color: var(--ink-2); }
.topic-stats b { color: var(--brand-deep); font-weight: 700; }
.topic-feed-layout { padding-top: 20px; }
#topicFeedList .post-item:first-child { border-top: none; }

/* 评论回复 */
.comment .replies { margin-top: 12px; border-left: 2px solid var(--line); padding-left: 14px; display: flex; flex-direction: column; gap: 12px; }
.comment .replies .comment { padding: 0; border-bottom: none; }
.comment .replies .avatar { width: 26px; height: 26px; font-size: 11px; }
.comment .replies .ct { font-size: 13.5px; }
.comment .reply-to { color: var(--brand-deep); margin-right: 4px; }
.comment-act { cursor: pointer; }
.comment-act:hover { color: var(--brand-deep); }
.reply-banner { display: flex; align-items: center; gap: 8px; margin-top: 30px; padding: 8px 12px; background: var(--brand-tint); border-radius: 8px; font-size: 12.5px; color: var(--brand-deep); }
.reply-banner .x { cursor: pointer; margin-left: auto; font-size: 14px; }

/* ============ 响应式（≤1080 单列折叠） ============ */
@media (max-width: 1080px) {
  .topbar .wrap { padding: 0 16px; gap: 12px; }
  .nav a { padding: 19px 8px; font-size: 14px; }
  .layout, .post-layout { grid-template-columns: 1fr; padding: 12px 16px 60px; }
  .side, .aside-panel { position: static; }
  .p-thumb { width: 120px; height: 82px; }
  .article-card { padding: 24px 18px; }
  .p-acts { gap: 16px; }
  .hot-layout { padding: 12px 16px 60px; }
  .hot-card { padding: 0 18px 20px; }
  .topic-hero-inner { padding: 32px 16px 28px; }
  .search-layout .side { display: none; }
}

/* ============ 新增组件（2026-10-11 PC 二轮优化） ============ */
/* 铃铛未读红点 */
.bell { position: relative; }
.bell-dot { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; border-radius: 999px; background: #E03E2D; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; padding: 0 4px; border: 2px solid var(--card); box-sizing: content-box; }

/* 作者名可点 */
.p-name[data-user], .comment .cn[data-user] { cursor: pointer; }
.p-name[data-user]:hover, .comment .cn[data-user]:hover { color: var(--brand-deep); }
.article-meta .who .n a { color: inherit; }
.article-meta .who .n a:hover { color: var(--brand-deep); }
.side-author .n a { color: inherit; }
.side-author .n a:hover { color: var(--brand-deep); }

/* 作者主页 */
.user-hero { display: flex; align-items: center; gap: 18px; padding: 26px 28px; }
.uh-avatar { width: 68px; height: 68px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; font-weight: 700; overflow: hidden; }
.uh-avatar img { width: 100%; height: 100%; object-fit: cover; }
.uh-main { flex: 1; min-width: 0; }
.uh-main h2 { font-size: 21px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uh-role { font-size: 12px; font-weight: 500; color: var(--ink-2); background: var(--bg-soft); border-radius: 6px; padding: 2px 8px; }
.uh-bio { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.user-stats { margin-top: 12px; display: flex; gap: 22px; font-size: 12.5px; color: var(--ink-3); flex-wrap: wrap; }
.user-stats b { color: var(--ink-1); font-weight: 700; }
.user-posts { margin-top: 14px; padding-bottom: 8px; }
.user-posts .post-item:first-child { border-top: none; }

/* 消息中心 */
.msg-head { display: flex; align-items: center; justify-content: space-between; }
.msg-row { display: flex; gap: 12px; padding: 16px 4px; border-bottom: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.msg-row:hover { background: var(--hover-bg); }
.msg-body { flex: 1; min-width: 0; }
.msg-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.msg-dot { width: 7px; height: 7px; border-radius: 50%; background: #E03E2D; flex-shrink: 0; }
.msg-summary { margin-top: 5px; font-size: 13px; color: var(--ink-2); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msg-time { margin-top: 6px; font-size: 12px; color: var(--ink-4); }
.msg-row.unread .msg-title { color: var(--ink-1); }
.msg-row:not(.unread) .msg-title { font-weight: 500; color: var(--ink-2); }

/* 我的积分 */
.points-hero { text-align: center; padding: 34px 28px 30px; }
.ph-label { font-size: 13px; color: var(--ink-3); }
.ph-num { margin-top: 8px; font-size: 42px; font-weight: 800; color: var(--brand-deep); }
.ph-sub { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.points-list-card { margin-top: 14px; padding-bottom: 8px; }
.point-row { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--line); }
.point-row:last-child { border-bottom: none; }
.pt-main { flex: 1; min-width: 0; }
.pt-reason { font-size: 13.5px; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-time { margin-top: 3px; font-size: 12px; color: var(--ink-4); }
.pt-amount { flex-shrink: 0; font-size: 15px; font-weight: 700; }
.pt-amount.plus { color: #25AF95; }
.pt-amount.minus { color: var(--ink-2); }

/* 搜索页：分类 Tab / 用户结果 / 话题推荐 */
.search-types { padding: 12px 0 0; border-top: none; }
.search-types .ftab { padding-left: 0; }
.search-types .ftab + .ftab { padding-left: 14px; }
.user-result { display: flex; align-items: center; gap: 12px; padding: 16px 4px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 10px; }
.user-result:hover { background: var(--hover-bg); }
.user-result-main { flex: 1; min-width: 0; }
.user-result-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.user-result-name em { font-style: normal; color: var(--brand-deep); }
.user-result-meta { margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
.suggest-head { padding: 16px 0 4px; font-size: 13px; color: var(--ink-3); }
.suggest-rows { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 0 6px; }
.suggest-chip { font-size: 13.5px; color: var(--ink-1); background: var(--bg-soft); border-radius: 999px; padding: 8px 16px; cursor: pointer; }
.suggest-chip:hover { color: var(--brand-deep); background: var(--brand-tint); }

/* 长文阅读包：目录 / 进度条 / 灯箱 */
.toc-panel { max-height: 320px; overflow-y: auto; }
.toc-link { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.7; padding: 4px 0 4px 10px; border-left: 2px solid var(--line); }
.toc-link.lv3 { padding-left: 22px; }
.toc-link:hover { color: var(--brand-deep); border-left-color: var(--brand); }
.read-progress { position: fixed; left: 0; top: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--brand), var(--brand-deep)); z-index: 110; transition: width .1s linear; pointer-events: none; }
.lightbox { position: fixed; inset: 0; background: rgba(10,12,15,.86); z-index: 130; display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }

/* 骨架屏 */
.sk { position: relative; overflow: hidden; background: var(--bg-soft); border-radius: 8px; }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation: sk-sweep 1.4s infinite; }
@keyframes sk-sweep { to { transform: translateX(100%); } }
.sk-avatar-line { width: 190px; height: 16px; margin-top: 5px; }
.sk-title { width: 68%; height: 20px; margin-top: 16px; }
.sk-line { width: 92%; height: 14px; margin-top: 12px; }
.sk-thumb { width: 168px; height: 106px; border-radius: 10px; }

/* ============ 深色模式：前端按「手动选择 or 跟随系统」写 html[data-theme]（JS 驱动，可手动覆盖） ============ */
:root[data-theme="dark"] {
  --brand: #D98B1E;
  --brand-deep: #E39A3B;
  --brand-tint: rgba(232, 161, 60, .16);
  --brand-tint-2: rgba(232, 161, 60, .18);
  --ink-1: #E9EBEE;
  --ink-2: #B7BBC1;
  --ink-3: #9298A0;
  --ink-4: #6A7078;
  --line: #272B31;
  --line-strong: #343A41;
  --page-bg: #121418;
  --card: #1B1F24;
  --bg-soft: #262B32;
  --hover-bg: #21262C;
  --ink-body: #C6CAD0;
  --quote-bg: #2B2415;
  --quote-ink: #D8B36A;
}
:root[data-theme="dark"] .topbar { box-shadow: 0 1px 0 var(--line); }
:root[data-theme="dark"] .topic-hero { background: linear-gradient(120deg, #241E10, #1B1F24 60%, #20190E); }
:root[data-theme="dark"] .reward-box { background: var(--card); }
:root[data-theme="dark"] .user-menu-item.danger:hover { background: rgba(224, 62, 45, .16); }
:root[data-theme="dark"] .sk::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }

/* 外观切换按钮（自动/浅色/深色循环） */
.theme-btn { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-soft); border: none; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); font-size: 15px; line-height: 1; }
.theme-btn:hover { color: var(--brand-deep); }

/* 热榜空态：图标 + 主文案 + 引导，替代孤零零一行小字 */
.hot-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 64px 0 56px; text-align: center; }
.hot-empty .he-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--brand-tint); display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 8px; }
.hot-empty .he-t { font-size: 16px; font-weight: 600; color: var(--ink-1); }
.hot-empty .he-d { font-size: 13.5px; color: var(--ink-3); line-height: 1.8; max-width: 420px; }