/* ============================================================
   char-forge.css —— 「新建 / 编辑虚拟人物」墨色 × 鎏金 沉浸式面板
   ------------------------------------------------------------
   作用域约定：全部样式挂在 #charModal 下（Toast 单独 .cf-toast），
   变量统一 --cf-* 前缀，不污染站点其它页面、不与 Tailwind 打架。
   字体不引外链（国内访问 Google Fonts 不稳），用系统衬线栈兜底。
   ============================================================ */

:root {
  /* 色彩：墨色基底 */
  --cf-bg-base: #06060A;
  --cf-bg-mid: #0B0A11;
  --cf-bg-elevated: #14121B;

  /* 鎏金（主色：关键操作 / 焦点环 / 高光） */
  --cf-gold: #D9B873;
  --cf-gold-light: #F4E3BA;
  --cf-gold-dim: rgba(217, 184, 115, .16);
  --cf-glow: rgba(217, 184, 115, .35);

  /* 朱砂（辅助：危险 / 必填 / 警告） */
  --cf-cinnabar: #DE7A93;
  --cf-cinnabar-dim: rgba(222, 122, 147, .18);

  /* 青玉（点缀：背景冷调光晕） */
  --cf-jade: #6FAE9F;

  /* 文字：米白 / 灰金 */
  --cf-text-bright: #F5EFEB;
  --cf-text-main: #D8D2CD;
  --cf-text-muted: #989284;
  --cf-text-dim: #5C5653;

  /* 面板与输入 */
  --cf-card-bg: rgba(20, 18, 27, .82);
  --cf-card-border: rgba(217, 184, 115, .18);
  --cf-input-bg: rgba(9, 8, 14, .68);
  --cf-input-border: rgba(217, 184, 115, .15);

  /* 8pt 间距网格 */
  --cf-sp-1: 4px; --cf-sp-2: 8px; --cf-sp-3: 12px; --cf-sp-4: 16px;
  --cf-sp-5: 20px; --cf-sp-6: 24px; --cf-sp-8: 32px; --cf-sp-10: 40px;

  /* 圆角五档 */
  --cf-r-sm: 8px; --cf-r-md: 10px; --cf-r-lg: 14px; --cf-r-xl: 20px; --cf-r-pill: 9999px;

  /* 字体 */
  --cf-font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, "SimSun", serif;
  --cf-font-latin: Georgia, "Times New Roman", "Cormorant Garamond", serif;

  /* 动效曲线 */
  --cf-ease: cubic-bezier(.16, 1, .3, 1);
  --cf-shadow: 0 32px 64px -16px rgba(0, 0, 0, .85), 0 0 80px -20px rgba(217, 184, 115, .12);
}

/* 动效降级 */
@media (prefers-reduced-motion: reduce) {
  #charModal *, #charModal ::before, #charModal ::after,
  .cf-toast {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

#charModal {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* 手机端：站点底部 TabBar 是 z-62、「我的」抽屉遮罩 z-70，弹窗原本 z-50 会被盖住
     （保存按钮点不到）。这里抬到 75：高于二者，仍低于站点 Toast(z-80) 与 cf-toast。 */
  z-index: 75;
}

/* ================= 五层堆叠沉浸背景 ================= */
#charModal .cf-scene {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
#charModal .cf-scene-base {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 25%, #181523 0%, var(--cf-bg-mid) 60%, var(--cf-bg-base) 100%);
}
#charModal .cf-orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px); will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
}
#charModal .cf-orb-gold {
  width: 480px; height: 480px; top: -120px; left: 8%;
  background: radial-gradient(circle, rgba(217, 184, 115, .22) 0%, rgba(217, 184, 115, 0) 70%);
  animation: cfDriftGold 26s ease-in-out infinite alternate;
}
#charModal .cf-orb-cinnabar {
  width: 520px; height: 520px; bottom: -150px; right: 4%;
  background: radial-gradient(circle, rgba(222, 122, 147, .2) 0%, rgba(222, 122, 147, 0) 70%);
  animation: cfDriftCinnabar 32s ease-in-out infinite alternate;
}
#charModal .cf-orb-jade {
  width: 420px; height: 420px; top: 45%; left: 35%;
  background: radial-gradient(circle, rgba(111, 174, 159, .16) 0%, rgba(111, 174, 159, 0) 70%);
  animation: cfDriftJade 38s ease-in-out infinite alternate;
}
@keyframes cfDriftGold {
  0% { transform: translate3d(0,0,0) scale(1); opacity: .55; }
  100% { transform: translate3d(90px,70px,0) scale(1.15); opacity: .9; }
}
@keyframes cfDriftCinnabar {
  0% { transform: translate3d(0,0,0) scale(1.1); opacity: .6; }
  100% { transform: translate3d(-100px,-80px,0) scale(.95); opacity: .85; }
}
@keyframes cfDriftJade {
  0% { transform: translate3d(0,0,0) scale(.9); opacity: .4; }
  100% { transform: translate3d(60px,-50px,0) scale(1.2); opacity: .7; }
}
#charModal .cf-scene-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(217, 184, 115, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(217, 184, 115, .045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 20%, transparent 80%);
}
#charModal .cf-scene-grain {
  position: absolute; inset: 0; opacity: .035; background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#charModal .cf-scene-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 45%, rgba(6, 6, 10, .78) 100%);
}

