/* =========================================
   五彩斑斓的世界 v2 - 独立角色容器版
   ========================================= */

/* ========== 隐藏标签 ========== */
hd, qz, jt, cot, cot-ca, cot-na, cot-tj {
  display: none !important;
}

/* ========== 空行兜底 ========== */
p:empty, br + br { 
  display: none !important; 
}

/* ========== 清除折叠箭头 ========== */
details summary::-webkit-details-marker {
  display: none;
}

details summary::marker {
  content: '';
  display: none;
}

details summary {
  list-style: none;
}

/* ========== 顶部状态栏 ========== */
stp {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(220, 240, 255, 0.6), rgba(200, 255, 230, 0.5), rgba(230, 220, 255, 0.55));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(120, 200, 220, 0.4);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(130, 220, 200, 0.25), inset 0 0 0 1px rgba(220, 240, 255, 0.5);
  position: relative;
}

stp::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  border: 1px dashed rgba(127, 255, 212, 0.45);
  pointer-events: none;
  animation: lace-breathe 4s ease-in-out infinite;
}

sti {
  display: block;
  flex: 1 1 auto;
  min-width: 120px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(240, 252, 255, 0.7), rgba(220, 250, 240, 0.6));
  border: 1px solid rgba(130, 200, 200, 0.35);
  border-radius: 8px;
  font-size: 14px;
  color: #3a6a8a;
  text-align: center;
  font-weight: 500;
  transition: all 0.2s;
}

sti:hover {
  background: linear-gradient(135deg, rgba(250, 255, 255, 0.85), rgba(230, 255, 245, 0.8));
  border-color: rgba(127, 255, 212, 0.6);
  box-shadow: 0 2px 8px rgba(127, 255, 212, 0.4);
  transform: translateY(-1px);
}

/* ========== 正文 ========== */
tx {
  display: block;
  background: linear-gradient(135deg, rgba(235, 252, 255, 0.78), rgba(220, 250, 240, 0.7), rgba(235, 225, 255, 0.72));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 24px 22px;
  border-radius: 18px;
  margin-bottom: 14px;
  border: 1px solid rgba(130, 200, 220, 0.4);
  box-shadow: 0 8px 32px rgba(130, 220, 210, 0.22), inset 0 0 0 1px rgba(235, 252, 255, 0.5);
  position: relative;
  overflow: hidden;
}

tx::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 255, 212, 0.35) 0%, transparent 70%);
  animation: cleanGlow 7s ease-in-out infinite;
  pointer-events: none;
  filter: blur(22px);
}

tx::after {
  content: "";
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.3) 0%, transparent 70%);
  animation: cleanGlow 8s ease-in-out infinite reverse;
  pointer-events: none;
  filter: blur(22px);
}

@keyframes cleanGlow {
  0%, 100% {
    transform: scale(1) translate(0, 0);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.25) translate(15px, 15px);
    opacity: 0.85;
  }
}

tx p {
  margin-bottom: 14px;
  text-indent: 2em;
  line-height: 1.95;
  font-size: 15px;
  color: #2d4a6a;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  position: relative;
  z-index: 1;
  letter-spacing: 0.3px;
}

