/* ============================================================
   admin-v2-patch.css
   用途：补充新版 admin.css 缺失但旧版模板/JS 仍依赖的样式
   范围：
     1. .admin-auth-mask —— 无权限遮罩（旧版 layout.htm 使用）
     2. .admin-loading —— 加载旋转（防御性补齐，admin-crud.js 可能内部使用）
     3. .admin-status-switch —— 列表内联状态开关包装（admin-crud.js renderStatusSwitch 输出）
     4. .admin-toast-container —— 旧版 Toast 容器类名兼容（与新版 .admin-toast-wrap 等价）
     5. .admin-thumb-preview —— 旧版列表缩略图预览（部分模板可能引用）
   配色：统一使用新版 --admin-* 紫色变量，与主样式系统一致
   ============================================================ */

/* ====== 1. 无权限遮罩 ====== */
.admin-auth-mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 30, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: adminAuthMaskIn 0.2s ease;
}
.admin-auth-mask[style*="display: none"],
.admin-auth-mask.is-hidden {
  display: none !important;
}
.admin-auth-mask__box {
  background: var(--admin-card, #fff);
  padding: 44px 52px;
  border-radius: var(--admin-radius-lg, 16px);
  text-align: center;
  max-width: 420px;
  box-shadow: var(--admin-shadow-lg, 0 18px 44px rgba(72, 11, 131, 0.14));
  animation: adminAuthMaskBoxIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.admin-auth-mask__box h2 {
  margin: 0 0 12px;
  color: var(--admin-ink, #1a1326);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.admin-auth-mask__box p {
  color: var(--admin-text-2, #6b7280);
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.6;
}
.admin-auth-mask__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 28px;
  background: var(--admin-grad, linear-gradient(135deg, #8a0ee8 0%, #5b21b6 100%));
  color: #fff !important;
  border-radius: var(--admin-radius-pill, 999px);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.2s;
  box-shadow: var(--admin-shadow-primary, 0 8px 20px rgba(124, 58, 237, 0.28));
}
.admin-auth-mask__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.4);
}
.admin-auth-mask__btn:active {
  transform: translateY(0);
}

@keyframes adminAuthMaskIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes adminAuthMaskBoxIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ====== 2. 加载旋转 ====== */
.admin-loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--admin-border-2, #e4dfee);
  border-top-color: var(--admin-primary, #7c3aed);
  border-radius: 50%;
  animation: adminPatchSpin 0.6s linear infinite;
  vertical-align: middle;
}
.admin-loading--lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}
.admin-loading--sm {
  width: 12px;
  height: 12px;
  border-width: 1.5px;
}
.admin-loading--on-primary {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}

@keyframes adminPatchSpin {
  to { transform: rotate(360deg); }
}

/* ====== 3. 列表内联状态开关包装 ====== */
/* 旧版 admin-crud.js 的 renderStatusSwitch 输出 .admin-status-switch 作为 .admin-switch 的包装 */
.admin-status-switch {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.admin-status-switch .admin-switch__track {
  cursor: pointer;
  transition: background 0.2s;
}
.admin-status-switch .admin-switch__input:disabled + .admin-switch__track {
  cursor: not-allowed;
}
/* 状态开关在表格内时，缩小尺寸以适配紧凑行高 */
.admin-table .admin-status-switch .admin-switch__track {
  width: 36px;
  height: 20px;
}
.admin-table .admin-status-switch .admin-switch__knob {
  width: 14px;
  height: 14px;
  top: 3px;
  left: 3px;
}
.admin-table .admin-status-switch .admin-switch__input:checked + .admin-switch__track .admin-switch__knob {
  transform: translateX(16px);
}

/* ====== 4. Toast 容器旧类名兼容 ====== */
/* 旧版 layout.htm 使用 .admin-toast-container，新版 app.js 使用 .admin-toast-wrap */
/* 此处让 .admin-toast-container 与 .admin-toast-wrap 行为一致，避免旧模板迁移时遗漏 */
.admin-toast-container {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.admin-toast-container .admin-toast {
  pointer-events: auto;
}

/* ====== 5. 列表缩略图预览（旧版兼容） ====== */
/* 旧版部分模板可能使用 .admin-thumb-preview，新版主样式仅提供 .admin-thumb */
.admin-thumb-preview {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}
.admin-thumb-preview__img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--admin-radius-sm, 8px);
  border: 1px solid var(--admin-border-2, #e4dfee);
  flex-shrink: 0;
}
.admin-thumb-preview__url {
  min-width: 0;
  font-size: 12px;
  color: var(--admin-text-2, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ====== 6. 工具类补齐（旧版模板可能引用） ====== */
.admin-text-center { text-align: center; }
.admin-text-right { text-align: right; }
.admin-text-muted { color: var(--admin-text-2, #6b7280); }
.admin-mt-8 { margin-top: 8px; }
.admin-mt-16 { margin-top: 16px; }
.admin-mb-8 { margin-bottom: 8px; }
.admin-mb-16 { margin-bottom: 16px; }
.admin-flex { display: flex; }
.admin-flex-center { display: flex; align-items: center; justify-content: center; }
.admin-gap-8 { gap: 8px; }
.admin-gap-12 { gap: 12px; }
.admin-cursor-pointer { cursor: pointer; }
.admin-text-break { word-break: break-all; }
.admin-nowrap { white-space: nowrap; }

/* ====== 7. 菜单图标兼容（layui-icon → admin-nav__icon） ====== */
/* 数据库 navigations 表 icon 字段存储 layui-icon-* 类名，需在 admin-nav__icon 内适配尺寸 */
.admin-nav__icon .layui-icon {
  font-size: 18px;
  color: inherit;
  line-height: 1;
}
.admin-nav__link--active .admin-nav__icon .layui-icon {
  color: var(--admin-sidebar-text-active, #fff);
}
.admin-sidebar__foot .layui-icon {
  font-size: 14px;
  vertical-align: middle;
}

/* ====== 8. 富文本编辑器容器（WangEditor 适配） ====== */
.admin-editor__content {
  min-height: 320px;
  max-height: 560px;
  overflow-y: auto;
}
.admin-editor__content .w-e-text-container {
  background: var(--admin-card, #fff) !important;
  color: var(--admin-text, #3b3548) !important;
}
.admin-editor__content .w-e-toolbar {
  background: var(--admin-bg-soft, #f3f0fa) !important;
  border-color: var(--admin-border-light, #f3f0fa) !important;
}

/* WangEditor 工具栏弹出层修复（按钮无法点击的根因）：
   1) .admin-card 默认 overflow:hidden 会裁剪颜色/字体/标题等下拉面板（absolute 定位），
      包含编辑器工具栏的卡片需 overflow:visible 让面板正常向下展开
      （CSS :has() + admin.js 中 JS 兜底双保险）
   2) 弹出层 z-index 需高于 admin-modal(1000)/toast(3000)，确保模态框（上传图片/插入链接等）浮在最上层 */
.admin-card:has(.w-e-bar, .w-e-toolbar) {
  overflow: visible;
}
.w-e-drop-panel,
.w-e-modal,
.w-e-modal-content,
.w-e-panel-content-color,
.w-e-list-bar,
.w-e-bar-item-group-container,
.w-e-bar-item-group-list {
  z-index: 10000 !important;
}

/* ====== 9. 页面头部（admin-page-header，page-parts.htm 宏输出） ====== */
.admin-page-header {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.admin-page-header__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--admin-text, #1a1326);
  line-height: 1.4;
}
.admin-page-header__sub {
  color: var(--admin-text-2, #6b7280);
  font-size: 13px;
  margin-top: 4px;
  line-height: 1.5;
}
.admin-page-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ====== 10. 表单区块提示（admin-form__section-hint） ====== */
.admin-form__section-hint {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--admin-text-2, #6b7280);
}

/* ====== 11. 批量操作工具栏（admin-toolbar--batch + admin-batch__info） ====== */
.admin-toolbar--batch {
  background: var(--admin-primary-soft, rgba(124, 58, 237, 0.08));
  border: 1px solid var(--admin-primary-light, #c4b5fd);
  border-radius: var(--admin-radius-sm, 8px);
  padding: 10px 16px;
  margin-bottom: 12px;
}
.admin-toolbar--batch .admin-toolbar__left {
  gap: 8px;
}
.admin-batch__info {
  color: var(--admin-primary, #7c3aed);
  font-weight: 600;
  font-size: 13px;
  margin-right: 8px;
}

/* ====== 12. 表单栅格列布局（form_row 宏输出 admin-form__row--cols-N） ====== */
/* 基础栅格行：统一 gap 与 margin */
.admin-form__row--cols-2,
.admin-form__row--cols-3,
.admin-form__row--cols-4 {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}
.admin-form__row--cols-2 { grid-template-columns: repeat(2, 1fr); }
.admin-form__row--cols-3 { grid-template-columns: repeat(3, 1fr); }
.admin-form__row--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* 时间信息：紧凑一行显示（创建时间：xxx  更新时间：xxx），无独立标题 */
.admin-form__time-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 10px 0;
  margin-top: 8px;
  border-top: 1px solid var(--admin-border-light);
  font-size: 13px;
  color: var(--admin-text-secondary);
}
.admin-form__time-item { display: inline-flex; align-items: center; gap: 4px; }
.admin-form__time-label { color: var(--admin-text-2); flex-shrink: 0; }
.admin-form__time-input {
  background: transparent;
  border: none;
  color: var(--admin-text);
  font-size: 13px;
  padding: 0;
  width: auto;
  min-width: 140px;
  cursor: default;
  outline: none;
}
.admin-form__time-input:disabled { color: var(--admin-text); opacity: 1; }
/* 栅格行内表单项重置 margin（由 grid gap 控制间距，避免与 .admin-form__group 的 margin 叠加） */
.admin-form__row--cols-2 > .admin-form__group,
.admin-form__row--cols-3 > .admin-form__group,
.admin-form__row--cols-4 > .admin-form__group { margin-bottom: 0; }
/* 栅格行最后无 margin */
.admin-form__row--cols-2:last-child,
.admin-form__row--cols-3:last-child,
.admin-form__row--cols-4:last-child { margin-bottom: 0; }
/* 列跨列 */
.admin-form__col--full { grid-column: 1 / -1; }
.admin-form__col--span-2 { grid-column: span 2; }
.admin-form__col--span-3 { grid-column: span 3; }
/* 响应式 */
@media (max-width: 768px) {
  .admin-form__row--cols-2,
  .admin-form__row--cols-3,
  .admin-form__row--cols-4 { grid-template-columns: 1fr; }
}

/* ====== 13. Tab 激活类兼容（模板用 .active，主 CSS 用 --active BEM 修饰符） ====== */
/* 模板和 JS 统一使用 .active 类切换，此处补齐与 --active 等价的样式 */
.admin-tabs__body { padding-top: 16px; }
.admin-tabs__item.active {
  color: var(--admin-primary, #7c3aed);
  border-bottom-color: var(--admin-primary, #7c3aed);
}
.admin-tabs__pane.active { display: block; }

/* ====== 14. 分类侧边栏（左右布局，articles/resources/faqs 等列表页使用） ====== */
.admin-category-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.admin-category-sidebar__list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.admin-category-sidebar__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: var(--admin-radius-sm, 6px);
  font-size: 13px;
  color: var(--admin-text-2, #6b7280);
  transition: all 0.15s ease;
  border-left: 3px solid transparent;
}
.admin-category-sidebar__item:hover {
  background: var(--admin-bg-soft, #f3f0fa);
}
.admin-category-sidebar__item.active {
  background: var(--admin-primary-soft, rgba(124, 58, 237, 0.08));
  color: var(--admin-primary, #7c3aed);
  font-weight: 600;
  border-left-color: var(--admin-primary, #7c3aed);
}
.admin-category-sidebar__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-category-sidebar__count {
  font-size: 12px;
  color: var(--admin-text-3, #9ca3af);
  background: var(--admin-bg-soft, #f3f0fa);
  padding: 1px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}

/* ============================================================
   15-22. 从旧版 admin.css 迁移的组件样式（变量名已适配 v2）
   包含：sidebar logo / table cells / link-code / dashboard /
   activity / translation / category sidebar actions / file card /
   social editor / cat-mgr / filter-sm / row-dragging
   ============================================================ */
.admin-sidebar__logo-link {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-sidebar__logo-link i { font-size: 22px; color: var(--admin-primary); }

.admin-table__cell-title { font-weight: 500; color: var(--admin-text); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.admin-table__cell-sub { font-size: 12px; color: var(--admin-text-2); margin-top: 2px; }

.admin-table__cell-meta { font-size: 12px; color: var(--admin-text-2); }

.admin-table__cell-inline { display: flex; gap: 4px; align-items: center; }

.admin-table__cell-inline-gap { margin-left: 4px; font-size: 12px; color: var(--admin-text-2); }

.admin-link-code {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color 0.15s, border-color 0.15s;
}

.admin-link-code code {
  color: var(--admin-primary);
  background: var(--admin-primary-soft);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
}

.admin-link-code:hover code {
  background: var(--admin-primary);
  color: #fff;
}

.admin-link-code:hover {
  border-bottom-color: var(--admin-primary);
}

.admin-dashboard__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.admin-pending-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  margin-bottom: 8px;
  text-decoration: none;
  color: inherit;
  transition: var(--admin-trans);
}

.admin-pending-item:hover {
  border-color: var(--admin-primary);
  background: var(--admin-primary-soft);
}

.admin-pending-item__icon {
  font-size: 18px;
  color: var(--admin-primary);
  flex-shrink: 0;
}

.admin-pending-item__label { flex: 1; font-size: 14px; }

.admin-pending-item__count { font-size: 14px; font-weight: bold; }

.admin-activity-list { max-height: 400px; overflow-y: auto; }

.admin-activity-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--admin-border-light, #f5f5f5);
}

.admin-activity-item:last-child { border-bottom: none; }

.admin-activity-item__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.admin-activity-item__body { flex: 1; min-width: 0; }

.admin-activity-item__desc { font-size: 13px; line-height: 1.4; }

.admin-activity-item__time { font-size: 11px; color: var(--admin-text-3); margin-top: 2px; }

  .admin-dashboard__row { grid-template-columns: 1fr; }

.admin-translation-group { margin-bottom: 20px; }

.admin-translation-group__header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 12px;
  background: var(--admin-primary-soft);
  border-left: 3px solid var(--admin-primary);
  border-radius: var(--admin-radius-sm);
}

.admin-translation-group__title { font-weight: 600; color: var(--admin-text); font-size: 14px; }

.admin-translation-group__meta { font-size: 12px; color: var(--admin-text-2); }

.admin-translation-group__badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 10px;
  background: var(--admin-card); color: var(--admin-primary);
  font-size: 12px; font-weight: 500;
}

.admin-translation-field {
  padding: 14px; margin-bottom: 12px;
  background: var(--admin-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
}

.admin-translation-field__title {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  font-size: 13px; font-weight: 600; color: var(--admin-text);
}

.admin-translation-field__name {
  font-family: 'Monaco', 'Consolas', monospace;
  padding: 2px 8px; background: var(--admin-card);
  border-radius: var(--admin-radius-sm);
  border: 1px solid var(--admin-border);
  color: var(--admin-primary);
}

.admin-translation-field__hint { font-size: 12px; color: var(--admin-text-2); font-weight: normal; }

.admin-translation-langs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

@media (max-width: 900px) { .admin-translation-langs { grid-template-columns: 1fr; } }

.admin-translation-lang { display: flex; flex-direction: column; gap: 6px; }

.admin-translation-lang__label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; color: var(--admin-text-2);
}

.admin-translation-lang__flag {
  width: 18px; height: 14px; border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: #fff;
}

.admin-translation-lang__flag--zh-cn { background: #de2910; }

.admin-translation-lang__flag--zh-hk { background: #ff9f43; }

.admin-translation-lang__flag--en-us { background: #1e3a8a; }

.admin-translation-lang__textarea {
  width: 100%; min-height: 80px; resize: vertical;
  padding: 8px 10px; font-size: 13px; line-height: 1.5;
  border: 1px solid var(--admin-border); border-radius: var(--admin-radius-sm);
  background: var(--admin-card); color: var(--admin-text);
  transition: var(--admin-trans); font-family: inherit;
}

.admin-translation-lang__textarea:focus {
  outline: none; border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px var(--admin-primary-soft);
}

.admin-translation-lang__textarea--long { min-height: 160px; }

.admin-translation-lang__textarea--short { min-height: 38px; resize: none; }

.admin-translation-add-field {
  padding: 14px; margin-bottom: 12px;
  background: transparent;
  border: 1px dashed var(--admin-border);
  border-radius: var(--admin-radius);
}

.admin-translation-add-field__row { display: flex; gap: 8px; align-items: center; }

.admin-translation-add-field__row .admin-form__control { flex: 1; }

.admin-translation-empty-hint { margin-top: 16px; }

.admin-translation-empty-hint .admin-btn { margin-top: 8px; }

.admin-alert .admin-link {
  color: inherit;
  text-decoration: underline;
  font-weight: 500;
}

.admin-category-sidebar__actions {
  display: none;
  gap: 4px;
}

.admin-category-sidebar__item:hover .admin-category-sidebar__actions {
  display: flex;
}

.admin-category-sidebar__action {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--admin-text-2);
  font-size: 13px;
  border-radius: 3px;
  cursor: pointer;
}

.admin-category-sidebar__action:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--admin-primary);
}

.admin-file-card__checkbox {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  cursor: pointer;
}

.admin-file-card__preview {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--admin-bg-soft, #f5f7fa);
  overflow: hidden;
}

.admin-file-card__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-file-card__preview i {
  font-size: 40px;
  color: var(--admin-text-3, #c0c4cc);
}

.admin-file-card__body {
  padding: 8px 10px;
}

.admin-file-card__name {
  font-size: 13px;
  color: var(--admin-text, #303133);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
  cursor: pointer;
}

.admin-file-card__name:hover {
  color: var(--admin-primary, #1677ff);
}

.admin-file-card__meta {
  font-size: 12px;
  color: var(--admin-text-3, #909399);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-file-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 10px 10px;
  border-top: 1px solid var(--admin-border-light, #f0f2f5);
}

.admin-file-card__action {
  font-size: 12px;
  color: var(--admin-text-2, #606266);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
}

.admin-file-card__action:hover {
  background: var(--admin-bg-soft, #f5f7fa);
  color: var(--admin-primary, #1677ff);
}

.admin-file-card__action--danger:hover {
  color: var(--admin-danger, #f56c6c);
}

/* ====== 社交媒体编辑器（分组卡片式布局） ====== */
.admin-social-editor {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* —— 分区容器 —— */
.admin-social-section {
  border: 1px solid var(--admin-border-2, #ebeef5);
  border-radius: 8px;
  overflow: hidden;
}

.admin-social-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--admin-bg-soft, #f5f7fa);
  border-bottom: 1px solid var(--admin-border-2, #ebeef5);
}

.admin-social-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--admin-text, #303133);
}

.admin-social-section__title .layui-icon {
  font-size: 16px;
  color: var(--admin-primary, #8a0ee8);
}

/* —— 预设按钮区 —— */
.admin-social-section__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px dashed var(--admin-border-2, #ebeef5);
}

.admin-social-preset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--admin-border-2, #dcdfe6);
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  color: var(--admin-text, #303133);
  cursor: pointer;
  transition: all 0.15s;
}

.admin-social-preset:hover:not(:disabled) {
  border-color: var(--preset-color, var(--admin-primary, #8a0ee8));
  color: var(--preset-color, var(--admin-primary, #8a0ee8));
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.admin-social-preset--added {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--admin-bg-soft, #f5f7fa);
}

.admin-social-preset__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
}

.admin-social-preset__label {
  white-space: nowrap;
}

.admin-social-preset .layui-icon {
  font-size: 12px;
  opacity: 0.6;
}

/* —— 卡片列表区 —— */
.admin-social-section__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

/* —— 空状态 —— */
.admin-social-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--admin-text-3, #c0c4cc);
  background: var(--admin-bg-soft, #fafafa);
  border-radius: 6px;
  border: 1px dashed var(--admin-border-2, #ebeef5);
}

/* —— 社交媒体卡片（通用） —— */
.admin-social-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--admin-border-2, #ebeef5);
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.admin-social-card:hover {
  border-color: var(--admin-primary-light, #b06bff);
  box-shadow: 0 2px 12px rgba(138, 14, 232, 0.06);
}

/* —— 链接卡片：图标 + 名称/URL 输入组 + 删除 —— */
.admin-social-card--link {
  align-items: center;
}

.admin-social-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
}

.admin-social-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* —— 名称输入框 —— */
.admin-social-card__name {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--admin-text, #303133);
  padding: 2px 0;
  width: 100%;
}

.admin-social-card__name:focus {
  border-bottom: 1px solid var(--admin-primary, #8a0ee8);
}

/* —— URL 输入框 —— */
.admin-social-card__url {
  border: 1px solid var(--admin-border-2, #dcdfe6);
  outline: none;
  border-radius: 4px;
  background: var(--admin-bg-soft, #f5f7fa);
  font-size: 13px;
  color: var(--admin-text-2, #606266);
  padding: 6px 10px;
  width: 100%;
  transition: border-color 0.15s, background 0.15s;
}

.admin-social-card__url:focus {
  border-color: var(--admin-primary, #8a0ee8);
  background: #fff;
}

/* —— 二维码卡片 —— */
.admin-social-card--qrcode {
  align-items: flex-start;
}

.admin-social-card__qr-area {
  width: 80px;
  height: 80px;
  border: 2px dashed var(--admin-border-2, #dcdfe6);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  background: var(--admin-bg-soft, #fafafa);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}

.admin-social-card__qr-area:hover {
  border-color: var(--admin-primary, #8a0ee8);
  background: var(--admin-primary-soft, rgba(138, 14, 232, 0.04));
}

.admin-social-card__qr-area--drag {
  border-color: var(--admin-primary, #8a0ee8);
  background: var(--admin-primary-soft, rgba(138, 14, 232, 0.08));
  border-style: solid;
}

.admin-social-card__qr-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-social-card__qr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--admin-text-3, #c0c4cc);
  font-size: 11px;
}

.admin-social-card__qr-empty .layui-icon {
  font-size: 22px;
}

/* —— 删除按钮 —— */
.admin-social-card__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--admin-text-3, #c0c4cc);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.admin-social-card__remove:hover {
  background: var(--admin-danger-soft, #fef0f0);
  color: var(--admin-danger, #f56c6c);
}

.admin-social-card__remove .layui-icon {
  font-size: 14px;
}

/* —— 响应式 —— */
@media (max-width: 640px) {
  .admin-social-card {
    flex-wrap: wrap;
  }
  .admin-social-card__body {
    width: 100%;
    flex: 1 1 100%;
  }
  .admin-social-card__remove {
    position: absolute;
  }
}

.admin-cat-mgr__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  height: 38px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  position: relative;
}

.admin-cat-mgr__item:hover {
  background: var(--admin-bg-soft, #f5f7fa);
}

.admin-cat-mgr__item--active {
  background: var(--admin-primary-soft, #e6f4ff);
}

.admin-cat-mgr__item--active .admin-cat-mgr__name {
  color: var(--admin-primary, #1677ff);
  font-weight: 500;
}

.admin-cat-mgr__handle {
  font-size: 12px;
  color: var(--admin-text-3, #c0c4cc);
  cursor: grab;
  flex-shrink: 0;
}

.admin-cat-mgr__handle:hover {
  color: var(--admin-text-2, #606266);
}

.admin-cat-mgr__item:has(.admin-cat-mgr__handle:active) .admin-cat-mgr__handle {
  cursor: grabbing;
}

.admin-cat-mgr__name {
  flex: 1;
  font-size: 13px;
  color: var(--admin-text, #303133);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-cat-mgr__actions {
  display: none;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.admin-cat-mgr__item:hover .admin-cat-mgr__actions,

.admin-cat-mgr__item--active .admin-cat-mgr__actions {
  display: inline-flex;
}

.admin-cat-mgr__action {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  font-size: 13px;
  color: var(--admin-text-2, #606266);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-cat-mgr__action:hover {
  background: var(--admin-bg-overlay, rgba(0,0,0,0.06));
  color: var(--admin-primary, #1677ff);
}

.admin-cat-mgr__action--danger:hover {
  color: var(--admin-danger, #f56c6c);
}

.admin-cat-mgr__modal-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.admin-cat-mgr__divider {
  font-size: 11px;
  font-weight: 600;
  color: var(--admin-text-3, #909399);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 10px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--admin-border-light, #f0f0f0);
}

.admin-cat-mgr__divider:first-child {
  border-top: none;
  margin-top: 0;
}

.admin-cat-mgr__color {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.admin-cat-mgr__count {
  font-size: 11px;
  color: var(--admin-text-3, #909399);
  background: var(--admin-bg-overlay, rgba(0,0,0,0.04));
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.admin-cat-mgr__list--manage .admin-cat-mgr__actions {
  display: inline-flex;
}

.admin-cat-mgr__list--manage .admin-cat-mgr__handle {
  color: var(--admin-text-2, #606266);
}

.admin-filter--sm {
  height: 28px;
  padding: 0 24px 0 8px;
  font-size: 12px;
}

.admin-row--dragging {
  opacity: 0.5;
  background: var(--admin-bg-soft, #f5f7fa);
}

/* ====== 23. 补齐标签颜色变体（admin-tag--blue / --orange） ====== */
.admin-tag--blue { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
.admin-tag--orange { background: rgba(249, 115, 22, 0.1); color: #ea580c; }

/* ====== 24. 链接样式（admin-link） ====== */
.admin-link {
  color: var(--admin-primary, #7c3aed);
  text-decoration: none;
  transition: color 0.15s;
}
.admin-link:hover {
  text-decoration: underline;
  color: var(--admin-primary-deep, #5b21b6);
}

/* ====== 25. 卡片网格与卡片项（admin-cards-grid / admin-card-item） ====== */
.admin-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.admin-card-item {
  background: var(--admin-card, #fff);
  border: 1px solid var(--admin-border-2, #e4dfee);
  border-radius: var(--admin-radius, 10px);
  padding: 16px;
  transition: var(--admin-trans, 0.2s);
}
.admin-card-item:hover {
  border-color: var(--admin-primary-light, #c4b5fd);
  box-shadow: var(--admin-shadow-sm, 0 2px 8px rgba(0,0,0,0.04));
}
.admin-card-item__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--admin-text, #1a1326);
  margin-bottom: 6px;
}
.admin-card-item__desc {
  font-size: 12px;
  color: var(--admin-text-2, #6b7280);
  line-height: 1.5;
  margin-bottom: 10px;
}
.admin-card-item__meta {
  font-size: 11px;
  color: var(--admin-text-3, #9ca3af);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-card-item__actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--admin-border-light, #f3f0fa);
}

/* ====== 26. 详情网格（admin-detail-grid） ====== */
.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

/* ====== 27. FAQ 分类信息（admin-faq-cat-info） ====== */
.admin-faq-cat-info {
  font-size: 12px;
  color: var(--admin-text-2, #6b7280);
  padding: 8px 12px;
  background: var(--admin-bg-soft, #f3f0fa);
  border-radius: var(--admin-radius-sm, 6px);
  margin-bottom: 12px;
}

/* ====== 28. 内联输入（admin-input--inline） ====== */
.admin-input--inline {
  display: inline-block;
  width: auto;
  min-width: 80px;
}

/* ====== 29. 单选卡片（admin-radio-card） ====== */
.admin-radio-card {
  display: block;
  padding: 14px;
  border: 2px solid var(--admin-border-2, #e4dfee);
  border-radius: var(--admin-radius, 10px);
  cursor: pointer;
  transition: var(--admin-trans, 0.2s);
}
.admin-radio-card:hover {
  border-color: var(--admin-primary-light, #c4b5fd);
}
.admin-radio-card input { display: none; }
.admin-radio-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--admin-text, #1a1326);
  margin-bottom: 4px;
}
.admin-radio-card__desc {
  font-size: 12px;
  color: var(--admin-text-2, #6b7280);
  line-height: 1.5;
}
.admin-radio-card__body { padding-top: 4px; }
.admin-radio-card:has(input:checked) {
  border-color: var(--admin-primary, #7c3aed);
  background: var(--admin-primary-soft, rgba(124, 58, 237, 0.04));
}

/* ====== 30. 响应式表格容器（admin-table-responsive） ====== */
.admin-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ====== 30.5 统计卡片展开/收起（admin-stats.is-collapsed） ====== */
/* 点击 .js-toggle-stats 按钮切换 .admin-stats 的 .is-collapsed 类，
   收起时直接隐藏统计网格，由按钮文案/图标反映当前状态 */
.admin-stats.is-collapsed { display: none; }

/* ====== 31. 树形导航（admin-tree__） ====== */
.admin-tree__children {
  margin-left: 16px;
  border-left: 1px dashed var(--admin-border-2, #e4dfee);
  padding-left: 8px;
}
.admin-tree__content {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--admin-radius-sm, 6px);
  transition: background 0.15s;
}
.admin-tree__content:hover {
  background: var(--admin-bg-soft, #f3f0fa);
}
.admin-tree__actions {
  margin-left: auto;
  display: none;
  gap: 4px;
}
.admin-tree__content:hover .admin-tree__actions {
  display: flex;
}

/* ====== 32. 补齐残余类名（容器/JS 定位用） ====== */
.admin-cat-mgr__list { list-style: none; padding: 0; margin: 0; }
.admin-row { display: flex; gap: 20px; align-items: flex-start; }
.admin-social-row__label { min-width: 0; }
.admin-social-row__url { min-width: 0; }

/* ====== 33. 图片预览 Lightbox（admin-crud.js imagePreview 输出） ====== */
/* DOM 由 imagePreview() 动态创建，包含 mask/container/img/toolbar/btn，
   此处补充样式使其呈现深色磨砂遮罩 + 居中大图 + 底部胶囊工具栏 */
.admin-image-preview {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.admin-image-preview--show {
  opacity: 1;
  visibility: visible;
}
.admin-image-preview__mask {
  position: absolute;
  inset: 0;
  background: rgba(15, 10, 30, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.admin-image-preview__container {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.admin-image-preview__img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  transition: transform 0.15s ease;
}
.admin-image-preview__toolbar {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: rgba(26, 19, 38, 0.72);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 2;
}
.admin-image-preview__btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.admin-image-preview__btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.admin-image-preview__btn--close {
  background: rgba(220, 38, 38, 0.18);
  color: #fee2e2;
  margin-left: 8px;
}
.admin-image-preview__btn--close:hover {
  background: rgba(220, 38, 38, 0.35);
  color: #fff;
}
.admin-image-preview__counter {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  min-width: 50px;
  justify-content: center;
}

/* ====== 34. 文件上传组件样式（与 .admin-cover-upload 保持统一风格） ====== */
/* createFileUploader() 生成 .admin-file-upload DOM，结构与 .admin-cover-upload
   类似（左侧预览区 + 右侧按钮 + 提示），但原 admin.css 中完全缺少该系列
   样式，导致同一页面内图片上传规范、文件上传无样式。此处补齐。 */
.admin-file-upload {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.admin-file-upload__preview {
  position: relative;
  flex-shrink: 0;
  width: 200px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--admin-border-2);
  border-radius: var(--admin-radius-sm);
  background: var(--admin-bg-soft, #f5f7fa);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--admin-trans), box-shadow var(--admin-trans), background var(--admin-trans);
}
.admin-file-upload__preview:hover {
  border-color: var(--admin-primary-light);
  box-shadow: 0 0 0 3px var(--admin-primary-soft);
}
.admin-file-upload__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--admin-text-placeholder);
  text-align: center;
}
.admin-file-upload__placeholder i {
  font-size: 32px;
  transition: color var(--admin-trans);
}
.admin-file-upload__preview:hover .admin-file-upload__placeholder i {
  color: var(--admin-primary);
}
.admin-file-upload__placeholder span {
  font-size: 12px;
  line-height: 1.3;
  max-width: 160px;
}
.admin-file-upload__file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  width: 100%;
}
.admin-file-upload__icon {
  flex-shrink: 0;
  width: 40px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--admin-radius-sm);
  background: var(--admin-primary-soft);
  color: var(--admin-primary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.admin-file-upload__icon--default { background: var(--admin-bg-soft); color: var(--admin-text-secondary); }
.admin-file-upload__icon--pdf { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
.admin-file-upload__icon--doc,
.admin-file-upload__icon--docx { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
.admin-file-upload__icon--xls,
.admin-file-upload__icon--xlsx { background: rgba(22, 163, 74, 0.1); color: #16a34a; }
.admin-file-upload__icon--ppt,
.admin-file-upload__icon--pptx { background: rgba(234, 88, 12, 0.1); color: #ea580c; }
.admin-file-upload__icon--zip,
.admin-file-upload__icon--rar,
.admin-file-upload__icon--sevenz { background: rgba(120, 113, 108, 0.12); color: #78716c; }
.admin-file-upload__icon--txt { background: rgba(100, 116, 139, 0.1); color: #64748b; }
.admin-file-upload__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-file-upload__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--admin-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-file-upload__sub {
  font-size: 12px;
  color: var(--admin-text-secondary);
}
.admin-file-upload__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  padding-top: 4px;
}


/* ====== 35. 表单设计器：三栏布局 + 栅格画布 + 属性侧栏 + 草稿态 ====== */

/* 三栏容器：字段面板 + 画布 + 属性侧栏 */
.admin-designer--with-panel {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.admin-designer--with-panel .admin-designer__main { flex: 1; min-width: 0; }

/* 属性侧栏（内嵌于字段设计 Tab 右侧，始终可见） */
.admin-property-panel--field {
  flex: 0 0 320px;
  width: 320px;
  min-width: 320px;
  max-height: 620px;
  display: flex;
  flex-direction: column;
  background: var(--admin-card-bg, #fff);
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  overflow: hidden;
}
.admin-property-panel__header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--admin-border);
  background: var(--admin-bg);
  flex-shrink: 0;
}
.admin-property-panel__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: var(--admin-text);
}
.admin-property-panel__title .admin-field-type-tag { margin-left: auto; }
.admin-property-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}
.admin-property-panel__footer {
  padding: 10px 14px;
  border-top: 1px solid var(--admin-border);
  background: var(--admin-bg);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* 画布栅格行：12 列网格 */
.admin-designer__row { margin-bottom: 8px; }
.admin-designer__row--grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
}
.admin-designer__row--grid > .admin-field-card {
  grid-column: span var(--col-span, 12);
}

/* 表单预览栅格行：12 列网格（与设计器画布一致，修复"一行一个"问题） */
.admin-form-preview__row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.admin-form-preview__col { min-width: 0; }

/* 字段卡：纵向结构（header 在上 + 预览在下） */
.admin-field-card {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.admin-field-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.admin-field-card__preview {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--admin-border);
}
/* layout 类型（section/divider）卡片不显示预览分割线 */
.admin-field-card--layout .admin-field-card__preview { display: none; }
.admin-field-card--layout { padding: 8px 12px; }

/* 脏状态提示 */
.admin-designer__dirty-tip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  margin-left: 8px;
  background: var(--admin-warning-bg, #fff7e6);
  color: var(--admin-warning, #d97706);
  border-radius: var(--admin-radius-sm, 4px);
  font-size: 12px;
  font-weight: 500;
}

/* 属性侧栏内表单紧凑化 */
.admin-property-panel--field .admin-form__section { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--admin-border-light, #f0f0f0); }
.admin-property-panel--field .admin-form__section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.admin-property-panel--field .admin-form__section-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; color: var(--admin-text); }
.admin-property-panel--field .admin-form__group { margin-bottom: 12px; }
.admin-property-panel--field .admin-form__label { font-size: 12px; font-weight: 500; margin-bottom: 4px; }
.admin-property-panel--field .admin-form__hint { font-size: 11px; }
.admin-property-panel--field .admin-form__control--sm { padding: 5px 8px; font-size: 13px; }

/* 开关 + 文案行（属性侧栏内 is_required/is_searchable 等两列布局） */
.admin-switch--label-full {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  cursor: pointer;
}
.admin-switch--label-full .admin-switch__label { font-size: 12px; color: var(--admin-text-secondary); }

/* 实时预览容器（属性侧栏底部） */
.admin-prop__preview-body {
  padding: 10px;
  background: var(--admin-bg);
  border: 1px solid var(--admin-border-light, #f0f0f0);
  border-radius: var(--admin-radius-sm, 4px);
}
.admin-prop__preview-body .admin-field-preview { margin: 0; }

/* 预览态上传组件缩小尺寸 */
.admin-cover-upload--preview,
.admin-file-upload--preview { padding: 8px; }
.admin-cover-upload--preview .admin-cover-upload__preview { width: 120px !important; height: 72px !important; }
.admin-file-upload--preview .admin-file-upload__preview { min-height: 60px; }

/* 字段类型标签在卡片头部的紧凑样式 */
.admin-field-card .admin-field-type-tag { flex-shrink: 0; }

/* 高级管理折叠区（系统配置页：原生 details 增强） */
.admin-collapse {
  border: 1px solid var(--admin-border-light, #f0f0f0);
  border-radius: var(--admin-radius, 6px);
  background: var(--admin-card-bg, #fff);
  margin-top: 16px;
  overflow: hidden;
}
.admin-collapse > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  color: var(--admin-text, #333);
}
.admin-collapse > summary::-webkit-details-marker { display: none; }
.admin-collapse > summary .layui-icon { transition: transform .2s; font-size: 14px; color: var(--admin-text-secondary, #999); }
.admin-collapse[open] > summary .layui-icon { transform: rotate(90deg); }
.admin-collapse__body { padding: 0 16px 16px; }
.admin-collapse__hint { font-weight: 400; font-size: 12px; color: var(--admin-text-secondary, #999); margin-left: 4px; }

/* 画布栅格容器：卡片直接作为子元素，CSS grid 自动按 col_span 排版 */
.admin-designer__canvas {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  align-content: start;
}
.admin-designer__canvas .admin-field-card {
  grid-column: span var(--col-span, 12);
}
.admin-designer__canvas .admin-designer__empty {
  grid-column: 1 / -1;
}
/* 拖拽占位样式 */
.admin-designer__sort-ghost { opacity: 0.4; }
.admin-designer__sort-chosen { cursor: grabbing; }


/* ====== 36. 开关组件修复：补齐未带 admin-switch__input 类的原生 checkbox ====== */
/* 项目中部分开关 HTML 直接用 <input type="checkbox"> 未加 admin-switch__input 类，
   导致原生 checkbox 未隐藏（出现"单选框+开关"双重表现）。此规则统一兜底。 */
.admin-switch > input[type="checkbox"]:not(.admin-switch__input) {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.admin-switch > input[type="checkbox"]:not(.admin-switch__input):checked + .admin-switch__track {
  background: var(--admin-grad, var(--admin-primary, #6366f1));
}
.admin-switch > input[type="checkbox"]:not(.admin-switch__input):checked + .admin-switch__track .admin-switch__knob {
  transform: translateX(18px);
}
.admin-switch--sm > input[type="checkbox"]:not(.admin-switch__input):checked + .admin-switch__track .admin-switch__knob {
  transform: translateX(14px);
}
.admin-switch > input[type="checkbox"]:not(.admin-switch__input):focus-visible + .admin-switch__track {
  box-shadow: 0 0 0 4px var(--admin-primary-soft, rgba(99,102,241,0.2));
}
.admin-switch > input[type="checkbox"]:not(.admin-switch__input):disabled + .admin-switch__track {
  opacity: 0.5;
  cursor: not-allowed;
}
.admin-switch > input[type="checkbox"]:not(.admin-switch__input):disabled ~ .admin-switch__label {
  color: var(--admin-text-3, #999);
}
/* 卡片头部的迷你开关（启用/停用） */
.admin-field-card__switch { flex-shrink: 0; display: inline-flex; align-items: center; }
.admin-field-card__switch .admin-switch__track { width: 28px; height: 16px; }
.admin-field-card__switch .admin-switch__knob { width: 10px; height: 10px; top: 3px; left: 3px; }
.admin-field-card__switch input[type="checkbox"]:not(.admin-switch__input):checked + .admin-switch__track .admin-switch__knob {
  transform: translateX(12px);
}

/* ====== 37. 属性面板空状态 & 预览交互 ====== */
.admin-prop__empty {
  padding: 48px 20px !important;
  text-align: center;
}
.admin-prop__empty .admin-empty-state__icon {
  color: var(--admin-text-placeholder, #c4b5fd);
  margin-bottom: 14px;
}
.admin-prop__empty .admin-empty-state__icon i { font-size: 40px; }
.admin-prop__empty .admin-empty-state__text {
  font-size: 14px;
  font-weight: 600;
  color: var(--admin-text, #3b3548);
  margin-bottom: 6px;
}
.admin-prop__empty .admin-empty-state__hint {
  font-size: 12px;
  line-height: 1.6;
  color: var(--admin-text-2, #6b7280);
  max-width: 220px;
  margin: 0 auto;
}
/* 预览区控件可交互（演示态）：降低鼠标拦截，允许点击/输入 */
.admin-field-card__preview .admin-form__control,
.admin-field-card__preview .admin-select select,
.admin-field-card__preview input[type="text"],
.admin-field-card__preview input[type="email"],
.admin-field-card__preview input[type="tel"],
.admin-field-card__preview input[type="url"],
.admin-field-card__preview input[type="number"],
.admin-field-card__preview input[type="date"],
.admin-field-card__preview input[type="datetime-local"],
.admin-field-card__preview textarea {
  pointer-events: auto;
  cursor: text;
}
.admin-field-card__preview label,
.admin-field-card__preview .form-preview__option,
.admin-field-card__preview .admin-switch {
  pointer-events: auto;
  cursor: pointer;
}

/* ==================== 视频上传组件（createVideoUploader，文章编辑页视频专区） ==================== */
/* 布局：预览区(16:9) + 操作区(按钮/信息卡片/进度条)，与 .admin-cover-upload 风格统一 */
.admin-video-upload {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.admin-video-upload__preview {
  position: relative;
  flex-shrink: 0;
  width: 280px;
  height: 158px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--admin-border-2, #dcdfe6);
  border-radius: var(--admin-radius-sm, 6px);
  background: var(--admin-bg-soft, #f5f7fa);
  overflow: hidden;
  transition: border-color var(--admin-trans, 0.2s), box-shadow var(--admin-trans, 0.2s);
}
.admin-video-upload__preview:hover {
  border-color: var(--admin-primary-light, #0ea5e9);
  box-shadow: 0 0 0 3px var(--admin-primary-soft, rgba(14,165,233,0.12));
}
/* 拖拽上传高亮 */
.admin-video-upload__preview.is-dragover {
  border-color: var(--admin-primary, #0c4a6e);
  background: var(--admin-primary-soft, rgba(14,165,233,0.08));
}
.admin-video-upload__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--admin-text-placeholder, #a8abb2);
  font-size: 12px;
}
.admin-video-upload__placeholder .layui-icon {
  font-size: 36px;
  color: var(--admin-text-placeholder, #a8abb2);
  transition: color var(--admin-trans, 0.2s);
}
.admin-video-upload__preview:hover .admin-video-upload__placeholder .layui-icon {
  color: var(--admin-primary, #0c4a6e);
}
.admin-video-upload__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}
/* 浮动删除按钮：悬浮在预览区右上角（复用 .admin-cover-upload__delete 视觉风格） */
.admin-video-upload__delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--admin-trans, 0.2s), background var(--admin-trans, 0.2s);
  z-index: 2;
}
.admin-video-upload__delete i { font-size: 14px; line-height: 1; }
.admin-video-upload__delete:hover { background: var(--admin-danger, #dc2626); }
.admin-video-upload__preview:hover .admin-video-upload__delete { opacity: 1; visibility: visible; }

/* 操作区 */
.admin-video-upload__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-video-upload__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 文件信息卡片：grid 布局，label + value */
.admin-video-upload__info {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 6px 12px;
  padding: 10px 12px;
  background: var(--admin-bg-page, #f7f8fa);
  border-radius: var(--admin-radius-sm, 6px);
  font-size: 12px;
}
.admin-video-upload__info-row {
  display: contents;
}
.admin-video-upload__info-label {
  color: var(--admin-text-3, #909399);
  white-space: nowrap;
}
.admin-video-upload__info-row > span:last-child {
  color: var(--admin-text-1, #303133);
  word-break: break-all;
}

/* 状态标签 */
.admin-video-upload__tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 18px;
  font-weight: 500;
}
.admin-video-upload__tag--success {
  color: var(--admin-success, #16a34a);
  background: rgba(22, 163, 74, 0.1);
}
.admin-video-upload__tag--warning {
  color: var(--admin-warning, #d97706);
  background: rgba(217, 119, 6, 0.1);
}
.admin-video-upload__tag--info {
  color: var(--admin-text-2, #606266);
  background: rgba(96, 98, 102, 0.1);
}

/* 进度条（保留原样式） */
.admin-video-upload__progress {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-video-upload__bar-bg {
  flex: 1;
  height: 8px;
  background: var(--admin-bg-overlay, rgba(0,0,0,0.06));
  border-radius: 4px;
  overflow: hidden;
}
.admin-video-upload__progress .bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--admin-primary, #0c4a6e), var(--admin-accent, #0891b2));
  border-radius: 4px;
  transition: width 0.2s ease;
}
.admin-video-upload__progress .txt {
  font-size: 12px;
  color: var(--admin-text-2, #606266);
  min-width: 40px;
  text-align: right;
}

/* 响应式：窄屏下预览区与操作区上下排列 */
@media (max-width: 768px) {
  .admin-video-upload {
    flex-direction: column;
  }
  .admin-video-upload__preview {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 */
  }
  .admin-video-upload__placeholder {
    position: absolute;
    inset: 0;
  }
  .admin-video-upload__video {
    position: absolute;
    inset: 0;
  }
}

/* ====== 38. 日期范围筛选组件（admin-date-range） ====== */
/* 用于工具栏中的日期范围筛选，与 .admin-filter 视觉风格保持一致：
   - 外层容器带圆角边框、统一高度，与 select.admin-filter 并排无违和
   - 内部日期输入框去除独立边框，融入容器（避免"边框多余"问题）
   - label 与分隔符采用次级文字色，不抢主信息焦点 */
.admin-date-range {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 38px;
  border: 1px solid var(--admin-border-2, #dcdfe6);
  border-radius: var(--admin-radius-sm, 6px);
  background: var(--admin-card, #fff);
  font-size: 13px;
  transition: var(--admin-trans, border-color 0.2s, box-shadow 0.2s);
  flex-shrink: 0;
}

.admin-date-range:hover { border-color: var(--admin-primary-light, #b06bff); }
.admin-date-range:focus-within {
  border-color: var(--admin-primary, #8a0ee8);
  box-shadow: 0 0 0 4px var(--admin-primary-soft, rgba(138, 14, 232, 0.08));
}

.admin-date-range__label {
  white-space: nowrap;
  color: var(--admin-text-2, #6b7280);
  font-size: 13px;
  flex-shrink: 0;
}

.admin-date-range__input {
  /* 去除原生 date 输入的独立边框，融入容器 */
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--admin-text, #374151);
  padding: 6px 4px;
  cursor: pointer;
  font-family: inherit;
  /* 统一日期控件高度，避免与 select.admin-filter 不齐 */
  height: 28px;
  line-height: 1.4;
  /* 日期占位符颜色 */
}
.admin-date-range__input::placeholder { color: var(--admin-placeholder, #c0c4cc); }
/* WebKit 日期控件图标颜色统一（避免深色图标突兀） */
.admin-date-range__input::-webkit-calendar-picker-indicator {
  filter: invert(0.5);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.admin-date-range__input::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.admin-date-range__sep {
  color: var(--admin-text-3, #c0c4cc);
  flex-shrink: 0;
  user-select: none;
}

/* 响应式：小屏下日期范围容器换行自适应 */
@media (max-width: 768px) {
  .admin-date-range {
    width: 100%;
    height: auto;
    padding: 8px 12px;
    flex-wrap: wrap;
  }
  .admin-date-range__input { flex: 1; min-width: 120px; }
}