/* ============================================================
   AIMUD · 九州仙踪 — 终端风格客户端
   深色 CRT 终端主题：扫描线 + 暗角，全部纯 CSS 实现，保持低调
   ============================================================ */

/* ---------- 变量 ---------- */
:root {
  --bg: #0a0e12;          /* 全局背景 */
  --bg-bar: #0c1116;      /* 顶栏 / 输入栏背景 */
  --fg: #c8d3d5;          /* 正文 */
  --line: #1b2730;        /* 分隔线 */
  --c-room: #7ecb6f;      /* 房间描述：青绿 */
  --c-sys: #7fc4c9;       /* 系统 / 确认：灰青 */
  --c-event: #ffb454;     /* 玩家动态：琥珀 */
  --c-say: #eef4f6;       /* 对话：加亮 */
  --c-narr: #8fd3a7;      /* AI 叙事：淡绿 */
  --c-err: #ff6b6b;       /* 错误：红 */
  --c-muted: #5f6d72;     /* 次要信息：灰 */
  --font: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* 刘海屏/横屏安全区（默认 0，不支持 env() 时回落） */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; }

/* 触屏：消除 300ms 点击延迟与双击缩放 */
button { touch-action: manipulation; }

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.65;
  -webkit-tap-highlight-color: transparent;
}

::selection { background: rgba(126, 203, 111, 0.28); }

/* ---------- 顶栏 ---------- */
#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(12px + var(--safe-top)) 18px 12px;
  background: linear-gradient(180deg, #10171c, var(--bg-bar));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(126, 203, 111, 0.05);
}

#topbar h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 4px;
  color: #d4f7c2;
  text-shadow: 0 0 12px rgba(126, 203, 111, 0.35);
}

/* 顶栏版本号徽标（跟随内容包 manifest.version，硬编码展示） */
#topbar h1 .ver {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #8fc49e;
  border: 1px solid rgba(126, 203, 111, 0.35);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: middle;
  text-shadow: none;
}

/* 连接状态指示点：绿=已连接，黄=重连中，红=断开 */
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2c373d;
  transition: background 0.3s, box-shadow 0.3s;
}
.dot.on {
  background: #4ade80;
  box-shadow: 0 0 8px 1px rgba(74, 222, 128, 0.6);
}
.dot.warn {
  background: #fbbf24;
  box-shadow: 0 0 8px 1px rgba(251, 191, 36, 0.55);
  animation: pulse 1.2s ease-in-out infinite;
}
.dot.off {
  background: #ef4444;
  box-shadow: 0 0 8px 1px rgba(239, 68, 68, 0.5);
}
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---------- 房间卡固定面板（常驻页面顶部 #room-panel：当前房间；不随日志滚动） ---------- */
#room-panel {
  flex: none;
  padding: 8px 18px 10px;
  background: var(--bg-bar);
  border-bottom: 1px solid var(--line);
}
/* 房间卡（面板内仅一张：换房时整体重建，不再有内嵌时间线/旧卡折叠） */
#room-panel .room-card {
  margin: 0;
  padding: 8px 12px 10px;
  border: 1px solid rgba(126, 203, 111, 0.28);
  border-left: 3px solid rgba(126, 203, 111, 0.6);
  border-radius: 4px;
  background: rgba(126, 203, 111, 0.045);
}
/* 换房切换入场动画：淡入下落（自上方滑入，仿终端打印感）+ 绿色辉光脉冲。
   仅换房（.room-card-enter）播放；同房重建（look）不重复。 */
.room-card-enter {
  animation:
    roomCardIn 0.45s ease-out,
    roomCardGlow 0.9s ease-out;
}
@keyframes roomCardIn {
  0%   { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes roomCardGlow {
  0%   { border-color: rgba(126, 203, 111, 0.28); box-shadow: 0 0 0 rgba(126, 203, 111, 0); }
  35%  { border-color: rgba(126, 203, 111, 0.75); box-shadow: 0 0 16px rgba(126, 203, 111, 0.4); }
  100% { border-color: rgba(126, 203, 111, 0.28); box-shadow: 0 0 0 rgba(126, 203, 111, 0); }
}
/* 移动中房卡整体锁定：不可点、微暗（room.js lockRoomCard 加 .locked；room-info 重建即解锁）。
   pointer-events 连带 rc-collapse-btn 在内全部按钮失效——移动叙事流期间旧卡整体只读。 */
.room-card.locked {
  pointer-events: none;
  opacity: .55;
}
/* 系统「减弱动态效果」：不播放卡片动画与收展过渡（含面板弹窗进场动画） */
@media (prefers-reduced-motion: reduce) {
  .room-card-enter { animation: none; }
  .room-card-body { transition: none; }
  #help-panel, #bag-panel, #shop-panel, #market-panel, #quest-panel,
  #gift-panel, #auction-panel, #styles-panel, #status-panel, #equip-panel,
  #cave-panel,
  .help-box, .bag-box, .equip-box, .status-box, .styles-box { animation: none; }
  .status-hero, .status-sec { animation: none; }
  .sbar-fill { transition: none; }
  .sbar.hp.low .sbar-fill { animation: none; }
  .status-sec-arrow { transition: none; }
  .status-refresh-ico.spinning { animation: none; }
}
.room-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #c9f7b0;
  text-shadow: 0 0 10px rgba(126, 203, 111, 0.3);
}
.room-card-title strong {
  flex: 1;
  min-width: 0;
}
/* 折叠/展开按钮：默认展开；折叠后仅剩标题一行（省出顶部空间给日志） */
.rc-collapse-btn {
  flex: none;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0;
  color: #8fc49e;
  background: rgba(126, 203, 111, 0.08);
  border: 1px solid rgba(126, 203, 111, 0.35);
  border-radius: 3px;
  padding: 1px 8px;
  cursor: pointer;
}
.rc-collapse-btn:hover {
  color: #d4f7c2;
  background: rgba(126, 203, 111, 0.16);
}
/* 可折叠内容体：grid 行高 1fr ⇄ 0fr 平滑收展（折叠时仅标题可见；内容仍保持最新） */
.room-card-body {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.28s ease, opacity 0.2s ease;
}
.room-card-body-inner {
  min-height: 0;
  overflow: hidden;
}
.room-card.collapsed .room-card-body {
  grid-template-rows: 0fr;
  opacity: 0;
}
.room-card-desc {
  margin: 4px 0 6px;
  white-space: pre-wrap;
  color: var(--c-room);
}
/* 按钮行：小标题 + 按钮组（窄屏换行）；空列表整行隐藏 */
.rc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  margin-top: 6px;
}
.rc-row-title {
  flex: none;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--c-muted);
}
/* 物品行 / 氛围行文本（环顾内容进房间卡；纯展示，无按钮） */
.rc-items,
.rc-attrs {
  color: var(--c-room);
  font-size: 12px;
  line-height: 1.5;
}
/* 出口方向按钮：青色调（沿用原场景按钮视觉语言） */
.rc-btn.dir {
  color: #9fd8e8;
  border-color: rgba(127, 196, 201, 0.4);
}
.rc-btn.dir:hover {
  color: #d9f4fb;
  border-color: rgba(127, 196, 201, 0.8);
  background: rgba(127, 196, 201, 0.12);
}
/* 玩家按钮：青色系（选中态 = 当前私聊目标） */
.rc-btn.player {
  color: #9fe4f0;
  border-color: rgba(93, 190, 205, 0.45);
}
.rc-btn.player:hover {
  color: #d9f4fb;
  border-color: rgba(93, 190, 205, 0.85);
  background: rgba(93, 190, 205, 0.12);
}
.rc-btn.player.sel {
  border-color: #7ecb6f;
  background: rgba(126, 203, 111, 0.16);
  color: #d4f7c2;
  box-shadow: 0 0 8px rgba(126, 203, 111, 0.35);
}
/* NPC 按钮：琥珀色系 */
.rc-btn.npc {
  color: #ffd9a0;
  border-color: rgba(224, 158, 74, 0.45);
}
.rc-btn.npc:hover {
  color: #ffe3b8;
  border-color: rgba(224, 158, 74, 0.85);
  background: rgba(224, 158, 74, 0.12);
}
/* NPC 按钮选中态（展开行打开时高亮展示该 NPC） */
.rc-btn.npc.sel {
  border-color: #f0b95c;
  background: rgba(240, 185, 92, 0.18);
  color: #ffe3b8;
  box-shadow: 0 0 8px rgba(240, 185, 92, 0.4);
}
/* 妖兽按钮：危险赤色系（遭遇战入口；点击直接迎战当前房间妖兽） */
.rc-btn.beast {
  color: #ffb4a0;
  border-color: rgba(224, 90, 74, 0.5);
}
.rc-btn.beast:hover {
  color: #ffd6c4;
  border-color: rgba(224, 90, 74, 0.9);
  background: rgba(224, 90, 74, 0.14);
}
/* 精英妖兽按钮（每日赏格 §3.5 v1，服务端富化 beasts[].bounty）：金色描边微调，区别于常规遭遇兽 */
.rc-btn.beast.elite {
  color: #ffe08a;
  border-color: rgba(240, 185, 92, 0.75);
  box-shadow: 0 0 6px rgba(240, 185, 92, 0.25);
}
/* 战前姿态选择组（妖兽行上方）：三态小芯片，选中态高亮——
   常规中性绿调、搏命微红（复用妖兽赤）、稳守微蓝（复用玩家青），未选保持默认灰 */