tx p:first-child::first-letter {
  font-size: 2.4em;
  font-weight: bold;
  float: left;
  line-height: 1;
  margin: 4px 8px 0 0;
  background: linear-gradient(135deg, #56ccf2 0%, #2f80ed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

tx p:last-child {
  margin-bottom: 0;
}

/* ========== 阿卡夏纪录 ========== */
details.akasha.theme-clean {
  background: linear-gradient(135deg, rgba(127, 220, 200, 0.5) 0%, rgba(100, 200, 220, 0.4) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  padding: 6px;
  margin-bottom: 14px;
  border: 1px solid rgba(127, 220, 200, 0.4);
  box-shadow: 0 8px 32px rgba(127, 220, 200, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

details.akasha.theme-clean summary {
  background: rgba(240, 252, 255, 0.5);
  color: #2a6a8a;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
  letter-spacing: 2px;
  transition: all 0.4s ease;
  user-select: none;
}

details.akasha.theme-clean summary:hover {
  background: rgba(250, 255, 255, 0.7);
  transform: translateY(-2px);
}

details.akasha.theme-clean[open] summary {
  border-radius: 12px 12px 0 0;
  margin-bottom: 8px;
}

/* 子折叠区 */
details.ai {
  margin: 10px;
  background: rgba(245, 253, 255, 0.9);
  border: 1px solid rgba(130, 200, 210, 0.3);
  border-radius: 8px;
  max-height: 250px;
  overflow-y: auto;
}

details.ai::-webkit-scrollbar { 
  width: 6px; 
}

details.ai::-webkit-scrollbar-track { 
  background: transparent; 
}

details.ai::-webkit-scrollbar-thumb { 
  background: rgba(127, 220, 200, 0.4); 
  border-radius: 3px; 
}

details.ai > summary {
  padding: 8px 12px;
  font-size: 13px;
  color: #3a6a8a;
  cursor: pointer;
  list-style: none;
  background: rgba(240, 252, 255, 0.6);
  position: sticky;
  top: 0;
  z-index: 2;
  font-weight: 600;
}

details.ai > summary::before {
  content: '› ';
  color: #56ccf2;
  margin-right: 6px;
}

details.ai p {
  margin: 8px 12px;
  font-size: 12px;
  color: #3a6a8a;
}

/* 表格样式 */
details.akasha.theme-clean table {
  display: table !important;
  width: 100%;
  table-layout: auto;
  background: rgba(245, 253, 255, 0.9);
  border-radius: 12px;
  margin: 8px 0;
  overflow: hidden;
  border: 1px solid rgba(130, 200, 210, 0.3);
  border-collapse: separate;
  border-spacing: 0;
}

details.akasha.theme-clean th {
  background: linear-gradient(135deg, rgba(127, 220, 200, 0.9) 0%, rgba(100, 200, 220, 0.85) 100%);
  color: #fff;
  padding: 10px 8px;
  font-size: 13px;
  text-align: center;
  font-weight: bold;
}

details.akasha.theme-clean td {
  padding: 9px 8px;
  font-size: 13px;
  color: #3a6a8a;
  border-bottom: 1px solid rgba(130, 200, 210, 0.15);
  text-align: center;
}

details.akasha.theme-clean tr:last-child td {
  border-bottom: none;
}

/* ========== 用户状态卡 ========== */
details.usr-fold {
  border-radius: 16px;
  padding: 6px;
  margin-bottom: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(130, 200, 220, 0.4);
  background: linear-gradient(135deg, rgba(220, 235, 255, 0.5), rgba(200, 230, 250, 0.45));
  box-shadow: 0 8px 32px rgba(130, 220, 210, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

details.usr-fold summary {
  background: rgba(240, 252, 255, 0.5);
  color: #2a6a8a;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: bold;
  font-size: 15px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
  transition: all 0.4s ease;
  user-select: none;
}

details.usr-fold summary:hover {
  background: rgba(250, 255, 255, 0.7);
  transform: translateY(-2px);
}

details.usr-fold[open] summary {
  border-radius: 12px 12px 0 0;
  margin-bottom: 8px;
}

usr {
  display: block;
  background: rgba(245, 253, 255, 0.88);
  border-radius: 12px;
  padding: 18px;
  border: 1px solid rgba(130, 200, 210, 0.3);
}

ub {
  display: block;
}

/* ========== 网格布局 ========== */
g3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

g1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

gi {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #3a6a8a;
  line-height: 1.7;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, rgba(240, 252, 255, 0.7), rgba(230, 250, 245, 0.7));
  border: 1px solid rgba(130, 200, 210, 0.3);
}

gi:hover {
  background: linear-gradient(135deg, rgba(250, 255, 255, 0.85), rgba(235, 255, 250, 0.8));
  border-color: rgba(127, 255, 212, 0.5);
  box-shadow: 0 2px 6px rgba(127, 255, 212, 0.3);
  transform: translateX(2px);
}

/* 身体细节区域 */
cpb {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}

cpb gi {
  background: linear-gradient(135deg, rgba(235, 252, 255, 0.6), rgba(225, 250, 245, 0.6));
  border: 1px solid rgba(130, 200, 210, 0.35);
}

cpb gi:hover {
  background: linear-gradient(135deg, rgba(245, 255, 255, 0.85), rgba(235, 255, 250, 0.8));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(127, 220, 200, 0.3);
}

/* ========== 角色通用元素 ========== */

/* 头像框 */
av {
  display: block;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.3s ease;
  position: relative;
}

av:hover {
  transform: scale(1.06) rotate(-3deg);
}

/* 角色名 */
ch {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
}

ch1 {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: #fff;
}

/* 衣服图片容器（通用） */
char-pic {
  display: block;
  width: 100%;
  aspect-ratio: 1051 / 788;
  margin-bottom: 12px;
  border-radius: 10px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}

char-pic:hover {
  transform: scale(1.02);
}

/* 角色信息区 */
cb {
  display: block;
  margin-bottom: 12px;
}

/* 种族标签 */
rc {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

/* 进度条 */
brg { 
  display: block; 
  margin-top: 8px; 
}

sg { 
  display: grid; 
  grid-template-columns: 70px 1fr; 
  align-items: center; 
  gap: 8px; 
}

sl { 
  font-size: 11px; 
  font-weight: 600; 
}

bt {
  display: block; 
  height: 8px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(130, 200, 210, 0.4);
  border-radius: 4px; 
  overflow: hidden;
}

bv { 
  display: block; 
  height: 100%; 
  border-radius: 4px; 
}

bv.l { 
  background: linear-gradient(90deg, #56ccf2, #2f80ed); 
}

/* ========== 通用发言气泡 ========== */
say {
  display: inline-block;
  margin: 6px 0;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(240, 252, 255, 0.9), rgba(230, 250, 245, 0.85));
  border: 1px solid rgba(127, 220, 200, 0.45);
  border-radius: 16px 16px 16px 4px;
  font-size: 14px;
  line-height: 1.6;
  color: #3a6a8a;
  box-shadow: 0 3px 10px rgba(127, 220, 200, 0.25);
  max-width: 88%;
}

/* ========== 选项 ========== */
opts.theme-clean {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
}

slo {
  display: block;
  padding: 14px 16px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.4);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, rgba(127, 220, 200, 0.88) 0%, rgba(100, 200, 180, 0.88) 100%);
  box-shadow: 0 4px 16px rgba(127, 220, 200, 0.35);
}

slo:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 6px 20px rgba(127, 220, 200, 0.5);
}

slo::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

slo:hover::before {
  left: 100%;
}

/* ========== 路人NPC · znm(男) / znf(女) ========== */
znm, znf {
  display: block;
  margin-bottom: 14px;
}

/* 男性NPC · 冷蓝灰 */
znm {
  --mc: #6b7a99;
  --mc-soft: #b8c4d6;
  --mc-deep: #3d4a66;
  --mc-bg: rgba(220, 228, 240, 0.45);
  --mc-border: rgba(107, 122, 153, 0.45);
}

/* 女性NPC · 暖紫 */
znf {
  --mc: #b07ac9;
  --mc-soft: #d8b8e6;
  --mc-deep: #6b3d85;
  --mc-bg: rgba(235, 220, 245, 0.45);
  --mc-border: rgba(176, 122, 201, 0.45);
}

znm say {
  color: var(--mc-deep);
  background: linear-gradient(135deg, rgba(235, 242, 250, 0.9), rgba(225, 235, 245, 0.85));
  border-color: var(--mc-border);
  box-shadow: 0 3px 10px rgba(107, 122, 153, 0.2);
}

znf say {
  color: var(--mc-deep);
  background: linear-gradient(135deg, rgba(245, 235, 252, 0.9), rgba(235, 225, 245, 0.85));
  border-color: var(--mc-border);
  box-shadow: 0 3px 10px rgba(176, 122, 201, 0.2);
}

/* ========== 动画 ========== */
@keyframes lace-breathe {
  0%, 100% {
    border-color: rgba(127, 255, 212, 0.35);
  }
  50% {
    border-color: rgba(167, 139, 250, 0.55);
  }
}

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

/* ========== 移动端适配 ========== */
@media (max-width: 768px) {
  g3 {
    grid-template-columns: 1fr;
  }
  cpb {
    grid-template-columns: 1fr;
  }
  opts.theme-clean {
    grid-template-columns: 1fr;
  }
  stp {
    flex-direction: column;
  }
  sti {
    min-width: 100%;
  }
}

/* ========== 聊天框主体（粉金透感 → 清新蓝绿） ========== */
.bg-gray-100\/90.relative.inline-block {
  background: linear-gradient(135deg,
    rgba(235, 252, 255, 0.75),
    rgba(220, 250, 240, 0.65)) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(127, 220, 200, 0.4) !important;
  border-radius: 16px !important;
  box-shadow:
    0 6px 22px rgba(130, 220, 210, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  isolation: isolate !important;
  position: relative !important;
}

.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
  background: linear-gradient(135deg,
    rgba(245, 255, 255, 0.85),
    rgba(230, 255, 250, 0.7)) !important;
  border-color: rgba(127, 220, 200, 0.45) !important;
}

/* 正文：浅色背景 → 深色文字（保证可读性） */
.markdown-body {
  color: #2d4a6a !important;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif !important;
  line-height: 1.85 !important;
  font-size: 14px !important;
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
}

.markdown-body strong, .markdown-body b {
  color: #3a6a8a !important;
  font-weight: bold !important;
}

/* ========== 顶部色条隐藏 ========== */
[class*="bg-[#F1CBCB]"],
[class*="bg-[#c9e1e9]"] {
  display: none !important;
}

/* ========== 底部按钮 / 模型名 / Token 文字 ========== */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
  color: #3a6a8a !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
  background: rgba(220, 250, 240, 0.6) !important;
  color: #2a6a8a !important;
}

.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
  color: #56ccf2 !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
}

.text-orange-500 {
  color: #56ccf2 !important;
}

/* =========================================
   🌟 星彩莉 · 独立双形态容器 (xc1 / xc2)
   xc1 = 普通(雪+天空) / xc2 = NO78(五彩斑斓)
   ========================================= */

xc1, xc2 { 
  display: block; 
  margin-bottom: 14px; 
}

/* —— 主题变量 —— */
xc1 {
  --mc:        #5eb8d4;
  --mc-soft:   #a8d8ea;
  --mc-deep:   #2a5a6e;
  --mc-cream:  #f0f8ff;
  --mc-bg:     rgba(240, 248, 255, 0.55);
  --mc-border: rgba(94, 184, 212, 0.5);
}

xc2 {
  --mc:        #ff6b9d;
  --mc-soft:   #ffd700;
  --mc-deep:   #4a148c;
  --mc-glitch: #06ffa5;
  --mc-bg:     rgba(255, 255, 255, 0.15);
  --mc-border: rgba(255, 215, 0, 0.7);
}

/* ========== 卡片骨架 ========== */
xc1 > details, xc2 > details {
  display: block; 
  position: relative;
  border-radius: 14px; 
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  border: 1.5px solid var(--mc-border);
  padding: 6px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* xc1 背景 */
xc1 > details {
  background:
    radial-gradient(circle at 20% 30%, rgba(168, 216, 234, 0.4), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(240, 248, 255, 0.5), transparent 50%),
    linear-gradient(180deg, #dbeeff 0%, #f0f8ff 50%, #e8e0f5 100%);
  box-shadow: 0 8px 32px rgba(94, 184, 212, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

xc1 > details[open] { 
  box-shadow: 0 8px 32px rgba(94, 184, 212, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* xc2 背景 */
xc2 > details {
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 107, 157, 0.45), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(6, 255, 165, 0.35), transparent 45%),
    linear-gradient(135deg, #ff0844 0%, #ffb199 14%, #ffd700 28%, #06ffa5 42%, #00d4ff 57%, #9d4edd 71%, #ff0844 85%, #ffb199 100%);
  background-size: 250% 250%;
  box-shadow: 0 8px 32px rgba(255, 215, 0, 0.5), inset 0 0 30px rgba(255, 107, 157, 0.25);
  animation: rainbowFlow 8s ease-in-out infinite;
}

xc2 > details[open] { 
  box-shadow: 0 8px 32px rgba(255, 215, 0, 0.7), inset 0 0 40px rgba(6, 255, 165, 0.35);
}

@keyframes rainbowFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* summary 头部 */
xc1 > details > summary, xc2 > details > summary {
  display: flex; 
  align-items: center; 
  gap: 14px;
  padding: 12px 14px; 
  cursor: pointer; 
  list-style: none; 
  user-select: none;
  border-radius: 12px;
  transition: all 0.4s ease;
}

xc1 > details > summary { 
  background: linear-gradient(135deg, rgba(240, 248, 255, 0.7), rgba(220, 240, 255, 0.6));
}

xc1 > details > summary:hover {
  background: linear-gradient(135deg, rgba(250, 255, 255, 0.85), rgba(240, 255, 250, 0.75));
  transform: translateY(-2px);
}

xc2 > details > summary { 
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.35), rgba(255, 215, 0, 0.3), rgba(6, 255, 165, 0.3));
}

xc2 > details > summary:hover {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.5), rgba(255, 215, 0, 0.45), rgba(6, 255, 165, 0.45));
  transform: translateY(-2px);
}

xc1 > details > summary::-webkit-details-marker, 
xc2 > details > summary::-webkit-details-marker { 
  display: none; 
}

xc1 > details > summary::marker, 
xc2 > details > summary::marker { 
  content: ''; 
  display: none; 
}

xc1 > details[open] > summary,
xc2 > details[open] > summary {
  border-radius: 12px 12px 0 0;
  margin-bottom: 8px;
}

/* summary内部网格布局 */
xc1 > details > summary ch-head,
xc2 > details > summary ch-head {
  display: grid !important; 
  grid-template-columns: 64px 1fr; 
  grid-template-rows: 1fr;
  column-gap: 16px; 
  width: 100%; 
  align-items: center; 
  margin: 0; 
  padding: 0; 
  border: none;
}

xc1 > details > summary ch-head > av,
xc2 > details > summary ch-head > av { 
  grid-column: 1; 
  grid-row: 1; 
  align-self: center; 
}

xc1 > details > summary ch-head > ch-info,
xc2 > details > summary ch-head > ch-info {
  grid-column: 2; 
  grid-row: 1; 
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 状态卡头像小框 */
xc1 av, xc2 av {
  display: block; 
  width: 64px; 
  height: 64px; 
  flex-shrink: 0; 
  border-radius: 50%;
  overflow: hidden; 
  transition: transform 0.3s ease;
  box-shadow: 0 0 0 3px rgba(200, 240, 255, 0.4), 0 4px 10px rgba(94, 184, 212, 0.35);
}

xc1 av {
  border: 2px solid var(--mc); 
  background-color: var(--mc-cream);
}

xc2 av {
  border: 2px solid #ffd700; 
  background-color: #fff5f9;
  box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.55), 0 0 22px rgba(255, 215, 0, 0.8), 0 4px 14px rgba(74, 20, 140, 0.4);
  animation: rainbowGlow 3s ease-in-out infinite;
}

@keyframes rainbowGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.55), 0 0 22px rgba(255, 215, 0, 0.8), 0 4px 14px rgba(74, 20, 140, 0.4); }
  50% { box-shadow: 0 0 0 3px rgba(6, 255, 165, 0.65), 0 0 28px rgba(255, 107, 157, 0.9), 0 4px 16px rgba(74, 20, 140, 0.5); }
}

xc1 av:hover, xc2 av:hover { 
  transform: scale(1.06) rotate(-3deg); 
}

