/* ============================================
   动态壁纸主题系统 V7
   角色特效叠加：使用径向渐变 + 动画产生独特视觉效果
   ============================================ */

/* ============================================
   默认主题
   ============================================ */
:root[data-theme="default"],
:root:not([data-theme]) {
  --overlay-bg: transparent;
  --overlay-bg2: transparent;
  --overlay-animation: none;
  --overlay-blend: normal;

  --text-main: rgba(255, 255, 255, 0.95);
  --text-sub: rgba(255, 255, 255, 0.65);
  --text-dim: rgba(255, 255, 255, 0.40);
  --text-accent: rgba(108, 92, 231, 0.90);

  --nav-active-bg: rgba(108, 92, 231, 0.18);
  --nav-active-border: #6c5ce7;

  --input-bg: rgba(255, 255, 255, 0.05);
  --input-border: rgba(255, 255, 255, 0.12);
  --input-focus: rgba(108, 92, 231, 0.55);

  --btn-bg: rgba(108, 92, 231, 0.15);
  --btn-border: rgba(108, 92, 231, 0.35);
  --btn-hover: rgba(108, 92, 231, 0.25);
  --btn-text: #a29bfe;

  --tag-bg: rgba(108, 92, 231, 0.15);
  --tag-text: #a29bfe;

  --divider: rgba(255, 255, 255, 0.08);
  --scrollbar: rgba(255, 255, 255, 0.15);
}

/* ============================================
   五条悟 — 无限空间
   效果：中心蓝色光球缓慢扩张收缩，像无限球体呼吸
   ============================================ */
:root[data-theme="gojo"] {
  /* 双层渐变：底层暗蓝 + 顶层蓝色光球 */
  --overlay-bg: rgba(2, 18, 60, 0.15);
  --overlay-bg2: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(79, 195, 247, 0.25) 0%, transparent 100%);
  --overlay-animation: gojo-breathe 6s ease-in-out infinite;
  --overlay-blend: normal;

  --text-accent: rgba(79, 195, 247, 0.90);
  --nav-active-bg: rgba(79, 195, 247, 0.14);
  --nav-active-border: #4FC3F7;
  --btn-bg: rgba(79, 195, 247, 0.12);
  --btn-border: rgba(79, 195, 247, 0.30);
  --btn-hover: rgba(79, 195, 247, 0.22);
  --btn-text: #4FC3F7;
  --tag-bg: rgba(79, 195, 247, 0.15);
  --tag-text: #4FC3F7;
  --divider: rgba(79, 195, 247, 0.12);
  --scrollbar: rgba(79, 195, 247, 0.25);
  --input-bg: rgba(79, 195, 247, 0.05);
  --input-border: rgba(79, 195, 247, 0.22);
  --input-focus: rgba(79, 195, 247, 0.55);
}

@keyframes gojo-breathe {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 1; }
}

/* ============================================
   宿傩 — 诅咒之王
   效果：深红光芒从四角闪烁，有火焰的压迫感
   ============================================ */
:root[data-theme="sukuna"] {
  --overlay-bg: rgba(30, 5, 5, 0.18);
  --overlay-bg2: radial-gradient(ellipse 80% 60% at 20% 80%, rgba(192, 57, 43, 0.30) 0%, transparent 60%),
                radial-gradient(ellipse 60% 80% at 80% 20%, rgba(139, 0, 0, 0.25) 0%, transparent 60%),
                radial-gradient(ellipse 50% 50% at 50% 50%, rgba(243, 156, 18, 0.08) 0%, transparent 80%);
  --overlay-animation: sukuna-flame 2s ease-in-out infinite;
  --overlay-blend: normal;

  --text-accent: rgba(231, 76, 60, 0.90);
  --nav-active-bg: rgba(192, 57, 43, 0.16);
  --nav-active-border: #C0392B;
  --btn-bg: rgba(192, 57, 43, 0.10);
  --btn-border: rgba(192, 57, 43, 0.28);
  --btn-hover: rgba(192, 57, 43, 0.20);
  --btn-text: #E74C3C;
  --tag-bg: rgba(192, 57, 43, 0.18);
  --tag-text: #E74C3C;
  --divider: rgba(192, 57, 43, 0.15);
  --scrollbar: rgba(192, 57, 43, 0.28);
  --input-bg: rgba(192, 57, 43, 0.05);
  --input-border: rgba(192, 57, 43, 0.22);
  --input-focus: rgba(192, 57, 43, 0.55);
}