.rc-btn.stance.sel {
  color: #d4f7c2;
  border-color: rgba(126, 203, 111, 0.6);
  background: rgba(126, 203, 111, 0.08);
}
.rc-btn.stance-allout.sel {
  color: #ffb4a0;
  border-color: rgba(224, 90, 74, 0.8);
  background: rgba(224, 90, 74, 0.16);
}
.rc-btn.stance-guard.sel {
  color: #9fd8e8;
  border-color: rgba(93, 190, 205, 0.8);
  background: rgba(93, 190, 205, 0.14);
}
/* 物品按钮：草绿拾取色（房间卡地上物品；点击直发 take 拾取入行囊，拾取后芯片随事件移除） */
.rc-btn.item {
  color: #b9e6a4;
  border-color: rgba(126, 203, 111, 0.4);
}
.rc-btn.item:hover {
  color: #d4f7c2;
  border-color: rgba(126, 203, 111, 0.85);
  background: rgba(126, 203, 111, 0.12);
}
/* 房间卡动作按钮运行态（§4.4 Q5）：进行中的持续动作 → 金色高亮 + 「· 停止」 */
.rc-btn.act.running {
  color: #ffe3a0;
  border-color: rgba(240, 180, 80, 0.8);
  background: rgba(240, 180, 80, 0.15);
  box-shadow: 0 0 8px rgba(240, 180, 80, 0.35);
  font-weight: bold;
}
.rc-btn.act.running:hover {
  color: #fff2cf;
  border-color: rgba(240, 180, 80, 1);
  background: rgba(240, 180, 80, 0.25);
}
/* NPC 内联展开操作行：占满整行换行，左琥珀描边区分 */
.npc-expand {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 4px 0 2px 12px;
  border-left: 2px solid rgba(224, 158, 74, 0.35);
}
/* NPC 展开行顶部信息条：名 + 描述（点击 NPC 后的高亮展示） */
.npc-info {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 3px 8px;
  border-left: 3px solid rgba(240, 185, 92, 0.7);
  background: rgba(240, 185, 92, 0.08);
  border-radius: 3px;
  color: #ffe3b8;
  font-size: 13px;
  line-height: 1.5;
}
.npc-info b {
  color: #ffd9a0;
  font-weight: 600;
}
/* 玩家→玩家展开行：左边框换青色，与玩家按钮 palette 一致 */
.player-expand {
  border-left-color: rgba(93, 205, 255, 0.35);
}
/* 好友列表：离线好友置灰不可点（在线可点击设为私聊目标） */
.rc-btn.friend-off {
  opacity: 0.45;
  cursor: not-allowed;
}
/* 学艺 / 送礼 / 拜入宗门确认 / 委托描述卡 子列表：紧凑小号按钮 */
.teach-list,
.gift-list,
.sect-join-list,
.task-info {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 0 10px;
}
.skill-btn,
.gift-btn,
.sect-join-btn {
  font-size: 10px;
  padding: 2px 8px;
}
.skill-btn {
  color: #8fd3a7;
  border-color: rgba(143, 211, 167, 0.35);
}
.skill-btn:hover {
  color: #d4f7c2;
  border-color: rgba(143, 211, 167, 0.7);
  background: rgba(143, 211, 167, 0.1);
}
.gift-btn {
  color: #ffd97a;
  border-color: rgba(251, 191, 36, 0.35);
}
.gift-btn:hover {
  color: #ffe3b8;
  border-color: rgba(251, 191, 36, 0.7);
  background: rgba(251, 191, 36, 0.1);
}
/* 拜入宗门确认：信息行通栏，缴纳按钮宗门紫金色系 */
.sect-join-info {
  flex: 1 1 100%;
  font-size: 10px;
  color: #c9b8ff;
}
.sect-join-btn {
  color: #c9b8ff;
  border-color: rgba(150, 120, 255, 0.4);
}
.sect-join-btn:hover {
  color: #e3d9ff;
  border-color: rgba(150, 120, 255, 0.8);
  background: rgba(150, 120, 255, 0.12);
}
/* 委托描述卡：描述/报酬/进度通栏信息行（暖色，仿 sect-join-info）；可交付行金高亮（同任务面板 quest-deliverable 色系） */
.task-info .task-info-line {
  flex: 1 1 100%;
  font-size: 10px;
  color: #ffe3b8;
}
.task-info .task-info-ready {
  color: #ffd97a;
}
/* 交付领赏按钮：金色微光底（金高亮思路同 .quest-deliverable），承接按钮用 gift-btn 金色系即可 */
.task-info .gift-btn.deliver {
  border-color: rgba(251, 191, 36, 0.8);
  background: rgba(251, 191, 36, 0.12);
}
.task-info .gift-btn.deliver:hover {
  color: #fff2cf;
  border-color: rgba(251, 191, 36, 1);
  background: rgba(251, 191, 36, 0.22);
}

/* ---------- 日志区 ---------- */
#log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 18px 24px;
  scrollbar-width: thin;
  scrollbar-color: #22303a transparent;
}
#log::-webkit-scrollbar { width: 10px; }
#log::-webkit-scrollbar-track { background: transparent; }
#log::-webkit-scrollbar-thumb {
  background: #1d2931;
  border-radius: 6px;
  border: 2px solid var(--bg);
}
#log::-webkit-scrollbar-thumb:hover { background: #2b3b46; }

.log-line {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 2px;
}

