.forum-view{
  /* 背景：由 body::before 提供朦胧光晕（--bg2 兜底底色） */
  --bg:transparent;
  --bg2:#F3F4F8;           /* 浅色净底（::before 合成） */
  --card:rgba(255,255,255,.78);      /* 玻璃卡（半透明透光晕） */
  --panel:rgba(255,255,255,.66);     /* 玻璃面板（侧栏/浮层） */
  --hover:rgba(15,30,60,.05);
  /* 文字三层 */
  --text:#0D0F14;
  --body:#3F4650;
  --sub:#6C7480;
  --place:#A9B0BC;
  /* 指示色：彩色（商务蓝，只做高亮指示，不铺大面） */
  --accent:#2563EB;
  --accent-strong:#1D4ED8;
  --accent-soft:rgba(37,99,235,.08);
  /* 状态色 */
  --ok:#16A34A;
  --warn:#D97706;
  --err:#DC2626;
  /* 边框 & 阴影（玻璃悬浮：弱描边 + 软阴影） */
  --line:rgba(15,30,60,.08);
  --shadow:0 2px 12px rgba(15,30,60,.05);
  --shadow-md:0 10px 32px rgba(15,30,60,.08);
  /* 圆角体系统一：弹窗16 / 卡片14 / 小组件12 */
  --r-lg:16px;             /* 弹窗 */
  --r:14px;                /* 卡片 */
  --r-sm:12px;             /* 按钮 / 小组件 / 移动端卡片 */
  --r-img:10px;            /* 配图 */
  --ease:all .18s ease;
  /* 布局 */
  --font:"Inter","PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --topbar-h:56px;
  --max:1120px;
  --col-main:760px;
  --col-side:280px;
}
[data-theme="dark"] .forum-view{
  --bg:transparent;
  --bg2:#0C0D10;
  --card:rgba(36,39,48,.58);         /* 真玻璃卡：半透明透光晕 */
  --panel:rgba(21,23,28,.94);        /* 侧栏实底（导航栏保持不透明） */
  --hover:rgba(255,255,255,.07);
  --text:#F5F6F8;
  --body:#C9CDD4;
  --sub:#8E939C;
  --place:#5E636C;
  --accent:#3A67E8;
  --accent-strong:#2F54D8;
  --accent-soft:rgba(58,103,232,.16);
  --ok:#34A06C;
  --warn:#C9903F;
  --err:#C96B5E;
  --line:rgba(255,255,255,.09);
  --shadow:0 10px 32px rgba(0,0,0,.5);
  --shadow-md:0 18px 50px rgba(0,0,0,.6);
}

/* ==========================================
   forum.css（v97）— 论坛视图 1:1 复刻原型 D:\socialite_proto\index.html
   - 上半部：从原型 <style> 自动转换（选择器加 .forum-view 前缀；
     body.dark → [data-theme="dark"]；.mask/.modal → #forumModal 系）
   - 下半部：布局容器 + 弹窗适配 + 项目特有功能（附件/管理/上传/空态/统计）
   ========================================== */


/* ═══════════ 1. 设计令牌（B端中性极简 · 轻新拟态 Soft UI）═══════════ */
.forum-view{
/* 背景：由 body::before 提供朦胧光晕（--bg2 兜底底色） */
  --bg:transparent;
  --bg2:#F3F4F8;           /* 浅色净底（::before 合成） */
  --card:rgba(255,255,255,.78);      /* 玻璃卡（半透明透光晕） */
  --panel:rgba(255,255,255,.66);     /* 玻璃面板（侧栏/浮层） */
  --hover:rgba(15,30,60,.05);
  /* 文字三层 */
  --text:#0D0F14;
  --body:#3F4650;
  --sub:#6C7480;
  --place:#A9B0BC;
  /* 指示色：彩色（商务蓝，只做高亮指示，不铺大面） */
  --accent:#2563EB;
  --accent-strong:#1D4ED8;
  --accent-soft:rgba(37,99,235,.08);
  /* 状态色 */
  --ok:#16A34A;
  --warn:#D97706;
  --err:#DC2626;
  /* 边框 & 阴影（玻璃悬浮：弱描边 + 软阴影） */
  --line:rgba(15,30,60,.08);
  --shadow:0 2px 12px rgba(15,30,60,.05);
  --shadow-md:0 10px 32px rgba(15,30,60,.08);
  /* 圆角体系统一：弹窗16 / 卡片14 / 小组件12 */
  --r-lg:16px;             /* 弹窗 */
  --r:14px;                /* 卡片 */
  --r-sm:12px;             /* 按钮 / 小组件 / 移动端卡片 */
  --r-img:10px;            /* 配图 */
  --ease:all .18s ease;
/* 布局 */
  --font:"Inter","PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --topbar-h:56px;
  --max:1120px;
  --col-main:760px;
  --col-side:280px;
}
.forum-view *{
margin:0;padding:0;box-sizing:border-box
}
.forum-view body{
font-family:var(--font);
  background:transparent;
  color:var(--body);
  font-size:15px;
  line-height:1.7;
  letter-spacing:.2px;
  -webkit-font-smoothing:antialiased;
}
/* 朦胧背景：多层大半径光晕 + 净底（fixed 定死，滚动不位移；缓慢漂移动态化） */
.forum-view body::before{
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    var(--bg2,#F3F4F8);
  animation:auroraMove 90s ease-in-out infinite alternate;
}
.forum-view button{
font-family:inherit;border:none;background:none;cursor:pointer;color:inherit
}
.forum-view a{
color:inherit;text-decoration:none
}
.forum-view img{
display:block;max-width:100%
}

/* ═══════════ 2. 顶栏（Excel 式：折叠钮+logo | 搜索框居中 | 右侧个人）═══════════ */

/* ═══════════ 3. 主体 · 侧栏 + 内容（Excel 式布局）═══════════ */

/* 侧栏底部用户卡（沉底，填充全高） */

.forum-view .cols{
display:flex;gap:24px;align-items:flex-start
}
.forum-view .col-main{
flex:1;min-width:0;max-width:var(--col-main)
}
.forum-view .col-right{
width:280px;flex:none;position:sticky;top:calc(var(--topbar-h) + 24px)
}
.forum-view .detail-wrap{
max-width:760px;margin:0 auto
}

/* 右侧栏（热帖 / 公告 · 与左导航同宽的卡片化模块） */
.forum-view .right-card{
padding:18px 16px;margin-bottom:14px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)
}
.forum-view .right-title{
font-size:13px;color:var(--sub);margin-bottom:10px;font-weight:400;letter-spacing:.4px
}