@keyframes sukuna-flame {
  0%, 100% { opacity: 0.7; transform: scale(1) translate(0, 0); }
  25% { opacity: 1; transform: scale(1.05) translate(1%, -1%); }
  50% { opacity: 0.6; transform: scale(0.97) translate(-1%, 1%); }
  75% { opacity: 0.9; transform: scale(1.02) translate(0.5%, 0.5%); }
}

/* ============================================
   乙骨忧太 — 咒力涟漪
   效果：紫色光晕从中心向外扩散，像水面涟漪
   ============================================ */
:root[data-theme="okkotsu"] {
  --overlay-bg: rgba(15, 10, 40, 0.18);
  --overlay-bg2: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(126, 87, 194, 0.20) 0%, transparent 70%);
  --overlay-animation: okkotsu-ripple 8s ease-out infinite;
  --overlay-blend: normal;

  --text-accent: rgba(179, 157, 219, 0.90);
  --nav-active-bg: rgba(126, 87, 194, 0.14);
  --nav-active-border: #7E57C2;
  --btn-bg: rgba(126, 87, 194, 0.10);
  --btn-border: rgba(126, 87, 194, 0.28);
  --btn-hover: rgba(126, 87, 194, 0.20);
  --btn-text: #B39DDB;
  --tag-bg: rgba(126, 87, 194, 0.18);
  --tag-text: #B39DDB;
  --divider: rgba(126, 87, 194, 0.15);
  --scrollbar: rgba(126, 87, 194, 0.25);
  --input-bg: rgba(126, 87, 194, 0.05);
  --input-border: rgba(126, 87, 194, 0.22);
  --input-focus: rgba(126, 87, 194, 0.50);
}