/* 行样式分类 */
.sys   { color: var(--c-sys); }
.room  { color: var(--c-room); }
.room strong {
  color: #c9f7b0;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(126, 203, 111, 0.3);
}
.event { color: var(--c-event); }
.say   { color: var(--c-say); }
.err   { color: var(--c-err); }
.muted { color: var(--c-muted); }
/* 频道行配色：传音（淡紫）/ 世界广播（琥珀橙）/ 队伍（青）/ 宗门（天蓝） */
.whisper-in { color: #c9a0ff; }
.yell       { color: #ffab6b; }
.party      { color: #6fd3c7; }
.sect       { color: #8fb7ff; }

/* NPC 委托提议（AI 派任务 v0）：淡金底提议行 + 报酬小字行（金系同 .quest-deliverable/.gift-btn.deliver） */
.log-line.offer {
  color: #ffd97a;
  background: rgba(251, 191, 36, 0.07);
  border-left: 2px solid rgba(251, 191, 36, 0.55);
  padding: 3px 8px;
  border-radius: 3px;
}
.log-line.offer-reward {
  color: rgba(255, 217, 122, 0.78);
  font-size: 11px;
  padding-left: 11px;
}
/* 解谜委托谜面块（AI 解谜）：青玉色独立块，与金系提议行区分（谜面：前缀标签由 world.js 拼接） */
.log-line.riddle-clue {
  color: #9fe8cf;
  background: rgba(111, 211, 199, 0.08);
  border-left: 2px solid rgba(111, 211, 199, 0.55);
  padding: 3px 8px;
  border-radius: 3px;
}
/* 提议接受按钮：金高亮，一眼看到「能领的活」（同 .quest-deliverable 强调色系） */
.rc-btn.offer-accept {
  color: #ffd97a;
  border-color: rgba(251, 191, 36, 0.45);
}
.rc-btn.offer-accept:hover {
  color: #ffe3b8;
  border-color: rgba(251, 191, 36, 0.9);
  background: rgba(251, 191, 36, 0.14);
}
/* 已应答的提议按钮（接受/婉拒任一点击后双双禁用，防重复提交） */
.cmd-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* AI 叙事段落：淡绿斜体，前置 ✦，左侧细描边 */
.narr {
  color: var(--c-narr);
  font-style: italic;
  margin: 6px 0;
  padding-left: 10px;
  border-left: 2px solid rgba(143, 211, 167, 0.22);
}
.narr::before { content: '✦ '; color: #6da88a; }
/* NPC 台词流说话人名（stream:start.speaker）：去斜体、琥珀强调，与事件行同色系 */
.narr-speaker {
  font-style: normal;
  font-weight: 600;
  color: var(--c-event);
}

/* 叙事输出中的闪烁光标 */
.stream-pending::after {
  content: '▌';
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- 天机简报面板（等宽框 + 标题 + 分隔线） ---------- */
.digest {
  margin: 10px 0 12px;
  padding: 8px 14px 10px;
  border: 1px solid rgba(127, 196, 201, 0.45);
  border-left: 3px solid rgba(127, 196, 201, 0.75);
  border-radius: 4px;
  background: rgba(127, 196, 201, 0.07);
  color: var(--c-sys);
}
.digest-title {
  font-weight: 700;
  letter-spacing: 3px;
  color: #a8e2e8;
  text-shadow: 0 0 10px rgba(127, 196, 201, 0.45);
}
.digest-sep {
  height: 1px;
  margin: 5px 0 7px;
  background: linear-gradient(90deg, rgba(127, 196, 201, 0.6), transparent);
}

/* ---------- 境界突破：金色高亮 + 约 3 秒闪烁后常驻金色 ---------- */
.realmup {
  color: #ffd700;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.55);
  animation: realm-flash 3s ease-out 1;
}
@keyframes realm-flash {
  0%   { text-shadow: 0 0 26px rgba(255, 215, 0, 1), 0 0 10px rgba(255, 215, 0, 0.9); }
  40%  { text-shadow: 0 0 5px rgba(255, 215, 0, 0.8); }
  70%  { text-shadow: 0 0 18px rgba(255, 215, 0, 0.9); }
  100% { text-shadow: 0 0 8px rgba(255, 215, 0, 0.55); }
}

/* ---------- 指令按钮坞（分组；顶部指令模式开关 + 折叠开关） ---------- */
#cmdbar {
  flex: none;
  background: var(--bg-bar);
  border-top: 1px solid var(--line);
}
.cmdbar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 18px 0;
}
.cmd-mode-btn,
.cmdbar-toggle {
  background: none;
  border: 1px solid #2b3b46;
  border-radius: 999px;
  color: var(--c-muted);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cmd-mode-btn:hover,
.cmdbar-toggle:hover {
  color: #d4f7c2;
  border-color: rgba(126, 203, 111, 0.6);
}
/* 指令模式开启：琥珀高亮（与帮助按钮同色系） */
.cmd-mode-btn.active {
  color: #ffd97a;
  border-color: rgba(251, 191, 36, 0.7);
  background: rgba(251, 191, 36, 0.12);
}
#cmdbar-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 18px 6px;
}
#cmdbar.collapsed #cmdbar-body { display: none; }
/* 分组：小标题 + 按钮行（窄屏换行） */
.cmd-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}
.cmd-group-title {
  flex: none;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--c-muted);
}
.cmd-group-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cmd-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #22303a;
  border-radius: 999px;
  color: var(--fg);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
}
.cmd-btn:hover {
  color: #d4f7c2;
  border-color: rgba(126, 203, 111, 0.6);
  background: rgba(126, 203, 111, 0.08);
}
.cmd-btn:active {
  background: rgba(126, 203, 111, 0.16);
}
/* 帮助按钮：琥珀点缀，与动作按钮区分 */
.cmd-btn[data-cmd='help'] {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.35);
}
.cmd-btn[data-cmd='help']:hover {
  color: #ffd97a;
  border-color: rgba(251, 191, 36, 0.6);
}

/* ============================================================
   面板弹窗（全端统一）：十个功能面板 = 「半透明遮罩 + 居中内容盒」
   面板根本身即遮罩层：fixed 铺满 + 半透明底，点空白处/Esc 关闭（见 ui/modal.js）；
   滚动职责移到内容盒上（分组规则见「面板弹窗内容盒」段，置于全部单盒规则之后）。
   z-index 60：盖过日志/顶栏，也盖过扫描线（body::after，z-index:11），视觉保持统一。
   ============================================================ */
#help-panel, #bag-panel, #shop-panel, #market-panel, #quest-panel,
#gift-panel, #auction-panel, #styles-panel, #status-panel, #equip-panel,
#cave-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(6, 12, 16, 0.62);
  animation: modal-fade 0.16s ease-out;
}

/* ---------- 捐赠/游戏群浮层（顶栏入口；遮罩 + 居中内容盒，交互与功能面板一致） ---------- */
#group-panel, #donate-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(6, 12, 16, 0.62);
  animation: modal-fade 0.16s ease-out;
}
.group-box {
  max-width: min(420px, 92vw);
  padding: 12px 14px 14px;
  border: 1px solid rgba(126, 203, 111, 0.35);
  border-left: 3px solid rgba(126, 203, 111, 0.6);
  border-radius: 4px;
  background: var(--bg-bar);
}
.group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.group-title {
  font-weight: 700;
  letter-spacing: 3px;
  color: #d4f7c2;
  text-shadow: 0 0 10px rgba(126, 203, 111, 0.35);
}
.group-close {
  flex: none;
  background: none;
  border: 1px solid #2b3b46;
  border-radius: 999px;
  color: var(--c-muted);
  font: inherit;
  font-size: 11px;
  padding: 1px 8px;
  cursor: pointer;
}
.group-close:hover {
  color: #d4f7c2;
  border-color: rgba(126, 203, 111, 0.6);
}
/* 群二维码图（public/images/lfj.jpg）：限宽限高自适应，不撑破内容盒 */
.group-qr {
  display: block;
  width: 100%;
  max-height: min(60vh, 520px);
  object-fit: contain;
  border-radius: 3px;
}

/* 帮助面板内容盒（❓ 帮助；边框/配色保留，滚动与 margin 由弹窗分组规则统一接管） */
.help-box {
  margin: 8px 18px 4px;
  padding: 10px 14px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-left: 3px solid rgba(251, 191, 36, 0.6);
  border-radius: 4px;
  /* 弹窗化：半透明色相叠在实底上（遮罩不再透出页面内容，避免文字重叠感；色相不变） */
  background:
    linear-gradient(rgba(251, 191, 36, 0.05), rgba(251, 191, 36, 0.05)),
    var(--bg-bar);
}
.help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.help-title {
  font-weight: 700;
  letter-spacing: 3px;
  color: #ffd97a;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.35);
}
.help-close {
  flex: none;
  background: none;
  border: 1px solid #2b3b46;
  border-radius: 999px;
  color: var(--c-muted);
  font: inherit;
  font-size: 11px;
  padding: 1px 8px;
  cursor: pointer;
}
.help-close:hover {
  color: #ffd97a;
  border-color: rgba(251, 191, 36, 0.6);
}
.help-line {
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.7;
  color: var(--fg);
}

/* ---------- 背包面板（🎒 背包展开/收起；bag ack 渲染，点击物品使用） ---------- */
/* 坊市/挂单/送礼/拍卖/任务面板：容器样式已并入顶部「面板弹窗」分组规则；
   内容盒复用 .bag-box（边框/配色见其自身规则，滚动由弹窗内容盒分组规则接管） */
