/* ═══════════════════════════════════════════════════════════════
   karin · 美化界面 — 清爽蓝

   设计稿：锁屏与安全 · 清爽蓝（v4.21）
   令牌：--bg #F5F8FC / --card #FFF / --ink #1C2026
         --blue #4B8BF5（主蓝：主按钮底 · 开关轨道 · tab 下划线，与 ST 预设同款）
         --blue-ink #4B8BF5（统一主蓝：蓝字；主按钮按下态用深一档 #4076D0）
         --border #E5EAF0
   标题：Noto Serif SC 700（链接中无 700，浏览器就近取 600）

   ⚠ 本文件所有规则均限定 .karin-beautify-app 作用域，
     重映射的 --ins-* 令牌只在该全屏层内生效，
     不影响共用 karin-apps.css 的设置/世界书/聊天等模块。
   ⚠ 引入顺序：必须排在 karin-apps.css / karin-desk-wg-custom.css 之后。
   ═══════════════════════════════════════════════════════════════ */

/* ── 令牌 ── */
.karin-beautify-app {
  /* 清爽蓝基础盘 */
  --bf-bg: #F5F8FC;
  --bf-card: #FFFFFF;
  --bf-ink: #1C2026;
  --bf-ink-soft: #4A525C;
  --bf-muted: #67707C;   /* 12px 及以下正文 · 对底 4.71:1 / 对白卡 5.02:1 */
  --bf-border: #E5EAF0;
  --bf-blue: #4B8BF5;    /* 主蓝：主按钮底、开关轨道、tab 下划线（取样自 ST 预设 + 钮） */
  --bf-blue-ink: #4B8BF5;/* 统一主蓝：蓝字（白字对比可，蓝字对底 3.02:1） */
  --bf-serif: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
  --bf-sans: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --bf-shadow: 0 1px 2px rgba(28, 32, 38, 0.03), 0 4px 12px -6px rgba(28, 32, 38, 0.06);
  --bf-blue-shadow: 0 6px 14px -8px rgba(75, 139, 245, 0.5);

  /* --ins-* 令牌重映射：让 karin-apps.css 里的既有组件自动换色。
     （--ins-gold 在本层内承担「控件主色」：滑块拇指 / accent-color；
       field-label、frame-corner 等另有专项覆盖。） */
  --ins-ink: #1C2026;
  --ins-ink-dim: #67707C;
  --ins-rose: #67707C;
  --ins-rose-deep: #4B8BF5;
  --ins-gold: #4B8BF5;
  --ins-gold-soft: rgba(75, 139, 245, 0.22);
  --ins-accent: #4B8BF5;
  --ins-accent-deep: #4B8BF5;
  --ins-surface: #FFFFFF;
  --ins-display: 'Noto Serif SC', 'Songti SC', serif;
  --ins-ui: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --ins-shadow: var(--bf-shadow);

  background: var(--bf-bg);
  color: var(--bf-ink);
  font-family: var(--bf-sans);
}

/* ── 装饰层：噪声纹理与金线退场，只留极淡蓝晕 ── */
.karin-beautify-app .ins-atelier-grain,
.karin-beautify-app .ins-atelier-line {
  display: none;
}

.karin-beautify-app .ins-atelier-orb--a {
  background: radial-gradient(circle, rgba(75, 139, 245, 0.10) 0%, transparent 70%);
}

.karin-beautify-app .ins-atelier-orb--b {
  background: radial-gradient(circle, rgba(75, 139, 245, 0.07) 0%, transparent 70%);
}

/* ══ 顶部 tabs（壁纸 / 图标 / 组件 / 字体 / 方案）══
   设计稿：纯文字 + 16px 蓝下划线，无底色无图标。 */
.karin-beautify-app .ins-atelier-rail {
  border-bottom: 1px solid var(--bf-border);
  background: var(--bf-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.karin-beautify-app .ins-atelier-tab {
  flex-direction: column;
  gap: 0;
  padding: 13px 2px 11px;
  background: transparent;
  color: var(--bf-muted);
  border-radius: 0;
  box-shadow: none;
  transition: color 0.18s ease;
  position: relative;
}

.karin-beautify-app .ins-atelier-tab-glyph {
  display: none;
}

.karin-beautify-app .ins-atelier-tab-txt {
  font-size: 12.5px;
  letter-spacing: 0.10em;
}

.karin-beautify-app .ins-atelier-tab.is-active {
  background: transparent;
  color: var(--bf-ink);
  font-weight: 600;
  box-shadow: none;
}

/* tab 激活态：文字下方 16×2 圆角蓝条（非文字载体，3:1 达标） */
.karin-beautify-app .ins-atelier-tab.is-active::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 4px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--bf-blue);
}