/* ═══════════ 4. 卡片（全站最核心视觉单元）═══════════ */
.forum-view .card{
background:var(--card);border-radius:var(--r);
  box-shadow:var(--shadow);
  transition:background var(--ease),box-shadow var(--ease);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}

/* ═══════════ 5. 页面头 / 板块条 ═══════════ */
.forum-view .page-head{
margin-bottom:24px
}
.forum-view .page-title{
font-size:18px;font-weight:500;color:var(--text);line-height:1.3;letter-spacing:.2px
}
.forum-view .page-sub{
font-size:13px;color:var(--sub);margin-top:4px
}
.forum-view .board-bar{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:16px;
}
.forum-view .pill{
font-size:13px;color:var(--sub);padding:6px 14px;border-radius:999px;
  background:var(--hover);transition:var(--ease);
}
.forum-view .pill:hover{
color:var(--text);background:var(--hover)
}
.forum-view .pill.on{
color:#fff;background:var(--accent)
}
.forum-view .sort{
margin-left:auto;display:flex;gap:4px;font-size:13px;color:var(--sub)
}
.forum-view .sort button{
padding:6px 10px;border-radius:8px;transition:var(--ease)
}
.forum-view .sort button:hover{
color:var(--text);background:var(--hover)
}
.forum-view .sort button.on{
color:var(--accent)
}
.forum-view .btn-post{
display:flex;align-items:center;gap:6px;
  background:#0D0D0D;color:#fff;font-size:13px;font-weight:500;
  padding:8px 16px;border-radius:var(--r-sm);transition:var(--ease);
}
.forum-view .btn-post:hover{
background:#262626
}

/* ═══════════ 6. 帖子卡片列表 ═══════════ */
.forum-view .topic-card{
padding:20px 24px;cursor:pointer;margin-bottom:14px
}
.forum-view .topic-card:hover{
background:var(--hover);box-shadow:0 4px 18px rgba(0,0,0,.05)
}
.forum-view 
.forum-view .topic-head{
display:flex;align-items:center;gap:10px;margin-bottom:10px
}
.forum-view .ava{
border-radius:8px;color:#1F2937;display:grid;place-items:center;flex:none;
  background:#ECECEC;font-size:13px;font-weight:500;
}
.forum-view .ava.s32{
width:32px;height:32px
}
.forum-view .ava.s24{
width:24px;height:24px;font-size:11px;border-radius:7px
}
.forum-view .ava.s20{
width:20px;height:20px;font-size:10px;border-radius:6px
}


/* ========== v131：论坛头像 = 渐变底 + 首字母（.ava-grad 替代 img.ava） ========== */
.ava.ava-grad {
  color: #fff;
  font-weight: 600;
  background: #4d8df2; /* 头像底色 v136.2 纯色 */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.forum-view .topic-author{
font-size:13px;color:var(--sub)
}
.forum-view .topic-author b{
font-weight:500;color:var(--body)
}
.forum-view .topic-author em{
font-style:normal;color:var(--place)
}
.forum-view .topic-tag{
font-size:12px;color:var(--sub);background:var(--hover);
  padding:2px 9px;border-radius:999px;margin-left:auto;
}
.forum-view .topic-title{
font-size:16px;font-weight:500;color:var(--text);line-height:1.3
}
.forum-view .topic-excerpt{
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.forum-view .topic-imgs{
display:flex;gap:12px;margin-top:12px
}
.forum-view .topic-imgs img,
.forum-view .topic-imgs video{
width:120px;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-img);
  background:var(--hover);
}
.forum-view .topic-imgs img.ratio169,
.forum-view .topic-imgs video.ratio169{
width:170px;aspect-ratio:16/9
}
.forum-view .topic-imgs img.ratio34,
.forum-view .topic-imgs video.ratio34{
aspect-ratio:3/4
}
.forum-view .topic-imgs img.ratio43,
.forum-view .topic-imgs video.ratio43{
width:150px;aspect-ratio:4/3
}

/* ═══════════ 7. 侧栏模块已在 §3（sidepanel）═══════════ */

