/* ================================================
   格林巴德 · 涂鸦童话 × 波普轻纸质感 · 完整版
   色板参考：底 #f6f2e8 深纸 #efeadd 墨 #302b23
   红 #d64553 黄 #e0a01a 绿 #3ba05a 蓝 #3f52c4 粉 #dd6478
   ================================================ */

/* ==================== 卡片基础 · 多层纸感堆叠 ==================== */
.card {
  position: relative;
  margin: 34px 0;
  padding: 24px 22px 20px 22px;
  background-color: #f6f2e8;
  background-image:
    radial-gradient(ellipse 60% 40% at 18% 12%, rgba(255,240,210,0.38) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 82% 88%, rgba(180,140,80,0.07) 0%, transparent 60%),
    repeating-linear-gradient(91deg, rgba(160,130,70,0.022) 0px, rgba(160,130,70,0.022) 1px, transparent 2px, transparent 5px),
    repeating-linear-gradient(178deg, rgba(120,90,50,0.018) 0px, transparent 3px, transparent 7px),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.3 0 0 0 0 0.15 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(178deg, #f6f2e8 0%, #efeadd 100%);
  border: 2.5px solid #302b23;
  border-right-width: 3px;
  border-bottom-width: 3.5px;
  border-radius: 6px 12px 5px 10px;
  box-shadow:
    3px 4px 0 #302b23,
    3px 4px 0 4px rgba(48,43,35,0.04),
    inset 0 0 32px rgba(180,140,80,0.035);
  color: #2c2820;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14.5px;
  line-height: 1.78;
  transition: box-shadow 0.35s ease, transform 0.3s ease;
}

.card:hover {
  box-shadow:
    5px 6px 0 #302b23,
    5px 6px 0 4px rgba(48,43,35,0.05),
    inset 0 0 32px rgba(180,140,80,0.035);
}

/* 右上角 · 折角 */
.card::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 22px;
  height: 22px;
  background: linear-gradient(225deg,
    transparent 46%,
    #302b23 46%, #302b23 50%,
    #e5dabe 50%, #d4c898 100%);
  border-radius: 0 12px 0 6px;
  z-index: 2;
}

/* 左上角 · 和纸胶带（每张卡片都有一小截） */
.card::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 26px;
  width: 58px;
  height: 18px;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.18) 0px, rgba(255,255,255,0.18) 3px,
      transparent 3px, transparent 7px),
    linear-gradient(180deg, rgba(0,0,0,0.1) 0%, transparent 35%);
  background-color: #e6b8b8;
  border-top: 1.5px dashed rgba(48,43,35,0.38);
  border-bottom: 1.5px dashed rgba(48,43,35,0.38);
  box-shadow: 1px 1px 3px rgba(48,43,35,0.15);
  transform: rotate(-3deg);
  opacity: 0.88;
  z-index: 1;
}

