/* ═══ B平台加载动画适配（自动注入）═══ */
.flex.items-center.justify-center.size-6 { opacity: 1 !important; }
.flex.items-center.justify-center.size-6 > .flex.gap-2 { display: none !important; }
.is-assistant.w-fit { width: 100% !important; }
.is-assistant > .border.border-muted:has(.flex.items-center.justify-center.size-6) {
  width: 100% !important; background: transparent !important;
  border: none !important; padding: 0 !important;
}
.is-assistant .space-y-3:has(.flex.items-center.justify-center.size-6) {
  display: flex; justify-content: center; width: 100%;
}

/* ═══ B平台按钮组保护（自动注入 — 防止按钮消失）═══
   原理：B平台消息操作按钮结构为：
   .flex.items-center.gap-1.ml-auto (hover显隐包装)
     └── .bg-muted.rounded.flex.p-0.5 (按钮组容器)
           └── button.rounded-full.size-7 (单个按钮)
   以下规则使用高specificity + !important确保按钮
   不被任何转换后/透传的CSS规则意外隐藏
   ═══════════════════════════════════════════════ */
/* 按钮组容器保护 */
.w-full.h-full.flex.group .bg-muted.rounded.flex.p-0\.5,
.is-user .bg-muted.rounded.flex.p-0\.5,
.is-assistant .bg-muted.rounded.flex.p-0\.5 {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  position: relative !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  pointer-events: auto !important;
  clip: auto !important;
  clip-path: none !important;
}
/* 单个按钮保护 */
.w-full.h-full.flex.group .bg-muted.rounded.flex.p-0\.5 > button,
.is-user .bg-muted.rounded.flex.p-0\.5 > button,
.is-assistant .bg-muted.rounded.flex.p-0\.5 > button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  clip: auto !important;
  clip-path: none !important;
}
/* hover显隐包装层保护 — 仅保留B平台原生的opacity过渡 */
.flex.items-center.gap-1.ml-auto.md\:opacity-0.group-hover\:opacity-100 {
  visibility: visible !important;
  display: flex !important;
  pointer-events: auto !important;
  overflow: visible !important;
}
/* 操作行保护 */
.flex.w-full.items-center.justify-between.gap-2.px-2 {
  display: flex !important;
  visibility: visible !important;
  overflow: visible !important;
}

/* ═══ B平台顶部栏适配说明（自动注入）═══
   A: div.sticky > div.flex.justify-between
      ├── 左侧空区
      ├── #ai-model-selector (居中)
      └── 右侧工具(设置按钮等)
   B: <header.flex.justify-between>
      ├── #nav-left (侧边栏开关)
      ├── #nav-middle (可能为空)
      └── #nav-right (通知/主题/语言)
   B平台模型按钮不在header内，选择器:
   button:has(> .flex-1.truncate.text-left)
   ═══════════════════════════════════════ */
header.flex.justify-between { position: relative; overflow: visible; }

/* ============================================
   TORTUS SYSTEM UI — 异世界×地下城 主题
   《平凡职业造就世界最强》专用界面
   v2.0 — tooltip修复 & 全面优化
   ============================================ */

/* === 容器变量与基础 === */
ai {
  --void: #0d1117;
  --slab: #131a24;
  --slab2: #1a2332;
  --slab3: #212d40;
  --gold: #d4a843;
  --gold-l: #f0c75e;
  --gold-dim: #a07830;
  --blue: #4a9eff;
  --blue-l: #7cb3ff;
  --green: #3fb950;
  --green-l: #56d364;
  --red: #f85149;
  --red-l: #ff6b6b;
  --pink: #f778ba;
  --pink-l: #ffb3d9;
  --teal: #2ea98f;
  --amber: #e09956;
  --text: #c9d1d9;
  --text-dim: #8b949e;
  --text-bright: #f0f6fc;
  --font: "Segoe UI", "Noto Sans SC", "PingFang SC", sans-serif;
  --radius: 6px;
  --glow-gold: 0 0 12px rgba(212,168,67,0.3);
  --glow-blue: 0 0 10px rgba(74,158,255,0.25);
  --glow-red: 0 0 10px rgba(248,81,73,0.3);
  --glow-pink: 0 0 10px rgba(247,120,186,0.25);
  display: block;
  font-family: var(--font);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.65;
  padding: 6px;
  background:
    url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L55 17.5 L55 42.5 L30 55 L5 42.5 L5 17.5Z' fill='none' stroke='%23ffffff' stroke-opacity='0.018' stroke-width='0.8'/%3E%3C/svg%3E"),
    linear-gradient(170deg, var(--void) 0%, #0f1620 40%, #111927 70%, var(--void) 100%);
  background-attachment: fixed;
  position: relative;
}

/* 环境光漂移 */
ai::before {
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(ellipse 600px 600px at 20% 20%, rgba(74,158,255,0.03) 0%, transparent 70%),
    radial-gradient(ellipse 500px 500px at 80% 80%, rgba(212,168,67,0.025) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: ambientDrift 30s ease-in-out infinite alternate;
}

@keyframes ambientDrift {
  0% { transform: translate(0,0) rotate(0deg); }
  50% { transform: translate(20px,-15px) rotate(1deg); }
  100% { transform: translate(-10px,10px) rotate(-0.5deg); }
}

/* 六角纹理覆盖 */
ai::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg width='40' height='46' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 1 L38 12 L38 34 L20 45 L2 34 L2 12Z' fill='none' stroke='%239ca3af' stroke-opacity='0.025' stroke-width='0.5'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

ai > * {
  position: relative;
  z-index: 1;
}

/* ============================================
   通用 f 标签
   ============================================ */
ai f {
  font-style: normal;
}

/* ============================================
   思维链 (CoT) — 折叠区
   ============================================ */
ai > details:first-child {
  margin-bottom: 10px;
  background: linear-gradient(135deg, #12101f 0%, #16132a 50%, #120e1f 100%);
  border: 1px solid rgba(138,100,200,0.2);
  border-radius: var(--radius);
}

ai > details:first-child > summary {
  padding: 8px 12px 8px 30px;
  font-size: 13px;
  font-weight: 700;
  color: #a78bda;
  background: linear-gradient(90deg, rgba(138,100,200,0.1) 0%, transparent 100%);
  cursor: pointer;
  list-style: none;
  position: relative;
  letter-spacing: 0.5px;
  user-select: none;
  transition: background 0.3s, color 0.3s;
  border-radius: var(--radius);
}

ai > details:first-child > summary::-webkit-details-marker,
ai > details:first-child > summary::marker {
  display: none;
  content: "";
}

ai > details:first-child > summary::before {
  content: "◆";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 11px;
  color: #a78bda;
  transition: transform 0.35s ease, color 0.3s;
}

ai > details[open]:first-child > summary::before {
  transform: translateY(-50%) rotate(45deg);
  color: #c9a8ff;
}

ai > details:first-child > summary:hover {
  background: linear-gradient(90deg, rgba(138,100,200,0.18) 0%, transparent 100%);
  color: #c9a8ff;
}

ai > details:first-child > summary::after {
  content: "— SYSTEM INTERNAL —";
  float: right;
  font-size: 9px;
  font-weight: 400;
  color: rgba(138,100,200,0.4);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

ai > details:first-child .cot {
  padding: 4px 10px 8px;
}

ai > details:first-child .cot p {
  margin: 0;
  padding: 6px 8px 6px 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #8b849e;
  border-left: 2px solid rgba(138,100,200,0.2);
  position: relative;
  white-space: pre-wrap;
}

ai > details:first-child .cot p + p {
  margin-top: 6px;
}

ai > details:first-child .cot p::before {
  content: "▸ " attr(t);
  display: block;
  font-weight: 700;
  color: #a78bda;
  font-size: 12px;
  margin-bottom: 3px;
  letter-spacing: 0.3px;
}

/* ============================================
   顶部环境锚点 hd
   ============================================ */
ai > hd {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
  padding: 7px 12px;
  margin-bottom: 8px;
  background: linear-gradient(90deg, var(--slab) 0%, var(--slab2) 100%);
  border: 1px solid rgba(212,168,67,0.18);
  border-radius: var(--radius);
  position: relative;
}

ai > hd::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 20%, var(--gold-l) 50%, var(--gold) 80%, transparent 100%);
  opacity: 0.6;
}

ai > hd::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-dim) 30%, var(--gold-dim) 70%, transparent 100%);
  opacity: 0.3;
}