/* ================= 弹窗外壳 ================= */
#charModal .cf-wrap {
  position: relative; z-index: 10;
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: var(--cf-sp-6) var(--cf-sp-4);
}
#charModal .cf-container {
  position: relative;
  width: 100%; max-width: 880px;
  background: var(--cf-card-bg);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid var(--cf-card-border);
  border-radius: var(--cf-r-xl);
  box-shadow: var(--cf-shadow);
  overflow: hidden;
  animation: cfIn .45s var(--cf-ease);
}
@keyframes cfIn {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* 顶端鎏金发丝高光 */
#charModal .cf-container::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--cf-gold) 50%, transparent 100%);
  opacity: .75; pointer-events: none;
}
#charModal .cf-container::after {
  content: ''; position: absolute; top: 0; right: 0; width: 320px; height: 180px;
  background: radial-gradient(circle at 100% 0%, rgba(217, 184, 115, .08) 0%, transparent 70%);
  pointer-events: none;
}

#charModal .cf-header {
  padding: var(--cf-sp-6) var(--cf-sp-8) var(--cf-sp-5);
  display: flex; align-items: flex-start; justify-content: space-between;
  border-bottom: 1px solid rgba(217, 184, 115, .08);
}
#charModal .cf-title-box { display: flex; flex-direction: column; gap: 3px; }
#charModal .cf-latin {
  font-family: var(--cf-font-latin);
  font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cf-gold); opacity: .85;
  display: flex; align-items: center; gap: 8px;
}
#charModal .cf-latin::before { content: '◆'; font-size: 8px; color: var(--cf-cinnabar); }
#charModal .cf-title {
  font-family: var(--cf-font-serif);
  font-size: 21px; font-weight: 700; letter-spacing: .06em;
  color: var(--cf-text-bright); text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  margin: 0;
}
#charModal .cf-close {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(217, 184, 115, .12);
  border-radius: var(--cf-r-md); color: var(--cf-text-muted); cursor: pointer;
  font-size: 14px; transition: all .25s var(--cf-ease);
}
#charModal .cf-close:hover {
  background: var(--cf-cinnabar-dim); border-color: var(--cf-cinnabar);
  color: var(--cf-cinnabar); transform: rotate(90deg);
}
#charModal .cf-close:focus-visible { outline: 2px solid var(--cf-gold); outline-offset: 2px; }

#charModal .cf-body {
  padding: var(--cf-sp-6) var(--cf-sp-8);
  max-height: calc(86vh - 190px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(217, 184, 115, .25) transparent;
}
#charModal .cf-body::-webkit-scrollbar { width: 6px; }
#charModal .cf-body::-webkit-scrollbar-thumb { background: rgba(217, 184, 115, .2); border-radius: 3px; }