@keyframes okkotsu-ripple {
  0% { transform: scale(0.8); opacity: 0.5; }
  40% { transform: scale(1.2); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ============================================
   玛奇玛 — 契约之眼
   效果：温暖的玫瑰金色同心圆光晕，宁静优雅
   ============================================ */
:root[data-theme="makima"] {
  --overlay-bg: rgba(35, 20, 10, 0.18);
  --overlay-bg2: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(212, 165, 116, 0.20) 0%, transparent 100%),
                radial-gradient(ellipse 90% 90% at 50% 50%, rgba(183, 115, 121, 0.10) 0%, transparent 80%);
  --overlay-animation: makima-calm 12s ease-in-out infinite;
  --overlay-blend: normal;

  --text-accent: rgba(212, 165, 116, 0.90);
  --nav-active-bg: rgba(212, 165, 116, 0.12);
  --nav-active-border: #D4A574;
  --btn-bg: rgba(212, 165, 116, 0.08);
  --btn-border: rgba(212, 165, 116, 0.25);
  --btn-hover: rgba(212, 165, 116, 0.16);
  --btn-text: #D4A574;
  --tag-bg: rgba(212, 165, 116, 0.15);
  --tag-text: #D4A574;
  --divider: rgba(212, 165, 116, 0.12);
  --scrollbar: rgba(212, 165, 116, 0.22);
  --input-bg: rgba(212, 165, 116, 0.04);
  --input-border: rgba(212, 165, 116, 0.20);
  --input-focus: rgba(212, 165, 116, 0.45);
}

@keyframes makima-calm {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* ============================================
   蕾塞 — 月光剑
   效果：银白色月光从右上角洒落，冷冽流动
   ============================================ */
:root[data-theme="reze"] {
  --overlay-bg: rgba(15, 22, 18, 0.18);
  --overlay-bg2: radial-gradient(ellipse 50% 70% at 85% 15%, rgba(144, 164, 174, 0.20) 0%, transparent 70%);
  --overlay-animation: reze-moonlight 18s ease-in-out infinite;
  --overlay-blend: normal;

  --text-accent: rgba(144, 164, 174, 0.85);
  --nav-active-bg: rgba(144, 164, 174, 0.10);
  --nav-active-border: #90A4AE;
  --btn-bg: rgba(144, 164, 174, 0.07);
  --btn-border: rgba(144, 164, 174, 0.18);
  --btn-hover: rgba(144, 164, 174, 0.12);
  --btn-text: #B0BEC5;
  --tag-bg: rgba(144, 164, 174, 0.12);
  --tag-text: #B0BEC5;
  --divider: rgba(144, 164, 174, 0.10);
  --scrollbar: rgba(144, 164, 174, 0.22);
  --input-bg: rgba(144, 164, 174, 0.04);
  --input-border: rgba(144, 164, 174, 0.18);
  --input-focus: rgba(165, 214, 167, 0.40);
}

@keyframes reze-moonlight {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  30% { transform: translate(-3%, 2%) scale(1.08); opacity: 0.9; }
  60% { transform: translate(2%, -1%) scale(0.95); opacity: 0.7; }
}

/* ============================================
   隐藏效果模式
   ============================================ */
:root[data-effects-hidden] {
  --overlay-bg: transparent !important;
  --overlay-bg2: transparent !important;
  --overlay-animation: none !important;
}

/* ============================================
   实际元素样式覆盖
   ============================================ */

/* 角色特效叠加层 */
[data-theme] .bg-blur {
  background-color: var(--overlay-bg) !important;
  background-image: var(--overlay-bg2) !important;
  animation: var(--overlay-animation) !important;
  mix-blend-mode: var(--overlay-blend, normal) !important;
}

/* 导航 */
[data-theme] .sidebar,
[data-theme] .radio-container {
  background: rgba(13, 13, 20, 0.60) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme] .radio-container input:checked + label {
  background: var(--nav-active-bg) !important;
  border-color: var(--nav-active-border) !important;
}
[data-theme] .radio-container label:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* 玻璃切换组 */
[data-theme] .glass-radio-group label:hover {
  background: rgba(255,255,255,0.08) !important;
}
[data-theme] .glass-radio-group input:checked + label {
  background: rgba(255,255,255,0.12) !important;
  border-color: var(--text-accent) !important;
}

/* 文字颜色 */
[data-theme] .title,
[data-theme] .subtitle-name,
[data-theme] .section-title {
  color: var(--text-main) !important;
}
[data-theme] .intro-text,
[data-theme] .subtitle-prefix {
  color: var(--text-sub) !important;
}
[data-theme] .title-prefix {
  color: var(--text-accent) !important;
}

/* 技能标签 */
[data-theme] .skill-tag {
  background: var(--tag-bg) !important;
  color: var(--tag-text) !important;
  border-color: var(--divider) !important;
}

/* 项目卡片 */
[data-theme] .project-item:hover {
  border-color: var(--text-accent) !important;
}

/* 联系 */
[data-theme] .contact-item { color: var(--text-sub) !important; }
[data-theme] .comms-divider { background: var(--divider) !important; }

/* 表单 */
[data-theme] .email-input,
[data-theme] .email-textarea {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-main) !important;
}
[data-theme] .email-input:focus,
[data-theme] .email-textarea:focus {
  border-color: var(--input-focus) !important;
}

/* 按钮 */
[data-theme] .email-submit {
  background: var(--btn-bg) !important;
  border-color: var(--btn-border) !important;
  color: var(--btn-text) !important;
}
[data-theme] .email-submit:hover {
  background: var(--btn-hover) !important;
}

/* 滚动条 */
[data-theme] ::-webkit-scrollbar-track { background: transparent !important; }
[data-theme] ::-webkit-scrollbar-thumb { background: var(--scrollbar) !important; }

/* 音乐播放器 */
[data-theme] .music-title { color: var(--text-main) !important; }
[data-theme] .music-artist { color: var(--text-dim) !important; }

/* 赞助/确认弹窗 */
[data-theme] .sponsor-dialog,
[data-theme] .project-confirm-dialog {
  background: rgba(10, 10, 18, 0.95) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
[data-theme] .sponsor-dialog-title,
[data-theme] .project-confirm-title { color: var(--text-main) !important; }
[data-theme] .project-confirm-text { color: var(--text-sub) !important; }
[data-theme] .project-confirm-ok {
  background: rgba(0,0,0,0) !important;
  border-color: var(--text-accent) !important;
  color: var(--text-accent) !important;
}
[data-theme] .sponsor-tab {
  background: rgba(10, 10, 18, 0.80) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: var(--text-accent) !important;
}
[data-theme] .sponsor-tab:hover { background: rgba(20,20,30,0.80) !important; }
[data-theme] .project-confirm-overlay { background: rgba(0,0,0,0.60) !important; }
[data-theme] .project-confirm-cancel {
  background: rgba(10, 10, 18, 0.90) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* terminal */
[data-theme] .terminal-card {
  background: rgba(0,0,0,0.50) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* 图标 */
[data-theme] .glass-radio-group label svg,
[data-theme] .contact-item svg { stroke: var(--text-accent) !important; }

/* 邮件 */
[data-theme] .email-label { color: var(--text-sub) !important; }
[data-theme] .email-header-text h4 { color: var(--text-main) !important; }
[data-theme] .email-subtitle { color: var(--text-dim) !important; }
[data-theme] .comms-col-title { color: var(--text-main) !important; }
[data-theme] .comms-subtitle { color: var(--text-dim) !important; }

/* ============================================
   隐藏效果：隐藏内容，只留视频和切换按钮
   ============================================ */
:root[data-effects-hidden] .container,
:root[data-effects-hidden] .sidebar,
:root[data-effects-hidden] #musicPlayer,
:root[data-effects-hidden] #projectConfirmOverlay,
:root[data-effects-hidden] #sponsorTab,
:root[data-effects-hidden] #sponsorOverlay {
  opacity: 0 !important;
  transform: scale(.97) translateY(-8px) !important;
  pointer-events: none !important;
  transition: opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1) !important;
}

:root[data-effects-hidden] #video-bg-container {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
}


/* ============================================
   联系区域基础布局（修复 display:block 导致的布局崩溃）
   ============================================ */

/* comms-grid: 左右两栏布局 */
.comms-grid {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

/* 两栏各占一半，中间有分隔线 */
.comms-col {
  flex: 1 !important;
  min-width: 0 !important;
  height: auto !important;
}

/* 联系我那一栏 */
.comms-contact {
  padding: 24px !important;
  background: var(--card-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--shadow-card) !important;
}

/* 邮件回复那一栏 */
.comms-email {
  padding: 24px !important;
  background: var(--card-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--shadow-card) !important;
}

/* 分隔线 */
.comms-divider {
  width: 1px !important;
  background: var(--card-border) !important;
  align-self: stretch !important;
  flex-shrink: 0 !important;
}

/* 回复展示区 */
.replies-card {
  padding: 24px !important;
  background: var(--card-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--shadow-card) !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}



/* ============================================
   联系区域基础样式（补充丢失的布局CSS）
   ============================================ */

/* 联系信息列表 */
.contact-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* 单个联系项：水平flex，垂直居中，紧凑padding */
.contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 0 !important;
  font-size: 0.92rem !important;
  color: rgba(255, 255, 255, 0.75) !important;
  height: auto !important;
  border: none !important;
  margin: 0 !important;
}

/* 联系项内的SVG图标：固定尺寸 */
.contact-item svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  flex-shrink: 0 !important;
  stroke-width: 1.5 !important;
}

