现代鬼修

/* ==============================================
   【现代鬼修 · 幽冥紫夜】沉浸式暗黑主题
   灵魂脉冲 · 阴气拖影 · 怨念光爪 · 鬼域封印
   新增：浮游鬼火 · 卡片虚化悬浮 · 按钮幽光呼吸
         · 血丝胎记纹 · 紫色caret · 列表鬼眼标记
         · 引用块鬼气 · 代码块怨念化 · 表格尸斑高亮
   背景为暗紫网格平铺，阴冷神秘氛围
   聊天区域强制不透明，直接复制全部代码即可使用
============================================== */

:root {
  --bg-main: #0a0812;
  --bg-card: rgba(20, 16, 28, 0.94);
  --bg-input: #14101e;
  --text-primary: #e8e0f0;
  --text-secondary: #a098c0;
  --neon-purple: #a070c0;
  --neon-ghost: #80d0ff;
  --neon-curse: #ff5080;
  --glow-soft: 0 0 14px rgba(160, 120, 220, 0.35);
  --glow-strong: 0 0 24px rgba(255, 80, 128, 0.5);
  --font-display: "ZCOOL KuaiLe", "STKaiti", "KaiTi", "Microsoft YaHei", sans-serif;
  --font-mono: 'Fira Code', monospace;
  font-size: 17px;
}

* {
  scrollbar-width: thin !important;
  scrollbar-color: var(--neon-purple) #0a0812 !important;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg-main) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  background-image:
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40 L80 40 M40 0 L40 80' stroke='%23a070c0' stroke-width='0.5' opacity='0.06'/%3E%3Ccircle cx='40' cy='40' r='3' fill='%2380d0ff' opacity='0.12'/%3E%3C/svg%3E"),
    radial-gradient(circle at 20% 30%, rgba(160,112,220,0.12) 0%, transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(128,208,255,0.08) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255,80,128,0.05) 0%, transparent 60%) !important;
  background-size: 80px 80px, auto, auto, auto;
  position: relative;
  overflow-x: hidden;
}

/* 浮游鬼火光晕 */
body::before {
  content: "";
  position: fixed;
  top: -12%;
  left: -8%;
  width: 55vw;
  height: 55vw;
  background: radial-gradient(circle, rgba(160,120,220,0.15) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -2;
  pointer-events: none;
  animation: ghostFloat1 20s ease-in-out infinite;
}

body::after {
  content: "";
  position: fixed;
  bottom: -10%;
  right: -12%;
  width: 65vw;
  height: 65vw;
  background: radial-gradient(circle, rgba(128,208,255,0.1) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -2;
  pointer-events: none;
  animation: ghostFloat2 25s ease-in-out infinite;
}

@keyframes ghostFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(6vw, 8vh) scale(1.1); }
  50% { transform: translate(-5vw, 15vh) scale(0.9); }
  75% { transform: translate(-12vw, -6vh) scale(1.15); }
}

@keyframes ghostFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-10vw, -5vh) scale(1.25); }
  66% { transform: translate(8vw, -12vh) scale(0.85); }
}

/* 全局字体继承 */
p, div, span, li, a, td, th, label, button,
input, select, textarea, .form-title, .regret-title,
.panel-title, .title, h1, h2, h3, h4, h5, h6,
.tab-btn, .event-content, .config-input, .config-select,
.chat-container, .container, .card, .box, .wrapper,
.content, .sidebar, .footer {
  font-size: inherit !important;
}

/* ========== 列表怨念标记 ========== */
ul {
  list-style: none !important;
  padding-left: 1.5em !important;
}

ul li {
  position: relative;
  padding-left: 0.5em;
}

ul li::before {
  content: "👁️";
  position: absolute;
  left: -1.5em;
  font-size: 0.65em;
  filter: drop-shadow(0 0 6px var(--neon-purple)) drop-shadow(0 0 12px var(--neon-ghost));
  animation: eyePulse 2.5s ease-in-out infinite;
  line-height: inherit;
}

@keyframes eyePulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

ol {
  padding-left: 1.8em !important;
}

ol li::marker {
  color: var(--neon-ghost);
  text-shadow: 0 0 6px var(--neon-ghost), 0 0 12px var(--neon-purple);
  font-weight: bold;
}