/* ================= 基础三要素 ================= */
#charModal .cf-primary {
  display: grid; grid-template-columns: 92px 1fr; gap: var(--cf-sp-6);
  align-items: flex-start; margin-bottom: var(--cf-sp-6);
}
#charModal .cf-avatar-col { display: flex; flex-direction: column; align-items: center; gap: var(--cf-sp-2); }
#charModal .cf-avatar-box {
  width: 92px; height: 114px; border-radius: var(--cf-r-lg);
  background: linear-gradient(145deg, rgba(20, 18, 27, .9), rgba(10, 9, 14, .8));
  border: 1px dashed rgba(217, 184, 115, .35);
  position: relative; cursor: pointer; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: all .25s var(--cf-ease);
}
#charModal .cf-avatar-box:hover { border-color: var(--cf-gold); box-shadow: 0 0 16px var(--cf-gold-dim); transform: translateY(-2px); }
#charModal .cf-avatar-box:focus-visible { outline: 2px solid var(--cf-gold); outline-offset: 2px; }
#charModal .cf-avatar-ph { color: var(--cf-gold); opacity: .8; line-height: 0; }
#charModal .cf-avatar-tip { font-size: 11px; color: var(--cf-text-muted); margin-top: 6px; }
#charModal .cf-avatar-img { position: absolute; inset: 0; display: none; }
#charModal .cf-avatar-img.on { display: block; }
#charModal .cf-avatar-img > * { width: 100%; height: 100%; object-fit: cover; border-radius: var(--cf-r-lg); }
#charModal .cf-avatar-clear {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  background: rgba(0, 0, 0, .7); border: 1px solid rgba(222, 122, 147, .35);
  border-radius: var(--cf-r-pill); color: var(--cf-cinnabar);
  display: none; align-items: center; justify-content: center;
  font-size: 11px; cursor: pointer; z-index: 2;
}
#charModal .cf-avatar-clear.on { display: flex; }
#charModal .cf-avatar-note { font-size: 10.5px; color: var(--cf-text-dim); }

#charModal .cf-fields { display: flex; flex-direction: column; gap: var(--cf-sp-4); }
#charModal .cf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cf-sp-4); }
#charModal .cf-field { display: flex; flex-direction: column; gap: var(--cf-sp-2); min-width: 0; }
#charModal .cf-label {
  font-size: 12px; font-weight: 600; letter-spacing: .05em;
  color: var(--cf-text-main); display: flex; align-items: center; gap: 6px;
}
#charModal .cf-star { color: var(--cf-cinnabar); font-size: 13px; }
#charModal .cf-input,
#charModal .cf-textarea {
  width: 100%; background: var(--cf-input-bg);
  border: 1px solid var(--cf-input-border); border-radius: var(--cf-r-md);
  padding: 10px 14px; color: var(--cf-text-bright);
  font-family: inherit; font-size: 13.5px;
  transition: all .2s var(--cf-ease);
}
#charModal .cf-input:hover, #charModal .cf-textarea:hover { border-color: rgba(217, 184, 115, .3); }
#charModal .cf-input:focus, #charModal .cf-textarea:focus {
  outline: none; border-color: var(--cf-gold);
  background: rgba(14, 12, 20, .9); box-shadow: 0 0 0 3px var(--cf-gold-dim);
}
#charModal .cf-hidden { display: none !important; }

/* 性别分段选择器 */
#charModal .cf-seg {
  display: flex; background: var(--cf-input-bg);
  border: 1px solid var(--cf-input-border); border-radius: var(--cf-r-md);
  padding: 3px; height: 42px; gap: 3px;
}
#charModal .cf-seg-btn {
  flex: 1; border: none; background: transparent; color: var(--cf-text-muted);
  font-size: 13px; font-weight: 500; border-radius: var(--cf-r-sm);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .2s var(--cf-ease);
}
#charModal .cf-seg-btn:hover { color: var(--cf-text-bright); }
#charModal .cf-seg-btn.active {
  background: linear-gradient(135deg, rgba(217, 184, 115, .24), rgba(217, 184, 115, .1));
  color: var(--cf-gold-light); border: 1px solid rgba(217, 184, 115, .4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
#charModal .cf-seg-btn:focus-visible { outline: 2px solid var(--cf-gold); outline-offset: 1px; }

#charModal .cf-ta-wrap { position: relative; }
#charModal .cf-textarea { resize: vertical; min-height: 92px; line-height: 1.6; padding-bottom: 24px; }
#charModal .cf-counter {
  position: absolute; right: 12px; bottom: 8px; font-size: 11px;
  font-family: var(--cf-font-latin); color: var(--cf-text-dim); pointer-events: none;
}
#charModal .cf-counter.warn { color: var(--cf-cinnabar); }