/* ══ 退出按钮：白卡药丸 + 圆圈图标 ══
   sw-202：不再独占一行 —— 原 float:right + panels clear:both 会让按钮
   上方凭空多出一整行空白（壁纸/图标/组件/字体/方案五个页签都有）。
   现用等量负下边距抵消按钮自身的流内占位，按钮右浮在与首个面板
   「kicker 行」同一行的右侧空位上；各面板 kicker 行同步拉到 34px 高、
   单行文字垂直居中（见下方 line-height 规则），两端上下都严丝合缝。
   标题与正文都在按钮高度之下排布，无需依赖 float 文字环绕。
   滚动吸顶（sticky top:0）保留，滚长页面随时可退出。 */
.karin-beautify-app .ins-atelier-dismiss {
  height: 34px;
  padding: 0 16px 0 12px;
  gap: 6px;
  border: 1px solid var(--bf-border);
  border-radius: 999px;
  background: var(--bf-card);
  box-shadow: var(--bf-shadow);
  color: var(--bf-ink-soft);
  font-size: 12.5px;
  letter-spacing: 0.10em;
  font-weight: 600;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.18s ease, transform 0.14s ease;
  margin-bottom: -34px;
}

/* 取消「面板从按钮下方另起一行」的清浮动（那正是空白行的来源） */
.karin-beautify-app .ins-atelier-panels {
  clear: none;
}

/* 五个页签的版头 kicker 行拉到与退出按钮同高（34px）：
   单行文字在行盒内垂直居中，与右侧按钮精确对齐（中心线重合） */
.karin-beautify-app .ins-atelier-panel-kicker,
.karin-beautify-app .bf-font-kicker,
.karin-beautify-app .bf-plan-kicker {
  line-height: 34px;
}

.karin-beautify-app .ins-atelier-dismiss:active {
  background: #F4F7FB;
  transform: scale(0.96);
}

/* 8px 金环 → 13px 圆圈图标（对应设计稿 exit 的 circle svg） */
.karin-beautify-app .ins-atelier-dismiss-ring {
  width: 13px;
  height: 13px;
  border: 2px solid var(--bf-ink-soft);
  background: transparent;
}

/* ══ 版头：kicker 蓝字 + 衬线大标题 + muted 描述 ══ */
.karin-beautify-app .ins-atelier-panel-kicker {
  font-size: 10.5px;
  letter-spacing: 0.34em;
  color: var(--bf-blue-ink);
  font-weight: 600;
  margin-bottom: 0;
}

.karin-beautify-app .ins-atelier-panel-title {
  margin: 8px 0 0;
  font-family: var(--bf-serif);
  font-size: clamp(26px, 7.4vw, 30px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.16;
}

.karin-beautify-app .ins-atelier-panel-desc {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.03em;
  line-height: 1.7;
  color: var(--bf-muted);
}

.karin-beautify-app .ins-atelier-panel-desc--tight {
  margin: 0 0 6px;
  font-size: 11.5px;
  line-height: 1.6;
}

/* 小节标签（主屏文字颜色 / 字体预览 / 已存预设…）：muted 灰蓝 */
.karin-beautify-app .ins-field-label {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--bf-muted);
  font-weight: 600;
}

/* ══ 壁纸预览行：132px 9:19 预览框 + tag 徽标 / 44px 高按钮列 ══ */
.karin-beautify-app .ins-atelier-showcase {
  gap: 14px;
  margin-top: 18px;
}

@media (min-width: 360px) {
  .karin-beautify-app .ins-atelier-showcase {
    grid-template-columns: 132px minmax(0, 1fr);
  }
}

/* 窄屏单列：预览框定宽居中，按钮列随后 */
.karin-beautify-app .ins-atelier-frame {
  width: 132px;
  max-width: 100%;
  justify-self: center;
  padding: 0;
  border-radius: 14px;
  background: #DCE6F1;
  box-shadow: var(--bf-shadow);
  overflow: hidden;
}

.karin-beautify-app .ins-atelier-frame-notch,
.karin-beautify-app .ins-atelier-frame-corner {
  display: none;
}

.karin-beautify-app .ins-atelier-frame-screen {
  aspect-ratio: 9 / 19;
  max-height: none;
  height: auto;
  border-radius: 0;
  background: #DCE6F1;
}