/* ═══════════ 8. 帖子详情（720px 专注阅读）═══════════ */
.forum-view .detail-wrap{
max-width:760px;margin:0 auto
}
.forum-view .back-btn{
display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--sub);
  padding:6px 0;margin-bottom:16px;transition:var(--ease);
}
.forum-view .back-btn:hover{
color:var(--text)
}
.forum-view .back-btn svg{
width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2
}
.forum-view .detail-card{
padding:28px 32px
}
.forum-view .detail-head{
display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)
}
.forum-view .detail-title{
font-size:18px;font-weight:500;color:var(--text);line-height:1.3;margin:4px 0 8px
}
.forum-view .detail-meta{
font-size:13px;color:var(--sub)
}
.forum-view .detail-meta b{
font-weight:500;color:var(--body)
}
.forum-view .detail-body{
padding:16px 0 0;font-size:15px;color:var(--body);line-height:1.7
}
.forum-view .detail-body p{
margin-bottom:16px
}
.forum-view .detail-body figure{
margin:4px 0 16px
}
.forum-view .detail-body figcaption{
font-size:12px;color:var(--place);margin-top:8px
}
.forum-view .detail-body img{
max-width:100%;height:auto;border-radius:var(--r-img);background:var(--hover)
}
.forum-view .detail-body video{
width:100%;max-width:100%;display:block;border-radius:var(--r-img);background:#000;aspect-ratio:16/9;object-fit:cover
}
.forum-view .detail-body img.wide{
width:100%;height:auto
}
.forum-view .detail-body .quote{
background:var(--hover);border-left:3px solid var(--line);
  padding:14px 18px;border-radius:0 10px 10px 0;margin:0 0 16px;
  font-size:14px;color:var(--sub);
}

/* 评论（轻量化 · 无边框重压） */
.forum-view .replies{
padding:8px 8px 0
}
.forum-view .reply-head{
font-size:14px;color:var(--sub);padding:14px 16px
}
.forum-view .reply{
margin-bottom:24px
}
.forum-view .reply-meta{
display:flex;align-items:center;gap:10px;margin-bottom:6px
}
.forum-view .reply-meta b{
font-size:13px;font-weight:500;color:var(--body)
}
.forum-view .reply-meta time{
font-size:12px;color:var(--place)
}
.forum-view .reply-meta .floor{
margin-left:auto;font-size:12px;color:var(--place)
}
.forum-view .reply-body{
font-size:15px;color:var(--body);line-height:1.7;padding-left:34px
}
.forum-view .reply-acts{
margin-top:6px;padding-left:34px;display:flex;gap:14px
}
.forum-view .reply-acts button{
font-size:12px;color:var(--place);display:flex;gap:4px;align-items:center;transition:var(--ease)
}
.forum-view .reply-acts button:hover{
color:var(--accent)
}
.forum-view .reply-acts svg{
width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2
}

/* 楼中楼：柔和缩进 + 细左线 */
.forum-view .subs{
margin:10px 0 0 44px;border-left:2px solid var(--line);padding-left:16px
}
.forum-view .sub{
display:flex;gap:10px;padding:8px 0
}
.forum-view .sub .sub-in{
min-width:0
}
.forum-view .sub b{
font-size:12px;font-weight:500;color:var(--body)
}
.forum-view .sub time{
font-size:11px;color:var(--place);margin-left:8px
}
.forum-view .sub p{
font-size:14px;color:var(--body);line-height:1.6;margin-top:2px
}

/* ═══════════ 9. 回复条（极简 · 静贴于详情底部）═══════════ */
.forum-view .reply-dock{
position:sticky;bottom:14px;margin-top:8px;
  background:var(--card);border-radius:var(--r);
  box-shadow:0 4px 24px rgba(0,0,0,.08);
  border:1px solid var(--line);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:10px 12px 10px 16px;
  display:flex;align-items:flex-end;gap:8px;
}
.forum-view .reply-dock textarea{
flex:1;border:none;outline:none;resize:none;background:transparent;
  font-family:inherit;font-size:15px;line-height:1.6;color:var(--text);
  min-height:22px;max-height:120px;padding:3px 0;
}
.forum-view .reply-dock .rd-side{
display:flex;align-items:center;gap:2px
}
.forum-view .rd-ico{
width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  color:var(--sub);transition:var(--ease);
}
.forum-view .rd-ico:hover{
background:var(--hover);color:var(--text)
}
.forum-view .rd-ico svg{
width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2
}
.forum-view .btn-send{
height:34px;padding:0 18px;border-radius:var(--r-sm);
  background:#0D0D0D;color:#fff;font-size:13px;font-weight:500;
  transition:var(--ease);flex:none;
}
.forum-view .btn-send:hover{
background:#262626
}
.forum-view .btn-send:disabled{
background:var(--hover);color:var(--place);box-shadow:none;cursor:default
}
.forum-view .rd-count{
font-size:12px;color:var(--place);margin-right:2px
}

/* 楼中楼小输入条 */
.forum-view .sub-dock textarea{
flex:1;border:none;outline:none;resize:none;background:transparent;
  font-family:inherit;font-size:14px;color:var(--text);min-height:20px;max-height:60px;
}
.forum-view .sub-dock .btn-send{
height:28px;padding:0 12px;font-size:12px;border-radius:8px
}

/* ═══════════ 10. 发帖弹窗（轻量 · 柔和）═══════════ */
#forumModal{
position:fixed;inset:0;background:rgba(0,0,0,.12);z-index:100;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:none;align-items:flex-start;justify-content:center;padding-top:9vh;
}
#forumModal.open{
display:flex
}
#forumModal .modal-card{
width:min(560px,calc(100vw - 32px));
  background:var(--card);border-radius:var(--r-lg);
  box-shadow:0 12px 48px rgba(0,0,0,.1);
  padding:22px 26px;animation:po .22s ease;
}
#forumModal .modal input[type=text]{
width:100%;border:none;outline:none;font-family:inherit;font-size:16px;font-weight:500;color:var(--text);
  padding:10px 0;border-bottom:1px solid var(--line);
}
#forumModal .modal input[type=text]:focus{
border-bottom-color:var(--accent)
}
.forum-view .toolbar{
display:flex;gap:2px;padding:10px 0 4px
}
.forum-view .toolbar button{
width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--sub);transition:var(--ease);
}
.forum-view .toolbar button:hover{
background:var(--hover);color:var(--text)
}
.forum-view .toolbar svg{
width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2
}
#forumModal .modal textarea{
width:100%;border:none;outline:none;resize:none;background:transparent;
  font-family:inherit;font-size:15px;line-height:1.7;color:var(--text);
  min-height:88px;max-height:320px;padding:6px 0;
}
#forumModal .modal-f{
display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:8px
}
.forum-view .m-count{
font-size:12px;color:var(--place)
}

