[hidden] { display:none !important; }
  .setup-layout {
    display:grid; grid-template-columns:1fr 300px;
    gap:22px; align-items:start;
  }
  .ai-draft-panel {
    border:1px solid rgba(232, 215, 222,0.18);
    background:
      radial-gradient(circle at right top, rgba(232, 215, 222,0.14), transparent 34%),
      linear-gradient(145deg, rgba(232, 215, 222,0.10), rgba(255,255,255,0.03));
    border-radius:22px;
    padding:18px;
    margin-bottom:16px;
  }
  .ai-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:12px;
  }
  .ai-head h2 { margin:0; font-size:16px; }
  .ai-head p {
    margin:3px 0 0;
    color:var(--text-secondary);
    font-size:12px;
    line-height:1.65;
  }
  .type-custom {
    display:flex;
    gap:8px;
    margin-top:10px;
  }
  .type-custom .input { flex:1; }
  .type-custom .btn { flex-shrink:0; }
  .ai-badge {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 10px;
    border-radius:999px;
    color:#fff;
    font-size:11px;
    background:rgba(232, 215, 222,0.16);
    border:1px solid rgba(232, 215, 222,0.22);
    white-space:nowrap;
  }
  .ai-compose {
    display:grid;
    grid-template-columns:1fr 170px;
    gap:12px;
    align-items:stretch;
  }
  .ai-compose textarea {
    min-height:126px;
  }
  .ai-actions {
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .ai-suggestions {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
    margin-top:12px;
  }
  .ai-suggestion {
    border:1px solid var(--border);
    background:rgba(255,255,255,0.04);
    color:var(--text-secondary);
    border-radius:12px;
    padding:8px 10px;
    text-align:left;
    font-size:12px;
    line-height:1.45;
  }
  .ai-suggestion strong { display:block; color:var(--text); font-size:12px; margin-bottom:2px; }
  .ai-status {
    margin-top:10px;
    color:var(--text-dim);
    font-size:12px;
    min-height:18px;
  }
  .ai-status.loading {
    color:var(--text);
  }
  .ai-status.loading::before {
    content:"";
    display:inline-block;
    width:10px;
    height:10px;
    margin-right:7px;
    border-radius:999px;
    border:2px solid rgba(255,255,255,0.22);
    border-top-color:var(--accent-pink);
    vertical-align:-1px;
    animation:aiSpin .75s linear infinite;
  }
  @keyframes aiSpin { to { transform:rotate(360deg); } }
  .stepper {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
    margin:20px 0 22px;
  }
  .step-item {
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text-secondary);
    border-radius:16px;
    padding:12px 13px;
    display:flex;
    align-items:center;
    gap:10px;
    text-align:left;
  }
  .step-item .num {
    width:28px;
    height:28px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.06);
    color:#fff;
    font-weight:700;
    flex-shrink:0;
  }
  .step-item .t {
    display:block;
    font-size:13px;
    color:var(--text);
    line-height:1.25;
  }
  .step-item .s {
    display:block;
    font-size:11px;
    color:var(--text-dim);
    margin-top:2px;
  }
  .step-item.active {
    background:var(--accent-grad-soft);
    border-color:rgba(232, 215, 222,0.34);
    box-shadow:0 14px 30px rgba(232, 215, 222,0.10);
  }
  .step-item.active .num { background:var(--accent-grad); }
  .step-panel { display:none; }
  .step-panel.active { display:block; }
  .panel {
    background:var(--bg-elevated); border:1px solid var(--border);
    border-radius:22px; overflow:hidden;
  }
  .section { padding:22px; border-bottom:1px solid var(--border); }
  .section:last-child { border-bottom:none; }
  .section h2 { margin:0 0 16px; font-size:16px; }
  .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

  /* choice chips */
  .choice-row { display:flex; gap:8px; flex-wrap:wrap; }
  .choice {
    padding:8px 13px; border-radius:12px;
    border:1px solid var(--border); background:var(--surface);
    color:var(--text-secondary); font-size:13px;
    cursor:pointer; user-select:none; -webkit-user-select:none;
    transition:all .15s ease;
  }
  .choice.active { background:var(--accent-grad-soft); color:#fff; border-color:rgba(232, 215, 222,0.28); }

  .cover-upload-field { margin-top:16px; margin-bottom:0; }
  .cover-upload-row {
    display:flex;
    align-items:center;
    gap:12px;
  }
  .cover-picker {
    flex:1;
    min-width:0;
    border:1px solid var(--border);
    background:var(--surface);
    border-radius:16px;
    padding:10px;
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
  }
  .cover-picker:hover { border-color:rgba(232, 215, 222,0.28); background:rgba(232, 215, 222,0.04); }
  .cover-picker-preview {
    width:64px;
    height:64px;
    border-radius:14px;
    background:var(--accent-grad-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-dim);
    background-size:cover;
    background-position:center 30%;
    flex-shrink:0;
  }
  .cover-picker-preview.has-image { color:transparent; }
  .cover-picker-copy { min-width:0; display:flex; flex-direction:column; gap:4px; }
  .cover-picker-copy strong { color:var(--text); font-size:13px; }
  .cover-picker-copy span { color:var(--text-dim); font-size:12px; line-height:1.45; }

  /* gender toggle */
  .gender-toggle { display:flex; }
  .gender-toggle .choice {
    border-radius:0; border-right-width:0; flex:1; text-align:center; justify-content:center;
    display:flex; align-items:center;
  }
  .gender-toggle .choice:first-child { border-radius:12px 0 0 12px; }
  .gender-toggle .choice:last-child { border-radius:0 12px 12px 0; border-right-width:1px; }

  /* collapsible */
  details.collapsible {
    border:1px solid var(--border); border-radius:16px;
    background:var(--surface); overflow:hidden;
  }
  details.collapsible summary {
    list-style:none; cursor:pointer;
    padding:12px 16px; font-weight:500; font-size:14px;
    display:flex; align-items:center; justify-content:space-between;
  }
  details.collapsible summary::-webkit-details-marker { display:none; }
  details.collapsible summary::after {
    content:'\f078'; font-family:'Font Awesome 6 Free'; font-weight:900;
    font-size:10px; color:var(--text-dim); transition:transform .2s ease;
  }
  details.collapsible[open] summary::after { transform:rotate(180deg); }
  .details-body { padding:0 16px 16px; }

  /* upload area */
  .upload-area {
    border:2px dashed rgba(255,255,255,0.09); border-radius:16px;
    padding:28px 20px; text-align:center;
    color:var(--text-dim); font-size:13px; cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
  }
  .upload-area:hover { border-color:rgba(232, 215, 222,0.28); background:rgba(232, 215, 222,0.04); }
  .upload-area i { font-size:22px; margin-bottom:10px; display:block; }
  .material-list { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
  .material-item {
    border:1px solid var(--border); border-radius:14px;
    background:rgba(255,255,255,0.03); padding:12px;
  }
  .material-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
  .material-title { font-size:13px; font-weight:600; color:var(--text-primary); }
  .material-meta { margin-top:4px; font-size:11px; color:var(--text-dim); }
  .material-summary { margin:10px 0; color:var(--text-secondary); font-size:12px; line-height:1.7; }
  .material-switches { display:flex; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--text-secondary); }
  .material-switches label { display:flex; align-items:center; gap:6px; }
  .material-empty {
    border:1px dashed var(--border);
    border-radius:14px;
    padding:14px;
    color:var(--text-dim);
    font-size:12px;
    line-height:1.65;
  }

  /* preview */
  .preview-card {
    position:sticky; top:82px; border-radius:22px; overflow:hidden;
    background:var(--bg-elevated); border:1px solid var(--border);
  }
  .preview-cover {
    height:176px;
    background:var(--accent-grad);
    background-size:cover;
    background-position:center 30%;
    position:relative;
  }
  .preview-cover::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.30));
    pointer-events:none;
  }
  .preview-cover-tag { position:relative; z-index:1; }
  .preview-body { padding:18px; }
  .preview-body h3 { margin:0 0 6px; font-size:18px; }
  .preview-body p { margin:0 0 6px; color:var(--text-secondary); line-height:1.75; font-size:13px; }
  .preview-list {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:14px;
  }
  .preview-line {
    display:flex;
    justify-content:space-between;
    gap:10px;
    color:var(--text-secondary);
    font-size:12px;
    border-top:1px dashed var(--border);
    padding-top:8px;
  }
  .preview-line strong {
    color:var(--text);
    font-weight:500;
    text-align:right;
  }

  /* toolbar */
  .toolbar {
    display:flex; gap:10px; align-items:center;
    margin-top:18px; padding:14px 18px;
    border:1px solid var(--border); border-radius:18px;
    background:rgba(20,16,28,0.92);
    position:sticky; bottom:16px;
  }
  .toolbar .spacer { flex:1; }

  /* validation error */
  .input.error, .textarea.error { border-color:var(--danger); }
  .err-msg { font-size:11px; color:var(--danger); margin-top:4px; display:none; }
  .err-msg.show { display:block; }
  .form-status {
    min-height:18px;
    color:var(--text-dim);
    font-size:12px;
    line-height:1.55;
  }
  .form-status.ok { color:#86efac; }
  .form-status.error { color:#fca5a5; }
  .inline-fields {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .tone-card {
    padding:12px;
    border-radius:14px;
    border:1px solid var(--border);
    background:var(--surface);
    cursor:pointer;
  }
  .tone-card.active {
    border-color:rgba(232, 215, 222,0.38);
    background:var(--accent-grad-soft);
  }
  .tone-card strong { display:block; font-size:13px; }
  .tone-card span { display:block; margin-top:4px; color:var(--text-dim); font-size:11px; line-height:1.5; }

  @media (max-width:960px) {
    .setup-layout { grid-template-columns:1fr; }
    .preview-card { position:static; }
    .ai-compose { grid-template-columns:1fr; }
    .ai-actions { flex-direction:row; flex-wrap:wrap; }
  }
  @media (max-width:600px) {
    .ai-suggestions { grid-template-columns:1fr; }
    .stepper { grid-template-columns:1fr 1fr; gap:8px; }
    .step-item { padding:10px; }
    .step-item .s { display:none; }
    .grid-2 { grid-template-columns:1fr; }
    .inline-fields { grid-template-columns:1fr; }
    .type-custom { flex-direction:column; }
    .cover-upload-row { align-items:stretch; }
    .cover-picker { align-items:flex-start; }
    .toolbar {
      position:fixed; left:14px; right:14px;
      bottom:calc(env(safe-area-inset-bottom) + 14px); z-index:10;
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:8px;
      padding:10px;
    }
    .toolbar .spacer,
    .toolbar > a.btn-ghost { display:none; }
    .toolbar .btn {
      width:100%;
      min-width:0;
      justify-content:center;
      padding:10px 6px;
      font-size:13px;
      line-height:1.2;
      white-space:normal;
    }
    .toolbar-pad { height:112px; }
  }
  /* 子页面顶栏返回键 */
  .app-back {
    display:inline-flex; align-items:center; gap:5px;
    padding:7px 12px; border-radius:10px; flex-shrink:0;
    color:var(--text-secondary); font-size:13px; font-weight:500;
    text-decoration:none; transition:color .15s, background .15s;
  }
  .app-back i { font-size:11px; }
  .app-back:hover { color:var(--text); background:var(--surface); }

  /* ===== 模式切换 ===== */
  .mode-switch {
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    margin:18px 0 22px;
  }
  .mode-tab {
    display:flex; align-items:center; gap:14px;
    padding:14px 16px; text-align:left;
    background:rgba(255,255,255,0.04);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:18px; color:var(--text); cursor:pointer;
    font-family:inherit;
    transition:border-color .18s ease, background .18s ease, transform .18s ease;
  }
  .mode-tab:hover {
    border-color:rgba(232, 215, 222,0.32);
    transform:translateY(-1px);
  }
  .mode-tab.active {
    border-color:rgba(232, 215, 222,0.42);
    background:
      linear-gradient(135deg, rgba(232, 215, 222,0.16), rgba(232, 215, 222,0.04)),
      rgba(255,255,255,0.04);
    box-shadow:0 14px 30px rgba(232, 215, 222,0.10);
  }
  .mode-tab i {
    width:38px;height:38px;border-radius:12px;flex-shrink:0;
    display:grid; place-items:center; color:#fff; font-size:16px;
    background:var(--accent-grad);
  }
  .mode-tab strong { display:block; font-size:14px; }
  .mode-tab span { display:block; font-size:12px; color:var(--text-secondary); margin-top:2px; }
  @media (max-width:600px) {
    .mode-switch { grid-template-columns:1fr; }
  }

  /* ===== AI 模式 hero ===== */
  .ai-hero {
    max-width:720px; margin:0 auto;
    padding:28px 26px;
    background:
      radial-gradient(circle at 25% 0%, rgba(232, 215, 222,0.18), transparent 60%),
      radial-gradient(circle at 80% 100%, rgba(232, 215, 222,0.14), transparent 60%),
      var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:24px;
  }
  .ai-hero-head { text-align:center; margin-bottom:18px; }
  .ai-hero-head .ai-badge {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 12px; border-radius:999px;
    background:rgba(232, 215, 222,0.14);
    border:1px solid rgba(232, 215, 222,0.20);
    font-size:11px; color:#fff; margin-bottom:14px;
  }
  .ai-hero-head h2 { margin:0 0 8px; font-size:22px; }
  .ai-hero-head p { margin:0; color:var(--text-secondary); font-size:13px; line-height:1.7; }
  .ai-hero-input { font-size:14px; }
  .ai-hero-actions {
    display:flex; gap:10px; margin-top:14px;
  }
  .ai-hero-actions .btn { flex:1; }
  .ai-hero-presets { margin-top:24px; padding-top:18px; border-top:1px dashed var(--border); }
  .ai-hero-presets p { margin:0 0 10px; color:var(--text-dim); font-size:12px; }
  .ai-hero-foot {
    display:flex; justify-content:center; align-items:center;
    gap:10px; margin-top:22px; padding-top:18px;
    border-top:1px dashed var(--border);
    font-size:13px; color:var(--text-secondary);
  }
  .link-btn {
    background:none; border:none; padding:0;
    color:var(--accent-pink); cursor:pointer;
    font-family:inherit; font-size:inherit; font-weight:500;
  }
  .link-btn:hover { text-decoration:underline; }

  /* ===== 精修模式 banner ===== */
  .manual-banner {
    display:flex; align-items:center; gap:10px;
    padding:12px 16px; margin-bottom:16px;
    border-radius:14px;
    background:linear-gradient(135deg, rgba(232, 215, 222,0.12), rgba(232, 215, 222,0.06));
    border:1px solid rgba(232, 215, 222,0.20);
    font-size:13px;
  }
  .manual-banner i { color:var(--accent-pink); }
  .manual-banner span { flex:1; color:var(--text); }
  .manual-banner span strong { color:#fff; }
  @media (max-width:600px) {
    .manual-banner { flex-wrap:wrap; }
    .manual-banner .link-btn { width:100%; text-align:right; }
  }

  /* ===== 预览卡 · 玻璃风（与大厅 / 心动选择卡保持一致） ===== */
  .preview-card-v2 {
    background:rgba(255,255,255,0.04) !important;
    backdrop-filter:blur(22px) saturate(150%);
    -webkit-backdrop-filter:blur(22px) saturate(150%);
    border:1px solid rgba(255,255,255,0.10) !important;
    border-radius:22px;
    box-shadow:0 16px 40px rgba(0,0,0,0.35);
  }
  .preview-card-v2 .preview-cover {
    position:relative;
    height:140px;
    background:
      linear-gradient(135deg, rgba(232,215,222,0.22), rgba(232,215,222,0.06)),
      radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16), transparent 60%);
    background-size:cover;
    background-position:center 30%;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .preview-cover-tag {
    position:absolute; top:12px; left:12px;
    padding:4px 12px; border-radius:999px;
    background:rgba(255,255,255,0.16);
    border:1px solid rgba(255,255,255,0.20);
    font-size:11px; color:#fff;
    backdrop-filter:blur(12px) saturate(150%); -webkit-backdrop-filter:blur(12px) saturate(150%);
  }
  .preview-card-v2 .preview-body { padding:18px; }
  .preview-traits {
    display:flex; flex-wrap:wrap; gap:6px;
  }
  .preview-traits .pill {
    padding:3px 12px; border-radius:999px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
    font-size:11px; color:var(--text);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  }
  /* 内部块：每块都是一片磨砂玻璃 */
  .preview-block {
    margin-top:14px;
    padding:14px 14px 12px;
    border-radius:14px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(10px) saturate(140%);
    -webkit-backdrop-filter:blur(10px) saturate(140%);
  }
  .preview-block-head {
    display:flex; align-items:center; gap:8px;
    margin-bottom:10px;
    font-size:12px; color:var(--text-secondary);
    letter-spacing:0;
  }
  .preview-block-head i { color:var(--accent-pink); }
  .preview-windows {
    display:flex; flex-direction:column; gap:6px;
  }
  .preview-window {
    display:flex; align-items:center; gap:10px;
    padding:9px 12px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px; font-size:13px;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  }
  .preview-window strong { color:var(--text); font-variant-numeric:tabular-nums; }
  .preview-window span { color:var(--text-secondary); font-size:12px; }
  .preview-window-empty {
    padding:10px 12px; border-radius:12px;
    background:rgba(255,255,255,0.02);
    border:1px dashed rgba(255,255,255,0.10);
    color:var(--text-dim); font-size:12px; line-height:1.6;
  }
  .preview-sample {
    margin-top:10px;
    display:flex; flex-direction:column; gap:6px;
  }
  .preview-sample .bubble {
    align-self:flex-start;
    max-width:92%;
    padding:10px 13px;
    border-radius:14px 14px 14px 4px;
    background:linear-gradient(135deg, rgba(232,215,222,0.16), rgba(255,255,255,0.04));
    border:1px solid rgba(232,215,222,0.18);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    font-size:13px; line-height:1.6;
    color:var(--text);
  }
  .preview-sample .bubble small {
    display:block;
    margin-bottom:2px;
    color:var(--text-dim); font-size:10px;
  }
  .preview-line {
    display:flex; justify-content:space-between; align-items:baseline;
    padding:6px 0; gap:12px;
    font-size:13px;
    border-top:1px dashed rgba(255,255,255,0.06);
  }
  .preview-line:first-child { border-top:none; padding-top:2px; }
  .preview-line span { color:var(--text-dim); }
  .preview-line strong { color:var(--text); text-align:right; max-width:60%; }
  .preview-redlines {
    margin:0; padding-left:18px;
    color:var(--text-secondary); font-size:12px; line-height:1.7;
  }
  .preview-redlines li { margin:0; }
  @media (max-width:1024px) {
    .preview-card-v2 { position:static !important; }
  }

  /* ============================================================
     氛围化覆盖层（仅作用于本页 character-edit）
     —— 玻璃磨砂结构升级；配色沿用项目原本粉橙渐变（不动 body 背景）
     —— 修复：移除 background-attachment:fixed，避免移动端滚动卡死
     ============================================================ */

  /* 模式切换 tab：半透深底（不加 blur，避免移动端卡顿） */
  .mode-tab {
    background:rgba(20,16,32,0.55);
    border:1px solid rgba(255,255,255,0.10);
    box-shadow:0 4px 16px rgba(0,0,0,0.18);
  }
  .mode-tab:hover { border-color:rgba(232, 215, 222,0.32); }
  .mode-tab.active {
    border-color:rgba(232, 215, 222,0.55);
    background:
      linear-gradient(135deg, rgba(232, 215, 222,0.14) 0%, rgba(232, 215, 222,0.10) 100%),
      rgba(20,16,32,0.55);
    box-shadow:0 8px 26px rgba(232, 215, 222,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
  }

  /* AI 起稿 hero：玻璃卡 + 项目粉橙极光 */
  .ai-hero {
    background:
      radial-gradient(circle at 22% 0%, rgba(232, 215, 222,0.20), transparent 55%),
      radial-gradient(circle at 78% 100%, rgba(232, 215, 222,0.18), transparent 55%),
      rgba(20,16,32,0.55);
    border:1px solid rgba(255,255,255,0.10);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    box-shadow:0 14px 44px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.06);
  }
  .ai-hero-foot,
  .ai-hero-presets { border-top-color:rgba(255,255,255,0.10) !important; }

  /* 精修模式 banner：粉橙渐变（无 blur） */
  .manual-banner {
    background:
      linear-gradient(135deg, rgba(232, 215, 222,0.18), rgba(232, 215, 222,0.12)),
      rgba(20,16,32,0.65);
    border:1px solid rgba(232, 215, 222,0.30);
  }

  /* 步进器（无 blur，scroll 时不重绘） */
  .step-item {
    background:rgba(20,16,32,0.55);
    border:1px solid rgba(255,255,255,0.08);
  }
  .step-item.active {
    border-color:rgba(232, 215, 222,0.55);
    background:
      linear-gradient(135deg, rgba(232, 215, 222,0.14), rgba(232, 215, 222,0.10)),
      rgba(20,16,32,0.60);
    box-shadow:0 6px 20px rgba(232, 215, 222,0.22);
  }

  /* 主表单卡片：保留玻璃感（少量顶层容器，桌面端 blur，移动端转纯色） */
  .panel,
  .preview-card,
  .preview-card-v2,
  .ai-draft-panel {
    background:rgba(20,16,32,0.65);
    border:1px solid rgba(255,255,255,0.10);
    backdrop-filter:blur(18px) saturate(150%);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    box-shadow:0 10px 36px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .section { border-bottom-color:rgba(255,255,255,0.08) !important; }

  /* 输入控件：深色半透 + 粉色 focus 光圈 */
  .input, .textarea, .select {
    background:rgba(10,8,16,0.55);
    border:1px solid rgba(255,255,255,0.10);
  }
  .input:focus, .textarea:focus, .select:focus {
    border-color:rgba(232, 215, 222,0.55);
    box-shadow:0 0 0 3px rgba(232, 215, 222,0.18);
    outline:none;
  }

  /* tone-card（无 blur） */
  .tone-card {
    background:rgba(20,16,32,0.55);
    border:1px solid rgba(255,255,255,0.10);
  }

  /* 上传 / 素材区 */
  .upload-area, .material-empty {
    background:rgba(20,16,32,0.55);
    border:1px dashed rgba(255,255,255,0.18);
  }
  .material-item {
    background:rgba(20,16,32,0.55);
    border:1px solid rgba(255,255,255,0.10);
  }

  /* 预览封面标签（半透实底，无 blur） */
  .preview-cover-tag {
    background:rgba(10,8,16,0.55);
  }

  /* AI 建议卡（无 blur） */
  .ai-suggestion {
    background:rgba(20,16,32,0.55);
    border:1px solid rgba(255,255,255,0.10);
  }

  /* ===== 移动端布局适配 ===== */
  @media (max-width:1024px) {
    .setup-layout {
      grid-template-columns:1fr;
      gap:16px;
    }
    .preview-card-v2 { position:static !important; }
  }
  @media (max-width:768px) {
    .ai-hero { padding:22px 18px; border-radius:18px; }
    .ai-hero-head h2 { font-size:18px; }
    .ai-hero-actions { flex-direction:column; }
    .ai-hero-actions .btn { width:100%; }
    .ai-suggestions { grid-template-columns:1fr 1fr; }
    .stepper { gap:6px; }
    .step-item { padding:10px 8px; font-size:12px; }
    .step-item .num { width:22px; height:22px; font-size:12px; }
    .section { padding:16px; }
    .panel { border-radius:16px; }
    .toolbar { flex-direction:column; gap:8px; }
    .toolbar .btn { width:100%; }
    .inline-fields { grid-template-columns:1fr; }
    .ai-compose { grid-template-columns:1fr; }
    .ai-actions { flex-direction:row; }
    .ai-actions .btn { flex:1; }
    .cover-upload-row { flex-direction:column; align-items:stretch; }
  }
  /* ===== 移动端关闭部分 backdrop-filter（防滚动卡顿） ===== */
  /* 预览卡作为 fixed bottom-sheet，保留玻璃；其它大块容器关闭 */
  @media (max-width:768px) {
    .panel,
    .ai-draft-panel,
    .ai-hero {
      backdrop-filter:none !important;
      -webkit-backdrop-filter:none !important;
      background:rgba(20,16,32,0.92);
    }
    .ai-hero {
      background:
        radial-gradient(circle at 22% 0%, rgba(232, 215, 222,0.18), transparent 55%),
        radial-gradient(circle at 78% 100%, rgba(232, 215, 222,0.16), transparent 55%),
        rgba(20,16,32,0.92);
    }
    /* 预览 sheet 用更深一点的玻璃底，确保文字可读 */
    .preview-card-v2 {
      background:rgba(20,16,32,0.78) !important;
    }
  }

  @media (max-width:480px) {
    .ai-suggestions { grid-template-columns:1fr; }
    .mode-tab { padding:12px; }
    .mode-tab i { width:34px; height:34px; }
    .ai-hero-head h2 { font-size:17px; }
    .page-title { font-size:20px; }
  }

  /* ============================================================ */
  /* ===== 角色编辑页 · 移动端美化 (2026-05) =====================
     目标：首屏密度↓、视觉层级清晰、预览随时可调出 bottom-sheet
     桌面端不变；改动靠媒体查询 + extras-fold 折叠收纳。
  ============================================================ */

  /* 第 4 步附加项折叠 ── PC + Mobile 通用 */
  .extras-fold {
    border:1px solid var(--border);
    border-radius:18px;
    background:var(--surface);
    margin-top:12px;
    overflow:hidden;
  }
  .extras-fold > summary {
    list-style:none;
    cursor:pointer;
    padding:14px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .extras-fold > summary::-webkit-details-marker { display:none; }
  .extras-fold .extras-title { font-weight:600; color:var(--text); font-size:14px; }
  .extras-fold .extras-title em {
    font-style:normal; font-size:11px; color:var(--text-dim);
    margin-left:6px; padding:1px 7px; border-radius:999px;
    background:rgba(255,255,255,.06); border:1px solid var(--border);
  }
  .extras-fold .extras-hint { color:var(--text-secondary); font-size:12px; flex:1; padding-left:8px; }
  .extras-fold .extras-arrow { color:var(--text-dim); font-size:11px; transition:transform .2s ease; }
  .extras-fold[open] .extras-arrow { transform:rotate(180deg); }
  .extras-fold .extras-body { padding:0 14px 14px; }
  .extras-fold .extras-section {
    border:1px solid var(--border);
    border-radius:14px;
    margin-top:12px;
    background:rgba(255,255,255,0.02);
  }
  .extras-fold .extras-section h3 { margin:0 0 12px; font-size:14px; }
  /* extras-fold 默认隐藏（display:none）需要在 step 4 active 时显示 */
  .extras-fold { display:none; }
  .extras-fold.active { display:block; }

  /* 移动端顶栏（默认隐藏，移动端 JS 设置 hidden=false 时展示） */
  .mobile-edit-bar {
    position:sticky; top:0; z-index:90;
    background:rgba(14,10,22,0.94);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
    padding:8px 12px;
    display:none;
    align-items:center;
    gap:10px;
  }
  .mobile-edit-bar .meb-back {
    width:36px; height:36px; flex-shrink:0;
    border-radius:12px; border:1px solid var(--border);
    background:var(--surface); color:var(--text-secondary);
    display:flex; align-items:center; justify-content:center;
    text-decoration:none; font-size:13px;
  }
  .mobile-edit-bar .meb-meta { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
  .mobile-edit-bar .meb-title {
    font-size:13px; font-weight:600; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    line-height:1.2;
  }
  .mobile-edit-bar .meb-progress {
    display:flex; gap:4px;
  }
  .mobile-edit-bar .meb-seg {
    flex:1; height:3px; border-radius:999px;
    background:rgba(255,255,255,0.10);
    transition:background .25s ease;
  }
  .mobile-edit-bar .meb-seg.done { background:rgba(232, 215, 222,0.42); }
  .mobile-edit-bar .meb-seg.active { background:linear-gradient(90deg, var(--accent-pink), #fbbf24); }
  .mobile-edit-bar .meb-preview {
    flex-shrink:0;
    display:flex; align-items:center; gap:8px;
    padding:5px 10px 5px 5px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text); font-size:12px;
    cursor:pointer;
    max-width:128px;
  }
  .mobile-edit-bar .meb-preview-cover {
    width:30px; height:30px; border-radius:999px; flex-shrink:0;
    background:var(--accent-grad-soft) center/cover no-repeat;
    border:1px solid rgba(255,255,255,0.10);
  }
  .mobile-edit-bar .meb-preview-name {
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    max-width:80px;
  }

  /* 移动端预览 bottom-sheet */
  .preview-sheet-overlay {
    position:fixed; inset:0; z-index:160;
    background:rgba(4,4,8,0.62);
    display:none;
  }
  .preview-sheet-overlay.open { display:block; }

  /* ============== 移动端布局重构 ============== */
  @media (max-width:640px) {
    /* 顶栏 */
    .mobile-edit-bar { display:flex; }

    /* 隐藏原顶部冗余引导 */
    .app-main > .page-title,
    .app-main > .page-subtitle {
      display:none;
    }
    .app-header { display:none; }

    /* 模式切换：只在 AI 模式默认展示，进精修页后用顶栏的进度条替代 */
    .mode-switch {
      grid-template-columns:1fr 1fr;
      gap:6px;
      margin:10px 0 14px;
    }
    .mode-tab {
      padding:10px 12px;
      gap:10px;
      border-radius:14px;
    }
    .mode-tab i { width:32px; height:32px; font-size:13px; border-radius:10px; }
    .mode-tab strong { font-size:13px; }
    .mode-tab span { font-size:11px; line-height:1.35; }

    /* 精修模式下，stepper 和 manual-banner 移动端隐藏（顶栏代替） */
    #mode-manual .stepper { display:none; }
    #mode-manual .manual-banner {
      margin:6px 12px 10px;
      font-size:12px;
      padding:8px 10px;
      border-radius:12px;
    }

    /* 主内容区压缩边距 */
    .app-main { padding-top:14px; }

    /* 面板容器去除多余圆角和大 padding */
    .panel { border-radius:18px; }
    .section { padding:18px 16px; }
    .section h2 { font-size:15px; margin-bottom:14px; }

    /* 字段更松一点，降低视觉拥挤 */
    .field { margin-bottom:18px; }
    .field-label { font-size:13px; margin-bottom:8px; }
    .field-hint { font-size:11px; line-height:1.55; margin-top:6px; color:var(--text-dim); }

    /* 选项芯片：触控区放大 */
    .choice-row { gap:8px; }
    .choice {
      padding:10px 14px;
      font-size:13px;
      border-radius:14px;
      min-height:40px;
      display:inline-flex;
      align-items:center;
    }
    .tone-card { padding:14px; border-radius:16px; }
    .tone-card strong { font-size:14px; }
    .tone-card span { font-size:12px; line-height:1.55; margin-top:6px; }

    /* 性别 toggle 调高些 */
    .gender-toggle { padding:4px; }
    .gender-toggle .choice { padding:10px 0; flex:1; justify-content:center; }

    /* 第 4 步主动消息选择器更紧凑 */
    #mode-manual .select { padding:11px 14px; font-size:13px; }
    #mode-manual .input, #mode-manual .textarea { font-size:14px; padding:11px 14px; }

    /* 第 4 步附加项折叠：移动端更小气 */
    .extras-fold > summary { padding:13px 14px; }
    .extras-fold .extras-section { padding:14px; }
    .extras-fold .extras-section h3 { font-size:13px; margin-bottom:10px; }

    /* 预览卡：移动端从 sticky 变 bottom-sheet */
    .preview-card,
    .preview-card-v2 {
      position:fixed !important;
      left:0; right:0; bottom:0;
      top:auto !important;
      max-height:78vh;
      overflow-y:auto;
      border-radius:24px 24px 0 0 !important;
      transform:translateY(100%);
      transition:transform .28s ease;
      z-index:170;
      box-shadow:0 -20px 50px rgba(0,0,0,0.55);
    }
    .preview-card.sheet-open,
    .preview-card-v2.sheet-open {
      transform:translateY(0);
    }
    .preview-card .preview-cover,
    .preview-card-v2 .preview-cover {
      height:140px;
    }
    /* 在 sheet 顶部塞一根抓手 */
    .preview-card-v2::before,
    .preview-card::before {
      content:'';
      position:sticky; top:0;
      display:block;
      height:0;
    }
    .preview-card-v2 .preview-body,
    .preview-card .preview-body {
      padding-top:14px;
    }

    /* 隐藏 sticky-bottom toolbar 上的某些重复元素，让 4 列变 2 列主轴 */
    .toolbar {
      grid-template-columns:1fr 1fr !important;
      grid-template-areas:
        'prev next'
        'draft save' !important;
      gap:8px !important;
      padding:10px !important;
      bottom:calc(env(safe-area-inset-bottom) + 12px) !important;
    }
    .toolbar > a.btn-ghost { display:none !important; }
    .toolbar #step-prev { grid-area:prev; }
    .toolbar #step-next { grid-area:next; }
    .toolbar #save-draft { grid-area:draft; }
    .toolbar #save-role { grid-area:save; }
    .toolbar .spacer { display:none !important; }

    /* AI hero 移动端紧凑化 */
    .ai-hero { padding:20px 16px; border-radius:20px; }
    .ai-hero-head h2 { font-size:17px; line-height:1.4; margin-top:8px; }
    .ai-hero-head p { font-size:12px; }
    .ai-hero-actions { flex-direction:column; gap:8px; }
    .ai-hero-actions .btn { width:100%; }
    .ai-hero-foot { font-size:12px; }
  }

  /* 抓手装饰（独立节点便于点击区域）*/
  .preview-sheet-grip {
    display:none;
    width:42px; height:4px; border-radius:999px;
    background:rgba(255,255,255,0.18);
    margin:8px auto 4px;
  }
  @media (max-width:640px) {
    .preview-sheet-grip { display:block; }
  }