/* 角色/配置卡片：纵向布局，按钮整行放底部 */
.char-card {
  background: #fff; border-radius: 16px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}
.char-main {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.char-avatar {
  width: 48px; height: 48px; border-radius: 50%; background: #eef4ff;
  font-size: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.char-info { flex: 1; min-width: 0; }
.char-name { font-size: 15px; font-weight: 600; color: #333; display: flex; align-items: center; gap: 6px; }
.char-current {
  font-size: 10px; background: #07c160; color: #fff;
  border-radius: 999px; padding: 2px 8px; font-weight: 400; flex-shrink: 0;
}
.char-meta { font-size: 11px; color: #999; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.char-actions {
  display: flex; gap: 8px; width: 100%;
  border-top: 1px solid #f0f0f0; padding-top: 10px;
}
.char-btn {
  flex: 1; border: none; background: #f1f3f5; border-radius: 10px;
  padding: 9px 0; font-size: 13px; cursor: pointer; color: #333;
  text-align: center;
}

/* 角色编辑 modal */
.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1500;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-box {
  background: #fff; border-radius: 18px; width: 100%; max-width: 380px;
  max-height: 86vh; overflow-y: auto; padding: 20px;
}
.modal-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: #333; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.emoji-opt {
  font-size: 22px; padding: 6px 0; border: 2px solid transparent;
  border-radius: 10px; cursor: pointer; background: #f7f9fc; text-align: center;
}
.emoji-opt.selected { border-color: #07c160; background: #e8f9ef; }

/* 头像编辑区 */
.avatar-edit { display: flex; flex-direction: column; gap: 8px; }
.avatar-preview {
  width: 72px; height: 72px; border-radius: 50%; background: #eef4ff;
  font-size: 36px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; align-self: center;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-actions { display: flex; gap: 8px; justify-content: center; }
.char-avatar img { width: 100%; height: 100%; object-fit: cover; }
.oc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.modal-btns { display: flex; gap: 10px; margin-top: 16px; }
.modal-btns button {
  flex: 1; padding: 10px; border-radius: 10px; border: none;
  font-size: 14px; cursor: pointer; font-family: inherit;
}
.modal-btns button:first-child { background: #07c160; color: #fff; }
.modal-btns button:last-child { background: #eee; color: #333; }
.character-confirm-actions .character-confirm-cancel,
.character-rename-actions .character-rename-cancel { background: #eee; color: #333; }
.character-confirm-actions .character-confirm-delete { background: #e5484d; color: #fff; }
.character-rename-actions .character-rename-confirm { background: #07c160; color: #fff; }
.char-group-rename-input { width: 100%; margin-top: 12px; box-sizing: border-box; }

/* 手机端二级页：参考侧栏标题 + 内容卡片的杂志式布局 */
@media (max-width: 767px) {
  #settingsView.active,
  #charactersView.active {
    display: grid;
    grid-template-columns: minmax(108px, 29%) minmax(0, 1fr);
    background: #f2f6ff;
  }

  #settingsView .page-header,
  #charactersView .page-header {
    height: 100%; min-width: 0;
    padding: max(22px, env(safe-area-inset-top)) 14px 24px;
    background: #f3f3f3;
    border: 0; border-right: 1px solid rgba(70, 82, 105, 0.07);
    box-shadow: 8px 0 22px rgba(46, 67, 105, 0.035);
    gap: 0;
  }

  #settingsView .page-header .back-btn,
  #charactersView .page-header .back-btn {
    width: 54px; height: 46px; margin: 0 0 46px -7px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; font-weight: 300; color: #363636;
  }

  #settingsView .page-header .title,
  #charactersView .page-header .title {
    display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
    width: 100%; font-size: clamp(23px, 7vw, 32px); line-height: 1.08;
    letter-spacing: -1px; color: #292929; white-space: normal;
  }

  #settingsView .page-title-icon,
  #charactersView .page-title-icon {
    display: block; margin-right: 0; font-size: clamp(32px, 10vw, 46px); line-height: 1;
  }

  #settingsView .header-action,
  #charactersView .header-action {
    width: 100%; margin-top: 24px; padding: 10px 8px;
    border-radius: 14px; font-size: 13px;
  }

  #settingsView .sub-body,
  #charactersView .sub-body {
    min-width: 0; height: 100%; padding: max(28px, env(safe-area-inset-top)) 16px 28px;
    gap: 16px; background: #f2f6ff;
  }

  #settingsView .set-item,
  #charactersView .char-card {
    border-radius: 24px; padding: 18px;
    box-shadow: 0 12px 30px rgba(56, 77, 115, 0.09);
  }

  #settingsView .set-item { gap: 14px; min-height: 106px; }
  #settingsView .set-icon {
    width: 64px; height: 64px; border-radius: 20px; font-size: 30px;
  }
  #settingsView .set-name { font-size: 20px; font-weight: 700; }
  #settingsView .set-sub {
    max-width: 150px; margin-top: 5px; font-size: 13px; line-height: 1.35;
    overflow-wrap: anywhere;
  }
  #settingsView .set-arrow { font-size: 32px; font-weight: 300; }

  #charactersView #charList { display: flex; flex-direction: column; gap: 16px !important; }
  #charactersView .char-card { gap: 14px; }
  #charactersView .char-main { align-items: center; gap: 14px; }
  #charactersView .char-avatar {
    width: 68px; height: 68px; border-radius: 20px; font-size: 34px;
  }
  #charactersView .char-name {
    flex-wrap: wrap; font-size: 18px; line-height: 1.25;
  }
  #charactersView .char-meta {
    margin-top: 6px; font-size: 12px; line-height: 1.4;
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  #charactersView .char-actions { gap: 7px; padding-top: 12px; }
  #charactersView .char-btn { min-width: 0; padding: 10px 4px; font-size: 12px; }
  /* 手机端尚未实现星图：明确隐藏 */
  #characterStarMap { display: none !important; }
  /* 手机端尚未实现角色星图页/编辑器：明确隐藏 */
  .char-rolemap-view, .sm-detail-layer { display: none !important; }
}