/* ═══════════ 11. 页脚（极轻）═══════════ */

/* ═══════════ 12. 深色主题（body.dark · 纯黑白灰，无彩色）═══════════ */
[data-theme="dark"] .forum-view{
/* 背景：极淡冷微光（::before 提供）——玻璃要透，底就得沉 */
  --bg:transparent;
  --bg2:#0C0D10;
  --card:rgba(36,39,48,.58);         /* 真玻璃卡：半透明透光晕 */
  --panel:rgba(21,23,28,.94);        /* 侧栏实底（导航栏保持不透明） */
  --hover:rgba(255,255,255,.07);
  /* 文字三层（玻璃上必须亮，保持可读） */
  --text:#F5F6F8;
  --body:#C9CDD4;
  --sub:#8E939C;
  --place:#5E636C;
  /* 指示：暗色收敛为黑白（accent 只给按钮用，深蓝低调） */
  --accent:#3A67E8;
  --accent-strong:#2F54D8;
  --accent-soft:rgba(58,103,232,.16);
  /* 状态色（降饱和） */
  --ok:#34A06C;
  --warn:#C9903F;
  --err:#C96B5E;
  /* 边框 + 黑阴影 + 顶部内高光（玻璃边缘反光 = 层次） */
  --line:rgba(255,255,255,.09);
  --shadow:0 10px 32px rgba(0,0,0,.5);
  --shadow-md:0 18px 50px rgba(0,0,0,.6);
}
/* 浮层：玻璃 = 半透明 + 黑阴影 + 顶部内高光（边缘反光感） */
[data-theme="dark"] .forum-view .card,
[data-theme="dark"] .forum-view .reply-dock,
[data-theme="dark"] .forum-view .modal,
[data-theme="dark"] .forum-view .search,
[data-theme="dark"] .forum-view .right-card{
box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
}
[data-theme="dark"] .forum-view .sidepanel{
background:var(--panel);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 14px 44px rgba(0,0,0,.5);
}
[data-theme="dark"] .forum-view .sp-item.on{
background:var(--hover);color:var(--text);font-weight:500
}
[data-theme="dark"] .forum-view .pill.on{
background:#ECECEC;color:#0D0D0D
}
[data-theme="dark"] .forum-view .sort button.on{
color:var(--text)
}
[data-theme="dark"] .forum-view .btn-post,
[data-theme="dark"] .forum-view .btn-send{
background:var(--accent);color:#fff;
  box-shadow:0 4px 12px rgba(58,103,232,.22);
}
[data-theme="dark"] .forum-view .btn-post:hover,
[data-theme="dark"] .forum-view .btn-send:hover{
background:var(--accent-strong)
}
[data-theme="dark"] .forum-view .btn-send:disabled{
background:var(--hover);color:var(--place)
}
[data-theme="dark"] .forum-view .search:focus-within{
background:var(--card);border-color:rgba(255,255,255,.25);box-shadow:0 0 0 3px rgba(255,255,255,.05)
}
[data-theme="dark"] .forum-view .detail-foot button:hover,
[data-theme="dark"] .forum-view .detail-foot button.on,
[data-theme="dark"] .forum-view .reply-acts button:hover,
[data-theme="dark"] .forum-view .rd-ico:hover{
color:var(--text)
}
[data-theme="dark"] .forum-view .topic-tag{
background:rgba(255,255,255,.08)
}

[data-theme="dark"] .forum-view .mask{
background:rgba(0,0,0,.55)
}
[data-theme="dark"] .forum-view .subs{
border-left-color:rgba(255,255,255,.07)
}
[data-theme="dark"] .forum-view .detail-body .quote{
border-left-color:rgba(255,255,255,.07)
}
[data-theme="dark"] .forum-view .topic-imgs img,
[data-theme="dark"] .forum-view .detail-body img{
filter:brightness(.62) saturate(.65)
}
[data-theme="dark"] .forum-view .ava{
color:#F4F5F7;background:#2A2D34
}
[data-theme="dark"] .forum-view .tb-avatar{
background:#ECECEC;color:#0D0D0D
}
[data-theme="dark"] .forum-view .logo i{
background:#F2F3F5
}
[data-theme="dark"] .forum-view ::selection{
background:rgba(255,255,255,.14)
}
/* 暗色光晕：极淡冷微光（玻璃要透光，光晕就得若隐若现） */
/* 主题图标：浅色=太阳(当前亮色)，暗色=月亮(当前暗色)；均为线条 SVG */
[data-theme="dark"] .forum-view .ic-sun{
display:none
}
[data-theme="dark"] .forum-view .ic-moon{
display:block
}
[data-theme="dark"] .forum-view ::-webkit-scrollbar{
width:10px
}
[data-theme="dark"] .forum-view ::-webkit-scrollbar-thumb{
background:#3A3E46;border-radius:6px
}
[data-theme="dark"] .forum-view ::-webkit-scrollbar-track{
background:transparent
}