ai > hd > f {
  display: inline;
  font-size: 13px;
  margin-right: 3px;
  flex-shrink: 0;
}

ai > hd > d {
  display: inline;
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 500;
}

ai > hd > d::after {
  content: "  ◈  ";
  color: var(--gold-dim);
  font-size: 10px;
  opacity: 0.6;
}

ai > hd > d:last-of-type::after {
  content: none;
}

/* ============================================
   叙事正文 text
   ============================================ */
ai > text {
  display: block;
  padding: 12px 10px;
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
  background: linear-gradient(180deg, rgba(13,17,23,0.4) 0%, rgba(19,26,36,0.3) 100%);
  border-radius: var(--radius);
  border-left: 2px solid rgba(212,168,67,0.15);
  position: relative;
}

ai > text::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -1px;
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: var(--glow-gold);
}

ai > text p {
  margin: 0 0 10px 0;
  text-indent: 2em;
}

ai > text p:last-child {
  margin-bottom: 0;
}

/* ============================================
   通用 details/summary 样式
   ★ 关键修复：不使用 overflow:hidden ★
   使用 clip-path 或纯 border-radius 实现
   确保 tooltip 子元素可以溢出显示
   ============================================ */
ai > details:not(:first-child),
ai pan > details {
  margin-bottom: 6px;
  background: var(--slab);
  border: 1px solid rgba(212,168,67,0.12);
  border-radius: var(--radius);
  position: relative;
  transition: border-color 0.3s;
}

ai > details:not(:first-child)[open],
ai pan > details[open] {
  border-color: rgba(212,168,67,0.28);
}

ai > details:not(:first-child) > summary,
ai pan > details > summary {
  padding: 8px 12px 8px 32px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--gold-l);
  background: linear-gradient(90deg, rgba(212,168,67,0.06) 0%, transparent 60%);
  cursor: pointer;
  list-style: none;
  position: relative;
  user-select: none;
  letter-spacing: 0.4px;
  transition: background 0.3s, color 0.3s;
  border-bottom: 1px solid transparent;
  border-radius: var(--radius) var(--radius) 0 0;
}

ai > details:not(:first-child)[open] > summary,
ai pan > details[open] > summary {
  border-bottom-color: rgba(212,168,67,0.1);
  background: linear-gradient(90deg, rgba(212,168,67,0.1) 0%, rgba(212,168,67,0.02) 100%);
}

ai > details:not(:first-child):not([open]) > summary,
ai pan > details:not([open]) > summary {
  border-radius: var(--radius);
}

ai > details:not(:first-child) > summary::-webkit-details-marker,
ai > details:not(:first-child) > summary::marker,
ai pan > details > summary::-webkit-details-marker,
ai pan > details > summary::marker {
  display: none;
  content: "";
}

/* 自定义展开指示符 — 炼成阵菱形 */
ai > details:not(:first-child) > summary::before,
ai pan > details > summary::before {
  content: "◇";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg) scale(1);
  font-size: 12px;
  color: var(--gold);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), color 0.3s, text-shadow 0.3s;
  text-shadow: none;
}

ai > details:not(:first-child)[open] > summary::before,
ai pan > details[open] > summary::before {
  content: "◆";
  transform: translateY(-50%) rotate(180deg) scale(1.1);
  color: var(--gold-l);
  text-shadow: 0 0 8px rgba(240,199,94,0.5);
}

ai > details:not(:first-child) > summary:hover,
ai pan > details > summary:hover {
  background: linear-gradient(90deg, rgba(212,168,67,0.14) 0%, transparent 60%);
  color: #fff;
}

ai > details:not(:first-child) > summary:hover::before,
ai pan > details > summary:hover::before {
  color: var(--gold-l);
  text-shadow: 0 0 6px rgba(240,199,94,0.4);
}

/* summary 右侧装饰线 */
ai > details:not(:first-child) > summary::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  opacity: 0.3;
}

