ai {
  display: block;
  --主色: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --辅助色: #74b9ff;
  --强调色: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  --背景: rgba(18, 28, 38, 0.88);
  --文字: #dfe6e9;
  --文字暗: #b2bec3;
  --边框: rgba(79, 172, 254, 0.25);
  --阴影: rgba(0, 0, 0, 0.5);
  --脉冲色: rgba(79, 172, 254, 0.6);
  max-width: 680px;
  margin: 0 auto;
  padding: 16px;
  background: var(--背景);
  border: 1px solid var(--边框);
  border-radius: 12px;
  box-shadow: 0 8px 32px var(--阴影), inset 0 1px 0 rgba(255,255,255,0.08);
  color: var(--文字);
  font-size: 15px;
  line-height: 1.6;
  position: relative;
  overflow: hidden;
  animation: aiIn 0.4s ease-out;
  backdrop-filter: blur(8px);
}

ai::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='100' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 Q 10 10, 20 20 T 40 20 T 60 20 T 80 20 T 100 20' stroke='rgba(79,172,254,0.06)' fill='none' stroke-width='1'/%3E%3C/svg%3E") repeat;
  opacity: 0.5;
  animation: ecgScroll 60s linear infinite;
  pointer-events: none;
  z-index: 0;
}

ai::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -10%;
  right: -10%;
  bottom: -50%;
  background-image: 
    radial-gradient(2px 8px at 20% 30%, rgba(79, 172, 254, 0.3), transparent),
    radial-gradient(2px 10px at 60% 70%, rgba(116, 185, 255, 0.25), transparent),
    radial-gradient(1px 12px at 50% 50%, rgba(0, 242, 254, 0.2), transparent),
    radial-gradient(2px 6px at 80% 10%, rgba(79, 172, 254, 0.28), transparent),
    radial-gradient(1px 9px at 90% 60%, rgba(116, 185, 255, 0.22), transparent),
    radial-gradient(2px 7px at 15% 80%, rgba(0, 242, 254, 0.26), transparent),
    radial-gradient(1px 11px at 40% 20%, rgba(79, 172, 254, 0.24), transparent);
  background-size: 100% 100%;
  animation: rainFall 8s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

@keyframes aiIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ecgScroll {
  from { background-position: 0 0; }
  to { background-position: 100px 0; }
}

@keyframes rainFall {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes valuePulse {
  0%, 100% { box-shadow: 0 0 8px var(--脉冲色), 0 0 16px var(--脉冲色); }
  50% { box-shadow: 0 0 16px var(--脉冲色), 0 0 32px var(--脉冲色), 0 0 48px var(--脉冲色); }
}

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

hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--主色);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(79, 172, 254, 0.3);
  position: relative;
  overflow: hidden;
}

hd::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--辅助色);
  box-shadow: 0 0 8px var(--辅助色);
}

hd i {
  font-style: normal;
  opacity: 0.9;
}

article {
  display: block;
  margin-bottom: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border-left: 3px solid rgba(79, 172, 254, 0.4);
}

article p {
  margin: 0 0 10px 0;
}

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

details {
  margin-bottom: 10px;
  border: 1px solid var(--边框);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.015);
  overflow: hidden;
  transition: all 0.25s ease;
}

details:hover {
  border-color: rgba(79, 172, 254, 0.5);
  box-shadow: 0 0 12px rgba(79, 172, 254, 0.2);
}

details[open] {
  background: rgba(255, 255, 255, 0.03);
}

summary {
  padding: 10px 14px;
  background: var(--主色);
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  list-style: none;
  user-select: none;
  transition: all 0.25s ease;
  position: relative;
}

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

summary::before {
  content: '▶';
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.25s ease;
  font-size: 10px;
  opacity: 0.8;
}

details[open] > summary::before {
  transform: rotate(90deg);
}