.karin-beautify-app .ins-atelier-frame-screen::after {
  content: none;
}

/* 左下 tag 徽标：「点击上传壁纸」→ 半透黑底白字圆角签 */
.karin-beautify-app .ins-atelier-frame-label {
  left: 8px;
  bottom: 8px;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.95);
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(15, 23, 32, 0.38);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 1;
}

.karin-beautify-app .ins-atelier-showcase-side {
  justify-content: center;
  gap: 10px;
}

/* ══ 按钮体系：chip → 清爽蓝主/幽灵按钮 ══ */
.karin-beautify-app .ins-chip {
  border: 1px solid var(--bf-border);
  background: var(--bf-card);
  color: var(--bf-ink-soft);
  box-shadow: var(--bf-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: inherit;
  font-size: 12.5px;
  letter-spacing: 0.10em;
  font-weight: 600;
  padding: 0 16px;
  min-height: 40px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.14s ease;
}

.karin-beautify-app .ins-chip:active {
  background: #F4F7FB;
  transform: scale(0.97);
}

.karin-beautify-app .ins-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* 统一质感：美化页所有 ins-chip 与字体页 bf-btn 同款平面——
   去玻璃 blur、去悬浮黑影、去描边，只留贴地淡投影 */
.karin-beautify-app .ins-chip {
  border: 1px solid transparent;
  background: var(--bf-card);
  color: var(--bf-ink-soft);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--bf-shadow);
}