/* ==================== 每类卡片的左边缘彩条 & 胶带色变化 ==================== */
.card.situation   { border-left: 6px solid #3f52c4; }
.card.protagonist { border-left: 6px solid #d64553; }
.card.companion   { border-left: 6px solid #dd6478; }
.card.npc         { border-left: 6px solid #3ba05a; }
.card.journey     { border-left: 6px solid #e0a01a; }
.card.story       { border-left: 6px solid #3f52c4; }
.card.memory      { border-left: 6px solid #d64553; }
.card.action      { border-left: 6px solid #3ba05a; }

.card.situation::after   { background-color: #b8c4e8; }
.card.protagonist::after { background-color: #e8b8b8; }
.card.companion::after   { background-color: #eec4cd; }
.card.npc::after         { background-color: #b8d8b8; }
.card.journey::after     { background-color: #ecd8a0; }
.card.story::after       { background-color: #c0c8e5; }
.card.memory::after      { background-color: #e5b8b8; }
.card.action::after      { background-color: #bcd8b8; }

/* ==================== summary · 标题行 ==================== */
.card summary {
  padding: 6px 0 14px 0;
  margin: 0 0 14px 0;
  font-weight: 700;
  font-size: 15.5px;
  color: #2c2820;
  cursor: pointer;
  list-style: none;
  outline: none;
  position: relative;
  border-bottom: 2px dashed #b8a988;
  user-select: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.card summary::-webkit-details-marker { display: none; }
.card summary::marker { content: ""; }
.card summary:hover { color: #1a1712; }

.card[open] > summary {
  border-bottom: 2.5px solid #302b23;
  margin-bottom: 16px;
}

/* summary 展开箭头 */
.card summary > span.arrow, /* 兼容 */
.card summary::after {
  content: "▼";
  float: right;
  font-size: 10.5px;
  color: #8a7d5f;
  padding: 3px 7px;
  border: 1.5px solid #b8a988;
  border-radius: 3px 6px 3px 5px;
  background: rgba(255,251,238,0.5);
  transform: rotate(-90deg);
  transition: transform 0.3s ease, color 0.2s ease, border-color 0.2s ease;
  margin-top: 2px;
}
.card[open] > summary::after {
  transform: rotate(0deg);
  color: #d64553;
  border-color: #d64553;
}

/* ==================== 波普标签 · 核心视觉锤 ==================== */
.card summary::before {
  display: inline-block;
  padding: 5px 12px 4px 12px;
  margin-right: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #fdf8ec;
  border: 2px solid #1e1a14;
  border-radius: 3px 7px 4px 6px;
  box-shadow:
    2px 2px 0 #1e1a14,
    inset 0 -2px 0 rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);
  vertical-align: middle;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.28);
  background-image: linear-gradient(172deg, rgba(255,255,255,0.22) 0%, transparent 45%, rgba(0,0,0,0.14) 100%);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card summary:hover::before {
  transform: rotate(0deg) translateY(-3px) scale(1.04) !important;
}

.card.situation summary::before   { content: "📍 此刻"; background-color: #3f52c4; transform: rotate(-5deg); }
.card.protagonist summary::before { content: "⚔ 旅人"; background-color: #d64553; transform: rotate(-4deg); }
.card.companion summary::before   { content: "🌟 同行"; background-color: #dd6478; transform: rotate(-6deg); }
.card.npc summary::before         { content: "👤 在场"; background-color: #3ba05a; transform: rotate(-3deg); }
.card.journey summary::before     { content: "🗺 旅途"; background-color: #e0a01a; color: #2c2820; text-shadow: 1px 1px 0 rgba(255,255,255,0.28); transform: rotate(-5deg); }
.card.story summary::before       { content: "📖 故事"; background-color: #3f52c4; transform: rotate(-4deg); }
.card.memory summary::before      { content: "🧠 记忆"; background-color: #d64553; transform: rotate(-7deg); }
.card.action summary::before      { content: "✋ 抉择"; background-color: #3ba05a; transform: rotate(-5deg); }

/* ==================== markdown 文本装饰 ==================== */
.card strong {
  color: #1e1a14;
  font-weight: 700;
  padding: 0 2px;
  background-image: linear-gradient(180deg,
    transparent 65%,
    rgba(224,160,26,0.38) 65%,
    rgba(224,160,26,0.38) 92%,
    transparent 92%);
}
.card em {
  color: #a04532;
  font-style: normal;
  font-weight: 600;
  padding: 0 1px 1px 1px;
  border-bottom: 2px dotted #d64553;
}

/* 列表 · 手绘符号 */
.card ul {
  list-style: none;
  padding-left: 8px;
  margin: 8px 0;
}
.card ul li {
  position: relative;
  padding-left: 22px;
  margin: 4px 0;
}
.card ul li::before {
  content: "✦";
  position: absolute;
  left: 2px;
  top: 1px;
  color: #d64553;
  font-size: 12px;
  font-weight: 900;
  transform: rotate(10deg);
}
.card ul ul li::before { content: "◆"; color: #e0a01a; font-size: 10px; transform: none; }
.card ul ul ul li::before { content: "▪"; color: #3ba05a; }

.card ol {
  padding-left: 24px;
  margin: 8px 0;
}
.card ol li {
  margin: 4px 0;
  padding-left: 4px;
}
.card ol li::marker {
  color: #d64553;
  font-weight: 800;
}

/* 分隔线 · 圆点 + 中心装饰 */
.card hr {
  border: none;
  height: 12px;
  background: radial-gradient(circle, #b8a988 2px, transparent 2.5px) 0 50% / 14px 12px repeat-x;
  margin: 16px 0;
  position: relative;
}
.card hr::after {
  content: "❋";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #d64553;
  background: #f6f2e8;
  padding: 0 10px;
  font-size: 13px;
}

/* ==================== 表格 · 涂鸦手账风 ==================== */
.card table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 10px 0;
  font-size: 13px;
  background:
    radial-gradient(ellipse at 22% 18%, rgba(255,240,210,0.38) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255,251,238,0.7) 0%, rgba(250,244,224,0.7) 100%);
  border: 2px solid #302b23;
  border-radius: 5px 8px 5px 7px;
  overflow: hidden;
  box-shadow:
    2px 2px 0 rgba(48,43,35,0.38),
    inset 0 0 20px rgba(180,140,80,0.05);
}
.card th {
  background: linear-gradient(180deg, #ede4cf 0%, #e0d3ae 100%);
  color: #2c2820;
  padding: 9px 11px;
  border-bottom: 2px solid #302b23;
  font-weight: 800;
  text-align: left;
  letter-spacing: 0.3px;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
}
.card th:not(:last-child) { border-right: 1px dashed #b8a988; }
.card td {
  padding: 8px 11px;
  border-bottom: 1px dashed #c5b895;
  color: #3a352b;
  transition: background 0.2s ease;
}
.card td:not(:last-child) { border-right: 1px dotted #d4c898; }
.card tr:last-child td { border-bottom: none; }
.card tr:nth-child(even) td { background: rgba(232,220,190,0.3); }
.card tr:hover td { background: rgba(224,160,26,0.13); }

/* ==================== 正文区 · 主叙事纸 ==================== */
.text {
  position: relative;
  margin: 34px 0;
  padding: 28px 30px 26px 44px;
  background-color: #faf6ea;
  background-image:
    radial-gradient(ellipse 55% 40% at 22% 15%, rgba(255,240,210,0.52) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 82% 85%, rgba(160,120,60,0.07) 0%, transparent 60%),
    repeating-linear-gradient(91deg, rgba(160,130,70,0.022) 0px, transparent 2px, transparent 6px),
    repeating-linear-gradient(178deg, rgba(120,90,50,0.015) 0px, transparent 3px, transparent 8px),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n2'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.3 0 0 0 0 0.15 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n2)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #faf6ea 0%, #f4efdf 100%);
  border: 2.5px solid #302b23;
  border-right-width: 3px;
  border-bottom-width: 3.5px;
  border-radius: 5px 10px 6px 9px;
  box-shadow:
    3px 4px 0 #302b23,
    3px 4px 0 4px rgba(48,43,35,0.045),
    inset 0 0 42px rgba(180,140,80,0.045);
  color: #2c2820;
  line-height: 2;
  font-size: 15.5px;
}

/* 左侧四色彩条 */
.text::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 20px;
  bottom: 20px;
  width: 5px;
  background: linear-gradient(180deg,
    #d64553 0%, #d64553 22%,
    #e0a01a 26%, #e0a01a 46%,
    #3ba05a 50%, #3ba05a 70%,
    #3f52c4 74%, #3f52c4 100%);
  border-radius: 3px;
  box-shadow: 1px 0 0 rgba(48,43,35,0.4), -1px 0 0 rgba(48,43,35,0.15);
}

/* 右上角描边星星 */
.text::after {
  content: "✦";
  position: absolute;
  top: -20px;
  right: 26px;
  font-size: 28px;
  color: #e0a01a;
  transform: rotate(18deg);
  text-shadow:
    -2px -2px 0 #302b23, 2px -2px 0 #302b23,
    -2px  2px 0 #302b23, 2px  2px 0 #302b23,
    3px 3px 0 rgba(48,43,35,0.3);
  z-index: 3;
}

.text p {
  margin: 0 0 16px 0;
  text-indent: 2em;
  color: #2c2820;
}
.text p:first-of-type { margin-top: 0; }
.text p:last-of-type  { margin-bottom: 0; }

/* 首字下沉 · 童话感 */
.text p:first-of-type::first-letter {
  float: left;
  font-size: 3.4em;
  line-height: 0.88;
  padding: 4px 10px 2px 0;
  margin: 4px 6px 0 0;
  color: #d64553;
  font-weight: 800;
  text-shadow: 2px 2px 0 #302b23;
  text-indent: 0;
}

.text strong {
  color: #1e1a14;
  font-weight: 700;
  background-image: linear-gradient(180deg,
    transparent 62%,
    rgba(224,160,26,0.42) 62%,
    rgba(224,160,26,0.42) 90%,
    transparent 90%);
  padding: 0 2px;
}
.text em {
  color: #a04532;
  font-style: normal;
  font-weight: 600;
  border-bottom: 2px dotted #d64553;
  padding-bottom: 1px;
}

/* ==================== 行动推荐 · 选项按钮化 ==================== */
.card.action ol {
  padding-left: 4px;
  list-style: none;
  counter-reset: choice;
}
.card.action ol li {
  counter-increment: choice;
  position: relative;
  padding: 12px 14px 12px 52px;
  margin: 10px 0;
  background:
    linear-gradient(178deg, rgba(255,251,238,0.75) 0%, rgba(248,240,215,0.75) 100%);
  border: 2px solid #302b23;
  border-radius: 5px 10px 5px 9px;
  box-shadow: 2.5px 2.5px 0 rgba(48,43,35,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease;
  cursor: pointer;
}
.card.action ol li:hover {
  transform: translate(-1.5px, -1.5px);
  box-shadow: 4px 4px 0 rgba(48,43,35,0.55);
  background: linear-gradient(178deg, #fffbee 0%, #fbf3d6 100%);
}
.card.action ol li::marker { content: ""; }
.card.action ol li::before {
  content: counter(choice);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(-4deg);
  width: 30px;
  height: 30px;
  line-height: 27px;
  text-align: center;
  color: #fdf8ec;
  background-color: #3ba05a;
  background-image: linear-gradient(172deg, rgba(255,255,255,0.22) 0%, transparent 45%, rgba(0,0,0,0.15) 100%);
  border: 2px solid #1e1a14;
  border-radius: 4px 7px 4px 6px;
  font-weight: 800;
  font-size: 14px;
  box-shadow: 1.5px 1.5px 0 #1e1a14;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
}
.card.action ol li:nth-child(2)::before { background-color: #d64553; }
.card.action ol li:nth-child(3)::before { background-color: #e0a01a; color: #2c2820; text-shadow: 1px 1px 0 rgba(255,255,255,0.28); }
.card.action ol li:nth-child(4)::before { background-color: #3f52c4; }
.card.action ol li:nth-child(5)::before { background-color: #dd6478; }

/* ==================== 记忆区 · 表格间距微调 ==================== */
.card.memory p + p { margin-top: 4px; }
.card.memory table { margin-bottom: 14px; }

/* ==================== 展开淡入动画 ==================== */
@keyframes cardUnfold {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card[open] > *:not(summary) {
  animation: cardUnfold 0.35s ease-out;
}

/* ==================== 移动端 ==================== */
@media (max-width: 640px) {
  .card {
    margin: 26px 0;
    padding: 20px 16px 16px 16px;
    font-size: 13.8px;
    border-radius: 5px 10px 4px 8px;
  }
  .card::after { width: 46px; left: 20px; }
  .card summary { font-size: 14px; padding: 4px 0 12px 0; }
  .card summary::before {
    font-size: 11px;
    padding: 3px 9px;
    margin-right: 9px;
    letter-spacing: 0.5px;
  }
  .card summary::after {
    font-size: 9.5px;
    padding: 2px 5px;
  }
  .card table { font-size: 12px; }
  .card th, .card td { padding: 6px 7px; }
  .card.action ol li {
    padding: 10px 12px 10px 44px;
    font-size: 13.5px;
  }
  .card.action ol li::before {
    width: 26px;
    height: 26px;
    line-height: 23px;
    font-size: 12.5px;
    left: 8px;
  }
  .text {
    margin: 26px 0;
    padding: 22px 20px 20px 36px;
    font-size: 14.5px;
    line-height: 1.9;
  }
  .text::before { left: 12px; width: 4px; }
  .text::after { font-size: 22px; top: -14px; right: 20px; }
  .text p:first-of-type::first-letter { font-size: 2.9em; }
}

@media (max-width: 400px) {
  .card { padding: 16px 12px 14px 12px; font-size: 13.4px; }
  .card::before { width: 18px; height: 18px; }
  .card::after { width: 40px; height: 15px; left: 16px; }
  .text { padding: 18px 15px 16px 30px; font-size: 14px; }
}

.text p:first-of-type::first-letter {
  all: unset;
}


/* ==================== 顶部栏 · 手账贴纸带 ==================== */
.sticky.w-full.top-0.flex.items-center {
  background:
    radial-gradient(ellipse 50% 60% at 20% 30%, rgba(255,240,210,0.42) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 80% 70%, rgba(180,140,80,0.08) 0%, transparent 60%),
    repeating-linear-gradient(91deg, rgba(160,130,70,0.022) 0px, transparent 2px, transparent 5px),
    linear-gradient(178deg, #f6f2e8 0%, #efeadd 100%) !important;
  border-bottom: 2.5px solid #302b23 !important;
  box-shadow: 0 3px 0 #302b23, 0 3px 0 4px rgba(48,43,35,0.04) !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

/* 模型选择器 · 波普标签样式 */
#ai-model-selector .group.flex.items-center {
  background: linear-gradient(178deg, #fffbee 0%, #f5edd6 100%) !important;
  border: 2px solid #302b23 !important;
  border-radius: 4px 8px 4px 7px !important;
  box-shadow: 2px 2px 0 #302b23 !important;
  padding: 3px 10px !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
}
#ai-model-selector .group.flex.items-center:hover {
  transform: translate(-1.5px, -1.5px) rotate(-1deg) !important;
  box-shadow: 3.5px 3.5px 0 #302b23 !important;
  background: linear-gradient(178deg, #fffdf3 0%, #faf0d8 100%) !important;
}
#ai-model-selector .truncate.text-\[13px\] {
  color: #2c2820 !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
}
#ai-model-selector .shrink-0.flex.items-center svg {
  color: #d64553 !important;
  transition: transform 0.3s ease !important;
}
#ai-model-selector .group.flex.items-center:hover svg {
  transform: translateY(1px) !important;
}

/* 顶部栏图标群 · 统一波普硬边 */
.sticky.w-full.top-0 svg.lucide-clock-8,
.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]) {
  color: #2c2820 !important;
  padding: 4px !important;
  background: linear-gradient(178deg, #fffbee 0%, #f0e6cc 100%) !important;
  border: 2px solid #302b23 !important;
  border-radius: 4px 7px 4px 6px !important;
  box-shadow: 1.5px 1.5px 0 #302b23 !important;
  box-sizing: content-box !important;
  transition: transform 0.25s 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 {
  transform: rotate(-6deg) scale(1.05) !important;
  color: #d64553 !important;
}

/* 历史记录未读小圆点 · 换成红色波普点 */
.sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden {
  background-color: #d64553 !important;
  border: 1.5px solid #302b23 !important;
  box-shadow: 1px 1px 0 #302b23 !important;
}

/* 音乐按钮（就算隐藏也备着） */
.sticky.w-full.top-0 button.MuiIconButton-root:has(svg.lucide-music-2) {
  background: linear-gradient(178deg, #fffbee 0%, #f0e6cc 100%) !important;
  border: 2px solid #302b23 !important;
  border-radius: 4px 7px 4px 6px !important;
  box-shadow: 1.5px 1.5px 0 #302b23 !important;
}
.sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2 {
  color: #3ba05a !important;
}

/* 设置按钮 · 带折角的贴纸 */
#header-setting-button {
  background: linear-gradient(178deg, #fffbee 0%, #f0e6cc 100%) !important;
  border: 2px solid #302b23 !important;
  border-radius: 4px 7px 4px 6px !important;
  box-shadow: 1.5px 1.5px 0 #302b23 !important;
  position: relative !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
#header-setting-button::after {
  content: "" !important;
  position: absolute !important;
  top: -1px !important;
  right: -1px !important;
  width: 8px !important;
  height: 8px !important;
  background: linear-gradient(225deg, transparent 45%, #302b23 45%, #302b23 55%, #e5dabe 55%) !important;
  border-radius: 0 6px 0 3px !important;
}
#header-setting-button:hover {
  transform: rotate(-4deg) translateY(-1px) !important;
}
#header-setting-button svg {
  color: #3f52c4 !important;
  transition: transform 0.4s ease !important;
}
#header-setting-button:hover svg {
  transform: rotate(60deg) !important;
}

/* ==================== 开场白选择器 · 手绘卡片 ==================== */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255,240,210,0.45) 0%, transparent 65%),
    linear-gradient(178deg, #fffbee 0%, #f5edd6 100%) !important;
  border: 2px solid #302b23 !important;
  border-radius: 5px 9px 4px 8px !important;
  box-shadow: 2px 2px 0 #302b23 !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
  color: #2c2820 !important;
  font-weight: 600 !important;
}
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover {
  transform: translate(-1.5px, -1.5px) rotate(-0.8deg) !important;
  box-shadow: 3.5px 3.5px 0 #302b23 !important;
}
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="SlidersH"] {
  color: #e0a01a !important;
}
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="ChevronDown"] {
  color: #d64553 !important;
  transition: transform 0.3s ease !important;
}
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover svg[data-icon="ChevronDown"] {
  transform: translateY(2px) !important;
}

/* ==================== 按钮栏 · 五色波普贴纸 ==================== */
#ai-mod-button2 button.MuiButton-root {
  background: linear-gradient(178deg, #fffbee 0%, #f0e6cc 100%) !important;
  border: 2px solid #302b23 !important;
  border-radius: 4px 8px 4px 7px !important;
  box-shadow: 2px 2px 0 #302b23 !important;
  color: #2c2820 !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
  text-transform: none !important;
}
#ai-mod-button2 button.MuiButton-root:hover {
  transform: translate(-1.5px, -1.5px) rotate(-1deg) !important;
  box-shadow: 3.5px 3.5px 0 #302b23 !important;
  background: linear-gradient(178deg, #fffdf3 0%, #faf0d8 100%) !important;
}
#ai-mod-button2 button.MuiButton-root:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 1px 1px 0 #302b23 !important;
}
#ai-mod-button2 button.MuiButton-root svg {
  color: #d64553 !important;
  transition: transform 0.3s ease !important;
}
#ai-mod-button2 button.MuiButton-root:hover svg {
  transform: rotate(-8deg) scale(1.08) !important;
}
/* 按钮群里循环换四种主色 */
#ai-mod-button2 button.MuiButton-root:nth-child(2) svg { color: #e0a01a !important; }
#ai-mod-button2 button.MuiButton-root:nth-child(3) svg { color: #3ba05a !important; }
#ai-mod-button2 button.MuiButton-root:nth-child(4) svg { color: #3f52c4 !important; }
#ai-mod-button2 button.MuiButton-root:nth-child(5) svg { color: #dd6478 !important; }

/* ==================== 底部栏 · 纸感输入区 ==================== */
.bg-gradient-to-t {
  background:
    radial-gradient(ellipse 50% 60% at 20% 80%, rgba(255,240,210,0.32) 0%, transparent 60%),
    linear-gradient(0deg, #f6f2e8 0%, #efeadd 60%, rgba(239,234,221,0) 100%) !important;
}

/* 输入框外层容器 */
#ai-chat-bottom-input {
  background:
    radial-gradient(ellipse at 15% 25%, rgba(255,240,210,0.48) 0%, transparent 65%),
    repeating-linear-gradient(91deg, rgba(160,130,70,0.022) 0px, transparent 2px, transparent 6px),
    linear-gradient(178deg, #fffbee 0%, #f4edd6 100%) !important;
  border: 2.5px solid #302b23 !important;
  border-radius: 6px 12px 5px 10px !important;
  box-shadow:
    2.5px 3px 0 #302b23,
    inset 0 0 20px rgba(180,140,80,0.05) !important;
  transition: box-shadow 0.3s ease !important;
}
#ai-chat-bottom-input:focus-within {
  box-shadow:
    3.5px 4px 0 #302b23,
    inset 0 0 20px rgba(180,140,80,0.05),
    0 0 0 3px rgba(224,160,26,0.28) !important;
}

/* 主输入框 */
#ai-chat-input {
  background: transparent !important;
  color: #2c2820 !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  caret-color: #d64553 !important;
}
#ai-chat-input::placeholder {
  color: #9c8f70 !important;
  font-style: italic !important;
  letter-spacing: 0.3px !important;
}
#ai-chat-input::selection {
  background: rgba(224,160,26,0.42) !important;
  color: #1e1a14 !important;
}

/* ==================== 分页栏 · 小卡片贴纸 ==================== */
.MuiPaginationItem-root {
  background: linear-gradient(178deg, #fffbee 0%, #f0e6cc 100%) !important;
  border: 2px solid #302b23 !important;
  border-radius: 4px 7px 4px 6px !important;
  box-shadow: 1.5px 1.5px 0 #302b23 !important;
  color: #2c2820 !important;
  font-weight: 700 !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease !important;
}
.MuiPaginationItem-root:hover {
  transform: translate(-1px, -1px) rotate(-1.5deg) !important;
  box-shadow: 2.5px 2.5px 0 #302b23 !important;
  background: linear-gradient(178deg, #fffdf3 0%, #faf0d8 100%) !important;
}
.MuiPaginationItem-root.Mui-selected {
  background: linear-gradient(178deg, #d64553 0%, #b83a48 100%) !important;
  color: #fdf8ec !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.28) !important;
  box-shadow: 2px 2px 0 #302b23, inset 0 -2px 0 rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.MuiPaginationItem-root.Mui-selected:hover {
  transform: translate(-1px, -1px) rotate(-2deg) !important;
  background: linear-gradient(178deg, #dd4d5b 0%, #c04150 100%) !important;
}
.MuiPaginationItem-root.Mui-disabled {
  background: repeating-linear-gradient(45deg, #ede4cf 0px, #ede4cf 4px, #e0d3ae 4px, #e0d3ae 8px) !important;
  color: #9c8f70 !important;
  box-shadow: 1px 1px 0 rgba(48,43,35,0.35) !important;
  opacity: 0.7 !important;
}
.MuiPaginationItem-icon {
  color: inherit !important;
}

/* 跳转输入区 */
.MuiStack-root.css-1uwir8f .MuiBox-root {
  color: #2c2820 !important;
  font-weight: 600 !important;
}
.MuiStack-root.css-1uwir8f .MuiInputBase-input {
  background: linear-gradient(178deg, #fffbee 0%, #f5edd6 100%) !important;
  border: 2px solid #302b23 !important;
  border-radius: 4px 7px 4px 6px !important;
  box-shadow: 1.5px 1.5px 0 #302b23 !important;
  color: #2c2820 !important;
  font-weight: 700 !important;
  text-align: center !important;
  transition: box-shadow 0.25s ease !important;
}
.MuiStack-root.css-1uwir8f .MuiInputBase-input:focus {
  box-shadow: 2.5px 2.5px 0 #302b23, 0 0 0 3px rgba(224,160,26,0.35) !important;
}

/* ==================== 评论区主容器 ==================== */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
  background:
    radial-gradient(ellipse 45% 30% at 15% 8%, rgba(255,240,210,0.42) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 85% 92%, rgba(180,140,80,0.06) 0%, transparent 60%),
    repeating-linear-gradient(91deg, rgba(160,130,70,0.022) 0px, transparent 2px, transparent 6px),
    repeating-linear-gradient(178deg, rgba(120,90,50,0.015) 0px, transparent 3px, transparent 8px),
    linear-gradient(180deg, #f6f2e8 0%, #efeadd 100%) !important;
}

/* 顶部标题 "评论(x)" */
div.text-lg.font-bold {
  color: #2c2820 !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  position: relative !important;
  padding-left: 14px !important;
}
div.text-lg.font-bold::before {
  content: "✦" !important;
  color: #d64553 !important;
  margin-right: 8px !important;
  font-size: 0.85em !important;
  display: inline-block !important;
  transform: rotate(12deg) !important;
}

/* ==================== 评分区 ==================== */
p.MuiTypography-body1.text-grey-600 {
  color: #5a4f3a !important;
  font-weight: 600 !important;
}
span.MuiRating-iconEmpty svg {
  color: #c5b895 !important;
  filter: drop-shadow(1px 1px 0 rgba(48,43,35,0.4)) !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
span.MuiRating-iconFilled svg {
  color: #e0a01a !important;
  filter: drop-shadow(1.5px 1.5px 0 #302b23) !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
span.MuiRating-root:hover span.MuiRating-iconFilled svg {
  transform: rotate(-8deg) scale(1.12) !important;
}
span.text-orange-500 {
  color: #d64553 !important;
  font-weight: 800 !important;
  background: linear-gradient(180deg, transparent 62%, rgba(224,160,26,0.4) 62%, rgba(224,160,26,0.4) 90%, transparent 90%) !important;
  padding: 0 3px !important;
}

/* ==================== 评论输入框 ==================== */
div.flex.flex-col.border-gray-200 {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(255,240,210,0.4) 0%, transparent 65%),
    linear-gradient(178deg, #fffbee 0%, #f4edd6 100%) !important;
  border: 2.5px solid #302b23 !important;
  border-radius: 6px 11px 5px 10px !important;
  box-shadow: 2.5px 3px 0 #302b23, inset 0 0 18px rgba(180,140,80,0.05) !important;
  transition: box-shadow 0.3s ease !important;
}
div.flex.flex-col.border-gray-200:focus-within {
  box-shadow: 3.5px 4px 0 #302b23, inset 0 0 18px rgba(180,140,80,0.05), 0 0 0 3px rgba(224,160,26,0.28) !important;
}
textarea.rc-textarea {
  background: transparent !important;
  color: #2c2820 !important;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  caret-color: #d64553 !important;
}
textarea.rc-textarea::placeholder {
  color: #9c8f70 !important;
  font-style: italic !important;
}

/* 字数统计 */
div.bg-gray-100.text-gray-500 {
  background: linear-gradient(178deg, #ede4cf 0%, #e0d3ae 100%) !important;
  color: #5a4f3a !important;
  border: 1.5px solid #b8a988 !important;
  border-radius: 3px 5px 3px 4px !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  padding: 2px 7px !important;
}

/* 发送评论按钮 · 主视觉锤 */
div.cursor-pointer.group.flex.items-center.justify-center {
  background: linear-gradient(178deg, #3ba05a 0%, #2f8548 100%) !important;
  background-image:
    linear-gradient(172deg, rgba(255,255,255,0.22) 0%, transparent 45%, rgba(0,0,0,0.15) 100%),
    linear-gradient(178deg, #3ba05a 0%, #2f8548 100%) !important;
  border: 2px solid #302b23 !important;
  border-radius: 5px 9px 5px 8px !important;
  box-shadow: 2px 2px 0 #302b23 !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease !important;
}
div.cursor-pointer.group.flex.items-center.justify-center:hover {
  transform: translate(-1.5px, -1.5px) rotate(-2deg) !important;
  box-shadow: 3.5px 3.5px 0 #302b23 !important;
}
div.cursor-pointer.group.flex.items-center.justify-center:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 1px 1px 0 #302b23 !important;
}
div[data-state="closed"] svg[data-icon="Send03"] {
  color: #fdf8ec !important;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.28)) !important;
  transition: transform 0.3s ease !important;
}
div.cursor-pointer.group.flex.items-center.justify-center:hover svg[data-icon="Send03"] {
  transform: translateX(2px) rotate(-8deg) !important;
}

/* ==================== 分割线 · 圆点手绘 ==================== */
div.style_divider__mW0YX {
  border: none !important;
  height: 12px !important;
  background: radial-gradient(circle, #b8a988 2px, transparent 2.5px) 0 50% / 14px 12px repeat-x !important;
  position: relative !important;
}
div.style_divider__mW0YX::after {
  content: "❋" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #d64553 !important;
  background: #f6f2e8 !important;
  padding: 0 10px !important;
  font-size: 13px !important;
}

/* ==================== 排序按钮 ==================== */
.MuiStack-root.css-1dmzxoz button.MuiButton-outlinedPrimary {
  background: linear-gradient(178deg, #fffbee 0%, #f0e6cc 100%) !important;
  border: 2px solid #302b23 !important;
  border-radius: 4px 8px 4px 7px !important;
  box-shadow: 1.5px 1.5px 0 #302b23 !important;
  color: #2c2820 !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0.4px !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease !important;
}
.MuiStack-root.css-1dmzxoz button.MuiButton-outlinedPrimary:hover {
  transform: translate(-1px, -1px) rotate(-1deg) !important;
  box-shadow: 2.5px 2.5px 0 #302b23 !important;
  background: linear-gradient(178deg, #fffdf3 0%, #faf0d8 100%) !important;
}
.MuiStack-root.css-1dmzxoz button.MuiButton-containedPrimary {
  background: linear-gradient(178deg, #3f52c4 0%, #33429e 100%) !important;
  background-image:
    linear-gradient(172deg, rgba(255,255,255,0.22) 0%, transparent 45%, rgba(0,0,0,0.15) 100%),
    linear-gradient(178deg, #3f52c4 0%, #33429e 100%) !important;
  border: 2px solid #302b23 !important;
  border-radius: 4px 8px 4px 7px !important;
  box-shadow: 2px 2px 0 #302b23 !important;
  color: #fdf8ec !important;
  font-weight: 800 !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.28) !important;
  text-transform: none !important;
  letter-spacing: 0.4px !important;
}
.MuiStack-root.css-1dmzxoz button.MuiButton-containedPrimary:hover {
  transform: translate(-1px, -1px) rotate(-1.5deg) !important;
  box-shadow: 3.5px 3.5px 0 #302b23 !important;
}

/* ==================== 评论列表 · 单条评论 ==================== */
div.p-3.overflow-y-auto {
  background: transparent !important;
}
div.group.ml-0 {
  position: relative !important;
  padding: 12px 14px !important;
  margin: 10px 0 !important;
  background:
    radial-gradient(ellipse at 18% 15%, rgba(255,240,210,0.35) 0%, transparent 65%),
    linear-gradient(178deg, #fffbee 0%, #f5edd6 100%) !important;
  border: 2px solid #302b23 !important;
  border-radius: 5px 10px 5px 9px !important;
  box-shadow: 2px 2px 0 rgba(48,43,35,0.42) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
div.group.ml-0:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 rgba(48,43,35,0.55) !important;
}

/* 头像 */
div.group img.rounded-full {
  border: 2px solid #302b23 !important;
  box-shadow: 1.5px 1.5px 0 #302b23 !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
div.group img.rounded-full:hover {
  transform: rotate(-8deg) scale(1.05) !important;
}

/* 用户名 */
div.text-sm.text-grey-600 span.font-bold {
  color: #1e1a14 !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
}

/* "（你）"标签 */
span.text-\[10px\] {
  background: linear-gradient(178deg, #d64553 0%, #b83a48 100%) !important;
  color: #fdf8ec !important;
  font-weight: 800 !important;
  padding: 2px 6px 1px 6px !important;
  border: 1.5px solid #302b23 !important;
  border-radius: 3px 5px 3px 4px !important;
  box-shadow: 1px 1px 0 #302b23 !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.25) !important;
  letter-spacing: 0.3px !important;
  display: inline-block !important;
  transform: rotate(-3deg) !important;
  margin-left: 4px !important;
}

/* 评论内容 */
div.break-all {
  color: #2c2820 !important;
  line-height: 1.75 !important;
  font-size: 14px !important;
}

/* 时间戳 */
div.text-xs.text-grey-600 {
  color: #8a7d5f !important;
  font-style: italic !important;
  font-size: 11.5px !important;
}

/* 点赞按钮 */
button.text-gray-400 {
  color: #8a7d5f !important;
  transition: transform 0.25s ease, color 0.2s ease !important;
}
button.text-gray-400:hover {
  color: #d64553 !important;
  transform: scale(1.15) rotate(-8deg) !important;
}
button.text-gray-400 svg {
  filter: drop-shadow(1px 1px 0 rgba(48,43,35,0.25)) !important;
}

/* 回复按钮 · 无边框文字 */
span.cursor-pointer {
  color: #3f52c4 !important;
  font-weight: 700 !important;
  border-bottom: 2px dotted #3f52c4 !important;
  padding-bottom: 1px !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}
span.cursor-pointer:hover {
  color: #d64553 !important;
  border-bottom-color: #d64553 !important;
}

/* 回复区域左边框 */
div.ml-8.border-l {
  border-left: 3px dashed #b8a988 !important;
  padding-left: 12px !important;
  margin-left: 24px !important;
  position: relative !important;
}
div.ml-8.border-l::before {
  content: "↳" !important;
  position: absolute !important;
  left: -12px !important;
  top: -2px !important;
  color: #d64553 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  background: #f6f2e8 !important;
  padding: 0 4px !important;
}