/* ============================================================
   微联 · 前台字体（2026-10-05 健康修复）
   原字体栈在 Windows 上完全失效：
     --font    -apple-system / PingFang SC / Hiragino Sans GB  → 全无 → 落微软雅黑
     --display "Georgia"/"Songti SC"/"STSong" → 中文落「宋体」 ⇒ 标题廉价感主因
   现改为自托管思源黑体（正文）+ 思源宋体（标题），均带 wght 100-900 可变轴，
   系统字体作为逐字回退兜底。
   ============================================================ */
@font-face {
  font-family: "Clara Web";
  src: url("fonts/clara-web.woff2") format("woff2-variations"),
       url("fonts/clara-web.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* 衬线标题字：分 core / ext 两层，用 unicode-range 精确切分（2026-10-05 性能治理）
   · core = 全站衬线标题真正用到的字符 + ASCII + 标点 → 每页只下 40KB（原先每页 425KB）
   · ext  = 字体内其余字符 → 只在出现未预期字符时才懒加载，永不阻塞首屏
   两层 unicode-range 互不重叠；只做字符裁剪、不改字形数据，渲染与改造前逐像素一致。 */
@font-face { font-family: "Clara Serif"; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url("fonts/clara-serif-core.woff2") format("woff2-variations"), url("fonts/clara-serif-core.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A5, U+00B0-00B1, U+00B7, U+00D7, U+00F7, U+2013-2014, U+201C-201D, U+2026, U+2190, U+2192, U+2212, U+2260, U+2264-2265, U+2605, U+2713, U+3001-3002, U+300A-3011, U+4E0A, U+4E2D, U+4E48, U+4F1A, U+4F3C, U+514B, U+5305, U+5353, U+53E3, U+540C, U+5458, U+5708, U+5728, U+57CE, U+5899, U+591A, U+5927, U+5B50, U+5B89, U+5BB6, U+5E01, U+5FC3, U+600E, U+60AC, U+62C9, U+63A5, U+641C, U+6587, U+660E, U+66F4, U+6863, U+6D77, U+70ED, U+7167, U+7247-7248, U+73A9, U+76F8, U+770B, U+7B14, U+7D22, U+7F6E, U+8BB0, U+8BBE, U+8BF4, U+8D4F, U+90FD, U+94B1, U+95E8, U+FF01, U+FF08-FF09, U+FF0B-FF0C, U+FF1A-FF1B, U+FF1F-FF20, U+FF5C, U+FF5E; }
@font-face { font-family: "Clara Serif"; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url("fonts/clara-serif-ext.woff2") format("woff2-variations"), url("fonts/clara-serif-ext.woff2") format("woff2");
  unicode-range: U+2030, U+2039-203A, U+21D2, U+2248, U+2460-246A, U+2500, U+2550, U+25B2, U+25B6, U+25C6-25C7, U+26A0, U+4E00, U+4E03, U+4E07, U+4E09, U+4E0B, U+4E0D-4E0E, U+4E13-4E14, U+4E1A, U+4E1D, U+4E22, U+4E24-4E25, U+4E2A, U+4E30, U+4E32, U+4E34, U+4E3A-4E3B, U+4E3E, U+4E45, U+4E49, U+4E4B, U+4E4E, U+4E50, U+4E5D, U+4E5F, U+4E66, U+4E70-4E71, U+4E86, U+4E88-4E89, U+4E8B-4E8C, U+4E8E, U+4E91-4E92, U+4E94, U+4E9B, U+4EA4, U+4EA7, U+4EAB-4EAC, U+4EAE, U+4EBA, U+4EC0, U+4EC5, U+4ECA-4ECB, U+4ECD-4ECE, U+4ED4, U+4ED6, U+4ED8, U+4EE3-4EE5, U+4EEA, U+4EEC, U+4EF6-4EF7, U+4EFB, U+4EFD, U+4EFF, U+4F11, U+4F18, U+4F20, U+4F24, U+4F2A, U+4F34, U+4F38, U+4F46, U+4F4D-4F4F, U+4F53, U+4F55, U+4F59, U+4F5C, U+4F60, U+4F7F, U+4F88, U+4F8B, U+4F9B, U+4F9D, U+4FA3, U+4FA7, U+4FAE, U+4FB5, U+4FBF, U+4FDD, U+4FE1, U+4FEE, U+4FF1, U+500D, U+5012, U+5019, U+501F, U+503C, U+5047, U+504F, U+505A, U+505C, U+5065, U+507F, U+50A8, U+50CF, U+50F5, U+5141, U+5143, U+5145, U+5148-5149, U+514D, U+5151, U+515C, U+5165, U+5168, U+516B-516D, U+5171, U+5173-5174, U+5176-5178, U+517C, U+5185, U+518C-518D, U+5192, U+5199, U+51B2-51B3, U+51B5, U+51B7, U+51C0, U+51C6, U+51CF, U+51D1, U+51E0, U+51ED, U+51FA-51FB, U+51FD, U+5206-5207, U+5212, U+5217-521B, U+521D, U+5220, U+5224, U+5229, U+522B, U+5230, U+5236-5237, U+523B, U+524D, U+5269-526A, U+526F, U+5272, U+529B, U+529E-52A1, U+52A8-52A9, U+52B1, U+52DF, U+52E4, U+52FE-52FF, U+5316-5317, U+5339-533A, U+533F, U+5341, U+5343, U+5347-5348, U+534A, U+534E-534F, U+5355-5356, U+535A, U+5360-5361, U+5370-5371, U+5373, U+5385-5386, U+538B, U+539F, U+53BB, U+53C2, U+53C8, U+53CA-53CD, U+53D1, U+53D6-53D8, U+53E0, U+53E4-53E6, U+53EA-53EB, U+53EF-53F0, U+53F2-53F3, U+53F6-53F8, U+5403-5404, U+5408-5409, U+540D-540E, U+5411, U+5417, U+541E, U+5426-5427, U+542B-542C, U+542F, U+5438, U+5446, U+544A, U+5468, U+547C-547D, U+548C, U+5496, U+54A8, U+54C1, U+54CD, U+54EA, U+552E-552F, U+5546, U+5561, U+5584, U+559C, U+5668, U+566A, U+56CA, U+56DB, U+56DE, U+56E0, U+56E2, U+56F4, U+56FA, U+56FD-56FE, U+5706, U+5730, U+5733, U+573A, U+573E, U+5740, U+5747, U+574F, U+5757, U+5782-5783, U+578B, U+57DF, U+57FA, U+5802, U+5806, U+5821, U+584C, U+585E, U+586B, U+5883, U+589E, U+58A8, U+58EB, U+58EE, U+58F0, U+58F3, U+5904, U+5907, U+590D, U+5916, U+591C, U+5929-592A, U+5931, U+5934, U+594F, U+5956-5957, U+5962, U+5979, U+597D, U+5982, U+59A5, U+59CB, U+59D4, U+5A01, U+5A92, U+5AD6, U+5B57-5B58, U+5B64, U+5B81, U+5B83, U+5B88, U+5B8C, U+5B98, U+5B9A, U+5B9E, U+5BA1-5BA2, U+5BA4, U+5BAB, U+5BB3, U+5BB5, U+5BB9, U+5BBD-5BBE, U+5BC6, U+5BCC, U+5BF9, U+5BFC, U+5C01, U+5C04, U+5C06, U+5C0A, U+5C0F, U+5C11, U+5C18, U+5C1A, U+5C31, U+5C38, U+5C3D-5C3E, U+5C40, U+5C42, U+5C45, U+5C4F, U+5C55, U+5C5E, U+5C65, U+5C81, U+5C9B, U+5D4C, U+5DE1, U+5DE5-5DE6, U+5DE8, U+5DEE, U+5DF1-5DF2, U+5E02-5E03, U+5E0C, U+5E16, U+5E26, U+5E2E, U+5E38, U+5E42, U+5E45, U+5E72-5E74, U+5E76, U+5E7F, U+5E8F, U+5E93-5E95, U+5E97, U+5E9F, U+5EA6, U+5EB7, U+5EC9-5ECA, U+5EF6, U+5EFA, U+5F00, U+5F02-5F03, U+5F0A, U+5F0F, U+5F15, U+5F20, U+5F31, U+5F39-5F3A, U+5F52-5F53, U+5F55, U+5F62, U+5F69, U+5F71, U+5F7B, U+5F80, U+5F84-5F85, U+5F88, U+5F8B, U+5F90, U+5F97, U+5FAA, U+5FAE, U+5FBD, U+5FC5, U+5FD7-5FD8, U+5FEB, U+6001, U+6016, U+6027, U+603B, U+6050, U+6052, U+6062, U+606D, U+606F-6070, U+6089, U+60A8, U+60C5, U+60F3, U+610F, U+611F, U+614E, U+6162, U+61C2, U+6210-6211, U+6216, U+622A, U+6233, U+6237, U+623F-6241, U+624B, U+624D, U+6253, U+6258, U+6263, U+6267, U+626B, U+6270, U+6279, U+627E-627F, U+6284, U+628A, U+6293, U+6295, U+6297-6298, U+629B, U+62A2, U+62A4-62A5, U+62AC, U+62C5-62C6, U+62CD, U+62D2, U+62DB, U+62DF, U+62E6, U+62E9, U+62EC, U+62FC, U+62FF, U+6301-6302, U+6307, U+6309, U+6311, U+6324, U+635F, U+6362, U+636E, U+6377, U+6388-6389, U+638C, U+6392, U+63A2, U+63A7-63A8, U+63AA, U+63CF-63D0, U+63D2, U+63E1, U+642C-642D, U+643A, U+6444, U+6446, U+644A, U+6458, U+6491, U+64A4, U+64AD, U+64CD, U+652F, U+6536, U+6539, U+653E-653F, U+6545, U+6548, U+654F, U+655B, U+6563, U+656C, U+6570, U+6574, U+6599, U+659C, U+65AD, U+65B0, U+65B9, U+65BD, U+65C1, U+65C5, U+65E0, U+65E2, U+65E5, U+65E7, U+65E9, U+65F6, U+6613, U+661F-6620, U+6628, U+662F, U+6635, U+663E, U+6668, U+666E-6670, U+6682, U+6696-6697, U+66B4, U+66FE-6700, U+6708-6709, U+670B, U+670D, U+671B, U+671F, U+672A-672C, U+672F, U+673A, U+6742-6743, U+6750, U+675C, U+675F-6761, U+6765, U+677E-677F, U+6781, U+6784, U+6790, U+679A, U+679C, U+67A2, U+67B6, U+67CF-67D0, U+67D3-67D4, U+67E5, U+6805, U+6807, U+680F, U+6821, U+6837-6839, U+683C, U+6843, U+6846, U+6848, U+684C, U+68AF, U+68C0, U+68D5, U+695A, U+6982, U+699C, U+69DB, U+6A21, U+6A2A, U+6A59, U+6B21-6B22, U+6B3A, U+6B3E, U+6B62-6B65, U+6B7B, U+6B8A-6B8B, U+6BB5, U+6BC1, U+6BCD, U+6BCF, U+6BD4, U+6BEB, U+6C11, U+6C14, U+6C1B, U+6C34, U+6C38, U+6C42, U+6C47, U+6C49, U+6C60, U+6C99, U+6CA1, U+6CBB, U+6CBF, U+6CC4, U+6CD5, U+6CE1, U+6CE8, U+6CF3, U+6CFD, U+6D1E, U+6D3B, U+6D41, U+6D45, U+6D4B, U+6D4E-6D4F, U+6D6E, U+6D88, U+6DB5, U+6DE1, U+6DEB, U+6DF1, U+6DF7, U+6DFB, U+6E05, U+6E10, U+6E20, U+6E32, U+6E38, U+6E90, U+6EA2, U+6EAF, U+6ED1, U+6EDA, U+6EE1, U+6EE4-6EE5, U+6EE9, U+6F02, U+6F0F, U+6F14, U+6F2B, U+6FC0, U+7011, U+7070, U+70B9, U+711A, U+7126, U+7136, U+719F, U+7206, U+724C, U+7259, U+7269, U+7279, U+72AF, U+72B6, U+72D7, U+72EC, U+732A, U+7387, U+73AF-73B0, U+7406, U+751C, U+751F, U+7528, U+7531-7533, U+7535, U+753B, U+7545, U+754C, U+7559, U+7565, U+7591, U+75D5, U+767B, U+767D-767E, U+7684, U+76CA, U+76D1, U+76D6, U+76D8, U+76EE, U+76F4, U+7709, U+771F, U+773C, U+7740, U+7761, U+77AC, U+77E5, U+77ED, U+77F3, U+7801, U+7816, U+7834, U+7840, U+786C, U+786E, U+793A, U+793E, U+7968, U+7981, U+79BB, U+79C1, U+79CB, U+79CD, U+79D1-79D2, U+79DF, U+79F0, U+79FB, U+79FD, U+7A0B, U+7A0D, U+7A33, U+7A3F, U+7A7A, U+7A7F, U+7A81, U+7A84, U+7A97, U+7ACB, U+7AD6, U+7AD9, U+7AE0, U+7AEF, U+7B26, U+7B2C, U+7B49, U+7B54, U+7B56, U+7B5B, U+7B7E, U+7B80, U+7B97, U+7BA1, U+7BB1, U+7C7B, U+7C89, U+7C97-7C98, U+7CBE, U+7CCA, U+7CFB, U+7D20, U+7D27, U+7D2B, U+7D2F, U+7E41, U+7EA0, U+7EA2, U+7EA6-7EA7, U+7EAC, U+7EAF, U+7EB5, U+7EB7, U+7EB9, U+7EBF, U+7EC3-7EC4, U+7EC6, U+7EC8, U+7ECD, U+7ECF, U+7ED1, U+7ED3, U+7ED5, U+7ED9, U+7EDC-7EDD, U+7EDF, U+7EE7, U+7EEA, U+7EED, U+7EF4, U+7EFF-7F00, U+7F13, U+7F16, U+7F18, U+7F29, U+7F3A, U+7F51, U+7F69, U+7F72, U+7F8E, U+7FA4, U+7FFB, U+8001, U+8005, U+800C, U+804A, U+804C, U+8054, U+805A, U+8089, U+8096, U+80A1, U+80CC, U+80F6, U+80FD, U+810F, U+8111, U+811A, U+8131, U+81EA, U+81F3-81F4, U+8212, U+822A, U+8239, U+8247, U+8272, U+827A, U+8282, U+829D, U+82B1, U+82E5, U+82F1, U+82F9, U+8303, U+8336, U+8349, U+8350, U+8361, U+83B7, U+83DC, U+83F1, U+8425, U+843D, U+8457, U+84DD, U+853D, U+85CF, U+865A, U+884C, U+8857, U+8863, U+8865, U+8868, U+886C, U+88AB, U+88C1, U+88C5, U+88F8-88F9, U+897F, U+8981, U+8986, U+89C1-89C2, U+89C4, U+89C6, U+89C8-89C9, U+89D2, U+89E3, U+89E6, U+8A00, U+8A89, U+8B66, U+8BA1-8BA2, U+8BA4, U+8BA9, U+8BAE-8BAF, U+8BB8, U+8BBA, U+8BBC, U+8BBF, U+8BC1, U+8BC4, U+8BC6, U+8BC8-8BC9, U+8BCD, U+8BD1, U+8BD5, U+8BDA, U+8BDD, U+8BE2, U+8BE5-8BE6, U+8BED, U+8BEF, U+8BF7, U+8BFB, U+8BFD, U+8C01, U+8C03, U+8C22, U+8C24, U+8C28, U+8C61, U+8D1F, U+8D22-8D23, U+8D25-8D26, U+8D28, U+8D2D, U+8D34-8D35, U+8D37, U+8D39, U+8D44, U+8D4C, U+8D56, U+8D5A, U+8D5E, U+8D60, U+8D70, U+8D77, U+8D85, U+8D8A, U+8DA3, U+8DB3, U+8DC3, U+8DD1, U+8DDD, U+8DDF, U+8DE8, U+8DEF, U+8DF3, U+8E22, U+8EAB, U+8F66, U+8F6C, U+8F6E-8F6F, U+8F7B, U+8F7D, U+8F85, U+8F91, U+8F93, U+8F96, U+8F9E, U+8FA8, U+8FB1, U+8FB9, U+8FBE, U+8FC7, U+8FCE, U+8FD0-8FD1, U+8FD4, U+8FD8-8FD9, U+8FDB-8FDF, U+8FF0, U+8FFD, U+9000-9002, U+9006, U+9009, U+900F-9010, U+9012, U+9014, U+9017, U+901A-901B, U+901F-9020, U+903B, U+9047, U+904D, U+9053, U+9057, U+906E, U+9075, U+907F-9080, U+90A3, U+90AE, U+90E8, U+914D, U+9152, U+9192, U+91C7, U+91CA, U+91CC-91CD, U+91CF, U+91D1, U+9274, U+949F, U+94A5-94A6, U+94AE, U+94BB, U+94C1, U+94DC, U+94F6, U+94FA, U+94FE, U+9500-9501, U+9510, U+9519-951A, U+952E, U+957F, U+95EA, U+95ED-95EE, U+95F4, U+9605, U+9608, U+961F, U+9632, U+9634, U+9636, U+963B, U+963F, U+9644-9645, U+964D, U+9650, U+9662, U+9664, U+9669, U+9677, U+968F-9690, U+9694, U+969C, U+96BE, U+96C6, U+96F6, U+9700, U+9732, U+9738, U+9752, U+9759, U+975E, U+9760, U+9762, U+97F3, U+9875-9876, U+9879-987B, U+9884, U+9886, U+9891, U+9897-9898, U+989D, U+98CE, U+98DE-98DF, U+9910, U+996D, U+9970-9971, U+9986, U+9988, U+9996, U+9A71, U+9A73, U+9A7B, U+9A82, U+9A8C, U+9A97, U+9AA4, U+9AA8, U+9AD8, U+9EA6, U+9ED1, U+9ED8, U+9F50, U+9F99; }

/* ============================================================
   微联网页版 · v4 「小红书原版 · 精致生活社区」
   ------------------------------------------------------------
   设计主张：对齐小红书 App —— 暖灰画布、密集卡片、信息丰富。
   · 画布 #F5F5F5（暖灰，卡片浮起才有层次）
   · 照片一律方角（0 圆角），卡片方角
   · 品牌红 #FF2442 唯一强调色
   · 卡片白底 + 细描边，密集排布，信息丰富
   ============================================================ */

:root {
  --red: #1677FF;
  --red-deep: #1260CC;
  --danger: #F53F3F;

  --paper: #FFFFFF;   /* 暖灰画布（小红书同款） */
  --card: #FFFFFF;    /* 卡片纯白 */
  --ink: #1A1A1A;
  --ink-2: #6A6A6A;
  --ink-3: #9A9A9A;
  --hair: #E8E8E8;

  --r-photo: 0px;    /* 照片一律方角 */
  --r-card: 0px;     /* 卡片方角 */
  --r-pill: 9999px;

  --font: "Clara Web", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Source Han Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --display: "Clara Serif", Georgia, "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC", "SimSun", serif;

  --shadow-hover: 0 10px 30px -12px rgba(20, 20, 20, .18);
  --shadow-card: 0 2px 10px -4px rgba(20, 20, 20, .08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font-family: var(--font); }
button { cursor: pointer; border: none; background: none; }
::selection { background: rgba(255, 36, 66, .18); }

.num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.eyebrow {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

.display {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: .005em;
  line-height: 1.12;
}

/* ============ 左侧导航 ============ */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 220px;
  padding: 26px 16px 20px;
  display: flex;
  flex-direction: column;
  z-index: 100;
  background: var(--card);
  border-right: 1px solid var(--hair);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 15px;
  color: var(--ink-2);
  margin-bottom: 2px;
  transition: color .18s, background .18s;
}
.nav-item .ico {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-item .ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-item:hover { color: var(--ink); background: #FAFAFA; }
.nav-item.active { color: var(--ink); font-weight: 600; }
.nav-item.active .ico { color: var(--red); }
.nav-dot {
  margin-left: auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--danger);
}
.nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  border-radius: var(--r-pill);
  padding: 0 8px;
  line-height: 19px;
  font-weight: 600;
}

.sidebar-bottom { margin-top: auto; }
.btn-publish {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 13px 0;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .03em;
  transition: background .2s, transform .2s;
}
.btn-publish:hover { background: var(--red); transform: translateY(-1px); }

.wallet-strip {
  padding: 13px 16px;
  margin: 16px 4px 6px;
  border-radius: 14px;
  background: #FAFAFA;
}
.wallet-strip b { font-size: 15px; display: block; font-weight: 600; }
.wallet-strip span { font-size: 12px; color: var(--ink-3); }
.vip-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: var(--r-pill);
  padding: 0 7px;
  margin-left: 7px;
  vertical-align: 2px;
  letter-spacing: .06em;
}

/* ============ 主区骨架 ============ */
.main { margin-left: 220px; min-height: 100vh; padding: 0 56px 100px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 0 14px;
  background: rgba(245, 245, 245, .85);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}
.search-box {
  width: 400px;
  height: 40px;
  border-radius: var(--r-pill);
  background: #EBEBEB;
  border: none;
  outline: none;
  padding: 0 20px;
  font-size: 14px;
  color: var(--ink);
  transition: background .18s;
}
.search-box::placeholder { color: var(--ink-3); }
.search-box:focus { background: #fff; box-shadow: 0 0 0 1.5px var(--ink); }

/* 页头 */
.page-head { max-width: 1280px; margin: 22px auto 0; }
.page-head .eyebrow { margin-bottom: 6px; }
.page-head h1 { font-size: 28px; font-weight: 600; letter-spacing: .01em; }
.page-head .sub { color: var(--ink-2); margin-top: 6px; font-size: 14px; }
.page-head .rule {
  height: 1px; background: var(--hair);
  margin: 18px 0 0;
}

/* ============ 瀑布流 ============ */
.waterfall {
  column-count: 4;
  column-gap: 14px;
  max-width: 1280px;
  margin: 24px auto 0;
}
@media (max-width: 1400px) { .waterfall { column-count: 4; } }
@media (max-width: 1160px) { .waterfall { column-count: 3; } }
@media (max-width: 900px)  { .waterfall { column-count: 2; } }

.wf-item {
  break-inside: avoid;
  margin-bottom: 16px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
.wf-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: #ddd; }

.wf-cover { position: relative; overflow: hidden; }
.wf-cover img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.wf-item:hover .wf-cover img { transform: scale(1.03); }
.photo { object-fit: cover; display: block; }
.cover-tag {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(15, 15, 15, .55);
  color: #fff;
  font-size: 11.5px;
  border-radius: var(--r-pill);
  padding: 3px 12px;
  letter-spacing: .04em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cover-tag.red { background: var(--red); }
.cover-tag.ink { background: rgba(15, 15, 15, .7); }

.wf-body { padding: 11px 14px 13px; }
.wf-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wf-foot { display: flex; align-items: center; margin-top: 9px; }
.wf-avatar {
  width: 20px; height: 20px;
  border-radius: 50%;
  margin-right: 7px;
  flex-shrink: 0;
  object-fit: cover;
}
.wf-author { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-like { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-3); }
.wf-like svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 1.7; transition: stroke .18s, fill .18s; }
.wf-item:hover .wf-like svg { stroke: var(--red); fill: rgba(22, 119, 255,.08); }

/* 频道条（小红书顶部频道） */
.channel-bar {
  display: flex;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 16px auto 0;
}
.channel {
  padding: 6px 16px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--hair);
  transition: color .18s, background .18s, border .18s;
}
.channel:hover { color: var(--ink); }
.channel.active { background: var(--red); color: #fff; font-weight: 600; border-color: var(--red); }

/* ============ 按钮 ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--r-pill);
  padding: 11px 28px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: opacity .18s, background .18s, transform .18s;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-deep); transform: translateY(-1px); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { opacity: .86; }
.btn-ghost { border: 1px solid #E5E5E5; color: var(--ink); background: transparent; }
.btn-ghost:hover { background: #FAFAFA; }
.btn-sm { padding: 7px 18px; font-size: 13px; }

/* ============ 卡片与列表 ============ */
.card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  padding: 20px;
}
.card + .card { margin-top: 14px; }
.card-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.card-title .eyebrow { margin-left: auto; }

.row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--hair);
}
.row:last-child { border-bottom: none; }
.row .grow { flex: 1; min-width: 0; }
.row .t { font-size: 15px; font-weight: 500; }
.row .s { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.row .val { font-size: 14px; color: var(--ink-2); }
.row .arrow { color: var(--ink-3); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* 标签（小红书话题标签：浅灰底胶囊） */
.tag {
  display: inline-flex; align-items: center;
  font-size: 12px;
  color: #666;
  background: #F0F0F0;
  border-radius: var(--r-pill);
  padding: 3px 12px;
}
.tag.red { color: var(--red); background: rgba(22, 119, 255,.08); font-weight: 500; }

.avatar {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* 表单 */
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 9px; color: var(--ink-2); }
.input, .textarea, .select {
  width: 100%;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  background: #FFF;
  padding: 13px 16px;
  font-size: 14.5px;
  color: var(--ink);
  outline: none;
  transition: border .18s;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--ink); }
.textarea { resize: none; line-height: 1.7; }

.switch { position: relative; width: 44px; height: 26px; border-radius: var(--r-pill); background: #E5E5E5; transition: background .18s; flex-shrink: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .18s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch.on { background: var(--red); }
.switch.on::after { left: 21px; }

.tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--hair); }
.tab { padding: 13px 2px; font-size: 15px; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--red); }

/* ============ IM 双栏 ============ */
.im-wrap {
  display: flex;
  max-width: 1280px;
  margin: 0 auto;
  height: calc(100vh - 92px);
  gap: 22px;
}
.conv-pane {
  width: 320px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.conv-head { padding: 18px 20px 12px; }
.conv-list { flex: 1; overflow-y: auto; padding: 6px 10px 10px; }
.conv {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: background .15s;
}
.conv:hover { background: #FAFAFA; }
.conv.active { background: #F5F5F5; }
.conv .avatar { width: 46px; height: 46px; }
.conv .name { font-size: 15px; font-weight: 500; }
.conv .prev { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv .meta { margin-left: auto; text-align: right; flex-shrink: 0; }
.conv .time { font-size: 11px; color: var(--ink-3); }
.conv .dot { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; border-radius: var(--r-pill); background: var(--danger); color: #fff; font-size: 10px; padding: 0 5px; margin-top: 4px; }

.chat-pane {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 22px;
  border-bottom: 1px solid var(--hair);
}
.chat-body { flex: 1; overflow-y: auto; padding: 28px 32px; display: flex; flex-direction: column; gap: 20px; }
.msg { display: flex; gap: 12px; max-width: 68%; }
.msg .avatar { width: 38px; height: 38px; }
.bubble {
  background: #FFFFFF;
  border: 1px solid #EFEBE3;
  border-radius: 2px 12px 12px 12px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.msg.me .bubble { background: linear-gradient(135deg, #1677FF, #4C9AFF); color: #FFFFFF; border-radius: 12px 2px 12px 12px; }
.sys-line { align-self: center; font-size: 12px; color: var(--ink-3); border-radius: var(--r-pill); padding: 3px 14px; }
.chat-input {
  border-top: 1px solid var(--hair);
  padding: 12px 18px;
  display: flex; align-items: center; gap: 8px;
}
.chat-input .tools { display: flex; gap: 4px; }
.tool-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  transition: background .15s, color .15s;
}
.tool-btn:hover { background: #F5F5F5; color: var(--ink); }
.tool-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chat-input input {
  flex: 1;
  border: none; outline: none; background: transparent;
  font-size: 14.5px; color: var(--ink);
  padding: 8px 4px;
}
.send-btn {
  background: var(--red);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 8px 22px;
  font-size: 13.5px;
  font-weight: 600;
}

.msgcard {
  min-width: 220px;
  border-radius: 14px;
  padding: 13px 17px;
  color: #fff;
}
.msgcard.red { background: linear-gradient(135deg, #FF6A3D, #FF2442); }
.msgcard.orange { background: linear-gradient(135deg, #FFB13D, #F2790F); }
.msgcard .mc-t { font-size: 15px; font-weight: 600; }
.msgcard .mc-s { font-size: 11.5px; opacity: .85; margin-top: 3px; }
.msgcard .mc-amt { font-size: 26px; font-weight: 700; letter-spacing: .01em; }

.footer {
  max-width: 1280px;
  margin: 90px auto 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between; align-items: center;
  color: var(--ink-3);
  font-size: 12.5px;
}
/* ==========================================================================
   微联 · 视觉整改 v2（2026-10-03）
   整改方向：① 间距/留白 ② 瀑布流比例统一 ③ 配色/氛围 ④ 侧边栏导航 ⑤ 页面头部
   说明：本段覆盖前面的同名规则，只在文件末尾追加，不改动原有代码逻辑。
   ========================================================================== */

/* ---------- ③ 配色/氛围：更精致的暖调 ---------- */
:root {
  --paper: #F7F6F3;                          /* 画布：更暖、更有质感 */
  --card: #FFFFFF;
  --ink: #17161A;                            /* 主字：略偏冷黑，更利落 */
  --ink-2: #6B6870;
  --ink-3: #A09DA6;
  --hair: #ECEAE6;                           /* 描边：更柔和 */
  --brand-tint: rgba(22, 119, 255, .08);      /* 品牌浅底（active 态用） */
  --shadow-card: 0 1px 2px rgba(23,22,26,.04), 0 8px 24px -14px rgba(23,22,26,.12);
  --shadow-hover: 0 2px 6px rgba(23,22,26,.05), 0 18px 40px -18px rgba(23,22,26,.22);
  --shadow-float: 0 12px 32px -12px rgba(23,22,26,.16);
}

/* ---------- ① 间距/留白：统一基准 ---------- */
.sidebar {
  width: 240px;
  padding: 26px 18px 22px;
}
.main {
  margin-left: 240px;
  padding: 0 52px 104px;
}
.page-head {
  max-width: 1240px;
  margin: 26px auto 0;
}
.waterfall,
.channel-bar,
.page-head {
  max-width: 1240px;
}

/* ---------- ④ 侧边栏/导航：更清晰的状态与呼吸感 ---------- */
.nav-item {
  gap: 12px;
  padding: 11px 14px;
  border-radius: 11px;
  font-size: 14.5px;
  margin-bottom: 3px;
  position: relative;
}
.nav-item:hover { background: #F4F3F0; }
.nav-item.active {
  color: var(--ink);
  font-weight: 600;
  background: var(--brand-tint);
}
.nav-item.active .ico { color: var(--red); }
.nav-item.active::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0;
  background: var(--red);
}

.sidebar-bottom { margin-top: auto; padding-top: 14px; }
.btn-publish {
  border-radius: 11px;
  box-shadow: 0 6px 18px -8px rgba(22,119,255,.5);
}
.wallet-strip {
  border-radius: 11px;
  background: #F4F3F0;
}

/* ---------- ⑤ 页面头部：去掉横线，更克制 ---------- */
.page-head .eyebrow {
  color: var(--red);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.page-head h1 {
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.page-head .sub {
  color: var(--ink-2);
  margin-top: 8px;
  font-size: 14px;
}
.page-head .rule { display: none; }          /* 取消装饰横线，靠留白分隔 */

/* ---------- ② 瀑布流：图片比例统一 + 卡片精致化 ---------- */
.waterfall {
  column-gap: 16px;
  margin: 26px auto 0;
}
.wf-item {
  margin-bottom: 16px;
  border-radius: 14px;
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-card);
  transition: transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s, border-color .26s;
}
.wf-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: #E2DFD9;
}
/* 关键：统一封面比例 3:4，图片裁切填充，消除高低不齐 */
.wf-cover {
  aspect-ratio: 3 / 4;
  background: #F0EFEC;
}
.wf-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 列表里的小缩略图保持自身比例 */
.wf-item .row .photo { aspect-ratio: auto; }

.wf-body { padding: 12px 14px 14px; }
.wf-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.52;
  letter-spacing: -0.005em;
}
.wf-foot { margin-top: 11px; }
.wf-avatar {
  width: 22px; height: 22px;
  margin-right: 8px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04) inset;
}
.wf-author { font-size: 12.5px; }
.wf-like { font-size: 12.5px; }

/* 封面标签更精致 */
.cover-tag {
  top: 10px; right: 10px;
  font-size: 11px;
  padding: 4px 11px;
  border-radius: 8px;
  letter-spacing: .03em;
}

/* ---------- 频道条：更紧凑 ---------- */
.channel-bar {
  margin: 18px auto 0;
  gap: 6px;
}
.channel {
  padding: 7px 16px;
  font-size: 13px;
  border-radius: 9px;
  transition: color .18s, background .18s, border .18s;
}
.channel.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ---------- 卡片统一 ---------- */
.card {
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--hair);
  padding: 22px;
}
.card + .card { margin-top: 16px; }

/* 按钮更精致 */
.btn { border-radius: 10px; padding: 11px 26px; }
.btn-primary { box-shadow: 0 6px 18px -8px rgba(22,119,255,.5); }
.btn-ink { border-radius: 10px; }
.btn-ghost { border-radius: 10px; }

/* 标签 */
.tag { border-radius: 8px; }

/* ---------- 响应式补齐 ---------- */
@media (max-width: 1160px) {
  .main { padding: 0 36px 88px; }
}
@media (max-width: 900px) {
  .sidebar { width: 200px; }
  .main { margin-left: 200px; padding: 0 24px 72px; }
  .page-head h1 { font-size: 26px; }
}
/* ==========================================================================
   微联 · 小红书设计规范 v5（2026-10-03）
   依据：xiaohongshu.com/explore 提取的官方设计 token
   —— 品牌红 #FF2442 · Light-only · 16px 圆角白卡 · 999px 胶囊 · PingFang SC
   这是覆盖层，写在 clara.css 末尾，用于把全站拉回小红书规范。
   ========================================================================== */

/* ---------- Color · 色彩（官方 token） ---------- */
:root {
  --brand: #1677FF;            /* 品牌红（招牌） */
  --brand-deep: #1260CC;       /* 深红 */
  --pink: #FF6B9D;             /* 粉（渐变伴侣） */
  --rose-soft: #FFE8EC;        /* 浅粉底 */
  --hot-orange: #FF6B35;       /* 热门 */
  --coin-gold: #FFC83D;        /* 等级/金币 */
  --trend-up: #00B578;         /* 上升绿 */

  --ink: #1A1A1A;              /* 主文字 */
  --ink-muted: #666666;        /* 次级 */
  --ink-dim: #999999;          /* 辅助 */
  --canvas: #F7F7F7;           /* 画布 */
  --card: #FFFFFF;             /* 卡片纯白 */
  --border: #EFEFEF;           /* 描边 */

  /* 沿用旧变量名（兼容页面里已有的引用） */
  --paper: #F7F7F7;
  --ink-2: #666666;
  --ink-3: #999999;
  --hair: #EFEFEF;
  --red: #1677FF;
  --red-deep: #1260CC;

  /* 签名渐变：品牌红 → 粉，135° */
  --grad-brand: linear-gradient(135deg, #1677FF 0%, #4C9AFF 100%);

  /* 圆角阶梯 */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 20px; --r-pill: 999px;

  /* 阴影（浅色底的克制阴影） */
  --shadow-card: 0 1px 2px rgba(0,0,0,.04);
  --shadow-hover: 0 8px 24px -8px rgba(0,0,0,.14);
}

/* ---------- 全局：Light-only ---------- */
html, body { background: var(--canvas); color: var(--ink); }

/* ---------- 侧边栏 ---------- */
.sidebar {
  width: 240px;
  background: #FFFFFF;
  border-right: 1px solid var(--border);
}
.nav-item {
  border-radius: var(--r-pill);          /* 胶囊导航（官方） */
  color: var(--ink-muted);
  font-size: 14.5px;
  padding: 11px 16px;
  margin-bottom: 4px;
}
.nav-item:hover { background: #F5F5F5; color: var(--ink); }
.nav-item.active {
  background: #1A1A1A;                   /* ★ 官方：黑色 active 胶囊，不是红 */
  color: #FFFFFF;
  font-weight: 600;
}
.nav-item.active .ico { color: #FFFFFF; }
.nav-item.active::before { display: none; }
.nav-badge { background: var(--danger); color: #fff; }

.btn-publish {
  border-radius: var(--r-pill);
  background: var(--brand);              /* 红色主 CTA */
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 18px -8px rgba(22,119,255,.5);
}
.btn-publish:hover { background: var(--brand-deep); }

.wallet-strip {
  border-radius: var(--r-lg);
  background: var(--rose-soft);
  border: none;
}
.wallet-strip .num { color: var(--brand); font-weight: 700; }
.wallet-strip span { color: var(--ink-muted); }
.vip-tag {
  background: var(--coin-gold);
  color: #4A3200;
  border-radius: var(--r-pill);
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
}

/* ---------- 顶栏搜索：圆形按钮 + 胶囊输入（官方） ---------- */
.search-box {
  border-radius: var(--r-pill);
  background: #F5F5F5;
  border: 1px solid transparent;
  color: var(--ink);
  padding: 11px 20px;
}
.search-box::placeholder { color: var(--ink-dim); }
.search-box:focus {
  background: #fff;
  border-color: var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* ---------- 页面头部：小红书式克制 ---------- */
.page-head .eyebrow {
  color: var(--brand);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .12em;
}
.page-head h1 { font-size: 21px; font-weight: 700; letter-spacing: -0.5px; }
.page-head .sub { color: var(--ink-muted); font-size: 13px; }
.page-head .rule { display: none; }

/* ---------- 分类胶囊：默认白底描边，active 黑胶囊 ---------- */
.channel-bar { gap: 8px; }
.channel {
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink-muted);
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 18px;
}
.channel:hover { background: #F5F5F5; color: var(--ink); }
.channel.active {
  background: #1A1A1A;                   /* ★ 官方：黑胶囊 */
  border-color: #1A1A1A;
  color: #fff;
  font-weight: 600;
}

/* ---------- 瀑布流：16px 圆角白卡（r-xl） ---------- */
.waterfall { column-gap: 16px; }
.wf-item {
  border-radius: var(--r-xl);            /* ★ 16px */
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s;
}
.wf-item:hover {
  transform: translateY(-4px);           /* 官方：hover 只抬升，不放大字号 */
  box-shadow: var(--shadow-hover);
  border-color: var(--border);
}
.wf-cover { aspect-ratio: 3 / 4; background: #F2F2F2; }
.wf-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wf-body { padding: 12px 14px 14px; }
.wf-title {
  font-size: 14px;                       /* ★ 官方：14px / 500，视觉锚点 */
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  -webkit-line-clamp: 2;
}
.wf-foot { margin-top: 10px; }
.wf-avatar { width: 22px; height: 22px; border-radius: 50%; box-shadow: none; }
.wf-author { font-size: 12px; color: var(--ink-muted); }
.wf-like { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.wf-like svg { width: 15px; height: 15px; stroke: var(--ink-muted); }
.wf-item:hover .wf-like svg { stroke: var(--brand); fill: rgba(22, 119, 255,.08); }

/* 封面徽章：pill */
.cover-tag {
  top: 10px; right: 10px;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 11px;
  padding: 4px 12px;
  backdrop-filter: blur(6px);
  border: none;
}
.cover-tag.red { background: var(--brand); color: #fff; }
.cover-tag.ink { background: rgba(0,0,0,.66); color: #fff; }

/* ---------- 卡片与列表 ---------- */
.card {
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow-card);
  padding: 22px;
}
.card-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.row { border-bottom: 1px solid var(--border); }
.row .t { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.row .s { font-size: 12px; color: var(--ink-dim); }
.row .val { color: var(--ink-muted); }

/* ---------- 按钮：胶囊（官方） ---------- */
.btn {
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 14px;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(22,119,255,.5);
}
.btn-primary:hover { background: var(--brand-deep); }
.btn-ink { background: #1A1A1A; color: #fff; border-radius: var(--r-pill); }
.btn-ink:hover { opacity: .88; }
.btn-ghost {
  border: 1px solid var(--border);
  color: var(--ink);
  background: #fff;
  border-radius: var(--r-pill);
}
.btn-ghost:hover { background: #F5F5F5; }

/* ---------- 话题标签：# 品牌红 ---------- */
.tag {
  border-radius: var(--r-pill);
  background: #F5F5F5;
  color: var(--ink-muted);
  font-size: 12px;
  padding: 4px 12px;
  border: none;
}
.tag.red, .hashtag { background: transparent; color: var(--brand); font-weight: 500; }

/* ---------- 金币/会员：金色 ---------- */
.member-tag, .vip-badge { background: var(--coin-gold); color: #4A3200; border-radius: var(--r-pill); font-weight: 700; }
.bounty, .reward-amount { color: var(--hot-orange); font-weight: 700; }
.balance-num, .member-price { color: var(--brand); font-weight: 700; }

/* ---------- 表单输入 ---------- */
input, textarea, select {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--ink);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 3px rgba(22,119,255,.10);
}

/* ---------- 渐变元素（品牌签名） ---------- */
.gradient-brand { background: var(--grad-brand); }
.live-badge { background: var(--brand); color: #fff; border-radius: var(--r-pill); }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #DCDCDC; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #C4C4C4; }

/* ============================================================
   微联网页版 · v5 「高级 · 墨金象牙」精修层
   ------------------------------------------------------------
   设计主张：从"密集小红书风"升级为"高级编辑杂志风"
   · 象牙白画布 #FAF9F6，卡片纯白，大量留白
   · 墨 #161616 + 金 #1677FF 双色体系（品牌红让位于金）
   · 标题用衬线 Georgia/Songti，正文用系统无衬线
   · 细描边 + 柔阴影，克制、精致
   ============================================================ */

:root {
  --red: #1677FF;
  --red-deep: #1260CC;
  --paper: #FFFFFF;
  --card: #FFFFFF;
  --ink: #161616;
  --ink-2: #5C5C60;
  --ink-3: #9C9C9E;
  --hair: #E9E5DE;
  --gold: #1677FF;
  --gold-soft: #D6E9FF;
  --shadow-hover: 0 24px 48px -20px rgba(20, 20, 20, .16);
  --shadow-card: 0 1px 2px rgba(20, 20, 20, .04), 0 16px 40px -24px rgba(20, 20, 20, .10);
}

html, body { background: var(--paper); color: var(--ink); }
::selection { background: rgba(22, 119, 255, .16); }

/* ---- 侧栏：白底 + 细描边，更克制 ---- */
.sidebar {
  background: #FFFFFF;
  border-right: 1px solid var(--hair);
  padding: 28px 16px;
}
.nav-item {
  color: var(--ink-2);
  border-radius: 12px;
  font-size: 14.5px;
  padding: 11px 14px;
  transition: background .18s, color .18s;
}
.nav-item:hover { background: #F6F3EC; color: var(--ink); }
.nav-item.active {
  background: #F6F3EC;
  color: var(--ink);
  box-shadow: none;
}
.nav-item.active .ico svg { color: var(--gold); stroke: var(--gold); }
.nav-badge.num { background: var(--gold); }
.btn-publish { background: var(--ink); color: #fff; border-radius: 12px; font-weight: 600; }
.btn-publish:hover { background: var(--gold); }
.wallet-strip { background: #FBF8F1; border: 1px solid var(--hair); border-radius: 12px; }

/* ---- 顶栏搜索框 ---- */
.topbar { max-width: 1200px; margin: 0 auto; }
.search-box { background: #FFFFFF; border: 1px solid var(--hair); border-radius: 999px; }

/* ---- 杂志页头：衬线大标题 + 金色眉题 + 更多留白 ---- */
.main { max-width: 1200px; }
.page-head { padding: 44px 0 22px; }
.eyebrow { color: var(--gold); font-weight: 600; letter-spacing: .26em; }
.page-head h1 {
  font-family: var(--display);
  font-size: 46px;
  font-weight: 500;
  letter-spacing: .02em;
  margin-top: 10px;
}
.page-head .sub { font-size: 15px; color: var(--ink-2); margin-top: 10px; }
.page-head .rule {
  width: 56px; height: 3px; background: var(--gold);
  margin-top: 20px; border-radius: 2px;
}

/* ---- 频道栏：克制的下划线，金色强调 ---- */
.channel { color: var(--ink-2); font-size: 14px; padding: 8px 16px; }
.channel:hover { color: var(--ink); }
.channel.active { color: var(--ink); font-weight: 600; }
.channel.active::after { background: var(--gold); }

/* ---- 瀑布流卡片：细描边 + 柔阴影 + 精致 ---- */
.waterfall { column-gap: 20px; max-width: 1200px; }
.wf-item { background: #fff; border: 1px solid var(--hair); margin-bottom: 20px; }
.wf-item:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.wf-title { font-size: 15px; line-height: 1.55; font-weight: 500; }
.wf-author { color: var(--ink-2); }
.wf-like { color: var(--ink-3); }
.wf-item:hover .wf-like svg { stroke: var(--gold); fill: rgba(22, 119, 255, .08); }
.cover-tag { background: rgba(20, 20, 20, .5); border-radius: 8px; }
.cover-tag.red { background: var(--gold); }

/* ---- 页脚 ---- */
.footer { color: var(--ink-3); border-top: 1px solid var(--hair); }

/* ============================================================
   微联网页版 · v6 「高级编辑杂志风」精修层（在 v5 之上）
   核心：衬线大标题 · 大量留白 · 克制的金 · 精致的卡片层次
   ============================================================ */

/* 正文行高更松 */
html, body { font-size: 15px; line-height: 1.7; }

/* 顶栏 */
.topbar { padding: 20px 0 0; }
.search-box {
  height: 44px;
  padding: 0 22px;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(20,20,20,.03);
  transition: box-shadow .2s, border-color .2s;
}
.search-box:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(22, 119, 255,.08); }

/* 页头：编辑杂志感 */
.page-head { padding: 48px 0 26px; }
.page-head h1 { font-size: 52px; line-height: 1.1; }
.page-head .sub { font-size: 16px; letter-spacing: .01em; }

/* 频道栏 */
.channel-bar { margin: 0 0 6px; border-bottom: 1px solid var(--hair); }
.channel { padding: 12px 18px; }
.channel.active::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px;
  height: 2px; background: var(--gold); border-radius: 1px;
}
.channel { position: relative; }

/* 瀑布流卡片：更精致 */
.waterfall { margin-top: 22px; }
.wf-item { box-shadow: var(--shadow-card); }
.wf-body { padding: 14px 16px 16px; }
.wf-title { font-size: 15px; font-weight: 500; line-height: 1.6; }
.wf-foot { margin-top: 10px; }
.wf-avatar { width: 22px; height: 22px; border-radius: 50%; }

/* 金标封面角标 */
.cover-tag { font-weight: 600; letter-spacing: .02em; backdrop-filter: blur(4px); }

/* 空态/加载骨架：暖金 */
.wf-cover { background: #F4EFE4; }

/* 通用按钮：高级胶囊 */
.btn-publish { box-shadow: 0 10px 24px -12px rgba(22, 119, 255,.7); }

/* 照片墙/瀑布流：3:4 竖版比例，不裁头（老板 10-03 反馈） */
.wf-cover { height: auto; aspect-ratio: 3 / 4; background: #F1EDE3; }
.wf-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

/* 排序栏 */
.sort-bar { display:flex; align-items:center; gap:8px; margin:4px 0 6px; }
.sort-label { font-size:12px; color:var(--ink-3); letter-spacing:.08em; margin-right:2px; }
.sort { padding:7px 16px; font-size:13px; color:var(--ink-2); border-radius:999px; border:1px solid var(--hair); background:#fff; cursor:pointer; transition:color .15s, background .15s; }
.sort:hover { color:var(--ink); border-color:#D8D2C6; }
.sort.active { color:#fff; background:var(--ink); border-color:var(--ink); }


/* 卡片 hover：作者与点赞信息层级提升（编辑杂志风 · #46） */
.wf-item:hover .wf-author { color: var(--ink); }
.wf-item:hover .wf-like { color: #4C9AFF; }
.wf-item:hover .wf-title { color: #7a6112; }

/* ===== D-02 照片全部直角（老板 10-03 反馈）：照片墙瀑布流卡片去圆角 ===== */
.wf-item { border-radius: 0 !important; }


/* 侧栏层级：主导航与底部工具区分组（#44） */
.sidebar-bottom { border-top: 1px solid var(--hair); padding-top: 18px; }


/* ============================================================
   IM 媒体消息（P0 修复 2026-10-03）：视频/图片用播放器与缩略图，
   不再把 /api/uploads/... 原始 URL 当文本显示
   ============================================================ */
.bubble.media-bubble {
  padding: 4px;
  background: #FFFFFF !important;
  border: 1px solid var(--hair);
  background-image: none !important;
  overflow: hidden;
}
.msg-video {
  display: block;
  max-width: 240px;
  max-height: 320px;
  width: auto;
  border-radius: 9px;
  background: #111;
}
.msg-image {
  display: block;
  max-width: 200px;
  max-height: 260px;
  border-radius: 9px;
  object-fit: cover;
}


/* ============================================================
   P1 修复（2026-10-03）：无图动态→文字卡 / 视频无封面→播放占位 / 可见性标识
   ============================================================ */
.wf-text-cover {
  min-height: 190px;
  padding: 26px 22px;
  display: flex;
  align-items: center;
  background: linear-gradient(150deg, #FCF9F2 0%, #F4EDE0 100%);
  border-bottom: 1px solid var(--hair);
  position: relative;
}
.wf-text-cover .wt-title {
  font-family: var(--display, Georgia, "Times New Roman", serif);
  font-size: 17px;
  line-height: 1.75;
  color: #3B3226;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vis-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  background: rgba(20, 20, 20, .55);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: .02em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.wf-cover.video-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, #2A2620 0%, #14120E 100%);
}
.wf-cover.video-empty .play-ico {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.5);
  color: #fff;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  padding-left: 3px;
}


/* 视频无封面占位：覆盖 premium.css 的 .wf-cover::after 灰底兜底 */
.wf-cover.video-empty::after {
  background: linear-gradient(150deg, #2A2620 0%, #14120E 100%);
}
.wf-cover.video-empty .play-ico { position: relative; z-index: 2; }
.wf-cover.video-empty .cover-tag { z-index: 3; }


/* ============================================================
   P2 照片墙榜单行重排（2026-10-03）：大缩略图 + 清晰层级 + hover
   ============================================================ */
.card .row.wall-row {
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  transition: background .18s;
}
.card .row.wall-row:hover { background: #FBF9F4; }
.wall-no {
  width: 54px;
  flex-shrink: 0;
  font-family: var(--display, Georgia, "Times New Roman", serif);
  font-size: 25px;
  letter-spacing: .04em;
  color: #C6BCA6;
}
.card .row.wall-row .t { font-size: 15px; font-weight: 500; color: var(--ink); }
.card .row.wall-row .s { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.wall-like { font-size: 16px; font-weight: 600; color: #1677FF; }


/* ============================================================
   P2 修复（2026-10-03）
   ============================================================ */
/* channel-active-fix：v4 黑胶囊 + v5 深色文字 → 文字不可见。改为「克制下划线 + 金色强调」 */
.channel.active {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
  font-weight: 600;
}
.channel.active:hover { background: transparent; color: var(--ink); }

/* hero 留白压缩：大标题已恢复，纵向空间收紧 */
.page-head { padding: 34px 0 20px; }
.page-head .sub { margin-top: 8px; }


/* channel-bar-unified：与 active 下划线风格统一，去掉白胶囊（编辑式 tab 栏） */
.channel-bar { gap: 2px; }
.channel {
  border: none;
  background: transparent;
  border-radius: 0;
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 14px;
}
.channel:hover { background: transparent; color: var(--ink); }
.channel.active { background: transparent; border: none; color: var(--ink); font-weight: 600; }


/* sortbar-unified：排序栏与编辑式频道栏风格统一（去黑胶囊） */
.sort {
  background: transparent;
  border: none;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
}
.sort:hover { background: transparent; color: var(--ink); }
.sort.active { background: transparent; border: none; color: var(--ink); font-weight: 600; }
.sort-label { color: var(--ink-3); }


/* ============================================================
   照片墙「全部照片」区（2026-10-04）
   ============================================================ */
.wall-all-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 46px 0 20px;
  padding-top: 32px;
  border-top: 1px solid var(--hair);
}
.wall-all-head h2 {
  font-family: var(--display, Georgia, "Times New Roman", serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: .01em;
}
.wall-all-sub { font-size: 13px; color: var(--ink-3); letter-spacing: .04em; }
.wall-all-sub b { color: var(--ink); font-weight: 600; }
.wall-all { max-width: 1200px; column-count: 4; column-gap: 20px; margin-top: 0; }
@media (max-width: 1160px) { .wall-all { column-count: 3; } }
@media (max-width: 900px)  { .wall-all { column-count: 2; } }
.wall-all .wf-item { cursor: pointer; }
.wall-all .wf-cover { cursor: zoom-in; }
.wall-more-wrap { text-align: center; margin: 28px 0 0; }


/* ============================================================
   照片墙改版（2026-10-04）：No.1/2/3 角标 · 0 赞「新」· 排序栏
   ============================================================ */
.wall-medal {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 3;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  padding: 6px 11px;
  border-radius: 999px;
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(20,20,20,.4);
}
.wall-medal.m1 { background: linear-gradient(135deg, #4C9AFF, #1677FF); }
.wall-medal.m2 { background: linear-gradient(135deg, #C4C4C4, #9A9A9A); }
.wall-medal.m3 { background: linear-gradient(135deg, #D08A4A, #A85F1E); }
.wall-new { color: var(--ink-3) !important; font-size: 11.5px; letter-spacing: .1em; }
.wall-all { margin-top: 0; }

.wall-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
}
.wall-count { font-size: 13px; color: var(--ink-3); letter-spacing: .04em; }
.wall-count b { color: var(--ink); font-weight: 600; }
.wall-sort { display: flex; align-items: center; gap: 2px; }
.wall-sort-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-3);
  padding: 6px 12px;
  border-radius: 999px;
  transition: color .18s;
}
.wall-sort-btn:hover { color: var(--ink); }
.wall-sort-btn.active { color: var(--ink); font-weight: 600; }


/* grid-row-first：照片墙改为行优先网格 —— No.1/No.2/No.3 横排第一行，
   而 column-count 瀑布流是竖着填列，会让排名读起来错位 */
.wall-all {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  column-count: auto;
  max-width: 1200px;
  margin-top: 0;
}
.wall-all .wf-item { margin-bottom: 0; }
@media (max-width: 1160px) { .wall-all { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .wall-all { grid-template-columns: repeat(2, 1fr); } }


/* ============================================================
   five-col：对齐小红书 —— 照片并排 5 列（2026-10-04）
   ============================================================ */
/* 照片墙网格：5 列 */
.wall-all {
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
/* 首页「发现」瀑布流：5 列 */
.waterfall { column-count: 5; column-gap: 16px; }
@media (max-width: 1400px) { .waterfall { column-count: 5; } }
@media (max-width: 1160px) { .waterfall { column-count: 4; } }
@media (max-width: 900px)  { .waterfall { column-count: 3; } }

/* 响应式：照片墙同步收列 */
@media (max-width: 1160px) { .wall-all { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .wall-all { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .wall-all { grid-template-columns: repeat(2, 1fr); } }


/* ============================================================
   full-bleed：对齐小红书 —— 满屏布局（2026-10-04）
   原问题：.main/.topbar/.page-head/.waterfall 都被 max-width:1200px 卡住，
   宽屏下内容只占中间一条，两侧大片空白（老板：占一半很难看）。
   工具页（设置/钱包/会员）在 premium.css 有更高优先级的 body[data-page] 规则，仍会正确收窄。
   ============================================================ */
.main { max-width: none; padding-left: 40px; padding-right: 40px; }
.topbar, .page-head, .content-col, .waterfall, .wall-all, .grid3,
.main > .waterfall, .main > .channel-bar, .main > .topbar { max-width: none; }

.wall-all { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }

.waterfall { column-count: 6; column-gap: 18px; }
@media (max-width: 1700px) { .waterfall { column-count: 5; } }
@media (max-width: 1360px) { .waterfall { column-count: 4; } }
@media (max-width: 1050px) { .waterfall { column-count: 3; } }
@media (max-width: 760px)  { .waterfall { column-count: 2; } }


/* ============================================================
   wall-five-big：照片墙固定 5 列（小红书式），照片更大；
                  发布人（头像+昵称）可点击进个人主页（2026-10-04）
   ============================================================ */
.wall-all { grid-template-columns: repeat(5, 1fr) !important; gap: 20px !important; }
@media (max-width: 1500px) { .wall-all { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 1150px) { .wall-all { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 800px)  { .wall-all { grid-template-columns: repeat(2, 1fr) !important; } }

.wf-byline {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  cursor: pointer;
  border-radius: 999px;
  transition: opacity .18s;
}
.wf-byline:hover { opacity: .68; }
.wf-byline:hover .wf-author { text-decoration: underline; }


/* ============================================================
   圈子广场：5 列 + 写真封面（2026-10-04）
   ============================================================ */
.circle-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
@media (max-width: 1500px) { .circle-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1150px) { .circle-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .circle-grid { grid-template-columns: repeat(2, 1fr); } }
.circle-card {
  background: #fff;
  border: 1px solid var(--hair);
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
.circle-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: #ddd; }
.circle-cover { aspect-ratio: 3 / 4; overflow: hidden; background: #F1EDE3; }
.circle-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.circle-card:hover .circle-cover img { transform: scale(1.04); }
.circle-body { padding: 16px 18px 18px; }
.circle-name { font-size: 15px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.circle-meta { font-size: 12px; color: var(--ink-3); margin-top: 7px; }
.circle-desc {
  font-size: 12.5px; color: var(--ink-2); margin-top: 9px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}


/* ============================================================
   搜索页「热门搜索」（2026-10-04）：无关键词时填充页面，避免整页空荡
   ============================================================ */
.hot-search { padding: 8px 0 30px; }
.hot-head {
  font-family: var(--display, Georgia, "Times New Roman", serif);
  font-size: 20px; font-weight: 500; color: var(--ink);
  margin-bottom: 18px;
}
.hot-tags { display: flex; flex-wrap: wrap; gap: 10px; max-width: 980px; }
.hot-tag {
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.hot-tag:hover { color: var(--ink); border-color: #CFC6B4; background: #FDFBF6; }
.hot-tip { margin-top: 22px; font-size: 13px; color: var(--ink-3); }


/* ============================================================
   im-fullbleed（2026-10-04）：消息页满屏 + 直角 + 与全站墨金一致
   原问题：.im-wrap 卡在 1280px（宽屏下两侧大片空白）；.conv-pane 圆角与全站直角不符
   ============================================================ */
.im-wrap { max-width: none; }
.conv-pane { border-radius: 0; }
.volatile-noop { color: inherit; }
.conv { border-radius: 0; }
.conv:hover { background: #FBF9F4; }
.conv.active { background: #FBF9F4; }
.conv.active .name { color: var(--ink); font-weight: 600; }


/* ============================================================
   会员中心（2026-10-04）：权益对比表 + 常见问题 + SVG 特权图标
   ============================================================ */
.priv-ico {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair);
  color: #1677FF;
}
.priv-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.benefit-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--hair); }
.benefit-table th, .benefit-table td {
  padding: 15px 22px; text-align: left; font-size: 14px;
  border-bottom: 1px solid var(--hair); color: var(--ink);
}
.benefit-table th {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; background: #FBF9F4;
}
.benefit-table tr:last-child td { border-bottom: 0; }
.benefit-table td.c { text-align: center; }
.benefit-table .yes { color: #1677FF; font-weight: 600; }
.benefit-table .no { color: #C6C2B8; }

.faq { border-top: 1px solid var(--hair); }
.faq-item { border-bottom: 1px solid var(--hair); padding: 20px 0; }
.faq-item:last-child { border-bottom: 0; }
.faq-q { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.faq-a { font-size: 13.5px; color: var(--ink-2); line-height: 1.9; margin-top: 9px; }


/* ============================================================
   悬赏页（2026-10-04）：玩法三步说明，填满右栏下方空白
   ============================================================ */
.bounty-guide {
  margin-top: 22px;
  background: #fff;
  border: 1px solid var(--hair);
  padding: 26px 32px 20px;
}
.bounty-guide-h {
  font-family: var(--display, Georgia, "Times New Roman", serif);
  font-size: 17px; font-weight: 500; color: var(--ink);
  margin-bottom: 18px;
}
.bg-step { display: flex; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--hair); }
.bg-step:last-child { border-bottom: 0; }
.bg-n {
  width: 26px; height: 26px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #C7DDFF; color: #1677FF;
  font-size: 13px; font-weight: 600;
}
.bg-step b { font-size: 14.5px; color: var(--ink); font-weight: 600; }
.bg-step p { margin: 7px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.85; }


/* ============================================================
   docs-side-toc（2026-10-04）：接口说明页目录改为左侧固定导航
   原设计：顶部一排 17 个小胶囊链接横向堆叠，既占首屏又难找
   ============================================================ */
.doc-wrap {
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  max-width: 1420px;
  margin: 0 auto;
}
.doc-wrap > *:not(.toc) { grid-column: 2; min-width: 0; }
.toc {
  grid-column: 1;
  position: sticky;
  top: 24px;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  padding: 4px 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-left: 1px solid var(--hair);
}
.toc a {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 9px 0 9px 16px;
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: .02em;
  transition: color .18s, border-color .18s;
  border-left: 2px solid transparent;
  margin-left: -1px;
}
.toc a:hover { color: var(--ink); border-left-color: #1677FF; }
@media (max-width: 1100px) {
  .doc-wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .doc-wrap > *:not(.toc) { grid-column: 1; }
  .toc {
    grid-column: 1; position: static;
    flex-direction: row; flex-wrap: wrap; gap: 8px;
    border-left: 0; padding: 14px 0;
  }
  .toc a {
    padding: 6px 14px; border: 1px solid var(--hair);
    background: #fff; border-radius: 999px; margin-left: 0;
  }
  .toc a:hover { border-color: #CFC6B4; border-left-color: #CFC6B4; }
}


/* ============================================================
   笔记详情页「更多相似笔记」（2026-10-04）
   ============================================================ */
.rel-head {
  display: flex; align-items: baseline; gap: 14px;
  padding-top: 30px; margin-bottom: 22px;
  border-top: 1px solid var(--hair);
}
.rel-title {
  font-family: var(--display, Georgia, "Times New Roman", serif);
  font-size: 24px; font-weight: 500; color: var(--ink);
}
.rel-sub { font-size: 12.5px; color: var(--ink-3); letter-spacing: .06em; }


/* ============================================================
   钱包「收支汇总」（2026-10-04）
   ============================================================ */
.ledger-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 900px) { .ledger-summary { grid-template-columns: 1fr; } }
.ls-card { background: #fff; border: 1px solid var(--hair); padding: 20px 24px; }
.ls-label { font-size: 12.5px; color: var(--ink-3); letter-spacing: .08em; }
.ls-value {
  font-family: var(--display, Georgia, "Times New Roman", serif);
  font-size: 28px; line-height: 1.15; margin-top: 10px;
  font-variant-numeric: tabular-nums;
}
.ls-value.in { color: #1677FF; }
.ls-value.out { color: var(--ink); }
.ls-note { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; letter-spacing: .04em; }


/* ============================================================
   圈子「本周热帖」（2026-10-04）：6 条 + 写真缩略图 + 分隔线
   ============================================================ */
.hot-list { padding: 6px 30px !important; }
.hot-post {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 4px; border-bottom: 1px solid var(--hair);
}
.hot-post:last-child { border-bottom: 0; }
.hot-av { width: 42px; height: 42px; border-radius: 50%; flex: none; }
.hot-thumbs { display: flex; gap: 10px; margin-top: 13px; }
.hot-thumbs img {
  width: 86px; height: 114px; display: block;
  object-fit: cover; object-position: center 30%;
  background: #F4EFE4;
}
.hot-like {
  display: flex; align-items: center; flex: none;
  margin-left: auto; padding-top: 2px;
  font-size: 13px; color: var(--ink-3);
}
.hot-post:first-child .hot-like { color: #1677FF; font-weight: 600; }


/* ============================================================
   设置页两栏分组（2026-10-04）
   原问题：设置页被 premium.css 卡在 880px，1920 下两侧大片空白
   ============================================================ */
body[data-page="settings"] .page-head,
body[data-page="settings"] .content-col,
body[data-page="settings"] .footer { max-width: none; }

body[data-page="settings"] .content-col {
  column-count: 2;
  column-gap: 46px;
  margin-top: 24px;
}
.set-group { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 34px; }
.set-group .eyebrow { display: block; }
.set-group .card { padding: 8px 26px; }
@media (max-width: 1000px) {
  body[data-page="settings"] .content-col { column-count: 1; }
}


/* ============================================================
   im-bottomalign（2026-10-04）：聊天区消息底部对齐
   原问题：.chat-body 是 flex-column，消息从顶部开始排，消息少时下方留一大片空白。
   真实聊天软件（微信/Telegram）都是内容贴底。用首子元素 margin-top:auto 实现，
   内容超出时仍能正常滚动（比 justify-content:flex-end 更稳）。
   ============================================================ */
.chat-body > *:first-child { margin-top: auto; }
.chat-body { padding-bottom: 24px; }

/* 气泡细节：更饱满、行高更舒服 */
.bubble { padding: 11px 16px; line-height: 1.65; }
.msg .avatar { border-radius: 50%; overflow: hidden; }

/* 系统提示行：更克制 */
.sys-line { background: rgba(20,20,20,.04); padding: 5px 16px; }

/* 会话列表：当前会话左侧金色指示条 */
.conv { position: relative; }
.conv.active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; background: #1677FF;
}
.conv-list { padding: 6px 10px 14px; }

/* 聊天顶栏：加一条更清晰的底边 */
.chat-head { background: #fff; }

/* 输入区：发送按钮更精致 */
.chat-input { background: #fff; padding: 14px 20px; }


/* 悬赏页城市标签（2026-10-04）：可点击筛选 */
.city-tag {
  font-family: inherit;
  border: 1px solid var(--hair);
  background: #fff;
  transition: color .18s, border-color .18s, background .18s;
}
.city-tag:hover { color: var(--ink); border-color: #CFC6B4; background: #FDFBF6; }
.city-tag.red { border-color: transparent; }


/* ============================================================
   mobile-fixes（2026-10-04）：手机端横向溢出修复
   实测 390px 下：docs 接口表格撑破屏（scrollW 937>512）、
   task 的 300px+1fr 两栏不折叠（scrollW 807>512）
   ============================================================ */
.task-cols { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; }
@media (max-width: 900px) { .task-cols { grid-template-columns: minmax(0, 1fr); } }

/* 接口说明：宽表格改为容器内横向滚动，不再撑破整页 */
body[data-page="docs"] .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body[data-page="docs"] table.api-grid { min-width: 540px; }
@media (max-width: 900px) {
  body[data-page="docs"] table.api-grid { min-width: 480px; font-size: 12.5px; }
  body[data-page="docs"] .summary-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .doc-wrap { padding: 0 16px; }
}

/* 通用兜底：窄屏下表格都不撑破页面 */
@media (max-width: 760px) {
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .waterfall.wall-all { grid-template-columns: repeat(2, 1fr) !important; }
  .circle-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .pub-layout, .dl-layout, .ledger-summary { grid-template-columns: minmax(0, 1fr) !important; }
  .pub-side, .dl-side { display: none !important; }
  .main { padding-left: 18px; padding-right: 18px; }
  .page-head h1 { font-size: 30px; }
}


/* ============================================================
   mobile-rail（2026-10-04）：手机端侧栏折叠为图标条
   实测 390px 下 12/16 页横向溢出（多为 +102px）：
   根因是 .sidebar 固定 240px + .main 左内边距 40px，正文只剩 ~150px，
   顶栏 400px 宽的搜索框直接撑破视口。窄屏把侧栏收成 64px 图标条。
   ============================================================ */
@media (max-width: 760px) {
  .sidebar {
    width: 64px;
    padding: 16px 8px;
    gap: 2px;
  }
  .nav-item {
    position: relative;
    justify-content: center;
    padding: 12px 0;
    font-size: 0;                 /* 隐藏文字标签，只留图标 */
    gap: 0;
  }
  .nav-item .ico svg { width: 22px; height: 22px; }
  .nav-item .nav-badge {
    position: absolute;
    top: 6px; right: 8px;
    margin-left: 0;
    font-size: 10px;
    padding: 0 5px;
    line-height: 16px;
  }
  .sidebar-bottom { padding-top: 12px; }
  .sidebar-bottom .btn-publish {
    font-size: 0;
    padding: 13px 0;
  }
  .sidebar-bottom .btn-publish::before {
    content: "＋";
    font-size: 20px;
    line-height: 1;
  }
  .wallet-strip { display: none; }

  .main {
    margin-left: 64px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .topbar { gap: 8px; }
  .topbar .search-box {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  /* 文档页有自己的左偏移 */
  .doc-main { margin-left: 64px !important; padding: 0 14px 80px !important; }
}

/* 超窄屏（≤400px）：发布按钮再小一点 */
@media (max-width: 400px) {
  .sidebar { width: 56px; padding: 14px 6px; }
  .main { margin-left: 56px !important; }
  .doc-main { margin-left: 56px !important; }
}


/* ============================================================
   mobile-grid-fix（2026-10-04）：窄屏三列栅格改单列
   残余溢出：member +123 / wallet +48 / circle +21（.grid3 三列不折叠）
   ============================================================ */
@media (max-width: 760px) {
  .grid3 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  .benefit-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .benefit-table th, .benefit-table td { padding: 12px 14px; white-space: nowrap; }
  .ls-value { font-size: 22px; }
  .circle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
  .hot-thumbs img { width: 72px; height: 96px; }
  .wall-all { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px) {
  .circle-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .waterfall { column-count: 1 !important; }
}


/* 钱包双栏（2026-10-04）：窄屏折叠，修手机端 +48 横向溢出 */
.wallet-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .wallet-cols { grid-template-columns: minmax(0, 1fr); } }


/* mobile-foot-fix（2026-10-04）：窄屏长昵称把点赞数挤换行 */
@media (max-width: 760px) {
  .wf-foot { gap: 0; }
  .wf-author {
    max-width: 78px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .wf-like { flex: none; white-space: nowrap; font-size: 11.5px; }
  .wf-avatar { width: 20px; height: 20px; }
}


/* ============================================================
   加载骨架屏（2026-10-04）：照片墙/首页接口返回前铺占位卡
   ============================================================ */
.sk-card { background: #fff; border: 1px solid var(--hair); overflow: hidden; }
.sk-cover {
  aspect-ratio: 3 / 4;
  background: linear-gradient(90deg, #F4EFE4 25%, #EBE3D3 37%, #F4EFE4 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.5s ease infinite;
}
.sk-line {
  height: 12px;
  margin: 15px 16px 0;
  background: #F1EDE3;
  animation: sk-shimmer 1.5s ease infinite;
  background-image: linear-gradient(90deg, #F1EDE3 25%, #E8E1D2 37%, #F1EDE3 63%);
  background-size: 400% 100%;
}
.sk-line.sk-short { width: 46%; margin-bottom: 18px; }
@keyframes sk-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ============================================================
   im-mobile-fix（2026-10-07）：手机档 IM 双栏塌缩修复
   根因：conv-pane 固定 320px + gap 22px，390px 档可用宽仅约 306px，
   chat-pane(flex:1) 被压成 ~2px。窄屏改为单栏纵向堆叠：上会话列表、下聊天区。
   ============================================================ */
@media (max-width: 760px) {
  .im-wrap {
    flex-direction: column;
    gap: 12px;
  }
  .conv-pane {
    width: 100%;
    flex: 0 0 40vh;
    min-height: 180px;
    max-height: 48vh;
  }
  .chat-pane {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
  }
  .chat-head {
    padding: 12px 14px;
  }
  .chat-head > div {
    min-width: 0;
  }
  #chatTitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .chat-body {
    padding: 18px 16px;
  }
  .chat-input {
    padding: 10px 12px;
  }
  .chat-input .tool-btn {
    width: 30px;
    height: 30px;
  }
  .chat-input .tool-btn svg {
    width: 16px;
    height: 16px;
  }
}