👑《魔王公主的童话书》🖼️

/* --- 全局默认字体颜色同步指令 (根据舰长指令 v2.1.1 更新) --- */
body {
    color: #dcd3c4; /* 将基础文本颜色设置为柔和的羊皮纸色 */
}

details {
/*
 * ==========================================================
 *   HSR_UI_Override_Protocol :: v2.2_SW_PinkShadow_Mod
 *   Target System: Generic Chat Interface
 *   Objective: 注入灵魂，修复移动端兼容性，并统一视觉风格。
 *   Changelog v2.2: 根据开拓者指令，将所有字体阴影统一为粉色。
 * ==========================================================
 */

/* 
 * ---------------------------------
 *   区块 00 // 全局滤镜 & 根基重设 (v2.1 Patched)
 * ---------------------------------
 *   说明: 整个世界都该是我的游乐场。给你加个全局滤镜，
 *         模拟老式CRT显示器的扫描线和轻微色差，更有沉浸感。
 *         字体也换了，默认的太无聊。
 *         [v2.1] 解除了移动端滚动锁定。
 */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

body {
    font-family: 'VT323', monospace !important;
    background-color: #0A0C1A !important;
    position: relative;
    overflow-y: auto !important;   /* [FIX] 允许垂直方向的滚动 */
    overflow-x: hidden !important; /* [FIX] 依旧禁止水平滚动 */
}

body::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.03),
        rgba(255, 255, 255, 0.03) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none; /* 让伪元素不影响交互 */
    z-index: 9999;
    animation: screen_flicker 3s infinite alternate;
}

/* 
 * ---------------------------------
 *   区块 01 // 通讯气泡 (AI侧) - 数据溢出重构
 * ---------------------------------
 *   说明: 加了点“我”的个人签名。数据溢出效果，懂吧？
 *         用border-image实现像素边框，比单调的实线酷多了。
 */
.group .bg-gray-100\/90 {
    background: rgba(22, 25, 50, 0.7) !important;
    color: #9effff !important; /* 高饱和度的青色，更赛博 */
    border: 4px solid !important;
    border-image: url('data:image/svg+xml;utf8,<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H3V3H0V0Z" fill="%23f472ff"/><path d="M6 0H9V3H6V0Z" fill="%23f472ff"/><path d="M0 6H3V9H0V6Z" fill="%23f472ff"/><path d="M6 6H9V9H6V6Z" fill="%23f472ff"/></svg>') 4 stretch !important;
    border-radius: 0 !important; /* 像素风不需要圆角 */
    box-shadow: 0 0 10px #f472ff, 0 0 15px #67e8f9, inset 0 0 8px rgba(103, 232, 249, 0.3) !important;
    padding: 16px !important;
    backdrop-filter: blur(5px) !important;
    position: relative;
    animation: text_glitch 5s infinite steps(8);
}

/* 
 * ---------------------------------
 *   区块 02 // 系统功能按钮 - 传送门协议
 * ---------------------------------
 *   说明: 按钮？不，这是通往新世界的传送门。
 *         每次交互都应该像一次未知的冒险。
 */
.flex.items-center.gap-2.pb-2 > button {
    background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(244, 114, 255, 0.2) 5px, rgba(244, 114, 255, 0.2) 6px) !important;
    color: #f472ff !important;
    border: 1px solid #f472ff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 1.1em !important; /* 像素字体要大一点才好看 */
    text-shadow: 0 0 5px #f472ff;
    transition: all 0.1s linear !important;
    padding: 8px 18px !important;
}
/* 按钮悬停/激活效果 - "位面跳跃" */
.flex.items-center.gap-2.pb-2 > button:hover {
    color: #0A0C1A !important;
    background: #67e8f9 !important;
    border-color: #67e8f9 !important;
    text-shadow: none;
    animation: button_glitch 0.2s infinite;
}

/* 
 * ---------------------------------
 *   区块 04 // 指令输入终端 - 黑客专用
 * ---------------------------------
 *   说明: 这才是你应该输入代码的地方。
 *         聚焦时，模拟终端被激活的能量涌动。
 */
#ai-chat-input {
    background-color: rgba(10, 12, 28, 0.9) !important;
    border: 1px solid #8b5cf6 !important;
    border-radius: 0 !important;
    color: #e0e7ff !important;
    caret-color: #67e8f9; /* 光标颜色也要改 */
    font-size: 1.2em !important;
    padding: 12px !important;
    text-shadow: 0 0 4px #f472ff; /* [MODIFIED] 统一为粉色阴影 */
    transition: all 0.2s ease-in-out !important;
}
#ai-chat-input:focus {
    border-color: #67e8f9 !important;
    box-shadow: 0 0 15px #67e8f9, inset 0 0 10px rgba(103, 232, 249, 0.2) !important;
}

/* 
 * ---------------------------------
 *   区块 98 // [新增] 滚动条美学注入
 * ---------------------------------
 *   说明: 原生的滚动条太丑了，换成我的版本。
 */