/* 终端卡片 */
.terminal-card {
  background: rgba(0, 0, 0, 0.40) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  margin-top: 16px !important;
  overflow: hidden !important;
  height: auto !important;
}



/* ============================================
   邮件回复区域布局（补充丢失的基础样式）
   ============================================ */

/* 邮件回复头部：flex水平布局，垂直居中 */
.email-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
}

/* 邮件图标：固定尺寸 */
.email-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.email-icon svg {
  width: 48px !important;
  height: 48px !important;
  stroke-width: 1.5 !important;
}

/* 邮件头部文字 */
.email-header-text {
  flex: 1 !important;
  min-width: 0 !important;
  height: auto !important;
}

.email-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  border: none !important;
  color: var(--text-main, rgba(255,255,255,0.92)) !important;
}

.email-subtitle {
  font-size: 0.85rem !important;
  color: var(--text-dim, rgba(255,255,255,0.50)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* 邮件表单 */
.email-form {
  width: 100% !important;
  height: auto !important;
}

.email-row {
  margin-bottom: 14px !important;
  height: auto !important;
}

.email-row-inline {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  height: auto !important;
}

.email-field {
  flex: 1 !important;
  min-width: 140px !important;
}

.email-label {
  display: block !important;
  font-size: 0.80rem !important;
  color: rgba(255,255,255,0.55) !important;
  margin-bottom: 6px !important;
  font-weight: 500 !important;
}

.email-input,
.email-textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  font-size: 0.9rem !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,0.90) !important;
  box-sizing: border-box !important;
  outline: none !important;
  height: auto !important;
}

