/* ============================================================
 * skin.css —— 后台外观皮肤（现代 · 浅色 · 纯色 · 少线条）
 * ------------------------------------------------------------
 * 设计原则（按主人要求）：
 *   ★ 不要那么多线 —— 卡片一律「无边框 + 极淡阴影」，
 *     输入框用「浅灰填充 + 无边框」，靠色块而不是描边划分区域。
 *   ★ 不要渐变 —— 强调色统一用站点紫 #6366f1 纯色。
 *   ★ Decap logo 保留 —— 不做品牌替换。
 *
 * ⚠️ Decap 3.16 的类名是 emotion 生成的哈希名，但**哈希里带组件名**
 *   （例如 css-1ff92bv-SidebarContainer-card-card），所以用
 *   [class*="SidebarContainer"] 这种「片段匹配」是稳的。
 *
 * ⚠️ 两个必须遵守的写法：
 *   1. **每条选择器前面挂 body**（`body [class*="X"]`）。
 *      emotion 的样式是 CMS 启动后才注入 <head> 的，位置在本文件之后；
 *      同权重下后者胜出。`body [class*=...]` 权重 (0,1,1) 高于单个类 (0,1,0)，
 *      这样才压得住，不必满屏 !important。
 *   2. 只动颜色/圆角/阴影/间距，不动 display/定位 —— 免得把布局搞散。
 *
 * ⚠️ 升级 /admin/vendor/decap-cms-*.js 后请重跑 tools/verify-admin-skin.js，
 *   类名片段可能变（脚本会断言关键片段还在）。
 * ============================================================ */

:root {
  --sk-accent: #6366f1;
  --sk-accent-soft: #eef0fe;
  --sk-bg: #f5f6fa;
  --sk-surface: #ffffff;
  --sk-fill: #f4f5fa;        /* 输入框等「填充式」控件底色（替代描边） */
  --sk-line: #e9ebf2;        /* 只在必须分层的地方用一次极淡的线 */
  --sk-text: #1e2233;
  --sk-text-2: #5b6178;
  --sk-text-3: #8f95ab;
  --sk-radius: 12px;
  --sk-radius-sm: 9px;
  --sk-shadow-sm: 0 1px 2px rgba(24, 28, 48, .05);
  --sk-shadow: 0 6px 18px rgba(24, 28, 48, .07);
  --sk-shadow-lg: 0 18px 48px rgba(24, 28, 48, .14);
  --sk-ring: 0 0 0 3px rgba(99, 102, 241, .16);
  --sk-font: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
}

/* ==================== 基底 ==================== */
body,
body [class*="AppMainContainer"],
body [class*="CollectionContainer"],
body [class*="EditorContainer"] {
  font-family: var(--sk-font);
  -webkit-font-smoothing: antialiased;
}
body [class*="AppMainContainer"] {
  background: var(--sk-bg) !important;
  color: var(--sk-text);
}

::selection { background: rgba(99, 102, 241, .22); }

/* 细一点的滚动条 */
body ::-webkit-scrollbar { width: 10px; height: 10px; }
body ::-webkit-scrollbar-track { background: transparent; }
body ::-webkit-scrollbar-thumb {
  background: #d5d9e6; border: 3px solid transparent; border-radius: 999px;
  background-clip: padding-box;
}
body ::-webkit-scrollbar-thumb:hover { background: #bcc2d4; background-clip: padding-box; border: 3px solid transparent; }

/* 键盘可达性：统一焦点环 */
body :focus-visible { outline: 2px solid rgba(99, 102, 241, .55); outline-offset: 2px; }

/* ==================== 顶部条 ==================== */
body header[class*="AppHeader"] {
  background: rgba(255, 255, 255, .9) !important;
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--sk-line) !important;   /* 顶栏与内容之间留一条线，滚动时不糊在一起 */
  box-shadow: none !important;
}
body [class*="AppHeaderNavLink"] {
  border-radius: 999px !important;
  border: 0 !important;
  color: var(--sk-text-2) !important;
  font-weight: 600 !important;
  letter-spacing: .2px;
  transition: background .16s ease, color .16s ease;
}
body [class*="AppHeaderNavLink"]:hover { background: var(--sk-fill) !important; color: var(--sk-text) !important; }
/* ⚠️ 选中态必须用真实标记类 .header-link-active / .sidebar-active：
   emotion 会把「所有变体名」都塞进 class 串（每个链接都带 buttonActive、
   sidebarNavLinkActive 字样），用 [class*="...Active"] 匹配会把未选中项一起点亮。 */
