/**
 * 前台公共样式（首页「三栏社区工作台」及后续前台页面复用）
 * 设计基准：docs/forum-home-f-workbench.html
 *
 * 加载顺序：tabler-icons → statics/vender/pg/pg-ui.css → 本文件
 * 本文件在 pg-ui 之后加载，负责把站点变量桥接给 pg-ui 并覆盖到前台视觉。
 */

/* ============================ 主题变量 ============================ */
:root{
    --primary:#0f9d8f; --primary-dark:#0b7f74; --primary-light:#e4f4f1; --primary-rgb:15,157,143;
    --bg:#f3f6f8; --card:#fff; --border:#e5ebf0; --border-soft:#eef2f6;
    --text:#1d2730; --text-2:#5d6b7a; --text-3:#93a1af;
    --danger:#ef4444; --warn:#f59e0b; --success:#10b981; --info:#3b82f6;
    --radius:10px; --shadow:0 1px 2px rgba(16,32,48,.05);
}
[data-theme="dark"]{
    --primary:#2cc7b5; --primary-dark:#5adacc; --primary-light:#0f2b28; --primary-rgb:44,199,181;
    --bg:#131920; --card:#1a222b; --border:#28323d; --border-soft:#202932;
    --text:#e5ecf2; --text-2:#9dabb9; --text-3:#6b7987;
    --shadow:0 1px 2px rgba(0,0,0,.35);
}

/* pg-ui 组件继承站点配色（首页自身不使用 pg 组件，仅为后续页面统一）
 * ⚠️ 桥接要「够全」：第三方组件（如 statics/vender/markdown/markdown.css）是靠 --pg-ui-* 取色的，
 *    少桥接一个就有一个控件在暗色下漏出浅底色（v1.9.5 踩过：编辑器工具栏/弹窗全白）。
 *    新增组件若用到新的 pg-ui 语义色，记得回来补。 */
:root{
    --pg-ui-primary:var(--primary);
    --pg-ui-primary-rgb:var(--primary-rgb);
    --pg-ui-link-color:var(--primary);
    --pg-ui-link-hover-color:var(--primary-dark);
    --pg-ui-body-bg:var(--bg);
    /* 内容层底色走「卡片」而不是页面底色：markdown 编辑器的输入区、全屏编辑、图片/视频弹窗、
     * 附件卡等在亮主题下应是白卡片底（#fff），否则会用 --bg 的灰页底（#f3f6f8）糊成一片。 */
    --pg-ui-content-bg:var(--card);
    --pg-ui-body-color:var(--text);
    --pg-ui-emphasis-color:var(--text);
    --pg-ui-secondary-color:var(--text-2);
    --pg-ui-tertiary-color:var(--text-3);
    --pg-ui-secondary-bg:var(--border-soft);
    --pg-ui-tertiary-bg:var(--bg);
    --pg-ui-border-color:var(--border);
    --pg-ui-border-radius:var(--radius);
    --pg-ui-box-shadow:var(--shadow);
}

/* ============================ 基础 ============================ */
*{box-sizing:border-box}
/* 页脚贴底：帖子短到撑不满一屏时，.foot 也得待在视口底部，而不是跟着内容停在半截。
   用 flex 列而不是给正文写 calc(100vh - 顶栏 - 页脚)：那三个高度都会随主题/字号变，
   写死的数只要有一项不准，页脚就又回到半截位置。
   dvh 那行是给手机动态工具栏的；不认 dvh 的浏览器整条丢掉，自动退回上一行的 vh。 */
body{margin:0;background:var(--bg);color:var(--text);display:flex;flex-direction:column;
    min-height:100vh;min-height:100dvh;
    font:14px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
    transition:background .2s,color .2s}
/* 只有正文这一格吃满剩余高度；底栏与手机底部导航的占位块保持自身高度 */
#pgHomeContent{flex:1 0 auto}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1280px;margin:0 auto;padding:0 18px}
.subtle{color:var(--text-3);font-size:12px}

/* ============================ 顶栏 ============================ */
.topbar{background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:60}
.topbar-in{display:flex;align-items:center;gap:14px;height:56px}
.logo{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;color:var(--primary);white-space:nowrap}
.logo i{font-size:22px}
.nav{display:flex;gap:2px}
/* 顶栏菜单项可以带图标（后台「顶部导航」逐行挑，留空就只画文字）：
   图标比字略小一点，靠 flex 居中，不让它把 .nav a 的行高顶起来 */