summary:hover {
  background: linear-gradient(135deg, #5fbdff 0%, #10f3ff 100%);
  box-shadow: 0 0 16px rgba(79, 172, 254, 0.4);
}

details > details {
  margin: 8px;
  border-color: rgba(116, 185, 255, 0.3);
}

details > details > summary {
  background: linear-gradient(135deg, #74b9ff 0%, #a29bfe 100%);
  color: #2d3436;
  font-size: 13px;
  padding: 8px 12px;
}

details > details > summary:hover {
  background: linear-gradient(135deg, #84c9ff 0%, #b2abfe 100%);
}

p[t]::before {
  content: attr(t);
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--辅助色);
  margin-bottom: 6px;
  padding-left: 10px;
  border-left: 3px solid var(--辅助色);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

p {
  margin: 0;
  padding: 8px 12px;
}

d {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

d:last-child {
  border-bottom: none;
}

d[n] {
  padding: 10px 12px;
  margin: 6px 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  border-left: 3px solid transparent;
  transition: all 0.25s ease;
  cursor: pointer;
  position: relative;
}

d[n]::before {
  content: attr(n) '. ';
  font-weight: 600;
  color: var(--辅助色);
  margin-right: 4px;
}

d[n]::after {
  content: attr(data-preview);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(18, 28, 38, 0.95);
  color: var(--辅助色);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
  border: 1px solid rgba(79, 172, 254, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 10;
}

d[n][data-preview]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

d[n]:hover {
  background: rgba(79, 172, 254, 0.12);
  border-left-color: var(--辅助色);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(79, 172, 254, 0.2);
}

f {
  display: inline-block;
  font-weight: 600;
  color: var(--辅助色);
  margin-right: 6px;
  font-size: 13px;
}

f::after {
  content: ':';
  margin-left: 2px;
}

q {
  display: block;
  font-size: 13px;
  color: var(--文字暗);
  font-style: italic;
  margin-top: 4px;
  padding-left: 12px;
  border-left: 2px solid rgba(116, 185, 255, 0.3);
  opacity: 0.9;
}

p[t="外貌"] d {
  position: relative;
  cursor: help;
}

p[t="外貌"] d::after {
  content: attr(data-detail);
  position: absolute;
  bottom: 100%;
  left: 0;
  background: rgba(18, 28, 38, 0.95);
  color: var(--文字);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  max-width: 280px;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
  border: 1px solid rgba(79, 172, 254, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  z-index: 10;
  line-height: 1.5;
}

p[t="外貌"] d[data-detail]:hover::after {
  opacity: 1;
  transform: translateY(-4px);
}

g {
  display: inline-block;
  width: 120px;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  margin: 0 8px;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

g::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

b {
  display: block;
  height: 100%;
  width: calc(var(--v) * 1%);
  background: var(--强调色);
  border-radius: 4px;
  position: relative;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(168, 237, 234, 0.5);
  animation: valuePulse 2s ease-in-out infinite;
}

b::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 100%);
  border-radius: 4px 4px 0 0;
}

b[style*="--v:0"]::before,
b[style*="--v:1"]::before,
b[style*="--v:2"]::before,
b[style*="--v:3"]::before,
b[style*="--v:4"]::before,
b[style*="--v:5"]::before,
b[style*="--v:6"]::before,
b[style*="--v:7"]::before,
b[style*="--v:8"]::before,
b[style*="--v:9"]::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
  border-radius: 4px;
  z-index: -1;
  filter: blur(4px);
  opacity: 0.6;
}

b[style*="--v:1"]::before { background: linear-gradient(135deg, #ff7675 0%, #fd79a8 100%); }
b[style*="--v:2"]::before { background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%); }
b[style*="--v:3"]::before { background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%); }
b[style*="--v:4"]::before { background: linear-gradient(135deg, #55efc4 0%, #00b894 100%); }
b[style*="--v:5"]::before { background: linear-gradient(135deg, #81ecec 0%, #00cec9 100%); }
b[style*="--v:6"]::before { background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%); }
b[style*="--v:7"]::before { background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%); }
b[style*="--v:8"]::before { background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%); }
b[style*="--v:9"]::before { background: linear-gradient(135deg, #fab1a0 0%, #ff7675 100%); }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  overflow: hidden;
}

thead {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.25) 0%, rgba(0, 242, 254, 0.25) 100%);
  position: sticky;
  top: 0;
  z-index: 2;
}

th {
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--辅助色);
  border-bottom: 2px solid rgba(79, 172, 254, 0.4);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: top;
}

tbody tr {
  transition: all 0.25s ease;
  position: relative;
}

tbody tr::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--强调色);
  transition: width 0.25s ease;
}

tbody tr:hover {
  background: rgba(79, 172, 254, 0.08);
}

tbody tr:hover::before {
  width: 3px;
}

tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}