@media (max-width: 380px) {
  #settingsView.active,
  #charactersView.active { grid-template-columns: 102px minmax(0, 1fr); }
  #settingsView .sub-body,
  #charactersView .sub-body { padding-left: 12px; padding-right: 12px; }
  #settingsView .set-item,
  #charactersView .char-card { padding: 14px; border-radius: 20px; }
  #settingsView .set-icon { width: 54px; height: 54px; font-size: 25px; }
  #settingsView .set-name { font-size: 17px; }
  #charactersView .char-avatar { width: 58px; height: 58px; }
}

/* ============ 桌面端：角色档案 开放画布 + 书本占位 ============ */
@media (min-width: 768px) {
  /* 桌面端专属：角色编辑弹窗加大宽度（不覆盖全局/手机端/其它弹窗） */
  #charModal .modal-box {
    width: 100%; max-width: 500px;
    height: min(752px, 86vh); max-height: 86vh;
    box-sizing: border-box;
  }
  /* charactersView 纵向全屏：顶部栏 + 开放角色画布 + 下方书本占位 */
  #charactersView.active {
    flex-direction: column;
    width: 100vw; height: 100vh; height: 100dvh;
    background: #f4f7fb;
  }
  #charactersView .page-header {
    flex-direction: row; align-items: center; gap: 12px;
    padding: 14px 24px; background: transparent; border-bottom: none;
  }
  #charactersView .page-header .back-btn { margin-left: -6px; }
  #charactersView .page-header .title {
    font-size: 20px; font-weight: 700; color: #333; display: flex; align-items: center; gap: 6px;
  }
  #charactersView .page-header .title .page-title-icon { margin-right: 0; }
  /* 桌面端子导航（档案 / 星图）：轻量子导航，标题附近 */
  .char-sub-nav {
    display: flex; align-items: center; gap: 4px;
    margin-left: auto; margin-right: 12px;
  }
  .char-sub-nav-item {
    border: none; background: transparent; font-family: inherit;
    font-size: 14px; color: #8a93a6; cursor: pointer; padding: 6px 8px;
    position: relative;
  }
  .char-sub-nav-item.active { color: #2b6cb0; font-weight: 600; }
  .char-sub-nav-item.active::after {
    content: ""; position: absolute; left: 8px; right: 8px; bottom: 1px;
    height: 2px; background: #2b6cb0; border-radius: 2px;
  }
  .char-sub-nav-item:hover { color: #566174; }
  /* 星图模式：header 进入夜间视觉，与星图夜空衔接（仅限定在星图作用域，不影响档案/其他页面） */
  #charactersView.starmap-mode .page-header {
    background: #0d1628; border-bottom: none;
  }
  #charactersView.starmap-mode .page-header .title {
    color: #e6ecf6;
  }
  #charactersView.starmap-mode .page-header .back-btn {
    color: #cfe0ff;
  }
  #charactersView.starmap-mode .char-sub-nav-item {
    color: #8a93a6;
  }
  #charactersView.starmap-mode .char-sub-nav-item:hover { color: #cfe0ff; }
  #charactersView.starmap-mode .char-sub-nav-item.active {
    color: #8fd0ff; font-weight: 600;
  }
  #charactersView.starmap-mode .char-sub-nav-item.active::after {
    background: #8fd0ff;
  }
  #charactersView .sub-body {
    flex: 1; min-height: 0;
    position: relative; display: block;
    padding: 6px 4vw 3vh; overflow: hidden;
  }
  /* ============ 桌面端星图子页面（档案同级的子页毛坯） ============ */
  #characterStarMap {
    flex: 1; position: relative; min-height: 0;
    background: radial-gradient(ellipse at 50% 40%, #1b2a4a 0%, #0d1628 70%);
    overflow: hidden;
  }
  /* 中央水晶球占位（放大，约 1/3 屏） */
  .crystal-ball-wrapper {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center;
  }
  .crystal-ball {
    position: relative;
    width: min(54vh, 54vw); height: min(54vh, 54vw); border-radius: 50%;
    background:
      radial-gradient(circle at 35% 30%, rgba(255,255,255,0.45), rgba(255,255,255,0) 40%),
      radial-gradient(circle at 50% 50%, #3b5b9e 0%, #1c2c52 60%, #101a36 100%);
    border: 1px solid rgba(160,200,255,0.25);
    box-shadow: 0 0 40px rgba(90,150,255,0.35), inset 0 0 30px rgba(120,170,255,0.2);
  }
  .crystal-ball-inner { width: 100%; height: 100%; border-radius: 50%; }
  /* hover 时水晶球内浮现的功能名称+简介（居中、有层级、保持朦胧感） */
  .crystal-ball-caption {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 14%; gap: 10px;
  }
  .cb-name { font-size: min(3.4vh, 3.4vw); font-weight: 700; color: #eaf4ff; letter-spacing: 2px; }
  .cb-intro { font-size: min(1.9vh, 1.9vw); line-height: 1.5; color: rgba(210,228,255,0.85); max-width: 80%; }
  .crystal-ball-stand {
    width: 50%; height: 4%; margin-top: -3%;
    background: linear-gradient(180deg, #46587a, #2c3a55);
    border-radius: 8px;
  }
  /* 左右两个主功能星座 */
  .constellation {
    position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: #cfe0ff; font-size: 13px; opacity: 0.9;
  }
  .constellation-svg { width: 315px; height: 240px; }
  .constellation-svg line { stroke: #6f8bd0; stroke-width: 1.5; }
  .constellation-svg circle { fill: #cfe0ff; }
  .constellation-name { font-size: 19px; color: #cfe0ff; }
  .constellation-1 { left: 12.2%; top: 50%; transform: translateY(-50%); }
  .constellation-2 { right: 12.2%; top: 50%; transform: translateY(-50%); }
  .constellation:hover .constellation-svg line { stroke: #aac8f6; stroke-width: 2.4; filter: drop-shadow(0 0 5px rgba(130,180,255,0.9)); }
  .constellation:hover .constellation-svg circle { fill: #f2f8ff; filter: drop-shadow(0 0 7px rgba(160,200,255,1)); }
  .constellation:hover .constellation-name { color: #fff; }

  /* 桌面端分页状态：独立悬于书本正上方，不参与角色卡或书本布局 */
  .char-page-dots {
    position: absolute; left: 50%; bottom: calc(42% + 18px); z-index: 4;
    transform: translateX(-50%);
    display: flex; align-items: center; justify-content: center; gap: 7px;
  }
  .char-page-dot {
    width: 7px; height: 7px; border-radius: 50%; background: #ccd5e2;
  }
  .char-page-dot.active { width: 9px; height: 9px; background: #66758b; }

  /* 角色画布：每页固定六张卡，围绕下方双页框排列 */
  #charList.char-canvas {
    position: absolute; inset: 0;
    overflow: hidden;
  }
  #charList.char-canvas .char-card {
    position: absolute;
    width: clamp(190px, 13vw, 240px);
    min-height: 200px;
    box-shadow: 0 6px 18px rgba(56,77,115,0.08);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  #charList.char-canvas .char-card:nth-child(1) { left: 5%;  top: 8%; }
  #charList.char-canvas .char-card:nth-child(2) { left: 30%; top: 3%; }
  #charList.char-canvas .char-card:nth-child(3) { right: 30%; top: 8%; }
  #charList.char-canvas .char-card:nth-child(4) { right: 5%;  top: 3%; }
  #charList.char-canvas .char-card:nth-child(5) { left: 7%;  bottom: 20%; }
  #charList.char-canvas .char-card:nth-child(6) { right: 8%; bottom: 24%; }
  #charList.char-canvas .char-card:hover { box-shadow: 0 10px 26px rgba(56,77,115,0.16); }

  /* 选中态：脱离布局居中放大置顶 */
  #charList.char-canvas .char-card.selected {
    position: fixed; left: 50%; top: 40%;
    right: auto;bottom: auto;
    transform: translate(-50%, -50%) scale(1.18);
    z-index: 1000; cursor: default;
    box-shadow: 0 24px 60px rgba(0,0,0,0.3);
  }

  /* 桌面端：默认分散展示时隐藏编辑/删除/使用按钮，仅选中(放大)时显示 */
  #charList.char-canvas .char-card .char-actions { display: none; }
  #charList.char-canvas .char-card.selected .char-actions { display: flex; margin-top: auto; }

  /* 书本占位（下方 1/3 区域） */
  .char-book-placeholder {
    position: absolute; left: 50%; bottom: 0;
    width: 50%; height: 42%; min-height: 260px;
    transform: translateX(-50%);
    display: flex; gap: 20px;
    background: #fff; border-radius: 22px;
    padding: 28px 32px;
    box-shadow: 0 10px 30px rgba(56,77,115,0.10);
    border: 1px dashed #d8e0ec;
  }
  .char-book-left, .char-book-right {
    flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: center;
    gap: 14px; border-radius: 16px; padding: 16px; min-width: 0;
  }
  /* 左页：三个固定主入口，纵向三等分、位置固定（不受右页状态影响） */
  .char-book-left {
    display: grid; grid-template-rows: repeat(3, 1fr);
    grid-template-columns: minmax(0, 1fr); gap: 16px;
    border-right: 1px dashed #dde4ef;
  }
  .char-book-left .cbl-item {
    align-self: stretch; display: grid;
    place-items: center; min-height: 0;
    width: 72%; justify-self: center;
  }
  .cbl-item {
    font-size: 13px; color: #667; background: #f1f4fa;
    border-radius: 10px; padding: 9px 16px; width: 100%; text-align: center;
  }
  /* 左侧「新建角色档案」：可点击，触发现有新建角色流程 */
  .cbl-item.cbl-action {
    cursor: pointer; border: none; font-family: inherit;
    color: #0a7a4f; background: #e3f5ec; font-weight: 600;
    transition: background 0.15s;
  }
  .cbl-item.cbl-action:hover { background: #d3eede; }

  /* 翻页按钮 */
  .char-page-btn {
    position: absolute; bottom: 3%; z-index: 3;
    width: 84px; height: 68px; padding-bottom: 8px;
    display: flex;align-items: center;justify-content: center;
    border: 1px solid #d7deea; border-radius: 999px;
    background: #fff; color: #566174; font-size: 36px;
    cursor: pointer; box-shadow: 0 5px 16px rgba(56,77,115,0.10);
  }
  .char-page-prev { left: calc(25% - 108px); }
  .char-page-next { right: calc(25% - 108px); }
  .char-page-btn:hover:not(:disabled) { background: #f1f4fa; }
  .char-page-btn:disabled { opacity: 0.35; cursor: default; }
  .char-page-btn[hidden] { display: none; }

  /* 管理模式：角色卡可勾选（虚线描边 + 勾选角标），不改基础尺寸/位置/放大动画 */
  #charList.char-canvas .char-card.manage-selectable {
    cursor: pointer;
  }
  #charList.char-canvas .char-card.manage-selectable::after {
    content: "";
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff; border: 2px solid #c9cdd6;
    box-sizing: border-box;
  }
  #charList.char-canvas .char-card.manage-checked {
    outline: 2px solid #07c160; outline-offset: 2px;
  }
  #charList.char-canvas .char-card.manage-checked::after {
    content: "✓";
    background: #07c160; border-color: #07c160;
    color: #fff; font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  #charList.char-canvas .char-card.manage-checked:hover { box-shadow: 0 10px 26px rgba(56,77,115,0.16); }

  /* 书本区：管理操作栏 */
  .char-manage-bar {
    display: flex; flex-direction: column; gap: 8px;
    width: 100%;
  }
  .char-manage-bar .cm-count {
    font-size: 13px; color: #667; text-align: center; font-weight: 600;
  }
  .char-manage-bar .char-btn {
    border: none; border-radius: 10px; padding: 9px 0; font-size: 13px;
    cursor: pointer; font-family: inherit; background: #f1f3f5; color: #333; width: 100%;
  }
  .char-manage-bar .cm-delete { background: #fdecec; color: #e5484d; font-weight: 600; }
  .char-manage-bar .cm-delete:disabled { opacity: 0.4; cursor: not-allowed; }
  .char-manage-bar .cm-done { background: #07c160; color: #fff; font-weight: 600; }

  /* ============ 右页：分组动态内容区（charGroupView 状态） ============ */
  #charGroupRight {
    display: flex; flex-direction: column; gap: 10px; width: 100%;
    min-height: 0; flex: 1; align-items: center;
  }
  .group-title { font-size: 13px; font-weight: 600; color: #667; }
  /* 状态A/状态D：列表区（固定高度内部滚动，不撑高书本） */
  .group-scroll {
    display: flex; flex-direction: column; gap: 8px;
    max-height: 220px; overflow-y: auto;
  }
  .group-scroll,
  .group-settings-home,
  .group-create {
    width: 88%;
}
  .group-item {
    width: 100%; border: none; border-radius: 10px; padding: 9px 14px;
    font-size: 13px; font-family: inherit; cursor: pointer; text-align: left;
    background: #f1f4fa; color: #667;
  }
  .group-item:hover { background: #e7edf6; }
  .group-item.active { background: #07c160; color: #fff; font-weight: 600; }
  .group-empty { font-size: 12px; color: #aaa; text-align: center; padding: 12px; }
  /* 状态B：分组设置首页两个入口 */
  .group-settings-home {
    display: grid; grid-template-rows: repeat(2, 70px); gap: 24px; width: 70%;
      margin-top: auto; margin-bottom: auto;
  }
  .group-settings-entry {
    border: 1px solid #d7deea; border-radius: 12px; background: #fbfcfe;
    font-size: 14px; font-family: inherit; color: #566174; cursor: pointer;
  }
  .group-settings-entry:hover { background: #f1f4fa; }
  /* 状态C：新增分组表单 */
  .group-create { display: flex; flex-direction: column; gap: 8px; }
  .group-create .form-input { padding: 9px 12px; font-size: 13px; }
  .group-create-actions { display: flex; gap: 8px; }
  .group-create-actions .char-btn { flex: 1; }
  /* 状态D：管理分组行 */
  .group-manage-row {
    display: flex; align-items: center; gap: 6px;
    background: #f1f4fa; border-radius: 8px; padding: 7px 10px;
  }
  .group-manage-row .gm-name { flex: 1; font-size: 13px; color: #667; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .group-manage-row .cg-btn {
    border: none; background: transparent; cursor: pointer; font-family: inherit;
    font-size: 11px; padding: 3px 6px; border-radius: 6px; color: #566174; flex-shrink: 0;
  }
  .group-manage-row .cg-btn:hover { background: #e7edf6; }
  .group-manage-row .cg-btn.cg-del { color: #e5484d; }
  /* 管理分组页专属容器：占右页 88% 宽 + 占满高度，标题顶部、列表中间滚动、按钮固定底部 */
  .group-manage-page {
    display: flex; flex-direction: column; gap: 10px;
    width: 88%; flex: 1; min-height: 0; align-self: center;
  }
  .group-manage-page .group-scroll {
    width: 100%; max-height: none; flex: 1; min-height: 0; overflow-y: auto;
  }
  .group-manage-page .group-back { flex: none; align-self: center; width: 72%; }

  /* ============ 桌面端：角色星图页（从星图初始页进入） ============ */
  .char-rolemap-view {
    flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column;
    background: radial-gradient(ellipse at 50% 30%, #1b2a4a 0%, #0d1628 75%);
    overflow: hidden;
  }
  .rolemap-head {
    display: flex; align-items: center; gap: 14px; padding: 14px 24px;
  }
  .rolemap-back {
    border: none; background: transparent; color: #cfe0ff; font-family: inherit;
    font-size: 14px; cursor: pointer;
  }
  .rolemap-title { font-size: 20px; font-weight: 700; color: #e6ecf6; flex: 1; }
  .rolemap-new {
    align-self: center; margin-top: auto; margin-bottom: 50px; flex-shrink: 0;
    width: 52px; height: 52px; border-radius: 50%;
    border: none; font-size: 26px; line-height: 1; font-family: inherit;
    background: #2b6cb0; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(43,108,176,0.4);
  }
  .rolemap-new:hover { background: #3a7cd0; }
  .rolemap-body.rolemap-canvas { flex: 1; min-height: 0; padding: 0; overflow: hidden; position: relative; }
  .rolemap-empty { color: #7d90b0; font-size: 14px; padding: 40px; text-align: center; }
  .rolemap-card {
    position: absolute; transform: translate(-50%, -50%); width: 240px;
    display: flex; flex-direction: column; align-items: center; gap: 6px; color: #cfe0ff;
    cursor: grab;
  }
  .rolemap-card.dragging { cursor: grabbing; }
  .rolemap-card-canvas { width: 100%; aspect-ratio: 1; background: transparent; border-radius: 8px; overflow: hidden; }
  .rolemap-svg { width: 100%; height: 100%; }
  .rolemap-svg .rolemap-lines line { stroke: #6f8bd0; stroke-width: 0.8; }
  .rolemap-svg .rolemap-dots circle { fill: #cfe0ff; }
  .rolemap-card-name { font-size: 14px; font-weight: 600; text-align: center; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 旋转/缩放操作条（卡片下方临时出现）：固定尺寸横向排列，不随星图缩放压缩 */
  .rolemap-ops { display: flex; gap: 20px; margin-top: 8px; flex-shrink: 0; }
  .rolemap-ops button { width: 32px; height: 32px; padding: 0; border: none; border-radius: 6px; flex-shrink: 0; background: rgba(255,255,255,0.12); color: #cfe0ff; cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; }
  .rolemap-ops button:hover { background: rgba(255,255,255,0.22); }
  /* 右键菜单按钮（旋转/缩放）：文字按钮，并排不换行 */
  .rolemap-ops button.sm-menu-btn { width: auto; min-width: 48px; padding: 0 12px; font-size: 13px; white-space: nowrap; }

  /* ============ 桌面端：星图放大查看层 + 修改布局（阶段B） ============ */
  .sm-detail-layer { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; }
  .sm-detail-mask { position: absolute; inset: 0; background: rgba(5,10,20,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .sm-detail-panel { position: relative; z-index: 2; width: 84vh; max-width: calc(100vw - 48px); height: 84vh; max-height: 90vh; display: flex; flex-direction: column; gap: 12px; background: rgba(20,32,56,0.9); border: 1px solid rgba(120,160,220,0.2); border-radius: 16px; padding: 18px; }
  .sm-detail-head { display: flex; align-items: center; gap: 12px; }
  .sm-detail-name { flex: 1; font-size: 18px; font-weight: 700; color: #e6ecf6; }
  .sm-detail-close { border: none; background: transparent; color: #cfe0ff; font-size: 18px; cursor: pointer; }
  .sm-detail-canvas { flex: 1 1 auto; aspect-ratio: 1; align-self: center; max-width: 100%; max-height: 100%; min-height: 0; background: rgba(10,18,34,0.6); border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .sm-detail-svg { width: 100%; height: 100%; }
  .sm-detail-svg .sm-detail-lines line { stroke: #8fa8d8; stroke-width: 0.7; }
  .sm-detail-svg .sm-detail-dots circle { fill: #cfe0ff; stroke: rgba(20,32,56,0.8); stroke-width: 0.3; }
  .sm-detail-svg .sm-detail-dots circle.sel { fill: #ffd76a; stroke: #07c160; stroke-width: 0.6; }
  .sm-detail-actions, .sm-layout-actions { display: flex; gap: 12px; justify-content: flex-end; }
  .sm-detail-actions button, .sm-layout-actions button { border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-family: inherit; background: rgba(255,255,255,0.12); color: #cfe0ff; cursor: pointer; }
  .sm-detail-actions button:hover, .sm-layout-actions button:hover { background: rgba(255,255,255,0.22); }
  .sm-layout-actions button:last-child { background: rgba(255,120,120,0.18); }

  /* ============ 桌面端：新建星图 三栏编辑器 ============ */
  .char-starmap-editor {
    position: fixed; inset: 0; z-index: 300; background: rgba(13,22,40,0.98);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  .sm-name-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 5; background: rgba(13,22,40,0.5); }
  .sm-name-box {
    width: 320px; background: #fff; border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 12px;
  }
  .sm-name-title { font-size: 16px; font-weight: 700; color: #333; }
  .sm-name-actions { display: flex; gap: 10px; }
  .sm-name-actions .char-btn { flex: 1; }
  .sm-editor {
    width: max(920px, 90vw); height: 82vh; display: flex; flex-direction: column; gap: 10px; padding: 20px;
  }
  .sm-editor-head { display: flex; align-items: center; gap: 12px; }
  .sm-editor-name { flex: 1; font-size: 18px; font-weight: 700; color: #e6ecf6; }
  .sm-editor-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
  .sm-col {
    background: rgba(255,255,255,0.05); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden;
  }
  .sm-col-title { font-size: 14px; font-weight: 700; color: #cfe0ff; }
  /* 左栏 */
  .sm-source-switch { display: flex; gap: 8px; }
  .sm-source-btn { flex: 1; padding: 7px; border-radius: 8px; border: 1px solid #34508a; background: transparent; color: #8a93a6; font-size: 13px; font-family: inherit; cursor: pointer; }
  .sm-source-btn.active { background: #2b6cb0; color: #fff; border-color: #2b6cb0; font-weight: 600; }
  .sm-group-select { display: none; }
  .sm-group-select .form-input { color: #333; }
  .sm-people-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
  .sm-person {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: #cfe0ff; background: rgba(255,255,255,0.04);
  }
  .sm-person:hover { background: rgba(255,255,255,0.08); }
  .sm-person.selected { background: #2b6cb0; }
  .sm-person-avatar { width: 30px; height: 30px; border-radius: 50%; font-size: 16px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); flex-shrink: 0; }
  .sm-person-name { font-size: 13px; }
  .sm-selected-count { font-size: 12px; color: #7d90b0; }
  /* 中栏 */
  .sm-rel-row { display: flex; align-items: center; gap: 8px; }
  .sm-rel-row label { width: 52px; font-size: 13px; color: #cfe0ff; }
  .sm-rel-row .form-input { color: #333; }
  .sm-direction { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 8px; }
  .sm-dir-title { font-size: 13px; font-weight: 600; color: #8fd0ff; }
  .sm-dir-fields { display: flex; flex-direction: column; gap: 6px; }
  .sm-dir-fields .form-input { color: #333; }
  .sm-field-label { font-size: 12px; color: #9aaccc; }
  .sm-add-relation { border: none; border-radius: 10px; padding: 10px; font-size: 14px; font-family: inherit; background: #07c160; color: #fff; font-weight: 600; cursor: pointer; margin-top: auto; }
  .sm-add-relation:disabled { opacity: 0.4; cursor: not-allowed; }
  /* 右栏 */
  .sm-relations-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
  .sm-empty { color: #7d90b0; font-size: 13px; padding: 20px; text-align: center; }
  .sm-rel-item { background: rgba(255,255,255,0.06); border-radius: 8px; padding: 10px; cursor: pointer; }
  .sm-rel-item.editing { outline: 2px solid #8fd0ff; }
  .sm-rel-item:hover { background: rgba(255,255,255,0.1); }
  .sm-rel-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .sm-rel-item-title { font-size: 13px; font-weight: 600; color: #e6ecf6; }
  .sm-rel-item-dirs { font-size: 12px; color: #9aaccc; margin-top: 4px; line-height: 1.5; }
  .sm-rel-item .cg-del { margin-top: 0; color: #ff8a8a; flex-shrink: 0; }
  /* 「确认生成星图」固定在右栏底部 */
  .sm-save {
    border: none; border-radius: 10px; padding: 12px; font-size: 14px; font-family: inherit;
    background: #07c160; color: #fff; font-weight: 600; cursor: pointer; width: 100%; flex-shrink: 0;
  }
  /* 编辑模式：保存/取消并排固定底部 */
  .sm-save-row { display: flex; gap: 8px; flex-shrink: 0; }
  .sm-save-row .sm-save { flex: 1; min-width: 0; }
  .sm-save-row #smCancelEdit { flex: 1; min-width: 0; border: none; border-radius: 10px; padding: 12px; font-size: 14px; font-family: inherit; background: #eef2f7; color: #333; cursor: pointer; font-weight: 600; }
}

/* ============ 手机端：角色档案 全屏画布（覆盖旧两栏毛坯布局） ============ */
@media (max-width: 767px) {
  /* 全屏纵向：顶部标题栏 + 中间画布 + 底部操作区 */
  #charactersView.active {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: #f4f7fb;
  }
  #charactersView .page-header {
    flex-direction: row; align-items: center; gap: 10px;
    padding: 10px 16px; background: transparent; border-bottom: none;
    border-right: none; height: auto; box-shadow: none; position: relative;
  }
  #charactersView .page-header .back-btn { width: auto; height: auto; margin: 0; font-size: 22px; padding: 4px 8px; }
  #charactersView .page-header .title {
    flex-direction: row; align-items: center; gap: 6px;
    font-size: 18px; line-height: 1.2; width: auto;
  }
  #charactersView .page-header .title .page-title-icon { font-size: 22px; margin-right: 0; }
  /* 手机端标题区改为子导航，隐藏原“📜 角色档案”标题 */
  #charactersView .page-header .title { display: none; }
  /* 手机端子导航（角色档案 / 星图） */
  .mob-sub-nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
  .mob-sub-nav-item { border: none; background: transparent; font-family: inherit; font-size: 15px; color: #7f8ba1; cursor: pointer; padding: 6px 8px; position: relative; }
  .mob-sub-nav-item.active { color: #2b6cb0; font-weight: 600; }
  .mob-sub-nav-item.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 1px; height: 2px; background: #2b6cb0; border-radius: 2px; }
  /* 手机端星图主界面（空白容器，占满剩余区域） */
  .mob-starmap-view { flex: 1; min-height: 0; position: relative; background: radial-gradient(ellipse at 50% 40%, #1b2a4a 0%, #0d1628 70%); overflow: hidden; }
  /* 手机端角色星图页基础结构 */
  .mob-rolemap-view { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; background: radial-gradient(ellipse at 50% 30%, #1b2a4a 0%, #0d1628 75%); }
  .mob-rolemap-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
  .mob-rolemap-back { border: none; background: transparent; color: #cfe0ff; font-size: 14px; font-family: inherit; cursor: pointer; }
  .mob-rolemap-title { flex: 1; font-size: 18px; font-weight: 700; color: #e6ecf6; }
  .mob-rolemap-body { flex: 1; min-height: 0; position: relative; background: rgba(10,18,34,0.2); }
  /* 底部中央「＋」新建星图入口 */
  .mob-rolemap-new {
    position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
    width: 52px; height: 52px; border-radius: 50%; border: none; font-size: 26px; line-height: 1; font-family: inherit;
    background: #2b6cb0; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(43,108,176,0.4);
  }
  .mob-rolemap-new:hover { background: #3a7cd0; }
  /* 手机端新建星图编辑器：全屏 + 一次显示一个表单（分页） */
  .char-starmap-editor { position: fixed; inset: 0; z-index: 300; background: rgba(13,22,40,0.98); display: flex; flex-direction: column; align-items: center; justify-content: center; }
  /* 命名层 */
  .sm-name-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 5; background: rgba(13,22,40,0.5); }
  .sm-name-box { width: min(86vw, 340px); background: #fff; border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
  .sm-name-title { font-size: 16px; font-weight: 700; color: #333; }
  .sm-name-actions { display: flex; gap: 10px; }
  .sm-name-actions .char-btn { flex: 1; }
  /* 编辑器主体 */
  .sm-editor { width: 100%; height: 100%; padding: 16px; gap: 10px; overflow-y: auto; display: flex; flex-direction: column; }
  .sm-editor-head { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; flex-shrink: 0; }
  .sm-editor-name { flex: 1; font-size: 16px; font-weight: 700; color: #e6ecf6; }
  /* 表单区：一次显示一页 */
  .sm-editor-cols { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .sm-editor-cols .sm-col { display: none; }
  .sm-editor-cols .sm-col.active { display: flex; flex: 1; min-height: 0; flex-direction: column; overflow-y: auto; background: rgba(255,255,255,0.05); border-radius: 12px; padding: 14px; gap: 10px; }
  .sm-col-title { font-size: 14px; font-weight: 700; color: #cfe0ff; }
  /* 左栏：参与人物 */
  .sm-source-switch { display: flex; gap: 8px; }
  .sm-source-btn { flex: 1; padding: 7px; border-radius: 8px; border: 1px solid #34508a; background: transparent; color: #8a93a6; font-size: 13px; font-family: inherit; cursor: pointer; }
  .sm-source-btn.active { background: #2b6cb0; color: #fff; border-color: #2b6cb0; font-weight: 600; }
  .sm-group-select { display: none; }
  .sm-group-select .form-input { color: #333; }
  .sm-people-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
  .sm-person { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: #cfe0ff; background: rgba(255,255,255,0.04); }
  .sm-person.selected { background: #2b6cb0; }
  .sm-person-avatar { width: 30px; height: 30px; border-radius: 50%; font-size: 16px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); flex-shrink: 0; }
  .sm-person-name { font-size: 13px; }
  .sm-selected-count { font-size: 12px; color: #7d90b0; }
  /* 中栏：人物关系 */
  .sm-rel-row { display: flex; align-items: center; gap: 8px; }
  .sm-rel-row label { width: 52px; font-size: 13px; color: #cfe0ff; }
  .sm-rel-row .form-input { color: #333; }
  .sm-direction { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 8px; }
  .sm-dir-title { font-size: 13px; font-weight: 600; color: #8fd0ff; }
  .sm-dir-fields { display: flex; flex-direction: column; gap: 6px; }
  .sm-dir-fields .form-input { color: #333; }
  .sm-field-label { font-size: 12px; color: #9aaccc; }
  .sm-add-relation { border: none; border-radius: 10px; padding: 10px; font-size: 14px; font-family: inherit; background: #07c160; color: #fff; font-weight: 600; cursor: pointer; margin-top: auto; }
  .sm-add-relation:disabled { opacity: 0.4; cursor: not-allowed; }
  /* 右栏：已添加关系 */
  .sm-relations-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
  .sm-empty { color: #7d90b0; font-size: 13px; padding: 20px; text-align: center; }
  .sm-rel-item { background: rgba(255,255,255,0.06); border-radius: 8px; padding: 10px; cursor: pointer; }
  .sm-rel-item.editing { outline: 2px solid #8fd0ff; }
  .sm-rel-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .sm-rel-item-title { font-size: 13px; font-weight: 600; color: #e6ecf6; }
  .sm-rel-item-dirs { font-size: 12px; color: #9aaccc; margin-top: 4px; line-height: 1.5; }
  .sm-rel-item .cg-del { margin-top: 0; color: #ff8a8a; flex-shrink: 0; }
  /* 手机端翻页操作栏（固定底部） */
  .mob-sm-footer { display: flex; align-items: center; gap: 8px; padding-top: 10px; flex-shrink: 0; }
  .mob-sm-page-btn { flex: 1; border: none; border-radius: 10px; padding: 12px; font-size: 14px; font-family: inherit; background: rgba(255,255,255,0.12); color: #cfe0ff; cursor: pointer; }
  .mob-sm-page-btn:disabled { opacity: 0.35; cursor: default; }
  .mob-sm-save { flex: 1; border: none; border-radius: 10px; padding: 12px; font-size: 14px; font-family: inherit; background: #07c160; color: #fff; font-weight: 600; cursor: pointer; }
  /* 手机端右栏保存按钮隐藏（改用底部“生成”） */
  .sm-col-right .sm-save { display: none; }
  /* 两个主要功能星座（中上部左右错位） */
  .mob-constellation {
    position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: #cfe0ff; opacity: 0.95;
  }
  .mob-constellation-svg { width: min(56vw, 215px); height: auto; }
  .mob-constellation-svg line { stroke: #6f8bd0; stroke-width: 1.5; }
  .mob-constellation-svg circle { fill: #cfe0ff; }
  .mob-constellation-name { font-size: min(4vw, 15px); color: #cfe0ff; margin-top: 2px; }
  .mob-constellation-1 { left: 6%; top: 7%; }
  .mob-constellation-2 { right: 5%; top: 34.5%; transform: translateY(-20px); }
  .mob-constellation-2 .mob-constellation-name { margin-top: -8px; }
  /* 水晶球（下部，预留底部空间，充当后续说明区） */
  .mob-crystal-ball {
    position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%) translateY(20px);
    width: min(70vw, 250px); aspect-ratio: 1; border-radius: 50%;
    background:
      radial-gradient(circle at 35% 30%, rgba(255,255,255,0.45), rgba(255,255,255,0) 40%),
      radial-gradient(circle at 50% 50%, #3b5b9e 0%, #1c2c52 60%, #101a36 100%);
    border: 1px solid rgba(160,200,255,0.25);
    box-shadow: 0 0 40px rgba(90,150,255,0.35), inset 0 0 30px rgba(120,170,255,0.2);
  }
  .mob-crystal-ball-inner { width: 100%; height: 100%; border-radius: 50%; }
  /* 选中星座时水晶球内浮现的名称+简介（居中、朦胧） */
  .mob-crystal-ball-caption {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 16%; gap: 8px;
  }
  .mob-cb-name { font-size: min(5vw, 18px); font-weight: 700; color: #eaf4ff; letter-spacing: 1px; }
  .mob-cb-intro { font-size: min(3.1vw, 11px); line-height: 1.45; color: rgba(210,228,255,0.85); max-width: 82%; }
  /* 选中星座点亮：星线加粗发光、星点发白光晕 */
  .mob-constellation.selected .mob-constellation-svg line { stroke: #aac8f6; stroke-width: 2.4; filter: drop-shadow(0 0 5px rgba(130,180,255,0.9)); }
  .mob-constellation.selected .mob-constellation-svg circle { fill: #f2f8ff; filter: drop-shadow(0 0 7px rgba(160,200,255,1)); }
  .mob-constellation.selected .mob-constellation-name { color: #fff; }
  .mob-char-filter-btn {
    margin-left: auto; border: 1px solid #d7deea; border-radius: 9px;
    padding: 7px 11px; background: #fff; color: #566174;
    font-size: 13px; font-family: inherit; cursor: pointer;
  }
  .mob-char-filter-card {
    position: absolute; top: calc(100% - 4px); right: 16px; z-index: 110;
    width: min(210px, 62vw); max-height: min(280px, 48vh); overflow-y: auto;
    flex-direction: column; gap: 6px; padding: 10px;
    background: #fff; border: 1px solid #e3e8f0; border-radius: 12px;
    box-shadow: 0 10px 26px rgba(56,77,115,0.18);
  }
  .mob-char-filter-item {
    flex: none; width: 100%; border: none; border-radius: 8px; padding: 9px 10px;
    background: #f1f4fa; color: #566174; text-align: left;
    font-size: 13px; font-family: inherit; cursor: pointer;
  }
  .mob-char-filter-item.active { background: #07c160; color: #fff; font-weight: 600; }
  #charactersView .sub-body {
    flex: 1; min-height: 0; position: relative; display: block;
    padding: 0; background: #f4f7fb; height: auto;
  }
  /* 手机端分页状态：标题下方、第一排角色卡上方 */
  .char-page-dots {
    position: absolute; left: 50%; top: 3px; bottom: auto; z-index: 4;
    transform: translateX(-50%);
    display: flex; align-items: center; justify-content: center; gap: 6px;
  }
  .char-page-dot { width: 6px; height: 6px; border-radius: 50%; background: #d4dbe6; }
  .char-page-dot.active { width: 8px; height: 8px; background: #758196; }
  /* 角色画布止于固定底栏上方：5 个固定错落位置（散落纸片） */
  #charList.char-canvas {
    position: absolute;
    inset: 0 0 calc(73px + max(0px, env(safe-area-inset-bottom) - 10px));
    overflow: hidden;
  }
  #charList.char-canvas .char-card.mob-card {
    position: absolute; width: 42vw; max-width: 170px; min-height: 140px;
    box-sizing: border-box; cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  #charList.char-canvas .char-card.mob-card:nth-child(1) { left: 5%;  top: 2%;  }
  #charList.char-canvas .char-card.mob-card:nth-child(2) { right: 5%; top: 8%; }
  #charList.char-canvas .char-card.mob-card:nth-child(3) { left: 29%; top: 38%; }
  #charList.char-canvas .char-card.mob-card:nth-child(4) { right: 5%; bottom: 4%; }
  #charList.char-canvas .char-card.mob-card:nth-child(5) { left: 5%;  bottom: 2%; }
  #charList.char-canvas .char-card.mob-card .char-main { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  #charList.char-canvas .char-card.mob-card .char-avatar { width: 56px; height: 56px; border-radius: 16px; font-size: 28px; }
  #charList.char-canvas .char-card.mob-card .char-info { flex: none; }
  /* 手机端：普通卡片不显示编辑/删除/使用按钮 */
  #charList.char-canvas .char-card.mob-card .char-actions { display: none; }
  /* 手机端选中放大居中置顶，此时才显示操作按钮 */
  #charList.char-canvas .char-card.mob-card.selected {
    position: fixed; left: 50%; top: 42%;
    right: auto; bottom: auto;
    transform: translate(-50%, -50%) scale(1.15);
    z-index: 1000; cursor: default;
    width: 74vw; max-width: 300px; min-height: 260px;
  }
  #charList.char-canvas .char-card.mob-card.selected .char-actions { display: flex; margin-top: auto; }
  #charList.char-canvas .char-card.mob-card.selected .char-main { flex-direction: row; align-items: center; text-align: left; }
  #charList.char-canvas .char-card.mob-card.selected .char-avatar { width: 64px; height: 64px; border-radius: 50%; font-size: 32px; }
  #charList.char-canvas .char-card.mob-card.selected .char-info { flex: 1; }
  /* 管理模式：可勾选 */
  #charList.char-canvas .char-card.mob-card.manage-selectable { cursor: pointer; }
  #charList.char-canvas .char-card.mob-card.manage-checked { outline: 2px solid #07c160; outline-offset: 2px; }
  #charList.char-canvas .char-card.mob-card.manage-checked::after {
    content: "✓"; position: absolute; top: 6px; right: 6px;
    width: 20px; height: 20px; border-radius: 50%; background: #07c160; color: #fff;
    font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  }

  /* 底部操作区（固定） */
  .mob-char-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 18px; padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #eef0f5;
  }
  .mob-char-page-btn {
    width: 48px; height: 44px; border-radius: 12px; border: 1px solid #d7deea;
    background: #fbfcfe; color: #566174; font-size: 20px; cursor: pointer; font-family: inherit;
  }
  .mob-char-page-btn:disabled { opacity: 0.35; cursor: default; }
  .mob-char-main-btn {
    width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer; font-family: inherit;
    background: #07c160; color: #fff; font-size: 24px; box-shadow: 0 6px 16px rgba(7,193,96,0.4);
  }

  /* 总按钮子菜单 */
  .mob-char-menu {
    position: fixed; left: 50%; bottom: 66px; transform: translateX(-50%);
    z-index: 95; display: flex; flex-direction: column; gap: 8px; width: 60%;
    background: #fff; border-radius: 14px; padding: 10px; box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  }
  .mob-char-menu-item {
    border: none; border-radius: 10px; padding: 12px; font-size: 14px; font-family: inherit;
    background: #f1f4fa; color: #566174; cursor: pointer;
  }
  .mob-char-menu-item:hover { background: #e7edf6; }
  /* 手机端新建档案类型卡内选项：单独控制尺寸，不影响总按钮子菜单 */
  #mobArchiveTypeCard .mob-char-menu-item {
    width: 80%; max-width: 100%; height: 64px; padding: 0 12px;
    display: flex; align-items: center; justify-content: center; align-self: center;
    margin-top: 8px;
  }

  /* 管理模式操作区（固定底部） */
  .mob-manage-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 92;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #eef0f5;
  }
  .mob-manage-count { font-size: 13px; color: #667; font-weight: 600; }
  .mob-manage-delete { flex: 1; border: none; border-radius: 10px; padding: 10px; font-size: 14px; font-family: inherit; background: #fdecec; color: #e5484d; font-weight: 600; }
  .mob-manage-delete:disabled { opacity: 0.4; cursor: not-allowed; }
  .mob-manage-done { border: none; border-radius: 10px; padding: 10px 16px; font-size: 14px; font-family: inherit; background: #07c160; color: #fff; font-weight: 600; }

  /* 分组设置卡（浮层） */
  .mob-group-card {
    position: fixed; left: 8%; right: 8%; top: 18%; z-index: 96;
    display: flex; flex-direction: column; gap: 12px;
    background: #fff; border-radius: 16px; padding: 16px;
    box-shadow: 0 14px 36px rgba(0,0,0,0.2);
  }
  .mob-group-tabs { display: flex; gap: 8px; }
  .mob-group-tab { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid #e3e6ee; background: #fff; color: #666; font-size: 14px; font-family: inherit; cursor: pointer; }
  .mob-group-tab.active { background: #07c160; color: #fff; border-color: #07c160; font-weight: 600; }
  .mob-group-body { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
  .mob-group-new-row { display: flex; gap: 8px; align-items: center; }
  .mob-group-row { display: flex; align-items: center; gap: 8px; background: #f1f4fa; border-radius: 8px; padding: 8px 10px; }
  .mob-group-name { flex: 1; font-size: 13px; color: #667; }
  .mob-group-close { border: none; border-radius: 10px; padding: 10px; font-size: 14px; font-family: inherit; background: #eef2f7; color: #333; cursor: pointer; }

  /* 手机端：角色编辑弹窗全屏化（复用 #charModal，字段/保存逻辑不变） */
  #charModal { padding: 0; }
  #charModal .modal-box {
    width: 100%; max-width: none; max-height: 100vh; height: 100%;
    border-radius: 0; overflow-y: auto; padding: 16px;
  }
}

/* 共用编辑器的左右书页状态：主要角色为左页，NPC 为镜像右页 */
#charModal.char-editor-main .modal-box { border-radius: 18px 0 0 18px; }
#charModal.char-editor-npc .modal-box { border-radius: 0 18px 18px 0; }

/* 手机端：编辑弹窗去圆角、覆盖全屏（覆盖上方左右书页圆角；桌面端保留） */
@media (max-width: 767px) {
  #charModal.char-editor-main .modal-box,
  #charModal.char-editor-npc .modal-box {
    border-radius: 0;
  }
}