.nav a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:7px;color:var(--text-2);font-size:14px}
.nav a i{font-size:15px;line-height:1}
.nav a:hover{background:var(--primary-light);color:var(--primary)}
.nav a.on{background:var(--primary);color:#fff}
.spacer{flex:1}
.search{position:relative;flex:0 1 230px}
.search input{width:100%;height:34px;padding:0 32px 0 12px;border:1px solid var(--border);border-radius:8px;
    background:var(--bg);color:var(--text);outline:none;font-size:13px;font-family:inherit}
.search input:focus{border-color:var(--primary);background:var(--card)}
/* 放大镜从装饰 <i> 换成真 submit 按钮（点了要能搜，原来只能敲回车）。
   按钮落在 input 的 32px 右内边距里，不压文字；图标是静态子节点，由按钮 flex 居中。 */
.search-go{position:absolute;right:4px;top:5px;width:26px;height:24px;padding:0;border:0;border-radius:6px;
    background:transparent;color:var(--text-3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.search-go:hover{color:var(--primary)}
.icon-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:var(--card);
    color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:17px}
.icon-btn:hover{color:var(--primary);border-color:var(--primary)}
.sign-btn{height:34px;padding:0 16px;border-radius:8px;border:0;background:linear-gradient(120deg,var(--primary),var(--primary-dark));
    color:#fff;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
/* 必须显式写 color：pg-ui.css 的 a:hover{color:#0a58ca} 权重(0,1,1)高于 .sign-btn(0,1,0)，
   不覆盖的话白字按钮 hover 会被染蓝（v1.6.4） */
.sign-btn:hover{filter:brightness(1.08);color:#fff}
.btn-line{height:34px;padding:0 14px;border-radius:8px;border:1px solid var(--border);background:var(--card);
    color:var(--text-2);font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.btn-line:hover{color:var(--primary);border-color:var(--primary)}
.me{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#0f9d8f,#155e75);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex:0 0 auto;cursor:pointer;
    border:0;font-family:inherit;padding:0}
.me-wrap{position:relative}
.me-menu{position:absolute;right:0;top:42px;min-width:170px;background:var(--card);border:1px solid var(--border);
    border-radius:10px;box-shadow:0 8px 28px rgba(16,32,48,.14);overflow:hidden;z-index:70}
.me-menu-hd{padding:11px 14px;border-bottom:1px solid var(--border-soft);line-height:1.4}
.me-menu-hd b{display:block;font-size:14px;color:var(--text);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-menu-hd small{font-size:12px;color:var(--text-3)}
.me-menu a{display:flex;align-items:center;gap:8px;padding:9px 14px;color:var(--text-2);font-size:13.5px}
.me-menu a:hover{background:var(--primary-light);color:var(--primary)}
.me-menu-out:hover{color:#ef4444}
/* 通知面板（v1.9.79 接上 bbs_notice）：结构与头像下拉一致，复用 .me-menu 外观
   v2.0.7 改单行紧凑版式：一条一行 32px，「标题：摘要」左截断 + 相对时间右靠。
   窄屏（≤560）不在这儿收窄，见本文件末尾那段媒体查询把面板改成整条视口宽的浮层 */
.notice-menu{width:360px;padding:2px 0 4px}
.notice-hd{padding:8px 12px;font-size:12px;font-weight:700;color:var(--text-3);letter-spacing:1px;
    border-bottom:1px solid var(--border-soft);display:flex;align-items:baseline}
.notice-hd-num{margin-left:auto;font-size:11px;font-weight:600;color:var(--primary);letter-spacing:0}
.notice-empty{padding:22px 18px;text-align:center;color:var(--text-3)}
.notice-empty i.ti{font-size:26px;display:block;margin:0 auto 8px;color:var(--border)}
.notice-empty b{display:block;font-size:13.5px;color:var(--text-2);font-weight:600}
.notice-empty small{display:block;margin-top:5px;font-size:12px;line-height:1.6}
/* 铃铛未读角标：贴在按钮右上角，描边用面板底色，深色主题下不会变成一圈白边 */
.notice-wrap .icon-btn{position:relative}
.notice-dot{position:absolute;top:-6px;right:-7px;min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;
    border-radius:9px;border:2px solid var(--card);background:#ef4444;color:#fff;
    font-size:10.5px;font-weight:700;line-height:13px;text-align:center;font-variant-numeric:tabular-nums}
.notice-dot.is-many{min-width:27px;border-radius:9px}
/* 面板里的通知条目是一行一条，必须整组覆盖 .me-menu a 的默认排版；
   选择器一律带 .me-menu 前缀（权重 0,2,1）才压得住库与公共规则 */
.me-menu a.notice-i{flex-direction:row;align-items:center;gap:8px;height:32px;padding:0 12px 0 18px;
    color:var(--text-2);position:relative}
.me-menu a.notice-i:hover{background:var(--border-soft);color:var(--text-2)}
.notice-i.is-unread:before{content:"";position:absolute;left:7px;top:50%;transform:translateY(-50%);
    width:5px;height:5px;border-radius:50%;background:var(--primary)}
/* 单行截断：溢出交给 text-overflow，不许换行把面板撑高 */
.notice-t{flex:1;min-width:0;font-size:12px;font-weight:400;line-height:1.3;color:var(--text-2);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notice-i.is-unread .notice-t{font-weight:600;color:var(--text)}
.notice-m{flex:0 0 auto;font-size:11px;line-height:1.3;color:var(--text-3)}
.me-menu a.notice-ft{justify-content:center;margin:2px;padding:7px 0;border-radius:0;background:none;
    border-top:1px solid var(--border-soft);color:var(--text-3);font-size:11.5px;font-weight:500}
.me-menu a.notice-ft:hover{background:var(--border-soft);color:var(--primary);filter:none}
/* 搜索图标与游客头像只在手机端出现，桌面端用整只搜索框和文字按钮 */
.search-btn{display:none}
.guest-btn{display:none}
/* 后台入口（仅管理组可见）：主题色高亮，并作为与「退出登录」之间的分隔线
   注意选择器要带 .me-menu 前缀——`.me-menu a` 权重(0,1,1) 高于单类名 .me-menu-admin(0,1,0) */
.me-menu a.me-menu-admin{color:var(--primary);font-weight:600;border-top:1px solid var(--border-soft)}
.me-menu a.me-menu-admin:hover{background:var(--primary-light);color:var(--primary)}
.me-menu a.me-menu-admin .me-menu-ext{margin-left:auto;font-size:13px;opacity:.55}

/* ============================ 公告滚动 ============================ */
.annbar{margin:16px 0 0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    display:flex;align-items:center;padding:9px 14px;gap:10px;box-shadow:var(--shadow)}
.ann-badge{flex:0 0 auto;background:var(--primary-light);color:var(--primary);font-size:12px;font-weight:600;
    padding:2px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:5px}
.ann-win{flex:1;height:22px;overflow:hidden;position:relative}
.ann-inner{position:absolute;left:0;right:0;top:0;transition:transform .45s ease}
.ann-item{height:22px;line-height:22px;font-size:13px;color:var(--text-2);overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;display:block}
.ann-item:hover{color:var(--primary)}

/* ============================ 三栏骨架 ============================ */
.main{display:grid;grid-template-columns:210px minmax(0,1fr) 300px;gap:18px;padding:18px 0 36px;align-items:start}
/* 后台左侧导航没配置时左栏整块不画，主列把 210px 补上（窄屏见下方媒体查询里的同名规则） */
.main.no-left{grid-template-columns:minmax(0,1fr) 300px}
.col-left{position:sticky;top:74px}
.col-right{display:flex;flex-direction:column;gap:18px}
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.panel-hd{padding:11px 14px;font-size:12.5px;font-weight:700;color:var(--text-3);letter-spacing:1px;
    border-bottom:1px solid var(--border-soft);display:flex;justify-content:space-between;align-items:center;gap:8px}
.panel-hd a{font-weight:400;font-size:12px}
.panel-hd a:hover{color:var(--primary)}
.panel-bd{padding:14px}
.empty{padding:26px 14px;text-align:center;color:var(--text-3);font-size:13px}

/* ---------- 通用轻提示（window.pgToast 调用，可选 type: ok / error / warn） ---------- */
.pg-toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(10px) scale(.97);z-index:200;
    display:flex;align-items:center;gap:8px;max-width:min(80vw,420px);
    padding:11px 18px;border-radius:12px;background:rgba(24,33,42,.94);color:#fff;font-size:13.5px;line-height:1.5;
    box-shadow:0 12px 32px rgba(12,22,34,.28);backdrop-filter:blur(6px);
    opacity:0;transition:opacity .22s ease,transform .22s ease;pointer-events:none;text-align:left}
.pg-toast>i.ti{flex:0 0 auto;font-size:17px;color:#9fb0c4}
.pg-toast>span{min-width:0}
.pg-toast.on{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.pg-toast-ok>i.ti{color:#34d399}
.pg-toast-error>i.ti{color:#fb7185}
.pg-toast-warn>i.ti{color:#fbbf24}
[data-theme="dark"] .pg-toast{background:rgba(232,241,247,.96);color:#131920;box-shadow:0 12px 32px rgba(0,0,0,.22)}
[data-theme="dark"] .pg-toast>i.ti{color:#64748b}
[data-theme="dark"] .pg-toast-ok>i.ti{color:#10b981}
[data-theme="dark"] .pg-toast-error>i.ti{color:#e11d48}
[data-theme="dark"] .pg-toast-warn>i.ti{color:#d97706}

/* ---------- 左侧板块导航（桌面竖版；≤1100px 整栏收起，改用下方 .navstrip 横滑条） ---------- */
/* 板块多的时候左栏不能把页面撑长：面板内部滚动，顶栏 56 + 间距后留出一屏高度 */
.fnav-scroll{max-height:calc(100vh - 150px);overflow-y:auto;padding-bottom:4px;scrollbar-width:thin}
.fnav-scroll::-webkit-scrollbar{width:6px}
.fnav-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.fnav-scroll::-webkit-scrollbar-thumb:hover{background:var(--text-3)}
.fnav-it{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:13.5px;color:var(--text-2);
    border-bottom:1px solid var(--border-soft);transition:background .15s,color .15s}
.fnav-it:hover{background:var(--bg);color:var(--primary)}
.fnav-it i.ti{font-size:16px;flex:0 0 auto}
.fnav-it span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 左栏这一列只放后台配置的那几行名字（站长定的口径：不显示主题数，也不列全站板块） */

/* 分区标题做成可点按钮：折叠状态由 home.js 记在 localStorage。
   空分区没有子项可折，视图会退化成同名 div，所以交互样式只挂在 button 上。 */
.fnav-hd{display:flex;align-items:center;gap:7px;width:100%;padding:9px 14px;border:0;
    background:var(--bg);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);
    font-size:12px;font-weight:600;line-height:1.4;color:var(--text-3);letter-spacing:.4px;font-family:inherit;text-align:left}
button.fnav-hd{cursor:pointer}
button.fnav-hd:hover{color:var(--primary)}
.fnav-hd>i.ti{font-size:15px;flex:0 0 auto}
.fnav-hd>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fnav-arr{font-size:14px;transition:transform .18s ease;flex:0 0 auto}
.fnav-grp.fold .fnav-arr{transform:rotate(-90deg)}
.fnav-grp.fold .fnav-sub{display:none}
.fnav-it{padding-left:26px;position:relative}
.fnav-it:before{content:"";position:absolute;left:14px;top:50%;width:4px;height:4px;margin-top:-2px;
    border-radius:50%;background:var(--border)}
.fnav-it:hover:before{background:var(--primary)}
/* 后台左侧导航给某一行指定了图标：图标就是这一行的记号，别再点一个圆点。
   分区之外的顶层行（一级链接等）视图一律给它带图标，所以它也走这条 */
.fnav-it.has-ic{padding-left:14px}
.fnav-it.has-ic:before{display:none}

/* ---------- 窄屏板块横滑条 ---------- */
/* 默认不显示，只在左栏收起的断点下接管导航；负 margin 让它贴视口边缘，滑到底不被 .wrap 内边距卡住 */
.navstrip{display:none;margin:14px -18px 0}
.ns-in{display:flex;align-items:center;gap:8px;padding:2px 18px 12px;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ns-in::-webkit-scrollbar{display:none}
.ns-it{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 13px;border-radius:16px;
    border:1px solid var(--border);background:var(--card);color:var(--text-2);font-size:13px;white-space:nowrap}
.ns-it span{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ns-it:hover{color:var(--primary);border-color:var(--primary)}

/* ---------- 中栏 ---------- */
.pin{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border-soft);
    background:linear-gradient(90deg,var(--primary-light),transparent 60%);font-size:13.5px}
.pin:last-child{border-bottom:0}
.pin .pn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.pin .pn:hover{color:var(--primary)}
.pin i.ti-pin{color:var(--primary);flex:0 0 auto}
.pin .who{flex:0 0 auto;font-size:12px;color:var(--text-3)}

.tabsbar{display:flex;align-items:center;gap:4px;padding:10px 14px;border-bottom:1px solid var(--border-soft);flex-wrap:wrap}
.tab{padding:5px 13px;border-radius:7px;font-size:13.5px;color:var(--text-2);cursor:pointer;border:0;background:none;font-family:inherit}
.tab:hover{background:var(--bg)}
.tab.on{background:var(--primary);color:#fff}
.tabsbar .mini{margin-left:auto;display:flex;align-items:center;gap:6px}
.mini a{font-size:12px;padding:3px 9px;border-radius:6px;border:1px solid var(--border);color:var(--text-3);text-decoration:none}
.mini a:hover{color:var(--primary);border-color:var(--primary)}
.mini a.on{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}

.trow{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid var(--border-soft)}
.trow:last-child{border-bottom:0}
.trow:hover{background:var(--bg)}
.avt{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:14px;font-weight:600;background:linear-gradient(135deg,var(--primary),var(--primary-dark))}
.t-main{flex:1;min-width:0}
.t-title{display:block;font-size:14.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-title:hover{color:var(--primary)}
.t-meta{font-size:12px;color:var(--text-3);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.t-meta .who{color:var(--text-2)}
/* 用户名 → 主页（v2.0.65）：全站唯一出口 pgUserLink() 给有 uid 的名字挂这个类。
   只改悬停色、不加下划线 —— 名字嵌在元信息行里，继承周围文字的字重与字号才是它本来的样子。 */
.u-name{color:inherit;text-decoration:none}
.u-name:hover{color:var(--primary)}
/* 列表时间：绝对时间（2026-10-01 11:14）不折行，等宽数字让多行右对齐更整齐 */
.t-meta .tm-date{white-space:nowrap;font-variant-numeric:tabular-nums}
.node{padding:0 7px;border-radius:4px;background:var(--primary-light);color:var(--primary);font-size:11.5px;white-space:nowrap;
    /* 板块名放宽到 32 字（bbs_forum.name varchar(32)），过长必须就地省略号，不能顶穿列表行 */
    max-width:160px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle}
.node:hover{background:var(--primary);color:#fff}
.tag{padding:0 7px;border-radius:4px;font-size:11px;display:inline-flex;align-items:center;gap:3px}
.tag.hot{background:rgba(239,68,68,.1);color:var(--danger)}
.tag.new{background:rgba(59,130,246,.1);color:var(--info)}
.tag.gold{background:rgba(245,158,11,.14);color:#b45309}
[data-theme="dark"] .tag.gold{color:var(--warn)}
/* 帖子状态徽章（后台「帖子管理 → 帖子状态配置」的配色，显示在标题前面）。
   --st-c = 后台配置的原色，直接做底色与描边（站长要求前台所见颜色 = 后台设置的颜色，不再派生浅底）；
   --st-on = 模型 onColor() 在该实底上挑出的高对比文字色（白 / 近黑二选一）。
   底色不透明，主题背景透不过来，所以明暗两套主题共用同一条规则，不需要 [data-theme] 另开一档。 */
.tag.st{padding:1px 9px;border-radius:20px;font-size:11.5px;line-height:1.7;white-space:nowrap;
    font-weight:700;color:var(--st-on, #fff);background:var(--st-c);border:1px solid var(--st-c)}
.st-dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--st-c);display:inline-block}
.tag.st .st-dot{background:currentColor;opacity:.7}
/* 列表行标题「前面」的状态插槽：.t-title 是 nowrap+省略号，徽章用 inline-flex 排在文字前，
   标题再长也只截文字、徽章始终可见；行内空间紧，比详情页再小一号。 */
.t-st{display:inline-flex;vertical-align:.1em;margin-right:6px;line-height:1}
.t-st .tag{font-size:11px;padding:0 8px}
.t-stats{flex:0 0 auto;text-align:right;font-size:12px;color:var(--text-3);min-width:58px}
.t-stats b{display:block;font-size:13.5px;color:var(--text)}
.t-stats:hover b{color:var(--primary)}

/* ---------- 右栏 ---------- */
/* 个人卡：亮色下不再整块铺绿（用户反馈「太绿了」），改成和右栏其他面板一致的白底卡，
   绿色只留给三处点缀 —— 头像、四个数字、「发帖」主按钮。
   取色全部走卡内局部自定义属性，暗色分支只换这一组变量，规则本体不复制第二遍。 */
.me-card{--mc-tile:var(--bg);--mc-num:var(--primary);--mc-sub:var(--text-3);
    --mc-ghost:rgba(var(--primary-rgb),.09);--mc-ghost-hov:rgba(var(--primary-rgb),.18);
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    padding:18px;color:var(--text);box-shadow:var(--shadow)}
[data-theme="dark"] .me-card{--mc-tile:rgba(var(--primary-rgb),.1);--mc-sub:var(--text-2);
    --mc-ghost:rgba(var(--primary-rgb),.16);--mc-ghost-hov:rgba(var(--primary-rgb),.3)}
.me-top{display:flex;align-items:center;gap:12px}
.me-top .avt{width:44px;height:44px;font-size:17px}
.me-top b{display:block;font-size:15px}
/* 签名最长 255 字，卡片只有头像右边那点宽度：单行截断，不许换行把卡片撑高。
   min-width:0 是必需的 —— flex 子项默认不缩到内容宽度以下，nowrap 会直接把卡片顶宽。 */
.me-top>div{min-width:0}
.me-top small{display:block;font-size:12px;color:var(--mc-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-row{display:flex;gap:8px;margin-top:14px}
/* 主题/积分是 div，关注/粉丝是链接（点了进用户中心对应列表）——两种壳子共用同一套格子样式 */
.me-row div,.me-row a{flex:1;background:var(--mc-tile);border-radius:8px;padding:8px 0;text-align:center}
.me-row a{transition:box-shadow .15s}
.me-row a:hover{box-shadow:inset 0 0 0 1px var(--mc-ghost)}
.me-row b{display:block;font-size:16px;color:var(--mc-num);font-variant-numeric:tabular-nums}
.me-row span{font-size:11px;color:var(--mc-sub)}
.me-act{display:flex;gap:8px;margin-top:14px}
.me-act a{flex:1;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:5px;
    font-size:13px;font-weight:600;padding:0}
/* 「发帖」直接复用全站主按钮 .sign-btn（绿渐变白字），这里只补次要按钮的浅底态。
   color 必须跟 background 一起写：pg-ui 的 a:hover 会把链接染蓝（权重低于本选择器） */
.me-act .mc-ghost{background:var(--mc-ghost);color:var(--mc-num)}
.me-act .mc-ghost:hover{background:var(--mc-ghost-hov);color:var(--mc-num)}
/* 暗色的 --primary 是亮薄荷，白字对比度不够，主按钮改深字 */
[data-theme="dark"] .me-act .sign-btn,
[data-theme="dark"] .me-act .sign-btn:hover{color:var(--primary-light)}
.rk-item{display:flex;gap:10px;padding:8px 14px;align-items:center;font-size:13.5px}
.rk-item:hover{background:var(--bg)}
.rk{width:18px;height:18px;border-radius:5px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:700;background:var(--bg);color:var(--text-3)}
.rk.t1{background:#ef4444;color:#fff}
.rk.t2{background:#f59e0b;color:#fff}
.rk.t3{background:#84cc16;color:#fff}
.rk-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-t:hover{color:var(--primary)}
.rk-n{font-size:12px;color:var(--text-3);flex:0 0 auto}
.newbie{display:flex;align-items:center;gap:9px;padding:8px 14px;border-bottom:1px solid var(--border-soft);font-size:13px}
.newbie:last-child{border-bottom:0}
.newbie .avt{width:28px;height:28px;font-size:12px}
.newbie b{flex:1;min-width:0;font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.newbie small{color:var(--text-3);font-size:11.5px;flex:0 0 auto}

/* ---------- 分页 ---------- */
.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--border-soft)}
.pager .pa{min-width:32px;height:32px;padding:0 9px;border:1px solid var(--border);border-radius:8px;
    background:var(--card);color:var(--text-2);font-size:13px;display:inline-flex;align-items:center;justify-content:center;
    text-decoration:none;transition:.15s}
.pager .pa:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}
.pager .pa.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.pager .pa.dis{opacity:.45;cursor:not-allowed;pointer-events:none}
.pager .gap{min-width:22px;text-align:center;color:var(--text-3);font-size:13px}
.pager .info{margin-left:auto;font-size:12.5px;color:var(--text-3);white-space:nowrap}
.pager .jump{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--text-3)}
.pager .jump input{width:52px;height:32px;padding:0 8px;text-align:center;border:1px solid var(--border);
    border-radius:8px;background:var(--bg);color:var(--text);font-size:13px;outline:none;font-family:inherit}
.pager .jump input:focus{border-color:var(--primary);background:var(--card)}

/* ============================ 页脚 ============================ */
/* 只剩版权一行，站长 2026-10-13 定稿：水平居中，「关于 · 版规 · API · 手机版」那排链接删掉。
   .foot-in 这个类名不能改 —— forum.css 用 .wrap:not(.foot-in) 排除它，改了会把页脚撑出多余底距 */
.foot{background:var(--card);border-top:1px solid var(--border);padding:20px 0;color:var(--text-3);font-size:13px;flex:0 0 auto}
.foot-in{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;text-align:center}

/* ============================ 响应式 ============================ */
@media(max-width:1100px){
    .main{grid-template-columns:minmax(0,1fr) 290px}   /* minmax(0,1fr) 防长标题撑破列宽 */
    /* 两条同值缺一不可：.main.no-left 权重 (0,2,0)，媒体查询里只改 .main 压不住它 */
    .main.no-left{grid-template-columns:minmax(0,1fr) 290px}
    .col-left{display:none}
    /* 左栏收起后板块导航不能一起消失：改由公告条下方的横滑条承担 */
    .navstrip{display:block}
}
/* ≤1000px：搜索框（230px）必须收进图标。
   .topbar-in 是不换行的 flex，容器装不下时不会横向溢出，而是把每个按钮的文字压成两行，56px 的顶栏被撑破
   （实测游客态 820px 下 .nav 的 top 变成 -10px，上下都溢出）。 */
@media(max-width:1000px){
    .search{display:none}
    .search-btn{display:inline-flex}
    .topbar-in{gap:10px}
    /* 点搜索图标 → 顶栏下方落下一条整行输入框（.topbar 是 sticky，即定位父级） */
    .topbar.s-open .search{display:block;position:absolute;left:0;right:0;top:56px;padding:10px 18px;
        background:var(--card);border-bottom:1px solid var(--border);box-shadow:0 8px 20px rgba(16,32,48,.10)}
    .topbar.s-open .search input{width:100%;height:38px}
    /* right 要算上 .search 自己的 18px 内边距，top 要算上 10px 上边距（输入框 38 高，按钮 24 高居中） */
    .topbar.s-open .search-go{top:17px;right:22px}
}
@media(max-width:760px){
    .main{grid-template-columns:minmax(0,1fr)}
    .main.no-left{grid-template-columns:minmax(0,1fr)}
    .col-right{order:2}
    .nav{display:none}
    /* 手机端隐藏次要模块：个人卡 / 今日热榜 / 新入驻用户，只保留在线概况 */
    .m-hide-sm{display:none !important}
    /* 板块导航手机端不显示（左栏在 1100 就收了，横滑条只服务平板），
       手机端的入口改由后台「站点设置 → 导航设置 → 手机导航」配置的底部栏承担（见本文件末尾 .mbnav） */
    .navstrip{display:none !important}

    /* ---------- 顶栏：标题在左，右侧只留「搜索 / 主题 / 签到 / 通知 / 头像」五个图标 ---------- */
    /* .spacer 必须保留：搜索框收起后靠它把图标推到右边 */
    /* 登录换成图标版（签到已在 header.php 里按登录态渲染，且桌面端就只剩图标） */
    .btn-line{display:none}
    .guest-btn{display:inline-flex}
    /* 游客的手机端顶栏再收一档：通知要登录后才有意义，只留「搜索 / 主题 / 登录」 */
    .topbar.guest .notice-wrap{display:none}
}
@media(max-width:560px){
    .wrap{padding:0 12px}
    /* 顶栏图标再收紧一档（搜索/签到/登录在更宽的断点已图标化，这里只调间距） */
    .topbar-in{gap:9px}
    /* 展开的搜索行跟 .wrap 一起收窄到 12px，放大镜间距同步补 */
    .topbar.s-open .search{padding:10px 12px}
    .topbar.s-open .search-go{right:16px}
    /* 通知面板手机端不再贴着铃铛右对齐：360px 宽在 375 屏上会从左边溢出三十来像素
       （铃铛的右边缘本来就离屏幕右边有五十多像素）。改成整条视口宽的浮层，左右各留 10px，
       顶边压在 56px 高的顶栏下面；顶栏是 sticky，滚动时面板跟着一起待在它下面。 */
    .notice-menu{position:fixed;left:10px;right:10px;top:56px;width:auto;border-radius:0 0 10px 10px}
    .t-stats{min-width:44px}
    .trow{padding:11px 12px}
    .avt{width:32px;height:32px;font-size:13px}
    /* 分页（站长给的参考图）：手机端与桌面同一排页码格 ‹ 1 [2] 3 ›，当前页实底高亮，
       统计信息独占一行居中。页码格不许再收起来 —— 收起来就看不出「我在第几页」。
       页数 ≤5 时格子给足手指头（34px）；页数多服务端会挂 .pa-compact（最长 11 枚格子），
       这一档把格子与间距收小，保证 375 宽里仍站成一行，不把 › 挤到第二行去。
       跳页框（>7 页才有）与统计各占一行居中，不跟页码格挤。 */
    .pager{justify-content:center;padding:12px 10px;gap:6px}
    .pager .pa{min-width:34px;height:34px;padding:0 8px}
    .pager .gap{min-width:12px}
    .pager.pa-compact{gap:3px}
    .pager.pa-compact .pa{min-width:28px;height:32px;padding:0 5px}
    .pager.pa-compact .gap{min-width:8px}
    .pager .info{margin-left:0;width:100%;order:4;text-align:center;padding-top:2px}
    .pager .jump{order:3;width:100%;justify-content:center}
}

/* ============================ 手机底部导航 ============================ */
/* DOM 由 app/home/views/common/footer.php 引入的 mobileNav.php 输出，后台没开启就不会有这块节点，
   所以这里的默认隐藏只是兜底，真正控制显隐的是下面 ≤760px 的媒体查询。 */
.mbnav{display:none}
.mbnav-space{display:none}
@media(max-width:760px){
    .mbnav{
        display:flex; align-items:stretch;
        position:fixed; left:0; right:0; bottom:0; z-index:70;
        padding:6px 4px calc(6px + env(safe-area-inset-bottom));
        background:var(--card); border-top:1px solid var(--border);
        box-shadow:0 -1px 6px rgba(16,32,48,.06);
    }
    [data-theme="dark"] .mbnav{box-shadow:0 -2px 8px rgba(0,0,0,.45)}
    /* 顶栏是 sticky 的，底栏是 fixed 的：正文最后一段要靠这块占位才不被盖住 */
    .mbnav-space{display:block;height:64px}
    .mbnav-i{
        flex:1 1 0; min-width:0;
        display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
        padding:2px 0; color:var(--text-3); font-size:11px; line-height:1.3;
    }
    .mbnav-i .ti{font-size:20px}
    .mbnav-i span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    /* pg-ui 的 a:hover 权重比单类名高，配色必须在同一选择器上重申，否则 hover 会漏出链接色 */
    .mbnav-i:hover{color:var(--text-2)}
    .mbnav-i.on{color:var(--primary)}
    .mbnav-i.on:hover{color:var(--primary)}
}

/* ============================ 整页提示（无权限 / 功能已关闭） ============================ */
/* 视图 app/home/views/user/_closed.php：浏览阀门拦下（baseController::denyRead）
   和「注册/找回密码已关闭」（userController::renderClosedPage）共用这一套。
   原先这里只有一枚孤零零的图标浮在灰页底上，看着像半成品（帖子 #338 反馈「界面太丑」）。 */
.pg-closed{display:flex;align-items:center;justify-content:center;padding:48px 18px 56px;
    min-height:max(420px,calc(100vh - 210px))}
.pg-closed-card{width:100%;max-width:460px;text-align:center;background:var(--card);
    border:1px solid var(--border);border-radius:14px;padding:38px 32px 32px;
    box-shadow:var(--shadow),0 18px 40px -26px rgba(16,32,48,.35)}
.pg-closed-ic{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:29px;
    background:var(--primary-light);color:var(--primary)}
.pg-closed-title{margin:0 0 8px;font-size:19px;font-weight:700;color:var(--text)}
.pg-closed-msg{margin:0 auto;max-width:372px;font-size:13.5px;line-height:1.75;color:var(--text-2)}
/* 被拦身份：用户知道该找谁，管理员一眼看到是哪一档用户组在生效 */
.pg-closed-who{display:inline-flex;align-items:center;gap:5px;margin-top:16px;padding:5px 12px;
    border:1px solid var(--border-soft);border-radius:20px;background:var(--bg);
    font-size:12px;color:var(--text-3)}
.pg-closed-who i{font-size:14px;color:var(--text-3)}
.pg-closed-who b{font-weight:600;color:var(--text-2)}
.pg-closed-btns{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:26px}
/* 顶栏那套按钮在 ≤760px 把 .btn-line 整类收掉了（手机端只要图标），
   提示页的「返回首页」是唯一的出路，必须在这条作用域里点回来（两级类名权重更高，不靠书写顺序） */
.pg-closed-btns .btn-line{display:inline-flex}
.pg-closed-btns i{font-size:15px}
/* 暗色的 --primary 是亮薄荷，白字对比度不够 —— 与 .me-act 同一口径改深字 */
[data-theme="dark"] .pg-closed-btns .sign-btn,
[data-theme="dark"] .pg-closed-btns .sign-btn:hover{color:var(--primary-light)}
@media(max-width:560px){
    .pg-closed{padding:26px 12px 34px;min-height:max(360px,calc(100vh - 268px))}
    .pg-closed-card{padding:30px 18px 26px}
    /* 手机端两个按钮各占一半，比挤成两行整齐 */
    .pg-closed-btns .btn-line,.pg-closed-btns .sign-btn{flex:1 1 0;min-width:132px}
}

/* ============================ PC 右侧快捷栏 ============================
 * 视图 app/home/views/common/quickRail.php（全站一份），「返回顶部 / 返回底部」的行为在 statics/js/home.js。
 * 门槛定在 1440px 是算出来的：.wrap 最宽 1280，两侧留白各 (vw-1280)/2 = 80px 才装得下
 * 「右偏移 16 + 栏宽 52」= 68px，再窄浮栏就要压到右栏卡片上。
 * 窄屏（含平板）不出现是有意为之：手机端有顶栏图标和底部导航，不需要第三条通路。 */
.qrail{display:none}
@media(min-width:1440px){
    .qrail{
        display:flex; flex-direction:column; align-items:center; gap:8px;
        position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:65;
    }
    /* 主行动「发帖」：实心渐变 + 白字，一眼看出这两格里只有它是要点进去的 */
    .qr-main{
        width:52px; height:52px; border-radius:15px;
        display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
        background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff;
        font-size:10.5px; line-height:1.1; letter-spacing:.5px;
        box-shadow:0 8px 20px -6px rgba(var(--primary-rgb),.55);
    }
    .qr-main .ti{font-size:19px}
    /* color 必须在同一选择器重申：pg-ui.css 的 a:hover 权重更高，否则白字 hover 被染蓝（v1.6.4 那条坑） */
    .qr-main:hover,.qr-main:focus-visible{color:#fff;filter:brightness(1.08)}
    .qr-main:active{transform:scale(.95)}
    /* 次行动「返回顶部」：描边方块，词汇表抄 .icon-btn（卡片底 + 边框，hover 转主题色），
       只是浮在正文之外所以要大一档才按得住 */
    .qr-btn{
        width:44px; height:44px; border-radius:12px; border:1px solid var(--border);
        background:var(--card); cursor:pointer; color:var(--text-2); font-size:19px;
        display:flex; align-items:center; justify-content:center;
        box-shadow:0 6px 18px -8px rgba(16,32,48,.28);
    }
    .qr-btn:hover{color:var(--primary);border-color:var(--primary)}
    .qr-btn:active{transform:scale(.95)}
    /* 到顶时灰掉：滚动位置是唯一判据，点了没反应才叫奇怪 */
    .qr-btn:disabled{color:var(--text-3);border-color:var(--border-soft);opacity:.45;cursor:default;transform:none}
    [data-theme="dark"] .qr-btn{box-shadow:0 6px 18px -8px rgba(0,0,0,.6)}
    /* 暗色的 --primary 是亮薄荷，白字压上去对比度不够（全站同一条坑，见 .me-act .sign-btn）：
       整块文字/图标改走 --primary-light（深墨绿），实底不动。 */
    [data-theme="dark"] .qr-main,
    [data-theme="dark"] .qr-main:hover{color:var(--primary-light)}
}