tbody tr:nth-child(even):hover {
  background: rgba(79, 172, 254, 0.1);
}

@media (max-width: 600px) {
  ai {
    padding: 12px;
    font-size: 14px;
  }
  
  hd {
    font-size: 13px;
    padding: 8px 12px;
    flex-wrap: wrap;
  }
  
  summary {
    font-size: 13px;
    padding: 8px 12px;
  }
  
  g {
    width: 80px;
    height: 6px;
  }
  
  table {
    font-size: 12px;
  }
  
  th, td {
    padding: 6px 8px;
  }
  
  d[n]::after,
  p[t="外貌"] d::after {
    max-width: 200px;
    font-size: 11px;
  }
}

/* ========== 心电仪 / 颗粒感 主题 ==========
   适用范围：
   - 顶部栏
   - 底部输入栏
   - 按钮栏
   - 分页栏（仅视觉，不改布局）
   - 评论区
   设计原则：深色监护仪屏幕 + 荧光绿心电感 + 细颗粒噪点 + 高可读性
========================================== */

/* ------------------------------
   顶部栏
------------------------------ */
.sticky.w-full.top-0.flex.items-center {
  background:
    linear-gradient(180deg, rgba(6, 15, 12, 0.96) 0%, rgba(9, 22, 18, 0.94) 100%) !important;
  border-bottom: 1px solid rgba(121, 255, 194, 0.18) !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.34),
    inset 0 -1px 0 rgba(121, 255, 194, 0.08) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  position: relative;
  overflow: hidden;
}

.sticky.w-full.top-0.flex.items-center::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(111, 255, 193, 0.08) 0, transparent 36%),
    radial-gradient(circle at 80% 20%, rgba(63, 255, 160, 0.05) 0, transparent 30%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.02) 0 1px,
      transparent 1px 4px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(121,255,194,0.025) 0 1px,
      transparent 1px 4px
    );
  pointer-events: none;
}

.sticky.w-full.top-0.flex.items-center::after {
  content: "" !important;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(121,255,194,0.0) 8%,
      rgba(121,255,194,0.8) 22%,
      rgba(210,255,235,1) 26%,
      rgba(121,255,194,0.95) 30%,
      rgba(121,255,194,0.15) 42%,
      transparent 55%,
      rgba(121,255,194,0.35) 72%,
      rgba(210,255,235,0.9) 76%,
      rgba(121,255,194,0.5) 82%,
      transparent 100%) !important;
  box-shadow:
    0 0 8px rgba(121,255,194,0.55),
    0 0 16px rgba(121,255,194,0.18) !important;
  opacity: 0.95;
  pointer-events: none;
}

/* 模型选择器 */
#ai-model-selector .group.flex.items-center {
  background: rgba(10, 30, 24, 0.7) !important;
  border: 1px solid rgba(121, 255, 194, 0.22) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 6px 18px rgba(0,0,0,0.22),
    0 0 0 1px rgba(80,255,170,0.04) !important;
  transition: all 0.25s ease !important;
}

#ai-model-selector .group.flex.items-center:hover {
  background: rgba(13, 38, 31, 0.88) !important;
  border-color: rgba(121, 255, 194, 0.42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(121,255,194,0.08),
    0 8px 24px rgba(0,0,0,0.3),
    0 0 14px rgba(121,255,194,0.12) !important;
}

#ai-model-selector .truncate.text-\[13px\] {
  color: #eafff5 !important;
  text-shadow: 0 0 8px rgba(121,255,194,0.12) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

#ai-model-selector .shrink-0.flex.items-center svg {
  color: #8effc8 !important;
  opacity: 0.95 !important;
  filter: drop-shadow(0 0 4px rgba(121,255,194,0.28)) !important;
  transition: transform 0.22s ease, filter 0.22s ease !important;
}