/* ═══════════ 13. 移动端（≤780px · 单列全屏干净卡片）═══════════ */
@media (max-width:780px){
  .forum-view .topbar-in{
    padding:0 14px;gap:10px
  }
  .forum-view .search{
    max-width:none;margin:0
  }
  .forum-view .col-btn{
    display:none
  }
  .forum-view .sidepanel{
    display:none
  }
  .forum-view .body{
    padding-left:0
  }
  .forum-view .shell{
    padding:16px 12px 48px
  }
  .forum-view .cols{
    display:block
  }
  .forum-view .col-right{
    display:none
  }
  .forum-view .col-main{
    max-width:none
  }
  .forum-view .card{
    border-radius:var(--r-sm);box-shadow:0 1px 6px rgba(0,0,0,.03)
  }
  .forum-view .topic-card{
    padding:16px 16px
  }
  .forum-view .detail-card{
    padding:20px 18px
  }
  .forum-view .topic-imgs img{
    width:96px;height:96px
  }
  .forum-view .reply-dock{
    border-radius:var(--r-sm);bottom:10px
  }
  .forum-view .subs{
    margin-left:20px;padding-left:12px
  }
  .forum-view .sub-dock{
    margin-left:34px
  }
  .forum-view .detail-body img.wide{
    border-radius:8px
  }
}

/* ==========================================
   forum.css 手动段（v97）：布局容器 + 弹窗适配 + 项目特有功能样式
   ========================================== */

/* --- 布局容器（原型 .shell 等效） --- */
.forum-view{
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 24px 64px;
  color: var(--body);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .2px;
  font-family: var(--font);
  min-height: calc(100vh - var(--nav-height));
  min-height: calc(100dvh - var(--nav-height));
}
.forum-view .main-content { width: 100%; }

/* 详情时隐藏列表头部/右栏（原型 viewDetail 场景） */
.forum-view.is-detail .page-head,
.forum-view.is-detail .board-bar,
.forum-view.is-detail .col-right { display: none; }

/* 页头统计数 */
.forum-view .page-title { display: flex; align-items: center; gap: 10px; }
.forum-view .page-title .stats-upd { font-size: 12px; font-weight: 400; color: var(--place); }

/* 排序按钮激活态（项目 is-active = 原型 .on） */
.forum-view .sort button.is-active { color: var(--accent); }
[data-theme="dark"] .forum-view .sort button.is-active { color: var(--text); }

/* 详情头右侧 div（标题区） */
.forum-view .detail-head div { min-width: 0; flex: 1; }

/* 头像图（identicon）适配 */
.forum-view .ava { overflow: hidden; }
.forum-view .ava img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* --- 弹窗内部（原型 modal 组件） --- */
#forumModal input[type=text]{
  width: 100%; border: none; outline: none; font-family: inherit; font-size: 16px; font-weight: 500;
  color: #0D0F14; padding: 10px 0; border-bottom: 1px solid var(--line); background: transparent;
}
[data-theme="dark"] #forumModal input[type=text] { color: #F5F6F8; }
#forumModal input[type=text]:focus { border-bottom-color: var(--accent); }
#forumModal .toolbar { display: flex; gap: 2px; padding: 10px 0 4px; }
#forumModal .toolbar button {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  color: var(--sub); transition: var(--ease);
}
#forumModal .toolbar button:hover { background: var(--hover); color: var(--text); }
#forumModal .toolbar svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
#forumModal textarea{
  width: 100%; border: none; outline: none; resize: none; background: transparent;
  font-family: inherit; font-size: 15px; line-height: 1.7; color: #0D0F14;
  min-height: 88px; max-height: 320px; padding: 6px 0;
}
[data-theme="dark"] #forumModal textarea { color: #F5F6F8; }
#forumModal .modal-f { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 8px; }
#forumModal .m-count { font-size: 12px; color: var(--place); }
#forumModal .m-count.float { position: absolute; right: 8px; bottom: 8px; pointer-events: none; }
#forumModal .modal-body { position: relative; }
#forumModal .modal-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
#forumModal .modal-h h3 { font-size: 16px; font-weight: 500; color: #0D0F14; line-height: 1.3; margin: 0; }
[data-theme="dark"] #forumModal .modal-h h3 { color: #F5F6F8; }
#forumModal .modal-x {
  margin-left: auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  color: var(--sub); transition: var(--ease); cursor: pointer;
}
#forumModal .modal-x:hover { background: var(--hover); color: var(--text); }
#forumModal .modal-x svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
#forumModal .modal-cat{
  font-family: inherit; font-size: 13px; color: var(--body);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; background: var(--card);
  outline: none; cursor: pointer;
}
#forumModal .forum-f-toolbar { display: flex; align-items: center; gap: 4px; }
#forumModal .forum-f-toolbar-label { font-size: 12px; color: var(--place); margin-right: 6px; }
#forumModal .forum-tb {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  color: var(--sub); font-size: 14px; transition: var(--ease);
}
#forumModal .forum-tb:hover { background: var(--hover); color: var(--text); }
#forumModal .forum-f-wrap { position: relative; }
#forumModal .forum-drop{
  margin-top: 10px; border: 1px dashed var(--line); border-radius: var(--r-sm);
  padding: 16px; text-align: center; color: var(--sub); font-size: 13px; cursor: pointer; transition: var(--ease);
}
#forumModal .forum-drop:hover { background: var(--hover); }
#forumModal .forum-drop.is-over { background: var(--accent-soft); border-color: var(--accent); }
#forumModal .forum-drop-inner { display: flex; flex-direction: column; gap: 6px; align-items: center; }
#forumModal .forum-drop-inner svg { width: 22px; height: 22px; stroke: var(--place); fill: none; stroke-width: 1.8; }
#forumModal .forum-att-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
#forumModal .admin-hint { font-size: 12px; color: var(--place); margin-right: auto; }
#forumModal .modal-f .btn-send { margin-left: 8px; }
#forumModal .btn-send{
  height:34px;padding:0 18px;border-radius:var(--r-sm);
  background:#0D0D0D;color:#fff;font-size:13px;font-weight:500;
  transition:var(--ease);flex:none;
}
#forumModal .btn-send:hover{background:#262626}
#forumModal .btn-send:disabled{background:var(--hover);color:var(--place);box-shadow:none;cursor:default}
[data-theme="dark"] #forumModal .btn-send{background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(58,103,232,.22)}
[data-theme="dark"] #forumModal .btn-send:hover{background:var(--accent-strong)}
[data-theme="dark"] #forumModal { background: rgba(0,0,0,.55); }
[data-theme="dark"] #forumModal .modal-card{
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
}