/* ============================================
   嵌套 details（记忆/锁定内部）
   ============================================ */
ai pan > details {
  background: rgba(13,17,23,0.5);
  border-color: rgba(212,168,67,0.08);
  margin: 4px 0;
}

ai pan > details > summary {
  font-size: 12.5px;
  padding: 6px 10px 6px 28px;
  color: var(--gold);
  background: linear-gradient(90deg, rgba(212,168,67,0.04) 0%, transparent 100%);
}

ai pan > details > summary::before {
  left: 8px;
  font-size: 10px;
}

ai pan > details > summary::after {
  width: 20px;
  right: 8px;
}

/* ============================================
   pan — 通用面板内容容器
   ============================================ */
ai pan {
  display: block;
  padding: 8px 10px;
  position: relative;
}

/* ============================================
   q — 信息行
   ============================================ */
ai q {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  padding: 3px 0;
  quotes: none;
  font-size: 13.5px;
}

ai q > f {
  font-weight: 700;
  color: var(--text-bright);
  flex-shrink: 0;
}

ai q > d {
  color: var(--text);
  display: inline;
}

ai q.r {
  background: linear-gradient(90deg, rgba(248,81,73,0.1) 0%, transparent 80%);
  border-left: 3px solid var(--red);
  padding: 5px 8px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 4px;
  position: relative;
}

ai q.r > f {
  color: var(--red-l);
}

ai q.r > d {
  color: var(--red-l);
  font-weight: 600;
  animation: dangerPulse 2.5s ease-in-out infinite;
  position: relative;
}

@keyframes dangerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* 因果律偏差闪烁圆点 */
ai q.r > d::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background: var(--red);
  border-radius: 50%;
  animation: dotBlink 1.5s ease-in-out infinite;
  box-shadow: 0 0 6px var(--red);
}

@keyframes dotBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

ai q > f.hr {
  color: var(--red-l);
}

/* 敌对行 */
ai q.e {
  background: rgba(248,81,73,0.06);
  padding: 4px 6px;
  border-radius: var(--radius);
  border-left: 2px solid rgba(248,81,73,0.4);
}

ai q.e f {
  color: var(--red-l);
}

/* 中立行 */
ai q.n {
  background: rgba(46,169,143,0.06);
  padding: 4px 6px;
  border-radius: var(--radius);
  border-left: 2px solid rgba(46,169,143,0.4);
}

ai q.n f {
  color: var(--teal);
}

/* ============================================
   g — 通用flex/grid容器
   ============================================ */
ai g {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ============================================
   hr 分隔线
   ============================================ */
ai pan hr,
ai hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold-dim) 20%, var(--gold) 50%, var(--gold-dim) 80%, transparent 100%);
  opacity: 0.2;
  margin: 6px 0;
}

/* ============================================
   [1] 深渊观测记录 — 红色主题
   ============================================ */
ai > details:nth-of-type(2) {
  border-color: rgba(248,81,73,0.15);
}

ai > details:nth-of-type(2) > summary {
  background: linear-gradient(90deg, rgba(248,81,73,0.06) 0%, rgba(212,168,67,0.04) 50%, transparent 100%);
}

ai > details:nth-of-type(2)[open] {
  border-color: rgba(248,81,73,0.25);
  box-shadow: 0 0 15px rgba(248,81,73,0.06);
}

ai > details:nth-of-type(2) > summary::before {
  color: var(--red);
}

ai > details:nth-of-type(2)[open] > summary::before {
  color: var(--red-l);
  text-shadow: 0 0 8px rgba(248,81,73,0.5);
}

/* ============================================
   [2] 气息感知 — 蓝色主题
   ============================================ */
ai > details:nth-of-type(3) {
  border-color: rgba(74,158,255,0.12);
}

ai > details:nth-of-type(3) > summary {
  background: linear-gradient(90deg, rgba(74,158,255,0.05) 0%, transparent 100%);
}

ai > details:nth-of-type(3) > summary::before {
  color: var(--blue);
}

ai > details:nth-of-type(3)[open] > summary::before {
  color: var(--blue-l);
  text-shadow: 0 0 8px rgba(74,158,255,0.5);
}

ai > details:nth-of-type(3)[open] {
  border-color: rgba(74,158,255,0.22);
}

/* ============================================
   [3] 状态石板 — 金色主题 (主角面板)
   ============================================ */
ai > details:nth-of-type(4) {
  border-color: rgba(212,168,67,0.2);
  background: linear-gradient(180deg, var(--slab) 0%, #111824 100%);
}

ai > details:nth-of-type(4)[open] {
  border-color: rgba(212,168,67,0.35);
  box-shadow: var(--glow-gold), inset 0 1px 0 rgba(212,168,67,0.1);
}

ai > details:nth-of-type(4) > summary {
  background: linear-gradient(90deg, rgba(212,168,67,0.08) 0%, rgba(212,168,67,0.02) 100%);
  font-size: 14px;
}

/* 状态石板魔法阵旋转装饰 */
ai > details:nth-of-type(4) > pan {
  position: relative;
}

ai > details:nth-of-type(4) > pan::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 60px;
  height: 60px;
  background:
    url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='28' fill='none' stroke='%23d4a843' stroke-opacity='0.08' stroke-width='0.6'/%3E%3Ccircle cx='30' cy='30' r='20' fill='none' stroke='%23d4a843' stroke-opacity='0.06' stroke-width='0.5'/%3E%3Cpolygon points='30,4 53,17 53,43 30,56 7,43 7,17' fill='none' stroke='%23d4a843' stroke-opacity='0.07' stroke-width='0.5'/%3E%3Cpolygon points='30,12 46,21 46,39 30,48 14,39 14,21' fill='none' stroke='%23d4a843' stroke-opacity='0.05' stroke-width='0.5'/%3E%3C/svg%3E");
  animation: runeRotate 20s linear infinite;
  pointer-events: none;
  opacity: 0.8;
}

@keyframes runeRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 档案头部 .ph */
ai .ph {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212,168,67,0.1);
  margin-bottom: 8px;
}

/* 名字区 .nb */
ai .nb {
  display: flex;
  flex-direction: column;
  gap: 0;
}

ai .nb small {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--gold-dim);
  font-weight: 700;
}