#ai-model-selector .group.flex.items-center:hover
  .shrink-0.flex.items-center svg {
  transform: translateY(1px) scale(1.04) !important;
  filter: drop-shadow(0 0 8px rgba(121,255,194,0.45)) !important;
}

/* 顶部裸SVG与按钮 */
.sticky.w-full.top-0 svg.lucide-clock-8,
.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]),
#header-setting-button svg,
.sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2 {
  color: #98ffd0 !important;
  stroke: #98ffd0 !important;
  filter: drop-shadow(0 0 6px rgba(121,255,194,0.25)) !important;
  transition: transform 0.22s ease, filter 0.22s ease, opacity 0.22s ease !important;
}

.sticky.w-full.top-0 svg.lucide-clock-8:hover,
.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]):hover,
#header-setting-button:hover svg,
.sticky.w-full.top-0 button.MuiIconButton-root:hover svg.lucide-music-2 {
  transform: scale(1.08) !important;
  filter: drop-shadow(0 0 10px rgba(121,255,194,0.45)) !important;
}

#header-setting-button,
.sticky.w-full.top-0 button.MuiIconButton-root:has(svg.lucide-music-2) {
  background: rgba(11, 32, 25, 0.74) !important;
  border: 1px solid rgba(121,255,194,0.18) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 6px 18px rgba(0,0,0,0.22) !important;
  transition: all 0.22s ease !important;
}

#header-setting-button:hover,
.sticky.w-full.top-0 button.MuiIconButton-root:has(svg.lucide-music-2):hover {
  background: rgba(15, 42, 33, 0.92) !important;
  border-color: rgba(121,255,194,0.35) !important;
  box-shadow:
    0 8px 22px rgba(0,0,0,0.28),
    0 0 16px rgba(121,255,194,0.08) !important;
}

.sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden {
  background: #8effc8 !important;
  box-shadow:
    0 0 0 2px rgba(8,18,15,0.9),
    0 0 8px rgba(121,255,194,0.85) !important;
}

/* ------------------------------
   开场白选择器（顺手统一）
------------------------------ */
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(180deg, rgba(10, 29, 23, 0.92), rgba(13, 34, 28, 0.92)) !important;
  border: 1px solid rgba(121,255,194,0.22) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 6px 16px rgba(0,0,0,0.2) !important;
  color: #e8fff3 !important;
  transition: all 0.22s 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: rgba(121,255,194,0.4) !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.28),
    0 0 12px rgba(121,255,194,0.08) !important;
}

div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="SlidersH"],
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="ChevronDown"] {
  color: #8effc8 !important;
  stroke: #8effc8 !important;
  filter: drop-shadow(0 0 6px rgba(121,255,194,0.22)) !important;
}

/* ------------------------------
   按钮栏
------------------------------ */
#ai-mod-button2 {
  background: transparent !important;
}

#ai-mod-button2 button.MuiButton-root {
  background:
    linear-gradient(180deg, rgba(13, 33, 28, 0.94) 0%, rgba(10, 24, 20, 0.94) 100%) !important;
  color: #eafff4 !important;
  border: 1px solid rgba(121,255,194,0.2) !important;
  border-radius: 14px !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,0.24),
    inset 0 0 0 1px rgba(255,255,255,0.02) !important;
  text-shadow: 0 0 8px rgba(121,255,194,0.08) !important;
  transition: all 0.22s ease !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  position: relative;
  overflow: hidden;
}

#ai-mod-button2 button.MuiButton-root::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(121,255,194,0.05) 20%,
      rgba(220,255,239,0.09) 50%,
      rgba(121,255,194,0.05) 80%,
      transparent 100%);
  opacity: 0.7;
  pointer-events: none;
}

#ai-mod-button2 button.MuiButton-root:hover {
  background:
    linear-gradient(180deg, rgba(16, 43, 35, 0.98) 0%, rgba(12, 30, 24, 0.98) 100%) !important;
  border-color: rgba(121,255,194,0.42) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.3),
    0 0 16px rgba(121,255,194,0.08),
    inset 0 0 0 1px rgba(121,255,194,0.05) !important;
  transform: translateY(-1px) !important;
}