/* --- 项目特有功能 --- */
/* 管理按钮 */
.forum-view .forum-ghost {
  font-size: 12px; color: var(--place); display: flex; align-items: center; gap: 4px;
  transition: var(--ease); padding: 2px 6px; border-radius: 6px;
}
.forum-view .forum-ghost:hover { color: var(--text); background: var(--hover); }
.forum-view .forum-ghost.danger { color: var(--err); }
.forum-view .forum-ghost.danger:hover { background: rgba(220,38,38,.08); }
.forum-view .detail-foot .forum-ghost { margin-left: auto; }

/* 附件（详情正文内） */
.forum-view .forum-att-list { margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.forum-view .forum-att{
  background: var(--hover); border-radius: var(--r-sm); padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
}
.forum-view .forum-att.media-video { display: block; }
.forum-view .forum-att.media-video video { margin-top: 8px; border-radius: 8px; }
.forum-view .forum-att.media-audio audio { margin-top: 8px; width: 100%; }
.forum-view .forum-att-glyph { font-size: 16px; color: var(--sub); flex: none; }
.forum-view .forum-att-name { font-size: 13px; color: var(--text); min-width: 0; flex: 1; }
.forum-view .forum-att-name a { color: var(--accent); }
.forum-view .forum-att-size { font-size: 11px; color: var(--place); margin-left: 8px; }
.forum-view .forum-att-status { font-size: 12px; color: var(--sub); flex: none; }
.forum-view .forum-att-status.is-err { color: var(--err); }
.forum-view .forum-att-row { display: flex; align-items: center; gap: 10px; background: var(--hover); border-radius: 8px; padding: 8px 12px; }
.forum-view .forum-att-ic { font-size: 14px; color: var(--sub); flex: none; }
.forum-view .topic-imgs .forum-att-ic { font-size: 22px; }

/* 回复图缩略 */
.forum-view .forum-reply-att { display: inline-block; margin-top: 6px; margin-right: 8px; }
.forum-view .forum-reply-att img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--hover); }