/* 任务三区：区标题（小字幕行）+ 任务行（名称 + 进度 + 状态徽标） */
.quest-sec { margin-bottom: 8px; }
.quest-sec:last-child { margin-bottom: 0; }
.quest-sec-title {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--c-muted);
  margin: 2px 0 4px;
}
.quest-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  margin-bottom: 4px;
  border: 1px solid #22303a;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
}
.quest-row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--fg);
}
.quest-row-publisher {
  flex: none;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--c-muted);
}
.quest-row-progress {
  flex: none;
  font-size: 11px;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.quest-row-status {
  flex: none;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid #2b3b46;
  color: var(--c-muted);
  white-space: nowrap;
}
.quest-row-status.st-deliverable {
  color: #ffd97a;
  border-color: rgba(251, 191, 36, 0.6);
}
.quest-row-status.st-done {
  color: #7ecb6f;
  border-color: rgba(126, 203, 111, 0.45);
}
/* 可交付行高亮：金色描边 + 微光底（与状态徽标同一强调色系），一眼看到「能交了」 */
.quest-row.quest-deliverable {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.07);
}
.quest-row.quest-deliverable .quest-row-name { color: #ffd97a; }
.quest-row.quest-deliverable .quest-row-progress { color: #ffd97a; }
.bag-box {
  margin: 8px 18px 4px;
  padding: 10px 14px;
  border: 1px solid rgba(126, 203, 111, 0.35);
  border-left: 3px solid rgba(126, 203, 111, 0.6);
  border-radius: 4px;
  /* 弹窗化：半透明色相叠在实底上（遮罩不再透出页面内容，避免文字重叠感；色相不变） */
  background:
    linear-gradient(rgba(126, 203, 111, 0.05), rgba(126, 203, 111, 0.05)),
    var(--bg-bar);
}
.bag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.bag-title {
  font-weight: 700;
  letter-spacing: 3px;
  color: #d4f7c2;
  text-shadow: 0 0 10px rgba(126, 203, 111, 0.35);
}
.bag-close {
  background: none;
  border: 1px solid #2b3b46;
  border-radius: 999px;
  color: var(--c-muted);
  font: inherit;
  font-size: 11px;
  padding: 1px 8px;
  cursor: pointer;
}
.bag-close:hover {
  color: #ffd97a;
  border-color: rgba(251, 191, 36, 0.6);
}
.bag-hint {
  font-size: 11px;
  color: var(--c-muted);
  margin-bottom: 4px;
}
/* 行囊分类 tab 栏：胶囊按钮行，选中态绿色高亮（与聊天频道 .chan-btn 同款强调色系）。
   面板整体滚动时 sticky 钉在面板顶部：长列表切分类无需滚回顶，且不遮挡卡片操作。 */
.bag-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
  margin-top: -4px;
  padding: 4px 0 2px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-bar);
}
.bag-tab {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #22303a;
  border-radius: 999px;
  color: var(--fg);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 3px 12px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
}
.bag-tab:hover {
  color: #d4f7c2;
  border-color: rgba(126, 203, 111, 0.6);
  background: rgba(126, 203, 111, 0.08);
}
.bag-tab.active {
  color: #d4f7c2;
  border-color: #7ecb6f;
  background: rgba(126, 203, 111, 0.14);
  box-shadow: 0 0 8px rgba(126, 203, 111, 0.18);
}
/* 分类筛选空态：网格内横跨整行（复用 .bag-empty 样式） */
.bag-grid .bag-empty {
  grid-column: 1 / -1;
}
/* 坊市货架面板：区块标题（月度货架 / 寄售挂单）与上一区块的间距 */
.market-sec {
  margin-top: 8px;
}
/* 坊市面板网格：挂单条目卡内容（参考价+步进器 / 卖家+单价总价）比行囊卡宽，
   默认 200px 最小列会把步进器挤出卡片边框 → 坊市面板最小列提到 300px */
