/* =============================================================================
   澄光 · 映间（MARGIN）皮肤 [2026-11-07]
   -----------------------------------------------------------------------------
   参考：jiuyang5354/bilibili-margin 的设计语言 —— 编辑式排版 + 克制的纸面感。
   和液态玻璃的根本区别：玻璃是"有厚度的悬浮材质"，映间是"一张摊平的纸"。

   四条原则（提炼自参考项目的 01-base.css）：
     1. 画布是暖白纸（#f5f4f1）/ 近黑墨（#111112），纯色，不要任何光晕渐变
     2. 表面是不透明的白，靠 0.5px 发丝环 + 6 层软阴影分层，不靠模糊
     3. 排版分工：衬线只做 ≥16px 的标题与数字，无衬线做正文，等宽只做眉标与时间
     4. 间距 4px 网格；圆角内 = 外 − 间距（Perfect Corner Radius）

   作用域：html[data-skin='margin']:not([data-editorial='true'])。切回 liquid / default / autumn 零残留。
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. 字体 · 西文三件套
      Instrument Serif 做标题与数字（只有 21KB）；Geist 做正文；
      Geist Mono 做眉标、时间戳、进度数字。
      中文刻意不引网络字体：参考项目自研的 Margin Serif SC 有 3MB+，
      按字符切片要 68 个文件，为了一个聊天站不值当。标题中文走系统字重，
      只在纯英文/数字场景享用衬线。
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/geist-sans-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/geist-sans-medium-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/geist-mono-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------------------
   1. 令牌 · 浅色（纸面）
      所有分层都从 --ink / --surface 派生，改这两个值整页跟着变。
   --------------------------------------------------------------------------- */