#ai-mod-button2 button.MuiButton-root svg {
  color: #8effc8 !important;
  stroke: #8effc8 !important;
  filter: drop-shadow(0 0 6px rgba(121,255,194,0.28)) !important;
  transition: transform 0.22s ease, filter 0.22s ease !important;
}

#ai-mod-button2 button.MuiButton-root:hover svg {
  transform: scale(1.06) !important;
  filter: drop-shadow(0 0 10px rgba(121,255,194,0.42)) !important;
}

/* ------------------------------
   底部栏 / 输入区
------------------------------ */
.bg-gradient-to-t {
  background:
    linear-gradient(180deg, rgba(4, 12, 10, 0) 0%, rgba(5, 14, 12, 0.76) 18%, rgba(7, 18, 15, 0.94) 100%) !important;
}

#ai-chat-bottom-input {
  background:
    linear-gradient(180deg, rgba(8, 20, 17, 0.92), rgba(10, 24, 20, 0.96)) !important;
  border: 1px solid rgba(121,255,194,0.2) !important;
  border-radius: 18px !important;
  box-shadow:
    0 14px 36px rgba(0,0,0,0.34),
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 0 0 1px rgba(121,255,194,0.04) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
  position: relative;
  overflow: hidden;
}

#ai-chat-bottom-input::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(121,255,194,0.06), transparent 30%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.018) 0 1px,
      transparent 1px 4px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(121,255,194,0.02) 0 1px,
      transparent 1px 5px
    );
  pointer-events: none;
}

#ai-chat-input {
  background: rgba(4, 14, 11, 0.22) !important;
  color: #f2fff8 !important;
  caret-color: #8effc8 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  text-shadow: 0 0 6px rgba(121,255,194,0.06) !important;
  border-radius: 14px !important;
}

#ai-chat-input::placeholder {
  color: rgba(180, 235, 208, 0.62) !important;
}

#ai-chat-input::selection {
  background: rgba(121,255,194,0.28) !important;
  color: #ffffff !important;
}

/* ------------------------------
   分页栏（仅视觉）
------------------------------ */
.MuiPaginationItem-root {
  background:
    linear-gradient(180deg, rgba(12, 30, 24, 0.92), rgba(8, 20, 16, 0.94)) !important;
  color: #dfffee !important;
  border: 1px solid rgba(121,255,194,0.18) !important;
  border-radius: 12px !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.02) !important;
  transition: all 0.2s ease !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.MuiPaginationItem-root:hover {
  background:
    linear-gradient(180deg, rgba(15, 40, 32, 0.96), rgba(10, 26, 21, 0.96)) !important;
  color: #f1fff8 !important;
  border-color: rgba(121,255,194,0.35) !important;
  box-shadow:
    0 6px 16px rgba(0,0,0,0.24),
    0 0 10px rgba(121,255,194,0.08) !important;
}

.MuiPaginationItem-root.Mui-selected {
  background:
    linear-gradient(180deg, rgba(24, 73, 55, 0.98), rgba(12, 45, 34, 0.98)) !important;
  color: #f7fffb !important;
  border-color: rgba(121,255,194,0.55) !important;
  box-shadow:
    0 0 0 1px rgba(121,255,194,0.16),
    0 0 14px rgba(121,255,194,0.14),
    inset 0 0 12px rgba(121,255,194,0.08) !important;
  text-shadow: 0 0 8px rgba(121,255,194,0.16) !important;
}

.MuiPaginationItem-root.Mui-disabled {
  background: rgba(22, 28, 26, 0.82) !important;
  color: rgba(200, 220, 212, 0.35) !important;
  border-color: rgba(121,255,194,0.08) !important;
  box-shadow: none !important;
}

.MuiPaginationItem-icon {
  color: #98ffd0 !important;
  filter: drop-shadow(0 0 6px rgba(121,255,194,0.24)) !important;
}

.MuiStack-root.css-1uwir8f {
  background: rgba(9, 24, 19, 0.72) !important;
  border: 1px solid rgba(121,255,194,0.16) !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 4px 12px rgba(0,0,0,0.14) !important;
}

