/* Tabler overrides (§16.2). Loaded after the library CSS, before route styles.
   Keep overrides minimal and scoped to VC additions only. */

/* 主题声明（2026-10-24）：告诉 UA 各主题的配色意图，原生控件（number 步进器、
   select 箭头、date/color picker、checkbox/radio、原生滚动条）才会跟随主题绘制。
   缺省时 UA 一律按浅色画——dark 下 .vc-control 背景已是 --input-bg(#0f172a)，
   spinner 等处就留一块浅色（邮局设置页截图问题）。light / eye-care 均为浅色
   配色，与缺省行为一致，外观不变。本文件由引擎对引用 tabler 的页面自动注入，
   front / admin 两布局均覆盖。 */
:root { color-scheme: light; }
body[data-theme="dark"] { color-scheme: dark; }
body[data-theme="eye-care"] { color-scheme: light; }

/* 空单元格占位符：统一半角连字符 + 弱化。透明度与配色无关，三主题通用。 */
.cell-empty { opacity: .3; }

/* Navbar dropdowns: CSS-only :hover is not usable on touch / keyboard, so the
   click-toggle in vc.js flips .is-open to force the same open state.
   The three navbar buttons (language / theme / user) are icon-only squares
   styled by the layouts (.nav-icon-btn); nothing to override here.

   Layouts now show the menu via visibility+opacity (needs a transition), so
   the click state has to flip the same properties — `display` alone would no
   longer reveal it. `transition-delay: 0s` keeps taps immediate, unlike the
   180ms hover-intent delay. */
.dropdown.is-open > .dropdown-menu { visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s; }

/* ==========================================================================
   VC form components (UI 约定)
   1) every text-ish control (input / password / email / number / url / tel /
      textarea, and selects) uses a FLOATING LABEL — no separate label row.
   2) multilingual values: the current language is edited inline, the other
      languages live in a tabbed modal opened by the language button.
   Themed through the layout CSS variables, so admin/front and the three
   themes (light / eye-care / dark) all stay consistent.
   ========================================================================== */