/* ================= 个性维度拓展 ================= */
#charModal .cf-expand-bar {
  margin: var(--cf-sp-6) 0 var(--cf-sp-4); padding-top: var(--cf-sp-5);
  border-top: 1px solid rgba(217, 184, 115, .1);
  display: flex; align-items: center; justify-content: space-between; gap: var(--cf-sp-4);
}
#charModal .cf-expand-info { display: flex; flex-direction: column; gap: 2px; }
#charModal .cf-expand-title {
  font-family: var(--cf-font-serif); font-size: 15px; font-weight: 600;
  color: var(--cf-gold-light); display: flex; align-items: center; gap: 8px;
}
#charModal .cf-tag {
  font-size: 11px; font-weight: 400; color: var(--cf-cinnabar);
  border: 1px solid rgba(222, 122, 147, .3); border-radius: var(--cf-r-pill); padding: 1px 8px;
}
#charModal .cf-expand-desc { font-size: 12px; color: var(--cf-text-muted); }
#charModal .cf-btn-expand {
  min-height: 40px; padding: 0 var(--cf-sp-4);
  background: linear-gradient(135deg, var(--cf-gold-dim), rgba(217, 184, 115, .05));
  border: 1px solid rgba(217, 184, 115, .35); border-radius: var(--cf-r-pill);
  color: var(--cf-gold-light); font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  transition: all .25s var(--cf-ease);
}
#charModal .cf-btn-expand:hover { background: rgba(217, 184, 115, .25); border-color: var(--cf-gold); box-shadow: 0 0 16px var(--cf-gold-dim); transform: translateY(-1px); }
#charModal .cf-btn-expand:focus-visible { outline: 2px solid var(--cf-gold); outline-offset: 2px; }
#charModal .cf-arrow { transition: transform .3s var(--cf-ease); display: inline-block; }
#charModal .cf-btn-expand.open .cf-arrow { transform: rotate(180deg); }

#charModal .cf-panel { display: none; flex-direction: column; gap: var(--cf-sp-4); }
#charModal .cf-panel.open { display: flex; animation: cfPanelIn .35s var(--cf-ease); }
@keyframes cfPanelIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

#charModal .cf-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  background: rgba(14, 12, 19, .5); padding: 10px 14px;
  border-radius: var(--cf-r-md); border: 1px dashed rgba(217, 184, 115, .14);
}
#charModal .cf-chips-label { font-size: 11.5px; color: var(--cf-text-dim); margin-right: 4px; }
#charModal .cf-chip {
  padding: 4px 10px; background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(217, 184, 115, .18); border-radius: var(--cf-r-pill);
  color: var(--cf-text-main); font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  transition: all .2s var(--cf-ease);
}
#charModal .cf-chip:hover { background: var(--cf-gold-dim); border-color: var(--cf-gold); color: var(--cf-gold-light); transform: translateY(-1px); }
#charModal .cf-chip.used { opacity: .4; cursor: not-allowed; }
#charModal .cf-chip:focus-visible { outline: 2px solid var(--cf-gold); outline-offset: 2px; }

#charModal .cf-cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cf-sp-4); margin-top: var(--cf-sp-2);
}
#charModal .cf-card {
  background: linear-gradient(145deg, rgba(22, 19, 30, .7), rgba(13, 11, 18, .7));
  border: 1px solid rgba(217, 184, 115, .15); border-radius: var(--cf-r-lg);
  padding: var(--cf-sp-3) var(--cf-sp-4) var(--cf-sp-4);
  display: flex; flex-direction: column; gap: 8px;
  transition: all .25s var(--cf-ease);
}
#charModal .cf-card:hover { border-color: rgba(217, 184, 115, .35); box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .5); }
#charModal .cf-card.empty { border-color: rgba(222, 122, 147, .35); }
#charModal .cf-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#charModal .cf-key {
  font-size: 12.5px; font-weight: 600; color: var(--cf-gold);
  background: transparent; border: none; border-bottom: 1px solid transparent;
  padding: 2px 4px; width: 100%; transition: border-color .2s;
}
#charModal .cf-key:focus { outline: none; border-bottom-color: var(--cf-gold); }
#charModal .cf-card-ops { display: flex; align-items: center; gap: 4px; }
#charModal .cf-op {
  min-width: 34px; min-height: 34px; border: none; background: transparent;
  border-radius: var(--cf-r-sm); display: flex; align-items: center; justify-content: center;
  color: var(--cf-text-muted); cursor: pointer; font-size: 13px;
  transition: all .2s var(--cf-ease);
}
#charModal .cf-op:hover { color: var(--cf-gold-light); background: var(--cf-gold-dim); }
#charModal .cf-op.del:hover { color: var(--cf-cinnabar); background: var(--cf-cinnabar-dim); }
#charModal .cf-op:focus-visible { outline: 2px solid var(--cf-gold); outline-offset: 1px; }
#charModal .cf-val, #charModal .cf-val-ta {
  width: 100%; background: var(--cf-input-bg);
  border: 1px solid rgba(217, 184, 115, .12); border-radius: var(--cf-r-sm);
  padding: 8px 10px; font-size: 13px; color: var(--cf-text-bright);
  transition: all .2s; font-family: inherit;
}
#charModal .cf-val:focus, #charModal .cf-val-ta:focus {
  outline: none; border-color: var(--cf-gold); background: rgba(10, 9, 15, .9);
}
#charModal .cf-val-ta { line-height: 1.55; min-height: 84px; resize: vertical; }
#charModal .cf-card-note { font-size: 11px; color: var(--cf-cinnabar); display: none; }
#charModal .cf-card.empty .cf-card-note { display: block; }