html[data-skin='margin'] {
  color-scheme: light;

  /* 纸张与墨色：参考项目实测对比度，faint 已加深到 4.5:1 */
  --m-canvas:   #f5f4f1;
  --m-surface:  #ffffff;
  --m-ink:      #17181a;
  --m-muted:    #5f6167;
  --m-faint:    #66686d;
  --m-line:     rgb(23 24 26 / 0.09);
  --m-chip:     rgb(23 24 26 / 0.05);
  --shadow-rgb: 24 22 20;

  /* 6 层软阴影：模拟近距离接触 + 中距离扩散 + 远距离淡影 */
  --sh-xs: 0 1px 1px rgb(var(--shadow-rgb) / 0.05), 0 2px 2px rgb(var(--shadow-rgb) / 0.04),
           0 5px 3px rgb(var(--shadow-rgb) / 0.03), 0 8px 3px rgb(var(--shadow-rgb) / 0.01);
  --sh-sm: 0 2px 4px rgb(var(--shadow-rgb) / 0.06), 0 7px 7px rgb(var(--shadow-rgb) / 0.05),
           0 16px 9px rgb(var(--shadow-rgb) / 0.03), 0 29px 11px rgb(var(--shadow-rgb) / 0.01);
  --sh-md: 0 4px 8px rgb(var(--shadow-rgb) / 0.08), 0 14px 14px rgb(var(--shadow-rgb) / 0.07),
           0 32px 19px rgb(var(--shadow-rgb) / 0.04), 0 57px 22px rgb(var(--shadow-rgb) / 0.01);
  --sh-lg: 0 7px 14px rgb(var(--shadow-rgb) / 0.12), 0 27px 25px rgb(var(--shadow-rgb) / 0.10),
           0 60px 34px rgb(var(--shadow-rgb) / 0.06), 0 106px 41px rgb(var(--shadow-rgb) / 0.02);
  --ring: 0 0 0 0.5px var(--m-line);

  /* ---- 画布：纯色，不带任何渐变。这是与液态玻璃最直观的分水岭 ---- */
  --bg-canvas: var(--m-canvas);

  /* ---- 表面：全部不透明，层级靠阴影而不是透明度 ---- */
  --surface-1:      var(--m-surface);
  --surface-2:      var(--m-surface);
  --surface-3:      var(--m-surface);
  --surface-sunken: var(--m-canvas);
  --surface-hover:  rgb(23 24 26 / 0.03);
  --surface-active: rgb(23 24 26 / 0.06);

  /* ---- 描边：发丝级。0.5px 在高分屏上是真正的细线 ---- */
  --border-glass:   transparent;
  --border-line:    var(--m-line);
  --border-strong:  rgb(23 24 26 / 0.16);
  --divider:        var(--m-line);

  --overlay: rgb(23 24 26 / 0.32);
  --overlay-blur: 0px;

  /* ---- 文字 ---- */
  --text-1: var(--m-ink);
  --text-2: var(--m-muted);
  --text-3: var(--m-faint);
  --text-4: var(--m-faint);
  --text-inverse: #ffffff;

  /* ---- 关闭玻璃：这是整套皮肤的开关 ---- */
  --glass-blur: 0px;
  --glass-blur-lg: 0px;
  --glass-saturate: 100%;
  --glass-highlight: none;
  --shadow-glass: var(--sh-md);

  /* ---- 圆角：22px 面板 / 12px 卡片 / 8px 小件，与参考项目一致 ---- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 22px;
  --r-full: 999px;

  /* ---- 字体 ---- */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
  /* 中文标题必须是宋体 —— 参考项目那张热力图卡片里「1 天打开过 B 站」就是宋体，
     这是整套"编辑式排版"的根，换成黑体就变成了普通后台。
     Instrument Serif 只负责西文；中文依次落到苹方宋 / 思源宋 / 系统宋体。 */
  --font-serif: 'Instrument Serif', 'Songti SC', 'SimSun', 'Noto Serif SC',
                'Source Han Serif SC', 'STSong', serif;

  /* ---- 字号：改用参考项目的整数阶梯，避免中文半像素发虚 ---- */
  --fs-2xs: 10px;
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-base: 13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  18px;
  --fs-2xl: 24px;
  --fs-3xl: 28px;
  --fs-4xl: 44px;

  /* ---- 品牌色保持澄光靛，只把气球质感压平 ---- */
  --brand-grad: linear-gradient(135deg, #5265d0 0%, #5265d0 100%);
  --bubble-mine-bg: #5265d0;
  --bubble-mine-fg: #ffffff;
  --badge-bg: #c93a4a;
}

/* ---------------------------------------------------------------------------
   2. 令牌 · 深色（墨面）
      参考项目暗色是 #111112 画布 + #1a1a1c 表面，阴影反相。
   --------------------------------------------------------------------------- */
html[data-skin='margin'][data-theme='dark'] {
  color-scheme: dark;
  --m-canvas:  #111112;
  --m-surface: #1a1a1c;
  --m-ink:     #ededee;
  --m-muted:   #b0b1b6;
  --m-faint:   #8a8b90;
  --m-line:    rgb(255 255 255 / 0.08);
  --m-chip:    rgb(255 255 255 / 0.06);
  --shadow-rgb: 0 0 0;

  --sh-xs: 0 1px 1px rgb(0 0 0 / 0.13), 0 2px 2px rgb(0 0 0 / 0.11),
           0 5px 3px rgb(0 0 0 / 0.07), 0 8px 3px rgb(0 0 0 / 0.02);
  --sh-sm: 0 2px 4px rgb(0 0 0 / 0.15), 0 7px 7px rgb(0 0 0 / 0.13),
           0 16px 9px rgb(0 0 0 / 0.08), 0 29px 11px rgb(0 0 0 / 0.02);
  --sh-md: 0 4px 8px rgb(0 0 0 / 0.20), 0 14px 14px rgb(0 0 0 / 0.18),
           0 32px 19px rgb(0 0 0 / 0.10), 0 57px 22px rgb(0 0 0 / 0.03);
  --sh-lg: 0 7px 14px rgb(0 0 0 / 0.31), 0 27px 25px rgb(0 0 0 / 0.27),
           0 60px 34px rgb(0 0 0 / 0.16), 0 106px 41px rgb(0 0 0 / 0.05);
  --ring: 0 0 0 0.5px rgb(255 255 255 / 0.12);

  --surface-hover:  rgb(255 255 255 / 0.05);
  --surface-active: rgb(255 255 255 / 0.09);
  --border-strong:  rgb(255 255 255 / 0.18);
  --overlay: rgb(0 0 0 / 0.55);

  --bubble-mine-bg: #4a5cc4;
}

/* ---------------------------------------------------------------------------
   3. 画布与容器
      tpl.js 给面板写了 rounded-[30px] 内联类，这里统一收到 22px。
   --------------------------------------------------------------------------- */
html[data-skin='margin']:not([data-editorial='true']) body {
  background: var(--m-canvas);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[data-skin='margin']:not([data-editorial='true']) .glass,
html[data-skin='margin']:not([data-editorial='true']) .glass-soft {
  background: var(--m-surface);
  border: 0.5px solid var(--m-line);
  box-shadow: var(--sh-md), var(--ring);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html[data-skin='margin']:not([data-editorial='true']) .glass-soft {
  box-shadow: var(--sh-xs), var(--ring);
}

html[data-skin='margin']:not([data-editorial='true']) aside.sidebar,
html[data-skin='margin']:not([data-editorial='true']) main {
  border-radius: 22px;
  background: var(--m-surface);
  border: 0.5px solid var(--m-line);
  box-shadow: var(--sh-md), var(--ring);
}

/* ---------------------------------------------------------------------------
   4. 排版
      衬线只出现在 ≥16px 的标题和纯数字上；正文一律无衬线。
      眉标是这套语言最便宜也最出效果的一招：等宽 + 大写 + 宽字距 + 极小的字号。
   --------------------------------------------------------------------------- */
html[data-skin='margin']:not([data-editorial='true']) .cx-eyebrow,
html[data-skin='margin']:not([data-editorial='true']) .eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--m-faint);
}

html[data-skin='margin']:not([data-editorial='true']) h1,
html[data-skin='margin']:not([data-editorial='true']) h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text-1);
}