ai .nb b {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-bright);
  background: linear-gradient(135deg, var(--gold-l) 0%, #fff 40%, var(--gold-l) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}

/* 信息碎片 .ib */
ai .ib {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
}

ai .ib d {
  font-size: 12.5px;
  color: var(--text-dim);
  display: inline;
}

ai .ib b {
  color: var(--gold-l);
  font-weight: 700;
}

ai .ib .lv {
  color: var(--amber);
  font-size: 14px;
  text-shadow: 0 0 6px rgba(224,153,86,0.3);
}

/* 个人简述 .bio */
ai .bio {
  padding: 4px 0 8px;
}

ai .bio d {
  display: block;
  font-size: 13px;
  padding: 2px 0;
  color: var(--text);
}

ai .bio f {
  font-weight: 700;
  color: var(--text-bright);
}

/* ============================================
   属性条 .bars
   ============================================ */
ai .bars {
  padding: 4px 0;
}

ai .br {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
}

ai .br f {
  width: 28px;
  font-size: 11px;
  font-weight: 800;
  text-align: right;
  color: var(--text-dim);
  flex-shrink: 0;
  font-style: normal;
  letter-spacing: 0.5px;
}

ai .tk {
  flex: 1;
  height: 14px;
  background: rgba(255,255,255,0.06);
  border-radius: 7px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,0.05);
}

ai .fl {
  height: 100%;
  border-radius: 7px;
  position: relative;
  transition: width 0.6s ease;
  overflow: hidden;
}

ai .fl::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
  animation: barShine 3s ease-in-out infinite;
}

@keyframes barShine {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

ai .fl.hp {
  background: linear-gradient(90deg, #1a6b2a, var(--green), var(--green-l));
  box-shadow: 0 0 8px rgba(63,185,80,0.3);
}

ai .fl.mp {
  background: linear-gradient(90deg, #1a4a7a, var(--blue), var(--blue-l));
  box-shadow: 0 0 8px rgba(74,158,255,0.3);
}

ai .br d {
  font-size: 11.5px;
  color: var(--text-dim);
  flex-shrink: 0;
  min-width: 50px;
  text-align: left;
  display: inline;
}

/* 迷你属性网格 .mg */
ai g.mg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 12px;
  padding: 4px 0 2px;
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.04);
  flex-direction: unset;
}

ai g.mg d {
  font-size: 12.5px;
  color: var(--text);
  display: inline;
}

ai g.mg f {
  color: var(--gold);
  font-weight: 700;
  font-size: 11px;
}

/* ============================================
   技能区 .sk
   ============================================ */
ai .sk {
  padding: 4px 0;
}

ai .sk + .sk {
  border-top: 1px solid rgba(255,255,255,0.04);
  margin-top: 4px;
}

/* 小节标题 .st */
ai .st {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.5px;
  padding: 3px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(212,168,67,0.1);
  position: relative;
}

ai .st::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40px;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}

ai .st.rs {
  color: var(--red-l);
  border-bottom-color: rgba(248,81,73,0.1);
}

ai .st.rs::before {
  background: var(--red);
}

/* 技能flex容器 .sf */
ai g.sf {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex-direction: row;
}

/* ============================================
   ★ tooltip 技能/装备悬浮提示 .tp ★
   核心修复区域：确保不被任何父容器遮挡
   ============================================ */
ai .tp {
  display: inline-block;
  padding: 3px 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue-l);
  background: rgba(74,158,255,0.08);
  border: 1px solid rgba(74,158,255,0.2);
  border-radius: 4px;
  cursor: default;
  position: relative;
  transition: all 0.25s;
  text-decoration: none;
  z-index: 2;
}

ai .tp:hover {
  background: rgba(74,158,255,0.15);
  border-color: rgba(74,158,255,0.4);
  color: #fff;
  box-shadow: var(--glow-blue);
  transform: translateY(-1px);
  z-index: 200;
}

/* ★ tooltip弹出层 — 全面修复 ★ */
ai .tp > span {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px);
  width: max-content;
  max-width: 280px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text);
  background: linear-gradient(135deg, #1c2836 0%, #0f1520 100%);
  border: 1px solid rgba(212,168,67,0.35);
  border-radius: var(--radius);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.7),
    0 2px 8px rgba(0,0,0,0.4),
    var(--glow-gold);
  z-index: 9999;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  pointer-events: none;
  line-height: 1.55;
  white-space: pre-wrap;
  text-align: left;
}

/* tooltip 下方箭头 */
ai .tp > span::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: rgba(212,168,67,0.35);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}

/* tooltip 内部顶部装饰线 */
ai .tp > span::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* hover 显示 tooltip */
ai .tp:hover > span {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
  pointer-events: auto;
}

ai .tp > span b {
  color: var(--gold-l);
  display: block;
  margin-bottom: 3px;
  font-size: 12.5px;
}

/* ★ 底部弹出变体 — 用于面板下方的tooltip防止顶部溢出 ★ */
ai .ny .tp > span,
ai .nc .tp > span,
ai .il .tp > span {
  bottom: auto;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(-6px);
}

ai .ny .tp:hover > span,
ai .nc .tp:hover > span,
ai .il .tp:hover > span {
  transform: translateX(-50%) translateY(0);
}

ai .ny .tp > span::before,
ai .nc .tp > span::before,
ai .il .tp > span::before {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: rgba(212,168,67,0.35);
}

/* 左对齐修正 — 当tooltip靠近左边界 */
ai g.sf .tp:first-child > span {
  left: 0;
  transform: translateX(0) translateY(6px);
}

ai g.sf .tp:first-child:hover > span {
  transform: translateX(0) translateY(0);
}

ai g.sf .tp:first-child > span::before {
  left: 16px;
  transform: none;
}

/* 掠夺技能红色变体 */
ai .tp.rs {
  color: var(--red-l);
  background: rgba(248,81,73,0.08);
  border-color: rgba(248,81,73,0.2);
}

ai .tp.rs:hover {
  background: rgba(248,81,73,0.15);
  border-color: rgba(248,81,73,0.4);
  box-shadow: var(--glow-red);
  color: #fff;
}