#charModal .cf-add {
  grid-column: span 2; border: 1px dashed rgba(217, 184, 115, .25);
  background: rgba(217, 184, 115, .03); border-radius: var(--cf-r-lg);
  padding: 14px; display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--cf-gold); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all .2s var(--cf-ease);
}
#charModal .cf-add:hover { background: var(--cf-gold-dim); border-color: var(--cf-gold); transform: translateY(-1px); }
#charModal .cf-add:focus-visible { outline: 2px solid var(--cf-gold); outline-offset: 2px; }

#charModal .cf-banned {
  margin-top: var(--cf-sp-4); padding: 10px 14px; border-radius: var(--cf-r-md);
  background: var(--cf-cinnabar-dim); border: 1px solid rgba(222, 122, 147, .4);
  color: var(--cf-cinnabar); font-size: 12.5px;
}

/* ================= 底部 ================= */
#charModal .cf-footer {
  padding: var(--cf-sp-4) var(--cf-sp-8);
  border-top: 1px solid rgba(217, 184, 115, .1);
  display: flex; align-items: center; justify-content: space-between; gap: var(--cf-sp-4);
  background: rgba(12, 11, 17, .72);
}
#charModal .cf-status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--cf-text-muted); flex-wrap: wrap; }
#charModal .cf-count-badge {
  font-family: var(--cf-font-latin); font-weight: 700; color: var(--cf-gold);
  background: var(--cf-gold-dim); padding: 2px 10px; border-radius: var(--cf-r-pill);
  font-size: 12px; border: 1px solid rgba(217, 184, 115, .2);
}
#charModal .cf-pending { color: var(--cf-cinnabar); font-size: 12px; }
#charModal .cf-actions { display: flex; align-items: center; gap: var(--cf-sp-3); flex-wrap: wrap; justify-content: flex-end; }
#charModal .cf-btn-ghost {
  min-height: 40px; padding: 0 var(--cf-sp-5);
  border: 1px solid rgba(255, 255, 255, .1); background: transparent;
  color: var(--cf-text-muted); font-size: 13.5px; border-radius: var(--cf-r-pill);
  cursor: pointer; transition: all .2s var(--cf-ease);
}
#charModal .cf-btn-ghost:hover { color: var(--cf-text-bright); background: rgba(255, 255, 255, .05); }
#charModal .cf-btn-danger {
  min-height: 40px; padding: 0 var(--cf-sp-5);
  border: 1px solid rgba(222, 122, 147, .45); background: rgba(222, 122, 147, .12);
  color: var(--cf-cinnabar); font-size: 13.5px; border-radius: var(--cf-r-pill);
  cursor: pointer; transition: all .2s var(--cf-ease);
}
#charModal .cf-btn-danger:hover { background: rgba(222, 122, 147, .24); border-color: var(--cf-cinnabar); }
#charModal .cf-btn-submit {
  min-height: 40px; padding: 0 var(--cf-sp-6);
  background: linear-gradient(135deg, #E6C885 0%, #B8964E 100%);
  border: 1px solid rgba(255, 255, 255, .2); color: #120E08;
  font-size: 14px; font-weight: 700; letter-spacing: .03em;
  border-radius: var(--cf-r-pill); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 16px -2px rgba(217, 184, 115, .4);
  transition: all .25s var(--cf-ease);
}
#charModal .cf-btn-submit:hover { filter: brightness(1.1); box-shadow: 0 6px 22px rgba(217, 184, 115, .55); transform: translateY(-1px); }
#charModal .cf-btn-submit:active { transform: translateY(1px); }
#charModal .cf-btn-submit:disabled, #charModal .cf-btn-ghost:disabled { opacity: .55; cursor: not-allowed; }
#charModal .cf-btn-ghost:focus-visible,
#charModal .cf-btn-danger:focus-visible,
#charModal .cf-btn-submit:focus-visible { outline: 2px solid var(--cf-gold); outline-offset: 2px; }

