/* ============================================================================
   YONETIX 社交平台 (www.shhhh.cn) —— 暗黑/明亮 双主题 UI
   —— 默认暗色；顶栏/侧栏的切换按钮可切到明亮，选择记在浏览器 localStorage
   配色: 主色改用 B 站粉 #FB7299 (按钮/链接/选中态统一)
         点赞 #f91880 · 转发 #00ba7c · 描边 #2f3336
   布局: 左 275px · 中 600px · 右 350px
   ============================================================================ */

:root{
  --bg:        #000000;
  --bg-elev:   #16181c;   /* 卡片、悬停 */
  --bg-blur:   rgba(0,0,0,.72);   /* 半透明顶栏 */
  --bg-blur-solid: rgba(0,0,0,.92);
  --bg-hover:  rgba(231,233,234,.06);
  --border:    #2f3336;
  --text:      #e7e9ea;
  --text-dim:  #71767b;
  --text-mute: #536471;
  --accent:    #FB7299;           /* B 站粉 */
  --accent-h:  rgba(251,114,153,.12);
  --accent-btn:#FB7299;
  --accent-btn-h:#e85f86;
  --like:      #f91880;
  --like-h:    rgba(249,24,128,.1);
  --rt:        #00ba7c;
  --rt-h:      rgba(0,186,124,.1);
  --radius:    16px;
  --pill:      999px;
  --ease:      cubic-bezier(.16,1,.3,1);
}

