/* ============================================================
   触娱 · 布局系统 v2
   ------------------------------------------------------------
   一条规则贯穿所有分辨率：页面上所有需要对齐的东西
   （导航内容、列表、侧栏、日历、编辑器、女孩图）都从同一个
   .shell 宽度推导，不再各写各的 max-width。

   断点（按内容需要，而不是按设备）：
     < 1024   单列：移动顶栏 + 底部 tabbar，shell 最宽 760
     >= 1024  双列：通栏顶部导航，shell 1080 = 列表 + 侧栏
   女孩图 >= 1360 才出现（两侧有足够留白时）
   ============================================================ */

:root{
  --gutter:clamp(12px,3.4vw,32px);
  --shell-max:760px;
  --header-h:60px;
  --mhd-h:52px;
  --aside-w:300px;
  --col-gap:24px;
  --r-panel:16px;

  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;--sp-8:48px;

  --z-sticky:30;--z-tabbar:40;--z-header:60;

  --ease-out:cubic-bezier(.22,1,.36,1);

  /* 浅色（基础） */
  --page-bg:#f4f5f7;
  --panel-bg:#ffffff;
  --panel-head:#ffffff;
  --panel-line:#ececf1;
  --row-hover:#f7f7fa;
  --hd-bg:rgba(255,255,255,.88);
  --hd-line:#ececf1;
  --input-bg:#f1f2f5;
  --chip-bg:#f1f2f5;
  --title-hover:#000;
  --brand-tint:rgba(255,36,66,.08);
  --brand-line:rgba(255,36,66,.35);
}
@media (min-width:1024px){
  :root{
    --shell-max:1080px;
    --aside-w:clamp(260px,24vw,300px);
  }
}

:root[data-theme="star"]{
  --page-bg:#03091A;
  --panel-bg:rgba(7,18,40,.84);
  --panel-head:rgba(8,20,44,.95);
  --panel-line:rgba(126,170,250,.13);
  --row-hover:rgba(126,170,250,.065);
  --hd-bg:rgba(4,12,30,.80);
  --hd-line:rgba(126,170,250,.14);
  --input-bg:rgba(126,170,250,.10);
  --chip-bg:rgba(126,170,250,.12);
  --title-hover:#fff;
  --brand-tint:rgba(255,92,114,.14);
  --brand-line:rgba(255,92,114,.45);
}
:root[data-theme="dark"]{
  --page-bg:#0E1116;
  --panel-bg:#161a21;
  --panel-head:#161a21;
  --panel-line:#232833;
  --row-hover:#1c212a;
  --hd-bg:rgba(14,17,22,.90);
  --hd-line:#232833;
  --input-bg:#20252e;
  --chip-bg:#20252e;
  --title-hover:#fff;
  --brand-tint:rgba(255,92,114,.14);
  --brand-line:rgba(255,92,114,.45);
}

/* ---------- 外框：不再限宽，宽度交给 .shell ---------- */
/* 始终给滚动条留位：长页（首页）和短页（版块、我的）之间切换时内容不再左右跳 7px */
html{scrollbar-gutter:stable}
body{background:var(--page-bg)}
.app{
  max-width:none;width:100%;margin:0;min-height:100vh;
  padding-bottom:calc(var(--tabh) + var(--safe-b));
  box-shadow:none;border-radius:0;
}
@media (min-width:1024px){
  .app{padding-bottom:0}
  .app .tabbar{display:none}
}
.shell{
  width:min(calc(100% - 2 * var(--gutter)),var(--shell-max));
  margin-inline:auto;
}
.pc-only{display:none !important}
@media (min-width:1024px){
  .m-only{display:none !important}
  .pc-only{display:revert !important}
}

/* 底部 tabbar / 回复条：不再锁 520 宽 */
.tabbar{max-width:none}
.tabbar a:focus{outline:none}
.tabbar a:focus-visible{outline:2px solid var(--brand);outline-offset:-4px;border-radius:10px}
.composer{max-width:none}
@media (min-width:1024px){
  .composer{
    max-width:760px;left:50%;right:auto;width:100%;transform:translateX(-50%);
    border-radius:14px 14px 0 0;
  }
}

/* ============================================================
   PC 顶部导航（通栏背景，内容对齐 .shell）
   ============================================================ */