.MuiStack-root.css-1uwir8f .MuiBox-root {
  color: #d9ffec !important;
}

.MuiInputBase-input {
  color: #f1fff9 !important;
  caret-color: #8effc8 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* ------------------------------
   评论区
   注意：不改布局属性
------------------------------ */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
  background:
    linear-gradient(180deg, rgba(7, 18, 15, 0.985), rgba(8, 20, 17, 0.985)) !important;
  border-top: 1px solid rgba(121,255,194,0.18) !important;
  box-shadow:
    0 -12px 30px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;
  color: #eefff6 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(121,255,194,0.05), transparent 24%),
    radial-gradient(circle at 80% 18%, rgba(121,255,194,0.03), transparent 22%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.018) 0 1px,
      transparent 1px 4px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(121,255,194,0.02) 0 1px,
      transparent 1px 5px
    ),
    linear-gradient(180deg, rgba(7, 18, 15, 0.985), rgba(8, 20, 17, 0.985)) !important;
}

/* 标题与评分区 */
div.text-lg.font-bold {
  color: #f1fff8 !important;
  text-shadow:
    0 0 10px rgba(121,255,194,0.12) !important;
  letter-spacing: 0.03em !important;
}

p.MuiTypography-body1.text-grey-600,
div.text-xs.text-grey-600 {
  color: #b7d9ca !important;
}

span.MuiRating-root {
  filter: drop-shadow(0 0 8px rgba(121,255,194,0.08)) !important;
}

span.MuiRating-iconEmpty svg {
  color: rgba(173, 214, 194, 0.34) !important;
  stroke: rgba(173, 214, 194, 0.42) !important;
}

span.MuiRating-iconFilled svg {
  color: #8effc8 !important;
  stroke: #bffff0 !important;
  filter: drop-shadow(0 0 8px rgba(121,255,194,0.42)) !important;
}

span.text-orange-500 {
  color: #9dffd5 !important;
  text-shadow: 0 0 8px rgba(121,255,194,0.18) !important;
  font-weight: 700 !important;
}

/* 评论输入框 */
div.flex.flex-col.border-gray-200 {
  background: rgba(10, 24, 20, 0.8) !important;
  border: 1px solid rgba(121,255,194,0.16) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 8px 20px rgba(0,0,0,0.2) !important;
}

textarea.rc-textarea {
  background: transparent !important;
  color: #effff7 !important;
  caret-color: #8effc8 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

textarea.rc-textarea::placeholder {
  color: rgba(192, 228, 211, 0.58) !important;
}

/* ------------------------------
   评论输入框、字数统计、发送按钮
------------------------------ */
div.bg-gray-100.text-gray-500 {
  background:
    linear-gradient(180deg, rgba(11, 28, 23, 0.92), rgba(8, 21, 17, 0.92)) !important;
  color: #bfe8d4 !important;
  border-top: 1px solid rgba(121,255,194,0.12) !important;
  text-shadow: 0 0 6px rgba(121,255,194,0.05) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

div.cursor-pointer.group.flex.items-center.justify-center {
  background:
    linear-gradient(180deg, rgba(24, 74, 56, 0.98), rgba(13, 48, 36, 0.98)) !important;
  color: #f4fff9 !important;
  border: 1px solid rgba(121,255,194,0.38) !important;
  border-radius: 14px !important;
  box-shadow:
    0 8px 22px rgba(0,0,0,0.26),
    0 0 14px rgba(121,255,194,0.12),
    inset 0 0 0 1px rgba(220,255,239,0.06) !important;
  transition: all 0.22s ease !important;
  position: relative;
  overflow: hidden;
}

div.cursor-pointer.group.flex.items-center.justify-center::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(121,255,194,0.04) 22%,
      rgba(221,255,239,0.12) 50%,
      rgba(121,255,194,0.04) 78%,
      transparent 100%);
  pointer-events: none;
}

