/* ==============================================
   【赛博修仙 · Cyber Cultivation】完整主题
   灵脉·符文·灵能投影 | 基于主神空间终端结构
============================================== */
:root {
  --bg-main: #0b0c1a;
  --bg-card: rgba(15, 16, 34, 0.94);
  --bg-input: #1a1b38;
  --text-primary: #e6e8ff;
  --text-secondary: #9a9fd4;
  --neon-cyan: #00e5ff;      /* 灵能青——飞剑流光 */
  --neon-blue: #3d5afe;
  --neon-pink: #b388ff;      /* 紫府——元婴之光 */
  --neon-gold: #ffd740;      /* 金丹——渡劫金光 */
  --glow-soft: 0 0 12px rgba(0, 229, 255, 0.25);
  --glow-strong: 0 0 22px rgba(179, 136, 255, 0.45);
  --font-display: "ZCOOL KuaiLe", "STKaiti", "KaiTi", "Microsoft YaHei", sans-serif;
  --font-mono: 'Fira Code', monospace;
}

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

body {
  background: var(--bg-main) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-display) !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%3Cg stroke='%2300e5ff' stroke-width='1.5' stroke-opacity='0.06' fill='none'%3E%3Ccircle cx='40' cy='40' r='36'/%3E%3Cpath d='M40 4v72M4 40h72'/%3E%3Ccircle cx='40' cy='40' r='12'/%3E%3C/g%3E%3C/svg%3E"),
    /* 灵脉流动网 */
    linear-gradient(90deg, rgba(0,229,255,0.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(179,136,255,0.03) 1px, transparent 1px),
    /* 金丹光晕 */
    radial-gradient(circle at 20% 30%, rgba(255,215,64,0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(0,229,255,0.1) 0%, transparent 40%) !important;
  background-size: 80px 80px, 40px 40px, 40px 40px, auto, auto !important;
}

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-cyan), var(--neon-pink), var(--neon-gold)) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  border-radius: 14px !important;
  box-shadow: var(--glow-soft), 0 0 2px rgba(0,229,255,0.5) !important;
  position: relative;
}

/* 金丹渡劫边框脉冲动画 —— 调暗版 */
@keyframes immortalPulse {
  0% { opacity: 0.12; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(1.005); }
  100% { opacity: 0.12; 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-cyan), var(--neon-pink), transparent);
  z-index: -1;
  opacity: 0.18;   /* 基础透明度大幅降低 */
  animation: immortalPulse 4s infinite alternate; /* 呼吸更平缓 */
}

button.active,
.tab-btn.active,
div[class*="active"] {
  color: var(--neon-gold) !important;
  background: linear-gradient(135deg, rgba(0,229,255,0.15), rgba(179,136,255,0.15)) !important;
  font-weight: bold !important;
  text-shadow: 0 0 8px var(--neon-gold) !important;
  border-bottom: 2px solid var(--neon-gold) !important;
  box-shadow: 0 2px 16px rgba(0,229,255,0.5) !important;
}

button:hover,
.tab-btn:hover,
div[class*="card"]:hover {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 18px rgba(0,229,255,0.6), 0 0 10px rgba(179,136,255,0.4) !important;
  transform: translateY(-2px) !important;
}

input,
select,
textarea,
.config-input {
  background: var(--bg-input) !important;
  border: 1px solid rgba(61,90,254,0.4) !important;
  color: var(--text-primary) !important;
  border-radius: 8px !important;
  padding: 10px !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--neon-cyan) !important;
  box-shadow: 0 0 14px rgba(0,229,255,0.5), inset 0 0 8px rgba(179,136,255,0.15) !important;
}

select option {
  background: #0b0c1a !important;
  color: #e6e8ff !important;
}

button[type="submit"],
button[class*="submit"],
.config-submit,
.send-btn {
  background: linear-gradient(135deg, #12133a, #1a1c52) !important;
  border: 1px solid var(--neon-cyan) !important;
  color: var(--neon-cyan) !important;
  font-weight: bold !important;
  letter-spacing: 3px !important;
  text-shadow: 0 0 8px var(--neon-cyan), 0 0 15px var(--neon-pink) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

button[type="submit"]:hover,
.send-btn:hover {
  background: linear-gradient(135deg, #20246e, #2a2f94) !important;
  border-color: var(--neon-gold) !important;
  color: var(--neon-gold) !important;
  box-shadow: 0 0 25px rgba(255,215,64,0.7), 0 0 10px var(--neon-pink) !important;
  text-shadow: 0 0 12px var(--neon-gold) !important;
}

.event-content,
div[class*="content"] {
  background: rgba(10,11,28,0.92) !important;
  border: 1px dashed rgba(0,229,255,0.35) !important;
  border-radius: 10px !important;
  color: #c9ceff !important;
  font-family: var(--font-mono) !important;
  box-shadow: inset 0 0 20px rgba(61,90,254,0.08) !important;
  padding: 14px !important;
  line-height: 1.8 !important;
}

h1, h2, h3,
.form-title, .regret-title, .panel-title, .title {
  color: var(--neon-gold) !important;
  text-shadow: 0 0 12px var(--neon-cyan), 0 0 24px var(--neon-pink) !important;
  letter-spacing: 4px !important;
}

.regret-wrap,
div[class*="sidebar"],
div[class*="footer"] {
  border-top: 1px solid rgba(0,229,255,0.4) !important;
  background: rgba(0, 0, 0, 0.3) !important;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0b0c1a; }
::-webkit-scrollbar-thumb {
  background: var(--neon-cyan);
  border-radius: 4px;
  box-shadow: 0 0 12px var(--neon-cyan);
}