/* --- float label ---------------------------------------------------------- */
.vc-float { position: relative; }
.vc-float > .vc-control {
  display: block; width: 100%; box-sizing: border-box;
  height: 3rem; padding: 1.05rem .8rem .35rem;
  font-family: inherit; font-size: .9rem; line-height: 1.2;
  color: var(--card-fg, #222);
  background: var(--input-bg, var(--card, #fff));
  border: 1px solid var(--border, #e5e7eb); border-radius: 6px;
}
.vc-float > textarea.vc-control {
  height: auto; min-height: 5.25rem; padding-top: 1.45rem; resize: vertical;
}
.vc-float > .vc-control::placeholder { color: transparent; }
.vc-float > .vc-control:focus {
  outline: none; border-color: var(--brand, #0a58ca);
  box-shadow: 0 0 0 3px rgba(10, 88, 202, .12);
}
.vc-float > .vc-control:disabled,
.vc-float > .vc-control[readonly] {
  background: var(--hover, #f8fafc); color: var(--muted, #64748b); cursor: default;
}
.vc-float > label {
  position: absolute; left: .8rem; top: .85rem;
  font-size: .9rem; line-height: 1.2; color: var(--muted, #888);
  pointer-events: none; transform-origin: left top;
  transition: transform .12s ease, color .12s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: calc(100% - 1.6rem);
}
.vc-float > .vc-control:focus ~ label,
.vc-float > .vc-control:not(:placeholder-shown) ~ label {
  transform: translateY(-.62rem) scale(.78);
}
.vc-float > .vc-control:focus ~ label { color: var(--brand, #0a58ca); }
/* Controls that can never be "placeholder-shown" (select, date, datetime-local,
   time, month) keep their label permanently raised. */
.vc-float-select > label,
.vc-float-raised > label { transform: translateY(-.62rem) scale(.78); }
.vc-float > .vc-control.vc-mono {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85rem;
}

/* Hide the browser's built-in password reveal/clear buttons (Edge/Chrome) so
   only the custom toggle icon shows; also keeps sign_up / sign_reset clean. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }
input[type="password"]::-webkit-reveal-password-button {
  -webkit-appearance: none; appearance: none; display: none !important;
}

/* --- input group (field + language button) -------------------------------- */
.vc-ig { display: flex; align-items: stretch; }
.vc-ig > .vc-float { flex: 1 1 auto; min-width: 0; }
.vc-ig > .vc-float > .vc-control { border-radius: 6px 0 0 6px; }
.vc-ig > .vc-ig-btn {
  flex: 0 0 auto; min-width: 2.9rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  margin-left: -1px; padding: 0 .8rem;
  font-family: inherit; font-size: .85rem; cursor: pointer;
  color: var(--card-fg, #222);
  background: var(--input-bg, var(--card, #fff));
  border: 1px solid var(--border, #e5e7eb); border-radius: 0 6px 6px 0;
}
.vc-ig > .vc-ig-btn:hover { background: var(--hover, #f8fafc); }
.vc-ig > .vc-ig-btn .ti { font-size: 1.1rem; }
/* 图标在前的变体（多语言组用）：圆角与 -1px 叠边同时换向 */
.vc-ig > .vc-ig-btn.vc-ig-lead {
  margin-left: 0; margin-right: -1px; border-radius: 6px 0 0 6px;
}
.vc-ig > .vc-float:last-child > .vc-control { border-radius: 0 6px 6px 0; }

/* --- filters input group (list-page search bars, 2026-10-25) --------------
   Tabler-style input group: <form class="filters"> wraps its search input /
   selects / buttons in a single <div class="input-group"> so the controls
   stick together, share borders and render at the .btn height. */
.filters .input-group { display: flex; align-items: stretch; flex-wrap: nowrap; min-width: 0; }
.filters .input-group > input,
.filters .input-group > select {
  flex: 1 1 auto; min-width: 0; margin: 0; height: 2.4rem;
  padding: .45rem .6rem; font-family: inherit; font-size: .9rem; line-height: 1.2;
  color: var(--card-fg, #222); background: var(--input-bg, var(--card, #fff));
  border: 1px solid var(--border, #e5e7eb); border-radius: 0;
}
.filters .input-group > select { flex: 0 0 auto; }
.filters .input-group > .btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem;
  border-radius: 0; text-decoration: none;
}
.filters .input-group > * + * { margin-left: -1px; }
.filters .input-group > :first-child { border-radius: 6px 0 0 6px; }
.filters .input-group > :last-child { border-radius: 0 6px 6px 0; }
.filters .input-group > :only-child { border-radius: 6px; }
.filters .input-group > input:focus,
.filters .input-group > select:focus,
.filters .input-group > .btn:focus {
  position: relative; z-index: 3; outline: none;
  border-color: var(--brand, #0a58ca);
  box-shadow: 0 0 0 3px rgba(10, 88, 202, .12);
}

/* --- 自绘下拉箭头（2026-10-27）-------------------------------------------
   浏览器原生 select 箭头由 UA 绘制在距右边框约 4px 处，padding-right 无法
   移动它，因此统一 appearance:none 后自绘：箭头中心定位在右 .7rem，文字右
   内边距 2.2rem 避免压字。flowchart 编辑器 .frow select 有独立高度约定，不在此列。 */
.vc-float-select > select.vc-control:not([multiple]),
.filters .input-group > select:not([multiple]),
.form-row select:not([multiple]),
.field select:not([multiple]),
.perm-pickers select:not([multiple]) {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: .85rem .85rem;
  padding-right: 2.2rem;
}
body[data-theme="dark"] .vc-float-select > select.vc-control:not([multiple]),
body[data-theme="dark"] .filters .input-group > select:not([multiple]),
body[data-theme="dark"] .form-row select:not([multiple]),
body[data-theme="dark"] .field select:not([multiple]),
body[data-theme="dark"] .perm-pickers select:not([multiple]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* --- 多语言组：假的 input（只读预览），点任意处开 modal --- */
.vc-ml { cursor: pointer; }
.vc-float > .vc-control.vc-ml-fake[readonly] {
  background: var(--input-bg, var(--card, #fff));
  color: var(--card-fg, #222);
  cursor: pointer;
  text-overflow: ellipsis;
}
.vc-ml:hover > .vc-ml-float > .vc-ml-fake { border-color: var(--brand, #0a58ca); }
.vc-ml-fake:focus-visible {
  outline: none; border-color: var(--brand, #0a58ca);
  box-shadow: 0 0 0 3px rgba(10, 88, 202, .12);
}
/* third-party widgets (Vditor…) cannot sit inside an input group: they get a
   compact bar with the same language button instead. */
.vc-ml-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .5rem;
}
.vc-ml-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; color: var(--muted, #888);
}
.vc-ml-head > .vc-ig-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; font-family: inherit; font-size: .84rem; cursor: pointer;
  color: var(--card-fg, #222);
  background: var(--input-bg, var(--card, #fff));
  border: 1px solid var(--border, #e5e7eb); border-radius: 6px;
}
.vc-ml-head > .vc-ig-btn:hover { background: var(--hover, #f8fafc); }

/* --- 多语言列表组：每语言一个可增删的多行编辑器 --- */
.vc-ml-list { margin: .25rem 0 .5rem; }
.vc-ml-list-rows { display: flex; flex-direction: column; gap: .45rem; }
.vc-ml-list-row { display: flex; gap: .5rem; align-items: center; }
.vc-ml-list-row input { flex: 1; }
.vc-ml-list-row .btn-danger { flex: 0 0 auto; }
.vc-ml-list [data-vc-ml-list-add] { margin-top: .15rem; }

/* --- modal ---------------------------------------------------------------- */
.vc-modal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.vc-modal[hidden] { display: none; }
.vc-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.vc-modal-dialog {
  position: relative; display: flex; flex-direction: column;
  width: min(560px, 100%); max-height: calc(100vh - 3rem);
  background: var(--card, #fff); color: var(--card-fg, #222);
  border: 1px solid var(--border, #e5e7eb); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .25); overflow: hidden;
}
.vc-modal-lg { width: min(880px, 100%); }
.vc-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.1rem; border-bottom: 1px solid var(--border, #e5e7eb);
}
.vc-modal-head h5 { margin: 0; font-size: 1rem; }
.vc-modal-head .vc-modal-sub { font-size: .78rem; color: var(--muted, #888); }
.vc-modal-x {
  background: none; border: none; cursor: pointer; padding: .15rem .3rem;
  color: var(--muted, #888); font-size: 1.05rem; line-height: 1;
}
.vc-modal-body { padding: 1rem 1.1rem; overflow: auto; }
.vc-modal-foot {
  display: flex; justify-content: flex-end; gap: .5rem;
  padding: .75rem 1.1rem; border-top: 1px solid var(--border, #e5e7eb);
}
/* --- 弹窗拉角缩放（多语言 modal）：右下角抓手，拖动改尺寸，双击复位 --- */
.vc-modal-resizable { position: relative; }
.vc-modal-resize {
  position: absolute; right: 0; bottom: 0; z-index: 3;
  width: 18px; height: 18px; padding: 2px;
  display: flex; align-items: flex-end; justify-content: flex-end;
  cursor: nwse-resize; touch-action: none;
}
.vc-modal-resize::after {
  content: ""; width: 8px; height: 8px;
  border-right: 2px solid var(--muted, #94a3b8);
  border-bottom: 2px solid var(--muted, #94a3b8);
  border-bottom-right-radius: 3px; opacity: .5;
  transition: opacity .12s ease;
}
.vc-modal-resizable:hover .vc-modal-resize::after,
.vc-modal-resize:focus-visible::after { opacity: .95; }
/* 拖动中：全局保持缩放光标并禁用选中 */
body.vc-modal-resizing { user-select: none; -webkit-user-select: none; }
body.vc-modal-resizing * { cursor: nwse-resize !important; }
@media (max-width: 720px) { .vc-modal-resize { display: none; } }

/* --- settings pages chrome (§14.7) ---------------------------------------- */
/* Page head (2026-10-23 整改): 标题在左，页面级操作按钮（保存/取消/返回/新建）
   在标题行右侧右对齐；窄屏 flex-wrap 自然换行。工具行内控件（筛选/匹配/导出）
   不属于页面级操作，仍留在各自输入行。 */
/* 2026-10-23：标题行下方一条极浅的分隔线（三主题变量 --head-line 由布局提供）。 */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; padding-bottom: .6rem; border-bottom: 1px solid var(--head-line, rgba(127,127,127,.18)); }
.page-head > h1 { margin: 0; font-size: 1.3rem; display: inline-flex; align-items: center; gap: .45rem; }
.page-head > h2 { margin: 0; font-size: 1.25rem; display: inline-flex; align-items: center; gap: .45rem; }
/* 2026-10-23：页头操作按钮统一尺寸。用 grid 等宽列（1fr）+ 等高拉伸（stretch），
   让「返回」「保存设置」等不同字数的按钮、以及 <a> 与 <button> 混用时
   （<button> 默认不继承字体/行高，两者高度不一致）看起来完全等大。 */
.page-actions { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; gap: .5rem; margin-left: auto; }
.page-actions .btn { display: flex; align-items: center; justify-content: center; font-family: inherit; line-height: 1.2; white-space: nowrap; }
@media (max-width: 640px) { .page-actions { grid-auto-flow: row; grid-auto-columns: auto; } }

/* 表格内图标按钮（2026-10-26）：单元格里「仅含一枚图标」的 .btn 统一为正方形
   外框（2rem × 2rem、padding 0、图标居中），一处生效即覆盖所有列表页的操作列；
   带文字或多图标的表格外按钮不受影响。边框/圆角/配色/hover 沿用 .btn 原值。
   :has() 需 Chrome/Edge 105+、Safari 15.4+、Firefox 121+。 */
td .btn:has(> .ti:only-child) {
  width: 2rem; height: 2rem; padding: 0; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
td .btn:has(> .ti:only-child) .ti { font-size: 1rem; }

/* 表格操作列的删除按钮（2026-10-27）：外框/底色/hover 与其他图标按钮一致，
   仅垃圾桶图标保留危险色。仅命中 td 内「只含一枚图标」的 .btn-danger，
   带文字的删除按钮与表格外 .btn-danger 不受影响。 */
td .btn.btn-danger:has(> .ti:only-child) {
  border-color: var(--border);
  background: var(--card);
}
td .btn.btn-danger:has(> .ti:only-child):hover {
  background: var(--hover-tint, #f0f4ff);
}
td .btn.btn-danger:has(> .ti:only-child) .ti { color: #dc2626; }
body[data-theme="dark"] td .btn.btn-danger:has(> .ti:only-child) .ti { color: #f87171; }

.cfg-banner { padding: .65rem .9rem; border-radius: 8px; margin-bottom: 1rem; font-size: .9rem; }
.cfg-ok { background: #eaf7ee; border: 1px solid #b7e3c5; color: #1f7a3d; }
.cfg-err { background: #fdecec; border: 1px solid #f3b9b9; color: #b42323; }
/* 深色主题：保存提示改半透明深底 + 亮色文字 */
body[data-theme="dark"] .cfg-ok { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.35); color: #7ee2a0; }
body[data-theme="dark"] .cfg-err { background: rgba(244,63,94,.14); border-color: rgba(244,63,94,.35); color: #fda4af; }
/* 操作提示浮层（2026-10-24）：不占文档流高度，浮在内容区顶部居中，
   宽度贴合文字，右侧关闭按钮。.alert（admin 布局）与 .cfg-banner 共用；
   .admin-content 是定位容器（position:relative）。 */
.alert, .cfg-banner {
  position: absolute; top: 1rem; left: 50%; transform: translateX(-50%);
  width: fit-content; max-width: min(100% - 3rem, 34rem);
  margin: 0; z-index: 60;
  display: flex; align-items: center; gap: .5rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .20);
}
.alert-close {
  background: none; border: none; cursor: pointer; color: inherit;
  opacity: .6; padding: .15rem; margin-left: .25rem; line-height: 1; flex: 0 0 auto;
}
.alert-close:hover { opacity: 1; }
.alert-close .ti { font-size: 1rem; }
/* 面包屑 home 图标：淡一点（不显眼）。2026-10-24：移除 transform:translateY(-.2rem)
   ——面包屑容器（.breadcrumb / .art-breadcrumb）早已是 display:flex;align-items:center，
   该手工上移把已居中的图标又推高，正是「图标与 / 文字错位」的根因。 */
.bc-home .ti, .art-home .ti {
  display: inline-block;
  opacity: .7;
  font-size: 1.25em;
}
.cfg-sec { margin-bottom: 1.5rem; }
.cfg-sec h2 {
  font-size: 1rem; margin: 0 0 .75rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.cfg-note { font-size: .75rem; font-weight: 400; color: var(--muted, #888); margin-left: .5rem; }
.cfg-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem 1.2rem; align-items: start;
}
.cfg-grid > .span-2 { grid-column: 1 / -1; }
.cfg-check {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .88rem; color: var(--card-fg, #222); cursor: pointer;
}
.cfg-check input { width: 1rem; height: 1rem; margin: 0; }
.cfg-sub { margin: 0 0 1.5rem; color: var(--muted, #888); font-size: .9rem; }
.cfg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.cfg-card {
  display: flex; align-items: center; gap: 1rem;
  border: 1px solid var(--border, #e5e7eb); border-radius: 12px;
  padding: 1.3rem 1.4rem; text-decoration: none;
  color: var(--card-fg, #222); background: var(--card, #fff);
}
.cfg-card:hover { border-color: #c7d7f0; }
.cfg-card-icon {
  width: 48px; height: 48px; flex: 0 0 48px; display: flex;
  align-items: center; justify-content: center; border-radius: 10px;
  background: #eef4ff; color: var(--brand, #0a58ca); font-size: 1.5rem;
}
.cfg-card-body { flex: 1; }
.cfg-card-body h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.cfg-card-body p { margin: 0; font-size: .85rem; color: var(--muted, #888); line-height: 1.5; }
.cfg-card-go { color: #c3cddd; font-size: 1.2rem; }
@media (max-width: 720px) { .cfg-cards { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .cfg-grid { grid-template-columns: 1fr; } }

/* --- tabs (multilingual modal) -------------------------------------------- */
.vc-tabs {
  display: flex; flex-wrap: wrap; gap: .25rem;
  border-bottom: 1px solid var(--border, #e5e7eb); margin-bottom: .9rem;
}
.vc-tab {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .85rem; margin-bottom: -1px;
  background: none; border: none; border-bottom: 2px solid transparent;
  font-family: inherit; font-size: .9rem; cursor: pointer; color: var(--muted, #888);
}
.vc-tab.active {
  color: var(--brand, #0a58ca); border-bottom-color: var(--brand, #0a58ca); font-weight: 600;
}
.vc-tab .vc-ml-code { font-size: .72rem; opacity: .75; }
.vc-panes { position: relative; }
.vc-pane { display: none; }
.vc-pane.active { display: block; }

/* ==========================================================================
   Admin sidebar resize (§5.3): drag handle on the sidebar's right edge.
   The width itself is the layout's --side-w variable; only the handle chrome
   lives here, themed through the sidebar variables so the grip stays visible
   on all three themes (sidebar backgrounds are dark in every theme).
   ========================================================================== */
.admin-sidebar .side-resize-handle {
  position: absolute; top: 0; right: 0; z-index: 5;
  width: 7px; height: 100%; margin: 0; padding: 0; border: 0;
  background: transparent; cursor: col-resize;
  touch-action: none; /* Pointer Events must own touch drags, not scrolling */
}
.admin-sidebar .side-resize-handle::after {
  content: ""; position: absolute; top: 0; right: 2px;
  width: 3px; height: 100%; border-radius: 2px;
  background: var(--side-fg, #cbd5e1); opacity: .28;
  transition: opacity .12s ease, background-color .12s ease;
}
.admin-sidebar .side-resize-handle:hover::after,
.admin-sidebar .side-resize-handle:focus-visible::after { opacity: .65; }
.admin-sidebar .side-resize-handle:focus-visible {
  outline: 2px solid var(--brand, #0a58ca); outline-offset: -2px;
}
/* While dragging: keep the resize cursor everywhere and block text selection. */
body.side-resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body.side-resizing * { cursor: col-resize !important; }
body.side-resizing .side-resize-handle::after { opacity: .85; background: var(--brand, #0a58ca); }
/* Narrow screens: the sidebar is not the primary nav there — hide the handle
   so it cannot be hit by accident. */
@media (max-width: 720px) {
  .admin-sidebar .side-resize-handle { display: none; }
}

/* ================= 开关（checkbox）组件 §16.2 =================
   用法：
     <label class="vc-switch">
       <input type="checkbox" name="display_xxx" checked>
       <span class="vc-switch-track"></span>
       <span class="vc-switch-text">显示路由标题</span>
     </label>
   原生 checkbox 透明隐藏但保留可聚焦/可提交，轨道和滑块纯 CSS 绘制；
   主题色走 --brand，暗色主题自动跟随布局变量。 */
.vc-switch {
  display: inline-flex; align-items: center; gap: .55rem;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  font-size: .9rem; color: var(--card-fg, #222); line-height: 1.4;
}
.vc-switch > input[type="checkbox"] {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.vc-switch-track {
  position: relative; flex: 0 0 auto;
  width: 2.1rem; height: 1.2rem; border-radius: 999px;
  background: var(--border, #cbd5e1);
  transition: background-color .16s ease;
}
.vc-switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: calc(1.2rem - 4px); height: calc(1.2rem - 4px);
  border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .25);
  transition: transform .16s ease;
}
.vc-switch > input:checked + .vc-switch-track { background: var(--brand, #0a58ca); }
.vc-switch > input:checked + .vc-switch-track::after { transform: translateX(.9rem); }
.vc-switch > input:focus-visible + .vc-switch-track {
  outline: 2px solid var(--brand, #0a58ca); outline-offset: 2px;
}
.vc-switch > input:disabled + .vc-switch-track { opacity: .45; }
.vc-switch:hover .vc-switch-text { color: var(--brand, #0a58ca); }
/* 开关列表（路由编辑器等成组出现时） */
.vc-switch-list { display: flex; flex-direction: column; gap: .55rem; }
.vc-switch-text { display: flex; flex-direction: column; gap: .1rem; }
.vc-switch-name { font-weight: 500; }
.vc-switch-hint { font-size: .76rem; color: var(--muted, #64748b); font-weight: 400; }

/* ================= Vditor 编辑器主题适配 §16.2 =================
   Vditor 自带 light 皮肤：面板背景写死 #fff，正文/工具栏按浅色配色，
   且 ir/wysiwyg/sv 模式用左右超大内边距把正文收在 800px 居中。
   放进后台卡片后有两个问题（2026-10-24 修复）：
   1) 卡片很宽时正文只有中间 800px，两侧大片留白；
   2) 布局把 --fg（暗色主题下是浅色）继承进编辑器，白底 + 浅字看不清。
   这里按站点 CSS 变量重设配色（light / dark / eye-care 自动跟随），正文改全宽。
   作用域 .vc-vd：form_ui.mleditor（文章）与自定义单语言编辑器共用该容器。 */
.vc-vd .vditor {
  position: relative;                     /* 让 .vditor-tip 相对编辑器定位 */
  --panel-background-color: var(--card, #fff);
  --textarea-background-color: var(--card, #fff);
  --textarea-text-color: var(--fg, #222);
  --toolbar-background-color: var(--card, #fff);
  --toolbar-icon-color: var(--muted, #666);
  --toolbar-icon-hover-color: var(--brand, #0a58ca);
  --border-color: var(--border, #e5e7eb);
  --second-color: var(--muted, #666);
  --count-background-color: var(--hover, #f8fafc);
  --blockquote-text-color: var(--muted, #666);
  --blockquote-border-color: var(--border, #e5e7eb);
  --heading-border-color: var(--border, #e5e7eb);
}
/* 正文全宽：抵消 Vditor 居中排版用的左右大内边距（它写在元素 inline style 上，需 !important） */
.vc-vd .vditor-ir .vditor-reset,
.vc-vd .vditor-wysiwyg .vditor-reset,
.vc-vd .vditor-sv .vditor-reset { padding: 12px 1.25rem !important; }
.vc-vd .vditor-toolbar { padding-left: .5rem !important; padding-right: .5rem !important; }
.vc-vd .vditor-preview > .vditor-reset { max-width: none; }

/* ================= 分页条（plugins.pager_ui，前后台共用） =================
   全站统一样式：首末/上下按钮 + 最多 9 个页码 + 省略号，信息文本居右。
   全部走站点 CSS 变量，light / dark / eye-care 三主题自适应。 */
.pager { display: flex; align-items: center; justify-content: center; gap: .35rem; flex-wrap: wrap; margin-top: 1rem; }
.pager-btn, .pager-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.9rem; height: 1.9rem; padding: 0 .45rem; box-sizing: border-box;
  border: 1px solid var(--border, #e5e7eb); border-radius: 6px;
  background: var(--card, #fff); color: var(--card-fg, #222);
  font-size: .85rem; line-height: 1; text-decoration: none;
}
a.pager-btn:hover, a.pager-num:hover { border-color: var(--brand, #0a58ca); color: var(--brand, #0a58ca); }
.pager-btn .ti { font-size: .95rem; }
.pager-current { background: var(--brand, #0a58ca); border-color: var(--brand, #0a58ca); color: #fff; font-weight: 600; cursor: default; }
.pager-btn.disabled { opacity: .45; cursor: not-allowed; }
.pager-ellipsis { color: var(--muted, #94a3b8); padding: 0 .2rem; user-select: none; }
.pager-info { margin-left: auto; color: var(--muted, #64748b); font-size: .85rem; }
/* 正文与块级元素的配色跟随主题 */
.vc-vd .vditor-reset { color: var(--fg, #222); }
.vc-vd .vditor-reset a { color: var(--brand, #0a58ca); }
.vc-vd .vditor-reset table td,
.vc-vd .vditor-reset table th { border-color: var(--border, #e5e7eb); }
.vc-vd .vditor-reset table tbody tr:nth-child(2n) { background-color: var(--hover, #f8fafc); }
.vc-vd .vditor-reset pre > code {
  background-image: none;                 /* 去掉浅色网格纹理（暗色下是亮斑） */
  background-color: var(--hover, #f8fafc);
}
/* 字数统计：浅灰小字，不再用深底胶囊；其悬浮提示不得被工具栏/正文遮住 */
.vc-vd .vditor-counter { color: var(--muted, #666); background-color: transparent; }
.vc-vd .vditor-tip { z-index: 60; }
/* Navbar 全屏按钮：与用户菜单之间补 0.25rem 间距 */
.nav-fs-btn { margin-left: .25rem; }
/* 主内容区全屏（Fullscreen API）：铺满视口，背景与主题同步，footer 预留间距收紧 */
main:fullscreen { width:100%; height:100%; max-width:none !important; overflow:auto !important; background:var(--bg); color:var(--fg); padding-bottom:1.5rem; }
main:fullscreen::backdrop { background:var(--bg); }

/* ================= Hover Popover（全站 title 接管，Tabler 风格） =================
   vc.js 把带 [title] 元素的提示文本转移到 data-vc-tip 并用本浮层显示，
   杜绝浏览器原生 tooltip（不可定制、延迟高、不随主题）。白底/圆角/阴影/小箭头，
   三主题变量自适应；z-index 130 高于 modal(120)，模态框内按钮同样可用。 */
.vc-pop {
  position: fixed; z-index: 130; max-width: 320px;
  background: var(--card, #fff); color: var(--card-fg, #222);
  border: 1px solid var(--border, #e5e7eb); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: .35rem .6rem; font-size: .8rem; line-height: 1.35; word-break: break-word;
  pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(2px);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}
.vc-pop.on { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.vc-pop-arrow {
  position: absolute; width: 8px; height: 8px; transform: rotate(45deg);
  background: var(--card, #fff); border: 1px solid var(--border, #e5e7eb);
}
/* 浮层在目标上方：箭头贴底边朝下，只保留下/右两条边线 */
.vc-pop[data-side="top"] .vc-pop-arrow { bottom: -5px; border-top: none; border-left: none; }
/* 浮层在目标下方：箭头贴顶边朝上，只保留上/左两条边线 */
.vc-pop[data-side="bottom"] .vc-pop-arrow { top: -5px; border-right: none; border-bottom: none; }