/* 角色名 */
xc1 ch, xc2 ch {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  background: linear-gradient(135deg, #56ccf2 0%, #2f80ed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

xc2 ch {
  background: linear-gradient(90deg, #ff0844, #ffd700, #06ffa5, #00d4ff, #9d4edd, #ff0844);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbowText 4s linear infinite;
}

@keyframes rainbowText {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* 称号 */
xc1 ch1, xc2 ch1 {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: #fff;
  background: linear-gradient(135deg, #56ccf2 0%, #2f80ed 100%);
  box-shadow: 0 2px 8px rgba(47, 128, 237, 0.3);
}

xc2 ch1 {
  background: linear-gradient(90deg, #ff6b9d, #ffd700, #06ffa5);
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.5);
}

/* cdm展开主体 */
xc1 cdm, xc2 cdm {
  display: block; 
  padding: 16px; 
  backdrop-filter: blur(10px); 
  animation: cdmFadeIn 0.2s ease-out; 
  border: 1px solid var(--mc-border);
  border-radius: 12px;
}

xc1 cdm { 
  background: rgba(245, 253, 255, 0.88);
}

xc2 cdm { 
  background: rgba(255, 255, 255, 0.35);
}

/* 内部通用元素配色 */
xc1 rc, xc2 rc {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mc-deep);
}

xc1 rc {
  background: rgba(240, 248, 255, 0.7);
  border: 1px solid var(--mc-border);
}

xc2 rc {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--mc-border);
}

xc1 gi, xc2 gi { 
  color: var(--mc-deep); 
  border-color: var(--mc-border); 
}

xc1 gi { 
  background: linear-gradient(135deg, rgba(240, 252, 255, 0.7), rgba(230, 250, 245, 0.7));
}

xc2 gi { 
  background: rgba(255, 255, 255, 0.45);
}

xc1 sl { 
  color: var(--mc); 
}

xc2 sl { 
  color: #fff; 
  text-shadow: 0 0 8px var(--mc-soft); 
}

xc1 bv.l { 
  background: linear-gradient(90deg, var(--mc-soft), var(--mc)); 
}

xc2 bv.l { 
  background: linear-gradient(90deg, #ff0844, #ffd700, #06ffa5, #00d4ff, #9d4edd); 
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.7); 
}

/* 发言气泡 */
xc1 say, xc2 say {
  display: inline-block; 
  margin: 6px 0; 
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px; 
  font-size: 14px; 
  line-height: 1.6; 
  max-width: 88%;
}

xc1 say {
  background: linear-gradient(135deg, rgba(240, 248, 255, 0.9), rgba(230, 250, 245, 0.85));
  border: 1px solid var(--mc-border); 
  color: var(--mc-deep); 
  box-shadow: 0 3px 10px rgba(94, 184, 212, 0.25);
}

xc2 say {
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,240,250,0.88));
  border: 1.5px solid rgba(255, 215, 0, 0.65); 
  color: var(--mc-deep);
  box-shadow: 0 3px 14px rgba(255, 215, 0, 0.5); 
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

/* =========================================
   🎭 星彩莉 · 独立表情系统 (of1-of24, of78)
   ========================================= */
of1, of2, of3, of4, of5, of6, of7, of8, of9, of10,
of11, of12, of13, of14, of15, of16, of17, of18, of19, of20,
of21, of22, of23, of24, of78 {
  display: block; 
  width: 112px; 
  height: 112px;
  border-radius: 50%; 
  background-size: cover; 
  background-position: center top; 
  background-repeat: no-repeat;
  margin: 10px 0 6px;
}

/* xc1 (普通态) 表情边框 */
of1, of2, of3, of4, of5, of6, of7, of8, of9, of10,
of11, of12, of13, of14, of15, of16, of17, of18, of19, of20,
of21, of22, of23, of24 {
  border: 2px solid #5eb8d4; 
  background-color: #f0f8ff; 
  box-shadow: 0 4px 14px rgba(94, 184, 212, 0.4);
}

/* xc2 (NO78态) 表情边框 */
of78 {
  border: 2px solid #ffd700; 
  background-color: #fff5f9; 
  box-shadow: 0 0 22px #ffd700, 0 4px 14px rgba(255, 107, 157, 0.5);
}

/* 进 av 自动缩小 */
av > of1, av > of2, av > of3, av > of4, av > of5, av > of6, av > of7, av > of8, av > of9, av > of10,
av > of11, av > of12, av > of13, av > of14, av > of15, av > of16, av > of17, av > of18, av > of19, av > of20,
av > of21, av > of22, av > of23, av > of24, av > of78 {
  width: 100%; 
  height: 100%; 
  border: none; 
  margin: 0; 
  box-shadow: none; 
  border-radius: 0;
}

/* 表情图片链接 */
of1  { background-image: url('https://image.acg.lol/file/2026/08/09/-0f3caca725dadf1b.png'); } 
of2  { background-image: url('https://image.acg.lol/file/2026/08/09/-ba04c18716c9d730.png'); } 
of3  { background-image: url('https://image.acg.lol/file/2026/08/09/-d591319956ec7f5b.png'); } 
of4  { background-image: url('https://image.acg.lol/file/2026/08/09/-496cd14e610b9987.png'); } 
of5  { background-image: url('https://image.acg.lol/file/2026/08/09/-45211010834c94b4.png'); } 
of6  { background-image: url('https://image.acg.lol/file/2026/08/09/-c47f1f17449316b5.png'); } 
of7  { background-image: url('https://image.acg.lol/file/2026/08/09/-f1d50adce96afa53.png'); } 
of8  { background-image: url('https://image.acg.lol/file/2026/08/09/-af5b9c3fab1d9060.png'); } 
of9  { background-image: url('https://image.acg.lol/file/2026/08/09/-56888cf35062c6b4.png'); } 
of10 { background-image: url('https://image.acg.lol/file/2026/08/09/-c5eae68d90c357a3.png'); } 
of11 { background-image: url('https://image.acg.lol/file/2026/08/09/-9e4ed030429b0879.png'); } 
of12 { background-image: url('https://image.acg.lol/file/2026/08/09/-2baddf6e3c1e1ab6.png'); } 
of13 { background-image: url('https://image.acg.lol/file/2026/08/09/-ba6f3a10eabf254f.png'); } 
of14 { background-image: url('https://image.acg.lol/file/2026/08/09/-7eccc0b31289ba82.png'); } 
of15 { background-image: url('https://image.acg.lol/file/2026/08/09/-d5ae5b28739d80b5.png'); } 
of16 { background-image: url('https://image.acg.lol/file/2026/08/09/-6de6004bf15fb253.png'); } 
of17 { background-image: url('https://image.acg.lol/file/2026/08/09/-78c4479a5b799c9f.png'); } 
of18 { background-image: url('https://image.acg.lol/file/2026/08/09/-7f4e55fe344b2ec4.png'); } 
of19 { background-image: url('https://image.acg.lol/file/2026/08/09/-e63e37b5be6e5e64.png'); } 
of20 { background-image: url('https://image.acg.lol/file/2026/08/09/-ff8b5ddc44c0f4f8.png'); } 
of21 { background-image: url('https://image.acg.lol/file/2026/08/09/-5b7af483ce661a00.png'); } 
of22 { background-image: url('https://image.acg.lol/file/2026/08/09/-7781a52069e16cbf.png'); } 
of23 { background-image: url('https://image.acg.lol/file/2026/08/09/-7187b5e808ba0cf7.png'); } 
of24 { background-image: url('https://image.acg.lol/file/2026/08/09/-d616762479705575.png'); } 
of78 { background-image: url('https://image.acg.lol/file/2026/08/09/NO78-.png'); }

/* ========== 星彩莉 · 衣服/立绘系统 (oi1-oi18, oi78) ========== */
oi1, oi2, oi3, oi4, oi5, oi6, oi7, oi8, oi9, oi10,
oi11, oi12, oi13, oi14, oi15, oi16, oi17, oi18, oi78 {
  display: block; 
  width: 100%; 
  aspect-ratio: 1051 / 788;
  margin-bottom: 12px; 
  border-radius: 10px; 
  background-size: cover; 
  background-position: center center;
  background-repeat: no-repeat; 
  transition: transform 0.3s ease;
  box-shadow: 0 3px 12px rgba(94, 184, 212, 0.2), inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}

/* xc1 衣服边框 */
oi1, oi2, oi3, oi4, oi5, oi6, oi7, oi8, oi9, oi10, oi11, oi12, oi13, oi14, oi15, oi16, oi17, oi18 {
  border: 1px solid rgba(94, 184, 212, 0.5);
}

/* xc2 衣服边框 */
oi78 {
  border: 1px solid rgba(255, 215, 0, 0.7); 
  box-shadow: 0 3px 16px rgba(255, 215, 0, 0.55), inset 0 0 0 2px rgba(255, 107, 157, 0.25);
}

oi1:hover, oi2:hover, oi3:hover, oi4:hover, oi5:hover, oi6:hover, oi7:hover, oi8:hover, oi9:hover, oi10:hover,
oi11:hover, oi12:hover, oi13:hover, oi14:hover, oi15:hover, oi16:hover, oi17:hover, oi18:hover, oi78:hover { 
  transform: scale(1.02); 
}

oi1  { background-image: url('https://image.acg.lol/file/2026/08/09/-1e38b8a741080c76.png'); } 
oi2  { background-image: url('https://image.acg.lol/file/2026/08/09/-27a02d86c477fcc8.png'); } 
oi3  { background-image: url('https://image.acg.lol/file/2026/08/09/-b9e26dc76fe8ca3a.png'); } 
oi4  { background-image: url('https://image.acg.lol/file/2026/08/09/-2b5e5dd94e6e08fa.png'); } 
oi5  { background-image: url('https://image.acg.lol/file/2026/08/09/-ac0d6dc28d9f23d7.png'); } 
oi6  { background-image: url('https://image.acg.lol/file/2026/08/09/-2df091d5505e00d9.png'); } 
oi7  { background-image: url('https://image.acg.lol/file/2026/08/09/-1cd5d6eafd3185af.png'); } 
oi8  { background-image: url('https://image.acg.lol/file/2026/08/09/-2d7276b787f1e01b.png'); } 
oi9  { background-image: url('https://image.acg.lol/file/2026/08/09/-44d2d1a29c843f4c.png'); } 
oi10 { background-image: url('https://image.acg.lol/file/2026/08/09/-b484fe87d43df79b.png'); } 
oi11 { background-image: url('https://image.acg.lol/file/2026/08/09/-a25ed09a0b70d133.png'); } 
oi12 { background-image: url('https://image.acg.lol/file/2026/08/09/-d856198b206dc103.png'); } 
oi13 { background-image: url('https://image.acg.lol/file/2026/08/09/-308a2a1f0e0e6b2c.png'); } 
oi14 { background-image: url('https://image.acg.lol/file/2026/08/09/-898f5d1b50c11b8b.png'); } 
oi15 { background-image: url('https://image.acg.lol/file/2026/08/09/-1b7d563c62ad7ecb.png'); } 
oi16 { background-image: url('https://image.acg.lol/file/2026/08/09/-73b86771f5d526b9.png'); } 
oi17 { background-image: url('https://image.acg.lol/file/2026/08/09/-b1489aa05ac170a8.png'); } 
oi18 { background-image: url('https://image.acg.lol/file/2026/08/09/-4d50c71d49855ec2.png'); } 
oi78 { background-image: url('https://image.acg.lol/file/2026/08/09/NO78-0dcaf89aab35b07f.png'); }

/* =========================================
   🌈 满樱彩容器 my
   主题:彩虹+极光(单形态)
   ========================================= */

my {
  display: block; 
  margin-bottom: 14px;
  --mc:        #8b5cf6;
  --mc-soft:   #a78bfa;
  --mc-deep:   #2d1b4e;
  --mc-cream:  #f5f0ff;
  --mc-aurora1: #8ec5fc;
  --mc-aurora2: #a1ffce;
  --mc-aurora3: #e0c3fc;
  --mc-rainbow1: #ff6b9d;
  --mc-rainbow2: #ffd700;
  --mc-rainbow3: #06ffa5;
  --mc-rainbow4: #00d4ff;
  --mc-border: rgba(139, 92, 246, 0.55);
}

/* ========== 独立骨架 ========== */
my > details {
  display: block; 
  position: relative;
  border-radius: 14px; 
  overflow: hidden;
  transition: box-shadow 0.35s ease;
  background:
    radial-gradient(circle at 15% 20%, rgba(142, 197, 252, 0.5), transparent 45%),
    radial-gradient(circle at 85% 25%, rgba(224, 195, 252, 0.55), transparent 45%),
    radial-gradient(circle at 50% 85%, rgba(161, 255, 206, 0.45), transparent 50%),
    radial-gradient(circle at 20% 70%, rgba(255, 107, 157, 0.3), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(255, 215, 0, 0.25), transparent 40%),
    linear-gradient(135deg, #e8dcff 0%, #d6ebff 30%, #dcffe4 55%, #ffd6f5 80%, #e8dcff 100%);
  background-size: 220% 220%;
  border: 1.5px solid var(--mc-border);
  padding: 6px;
  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.28),
              inset 0 0 30px rgba(255, 255, 255, 0.2);
  animation: auroraFlow 10s ease-in-out infinite;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

my > details[open] { 
  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.42), inset 0 0 40px rgba(255, 255, 255, 0.28); 
}

@keyframes auroraFlow {
  0%, 100% { background-position: 0% 50%; filter: hue-rotate(0deg); }
  25% { background-position: 50% 30%; filter: hue-rotate(15deg); }
  50% { background-position: 100% 50%; filter: hue-rotate(0deg); }
  75% { background-position: 50% 70%; filter: hue-rotate(-15deg); }
}

/* summary头部 */
my > details > summary {
  display: flex; 
  align-items: center; 
  gap: 14px;
  padding: 12px 14px; 
  cursor: pointer; 
  list-style: none; 
  user-select: none;
  background: linear-gradient(135deg, rgba(245, 240, 255, 0.75), rgba(220, 240, 255, 0.65), rgba(255, 220, 245, 0.6));
  border-radius: 12px;
  transition: all 0.4s ease;
}

my > details > summary:hover {
  background: linear-gradient(135deg, rgba(250, 245, 255, 0.85), rgba(230, 245, 255, 0.75), rgba(255, 230, 250, 0.7));
  transform: translateY(-2px);
}

my > details > summary::-webkit-details-marker { 
  display: none; 
}

my > details > summary::marker { 
  content: ''; 
  display: none; 
}

my > details[open] > summary {
  border-radius: 12px 12px 0 0;
  margin-bottom: 8px;
}

/* summary内部网格布局 */
my > details > summary ch-head {
  display: grid !important; 
  grid-template-columns: 64px 1fr; 
  grid-template-rows: 1fr;
  column-gap: 16px; 
  width: 100%; 
  align-items: center; 
  margin: 0; 
  padding: 0; 
  border: none;
}

my > details > summary ch-head > av { 
  grid-column: 1; 
  grid-row: 1; 
  align-self: center; 
}

my > details > summary ch-head > ch-info {
  grid-column: 2; 
  grid-row: 1; 
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 头像框 */
my av {
  display: block; 
  width: 64px; 
  height: 64px; 
  flex-shrink: 0; 
  border-radius: 50%; 
  overflow: hidden; 
  transition: transform 0.3s ease;
  border: 2px solid var(--mc); 
  background-color: var(--mc-cream);
  box-shadow: 0 0 0 3px rgba(224, 195, 252, 0.55), 0 0 18px rgba(142, 197, 252, 0.6), 0 4px 12px rgba(139, 92, 246, 0.4);
  animation: auroraGlow 4s ease-in-out infinite;
}

my av:hover { 
  transform: scale(1.06) rotate(-3deg); 
}

@keyframes auroraGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(224, 195, 252, 0.55), 0 0 18px rgba(142, 197, 252, 0.6), 0 4px 12px rgba(139, 92, 246, 0.4); }
  50% { box-shadow: 0 0 0 3px rgba(161, 255, 206, 0.65), 0 0 24px rgba(255, 107, 157, 0.7), 0 4px 14px rgba(139, 92, 246, 0.5); }
}

/* 角色名 */
my ch {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  background: linear-gradient(90deg, #ff6b9d, #ffd700, #06ffa5, #00d4ff, #8b5cf6, #ff6b9d); 
  background-size: 200% auto;
  background-clip: text; 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  animation: rainbowText 4s linear infinite;
}

@keyframes rainbowText {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* 称号 */
my ch1 {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: #fff;
  background: linear-gradient(90deg, var(--mc-aurora1), var(--mc-aurora3), var(--mc-rainbow1));
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

/* cdm展开主体 */
my cdm {
  display: block; 
  padding: 16px; 
  backdrop-filter: blur(10px); 
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid var(--mc-border);
  border-radius: 12px;
  animation: cdmFadeIn 0.2s ease-out;
}

/* 内部通用元素配色 */
my rc {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mc-deep);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--mc-border);
}

my gi { 
  color: var(--mc-deep); 
  border-color: var(--mc-border); 
  background: rgba(255, 255, 255, 0.5);
}

my sl { 
  color: var(--mc); 
}

my bv.l { 
  background: linear-gradient(90deg, var(--mc-aurora1), var(--mc-aurora3), var(--mc-rainbow1)); 
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.5); 
}

/* ========== 发言气泡 sc (满樱彩专用) ========== */
my sc {
  display: inline-block; 
  margin: 6px 0; 
  padding: 10px 14px; 
  border-radius: 16px 16px 16px 4px; 
  font-size: 14px; 
  line-height: 1.6; 
  max-width: 88%;
  background: linear-gradient(135deg, rgba(245, 240, 255, 0.9) 0%, rgba(220, 240, 255, 0.85) 35%, rgba(220, 255, 235, 0.82) 65%, rgba(255, 220, 240, 0.88) 100%);
  border: 1.5px solid transparent; 
  background-clip: padding-box; 
  color: var(--mc-deep);
  box-shadow: 0 3px 12px rgba(139, 92, 246, 0.28), 0 0 0 1px rgba(139, 92, 246, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  position: relative;
}

my sc::before {
  content: ''; 
  position: absolute; 
  inset: -2px; 
  border-radius: 17px 17px 17px 5px; 
  padding: 2px;
  background: linear-gradient(135deg, #ff6b9d, #ffd700, #06ffa5, #00d4ff, #8b5cf6);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; 
  mask-composite: exclude; 
  opacity: 0.5; 
  pointer-events: none;
}

/* ========== 🎭 满樱彩 · 独立表情系统 cf1-cf15 ========== */
cf1, cf2, cf3, cf4, cf5, cf6, cf7, cf8, cf9, cf10, cf11, cf12, cf13, cf14, cf15 {
  display: block; 
  width: 112px; 
  height: 112px;
  border-radius: 50%; 
  border: 2px solid #8b5cf6; 
  background-color: #f5f0ff; 
  background-size: cover; 
  background-position: center top; 
  background-repeat: no-repeat;
  margin: 10px 0 6px; 
  box-shadow: 0 0 18px rgba(142, 197, 252, 0.7), 0 4px 14px rgba(139, 92, 246, 0.45);
}

/* 进 av 自动缩小 */
av > cf1, av > cf2, av > cf3, av > cf4, av > cf5, av > cf6, av > cf7, av > cf8, av > cf9, av > cf10,
av > cf11, av > cf12, av > cf13, av > cf14, av > cf15 {
  width: 100%; 
  height: 100%; 
  border: none; 
  margin: 0; 
  box-shadow: none; 
  border-radius: 0;
}

cf1  { background-image: url('https://image.acg.lol/file/2026/08/09/c--c672038f66d1f594.png'); } 
cf2  { background-image: url('https://image.acg.lol/file/2026/08/09/c--73e320d6a97b2664.png'); } 
cf3  { background-image: url('https://image.acg.lol/file/2026/08/09/c--9a6e5e77de60e161.png'); } 
cf4  { background-image: url('https://image.acg.lol/file/2026/08/09/c--e4c285aabcd06c6d.png'); } 
cf5  { background-image: url('https://image.acg.lol/file/2026/08/09/c--36d66f86c1f68944.png'); } 
cf6  { background-image: url('https://image.acg.lol/file/2026/08/09/c--ee84347f6e86aefb.png'); } 
cf7  { background-image: url('https://image.acg.lol/file/2026/08/09/c--efa25619f0c7e50c.png'); } 
cf8  { background-image: url('https://image.acg.lol/file/2026/08/09/c--8ad87252ae0ea10c.png'); } 
cf9  { background-image: url('https://image.acg.lol/file/2026/08/09/c--669c412ae59f5914.png'); } 
cf10 { background-image: url('https://image.acg.lol/file/2026/08/09/c--bafacc7fc3a5964f.png'); } 
cf11 { background-image: url('https://image.acg.lol/file/2026/08/09/c--53e1c067d9fd8e10.png'); } 
cf12 { background-image: url('https://image.acg.lol/file/2026/08/09/c--7283b2f9895c2156.png'); } 
cf13 { background-image: url('https://image.acg.lol/file/2026/08/09/c--03285ae63cdd0e89.png'); } 
cf14 { background-image: url('https://image.acg.lol/file/2026/08/09/c--2cf2ef0f09b1c4f5.png'); } 
cf15 { background-image: url('https://image.acg.lol/file/2026/08/09/c--.png'); } 

/* ========== 衣服/立绘系统 ci1-ci18 ========== */
ci1, ci2, ci3, ci4, ci5, ci6, ci7, ci8, ci9, ci10, ci11, ci12, ci13, ci14, ci15, ci16, ci17, ci18 {
  display: block; 
  width: 100%; 
  aspect-ratio: 1051 / 788; 
  margin-bottom: 12px; 
  border-radius: 10px; 
  background-size: cover; 
  background-position: center center;
  background-repeat: no-repeat; 
  transition: transform 0.3s ease; 
  border: 1px solid rgba(139, 92, 246, 0.5);
  box-shadow: 0 3px 14px rgba(139, 92, 246, 0.35), inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}

ci1:hover, ci2:hover, ci3:hover, ci4:hover, ci5:hover, ci6:hover, ci7:hover, ci8:hover, ci9:hover, ci10:hover, 
ci11:hover, ci12:hover, ci13:hover, ci14:hover, ci15:hover, ci16:hover, ci17:hover, ci18:hover { 
  transform: scale(1.02); 
}

ci1  { background-image: url('https://image.acg.lol/file/2026/08/09/c--606abae111ebc196.png'); } 
ci2  { background-image: url('https://image.acg.lol/file/2026/08/09/c--a1fa5cb819abd1ff.png'); } 
ci3  { background-image: url('https://image.acg.lol/file/2026/08/09/c--fad2787d75f51c4d.png'); } 
ci4  { background-image: url('https://image.acg.lol/file/2026/08/09/c--5f93da5b9efc700c.png'); } 
ci5  { background-image: url('https://image.acg.lol/file/2026/08/09/c--6c4115c58aa58e53.png'); } 
ci6  { background-image: url('https://image.acg.lol/file/2026/08/09/c--fbb0b5f31b422682.png'); } 
ci7  { background-image: url('https://image.acg.lol/file/2026/08/09/c--43f81d6d8ed04b77.png'); } 
ci8  { background-image: url('https://image.acg.lol/file/2026/08/09/c--0e72f6868d0e4991.png'); } 
ci9  { background-image: url('https://image.acg.lol/file/2026/08/09/c--892a6ca7934bf55c.png'); } 
ci10 { background-image: url('https://image.acg.lol/file/2026/08/09/c--7efb215ea40e088b.png'); } 
ci11 { background-image: url('https://image.acg.lol/file/2026/08/09/c--1a9782555306c4c0.png'); } 
ci12 { background-image: url('https://image.acg.lol/file/2026/08/09/c--8433c57634e32808.png'); } 
ci13 { background-image: url('https://image.acg.lol/file/2026/08/09/c--14800fc156666129.png'); } 
ci14 { background-image: url('https://image.acg.lol/file/2026/08/09/c--65be42ccd97a4464.png'); } 
ci15 { background-image: url('https://image.acg.lol/file/2026/08/09/c--ff6f0fc30f219fec.png'); } 
ci16 { background-image: url('https://image.acg.lol/file/2026/08/09/c--db8ffdb8301017bf.png'); } 
ci17 { background-image: url('https://image.acg.lol/file/2026/08/09/c--818068b53fe2f196.png'); } 
ci18 { background-image: url('https://image.acg.lol/file/2026/08/09/c--77c0f7a8355635d0.png'); }

/* =========================================
   🌌 奈 / NO77 · 独立双形态容器 (xn1 / xn2)
   xn1 = 普通态(星空主题) / xn2 = NO77态(EX粉紫主题)
   ========================================= */

xn1, xn2 { 
  display: block; 
  margin-bottom: 14px; 
}

/* —— 主题变量 —— */
xn1 {
  --mc:        #ff5fa2;
  --mc-soft:   #ffb3d4;
  --mc-deep:   #ffc9e2;
  --mc-black:  #1a0d1a;
  --mc-bg:     rgba(20, 8, 26, 0.85);
  --mc-border: rgba(255, 95, 162, 0.55);
}

xn2 {
  --mc:        #c44ee8;
  --mc-soft:   #e8a8f5;
  --mc-deep:   #f0c8ff;
  --mc-pink:   #ff6fc8;
  --mc-black:  #0d0518;
  --mc-bg:     rgba(15, 6, 30, 0.88);
  --mc-border: rgba(196, 78, 232, 0.6);
}

/* ========== 卡片骨架 ========== */
xn1 > details, xn2 > details {
  display: block; 
  position: relative;
  border-radius: 14px; 
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  border: 1.5px solid var(--mc-border);
  padding: 6px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* xn1 背景 (星空奈) */
xn1 > details {
  background:
    radial-gradient(2px 2px at 20% 30%, #fff 0%, transparent 50%),
    radial-gradient(1px 1px at 65% 15%, #ffd6e8 0%, transparent 50%),
    radial-gradient(1.5px 1.5px at 80% 60%, #fff 0%, transparent 50%),
    radial-gradient(1px 1px at 35% 75%, #ffb3d4 0%, transparent 50%),
    radial-gradient(2px 2px at 50% 50%, #fff 0%, transparent 50%),
    radial-gradient(1px 1px at 90% 90%, #ffc9e2 0%, transparent 50%),
    linear-gradient(135deg, #1a0d1a 0%, #2d0f2e 50%, #1a0d1a 100%);
  box-shadow: 0 8px 32px rgba(255, 95, 162, 0.35), inset 0 0 30px rgba(255, 95, 162, 0.08);
}

xn1 > details[open] { 
  box-shadow: 0 8px 32px rgba(255, 95, 162, 0.5), inset 0 0 40px rgba(255, 95, 162, 0.12); 
}

/* xn2 背景 (NO77 EX) */
xn2 > details {
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 111, 200, 0.25), transparent 40%),
    radial-gradient(circle at 75% 80%, rgba(196, 78, 232, 0.3), transparent 45%),
    linear-gradient(135deg, #0d0518 0%, #1a0828 50%, #0d0518 100%);
  box-shadow: 0 8px 32px rgba(196, 78, 232, 0.45), inset 0 0 35px rgba(196, 78, 232, 0.12);
}

xn2 > details[open] { 
  box-shadow: 0 8px 32px rgba(196, 78, 232, 0.6), inset 0 0 50px rgba(255, 111, 200, 0.15); 
}

/* summary 头部 */
xn1 > details > summary, xn2 > details > summary {
  display: flex; 
  align-items: center; 
  gap: 14px;
  padding: 12px 14px; 
  cursor: pointer; 
  list-style: none; 
  user-select: none;
  border-radius: 12px;
  transition: all 0.4s ease;
}

xn1 > details > summary { 
  background: linear-gradient(135deg, rgba(45, 15, 46, 0.75), rgba(80, 25, 70, 0.6));
}

xn1 > details > summary:hover {
  background: linear-gradient(135deg, rgba(60, 20, 60, 0.85), rgba(110, 35, 95, 0.7));
  transform: translateY(-2px);
}

xn2 > details > summary { 
  background: linear-gradient(135deg, rgba(40, 12, 60, 0.85), rgba(80, 20, 90, 0.7));
}

xn2 > details > summary:hover {
  background: linear-gradient(135deg, rgba(60, 20, 80, 0.95), rgba(100, 30, 110, 0.8));
  transform: translateY(-2px);
}

xn1 > details > summary::-webkit-details-marker, 
xn2 > details > summary::-webkit-details-marker { 
  display: none; 
}

xn1 > details > summary::marker, 
xn2 > details > summary::marker { 
  content: ''; 
  display: none; 
}

xn1 > details[open] > summary,
xn2 > details[open] > summary {
  border-radius: 12px 12px 0 0;
  margin-bottom: 8px;
}

/* summary内部网格布局 */
xn1 > details > summary ch-head,
xn2 > details > summary ch-head {
  display: grid !important; 
  grid-template-columns: 64px 1fr; 
  grid-template-rows: 1fr;
  column-gap: 16px; 
  width: 100%; 
  align-items: center; 
  margin: 0; 
  padding: 0; 
  border: none;
}

xn1 > details > summary ch-head > av,
xn2 > details > summary ch-head > av { 
  grid-column: 1; 
  grid-row: 1; 
  align-self: center; 
}

xn1 > details > summary ch-head > ch-info,
xn2 > details > summary ch-head > ch-info {
  grid-column: 2; 
  grid-row: 1; 
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 状态卡头像小框 */
xn1 av, xn2 av {
  display: block; 
  width: 64px; 
  height: 64px; 
  flex-shrink: 0; 
  border-radius: 50%;
  overflow: hidden; 
  transition: transform 0.3s ease; 
  border: 2px solid var(--mc); 
  background-color: var(--mc-black);
}

xn1 av { 
  box-shadow: 0 0 0 3px rgba(255, 95, 162, 0.4), 0 0 18px rgba(255, 95, 162, 0.7), 0 4px 12px rgba(0,0,0,0.5); 
}

xn2 av { 
  box-shadow: 0 0 0 3px rgba(255, 111, 200, 0.5), 0 0 20px var(--mc), 0 4px 12px rgba(0,0,0,0.6); 
}

xn1 av:hover, xn2 av:hover { 
  transform: scale(1.06) rotate(-3deg); 
}

/* 角色名 */
xn1 ch, xn2 ch {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: var(--mc-deep);
}

xn1 ch {
  text-shadow: 0 0 8px rgba(255, 95, 162, 0.6);
}

xn2 ch {
  text-shadow: 0 0 10px var(--mc-pink);
}

/* 称号 */
xn1 ch1, xn2 ch1 {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: #fff;
}

xn1 ch1 {
  background: linear-gradient(135deg, var(--mc-soft), var(--mc));
  box-shadow: 0 2px 8px rgba(255, 95, 162, 0.4);
}

xn2 ch1 {
  background: linear-gradient(135deg, var(--mc-pink), var(--mc));
  box-shadow: 0 2px 8px rgba(196, 78, 232, 0.5);
}

/* cdm展开主体 */
xn1 cdm, xn2 cdm { 
  display: block; 
  padding: 16px; 
  backdrop-filter: blur(10px); 
  animation: cdmFadeIn 0.2s ease-out; 
  border: 1px solid var(--mc-border);
  border-radius: 12px;
}

xn1 cdm { 
  background: rgba(20, 8, 26, 0.75); 
}

xn2 cdm { 
  background: rgba(15, 6, 30, 0.78); 
}

/* 内部颜色覆盖 */
xn1 rc, xn2 rc {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mc-deep);
  border: 1px solid var(--mc-border);
}

xn1 rc {
  background: rgba(45, 15, 46, 0.6);
}

xn2 rc {
  background: rgba(40, 12, 60, 0.6);
}

xn1 gi { 
  color: var(--mc-deep); 
  background: rgba(45, 15, 46, 0.6); 
  border-color: var(--mc-border); 
}

xn2 gi { 
  color: var(--mc-deep); 
  background: rgba(40, 12, 60, 0.6); 
  border-color: var(--mc-border); 
}

xn1 sl, xn2 sl { 
  color: var(--mc-soft); 
}

xn1 bv.l { 
  background: linear-gradient(90deg, var(--mc-soft), var(--mc)); 
  box-shadow: 0 0 8px rgba(255, 95, 162, 0.8); 
}

xn2 bv.l { 
  background: linear-gradient(90deg, var(--mc-pink), var(--mc)); 
  box-shadow: 0 0 10px var(--mc); 
}

/* 发言气泡 */
xn1 say, xn2 say {
  display: inline-block; 
  margin: 6px 0; 
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px; 
  font-size: 14px; 
  line-height: 1.6; 
  max-width: 88%;
  color: var(--mc-deep); 
  border: 1px solid var(--mc-border);
}

xn1 say {
  background: linear-gradient(135deg, rgba(45, 15, 46, 0.9), rgba(80, 25, 70, 0.85));
  box-shadow: 0 3px 12px rgba(255, 95, 162, 0.4);
  text-shadow: 0 0 6px rgba(255, 95, 162, 0.4);
}

xn2 say {
  background: linear-gradient(135deg, rgba(40,12,60,0.92), rgba(90,25,110,0.88));
  box-shadow: 0 3px 14px rgba(196, 78, 232, 0.5);
  text-shadow: 0 0 8px rgba(255, 111, 200, 0.5);
}

/* =========================================
   🎭 奈 · 表情系统 nf1-nf4, nf77
   ========================================= */
nf1, nf2, nf3, nf4, nf77 {
  display: block; 
  width: 112px; 
  height: 112px; 
  border-radius: 50%;
  background-size: cover; 
  background-position: center top; 
  background-repeat: no-repeat;
  margin: 10px 0 6px;
}

/* xn1 (普通态) 边框 */
nf1, nf2, nf3, nf4 {
  border: 2px solid #ff5fa2; 
  background-color: #1a0d1a;
  box-shadow: 0 0 18px rgba(255, 95, 162, 0.6), 0 4px 14px rgba(0,0,0,0.4);
}

/* xn2 (NO77态) 边框 */
nf77 {
  border: 2px solid #c44ee8; 
  background-color: #0d0518;
  box-shadow: 0 0 22px rgba(255, 111, 200, 0.7), 0 4px 14px rgba(0,0,0,0.5);
}

/* 进 av 自动缩小 */
av > nf1, av > nf2, av > nf3, av > nf4, av > nf77 {
  width: 100%; 
  height: 100%; 
  border: none; 
  margin: 0; 
  box-shadow: none; 
  border-radius: 0;
}

/* 绑定图片 */
nf1  { background-image: url('https://image.acg.lol/file/2026/08/09/--6ce678cba4a5d01f.png'); }
nf2  { background-image: url('https://image.acg.lol/file/2026/08/09/--d01eaadcef468f66.png'); }
nf3  { background-image: url('https://image.acg.lol/file/2026/08/09/--866d1bacf5841e2e.png'); }
nf4  { background-image: url('https://image.acg.lol/file/2026/08/09/--919f80e4403a554c.png'); }
nf77 { background-image: url('https://image.acg.lol/file/2026/08/09/NO77-.png'); }

/* =========================================
   👗 奈 · 衣服立绘系统 ni1, ni77
   ========================================= */
ni1, ni77 {
  display: block; 
  width: 100%; 
  aspect-ratio: 1051 / 788;
  margin-bottom: 12px; 
  border-radius: 10px; 
  background-size: cover; 
  background-position: center center;
  background-repeat: no-repeat; 
  transition: transform 0.3s ease;
}

/* xn1 衣服边框 */
ni1 {
  border: 1px solid rgba(255,95,162,0.55);
  box-shadow: 0 3px 14px rgba(255, 95, 162, 0.35), inset 0 0 0 2px rgba(255,255,255,0.15);
}

/* xn2 衣服边框 */
ni77 {
  border: 1px solid rgba(196,78,232,0.6);
  box-shadow: 0 3px 16px rgba(196, 78, 232, 0.45), inset 0 0 0 2px rgba(255,255,255,0.15);
}

ni1:hover, ni77:hover { 
  transform: scale(1.02); 
}

/* 绑定图片 */
ni1  { background-image: url('https://image.acg.lol/file/2026/08/09/-58873a8a0b19bca1.png'); }
ni77 { background-image: url('https://image.acg.lol/file/2026/08/09/NO77-cf9235ddffa0f769.png'); }

/* =========================================
   🌙 月 / NO70 · 独立双形态容器 (xm1 / xm2)
   xm1 = 普通态(星夜月亮主题) / xm2 = NO70态(亮黄+紫主题)
   ========================================= */

xm1, xm2 { 
  display: block; 
  margin-bottom: 14px; 
}

/* —— 主题变量 —— */
xm1 {
  --mc:        #fcd34d;
  --mc-soft:   #fef3c7;
  --mc-deep:   #fde68a;
  --mc-black:  #0f172a;
  --mc-bg:     rgba(15, 23, 42, 0.85);
  --mc-border: rgba(252, 211, 77, 0.55);
}

xm2 {
  --mc:        #eab308;
  --mc-soft:   #fef08a;
  --mc-deep:   #e879f9;
  --mc-pink:   #d946ef;
  --mc-black:  #1e1b4b;
  --mc-bg:     rgba(30, 27, 75, 0.88);
  --mc-border: rgba(234, 179, 8, 0.6);
}

/* ========== 卡片骨架 ========== */
xm1 > details, xm2 > details {
  display: block; 
  position: relative;
  border-radius: 14px; 
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  border: 1.5px solid var(--mc-border);
  padding: 6px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* xm1 背景 (静谧月光) */
xm1 > details {
  background:
    radial-gradient(circle at 80% 20%, rgba(252, 211, 77, 0.2), transparent 40%),
    radial-gradient(1.5px 1.5px at 20% 30%, #fff 0%, transparent 50%),
    radial-gradient(2px 2px at 65% 75%, #fef3c7 0%, transparent 50%),
    radial-gradient(1px 1px at 45% 60%, #fff 0%, transparent 50%),
    linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #0f172a 100%);
  box-shadow: 0 8px 32px rgba(252, 211, 77, 0.25), inset 0 0 35px rgba(252, 211, 77, 0.08);
}

xm1 > details[open] { 
  box-shadow: 0 8px 32px rgba(252, 211, 77, 0.4), inset 0 0 45px rgba(252, 211, 77, 0.15); 
}

/* xm2 背景 (黄紫交织) */
xm2 > details {
  background:
    radial-gradient(circle at 20% 25%, rgba(234, 179, 8, 0.25), transparent 45%),
    radial-gradient(circle at 80% 75%, rgba(217, 70, 239, 0.3), transparent 45%),
    linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
  box-shadow: 0 8px 32px rgba(234, 179, 8, 0.4), inset 0 0 35px rgba(217, 70, 239, 0.15);
}

xm2 > details[open] { 
  box-shadow: 0 8px 32px rgba(234, 179, 8, 0.55), inset 0 0 50px rgba(234, 179, 8, 0.2); 
}

/* summary 头部 */
xm1 > details > summary, xm2 > details > summary {
  display: flex; 
  align-items: center; 
  gap: 14px;
  padding: 12px 14px; 
  cursor: pointer; 
  list-style: none; 
  user-select: none;
  border-radius: 12px;
  transition: all 0.4s ease;
}

xm1 > details > summary { 
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.75), rgba(15, 23, 42, 0.8));
}

xm1 > details > summary:hover {
  background: linear-gradient(135deg, rgba(49, 78, 168, 0.85), rgba(30, 43, 72, 0.9));
  transform: translateY(-2px);
}

xm2 > details > summary { 
  background: linear-gradient(135deg, rgba(49, 46, 129, 0.85), rgba(30, 27, 75, 0.8));
}

xm2 > details > summary:hover {
  background: linear-gradient(135deg, rgba(69, 66, 159, 0.95), rgba(50, 47, 105, 0.9));
  transform: translateY(-2px);
}

xm1 > details > summary::-webkit-details-marker, 
xm2 > details > summary::-webkit-details-marker { 
  display: none; 
}

xm1 > details > summary::marker, 
xm2 > details > summary::marker { 
  content: ''; 
  display: none; 
}

xm1 > details[open] > summary,
xm2 > details[open] > summary {
  border-radius: 12px 12px 0 0;
  margin-bottom: 8px;
}

/* summary内部网格布局 */
xm1 > details > summary ch-head,
xm2 > details > summary ch-head {
  display: grid !important; 
  grid-template-columns: 64px 1fr; 
  grid-template-rows: 1fr;
  column-gap: 16px; 
  width: 100%; 
  align-items: center; 
  margin: 0; 
  padding: 0; 
  border: none;
}

xm1 > details > summary ch-head > av,
xm2 > details > summary ch-head > av { 
  grid-column: 1; 
  grid-row: 1; 
  align-self: center; 
}

xm1 > details > summary ch-head > ch-info,
xm2 > details > summary ch-head > ch-info {
  grid-column: 2; 
  grid-row: 1; 
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 状态卡头像小框 */
xm1 av, xm2 av {
  display: block; 
  width: 64px; 
  height: 64px; 
  flex-shrink: 0; 
  border-radius: 50%;
  overflow: hidden; 
  transition: transform 0.3s ease; 
  border: 2px solid var(--mc); 
  background-color: var(--mc-black);
}

xm1 av { 
  box-shadow: 0 0 0 3px rgba(252, 211, 77, 0.4), 0 0 18px rgba(252, 211, 77, 0.6), 0 4px 12px rgba(0,0,0,0.5); 
}

xm2 av { 
  box-shadow: 0 0 0 3px rgba(217, 70, 239, 0.5), 0 0 20px var(--mc), 0 4px 12px rgba(0,0,0,0.6); 
}

xm1 av:hover, xm2 av:hover { 
  transform: scale(1.06) rotate(-3deg); 
}

/* 角色名 */
xm1 ch, xm2 ch {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: var(--mc-deep);
}

xm1 ch {
  text-shadow: 0 0 8px rgba(252, 211, 77, 0.5);
}

xm2 ch {
  text-shadow: 0 0 10px var(--mc-pink);
}

/* 称号 */
xm1 ch1, xm2 ch1 {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: #fff;
}

xm1 ch1 {
  background: linear-gradient(135deg, #93c5fd, var(--mc));
  box-shadow: 0 2px 8px rgba(252, 211, 77, 0.4);
}

xm2 ch1 {
  background: linear-gradient(135deg, var(--mc-pink), var(--mc));
  box-shadow: 0 2px 8px rgba(234, 179, 8, 0.5);
}

/* cdm展开主体 */
xm1 cdm, xm2 cdm { 
  display: block; 
  padding: 16px; 
  backdrop-filter: blur(10px); 
  animation: cdmFadeIn 0.2s ease-out; 
  border: 1px solid var(--mc-border);
  border-radius: 12px;
}

xm1 cdm { 
  background: rgba(15, 23, 42, 0.75); 
}

xm2 cdm { 
  background: rgba(30, 27, 75, 0.78); 
}

/* 内部颜色覆盖 */
xm1 rc, xm2 rc {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mc-deep);
  border: 1px solid var(--mc-border);
}

xm1 rc {
  background: rgba(30, 58, 138, 0.5);
}

xm2 rc {
  background: rgba(49, 46, 129, 0.6);
}

xm1 gi { 
  color: var(--mc-deep); 
  background: rgba(30, 58, 138, 0.5); 
  border-color: var(--mc-border); 
}

xm2 gi { 
  color: var(--mc-deep); 
  background: rgba(49, 46, 129, 0.6); 
  border-color: var(--mc-border); 
}

xm1 sl, xm2 sl { 
  color: var(--mc-soft); 
}

xm1 bv.l { 
  background: linear-gradient(90deg, #93c5fd, var(--mc)); 
  box-shadow: 0 0 8px rgba(252, 211, 77, 0.7); 
}

xm2 bv.l { 
  background: linear-gradient(90deg, var(--mc-pink), var(--mc)); 
  box-shadow: 0 0 10px var(--mc); 
}

/* 发言气泡 */
xm1 say, xm2 say {
  display: inline-block; 
  margin: 6px 0; 
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px; 
  font-size: 14px; 
  line-height: 1.6; 
  max-width: 88%;
  color: var(--mc-deep); 
  border: 1px solid var(--mc-border);
}

xm1 say {
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.85), rgba(15, 23, 42, 0.9));
  box-shadow: 0 3px 12px rgba(252, 211, 77, 0.35);
  text-shadow: 0 0 6px rgba(252, 211, 77, 0.3);
}

xm2 say {
  background: linear-gradient(135deg, rgba(49, 46, 129, 0.9), rgba(88, 28, 135, 0.85));
  box-shadow: 0 3px 14px rgba(234, 179, 8, 0.45);
  text-shadow: 0 0 8px rgba(217, 70, 239, 0.45);
}

/* =========================================
   🎭 月 · 表情系统 mf1-mf4, mf70
   ========================================= */
mf1, mf2, mf3, mf4, mf70 {
  display: block; 
  width: 112px; 
  height: 112px; 
  border-radius: 50%;
  background-size: cover; 
  background-position: center top; 
  background-repeat: no-repeat;
  margin: 10px 0 6px;
}

/* xm1 (普通态) 边框 - 月芒 */
mf1, mf2, mf3, mf4 {
  border: 2px solid #fcd34d; 
  background-color: #0f172a;
  box-shadow: 0 0 18px rgba(252, 211, 77, 0.5), 0 4px 14px rgba(0,0,0,0.4);
}

/* xm2 (NO70态) 边框 - 亮黄紫 */
mf70 {
  border: 2px solid #eab308; 
  background-color: #1e1b4b;
  box-shadow: 0 0 22px rgba(217, 70, 239, 0.6), 0 4px 14px rgba(0,0,0,0.5);
}

/* 进 av 自动缩小 */
av > mf1, av > mf2, av > mf3, av > mf4, av > mf70 {
  width: 100%; 
  height: 100%; 
  border: none; 
  margin: 0; 
  box-shadow: none; 
  border-radius: 0;
}

/* 绑定图片 */
mf1  { background-image: url('https://image.acg.lol/file/2026/08/09/--.png'); }
mf2  { background-image: url('https://image.acg.lol/file/2026/08/09/--10f33612eb585ec5.png'); }
mf3  { background-image: url('https://image.acg.lol/file/2026/08/09/--fec4f284c3e10c0f.png'); }
mf4  { background-image: url('https://image.acg.lol/file/2026/08/09/--eac26cf16f1c2a9c.png'); }
mf70 { background-image: url('https://image.acg.lol/file/2026/08/09/NO70-.png'); }

/* =========================================
   👗 月 · 衣服立绘系统 mi1, mi70
   ========================================= */
mi1, mi70 {
  display: block; 
  width: 100%; 
  aspect-ratio: 1051 / 788;
  margin-bottom: 12px; 
  border-radius: 10px; 
  background-size: cover; 
  background-position: center center;
  background-repeat: no-repeat; 
  transition: transform 0.3s ease;
}

/* xm1 衣服边框 - 月芒 */
mi1 {
  border: 1px solid rgba(252, 211, 77, 0.55);
  box-shadow: 0 3px 14px rgba(252, 211, 77, 0.3), inset 0 0 0 2px rgba(255,255,255,0.15);
}

/* xm2 衣服边框 - 亮黄紫 */
mi70 {
  border: 1px solid rgba(234, 179, 8, 0.6);
  box-shadow: 0 3px 16px rgba(234, 179, 8, 0.45), inset 0 0 0 2px rgba(217, 70, 239, 0.25);
}

mi1:hover, mi70:hover { 
  transform: scale(1.02); 
}

/* 绑定图片 */
mi1  { background-image: url('https://image.acg.lol/file/2026/08/09/-.png'); }
mi70 { background-image: url('https://image.acg.lol/file/2026/08/09/NO70-3cdeaac8c995b6d5.png'); }

/* =========================================
   ☕ 老板O · 独立双形态容器 (zon / zox)
   zon = 基础态(咖啡主题) / zox = 异常态(混沌主题)
   ========================================= */

zon, zox {
  display: block;
  margin-bottom: 14px;
}

/* —— 主题变量 —— */
zon {
  --mc:        #8b5a3c;
  --mc-soft:   #d4a87a;
  --mc-deep:   #4a2a14;
  --mc-cream:  #f5e8d0;
  --mc-bg:     rgba(245, 232, 208, 0.55);
  --mc-border: rgba(139, 90, 60, 0.5);
}

zox {
  --mc:        #6b2d8a;
  --mc-soft:   #a85bc4;
  --mc-deep:   #d8a8e8;
  --mc-glitch: #00ffe5;
  --mc-bg:     rgba(10, 5, 20, 0.9);
  --mc-border: rgba(168, 91, 196, 0.65);
}

/* ========== 卡片骨架 ========== */
zon > details, zox > details {
  display: block;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  border: 1.5px solid var(--mc-border);
  padding: 6px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* zon 背景 */
zon > details {
  background:
    radial-gradient(circle at 20% 30%, rgba(212, 168, 122, 0.3), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(245, 232, 208, 0.4), transparent 50%),
    linear-gradient(135deg, #f5e8d0 0%, #e8d4b0 50%, #d4a87a 100%);
  box-shadow: 0 8px 32px rgba(139, 90, 60, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

zon > details[open] {
  box-shadow: 0 8px 32px rgba(139, 90, 60, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* zox 背景 */
zox > details {
  background:
    repeating-linear-gradient(90deg, transparent 0px, transparent 2px, rgba(0, 255, 229, 0.04) 2px, rgba(0, 255, 229, 0.04) 3px),
    radial-gradient(circle at 30% 40%, rgba(168, 91, 196, 0.4), transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(0, 255, 229, 0.15), transparent 45%),
    linear-gradient(135deg, #0a0514 0%, #1a0a28 50%, #0a0514 100%);
  box-shadow: 0 8px 32px rgba(168, 91, 196, 0.5), inset 0 0 30px rgba(0, 255, 229, 0.08);
  animation: glitchShift 6s infinite linear;
}

zox > details[open] {
  box-shadow: 0 8px 32px rgba(168, 91, 196, 0.65), inset 0 0 40px rgba(0, 255, 229, 0.12);
}

@keyframes glitchShift {
  0%, 100% { filter: hue-rotate(0deg); }
  20% { filter: hue-rotate(-8deg); }
  50% { filter: hue-rotate(0deg); }
  80% { filter: hue-rotate(8deg); }
}

/* summary 头部 */
zon > details > summary, zox > details > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-radius: 12px;
  transition: all 0.4s ease;
}

zon > details > summary {
  background: linear-gradient(135deg, rgba(245, 232, 208, 0.7), rgba(228, 212, 176, 0.6));
}

zon > details > summary:hover {
  background: linear-gradient(135deg, rgba(255, 242, 218, 0.85), rgba(238, 222, 186, 0.75));
  transform: translateY(-2px);
}

zox > details > summary {
  background: linear-gradient(135deg, rgba(30, 10, 50, 0.85), rgba(60, 20, 90, 0.7));
}

zox > details > summary:hover {
  background: linear-gradient(135deg, rgba(50, 20, 70, 0.95), rgba(80, 30, 110, 0.8));
  transform: translateY(-2px);
}

zon > details > summary::-webkit-details-marker,
zox > details > summary::-webkit-details-marker {
  display: none;
}

zon > details > summary::marker,
zox > details > summary::marker {
  content: '';
  display: none;
}

zon > details[open] > summary,
zox > details[open] > summary {
  border-radius: 12px 12px 0 0;
  margin-bottom: 8px;
}

/* summary内部网格布局 */
zon > details > summary ch-head,
zox > details > summary ch-head {
  display: grid !important;
  grid-template-columns: 64px 1fr;
  grid-template-rows: 1fr;
  column-gap: 16px;
  width: 100%;
  align-items: center;
  margin: 0;
  padding: 0;
  border: none;
}

zon > details > summary ch-head > av,
zox > details > summary ch-head > av {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

zon > details > summary ch-head > ch-info,
zox > details > summary ch-head > ch-info {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 状态卡头像小框 */
zon av, zox av {
  display: block;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.3s ease;
}

zon av {
  border: 2px solid var(--mc);
  background-color: var(--mc-cream);
  box-shadow: 0 0 0 3px rgba(212, 168, 122, 0.5), 0 4px 10px rgba(139, 90, 60, 0.3);
}

zox av {
  border: 2px solid var(--mc-glitch);
  background-color: #0a0514;
  box-shadow: 0 0 0 3px rgba(168, 91, 196, 0.5), 0 0 22px var(--mc-glitch), 0 4px 14px rgba(0,0,0,0.6);
}

zon av:hover, zox av:hover {
  transform: scale(1.06) rotate(-3deg);
}

/* 角色名 */
zon ch {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  background: linear-gradient(135deg, #8b5a3c 0%, #d4a87a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

zox ch {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: var(--mc-deep);
  text-shadow: 0 0 10px var(--mc-glitch);
}

/* 称号 */
zon ch1, zox ch1 {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: #fff;
}

zon ch1 {
  background: linear-gradient(135deg, var(--mc-soft), var(--mc));
  box-shadow: 0 2px 8px rgba(139, 90, 60, 0.3);
}

zox ch1 {
  background: linear-gradient(135deg, var(--mc-soft), var(--mc));
  box-shadow: 0 2px 8px rgba(168, 91, 196, 0.5);
}

/* cdm展开主体 */
zon char, zox char {
  display: block;
  padding: 16px;
  backdrop-filter: blur(10px);
  animation: cdmFadeIn 0.2s ease-out;
  border: 1px solid var(--mc-border);
  border-radius: 12px;
}

zon char {
  background: rgba(255, 248, 235, 0.88);
}

zox char {
  background: rgba(10, 5, 20, 0.8);
}

/* 内部颜色覆盖 */
zon rc, zox rc {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mc-deep);
  border: 1px solid var(--mc-border);
}

zon rc {
  background: rgba(255, 248, 235, 0.7);
}

zox rc {
  background: rgba(30, 12, 45, 0.7);
}

zon gi {
  color: var(--mc-deep);
  border-color: var(--mc-border);
  background: linear-gradient(135deg, rgba(255, 248, 235, 0.7), rgba(245, 238, 225, 0.7));
}

zox gi {
  color: var(--mc-deep);
  border-color: var(--mc-border);
  background: rgba(30, 12, 45, 0.7);
}

zon sl {
  color: var(--mc);
}

zox sl {
  color: var(--mc-soft);
}

zon bv.l {
  background: linear-gradient(90deg, var(--mc-soft), var(--mc));
}

zox bv.l {
  background: linear-gradient(90deg, var(--mc-soft), var(--mc));
  box-shadow: 0 0 10px var(--mc-glitch);
}

/* 发言气泡 */
zon say, zox say {
  display: inline-block;
  margin: 6px 0;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  font-size: 14px;
  line-height: 1.6;
  max-width: 88%;
  border: 1px solid var(--mc-border);
}

zon say {
  background: linear-gradient(135deg, rgba(245, 232, 208, 0.9), rgba(228, 212, 176, 0.85));
  color: var(--mc-deep);
  box-shadow: 0 3px 10px rgba(139, 90, 60, 0.22);
}

zox say {
  background: linear-gradient(135deg, rgba(30,12,55,0.92), rgba(70,25,100,0.88));
  color: var(--mc-deep);
  box-shadow: 0 3px 14px rgba(168, 91, 196, 0.5);
  text-shadow: 0 0 8px var(--mc-glitch);
}

/* =========================================
   🎭 老板O · 表情系统 ofn, ofx
   ========================================= */
ofn, ofx {
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  margin: 10px 0 6px;
}

/* zon (基础态) 边框 */
ofn {
  border: 2px solid #8b5a3c;
  background-color: #f5e8d0;
  box-shadow: 0 4px 14px rgba(139, 90, 60, 0.4);
}

/* zox (异常态) 边框 */
ofx {
  border: 2px solid #00ffe5;
  background-color: #0a0514;
  box-shadow: 0 0 22px #00ffe5, 0 4px 14px rgba(168, 91, 196, 0.5);
}

/* 进 av 自动缩小 */
av > ofn, av > ofx {
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
}

/* 绑定图片 */
ofn { background-image: url('https://image.acg.lol/file/2026/08/09/O--.png'); }
ofx { background-image: url('https://image.acg.lol/file/2026/08/09/O--0c2831877c68e641.png'); }

/* =========================================
   👗 老板O · 衣服立绘系统 oin, oix
   ========================================= */
oin, oix {
  display: block;
  width: 100%;
  aspect-ratio: 1051 / 788;
  margin-bottom: 12px;
  border-radius: 10px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}

/* zon 衣服边框 */
oin {
  border: 1px solid rgba(139, 90, 60, 0.5);
  box-shadow: 0 3px 12px rgba(139, 90, 60, 0.3), inset 0 0 0 2px rgba(255,255,255,0.4);
}

/* zox 衣服边框 */
oix {
  border: 1px solid rgba(168, 91, 196, 0.65);
  box-shadow: 0 3px 16px rgba(168, 91, 196, 0.5), inset 0 0 0 2px rgba(0, 255, 229, 0.2);
}

oin:hover, oix:hover {
  transform: scale(1.02);
}

/* 绑定图片 */
oin { background-image: url('https://image.acg.lol/file/2026/08/09/O-.png'); }
oix { background-image: url('https://image.acg.lol/file/2026/08/09/O-8f1b19d5886a8c0d.png'); }

/* =========================================
   👥 通用NPC · znm/znf(路人) + znmx/znfx(真实)
   ========================================= */

znm, znf, znmx, znfx {
  display: block;
  margin-bottom: 14px;
}

/* 男性NPC路人 · 冷蓝灰 */
znm {
  --mc: #6b7a99;
  --mc-soft: #b8c4d6;
  --mc-deep: #3d4a66;
  --mc-bg: rgba(220, 228, 240, 0.45);
  --mc-border: rgba(107, 122, 153, 0.45);
}

/* 女性NPC路人 · 暖紫 */
znf {
  --mc: #b07ac9;
  --mc-soft: #d8b8e6;
  --mc-deep: #6b3d85;
  --mc-bg: rgba(235, 220, 245, 0.45);
  --mc-border: rgba(176, 122, 201, 0.45);
}

/* 男性NPC真实态 · 参考妹妹(蓝) */
znmx {
  --mc:        #6fa8ff;
  --mc-soft:   #b7d5ff;
  --mc-deep:   #2c5fa8;
  --mc-bg:     rgba(220, 235, 255, 0.45);
  --mc-border: rgba(111, 168, 255, 0.45);
}

/* 女性NPC真实态 · 参考NO78但强调红色 */
znfx {
  --mc:        #ff3d6b;
  --mc-soft:   #ff8aaa;
  --mc-deep:   #ff6b9d;
  --mc-red:    #ff1744;
  --mc-bg:     rgba(255, 200, 215, 0.5);
  --mc-border: rgba(255, 61, 107, 0.6);
}

/* ========== 路人态发言气泡(znm/znf) ========== */
znm say {
  display: inline-block;
  margin: 6px 0;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  font-size: 14px;
  line-height: 1.6;
  max-width: 88%;
  color: var(--mc-deep);
  background: linear-gradient(135deg, rgba(235, 242, 250, 0.9), rgba(225, 235, 245, 0.85));
  border: 1px solid var(--mc-border);
  box-shadow: 0 3px 10px rgba(107, 122, 153, 0.2);
}

znf say {
  display: inline-block;
  margin: 6px 0;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  font-size: 14px;
  line-height: 1.6;
  max-width: 88%;
  color: var(--mc-deep);
  background: linear-gradient(135deg, rgba(245, 235, 252, 0.9), rgba(235, 225, 245, 0.85));
  border: 1px solid var(--mc-border);
  box-shadow: 0 3px 10px rgba(176, 122, 201, 0.2);
}

/* ========== 真实态状态卡骨架(znmx/znfx) ========== */
znmx > details, znfx > details {
  display: block;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  border: 1.5px solid var(--mc-border);
  padding: 6px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: var(--mc-bg);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--mc) 25%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

znmx > details[open], znfx > details[open] {
  box-shadow: 0 8px 32px color-mix(in srgb, var(--mc) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* summary头部 */
znmx > details > summary, znfx > details > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-radius: 12px;
  transition: all 0.4s ease;
  background: linear-gradient(135deg, color-mix(in srgb, var(--mc-soft) 50%, white), color-mix(in srgb, var(--mc) 18%, white));
}

znmx > details > summary:hover, znfx > details > summary:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--mc-soft) 70%, white), color-mix(in srgb, var(--mc) 30%, white));
  transform: translateY(-2px);
}

znmx > details > summary::-webkit-details-marker,
znfx > details > summary::-webkit-details-marker {
  display: none;
}

znmx > details > summary::marker,
znfx > details > summary::marker {
  content: '';
  display: none;
}

znmx > details[open] > summary,
znfx > details[open] > summary {
  border-radius: 12px 12px 0 0;
  margin-bottom: 8px;
}

/* summary内部网格布局 */
znmx > details > summary ch-head,
znfx > details > summary ch-head {
  display: grid !important;
  grid-template-columns: 64px 1fr;
  grid-template-rows: 1fr;
  column-gap: 16px;
  width: 100%;
  align-items: center;
  margin: 0;
  padding: 0;
  border: none;
}

znmx > details > summary ch-head > av,
znfx > details > summary ch-head > av {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

znmx > details > summary ch-head > ch-info,
znfx > details > summary ch-head > ch-info {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 头像框 */
znmx av, znfx av {
  display: block;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.3s ease;
  border: 2px solid var(--mc);
  background-color: var(--mc-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-soft) 50%, transparent), 0 4px 10px color-mix(in srgb, var(--mc) 30%, transparent);
}

znmx av:hover, znfx av:hover {
  transform: scale(1.06) rotate(-3deg);
}

/* 女性真实态特殊红光 */
znfx av {
  box-shadow: 0 0 0 3px rgba(255, 61, 107, 0.5), 0 0 18px rgba(255, 23, 68, 0.6), 0 4px 12px rgba(255, 61, 107, 0.4);
}

/* 角色名 */
znmx ch, znfx ch {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  background: linear-gradient(135deg, var(--mc), var(--mc-soft));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 女性真实态强调红色 */
znfx ch {
  background: linear-gradient(135deg, #ff1744, #ff6b9d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 称号 */
znmx ch1, znfx ch1 {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--mc-soft), var(--mc));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--mc) 30%, transparent);
}

/* cdm展开主体 */
znmx char, znfx char {
  display: block;
  padding: 16px;
  backdrop-filter: blur(10px);
  animation: cdmFadeIn 0.2s ease-out;
  border: 1px solid var(--mc-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
}

/* 内部元素配色 */
znmx rc, znfx rc {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mc-deep);
  background: color-mix(in srgb, var(--mc-soft) 50%, white);
  border: 1px solid var(--mc-border);
}

znmx gi, znfx gi {
  color: var(--mc-deep);
  border-color: var(--mc-border);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), color-mix(in srgb, var(--mc-soft) 30%, white));
}

znmx sl, znfx sl {
  color: var(--mc);
}

znmx bv.l, znfx bv.l {
  background: linear-gradient(90deg, var(--mc-soft), var(--mc));
}

/* 发言气泡 */
znmx say {
  display: inline-block;
  margin: 6px 0;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  font-size: 14px;
  line-height: 1.6;
  max-width: 88%;
  color: var(--mc-deep);
  background: linear-gradient(135deg, rgba(220, 235, 255, 0.9), rgba(200, 225, 250, 0.85));
  border: 1px solid var(--mc-border);
  box-shadow: 0 3px 10px rgba(111, 168, 255, 0.25);
}

znfx say {
  display: inline-block;
  margin: 6px 0;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  font-size: 14px;
  line-height: 1.6;
  max-width: 88%;
  color: var(--mc-deep);
  background: linear-gradient(135deg, rgba(255, 230, 240, 0.9), rgba(255, 210, 225, 0.85));
  border: 1px solid var(--mc-border);
  box-shadow: 0 3px 14px rgba(255, 61, 107, 0.35);
  text-shadow: 0 0 6px rgba(255, 23, 68, 0.3);
}

/* =========================================
   🎭 NPC真实态 · 表情系统 nf
   ========================================= */
nf {
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  margin: 10px 0 6px;
  background-image: url('https://image.acg.lol/file/2026/08/09/78-.png');
}

/* 男性边框-蓝 */
znmx nf {
  border: 2px solid #6fa8ff;
  background-color: #d6ebff;
  box-shadow: 0 4px 14px rgba(111, 168, 255, 0.4);
}

/* 女性边框-红 */
znfx nf {
  border: 2px solid #ff1744;
  background-color: #ffc8d8;
  box-shadow: 0 0 18px rgba(255, 23, 68, 0.6), 0 4px 14px rgba(255, 61, 107, 0.5);
}

/* 进av自动缩小 */
av > nf {
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
}

/* =========================================
   👗 NPC真实态 · 立绘系统 ni
   ========================================= */
ni {
  display: block;
  width: 100%;
  aspect-ratio: 1051 / 788;
  margin-bottom: 12px;
  border-radius: 10px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
  background-image: url('https://image.acg.lol/file/2026/08/09/78-b97f31b015ac3e06.png');
}

/* 男性边框-蓝 */
znmx ni {
  border: 1px solid rgba(111, 168, 255, 0.5);
  box-shadow: 0 3px 12px rgba(111, 168, 255, 0.3), inset 0 0 0 2px rgba(255,255,255,0.4);
}

/* 女性边框-红 */
znfx ni {
  border: 1px solid rgba(255, 23, 68, 0.6);
  box-shadow: 0 3px 16px rgba(255, 61, 107, 0.45), inset 0 0 0 2px rgba(255,255,255,0.2);
}

ni:hover {
  transform: scale(1.02);
}