.site-hd{display:none}
@media (min-width:1024px){
  .site-hd{
    display:block;position:sticky;top:0;z-index:var(--z-header);
    background:var(--hd-bg);
    backdrop-filter:saturate(160%) blur(18px);
    -webkit-backdrop-filter:saturate(160%) blur(18px);
    border-bottom:1px solid var(--hd-line);
  }
  .site-hd .shell{
    height:var(--header-h);
    display:flex;align-items:center;gap:var(--sp-6);
  }
}
.hd-logo{
  display:flex;align-items:center;gap:10px;flex:none;
  font-size:18px;font-weight:800;letter-spacing:1px;color:var(--text);
}
.hd-logo i{
  width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,#ff6a7e,#ff2442);color:#fff;
  font-size:12.5px;font-style:normal;font-weight:800;letter-spacing:0;
  box-shadow:0 4px 12px rgba(255,36,66,.32);
}
.hd-nav{display:flex;align-items:center;gap:2px}
.hd-nav a{
  position:relative;height:var(--header-h);padding:0 14px;
  display:flex;align-items:center;gap:7px;
  font-size:14.5px;color:var(--text-2);
  transition:color .2s var(--ease-out);
}
.hd-nav a svg{width:17px;height:17px;flex:none;opacity:.85}
.hd-nav a:hover{color:var(--text)}
.hd-nav a.on{color:var(--text);font-weight:650}
.hd-nav a.on::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;
  border-radius:2px;background:var(--brand);
}
.hd-nav a:focus{outline:none}
.hd-nav a:focus-visible{outline:2px solid var(--brand);outline-offset:-6px;border-radius:10px}

.hd-search{
  margin-left:auto;flex:0 1 300px;min-width:180px;height:38px;border-radius:19px;
  display:flex;align-items:center;gap:8px;padding:0 6px 0 14px;
  background:var(--input-bg);border:1px solid transparent;
  color:var(--text-3);
  transition:border-color .2s var(--ease-out),background .2s var(--ease-out);
}
.hd-search:focus-within{border-color:var(--brand-line)}
.hd-search svg{width:15px;height:15px;flex:none;opacity:.7}
.hd-search input{
  flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;
  color:var(--text);font-size:13.5px;
}
.hd-search input::placeholder{color:var(--text-3)}
/* 清除按钮：PC / 移动两个搜索框共用，有内容才出现 */
[data-search] .clear{
  width:26px;height:26px;border-radius:50%;display:none;place-items:center;
  color:var(--text-3);font-size:13px;flex:none;
}
[data-search].has-val .clear{display:grid}
[data-search] .clear:hover{background:var(--row-hover);color:var(--text)}

.hd-actions{display:flex;align-items:center;gap:10px;flex:none}
.hd-icon{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:var(--text-2);
}
.hd-icon:hover{background:var(--row-hover);color:var(--text)}
.hd-icon svg{width:19px;height:19px}
.hd-pub{
  height:36px;padding:0 16px;border-radius:11px;
  display:flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,#ff6a7e,#ff2442);color:#fff;
  font-size:14px;font-weight:700;white-space:nowrap;
  box-shadow:0 6px 16px rgba(255,36,66,.28);
  transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.hd-pub:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(255,36,66,.36)}
.hd-pub svg{width:15px;height:15px}
.hd-me{
  width:34px;height:34px;border-radius:50%;flex:none;overflow:hidden;
  display:grid;place-items:center;
  box-shadow:0 0 0 2px var(--hd-line);
}
.hd-me .av{width:100%;height:100%;border-radius:50%;font-size:13px}
.hd-login{
  height:34px;padding:0 14px;border-radius:10px;display:flex;align-items:center;
  font-size:13.5px;font-weight:600;color:var(--text);
  background:var(--chip-bg);
}
.hd-login:hover{background:var(--row-hover)}

/* ============================================================
   移动顶栏（< 1024，只在首页）：Logo + 搜索 + 主题 + 消息，下挂分类
   ============================================================ */
.m-hd{
  position:sticky;top:0;z-index:var(--z-header);
  background:var(--hd-bg);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid var(--hd-line);
}
@media (min-width:1024px){ .m-hd{display:none} }
.m-row{height:var(--mhd-h);display:flex;align-items:center;gap:10px}
.m-row .hd-logo{font-size:17px}
.m-row .hd-logo i{width:26px;height:26px;border-radius:8px;font-size:12px}
.m-search{
  flex:1;min-width:0;height:36px;border-radius:18px;
  display:flex;align-items:center;gap:7px;padding:0 4px 0 12px;
  background:var(--input-bg);color:var(--text-3);
  border:1px solid transparent;
}
.m-search:focus-within{border-color:var(--brand-line)}
.m-search svg{width:15px;height:15px;flex:none;opacity:.7}
.m-search input{
  flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;
  color:var(--text);font-size:16px;         /* iOS 小于 16px 会在聚焦时自动放大页面 */
}
.m-search input::placeholder{color:var(--text-3);font-size:14px}
.m-row .tb-icon{width:36px;height:36px;flex:none}
.m-sub{display:flex;align-items:center;gap:12px;height:44px}

/* ============================================================
   分类 tabs + 排序（两端共用组件）
   ============================================================ */
.ftabs{
  flex:1;min-width:0;display:flex;align-items:stretch;gap:var(--sp-5);
  overflow-x:auto;scrollbar-width:none;align-self:stretch;
}
.ftabs::-webkit-scrollbar{display:none}
.ftabs a{
  position:relative;display:flex;align-items:center;white-space:nowrap;
  font-size:14.5px;color:var(--text-2);
  transition:color .2s var(--ease-out);
}
.ftabs a:hover{color:var(--text)}
.ftabs a.on{color:var(--text);font-weight:700}
.ftabs a.on::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;
  border-radius:2px;background:var(--brand);
}
.ftabs a:focus{outline:none}
.ftabs a:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