ai .tp.rs > span {
  border-color: rgba(248,81,73,0.35);
  box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.4), var(--glow-red);
}

ai .tp.rs > span::before {
  border-top-color: rgba(248,81,73,0.35);
}

ai .tp.rs > span::after {
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}

ai .tp.rs > span b {
  color: var(--red-l);
}

/* 装备变体 .eq */
ai .tp.eq {
  color: var(--gold-l);
  background: rgba(212,168,67,0.08);
  border-color: rgba(212,168,67,0.2);
}

ai .tp.eq:hover {
  background: rgba(212,168,67,0.15);
  border-color: rgba(212,168,67,0.4);
  box-shadow: var(--glow-gold);
  color: #fff;
}

/* 身体数据粉色变体 .pk */
ai .tp.pk {
  color: var(--pink);
  background: rgba(247,120,186,0.08);
  border-color: rgba(247,120,186,0.2);
  font-size: 12px;
}

ai .tp.pk:hover {
  background: rgba(247,120,186,0.15);
  border-color: rgba(247,120,186,0.4);
  box-shadow: var(--glow-pink);
  color: var(--pink-l);
}

ai .tp.pk > span {
  border-color: rgba(247,120,186,0.35);
  box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.4), var(--glow-pink);
}

ai .tp.pk > span::before {
  border-top-color: transparent;
  border-bottom-color: rgba(247,120,186,0.35);
}

ai .tp.pk > span::after {
  background: linear-gradient(90deg, transparent, var(--pink), transparent);
}

ai .tp.pk > span b {
  color: var(--pink-l);
}

/* ============================================
   [4] 宝物库 — 琥珀色主题
   ============================================ */
ai > details:nth-of-type(5) {
  border-color: rgba(224,153,86,0.15);
}

ai > details:nth-of-type(5) > summary {
  background: linear-gradient(90deg, rgba(224,153,86,0.05) 0%, transparent 100%);
}

ai > details:nth-of-type(5) > summary::before {
  color: var(--amber);
}

ai > details:nth-of-type(5)[open] > summary::before {
  color: var(--gold-l);
  text-shadow: 0 0 8px rgba(224,153,86,0.5);
}

ai > details:nth-of-type(5)[open] {
  border-color: rgba(224,153,86,0.25);
}

/* 物品清单 .il */
ai .il q {
  padding: 3px 4px;
  font-size: 13px;
}

/* ============================================
   [5] 人物档案 — 樱粉主题
   ============================================ */
ai > details:nth-of-type(6) {
  border-color: rgba(247,120,186,0.12);
}

ai > details:nth-of-type(6) > summary {
  background: linear-gradient(90deg, rgba(247,120,186,0.05) 0%, transparent 100%);
}

ai > details:nth-of-type(6) > summary::before {
  color: var(--pink);
}

ai > details:nth-of-type(6)[open] > summary::before {
  color: var(--pink-l);
  text-shadow: 0 0 8px rgba(247,120,186,0.5);
}

ai > details:nth-of-type(6)[open] {
  border-color: rgba(247,120,186,0.22);
}

/* NPC卡片 .nc */
ai .nc {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-bottom: 6px;
  position: relative;
  transition: border-color 0.3s;
}

ai .nc:hover {
  border-color: rgba(247,120,186,0.2);
}

ai .nc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--pink), var(--pink-l), var(--pink));
  border-radius: 3px 0 0 3px;
  opacity: 0.4;
}

/* NPC头部 .nh */
ai .nh {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

ai .nh b {
  font-size: 14px;
  color: var(--pink-l);
  font-weight: 700;
}

ai .nh small {
  font-size: 11px;
  color: var(--text-dim);
}

/* NPC主体 .ny */
ai .ny {
  position: relative;
}

ai .ny d {
  display: block;
  font-size: 13px;
  padding: 1px 0;
}

ai .ny f {
  font-weight: 700;
  color: var(--text-bright);
}

/* 羁绊网络 .kn */
ai .kn {
  padding: 6px 4px;
}

ai .kn d {
  display: block;
  font-size: 13px;
  padding: 3px 6px;
  border-left: 2px solid rgba(247,120,186,0.3);
  margin-bottom: 4px;
  line-height: 1.6;
}

/* ============================================
   [6] 记忆储存 — 蓝色主题
   ============================================ */
ai > details:nth-of-type(7) {
  border-color: rgba(74,158,255,0.12);
}

ai > details:nth-of-type(7) > summary {
  background: linear-gradient(90deg, rgba(74,158,255,0.05) 0%, transparent 100%);
}

ai > details:nth-of-type(7) > summary::before {
  color: var(--blue);
}

ai > details:nth-of-type(7)[open] > summary::before {
  color: var(--blue-l);
  text-shadow: 0 0 8px rgba(74,158,255,0.5);
}

ai > details:nth-of-type(7)[open] {
  border-color: rgba(74,158,255,0.22);
}

/* 记忆内容 .mm */
ai .mm {
  padding: 6px 8px;
}

ai .mm d {
  display: block;
  font-size: 12.5px;
  padding: 2px 0;
  color: var(--text);
  line-height: 1.6;
}

ai .mm b {
  color: var(--gold);
}

/* ============================================
   [7] 角色锁定 — 翡翠绿主题
   ============================================ */
ai > details:nth-of-type(8) {
  border-color: rgba(46,169,143,0.15);
}

ai > details:nth-of-type(8) > summary {
  background: linear-gradient(90deg, rgba(46,169,143,0.05) 0%, transparent 100%);
  color: var(--teal);
}

ai > details:nth-of-type(8) > summary::before {
  color: var(--teal);
}

ai > details:nth-of-type(8)[open] > summary::before {
  text-shadow: 0 0 8px rgba(46,169,143,0.5);
}

ai > details:nth-of-type(8)[open] {
  border-color: rgba(46,169,143,0.25);
}

/* 系统吐槽 .sys */
ai .sys {
  padding: 6px 8px;
  font-size: 13px;
  color: var(--teal);
  background: rgba(46,169,143,0.05);
  border-left: 3px solid rgba(46,169,143,0.3);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 6px;
  font-style: italic;
}

/* 锁定说明 .lk */
ai d.lk {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  padding: 4px 0;
  margin-bottom: 4px;
}

/* ============================================
   [8] 行动面板 .ap
   ============================================ */
ai .ap {
  margin-top: 8px;
  background: var(--slab);
  border: 1px solid rgba(212,168,67,0.2);
  border-radius: var(--radius);
  position: relative;
  animation: borderPulse 4s ease-in-out infinite;
}

@keyframes borderPulse {
  0%, 100% { border-color: rgba(212,168,67,0.2); }
  50% { border-color: rgba(212,168,67,0.38); }
}

ai .ap::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='35' fill='none' stroke='%23d4a843' stroke-opacity='0.03' stroke-width='0.5'/%3E%3Ccircle cx='40' cy='40' r='25' fill='none' stroke='%23d4a843' stroke-opacity='0.025' stroke-width='0.5'/%3E%3Cline x1='40' y1='5' x2='40' y2='15' stroke='%23d4a843' stroke-opacity='0.04' stroke-width='0.5'/%3E%3Cline x1='40' y1='65' x2='40' y2='75' stroke='%23d4a843' stroke-opacity='0.04' stroke-width='0.5'/%3E%3Cline x1='5' y1='40' x2='15' y2='40' stroke='%23d4a843' stroke-opacity='0.04' stroke-width='0.5'/%3E%3Cline x1='65' y1='40' x2='75' y2='40' stroke='%23d4a843' stroke-opacity='0.04' stroke-width='0.5'/%3E%3C/svg%3E");
  pointer-events: none;
  border-radius: var(--radius);
}