div.cursor-pointer.group.flex.items-center.justify-center:hover {
  background:
    linear-gradient(180deg, rgba(31, 97, 72, 1), rgba(16, 59, 44, 1)) !important;
  border-color: rgba(121,255,194,0.6) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,0.3),
    0 0 18px rgba(121,255,194,0.18),
    inset 0 0 0 1px rgba(221,255,239,0.1) !important;
  transform: translateY(-1px) !important;
}

div[data-state="closed"] svg[data-icon="Send03"] {
  color: #cffff0 !important;
  stroke: #cffff0 !important;
  filter: drop-shadow(0 0 8px rgba(121,255,194,0.45)) !important;
  transition: transform 0.22s ease, filter 0.22s ease !important;
}

div.cursor-pointer.group.flex.items-center.justify-center:hover
  div[data-state="closed"] svg[data-icon="Send03"] {
  transform: translateX(1px) scale(1.05) !important;
  filter: drop-shadow(0 0 12px rgba(121,255,194,0.58)) !important;
}

/* ------------------------------
   分割线、排序按钮
------------------------------ */
div.style_divider__mW0YX {
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(121,255,194,0.1) 12%,
      rgba(121,255,194,0.42) 50%,
      rgba(121,255,194,0.1) 88%,
      transparent 100%) !important;
  box-shadow: 0 0 10px rgba(121,255,194,0.1) !important;
}

.MuiStack-root.css-1dmzxoz {
  background: rgba(9, 24, 19, 0.46) !important;
  border: 1px solid rgba(121,255,194,0.12) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 8px 18px rgba(0,0,0,0.16) !important;
}

button.MuiButton-containedPrimary,
button.MuiButton-outlinedPrimary {
  border-radius: 12px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  transition: all 0.2s ease !important;
}

button.MuiButton-containedPrimary {
  background:
    linear-gradient(180deg, rgba(27, 82, 62, 0.98), rgba(14, 53, 39, 0.98)) !important;
  color: #f5fff9 !important;
  border: 1px solid rgba(121,255,194,0.46) !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,0.22),
    0 0 14px rgba(121,255,194,0.14) !important;
  text-shadow: 0 0 8px rgba(121,255,194,0.14) !important;
}

button.MuiButton-containedPrimary:hover {
  background:
    linear-gradient(180deg, rgba(35, 104, 78, 1), rgba(18, 65, 49, 1)) !important;
  border-color: rgba(121,255,194,0.62) !important;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.28),
    0 0 18px rgba(121,255,194,0.18) !important;
}

button.MuiButton-outlinedPrimary {
  background: rgba(10, 27, 22, 0.84) !important;
  color: #ddfff0 !important;
  border: 1px solid rgba(121,255,194,0.22) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 6px 16px rgba(0,0,0,0.18) !important;
}

button.MuiButton-outlinedPrimary:hover {
  background: rgba(14, 38, 31, 0.96) !important;
  color: #f5fff9 !important;
  border-color: rgba(121,255,194,0.42) !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,0.24),
    0 0 12px rgba(121,255,194,0.1) !important;
}

/* ------------------------------
   评论列表与评论项
------------------------------ */
div.p-3.overflow-y-auto {
  scrollbar-color: rgba(121,255,194,0.5) rgba(8,20,16,0.8) !important;
  scrollbar-width: thin !important;
}

div.p-3.overflow-y-auto::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

div.p-3.overflow-y-auto::-webkit-scrollbar-track {
  background: rgba(8,20,16,0.72) !important;
  border-radius: 999px !important;
}

div.p-3.overflow-y-auto::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg, rgba(41,110,83,0.95), rgba(19,66,49,0.95)) !important;
  border: 2px solid rgba(8,20,16,0.72) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 10px rgba(121,255,194,0.12) !important;
}

div.group.ml-0 {
  background:
    linear-gradient(180deg, rgba(10, 24, 20, 0.74), rgba(8, 19, 16, 0.72)) !important;
  border: 1px solid rgba(121,255,194,0.1) !important;
  border-radius: 16px !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,0.16),
    inset 0 0 0 1px rgba(255,255,255,0.015) !important;
  transition: all 0.22s ease !important;
  position: relative;
  overflow: hidden;
}