html[data-skin='margin']:not([data-editorial='true']) h1 { font-size: 28px; line-height: 1.15; }
html[data-skin='margin']:not([data-editorial='true']) h2 { font-size: 20px; line-height: 1.2; }

/* 会话头：把原来的粗体标题换成"眉标 + 衬线标题"的编辑式组合 */
html[data-skin='margin']:not([data-editorial='true']) #head {
  border-bottom: 0.5px solid var(--m-line);
  padding: 18px 28px;
  background: transparent;
}

html[data-skin='margin']:not([data-editorial='true']) #head .top h1,
html[data-skin='margin']:not([data-editorial='true']) #head h1 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

html[data-skin='margin']:not([data-editorial='true']) #head .top .sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--m-faint);
  margin-top: 4px;
}

/* ---------------------------------------------------------------------------
   5. 侧栏 · 竖排导航
      原设计是"品牌软底 + 左侧竖条"，映间改成"白色药丸浮起"，
      和参考项目的分段控制器同一套语言。
   --------------------------------------------------------------------------- */
html[data-skin='margin']:not([data-editorial='true']) .vtab {
  border-radius: 10px;
  border: 0.5px solid transparent;
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: 0.02em;
  min-height: 42px;
  transition: background-color 0.15s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.15s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

html[data-skin='margin']:not([data-editorial='true']) .vtab:hover {
  background: var(--m-chip);
  color: var(--text-1);
}

html[data-skin='margin']:not([data-editorial='true']) .vtab.nav-active {
  background: var(--m-surface);
  border-color: var(--m-line);
  color: var(--text-1);
  font-weight: 500;
  box-shadow: var(--sh-xs), var(--ring);
}

/* 干掉原来的左侧竖条：映间不用色块标记选中 */
html[data-skin='margin']:not([data-editorial='true']) .vtab.nav-active::before { display: none; }
html[data-skin='margin']:not([data-editorial='true'])[data-theme='dark'] .vtab.nav-active { box-shadow: var(--sh-xs), var(--ring); }

/* ---------------------------------------------------------------------------
   6. 搜索框 · 胶囊
      参考项目的搜索是 28px 圆角的胶囊 + 内嵌实心按钮。
   --------------------------------------------------------------------------- */
html[data-skin='margin']:not([data-editorial='true']) .search {
  border-radius: 999px;
  background: var(--m-canvas);
  border: 0.5px solid var(--m-line);
  padding: 9px 16px;
  box-shadow: none;
  transition: background-color 0.2s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

html[data-skin='margin']:not([data-editorial='true']) .search:focus-within {
  background: var(--m-surface);
  border-color: var(--m-ink);
  box-shadow: none;
}

html[data-skin='margin']:not([data-editorial='true']) .search > span {
  color: var(--m-faint);
  font-size: 13px;
}

html[data-skin='margin']:not([data-editorial='true']) .search input::placeholder {
  color: var(--m-faint);
  font-size: 13px;
}

/* ---------------------------------------------------------------------------
   7. 会话列表
      真实类名是 .contact，选中态由 tpl.js 内联 Tailwind（bg-indigo-200/50 +
      ring-1 ring-indigo-300/60 + shadow-md）拼出来，所以只能定向覆盖：
      去 ring 靠覆盖 box-shadow，去底色靠 !important。
      映间不用彩色底选中，改用"白卡 + 发丝环 + 微阴影"，让内容自己说话。
   --------------------------------------------------------------------------- */
html[data-skin='margin']:not([data-editorial='true']) .contact {
  border-radius: 12px;
  border: 0.5px solid transparent;
  transition: background-color 0.15s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

html[data-skin='margin']:not([data-editorial='true']) .contact:hover {
  background: var(--m-chip);
}

/* theme.css 里有一条 `#tabContent .contact[class*="ring-indigo-300"]` 带 !important，
   ID 选择器权重 (1,2,0) 压过普通类组合，所以这里必须同样带上 #tabContent
   才够 (1,3,1) —— 只靠 html[data-skin] 前缀是不够的。 */
html[data-skin='margin']:not([data-editorial='true']) #tabContent .contact[class*='bg-indigo-200'] {
  background: var(--m-surface) !important;
  border-color: var(--m-line);
  box-shadow: var(--sh-xs), var(--ring) !important;
}

/* 深色下白色面板和深色面板都是暗的，只靠边框分不出来，
   必须把选中项抬亮一档（#232326）才看得出"当前在这一条"。 */
html[data-skin='margin']:not([data-editorial='true'])[data-theme='dark'] #tabContent .contact[class*='bg-indigo-200'] {
  background: #232326 !important;
  border-color: rgb(255 255 255 / 0.10);
  box-shadow: var(--sh-sm), var(--ring) !important;
}

/* ---------------------------------------------------------------------------
   8. 消息流
      去掉气泡的渐变与玻璃，改成纯色块 + 发丝环；自己的消息用品牌色实心。
   --------------------------------------------------------------------------- */
html[data-skin='margin']:not([data-editorial='true']) #messages {
  background: transparent;
}