/* 行动标题 .ah */
ai .ah {
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--gold-l);
  text-align: center;
  background: linear-gradient(90deg, transparent, rgba(212,168,67,0.08), transparent);
  border-bottom: 1px solid rgba(212,168,67,0.12);
  position: relative;
}

ai .ah::before,
ai .ah::after {
  content: "───";
  font-size: 10px;
  color: var(--gold-dim);
  opacity: 0.4;
  vertical-align: middle;
}

ai .ah::before {
  margin-right: 8px;
}

ai .ah::after {
  margin-left: 8px;
}

/* 行动列表 .al */
ai g.al {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 8px 10px;
  flex-direction: unset;
}

/* 行动按钮 .ab */
ai d.ab {
  display: block;
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: linear-gradient(135deg, rgba(212,168,67,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(212,168,67,0.15);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
  position: relative;
}

ai d.ab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(212,168,67,0.12) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: var(--radius);
}

ai d.ab:hover {
  border-color: rgba(212,168,67,0.5);
  color: var(--gold-l);
  transform: translateY(-2px);
  box-shadow: var(--glow-gold), 0 4px 12px rgba(0,0,0,0.3);
}

ai d.ab:hover::before {
  opacity: 1;
}

/* ============================================
   展开动画辅助
   ============================================ */
ai pan,
ai .cot,
ai .mm,
ai .kn {
  animation: fadeSlideIn 0.3s ease-out;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   小屏幕响应式
   ============================================ */
@media (max-width: 480px) {
  ai {
    padding: 4px;
    font-size: 13.5px;
  }

  ai > hd {
    padding: 5px 8px;
  }

  ai > hd > d,
  ai > hd > f {
    font-size: 12px;
  }

  ai > text {
    padding: 8px;
    font-size: 14px;
  }

  ai > details:not(:first-child) > summary,
  ai pan > details > summary {
    padding: 7px 10px 7px 28px;
    font-size: 12.5px;
  }

  ai g.al {
    grid-template-columns: 1fr;
  }

  ai .nb b {
    font-size: 17px;
  }

  ai .tp > span {
    max-width: 220px;
    font-size: 11.5px;
    padding: 8px 10px;
  }

  ai g.mg {
    grid-template-columns: 1fr;
    flex-direction: unset;
  }

  ai > details:nth-of-type(4) > pan::before {
    width: 45px;
    height: 45px;
    top: 5px;
    right: 5px;
  }

  ai d.ab {
    padding: 6px 8px;
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  ai .ph {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  ai .tp > span {
    max-width: 180px;
    font-size: 11px;
  }

  ai .nb b {
    font-size: 15px;
  }
}

/* =========================================
   《平凡职业造就世界最强》 - 白金与猩红炼成主题
   核心理念: 绝对可读性, 明亮奇幻风, 猩红高光
   ========================================= */

/* --- 1. 顶部栏相关 (月之白金与始的猩红点缀) --- */
header.flex.justify-between {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.95)) !important;
    border-bottom: 2px solid rgba(220, 20, 60, 0.2) !important; /* 猩红底边 */
    box-shadow: 0 4px 15px rgba(220, 20, 60, 0.05) !important;
    backdrop-filter: blur(12px) !important;
    transition: all 0.3s ease !important;
}

/* 模型选择器 - 炼成铭文板 */
#nav-middle .group.flex.items-center {
    background: #ffffff !important;
    border: 1px solid rgba(220, 20, 60, 0.3) !important;
    border-radius: 8px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
#nav-middle .group.flex.items-center:hover {
    border-color: rgba(220, 20, 60, 0.8) !important;
    box-shadow: 0 0 10px rgba(220, 20, 60, 0.15), inset 0 0 5px rgba(255, 215, 0, 0.1) !important; /* 猩红外发光+白金内发光 */
}
#nav-middle button:has(> .flex-1.truncate.text-left) .flex-1.truncate.text-left {
    color: #8b0000 !important; /* 深红色文字确保在白底上的可读性 */
    font-weight: 600 !important;
    font-family: system-ui, -apple-system, sans-serif !important;
}
#nav-middle .shrink-0.flex.items-center svg {
    color: #8b0000 !important;
    transition: transform 0.3s ease !important;
}
#nav-middle .group.flex.items-center:hover .shrink-0.flex.items-center svg {
    transform: translateY(2px) scale(1.1) !important;
}