body [class*="AppHeaderNavLink"].header-link-active {
  background: var(--sk-accent-soft) !important;
  color: var(--sk-accent) !important;
}
body [class*="AppHeaderNavLink"].header-link-active * { color: var(--sk-accent) !important; }
body [class*="AppHeaderSiteLink"] { color: var(--sk-text-3) !important; font-weight: 500 !important; }
body [class*="AppHeaderSiteLink"]:hover { color: var(--sk-accent) !important; }
body [class*="AvatarDropdownButton"],
body [class*="AvatarPlaceholderIcon"] {
  background: var(--sk-accent) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ==================== 按钮（通用） ==================== */
/* 主按钮：纯色 */
body [class*="PublishButton"],
body [class*="CollectionTopNewButton"],
body [class*="AppHeaderQuickNewButton"] {
  background: var(--sk-accent) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: filter .16s ease;
}
body [class*="PublishButton"]:hover,
body [class*="CollectionTopNewButton"]:hover,
body [class*="AppHeaderQuickNewButton"]:hover { filter: brightness(.93); box-shadow: none !important; }
body [class*="PublishButton"] *,
body [class*="CollectionTopNewButton"] *,
body [class*="AppHeaderQuickNewButton"] * { color: #fff !important; }

/* 次级按钮：无边框，浅灰填充 */
body [class*="ToolbarButton"]:not([class*="PublishButton"]),
body [class*="ControlButton"],
body [class*="ViewControlsButton"],
body [class*="StyledToolbarButton"],
body [class*="ToolbarToggle"] {
  border-radius: 999px !important;
  border: 0 !important;
  background: var(--sk-fill) !important;
  color: var(--sk-text-2) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background .16s ease, color .16s ease;
}
body [class*="ToolbarButton"]:not([class*="PublishButton"]):hover,
body [class*="ControlButton"]:hover,
body [class*="ViewControlsButton"]:hover,
body [class*="StyledToolbarButton"]:hover,
body [class*="ToolbarToggle"]:hover { background: #e9ebf4 !important; color: var(--sk-text) !important; }
/* 危险操作（删除）：淡红填充，不加边框 */
body [class*="DeleteButton"] { background: #fdf0f2 !important; color: #cf3f55 !important; }
body [class*="DeleteButton"]:hover { background: #fbe3e7 !important; }
body [class*="DeleteButton"] * { color: #cf3f55 !important; }

/* 圆角图标按钮（预览/编辑切换） */
body [class*="ButtonRound"] {
  border-radius: 10px !important;
  border: 0 !important;
  background: var(--sk-fill) !important;
  color: var(--sk-text-2) !important;
}
body [class*="ButtonRound"]:hover { background: var(--sk-accent-soft) !important; color: var(--sk-accent) !important; }

/* ==================== 侧栏 ==================== */
body [class*="SidebarContainer"] {
  background: var(--sk-surface) !important;
  border: 0 !important;
  border-radius: var(--sk-radius) !important;
  box-shadow: var(--sk-shadow-sm) !important;
}
body [class*="SidebarHeading"] {
  color: var(--sk-text-3) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}
body [class*="SearchInput"] {
  background: var(--sk-fill) !important;
  border: 0 !important;
  border-radius: var(--sk-radius-sm) !important;
  color: var(--sk-text) !important;
  /* ⚠️ 左侧必须留出放大镜的位置：默认样式就是靠 padding-left 让位的，
     覆盖 padding 时漏掉会压住 placeholder 文字（"earch all"） */
  padding: 9px 12px 9px 34px !important;
  transition: background .16s ease, box-shadow .16s ease;
}
body [class*="SearchInput"]:focus {
  background: #fff !important;
  box-shadow: var(--sk-ring) !important;
  outline: none !important;
}
body [class*="SidebarNavLink"] {
  border-radius: var(--sk-radius-sm) !important;
  border: 0 !important;
  box-shadow: none !important;      /* 默认选中态挂了一条粗色条，拍掉，只用底色表达选中 */
  color: var(--sk-text-2) !important;
  font-weight: 600 !important;
  transition: background .16s ease, color .16s ease;
}
body [class*="SidebarNavLink"]:hover { background: var(--sk-fill) !important; color: var(--sk-text) !important; }
body [class*="SidebarNavLink"].sidebar-active {
  background: var(--sk-accent-soft) !important;
  color: var(--sk-accent) !important;
}
body [class*="SidebarNavLink"].sidebar-active * { color: var(--sk-accent) !important; }

/* ==================== 列表页 ==================== */
body [class*="CollectionTopContainer"] {
  background: var(--sk-surface) !important;
  border: 0 !important;
  border-radius: var(--sk-radius) !important;
  box-shadow: var(--sk-shadow-sm) !important;
}
body [class*="CollectionTopHeading"] { color: var(--sk-text) !important; font-weight: 700 !important; letter-spacing: -.01em; }
body [class*="CollectionTopDescription"] { color: var(--sk-text-2) !important; line-height: 1.85 !important; }
body [class*="CardsGrid"] { background: transparent !important; }

body [class*="ListCard"] {
  background: var(--sk-surface) !important;
  border: 0 !important;
  border-radius: var(--sk-radius-sm) !important;
  box-shadow: var(--sk-shadow-sm) !important;
  transition: box-shadow .16s ease, transform .16s ease;
}
body [class*="ListCard"]:hover {
  box-shadow: var(--sk-shadow) !important;
  transform: translateY(-1px);
}
body [class*="ListCardLink"] { color: var(--sk-text) !important; }
body [class*="ListCardTitle"] { color: var(--sk-text) !important; font-weight: 600 !important; }
body [class*="TitleIcons"] { color: var(--sk-accent) !important; }
body [class*="CollectionControlsContainer"] { color: var(--sk-text-2) !important; }

/* ==================== 编辑器 ==================== */
body [class*="ToolbarContainer"] {
  background: rgba(255, 255, 255, .93) !important;
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--sk-line) !important;
  box-shadow: none !important;
}
body [class*="ToolbarSectionBackLink"] { color: var(--sk-text-3) !important; }
body [class*="ToolbarSectionBackLink"]:hover { color: var(--sk-accent) !important; }
body [class*="BackCollection"] { color: var(--sk-text) !important; font-weight: 600 !important; }
body [class*="BackArrow"] { color: var(--sk-text-3) !important; }

/* 状态徽标（草稿 / 已修改 / 已发布）：纯色底、无边框 */
body [class*="BackStatus"],
body [class*="textBadge"] {
  border-radius: 999px !important;
  border: 0 !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  background: var(--sk-fill) !important;
  color: var(--sk-text-2) !important;
}
body [class*="textBadgeDanger"] { background: #fdf0f2 !important; color: #cf3f55 !important; }
body [class*="textBadgeSuccess"] { background: #eaf8f1 !important; color: #17805a !important; }

body [class*="ControlPaneContainer"],
body [class*="PreviewPaneContainer"] { background: var(--sk-bg) !important; }
body [class*="StyledSplitPane"] { background: var(--sk-bg) !important; }
body [class*="StyledSplitPane"], body [class*="StyledSplitPane"] .Pane {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
body .Resizer {
  background: transparent !important;
  border: 0 !important;
  opacity: 1 !important;
  transition: background .16s ease;
}
/* 细线就好：悬停淡染色、真按住拖才实色（太粗会像一条蓝杠横在中间） */
body .Resizer:hover { background: rgba(99, 102, 241, .22) !important; }
body .Resizer:active { background: var(--sk-accent) !important; }

/* 字段块：不要外框，白卡片直接用底色和极淡阴影区分（少一条线） */
body [class*="ControlContainer"] {
  background: var(--sk-surface) !important;
  border: 0 !important;
  border-radius: var(--sk-radius) !important;
  box-shadow: var(--sk-shadow-sm) !important;
  margin-top: 16px !important;
  padding: 16px 18px !important;
  transition: box-shadow .18s ease;
}
body [class*="ControlContainer"]:hover { box-shadow: var(--sk-shadow) !important; }
body [class*="ControlTopbar"] { background: transparent !important; border: 0 !important; padding: 0 0 8px !important; }
body [class*="FieldLabel"] {
  /* ★ 默认是 #dfdfe3 灰底、3px 圆角的「文件夹小标签」，很土 → 拍平成干净的标题 */
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  font-size: 12.5px !important;
  letter-spacing: .01em;
  color: var(--sk-text) !important;
  font-weight: 600 !important;
}
body [class*="ControlHint"] {
  color: var(--sk-text-3) !important;
  font-size: 12px !important;
  line-height: 1.75 !important;
  margin-top: 8px !important;
}
body [class*="PreviewPaneFrame"] {
  background: #fff !important;
  border: 0 !important;
  border-radius: var(--sk-radius) !important;
  box-shadow: var(--sk-shadow-sm) !important;
}

/* 输入框 / 文本域 / 下拉：浅灰填充、无边框（靠色块而不是描边）
   ⚠️ 必须按**结构**抓：Decap 普通文本框的类名是纯哈希（如 css-83wr9v），
      不带组件名，所以 [class*="TextControl"] input 根本匹配不到 —— 它默认带
      `2px solid #dfdfe3` 边框和 `0 5px 5px` 的怪圆角，正是「一圈线 + 圆角框」的来源。
   ⚠️ 日期字段（type=datetime-local）**故意排除在外**：主人点名要保留那圈圆角框，
      它由文件末尾「③ 日期字段」那条规则单独画。
      ★ 这里必须写 :not([type="datetime-local"])，不能在末尾靠后置规则去压 ——
        `:not()` 会把参数的选择器权重也算进去，这条的权重是 (0,4,2)，
        末尾那条只有 (0,1,2)，同样都是 !important 时**权重高的赢**，
        后置规则压不住（踩过：日期框怎么改都不出现）。 */
body [class*="ControlPaneContainer"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="datetime-local"]),
body [class*="ControlPaneContainer"] textarea,
body [class*="ControlPaneContainer"] select,
body [class*="TextControl"] input,
body [class*="StringControl"] input,
body [class*="NumberControl"] input {
  background: var(--sk-fill) !important;
  border: 0 !important;
  border-radius: var(--sk-radius-sm) !important;
  color: var(--sk-text) !important;
  box-shadow: none !important;
  transition: background .16s ease, box-shadow .16s ease;
}
/* 间距收紧一点（Decap 默认 16px 20px 偏空），日期控件自带内边距就不动它 */
body [class*="ControlPaneContainer"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="datetime-local"]),
body [class*="ControlPaneContainer"] textarea { padding: 12px 15px !important; }

body [class*="ControlPaneContainer"] input:not([type="checkbox"]):not([type="radio"]):not([type="datetime-local"]):focus,
body [class*="ControlPaneContainer"] textarea:focus,
body [class*="ControlPaneContainer"] select:focus,
body [class*="TextControl"] input:focus,
body [class*="StringControl"] input:focus {
  background: #fff !important;
  box-shadow: var(--sk-ring) !important;
  outline: none !important;
}
body [class*="ControlPaneContainer"] input::placeholder,
body [class*="ControlPaneContainer"] textarea::placeholder { color: #a9aec2 !important; }

/* 控件的「外壳」也别画线：Decap 默认给这些外层容器也描了 2px 灰边，
   结果就是「框里套框」——主人说的「不要那么多线 / 一圈圆角框」主要指这个。
   ⚠️ 后两个是 Decap 3.16.2 里的纯哈希类（外壳没带组件名，只能用哈希抓）；
      升级 /admin/vendor/decap-cms-*.js 后跑 tools/verify-admin-skin.js
      的「描边普查」断言，会立刻报出来还差哪几个。 */
body [class*="DateTimeControl"],
body [class*="ImageWrapper"],
body [class*="FileWidget"],
body [class*="ObjectControl"],
body .css-83wr9v,
body .css-12rw7xp {
  border: 0 !important;
  box-shadow: none !important;
}
body [class*="DateTimeControl"] { background: transparent !important; }
body [class*="ImageWrapper"] {
  background: var(--sk-fill) !important;
  border-radius: var(--sk-radius-sm) !important;
}
/* 日期字段右侧的 Now / Clear 也走填充式 */
body [class*="DateTimeControl"] button {
  background: var(--sk-fill) !important;
  border: 0 !important;
  border-radius: var(--sk-radius-sm) !important;
  color: var(--sk-text-2) !important;
}
body [class*="DateTimeControl"] button:hover { background: #e9ebf4 !important; color: var(--sk-text) !important; }

/* 开关（布尔字段）：开 = 纯色紫 */
body [class*="ToggleBackground"] {
  border-radius: 999px !important;
  background: #e3e6f0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
body [class*="ToggleHandle"] { box-shadow: 0 1px 3px rgba(24, 28, 48, .25) !important; }
body [class*="ToggleBackground"][style*="rgb(99, 102, 241)"],
body [class*="ToggleBackground"][style*="#6366f1"] { background: var(--sk-accent) !important; }

/* 富文本：工具栏与正文靠底色分层，不用线 */
body [class*="EditorControlBar"] {
  background: var(--sk-fill) !important;
  border: 0 !important;
  border-radius: var(--sk-radius-sm) var(--sk-radius-sm) 0 0 !important;
}
body [class*="StyledToolbarButton"],
body [class*="ToolbarDropdownWrapper"] {
  border: 0 !important;
  background: transparent !important;
  border-radius: 8px !important;
}
body [class*="StyledToolbarButton"]:hover { background: #e4e7f4 !important; }
body [class*="ToolbarToggleLabel"] { color: var(--sk-text-2) !important; font-weight: 600 !important; }
body [class*="editorStyles"] {
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 0 var(--sk-radius-sm) var(--sk-radius-sm) !important;
  color: var(--sk-text) !important;
  line-height: 1.9 !important;
}
body [class*="editorStyles"] h2,
body [class*="editorStyles"] h3 { color: var(--sk-text) !important; font-weight: 700 !important; }
body [class*="editorStyles"] blockquote {
  border-left: 3px solid var(--sk-accent) !important;
  background: var(--sk-accent-soft) !important;
  border-radius: 0 var(--sk-radius-sm) var(--sk-radius-sm) 0 !important;
  color: var(--sk-text-2) !important;
}
body [class*="editorStyles"] code,
body [class*="editorStyles"] pre {
  background: var(--sk-fill) !important;
  border-radius: 8px !important;
  color: #b4305c !important;
}
body [class*="editorStyles"] a { color: var(--sk-accent) !important; }

/* ==================== 弹层 / 下拉 / 提示 ==================== */
body [role="dialog"],
body [class*="Modal"],
body [class*="Dialog"] {
  border-radius: 16px !important;
  box-shadow: var(--sk-shadow-lg) !important;
  border: 0 !important;
}
body [class*="DialogHeader"], body [class*="ModalHeader"] { border-bottom: 1px solid var(--sk-line) !important; }
body [class*="DialogFooter"], body [class*="ModalFooter"] { border-top: 1px solid var(--sk-line) !important; }

body .Toastify__toast {
  border-radius: var(--sk-radius) !important;
  box-shadow: var(--sk-shadow-lg) !important;
  font-family: var(--sk-font) !important;
}

/* ==================== 自定义控件：标签（tgw-*）= */
body .tgw-wrap { gap: 8px !important; }
body .tgw-chip {
  background: var(--sk-accent-soft) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--sk-accent) !important;
  font-weight: 600 !important;
}
body .tgw-chip-text { color: var(--sk-accent) !important; }
body .tgw-chip-x { color: #8f95ab !important; }
body .tgw-chip-x:hover { color: #cf3f55 !important; }
body .tgw-input {
  border-radius: var(--sk-radius-sm) !important;
  border: 1px solid transparent !important;
  background: var(--sk-fill) !important;
  color: var(--sk-text) !important;
}
body .tgw-input:focus {
  background: #fff !important;
  box-shadow: var(--sk-ring) !important;
  outline: none !important;
}
body .tgw-count { color: var(--sk-text-3) !important; }
body .tgw-box { border: 0 !important; background: transparent !important; }

/* 自动日期插件在字段下插的说明 */
body .ad-tip { color: var(--sk-text-3) !important; }

/* ==================== 登录页 ==================== */
body [class*="StyledAuthenticationPage"] { background: var(--sk-bg) !important; }

body [class*="LoginButton"] {
  background: var(--sk-accent) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 12px 28px !important;
  min-height: 44px !important;
  box-shadow: none !important;
  transition: filter .16s ease;
}
body [class*="LoginButton"]:hover { filter: brightness(.93); }
body [class*="LoginButton"] * { color: #fff !important; fill: #fff !important; }

body [class*="GoBackButtonStyle"] {
  color: var(--sk-text-3) !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  transition: color .16s ease;
}
body [class*="GoBackButtonStyle"]:hover { color: var(--sk-accent) !important; }
body [class*="GoBackButtonStyle"] * { color: inherit !important; }

/* ============================================================
 * ★ 字段区排版（第二轮，按主人要求）
 *   1. 4 个开关不要各占一行
 *   2. 字段下方的注释不要一股脑堆在下面
 *   3. 日期那圈圆角框保留
 * ============================================================ */

/* ---------- ① 字段列表改成「可换行的弹性列」：开关两两并排 ----------
 * Decap 把每个字段渲染成一张卡片，默认一列排到底。4 个布尔开关
 * （只发画廊 / 加入首页轮播图 / 置顶 / 存为草稿）每个独占一行，白白拉长列表。
 *   · 普通字段 flex-basis 100% → 仍独占一行（文本框需要整行宽度）
 *   · 布尔字段 flex-basis 50%  → 两两并排，4 个正好 2×2
 * 用 :has() 精确挑出「内部有开关的卡片」，不必改 config.yml。
 *   ⚠️ :not([class*="PreviewPaneContainer"]) 是为了避开外层那个同名容器
 *      （Decap 3.16 里外层叫 PreviewPaneContainer-ControlPaneContainer，
 *       把它设成 flex 会动到分栏布局）。 */
body [class*="ControlPaneContainer"]:not([class*="PreviewPaneContainer"]) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  gap: 14px !important;
}
body [class*="ControlPaneContainer"]:not([class*="PreviewPaneContainer"]) > [class*="ControlContainer"] {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 0 !important;      /* 间距统一交给父级 gap，否则和 16px margin 叠成 30px */
  overflow: visible !important;  /* 注释浮层要能溢出卡片 */
}
body [class*="ControlPaneContainer"]:not([class*="PreviewPaneContainer"]) > [class*="ControlContainer"]:has([class*="BooleanBackground"]) {
  flex: 0 1 calc(50% - 7px) !important;   /* 7 = gap 14 的一半 */
  width: calc(50% - 7px) !important;
  padding: 13px 16px !important;
}

/* ---------- ② 字段注释：收成标签旁一颗 ⓘ，鼠标移上去才展开 ----------
 * 注释**仍在原地**（DOM 不动、文字不丢），只是从「占一整行」变成「一颗小圆点」。
 * Decap 的注释是 <p class="...ControlHint...">，正好是字段卡片的直接子元素，
 * 所以卡片设 position:relative 后可以直接绝对定位到右上角。 */
body [class*="ControlContainer"] { position: relative; }
body [class*="ControlHint"] {
  position: absolute !important;
  top: 11px !important;
  right: 14px !important;
  width: 20px !important;
  height: 20px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;     /* 收起时把整段文字裁掉，只留 ::before 画的圆点 */
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--sk-fill) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: help;
  z-index: 6;
  transition: background .16s ease;
}
body [class*="ControlHint"] * { color: transparent !important; font-size: 0 !important; }
body [class*="ControlHint"]::before {
  content: "i";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: italic 700 11px/20px Georgia, "Times New Roman", serif;
  color: var(--sk-text-3);
}
body [class*="ControlHint"]:hover::before { content: none; }
body [class*="ControlHint"]:hover {
  width: 330px !important;
  height: auto !important;
  max-height: 340px !important;
  overflow: auto !important;
  padding: 11px 13px !important;
  border-radius: var(--sk-radius-sm) !important;
  background: #fff !important;
  border: 1px solid var(--sk-line) !important;
  box-shadow: var(--sk-shadow-lg) !important;
  color: var(--sk-text-2) !important;
  font-size: 12px !important;
  line-height: 1.75 !important;
  z-index: 60;
}
body [class*="ControlHint"]:hover * { color: inherit !important; font-size: inherit !important; }
/* 触屏兜底：触屏没有 hover，而 <p> 不可聚焦 ⇒ :focus 用不上，
   所以补一条 :active —— 手指按住那一下也能把说明展开。 */
body [class*="ControlHint"]:active {
  width: 330px !important;
  height: auto !important;
  overflow: auto !important;
  padding: 11px 13px !important;
  color: var(--sk-text-2) !important;
  font-size: 12px !important;
  background: #fff !important;
}

/* ---------- ③ 日期字段：保留一圈圆角框（主人点名要留） ----------
 * 上面那条通用输入框规则已经用 :not([type="datetime-local"]) 把日期让出来了，
 * 所以这里直接画框即可，不需要跟谁比权重。 */
body [class*="DateTimeControl"] input,
body [class*="ControlPaneContainer"] input[type="datetime-local"] {
  background: #fff !important;
  border: 1px solid #e2e5f0 !important;
  border-radius: var(--sk-radius-sm) !important;
  color: var(--sk-text) !important;
  box-shadow: none !important;
  padding: 10px 13px !important;
}
body [class*="DateTimeControl"]:focus-within input,
body [class*="ControlPaneContainer"] input[type="datetime-local"]:focus {
  border-color: var(--sk-accent) !important;
  box-shadow: var(--sk-ring) !important;
  background: #fff !important;
  outline: none !important;
}