.fsort{
  flex:none;display:inline-flex;padding:3px;border-radius:10px;
  background:var(--chip-bg);
}
.fsort button{
  height:26px;padding:0 11px;border-radius:7px;
  font-size:12.5px;color:var(--text-3);
  transition:background .2s var(--ease-out),color .2s var(--ease-out);
}
.fsort button:hover{color:var(--text)}
.fsort button.on{background:var(--panel-head);color:var(--text);font-weight:650;
  box-shadow:0 1px 3px rgba(0,0,0,.12)}
:root[data-theme="star"] .fsort button.on{background:rgba(126,170,250,.18);box-shadow:none}

/* ============================================================
   首页：列表 + 侧栏
   ============================================================ */
.home{padding-block:var(--sp-3) var(--sp-6)}
.home-aside{display:none}
@media (min-width:1024px){
  .home{
    display:grid;
    grid-template-columns:minmax(0,1fr) var(--aside-w);
    gap:var(--col-gap);align-items:start;
    padding-block:var(--sp-5) var(--sp-8);
  }
  .home-aside{display:flex;flex-direction:column;gap:var(--sp-4)}
}
@media (min-width:1024px) and (min-height:820px){
  .home-aside{position:sticky;top:calc(var(--header-h) + var(--sp-5))}
}

/* ---------- 列表面板 ---------- */
.feed-panel{
  background:var(--panel-bg);
  border:1px solid var(--panel-line);
  border-radius:var(--r-panel);
}
:root[data-theme="star"] .feed-panel,
:root[data-theme="star"] .side-card{
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 10px 36px rgba(0,6,26,.38),inset 0 1px 0 rgba(150,195,255,.06);
}
:root[data-theme="light"] .feed-panel,
:root[data-theme="light"] .side-card{box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 20px rgba(16,24,40,.04)}

/* 面板头：PC 才有（移动端分类在顶栏里），吸顶在导航下面 */
.feed-head{display:none}
@media (min-width:1024px){
  .feed-head{
    display:flex;align-items:center;gap:var(--sp-4);
    position:sticky;top:var(--header-h);z-index:var(--z-sticky);
    height:54px;padding:0 var(--sp-5);
    background:var(--panel-head);
    border-bottom:1px solid var(--panel-line);
    border-radius:var(--r-panel) var(--r-panel) 0 0;
  }
}
.search-chip{
  display:flex;align-items:center;gap:8px;min-width:0;
  font-size:13px;color:var(--text-2);
}
.search-chip b{color:var(--text);font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:16em}
.search-chip button{
  height:24px;padding:0 9px;border-radius:7px;font-size:12px;
  background:var(--chip-bg);color:var(--text-2);flex:none;
}
.search-chip button:hover{color:var(--text)}
.m-searchbar{padding:10px 2px 0}

/* ---------- 帖子行（纯文字：标题 + 摘要 + 元信息） ---------- */
.post-list{display:block}
.post-row{
  position:relative;display:block;
  padding:var(--sp-4) var(--sp-4) 14px;
  border-top:1px solid var(--panel-line);
  color:inherit;
  transition:background-color .2s var(--ease-out);
}
.post-row:first-child{border-top:0}
.post-list > .post-row:first-child{border-radius:var(--r-panel) var(--r-panel) 0 0}
.post-list > .post-row:last-child{border-radius:0 0 var(--r-panel) var(--r-panel)}
@media (min-width:1024px){
  .post-row{padding:18px var(--sp-5) 16px}
  .post-list > .post-row:first-child{border-radius:0}
}
.post-row:hover{background:var(--row-hover)}
.post-row:active{background:var(--row-hover)}
.post-row:focus{outline:none}
.post-row:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
/* 置顶：左侧一道品牌色竖线，不靠大色块 */
.post-row.is-pin::before{
  content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;
  border-radius:0 3px 3px 0;background:var(--brand);
}

.pr-title{
  margin:0;font-size:15.5px;line-height:1.5;font-weight:650;letter-spacing:.1px;
  color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;
  transition:color .2s var(--ease-out);
}
@media (min-width:1024px){ .pr-title{font-size:16.5px} }
.post-row:hover .pr-title{color:var(--title-hover)}