/* 主按钮：主蓝底白字（对应设计稿 .btn-primary，与 ST 预设 + 钮同款） */
.karin-beautify-app .ins-chip--gold {
  border: 1px solid transparent;
  /* 主按钮标准渐变（与聊天/生图设置页同款）：蓝跨青，色相即点击欲 */
  background-color: #007AFF;
  background-image: linear-gradient(135deg, #007AFF, #5AC8FA);
  color: #FFFFFF;
  box-shadow: var(--bf-blue-shadow);
}

.karin-beautify-app .ins-chip--gold:active {
  background: #4076D0;
}

/* 强调 chip：同款平面幽灵钮（透明边 + 白底 + 淡影） */
.karin-beautify-app .ins-chip--rose {
  border: 1px solid transparent;
  background: var(--bf-card);
  color: var(--bf-ink-soft);
}

.karin-beautify-app .ins-chip--dim {
  opacity: 1;
  color: var(--bf-muted);
}

/* 壁纸区两颗主操作：44px 高（对应设计稿 .btn） */
.karin-beautify-app .ins-atelier-showcase-side .ins-chip {
  min-height: 44px;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ══ 开关卡：白卡圆角 14 + 衬线标题 + 44×25 开关 ══ */
.karin-beautify-app .ins-atelier-splash-pill {
  margin-top: 14px;
  padding: 14px 16px;
  gap: 14px;
  border: 1px solid var(--bf-border);
  border-left: 1px solid var(--bf-border);
  border-radius: 14px;
  background: var(--bf-card);
  box-shadow: var(--bf-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 壁纸预览行之后的首张卡拉开距离 */
.karin-beautify-app .ins-atelier-lock-card .ins-atelier-splash-pill:first-child {
  margin-top: 18px;
}

.karin-beautify-app .ins-atelier-splash-pill strong {
  font-family: var(--bf-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.karin-beautify-app .ins-atelier-splash-pill span {
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--bf-muted);
}

/* 开关：44×25 · 关闭态 #8A94A3（对白卡 3.07:1）· 开启态浅蓝 */
.karin-beautify-app .ins-toggle {
  width: 44px;
  height: 25px;
  border: none;
  border-radius: 13px;
  background: #8A94A3;
  box-shadow: none;
}

.karin-beautify-app .ins-toggle::after {
  top: 2.5px;
  left: 2.5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;   /* 原 ::after 无圆角（方形滑块），对齐设计稿圆形 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.karin-beautify-app .ins-toggle.is-on {
  background: var(--bf-blue);
  border-color: var(--bf-blue);
}

.karin-beautify-app .ins-toggle.is-on::after {
  transform: translateX(19px);
}

/* ══ 锁屏壁纸 mini 预览：120px 9:19 圆角卡（对应设计稿 .mini）══ */
.karin-beautify-app .ins-atelier-lock-preview {
  justify-content: flex-start;
  margin: 16px 0 12px;
}

.karin-beautify-app .ins-atelier-lock-preview__screen {
  width: 120px;
  max-width: 120px;
  aspect-ratio: 9 / 19;
  padding: 10px;
  border: 1px solid var(--bf-border);
  border-radius: 12px;
  background: #DCE6F1 center / cover no-repeat;
  box-shadow: var(--bf-shadow);
}

.karin-beautify-app .ins-atelier-lock-preview__placeholder {
  font-size: 11px;
  color: var(--bf-muted);
}

.karin-beautify-app .ins-atelier-lock-preview__time {
  font-size: 28px;
  font-weight: 400;
  color: rgba(28, 32, 38, 0.9);
}

.karin-beautify-app .ins-atelier-lock-preview__date {
  /* 卡内容区约 100px：「9月25日 星期五」10px 刚好放下；
     nowrap 防止日期在窄卡里被挤断行（如「…星 / 期五」）。 */
  font-size: 10px;
  white-space: nowrap;
  color: var(--bf-ink-soft);
}

/* 已传壁纸：白字 + 投影（沿用 JS 的 .has-image 标记） */
.karin-beautify-app .ins-atelier-lock-preview__screen.has-image {
  border-color: rgba(255, 255, 255, 0.55);
}

/* 有壁纸后隐藏「锁屏预览」占位字：真锁屏只有时间 + 日期，
   三行字堆在 120px 窄卡里又挤又乱。 */
.karin-beautify-app .ins-atelier-lock-preview__screen.has-image .ins-atelier-lock-preview__placeholder {
  display: none;
}

.karin-beautify-app .ins-atelier-lock-preview__screen.has-image .ins-atelier-lock-preview__time,
.karin-beautify-app .ins-atelier-lock-preview__screen.has-image .ins-atelier-lock-preview__date,
.karin-beautify-app .ins-atelier-lock-preview__screen.has-image .ins-atelier-lock-preview__placeholder {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* 锁屏操作按钮组（上传/清除、更改/关闭密码） */
.karin-beautify-app .ins-atelier-lock-actions,
.karin-beautify-app .ins-atelier-lock-pass-actions {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
}

.karin-beautify-app .ins-atelier-lock-note {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--bf-muted);
}

/* ══ 图标面板 · icon-pick 网格 ══ */
.karin-beautify-app .ins-icon-pick {
  border: 1px solid var(--bf-border);
  border-radius: 14px;
  background: var(--bf-card);
  box-shadow: var(--bf-shadow);
}

.karin-beautify-app .ins-icon-pick.is-selected {
  border-color: var(--bf-blue);
  box-shadow: 0 0 0 1px var(--bf-blue);
}

.karin-beautify-app .ins-icon-pick__preview {
  border-radius: 12px;
  background: #EEF3FA;
}

.karin-beautify-app .ins-icon-pick__name {
  color: var(--bf-muted);
}

.karin-beautify-app .ins-icon-pick__glyph {
  color: var(--bf-muted);
}

/* ══ 组件面板 · 自定义组件展示卡（原米色渐变 → 白卡）══ */
.karin-beautify-app .ins-custom-wg-showcase__card {
  border: 1px solid var(--bf-border);
  border-radius: 14px;
  background: var(--bf-card);
  box-shadow: var(--bf-shadow);
}

.karin-beautify-app .ins-custom-wg-showcase__name {
  color: var(--bf-ink-soft);
}

.karin-beautify-app .ins-custom-wg-showcase__stage {
  background: #EEF3FA;
}

/* ══ 字体面板 · 白卡分区 ══ */
.karin-beautify-app .ins-atelier-type-card {
  border: 1px solid var(--bf-border);
  border-radius: 14px;
  background: var(--bf-card);
  box-shadow: var(--bf-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.karin-beautify-app .ins-atelier-type-card--specimen {
  border-color: var(--bf-border);
  background: var(--bf-card);
}

.karin-beautify-app .ins-specimen-head em {
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--bf-blue-ink);
}

/* 引文块：金左线 → 蓝左线，底色改淡蓝 */
.karin-beautify-app .ins-specimen-quote {
  border-left: 2px solid var(--bf-blue);
  background: #F2F7FE;
  border-radius: 0 10px 10px 0;
  color: var(--bf-ink);
}

/* 字体行卡 / 预设列表项 */
.karin-beautify-app .ins-app-font-row {
  border: 1px solid var(--bf-border);
  border-radius: 12px;
  background: #FAFCFE;
}

.karin-beautify-app .ins-app-font-row.is-custom {
  border-color: #D3DDEA;
  background: var(--bf-card);
}

.karin-beautify-app .ins-app-font-row__reset {
  background: #EEF3FA;
  color: var(--bf-ink-soft);
  border: none;
}

/* ══ 方案 / 预设列表项：白卡圆角 ══ */
.karin-beautify-app .ins-archive-item {
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--bf-border);
  border-left: 1px solid var(--bf-border);
  border-radius: 12px;
  background: var(--bf-card);
  box-shadow: none;
}

.karin-beautify-app .ins-archive-item strong {
  font-family: var(--bf-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.karin-beautify-app .ins-archive-item small {
  font-size: 10.5px;
  color: var(--bf-muted);
}

.karin-beautify-app .ins-archive-list--font .ins-archive-actions .ins-chip {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: 0.06em;
  border-radius: 10px;
}

.karin-beautify-app .ins-chip--danger {
  color: #B42318;
  border-color: rgba(180, 35, 24, 0.25);
}

/* ══ 表单控件 ══ */
.karin-beautify-app .ins-text-input,
.karin-beautify-app .ins-select,
.karin-beautify-app .ins-textarea {
  border: 1px solid var(--bf-border);
  border-radius: 12px;
  background: var(--bf-card);
  color: var(--bf-ink);
  box-shadow: none;
  font-family: inherit;
}

.karin-beautify-app .ins-text-input:focus,
.karin-beautify-app .ins-textarea:focus,
.karin-beautify-app .ins-select:focus {
  outline: 2px solid var(--bf-blue);
  outline-offset: 1px;
}

/* 主屏文字色卡：白卡 + 激活蓝 ring */
.karin-beautify-app .ins-text-swatch {
  border: 1px solid var(--bf-border);
  border-radius: 12px;
  background: var(--bf-card);
  box-shadow: var(--bf-shadow);
}

.karin-beautify-app .ins-text-swatch.is-active {
  border-color: var(--bf-blue);
  box-shadow: 0 0 0 2px var(--ins-gold-soft), var(--bf-shadow);
}

.karin-beautify-app .ins-text-swatch--white {
  background: linear-gradient(145deg, #4A525C 0%, #1C2026 100%);
}

/* 图标小方钮（组件 tile 内） */
.karin-beautify-app .ins-ico-btn {
  border: 1px solid var(--bf-border);
  border-radius: 10px;
  background: var(--bf-card);
  color: var(--bf-ink-soft);
  box-shadow: var(--bf-shadow);
}

.karin-beautify-app .ins-ico-btn--gold {
  border-color: var(--bf-blue);
  color: var(--bf-blue-ink);
}

/* ══ 子页（自定义小组件编辑）：米色渐变 → 清爽蓝 ══ */
.karin-beautify-app .ins-atelier-subpage {
  background: var(--bf-bg);
}

.karin-beautify-app .ins-atelier-subpage__head {
  border-bottom: 1px solid var(--bf-border);
  background: rgba(255, 255, 255, 0.92);
}

.karin-beautify-app .ins-atelier-subpage__back {
  background: var(--bf-card);
  border: 1px solid var(--bf-border);
  color: var(--bf-ink-soft);
  box-shadow: var(--bf-shadow);
}

.karin-beautify-app .ins-atelier-subpage__title {
  color: var(--bf-ink);
}

/* ══ toast：白卡蓝调 ══ */
.karin-beautify-app ~ .ins-toast {
  border: 1px solid var(--bf-border);
  box-shadow: var(--bf-shadow);
}

/* ══ 分隔线：金线 → 浅蓝灰 ══ */
.karin-beautify-app .ins-font-presets,
.karin-beautify-app .ins-font-preview-block {
  border-top: 1px solid var(--bf-border);
}

/* ══ 子页编辑器按钮（mi-btn）：黑主钮 → 蓝主钮，ghost → 白卡 ══
   原样式来自 karin-chat-settings.css（.mi-btn--dark 黑底）与
   karin-desk-wg-custom.css（.mi-cwg-tpl .mi-btn--dark）；本文件
   引入靠后且特异性同为 0,2,0，可稳定覆盖。 */
.karin-beautify-app .mi-btn {
  font-family: inherit;
}

.karin-beautify-app .mi-btn--ghost {
  background: var(--bf-card);
  color: var(--bf-ink-soft);
  border: 1px solid var(--bf-border);
  box-shadow: var(--bf-shadow);
}

.karin-beautify-app .mi-btn--dark {
  /* 主按钮标准渐变（与聊天/生图设置页同款） */
  border: 1px solid transparent;
  background-color: #007AFF;
  background-image: linear-gradient(135deg, #007AFF, #5AC8FA);
  color: #FFFFFF;
  box-shadow: var(--bf-blue-shadow);
}

.karin-beautify-app .mi-btn--dark:active {
  background: #4076D0;
}

/* ═══════════════════════════════════════════════════════════════
   图标面板 · 应用图标清爽蓝（v4.22 设计稿）

   本稿与锁屏稿（v4.21）的开关/开关卡规格不同：
   开关卡圆角 12 · padding 12/14 · 标题 14.5px · 开关 40×23（滑块 18）。
   以下规则全部收窄到 [data-bf-panel="glyph"]，不影响锁屏 tab 已验收的
   44×25 开关与 14px 圆角卡。
   ═══════════════════════════════════════════════════════════════ */

/* 版头 kicker：本稿用浅蓝（非文字载体的装饰标签，3:1 达标） */
.karin-beautify-app [data-bf-panel="glyph"] .ins-atelier-panel-kicker {
  color: var(--bf-blue);
}

/* 开关卡：更紧凑的白卡 */
.karin-beautify-app [data-bf-panel="glyph"] .ins-atelier-splash-pill {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
}

.karin-beautify-app [data-bf-panel="glyph"] .ins-atelier-splash-pill strong {
  font-size: 14.5px;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}

.karin-beautify-app [data-bf-panel="glyph"] .ins-atelier-splash-pill span {
  font-size: 11px;
}

/* 开关：40×23 · 滑块 18px · 位移 17px */
.karin-beautify-app [data-bf-panel="glyph"] .ins-toggle {
  width: 40px;
  height: 23px;
  border-radius: 12px;
}

.karin-beautify-app [data-bf-panel="glyph"] .ins-toggle::after {
  top: 2.5px;
  left: 2.5px;
  width: 18px;
  height: 18px;
}

.karin-beautify-app [data-bf-panel="glyph"] .ins-toggle.is-on::after {
  transform: translateX(17px);
}

/* 分区小标题：「自定义布局 · 全部应用图标」 */
.karin-beautify-app [data-bf-panel="glyph"] .ins-atelier-panel-desc.is-custom-layout-only {
  margin: 18px 0 10px;
  font-size: 11.5px;
  letter-spacing: 0.10em;
  line-height: 1.5;
  color: var(--bf-muted);
}

/* 图标卡：白卡圆角 12 · padding 10/8 · 纵排 gap 8 */
.karin-beautify-app [data-bf-panel="glyph"] .ins-icon-pick {
  padding: 10px 8px;
  gap: 8px;
  border-radius: 12px;
}

/* 图标底座：48×48 圆角 11 淡灰蓝（原 56×56 圆角 14） */
.karin-beautify-app [data-bf-panel="glyph"] .ins-icon-pick__preview {
  width: 48px;
  height: 48px;
  border-radius: 11px;
  background: #EAF0F7;
}

.karin-beautify-app [data-bf-panel="glyph"] .ins-icon-pick__preview.has-image {
  background-size: cover;
  background-position: center;
}

.karin-beautify-app [data-bf-panel="glyph"] .ins-icon-pick__glyph {
  color: #56616C;
}

/* 图标名：11px · 0.06em · ink-soft */
.karin-beautify-app [data-bf-panel="glyph"] .ins-icon-pick__name {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--bf-ink-soft);
}

/* 「恢复默认」小按钮：26px 高 · 圆角 7 · #F3F6FA（原继承 chip 40px 高） */
.karin-beautify-app [data-bf-panel="glyph"] .ins-icon-pick__reset {
  width: 100%;
  min-height: 26px;
  padding: 0 6px;
  border: 1px solid var(--bf-border);
  border-radius: 7px;
  background: #F3F6FA;
  color: var(--bf-muted);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  font-weight: 400;
  box-shadow: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.karin-beautify-app [data-bf-panel="glyph"] .ins-icon-pick__reset:active {
  background: #E9EFF7;
  color: var(--bf-ink-soft);
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   方案页（vault）·「外观方案」设计稿（v4.25）

   版头：kicker 蓝字（.34em）+ 衬线大标题 + muted 副题
   输入：46px · 圆角 12 · 白卡描边阴影 · focus 蓝框 + 3px 光圈
   主按钮：46px 全宽 · 主蓝底白字 · 按下深一档 #4076D0 + 微缩
   导出/导入：46px 双列 ghost 白卡
   功能钩子与旧版一致（见 index.html vault 面板注释）。
   ═══════════════════════════════════════════════════════════════ */

.karin-beautify-app .bf-plan-kicker {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.34em;
  color: var(--bf-blue);
  font-weight: 600;
}

.karin-beautify-app .bf-plan-title {
  margin: 10px 0 0;
  font-family: var(--bf-serif);
  font-size: clamp(26px, 7.4vw, 30px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.16;
  color: var(--bf-ink);
}

.karin-beautify-app .bf-plan-sub {
  margin: 14px 0 0;
  font-size: 12px;
  letter-spacing: 0.03em;
  line-height: 1.7;
  color: var(--bf-muted);
}

.karin-beautify-app .bf-plan-input {
  display: block;
  margin-top: 22px;
  width: 100%;
  height: 46px;
  padding: 0 16px;
  background: var(--bf-card);
  border: 1px solid var(--bf-border);
  border-radius: 12px;
  box-shadow: var(--bf-shadow);
  font: inherit;
  font-size: 13.5px;
  color: var(--bf-ink);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.karin-beautify-app .bf-plan-input::placeholder { color: #939CA6; }

.karin-beautify-app .bf-plan-input:focus {
  border-color: var(--bf-blue);
  box-shadow: 0 0 0 3px rgba(75, 139, 245, 0.14);
}

.karin-beautify-app .bf-plan-save {
  display: block;
  margin-top: 12px;
  width: 100%;
  height: 46px;
  /* 透明描边钉死平面：防止任何外部/主题规则给按钮叠加深色边框 */
  border: 1px solid transparent;
  border-radius: 999px;
  /* 主按钮标准渐变（与聊天/生图设置页同款） */
  background-color: #007AFF;
  background-image: linear-gradient(135deg, #007AFF, #5AC8FA);
  color: #FFFFFF;
  font-family: var(--bf-sans);
  font-size: 13.5px;
  letter-spacing: 0.14em;
  font-weight: 600;
  box-shadow: var(--bf-blue-shadow);
  transition: background 0.18s ease, transform 0.14s ease;
  -webkit-tap-highlight-color: transparent;
}

.karin-beautify-app .bf-plan-save:active {
  background: #4076D0;
  transform: scale(0.985);
}

/* 列表容器：承接 renderPresets() 的动态内容（空态 + 方案卡） */
.karin-beautify-app .bf-plan-list { margin-top: 4px; }

.karin-beautify-app .bf-plan-list .ins-atelier-panel-desc {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.03em;
  line-height: 1.7;
  color: var(--bf-muted);
}

.karin-beautify-app .bf-plan-list .ins-archive-item {
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--bf-border);
  border-radius: 12px;
  background: var(--bf-card);
  box-shadow: var(--bf-shadow);
}

.karin-beautify-app .bf-plan-actions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.karin-beautify-app .bf-plan-ghost {
  height: 46px;
  border: 1px solid var(--bf-border);
  border-radius: 999px;
  background: var(--bf-card);
  box-shadow: var(--bf-shadow);
  color: var(--bf-ink-soft);
  font-family: var(--bf-sans);
  font-size: 13.5px;
  letter-spacing: 0.12em;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, transform 0.14s;
  -webkit-tap-highlight-color: transparent;
}

.karin-beautify-app .bf-plan-ghost:active {
  background: #F4F7FB;
  transform: scale(0.985);
}

/* ═══════════════════════════════════════════════════════════════
   字体页（type）·「全局字体」设计稿（v4.25）

   版头与方案页同款：kicker 蓝字 + 衬线大标题
   双卡流：白卡 · 圆角 14 · 描边 + 浅阴影
   文字颜色：56px Aa 双选 · 选中蓝框 + 3px 光圈（is-active 由 JS 切换）
   按钮 2×2：蓝（上传）/ ghost（保存·禁用灰）/ 淡蓝深字（应用）/ ghost（恢复）
   按下态统一深一档 #4076D0，不引入旧深蓝。
   ═══════════════════════════════════════════════════════════════ */

.karin-beautify-app .bf-font-kicker {
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.34em;
  color: var(--bf-blue);
  font-weight: 600;
}

.karin-beautify-app .bf-font-title {
  margin: 10px 0 0;
  font-family: var(--bf-serif);
  font-size: clamp(26px, 7.4vw, 30px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.16;
  color: var(--bf-ink);
}

/* 通用卡 */
.karin-beautify-app .bf-font-card {
  margin-top: 16px;
  background: var(--bf-card);
  border: 1px solid var(--bf-border);
  border-radius: 14px;
  box-shadow: var(--bf-shadow);
  padding: 16px;
}

.karin-beautify-app .bf-font-label {
  margin: 0 0 10px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--bf-muted);
}

/* 主屏文字颜色：56px 双选 */
.karin-beautify-app .bf-font-colors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.karin-beautify-app .bf-font-coloropt {
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bf-serif);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: box-shadow 0.18s ease, transform 0.14s ease, border-color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.karin-beautify-app .bf-font-coloropt:active { transform: scale(0.98); }

.karin-beautify-app .bf-font-coloropt--light {
  background: #FFFFFF;
  color: var(--bf-ink);
  box-shadow: var(--bf-shadow);
}

.karin-beautify-app .bf-font-coloropt--dark {
  background: #2B2B2E;
  color: #FFFFFF;
}

.karin-beautify-app .bf-font-coloropt.is-active {
  border-color: var(--bf-blue);
  box-shadow: 0 0 0 3px rgba(75, 139, 245, 0.08);
}

/* 卡头：标题 + 右侧蓝色徽章 */
.karin-beautify-app .bf-font-cardhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.karin-beautify-app .bf-font-cardtitle {
  font-family: var(--bf-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.karin-beautify-app .bf-font-cardlink {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  color: var(--bf-blue);
  font-weight: 600;
  text-transform: uppercase;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 按钮 2×2 */
.karin-beautify-app .bf-font-btngroup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.karin-beautify-app .bf-btn {
  height: 46px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bf-sans);
  font-size: 13px;
  letter-spacing: 0.12em;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.18s, transform 0.14s;
  -webkit-tap-highlight-color: transparent;
}

.karin-beautify-app .bf-btn:active { transform: scale(0.985); }

.karin-beautify-app .bf-btn--blue {
  /* 主按钮标准渐变（与聊天/生图设置页同款） */
  border: 1px solid transparent;
  background-color: #007AFF;
  background-image: linear-gradient(135deg, #007AFF, #5AC8FA);
  color: #FFFFFF;
  box-shadow: 0 6px 14px -8px rgba(75, 139, 245, 0.5);
}

.karin-beautify-app .bf-btn--blue:active { background: #4076D0; }

.karin-beautify-app .bf-btn--pale {
  border: 1px solid transparent;
  background: #A8BEE2;
  color: var(--bf-ink);
}

.karin-beautify-app .bf-btn--pale:active { background: #94AEDB; }

.karin-beautify-app .bf-btn--ghost {
  background: var(--bf-card);
  color: var(--bf-ink-soft);
  border: 1px solid var(--bf-border);
  box-shadow: var(--bf-shadow);
}

.karin-beautify-app .bf-btn--ghost:active { background: #F4F7FB; }

.karin-beautify-app .bf-btn:disabled {
  background: #F5F7FA;
  color: #939CA6;
  border: 1px solid var(--bf-border);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* 说明 / 分隔线 / 小节标题 */
.karin-beautify-app .bf-font-note {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--bf-muted);
  line-height: 1.7;
}

.karin-beautify-app .bf-font-divider {
  height: 1px;
  background: #F0F3F7;
  margin: 18px 0;
}

.karin-beautify-app .bf-font-subtitle {
  margin: 0 0 10px;
  font-size: 11.5px;
  letter-spacing: 0.10em;
  color: var(--bf-muted);
}

/* 已存预设列表衔接 */
.karin-beautify-app .bf-font-card .ins-archive-list { margin: 2px 0 0; }

/* 预览区：浅底圆角框内 textarea + 字号滑杆 + 样例 */
.karin-beautify-app .bf-font-previewwrap {
  border: 1px solid var(--bf-border);
  border-radius: 12px;
  background: #FBFCFE;
  padding: 14px 16px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.karin-beautify-app .bf-font-previewwrap:focus-within {
  border-color: var(--bf-blue);
  box-shadow: 0 0 0 3px rgba(75, 139, 245, 0.14);
}

.karin-beautify-app .bf-font-previewinput {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  resize: none;
  font-family: var(--bf-serif);
  font-size: 16px;
  color: var(--bf-ink-soft);
  letter-spacing: 0.04em;
  line-height: 1.6;
  outline: none;
}

.karin-beautify-app .bf-font-previewinput::placeholder {
  color: #939CA6;
  font-size: 16px;
}

.karin-beautify-app .bf-font-sample {
  margin: 10px 0 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--bf-serif);
  font-size: 18px;
  color: var(--bf-ink-soft);
  letter-spacing: 0.04em;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 各软件字号卡（设计稿未覆盖 · 同卡风格） */
.karin-beautify-app .bf-font-card .ins-app-font-list { margin-top: 2px; }