/* ===== 全站主题：浅色（默认）/ 深色（右上角按钮切换） ===== */
html[data-theme="dark"] { color-scheme: dark; }

/* ===== 全站深色调色板（兜底）=====
   各页面在各自的 :root 里定义 --bg / --card / --border / --text / --muted 等变量；
   深色下这里统一换成一整套深色，于是**没有单独写 dark/<page>.css 的页面也能正常变深色**
   （此前「库存周转 / 财务管理 / TOPWMS / 妙手 / 马帮 / 归并管理 / 广告分时」这些页面
   因为缺调色板，点「深色」看上去毫无反应）。
   已自带 dark/<page>.css 的页面里那些 !important 规则优先级更高，仍以它们为准。
   2026-10-03 */
html[data-theme="dark"] {
  --bg: #161a20; --card: #1b1f26; --border: #2c313a;
  --text: #dfe4ea; --muted: #98a1ad;
  --accent: #76afe8; --accent-bg: #12233a;
  --ok: #6ee7b7; --ok-bg: #123a2f;
  --danger: #e0837a; --warn: #f0b429; --warn-bg: #3a2c12;
  --fin: #fcd58d; --fin-bg: #3a2f14;
  --teal: #5eead4; --teal-bg: #10322c;
  --low: #f0a3a3; --deep: #12161c;
}

/* 深色下的「白底组件」兜底。
   用 :where() 把本条的优先级压到最低，这样各页面自己更具体的规则
   （例如 .btn.on / .tab.active / .btn.primary 的彩色底）依旧优先，不会被这里覆盖掉。 */