.pr-ex{
  margin-top:6px;font-size:13.5px;line-height:1.72;color:var(--text-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;
}
@media (min-width:1024px){ .pr-ex{font-size:14px} }
.pr-ex.is-empty{color:var(--text-3)}

.pr-meta{
  margin-top:10px;display:flex;align-items:center;gap:6px;min-width:0;
  font-size:12.5px;line-height:20px;color:var(--text-3);
}
.pr-meta .av{
  width:20px;height:20px;border-radius:50%;flex:none;object-fit:cover;font-size:10px;
}
.pr-author{color:var(--text-2);min-width:0;max-width:10em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-dot{opacity:.5;flex:none}
.pr-time{white-space:nowrap;flex:none}
.pr-forum{
  flex:none;height:20px;padding:0 7px;border-radius:6px;
  display:inline-flex;align-items:center;font-size:11.5px;
  background:var(--chip-bg);color:var(--text-2);
}
/* 版主/管理员的置顶操作：放在元信息行空白处，低调但可点 */
.pr-pin{
  flex:none;margin-left:12px;height:24px;padding:0 9px;border-radius:7px;
  display:inline-flex;align-items:center;gap:4px;
  background:var(--chip-bg);border:1px solid var(--line);
  color:var(--text-3);font-size:11.5px;font-weight:600;white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s;
}
.pr-pin svg{width:12px;height:12px;flex:none}
.pr-pin:hover{color:var(--brand);border-color:var(--brand-line);background:var(--brand-tint)}
.pr-pin.on{color:var(--brand);background:var(--brand-tint);border-color:var(--brand-line)}
.pr-pin:disabled{opacity:.5;cursor:wait}

.pr-stats{margin-left:auto;display:flex;align-items:center;gap:14px;flex:none;padding-left:8px}
.pr-stat{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-stat svg{width:14px;height:14px;flex:none;opacity:.85}
.pr-stat.views{display:none}
@media (min-width:640px){ .pr-stat.views{display:inline-flex} }
.pr-stat.pics{color:var(--text-2)}

.tag{
  display:inline-flex;align-items:center;height:20px;padding:0 7px;margin-right:8px;
  border-radius:6px;font-size:11.5px;font-weight:700;vertical-align:2px;letter-spacing:.5px;
}
.tag.pin{background:var(--brand-tint);color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand-line)}
.tag.hot{background:rgba(255,159,46,.14);color:#e98a12;box-shadow:inset 0 0 0 1px rgba(255,159,46,.32)}
:root[data-theme="star"] .tag.hot,:root[data-theme="dark"] .tag.hot{color:#ffb765}

/* ---------- 列表状态：骨架 / 空 / 到底 ---------- */
.sk-row{padding:18px var(--sp-5);border-top:1px solid var(--panel-line)}
.sk-row:first-child{border-top:0}
.sk-bar{height:14px;border-radius:7px;background:var(--chip-bg);animation:sk 1.3s ease-in-out infinite}
.sk-bar + .sk-bar{margin-top:10px}
.sk-bar.t{height:17px;width:62%}
.sk-bar.m{width:92%}
.sk-bar.s{width:34%;height:12px;margin-top:14px}

.list-empty{padding:64px 24px;text-align:center}
.list-empty b{display:block;font-size:16px;font-weight:700;color:var(--text)}
.list-empty p{margin:8px 0 18px;font-size:13.5px;color:var(--text-3)}
.list-empty a{
  display:inline-flex;align-items:center;height:36px;padding:0 18px;border-radius:10px;
  background:linear-gradient(135deg,#ff6a7e,#ff2442);color:#fff;font-size:13.5px;font-weight:700;
}
.list-foot{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:18px 0 4px;font-size:12.5px;color:var(--text-3);
}
.list-foot .spinner{width:16px;height:16px;margin:0;border-width:2px}
.list-foot button{color:var(--brand);font-size:12.5px}

/* ============================================================
   侧栏卡片（PC）
   ============================================================ */
.side-card{
  background:var(--panel-bg);
  border:1px solid var(--panel-line);
  border-radius:var(--r-panel);
  padding:var(--sp-4) var(--sp-4) var(--sp-3);
}
.side-ttl{
  display:flex;align-items:center;justify-content:space-between;
  margin:0 0 var(--sp-2);padding:0 4px;
  font-size:13px;font-weight:700;color:var(--text);letter-spacing:.5px;
}
.side-ttl small{font-size:12px;font-weight:400;color:var(--text-3);letter-spacing:0}

.side-forums{display:flex;flex-direction:column;gap:2px}
.side-forum{
  display:flex;align-items:center;gap:12px;width:100%;padding:8px;border-radius:12px;
  text-align:left;transition:background .2s var(--ease-out);
}
.side-forum:hover{background:var(--row-hover)}
.side-forum.on{background:var(--brand-tint)}
.side-forum .ic{
  width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;
  font-size:18px;background:var(--chip-bg);
}
.side-forum .nm{flex:1;min-width:0}
.side-forum .nm b{display:block;font-size:14px;font-weight:650;color:var(--text)}
.side-forum .nm span{font-size:12px;color:var(--text-3)}
.side-forum.on .nm b{color:var(--brand)}

.side-list{display:flex;flex-direction:column}
.side-item{
  display:flex;gap:10px;padding:9px 6px;border-radius:10px;
  transition:background .2s var(--ease-out);
}
.side-item:hover{background:var(--row-hover)}
.side-item .no{
  width:18px;flex:none;font-size:13px;font-weight:800;line-height:20px;
  color:var(--text-3);font-variant-numeric:tabular-nums;text-align:center;
}
.side-item:nth-child(-n+3) .no{color:var(--brand)}
.side-item .tx{flex:1;min-width:0}
.side-item .tx b{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:13.5px;line-height:20px;font-weight:550;color:var(--text);word-break:break-word;
}
.side-item .tx span{display:block;margin-top:2px;font-size:11.5px;color:var(--text-3)}
.side-empty{padding:10px 6px 8px;font-size:12.5px;line-height:1.6;color:var(--text-3)}
.side-foot{
  display:flex;flex-wrap:wrap;gap:6px 14px;padding:2px 6px;
  font-size:12px;color:var(--text-3);
}
.side-foot a:hover{color:var(--text)}

/* ============================================================
   其它页面统一到 .shell 宽度（日历 / 编辑器 / 版块）
   ============================================================ */
/* 用户主页里「TA 的帖子」复用列表面板 */
.user-posts{margin:0 var(--sp-3) var(--sp-6)}
@media (min-width:1024px){ .user-posts{margin:0 0 var(--sp-8)} }

/* 浏览器自带的搜索清除叉号与我们自己的重复，去掉 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
/* 只清上下外边距：左右要留给 .hd-search 的 margin-left:auto 把搜索和按钮推到最右 */
form[data-search]{margin-top:0;margin-bottom:0}

.side-item .no svg{width:14px;height:14px;margin-top:3px;color:var(--brand)}
.wx-frame,.cal-stage,.compose,.forum-grid{
  width:min(calc(100% - 2 * var(--gutter)),var(--shell-max));
  max-width:none;margin-inline:auto;padding-inline:0;
}
.wx-frame{padding-top:var(--sp-3);padding-bottom:var(--sp-2)}
.cal-stage{padding-bottom:var(--sp-6)}
@media (min-width:1024px){
  .wx-frame{padding-top:var(--sp-5);padding-bottom:var(--sp-3)}
  .cal-stage{padding-top:var(--sp-2);padding-bottom:var(--sp-8)}
  .compose{padding-top:var(--sp-6);padding-bottom:60px}
  .forum-grid{padding-top:var(--sp-5);padding-bottom:var(--sp-8)}
  /* 详情页自己的返回条吸在全站导航下面，不再被导航盖住 */
  .navbar{top:var(--header-h)}
}

@media (prefers-reduced-motion:reduce){
  .post-row,.pr-title,.hd-pub,.fsort button{transition:none}
}

/* ============================================================
   主题 v3：切换器 + 浅色/深色氛围（星空不受影响）
   ============================================================ */

/* ---------- 主题切换按钮：带文字标签 + 箭头，明确可点 ---------- */
.theme-btn{
  width:auto;height:34px;padding:0 9px 0 8px;border-radius:11px;
  display:inline-flex;align-items:center;gap:6px;flex:none;
  border:1px solid var(--line);
  background:var(--chip-bg);
  color:var(--text-2);
  font-size:12.5px;font-weight:650;line-height:1;white-space:nowrap;
  transition:background .18s var(--ease-out),color .18s var(--ease-out),
             border-color .18s var(--ease-out),transform .18s var(--ease-out);
}
.theme-btn:hover{
  background:var(--row-hover);color:var(--text);
  border-color:var(--brand-line);transform:translateY(-1px);
}
.theme-btn:focus{outline:none}
.theme-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.theme-btn svg{width:16px;height:16px;flex:none}
.theme-btn .tb-label{letter-spacing:.2px}
.theme-btn .chev{width:11px;height:11px;opacity:.6;transition:transform .2s var(--ease-out)}
.theme-btn[aria-expanded="true"]{background:var(--brand-tint);color:var(--brand);border-color:var(--brand-line)}
.theme-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}

/* ---------- 主题下拉菜单 ---------- */
.theme-menu-wrap{position:fixed;z-index:220}
.theme-menu{
  width:246px;padding:8px;border-radius:14px;
  background:var(--card-solid,#fff);
  border:1px solid var(--line);
  box-shadow:0 20px 60px rgba(0,0,0,.34);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  animation:tmIn .2s var(--ease-out);
}
@keyframes tmIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.tm-head{
  padding:7px 10px 9px;margin-bottom:5px;
  border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:1.2px;color:var(--text-3);font-weight:700;
}
.tm-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border-radius:10px;text-align:left;
  color:var(--text-2);transition:background .16s,color .16s;
}
.tm-item:hover{background:var(--row-hover);color:var(--text)}
.tm-item.on{background:var(--brand-tint);color:var(--text)}
.tm-ico{
  width:30px;height:30px;border-radius:9px;flex:none;
  display:grid;place-items:center;background:var(--chip-bg);
}
.tm-item.on .tm-ico{background:linear-gradient(135deg,#ff6a7e,#ff2442);color:#fff}
.tm-ico svg{width:16px;height:16px}
.tm-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tm-txt b{font-size:13.5px;font-weight:700}
.tm-txt small{font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-check{width:18px;text-align:center;color:var(--brand);font-size:14px;font-weight:800;flex:none}

/* ---------- 浅色 / 深色：固定氛围层，不随页面高度拉伸 ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .55s ease;
}
:root[data-theme="light"] body::before{
  opacity:1;
  background:
    radial-gradient(880px 460px at 6% -8%, rgba(255,92,114,.11), transparent 62%),
    radial-gradient(780px 520px at 98% 2%, rgba(59,124,255,.10), transparent 64%),
    radial-gradient(900px 620px at 50% 112%, rgba(255,170,80,.07), transparent 60%);
}
:root[data-theme="dark"] body::before{
  opacity:1;
  background:
    radial-gradient(900px 520px at 4% -10%, rgba(255,92,114,.13), transparent 62%),
    radial-gradient(820px 540px at 100% 0%, rgba(92,126,255,.15), transparent 62%),
    radial-gradient(1000px 700px at 50% 116%, rgba(46,68,120,.26), transparent 64%);
}
/* 内容层浮在氛围层之上（星空模式本来就是 transparent + z-index 1） */
.app{position:relative;z-index:1;background:transparent}
/* 与 cosmos.css 的深色规则同优先级、后加载：避免深色 app 底色盖住氛围层 */
:root[data-theme="light"] .app,
:root[data-theme="dark"] .app{background:transparent}

/* ---------- 浅色 / 深色：卡片与导航的质感 ---------- */
:root[data-theme="light"] .feed-panel,
:root[data-theme="light"] .side-card,
:root[data-theme="light"] .cal-card{
  background:linear-gradient(180deg,#ffffff,#fcfcfe);
  box-shadow:0 1px 2px rgba(16,24,40,.03),0 10px 30px rgba(16,24,40,.07);
}
:root[data-theme="dark"] .feed-panel,
:root[data-theme="dark"] .side-card,
:root[data-theme="dark"] .cal-card{
  background:linear-gradient(160deg,#1c212b,#161a22);
  border-color:rgba(255,255,255,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 14px 36px rgba(0,0,0,.30);
}
/* 详情页 / 用户页 / 发帖页的卡片：app.css 里写死了 #fff，深色必须覆盖，否则白底浅字 */
:root[data-theme="dark"] .article,
:root[data-theme="dark"] .replies,
:root[data-theme="dark"] .mine-list,
:root[data-theme="dark"] .profile-card,
:root[data-theme="dark"] .form,
:root[data-theme="dark"] .forum-card{
  background:linear-gradient(160deg,#1c212b,#161a22);
  border-color:rgba(255,255,255,.07);
}
:root[data-theme="dark"] .reply{border-color:rgba(255,255,255,.05)}
:root[data-theme="dark"] .article .stat{border-color:rgba(255,255,255,.08)}
/* 浅色模式详情页也用极浅渐变，和列表卡质感统一 */
:root[data-theme="light"] .article,
:root[data-theme="light"] .replies{
  background:linear-gradient(180deg,#ffffff,#fcfcfe);
}
:root[data-theme="light"] .site-hd{
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,250,253,.86));
  border-bottom-color:rgba(16,24,40,.07);
}
:root[data-theme="dark"] .site-hd{
  background:linear-gradient(180deg,rgba(24,28,36,.94),rgba(18,21,28,.86));
  border-bottom-color:rgba(255,255,255,.07);
}
:root[data-theme="light"] .post-row:hover,
:root[data-theme="dark"] .post-row:hover{
  background:linear-gradient(90deg,var(--brand-tint),transparent 65%);
}
/* 侧栏小标题的品牌色竖条 */
.side-ttl{padding-left:9px;border-left:2px solid var(--brand)}

@media (max-width:1023px){
  .m-row .theme-btn{height:34px;padding:0 8px;gap:4px}
  .m-row .theme-btn .tb-label{display:none}
}
@media (prefers-reduced-motion:reduce){
  .theme-menu{animation:none}
  body::before{transition:none}
}

/* ============================================================
   修正：导航条宽度 = 正文内容区（.shell），不再铺满视口
   ============================================================ */
@media (min-width:1024px){
  .site-hd{
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-bottom:0 !important;
  }
  .site-hd .shell{
    background:var(--hd-bg);
    backdrop-filter:saturate(160%) blur(18px);
    -webkit-backdrop-filter:saturate(160%) blur(18px);
    border:1px solid var(--hd-line);
    border-top:0;
    border-radius:0 0 14px 14px;
    padding-inline:var(--sp-5);
    box-shadow:0 10px 30px rgba(0,0,0,.14);
  }
}

/* ============================================================
   修正：回复输入条分主题变量（浅 / 星空 / 深色都协调）
   ============================================================ */
:root{
  --composer-bg:rgba(255,255,255,.97);
  --composer-input:#f1f2f5;
  --composer-input-line:#e3e4e9;
}
:root[data-theme="star"]{
  --composer-bg:rgba(7,18,40,.96);
  --composer-input:rgba(126,170,250,.12);
  --composer-input-line:rgba(126,170,250,.34);
}
:root[data-theme="dark"]{
  --composer-bg:#171A21;
  --composer-input:#22262F;
  --composer-input-line:#333A48;
}
@media (min-width:1024px){
  .composer{
    border:1px solid var(--line);
    border-bottom:0;
    border-radius:14px 14px 0 0;
    box-shadow:0 -8px 30px rgba(0,0,0,.20);
  }
  :root[data-theme="star"] .composer{
    border-color:rgba(126,170,250,.30);
    box-shadow:0 -8px 30px rgba(0,6,26,.5);
  }
}

/* ============================================================
   登录 / 退出弹窗（新版风格）
   ============================================================ */
.auth-mask{
  position:fixed;inset:0;z-index:400;
  display:grid;place-items:center;padding:20px;
  background:rgba(2,6,18,.68);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:authIn .2s var(--ease-out);
}
@keyframes authIn{from{opacity:0}to{opacity:1}}
.auth-card{
  position:relative;width:min(400px,100%);
  background:var(--card-solid,#fff);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  overflow:hidden;
}
.auth-x{
  position:absolute;right:12px;top:12px;z-index:2;
  width:30px;height:30px;border-radius:8px;
  display:grid;place-items:center;
  color:var(--text-3);font-size:13px;
}
.auth-x:hover{background:var(--row-hover);color:var(--text)}
.auth-head{
  padding:26px 24px 6px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.auth-logo{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;letter-spacing:1px}
.auth-logo i{
  width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,#ff6a7e,#ff2442);color:#fff;
  font-size:12px;font-style:normal;font-weight:800;letter-spacing:0;
}
.auth-head h2{margin:0;font-size:17px;font-weight:700;color:var(--text)}
.auth-body{padding:14px 24px 22px}
.auth-loading{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:150px;color:var(--text-3);font-size:13px;
}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-form label{display:flex;flex-direction:column;gap:6px}
.auth-form label span{font-size:12.5px;color:var(--text-2);font-weight:600}
.auth-form input{
  width:100%;height:42px;border-radius:10px;
  background:var(--input-bg);border:1px solid transparent;
  color:var(--text);padding:0 13px;font-size:14px;outline:none;
  transition:border-color .18s;
}
.auth-form input:focus{border-color:var(--brand-line)}
.auth-err{font-size:12.5px;color:var(--brand);min-height:0;line-height:1.5}
.auth-err:empty{display:none}
.auth-submit{
  width:100%;height:44px;border-radius:11px;margin-top:2px;
  background:linear-gradient(135deg,#ff6a7e,#ff2442);color:#fff;
  font-size:15px;font-weight:700;
  box-shadow:0 8px 20px rgba(255,36,66,.28);
}
.auth-submit:disabled{opacity:.6;cursor:wait}
.auth-sep{
  display:flex;align-items:center;gap:10px;
  margin:18px 0 14px;color:var(--text-3);font-size:11.5px;
}
.auth-sep::before,.auth-sep::after{
  content:"";flex:1;height:1px;background:var(--line);
}
.auth-qq{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:42px;border-radius:10px;
  background:#2d8cff;color:#fff;font-size:14px;font-weight:650;
  transition:filter .18s;
}
.auth-qq:hover{filter:brightness(1.08)}
.auth-qq svg{width:18px;height:18px}
.auth-tip{margin-top:14px;text-align:center;font-size:11.5px;color:var(--text-3)}
.auth-confirm{margin:0;padding:10px 0 18px;font-size:14px;line-height:1.7;color:var(--text-2);text-align:center}
.auth-foot{
  display:flex;justify-content:flex-end;gap:10px;
  padding:0 24px 22px;
}
.auth-btn{
  height:38px;padding:0 18px;border-radius:10px;font-size:13.5px;font-weight:650;
}
.auth-btn.ghost{background:var(--chip-bg);color:var(--text-2)}
.auth-btn.primary{background:linear-gradient(135deg,#ff6a7e,#ff2442);color:#fff}
.auth-btn:disabled{opacity:.6;cursor:wait}
/* 我的页里退出按钮改成 button 后，补上和 a 一样的排版 */
.mine-item{width:100%;text-align:left}

/* ============================================================
   经典主题：传统 Discuz 式密集列表（浅色 / 行式 / 高信息密度）
   新版数据 + 新版 SPA，不加载任何旧版页面
   ============================================================ */
:root[data-theme="classic"]{
  color-scheme:light;
  --bg:#f2f3f5;
  --card:#ffffff;
  --card-solid:#ffffff;
  --text:#1a1a1a;
  --text-2:#55565c;
  --text-3:#92939b;
  --line:#dfe0e4;
  --brand:#2b5ca8;
  --brand-soft:#eef3fb;
  --shadow:none;
  --hd-bg:#f7f8fa;
  --hd-line:#d9dbe0;
  --input-bg:#ffffff;
  --chip-bg:#eef0f3;
  --row-hover:#f5f7fa;
  --title-hover:#2b5ca8;
  --brand-tint:#eef3fb;
  --brand-line:#b6cbed;
}
:root[data-theme="classic"] body,
:root[data-theme="classic"] .app{background:#f2f3f5}
:root[data-theme="classic"] body::before{opacity:0}   /* 经典无氛围光晕 */

/* 经典：去掉玻璃/圆角/阴影，改细边框 + 方正 */
:root[data-theme="classic"] .site-hd,
:root[data-theme="classic"] .site-hd .shell{
  background:#ffffff;border-color:#d9dbe0;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
:root[data-theme="classic"] .site-hd .shell{border-radius:0}
:root[data-theme="classic"] .feed-panel,
:root[data-theme="classic"] .side-card,
:root[data-theme="classic"] .cal-card,
:root[data-theme="classic"] .article,
:root[data-theme="classic"] .replies{
  background:#ffffff;border-color:#dfe0e4;border-radius:2px;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
:root[data-theme="classic"] .hd-pub{
  background:#2b5ca8;box-shadow:none;border-radius:4px;
}
:root[data-theme="classic"] .theme-btn{
  background:#eef0f3;border-color:#d9dbe0;border-radius:4px;
}
:root[data-theme="classic"] .auth-card,
:root[data-theme="classic"] .theme-menu{border-radius:4px}

/* ---- 核心：列表面板改成传统论坛表头 + 密集行 ---- */
:root[data-theme="classic"] .feed-head{
  border-radius:0;background:#e8ebf0;height:40px;
  border-bottom:1px solid #cfd2d8;
}
:root[data-theme="classic"] .ftabs a{font-size:13.5px}
:root[data-theme="classic"] .ftabs a.on::after{background:#2b5ca8;bottom:0;height:3px}

:root[data-theme="classic"] .post-row{
  display:block;                          /* 两行紧凑式，避免 grid 列错位 */
  padding:8px 14px 7px;
  border-top:1px solid #eceef1;
  font-size:13px;
  border-radius:0 !important;
}
:root[data-theme="classic"] .post-row:first-child{border-top:0}
:root[data-theme="classic"] .post-row::before{display:none}
:root[data-theme="classic"] .post-row:hover{background:#f5f7fa}

/* 标题：单行截断，左侧用一个小方块当传统论坛图标 */
:root[data-theme="classic"] .pr-title{
  font-size:13.5px;line-height:1.45;font-weight:500;
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  -webkit-line-clamp:unset;
  padding-left:16px;position:relative;
}
:root[data-theme="classic"] .pr-title::before{
  content:"";position:absolute;left:1px;top:6px;
  width:7px;height:7px;border-radius:1px;
  background:#c7ccd4;
}
:root[data-theme="classic"] .post-row:has(.pr-stat.pics) .pr-title::before{background:#2b5ca8}
:root[data-theme="classic"] .post-row:hover .pr-title{color:#2b5ca8;text-decoration:underline}

/* 摘要：经典模式隐藏 */
:root[data-theme="classic"] .pr-ex{display:none}

/* 元信息行：作者左，回复/浏览/时间右，紧凑单行 */
:root[data-theme="classic"] .pr-meta{
  display:flex;align-items:center;gap:8px;
  margin:3px 0 0 16px;font-size:12px;
}
:root[data-theme="classic"] .pr-meta .av{display:none}
:root[data-theme="classic"] .pr-author{
  max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12px;color:#6b6d75;
}
:root[data-theme="classic"] .pr-dot{display:none}
:root[data-theme="classic"] .pr-forum{display:none}
:root[data-theme="classic"] .pr-time{font-size:11.5px;color:#92939b;white-space:nowrap}
:root[data-theme="classic"] .pr-pin{
  height:19px;padding:0 6px;font-size:10.5px;margin-left:2px;
}
:root[data-theme="classic"] .pr-stats{
  margin-left:auto;gap:10px;padding-left:6px;
}
:root[data-theme="classic"] .pr-stat{font-size:11.5px;color:#6b6d75}
:root[data-theme="classic"] .pr-stat svg{width:12px;height:12px}
:root[data-theme="classic"] .pr-stats .pr-stat[title="回复"]{order:1}
:root[data-theme="classic"] .pr-stats .pr-stat.views{display:inline-flex;order:2}
:root[data-theme="classic"] .pr-stats .pr-stat.pics{display:none}
/* 时间放到统计后面 */
:root[data-theme="classic"] .pr-time{order:3}

/* 标签 */
:root[data-theme="classic"] .tag{margin-right:5px;font-size:10.5px;height:17px;padding:0 5px;border-radius:2px}
:root[data-theme="classic"] .tag.pin{background:#2b5ca8;color:#fff;box-shadow:none}
:root[data-theme="classic"] .tag.hot{background:#fff0e0;color:#c96a00;box-shadow:none}

/* 侧栏：传统方块 */
:root[data-theme="classic"] .side-ttl{background:#e8ebf0;margin:0 -16px 8px;padding:8px 16px;border-left:0;font-size:13px}
:root[data-theme="classic"] .side-forum.on{background:#eef3fb}
:root[data-theme="classic"] .side-item:nth-child(-n+3) .no{color:#2b5ca8}

/* 小屏：隐藏浏览量，保留标题 + 作者 + 回复 + 时间 */
@media (max-width:520px){
  :root[data-theme="classic"] .pr-stats .pr-stat.views{display:none}
}