/* ========== 引用块鬼气 ========== */
blockquote {
  border-left: 3px solid var(--neon-purple) !important;
  background: rgba(160, 112, 220, 0.08) !important;
  margin: 1em 0 !important;
  padding: 0.8em 1.2em !important;
  border-radius: 0 8px 8px 0 !important;
  color: var(--text-secondary) !important;
  font-style: italic;
  box-shadow: inset 0 0 20px rgba(160, 120, 220, 0.06);
  animation: quoteHaunt 4s ease-in-out infinite;
}

@keyframes quoteHaunt {
  0%, 100% { box-shadow: inset 0 0 15px rgba(160,120,220,0.04); }
  50% { box-shadow: inset 0 0 30px rgba(128,208,255,0.12); }
}

/* ========== 代码怨念化 ========== */
code {
  background: rgba(160, 112, 220, 0.15) !important;
  color: var(--neon-ghost) !important;
  padding: 0.2em 0.5em !important;
  border-radius: 4px !important;
  font-family: var(--font-mono) !important;
  font-size: 0.9em;
  border: 1px solid rgba(160, 120, 220, 0.25);
}

pre {
  background: rgba(10, 8, 18, 0.95) !important;
  border: 1px solid var(--neon-purple) !important;
  border-radius: 10px !important;
  padding: 1em !important;
  box-shadow: var(--glow-soft), inset 0 0 25px rgba(255, 80, 128, 0.05);
  overflow-x: auto;
}

pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: var(--text-primary) !important;
}

/* ========== 表格尸斑高亮 ========== */
table {
  border-collapse: collapse !important;
  width: 100%;
  margin: 1em 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--glow-soft);
}

th {
  background: linear-gradient(135deg, rgba(160,120,220,0.3), rgba(128,208,255,0.15)) !important;
  color: var(--neon-ghost) !important;
  padding: 10px 14px !important;
  text-align: left;
  font-weight: bold;
  text-shadow: 0 0 8px var(--neon-ghost);
  border-bottom: 2px solid var(--neon-purple) !important;
}

td {
  background: rgba(10, 8, 18, 0.7) !important;
  padding: 8px 14px !important;
  border-bottom: 1px solid rgba(160, 120, 220, 0.12) !important;
  color: var(--text-primary) !important;
}

tr:hover td {
  background: rgba(160, 112, 220, 0.1) !important;
  box-shadow: inset 0 0 18px rgba(160, 120, 220, 0.1);
}

/* ========== 卡片悬浮虚化 ========== */
div[class*="container"],
div[class*="panel"],
div[class*="card"] {
  background: var(--bg-card) !important;
  border: 1px solid transparent !important;
  background-image: linear-gradient(var(--bg-card), var(--bg-card)),
                    linear-gradient(135deg, var(--neon-purple), var(--neon-ghost), var(--neon-curse)) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  border-radius: 14px !important;
  box-shadow: var(--glow-soft), 0 0 3px rgba(160,120,220,0.5) !important;
  position: relative;
  animation: cardLevitate 10s ease-in-out infinite;
}

@keyframes cardLevitate {
  0%, 100% { transform: translateY(0px); }
  30% { transform: translateY(-5px); }
  60% { transform: translateY(-2px); }
}

@keyframes ghostlyPulse {
  0%   { opacity: 0.1; transform: scale(1); }
  35%  { opacity: 0.25; transform: scale(1.005); }
  70%  { opacity: 0.14; transform: scale(1.002); }
  100% { opacity: 0.1; transform: scale(1); }
}

div[class*="container"]::before,
div[class*="card"]::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: 16px;
  background: linear-gradient(45deg, transparent, var(--neon-purple), var(--neon-ghost), transparent);
  z-index: -1;
  opacity: 0.14;
  animation: ghostlyPulse 4.5s infinite alternate;
}

div[class*="container"]:hover,
div[class*="card"]:hover {
  animation-play-state: paused;
  transform: translateY(-6px) !important;
  border-color: var(--neon-ghost) !important;
  box-shadow: 0 0 30px rgba(128,208,255,0.5), 0 0 18px rgba(160,120,220,0.4) !important;
}