/* 气泡宽度：theme.css 里 `main[data-cw] .bubble` 用 overflow-wrap:anywhere + min-width:0
   把气泡的固有宽度算成「一个字符」，短消息会被压成竖排（enhance.css 里同类问题有记录）。
   中文本来就能逐字换行，改成 break-word 足够断长链接，同时恢复 fit-content。 */
html[data-skin='margin']:not([data-editorial='true']) main[data-cw] .bubble {
  overflow-wrap: break-word;
  word-break: normal;
  width: fit-content;
  max-width: min(var(--bubble-max, 620px), 76%);
}

html[data-skin='margin']:not([data-editorial='true']) .bubble {
  border-radius: 14px;
  border: 0.5px solid var(--m-line);
  background: var(--m-surface);
  box-shadow: var(--sh-xs);
  font-size: 14px;
  line-height: 1.6;
}

html[data-skin='margin']:not([data-editorial='true']) .bubble.mine,
html[data-skin='margin']:not([data-editorial='true']) .msg.mine .bubble {
  background: var(--bubble-mine-bg);
  border-color: transparent;
  color: var(--bubble-mine-fg);
  box-shadow: var(--sh-sm);
}

/* 日期分隔：从这里开始用眉标语言，替代原来的居中胶囊 */
html[data-skin='margin']:not([data-editorial='true']) .day-sep,
html[data-skin='margin']:not([data-editorial='true']) .date-sep,
html[data-skin='margin']:not([data-editorial='true']) .cx-date-sep {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--m-faint);
}