.email-input:focus,
.email-textarea:focus {
  border-color: rgba(108, 92, 231, 0.55) !important;
  background: rgba(255,255,255,0.08) !important;
}

.email-textarea {
  resize: vertical !important;
  min-height: 80px !important;
}

.email-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 16px !important;
  height: auto !important;
}

.email-submit {
  padding: 10px 24px !important;
  font-size: 0.9rem !important;
  background: rgba(108, 92, 231, 0.15) !important;
  border: 1px solid rgba(108, 92, 231, 0.35) !important;
  border-radius: 10px !important;
  color: #a29bfe !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
}

.email-submit:hover {
  background: rgba(108, 92, 231, 0.25) !important;
}

.email-hint {
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.35) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 图片上传区域 */
.email-image-upload {
  border: 1px dashed rgba(255,255,255,0.15) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: border-color .2s ease !important;
  height: auto !important;
  min-height: 60px !important;
}

.email-image-placeholder {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  color: rgba(255,255,255,0.35) !important;
  font-size: 0.82rem !important;
}

.email-image-placeholder svg {
  width: 28px !important;
  height: 28px !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
  fill: none !important;
}

/* 回复展示区基础样式 */
.replies-card {
  padding: 24px !important;
  background: var(--card-bg, rgba(255,255,255,0.04)) !important;
  backdrop-filter: blur(var(--glass-blur, 16px)) saturate(160%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur, 16px)) saturate(160%) !important;
  border-radius: var(--radius-md, 16px) !important;
  border: 1px solid var(--card-border, rgba(255,255,255,0.07)) !important;
  box-shadow: var(--shadow-card, 0 4px 24px rgba(0,0,0,0.28)) !important;
  width: 100% !important;
  height: auto !important;
}



/* ============================================
   回复展示区布局
   ============================================ */

.replies-list {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

.replies-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 32px !important;
  color: rgba(255,255,255,0.30) !important;
  font-size: 0.85rem !important;
  text-align: center !important;
  height: auto !important;
  min-height: 80px !important;
}

.replies-empty svg {
  width: 32px !important;
  height: 32px !important;
  stroke-width: 1.5 !important;
  opacity: 0.5 !important;
}

.replies-empty p {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  color: inherit !important;
  font-size: inherit !important;
}



/* ============================================
   section-title 基础样式（补充）
   ============================================ */

.section-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.92) !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  letter-spacing: 0.02em !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  height: auto !important;
}