/* 顶部栏图标 (历史/音乐/设置) */
header.flex.justify-between.w-full.top-0 svg.lucide-clock-8,
header.flex.justify-between.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2,
header.flex.justify-between.w-full.top-0 svg:has(use[href="#icon-icon-set"]),
#nav-right button svg {
    color: #555555 !important;
    transition: all 0.3s ease !important;
}
header.flex.justify-between.w-full.top-0 svg.lucide-clock-8:hover,
header.flex.justify-between.w-full.top-0 button.MuiIconButton-root:hover svg.lucide-music-2,
header.flex.justify-between.w-full.top-0 svg:has(use[href="#icon-icon-set"]):hover,
#nav-right button:hover svg {
    color: #dc143c !important; /* 悬浮时显现炼成红 */
    filter: drop-shadow(0 0 3px rgba(220, 20, 60, 0.5)) !important;
    transform: rotate(15deg) scale(1.1) !important;
}
header.flex.justify-between.w-full.top-0 span.MuiBadge-dot.md\:hidden {
    background-color: #ffd700 !important; /* 历史未读圆点使用月的金色 */
    box-shadow: 0 0 5px #ffd700 !important;
}


/* --- 2. 开场白选择器相关 (轻量神圣感) --- */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"],
div.h-9.rounded-md.cursor-pointer.group:has(svg[data-icon="SlidersH"]) {
    background: linear-gradient(to right, #ffffff, #fafafa) !important;
    border: 1px solid rgba(255, 215, 0, 0.4) !important; /* 金色边框 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
    transition: all 0.4s ease !important;
}
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover,
div.h-9.rounded-md.cursor-pointer.group:has(svg[data-icon="SlidersH"]):hover {
    border-color: #dc143c !important;
    box-shadow: 0 0 12px rgba(220, 20, 60, 0.1) !important;
}
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="SlidersH"],
div.flex.items-center.h-9.cursor-pointer.group svgbutton:has(> .flex-1.truncate.text-left) svg {
    color: #8b0000 !important;
    transition: all 0.3s ease !important;
}
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover svg,
div.h-9.rounded-md.cursor-pointer.group:has(svg[data-icon="SlidersH"]):hover svg {
    color: #dc143c !important;
    filter: drop-shadow(0 0 2px rgba(220, 20, 60, 0.4)) !important;
}


/* --- 3. 按钮栏相关 (注入炼成魔力) --- */
button, .menu_button.MuiButton-root,
#nav-right button {
    background: linear-gradient(135deg, #ffffff 0%, #f4f4f5 100%) !important;
    color: #333333 !important;
    border: 1px solid rgba(220, 20, 60, 0.2) !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}
#ai-mod-button2 button.MuiButton-root::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: -100% !important;
    width: 50% !important; height: 100% !important;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,215,0,0.4), rgba(255,255,255,0)) !important;
    transform: skewX(-25deg) !important;
    transition: all 0.5s ease !important;
}
#ai-mod-button2 button.MuiButton-root:hover::before {
    left: 150% !important; /* 金色流光扫过效果 */
}
#ai-mod-button2 button.MuiButton-root:hover {
    background: linear-gradient(135deg, #8b0000 0%, #dc143c 100%) !important; /* 变为始的深渊红 */
    color: #ffffff !important;
    border-color: #8b0000 !important;
    box-shadow: 0 4px 12px rgba(220, 20, 60, 0.4) !important;
    transform: translateY(-2px) !important;
}
#ai-mod-button2 button.MuiButton-root svg {
    color: inherit !important;
    transition: all 0.3s ease !important;
}
#ai-mod-button2 button.MuiButton-root:hover svg {
    transform: scale(1.15) !important;
}


/* --- 4. 底部栏及输入框 (深渊核心与光之庇护) --- */
textarea, input[type="text"] {
    background: linear-gradient(to top, rgba(255,255,255,1) 40%, rgba(255,255,255,0.7) 80%, transparent 100%) !important;
}
textarea, input[type="text"] {
    background: #ffffff !important;
    border: 2px solid rgba(220, 20, 60, 0.15) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}
textarea, input[type="text"]:focus-within {
    border-color: #dc143c !important;
    box-shadow: 0 0 15px rgba(220, 20, 60, 0.15), inset 0 0 8px rgba(255, 215, 0, 0.05) !important;
}
textarea, input[type="text"] {
    color: #222222 !important; /* 极高可读性深色 */
    font-weight: 500 !important;
    font-family: system-ui, -apple-system, sans-serif !important;
}
textarea, input[type="text"]::placeholder {
    color: #a0a0a0 !important;
    font-style: italic !important;
}
textarea, input[type="text"]::selection {
    background: rgba(220, 20, 60, 0.2) !important; /* 选中文本时的浅红色底 */
    color: #8b0000 !important;
}

/* ========================================
   《平凡职业造就世界最强》- 炼成法阵加载动画
   ======================================== */

/* 1. 强制隐藏平台默认的加载点元素 */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}

/* 2. 重构加载动画父级容器 - 确保有足够的宽度容纳法阵与文字，并设为相对定位 */
.flex.items-center.justify-center.size-6 {
    position: relative !important;
    width: 120px !important; 
    height: 24px !important; 
    justify-content: flex-start !important;
    overflow: visible !important;
}

/* 3. 伪元素 ::before - 顺时针旋转的炼成法阵 (强制使用内嵌 SVG SMIL 动画) */
.flex.items-center.justify-center.size-6::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 24px !important;
    height: 24px !important;
    /* 内嵌 SVG：包含外环、内环、六芒星，并使用 <animateTransform> 执行 360 度顺时针旋转，确保在 CSS 动画被禁用时依然生效 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg%3E%3Ccircle cx='50' cy='50' r='46' stroke='%23dc143c' fill='none' stroke-width='3'/%3E%3Ccircle cx='50' cy='50' r='38' stroke='%23dc143c' fill='none' stroke-width='2'/%3E%3Cpolygon points='50,12 83,69 17,69' stroke='%23dc143c' fill='none' stroke-width='2'/%3E%3Cpolygon points='50,88 83,31 17,31' stroke='%23dc143c' fill='none' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='18' stroke='%23dc143c' fill='none' stroke-width='2' stroke-dasharray='4 4'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='2.5s' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* 4. 伪元素 ::after - 文字部分展示替换 */