/* 日期分隔：从"居中 + 两侧渐变线"改成"左侧眉标 + 右侧一条细线"。
   这是整套语言里最能体现编辑感的一处 —— 日期不再是一个胶囊，而是页边注。 */
html[data-skin='margin']:not([data-editorial='true']) #messages .cx-date {
  justify-content: flex-start;
  gap: 14px;
  margin: 30px 0 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--m-faint);
}

html[data-skin='margin']:not([data-editorial='true']) #messages .cx-date::before { display: none; }

html[data-skin='margin']:not([data-editorial='true']) #messages .cx-date::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: var(--m-line);
  background-image: none;
  opacity: 1;
}

/* 消息元信息：等宽小字，像印刷品的行首标注 */
html[data-skin='margin']:not([data-editorial='true']) .bubble .text-slate-400 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--m-faint) !important;
}

html[data-skin='margin']:not([data-editorial='true']) .bubble.mine .text-slate-400 {
  color: rgb(255 255 255 / 0.72) !important;
}

/* 头像：去掉两端渐变，改成纸面上的一个浅色方块 + 衬线字 */
html[data-skin='margin']:not([data-editorial='true']) .avatar,
html[data-skin='margin']:not([data-editorial='true']) .avatar.alt,
html[data-skin='margin']:not([data-editorial='true']) .avatar.peach {
  background: var(--m-canvas);
  color: var(--m-muted);
  border-radius: 10px;
  box-shadow: inset 0 0 0 0.5px var(--m-line);
  font-family: var(--font-serif);
  font-weight: 400;
}

html[data-skin='margin']:not([data-editorial='true'])[data-theme='dark'] .avatar,
html[data-skin='margin']:not([data-editorial='true'])[data-theme='dark'] .avatar.alt,
html[data-skin='margin']:not([data-editorial='true'])[data-theme='dark'] .avatar.peach {
  background: #26262a;
  color: var(--m-muted);
}

/* 会话列表上方那两个「＋ 好友 / ＋ 群聊」小胶囊：
   原来用的是 bg-indigo-200/40（被调色板收口成品牌软紫），在纸面上太扎眼。
   映间里它们是工具，不是重点 —— 改成 chip 底 + 发丝线 + 次要文字。
   用 title 属性定位，避免误伤页面里其它同样用 indigo 软底的小标签。 */
html[data-skin='margin']:not([data-editorial='true']) .sidebar button[title='添加好友'],
html[data-skin='margin']:not([data-editorial='true']) .sidebar button[title='发起群聊'],
html[data-skin='margin']:not([data-editorial='true']) .sidebar button[title='创建群聊'],
html[data-skin='margin']:not([data-editorial='true']) .sidebar .bg-indigo-200\/40 {
  background: var(--m-chip) !important;
  color: var(--m-muted) !important;
  box-shadow: inset 0 0 0 0.5px var(--m-line);
  border-radius: 8px;
  letter-spacing: 0;
  font-weight: 400;
}


/* 侧栏用户名：原来的品牌紫换成墨色，和正文同一层级 */
html[data-skin='margin']:not([data-editorial='true']) .sidebar .copy .font-semibold {
  color: var(--text-1);
  font-weight: 500;
  letter-spacing: 0.01em;
}

html[data-skin='margin']:not([data-editorial='true']) .sidebar .copy .text-slate-400 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--m-faint) !important;
}


/* ---------------------------------------------------------------------------
   9. 输入区
      footer 里是 table 布局 + 一堆内联样式，只能定向覆盖。
   --------------------------------------------------------------------------- */
html[data-skin='margin']:not([data-editorial='true']) footer {
  border-top: 0.5px solid var(--m-line);
  padding: 12px 16px 16px;
}

