/* 后台 · 亮色主题：覆盖 site.css 的暗色变量（哥哥定调：后台用亮色） */
body.staff {
  color-scheme: light;
  --bg: #f6f4ee; --bg2: #ffffff; --bg3: #f0ece2; --bg4: #e8e3d6;
  --line: #e7e2d5; --line2: #d8d1bf;
  --tx: #29251d; --tx2: #59523f; --tx3: #8b8471; --tx4: #b6afa0;
  --acc: #a07a1f; --acc2: #86651a; --acc-deep: #86651a; --acc-ink: #fff;
  --acc-soft: rgba(160, 122, 31, .1);
  background: var(--bg); color: var(--tx);
}
body.staff .site-head { background: rgba(255, 255, 255, .92); }
body.staff .btn-primary { background: linear-gradient(160deg, #b8933f, #a07a1f); box-shadow: 0 2px 10px rgba(160, 122, 31, .18); }
body.staff .notice-ok { background: rgba(46, 125, 79, .1); color: #2e7d4f; }
body.staff .notice-err { background: rgba(179, 69, 47, .1); color: #b3452f; }
/* warn = 部分成功/需要注意（发了但有跳过、表单被截断、没检测到修改…）。
   原来只有 ok/err 两档，模板又写死 ok，这类情况一律显示成纯绿"成功"，很误导。 */
body.staff .notice-warn { background: rgba(180, 140, 20, .12); color: #8a6d1f; }
body.staff .pill-making { background: rgba(160, 122, 31, .12); color: #8a6a1f; }
body.staff .pill-online { background: rgba(46, 125, 79, .12); color: #2e7d4f; }
body.staff .dev-hint { color: #8a6a1f; }

/* 登录卡片（居中窄卡，登录布局无导航） */
body.staff .auth-box { max-width: 420px; margin: 4vh auto 0; background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 32px 28px; box-shadow: 0 12px 40px rgba(70, 58, 25, .07); }
body.staff .auth-box .page-h1 { text-align: center; }
body.staff .auth-box .page-lead { text-align: center; }

/* 后台组件 */
.stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
.stat-card { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); display: flex; flex-direction: column; gap: 6px; }
.stat-card span { font-size: 12px; color: var(--tx3); }
.stat-card b { font-size: 26px; }
.tbl { width: 100%; border-collapse: collapse; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tbl th, .tbl td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: top; }
.tbl th { color: var(--tx3); font-weight: 500; font-size: 12px; background: #faf8f2; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: #fbf9f4; }
.tbl a { color: var(--acc); }
.edit-form { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.edit-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--tx2); }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tag-set { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: flex; gap: 14px; flex-wrap: wrap; background: var(--bg2); }
.tag-set legend { font-size: 12px; color: var(--tx3); padding: 0 6px; }
.tag-check { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px !important; }
.seo-box { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--bg2); }
.seo-box summary { cursor: pointer; font-size: 13px; color: var(--tx3); }
.seo-box label { margin-top: 10px; }
.upload-form { display: flex; gap: 14px; align-items: flex-end; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); flex-wrap: wrap; }
.upload-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--tx3); }
.bind-box { border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); padding: 14px 16px; margin-bottom: 14px; font-size: 13px; color: var(--tx2); display: flex; flex-direction: column; gap: 8px; }
.bind-box .qr-wrap { align-self: center; background: #fff; padding: 10px; border-radius: 10px; line-height: 0; }
.bind-box .qr-wrap svg { display: block; width: 200px; height: 200px; }
.bind-box .secret { display: block; padding: 10px 14px; border-radius: 8px; background: var(--bg3); font-size: 16px; letter-spacing: 2px; color: var(--acc2); word-break: break-all; }

/* 显示/隐藏密码：眼睛按钮绝对定位在输入框内右侧，输入框加右内距避免文字跑到按钮底下。
   .pw-full 用于 width:100% 的输入框（如登录页的 .ipt），由 staff.js 量出来后加上。 */
.pw-wrap { position: relative; display: inline-block; vertical-align: middle; }
.pw-wrap.pw-full { display: block; width: 100%; }
.pw-wrap > input { padding-right: 34px !important; }
/* ⚠️ 选择器必须写成 .pw-wrap > .pw-eye：页面里普遍有 `.xxx button {border;background}`
   这类规则，权重 (0,1,1) 高过单个 .pw-eye (0,1,0)，会给眼睛画出自己的边框和白底，
   看上去像把输入框切成了两截。这里一并把常被页面样式设上的属性显式复位。 */
.pw-wrap > .pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; padding: 0; margin: 0; border: 0; box-shadow: none;
  background: none; color: #9095a3; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px; line-height: 0; font-size: 0;
}
.pw-wrap > .pw-eye:hover { color: #5a6b86; background: rgba(0,0,0,.06); }
.pw-wrap > .pw-eye.on { color: #1f7a44; }
.pw-wrap > .pw-eye svg { width: 16px; height: 16px; display: block; }

/* ── 站点配置页 ─────────────────────────────────────────────
   运营用的表单：分区 + 可增删的多行输入。以前这页是让人直接改 JSON。 */
.cfg-form .cfg-sec {
  border: 1px solid #e3e6ec;
  border-radius: 10px;
  padding: 14px 16px 16px;
  margin: 0 0 18px;
  background: #fff;
}
.cfg-form .cfg-sec > legend {
  font-weight: 700;
  font-size: 14px;
  padding: 0 8px;
  color: #1f2430;
}
.cfg-hint, .cfg-sub {
  color: #6b7280;
  font-size: 12px;
  line-height: 1.7;
  margin: 0 0 10px;
}
.cfg-sub { display: block; margin: 4px 0 0; }
.cfg-hint code, .cfg-sub code {
  background: #f2f4f8;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
}

.cfg-rows { display: flex; flex-direction: column; gap: 8px; }
.cfg-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(180px, 2fr) 32px;
  gap: 8px;
  align-items: center;
}
/* 单列型（域名、敏感词）只有一个输入框 */
.cfg-rows--single .cfg-row { grid-template-columns: 1fr 32px; }

.cfg-del {
  width: 30px; height: 30px;
  border: 1px solid #e3e6ec;
  border-radius: 6px;
  background: #fafbfc;
  color: #9aa1ac;
  font-size: 17px; line-height: 1;
  cursor: pointer;
}
.cfg-del:hover { border-color: #f0a3a3; color: #d64545; background: #fff5f5; }

.cfg-add {
  margin-top: 10px;
  border: 1px dashed #c8cdd6;
  border-radius: 6px;
  background: #fff;
  color: #4a5261;
  font-size: 13px;
  padding: 6px 12px;
  cursor: pointer;
}
.cfg-add:hover { border-color: #8b93a1; color: #1f2430; }

.cfg-urls { margin-top: 14px; }
.cfg-switch { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.cfg-switch input { width: 16px; height: 16px; }
.cfg-cap { display: block; margin-top: 14px; max-width: 320px; }

@media (max-width: 720px) {
  .cfg-row { grid-template-columns: 1fr 32px; }
  .cfg-rows:not(.cfg-rows--single) .cfg-row > input:first-child { grid-column: 1 / -1; }
}

/* 静态页管理：legend 里的前台地址提示 */
.pg-url {
  font-weight: 400;
  font-size: 12px;
  color: #8b93a1;
}

/* ══════════════════════════════════════════════════════════════════
   后台版式：左侧导航 + 右侧内容（版式参考 51嗨聊后台，配色沿用夜映的墨金）

   ⚠️ 全部用 .hg- 前缀，**不碰 site.css 的 .site-head/.tabs/.wrap** ——
      那几个类前台也在用，改了会把前台顶栏一起改坏。
   ⚠️ .hg-body 是唯一的滚动容器（页面本身不滚）：侧栏要一直贴在左边，
      跟着页面滚就会在长表格页滚出视野。
   ══════════════════════════════════════════════════════════════════ */
body.staff.hg-shell { margin: 0; height: 100vh; overflow: hidden; }

.hg-admin { display: flex; height: 100vh; }

/* ── 侧栏 ── */
.hg-side {
  width: 216px; flex-shrink: 0; display: flex; flex-direction: column;
  background: #211d16; border-right: 1px solid #16130e;
  transition: width .18s ease;
}
.hg-brand {
  height: 58px; flex-shrink: 0; display: flex; align-items: center; gap: 9px;
  padding: 0 16px; color: #f2ead6; font-weight: 700; font-size: 16px;
  border-bottom: 1px solid rgba(255,255,255,.07); white-space: nowrap; overflow: hidden;
}
.hg-brand .logo-mark { flex-shrink: 0; }
.hg-brand b { color: var(--acc); font-weight: 700; }
.hg-nav { flex: 1; overflow-y: auto; padding: 10px 8px 24px; }
.hg-nav-g {
  padding: 14px 10px 6px; font-size: 11px; letter-spacing: .08em;
  color: rgba(242,234,214,.34); white-space: nowrap; overflow: hidden;
}
.hg-nav-a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-bottom: 2px;
  border-radius: 8px; color: rgba(242,234,214,.66); font-size: 14px;
  white-space: nowrap; overflow: hidden; text-decoration: none;
}
.hg-nav-a:hover { background: rgba(255,255,255,.06); color: #f2ead6; }
.hg-nav-a.on { background: rgba(160,122,31,.20); color: #e8cd92; font-weight: 600; }
.hg-ico { width: 19px; height: 19px; flex-shrink: 0; }

/* 收起：只留图标。文字用 display:none 而不是 width:0 —— 后者仍占 flex 基线，
   图标会被挤得左右不居中。 */
.hg-nav-off .hg-side { width: 62px; }
.hg-nav-off .hg-nav-tx,
.hg-nav-off .hg-brand-tx,
.hg-nav-off .hg-nav-g { display: none; }
.hg-nav-off .hg-brand { justify-content: center; padding: 0; }
.hg-nav-off .hg-nav-a { justify-content: center; padding: 10px 0; }

/* ── 右侧 ── */
.hg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hg-top {
  height: 58px; flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: 0 20px; background: var(--bg2); border-bottom: 1px solid var(--line);
}
.hg-title { font-size: 17px; font-weight: 700; margin: 0; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-top-r { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.hg-burger {
  width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg2);
  color: var(--tx2); cursor: pointer; padding: 0;
}
.hg-burger:hover { background: var(--bg3); color: var(--tx); }
.hg-burger svg { width: 17px; height: 17px; }
.hg-body { flex: 1; overflow-y: auto; padding: 20px 22px 60px; }
/* 内容区自己就是滚动容器，页面级的 main.wrap 边距会造成双层内距 */
.hg-body > .wrap { padding: 0; max-width: none; }

.hg-mask { display: none; }

/* ── 窄屏：侧栏改成抽屉 ──
   桌面端的"收起成图标条"在手机上没意义（点不准），直接滑出来盖住更好用。 */
@media (max-width: 860px) {
  .hg-side {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: 216px;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  /* 窄屏语义反过来：默认收着，hg-nav-off 才是"划出来" —— 这样桌面存的
     收起状态带到手机上，表现仍是"默认不挡路"。 */
  .hg-nav-off .hg-side { width: 216px; transform: translateX(0); }
  .hg-nav-off .hg-nav-tx, .hg-nav-off .hg-brand-tx, .hg-nav-off .hg-nav-g { display: revert; }
  .hg-nav-off .hg-brand { justify-content: flex-start; padding: 0 16px; }
  .hg-nav-off .hg-nav-a { justify-content: flex-start; padding: 9px 10px; }
  .hg-nav-off .hg-mask { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.38); }
  .hg-body { padding: 16px 14px 48px; }
  .hg-top { padding: 0 14px; }
}

.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px 14px; margin-top: 10px; }
.perm-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--tx2); cursor: pointer; }

/* ── 通用列表分页条 + 搜索框 ──
   2026-09-02 从「采集入库」那份内联样式提炼出来放公共表，剧集管理起先用。
   ⚠️ ingest.phtml 里仍是它自己的 .ing-pager / .ing-search（已上线稳定，不动它，
      免得为了合并样式把那一页碰坏）。两边视觉一致即可，不强求共用同一份 class。
   颜色一律走变量，别写死 #fff —— staff.css 顶部把后台整体改成了亮色主题，
   写死色值将来换主题会漏掉这里。 */
.hg-pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
            padding: 10px 12px; margin: 12px 0; background: var(--bg2);
            border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.hg-pager .pg-info { color: var(--tx3); }
.hg-pager .pg-info b { color: var(--tx); font-weight: 600; }
.hg-pager .pg-spacer { flex: 1 1 auto; }
.hg-pager select, .hg-pager input.pg-jump {
    font: inherit; color: var(--tx); background: var(--bg2); border: 1px solid var(--line2);
    border-radius: 6px; padding: 4px 6px; }
.hg-pager input.pg-jump { width: 56px; text-align: center; }
.hg-pager a.pg, .hg-pager span.pg {
    min-width: 32px; height: 30px; padding: 0 8px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line2); color: var(--tx2); text-decoration: none; background: var(--bg2); }
.hg-pager a.pg:hover { border-color: var(--acc); color: var(--acc); }
.hg-pager a.pg.on { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); font-weight: 600; }
/* 到边界的上一页/下一页做成不可点而不是隐藏 —— 位置不跳动，手不用重新找 */
.hg-pager span.pg.off { color: var(--tx4); background: var(--bg3); cursor: not-allowed; }
.hg-pager span.pg.gap { border: 0; background: transparent; color: var(--tx4); }
/* 当前筛选态的提示胶囊（搜索词 / 只看未设题材），带一个 ✕ 直接清掉 */
.hg-pager .pg-hit { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
                    background: var(--acc-soft); border: 1px solid var(--line2);
                    border-radius: 999px; font-size: 12.5px; color: var(--tx2); }
.hg-pager .pg-hit b { color: var(--tx); }
.hg-pager .pg-hit a { color: var(--tx3); text-decoration: none; }
.hg-pager .pg-hit a:hover { color: var(--tx); }

.hg-search { display: flex; align-items: center; gap: 6px; }
.hg-search .sbox { position: relative; display: flex; align-items: center; }
.hg-search input { font: inherit; color: var(--tx); background: var(--bg2); width: 190px;
                   border: 1px solid var(--line2); border-radius: 6px; padding: 5px 26px 5px 9px; }
.hg-search input:focus { border-color: var(--acc); outline: none; box-shadow: 0 0 0 3px var(--acc-soft); }
/* 清空按钮压在输入框内右侧，只有有词时才渲染 */
.hg-search .sclear { position: absolute; right: 6px; color: var(--tx4); text-decoration: none;
                     font-size: 15px; line-height: 1; padding: 2px; }
.hg-search .sclear:hover { color: var(--tx2); }