.flex.items-center.justify-center.size-6::after {
    content: "炼成中..." !important;
    position: absolute !important;
    left: 32px !important; /* 定位在法阵右侧 */
    top: 2px !important;
    color: #dc143c !important; /* 始的专属炼成绯红色 */
    font-size: 14px !important;
    font-weight: bold !important;
    letter-spacing: 2px !important;
    white-space: nowrap !important;
    /* 附加 CSS 关键帧作为文字光晕增强 */
    animation: alchemyTextPulse 2s ease-in-out infinite !important;
}

/* 5. 文字呼吸光晕动画 (CSS 增强) */
@keyframes alchemyTextPulse {
    0%, 100% { opacity: 1; text-shadow: 0 0 2px rgba(220, 20, 60, 0.2); }
    50% { opacity: 0.7; text-shadow: 0 0 8px rgba(220, 20, 60, 0.6); }
}

/* 6. 移动端与低动效环境适配 */
@media (max-width: 480px) {
    .flex.items-center.justify-center.size-6 {
        width: 100px !important;
    }
    .flex.items-center.justify-center.size-6::after {
        font-size: 13px !important;
        left: 28px !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .flex.items-center.justify-center.size-6::after {
        animation-duration: 4s !important; /* 降低文字闪烁频率但不完全关闭 */
    }
}

/* ═══════════════════════════════════════════════════
   性能优化补丁 v1.0
   针对移动端滚动/下拉卡顿的定向修复
   保留原视觉设计，仅优化渲染路径
   （追加在原 CSS 末尾即可）
   ═══════════════════════════════════════════════════ */

/* ─── 修复①：移除 background-attachment: fixed ───
   移动端(尤其 iOS Safari)每帧滚动都会重新光栅化整个背景层。
   本属性在多数移动浏览器中会被自动降级，视觉影响可忽略。 */
ai {
  background-attachment: scroll !important;
}

/* ─── 修复②：fixed 伪元素改为 absolute ───
   原 fixed 定位 + 全屏覆盖 + 动画 = 每帧强制合成全屏。
   改为 absolute 后限定在 ai 容器内，仅需平移合成层。
   同时提升为独立 GPU 图层。 */
ai::before {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  will-change: transform;
  transform: translateZ(0);
  contain: layout paint;
}

ai::after {
  position: absolute !important;
  inset: 0 !important;
  transform: translateZ(0);
  contain: layout paint;
}

/* ─── 修复③：容器级渲染隔离 ───
   为主要区块启用 contain，展开/折叠时限制回流范围，
   避免连锁触发整页重排。 */
ai > details,
ai > text,
ai > hd,
ai .ap,
ai .nc {
  contain: layout style;
}

/* ─── 修复④：为持续动画元素启用独立合成层 ───
   将频繁动画元素提升到 GPU 独立图层，
   避免与主线程重排/重绘竞争。 */
ai > details:nth-of-type(4) > pan::before,
ai .fl::after,
ai .flex.items-center.justify-center.size-6::before {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ─── 修复⑤：重构 borderPulse 动画 ───
   原动画修改 border-color 会触发重绘。
   移除动画，改由额外 outline 伪层做 opacity 呼吸（仅合成层）。 */
ai .ap {
  animation: none !important;
  border-color: rgba(212,168,67,0.28) !important;
}

ai .ap {
  position: relative;
}

ai .ap::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(212,168,67,0.5);
  border-radius: var(--radius);
  pointer-events: none;
  opacity: 0;
  animation: apBorderGlow 4s ease-in-out infinite;
  will-change: opacity;
  z-index: 0;
}

@keyframes apBorderGlow {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* ─── 修复⑥：优化 dangerPulse / dotBlink 合成 ───
   opacity 动画本身廉价，但需要独立图层才能完全脱离主线程。 */
ai q.r > d,
ai q.r > d::after {
  will-change: opacity;
}

/* ─── 修复⑦：优化条形闪光动画 ───
   ::after 使用 left 属性动画会触发重排，改为 transform 平移。
   保持视觉相同但性能显著提升。 */
ai .fl::after {
  left: 0 !important;
  transform: translateX(-100%);
  animation: barShineFast 3s ease-in-out infinite !important;
}

@keyframes barShineFast {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(200%); }
  100% { transform: translateX(200%); }
}

/* ─── 修复⑧：移动端 backdrop-filter 降级 ───
   blur 半径与性能成正比，移动端降低半径。
   视觉差异极小但性能提升显著。 */
@media (max-width: 768px) {
  header.flex.justify-between {
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }

  /* 移动端延长环境光漂移周期（降低每秒帧计算次数）*/
  ai::before {
    animation-duration: 60s !important;
  }

  /* 移动端延长魔法阵旋转周期 */
  ai > details:nth-of-type(4) > pan::before {
    animation-duration: 40s !important;
  }

  /* 移动端移除 hover translateY（触屏 hover 不稳定且触发重排）*/
  ai d.ab:hover {
    transform: translateZ(0) !important;
  }

  ai .tp:hover {
    transform: translateZ(0) !important;
  }
}

/* ─── 修复⑨：小屏进一步降级 ─── */
@media (max-width: 480px) {
  /* 移除进度条流光扫过（小屏几乎不可见但仍在计算）*/
  ai .fl::after {
    display: none !important;
  }

  /* 移除装饰性魔法阵旋转（保留静态图案）*/
  ai > details:nth-of-type(4) > pan::before {
    animation: none !important;
  }
}

/* ─── 修复⑩：尊重系统"减少动画"偏好 ─── */
@media (prefers-reduced-motion: reduce) {
  ai::before,
  ai > details:nth-of-type(4) > pan::before,
  ai .fl::after,
  ai .ap::after,
  ai q.r > d,
  ai q.r > d::after,
  ai .flex.items-center.justify-center.size-6::after {
    animation: none !important;
  }
}

/* ─── 修复⑪：减少 details 展开的合成压力 ───
   为 fadeSlideIn 动画元素提前提升合成层，
   避免展开瞬间创建新层导致的短暂卡顿。 */
ai pan,
ai .cot,
ai .mm,
ai .kn {
  will-change: transform, opacity;
}

/* 动画完成后释放 will-change（否则会持续占用 GPU 内存）*/
ai details:not([open]) pan,
ai details:not([open]) .cot,
ai details:not([open]) .mm,
ai details:not([open]) .kn {
  will-change: auto;
}