html[data-skin='margin']:not([data-editorial='true']) footer table {
  border-radius: 20px !important;
  background: var(--m-canvas) !important;
  border: 0.5px solid var(--m-line) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

html[data-skin='margin']:not([data-editorial='true']) footer table textarea {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  color: var(--text-1);
}

html[data-skin='margin']:not([data-editorial='true']) footer table textarea::placeholder {
  color: var(--m-faint) !important;
}

/* 发送键：从渐变改成实心圆 */
html[data-skin='margin']:not([data-editorial='true']) footer table button[data-act='send'] {
  background: var(--m-ink) !important;
  border-radius: 999px !important;
  color: var(--m-canvas) !important;
  box-shadow: var(--sh-sm);
  transition: transform 0.15s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}

html[data-skin='margin']:not([data-editorial='true']) footer table button[data-act='send']:hover { transform: scale(1.04); }
html[data-skin='margin']:not([data-editorial='true']) footer table button[data-act='send']:active { transform: scale(0.96); }

/* ---------------------------------------------------------------------------
   10. 浮层 · 菜单 / 抽屉 / 弹窗
      参考项目唯一的玻璃用在这里（sheet 用 28px 模糊 + 90% 不透明度），
      浮层确实需要透出一点底下的内容才不显突兀。
   --------------------------------------------------------------------------- */
html[data-skin='margin']:not([data-editorial='true']) #plusMenu,
html[data-skin='margin']:not([data-editorial='true']) #stickerPanel,
html[data-skin='margin']:not([data-editorial='true']) .menu,
html[data-skin='margin']:not([data-editorial='true']) .popover {
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--m-surface) 92%, transparent) !important;
  border: 0.5px solid var(--m-line) !important;
  box-shadow: var(--sh-lg), var(--ring) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  backdrop-filter: blur(28px) saturate(1.6);
}

html[data-skin='margin']:not([data-editorial='true']) .modal,
html[data-skin='margin']:not([data-editorial='true']) .dialog {
  border-radius: 22px;
  background: var(--m-surface);
  border: 0.5px solid var(--m-line);
  box-shadow: var(--sh-lg), var(--ring);
}

/* ---------------------------------------------------------------------------
   11. 通用控件
   --------------------------------------------------------------------------- */
html[data-skin='margin']:not([data-editorial='true']) .interactive {
  transition: background-color 0.15s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.15s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}

html[data-skin='margin']:not([data-editorial='true']) .avatar {
  border-radius: 10px;
  box-shadow: var(--ring);
}

/* 焦点环：参考项目用 2px 强调色 + 3px 偏移 */
html[data-skin='margin']:not([data-editorial='true']) :focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   12. 滚动条
      细、无轨道、滑块用墨色 20%。参考项目的做法，安静但不消失。
   --------------------------------------------------------------------------- */
html[data-skin='margin']:not([data-editorial='true']) * {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--m-ink) 22%, transparent) transparent;
}

html[data-skin='margin']:not([data-editorial='true']) ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-skin='margin']:not([data-editorial='true']) ::-webkit-scrollbar-track { background: transparent; }
html[data-skin='margin']:not([data-editorial='true']) ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--m-ink) 18%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
html[data-skin='margin']:not([data-editorial='true']) ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--m-ink) 30%, transparent);
  background-clip: content-box;
}

/* ---------------------------------------------------------------------------
   13. 分隔线
   --------------------------------------------------------------------------- */
html[data-skin='margin']:not([data-editorial='true']) hr,
html[data-skin='margin']:not([data-editorial='true']) .divider {
  border: 0;
  border-top: 0.5px solid var(--m-line);
}

/* ---------------------------------------------------------------------------
   14. 动效
      参考项目规范：反馈用强 ease-out（起步快收尾稳），
      弹性只给"被拨动"的东西。这里统一成同一组曲线。
   --------------------------------------------------------------------------- */
html[data-skin='margin']:not([data-editorial='true']) {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.5, 1);
  --dur-2: 150ms;
  --dur-3: 200ms;
  --dur-4: 300ms;
}

@media (prefers-reduced-motion: reduce) {
  html[data-skin='margin']:not([data-editorial='true']) * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}