html[data-theme="dark"] :where(body) { background: var(--bg); color: var(--text); }
html[data-theme="dark"] :where(.back, .btn, .tab, .subtab, .mini2, .search, .searchmulti,
  .tablewrap, .tw, .lockbar, .placeholder, .modal, .glbox, .repin, .thumb, .card) {
  background: var(--card); color: var(--text); border-color: var(--border);
}
html[data-theme="dark"] :where(input, select, textarea) {
  background: #171b21; color: var(--text); border-color: var(--border);
}
html[data-theme="dark"] :where(th) { background: #20252d; color: var(--muted); }
html[data-theme="dark"] :where(td) { border-bottom-color: var(--border); }
html[data-theme="dark"] :where(tbody tr:hover td) { background: #20242c; }

/* 深色下的兜底：页面主体与常见容器 */
html[data-theme="dark"] body {
  color: var(--text, #e3eaf2);
}
html[data-theme="dark"] ::selection { background: #2f5f8f; color: #fff; }

/* 深色下徽标：变量整体会调亮，但徽标是白字，需要回到中等明度底色才清晰 */
html[data-theme="dark"] .badge { background: #5b6672; }
html[data-theme="dark"] .badge.vn,
html[data-theme="dark"] .badge.video { background: #2f6fb0; }
html[data-theme="dark"] .badge.th,
html[data-theme="dark"] .badge.ad { background: #1a7d5f; }
html[data-theme="dark"] .badge.ph { background: #c2620c; }
html[data-theme="dark"] .badge.cm { background: #5b6672; }
html[data-theme="dark"] .badge.cur { background: #a8791a; }

/* ===== 通用小标签（帐号管理：类型 / 状态） ===== */
.tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; line-height: 1.6; white-space: nowrap;
}
.tag.owner { background: #fff7ed; color: #b45309; border: 1px solid #fcd34d; }
.tag.on    { background: #e1f5ee; color: #0f6e56; border: 1px solid #b9e6d3; }
.tag.off   { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
html[data-theme="dark"] .tag.owner { background: #3a2f14; color: #ffd166; border-color: #5b4a1e; }
html[data-theme="dark"] .tag.on    { background: #123a2f; color: #6ee7b7; border-color: #1e5c48; }
html[data-theme="dark"] .tag.off   { background: #2a3138; color: #9aa4b0; border-color: #3a424b; }

/* ===== 右上角容器（当前账号 + 主题切换，固定定位，不影响页面布局） ===== */
.tk-corner {
  /* 定位在「页面」顶部右侧（不是视口）：往下滚就随页面一起滚走，滚回顶部才再出现 */
  position: absolute;
  top: 12px; right: 14px;
  z-index: 9998;
  width: max-content; max-width: calc(100vw - 28px);
  display: flex; align-items: center; gap: 8px; flex: none;
  margin: 0;
}
.tk-theme {
  /* width: max-content 强制收缩到内容尺寸，避免被某些 flex 父容器（登录/口令页的居中卡片 body）拉伸成一行 */
  width: max-content;
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 6px 13px;
  border: 1px solid #d7dde5; border-radius: 999px;
  background: #fff; color: #374151;
  font-size: 13px; line-height: 1.2; cursor: pointer;
  margin: 0;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
  /* 不要 hover 高亮：鼠标移上去保持原样（只保留手型光标提示可点） */
  -webkit-appearance: none; appearance: none;
}
/* 当前登录账号（右上角） */
.tk-user {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  max-width: 220px; padding: 5px 12px;
  border: 1px solid #d7dde5; border-radius: 999px;
  background: #fff; color: #374151;
  font-size: 13px; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}
.tk-user svg { width: 14px; height: 14px; flex: none; display: block; }
.tk-user .un { overflow: hidden; text-overflow: ellipsis; }
.tk-user.owner { border-color: #fcd34d; background: #fffbea; color: #8a5a00; }
html[data-theme="dark"] .tk-user {
  background: #1c242e; color: #e3eaf2; border-color: #2f3a46; box-shadow: none;
}
html[data-theme="dark"] .tk-user.owner {
  background: #2b2415; color: #ffd166; border-color: #5b4a1e;
}
.tk-theme:hover, .tk-theme:focus, .tk-theme:active {
  border-color: #d7dde5; color: #374151; background: #fff; outline: none;
}
.tk-theme .tk-ico {
  width: 12px; height: 12px; border-radius: 50%;
  background: #f0b429; box-shadow: inset -4px -4px 0 0 #fff;
}
html[data-theme="dark"] .tk-theme {
  background: #1c242e; color: #e3eaf2; border-color: #2f3a46; box-shadow: none;
}
html[data-theme="dark"] .tk-theme:hover,
html[data-theme="dark"] .tk-theme:focus,
html[data-theme="dark"] .tk-theme:active {
  border-color: #2f3a46; color: #e3eaf2; background: #1c242e; box-shadow: none;
}
html[data-theme="dark"] .tk-theme .tk-ico {
  background: #ffd166; box-shadow: 0 0 0 2px rgba(255, 209, 102, .3);
}
/* 窄屏：略缩小 + 贴右下角，避免和登录页窄居中卡片冲突 */
@media (max-width: 480px) {
  .tk-corner { top: 8px; right: 10px; gap: 6px; }
  .tk-theme { padding: 5px 10px; font-size: 12px; }
  .tk-user { max-width: 40vw; padding: 4px 10px; font-size: 12px; }
}

/* ===== 全局 topbar 同行约束 =====
   各页 .topbar 里：左 .back(返回首页) + 中 .nav(面包屑) + 右 margin-left:auto 的版本/退出登录。
   1) 桌面端：三者都在同一行，左中右分布；
   2) 窄屏（≤640px）原媒体查询会把 .nav 强制换行。这里用更高的优先级（加载顺序晚于页面内联 style）
      把 .nav 留回「左侧第二项」位置：让右侧的版本/退出登录换到下一行，而不是把面包屑挤下去。
*/
.topbar { align-items: center; }
.topbar > .back { flex: 0 0 auto; }
.topbar > .nav  { flex: 1 1 auto; min-width: 0; margin: 0; align-self: center; }
.topbar > .nav  a, .topbar > .nav span { white-space: nowrap; }
@media (max-width: 640px) {
  /* 窄屏：右侧 span（版本/退出登录）整行换下去，左侧 back+nav 保持同行 */
  .topbar > .nav { flex: 1 1 0; order: 0; }
  .topbar > span[style*="margin-left:auto"] { flex: 1 1 100%; order: 9; margin-left: 0 !important; }
}

/* ===== 全站统一：口令输入框 + 右侧「显示 / 隐藏」小眼睛（由 /static/pwd.js 自动挂载） ===== */
.pwd-wrap{position:relative}
.pwd-wrap > input{padding-right:44px!important}
.pwd-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;padding:0;margin:0;border:none;background:transparent;
  color:var(--muted,#6b7280);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;border-radius:6px;font-family:inherit;line-height:1;font-size:0}
.pwd-toggle:hover,.pwd-toggle:focus,.pwd-toggle:active{
  background:transparent;color:var(--text,#1f2430);box-shadow:none;outline:none;border:none}
.pwd-toggle svg{width:18px;height:18px;display:block}
.pwd-toggle .eye-off{display:none}
.pwd-toggle.on .eye{display:none}
.pwd-toggle.on .eye-off{display:block}

/* 深色下「显示/隐藏口令」图标保持次要灰（覆盖自动生成的 [data-theme="dark"] button{color:#f7f7f7}，
   那条 !important 会把眼睛图标染成近白色） */
html[data-theme="dark"] .pwd-toggle { color: var(--muted, #969ba6) !important; }
html[data-theme="dark"] .pwd-toggle:hover { color: var(--text, #d7dbe4) !important; }


/* ===== 右上角那一组：版本历史 / 退出登录 与账号名、深浅色同一套胶囊、同一水平线 ===== */
a.tklink {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid #d7dde5; background: #fff; color: #374151;
  font-size: 13px; line-height: 1.2; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .08); cursor: pointer; margin: 0;
  -webkit-appearance: none; appearance: none;
}
a.tklink:hover, a.tklink:focus, a.tklink:active {
  border-color: #c3cbd6; color: #111827; text-decoration: none; box-shadow: 0 1px 4px rgba(16,24,40,.12);
  outline: none;
}
html[data-theme="dark"] a.tklink {
  background: #1c242e; color: #e3eaf2; border-color: #2f3a46; box-shadow: none;
}
html[data-theme="dark"] a.tklink:hover,
html[data-theme="dark"] a.tklink:focus {
  background: #232c3a; color: #fff; border-color: #3a4551;
}
/* 四颗胶囊统一尺寸：账号名 / 深浅色 / 版本历史 / 退出登录 看起来是同一套、同一条水平线 */
.tk-corner > .tk-user, .tk-corner > .tk-theme, .tk-corner > a.tklink {
  padding: 6px 13px; font-size: 13px; line-height: 1.2;
}
/* 角落容器：一行放得下「版本历史 · 退出登录 · 账号名 · 深浅色」；窄屏换行但仍靠右 */
.tk-corner { row-gap: 6px; align-items: center; }
@media (max-width: 640px) {
  .tk-corner { flex-wrap: wrap; justify-content: flex-end; }
  .tk-corner > .tk-user, .tk-corner > .tk-theme, .tk-corner > a.tklink { padding: 4px 10px; font-size: 12px; }
}
@media (max-width: 480px) {
  .tk-corner > .tk-user, .tk-corner > .tk-theme, .tk-corner > a.tklink { padding: 4px 9px; font-size: 11.5px; }
}


/* ===== 全站页脚（统一两行）=====
   第一行：广州万货行网络科技有限公司 · 模块名
   第二行：粤公网安备 + 粤ICP备
   各页面只写 HTML（<div class="sitefoot">…</div>），样式统一在这里，不用逐页再写 CSS。 */
.sitefoot{
  text-align:center;color:var(--muted,#6b7280);
  font-size:12.5px;line-height:1.75;
  margin:28px auto 6px;padding:0 16px;
}
.sitefoot .beians{
  /* 用 flex（块级）而不是 inline-flex：保证备案一定在「公司名 · 模块名」的下一行 */
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:3px 14px;margin-top:5px;
}
.sitefoot .beians a{
  color:var(--muted,#6b7280);text-decoration:none;
  display:inline-flex;align-items:center;gap:4px;
}
.sitefoot .beians a:hover{color:var(--text,#1f2430)}
.sitefoot .beians img{height:14px;width:auto;display:block}
html[data-theme="dark"] .sitefoot{color:var(--muted,#969ba6)}
html[data-theme="dark"] .sitefoot .beians a{color:var(--muted,#969ba6)}
html[data-theme="dark"] .sitefoot .beians a:hover{color:var(--text,#d7dbe4)}
html[data-theme="dark"] .sitefoot .beians img{filter:brightness(1.2)}

/* ===== 页脚上方的「模块页左右预留」（全站统一，位置在「公司名 · 模块名」之上）=====
   结构由 theme.js 自动插入，各页面不用写 HTML；保存后按登录账号分别记录。 */
.marginset{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;flex-wrap:wrap;
  margin:22px auto 0;padding:0 16px;
  font-size:13px;color:var(--muted,#6b7280);text-align:center;
}
.marginset .mset-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.marginset input{
  width:72px;padding:7px 10px;border:1px solid var(--border,#e5e7eb);border-radius:8px;
  font-size:13px;background:#fff;color:var(--text,#1f2430);text-align:center;font-family:inherit;
}
.marginset button{
  padding:7px 16px;border:1px solid var(--border,#e5e7eb);border-radius:8px;background:#fff;
  color:var(--text,#1f2430);font-size:13px;cursor:pointer;font-family:inherit;transition:all .15s;
}
.marginset button:hover{border-color:#378add;background:#f3f6fb}
.marginset .mst{min-width:90px;text-align:left;color:#16a34a}
.marginset .mst:empty{display:none}
.marginset .mst.bad{color:#dc2626}
/* 页面背景确实是深色时才用深色样式（类名由 theme.js 量背景亮度后挂上） */
.marginset.on-dark{color:#969ba6}
.marginset.on-dark input,
.marginset.on-dark button{
  background:#171a20;color:#d7dbe4;border-color:#2b3038;
}
.marginset.on-dark button:hover{background:#1e222a;border-color:#4b8fd0}