/* 回复条附件列表 */
.forum-view .forum-reply-atts { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.forum-view .forum-reply-att-row { display: flex; align-items: center; gap: 8px; background: var(--hover); border-radius: 8px; padding: 6px 10px; font-size: 12px; color: var(--sub); }
.forum-view .forum-reply-att-ic { font-size: 14px; }
.forum-view .forum-reply-atts .forum-att-status { font-size: 11px; }

/* 空态 / 加载 / 错误 */
.forum-view .forum-empty { text-align: center; padding: 48px 20px; color: var(--sub); font-size: 14px; }
.forum-view .forum-empty p { margin-bottom: 16px; }
.forum-view .forum-empty .btn-post { display: inline-flex; }
.forum-view .forum-loading { text-align: center; padding: 48px 20px; color: var(--sub); font-size: 14px; }
.forum-view .forum-err { color: var(--err); }

/* toast */
.forum-toast{
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: #0D0D0D; color: #fff; font-size: 13px; padding: 9px 18px; border-radius: 10px;
  z-index: 400; opacity: 0; pointer-events: none; transition: opacity .2s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.forum-toast.show { opacity: 1; }
[data-theme="dark"] .forum-toast { background: #ECECEC; color: #0D0D0D; }

/* 表情面板 */
.forum-emoji-panel{
  position: fixed; z-index: 300; background: var(--bg-card, #fff); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 10px 32px rgba(0,0,0,.12);
  display: grid; grid-template-columns: repeat(8,1fr); gap: 2px; padding: 8px; max-width: 280px;
}
.forum-emoji-panel button { font-size: 18px; width: 30px; height: 30px; border-radius: 6px; }
.forum-emoji-panel button:hover { background: var(--bg-hover-tint, rgba(0,0,0,.05)); }

/* 游客提示 */
.forum-view .forum-guest { text-align: center; padding: 72px 20px; }
.forum-view .forum-guest-ic { font-size: 34px; color: var(--place); margin-bottom: 14px; }
.forum-view .forum-guest p { color: var(--sub); font-size: 14px; margin-bottom: 18px; }
.forum-view .forum-guest .btn-post { display: inline-flex; }

/* 统计卡（右侧） */
.forum-view .forum-stat-line { display: flex; justify-content: space-between; font-size: 13px; color: var(--sub); padding: 4px 2px; }
.forum-view .forum-stat-line b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }

/* 楼中楼计数 */
.forum-view .forum-f-count { font-size: 11px; color: var(--place); }
.forum-view .sub-dock { position: relative; }
.forum-view .sub-dock .forum-f-count { margin: 0 4px; }
.forum-view .forum-f-count.float { position: absolute; right: 10px; bottom: 10px; pointer-events: none; }
/* ---- proto sp-nav/sp-hot 补遗（右栏热帖，1:1） ---- */
.forum-view .sp-nav{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.forum-view .sp-hot a{white-space:normal;line-height:1.5;font-size:14px;position:relative;padding:8px 10px 8px 26px;border-radius:8px;transition:var(--ease)}
.forum-view .sp-hot a:hover{background:var(--hover);color:var(--text)}
.forum-view .sp-hot a::before{
  content:attr(data-rank);
  position:absolute;left:6px;top:50%;transform:translateY(-50%);
  font-size:11px;font-weight:400;color:var(--place);font-variant-numeric:tabular-nums;
  min-width:14px;text-align:center;
}
.forum-view .sp-hot a:nth-child(-n+3)::before{color:var(--accent)}
.forum-view .sp-hot a em{font-style:normal;color:var(--body)}
.forum-view .sp-hot a:hover em{color:var(--text)}
.forum-view .sp-note{font-size:12px;color:var(--place);line-height:1.8;padding:2px 6px}
@media (max-width: 780px){
  .forum-view .sp-hot a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ---- proto 关键帧（po：弹窗入场，1:1） ---- */
@keyframes po{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes auroraMove{
  0%{background-position:0% 0%,100% 100%,50% 50%,0 0}
  50%{background-position:28% 18%,72% 82%,58% 42%,0 0}
  100%{background-position:12% 42%,88% 58%,40% 70%,0 0}
}

/* ═══════════ 补遗 v97b：原型 §6 列表卡尺区（转换器漏网，逐字补回） ═══════════ */
.forum-view .topic-foot{display:flex;gap:18px;margin-top:14px;font-size:13px;color:var(--sub);align-items:center}
.forum-view .topic-foot span{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:400;color:var(--text);font-variant-numeric:tabular-nums}
.forum-view .topic-foot span svg{color:var(--sub);font-weight:400}
.forum-view .topic-foot svg{width:15px;height:15px;stroke-width:2;stroke:currentColor;fill:none}
.forum-view .detail-foot svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

/* v99c：详情页主卡与回复列表卡的间距（原型内联 margin-top:14px 还原） */
.forum-view .replies {
  margin-top: 14px;
}


/* ============ v100：材质统一 / 详情居中 / 回复条延长+轻模糊 ============ */

/* 帖子卡材质统一：置顶与非置顶同一材质（浅=原浅色置顶，深=原深色置顶） */
.forum-view .topic-card,
.forum-view .detail-card,
.forum-view .replies {
  background: rgba(37, 99, 235, .03);
}
[data-theme="dark"] .forum-view .topic-card,
[data-theme="dark"] .forum-view .detail-card,
[data-theme="dark"] .forum-view .replies {
  background: rgba(255, 255, 255, .02);
}

/* 详情页整体居中（原 col-main 为 flex 子项默认靠左，详情态右栏隐藏后偏左） */
.forum-view.is-detail .cols {
  justify-content: center;
}
.forum-view.is-detail .col-main {
  max-width: 760px;
}

/* 回复条：随视口延长（1080p 全屏≈1200）、blur 降到 20%（16px→4px） */
.forum-view .reply-dock {
  width: min(1200px, calc(100vw - 48px));
  margin: 14px auto 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 30;
}
.forum-view .reply-dock textarea {
  height: 80px;
  min-height: 80px;
}


/* ============ v101：详情页专注模式（卡片+回复条相对视口居中） ============ */

/* .app 是 fixed left:264（给侧栏让位）——详情页改为左右对称 24 */
body:has(.forum-view.is-detail) .app {
  left: 24px;
}


/* forum-view 不再限宽，main-content 收窄 padding */
.forum-view.is-detail {
  max-width: none;
}
.forum-view.is-detail .main-content {
  max-width: none;
  padding: 0 24px;
}

/* 回复条：相对滚动容器(.app)水平居中，覆盖 v100 的 margin auto（超宽时失效） */
.forum-view .reply-dock {
  margin: 14px 0 0;
  left: 50%;
  transform: translateX(-50%);
}

/* ============ v102：回复条 fixed 贴底居中（稳定方案） ============ */
.forum-view .reply-dock {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: min(1200px, calc(100vw - 48px));
}

/* 内容底部让位，避免最后一条回复被常驻回复条遮挡 */
.forum-view .detail-wrap {
  padding-bottom: 140px;
}

/* 移动端：避让底部导航栏 */
@media (max-width: 780px) {
  .forum-view .reply-dock {
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============ v104：回复条自动匹配可用长度（侧栏右缘→视口右缘，上限1200，居中） ============ */
.forum-view .reply-dock {
  position: fixed;
  bottom: 14px;
  left: 264px;
  right: 24px;
  width: auto;
  max-width: 1200px;
  margin: 0 auto;
  transform: none;
}
@media (max-width: 780px) {
  .forum-view .reply-dock {
    left: 14px;
    right: 14px;
    max-width: none;
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  }
}


/* ═════════ v105：回复条 = 原型同款 sticky（静贴详情底部、滚动到底自然跟随、不挡内容）═════════ */
/* 侧栏已恢复 → 内容区左缘回归 264（覆盖 v101 的 left:24，避免压侧栏） */
body:has(.forum-view.is-detail) .app {
  left: 264px;
}

/* 详情页解除 col-main 760 限制（回复条父容器 = 全宽可用区，居中计算才正确） */
.forum-view.is-detail .col-main {
  max-width: none;
}

/* 回复条：sticky 静贴滚动容器底部；宽度铺满父容器、超 1200 收窄居中（两端自适应） */
.forum-view .reply-dock {
  position: sticky;
  bottom: 14px;
  left: auto;
  right: auto;
  transform: none;
  width: 100%;
  max-width: 1200px;
  margin: 14px auto 0;
}

/* 不再常驻遮挡 → 解除详情底部 140px 让位 */
.forum-view .detail-wrap {
  padding-bottom: 0;
}

@media (max-width: 780px) {
  .forum-view .reply-dock {
    bottom: 14px;
    left: auto;
    right: auto;
    max-width: none;
  }
}


/* ============ v107：卡片材质统一（右侧统计栏同款玻璃）+ 详情点赞/观看左下角 ============ */

/* 帖子卡 / 详情卡 / 回复卡 → 与右侧统计卡（.right-card）同款玻璃材质
   （盖 v100 的极淡蓝调：rgba(37,99,235,.03)——现统一为 var(--card) 半透明白玻璃） */
.forum-view .topic-card,
.forum-view .detail-card,
.forum-view .replies {
  background: var(--card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
[data-theme="dark"] .forum-view .topic-card,
[data-theme="dark"] .forum-view .detail-card,
[data-theme="dark"] .forum-view .replies {
  background: var(--card);
}

/* 帖子卡 hover：玻璃提亮 + 阴影加深（保留可点性，盖 v100 hover） */
.forum-view .topic-card:hover {
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 30px rgba(15, 30, 60, .12);
}
[data-theme="dark"] .forum-view .topic-card:hover {
  background: rgba(36, 39, 48, .72);
}

/* 详情页底条：点赞/观看 → 卡片左下角的胶囊统计块（管理按钮推右） */
.forum-view .detail-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.forum-view .detail-foot .forum-like,
.forum-view .detail-foot .detail-views {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--sub);
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--hover);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.forum-view .detail-foot .detail-views svg { color: var(--place); }
.forum-view .detail-foot .forum-like {
  color: var(--text);
  cursor: pointer;
  transition: var(--ease);
}
.forum-view .detail-foot .forum-like:hover,
.forum-view .detail-foot .forum-like.is-liked {
  background: var(--accent-soft);
  color: var(--accent);
}
[data-theme="dark"] .forum-view .detail-foot .forum-like:hover,
[data-theme="dark"] .forum-view .detail-foot .forum-like.is-liked {
  background: rgba(58, 103, 232, .16);
  color: var(--accent);
}
.forum-view .detail-foot .forum-ghost { margin-left: auto; }

/* 回复条模糊：blur 4px → 6px（提高 50%）——仅视觉，位置/结构不动（v105 sticky 定稿） */
.forum-view .reply-dock {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}


/* ===== v110.1：楼中楼目标条升级 = 引用条式（色条+圆角+引用预览） ===== */
.rd-target {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px 10px 8px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.rd-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rd-top {
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.35;
}
.rd-top b { color: var(--accent); font-weight: 700; }
.rd-q {
  font-size: 12px;
  color: var(--text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rd-clear {
  flex: none;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--hover, rgba(0,0,0,0.045));
  color: var(--text-sub);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.rd-clear:hover { background: rgba(231,76,60,0.12); color: #e74c3c; }
.reply.is-target {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}


/* ===== v110.2：楼层高亮柔化 + 目标条动画 ===== */
/* 楼层基础过渡：高亮出现/消退都平滑 */
.reply {
  transition: background .35s ease, box-shadow .35s ease;
}
/* 高亮 = 淡蓝渐变底 + 左侧 accent 色条（inset 不占布局）+ 圆角，替代生硬蓝描边 */
.reply.is-target {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
  border-radius: var(--r-sm);
  animation: isTargetPulse .7s ease-out 1;
}
@keyframes isTargetPulse {
  0%   { box-shadow: inset 3px 0 0 var(--accent), 0 0 0 8px rgba(37,99,235,.1); }
  100% { box-shadow: inset 3px 0 0 var(--accent), 0 0 0 0 transparent; }
}
/* 目标条进入：淡入 + 上滑 */
.rd-target {
  animation: rdIn .3s cubic-bezier(.2,.8,.25,1);
}
@keyframes rdIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}


/* ===== v110.3：楼层头像右移（配合高亮左色条） ===== */
.forum-view .reply-meta img.ava {
  margin-left: 4px;
}


/* ========== v135：论坛云端头像（accounts.avatar -> /files 反代） ========== */
.forum-view .ava .ava-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  background: #f0f0f0;
}


/* ========== v135：板块管理浮层 ========== */
.cat-mask {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0, 0, 0, 0.4);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
}
.cat-panel {
  width: min(420px, calc(100vw - 40px));
  max-height: 70vh; display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.cat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.cat-x {
  background: none; border: none; cursor: pointer;
  font-size: 15px; color: var(--sub); padding: 4px 8px; border-radius: 8px;
}
.cat-x:hover { background: var(--accent-soft); color: var(--body); }
.cat-list { overflow-y: auto; padding: 8px 12px; flex: 1; }
.cat-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 10px;
}
.cat-row:hover { background: var(--accent-soft); }
.cat-name { font-size: 14px; color: var(--body); }
.cat-ops button {
  width: 30px; height: 26px; margin-left: 4px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 7px; font-size: 12px; cursor: pointer; color: var(--body);
}
.cat-ops button:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
.cat-ops button:disabled { opacity: 0.35; cursor: default; }
.cat-add {
  display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border);
}
.cat-add input {
  flex: 1; height: 34px; padding: 0 12px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 9px; font-size: 13px; color: var(--body);
}
.cat-add input:focus { outline: none; border-color: var(--accent); }
.cat-add button {
  height: 34px; padding: 0 16px; border: none; border-radius: 9px;
  background: var(--accent); color: #fff; font-size: 13px; cursor: pointer;
}
.cat-foot { padding: 10px 14px; border-top: 1px solid var(--border); text-align: right; }
.cat-done {
  height: 32px; padding: 0 18px; border: 1px solid var(--border);
  border-radius: 9px; background: var(--card); color: var(--body);
  font-size: 13px; cursor: pointer;
}
.cat-loading { padding: 18px; text-align: center; color: var(--place); font-size: 13px; }
.cat-err { color: #e74c3c; }