div.group.ml-0::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.012) 0 1px,
      transparent 1px 4px
    );
  pointer-events: none;
  opacity: 0.9;
}

div.group.ml-0:hover {
  border-color: rgba(121,255,194,0.24) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.22),
    0 0 14px rgba(121,255,194,0.06) !important;
}

/* 头像 */
div.group img.rounded-full {
  border: 1px solid rgba(121,255,194,0.26) !important;
  box-shadow:
    0 0 0 3px rgba(121,255,194,0.04),
    0 0 14px rgba(121,255,194,0.08) !important;
  background: rgba(10, 24, 20, 0.8) !important;
}

/* 用户名、你的标签、内容 */
div.text-sm.text-grey-600 span.font-bold {
  color: #effff7 !important;
  text-shadow: 0 0 8px rgba(121,255,194,0.1) !important;
  font-weight: 700 !important;
}

span.text-\[10px\] {
  background: rgba(121,255,194,0.12) !important;
  color: #bfffe4 !important;
  border: 1px solid rgba(121,255,194,0.16) !important;
  border-radius: 999px !important;
  padding: 2px 6px !important;
  text-shadow: none !important;
}

div.break-all {
  color: #e8fff3 !important;
  line-height: 1.72 !important;
  text-shadow: 0 0 6px rgba(121,255,194,0.04) !important;
  word-break: break-word !important;
}

/* 点赞、回复 */
button.text-gray-400 {
  background: rgba(10, 26, 21, 0.78) !important;
  color: #c4ead8 !important;
  border: 1px solid rgba(121,255,194,0.12) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.015),
    0 4px 10px rgba(0,0,0,0.12) !important;
  transition: all 0.2s ease !important;
}

button.text-gray-400:hover {
  background: rgba(16, 40, 33, 0.96) !important;
  color: #effff7 !important;
  border-color: rgba(121,255,194,0.28) !important;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.18),
    0 0 10px rgba(121,255,194,0.08) !important;
}

button.text-gray-400 svg {
  color: #93ffd0 !important;
  stroke: #93ffd0 !important;
  filter: drop-shadow(0 0 6px rgba(121,255,194,0.22)) !important;
}

span.cursor-pointer {
  color: #9dffd6 !important;
  text-shadow: 0 0 8px rgba(121,255,194,0.08) !important;
  transition: color 0.2s ease, text-shadow 0.2s ease !important;
}

span.cursor-pointer:hover {
  color: #dffff1 !important;
  text-shadow: 0 0 10px rgba(121,255,194,0.18) !important;
}

/* 回复区域 */
div.ml-8.border-l {
  border-left: 1px solid rgba(121,255,194,0.18) !important;
  background:
    linear-gradient(90deg, rgba(121,255,194,0.03), transparent 18%) !important;
}

/* ------------------------------
   输入区聚焦强化（不动布局）
------------------------------ */
#ai-chat-bottom-input:focus-within,
div.flex.flex-col.border-gray-200:focus-within {
  border-color: rgba(121,255,194,0.42) !important;
  box-shadow:
    0 0 0 1px rgba(121,255,194,0.12),
    0 0 18px rgba(121,255,194,0.1),
    0 12px 30px rgba(0,0,0,0.28) !important;
}

/* ------------------------------
   额外心电线装饰：顶部与评论标题区轻点缀
------------------------------ */
div.text-lg.font-bold::after {
  content: " ─╱╲╱─╲╱╲─" !important;
  color: rgba(121,255,194,0.72) !important;
  letter-spacing: 0.08em !important;
  margin-left: 8px !important;
  text-shadow: 0 0 8px rgba(121,255,194,0.22) !important;
}

/* ------------------------------
   分页输入框视觉统一
------------------------------ */
.MuiInputBase-input::placeholder {
  color: rgba(190, 233, 213, 0.54) !important;
}

/* ------------------------------
   评论区文字可读性兜底
------------------------------ */
div.text-sm.text-grey-600,
div.text-xs.text-grey-600,
p.MuiTypography-body1.text-grey-600,
div.break-all,
span.cursor-pointer,
button.text-gray-400,
div.bg-gray-100.text-gray-500 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}