/* ================= Toast（页面级） ================= */
.cf-toast {
  position: fixed; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); left: 50%; z-index: 99999;
  transform: translateX(-50%) translateY(20px);
  background: rgba(24, 21, 32, .96); border: 1px solid var(--cf-gold);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--cf-gold-light); padding: 10px 22px; border-radius: var(--cf-r-pill);
  font-size: 13px; box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
  opacity: 0; pointer-events: none; transition: all .3s var(--cf-ease);
  display: flex; align-items: center; gap: 8px;
}
.cf-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.cf-toast.err { border-color: var(--cf-cinnabar); color: var(--cf-cinnabar); }

/* ================= 响应式 ================= */
/* ================= H5 / 移动端适配 ================= */
@media (max-width: 768px) {
  #charModal { -webkit-text-size-adjust: 100%; }
  #charModal .cf-wrap { padding: 8px; align-items: flex-start; }

  #charModal .cf-container {
    border-radius: var(--cf-r-lg);
    max-width: 100%;
    /* 移动端降低模糊半径，避免大面积 backdrop-filter 掉帧 */
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
  }
  #charModal .cf-orb { filter: blur(60px); }

  #charModal .cf-header { padding: var(--cf-sp-4) var(--cf-sp-5); }
  #charModal .cf-title { font-size: 18px; }
  #charModal .cf-latin { font-size: 10px; letter-spacing: .18em; }

  /* 内容区不限高，交给整页滚动（iOS 上比内层滚动更稳） */
  #charModal .cf-body {
    padding: var(--cf-sp-4) var(--cf-sp-5);
    max-height: none; overflow: visible;
    -webkit-overflow-scrolling: touch;
  }

  #charModal .cf-primary { grid-template-columns: 1fr; gap: var(--cf-sp-4); }
  #charModal .cf-avatar-col { flex-direction: row; justify-content: flex-start; align-items: center; gap: var(--cf-sp-4); }
  #charModal .cf-row2 { grid-template-columns: 1fr; }
  #charModal .cf-cards { grid-template-columns: 1fr; }
  #charModal .cf-add { grid-column: span 1; min-height: 52px; }

  /* iOS Safari：输入类控件字号 < 16px 会触发自动放大，这里统一拉到 16px */
  #charModal .cf-input,
  #charModal .cf-textarea,
  #charModal .cf-key,
  #charModal .cf-val,
  #charModal .cf-val-ta { font-size: 16px; }
  #charModal .cf-key { font-size: 14px; }

  /* 触控热区 ≥ 44px */
  #charModal .cf-op { min-width: 44px; min-height: 44px; font-size: 15px; }
  #charModal .cf-close { width: 44px; height: 44px; font-size: 16px; }
  #charModal .cf-chip { padding: 8px 14px; font-size: 13px; min-height: 38px; }
  #charModal .cf-seg { height: 46px; }
  #charModal .cf-seg-btn { font-size: 13px; min-height: 44px; }
  #charModal .cf-btn-expand,
  #charModal .cf-btn-ghost,
  #charModal .cf-btn-danger,
  #charModal .cf-btn-submit { min-height: 46px; }
  #charModal .cf-avatar-box { min-width: 92px; }

  /* 底部操作条：吸底 + iPhone 安全区 + 主按钮撑满 */
  #charModal .cf-footer {
    padding: var(--cf-sp-3) var(--cf-sp-5) calc(var(--cf-sp-3) + env(safe-area-inset-bottom, 0px));
    flex-direction: column-reverse; align-items: stretch; gap: var(--cf-sp-3);
    position: sticky; bottom: 0; z-index: 5;
    background: rgba(12, 11, 17, .94);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  #charModal .cf-status { justify-content: center; }
  #charModal .cf-actions { width: 100%; gap: var(--cf-sp-2); }
  #charModal .cf-btn-submit { flex: 1 1 auto; justify-content: center; }
  #charModal .cf-btn-ghost, #charModal .cf-btn-danger { flex: 0 0 auto; }
  #charModal .cf-banned { font-size: 12px; }
}

/* 超短屏（横屏 / 小屏）再收一档，保证按钮区不被挤掉 */
@media (max-height: 520px) {
  #charModal .cf-header { padding: var(--cf-sp-3) var(--cf-sp-5); }
  #charModal .cf-title { font-size: 16px; }
  #charModal .cf-body { padding: var(--cf-sp-3) var(--cf-sp-5); }
}