/* ========== 按钮幽光呼吸 ========== */
button.active,
.tab-btn.active,
div[class*="active"] {
  color: var(--neon-ghost) !important;
  background: linear-gradient(135deg, rgba(160,120,220,0.22), rgba(128,208,255,0.15)) !important;
  font-weight: bold !important;
  text-shadow: 0 0 12px var(--neon-ghost) !important;
  border-bottom: 2px solid var(--neon-purple) !important;
  box-shadow: 0 2px 18px rgba(160,120,220,0.5) !important;
}

button:hover,
.tab-btn:hover {
  border-color: var(--neon-ghost) !important;
  box-shadow: 0 0 25px rgba(128,208,255,0.6), 0 0 12px rgba(160,120,220,0.5) !important;
  transform: translateY(-3px) !important;
}

/* ========== 输入框怨气汇聚 ========== */
input,
select,
textarea,
.config-input {
  background: var(--bg-input) !important;
  border: 1px solid rgba(160, 120, 220, 0.35) !important;
  color: var(--text-primary) !important;
  border-radius: 8px !important;
  padding: 10px !important;
  transition: all 0.4s ease;
  caret-color: var(--neon-ghost) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--neon-ghost) !important;
  box-shadow: 0 0 20px rgba(128,208,255,0.6), inset 0 0 15px rgba(160,120,220,0.25) !important;
  animation: inputSpiritBreath 2.5s ease-in-out infinite;
  caret-color: var(--neon-curse) !important;
}

@keyframes inputSpiritBreath {
  0%, 100% { box-shadow: 0 0 18px rgba(128,208,255,0.4), inset 0 0 10px rgba(160,120,220,0.15); }
  50% { box-shadow: 0 0 28px rgba(128,208,255,0.8), inset 0 0 20px rgba(160,120,220,0.35); }
}

select option {
  background: #0a0812 !important;
  color: #e8e0f0 !important;
}

/* ========== 提交按钮鬼力涌动 ========== */
button[type="submit"],
button[class*="submit"],
.config-submit,
.send-btn {
  background: linear-gradient(135deg, #1a0e28, #201838) !important;
  border: 1px solid var(--neon-purple) !important;
  color: var(--neon-ghost) !important;
  font-weight: bold !important;
  letter-spacing: 3px !important;
  text-shadow: 0 0 8px var(--neon-ghost), 0 0 15px var(--neon-purple) !important;
  border-radius: 8px !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease !important;
  z-index: 1;
}

button[type="submit"]::after,
.send-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 300%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(160,120,220,0.3) 30%, 
    rgba(128,208,255,0.5) 50%, 
    rgba(160,120,220,0.3) 70%, 
    transparent 100%);
  transform: skewX(-25deg);
  transition: 0.5s;
  z-index: -1;
  animation: btnGhostShimmer 4.5s linear infinite;
}

@keyframes btnGhostShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

button[type="submit"]:hover,
.send-btn:hover {
  background: linear-gradient(135deg, #301850, #402868) !important;
  border-color: var(--neon-ghost) !important;
  color: var(--neon-ghost) !important;
  box-shadow: 0 0 30px rgba(128,208,255,0.7), 0 0 18px var(--neon-purple) !important;
  text-shadow: 0 0 15px var(--neon-ghost) !important;
}

/* ========== 内容区魂魄显现 ========== */
.event-content,
div[class*="content"] {
  background: rgba(10, 8, 18, 0.92) !important;
  border: 1px dashed rgba(160, 120, 220, 0.35) !important;
  border-radius: 10px !important;
  color: #d0c0f0 !important;
  font-family: var(--font-mono) !important;
  box-shadow: inset 0 0 22px rgba(255, 80, 128, 0.06) !important;
  padding: 14px !important;
  line-height: 1.8 !important;
}

/* ========== 标题幽冥闪烁 ========== */
h1, h2, h3,
.form-title, .regret-title, .panel-title, .title {
  color: var(--neon-ghost) !important;
  text-shadow: 0 0 12px var(--neon-purple), 0 0 24px var(--neon-ghost) !important;
  letter-spacing: 4px !important;
  background: linear-gradient(90deg, var(--neon-ghost), var(--neon-purple), var(--neon-ghost));
  background-size: 200% auto;
  -webkit-background-clip: text;

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

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