/* ==========================================================================
   site.css — 前台视觉系统 v2「粉雾玻璃」
   参考风格：NextNapCatWebUI（HeroUI 粉 #f31260 + 渐变光斑背景 + 毛玻璃卡片
   + 8/12/14px 大圆角 + Quicksand 圆体 + 柔和阴影）。
   说明：
   - 变量名与旧版完全兼容（模板内联样式里的 var(--g6) 等照常生效）。
   - JS 状态类（.show/.open/.is-on/.liked/.pop/.active…）保持同名。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 字体（Quicksand，本地自托管；中文回退到系统字体）
   -------------------------------------------------------------------------- */
@font-face{ font-family:'Quicksand'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/quicksand-400.woff2') format('woff2'); }
@font-face{ font-family:'Quicksand'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/quicksand-500.woff2') format('woff2'); }
@font-face{ font-family:'Quicksand'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/quicksand-600.woff2') format('woff2'); }
@font-face{ font-family:'Quicksand'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/quicksand-700.woff2') format('woff2'); }

/* --------------------------------------------------------------------------
   2. 设计令牌（亮色）
   -------------------------------------------------------------------------- */
:root{
  /* 品牌粉（HeroUI primary 500/600 实测值） */
  --red:#f31260; --red-rgb:243,18,96;
  --red-600:#c20e4d; --red-400:#ec4d8b; --red-200:#f9a0bf; --red-50:#fee7ef;
  /* 辅助紫（HeroUI secondary） */
  --indigo:#7828c8;
  --violet:#a855f7;

  /* 中性色（蓝灰 240 系） */
  --ink:#18181b; --g7:#52525b; --g6:#71717a; --g9:#a1a1aa; --gcc:#d4d4d8;
  --f7:#f4f4f5; --f0:#eeeef1;
  --bg:#ffffff; --page:#fafafc;

  /* 线框 / 玻璃 */
  --line:rgba(24,24,27,.085); --line2:rgba(24,24,27,.06); --border-soft:rgba(24,24,27,.06);
  --glass:rgba(255,255,255,.62); --glass2:rgba(255,255,255,.88);
  --card:rgba(255,255,255,.66); --card-line:rgba(255,255,255,.7);
  --card-sh:rgba(24,24,27,.05); --shadow:rgba(24,24,27,.16); --hl:rgba(255,255,255,.5);

  /* 功能色 */
  --gold:#f5a524; --warning:#f5a524; --success:#17c964; --danger:#e11d48;
  --text-2:#71717a; --primary-soft:rgba(var(--red-rgb),.06); --brand:var(--red);

  /* 页面渐变 + 光斑（参考站背景） */
  --page-grad:linear-gradient(135deg,#eef2ff 0%,#ffffff 46%,#fdf2f8 100%);
  --page-blobs:
    radial-gradient(480px 480px at -6% -8%, rgba(249,160,191,.4), transparent 70%),
    radial-gradient(420px 420px at 104% 16%, rgba(221,214,254,.42), transparent 70%),
    radial-gradient(640px 640px at 20% 106%, rgba(251,207,232,.32), transparent 72%);

  --grad-red:linear-gradient(135deg,#f31260,#ec4899);

  --r-sm:8px; --r-md:12px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --sh-1:0 0 1px rgba(24,24,27,.16), 0 1px 2px rgba(24,24,27,.04);
  --sh-2:0 1px 2px rgba(24,24,27,.05);
  --sh-red:0 6px 16px -4px rgba(var(--red-rgb),.45);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-pop:cubic-bezier(.34,1.42,.5,1);
  --topbar-h:56px;
  --stick-top:calc(var(--topbar-h) + 34px);
}

/* 深色令牌 */
html[data-theme="dark"], body.dark{
  --ink:#f4f4f5; --g7:#c9c9d0; --g6:#a1a1aa; --g9:#83838c; --gcc:#52525b;
  --f7:#26262a; --f0:#3f3f46;
  --bg:#18181b; --page:#131316;
  --line:rgba(255,255,255,.1); --line2:rgba(255,255,255,.07); --border-soft:rgba(255,255,255,.07);
  --glass:rgba(24,24,27,.6); --glass2:rgba(24,24,27,.86);
  --card:rgba(255,255,255,.055); --card-line:rgba(255,255,255,.08);
  --card-sh:rgba(0,0,0,.4); --shadow:rgba(0,0,0,.5); --hl:rgba(255,255,255,.08);
  --text-2:#a1a1aa; --primary-soft:rgba(var(--red-rgb),.12);
  --page-grad:linear-gradient(135deg,#17171b 0%,#212127 46%,#1a1a1f 100%);
  --page-blobs:
    radial-gradient(480px 480px at -6% -8%, rgba(var(--red-rgb),.16), transparent 70%),
    radial-gradient(420px 420px at 104% 16%, rgba(120,40,200,.18), transparent 70%),
    radial-gradient(640px 640px at 20% 106%, rgba(236,72,153,.1), transparent 72%);
  --sh-1:0 0 1px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3);
  --sh-2:0 1px 2px rgba(0,0,0,.35);
}

/* --------------------------------------------------------------------------
   3. 基础与排版
   -------------------------------------------------------------------------- */
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ overflow-x:hidden; background:var(--page-grad) fixed; }

body.site-body{
  /* 用 clip 而不是 hidden：hidden 会让 body 变成滚动容器，导致顶栏 / 侧栏 position:sticky 失效 */
  overflow-x:hidden; overflow-x:clip;
  font-family:'Quicksand', 'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size:14px; line-height:1.6; color:var(--ink); background:transparent;
  -webkit-font-smoothing:antialiased; transition:color .3s ease;
}
/* 渐变背景上的三团柔光（固定层） */
body.site-body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--page-blobs);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
svg{ display:block; flex-shrink:0; }
button,input,textarea,select{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
input,textarea{ -webkit-appearance:none; appearance:none; }
ul,ol{ list-style:none; }
hr{ border:none; border-top:1px solid var(--line); margin:14px 0; }
::selection{ background:rgba(var(--red-rgb),.18); }

.muted{ color:var(--g9); }
.small{ font-size:12.5px; }
.text-success{ color:var(--success); } .text-danger{ color:var(--danger); }
.text-center{ text-align:center; } .text-right{ text-align:right; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mono{ font-family:'SF Mono', ui-monospace, Consolas, monospace; }
.clamp-1{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.m-0{margin:0!important;} .mb-8{margin-bottom:8px!important;} .mb-12{margin-bottom:12px!important;}
.mb-14{margin-bottom:14px!important;} .mb-16{margin-bottom:16px!important;}
.mt-6{margin-top:6px!important;} .mt-8{margin-top:8px!important;} .mt-10{margin-top:10px!important;}
.mt-12{margin-top:12px!important;} .mt-14{margin-top:14px!important;}
.hidden-block{display:none!important;}

.page-title{ font-size:20px; font-weight:700; letter-spacing:-.2px; margin:6px 0 14px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.page-title h1{ font-size:20px; font-weight:700; letter-spacing:-.2px; }
.page-title .sub{ font-size:12.5px; font-weight:400; color:var(--g9); }
.page-title-side{ margin-left:auto; display:flex; align-items:center; gap:8px; }

.container{ width:100%; max-width:720px; margin:0 auto; padding:0 14px; }

/* --------------------------------------------------------------------------
   4. 顶栏（悬浮玻璃胶囊，参考站式）
   -------------------------------------------------------------------------- */
.topbar{ position:sticky; top:10px; z-index:60; padding:0 14px; margin-top:10px; }
.topbar-inner{
  max-width:1180px; margin:0 auto; height:var(--topbar-h);
  display:flex; align-items:center; gap:10px; padding:0 10px 0 16px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(255,255,255,.6);
  border-radius:18px;
  box-shadow:0 1px 2px rgba(24,24,27,.04), 0 10px 30px -14px rgba(24,24,27,.1);
}
html[data-theme="dark"] .topbar-inner, body.dark .topbar-inner{ border-color:rgba(255,255,255,.09); box-shadow:0 10px 30px -14px rgba(0,0,0,.5); }

.menu-toggle,.icon-btn{
  width:38px; height:38px; flex:0 0 38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:var(--g7); background:transparent; border:none; box-shadow:none;
  transition:transform .16s var(--ease-pop), background .2s, color .2s;
}
.menu-toggle:hover,.icon-btn:hover{ background:rgba(24,24,27,.05); color:var(--ink); }
.icon-btn:active,.menu-toggle:active{ transform:scale(.9); }
.menu-toggle{ display:none; }

.brand{ display:flex; align-items:center; gap:9px; min-width:0; }
.brand::before{ content:""; width:4px; height:20px; border-radius:2px; background:var(--red);
  box-shadow:0 2px 8px rgba(var(--red-rgb),.45); flex-shrink:0; }
.brand-text{ font-size:16.5px; font-weight:700; letter-spacing:.2px; white-space:nowrap; color:var(--ink); }
.brand-text-mobile{ display:none; }

.nav{ display:flex; align-items:center; gap:2px; margin-left:8px; }
.nav-link{
  padding:8px 13px; border-radius:11px; font-size:14px; font-weight:500; color:var(--g6);
  transition:color .2s, background .2s; white-space:nowrap;
}
.nav-link:hover{ color:var(--ink); background:rgba(24,24,27,.045); }
.nav-link.active{ color:var(--red); background:rgba(var(--red-rgb),.1); font-weight:600; }

.search{ display:flex; align-items:center; flex:1; max-width:280px; margin-left:auto;
  background:rgba(24,24,27,.045); border:1px solid transparent; border-radius:var(--r-pill);
  padding:0 4px 0 14px; height:38px; transition:background .2s, border-color .2s, box-shadow .2s; }
.search:focus-within{ background:rgba(255,255,255,.85); border-color:rgba(var(--red-rgb),.4);
  box-shadow:0 0 0 3px rgba(var(--red-rgb),.1); }
.search input{ flex:1; min-width:0; background:none; border:none; outline:none; font-size:13.5px; height:100%; }
.search input::placeholder{ color:var(--g9); }
.search button{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; background:var(--grad-red); box-shadow:0 3px 8px -2px rgba(var(--red-rgb),.5); flex-shrink:0; }
.search button:active{ transform:scale(.92); }
html[data-theme="dark"] .search:focus-within, body.dark .search:focus-within{ background:rgba(255,255,255,.12); }

.topbar-actions{ display:flex; align-items:center; gap:8px; }
.nav + .search + .topbar-actions{ margin-left:0; }
.topbar-search-btn{ display:none; }
.topbar-post{ white-space:nowrap; }
.topbar-actions .theme-toggle{ order:8; margin-left:auto; }
/* 深浅色切换：浅色下显示月亮、深色下显示太阳（只显示一个，避免两个图标叠在一起） */
.theme-toggle .ico-sun{ display:none; }
.theme-toggle .ico-moon{ display:block; }
html[data-theme="dark"] .theme-toggle .ico-sun, body.dark .theme-toggle .ico-sun{ display:block; }
html[data-theme="dark"] .theme-toggle .ico-moon, body.dark .theme-toggle .ico-moon{ display:none; }
.topbar-actions .user-menu{ order:9; margin-left:0; }

/* 用户菜单 */
.user-menu{ position:relative; }
.user-menu-trigger{ display:flex; align-items:center; gap:7px; padding:4px 10px 4px 4px;
  background:rgba(24,24,27,.045); border:1px solid transparent; border-radius:var(--r-pill);
  transition:background .2s; }
.user-menu-trigger:hover{ background:rgba(24,24,27,.07); }
.user-menu-name{ font-size:13px; font-weight:600; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-menu-dropdown{ position:absolute; right:0; top:calc(100% + 12px); min-width:232px; padding:8px;
  background:var(--glass2); -webkit-backdrop-filter:blur(26px) saturate(170%); backdrop-filter:blur(26px) saturate(170%);
  border:1px solid rgba(255,255,255,.55); border-radius:16px;
  box-shadow:0 22px 55px -16px rgba(24,24,27,.3), 0 0 1px rgba(24,24,27,.25);
  display:none; z-index:80; max-height:min(72vh, 620px); overflow:auto; }
html[data-theme="dark"] .user-menu-dropdown, body.dark .user-menu-dropdown{ border-color:rgba(255,255,255,.08); }
.user-menu.open .user-menu-dropdown,.user-menu.is-open .user-menu-dropdown{ display:block; animation:um-in .18s var(--ease); }
@keyframes um-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.user-menu-dropdown a{ display:block; padding:9px 12px; border-radius:11px; font-size:13.5px; color:var(--ink); }
.user-menu-dropdown a:hover{ background:rgba(var(--red-rgb),.07); color:var(--red-600); }
.user-menu-dropdown a.um-logout{ color:var(--red); }
.user-menu-dropdown a.um-logout:hover{ background:rgba(var(--red-rgb),.08); }
.user-menu-dropdown a.um-admin{ color:var(--indigo); font-weight:600; }
.user-menu-dropdown a.um-vip{ color:var(--gold); }
.um-head{ display:flex; gap:10px; padding:10px 10px 12px; border-bottom:1px solid var(--line2); margin-bottom:6px; }
.um-name{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.um-sub{ font-size:12px; color:var(--g9); margin-top:3px; }
.um-coins{ font-size:12px; color:var(--gold); margin-top:2px; display:flex; align-items:center; gap:4px; }
.um-dot{ position:static!important; }

/* --------------------------------------------------------------------------
   5. 全局小部件：toast / 提示条 / 公告
   -------------------------------------------------------------------------- */
.toast{ position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:200;
  max-width:80vw; padding:11px 18px; border-radius:var(--r-pill); font-size:13.5px; font-weight:600; color:#fff;
  background:rgba(24,24,27,.84); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 12px 32px -8px rgba(0,0,0,.4); opacity:0; pointer-events:none;
  transform:translate(-50%,10px); transition:opacity .25s, transform .25s var(--ease); }
.toast.show{ opacity:1; transform:translate(-50%,0); }

.flash-wrap{ max-width:720px; margin:14px auto 0; padding:0 14px; display:flex; flex-direction:column; gap:8px; }
.flash{ padding:12px 15px; border-radius:var(--r-md); font-size:13.5px; font-weight:600; border:1px solid transparent;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.flash-success{ color:#0d7a3f; background:rgba(23,201,100,.12); border-color:rgba(23,201,100,.25); }
.flash-error{ color:var(--red-600); background:rgba(var(--red-rgb),.1); border-color:rgba(var(--red-rgb),.22); }
.flash-warning{ color:#a16207; background:rgba(245,165,36,.13); border-color:rgba(245,165,36,.26); }
html[data-theme="dark"] .flash-success, body.dark .flash-success{ color:#4ade80; }
html[data-theme="dark"] .flash-warning, body.dark .flash-warning{ color:#fbbf24; }
html[data-theme="dark"] .flash-error, body.dark .flash-error{ color:#fb7185; }

.notice{ display:flex; align-items:center; gap:8px; padding:11px 14px; margin-bottom:14px;
  border-radius:var(--r-lg); font-size:13px; color:var(--red-600); background:rgba(var(--red-rgb),.07);
  border:1px solid rgba(var(--red-rgb),.16); }
.notice strong{ font-weight:700; }
.notice-link{ margin-left:auto; font-weight:600; color:var(--red); flex-shrink:0; }
html[data-theme="dark"] .notice, body.dark .notice{ color:#fb7185; }

/* --------------------------------------------------------------------------
   6. 按钮 / 行内操作
   -------------------------------------------------------------------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:42px; padding:0 18px; border-radius:var(--r-md); font-size:14px; font-weight:600;
  border:1px solid transparent; white-space:nowrap;
  transition:transform .14s var(--ease-pop), opacity .2s, background .2s, box-shadow .2s; }
.btn:active{ transform:scale(.96); }
.btn:focus-visible{ outline:2px solid rgba(var(--red-rgb),.45); outline-offset:2px; }
.btn-sm{ height:36px; padding:0 14px; font-size:13px; border-radius:11px; }
.btn-lg{ height:50px; font-size:15.5px; border-radius:var(--r-md); }
.btn-block{ width:100%; }

.btn-primary{ color:#fff; background:var(--red); box-shadow:0 6px 16px -4px rgba(var(--red-rgb),.45); }
.btn-primary:hover{ opacity:.88; }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }
.btn:disabled, .btn[disabled]{ opacity:.55; cursor:not-allowed; box-shadow:none; }
.btn-ghost{ color:var(--g7); background:rgba(255,255,255,.55); border-color:rgba(24,24,27,.08); }
.btn-ghost:hover{ background:rgba(255,255,255,.9); color:var(--ink); }
html[data-theme="dark"] .btn-ghost, body.dark .btn-ghost{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); }
html[data-theme="dark"] .btn-ghost:hover, body.dark .btn-ghost:hover{ background:rgba(255,255,255,.11); }
.btn-danger-ghost{ color:var(--danger); background:rgba(225,29,72,.08); border-color:rgba(225,29,72,.18); }
.btn-danger-ghost:hover{ background:rgba(225,29,72,.13); }
.trust, .like-num{ color:var(--g9); }

.menu-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:34px; padding:0 12px; border-radius:10px; font-size:13px; font-weight:600; color:var(--g7);
  background:rgba(255,255,255,.55); border:1px solid rgba(24,24,27,.08); transition:background .15s; }
.menu-btn:hover{ background:rgba(255,255,255,.92); color:var(--ink); }
.menu-btn.danger{ color:var(--danger); background:rgba(225,29,72,.08); border-color:rgba(225,29,72,.16); }
html[data-theme="dark"] .menu-btn, body.dark .menu-btn{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); }
.menu-form{ display:inline; }
.menu-sep{ color:var(--gcc); margin:0 2px; }

.read-all{ font-size:12.5px; font-weight:600; color:var(--red); }
.sign-button{ display:inline-flex; align-items:center; justify-content:center; gap:5px;
  height:44px; padding:0 20px; border-radius:var(--r-md); font-size:14.5px; font-weight:600; color:#fff;
  background:var(--red); box-shadow:0 6px 16px -4px rgba(var(--red-rgb),.45); transition:transform .14s var(--ease-pop); }
.sign-button:active{ transform:scale(.96); }
.sign-button.is-signed{ color:var(--g6); background:rgba(24,24,27,.06); box-shadow:none; }

.req{ color:var(--danger); font-weight:700; margin-left:2px; }

/* 分享 */
.share-wrap{ position:relative; display:inline-flex; }
.share-toggle{ display:inline-flex; align-items:center; gap:5px; }
.share-menu{ position:absolute; right:0; top:calc(100% + 8px); z-index:70; min-width:168px; padding:6px;
  display:none; background:var(--glass2); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.55); border-radius:14px;
  box-shadow:0 18px 44px -14px rgba(24,24,27,.28), 0 0 1px rgba(24,24,27,.2); }
html[data-theme="dark"] .share-menu, body.dark .share-menu{ border-color:rgba(255,255,255,.08); }
.share-wrap.open .share-menu, .share-wrap.is-open .share-menu{ display:block; animation:um-in .16s var(--ease); }
.share-menu a, .share-menu button{ display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:9px 11px; border-radius:10px; font-size:13px; color:var(--ink); }
.share-menu a:hover, .share-menu button:hover{ background:rgba(var(--red-rgb),.07); color:var(--red-600); }

/* 点赞 */
.like-btn{ display:inline-flex; align-items:center; gap:5px; color:var(--g7); font-weight:600;
  transition:transform .15s var(--ease-pop); }
.like-btn:active{ transform:scale(.92); }
.like-btn.liked{ color:var(--red); }
.like-btn.liked .like-num{ color:var(--red); }
.like-btn.pop{ animation:like-pop .32s var(--ease); }
@keyframes like-pop{ 0%{ transform:scale(1);} 45%{ transform:scale(1.22);} 100%{ transform:scale(1);} }
.js-fav.is-on{ color:var(--gold); }

/* --------------------------------------------------------------------------
   7. 表单
   -------------------------------------------------------------------------- */
.form-group{ margin-bottom:15px; }
.form-label{ display:block; font-size:13px; font-weight:600; color:var(--g7); margin-bottom:7px; }
.form-help{ font-size:12px; color:var(--g9); margin-top:6px; line-height:1.6; }
.form-control, textarea.form-control{
  width:100%; min-height:48px; padding:0 15px; border-radius:var(--r-md);
  background:rgba(255,255,255,.62); border:1px solid rgba(24,24,27,.09);
  font-size:14px; color:var(--ink); outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s; }
html[data-theme="dark"] .form-control, body.dark .form-control,
html[data-theme="dark"] textarea.form-control, body.dark textarea.form-control{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); }
textarea.form-control{ padding:13px 15px; line-height:1.7; resize:vertical; }
.form-control::placeholder{ color:var(--g9); }
.form-control:focus{ border-color:rgba(var(--red-rgb),.55); background:rgba(255,255,255,.9);
  box-shadow:0 0 0 3px rgba(var(--red-rgb),.12); }
html[data-theme="dark"] .form-control:focus, body.dark .form-control:focus{ background:rgba(255,255,255,.1); }
.form-row{ display:flex; gap:10px; }
.form-row > *{ flex:1; min-width:0; }
select.form-control{ -webkit-appearance:none; appearance:none; background-image:none; }
.radio-list{ display:flex; flex-direction:column; gap:8px; }
.radio-row{ display:flex; align-items:center; gap:10px; padding:13px 15px; border-radius:var(--r-md);
  background:rgba(255,255,255,.6); border:1px solid rgba(24,24,27,.08); cursor:pointer; transition:border-color .2s, background .2s; }
.radio-row:hover{ border-color:rgba(var(--red-rgb),.35); }
.radio-row input{ width:17px; height:17px; accent-color:var(--red); }
html[data-theme="dark"] .radio-row, body.dark .radio-row{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); }

.glass-input{ width:100%; height:48px; padding:0 14px; border-radius:var(--r-md); font-size:14px; color:var(--ink);
  background:rgba(255,255,255,.62); border:1px solid rgba(24,24,27,.09); outline:none; transition:border-color .2s, box-shadow .2s; }
.glass-input:focus{ border-color:rgba(var(--red-rgb),.55); box-shadow:0 0 0 3px rgba(var(--red-rgb),.12); }
.glass-button{ height:48px; padding:0 20px; border-radius:var(--r-md); font-size:14px; font-weight:600; color:#fff;
  background:var(--red); box-shadow:0 6px 16px -4px rgba(var(--red-rgb),.45); }
.glass-button:active{ transform:scale(.96); }
.glass-panel .card-body{ padding:16px; }

.description-input{ width:100%; min-height:110px; padding:12px 14px; border-radius:var(--r-md); font-size:14px;
  line-height:1.7; color:var(--ink); background:rgba(255,255,255,.62); border:1px solid rgba(24,24,27,.09); outline:none; resize:vertical; }
.description-input:focus{ border-color:rgba(var(--red-rgb),.5); background:rgba(255,255,255,.9); }

/* 编辑器（发帖 / 编辑） */
.title-input{ width:100%; border:none; outline:none; background:transparent; font-size:19px; font-weight:700;
  color:var(--ink); padding:6px 2px; border-bottom:2px solid transparent; transition:border-color .2s; }
.title-input::placeholder{ color:var(--g9); }
.title-input:focus{ border-bottom-color:rgba(var(--red-rgb),.4); }
.editor-card .card-body{ padding:16px; }
.editor-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.char-count{ font-size:12px; color:var(--g9); margin-top:6px; text-align:right; }
.char-count.over{ color:var(--danger); font-weight:700; }

/* ============================ Markdown 编辑器 ============================ */
.md-editor{ margin-top:2px; }
.md-editor-bar{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  padding:6px 8px; border:1.5px solid var(--line); border-bottom:0;
  border-radius:var(--r-md) var(--r-md) 0 0; background:var(--f0); }
.md-btn{
  min-width:28px; height:28px; padding:0 7px; border:0; border-radius:6px;
  background:transparent; color:var(--g5); font-size:12.5px; font-weight:600;
  cursor:pointer; transition:all .14s ease; }
.md-btn:hover{ background:var(--line); color:var(--ink); }
.md-btn:active{ transform:scale(.94); }
.md-btn-i{ font-style:italic; }
.md-btn-preview{ margin-left:auto; color:var(--red-600); }
.md-bar-sep{ width:1px; height:18px; background:var(--line); margin:0 3px; }
.md-editor textarea.form-control{
  border-radius:0 0 var(--r-md) var(--r-md); border-top:0; resize:vertical; }
.md-editor textarea.form-control:focus{ box-shadow:none; border-color:var(--line); }
.md-preview{
  margin-top:0; padding:14px 16px; border:1.5px solid var(--line); border-top:0;
  border-radius:0 0 var(--r-md) var(--r-md); background:var(--f0);
  min-height:120px; }
.md-preview:empty::before{ content:'（暂无内容可预览）'; color:var(--g9); font-size:13px; }
.md-editor.is-previewing textarea.form-control{ display:none; }

/* 上传 */
.upload-box{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:22px 14px; border-radius:var(--r-lg); cursor:pointer; text-align:center;
  background:rgba(255,255,255,.5); border:1.5px dashed rgba(24,24,27,.16); transition:border-color .2s, background .2s; }
.upload-box:hover{ border-color:rgba(var(--red-rgb),.45); background:rgba(var(--red-rgb),.04); }
.upload-icon{ color:var(--red); }
.upload-text{ font-size:13.5px; font-weight:600; color:var(--g7); }
.upload-hint{ font-size:12px; color:var(--g9); }
.upload-preview{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.preview-item{ position:relative; width:86px; height:86px; border-radius:var(--r-md); overflow:hidden;
  background:var(--f0); border:1px solid rgba(24,24,27,.08); }
.preview-item img, .preview-item video{ width:100%; height:100%; object-fit:cover; }
.preview-video-tag{ position:absolute; left:5px; bottom:5px; padding:1px 6px; border-radius:6px;
  font-size:10px; font-weight:700; color:#fff; background:rgba(0,0,0,.5); }
.preview-del{ position:absolute; right:4px; top:4px; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:12px; line-height:1;
  color:#fff; background:rgba(0,0,0,.45); }
.preview-del:active{ transform:scale(.9); }
.upload-avatar{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.upload-avatar .avatar{ box-shadow:0 8px 20px -8px rgba(24,24,27,.35); }

/* 管理行内小工具（前台出现时） */
.admin-inline{ font-size:12px; color:var(--g9); }
.admin-inline-grid{ display:grid; gap:8px; }
.admin-inline-row{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px;
  background:rgba(255,255,255,.5); border:1px solid rgba(24,24,27,.07); }
.admin-inline-row:last-child{ border-bottom:1px solid rgba(24,24,27,.07); }
.admin-inline-row a{ color:var(--red); font-weight:600; }
.admin-search{ display:flex; gap:8px; }
.admin-search .form-control{ flex:1; }

/* 付费/隐藏内容 */
.hidden-editor{ display:flex; flex-direction:column; gap:10px; }
.hidden-body{ width:100%; min-height:96px; padding:12px 14px; border-radius:var(--r-md); font-size:14px; line-height:1.7;
  color:var(--ink); background:rgba(255,255,255,.62); border:1px solid rgba(24,24,27,.09); outline:none; resize:vertical; }
.hidden-body:focus{ border-color:rgba(var(--red-rgb),.5); }
.hidden-block-body{ position:relative; min-height:128px; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg, rgba(var(--red-rgb),.1), rgba(var(--red-rgb),.03)); }
.hidden-block-body img{ width:100%; height:100%; object-fit:cover; filter:blur(16px); transform:scale(1.06); }
.hidden-block-head{ position:absolute; left:0; right:0; top:0; display:flex; align-items:center; gap:8px;
  padding:10px 14px; font-size:12.5px; font-weight:700; color:var(--red-600); }
.hidden-body.hidden-block, .hidden-body.hidden-block-body{ display:flex; align-items:center; justify-content:center; }
.hidden-block-body.hidden-block{ min-height:150px; }

/* --------------------------------------------------------------------------
   8. 卡片 / 区块
   -------------------------------------------------------------------------- */
.card{ background:var(--card); border:1px solid var(--card-line); border-radius:var(--r-lg);
  box-shadow:var(--sh-2); overflow:hidden; margin-bottom:14px; }
.card-body{ padding:16px; }
.card-header{ padding:14px 16px; border-bottom:1px solid var(--line2); font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; row-gap:6px; }
.card-sub{ font-size:12px; font-weight:400; color:var(--g9); margin-left:6px; }
.content-card{ background:var(--card); border:1px solid var(--card-line); border-radius:var(--r-lg); box-shadow:var(--sh-2); }

/* 页内右侧栏（页面自带 aside 用） */
.side-card{ background:var(--card); border:1px solid var(--card-line); border-radius:var(--r-lg);
  box-shadow:var(--sh-2); padding:14px; margin-bottom:14px; }
.side-card h4{ font-size:12.5px; font-weight:700; color:var(--g9); letter-spacing:.4px; margin-bottom:8px; }
.side-links{ display:flex; flex-direction:column; gap:2px; }
.side-links a{ display:flex; align-items:center; gap:8px; height:36px; padding:0 11px; border-radius:10px;
  font-size:13px; font-weight:500; color:var(--g7); transition:background .15s, color .15s; }
.side-links a:hover{ background:rgba(24,24,27,.045); color:var(--ink); }
.side-links a.active{ background:rgba(var(--red-rgb),.1); color:var(--red); font-weight:600; }
.side-stats{ display:flex; gap:8px; }
.side-stats > *{ flex:1; text-align:center; padding:10px 4px; border-radius:12px;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.6); }
.side-stats .n{ display:block; font-size:15px; font-weight:700; color:var(--red); }
.side-stats .l{ display:block; font-size:11px; color:var(--g9); margin-top:2px; }
.side-user{ display:flex; align-items:center; gap:10px; }
.side-user-name{ font-size:13.5px; font-weight:700; }

/* 小卡片（用户中心 / 等级） */
.mini-card{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--r-md);
  background:rgba(255,255,255,.55); border:1px solid rgba(24,24,27,.06); }
.mini-card.is-profile, .mini-card.is-level{ flex-direction:column; align-items:stretch; gap:8px; }

/* 统计卡 / 宫格 */
.stat-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; }
.stats-card{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
/* u.php 个人主页的统计小方块：数字在上、标签在下，居中 */
.stat-card{ text-align:center; padding:12px 6px; border-radius:var(--r-md);
  background:var(--f7); border:1px solid var(--line2); }
.stat-num{ display:flex; align-items:center; justify-content:center; gap:4px;
  font-size:18px; font-weight:800; color:var(--ink); }
.stat-label{ font-size:11.5px; color:var(--g9); margin-top:3px; }
.stat-item{ padding:14px 12px; border-radius:var(--r-lg); background:var(--card);
  border:1px solid var(--card-line); box-shadow:var(--sh-2); text-align:center; }
.stat-item .stat-num{ display:flex; align-items:center; justify-content:center; gap:4px;
  font-size:18px; font-weight:700; color:var(--red); }
.stat-item .stat-label{ font-size:11.5px; color:var(--g9); margin-top:3px; }

.level-card{ background:var(--card); border:1px solid var(--card-line); border-radius:var(--r-lg); box-shadow:var(--sh-2); }
.level-card .card-body{ padding:16px; }

/* 等级里程碑轴：等距阶梯，每级一个节点；已过填色、当前放大发光、未达成留白
   等距而非按积分比例，因为等级门槛跨度悬殊（0/30/150/…/12000），
   按比例排会让低等级节点全部重叠 */
.lv-track-wrap{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line2); }
.lv-track-scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; margin:0 -2px; padding:0 2px; }
.lv-track{ display:flex; align-items:flex-start; min-width:100%; }
.lv-step{ position:relative; flex:1 1 0; min-width:52px; display:flex; flex-direction:column;
  align-items:center; text-align:center; padding-top:14px; }
/* 连接线：从本节点向左延伸到前一个节点，首节点不画 */
.lv-step-line{ position:absolute; top:9px; right:50%; width:100%; height:3px;
  background:rgba(24,24,27,.1); }
.lv-step:first-child .lv-step-line{ display:none; }
.lv-step.is-done .lv-step-line, .lv-step.is-current .lv-step-line{ background:var(--red); }
.lv-step.is-current .lv-step-line{ background:linear-gradient(90deg,var(--red),rgba(var(--red-rgb),.28)); }
html[data-theme="dark"] .lv-step-line, body.dark .lv-step-line{ background:rgba(255,255,255,.14); }
html[data-theme="dark"] .lv-step.is-done .lv-step-line,
html[data-theme="dark"] .lv-step.is-current .lv-step-line,
body.dark .lv-step.is-done .lv-step-line,
body.dark .lv-step.is-current .lv-step-line{ background:var(--red); }
.lv-step-dot{ position:absolute; top:2px; width:11px; height:11px; border-radius:50%;
  background:var(--card); border:2.5px solid rgba(24,24,27,.16);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
html[data-theme="dark"] .lv-step-dot, body.dark .lv-step-dot{ background:#1c1c1f; border-color:rgba(255,255,255,.24); }
.lv-step.is-done .lv-step-dot{ background:var(--red); border-color:var(--red); }
.lv-step.is-current .lv-step-dot{ background:#fff; border-color:var(--red); border-width:3px;
  transform:scale(1.4); box-shadow:0 0 0 4px rgba(var(--red-rgb),.14), 0 3px 10px -2px rgba(var(--red-rgb),.5); }
.lv-step-lv{ font-size:10.5px; font-weight:700; color:var(--g9); line-height:1.2;
  font-variant-numeric:tabular-nums; }
.lv-step-name{ font-size:10px; color:var(--g10); line-height:1.2; margin-top:1px;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lv-step-min{ font-size:9.5px; color:var(--g10); line-height:1.2; margin-top:1px;
  font-variant-numeric:tabular-nums; }
.lv-step.is-done .lv-step-lv{ color:var(--red); }
.lv-step.is-done .lv-step-name{ color:var(--g8); }
.lv-step.is-current .lv-step-lv{ color:var(--red); font-size:11.5px; }
.lv-step.is-current .lv-step-name{ color:var(--g7); font-weight:600; }
.lv-track-scale{ display:flex; justify-content:space-between; gap:10px; margin-top:6px;
  font-size:10.5px; color:var(--g10); }

/* --------------------------------------------------------------------------
   9. 表格 / 分页 / 空态 / 进度 / 面包屑
   -------------------------------------------------------------------------- */
.table-wrap{ overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--card-line); box-shadow:var(--sh-2); background:var(--card); }
.table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.table th{ text-align:left; font-size:12px; font-weight:700; color:var(--g9); padding:12px 14px;
  background:rgba(24,24,27,.03); border-bottom:1px solid var(--line2); white-space:nowrap; }
.table td{ padding:12px 14px; border-bottom:1px solid var(--line2); vertical-align:middle; }
.table tr:last-child td{ border-bottom:none; }
.table tbody tr:hover td{ background:rgba(var(--red-rgb),.03); }
html[data-theme="dark"] .table th, body.dark .table th{ background:rgba(255,255,255,.04); }

.pager{ display:flex; align-items:center; justify-content:center; gap:6px; margin:18px 0; flex-wrap:wrap; }
.pager-btn{ min-width:38px; height:38px; padding:0 12px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:600; color:var(--g7); background:rgba(255,255,255,.6);
  border:1px solid rgba(24,24,27,.07); transition:background .15s, color .15s; }
.pager-btn:hover{ color:var(--red); background:rgba(255,255,255,.92); }
.pager-btn.active{ color:#fff; background:var(--red); box-shadow:0 6px 14px -4px rgba(var(--red-rgb),.5); border-color:transparent; }
.pager-info{ font-size:12.5px; color:var(--g9); }
.pager-gap{ color:var(--gcc); }
html[data-theme="dark"] .pager-btn, body.dark .pager-btn{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); }
html[data-theme="dark"] .pager-btn:hover, body.dark .pager-btn:hover{ background:rgba(255,255,255,.11); }

.empty{ text-align:center; padding:52px 20px; color:var(--g9); }
.empty-icon{ width:72px; height:72px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--red); background:rgba(var(--red-rgb),.08); }
.empty-title{ font-size:15px; font-weight:700; color:var(--g7); }
.empty-desc{ font-size:13px; margin-top:6px; line-height:1.7; }
.empty-desc a{ color:var(--red); font-weight:600; }

.progress{ height:8px; border-radius:var(--r-pill); background:rgba(24,24,27,.07); overflow:hidden; }
.progress-bar{ height:100%; border-radius:var(--r-pill); background:var(--grad-red); box-shadow:0 0 8px rgba(var(--red-rgb),.4); }

.breadcrumb{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--g9); margin-bottom:12px; flex-wrap:wrap; }
.breadcrumb a{ color:var(--g9); transition:color .15s; }
.breadcrumb a:hover{ color:var(--red); }
.breadcrumb .sep{ color:var(--gcc); }
.breadcrumb > span:last-child{ color:var(--g7); font-weight:600; }

/* --------------------------------------------------------------------------
   10. 头像 / 徽章 / 标签 / 角标
   -------------------------------------------------------------------------- */
.avatar{ border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--f0);
  box-shadow:0 2px 8px -2px rgba(24,24,27,.28); }
.avatar-sm{ width:32px; height:32px; } .avatar-md{ width:46px; height:46px; }
.avatar-lg{ width:64px; height:64px; } .avatar-xl{ width:88px; height:88px; }
.avatar-wrap{ display:inline-flex; flex-shrink:0; position:relative; }
.avatar-ring{ display:inline-flex; padding:3px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#f31260,#ec4899 55%,#a855f7); }
.avatar-ring .avatar, .avatar-ring img{ border:2.5px solid var(--bg); }
html[data-theme="dark"] body.site-body .avatar-ring .avatar,
html[data-theme="dark"] body.site-body .avatar-ring img{ border-color:#1c1c20; }

.badge, .lv-badge, .role-badge, .verified-badge, .chip{
  display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700;
  padding:2px 8px; border-radius:var(--r-pill); border:1px solid transparent; line-height:1.6; }
.lv-badge, .level-icon{ color:#b45309; background:rgba(245,165,36,.15); border-color:rgba(245,165,36,.22); }
.vip-badge{ display:inline-flex; align-items:center; gap:3px; flex-shrink:0; }
.vip-badge img.vip-ico{ height:18px; width:auto; display:block; }
.verified-badge{ color:#0284c7; background:rgba(14,165,233,.12); border-color:rgba(14,165,233,.2); }
.role-badge{ color:var(--indigo); background:rgba(120,40,200,.1); border-color:rgba(120,40,200,.18); }
.chip{ color:var(--g6); background:rgba(24,24,27,.05); font-weight:600; }
.chip-primary{ color:var(--red-600); background:rgba(var(--red-rgb),.12); }
.chip-warning{ color:#b45309; background:rgba(245,165,36,.14); }
.chip-success{ color:#0d7a3f; background:rgba(23,201,100,.12); }
.chip-danger{ color:var(--danger); background:rgba(225,29,72,.1); }
.level-icon{ display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:700;
  padding:2px 8px; border-radius:var(--r-pill); border:1px solid rgba(245,165,36,.22); }

.badge-dot{ position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--red); color:#fff; font-size:10px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; border:1.8px solid var(--bg); }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--red); flex-shrink:0; }

.flag, .tag-line, .topic-flags{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.flag{ font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:var(--r-pill); }
.flag-pin{ color:var(--red-600); background:rgba(var(--red-rgb),.1); }
.flag-featured, .flag-recommend{ color:#b45309; background:rgba(245,165,36,.14); }
.flag-closed{ color:var(--g6); background:rgba(24,24,27,.06); }
.flag-pay{ color:#0369a1; background:rgba(14,165,233,.12); }
.flag-pending{ color:var(--g7); background:rgba(24,24,27,.06); }
.flag-cat{ color:var(--indigo); background:rgba(120,40,200,.1); }
.tag-line.is-dot::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.7; margin-right:2px; }

.post-mark-stack{ display:flex; gap:4px; flex-wrap:wrap; margin-bottom:10px; }
.post-mark-stack:empty{ display:none; margin:0; }
.post-mark{ font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:var(--r-pill); }
.post-mark.is-all{ color:var(--red-600); background:rgba(var(--red-rgb),.1); }
.post-mark.is-section{ color:var(--indigo); background:rgba(120,40,200,.1); }
.post-mark.is-essence{ color:#b45309; background:rgba(245,165,36,.14); }
.post-mark .uid{ font-size:12px; color:var(--g9); font-weight:400; }

/* 等级头像框（8 级） */
.avatar-lv-1{ box-shadow:0 0 0 2px #d4d4d8, 0 3px 10px -2px rgba(24,24,27,.25) !important; }
.avatar-lv-2{ box-shadow:0 0 0 2px #34d399, 0 3px 10px -2px rgba(24,24,27,.25) !important; }
.avatar-lv-3{ box-shadow:0 0 0 2px #60a5fa, 0 3px 10px -2px rgba(24,24,27,.25) !important; }
.avatar-lv-4{ box-shadow:0 0 0 2px #a78bfa, 0 3px 10px -2px rgba(24,24,27,.25) !important; }
.avatar-lv-5{ box-shadow:0 0 0 2px #fbbf24, 0 3px 10px -2px rgba(24,24,27,.25) !important; }
.avatar-lv-6{ box-shadow:0 0 0 2px var(--red), 0 3px 10px -2px rgba(var(--red-rgb),.4) !important; }
.avatar-lv-7{ box-shadow:0 0 0 2px #ffd700, 0 0 0 4px #ff7a45, 0 4px 14px -2px rgba(245,165,36,.55) !important; }
.avatar-lv-8{ box-shadow:0 0 0 2px #ff0080, 0 0 0 4px #ffd700, 0 0 0 6px #00bfff, 0 5px 18px -2px rgba(168,85,247,.45) !important; }

/* VIP 用户名粉色高亮 */
.nickname:has(.vip-badge){ color:var(--red) !important; }
.post-card-id .nickname:has(.vip-badge){ color:var(--red) !important; }
.um-head .um-name:has(.vip-badge){ color:var(--red) !important; }
.profile-name:has(.vip-badge){ color:var(--red) !important; }
.rank-user a:has(.vip-badge){ color:var(--red) !important; }
.podium-name:has(.vip-badge){ color:var(--red) !important; }
.my-rank-name:has(.vip-badge){ color:var(--red) !important; }

/* --------------------------------------------------------------------------
   11. 电脑端三栏外壳（左导航胶囊 / 中内容 / 右栏）
   -------------------------------------------------------------------------- */
.pc-shell{ max-width:1180px; margin:0 auto; display:grid;
  grid-template-columns:240px minmax(0,1fr) 300px; gap:20px; padding:20px 14px 40px; align-items:start; }
.pc-shell.is-narrow{ grid-template-columns:240px minmax(0,1fr); }
.pc-sidebar, .pc-rail{ position:sticky; top:var(--stick-top); display:flex; flex-direction:column; gap:2px; max-height:calc(100vh - var(--stick-top) - 24px); overflow-y:auto; overflow-x:hidden; scrollbar-width:none; }
.pc-sidebar::-webkit-scrollbar, .pc-rail::-webkit-scrollbar{ display:none; }
.pc-center{ min-width:0; }
.pc-center > .container{ max-width:none; padding:0; }

.rail-card{ background:transparent; border:none; border-radius:0; box-shadow:none; padding:0; }
.rail-card h4{ font-size:12px; font-weight:700; color:var(--g9); letter-spacing:.6px; padding:0 12px; margin:12px 0 4px; }
.rail-link{ display:flex; align-items:center; gap:8px; height:38px; padding:0 12px; border-radius:11px;
  font-size:13.5px; font-weight:500; color:var(--g7); transition:background .15s, color .15s; }
.rail-link:hover{ background:rgba(24,24,27,.045); color:var(--ink); }
.rail-link.is-active{ background:rgba(var(--red-rgb),.1); color:var(--red); font-weight:600; }
.rail-link.is-active::after{ content:""; margin-left:auto; width:12px; height:6px; border-radius:var(--r-pill);
  background:var(--red); box-shadow:0 1px 5px rgba(var(--red-rgb),.5); animation:rail-pulse 2.4s ease-in-out infinite; }
@keyframes rail-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
.rail-count{ margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:10px;
  background:var(--red); color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.rail-link-top{ flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; height:auto; padding:9px 12px; }
.rail-top-title{ font-size:13px; font-weight:600; color:var(--ink); line-height:1.45; width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail-top-views{ font-size:11.5px; color:var(--g9); }
.rail-link-top:hover .rail-top-title{ color:var(--red); }
.rail-stats{ display:flex; gap:8px; padding:2px 4px; }
.rail-stats > div{ flex:1; text-align:center; padding:10px 4px; border-radius:12px;
  background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.6); }
.rail-stats strong{ display:block; font-size:15px; font-weight:700; color:var(--red); }
.rail-stats span{ display:block; font-size:11px; color:var(--g9); margin-top:2px; }

html[data-theme="dark"] .rail-link:hover, body.dark .rail-link:hover{ background:rgba(255,255,255,.06); }
html[data-theme="dark"] .rail-link.is-active, body.dark .rail-link.is-active{ background:rgba(var(--red-rgb),.16); color:#fb7185; }
html[data-theme="dark"] .rail-stats > div, body.dark .rail-stats > div{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .side-links a:hover, body.dark .side-links a:hover{ background:rgba(255,255,255,.06); }
html[data-theme="dark"] .side-stats > *, body.dark .side-stats > *{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); }

/* --------------------------------------------------------------------------
   12. 页内两栏布局（.layout）+ 右栏粘滞
   -------------------------------------------------------------------------- */
.layout{ display:flex; flex-direction:column; gap:14px; }
.layout > div, .layout > aside{ min-width:0; }

/* --------------------------------------------------------------------------
   13. 移动端底部导航（悬浮玻璃胶囊）
   -------------------------------------------------------------------------- */
.mobile-tabbar{ display:none; }

/* --------------------------------------------------------------------------
   14. 页脚
   -------------------------------------------------------------------------- */
.site-footer{ padding:28px 14px 130px; }
.footer-inner{ max-width:1180px; margin:0 auto; text-align:center; font-size:12.5px; color:var(--g9); line-height:1.9; }
.footer-inner strong{ color:var(--g7); font-weight:600; }
.footer-desc{ font-size:12px; color:var(--g9); margin-top:4px; }

/* --------------------------------------------------------------------------
   15. 抽屉（仅保留兼容样式，当前前台未使用增强抽屉）
   -------------------------------------------------------------------------- */
.drawer{ position:fixed; inset:0; z-index:90; visibility:hidden; }
.drawer[aria-hidden="false"]{ visibility:visible; }
.drawer-mask{ position:absolute; inset:0; background:rgba(24,24,27,.42); opacity:0; transition:opacity .28s; }
.drawer[aria-hidden="false"] .drawer-mask{ opacity:1; }
.drawer-panel{ position:absolute; left:0; top:0; bottom:0; width:302px; max-width:84vw;
  background:var(--glass2); -webkit-backdrop-filter:blur(26px) saturate(170%); backdrop-filter:blur(26px) saturate(170%);
  border-right:1px solid rgba(255,255,255,.55); box-shadow:20px 0 60px -24px rgba(24,24,27,.4);
  display:flex; flex-direction:column; transform:translateX(-102%); transition:transform .34s var(--ease); overflow:hidden; }
.drawer[aria-hidden="false"] .drawer-panel{ transform:none; }
.drawer-head{ display:flex; align-items:center; gap:11px; padding:16px 16px 14px; border-bottom:1px solid var(--line2); }
.drawer-head strong{ font-size:15.5px; font-weight:700; display:block; }
.drawer-head-text span{ font-size:12px; color:var(--g9); }
.brand-logo{ width:42px; height:42px; flex:0 0 42px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:19px; overflow:hidden; background:var(--grad-red);
  box-shadow:0 10px 24px -10px rgba(var(--red-rgb),.7); }
.brand-logo img{ width:100%; height:100%; object-fit:cover; }
.drawer-close{ margin-left:auto; width:32px; height:32px; border-radius:10px; font-size:20px; color:var(--g6); }
.drawer-close:hover{ background:rgba(24,24,27,.05); }
.drawer-user{ display:flex; gap:11px; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line2); }
.drawer-user-name{ font-size:14.5px; font-weight:700; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.drawer-user-coins{ font-size:12px; color:var(--gold); display:flex; align-items:center; gap:4px; }
.drawer-nav{ flex:1; overflow-y:auto; padding:8px 10px 20px; }
.drawer-group{ font-size:11px; font-weight:700; letter-spacing:1px; color:var(--g9); text-transform:uppercase; padding:14px 8px 6px; }
.drawer-nav a{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:12px; font-size:14px; color:var(--ink); }
.drawer-nav a:hover{ background:rgba(24,24,27,.05); }
.drawer-nav a.active{ background:rgba(var(--red-rgb),.1); color:var(--red); font-weight:600; }
.drawer-nav a svg{ width:18px; height:18px; opacity:.8; }
.drawer-admin{ color:var(--indigo)!important; font-weight:600; }
.drawer-count{ margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:10px;
  background:var(--red); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.drawer-foot{ border-top:1px solid var(--line2); padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.drawer-link{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; font-size:13.5px; color:var(--g6); width:100%; }
.drawer-link:hover{ background:rgba(24,24,27,.05); color:var(--ink); }
.drawer-link.danger{ color:var(--red); }

/* --------------------------------------------------------------------------
   16. 首页：焦点轮播
   -------------------------------------------------------------------------- */
.focus-slider{ position:relative; border-radius:var(--r-xl); overflow:hidden; margin-bottom:14px;
  aspect-ratio:16/9; background:var(--f0); box-shadow:0 12px 32px -14px rgba(24,24,27,.22); }
.focus-track{ display:flex; height:100%; transition:transform .45s var(--ease); }
.focus-slide{ position:relative; min-width:100%; height:100%; display:none; }
.focus-slide.active{ display:block; }
.focus-img{ width:100%; height:100%; object-fit:cover; display:block; }
.focus-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff;
  font-size:26px; font-weight:700; background:var(--grad-red); }
.focus-shade{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 34%,rgba(0,0,0,.62)); }
.focus-body{ position:absolute; left:0; right:0; bottom:0; padding:16px; color:#fff;
  display:flex; flex-direction:column; gap:6px; }
.focus-cat{ display:inline-flex; align-self:flex-start; padding:3px 10px; border-radius:var(--r-pill);
  font-size:11px; font-weight:700; background:rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.focus-title{ font-size:17px; font-weight:700; line-height:1.42; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.focus-meta{ display:flex; align-items:center; gap:12px; font-size:12px; opacity:.9; }
.focus-meta > span{ display:inline-flex; align-items:center; gap:4px; }
.focus-nav{ position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px;
  background:rgba(24,24,27,.3); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .2s; }
.focus-nav:hover{ background:rgba(var(--red-rgb),.8); }
.focus-prev{ left:10px; } .focus-next{ right:10px; }
.focus-dots{ position:absolute; bottom:12px; right:14px; display:flex; gap:5px; }
.focus-dot{ width:6px; height:6px; border-radius:var(--r-pill); background:rgba(255,255,255,.55); transition:transform .25s var(--ease), background-color .25s; }
.focus-dot.active{ transform:scaleX(3.33); background:#fff; }

/* --------------------------------------------------------------------------
   17. 首页：分段标签（推荐 / 最新评论 / 最新发布 / 精华）
   -------------------------------------------------------------------------- */
.tabs{ display:flex; gap:4px; padding:4px; margin-bottom:14px; border-radius:var(--r-lg);
  background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.6);
  overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab-item{ flex:1; min-width:max-content; height:38px; padding:0 16px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center; position:relative;
  font-size:13.5px; font-weight:600; color:var(--g6); transition:color .2s, background .2s, box-shadow .2s; }
.tab-item:hover{ color:var(--ink); }
.tab-item:active{ transform:scale(.97); }
.tab-item:has(.tab-text-active){ background:#fff; color:var(--red); box-shadow:0 1px 4px rgba(24,24,27,.08), 0 5px 14px -8px rgba(24,24,27,.14); }
.tab-item .tab-text-active{ color:var(--red); }
.tab-line{ display:none; }
html[data-theme="dark"] .tabs, body.dark .tabs{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .tab-item:has(.tab-text-active), body.dark .tab-item:has(.tab-text-active){ background:rgba(255,255,255,.12); }

/* --------------------------------------------------------------------------
   18. 帖子列表 / 帖子卡
   -------------------------------------------------------------------------- */
.post-list{ display:flex; flex-direction:column; gap:12px; }
.post-list .post-card{ background:var(--card); border:1px solid var(--card-line); border-radius:var(--r-lg); box-shadow:var(--sh-2); }
.post-card{ position:relative; padding:16px; border-radius:var(--r-lg); background:var(--card);
  border:1px solid var(--card-line); box-shadow:var(--sh-2);
  transition:transform .18s var(--ease), box-shadow .2s; }
.post-card:hover{ transform:translateY(-1px); box-shadow:0 2px 6px rgba(24,24,27,.05), 0 14px 30px -14px rgba(24,24,27,.16); }
.post-card:active{ transform:scale(.99); }
.post-card.is-clickable{ cursor:pointer; }
.post-card-head{ display:flex; align-items:center; gap:10px; }
.post-card-id{ min-width:0; }
.post-card-id .meta, .meta{ display:flex; align-items:center; gap:10px; margin-top:2px; font-size:12px; color:var(--g9); flex-wrap:wrap; }
.nickname{ font-size:13.5px; font-weight:700; color:var(--ink); display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; }
a.nickname:hover{ color:var(--red); }
.post-title{ font-size:16.5px; font-weight:700; line-height:1.45; margin-top:12px; display:block; color:var(--ink); transition:color .15s; }
a.post-title:hover{ color:var(--red); }
.post-content{ font-size:13.5px; color:var(--g6); line-height:1.7; margin-top:7px; }
.post-excerpt-img{ width:100%; border-radius:var(--r-md); margin-top:11px; object-fit:cover; max-height:280px; display:block; }
.topic-thumbs{ display:flex; gap:6px; margin-top:11px; }
.topic-thumb{ position:relative; flex:1; height:108px; border-radius:var(--r-md); overflow:hidden; background:var(--f0); }
.topic-thumb img, .topic-thumb video{ width:100%; height:100%; object-fit:cover; }
.thumb-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; pointer-events:none; }
.thumb-play svg{ padding:8px; border-radius:50%; background:rgba(24,24,27,.42);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.post-foot{ display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:11px; border-top:1px solid var(--line2); }
.foot-left{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.foot-right{ display:flex; align-items:center; gap:14px; margin-left:auto; flex-shrink:0; }
.foot-icon{ display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--g9); }
.foot-icon svg{ opacity:.75; }
.section-tag{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--r-pill);
  font-size:11.5px; font-weight:600; color:var(--g6); background:rgba(24,24,27,.05); transition:color .15s, background .15s; }
.section-tag:hover{ color:var(--red); background:rgba(var(--red-rgb),.08); }
.section-avatar{ width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; color:var(--g9); }
.section-name{ font-size:11.5px; }
.logo-box{ width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  color:#fff; background:var(--grad-red); box-shadow:0 8px 20px -8px rgba(var(--red-rgb),.6); flex-shrink:0; }

/* 简易帖子列表（个人主页 / 收藏等） */
.topic-list{ display:flex; flex-direction:column; gap:12px; }
.topic-item{ padding:14px 16px; background:var(--card); border:1px solid var(--card-line);
  border-radius:var(--r-lg); box-shadow:var(--sh-2); }
.topic-title{ font-size:15.5px; font-weight:700; line-height:1.45; display:block; }
a.topic-title:hover{ color:var(--red); }
.topic-excerpt{ font-size:13px; color:var(--g6); line-height:1.65; margin-top:6px; }
.topic-meta, .post-meta{ display:flex; align-items:center; gap:12px; margin-top:10px; font-size:12px; color:var(--g9); flex-wrap:wrap; }
.meta-item{ display:inline-flex; align-items:center; gap:5px; }

/* --------------------------------------------------------------------------
   19. 版块页头 / 板块分组 / 板块网格 / 推荐板块
   -------------------------------------------------------------------------- */
.section-hero{ position:relative; padding:18px; border-radius:var(--r-xl); margin-bottom:14px; overflow:hidden;
  background:linear-gradient(135deg, rgba(var(--red-rgb),.1), rgba(236,72,153,.06) 55%, rgba(168,85,247,.08));
  border:1px solid rgba(255,255,255,.6); }
.hero-veil{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(320px 200px at 88% -20%, rgba(249,160,191,.5), transparent 70%); }
.hero-body{ display:flex; align-items:flex-start; gap:16px; position:relative; }
.section-hero .hero-body{ background:transparent; border:0; box-shadow:none; border-radius:0; }
.hero-main{ flex:1; min-width:0; display:flex; gap:14px; align-items:flex-start; }
.hero-info{ min-width:0; }
.hero-title{ font-size:19px; font-weight:700; letter-spacing:-.2px; }
.hero-sub{ font-size:12.5px; color:var(--g7); margin-top:4px; }
.hero-desc{ font-size:12.5px; color:var(--g6); margin-top:4px; line-height:1.6; }
.hero-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.hero-foot{ position:relative; margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; }
.hero-pill{ padding:6px 13px; border-radius:var(--r-pill); font-size:12px; font-weight:600;
  background:rgba(255,255,255,.66); color:var(--red-600); border:1px solid rgba(255,255,255,.7); transition:background .15s; }
.hero-pill:hover{ background:#fff; }
.hero-mods{ flex-shrink:0; max-width:46%; text-align:right; }
.hero-mods-label{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:var(--g9); }
.hero-mods-list{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.hero-mod{ display:inline-flex; align-items:center; gap:6px; justify-content:flex-end; font-size:12.5px; font-weight:600; color:var(--ink); }
.hero-mod .avatar{ width:26px; height:26px; }
.hero-mod .role-badge{ font-size:10px; padding:1px 6px; }
.hero-mod-empty{ font-size:12.5px; color:var(--g9); }
html[data-theme="dark"] .section-hero, body.dark .section-hero{ background:linear-gradient(135deg, rgba(var(--red-rgb),.16), rgba(236,72,153,.08) 55%, rgba(168,85,247,.12)); border-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .hero-pill, body.dark .hero-pill{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.1); color:#fb7185; }

.cat-head-card{ overflow:hidden; }
.chp-main{ display:flex; align-items:center; gap:14px; padding:18px 16px; }
.chp-ico{ width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:25px; color:#fff; background:var(--grad-red); box-shadow:0 8px 20px -8px rgba(var(--red-rgb),.6); flex-shrink:0; }
.chp-text{ flex:1; min-width:0; }
.chp-title{ font-size:18px; font-weight:700; }
.chp-sub{ font-size:12.5px; color:var(--g9); margin-top:5px; }
.chp-stats{ display:flex; gap:16px; flex-shrink:0; }
.chp-stat{ text-align:center; }
.chp-stat .n{ display:block; font-size:16px; font-weight:700; color:var(--red); }
.chp-stat .l{ display:block; font-size:11px; color:var(--g9); margin-top:2px; }
.chp-divider{ height:1px; background:var(--line2); }

.cat-group{ margin-bottom:16px; }
.group-head{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.group-bar{ width:4px; height:16px; border-radius:2px; background:var(--grad-red); }
.group-title{ font-size:15px; font-weight:700; }
.group-meta{ font-size:12px; color:var(--g9); margin-left:auto; }

.content-tabs{ display:flex; gap:4px; padding:4px; border-radius:var(--r-lg); background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.6); overflow-x:auto; scrollbar-width:none; }
.content-tabs::-webkit-scrollbar{ display:none; }
.cat-tab, .ctab{ flex:1; min-width:max-content; height:36px; padding:0 14px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:600;
  color:var(--g6); transition:color .2s, background .2s, box-shadow .2s; }
.cat-tab:hover, .ctab:hover{ color:var(--ink); }
.cat-tab:active, .ctab:active{ transform:scale(.97); }
.cat-tab.active, .ctab.active{ background:#fff; color:var(--red); box-shadow:0 1px 4px rgba(24,24,27,.08); }
.ctab.active::after{ display:none; }
html[data-theme="dark"] .content-tabs, body.dark .content-tabs{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); }
html[data-theme="dark"] .cat-tab.active, html[data-theme="dark"] .ctab.active, body.dark .cat-tab.active, body.dark .ctab.active{ background:rgba(255,255,255,.12); }

.section-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.section-cell.cat-cell{ padding:15px; border-radius:var(--r-lg); background:var(--card); border:1px solid var(--card-line);
  box-shadow:var(--sh-2); display:flex; flex-direction:column; gap:9px; transition:transform .16s var(--ease), box-shadow .2s; }
.section-cell.cat-cell:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(24,24,27,.18); }
.section-cell.cat-cell:active{ transform:scale(.98); }
.sc-icon{ width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  font-size:21px; color:#fff; background:var(--grad-red); box-shadow:0 6px 14px -6px rgba(var(--red-rgb),.55); }
.sc-name{ font-size:14.5px; font-weight:700; }
.sc-latest{ font-size:12px; color:var(--g9); line-height:1.5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-pill{ align-self:flex-start; padding:2px 10px; border-radius:var(--r-pill); font-size:11px; font-weight:700;
  color:var(--red-600); background:rgba(var(--red-rgb),.1); }

.recommend-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.recommend-card{ padding:15px; border-radius:var(--r-lg); background:var(--card); border:1px solid var(--card-line);
  box-shadow:var(--sh-2); display:flex; align-items:center; gap:12px; transition:transform .16s var(--ease); }
.recommend-card:hover{ transform:translateY(-2px); }
.rc-icon{ width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  font-size:21px; color:var(--red); background:rgba(var(--red-rgb),.1); flex-shrink:0; }
.rc-name{ font-size:14px; font-weight:700; }
.rc-hot{ margin-left:auto; font-size:11.5px; font-weight:700; color:var(--gold); }

/* --------------------------------------------------------------------------
   20. 会员卡 / 用户搜索建议
   -------------------------------------------------------------------------- */
.user-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.user-card{ padding:16px 14px; border-radius:var(--r-lg); background:var(--card); border:1px solid var(--card-line);
  box-shadow:var(--sh-2); display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  transition:transform .16s var(--ease), box-shadow .2s; }
.user-card:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(24,24,27,.18); }
.user-card:active{ transform:scale(.98); }
.user-card-avatar{ position:relative; display:inline-flex; }
.user-card-body{ min-width:0; width:100%; }
.user-card-name{ font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:5px; flex-wrap:wrap; }
.user-card-sub{ font-size:12px; color:var(--g9); margin-top:3px; line-height:1.5; }
.user-card .btn{ width:100%; }
.cert-avatar-badge{ position:absolute; right:-2px; bottom:-2px; width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; background:#0ea5e9;
  border:2px solid var(--bg); font-size:10px; }

.suggest-row{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.suggest-row::-webkit-scrollbar{ display:none; }
.suggest-user{ display:flex; flex-direction:column; align-items:center; gap:5px; min-width:64px; }
.suggest-user-name{ font-size:11.5px; color:var(--g6); max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* --------------------------------------------------------------------------
   21. 公告弹窗
   -------------------------------------------------------------------------- */
.notice-popup{ position:fixed; inset:0; z-index:120; display:none; }
.notice-popup.open{ display:block; }
.notice-popup-mask{ position:absolute; inset:0; background:rgba(24,24,27,.4);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.notice-popup-box{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92vw,420px);
  border-radius:var(--r-xl); background:var(--glass2);
  -webkit-backdrop-filter:blur(26px) saturate(170%); backdrop-filter:blur(26px) saturate(170%);
  border:1px solid rgba(255,255,255,.6); box-shadow:0 30px 70px -20px rgba(24,24,27,.4); overflow:hidden; }
.notice-popup-head{ padding:15px 16px; font-size:15px; font-weight:700; display:flex; align-items:center; gap:7px; border-bottom:1px solid var(--line2); }
.notice-popup-close{ margin-left:auto; color:var(--g9); font-size:20px; line-height:1; }
.notice-popup-close:hover{ color:var(--red); }
.notice-popup-body{ padding:16px; font-size:13.5px; line-height:1.8; color:var(--g7); max-height:50vh; overflow:auto; }
.notice-popup-foot{ padding:12px 16px; border-top:1px solid var(--line2); text-align:right; }

/* --------------------------------------------------------------------------
   22. 帖子详情
   -------------------------------------------------------------------------- */
.topic-detail{ padding:18px; }
/* 详情卡内的「分享 / 管理」下拉要能越过卡片下边缘，且盖住后面的打赏卡 */
.topic-detail.card{ position:relative; z-index:1; overflow:visible; }
.topic-detail:hover{ transform:none; box-shadow:var(--sh-2); }
.topic-detail h1{ font-size:21px; font-weight:700; line-height:1.45; letter-spacing:-.2px; word-break:break-word; }
.post-author-bar{ display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line2); }
.pa-name{ font-size:13.5px; font-weight:700; display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; }
a.pa-name:hover{ color:var(--red); }
.pa-time{ font-size:12px; color:var(--g9); }
.pa-signature{ font-size:12px; color:var(--g9); margin-left:auto; max-width:42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.post-body{ font-size:15px; line-height:1.9; margin-top:16px; word-break:break-word; }
.post-body a{ color:var(--red); font-weight:600; }
.post-body img{ border-radius:var(--r-md); margin:10px 0; }
.post-body p{ margin:0 0 10px; }

/* ============================ Markdown 富文本排版 ============================ */
/* 作用在帖子正文 / 隐藏区块 / 评论上（由 render_content() / render_comment() 输出） */
.md-body{ font-size:15px; line-height:1.85; word-break:break-word; }
.md-body > *:first-child{ margin-top:0; }
.md-body > *:last-child{ margin-bottom:0; }
.md-body p{ margin:0 0 12px; }
.md-body h1,.md-body h2,.md-body h3,.md-body h4,.md-body h5,.md-body h6{
  margin:20px 0 10px; line-height:1.4; font-weight:700; color:var(--ink); }
.md-body h1{ font-size:1.45em; padding-bottom:8px; border-bottom:1px solid var(--line); }
.md-body h2{ font-size:1.28em; padding-bottom:6px; border-bottom:1px solid var(--line2); }
.md-body h3{ font-size:1.15em; }
.md-body h4,.md-body h5,.md-body h6{ font-size:1em; }
.md-body strong{ font-weight:700; color:var(--ink); }
.md-body em{ font-style:italic; }
.md-body del{ text-decoration:line-through; color:var(--g7); }
.md-body ul,.md-body ol{ margin:0 0 12px; padding-left:22px; }
.md-body li{ margin:4px 0; }
.md-body li > ul,.md-body li > ol{ margin:4px 0; }
.md-body blockquote{
  margin:0 0 12px; padding:8px 14px; border-left:3px solid var(--red);
  background:rgba(var(--red-rgb),.05); border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--g5); }
.md-body blockquote > *:last-child{ margin-bottom:0; }
.md-body hr{ border:0; border-top:1px solid var(--line); margin:18px 0; }
.md-body code.md-code{
  display:inline-block; padding:2px 6px; border-radius:var(--r-sm);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em;
  background:var(--f0); border:1px solid var(--line); color:var(--ink);
  word-break:break-all; }
.md-body pre.md-code{
  margin:0 0 14px; padding:12px 14px; border-radius:var(--r-md); overflow-x:auto;
  background:#18181b; color:#f4f4f5; font-size:13.5px; line-height:1.65;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.md-body pre.md-code > code{ all:unset; display:block; }
.md-body pre.md-code::before{
  content:attr(data-lang); display:block; margin-bottom:6px; font-size:11px;
  color:#a1a1aa; text-transform:uppercase; letter-spacing:.06em; }
.md-body a{ color:var(--red); font-weight:600; text-decoration:none; }
.md-body a:hover{ text-decoration:underline; }
.post-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-top:14px; }
.gallery-item{ position:relative; display:block; border-radius:var(--r-md); overflow:hidden; background:var(--f0); aspect-ratio:1; }
.gallery-item img, .gallery-item video{ width:100%; height:100%; object-fit:cover; }
.gallery-single{ grid-template-columns:1fr; }
.gallery-single .gallery-item{ aspect-ratio:auto; max-height:460px; }
.gallery-video::after{ content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; margin:-22px 0 0 -22px;
  border-radius:50%;
  background:rgba(24,24,27,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/18px no-repeat;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
/* 「实况」短视频 / 动图：左上角徽章；实况自动静音循环，不显示中间的视频角标 */
.gallery-live::after{ display:none; }
.live-badge, .anim-badge{ position:absolute; left:8px; top:8px; z-index:2; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:700; color:#fff; letter-spacing:.5px; pointer-events:none; }
.live-badge{ background:rgba(var(--red-rgb),.85); }
.anim-badge{ background:rgba(24,24,27,.55); }
.review-banner{ margin-top:14px; padding:12px 14px; border-radius:var(--r-md); display:flex; flex-direction:column; gap:8px;
  background:rgba(245,165,36,.12); border:1px solid rgba(245,165,36,.25); }
.review-banner-text{ font-size:13px; color:#b45309; }
.review-banner-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.unlock-box{ margin-top:14px; padding:24px 18px; border-radius:var(--r-lg); text-align:center;
  background:rgba(var(--red-rgb),.05); border:1.5px dashed rgba(var(--red-rgb),.32); }
.unlock-icon{ width:56px; height:56px; margin:0 auto 10px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--red); background:rgba(var(--red-rgb),.1); }
.unlock-title{ font-size:15px; font-weight:700; }
.unlock-desc{ font-size:12.5px; color:var(--g6); margin:7px 0 13px; line-height:1.7; }
.unlock-box .btn{ margin-top:2px; }
.post-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--line2); }
.post-actions > form{ display:inline-flex; }
.topic-side-action{ display:flex; flex-direction:column; gap:10px; }
.topic-side-action .btn{ width:100%; }

/* 收藏夹分类条 */
.fav-bar{ padding:12px 14px 10px; margin-bottom:14px; }
.fav-bar-scroll{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fav-chip-wrap{ position:relative; display:inline-flex; align-items:center; }
.fav-chip{ display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:var(--r-pill);
  font-size:12.5px; font-weight:600; color:var(--g6); background:rgba(24,24,27,.05);
  border:1.5px solid transparent; transition:all .16s ease; white-space:nowrap; }
.fav-chip:hover{ color:var(--g8); background:rgba(24,24,27,.08); text-decoration:none; }
.fav-chip.is-on{ color:var(--red-600); background:rgba(var(--red-rgb),.1); border-color:rgba(var(--red-rgb),.3); }
.fav-chip svg{ width:13px; height:13px; flex-shrink:0; opacity:.8; }
.fav-chip-name{ max-width:88px; overflow:hidden; text-overflow:ellipsis; }
.fav-chip em{ font-style:normal; font-size:11px; font-weight:700; opacity:.7;
  min-width:14px; text-align:center; }
.fav-chip-ops{ display:none; align-items:center; gap:2px; margin-left:-4px; }
.fav-chip-wrap:hover .fav-chip-ops,
.fav-chip-wrap:focus-within .fav-chip-ops{ display:inline-flex; }
.fav-op{ width:22px; height:22px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--g9); border-radius:6px; cursor:pointer; }
.fav-op:hover{ color:var(--red); background:rgba(var(--red-rgb),.1); }
.fav-op svg{ width:13px; height:13px; }
.fav-op-form{ display:inline-flex; margin:0; }
.fav-add{ display:flex; gap:8px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line2); }
.fav-add .form-control{ max-width:220px; }
.fav-move{ display:flex; }
.fav-move .form-control{ width:100%; }
.flag-fav{ color:var(--indigo); background:rgba(120,40,200,.1); display:inline-flex; align-items:center; gap:4px; }
.flag-fav svg{ width:11px; height:11px; }
.fav-rename-box{ display:flex; gap:6px; align-items:center; margin-top:6px; }
.fav-rename-box .form-control{ flex:1; max-width:200px; }
.rule-row{ display:flex; gap:8px; font-size:12.5px; color:var(--g6); line-height:1.7; padding:8px 0; border-bottom:1px solid var(--line2); }
.rule-row:last-child{ border-bottom:none; padding-bottom:0; }

/* 评论区 */
.comment-list{ display:flex; flex-direction:column; padding:4px 16px 16px; }
.comment-item{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line2); }
.comment-item:first-child{ padding-top:4px; }
.comment-item:last-child{ border-bottom:none; padding-bottom:0; }
.comment-body{ flex:1; min-width:0; }
.comment-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.c-name{ font-size:13.5px; font-weight:700; display:inline-flex; align-items:center; gap:5px; }
a.c-name:hover{ color:var(--red); }
.c-time{ font-size:12px; color:var(--g9); }
.c-floor{ font-size:12px; color:var(--gcc); margin-left:auto; flex-shrink:0; }
.comment-text{ font-size:14px; line-height:1.8; margin-top:7px; word-break:break-word; }
.c-signature{ font-size:12px; color:var(--g9); margin-top:5px; }
.comment-foot{ display:flex; align-items:center; gap:14px; margin-top:9px; }
.comment-foot a, .comment-foot button{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600;
  color:var(--g9); transition:color .15s; }
.comment-foot a:hover, .comment-foot button:hover{ color:var(--red); }
.comment-foot .del:hover{ color:var(--danger); }
.comment-children{ margin:2px 0 0; padding-left:52px; display:flex; flex-direction:column; }
.comment-children .comment-item{ border-bottom:none; }
.reply-form{ display:none; gap:8px; margin-top:10px; }
.reply-form.open{ display:flex; }
.reply-form textarea{ flex:1; min-height:44px; max-height:120px; padding:10px 13px; border-radius:var(--r-md); resize:none;
  font-size:13.5px; line-height:1.6; color:var(--ink); background:rgba(255,255,255,.7);
  border:1px solid rgba(24,24,27,.1); outline:none; }
.reply-form textarea:focus{ border-color:rgba(var(--red-rgb),.5); box-shadow:0 0 0 3px rgba(var(--red-rgb),.1); }
.reply-form button{ flex-shrink:0; }
html[data-theme="dark"] .reply-form textarea, body.dark .reply-form textarea{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12); }

/* 打赏 */
.tip-amounts{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.tip-amount{ height:36px; padding:0 15px; border-radius:var(--r-pill); font-size:13px; font-weight:700; color:var(--gold);
  background:rgba(245,165,36,.12); border:1px solid rgba(245,165,36,.28); transition:color .15s, background-color .15s, border-color .15s, box-shadow .15s; }
.tip-amount:hover{ border-color:rgba(245,165,36,.55); }
.tip-amount.active{ color:#fff; background:var(--gold); border-color:transparent; box-shadow:0 4px 12px -3px rgba(245,165,36,.5); }
.tip-input-row{ display:flex; gap:8px; }
.tip-input-row .form-control{ flex:1; }
.tip-list{ display:flex; flex-direction:column; gap:9px; margin-top:12px; }
.tip-list li{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; }
.tip-user{ font-weight:600; display:inline-flex; align-items:center; gap:5px; }
.tip-coins{ margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-weight:700; color:var(--gold); }
.tip-msg{ width:100%; color:var(--g9); font-size:12px; }
.tip-toggle{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:42px; border-radius:var(--r-md);
  font-size:13.5px; font-weight:600; color:var(--gold); background:rgba(245,165,36,.1);
  border:1px dashed rgba(245,165,36,.4); transition:background .15s; }
.tip-toggle:hover{ background:rgba(245,165,36,.16); }

/* 移动端固定回复条（默认隐藏，手机端显示） */
.reply-bar-spacer{ display:none; }
.fixed-reply-bar{ display:none; }

/* --------------------------------------------------------------------------
   23. 消息中心 / 私信列表
   -------------------------------------------------------------------------- */
.message-tabs{ display:flex; gap:4px; padding:4px; margin-bottom:14px; border-radius:var(--r-lg);
  background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.6); }
.message-tab{ flex:1; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:13.5px; font-weight:600; color:var(--g6); transition:color .2s, background .2s, box-shadow .2s; }
.message-tab:hover{ color:var(--ink); }
.message-tab:has(.tab-label.is-active){ background:#fff; color:var(--red); box-shadow:0 1px 4px rgba(24,24,27,.08); }
.tab-icon{ display:inline-flex; }
.tab-icon.is-msg{ color:var(--red); }
.tab-icon.is-system{ color:var(--indigo); }
.message-tab .tab-icon{ color:inherit; }
.message-tab:has(.tab-label.is-active) .tab-icon.is-msg{ color:var(--red); }
.message-tab:has(.tab-label.is-active) .tab-icon.is-system{ color:var(--indigo); }
.message-card{ background:var(--card); border:1px solid var(--card-line); border-radius:var(--r-lg);
  box-shadow:var(--sh-2); overflow:hidden; margin-bottom:14px; }
.msg-toolbar{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line2); }
.msg-toolbar-actions{ margin-left:auto; display:flex; gap:8px; }
.private-card{ position:relative; display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-bottom:1px solid var(--line2); transition:background .15s; }
.private-card:last-child{ border-bottom:none; }
.private-card:hover{ background:rgba(var(--red-rgb),.035); }
.private-card.pinned::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px;
  border-radius:2px; background:var(--gold); }
.private-main{ flex:1; min-width:0; }
.private-name{ display:flex; align-items:center; gap:6px; font-size:14px; font-weight:700; min-width:0; }
.private-time{ margin-left:auto; font-size:11.5px; color:var(--g9); font-weight:400; flex-shrink:0; }
.private-preview{ display:flex; align-items:center; gap:4px; font-size:12.5px; color:var(--g9); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.private-badge{ min-width:18px; height:18px; padding:0 5px; border-radius:9px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center; background:var(--red); color:#fff; font-size:11px; font-weight:700; }
.pinned-toggle{ width:30px; height:30px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; opacity:.45; transition:opacity .15s, background .15s; }
.pinned-toggle:hover{ opacity:1; background:rgba(24,24,27,.06); }
.pinned-toggle.active{ opacity:1; background:rgba(245,165,36,.16); }
.msg-item{ padding:14px 16px; border-bottom:1px solid var(--line2); }
.msg-item:last-child{ border-bottom:none; }
.msg-title{ display:flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; }
.msg-content{ font-size:13px; color:var(--g6); line-height:1.7; margin-top:5px; }
.msg-meta{ font-size:11.5px; color:var(--g9); margin-top:7px; }
html[data-theme="dark"] .message-tabs, body.dark .message-tabs{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); }

/* 会话卡撑满一屏（QQ 消息页风格）：高度自适应手机 / 电脑视口 */
.message-card.msg-fill{ display:flex; flex-direction:column;
  min-height:max(300px, calc(100vh - 245px)); min-height:max(300px, calc(100dvh - 245px)); }
.message-card.msg-fill > .empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; }
@media (max-width:820px){
  .message-card.msg-fill{ min-height:max(300px, calc(100vh - 282px - env(safe-area-inset-bottom)));
    min-height:max(300px, calc(100dvh - 282px - env(safe-area-inset-bottom))); }
}
html[data-theme="dark"] .message-tab:has(.tab-label.is-active), body.dark .message-tab:has(.tab-label.is-active){ background:rgba(255,255,255,.12); }

/* --------------------------------------------------------------------------
   24. 聊天（私信 / 群聊）
   -------------------------------------------------------------------------- */
.avatar-xs{ width:26px; height:26px; }
.chat-box{ display:flex; flex-direction:column; gap:14px; padding:18px 16px;
  flex:1 1 auto; min-height:0; overflow-y:auto; }
.bubble-row{ display:flex; align-items:flex-end; gap:8px; max-width:100%; }
.bubble-row.mine{ flex-direction:row-reverse; }
.bubble-row > .avatar{ flex-shrink:0; }
.bubble{ max-width:min(70%,520px); padding:10px 14px; border-radius:16px; border-bottom-left-radius:6px;
  background:rgba(255,255,255,.88); border:1px solid rgba(24,24,27,.06);
  font-size:14px; line-height:1.65; word-break:break-word; white-space:pre-wrap; }
html[data-theme="dark"] .bubble, body.dark .bubble{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.07); }
.bubble-row.mine .bubble{ color:#fff; background:var(--red); border-color:transparent;
  border-radius:16px; border-bottom-right-radius:6px; box-shadow:0 4px 12px -5px rgba(var(--red-rgb),.5); }
.bubble-time{ font-size:10.5px; color:var(--g9); flex-shrink:0; align-self:flex-end; margin-bottom:4px; }

/* 气泡内媒体 / 转账 */
.bubble-media{ padding:6px; overflow:hidden; }
.bubble-image{ display:block; border-radius:12px; overflow:hidden; }
.bubble-image img{ max-width:260px; max-height:320px; object-fit:cover; border-radius:12px; }
.bubble-video{ display:block; max-width:280px; max-height:320px; border-radius:12px; }
.bubble-caption{ font-size:13px; padding:7px 8px 3px; }
.bubble-transfer{ background:linear-gradient(135deg, rgba(245,165,36,.16), rgba(251,191,36,.1));
  border:1px solid rgba(245,165,36,.3); color:#92400e; }
html[data-theme="dark"] .bubble-transfer, body.dark .bubble-transfer{ color:#fbbf24; background:rgba(245,165,36,.14); border-color:rgba(245,165,36,.35); }
.bubble-transfer-amount{ display:flex; align-items:center; gap:5px; font-size:15px; font-weight:700; color:var(--gold); }
.bubble-transfer-note{ font-size:12.5px; margin-top:4px; opacity:.85; }

/* 输入区 */
.chat-compose{ display:flex; align-items:flex-end; gap:8px; }
.chat-attach{ width:42px; height:42px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  color:var(--red); background:rgba(var(--red-rgb),.1); transition:background .15s; }
.chat-attach:hover{ background:rgba(var(--red-rgb),.16); }
.msg-chat-input{ flex:1; min-height:42px; max-height:120px; padding:10px 14px; border-radius:14px; resize:none;
  font-size:14px; line-height:1.6; color:var(--ink); background:rgba(255,255,255,.7);
  border:1px solid rgba(24,24,27,.09); outline:none; transition:border-color .2s, box-shadow .2s; }
.msg-chat-input:focus{ border-color:rgba(var(--red-rgb),.5); box-shadow:0 0 0 3px rgba(var(--red-rgb),.1); }
.msg-chat-input::placeholder{ color:var(--g9); }
html[data-theme="dark"] .msg-chat-input, body.dark .msg-chat-input{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12); }
.msg-chat-send{ height:42px; padding:0 20px; border-radius:12px; flex-shrink:0; font-size:14px; font-weight:600; color:#fff;
  background:var(--red); box-shadow:0 6px 16px -4px rgba(var(--red-rgb),.45); transition:transform .14s var(--ease-pop), opacity .2s; }
.msg-chat-send:hover{ opacity:.88; }
.msg-chat-send:active{ transform:scale(.96); }
.chat-attach-preview{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.chat-attach-preview:empty{ display:none; }

/* 私信会话页：白卡自适应屏高（消息区占满剩余空间，输入区固定贴底） */
.card.chat-shell{ display:flex; flex-direction:column; height:calc(100vh - 185px); height:calc(100dvh - 185px);
  min-height:320px; }
.card.chat-shell > .card-body{ flex-shrink:0; }
.card.chat-shell .chat-box > .empty{ margin:auto 0; }

/* 输入区「功能菜单」（QQ 风格）：转赠金币面板 */
.chat-tools-btn.active{ color:var(--gold); border-color:rgba(245,165,36,.55); background:rgba(245,165,36,.12); }
.chat-attach.is-tools{ color:var(--gold); background:rgba(245,165,36,.12); }
.chat-attach.is-tools:hover{ background:rgba(245,165,36,.2); }
.chat-attach.is-tools.active{ color:#fff; background:var(--gold); }
.chat-tools{ margin-bottom:12px; padding:12px; border-radius:14px;
  border:1px solid rgba(245,165,36,.35); background:linear-gradient(135deg, rgba(245,165,36,.1), rgba(251,191,36,.05)); }
.chat-tools[hidden]{ display:none; }
.chat-tools-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;
  font-size:13px; font-weight:700; color:var(--gold); }
.chat-tools-head .small{ font-weight:400; }
.chat-tools .tip-input-row{ flex-wrap:wrap; }
.chat-tools .tip-input-row .form-control{ flex:1 1 130px; min-width:0; }
.chat-tools .form-help{ margin-top:8px; }

/* --------------------------------------------------------------------------
   26. 个人主页（u.php）
   -------------------------------------------------------------------------- */
.cover{ position:relative; height:140px; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(135deg, rgba(var(--red-rgb),.22), rgba(236,72,153,.16) 50%, rgba(168,85,247,.2));
  border:1px solid rgba(255,255,255,.5); }
html[data-theme="dark"] .cover, body.dark .cover{ border-color:rgba(255,255,255,.08); }
.orb{ position:absolute; border-radius:50%; filter:blur(30px); opacity:.6; }
.orb-a{ width:220px; height:220px; left:-60px; top:-80px; background:rgba(var(--red-rgb),.5); }
.orb-b{ width:260px; height:260px; right:-70px; top:-60px; background:rgba(168,85,247,.45); }
.orb-c{ width:200px; height:200px; left:40%; bottom:-110px; background:rgba(236,72,153,.4); }
.cover.has-cover .orb{ display:none; }
.profile-wrap{ position:relative; margin-top:-44px; }
/* 卡片与封面有 44px 重叠：用更实的玻璃底 + 背景模糊，避免封面从半透明卡下透出形成"叠块"感 */
.profile-card{ background:var(--glass2); -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); }
.profile-card .card-body{ padding:18px 16px 16px; }
.profile-head{ display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; }
.profile-head .btn{ margin-left:auto; flex-shrink:0; }
.profile-info{ flex:1; min-width:0; }
.profile-name{ font-size:19px; font-weight:700; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.profile-sub{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-size:12.5px; color:var(--g9); margin-top:5px; }
.profile-signature{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--g6); margin-top:6px; }
.profile-panel{ margin-top:14px; }
.profile-panel .card-body{ padding:16px; }
.avatar-ring.lv-1 .avatar, .avatar-ring.lv-1 img{ border-color:#d4d4d8; }
.avatar-ring.lv-2 .avatar, .avatar-ring.lv-2 img{ border-color:#34d399; }
.avatar-ring.lv-3 .avatar, .avatar-ring.lv-3 img{ border-color:#60a5fa; }
.avatar-ring.lv-4 .avatar, .avatar-ring.lv-4 img{ border-color:#a78bfa; }
.avatar-ring.lv-5 .avatar, .avatar-ring.lv-5 img{ border-color:#fbbf24; }
.avatar-ring.lv-6 .avatar, .avatar-ring.lv-6 img{ border-color:var(--red); }
.uid{ font-size:12px; color:var(--g9); font-weight:400; }

/* --------------------------------------------------------------------------
   27. 用户中心（ucenter.php）
   -------------------------------------------------------------------------- */
.pp-head{ display:flex; align-items:center; gap:14px; padding:18px 18px 14px; }
/* 头像固定尺寸：自定义头像返回的是原图（可能很大），没有尺寸类会把整块撑爆 */
.pp-head .avatar{ width:88px; height:88px; }
.pp-body{ flex:1; min-width:0; }
.pp-meta{ display:flex; gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--g9); margin-top:6px; }
.pp-side{ display:flex; gap:8px; flex-shrink:0; }
.pp-foot{ display:flex; gap:8px; flex-wrap:wrap; padding:0 18px 16px; }
.stats-card{ display:grid; grid-template-columns:repeat(auto-fit,minmax(86px,1fr)); gap:10px; }
.uc-mini-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.uc-mini-row .mini-card{ flex-direction:row; align-items:center; gap:9px; height:54px; font-size:13.5px;
  font-weight:600; color:var(--g7); transition:border-color .15s, color .15s; }
.uc-mini-row .mini-card:hover{ color:var(--red); border-color:rgba(var(--red-rgb),.25); }
.uc-services{ margin-bottom:14px; }
.uc-services .card-body{ padding:14px; }
.ov-actions{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:10px; }
.ov-action{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px;
  border-radius:var(--r-lg); background:var(--card); border:1px solid var(--card-line); box-shadow:var(--sh-2);
  transition:transform .16s var(--ease), box-shadow .2s; }
.ov-action:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(24,24,27,.2); }
.ov-action:active{ transform:scale(.97); }
.ov-action-icon{ width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  color:var(--red); background:rgba(var(--red-rgb),.1); }
.ov-action-icon.is-danger{ color:var(--danger); background:rgba(225,29,72,.1); }
.ov-action-icon.is-success{ color:var(--success); background:rgba(23,201,100,.12); }
.ov-action-icon.is-warning{ color:var(--gold); background:rgba(245,165,36,.14); }
.ov-action-icon.is-info{ color:#0ea5e9; background:rgba(14,165,233,.12); }
.ov-action-word{ display:flex; flex-direction:column; align-items:center; gap:1px; text-align:center;
  font-size:12.5px; font-weight:600; color:var(--g7); }
.ov-action-word span{ font-size:10.5px; font-weight:400; color:var(--g9); }

/* --------------------------------------------------------------------------
   28. 排行榜
   -------------------------------------------------------------------------- */
.my-rank{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r-lg);
  background:linear-gradient(135deg, rgba(var(--red-rgb),.1), rgba(236,72,153,.06) 60%, rgba(168,85,247,.08));
  border:1px solid rgba(var(--red-rgb),.2); margin-bottom:14px; }
.my-rank-info{ flex:1; min-width:0; }
.my-rank-name{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.my-rank-pos{ display:flex; gap:16px; align-items:center; flex-shrink:0; }
.my-rank-pos > div{ text-align:center; }
.my-rank-pos .l{ font-size:11px; color:var(--g9); }
.my-rank-pos .n{ font-size:16px; font-weight:700; color:var(--red); }
.podium{ display:flex; align-items:flex-end; justify-content:center; gap:10px; padding:18px 4px 6px; margin-bottom:14px; }
.podium-item{ flex:1; max-width:150px; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:16px 8px 14px; border-radius:var(--r-lg); background:var(--card); border:1px solid var(--card-line);
  box-shadow:var(--sh-2); text-align:center; }
.podium-1{ order:2; transform:translateY(-12px);
  background:linear-gradient(180deg, rgba(245,165,36,.18), var(--card) 70%); border-color:rgba(245,165,36,.4); }
.podium-2{ order:1; }
.podium-3{ order:3; }
.podium-medal{ font-size:26px; line-height:1; }
.podium-name{ font-size:13.5px; font-weight:700; display:inline-flex; align-items:center; gap:4px;
  flex-wrap:wrap; justify-content:center; }
.podium-name:hover{ color:var(--red); }
.podium-level{ font-size:11px; color:var(--g9); }
.podium-value{ font-size:15px; font-weight:700; color:var(--red); }
.podium-rank{ font-size:11px; color:var(--g9); }
.rank-table td{ font-size:13.5px; }
.rank-no{ display:inline-flex; width:26px; height:26px; border-radius:9px; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:var(--g6); background:rgba(24,24,27,.05); }
.rank-no1{ color:#fff; background:linear-gradient(135deg,#f5a524,#fbbf24); box-shadow:0 3px 8px -2px rgba(245,165,36,.5); }
.rank-no2{ color:#fff; background:linear-gradient(135deg,#94a3b8,#cbd5e1); }
.rank-no3{ color:#fff; background:linear-gradient(135deg,#d97706,#f59e0b); opacity:.9; }
.rank-user{ display:flex; align-items:center; gap:9px; }
/* 列表行里的名字与徽章不压缩、不换行：手机端由表格横向滚动兜底，避免徽章被挤成竖排 */
.rank-user > *{ flex-shrink:0; }
.rank-user a{ display:inline-flex; align-items:center; gap:5px; font-weight:600; white-space:nowrap; }
.rank-user > span{ white-space:nowrap; }
.rank-user a:hover{ color:var(--red); }
.rank-score{ font-weight:700; color:var(--red); }
.rank-table .rank-me td{ background:rgba(var(--red-rgb),.05); }

/* --------------------------------------------------------------------------
   29. 签到 / 积分（checkin / level / coins）
   -------------------------------------------------------------------------- */
.checkin-hero{ position:relative; overflow:hidden; display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:20px; border-radius:var(--r-xl); color:#fff;
  background:linear-gradient(135deg,#f31260,#ec4899 70%,#f472b6);
  box-shadow:0 14px 34px -14px rgba(var(--red-rgb),.65); }
.checkin-hero-left{ position:relative; }
.checkin-streak{ display:flex; align-items:baseline; gap:5px; }
.checkin-streak-num{ font-size:36px; font-weight:700; letter-spacing:-1px; line-height:1; }
.checkin-streak-unit{ font-size:14px; opacity:.9; }
.checkin-streak-label{ font-size:12px; opacity:.85; margin-top:6px; }
.checkin-hero-right{ position:relative; text-align:right; }
.checkin-reward-label{ font-size:12px; opacity:.9; }
.checkin-reward-num{ display:flex; align-items:center; justify-content:flex-end; gap:5px; font-size:22px; font-weight:700; margin-top:3px; }
.checkin-reward-hint{ font-size:11.5px; opacity:.8; margin-top:4px; }
.checkin-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0; }
.checkin-stat{ padding:12px 8px; text-align:center; border-radius:var(--r-lg); background:var(--card);
  border:1px solid var(--card-line); box-shadow:var(--sh-2); }
.checkin-stat .n{ font-size:18px; font-weight:700; color:var(--red); }
.checkin-stat .l{ font-size:11.5px; color:var(--g9); margin-top:2px; }
.checkin-cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-head{ text-align:center; font-size:11px; font-weight:600; color:var(--g9); padding:4px 0; }
.cal-cell, .checkin-cal > div:not(.cal-head){ aspect-ratio:1; border-radius:12px; display:flex; align-items:center;
  justify-content:center; position:relative; font-size:12.5px; font-weight:600; color:var(--g7);
  background:rgba(24,24,27,.04); }
html[data-theme="dark"] .cal-cell, html[data-theme="dark"] .checkin-cal > div:not(.cal-head),
body.dark .cal-cell, body.dark .checkin-cal > div:not(.cal-head){ background:rgba(255,255,255,.06); }
.checkin-cal .cal-empty{ background:transparent; }
.checkin-cal .cal-done{ color:#fff; background:var(--grad-red); box-shadow:0 4px 10px -4px rgba(var(--red-rgb),.5); }
.checkin-cal .cal-today{ color:var(--red); background:rgba(var(--red-rgb),.08); border:1.5px solid rgba(var(--red-rgb),.55); }
.checkin-cal .cal-today.cal-done{ color:#fff; border:1.5px solid rgba(255,255,255,.85); }
.checkin-cal .cal-future{ color:var(--g10); background:transparent; }
.cal-dot{ position:absolute; bottom:5px; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.85; }

/* 日历：月份翻页头 */
.checkin-cal-head{ align-items:center; }
.cal-nav{ display:flex; align-items:center; gap:2px; }
.cal-nav-btn{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:var(--r-pill); color:var(--g7); background:rgba(24,24,27,.05);
  transition:background .16s var(--ease), color .16s var(--ease); }
.cal-nav-btn:hover{ background:rgba(var(--red-rgb),.1); color:var(--red); }
.cal-nav-btn.is-disabled{ opacity:.3; pointer-events:none; }
.cal-nav-label{ min-width:86px; text-align:center; font-size:12.5px; font-weight:600; color:var(--g6);
  font-variant-numeric:tabular-nums; }
html[data-theme="dark"] .cal-nav-btn, body.dark .cal-nav-btn{ background:rgba(255,255,255,.08); color:var(--g8); }

/* 日历：本月概览（环形进度 + 四项统计） */
.cal-summary{ display:flex; align-items:center; gap:16px; padding:2px 0 14px; margin-bottom:12px;
  border-bottom:1px solid var(--line2); }
.cal-ring{ position:relative; flex-shrink:0; width:62px; height:62px; }
.cal-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.cal-ring-bg{ fill:none; stroke:rgba(24,24,27,.08); stroke-width:4; }
.cal-ring-fg{ fill:none; stroke:var(--red); stroke-width:4; stroke-linecap:round;
  transition:stroke-dasharray .5s var(--ease); }
.cal-ring-num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:var(--red); font-variant-numeric:tabular-nums; }
html[data-theme="dark"] .cal-ring-bg, body.dark .cal-ring-bg{ stroke:rgba(255,255,255,.12); }
.cal-summary-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; flex:1; min-width:0; }
.cal-sum-item{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; }
.cal-sum-n{ font-size:15px; font-weight:700; color:var(--g6); font-variant-numeric:tabular-nums; }
.cal-sum-miss{ color:var(--g9); }
.cal-sum-l{ font-size:10.5px; color:var(--g9); white-space:nowrap; }

/* 日历：格子内金币角标 + 连续段连接条 */
.cal-cell{ flex-direction:column; gap:1px; transition:transform .16s var(--ease), background .16s var(--ease); }
.cal-day{ line-height:1; }
.cal-coins{ font-size:9px; font-weight:600; line-height:1; opacity:.92; font-variant-numeric:tabular-nums; }
.checkin-cal .cal-done:hover{ transform:scale(1.06); }
/* 连续签到段：相邻两天之间画一条横向连接条，视觉上连成一条链 */
.checkin-cal .cal-done.link-prev::before,
.checkin-cal .cal-done.link-next::after{ content:""; position:absolute; top:50%; width:6px; height:2px;
  background:var(--red); opacity:.45; transform:translateY(-50%); pointer-events:none; }
.checkin-cal .cal-done.link-prev::before{ left:-6px; }
.checkin-cal .cal-done.link-next::after{ right:-6px; }
.checkin-cal .cal-done.cal-today{ animation:cal-pulse 2.4s var(--ease) infinite; }
@keyframes cal-pulse{
  0%,100%{ box-shadow:0 4px 10px -4px rgba(var(--red-rgb),.5); }
  50%{ box-shadow:0 4px 16px -2px rgba(var(--red-rgb),.75); }
}

/* 日历：图例 */
.cal-legend{ display:flex; align-items:center; gap:14px; margin-top:12px; padding-top:10px;
  border-top:1px solid var(--line2); font-size:11px; color:var(--g9); }
.cal-legend-item{ display:inline-flex; align-items:center; gap:5px; }
.cal-legend-dot{ width:9px; height:9px; border-radius:3px; display:inline-block; }
.cal-legend-dot.is-done{ background:var(--grad-red); }
.cal-legend-dot.is-today{ background:rgba(var(--red-rgb),.1); border:1.5px solid rgba(var(--red-rgb),.55); }
.cal-legend-dot.is-miss{ background:rgba(24,24,27,.1); }

.checkin-btn{ width:100%; }
.check-line{ display:flex; align-items:center; gap:9px; padding:10px 0; border-bottom:1px solid var(--line2);
  font-size:13px; color:var(--g6); line-height:1.6; }
.check-line input[type="checkbox"]{ appearance:none; -webkit-appearance:none; flex-shrink:0; margin:0;
  width:38px; height:22px; border-radius:11px; position:relative; cursor:pointer;
  background:rgba(24,24,27,.14); transition:background .2s; }
.check-line input[type="checkbox"]::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.22); transition:transform .2s var(--ease); }
.check-line input[type="checkbox"]:checked{ background:var(--red); }
.check-line input[type="checkbox"]:checked::after{ transform:translateX(16px); }
html[data-theme="dark"] .check-line input[type="checkbox"], body.dark .check-line input[type="checkbox"]{ background:rgba(255,255,255,.18); }
.radio-list{ display:flex; flex-direction:column; gap:8px; }
.radio-row{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--r-md);
  background:rgba(255,255,255,.6); border:1.5px solid rgba(24,24,27,.09); cursor:pointer;
  font-size:13.5px; color:var(--g7); transition:border-color .2s, background .2s, color .2s; }
.radio-row:hover{ border-color:rgba(var(--red-rgb),.35); }
.radio-row:has(input:checked){ border-color:var(--red); background:rgba(var(--red-rgb),.05);
  color:var(--red-600); font-weight:600; }
.radio-row input[type="radio"]{ appearance:none; -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(24,24,27,.25); margin:0; flex-shrink:0; position:relative; transition:border-color .2s; }
.radio-row input[type="radio"]:checked{ border-color:var(--red); }
.radio-row input[type="radio"]:checked::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--red); }
html[data-theme="dark"] .radio-row, body.dark .radio-row{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
html[data-theme="dark"] .radio-row:has(input:checked), body.dark .radio-row:has(input:checked){ background:rgba(var(--red-rgb),.1); border-color:var(--red); }
/* 属性多选 / 性别单选胶囊（注册页、设置页、后台编辑用户共用） */
.pick-wrap{ display:flex; flex-wrap:wrap; gap:8px; }
.pick-wrap label{ display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px;
  background:rgba(255,255,255,.6); border:1.5px solid rgba(24,24,27,.09); cursor:pointer;
  font-size:13px; color:var(--g7); transition:border-color .2s, background .2s, color .2s; }
.pick-wrap label:hover{ border-color:rgba(var(--red-rgb),.35); }
.pick-wrap label:has(input:checked){ border-color:var(--red); background:rgba(var(--red-rgb),.05); color:var(--red-600); font-weight:600; }
.pick-wrap input{ appearance:none; -webkit-appearance:none; width:16px; height:16px; border:2px solid rgba(24,24,27,.25);
  margin:0; flex-shrink:0; position:relative; transition:border-color .2s, background .2s; }
.pick-wrap input[type="radio"]{ border-radius:50%; }
.pick-wrap input[type="radio"]:checked{ border-color:var(--red); }
.pick-wrap input[type="radio"]:checked::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:var(--red); }
.pick-wrap input[type="checkbox"]{ border-radius:5px; }
.pick-wrap input[type="checkbox"]:checked{ border-color:var(--red); background:var(--red); }
.pick-wrap input[type="checkbox"]:checked::after{ content:""; position:absolute; left:4px; top:1px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
html[data-theme="dark"] .pick-wrap label, body.dark .pick-wrap label{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
html[data-theme="dark"] .pick-wrap label:has(input:checked), body.dark .pick-wrap label:has(input:checked){ background:rgba(var(--red-rgb),.1); }
.check-line:last-child{ border-bottom:none; padding-bottom:0; }
.check-line .ico{ width:30px; height:30px; border-radius:10px; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; color:var(--red); background:rgba(var(--red-rgb),.1); }
.check-line strong{ color:var(--ink); }
.coin-hero{ display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding:20px; border-radius:var(--r-xl); color:#78350f;
  background:linear-gradient(135deg,#fbbf24,#fcd34d 60%,#fde68a);
  box-shadow:0 14px 34px -14px rgba(245,165,36,.6); }
.coin-balance-ico{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; color:#fff; background:rgba(255,255,255,.35); flex-shrink:0; }
.coin-balance-label{ font-size:12.5px; opacity:.85; }
.coin-balance-num{ font-size:26px; font-weight:700; letter-spacing:-.5px; line-height:1.2; }
.vip-hero-badge{ height:132px; width:auto; flex-shrink:0; margin-left:auto; align-self:center;
  filter:drop-shadow(0 8px 18px rgba(180,120,10,.35)); }
.vip-hero-expiry{ flex-basis:100%; }

/* --------------------------------------------------------------------------
   30. 兑换 / 支付 / 卡密
   -------------------------------------------------------------------------- */
.ex-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.ex-card{ padding:15px; display:flex; flex-direction:column; gap:9px; border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--card-line); box-shadow:var(--sh-2); }
.ex-card-top{ display:flex; align-items:flex-start; gap:10px; }
.ex-card-ico{ width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  font-size:21px; color:#fff; background:var(--grad-red); box-shadow:0 6px 14px -6px rgba(var(--red-rgb),.55); flex-shrink:0; }
.ex-card-cost{ margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-size:14px; font-weight:700; color:var(--gold); }
.ex-card-name{ font-size:14.5px; font-weight:700; }
.ex-card-desc{ font-size:12.5px; color:var(--g6); line-height:1.6; }
.ex-card-meta{ font-size:11.5px; color:var(--g9); }
.ex-card-action{ margin-top:auto; }
.ex-card-action .btn{ width:100%; }
.ex-card.ex-soldout{ opacity:.55; }
.code-chip{ display:inline-flex; align-items:center; gap:6px; font-family:'SF Mono', ui-monospace, Consolas, monospace;
  font-size:13px; letter-spacing:1px; padding:8px 13px; border-radius:12px;
  background:rgba(24,24,27,.04); border:1px dashed rgba(24,24,27,.18); }
.card-key-input{ display:flex; gap:9px; margin-bottom:14px; }
.card-key-input .form-control{ flex:1; }
.pay-icon{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:var(--red); background:rgba(var(--red-rgb),.1); flex-shrink:0; }
.pay-setting{ display:flex; align-items:center; gap:10px; }
.pay-setting .form-control{ flex:1; }
.pay-unit{ font-size:13px; color:var(--g9); flex-shrink:0; }

/* --------------------------------------------------------------------------
   31. 登录 / 注册（auth）
   -------------------------------------------------------------------------- */
.auth-wrap{ max-width:420px; margin:34px auto 60px; padding:0 14px; }
.auth-wrap > .card{ background:var(--card); border:1px solid var(--card-line); border-radius:var(--r-xl);
  box-shadow:0 18px 44px -18px rgba(24,24,27,.18), var(--sh-2); }
.auth-wrap > .card .card-body{ padding:26px 22px; }
.auth-logo{ width:64px; height:64px; margin:0 auto 14px; border-radius:20px; display:flex; align-items:center;
  justify-content:center; color:#fff; font-size:28px; font-weight:700; background:var(--grad-red);
  box-shadow:0 14px 30px -12px rgba(var(--red-rgb),.6); }
.auth-logo img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.auth-title{ text-align:center; font-size:20px; font-weight:700; letter-spacing:-.2px; }
.auth-sub{ text-align:center; font-size:13px; color:var(--g9); margin-top:6px; }
.auth-wrap .form-group{ margin-top:16px; }
.auth-foot{ text-align:center; font-size:13px; color:var(--g9); margin-top:16px; }
.auth-foot a{ color:var(--red); font-weight:600; }
.auth-pill{ display:inline-flex; align-items:center; gap:6px; margin:0 auto 14px; padding:5px 13px;
  border-radius:var(--r-pill); font-size:12px; font-weight:600; color:var(--red-600);
  background:rgba(var(--red-rgb),.1); }
.auth-cap{ text-align:center; font-size:12px; color:var(--g9); margin-top:18px; line-height:1.7; }
.seg-tabs{ display:flex; gap:4px; padding:4px; border-radius:var(--r-lg); background:rgba(24,24,27,.045); margin-bottom:16px; }
.seg-tabs > a, .seg-tabs > button{ flex:1; height:38px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; font-size:13.5px; font-weight:600; color:var(--g6); transition:color .2s, background .2s, box-shadow .2s; }
.seg-tabs > a:hover:not(.active), .seg-tabs > button:hover:not(.active){ color:var(--ink); }
.seg-tabs > .active{ background:#fff; color:var(--red); box-shadow:0 1px 4px rgba(24,24,27,.08); }
html[data-theme="dark"] .seg-tabs > .active, body.dark .seg-tabs > .active{ background:rgba(255,255,255,.12); }

/* --------------------------------------------------------------------------
   32. 认证 / 验证清单（verify）
   -------------------------------------------------------------------------- */
.verify-list{ display:flex; flex-direction:column; gap:10px; }
.verify-row{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--card-line); box-shadow:var(--sh-2); }
.verify-row:last-child{ margin-bottom:0; }
.verify-row-label{ font-size:13.5px; font-weight:600; min-width:0; display:flex; align-items:center; gap:6px; }
.verify-row-need{ font-size:12px; color:var(--g9); }
.verify-row-now{ font-size:12px; color:var(--g7); }
.verify-row-state{ margin-left:auto; flex-shrink:0; font-size:12.5px; font-weight:700; color:var(--g9); }
.verify-row.verify-ok .verify-row-state, .verify-ok{ color:var(--success); }
.verify-row.verify-ok .verify-row-label{ color:var(--ink); }
.verify-row.verify-no .verify-row-state{ color:var(--danger); }

/* --------------------------------------------------------------------------
   33. 举报
   -------------------------------------------------------------------------- */
.report-card .card-body{ padding:16px; }
.report-target{ padding:12px 14px; border-radius:12px; background:rgba(24,24,27,.04);
  border-left:3px solid var(--red); font-size:13px; color:var(--g7); margin-bottom:12px; line-height:1.7; }

/* --------------------------------------------------------------------------
   34. 安装向导（install.php）
   -------------------------------------------------------------------------- */
.install-wrap{ max-width:1080px; margin:0 auto; padding:26px 14px 60px; display:grid;
  grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start; }
.install-main{ min-width:0; }
.install-title{ font-size:22px; font-weight:700; letter-spacing:-.3px; }
.install-sub{ font-size:13.5px; color:var(--g9); margin-top:8px; line-height:1.7; }
.install-section{ margin-top:20px; }
.install-hero{ border-radius:var(--r-xl); padding:22px; margin-bottom:18px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#f31260,#ec4899 60%,#a855f7); box-shadow:0 18px 44px -18px rgba(var(--red-rgb),.55); }
.install-hero-logo{ width:56px; height:56px; border-radius:18px; background:rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center; font-size:26px; overflow:hidden; }
.install-hero-logo img{ width:100%; height:100%; object-fit:cover; }
.install-hero-brand{ display:flex; align-items:center; gap:14px; }
.install-hero-name{ font-size:22px; font-weight:700; }
.install-hero-ver{ font-size:12.5px; opacity:.85; margin-top:3px; }
.install-hero-lead{ font-size:13.5px; line-height:1.8; opacity:.92; margin-top:14px; }
.install-hero-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.install-hero-tags span{ padding:5px 12px; border-radius:var(--r-pill); font-size:12px; font-weight:600;
  background:rgba(255,255,255,.2); }
.install-side{ position:sticky; top:24px; }
.install-side-title{ font-size:12.5px; font-weight:700; color:var(--g9); letter-spacing:.4px;
  padding:0 12px; margin:4px 0 6px; }
.step{ display:flex; align-items:center; gap:10px; height:40px; padding:0 12px; border-radius:11px;
  font-size:13.5px; font-weight:500; color:var(--g7); }
.step.done, .step.is-done{ color:var(--success); font-weight:600; }
.step.active{ background:rgba(var(--red-rgb),.1); color:var(--red); font-weight:600; }
.install-features{ display:grid; gap:8px; }
.install-features li{ display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:12px;
  background:rgba(24,24,27,.03); border:1px solid var(--line2); font-size:13px; color:var(--g7); }
.install-features b{ font-weight:700; color:var(--ink); }
.install-features small{ color:var(--g9); margin-left:auto; }
.fi-ico{ width:34px; height:34px; border-radius:11px; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; color:var(--red); background:rgba(var(--red-rgb),.1); }
.db-choice{ display:grid; gap:10px; }
.db-choice-item{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r-md);
  background:rgba(255,255,255,.6); border:1.5px solid rgba(24,24,27,.09); cursor:pointer;
  transition:border-color .2s, background .2s; }
.db-choice-item:hover{ border-color:rgba(var(--red-rgb),.35); }
.db-choice-item.active, .db-choice-item:has(input:checked){ border-color:var(--red); background:rgba(var(--red-rgb),.05); }
.install-done{ text-align:center; }
.install-done .card-body{ padding:34px 24px; }
.install-done-ico{ width:76px; height:76px; margin:0 auto 16px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; color:var(--success); background:rgba(23,201,100,.12); }
.install-done-title{ font-size:20px; font-weight:700; }
.install-done-actions{ display:flex; gap:10px; justify-content:center; margin-top:20px; flex-wrap:wrap; }

/* --------------------------------------------------------------------------
   35. PWA 安装条
   -------------------------------------------------------------------------- */
.install-bar{ position:fixed; left:10px; right:10px; bottom:calc(84px + env(safe-area-inset-bottom));
  z-index:150; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px;
  background:var(--glass2); -webkit-backdrop-filter:blur(20px) saturate(170%); backdrop-filter:blur(20px) saturate(170%);
  border:1px solid rgba(255,255,255,.6); box-shadow:0 14px 36px -12px rgba(24,24,27,.28); }
.install-bar[hidden]{ display:none; }
.install-bar-logo{ width:36px; height:36px; border-radius:10px; flex-shrink:0; }
.install-bar-text{ flex:1; min-width:0; font-size:12.5px; color:var(--g7); line-height:1.5; }
.install-bar-close{ width:28px; height:28px; border-radius:9px; flex-shrink:0; color:var(--g9); font-size:16px;
  display:flex; align-items:center; justify-content:center; }
.install-bar-close:hover{ background:rgba(24,24,27,.06); color:var(--ink); }

/* --------------------------------------------------------------------------
   36. 零散补充（与旧版选择器完全对齐）
   -------------------------------------------------------------------------- */
.card-bg{ background:var(--card); }
.card-header .card-sub{ display:block; margin:2px 0 0; }
.card-header > span:first-child{ min-width:0; }
.card-header > span:first-child:not(:last-child){ flex:1; }
.post-head{ min-width:0; }
.topic-detail .post-head{ min-width:0; }
.topic-detail .topic-flags{ margin-bottom:10px; }
.topic-detail .post-actions{ margin-top:18px; }
.post-excerpt{ font-size:13.5px; color:var(--g6); line-height:1.7; margin-top:7px; }
.post-thumb{ width:108px; height:76px; border-radius:12px; object-fit:cover; flex-shrink:0; background:var(--f0); }
.post-card .level-icon{ font-size:10px; padding:1px 6px; }
.like-btn .like-num{ font-size:12px; }
.um-admin{ color:var(--indigo)!important; font-weight:600; }
.um-vip{ color:var(--gold)!important; }
.um-logout{ color:var(--red)!important; }
.signature{ font-size:12px; color:var(--g9); }
.rank-list{ display:flex; flex-direction:column; gap:2px; }
.rank-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; }
.rank-item:hover{ background:rgba(24,24,27,.04); }
.rank-no-1{ color:#fff; background:linear-gradient(135deg,#f5a524,#fbbf24); }
.rank-no-2{ color:#fff; background:linear-gradient(135deg,#94a3b8,#cbd5e1); }
.rank-no-3{ color:#fff; background:linear-gradient(135deg,#d97706,#f59e0b); }
.coin-balance{ min-width:0; }
.checkin-card .card-body{ padding:18px; }
.checkin-btn:active{ transform:scale(.97); }
.tip-amount:active{ transform:scale(.95); }
.message-tab:active{ transform:scale(.98); }
.private-card:active{ background:rgba(var(--red-rgb),.06); }
.private-card + .private-card{ margin-top:0; }
.chat-attach-preview .preview-item{ width:72px; height:72px; }
.tab-item .tab-text{ display:inline-flex; align-items:center; gap:5px; }
.page-title > div{ min-width:0; }
.check-line svg{ flex-shrink:0; }
.checkin-reward{ position:relative; }
.uc-services .ov-action{ background:rgba(255,255,255,.55); }
html[data-theme="dark"] .uc-services .ov-action, body.dark .uc-services .ov-action{ background:rgba(255,255,255,.05); }
.uc-services .ov-action-icon{ width:42px; height:42px; }
.uc-services .ov-action-word strong{ font-size:12.5px; font-weight:600; }
.bubble-row.system-msg{ justify-content:center; }
.bubble-row.system-msg .bubble{ max-width:88%; padding:6px 14px; border-radius:var(--r-pill);
  font-size:12px; color:var(--g6); background:rgba(24,24,27,.06); border:none; box-shadow:none; }
html[data-theme="dark"] .bubble-row.system-msg .bubble, body.dark .bubble-row.system-msg .bubble{ background:rgba(255,255,255,.08); color:var(--g9); }
.pp-foot .btn{ flex:1; min-width:120px; }
.topic-side-action .btn + .btn{ margin-top:0; }
body.drawer-open{ overflow:hidden; }
body.lightbox-open{ overflow:hidden; }

/* --------------------------------------------------------------------------
   图片灯箱增强（P3）
   - 加载中旋转指示 + 图片淡入（只动 opacity / transform）
   - 可缩放图片显示「放大镜」光标，提示用户可双击放大
   - 左右切换按钮在触屏上更大，方便拇指点按
   -------------------------------------------------------------------------- */
.lightbox-spinner{
  position:absolute; top:50%; left:50%;
  width:38px; height:38px; margin:-19px 0 0 -19px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.18);
  border-top-color:#fff;
  animation:lb-spin .7s linear infinite;
  z-index:1; pointer-events:none;
}
@keyframes lb-spin{ to{ transform:rotate(360deg); } }
/* 图片加载完成后隐藏旋转指示（相邻兄弟选择器，只影响外观不影响布局） */
.lightbox-img.is-loaded + .lightbox-spinner{ display:none; }
.lightbox-img{
  opacity:0; transition:opacity .2s var(--ease), transform .2s var(--ease);
  cursor:zoom-in;
}
.lightbox-img.is-loaded{ opacity:1; cursor:zoom-in; }
.lightbox-img.is-error{
  opacity:1; min-width:200px; min-height:120px;
  background:rgba(255,255,255,.06); border-radius:var(--r-md);
}
.lightbox-nav{
  width:44px; height:44px; border-radius:50%;
  -webkit-tap-highlight-color:transparent;
}
@media (max-width:640px){
  .lightbox-nav{ width:40px; height:40px; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
  .lightbox-img{ max-width:100vw; max-height:100vh; }
}
/* 可缩放图片的提示：列表页缩略图 / 预览图加放大镜光标 */
.topic-thumb, .post-excerpt-img{ cursor:zoom-in; }
@media (hover:hover) and (pointer:fine){
  .topic-thumb:hover, .post-excerpt-img:hover{ opacity:.92; }
}
body.media-dragging{ cursor:copy; }
.over{ color:var(--danger); }
.pop{ animation:like-pop .32s var(--ease); }
.is-on{ color:var(--red); }
.dragging{ outline:2px dashed rgba(var(--red-rgb),.5); outline-offset:3px; border-radius:var(--r-md); }

/* --------------------------------------------------------------------------
   37. 窄桌面（≤1080）：合并搜索为按钮弹出
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .search{ display:none; }
  .topbar-search-btn{ display:flex; }
  /* 搜索框隐藏后，由操作区整体撑到最右（否则头像/按钮会挂在中间留一截空位） */
  .nav + .search + .topbar-actions{ margin-left:auto; }
  .search.open{ display:flex; position:absolute; left:14px; right:14px; top:calc(100% + 8px);
    max-width:none; margin:0; height:48px; z-index:70; padding:0 5px 0 16px;
    background:var(--glass2); -webkit-backdrop-filter:blur(20px) saturate(170%); backdrop-filter:blur(20px) saturate(170%);
    border:1px solid rgba(255,255,255,.65); border-radius:14px;
    box-shadow:0 16px 40px -14px rgba(24,24,27,.28); }
  html[data-theme="dark"] .search.open, body.dark .search.open{ border-color:rgba(255,255,255,.09); }
}
@media (max-width:920px){
  .brand-text{ font-size:15px; }
  .nav-link{ padding:8px 10px; font-size:13.5px; }
}

/* --------------------------------------------------------------------------
   38. 桌面（≥821）：页内两栏网格 + 右栏粘滞
   -------------------------------------------------------------------------- */
@media (min-width:821px){
  .layout{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:start; }
  .layout:has(> aside){ grid-template-columns:minmax(0,1fr) 300px; }
  .stat-grid{ grid-template-columns:repeat(4,1fr); }
  .layout > aside{ position:sticky; top:var(--stick-top); }
  .site-footer{ padding-bottom:40px; }
  .fixed-reply-bar, .reply-bar-spacer{ display:none; }
}

/* --------------------------------------------------------------------------
   39. 移动端（≤820）
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  :root{ --topbar-h:52px; }
  .topbar{ top:8px; padding:0 16px; margin-top:8px; }
  .topbar-inner{ height:52px; border-radius:16px; padding:0 8px 0 13px; gap:8px; }
  .brand-text{ display:none; }
  .brand-text-mobile{ display:block; font-size:15.5px; }
  .nav{ display:none; }
  .topbar-post{ display:none; }
  .topbar-actions{ gap:4px; }
  .search.open{ left:16px; right:16px; }
  .user-menu-name{ display:none; }
  /* 移动端头像即为顶栏最右侧元素：隐藏头像旁的等级胶囊，避免顶到右边的是 Lv 而不是头像 */
  .user-menu-trigger .lv-badge{ display:none; }
  .user-menu-trigger{ padding:4px; background:transparent; }
  .user-menu-trigger:hover{ background:rgba(24,24,27,.05); }
  .user-menu-dropdown{ position:fixed; left:16px; right:16px; top:calc(8px + 52px + 8px);
    max-height:min(70vh, 560px); }

  .pc-shell, .pc-shell.is-narrow{ display:block; padding:16px 16px 132px; }
  .pc-sidebar, .pc-rail{ display:none; }
  .pc-center > .container{ padding:0; }
  .container{ padding:0 16px; }
  .page-title{ font-size:18px; margin:2px 0 12px; }
  .page-title h1{ font-size:18px; }
  .card-body{ padding:14px; }
  .card-header{ padding:13px 14px; }
  .post-card{ padding:14px; }
  .post-title{ font-size:15.5px; }
  .topic-detail{ padding:15px; }
  .topic-detail h1{ font-size:18.5px; }
  .pa-signature{ display:none; }
  .focus-slider{ border-radius:16px; }
  .focus-title{ font-size:15.5px; }
  .focus-nav{ display:none; }
  .topic-thumb{ height:86px; }
  .comment-children{ padding-left:26px; }
  .chat-box{ padding:14px 12px; }
  .card.chat-shell{ height:calc(100vh - 270px - env(safe-area-inset-bottom));
    height:calc(100dvh - 270px - env(safe-area-inset-bottom)); min-height:300px; }
  .chat-tools .tip-input-row .btn{ flex:1 1 100%; }
  .chat-compose .char-count{ display:none; }
  .bubble{ max-width:78%; }
  .bubble-image img{ max-width:216px; max-height:260px; }
  .bubble-video{ max-width:228px; max-height:260px; }
  .unlock-box{ padding:20px 14px; }
  .checkin-streak-num{ font-size:30px; }
  .podium{ gap:8px; }
  .podium-item{ padding:12px 6px; }
  .podium-medal{ font-size:22px; }
  .podium-name{ font-size:12.5px; }
  .avatar-xl{ width:72px; height:72px; }
  /* 个人主页(u.php)：窄屏下操作按钮换行，避免 .profile-info 被挤成竖排 */
  .profile-info{ flex:1 1 calc(100% - 92px); }
  .profile-head > .btn, .profile-head > form{ margin-left:0; }
  .auth-wrap{ margin-top:22px; }
  .install-wrap{ grid-template-columns:1fr; padding:18px 12px 130px; }
  .install-side{ position:static; }
  .chp-stats{ gap:12px; }
  .cal-cell, .checkin-cal > div:not(.cal-head){ border-radius:10px; font-size:12px; }
  /* 日历窄屏：概览改为上下两行，金币角标缩小，连接条收窄 */
  .cal-summary{ flex-direction:column; align-items:stretch; gap:10px; }
  .cal-ring{ align-self:center; width:56px; height:56px; }
  .cal-summary-stats{ gap:6px; }
  .cal-sum-n{ font-size:14px; }
  .cal-sum-l{ font-size:10px; }
  .cal-coins{ font-size:8.5px; }
  .checkin-cal .cal-done.link-prev::before,
  .checkin-cal .cal-done.link-next::after{ width:4px; }
  .checkin-cal .cal-done.link-prev::before{ left:-4px; }
  .checkin-cal .cal-done.link-next::after{ right:-4px; }
  .cal-legend{ gap:10px; font-size:10.5px; }
  .cal-nav-label{ min-width:74px; font-size:12px; }
  .site-footer{ padding:24px 12px 150px; }

  /* 底部导航 */
  .mobile-tabbar{ display:flex; position:fixed; left:16px; right:16px; bottom:calc(10px + env(safe-area-inset-bottom));
    z-index:70; height:60px; padding:6px 8px; align-items:stretch; justify-content:space-around; gap:2px;
    background:var(--glass); -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%);
    border:1px solid rgba(255,255,255,.6); border-radius:20px;
    box-shadow:0 10px 30px -10px rgba(24,24,27,.16), 0 1px 2px rgba(24,24,27,.05); }
  html[data-theme="dark"] .mobile-tabbar, body.dark .mobile-tabbar{ border-color:rgba(255,255,255,.08); }
  .mtab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    border-radius:14px; color:var(--g9); font-size:10.5px; font-weight:600; position:relative;
    transition:color .2s; }
  .mtab-ico{ display:flex; align-items:center; justify-content:center; height:24px; }
  .mtab-ico svg{ width:22px; height:22px; }
  .mtab.active{ color:var(--red); }
  .mtab.active .mtab-ico svg{ filter:drop-shadow(0 2px 5px rgba(var(--red-rgb),.45)); }
  .mtab-dot{ position:absolute; top:1px; left:calc(50% + 3px); min-width:15px; height:15px; padding:0 4px;
    border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
    background:var(--red); color:#fff; font-size:9.5px; font-weight:700; border:1.5px solid var(--bg); }
  .mtab-post{ justify-content:flex-start; }
  .mtab-post-btn{ display:flex; align-items:center; justify-content:center; width:38px; height:38px;
    margin-top:-16px; border-radius:50%; color:#fff; background:var(--red);
    box-shadow:0 8px 18px -4px rgba(var(--red-rgb),.55); }
  .mtab-post-btn svg{ width:18px; height:18px; }
  .mtab-post .mtab-txt{ margin-top:2px; font-size:10px; }

  /* 固定回复条 */
  .reply-bar-spacer{ display:block; height:60px; }
  .fixed-reply-bar{ display:flex; position:fixed; left:16px; right:16px;
    bottom:calc(84px + env(safe-area-inset-bottom)); z-index:65; align-items:center; gap:8px;
    padding:6px 6px 6px 14px; border-radius:16px;
    background:var(--glass2); -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%);
    border:1px solid rgba(255,255,255,.6); box-shadow:0 10px 30px -12px rgba(24,24,27,.24); }
  .frb-input{ flex:1; min-width:0; height:40px; border:none; background:transparent; outline:none; font-size:14px; }
  .frb-input::placeholder{ color:var(--g9); }
  .frb-btn{ height:40px; padding:0 16px; border-radius:12px; display:inline-flex; align-items:center; gap:5px;
    font-size:13.5px; font-weight:600; color:#fff; background:var(--red);
    box-shadow:0 5px 12px -4px rgba(var(--red-rgb),.5); flex-shrink:0; }
  .frb-btn:active{ transform:scale(.95); }
  html[data-theme="dark"] .fixed-reply-bar, body.dark .fixed-reply-bar{ border-color:rgba(255,255,255,.08); }

  /* 用户中心头像资料卡：签到按钮换行到右下，避免昵称/徽章区被挤成窄条 */
  .pp-head{ flex-wrap:wrap; row-gap:10px; }
  .pp-head .avatar{ width:72px; height:72px; }
  .pp-side{ flex-basis:100%; justify-content:flex-end; }
  .pp-side:not(:has(*)){ display:none; }
}

/* --------------------------------------------------------------------------
   40. 超窄屏（≤420）
   -------------------------------------------------------------------------- */
@media (max-width:420px){
  .container{ padding:0 14px; }
  .pc-shell, .pc-shell.is-narrow{ padding:14px 14px 128px; }
  .topbar{ padding:0 14px; }
  .search.open{ left:14px; right:14px; }
  .user-menu-dropdown{ left:14px; right:14px; }
  .mobile-tabbar{ left:14px; right:14px; }
  .fixed-reply-bar{ left:14px; right:14px; }
  .ex-grid{ grid-template-columns:1fr; }
  .section-grid, .recommend-list{ gap:10px; }
  .section-cell.cat-cell, .recommend-card{ padding:12px; gap:8px; }
  .sc-icon, .rc-icon{ width:38px; height:38px; border-radius:11px; font-size:18px; }
  .sc-name{ font-size:13.5px; }
  .rc-name{ font-size:13px; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .user-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .checkin-stats{ gap:8px; }
  .foot-right{ gap:11px; }
  .topic-thumbs .topic-thumb:nth-child(n+3){ display:none; }
  .focus-body{ padding:13px; }
  /* 小屏：标签筛选栏与标签组收紧，避免换行挤压 */
  .tag-filter-bar{ padding:8px 12px; gap:7px; }
  .tag-filter-clear{ margin-left:0; }
  .post-tags{ gap:5px; }
  .post-tags .topic-tag{ padding:2px 8px; font-size:11px; }
  .topic-tag-more{ font-size:11px; }
}

/* --------------------------------------------------------------------------
   41. 深色补充
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .focus-shade, body.dark .focus-shade{ background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.75)); }
html[data-theme="dark"] .hidden-block-body, body.dark .hidden-block-body{ background:linear-gradient(180deg, rgba(var(--red-rgb),.16), rgba(var(--red-rgb),.05)); }
html[data-theme="dark"] .unlock-box, body.dark .unlock-box{ background:rgba(var(--red-rgb),.08); border-color:rgba(var(--red-rgb),.4); }
html[data-theme="dark"] .form-control, body.dark .form-control,
html[data-theme="dark"] .glass-input, body.dark .glass-input,
html[data-theme="dark"] .description-input, body.dark .description-input,
html[data-theme="dark"] .hidden-body, body.dark .hidden-body{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); }
html[data-theme="dark"] .dcard, body.dark .dcard{ background:rgba(255,255,255,.05); }
html[data-theme="dark"] .upload-box, body.dark .upload-box{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14); }
html[data-theme="dark"] .pager-btn.active, body.dark .pager-btn.active{ color:#fff; background:var(--red); }
html[data-theme="dark"] .toast, body.dark .toast{ background:rgba(52,52,58,.92); }

/* ==========================================================================
   42. 商业级视觉精修 v3（2026-10-27）
   --------------------------------------------------------------------------
   目标：把「个人开发者风格」提升到商业级质感。
   约束：只做视觉覆盖——不改 DOM、不改类名、不改 JS 状态类、不改布局尺寸；
        所有动效只动 transform / opacity / box-shadow，绝不动 width / height。
   做法：整段追加在最后，靠层叠顺序生效；如需还原，删除本段即可。
   ========================================================================== */

/* --------------------------------------------------------------------------
   42.1 设计令牌：色彩降噪 + 圆角 / 阴影统一
   - 粉色从「大面积底色」退回「唯一强调色」：主按钮、激活态、角标、链接
   - 页面底色改中性浅灰 #F7F8FA，卡片纯白 #FFFFFF
   - 次要信息统一到 #8C92A4
   -------------------------------------------------------------------------- */
:root{
  /* 品牌粉（唯一强调色） */
  --red:#ff2b5e; --red-rgb:255,43,94;
  --red-600:#e01d4a; --red-400:#ff6d8f; --red-200:#ffc2d0; --red-50:#fff0f4;
  --primary-soft:rgba(var(--red-rgb),.06);
  --grad-red:linear-gradient(135deg,#ff2b5e 0%,#ff5c8a 100%);
  --sh-red:0 6px 18px -6px rgba(var(--red-rgb),.36);

  /* 中性色：标题近墨黑，次要信息浅灰 */
  --ink:#16181d; --g7:#4b5563; --g6:#6b7280; --g9:#8c92a4; --gcc:#dcdfe6;
  --f7:#f5f6f8; --f0:#eef0f3;
  --bg:#ffffff; --page:#f7f8fa;

  /* 卡片：纯白 + 极细描边 + 弥散阴影（全部去掉生硬纯黑投影） */
  --card:#ffffff; --card-line:rgba(17,24,39,.035);
  --line:rgba(17,24,39,.07); --line2:rgba(17,24,39,.05);
  --glass:rgba(255,255,255,.78); --glass2:rgba(255,255,255,.92);
  --card-sh:rgba(17,24,39,.04);
  --sh-1:0 4px 16px rgba(17,24,39,.04);
  --sh-2:0 4px 16px rgba(17,24,39,.04);

  /* 圆角规范：卡片 16px / 按钮 12px / 小控件 8px */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;

  /* 背景去粉：整页暖白渐变，移除原来的粉色／紫色光斑 */
  --page-grad:linear-gradient(180deg,#fbfbfc 0%,#f7f8fa 100%);
  --page-blobs:none;

  /* 统一缓动：0.25,0.8,0.25,1 —— 有弹性但不拖沓 */
  --ease:cubic-bezier(.25,.8,.25,1);
}

/* 固定层光斑直接关闭：这是「粉色泛滥」的最大来源 */
body.site-body::before{ display:none; }
html{ background:var(--page-grad) fixed; }

/* 深色令牌同步：卡片改为实色，避免半透明叠在深底上发灰 */
html[data-theme="dark"], body.dark{
  --bg:#1a1b1f; --page:#121317;
  --card:#1f2024; --card-line:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.06);
  --g9:#8b8f9a; --g6:#a6abb6; --g7:#c9ccd4;
  --sh-1:0 4px 16px rgba(0,0,0,.24);
  --sh-2:0 4px 16px rgba(0,0,0,.24);
  --page-blobs:none;
  --page-grad:linear-gradient(180deg,#141519 0%,#121317 100%);
}

/* --------------------------------------------------------------------------
   42.2 卡片统一：纯白 + 16px 圆角 + 1px 极细边 + 呼吸感阴影
   -------------------------------------------------------------------------- */
.card,
.post-card,
.topic-item,
.section-cell.cat-cell,
.recommend-card,
.user-card,
.message-card{
  background:var(--card);
  border:1px solid var(--card-line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  /* 过渡只包含 transform / box-shadow / background-color，滚动时无重排 */
  transition:transform .1s ease, box-shadow .2s var(--ease), background-color .2s var(--ease);
}

/* 列表卡片间距与内边距：更松弛，视觉更“贵” */
.topic-list{ gap:12px; }
.topic-item, .post-card{ padding:16px; }

/* 标题层级：加大、加粗到 600，字距微收 */
.topic-title, .post-title{ font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }

/* 次要信息（时间 / 阅读量 / 作者）统一浅灰，并保证图标与文字垂直居中 */
.topic-meta, .post-meta, .meta{ color:var(--g9); font-size:12px; gap:10px; align-items:center; }
.meta-item, .foot-icon{ align-items:center; line-height:1; }
.foot-icon svg{ transform:scale(.92); opacity:.72; }  /* 图标视觉缩小，不改变布局宽高 */
.foot-right{ gap:12px; }
.topic-thumbs{ margin-top:12px; }
.topic-thumb{ border-radius:12px; }

/* --------------------------------------------------------------------------
   42.3 顶部公告栏：粉底红字 → 毛玻璃浅底 + 深灰文字 + 一点品牌粉点缀
   -------------------------------------------------------------------------- */
.notice{
  color:var(--ink);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  backdrop-filter:blur(12px) saturate(150%);
  border:1px solid var(--line2);
  border-radius:14px;
  box-shadow:0 4px 16px rgba(17,24,39,.03);
}
.notice strong{ color:var(--red); font-weight:600; }
.notice-link{ color:var(--red); }

/* --------------------------------------------------------------------------
   42.4 首页 Tab：胶囊滑块 + 弹性缓动（取代死板方块指示器）
   -------------------------------------------------------------------------- */
.tabs{
  background:rgba(17,24,39,.035);
  border:1px solid transparent;
  border-radius:14px;
  padding:4px;
}
.tab-item{
  border-radius:11px;
  transition:color .3s var(--ease), background-color .3s var(--ease),
             box-shadow .3s var(--ease), transform .1s ease;
}
.tab-item:hover{ color:var(--ink); }
/* 选中态：白色胶囊 + 轻投影，形成“浮起”的滑块感 */
.tab-item:has(.tab-text-active){
  background:#fff;
  color:var(--red);
  box-shadow:0 1px 2px rgba(17,24,39,.06), 0 4px 10px -4px rgba(17,24,39,.12);
}
.tab-item .tab-text-active{ color:var(--red); }
.tab-line{ display:none !important; }          /* 彻底移除方块指示器 */
.tab-item:active{ transform:scale(.97); }

/* --------------------------------------------------------------------------
   42.5 板块页：图标底色从重粉块 → 5% 淡粉，图标本身保留品牌色
   -------------------------------------------------------------------------- */
.sc-icon, .chp-ico, .rc-icon{
  background:rgba(var(--red-rgb),.06);
  color:var(--red);
  box-shadow:none;
}
/* 卡片“浮在页面上”的质感：极细边 + 浅阴影 + 悬停加深 */
.section-cell.cat-cell:hover,
.recommend-card:hover,
.user-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px -12px rgba(17,24,39,.16);
}
.section-cell.cat-cell:active,
.recommend-card:active,
.user-card:active{ transform:scale(.97); }
/* 板块数量胶囊：降饱和，避免一片粉 */
.sc-pill{ color:var(--red-600); background:rgba(var(--red-rgb),.06); font-weight:600; }

/* --------------------------------------------------------------------------
   42.6 私信页：iOS 分段控制器（灰底 + 白色滑块）+ 头像细描边
   -------------------------------------------------------------------------- */
.message-tabs{
  background:#f1f2f5;
  border:1px solid transparent;
  border-radius:12px;
  padding:3px;
  gap:2px;
}
.message-tab{
  border-radius:9px;
  color:var(--g6);
  transition:color .3s var(--ease), background-color .3s var(--ease),
             box-shadow .3s var(--ease), transform .1s ease;
}
.message-tab:has(.tab-label.is-active){
  background:#fff;
  color:var(--ink);
  box-shadow:0 1px 2px rgba(17,24,39,.08), 0 2px 8px -2px rgba(17,24,39,.10);
}
/* 未选中时图标也降为灰，选中后才回到文字色（iOS 观感） */
.message-tab .tab-icon{ color:var(--g9); }
.message-tab:has(.tab-label.is-active) .tab-icon,
.message-tab:has(.tab-label.is-active) .tab-icon.is-msg,
.message-tab:has(.tab-label.is-active) .tab-icon.is-system{ color:inherit; }
.message-tab:active{ transform:scale(.98); }
/* 头像极细描边，防止浅色头像融进白底 */
.msg-item .avatar{ box-shadow:0 0 0 1px rgba(17,24,39,.06); }

/* --------------------------------------------------------------------------
   42.7 用户中心：数据面板改为“一排数字 + 分割线”，服务宫格统一浅灰底
   -------------------------------------------------------------------------- */
/* 用户中心数据面板：原本是「2 行散卡片」，这里改为「5 项横向并排 + 细分隔线」
   只动这一个 grid 的列数（该容器仅 ucenter.php 使用），不涉及其他页面布局 */
.stats-card{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; }
.stats-card .stat-item{
  background:transparent;
  border:0;
  border-right:1px solid var(--line2);
  border-radius:0;
  box-shadow:none;
  padding:6px 4px;
}
.stats-card .stat-item:last-child{ border-right:0; }
.stats-card .stat-num{ font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.stats-card .stat-label{ font-size:11px; color:var(--g9); margin-top:4px; }

/* 功能宫格：去掉彩色方块底，统一极浅灰，图标统一高级灰 */
.uc-services .ov-action{
  background:#f5f6f8;
  border:0;
  box-shadow:none;
  border-radius:14px;
}
.uc-services .ov-action:hover{
  background:#f0f2f5;
  transform:translateY(-1px);
  box-shadow:0 6px 16px -8px rgba(17,24,39,.16);
}
.uc-services .ov-action:active{ transform:scale(.97); }
.uc-services .ov-action-icon,
.uc-services .ov-action-icon.is-info,
.uc-services .ov-action-icon.is-warning,
.uc-services .ov-action-icon.is-success{
  background:transparent;
  color:var(--g7);
}
.uc-services .ov-action-icon.is-danger{ background:transparent; color:var(--danger); }

/* --------------------------------------------------------------------------
   42.8 签到按钮：粉底微渐变 + 右侧微光，强化点击欲望
   -------------------------------------------------------------------------- */
.checkin-btn{
  background:linear-gradient(135deg,#ff2b5e 0%,#ff5b86 100%);
  border:0;
  box-shadow:0 8px 22px -10px rgba(var(--red-rgb),.55), inset 0 1px 0 rgba(255,255,255,.18);
  position:relative;
  overflow:hidden;
}
/* 右侧高光：纯装饰层，不参与布局 */
.checkin-btn::after{
  content:"";
  position:absolute; right:-18px; top:-40%;
  width:96px; height:180%;
  background:radial-gradient(closest-side, rgba(255,255,255,.42), transparent 70%);
  pointer-events:none;
}

/* --------------------------------------------------------------------------
   42.9 底部导航：毛玻璃 + 选中微放大 + 顶部细指示线
   -------------------------------------------------------------------------- */
.mobile-tabbar{
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  backdrop-filter:blur(10px) saturate(160%);
  border-color:rgba(17,24,39,.05);
  box-shadow:0 8px 24px -12px rgba(17,24,39,.18), inset 0 1px 0 rgba(255,255,255,.6);
}
/* 只缩放图标：不改变导航栏与按钮的宽高，避免布局抖动 */
.mtab-ico{ transition:transform .18s var(--ease); }
.mtab.active .mtab-ico{ transform:scale(1.08); }
.mtab.active .mtab-ico svg{ filter:none; }
/* 选中项顶部 2px 指示线 */
.mtab.active::before{
  content:"";
  position:absolute; top:2px; left:50%;
  width:18px; height:2px; margin-left:-9px;
  border-radius:2px;
  background:var(--red);
}

/* --------------------------------------------------------------------------
   42.10 触控反馈 / 悬浮态 / 防抖动
   - 可点元素按下时缩放 0.97（只动 transform，不动宽高）
   - 桌面端 hover 用浅灰底或加深阴影，过渡 200ms
   - 关闭系统「减少动态效果」时全部降级为无动画
   -------------------------------------------------------------------------- */
.btn:active,
.post-card:active,
.topic-item:active,
.tab-item:active,
.cat-tab:active, .ctab:active,
.ov-action:active,
.section-cell.cat-cell:active,
.recommend-card:active,
.user-card:active,
.msg-item:active,
.mtab:active{ transform:scale(.97); transition:transform .1s ease; }

/* 触控设备不需要 hover 态，避免 tap 后“粘住” */
@media (hover:hover) and (pointer:fine){
  .post-card:hover,
  .topic-item:hover{
    background:var(--card);
    box-shadow:0 8px 24px -12px rgba(17,24,39,.18);
  }
  .msg-item:hover{ background:#f9fafb; }
  .msg-item{ transition:background-color .2s var(--ease); }
}

@media (prefers-reduced-motion:reduce){
  .btn, .tab-item, .cat-tab, .ctab, .mtab, .mtab-ico,
  .ov-action, .post-card, .topic-item, .section-cell.cat-cell,
  .recommend-card, .user-card, .msg-item, .message-tab{
    transition:none !important;
    transform:none !important;
  }
}

/* --------------------------------------------------------------------------
   42.11 深色模式补充（新增组件）
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .notice, body.dark .notice{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.08);
  color:var(--ink);
}
html[data-theme="dark"] .tabs, body.dark .tabs{ background:rgba(255,255,255,.05); }
html[data-theme="dark"] .tab-item:has(.tab-text-active), body.dark .tab-item:has(.tab-text-active){
  background:rgba(255,255,255,.12);
  box-shadow:none;
}
html[data-theme="dark"] .message-tabs, body.dark .message-tabs{ background:rgba(255,255,255,.06); }
html[data-theme="dark"] .message-tab:has(.tab-label.is-active),
body.dark .message-tab:has(.tab-label.is-active){
  background:rgba(255,255,255,.14);
  color:var(--ink);
  box-shadow:none;
}
html[data-theme="dark"] .uc-services .ov-action, body.dark .uc-services .ov-action{
  background:rgba(255,255,255,.06);
}
html[data-theme="dark"] .mobile-tabbar, body.dark .mobile-tabbar{
  background:rgba(20,21,25,.72);
  box-shadow:0 8px 24px -12px rgba(0,0,0,.6);
}
html[data-theme="dark"] .sc-icon, html[data-theme="dark"] .chp-ico,
html[data-theme="dark"] .rc-icon,
body.dark .sc-icon, body.dark .chp-ico, body.dark .rc-icon{
  background:rgba(var(--red-rgb),.12);
  color:#ff6d8f;
}
@media (hover:hover) and (pointer:fine){
  html[data-theme="dark"] .msg-item:hover, body.dark .msg-item:hover{ background:rgba(255,255,255,.04); }
}

/* --------------------------------------------------------------------------
   骨架屏（Skeleton）—— 帖子列表 / 详情加载占位
   纯 CSS 脉冲动画，只动 opacity（符合动画规范：不动 width/height）
   -------------------------------------------------------------------------- */
@keyframes skel-pulse{
  0%{ opacity:.55; }
  50%{ opacity:1; }
  100%{ opacity:.55; }
}
.skel{ background:linear-gradient(90deg, rgba(24,24,27,.06) 25%, rgba(24,24,27,.11) 37%, rgba(24,24,27,.06) 63%);
  background-size:400% 100%; animation:skel-pulse 1.4s ease-in-out infinite; border-radius:var(--r-md);
  display:block; }
html[data-theme="dark"] .skel, body.dark .skel{
  background:linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.10) 37%, rgba(255,255,255,.05) 63%);
  background-size:400% 100%;
}
/* 帖子卡片骨架 */
.skel-post{ display:flex; gap:12px; padding:14px; border-radius:var(--r-lg); background:var(--card);
  border:1px solid var(--card-line); box-shadow:var(--sh-2); margin-bottom:10px; }
.skel-post .skel-avatar{ width:44px; height:44px; border-radius:var(--r-pill); flex-shrink:0; }
.skel-post .skel-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:9px; }
.skel-line{ height:12px; border-radius:var(--r-sm); }
.skel-line.lg{ height:15px; width:70%; }
.skel-line.md{ width:55%; }
.skel-line.sm{ width:40%; height:10px; }
/* 帖子详情骨架 */
.skel-detail{ padding:20px; border-radius:var(--r-lg); background:var(--card); border:1px solid var(--card-line); box-shadow:var(--sh-2); }
.skel-detail .skel-line{ height:18px; }
.skel-detail .skel-content-line{ height:14px; margin-top:8px; }
.skel-detail .skel-content-line.w90{ width:90%; }
.skel-detail .skel-content-line.w70{ width:70%; }
.skel-detail .skel-content-line.w80{ width:80%; }
/* 懒加载图片骨架占位：图片未加载完成前显示脉冲骨架，加载后由图片像素覆盖 */
.post-excerpt-img,
.topic-thumb img,
.topic-thumb video{
  background-color:rgba(24,24,27,.06);
  background-image:linear-gradient(90deg, rgba(24,24,27,.06) 25%, rgba(24,24,27,.11) 37%, rgba(24,24,27,.06) 63%);
  background-size:400% 100%;
  animation:skel-pulse 1.4s ease-in-out infinite;
}
html[data-theme="dark"] .post-excerpt-img, html[data-theme="dark"] .topic-thumb img, html[data-theme="dark"] .topic-thumb video,
body.dark .post-excerpt-img, body.dark .topic-thumb img, body.dark .topic-thumb video{
  background-color:rgba(255,255,255,.05);
  background-image:linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.10) 37%, rgba(255,255,255,.05) 63%);
}
/* 图片加载完成后移除骨架脉冲（由 app.js 在 load 时加 .is-loaded） */
.post-excerpt-img.is-loaded,
.topic-thumb img.is-loaded,
.topic-thumb video.is-loaded{
  background-image:none;
  animation:none;
}

/* --------------------------------------------------------------------------
   帖子标签系统（P3）
   -------------------------------------------------------------------------- */
/* 帖子详情页标签行 */
.topic-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:10px; }
/* 单个标签 */
.topic-tag{ display:inline-flex; align-items:center; gap:4px; padding:3px 11px; border-radius:var(--r-pill);
  font-size:12px; font-weight:600; color:var(--red-600); background:rgba(var(--red-rgb),.07);
  border:1px solid rgba(var(--red-rgb),.14); transition:color .15s, background-color .15s, border-color .15s; }
.topic-tag:hover{ color:#fff; background:var(--grad-red); border-color:transparent; }
.topic-tag::before{ content:'#'; opacity:.55; font-weight:500; }
/* 筛选栏里「当前生效」的标签 */
.topic-tag.is-current{ color:#fff; background:var(--grad-red); border-color:transparent; }
.topic-tag.is-current::before{ opacity:.75; }
/* 列表页帖子卡片上的标签组 */
.post-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:9px; }
.post-tags .topic-tag{ padding:2px 9px; font-size:11.5px; }
.topic-tag-more{ font-size:11.5px; font-weight:600; color:var(--g9); }
/* 标签筛选提示条 */
.tag-filter-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; padding:9px 14px; margin-bottom:12px;
  border-radius:var(--r-lg); background:var(--card); border:1px solid var(--card-line); box-shadow:var(--sh-2); }
.tag-filter-label{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--g9); }
.tag-filter-count{ font-size:12px; color:var(--g9); }
.tag-filter-clear{ margin-left:auto; font-size:12px; font-weight:600; color:var(--g6);
  padding:2px 10px; border-radius:var(--r-pill); background:rgba(24,24,27,.05); transition:color .15s, background-color .15s; }
.tag-filter-clear:hover{ color:var(--red); background:rgba(var(--red-rgb),.08); }
html[data-theme="dark"] .topic-tag, body.dark .topic-tag{ color:var(--red-400); background:rgba(var(--red-rgb),.14); border-color:rgba(var(--red-rgb),.26); }
html[data-theme="dark"] .topic-tag:hover, body.dark .topic-tag:hover{ color:#fff; }
html[data-theme="dark"] .tag-filter-clear, body.dark .tag-filter-clear{ background:rgba(255,255,255,.07); }

/* --------------------------------------------------------------------------
   热门标签云（P3）
   --------------------------------------------------------------------------
   仅首页默认视图（无分类 / 无搜索 / 无标签 / 第一页）展示。
   字号按使用次数线性映射，只用于视觉层级；点击直接跳到 ?tag=xxx 筛选。
   -------------------------------------------------------------------------- */
.tag-cloud{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 14px;
  padding:14px 16px; margin-bottom:12px;
  background:var(--card); border:1px solid var(--card-line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
}
.tag-cloud-head{
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.tag-cloud-bar{ width:4px; height:16px; border-radius:2px; background:var(--grad-red); }
.tag-cloud-title{ font-size:15px; font-weight:700; color:var(--ink); }
.tag-cloud-meta{ font-size:12px; color:var(--g9); }
.tag-cloud-list{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  flex:1 1 240px; min-width:0;
}
.tag-cloud-item{ gap:5px; }
/* 前 3 名：加一点品牌粉强度，形成热度层级 */
.tag-cloud-item.is-hot{
  color:var(--red-600); background:rgba(var(--red-rgb),.09); border-color:rgba(var(--red-rgb),.2);
}
.tag-cloud-count{
  font-size:10.5px; font-weight:600; color:var(--g9);
  padding:0 5px; border-radius:var(--r-pill); background:rgba(17,24,39,.04);
  line-height:16px;
}
.tag-cloud-item:hover .tag-cloud-count{ color:#fff; background:rgba(255,255,255,.22); }
@media (max-width:560px){
  .tag-cloud{ padding:12px; gap:10px; }
  .tag-cloud-title{ font-size:14px; }
  .tag-cloud-list{ flex-basis:100%; }
}
html[data-theme="dark"] .tag-cloud-item.is-hot,
body.dark .tag-cloud-item.is-hot{
  color:var(--red-400); background:rgba(var(--red-rgb),.16); border-color:rgba(var(--red-rgb),.3);
}
html[data-theme="dark"] .tag-cloud-count,
body.dark .tag-cloud-count{ background:rgba(255,255,255,.08); color:var(--g9); }
html[data-theme="dark"] .tag-cloud-item:hover .tag-cloud-count,
body.dark .tag-cloud-item:hover .tag-cloud-count{ background:rgba(255,255,255,.26); color:#fff; }

/* --------------------------------------------------------------------------
   草稿箱（P3）
   -------------------------------------------------------------------------- */
.draft-list{ list-style:none; margin:0; padding:0; }
.draft-item{
  display:flex; gap:14px; align-items:flex-start;
  padding:14px 16px; border-bottom:1px solid var(--line2);
  transition:background-color .18s var(--ease);
}
.draft-item:last-child{ border-bottom:0; }
.draft-item:hover{ background:rgba(17,24,39,.02); }
.draft-main{ flex:1 1 auto; min-width:0; }
.draft-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.draft-title{
  font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--ink);
  text-decoration:none; line-height:1.4;
}
.draft-title:hover{ color:var(--red); }
.flag-edit{ color:var(--info); background:rgba(21,101,192,.08); border:1px solid rgba(21,101,192,.18); }
.flag-auto{ color:var(--g6); background:rgba(17,24,39,.04); border:1px solid var(--line2); }
.flag-hidden{ color:var(--warning); background:rgba(184,106,0,.08); border:1px solid rgba(184,106,0,.2); }
.flag-media{ color:var(--g6); background:rgba(17,24,39,.04); border:1px solid var(--line2); }
.draft-meta{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:6px; }
.draft-excerpt{
  margin:7px 0 0; font-size:13px; line-height:1.6; color:var(--g6);
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.draft-tags-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:9px; }
.draft-tags-row .topic-tag{ padding:2px 9px; font-size:11.5px; }
.draft-foot{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:8px; }
.draft-actions{ display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
.btn-danger-ghost{ color:var(--danger); border-color:rgba(217,45,32,.2); }
.btn-danger-ghost:hover{ color:#fff; background:var(--danger); border-color:transparent; }
.inline-form{ display:inline; margin:0; }
.draft-hint{ margin-top:10px; font-size:12.5px; }
@media (max-width:760px){
  .draft-item{ flex-direction:column; }
  .draft-actions{ flex-direction:row; flex-wrap:wrap; width:100%; }
  .draft-actions .btn{ flex:1 1 auto; justify-content:center; }
}
html[data-theme="dark"] .flag-edit, body.dark .flag-edit{ color:var(--info); background:rgba(21,101,192,.22); border-color:rgba(21,101,192,.34); }
html[data-theme="dark"] .flag-hidden, body.dark .flag-hidden{ color:var(--warning); background:rgba(184,106,0,.18); border-color:rgba(184,106,0,.3); }
html[data-theme="dark"] .draft-item:hover, body.dark .draft-item:hover{ background:rgba(255,255,255,.03); }

/* --------------------------------------------------------------------------
   35. 帖子投票（poll）：发帖编辑器 + 帖子详情展示
   -------------------------------------------------------------------------- */

/* ---------- 发帖页：投票编辑器 ---------- */
.poll-editor{ padding:14px; border-radius:var(--r-lg); background:rgba(24,24,27,.02);
  border:1px solid var(--line2); }
html[data-theme="dark"] .poll-editor, body.dark .poll-editor{ background:rgba(255,255,255,.03); }
.poll-editor-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.poll-editor-head .form-label{ display:inline-flex; align-items:center; gap:6px; }
.poll-editor-head .form-label svg{ color:var(--red); }

/* 开关：只动 transform 与 background，不动宽高 */
.poll-switch{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none; }
.poll-switch input{ position:absolute; opacity:0; width:0; height:0; }
.poll-switch-track{ position:relative; width:38px; height:22px; border-radius:11px;
  background:rgba(24,24,27,.14); transition:background .2s var(--ease); flex-shrink:0; }
.poll-switch-dot{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.22); transition:transform .2s var(--ease); }
.poll-switch input:checked + .poll-switch-track{ background:var(--red); }
.poll-switch input:checked + .poll-switch-track .poll-switch-dot{ transform:translateX(16px); }
.poll-switch input:focus-visible + .poll-switch-track{ box-shadow:0 0 0 3px rgba(var(--red-rgb),.18); }
.poll-switch-text{ font-size:12.5px; color:var(--g7); font-weight:600; }
html[data-theme="dark"] .poll-switch-track, body.dark .poll-switch-track{ background:rgba(255,255,255,.18); }

.poll-editor-body{ margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.poll-options{ display:flex; flex-direction:column; gap:8px; }
.poll-option-row{ display:flex; align-items:center; gap:8px; }
.poll-option-no{ width:20px; flex-shrink:0; text-align:center; font-size:12px; font-weight:700;
  color:var(--g9); font-variant-numeric:tabular-nums; }
.poll-option-row .form-control{ flex:1; min-width:0; }
.poll-option-del{ flex-shrink:0; width:28px; height:28px; border-radius:8px; display:inline-flex;
  align-items:center; justify-content:center; color:var(--g9); background:transparent;
  border:1px solid var(--line2); transition:color .16s, background .16s, border-color .16s; }
.poll-option-del:hover{ color:var(--danger); background:rgba(217,45,32,.08); border-color:rgba(217,45,32,.24); }
.poll-add-option{ align-self:flex-start; }
.poll-editor-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding-top:8px; border-top:1px dashed var(--line2); }
.poll-check{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--g7);
  cursor:pointer; user-select:none; }
.poll-check input{ width:15px; height:15px; accent-color:var(--red); cursor:pointer; }
.poll-inline-field{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--g7); }
.poll-inline-field .form-control{ padding:5px 8px; font-size:12.5px; text-align:center; }

/* ---------- 帖子详情：投票展示 ---------- */
.poll-card{ margin:16px 0; padding:16px; border-radius:var(--r-lg); background:var(--card);
  border:1px solid var(--card-line); box-shadow:var(--sh-2); }
.poll-head{ display:flex; align-items:flex-start; gap:9px; }
.poll-head-icon{ flex-shrink:0; width:28px; height:28px; border-radius:9px; display:flex;
  align-items:center; justify-content:center; color:#fff; background:var(--grad-red); }
.poll-question{ flex:1; min-width:0; font-size:15px; font-weight:700; color:var(--g6); line-height:1.5; }
.poll-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:7px;
  font-size:11.5px; color:var(--g9); }
.poll-meta-tag{ padding:2px 8px; border-radius:var(--r-pill); background:rgba(24,24,27,.05);
  font-weight:600; }
.poll-meta-closed{ color:var(--danger); background:rgba(217,45,32,.09); }
html[data-theme="dark"] .poll-meta-tag, body.dark .poll-meta-tag{ background:rgba(255,255,255,.08); }

/* 选项：一条一条排，投票后用填充条表示比例 */
.poll-list{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.poll-item{ position:relative; display:block; width:100%; text-align:left; padding:11px 14px;
  border-radius:12px; border:1px solid var(--line2); background:rgba(24,24,27,.02);
  cursor:pointer; overflow:hidden; transition:border-color .16s var(--ease), background .16s var(--ease); }
.poll-item:hover{ border-color:rgba(var(--red-rgb),.32); background:rgba(var(--red-rgb),.03); }
html[data-theme="dark"] .poll-item, body.dark .poll-item{ background:rgba(255,255,255,.04); }
.poll-item.is-mine{ border-color:rgba(var(--red-rgb),.55); background:rgba(var(--red-rgb),.05); }
.poll-item.is-closed{ cursor:default; }
.poll-item.is-closed:hover{ border-color:var(--line2); background:rgba(24,24,27,.02); }
html[data-theme="dark"] .poll-item.is-closed:hover, body.dark .poll-item.is-closed:hover{ background:rgba(255,255,255,.04); }

/* 比例填充：宽度用 CSS 变量，不改元素宽高，避免重排抖动 */
.poll-fill{ position:absolute; inset:0 auto 0 0; width:var(--poll-pct,0%);
  background:linear-gradient(90deg,rgba(var(--red-rgb),.16),rgba(var(--red-rgb),.07));
  transition:width .5s var(--ease); pointer-events:none; }
.poll-item.is-mine .poll-fill{ background:linear-gradient(90deg,rgba(var(--red-rgb),.26),rgba(var(--red-rgb),.1)); }
.poll-item-row{ position:relative; display:flex; align-items:center; gap:10px; }
.poll-radio{ flex-shrink:0; width:17px; height:17px; border-radius:50%; border:2px solid rgba(24,24,27,.2);
  display:flex; align-items:center; justify-content:center; transition:border-color .16s, background .16s; }
.poll-radio.is-box{ border-radius:5px; }
.poll-item.is-mine .poll-radio{ border-color:var(--red); background:var(--red); }
.poll-item.is-mine .poll-radio::after{ content:""; width:6px; height:6px; border-radius:50%; background:#fff; }
.poll-item.is-mine .poll-radio.is-box::after{ width:9px; height:5px; border-radius:0;
  border-left:2px solid #fff; border-bottom:2px solid #fff; background:none;
  transform:rotate(-45deg) translate(1px,-1px); }
html[data-theme="dark"] .poll-radio, body.dark .poll-radio{ border-color:rgba(255,255,255,.28); }
.poll-label{ flex:1; min-width:0; font-size:13.5px; color:var(--g6); line-height:1.5;
  word-break:break-word; }
.poll-item.is-mine .poll-label{ font-weight:600; }
.poll-pct{ flex-shrink:0; font-size:12.5px; font-weight:700; color:var(--g7);
  font-variant-numeric:tabular-nums; }
.poll-item.is-mine .poll-pct{ color:var(--red); }
.poll-votes{ flex-shrink:0; min-width:38px; text-align:right; font-size:11.5px; color:var(--g9);
  font-variant-numeric:tabular-nums; }

.poll-foot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px;
  padding-top:12px; border-top:1px solid var(--line2); }
.poll-foot-info{ font-size:12px; color:var(--g9); }
.poll-foot-info strong{ color:var(--g7); font-variant-numeric:tabular-nums; }
.poll-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.poll-hint{ font-size:12px; color:var(--g9); }
.poll-hint.is-error{ color:var(--danger); }
.poll-voted-badge{ display:inline-flex; align-items:center; gap:4px; padding:2px 9px;
  border-radius:var(--r-pill); font-size:11.5px; font-weight:600;
  color:var(--red); background:rgba(var(--red-rgb),.1); }

@media (max-width:560px){
  .poll-card{ padding:13px; }
  .poll-question{ font-size:14px; }
  .poll-item{ padding:10px 12px; }
  .poll-label{ font-size:13px; }
  .poll-votes{ display:none; }
  .poll-editor{ padding:12px; }
  .poll-editor-row{ gap:12px; }
}

/* ---------- 发帖页：本地草稿恢复提示 ---------- */
.draft-restore{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:14px; padding:11px 14px;
  border:1.5px solid var(--line); border-left:3px solid var(--red-600);
  border-radius:var(--r-md); background:var(--f0);
  font-size:13px; color:var(--g5);
}
.draft-restore-text{ flex:1; min-width:140px; }
.draft-restore-btn{
  flex:0 0 auto; padding:5px 12px; border:1.5px solid var(--line);
  border-radius:999px; background:var(--card); color:var(--g5);
  font-size:12.5px; font-weight:600; cursor:pointer;
  transition:all .14s ease;
}
.draft-restore-btn:hover{ border-color:var(--g4); color:var(--g6); }
.draft-restore-btn.primary{
  border-color:transparent; background:var(--red-600); color:#fff;
}
.draft-restore-btn.primary:hover{ filter:brightness(1.06); }
html[data-theme="dark"] .draft-restore,
body.dark .draft-restore{ background:rgba(255,255,255,.04); }

/* ---------- 独立搜索页 ---------- */
.search-page{ max-width:860px; margin:0 auto; }

.search-box-card{ padding:16px 18px; margin-bottom:14px; }
.search-form{ margin:0; }
.search-input-wrap{
  display:flex; align-items:center; gap:8px;
  border:1.5px solid var(--line); border-radius:999px;
  background:var(--f0); padding:4px 4px 4px 14px;
  transition:border-color .16s ease;
}
.search-input-wrap:focus-within{ border-color:var(--red-600); }
.search-input-icon{ display:flex; color:var(--g4); flex:0 0 auto; }
.search-input{
  flex:1; min-width:0; border:0; background:transparent; outline:none;
  font-size:14.5px; color:var(--g6); padding:8px 0;
}
.search-input::-webkit-search-cancel-button{ display:none; }
.search-clear{
  flex:0 0 auto; width:24px; height:24px; line-height:22px; text-align:center;
  border-radius:50%; color:var(--g4); font-size:17px; text-decoration:none;
}
.search-clear:hover{ background:var(--line); color:var(--g6); }
.search-submit{ flex:0 0 auto; border-radius:999px; padding:8px 20px; }

.search-tabs{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:14px; padding-top:13px; border-top:1px solid var(--line);
}
.search-tab{
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 13px; border-radius:999px;
  font-size:13px; font-weight:600; color:var(--g4); text-decoration:none;
  transition:all .14s ease;
}
.search-tab:hover{ background:var(--f0); color:var(--g5); }
.search-tab.active{ background:var(--red-600); color:#fff; }
.search-tab-num{
  font-size:11.5px; font-weight:500; opacity:.75;
  padding:0 5px; border-radius:999px; background:rgba(0,0,0,.08);
}
.search-tab.active .search-tab-num{ background:rgba(255,255,255,.22); }
.search-sorts{ margin-left:auto; display:flex; gap:4px; }
.search-sort{
  padding:5px 11px; border-radius:999px; font-size:12.5px;
  color:var(--g4); text-decoration:none; transition:all .14s ease;
}
.search-sort:hover{ color:var(--g5); background:var(--f0); }
.search-sort.active{ color:var(--red-600); font-weight:600; background:var(--red-50, #fff1f4); }

.search-hit{ background:rgba(255,196,0,.32); color:inherit; padding:0 1px; border-radius:2px; }

.search-result-list{ display:flex; flex-direction:column; }
.search-result{
  display:flex; gap:14px; padding:16px 18px;
  border-bottom:1px solid var(--line);
}
.search-result:last-child{ border-bottom:0; }
.search-result-thumb{
  flex:0 0 84px; width:84px; height:84px; border-radius:var(--r-md);
  overflow:hidden; background:var(--f0); display:block;
}
.search-result-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.search-result-main{ flex:1; min-width:0; }
.search-result-title{
  display:block; font-size:15px; font-weight:600; line-height:1.5;
  color:var(--g6); text-decoration:none; margin-bottom:5px;
}
.search-result-title:hover{ color:var(--red-600); }
.search-result-snippet{
  margin:0 0 8px; font-size:13px; line-height:1.65; color:var(--g4);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.search-result-meta{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  font-size:12px; color:var(--g3);
}
.search-meta-item{ display:inline-flex; align-items:center; gap:3px; }

.search-user-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:2px; padding:6px;
}
.search-user{
  display:flex; align-items:center; gap:11px; padding:11px 12px;
  border-radius:var(--r-md); text-decoration:none; color:inherit;
  transition:background .14s ease;
}
.search-user:hover{ background:var(--f0); }
.search-user-info{ min-width:0; }
.search-user-name{
  display:flex; align-items:center; gap:5px;
  font-size:14px; font-weight:600; color:var(--g6);
}
.search-user-sub{ font-size:12px; color:var(--g3); margin-top:2px; }

.search-tag-cloud{ display:flex; flex-wrap:wrap; gap:9px; padding:18px; }
.search-tag{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border:1.5px solid var(--line); border-radius:999px;
  font-size:13.5px; font-weight:600; color:var(--g5); text-decoration:none;
  transition:all .14s ease;
}
.search-tag:hover{ border-color:var(--red-600); color:var(--red-600); }
.search-tag-n{
  font-size:11.5px; font-weight:500; color:var(--g3);
  padding:0 6px; border-radius:999px; background:var(--f0);
}

.search-cat-list{ display:flex; flex-direction:column; }
.search-cat{
  display:flex; align-items:center; gap:12px; padding:14px 18px;
  border-bottom:1px solid var(--line); text-decoration:none; color:inherit;
  transition:background .14s ease;
}
.search-cat:last-child{ border-bottom:0; }
.search-cat:hover{ background:var(--f0); }
.search-cat-icon{ display:flex; color:var(--red-600); flex:0 0 auto; }
.search-cat-main{ flex:1; min-width:0; }
.search-cat-name{ display:block; font-size:14.5px; font-weight:600; color:var(--g6); }
.search-cat-desc{ display:block; font-size:12.5px; color:var(--g3); margin-top:3px; }
.search-cat-n{ flex:0 0 auto; font-size:12px; color:var(--g3); }

@media (max-width: 640px){
  .search-result{ padding:14px; gap:11px; }
  .search-result-thumb{ flex:0 0 64px; width:64px; height:64px; }
  .search-sorts{ margin-left:0; width:100%; margin-top:6px; }
  .search-user-grid{ grid-template-columns:1fr; }
}

/* ---------------------------- 相关推荐 ---------------------------- */
.related-list{ list-style:none; margin:0; padding:0; }
.related-item{ border-bottom:1px solid var(--line); }
.related-item:last-child{ border-bottom:0; }
.related-link{
  display:flex; gap:14px; align-items:flex-start;
  padding:14px 18px; text-decoration:none; color:inherit;
  transition:background .14s ease;
}
.related-link:hover{ background:var(--f0); }
.related-thumb{
  flex:0 0 80px; width:80px; height:80px; border-radius:var(--r-md);
  overflow:hidden; background:var(--f0);
}
.related-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.related-body{ flex:1; min-width:0; }
.related-title{
  font-size:14.5px; font-weight:600; color:var(--g6);
  line-height:1.45;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.related-excerpt{
  font-size:12.5px; color:var(--g3); margin-top:5px;
  line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.related-meta{
  display:flex; gap:12px; align-items:center;
  margin-top:8px; font-size:12px; color:var(--g3);
}
.related-meta span{ display:inline-flex; align-items:center; gap:3px; }
.related-meta .icon{ color:var(--g3); }

@media (max-width: 640px){
  .related-link{ padding:12px 14px; gap:12px; }
  .related-thumb{ flex:0 0 64px; width:64px; height:64px; }
  .related-title{ font-size:14px; }
  .related-excerpt{ font-size:12px; -webkit-line-clamp:1; }
  .related-meta{ gap:10px; margin-top:6px; }
}

/* ==========================================================================
   43. PC 端排版精修（2026-10-29）
   --------------------------------------------------------------------------
   目标：三栏更宽更透气、顶栏从「浮起的玻璃胶囊」改为「通栏白底」、
        帖子卡的标题/摘要/留白拉开层级、Tabs 去掉灰底块改下划线。
   约束：只做样式覆盖，不改任何 DOM、类名、数据与业务逻辑。
        所有选择器都限定在已有的结构类上，不新增标记。
   回滚：删除本段即可回到 42 节的样子。
   ========================================================================== */

/* --------------------------------------------------------------------------
   43.1 概览尺度
   - 容器 1180 → 1320，左右留白加大
   - 三栏 240/1fr/300 → 200/1fr/300（左栏收窄，中间更宽）
   - 吸顶位置 90 → 80（顶栏变高 64，正好留 16 的呼吸）
   - 圆角 16/12 → 12/8，符合「卡片 8~12px」
   -------------------------------------------------------------------------- */
:root{
  /* 不要复用 --topbar-h：那个变量归后台所有，variables.css 在 site.css 之后
     加载且同为 :root，会把这里的值冲掉（实测一直是 56）。前台另起一个名字。 */
  --site-topbar-h: 64px;
  --stick-top: 80px;
  --pc-max: 1320px;
  --pc-gap: 20px;
  --r-lg: 12px;
  --r-md: 8px;
}

.pc-shell{
  max-width: var(--pc-max);
  grid-template-columns: 200px minmax(0,1fr) 300px;
  gap: var(--pc-gap);
  padding: 28px 20px 56px;
  align-items: start;
}
/* 帖子详情 / 个人主页 / 设置这类两栏页面：左栏同样收到 200
   （原规则 .pc-shell.is-narrow 特异性更高，必须用同样的选择器覆盖） */
.pc-shell.is-narrow{ grid-template-columns: 200px minmax(0,1fr); }
/* 1025~1200：左栏再收一点，避免中间被挤 */
@media (max-width: 1200px) and (min-width: 1025px){
  .pc-shell{ grid-template-columns: 180px minmax(0,1fr) 280px; gap: 16px; padding: 20px 16px 48px; }
}

/* --------------------------------------------------------------------------
   43.2 顶栏：取消玻璃胶囊，改纯白通栏 + 底部 1px 分割线
   - 不再悬浮（去掉 top:10 / margin-top:10 与阴影），直接贴在页面顶端
   - 高度 64，内容宽度与 .pc-shell 一致（1320），保证左右与内容区对齐
   -------------------------------------------------------------------------- */
.topbar{
  top: 0;
  margin-top: 0;
  padding: 0;
  background: #fff;
  border-bottom: 1px solid #eef0f3;
}
.topbar-inner{
  max-width: var(--pc-max);
  height: var(--site-topbar-h);
  padding: 0 20px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme="dark"] .topbar-inner,
body.dark .topbar-inner{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
html[data-theme="dark"] .topbar,
body.dark .topbar{ background: #18181b; border-bottom-color: rgba(255,255,255,.08); }

/* 搜索框 / 发帖 / 头像的间距收一点，视觉上更成一组 */
.topbar-actions{ gap: 8px; }
.topbar-actions > .btn,
.topbar-actions > .icon-btn{ flex-shrink: 0; }

/* --------------------------------------------------------------------------
   43.3 Tabs：去掉灰底块，改成「下划线切换」
   —— 结构里本来就有 .tab-line（此前被 display:none 关掉），这里改用 ::after
      画下划线，不再依赖那个多余节点。
   -------------------------------------------------------------------------- */
.tabs{
  gap: 2px;
  padding: 0;
  margin-bottom: 18px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line2);
  border-radius: 0;
  overflow-x: auto;
}
.tab-item{
  flex: none;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--g6);
}
.tab-item:hover{ color: var(--ink); background: transparent; }
.tab-item:active{ transform: none; }
.tab-item:has(.tab-text-active){
  background: transparent;
  box-shadow: none;
  color: var(--red);
  font-weight: 600;
}
.tab-item:has(.tab-text-active)::after{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--red);
}
.tab-item .tab-text-active{ color: var(--red); }

/* --------------------------------------------------------------------------
   43.4 帖子卡：标题加重、摘要变大变松、底部操作弱化
   - 卡内边距 16 → 24，卡间距 12 → 16
   - 标题 16/600 → 18/700；摘要 13.5/1.7 → 14/1.6
   - 标题→摘要→标签→图片→底部 统一 12~16 的留白
   - 标签与底部统计压到 12px 浅灰，和正文拉开层级
   -------------------------------------------------------------------------- */
.post-list{ gap: 16px; }
.post-list .post-card,
.post-card{
  padding: 24px;
  border-radius: var(--r-lg);
}
.post-card-head{ gap: 10px; }
.post-title{
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  margin-top: 14px;
}
.post-content{
  font-size: 14px;
  line-height: 1.6;
  color: var(--g6);
  margin-top: 10px;
}
.post-tags{ margin-top: 12px; gap: 6px; }
.topic-tag{ font-size: 12px; padding: 2px 9px; }
.topic-thumb-more{ font-size: 12px; }

/* 多图：间距 6 → 8，圆角 12 → 8 */
.topic-thumbs{ gap: 8px; margin-top: 14px; }
.topic-thumb{ border-radius: var(--r-md); }
.post-excerpt-img{ border-radius: var(--r-md); margin-top: 14px; }

/* 底部：分割线之上留白加大，统计整体降到 12px 浅灰 */
.post-foot{
  margin-top: 16px;
  padding-top: 12px;
  font-size: 12px;
  color: var(--g9);
}
.post-foot .foot-icon{ font-size: 12px; color: var(--g9); }
.post-foot .foot-icon svg{ width: 13px; height: 13px; }
.post-foot .section-tag{ font-size: 12px; padding: 2px 9px; }
.post-foot .flag{ font-size: 11.5px; }

/* --------------------------------------------------------------------------
   43.5 左侧栏：分组标题留白 + 导航项缩进 8px、圆角 8px、选中浅蓝
   —— 「不要顶满侧边栏」= 左右各留 8px，用 margin 实现，不改容器 padding
   -------------------------------------------------------------------------- */
.pc-sidebar{ gap: 0; }
.rail-card{ background: transparent; border: 0; box-shadow: none; }
.rail-card h4{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--g9);
  padding: 0 18px;
  margin: 18px 0 6px;
}
/* 三栏顶部对齐：各自第一个分组标题都不带上边距 */
.pc-sidebar .rail-card:first-child h4,
.pc-rail .rail-card:first-child h4{ margin-top: 0; }

/* 用 :not 排除「本周热门」那种两行条目，否则 height:36 会把两行压扁 */
.rail-link:not(.rail-link-top){
  height: 36px;
  margin: 0 8px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: var(--g7);
}
.rail-link-top{
  height: auto;
  margin: 0 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  gap: 1px;
}
.rail-top-title{ font-size: 13px; line-height: 1.45; }
.rail-top-views{ font-size: 11px; color: var(--g6); }
.rail-link:hover{ background: var(--f7); color: var(--ink); }
.rail-link.is-active{
  background: rgba(var(--red-rgb), .08);
  color: var(--red);
  font-weight: 600;
}
/* 取消选中项右侧那个小胶囊点，浅蓝底已经足够表达 */
.rail-link.is-active::after{ display: none; }

/* --------------------------------------------------------------------------
   43.6 右侧栏 · 站点数据：去掉独立卡片感，只留数字与标签
   —— 无背景、无描边、无圆角；数字加大加粗，标签缩小
   -------------------------------------------------------------------------- */
.pc-rail .rail-stats{ gap: 0; padding: 0; }
.pc-rail .rail-stats > div{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 6px 0;
}
.pc-rail .rail-stats strong{
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.3px;
  line-height: 1.2;
}
.pc-rail .rail-stats span{
  font-size: 11px;
  margin-top: 3px;
  color: var(--g9);
}
html[data-theme="dark"] .pc-rail .rail-stats > div,
body.dark .pc-rail .rail-stats > div{ background: transparent; border: 0; }

/* --------------------------------------------------------------------------
   43.7 右侧栏 · 快捷入口：竖排列表改 2 列网格 + 浅底块
   —— 这个 rail-card 里是「h4 + 若干个 a.rail-link」的平铺结构，
      没有额外容器，所以直接把卡片本身变成 grid，让 h4 横跨整行。
   -------------------------------------------------------------------------- */
.pc-rail .rail-card:last-child{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 8px;
}
.pc-rail .rail-card:last-child h4{
  grid-column: 1 / -1;
  padding: 0 10px;
  margin-bottom: 0;
}
.pc-rail .rail-card:last-child .rail-link{
  height: 34px;
  margin: 0;
  padding: 0 8px;
  justify-content: center;
  background: var(--f7);
  border: 1px solid var(--line2);
  border-radius: var(--r-sm);
  font-size: 13px;
  text-align: center;
}
.pc-rail .rail-card:last-child .rail-link:hover{
  background: #fff;
  border-color: var(--gcc);
  color: var(--ink);
}
html[data-theme="dark"] .pc-rail .rail-card:last-child .rail-link,
body.dark .pc-rail .rail-card:last-child .rail-link{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}

/* 43.8 窄屏回退：顶栏恢复 52（PC 的 64 在小屏太占地方），三栏已由原规则转单列 */
@media (max-width: 820px){
  .topbar-inner{ height: 52px; padding: 0 14px; }
}