/* 明亮主题: 一套变量覆盖, 其它样式不用改 */
:root[data-theme="light"]{
  --bg:        #ffffff;
  --bg-elev:   #f2f4f7;
  --bg-blur:   rgba(255,255,255,.78);
  --bg-blur-solid: rgba(255,255,255,.94);
  --bg-hover:  rgba(15,20,25,.06);
  --border:    #dfe4ea;
  --text:      #0f1419;
  --text-dim:  #536471;
  --text-mute: #8b98a5;
  --accent:    #f2547d;           /* 明亮底上稍深一点, 保证对比度 */
  --accent-h:  rgba(242,84,125,.12);
  --accent-btn:#f2547d;
  --accent-btn-h:#e0416c;
  --like:      #e0245e;
  --like-h:    rgba(224,36,94,.1);
  --rt:        #008f61;
  --rt-h:      rgba(0,143,97,.1);
}
/* 亮色下这几处写死的黑需要跟着变 */
:root[data-theme="light"] .avatar{color:#fff}
:root[data-theme="light"] .grid1,
:root[data-theme="light"] .grid2>*,
:root[data-theme="light"] .grid3>*,
:root[data-theme="light"] .grid4>*,
:root[data-theme="light"] .grid6>*,
:root[data-theme="light"] .grid8>*{border-color:var(--border)}
:root[data-theme="light"] .modalmask,
:root[data-theme="light"] .modal-mask{background:rgba(0,0,0,.45)}
:root[data-theme="light"] .toast{box-shadow:0 6px 20px rgba(0,0,0,.18)}
:root[data-theme="light"] .bubble.me .bwrap{color:#fff}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--text);
  font:15px/1.35 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",
       "Microsoft YaHei",system-ui,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
img{display:block;max-width:100%}
svg{display:block;flex:0 0 auto}

/* ============================== 三栏骨架 ============================== */
.app{
  display:grid;
  grid-template-columns:275px minmax(0,600px) 350px;
  max-width:1265px;
  margin:0 auto;
  min-height:100vh;
}

/* ---------------------------- 左导航 ---------------------------- */
.side{
  position:sticky;top:0;height:100vh;
  padding:4px 12px 20px;
  display:flex;flex-direction:column;
  align-items:flex-start;
  border-right:1px solid transparent;
}
@media (min-width:1265px){
  .side{border-color:var(--border)}
}

.brand{
  display:flex;align-items:center;gap:10px;
  min-height:52px;padding:2px 10px 2px 4px;
  border-radius:var(--pill);
  transition:background .2s var(--ease);
}
.brand:hover{background:var(--bg-hover)}
/* YONETIX 字标: 用品牌渐变做文字, 与 logo 视觉一致 */
.brand .wordmark{
  font-size:19px;font-weight:800;letter-spacing:.6px;
  background:linear-gradient(135deg,#4db8ff,#a48bff 55%,#ff7bc4);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  white-space:nowrap;
}

.nav{display:flex;flex-direction:column;gap:2px;width:100%}

.nav-item{
  display:flex;align-items:center;gap:16px;
  padding:11px 12px;border-radius:var(--pill);
  font-size:20px;line-height:1;
  width:fit-content;max-width:100%;
  transition:background .18s var(--ease);
}
.nav-item:hover{background:var(--bg-hover)}
/* 选中态用 B 站粉(文字+图标都是粉色, 底色淡淡一层粉) */
.nav-item.on{font-weight:700;color:var(--accent)}
.nav-item.on svg{color:var(--accent)}
.nav-item.on:hover{background:var(--accent-h)}
.nav-item .badge{
  margin-left:2px;background:var(--accent);color:#fff;
  font-size:12px;font-weight:700;line-height:18px;
  padding:0 6px;border-radius:var(--pill);min-width:20px;text-align:center;
}

.post-btn{
  margin-top:16px;width:90%;max-width:232px;
  padding:15px 0;border-radius:var(--pill);
  background:var(--accent);color:#fff;
  font-size:17px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .18s var(--ease);
}
.post-btn:hover{background:var(--accent-btn-h)}
.post-btn svg{display:none}

.side-foot{margin-top:auto;width:100%}
.side-foot .nav-item{font-size:16px;padding:11px 12px}

/* ---------------------------- 中栏 ---------------------------- */
.main{
  min-height:100vh;
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
}

.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:14px;
  padding:10px 16px;
  background:var(--bg-blur);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.topbar h1{font-size:20px;font-weight:800}

.search{flex:1;max-width:420px;position:relative}
.search input{
  width:100%;padding:10px 16px 10px 44px;
  background:var(--bg-elev);border:1px solid transparent;
  border-radius:var(--pill);color:var(--text);
  font-size:15px;outline:none;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.search input::placeholder{color:var(--text-dim)}
.search input:focus{border-color:var(--accent);background:var(--bg)}
.search .sicon{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  color:var(--text-dim);pointer-events:none;
}
.search input:focus + .sicon,.search:focus-within .sicon{color:var(--accent)}

/* 头像 */
.avatar{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,#1d9bf0,#7b5cff 55%,#e94fa1);
  display:grid;place-items:center;
  font-weight:700;color:#fff;font-size:16px;user-select:none;
}
.avatar.sm{width:40px;height:40px;font-size:15px}

/* 发帖框 */
.composer{
  display:flex;gap:12px;
  padding:12px 16px 4px;
  border-bottom:1px solid var(--border);
}
.cbody{flex:1;min-width:0}
.composer textarea{
  width:100%;min-height:52px;resize:none;
  background:none;border:none;outline:none;
  color:var(--text);font:20px/1.4 inherit;
  padding:8px 0;
}
.composer textarea::placeholder{color:var(--text-dim)}

.composer-bar{
  display:flex;align-items:center;gap:2px;
  padding:10px 0 12px;
  border-top:1px solid var(--border);
  margin-top:6px;
}
.tool{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;color:var(--accent);
  transition:background .16s var(--ease);
}
.tool:hover{background:var(--accent-h)}
.send{
  margin-left:auto;padding:8px 20px;border-radius:var(--pill);
  background:var(--accent);color:#fff;font-size:15px;font-weight:700;
  transition:background .16s var(--ease),opacity .16s var(--ease);
}
.send:disabled{opacity:.5;cursor:not-allowed}
.send:not(:disabled):hover{background:var(--accent-btn-h)}

/* ---------------------------- 帖子卡片 ---------------------------- */
.post{
  display:flex;gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  transition:background .16s var(--ease);
}
.post:hover{background:rgba(255,255,255,.02)}
.cbody{flex:1;min-width:0}

.head{
  display:flex;align-items:center;gap:4px;
  font-size:15px;line-height:20px;flex-wrap:wrap;
}
.nick{font-weight:700;color:var(--text)}
.nick:hover{text-decoration:underline}
.handle,.dot,.time{color:var(--text-dim)}
.vbadge{color:var(--accent);margin-left:1px}
.more{
  margin-left:auto;color:var(--text-dim);
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.more:hover{background:var(--accent-h);color:var(--accent)}

.text{
  margin-top:2px;font-size:15px;line-height:20px;
  white-space:pre-wrap;word-break:break-word;
}

/* 动作栏 —— X 的每个动作都有圆形悬停光晕 + 品牌色 */
.acts{
  display:flex;align-items:center;
  margin-top:12px;margin-left:-7px;
  max-width:100%;
}
.act{
  display:flex;align-items:center;gap:2px;
  color:var(--text-dim);font-size:13px;
  transition:color .16s var(--ease);
}
.act > svg{
  padding:7px;border-radius:50%;
  transition:background .16s var(--ease);
  box-sizing:content-box;
}
.act .n{font-variant-numeric:tabular-nums;padding-right:6px}
.act:hover{color:var(--accent)}
.act:hover > svg{background:var(--accent-h)}
.act.rt:hover{color:var(--rt)}
.act.rt:hover > svg{background:var(--rt-h)}
.act.like:hover{color:var(--like)}
.act.like:hover > svg{background:var(--like-h)}
/* 已点赞: 实心粉心 */
.act.like.on{color:var(--like)}
.act.like.on svg path{fill:var(--like);stroke:var(--like)}
/* 已转发: 绿色 */
.act.rt.on{color:var(--rt)}
.act.rt.on svg path{stroke:var(--rt)}

.acts-right{display:flex;align-items:center;margin-left:auto}

/* ---------------------------- 图片宫格 ---------------------------- */
.grid2,.grid3,.grid4,.grid6,.grid8{
  display:grid;gap:2px;margin-top:12px;
  border-radius:var(--radius);overflow:hidden;
  max-width:516px;
}
.grid2{grid-template-columns:1fr 1fr}
.grid3{grid-template-columns:repeat(3,1fr)}
.grid4{grid-template-columns:1fr 1fr}
.grid6{grid-template-columns:repeat(3,1fr)}
.grid8{grid-template-columns:repeat(4,1fr)}

.grid2>*,.grid3>*,.grid4>*,.grid6>*,.grid8>*{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#1a1a22,#131319);
  display:grid;place-items:center;color:var(--text-mute);
  border:1px solid #1c1f23;
}
.grid2>img,.grid3>img,.grid4>img,.grid6>img,.grid8>img{
  width:100%;height:100%;object-fit:cover;
}
.grid2>*{aspect-ratio:1/1;max-height:258px}
.grid3>*{aspect-ratio:1/1;max-height:200px}
.grid4>*{aspect-ratio:1/1;max-height:180px}
.grid6>*{aspect-ratio:1/1;max-height:150px}
.grid8>*{aspect-ratio:1/1;max-height:120px}

/* ---------------------------- 右栏 ---------------------------- */
.right{padding:0 10px 20px;position:sticky;top:0;height:100vh;overflow-y:auto}
.right::-webkit-scrollbar{width:0}

.card{
  background:var(--bg-elev);
  border-radius:var(--radius);
  padding:12px 16px;margin-top:12px;
}
.card h2{font-size:19px;font-weight:800;margin-bottom:4px}

.trend{
  padding:10px 0;cursor:pointer;
  transition:opacity .16s var(--ease);
  border-radius:8px;
}
.trend:hover{opacity:.85}
.trend .t1{font-size:13px;color:var(--text-dim);line-height:18px}
.trend .t2{font-weight:700;font-size:15px;line-height:20px}
.trend .t3{font-size:13px;color:var(--text-dim);line-height:18px}
.trend-more{display:block;padding:12px 0 4px;color:var(--accent);font-size:15px}
.trend-more:hover{text-decoration:underline}

.follow{display:flex;align-items:center;gap:10px;padding:10px 0}
.follow .fi{flex:1;min-width:0}
.follow .fn{font-weight:700;font-size:15px;line-height:20px;display:flex;align-items:center;gap:3px}
.follow .fn .vbadge{color:var(--accent)}
.follow .fh{font-size:15px;color:var(--text-dim);line-height:20px}
.follow-btn{
  padding:7px 16px;border-radius:var(--pill);
  background:#eff3f4;color:#0f1419;
  font-size:14px;font-weight:700;
  transition:background .16s var(--ease);
}
.follow-btn:hover{background:#d7dbdc}

.card.tip{color:var(--text-dim);font-size:13px;line-height:19px}

/* ---------------------------- 页脚 ---------------------------- */
.foot{
  padding:16px 16px 40px;
  color:var(--text-dim);font-size:13px;line-height:20px;
}
.foot a{color:var(--text-dim)}
.foot a:hover{text-decoration:underline}
.foot .small{margin-top:4px;font-size:12px;color:var(--text-mute)}

/* ---------------------------- 空状态 ---------------------------- */
.empty{padding:40px 24px;text-align:center;color:var(--text-dim)}
.empty .big{margin-bottom:10px;display:flex;justify-content:center;opacity:.55}

/* ---------------------------- 头像里的图片 ---------------------------- */
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}

/* ---------------------------- 详情页 / 互动状态 ---------------------------- */
.back-btn{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:var(--text);flex:0 0 auto;
}
.back-btn:hover{background:var(--bg-hover)}
.text.big{font-size:19px;line-height:26px;margin-top:6px}
/* 浏览数只读, 不要悬停变色(它不是按钮) */
.act.views{cursor:default}
.act.views:hover{color:var(--text-dim)}
.act.views:hover > svg{background:none}
/* 收藏: 蓝色高亮 */
.act.bm:hover{color:var(--accent)}
.act.bm:hover > svg{background:var(--accent-h)}
.act.bm.on{color:var(--accent)}
.act.bm.on svg path{fill:var(--accent);stroke:var(--accent)}
/* 动作栏里的按钮用 <button>/<a>/<span> 三种标签, 统一样式 */
button.act,a.act,span.act{
  background:none;border:none;font:inherit;padding:0;cursor:pointer;
  text-decoration:none;
}
/* 回复框: 与发帖框同款, 底部加一条分隔线 */
.composer.reply-box{border-bottom:1px solid var(--border);padding-top:14px}

/* ---------------------------- 轻提示 ---------------------------- */
.toast{
  position:fixed;left:50%;bottom:84px;transform:translate(-50%,14px);
  z-index:200;pointer-events:none;opacity:0;
  padding:9px 16px;border-radius:999px;font-size:14px;
  background:var(--accent);color:#fff;font-weight:600;
  transition:opacity .18s var(--ease),transform .18s var(--ease);
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:#f4212e}
@media (min-width:701px){ .toast{bottom:36px} }

/* ---------------------------- 发帖框状态 ---------------------------- */
.composer.big{padding-top:16px}
.composer.big textarea{min-height:150px;font-size:19px}
.composer.guest .avatar{opacity:.45}
.guest-tip{padding:14px 0;color:var(--text-dim);font-size:15px}
.guest-tip a{color:var(--accent);font-weight:600}
.guest-tip a:hover{text-decoration:underline}
.cmeta{display:flex;justify-content:flex-end;padding:2px 0}
.counter{font-size:13px;color:var(--text-dim)}
.counter.over{color:#ff8a93}
.composer-bar .hint{font-size:12.5px;color:var(--text-mute)}
.ghost{
  padding:8px 18px;border-radius:var(--pill);border:1px solid var(--border);
  color:var(--text);font-size:15px;font-weight:600;margin-right:10px;
}
.ghost:hover{background:var(--bg-hover)}
.tool[disabled]{opacity:.4;cursor:not-allowed}
.tool[disabled]:hover{background:none}

/* ---------------------------- 错误提示 ---------------------------- */
.err{
  display:none;margin:12px 16px;padding:11px 14px;border-radius:10px;font-size:14px;
  background:rgba(244,33,46,.10);border:1px solid rgba(244,33,46,.35);color:#ff8a93;
}

/* ---------------------------- 帖子配图 ---------------------------- */
.grid1{
  margin-top:12px;max-width:516px;border-radius:var(--radius);
  overflow:hidden;border:1px solid #1c1f23;
}
.grid1 .ph img{width:100%;height:auto;display:block}
.grid2 .ph img,.grid3 .ph img,.grid4 .ph img,.grid6 .ph img,.grid8 .ph img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.more.act-del:hover{color:#f4212e;background:rgba(244,33,46,.1)}

/* 主题切换按钮(在左侧导航里, 手机上就是底部栏最后一个图标) */
.nav-item.themebtn{
  background:none;border:none;font:inherit;cursor:pointer;width:100%;
  color:var(--text-dim);text-align:left;
}
.nav-item.themebtn:hover{background:var(--bg-hover);color:var(--text)}
.themebtn .ticon{display:flex;align-items:center;justify-content:center;width:26px;flex:0 0 auto}
.nav-item.themebtn .tlabel{white-space:nowrap}

/* ==================== 第二批功能: 通用控件 ==================== */
/* 按钮(登录页用 auth.css, 站内页面用这些) */
.btn{
  display:inline-flex;align-items:center;gap:6px;justify-content:center;
  padding:9px 18px;border-radius:var(--pill);border:none;cursor:pointer;
  background:var(--accent);color:#fff;font-size:14.5px;font-weight:700;
  text-decoration:none;transition:background .16s var(--ease),opacity .16s var(--ease);
}
.btn:hover{background:var(--accent-btn-h)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn.ghost:hover{background:var(--bg-hover)}
.btn.sm{padding:6px 14px;font-size:13.5px}
.linkbtn{background:none;border:none;color:var(--accent);cursor:pointer;font:inherit;padding:4px 0}
.linkbtn:hover{text-decoration:underline}
.hint{color:var(--text-mute);font-size:12.5px}
.spacer{flex:1}
.pill{
  display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;
  border:1px solid var(--border);color:var(--text-dim);
}
.pill.warn{border-color:rgba(244,33,46,.5);color:#ff8a93}
.pill.ok{border-color:rgba(0,186,124,.5);color:#5ee0a8}
.tag-admin{
  display:inline-block;margin-left:6px;padding:1px 8px;border-radius:6px;
  font-size:11.5px;background:rgba(29,155,240,.15);color:#8ec9f2;border:1px solid rgba(29,155,240,.35);
}
.section-h{
  display:flex;align-items:baseline;gap:10px;
  padding:14px 16px 6px;font-size:15px;font-weight:800;
}
.section-h .hint{font-weight:400}
.avatar.xs{width:28px;height:28px;font-size:12px}
.avatar.lg{width:84px;height:84px;font-size:32px}
.avatar.sm{width:40px;height:40px}
.loc{display:flex;align-items:center;gap:5px;color:var(--text-dim);font-size:13px;margin-top:8px}
.loc svg{opacity:.8}

/* 搜索(探索页) */
.exp-search{
  display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid var(--border);
}
.exp-search .sicon{color:var(--text-dim);display:flex}
.exp-search input{
  flex:1;background:var(--bg-elev);border:1px solid transparent;border-radius:999px;
  padding:9px 14px;color:var(--text);font:15px inherit;outline:none;
}
.exp-search input:focus{border-color:var(--accent);background:var(--bg)}

/* 标签页 */
.tabs{
  display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--border);
  position:sticky;top:53px;background:var(--bg-blur);backdrop-filter:blur(12px);z-index:15;
}
.tabs::-webkit-scrollbar{height:0}
.tab{
  padding:14px 16px;color:var(--text-dim);font-weight:600;font-size:14.5px;
  text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;
}
.tab:hover{background:var(--bg-hover);color:var(--text)}
.tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.tabs .linkbtn{margin-left:auto;padding:14px 16px;white-space:nowrap}

/* 用户行(关注/粉丝/搜索结果) */
.prow{
  display:flex;align-items:flex-start;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--border);
}
.prow:hover{background:rgba(255,255,255,.02)}
.pinfo{flex:1;min-width:0}
.pn{font-weight:700;font-size:15px;display:flex;align-items:center;gap:4px}
.pn a{color:var(--text);text-decoration:none}
.pn a:hover{text-decoration:underline}
.ph{color:var(--text-dim);font-size:13.5px}
.pb{color:var(--text);font-size:14px;margin-top:4px;line-height:19px}

/* 个人主页 */
.profile{border-bottom:1px solid var(--border)}
.pf-cover{
  height:160px;background:var(--bg-elev) center/cover no-repeat;
  background-image:linear-gradient(135deg,#1d9bf0,#7b5cff 55%,#e94fa1);
}
.pf-body{padding:0 16px 16px;position:relative}
.pf-top{display:flex;align-items:flex-end;justify-content:space-between;margin-top:-44px}
.pf-top .avatar{
  border:4px solid var(--bg);background:var(--bg-elev) center/cover no-repeat;
}
.pf-actions{display:flex;gap:8px;padding-bottom:6px}
.pf-name{font-size:21px;font-weight:800;margin-top:10px;display:flex;align-items:center;gap:2px}
.pf-user{color:var(--text-dim);font-size:14.5px;margin-top:2px}
.pf-bio{margin-top:12px;font-size:15px;line-height:21px;white-space:pre-wrap;word-break:break-word}
.pf-meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--text-dim);font-size:13.5px;margin-top:10px}
.pf-meta span{display:inline-flex;align-items:center;gap:5px}
.pf-nums{display:flex;gap:18px;margin-top:12px;font-size:14px;color:var(--text-dim)}
.pf-nums a{color:var(--text-dim);text-decoration:none}
.pf-nums a:hover{text-decoration:underline}
.pf-nums b{color:var(--text)}

/* 通知 */
.notif{
  display:flex;align-items:flex-start;gap:10px;padding:13px 16px;
  border-bottom:1px solid var(--border);
}
.notif.unread{background:rgba(29,155,240,.06)}
.notif .nicon{color:var(--accent);flex:0 0 auto;padding-top:8px;width:20px}
.notif .nbody{flex:1;min-width:0}
.notif .ntext{font-size:14.5px;line-height:20px}
.notif .nn{color:var(--text);font-weight:700;text-decoration:none}
.notif .nn:hover{text-decoration:underline}
.notif .nextra{color:var(--text-dim);font-size:13.5px;margin-top:4px;line-height:18px}
.notif .ntime{color:var(--text-mute);font-size:12.5px;margin-top:4px}

/* 私信 */
.conv{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--border);text-decoration:none;color:inherit;
}
.conv:hover{background:rgba(255,255,255,.02)}
.conv .cinfo{flex:1;min-width:0}
.conv .cn{display:flex;align-items:center;gap:5px;font-weight:700;font-size:15px}
.conv .ch{color:var(--text-dim);font-weight:400;font-size:13px}
.conv .ct{margin-left:auto;color:var(--text-mute);font-size:12.5px}
.conv .cb{color:var(--text-dim);font-size:13.5px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv .cb .mine{color:var(--text-mute)}
.chat-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border)}
.chat{
  display:flex;flex-direction:column;gap:10px;padding:16px;min-height:200px;max-height:56vh;overflow-y:auto;
}
.bubble{display:flex;align-items:flex-end;gap:8px;max-width:82%}
.bubble.me{align-self:flex-end;flex-direction:row-reverse}
.bwrap{background:var(--bg-elev);border-radius:16px;padding:9px 13px}
.bubble.me .bwrap{background:var(--accent);color:#fff}
.btxt{font-size:14.5px;line-height:20px;white-space:pre-wrap;word-break:break-word}
.btime{font-size:11.5px;color:var(--text-mute);margin-top:4px}
.bubble.me .btime{color:rgba(255,255,255,.8)}

/* 设置页 */
.setform{padding:0 0 20px}
.fsec{padding:16px;border-bottom:1px solid var(--border)}
.fsec h2{font-size:16px;font-weight:800;margin-bottom:12px}
.fsec.actions{display:flex;align-items:center;gap:12px;border-bottom:none}
.field{display:block;margin-bottom:12px}
.field > span{display:block;color:var(--text-dim);font-size:13px;margin-bottom:6px}
.field input[type=text],.field input[type=password],.field textarea,.field select{
  width:100%;background:var(--bg-elev);border:1px solid var(--border);border-radius:10px;
  padding:10px 12px;color:var(--text);font:15px inherit;outline:none;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent)}
.field textarea{resize:vertical;line-height:20px}
.imgrow{display:flex;gap:18px;flex-wrap:wrap}
.imglabel{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.imglabel.wide{flex:1;min-width:220px}
.imglabel > span:first-child{color:var(--text-dim);font-size:13px}
.preview{
  display:grid;place-items:center;background:var(--bg-elev) center/cover no-repeat;
  border-radius:50%;overflow:hidden;
}
.preview.cover{width:100%;max-width:360px;height:104px;border-radius:12px}
.readonly-row{display:flex;align-items:baseline;gap:8px;padding:8px 0;color:var(--text-dim);font-size:14px}
.readonly-row b{color:var(--text)}

/* 后台 */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;padding:14px 16px}
.stat{background:var(--bg-elev);border-radius:var(--radius);padding:14px 16px}
.stat .k{color:var(--text-dim);font-size:13px}
.stat .v{font-size:26px;font-weight:800;margin:4px 0 2px}
.stat .s{color:var(--text-mute);font-size:12.5px}
.dtable{width:100%;border-collapse:collapse;font-size:13.5px}
.dtable th,.dtable td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.dtable th{color:var(--text-dim);font-weight:600}
.dtable .nowrap{white-space:nowrap}
.dtable .wrap{word-break:break-word;max-width:420px}
.adrow{
  display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);
}
.adrow .abody{flex:1;min-width:0}
.adrow .atitle{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.adrow .atitle a{color:var(--accent);text-decoration:none}
.adrow .ameta{color:var(--text-dim);font-size:13px;margin-top:3px}
.adrow .aprev{color:var(--text-dim);font-size:13.5px;margin-top:6px;line-height:19px}
.adrow .aacts{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}

/* 发帖页: 图片/投票/位置/定时/表情 */
.upgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.upgrid:empty{display:none}
.upitem{
  position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;
  border:1px solid var(--border);background:var(--bg-elev);display:grid;place-items:center;
  color:var(--text-mute);font-size:12.5px;
}
.upitem img{width:100%;height:100%;object-fit:cover}
.upitem .updel{
  position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.7);color:#fff;border:none;cursor:pointer;font-size:14px;line-height:1;
}
.polledit{margin-top:12px;padding:12px;border:1px solid var(--border);border-radius:12px}
.polledit .ph{color:var(--text-dim);font-size:13px;margin-bottom:8px}
.polledit .poll-in{
  width:100%;margin-bottom:8px;background:var(--bg-elev);border:1px solid var(--border);
  border-radius:10px;padding:9px 12px;color:var(--text);font:14.5px inherit;outline:none;
}
.poll-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:2px}
.poll-row select{
  background:var(--bg-elev);border:1px solid var(--border);color:var(--text);
  border-radius:8px;padding:4px 8px;font:13px inherit;margin-left:4px;
}
.extra-row{
  display:flex;align-items:center;gap:10px;margin-top:10px;padding:9px 12px;
  border:1px solid var(--border);border-radius:10px;
}
.extra-row .lbl{display:inline-flex;align-items:center;gap:5px;color:var(--text-dim);font-size:13.5px}
.extra-row input{
  flex:1;background:none;border:none;outline:none;color:var(--text);font:14.5px inherit;
}
.extra-row input[type=datetime-local]{color-scheme:dark}
.emojipick{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:4px;
  margin-top:10px;padding:10px;border:1px solid var(--border);border-radius:12px;max-height:180px;overflow-y:auto;
}
.emojipick button{
  background:none;border:none;cursor:pointer;font-size:20px;line-height:1;padding:6px;border-radius:8px;
}
.emojipick button:hover{background:var(--bg-hover)}

/* 投票(帖子内) */
.poll{margin-top:12px;max-width:516px}
.poll-opt{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:10px 14px;margin-bottom:6px;border-radius:10px;cursor:pointer;
  background:var(--bg-elev);border:1px solid var(--border);color:var(--text);
  font:14.5px inherit;text-align:left;overflow:hidden;
}
.poll-opt:hover{border-color:var(--accent)}
.poll-opt.on{border-color:var(--accent)}
.poll-opt:disabled{cursor:default;opacity:.9}
.poll-opt .bar{
  position:absolute;left:0;top:0;bottom:0;background:rgba(29,155,240,.18);
  transition:width .25s var(--ease);z-index:0;
}
.poll-opt .lb,.poll-opt .pc{position:relative;z-index:1}
.poll-opt .pc{color:var(--text-dim);font-variant-numeric:tabular-nums}
.poll-meta{color:var(--text-dim);font-size:13px;margin-top:2px}

/* 更多菜单 / 弹窗 */
.popmenu{
  position:fixed;z-index:120;min-width:148px;padding:6px;
  background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.6);
}
.popmenu button{
  display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;
  background:none;border:none;color:var(--text);font:14.5px inherit;cursor:pointer;
}
.popmenu button:hover{background:var(--bg-hover)}
.popmenu button.danger{color:#ff8a93}
.modal-mask{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(6px);
}
.modal{
  width:100%;max-width:420px;background:var(--bg-elev);border:1px solid var(--border);
  border-radius:16px;padding:18px;max-height:88vh;overflow-y:auto;
}
.modal h3{font-size:17px;font-weight:800;margin-bottom:14px}
.modal-acts{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}

/* 法律/说明页 */
.doc{padding:16px;font-size:15px;line-height:24px}
.doc .lead{color:var(--text);margin-bottom:14px}
.doc h2{font-size:16px;font-weight:800;margin:20px 0 8px}
.doc ul{margin:8px 0 8px 20px}
.doc li{margin-bottom:6px}
.doc p{margin-bottom:8px;color:var(--text)}
.doc .dtable{margin:8px 0 12px}
.doc a{color:var(--accent)}

/* ============================== 响应式 ============================== */
/* 1280 以下: 收窄右栏 */
@media (max-width:1265px){
  .app{grid-template-columns:88px minmax(0,600px) 290px}
  .nav-item span:not(.badge),.side-foot .nav-item span{display:none}
  /* 窄侧栏只放得下字标: 缩小但保留(原来的方块图标已按老板要求删除) */
  .brand .wordmark{font-size:11px;letter-spacing:.2px}
  .nav-item{padding:12px;justify-content:center}
  .brand{justify-content:center;padding:2px 2px;min-height:44px}
  .post-btn{width:52px;max-width:52px;padding:15px 0}
  .post-btn svg{display:block}
  .post-btn span{display:none}
}
/* 1060 以下: 去掉右栏 */
@media (max-width:1060px){
  .app{grid-template-columns:88px minmax(0,1fr)}
  .right{display:none}
}
/* 700 以下: 底部标签栏 */
@media (max-width:700px){
  .app{grid-template-columns:1fr;max-width:100%}
  .side{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    height:53px;z-index:60;
    flex-direction:row;align-items:center;justify-content:space-around;
    padding:0 4px;
    background:var(--bg-blur-solid);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-right:none;border-top:1px solid var(--border);
  }
  .side .brand,.side .post-btn,.side-foot{display:none}
  .nav{flex-direction:row;justify-content:space-around;width:100%;gap:0}
  .nav-item{padding:12px 14px;gap:0}
  .nav-item .badge{
    position:absolute;transform:translate(12px,-12px);
    font-size:10px;line-height:15px;min-width:15px;padding:0 4px;
  }
  .nav-item{position:relative}
  .main{padding-bottom:56px;border-left:none;border-right:none}
  .grid8{grid-template-columns:repeat(4,1fr)}
  .grid8>*{max-height:80px}
}