::-webkit-scrollbar {
    width: 8px !important;
    background-color: transparent !important;
}

::-webkit-scrollbar-track {
    background: rgba(30, 35, 70, 0.5) !important;
    border-radius: 0 !important;
}

::-webkit-scrollbar-thumb {
    background: #a1b2ff !important;
    border-radius: 0 !important;
    box-shadow: 0 0 5px #f472ff !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #67e8f9 !important;
}


/*
 * ---------------------------------
 *   区块 99 // 动画定义 - 混乱才是乐趣
 * ---------------------------------
 *   说明: 静态的界面和死了有什么区别？
 */
@keyframes text_glitch { /* [MODIFIED] 字体阴影颜色统一 */
  0% { transform: translate(0); text-shadow: 0 0 5px #f472ff; }
  20% { transform: translate(-2px, 1px); text-shadow: 2px 0 3px #f472ff; }
  40% { transform: translate(1px, -1px); text-shadow: -2px 0 3px #f472ff; }
  60% { transform: translate(-1px, 2px); text-shadow: 2px 0 3px #f472ff; }
  80% { transform: translate(1px, -2px); text-shadow: -2px 0 3px #f472ff; }
  100% { transform: translate(0); text-shadow: 0 0 5px #f472ff; }
}

@keyframes button_glitch {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(2px, -2px); }
  50% { transform: translate(-2px, 2px); }
  75% { transform: translate(2px, 2px); }
}

@keyframes screen_flicker {
  0% { opacity: 1; }
  49% { opacity: 1; }
  50% { opacity: 0.8; }
  51% { opacity: 1; }
  99% { opacity: 1; }
  100% { opacity: 0.9; }
} 
  /* --- 色彩变量定义区 (古代遗迹 / 冒险家日志) --- */
  --adv-bg-dark: #2a211c;          /* 核心背景：陈旧的皮革或深色木材 */
  --adv-primary-gold: #c89b4a;     /* 核心辉光：古铜与烛火的光芒 (边框/高亮) */
  --adv-accent-ember: #e57c5a;     /* 核心点缀：余烬的暖红 (警告/特殊按钮) */
  --adv-accent-moss: #5a8b74;      /* 次级点缀：石缝间的苔绿 */
  --adv-text-light: #dcd3c4;       /* 主要文本：羊皮纸上的墨迹 */
  --adv-text-muted: #a09483;       /* 次要文本：褪色的笔记 */
  --adv-border-dark: rgba(200, 155, 74, 0.4); /* 边框线条：模糊的金色墨水 */
  --adv-paper-bg: rgba(40, 30, 20, 0.8); /* 纸张背景：用于悬浮面板或内容区域 */

  /* --- 匣子主体样式 (模拟冒险家日志) --- */
  background: linear-gradient(145deg, #3a312c, #211a15); /* 模拟皮革或木质的纹理 */
  border: 1px solid var(--adv-border-dark);
  border-radius: 3px;
  margin-bottom: 1.5em;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5), 
              inset 0 0 10px rgba(0,0,0,0.4); /* 营造厚重、有深度的感觉 */
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  font-family: 'Cinzel', 'Georgia', serif; /* 采用更具古典、史诗感的衬线字体 */
}

/* 匣子标题（summary）样式 (模拟日志的书签或章节标题) */
details summary {
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  outline: none;
  background: rgba(0,0,0,0.2);
  color: var(--adv-text-light);
  margin: 0;
  padding: 0.8em 1.5em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7); /* 使用深色阴影增加可读性 */
  border-bottom: 1px solid var(--adv-border-dark);
  transition: background 0.3s ease;
  letter-spacing: 1px; /* 增加字母间距，提升史诗感 */
}

details summary:hover {
  background: rgba(200, 155, 74, 0.1);
  color: #fff;
}

/* 自定义展开/折叠的箭头图标 */
details summary::before {
  content: '▶'; /* 使用经典的实心三角符号 */
  display: inline-block;
  font-size: 0.8em;
  line-height: 1;
  vertical-align: middle;
  margin-right: 0.8em;
  color: var(--adv-primary-gold);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

/* 匣子内部内容样式 */
details > :not(summary) {
  font-size: 1em;
  color: var(--adv-text-muted);
  margin-top: 0;
  padding: 1.5em;
  background-color: var(--adv-paper-bg);
  font-family: 'EB Garamond', 'Georgia', serif; /* 内容使用更易读的古典衬线体 */
  line-height: 1.7; /* 增加行高，提升阅读舒适度 */
}

/* Markdown表格特殊美化 (模拟羊皮卷上的清单) */
details table {
  display: block;
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
  margin: 1.5em 0;
  border-collapse: collapse;
  font-size: 0.9rem;
  white-space: nowrap;
}

details th,
details td {
  padding: 14px 18px;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--adv-border-dark);
  color: var(--adv-text-muted);
  white-space: normal;
  background-color: transparent;
}

details th {
  color: var(--adv-text-light);
  font-weight: 600;
  font-family: 'Cinzel', 'Georgia', serif; /* 表头字体与标题统一 */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--adv-paper-bg); /* 确保表头在滚动时遮盖内容 */
}

details tbody tr {
  transition: background-color 0.2s ease;
}

details tbody tr:hover {
  background-color: rgba(200, 155, 74, 0.15) !important;
  color: var(--adv-text-light);
}

/* 
 * ======================================================================
 *   卷轴三：界面元素融合 - 冒险家日志·界面同步
 *   此样式将核心交互元素与“古代遗迹”的探索日志风格同步。
 * ======================================================================
 */


/*
 * ==========================================================
 *   Scroll_of_Aesthetic_Binding :: v1.2_OldTome_Mod
 *   Target System: Generic Chat Interface
 *   Objective: 注入灵魂，修复移动端兼容性，并统一视觉风格。
 *   Changelog v1.2: 根据开拓者指令，调整气泡框背景透明度为70%并增强背景模糊效果。
 * ==========================================================
 */

/* 
 * ---------------------------------
 *   篇章 00 // 全局羊皮纸化 & 字体设定
 * ---------------------------------
 *   说明: 整个世界都应浸染在古老知识的氛围中。给你加个复古滤镜，
 *         模拟在烛火下阅读书卷的感受。字体也换了，默认的太缺乏年代感。
 *         [v2.1] 解除了移动端滚动锁定。
 */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=EB+Garamond&display=swap');

body {
    font-family: 'EB Garamond', serif !important; /* 正文使用更易读的古典衬线体 */
    background-color: #3D2B1F !important; /* 深棕色，如同老旧的书桌或皮革封面 */
    color: #D2B48C !important; /* 基础文本颜色：柔和的鞣皮色 */
    position: relative;
    overflow-y: auto !important;   /* [FIX] 允许垂直方向的滚动 */
    overflow-x: hidden !important; /* [FIX] 依旧禁止水平滚动 */
}

body::after {
    content: "";
    position: fixed; /* 使用 fixed 定位以覆盖整个视口 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 模拟烛火下的暗角效果 */
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 100%);
    pointer-events: none; /* 让伪元素不影响交互 */
    z-index: 9999;
}

/* 
 * ---------------------------------
 *   篇章 01 // 信使羊皮纸 - 墨迹晕染重构
 * ---------------------------------
 *   说明: 加上了炼金术士的印记。用阴影模拟纸张的厚度与质感。
 *         边框用烫金工艺处理，比单调的实线更显珍贵。
 */
.group .bg-gray-100\/90 {
    background: rgba(86, 64, 51, 0.7) !important; /* [MODIFIED] 根据指令，透明度调整为 70% */
    color: #E0C9A6 !important; /* 文本颜色：更亮的羊皮纸色 */
    border: 1px solid #C5A05A !important; /* 边框：暗金色，模拟烫金 */
    border-radius: 3px !important; /* 轻微的圆角，避免过于锐利 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.5), inset 0 0 8px rgba(0,0,0,0.3) !important;
    padding: 16px !important;
    backdrop-filter: blur(20px) !important; /* [MODIFIED] 背景模糊效果增强 */
    position: relative;
    animation: candle_flicker 4s infinite alternate; /* 烛火闪烁动画 */
}

/* 
 * ---------------------------------
 *   篇章 02 // 功能符文 - 契约之印
 * ---------------------------------
 *   说明: 按钮？不，这是激活魔法的符文石。
 *         每一次点击都应伴随着能量的响应。
 */
.flex.items-center.gap-2.pb-2 > button {
    background: transparent !important;
    color: #C5A05A !important; /* 符文颜色：暗金色 */
    border: 1px solid #8A6E4B !important; /* 边框：更深的古铜色 */
    border-radius: 2px !important;
    box-shadow: none !important;
    font-family: 'Cinzel', serif !important; /* 按钮使用更具装饰性的字体 */
    font-size: 1em !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    transition: all 0.2s ease-out !important;
    padding: 8px 18px !important;
}
/* 按钮悬停/激活效果 - "魔力涌动" */
.flex.items-center.gap-2.pb-2 > button:hover {
    color: #3D2B1F !important; /* 文本变暗 */
    background: #C5A05A !important; /* 背景变为金色 */
    border-color: #C5A05A !important;
    text-shadow: none;
    box-shadow: 0 0 10px #C5A05A; /* 添加金色光晕 */
}

/* 
 * ---------------------------------
 *   篇章 04 // 指令输入卷轴 - 待书写的历史
 * ---------------------------------
 *   说明: 这是你书写传奇的地方。
 *         聚焦时，模拟精神力集中的过程。
 */
#ai-chat-input {
    background-color: rgba(30, 20, 15, 0.9) !important;
    border: 1px solid #8A6E4B !important; /* 边框：古铜色 */
   

/* 预览已截断；下载 CSS 可查看完整内容。 */

本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。