#market-panel .bag-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* 坊市面板条目行兜底：内容超宽时换行，杜绝元素伸出卡片边框 */
#market-panel .bag-row-main { flex-wrap: wrap; row-gap: 2px; }
#market-panel .bag-row-sub  { flex-wrap: wrap; row-gap: 3px; }
.bag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 2px;
}
.bag-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid rgba(126, 203, 111, 0.22);
  border-radius: 6px;
  background: rgba(126, 203, 111, 0.04);
  user-select: none;
  /* 卡片本身无动作（所有操作走按钮） */
}
/* 第一行：名称左、数量徽章右 */
.bag-row-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.bag-row-name { font-weight: 600; color: #e8f5e0; }
.bag-row-qty {
  flex: none;
  font-size: 11px;
  color: #ffd97a;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 999px;
  padding: 0 8px;
  line-height: 16px;
}
/* 第二行：描述左（省略号）、使用按钮右 */
.bag-row-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bag-row-desc {
  flex: 1;
  min-width: 0;
  color: var(--c-muted);
  font-size: 12px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bag-use {
  width: 100%;
  margin-top: auto; /* 卡片等高时按钮贴底对齐 */
  background: none;
  border: 1px solid rgba(126, 203, 111, 0.45);
  border-radius: 999px;
  color: #b7f09a;
  font: inherit;
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
}
.bag-use:hover {
  background: rgba(126, 203, 111, 0.12);
  border-color: rgba(126, 203, 111, 0.75);
}

/* ---------- 装备面板（🛡 装备展开/收起；equip ack 渲染，已穿戴/背包装备两组卡片） ---------- */
/* 面板容器与行囊面板同构（.bag-box 系）：边框 + 左侧强调条 + 浅绿底 */
.equip-box {
  margin: 8px 18px 4px;
  padding: 10px 14px;
  border: 1px solid rgba(126, 203, 111, 0.35);
  border-left: 3px solid rgba(126, 203, 111, 0.6);
  border-radius: 4px;
  /* 弹窗化：半透明色相叠在实底上（遮罩不再透出页面内容，避免文字重叠感；色相不变） */
  background:
    linear-gradient(rgba(126, 203, 111, 0.05), rgba(126, 203, 111, 0.05)),
    var(--bg-bar);
}
.equip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
/* 头部左区：标题 + 合计战力徽标（power 为浅色小胶囊，纯展示不可点） */
.equip-head-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.equip-power {
  flex: none;
  font-size: 10px;
  font-weight: 400;
  color: #8fd8e0;
  background: rgba(94, 200, 210, 0.1);
  border: 1px solid rgba(94, 200, 210, 0.4);
  border-radius: 999px;
  padding: 0 8px;
  line-height: 15px;
  letter-spacing: 0; /* 复位 .equip-title 的宽字距 */
  user-select: none;
  cursor: default;
}
.equip-title {
  font-weight: 700;
  letter-spacing: 3px;
  color: #d4f7c2;
  text-shadow: 0 0 10px rgba(126, 203, 111, 0.35);
}
.equip-close {
  background: none;
  border: 1px solid #2b3b46;
  border-radius: 999px;
  color: var(--c-muted);
  font: inherit;
  font-size: 11px;
  padding: 1px 8px;
  cursor: pointer;
}
.equip-close:hover {
  color: #ffd97a;
  border-color: rgba(251, 191, 36, 0.6);
}
/* 两组区块：组标题（已穿戴主色绿 / 背包装备次级灰） + 条目卡 */
.equip-sec { margin-top: 8px; }
.equip-sec-title {
  font-size: 11px;
  letter-spacing: 2px;
  padding: 0 2px 4px;
  user-select: none;
}
.equip-sec.worn .equip-sec-title { color: #b7f09a; }
.equip-sec.bag .equip-sec-title { color: var(--c-muted); }
.equip-empty {
  color: var(--c-muted);
  font-size: 12px;
  padding: 0 2px 2px;
}
/* 条目卡：第一行 槽位徽章（已穿戴）+ 名称 + 品阶徽章（金色胶囊，沿用 .bag-row-qty 思路）；
   第二行详情（词条/强化/耐久，次要色）；第三行操作按钮（一排，可换行） */
.equip-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid rgba(126, 203, 111, 0.22);
  border-radius: 6px;
  background: rgba(126, 203, 111, 0.04);
  margin-bottom: 6px;
}
.equip-row:last-child { margin-bottom: 0; }
.equip-row-main {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.equip-row-name { font-weight: 600; color: #e8f5e0; }
.equip-row-slot {
  flex: none;
  font-size: 10px;
  color: #8fd8e0;
  background: rgba(94, 200, 210, 0.1);
  border: 1px solid rgba(94, 200, 210, 0.4);
  border-radius: 4px;
  padding: 0 6px;
  line-height: 15px;
}
.equip-row-grade {
  flex: none;
  margin-left: auto; /* 徽章靠右，等效 bag-row-main 的 space-between */
  font-size: 11px;
  color: #ffd97a;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 999px;
  padding: 0 8px;
  line-height: 16px;
}
/* 已绑定徽标（装备即绑定规则）：低调灰金 pill，与品阶徽章同体系但更克制；
   置于名称旁（品阶徽章前），仅视觉标记不承载交互 */
.equip-row-bound {
  flex: none;
  font-size: 10px;
  color: #cfc4a3;
  background: rgba(180, 170, 130, 0.1);
  border: 1px solid rgba(180, 170, 130, 0.38);
  border-radius: 999px;
  padding: 0 6px;
  line-height: 15px;
  white-space: nowrap;
}
/* 已损坏徽标（耐久归零：战力与词条效果失效，修理后恢复）：暗红胶囊，与 .equip-row-bound 同布局；
   客户端据 durCur===0 加标，仅视觉提示不承载交互 */
.equip-row-broken {
  flex: none;
  font-size: 10px;
  color: #ff9d8a;
  background: rgba(240, 90, 60, 0.12);
  border: 1px solid rgba(240, 90, 60, 0.45);
  border-radius: 999px;
  padding: 0 6px;
  line-height: 15px;
  white-space: nowrap;
}
.equip-row-detail {
  color: var(--c-muted);
  font-size: 12px;
  line-height: 1.5;
}
/* 操作按钮行：主操作（穿戴/卸下）实底高亮绿；次要（强化/修理/分解）描边弱化灰 */
.equip-ops {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.equip-btn {
  font: inherit;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.4;
}
.equip-btn-primary {
  background: rgba(126, 203, 111, 0.22);
  border: 1px solid rgba(126, 203, 111, 0.7);
  color: #c9f7ae;
}
.equip-btn-primary:hover {
  background: rgba(126, 203, 111, 0.38);
  border-color: rgba(126, 203, 111, 0.9);
}
.equip-btn-sec {
  background: none;
  border: 1px solid rgba(148, 163, 174, 0.3);
  color: #8fa3ad;
}
.equip-btn-sec:hover {
  background: rgba(148, 163, 174, 0.1);
  border-color: rgba(148, 163, 174, 0.55);
  color: #cfe3ea;
}
/* 坊市卖面板：持有量 + 数量步进器（− N + 全部） + 出售按钮 */
.gift-gain { color: #ffd97a; }
.bag-row-held {
  flex: none;
  color: var(--c-muted);
  font-size: 12px;
}
.shop-qty-ctl {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
}
.shop-qty-step {
  flex: none;
  width: 20px;
  height: 20px;
  line-height: 1;
  padding: 0;
  background: none;
  border: 1px solid rgba(126, 203, 111, 0.4);
  border-radius: 4px;
  color: #b7f09a;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.shop-qty-step:hover:not(:disabled) {
  background: rgba(126, 203, 111, 0.12);
  border-color: rgba(126, 203, 111, 0.7);
}
.shop-qty-step:disabled { opacity: 0.35; cursor: default; }
.shop-qty-num {
  min-width: 26px;
  text-align: center;
  font-size: 12px;
  color: #ffd97a;
}
.shop-qty-all {
  background: none;
  border: none;
  padding: 0 2px;
  color: var(--c-muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline dotted;
}
.shop-qty-all:hover:not(:disabled) { color: #ffd97a; }
.shop-qty-all:disabled { opacity: 0.35; cursor: default; }
/* 坊市面板的 购买/出售 按钮沿用金色（.bag-sell） */
.bag-sell {
  width: 100%;
  margin-top: auto; /* 卡片等高时按钮贴底对齐 */
  background: none;
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 999px;
  color: #ffd97a;
  font: inherit;
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
}
.bag-sell:hover {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.7);
}
/* 坊市挂单：单价输入框 + 挂单按钮行 */
.market-row-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.market-price-input {
  flex: none;
  width: 90px;
  height: 32px; /* 保留删除琥珀块时的桌面高度（避免输入框变矮的视觉回归） */
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(126, 203, 111, 0.35);
  border-radius: 4px;
  color: #ffd97a;
  font: inherit;
  font-size: 13px;
  text-align: center;
  outline: none;
  -moz-appearance: textfield; /* 隐藏 number 输入框原生箭头（由删除的琥珀块并入） */
}
.market-price-input::-webkit-outer-spin-button,
.market-price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.market-price-input:focus {
  border-color: rgba(126, 203, 111, 0.7);
  box-shadow: 0 0 8px rgba(126, 203, 111, 0.12);
}
.market-price-input::placeholder { color: #43535a; }
.market-row-price .bag-sell { flex: 1; }
.bag-empty {
  color: var(--c-muted);
  font-size: 12px;
}

/* ---------- 状态面板（📋 状态：命格一览英雄条 + 分组卡片，可折叠/刷新） ---------- */
.status-box {
  margin: 8px 18px 4px;
  padding: 10px 14px;
  border: 1px solid rgba(94, 200, 210, 0.35);
  border-left: 3px solid rgba(94, 200, 210, 0.6);
  border-radius: 4px;
  /* 弹窗化：半透明色相叠在实底上（遮罩不再透出页面内容，避免文字重叠感；色相不变） */
  background:
    linear-gradient(rgba(94, 200, 210, 0.05), rgba(94, 200, 210, 0.05)),
    var(--bg-bar);
}
.status-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.status-title {
  font-weight: 700;
  letter-spacing: 3px;
  color: #7dd8e0;
  text-shadow: 0 0 10px rgba(94, 200, 210, 0.35);
}
.status-updated { flex: none; font-size: 10px; color: var(--c-muted); }
.status-refresh { margin-left: auto; }
.status-refresh, .status-close {
  flex: none;
  background: none;
  border: 1px solid #2b3b46;
  border-radius: 999px;
  color: var(--c-muted);
  font: inherit;
  font-size: 11px;
  padding: 1px 8px;
  cursor: pointer;
}
.status-refresh:hover, .status-close:hover {
  color: #ffd97a;
  border-color: rgba(251, 191, 36, 0.6);
}
.status-refresh-ico { display: inline-block; }
.status-refresh-ico.spinning { animation: statusSpin 0.9s linear infinite; }
@keyframes statusSpin { to { transform: rotate(360deg); } }

/* ----- 命格一览（英雄条）：境界大字 + 战力/灵石/寿元格 + 修为/气血双进度条 ----- */
.status-hero {
  margin: 6px 0 2px;
  padding: 10px 12px;
  border: 1px solid rgba(94, 200, 210, 0.22);
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(94, 200, 210, 0.07), rgba(94, 200, 210, 0) 55%),
    rgba(0, 0, 0, 0.2);
  animation: statusHeroIn 0.3s ease-out backwards;
}
@keyframes statusHeroIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.sh-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sh-cap { font-size: 10px; letter-spacing: 2px; color: var(--c-muted); }
.sh-realm-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #8fe3ea;
  text-shadow: 0 0 12px rgba(94, 200, 210, 0.45);
}
.sh-realm-stage {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #ffd97a;
  border: 1px solid rgba(255, 217, 122, 0.4);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: 3px;
  text-shadow: none;
}
.sh-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.sh-stat {
  min-width: 72px;
  padding: 4px 10px;
  border: 1px solid #22303a;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.22);
  text-align: center;
}
.sh-stat-val {
  font-size: 16px;
  color: #ffd97a;
  text-shadow: 0 0 10px rgba(255, 217, 122, 0.25);
}
.sh-stat-sub { font-size: 10px; color: var(--c-muted); }
/* 进度条行：标签 + 条 + 读数（+ 附注） */
.sh-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.sh-bar-label { flex: none; font-size: 11px; letter-spacing: 1px; color: var(--c-muted); }
.sh-bar-nums { flex: none; font-size: 11px; color: #ffd97a; }
.sh-bar-note { flex: none; font-size: 10px; color: var(--c-muted); }
/* 通用进度条（英雄条/行内/迷你共用）：track + 渐变 fill + 辉光 */
.sbar {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: #14202a;
  overflow: hidden;
}
.sbar-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 0.45s ease-out;
}
.sbar-fill.indeterminate { opacity: 0.35; }
.sbar.exp .sbar-fill {
  background: linear-gradient(90deg, #b98a2f, #ffd97a);
  box-shadow: 0 0 8px rgba(255, 217, 122, 0.35);
}
.sbar.hp .sbar-fill {
  background: linear-gradient(90deg, #a13d3d, #ff8a7a);
  box-shadow: 0 0 8px rgba(255, 138, 122, 0.3);
}
.sbar.hp.low .sbar-fill { animation: statusHpLow 1.1s ease-in-out infinite; }
@keyframes statusHpLow { 50% { opacity: 0.45; } }
.sbar.dim { height: 4px; margin-top: 3px; }
.sbar.dim .sbar-fill {
  background: linear-gradient(90deg, #3d7a84, #5ec8d2);
  box-shadow: none;
}

/* ----- 分组卡片 ----- */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
/* 平静重刷（面板已开时的手动/自动刷新）：不重播英雄条与分组入场动画，阅读不被打扰 */
.status-box.calm .status-hero,
.status-box.calm .status-sec { animation: none; }
.status-sec {
  border: 1px solid #22303a;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.15);
  overflow: hidden;
  animation: statusSecIn 0.25s ease-out backwards;
}
@keyframes statusSecIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
/* 含危险行（坐化/重伤/根基未稳…）的分组：红框强调 */
.status-sec.has-danger {
  border-color: rgba(255, 125, 125, 0.45);
  box-shadow: inset 0 0 0 1px rgba(255, 125, 125, 0.12);
}
.status-sec-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 2px;
  color: #7dd8e0;
  padding: 6px 10px 4px;
  cursor: pointer;
  user-select: none;
}
.status-sec-title:hover { background: rgba(94, 200, 210, 0.08); }
.status-sec-title:focus-visible { outline: 1px solid rgba(94, 200, 210, 0.6); }
.status-sec.has-danger .status-sec-name {
  color: #ff9d9d;
  text-shadow: 0 0 10px rgba(255, 125, 125, 0.3);
}
.status-sec-arrow {
  flex: none;
  font-size: 10px;
  color: #56707c;
  transition: transform 0.18s ease;
}
.status-sec.collapsed .status-sec-arrow { transform: rotate(-90deg); }
.status-sec-count {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0;
  color: var(--c-muted);
  display: none;
}
.status-sec.collapsed .status-sec-count { display: inline; }
.status-sec.collapsed .status-sec-body { display: none; }
.status-sec-body { padding: 2px 10px 8px; }
.status-row {
  display: flex;
  gap: 6px;
  padding: 2px 0;
  font-size: 12px;
  line-height: 1.6;
}
.status-row-label { flex: none; color: var(--c-muted); }
.status-row-val { color: var(--fg); flex: 1; min-width: 0; }
/* 宽值行（穿戴/道基/经验/生活技能）：label 升为小标题，值整行铺开 */
.status-row-wide { flex-direction: column; align-items: stretch; gap: 3px; }
.status-row-wide .status-row-label { font-size: 11px; }
/* 行内进度条（法宝阶数/蓄力）：条 + 余文同行 */
.status-val-bar { display: inline-flex; align-items: center; gap: 6px; min-width: 130px; }
.status-val-bar .sbar { flex: 1; min-width: 60px; max-width: 160px; }
/* 多维刻度条组（道基五维/经验/生活技能熟练） */
.status-dims {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px 10px;
}
.status-dim-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  font-size: 11px;
  line-height: 1.4;
}
.status-dim-name { color: var(--c-muted); }
.status-dim-val { color: #ffd97a; }
/* 装备碎片（「穿戴」行）：slot·名称（词条，耐久）逐件成片，点击打开装备面板 */
.status-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.status-chip {
  font: inherit;
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg);
  background: rgba(94, 200, 210, 0.05);
  border: 1px solid #2b3b46;
  border-radius: 3px;
  padding: 2px 8px;
  cursor: pointer;
}
.status-chip:hover {
  color: #8fe3ea;
  border-color: rgba(94, 200, 210, 0.5);
  background: rgba(94, 200, 210, 0.09);
}
.status-chip.broken {
  color: #ff7d7d;
  border-color: rgba(255, 125, 125, 0.45);
}
/* 值着色：数值金色 / 危险红 / 进行中绿 / 空值灰 / 重点标签紫 */
.v-num { color: #ffd97a; }
.v-danger { color: #ff7d7d; }
.v-good { color: #a8e6a0; }
.v-muted { color: #5a6a73; }
.v-accent { color: #d8b4fe; }

/* ---------- 叙事风格面板（🎨 叙事风格 展开/收起；styles/style-ok 驱动渲染） ---------- */
.styles-box {
  margin: 8px 18px 4px;
  padding: 10px 14px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-left: 3px solid rgba(167, 139, 250, 0.6);
  border-radius: 4px;
  /* 弹窗化：半透明色相叠在实底上（遮罩不再透出页面内容，避免文字重叠感；色相不变） */
  background:
    linear-gradient(rgba(167, 139, 250, 0.05), rgba(167, 139, 250, 0.05)),
    var(--bg-bar);
}
.styles-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.styles-title {
  font-weight: 700;
  letter-spacing: 3px;
  color: #d8b4fe;
  text-shadow: 0 0 10px rgba(167, 139, 250, 0.35);
}
.styles-close {
  background: none;
  border: 1px solid #2b3b46;
  border-radius: 999px;
  color: var(--c-muted);
  font: inherit;
  font-size: 11px;
  padding: 1px 8px;
  cursor: pointer;
}
.styles-close:hover {
  color: #ffd97a;
  border-color: rgba(251, 191, 36, 0.6);
}
.styles-hint {
  font-size: 11px;
  color: var(--c-muted);
  margin-bottom: 4px;
}
.styles-sep {
  height: 1px;
  background: rgba(167, 139, 250, 0.2);
  margin: 6px 8px;
}
.styles-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px;
  margin: 2px 0;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}
.styles-row:hover {
  background: rgba(167, 139, 250, 0.08);
  border-color: rgba(167, 139, 250, 0.35);
}
.styles-row.active {
  background: rgba(167, 139, 250, 0.14);
  border-color: rgba(167, 139, 250, 0.55);
}
.styles-row.active .styles-row-name::after {
  content: ' ✓';
}
.styles-row-name { font-weight: 600; color: #e9d5ff; }
.styles-row-desc {
  flex: 1;
  color: var(--c-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   面板弹窗内容盒：滚动/尺寸统一接管（置于全部单盒规则之后覆盖 margin）
   盒内滚动（max-height:100% = 遮罩 padding 内高度），滚动条样式由原面板迁移而来；
   背景仍由各盒自身规则提供（半透明色相 + var(--bg-bar) 实底叠加）。
   ============================================================ */
.help-box, .bag-box, .equip-box, .status-box, .styles-box {
  margin: 0;
  width: min(640px, 100%);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #22303a transparent;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  animation: modal-box-in 0.16s ease-out;
}
/* 帮助为纯文本行，窄一档更聚拢 */
.help-box { width: min(560px, 100%); }
.help-box::-webkit-scrollbar, .bag-box::-webkit-scrollbar, .equip-box::-webkit-scrollbar,
.status-box::-webkit-scrollbar, .styles-box::-webkit-scrollbar { width: 10px; }
.help-box::-webkit-scrollbar-track, .bag-box::-webkit-scrollbar-track,
.equip-box::-webkit-scrollbar-track, .status-box::-webkit-scrollbar-track,
.styles-box::-webkit-scrollbar-track { background: transparent; }
.help-box::-webkit-scrollbar-thumb, .bag-box::-webkit-scrollbar-thumb,
.equip-box::-webkit-scrollbar-thumb, .status-box::-webkit-scrollbar-thumb,
.styles-box::-webkit-scrollbar-thumb {
  background: #1d2931;
  border-radius: 6px;
  border: 2px solid var(--bg);
}
.help-box::-webkit-scrollbar-thumb:hover, .bag-box::-webkit-scrollbar-thumb:hover,
.equip-box::-webkit-scrollbar-thumb:hover, .status-box::-webkit-scrollbar-thumb:hover,
.styles-box::-webkit-scrollbar-thumb:hover { background: #2b3b46; }
/* 弹窗进场：遮罩淡入 + 内容盒微缩放（prefers-reduced-motion 下禁用，见文件前部） */
@keyframes modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modal-box-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

/* ---------- 聊天栏（底部：频道切换 + 目标指示 + 输入 + 发送） ---------- */
#chatbar {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 18px calc(10px + var(--safe-bottom));
  background: var(--bg-bar);
  border-top: 1px solid var(--line);
}
/* 频道按钮组：胶囊，当前频道高亮 */
.chat-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chan-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #22303a;
  border-radius: 999px;
  color: var(--fg);
  font: inherit;
  font-size: 12px;
  padding: 3px 12px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
}
.chan-btn:hover {
  color: #d4f7c2;
  border-color: rgba(126, 203, 111, 0.6);
  background: rgba(126, 203, 111, 0.08);
}
.chan-btn.active {
  color: #d4f7c2;
  border-color: #7ecb6f;
  background: rgba(126, 203, 111, 0.14);
  box-shadow: 0 0 8px rgba(126, 203, 111, 0.18);
}
/* 对话频道（NPC）：动态出现 */
.chan-btn.talk { color: #8fd3a7; }
/* 目标指示 chip：私聊（紫）/ 对话（绿），带 ✕ 取消 */
.chat-target {
  display: flex;
  align-items: center;
  gap: 6px;
}
.target-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid rgba(200, 160, 255, 0.45);
  background: rgba(200, 160, 255, 0.08);
  color: #d8b4ff;
  font-size: 12px;
  padding: 2px 6px 2px 12px;
}
.target-chip.t {
  border-color: rgba(126, 203, 111, 0.45);
  background: rgba(126, 203, 111, 0.08);
  color: #b8e6a5;
}
.target-x {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  opacity: 0.7;
}
.target-x:hover { opacity: 1; color: #ff6b6b; }

/* 输入行：提示符 + 输入框 + 发送 */
.chat-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.prompt {
  color: var(--c-room);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(126, 203, 111, 0.4);
}
#input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--fg);
  font: inherit;
  caret-color: var(--c-room);
}
#input::placeholder { color: #43535a; }
.send-btn {
  flex: none;
  background: rgba(126, 203, 111, 0.12);
  border: 1px solid rgba(126, 203, 111, 0.55);
  border-radius: 4px;
  color: #d4f7c2;
  font: inherit;
  font-size: 12px;
  letter-spacing: 1px;
  padding: 5px 14px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.send-btn:hover {
  background: rgba(126, 203, 111, 0.22);
  box-shadow: 0 0 10px rgba(126, 203, 111, 0.2);
}

/* ---------- 状态行 ---------- */
#status {
  padding: 5px 18px calc(9px + var(--safe-bottom));
  font-size: 12px;
  letter-spacing: 1px;
  text-align: center;
  color: var(--c-muted);
}

/* ---------- CRT 氛围（纯 CSS，低调） ---------- */
/* 暗角 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, transparent 58%, rgba(0, 0, 0, 0.42) 100%);
}
/* 扫描线 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.022) 0 1px,
    transparent 1px 3px
  );
}

/* ============================================================
   手机端适配（≤600px）：触控目标放大 + 动态视口 + 居中弹窗面板
   ============================================================ */
@media (max-width: 600px) {
  body { font-size: 14px; }

  /* 避免 iOS 聚焦输入框时自动放大页面（输入类元素 ≥16px） */
  #input, .prompt, .text-input { font-size: 16px; }

  /* ---------- 顶栏 ---------- */
  #topbar { padding: calc(10px + var(--safe-top)) 12px 10px; }
  #topbar h1 { font-size: 13px; letter-spacing: 1px; }
  #topbar h1 .ver { display: none; } /* 窄屏隐藏版本徽标，防挤压 */
  .topbar-right { gap: 8px; }
  #btn-recreate { padding: 7px 12px; font-size: 12px; }
  #btn-donate { padding: 7px 12px; font-size: 12px; }
  #btn-game-group { padding: 7px 12px; font-size: 12px; }
  #btn-bgm { padding: 7px 12px; font-size: 12px; }
  #btn-logout-game { padding: 7px 12px; font-size: 12px; }
  #topbar .tb-full { display: none; }      /* ID 提权：盖过后方基础规则 .tb-compact{display:none} 的源码序优势 */
  #topbar .tb-compact { display: inline; }

  /* ---------- 日志区 ---------- */
  #room-panel { padding: 6px 12px 8px; }
  #room-panel .room-card { margin: 0; padding: 7px 10px 9px; }
  #log { padding: 10px 12px 18px; }
  .narr { margin: 5px 0; padding-left: 8px; }
  .rc-row { gap: 4px 6px; margin-top: 8px; }
  .npc-expand, .player-expand { padding: 6px 0 2px 10px; gap: 8px; }
  .npc-info { font-size: 12px; padding: 4px 6px; }
  .teach-list, .gift-list, .sect-join-list, .task-info { gap: 8px; padding: 6px 0 0 8px; }
  .skill-btn, .gift-btn, .sect-join-btn { font-size: 12px; padding: 7px 11px; min-height: 34px; }
  .task-info .task-info-line { font-size: 12px; }

  /* ---------- 指令按钮坞：触控目标放大 ---------- */
  .cmdbar-head { padding: 8px 12px 0; }
  /* 小竖屏：指令按钮多时面板自身滚动（body overflow:hidden，无上限则挤占视口、底部按钮够不着；
     与横屏 480 断点同策略：max-height + 触屏惯性滚动） */
  #cmdbar-body { padding: 8px 12px; gap: 7px; max-height: 40vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .cmd-mode-btn, .cmdbar-toggle { padding: 8px 14px; font-size: 12px; min-height: 38px; }
  .cmd-btn { font-size: 12px; padding: 8px 13px; min-height: 38px; }
  .cmd-group { gap: 4px 8px; }
  .cmd-group-buttons { gap: 8px; }

  /* ---------- 聊天栏：触控目标放大 ---------- */
  #chatbar { padding: 8px 12px calc(10px + var(--safe-bottom)); }
  .chat-channels { gap: 8px; }
  .chan-btn { font-size: 13px; padding: 9px 14px; min-height: 40px; }
  .chat-input-row { gap: 8px; }
  .send-btn { font-size: 14px; padding: 11px 18px; min-height: 44px; }
  .target-chip { font-size: 13px; padding: 7px 6px 7px 12px; }
  .target-x { font-size: 15px; padding: 2px 8px; }

  /* ---------- 面板弹窗：小屏收紧遮罩留白，底部让出安全区 ---------- */
  #help-panel, #bag-panel, #shop-panel, #market-panel, #quest-panel, #gift-panel, #auction-panel, #styles-panel, #status-panel, #equip-panel, #cave-panel {
    padding: 12px 10px calc(12px + var(--safe-bottom));
  }
  .market-price-input { font-size: 16px; width: 100px; }
  .market-row-price { gap: 10px; }
  .bag-row { padding: 10px 10px; }
  .bag-grid { grid-template-columns: 1fr; }
  /* 坊市面板同构：覆盖上方特异性更高的 #market-panel .bag-grid 300px 规则，小屏同样单列 */
  #market-panel .bag-grid { grid-template-columns: 1fr; }
  .bag-tab { font-size: 13px; padding: 8px 14px; min-height: 38px; }
  .bag-sell, .bag-use { font-size: 12px; padding: 7px 14px; min-height: 34px; }
  .market-price-input { width: 60px; height: 30px; font-size: 12px; }
  .shop-qty-step { width: 30px; height: 30px; font-size: 16px; }
  .shop-qty-all { font-size: 12px; }
  .bag-close, .styles-close, .help-close, .status-refresh, .status-close, .equip-close { font-size: 12px; padding: 7px 13px; min-height: 34px; }
  .equip-btn { font-size: 12px; padding: 7px 12px; min-height: 34px; }
  .equip-row { padding: 10px 10px; }
  .styles-row { padding: 11px 8px; }

  /* ---------- 状态面板：英雄条收窄堆叠，卡片单列 ---------- */
  .status-hero { padding: 8px 10px; }
  .sh-realm-name { font-size: 17px; letter-spacing: 3px; }
  .sh-stats { width: 100%; }
  .sh-stat { flex: 1; min-width: 0; }
  .status-grid { grid-template-columns: 1fr; }
  .status-dims { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }

  /* ---------- 登录 / 角色屏 ---------- */
  .login-card { padding: 16px 14px 20px; }
  .login-title { font-size: 16px; letter-spacing: 2px; }
  .primary-btn { min-height: 48px; font-size: 15px; }
  .text-input { padding: 12px; }
  .opt-card { padding: 12px 14px; }
  .opt-card.chip { padding: 10px 16px; }
  .char-item { padding: 13px 14px; }
  .logout-btn { padding: 7px 12px; }
  .btn-create-new { min-height: 46px; font-size: 15px; }
  .btn-back { padding: 7px 12px; }

  /* ---------- 状态行 ---------- */
  #status { padding: 4px 12px calc(8px + var(--safe-bottom)); }
}

/* 矮屏横屏（手机横放）：指令栏/面板内部滚动，避免挤压日志区 */
@media (max-height: 480px) and (orientation: landscape) {
  #cmdbar-body { max-height: 40vh; overflow-y: auto; }
}

/* ============================================================
   登录区（账号屏 / 角色屏）— 与终端主题同风格，纯 CSS
   ============================================================ */

/* 显隐工具类 */
.hidden { display: none !important; }

/* 顶栏右侧：状态点 + 「创建新角色」入口 */
.topbar-right { display: flex; align-items: center; gap: 12px; }

#btn-recreate {
  background: none;
  border: 1px solid #2b3b46;
  border-radius: 3px;
  color: var(--c-muted);
  font: inherit;
  font-size: 12px;
  padding: 3px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
#btn-recreate:hover {
  color: var(--c-event);
  border-color: var(--c-event);
}
/* 顶栏按钮文案全称/简称双版：默认全称，≤600px 换单字简称防折行（.tb-compact 由媒体查询开启） */
.tb-compact { display: none; }

/* 顶栏「捐赠 / 游戏群 / 音乐」链接（常驻顶栏右上，点开浮层或开关音乐） */
#btn-donate, #btn-game-group, #btn-bgm {
  background: none;
  border: 1px solid #2b3b46;
  border-radius: 3px;
  color: var(--c-muted);
  font: inherit;
  font-size: 12px;
  padding: 3px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
#btn-donate:hover, #btn-game-group:hover, #btn-bgm:hover {
  color: var(--c-event);
  border-color: var(--c-event);
}
#btn-logout-game {
  background: none;
  border: 1px solid #2b3b46;
  border-radius: 3px;
  color: var(--c-muted);
  font: inherit;
  font-size: 12px;
  padding: 3px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
#btn-logout-game:hover {
  color: var(--c-err);
  border-color: var(--c-err);
}

/* 登录区：占据主区（游戏日志隐藏时可见），内部滚动 */
#login {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 18px 30px;
  scrollbar-width: thin;
  scrollbar-color: #22303a transparent;
}
#login::-webkit-scrollbar { width: 10px; }
#login::-webkit-scrollbar-track { background: transparent; }
#login::-webkit-scrollbar-thumb {
  background: #1d2931;
  border-radius: 6px;
  border: 2px solid var(--bg);
}
#login::-webkit-scrollbar-thumb:hover { background: #2b3b46; }

.login-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 22px 24px;
  background: linear-gradient(180deg, #0e151b, #0b1015);
  border: 1px solid var(--line);
  border-top: 2px solid rgba(126, 203, 111, 0.55);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.login-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #d4f7c2;
  text-shadow: 0 0 12px rgba(126, 203, 111, 0.35);
}
.login-sub {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--c-muted);
  letter-spacing: 1px;
}

/* 输入字段（账号屏 + 角色屏共用） */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 13px;
  letter-spacing: 2px;
  color: #d4f7c2;
  margin-bottom: 6px;
}
.text-input {
  width: 100%;
  padding: 9px 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #22303a;
  border-radius: 4px;
  color: var(--fg);
  font: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.text-input:focus {
  border-color: rgba(126, 203, 111, 0.6);
  box-shadow: 0 0 8px rgba(126, 203, 111, 0.15);
}
.text-input::placeholder { color: #43535a; }

/* 选项分组 */
.grp { margin: 0 0 14px; }
.grp-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #d4f7c2;
  margin-bottom: 7px;
}
.grp-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* 身份（性别/种族）：横排胶囊 */
.grp-cards.chips {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.opt-card {
  padding: 8px 11px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #22303a;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.opt-card:hover { border-color: #3a4d57; }
.opt-card.sel {
  border-color: rgba(126, 203, 111, 0.8);
  background: rgba(126, 203, 111, 0.08);
  box-shadow: 0 0 10px rgba(126, 203, 111, 0.12);
}
.opt-card.chip { padding: 5px 14px; border-radius: 999px; }
.opt-name { font-weight: 700; color: var(--fg); }
.opt-card.sel .opt-name { color: #d4f7c2; }
.opt-coef {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-event);
}
.opt-desc {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-muted);
}

/* 创建失败提示 */
.login-error {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 107, 107, 0.5);
  border-radius: 4px;
  background: rgba(255, 107, 107, 0.08);
  color: var(--c-err);
  font-size: 13px;
  white-space: pre-wrap;
}

/* 操作区 */
.login-actions {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.primary-btn {
  padding: 11px 0;
  font: inherit;
  font-weight: 700;
  letter-spacing: 4px;
  color: #d4f7c2;
  background: rgba(126, 203, 111, 0.12);
  border: 1px solid rgba(126, 203, 111, 0.55);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.primary-btn:hover:not(:disabled) {
  background: rgba(126, 203, 111, 0.22);
  box-shadow: 0 0 14px rgba(126, 203, 111, 0.25);
}
.primary-btn:disabled { opacity: 0.55; cursor: default; }
/* 账号屏登录/注册切换：链接式次级按钮 */
.auth-toggle {
  align-self: center;
  background: none;
  border: none;
  color: var(--c-muted);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.auth-toggle:hover { color: var(--c-sys); }

/* 角色屏：账号信息头 + 退出登录 + 角色列表 + 创建表单 */
.char-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.logout-btn {
  background: none;
  border: 1px solid #2b3b46;
  border-radius: 3px;
  color: var(--c-muted);
  font: inherit;
  font-size: 12px;
  padding: 3px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.logout-btn:hover {
  color: var(--c-err);
  border-color: var(--c-err);
}
.account-name { color: #d4f7c2; }
.char-section-title {
  margin: 14px 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #d4f7c2;
}
.char-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.char-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #22303a;
  border-radius: 4px;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.char-item:hover {
  color: #d4f7c2;
  border-color: rgba(126, 203, 111, 0.6);
  background: rgba(126, 203, 111, 0.08);
}
.char-item-hint {
  font-size: 12px;
  color: var(--c-muted);
}
.char-item:hover .char-item-hint { color: #8fd3a7; }
.char-empty {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--c-muted);
  border: 1px dashed #22303a;
  border-radius: 4px;
}
/* 进入中：角色列表禁点（半透明） */
.char-list.busy { opacity: 0.55; pointer-events: none; }
.char-divider {
  height: 1px;
  margin: 16px 0 4px;
  background: linear-gradient(90deg, rgba(126, 203, 111, 0.35), transparent);
}

/* 角色选择屏：创建新角色入口 */
.char-create-entry { margin-top: 14px; }
.btn-create-new {
  width: 100%;
  padding: 11px 0;
  font: inherit;
  font-weight: 700;
  letter-spacing: 3px;
  color: #d4f7c2;
  background: rgba(126, 203, 111, 0.08);
  border: 1px solid rgba(126, 203, 111, 0.45);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.btn-create-new:hover:not(:disabled) {
  background: rgba(126, 203, 111, 0.16);
  border-color: rgba(126, 203, 111, 0.7);
  box-shadow: 0 0 14px rgba(126, 203, 111, 0.18);
}
.btn-create-new:disabled { opacity: 0.55; cursor: default; }

/* 角色创建屏：返回按钮 */
.btn-back {
  background: none;
  border: 1px solid #2b3b46;
  border-radius: 3px;
  color: var(--c-muted);
  font: inherit;
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.btn-back:hover:not(:disabled) {
  color: var(--c-sys);
  border-color: var(--c-sys);
}
.btn-back:disabled { opacity: 0.55; cursor: default; }