/* ============================================================
   DNAISLAND · 深色二次元设计系统
   通过覆盖 Bootstrap 5 的 CSS 变量，让全站（含表单/后台/弹窗）
   自动获得统一的暗色霓虹质感，再辅以少量自定义组件类精修。
   ============================================================ */

:root {
  /* 品牌色 —— 霓虹紫 / 品红 / 青 */
  --dna-accent: #a855f7;
  --dna-accent-2: #ec4899;
  --dna-accent-3: #22d3ee;
  --dna-grad: linear-gradient(135deg, #a855f7 0%, #ec4899 55%, #f472b6 100%);
  --dna-grad-soft: linear-gradient(135deg, rgba(168, 85, 247, .18), rgba(236, 72, 153, .12));

  /* 背景与表面 */
  --dna-bg: #0b0a14;
  --dna-bg-2: #120f22;
  --dna-surface: rgba(28, 24, 48, .72);
  --dna-surface-solid: #171327;
  --dna-border: rgba(255, 255, 255, .08);
  --dna-border-strong: rgba(255, 255, 255, .16);

  /* 文本 */
  --dna-text: #ece9f6;
  --dna-muted: #9c97b8;

  --dna-radius: 16px;
  --dna-radius-sm: 10px;
  --dna-shadow: 0 18px 48px -20px rgba(0, 0, 0, .8);
  --dna-glow: 0 0 0 1px rgba(168, 85, 247, .35), 0 12px 32px -12px rgba(168, 85, 247, .55);

  /* —— 覆盖 Bootstrap 主题变量 —— */
  --bs-body-bg: var(--dna-bg);
  --bs-body-color: var(--dna-text);
  --bs-border-color: var(--dna-border);
  --bs-primary: #a855f7;
  --bs-primary-rgb: 168, 85, 247;
  --bs-link-color: #d8b4fe;
  --bs-link-hover-color: #f0abfc;
  --bs-emphasis-color: #fff;
}

/* Bootstrap 暗色令牌微调，让 card/dropdown/form 统一底色 */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--dna-bg);
  --bs-body-color: var(--dna-text);
  --bs-secondary-color: var(--dna-muted);
  --bs-tertiary-bg: var(--dna-surface-solid);
  --bs-border-color: var(--dna-border);
  --bs-emphasis-color: #fff;
}

/* ---------------- 全局背景 ---------------- */
body {
  background-color: var(--dna-bg);
  color: var(--dna-text);
  background-image:
    radial-gradient(60vw 60vw at 12% -10%, rgba(168, 85, 247, .22), transparent 60%),
    radial-gradient(55vw 55vw at 100% 0%, rgba(34, 211, 238, .16), transparent 55%),
    radial-gradient(50vw 50vw at 80% 110%, rgba(236, 72, 153, .16), transparent 55%);
  background-attachment: fixed;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(168, 85, 247, .4); color: #fff; }

/* 滚动条 */
* { scrollbar-width: thin; scrollbar-color: rgba(168,85,247,.5) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(168,85,247,.45); border-radius: 20px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(168,85,247,.7); background-clip: content-box; }

/* ---------------- 导航栏 ---------------- */
.navbar.bg-dark {
  background: rgba(12, 10, 22, .72) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--dna-border);
}
.navbar { position: sticky; top: 0; z-index: 1030; }
.navbar-brand {
  font-weight: 800;
  letter-spacing: 1px;
  background: var(--dna-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.navbar .nav-link {
  color: var(--dna-muted) !important;
  font-weight: 500;
  border-radius: 8px;
  padding-inline: .75rem;
  transition: color .18s ease, background .18s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active { color: #fff !important; background: rgba(255,255,255,.06); }
.navbar .dropdown-menu { border: 1px solid var(--dna-border); box-shadow: var(--dna-shadow); }

/* ---------------- 卡片 / 表面 ---------------- */
.card {
  border: 1px solid var(--dna-border);
  border-radius: var(--dna-radius);
  background: var(--dna-surface);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--dna-shadow);
  color: var(--dna-text);
}
.card-header {
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid var(--dna-border);
  color: #fff;
}
.list-group-item {
  background: var(--dna-surface);
  border-color: var(--dna-border);
  color: var(--dna-text);
}
.list-group-item-primary { background: var(--dna-grad-soft); color: #fff; }

/* ---------------- 按钮 ---------------- */
.btn { border-radius: 10px; font-weight: 600; transition: transform .12s ease, box-shadow .2s ease, filter .2s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  border: none;
  background: var(--dna-grad);
  color: #fff;
  box-shadow: 0 10px 26px -12px rgba(236, 72, 153, .8);
}
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.08); box-shadow: var(--dna-glow); color: #fff; }
.btn-outline-primary { border-color: rgba(168,85,247,.55); color: #d8b4fe; }
.btn-outline-primary:hover { background: rgba(168,85,247,.16); border-color: var(--dna-accent); color: #fff; }
.btn-outline-secondary { border-color: var(--dna-border-strong); color: var(--dna-muted); }
.btn-outline-secondary:hover { background: rgba(255,255,255,.08); color: #fff; border-color: var(--dna-border-strong); }
.btn-outline-light { border-color: var(--dna-border-strong); color: var(--dna-text); }
.btn-outline-light:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ---------------- 徽章 ---------------- */
.badge { font-weight: 600; letter-spacing: .2px; }
.text-bg-primary, .badge.bg-primary { background: var(--dna-grad) !important; color: #fff !important; }

/* ---------------- 表单 ---------------- */
.form-control, .form-select {
  background: rgba(10, 9, 18, .6);
  border: 1px solid var(--dna-border-strong);
  color: var(--dna-text);
  border-radius: 10px;
}
.form-control::placeholder { color: rgba(156, 151, 184, .7); }
.form-control:focus, .form-select:focus {
  background: rgba(10, 9, 18, .85);
  border-color: var(--dna-accent);
  color: #fff;
  box-shadow: 0 0 0 .2rem rgba(168, 85, 247, .25);
}
.form-label { color: var(--dna-muted); font-weight: 500; }
.input-group-text { background: rgba(255,255,255,.05); border-color: var(--dna-border-strong); color: var(--dna-muted); }

/* ---------------- 下拉/建议框 ---------------- */
.dropdown-menu {
  background: rgba(20, 16, 34, .96);
  backdrop-filter: blur(14px);
  border: 1px solid var(--dna-border);
  border-radius: 12px;
}
.dropdown-item { color: var(--dna-text); border-radius: 8px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--dna-grad-soft); color: #fff; }
.dropdown-header { color: var(--dna-muted); }
.dropdown-divider { border-color: var(--dna-border); }

/* ---------------- 提示 ---------------- */
main .alert { max-width: 760px; margin-inline: auto; border: 1px solid var(--dna-border); border-radius: 12px; }
.alert-success { background: rgba(34,197,94,.14); color: #86efac; }
.alert-danger  { background: rgba(239,68,68,.14); color: #fca5a5; }
.alert-warning { background: rgba(234,179,8,.14); color: #fde68a; }
.alert-info    { background: rgba(34,211,238,.14); color: #a5f3fc; }

/* ---------------- 分页 ---------------- */
.pagination { --bs-pagination-bg: transparent; --bs-pagination-color: var(--dna-muted); --bs-pagination-border-color: var(--dna-border); }
.page-link { background: var(--dna-surface); border-color: var(--dna-border); color: var(--dna-muted); border-radius: 10px !important; margin: 0 3px; }
.page-link:hover { background: rgba(168,85,247,.16); color: #fff; }
.page-item.active .page-link { background: var(--dna-grad); border-color: transparent; color: #fff; }
.page-item.disabled .page-link { background: transparent; color: rgba(156,151,184,.4); }

/* ---------------- 链接 ---------------- */
a { color: var(--dna-link, #d8b4fe); }
.text-muted, .text-secondary { color: var(--dna-muted) !important; }

/* ============================================================
   自定义组件
   ============================================================ */

/* Hero 区块 */
.dna-hero {
  position: relative;
  border-radius: 24px;
  padding: clamp(2.2rem, 5vw, 4.2rem) clamp(1.2rem, 4vw, 3rem);
  overflow: hidden;
  border: 1px solid var(--dna-border);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(168,85,247,.35), transparent 55%),
    radial-gradient(120% 140% at 100% 20%, rgba(34,211,238,.28), transparent 55%),
    rgba(18, 15, 34, .6);
  box-shadow: var(--dna-shadow);
}
.dna-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(80% 80% at 50% 0%, #000, transparent);
  pointer-events: none;
}
.dna-hero__eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--dna-accent-3);
  border: 1px solid var(--dna-border-strong);
  padding: .28rem .7rem; border-radius: 999px;
  background: rgba(255,255,255,.04);
}
.dna-hero__title {
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  margin: 1rem 0 .6rem;
}
.dna-gradient-text {
  background: var(--dna-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 区块标题 */
.dna-section-title {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 700; margin-bottom: 1rem;
}
.dna-section-title::before {
  content: ""; width: 4px; height: 1.1em; border-radius: 3px; background: var(--dna-grad);
}

/* 角色卡瓦片（列表统一组件） */
.dna-tile {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--dna-border);
  border-radius: var(--dna-radius);
  overflow: hidden;
  background: var(--dna-surface);
  color: var(--dna-text);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.dna-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(168,85,247,.5);
  box-shadow: var(--dna-glow);
  color: var(--dna-text);
}
.dna-tile__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dna-bg-2); }
.dna-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.dna-tile:hover .dna-tile__media img { transform: scale(1.06); }
.dna-tile__ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; font-weight: 800; color: #fff;
  background: var(--dna-grad-soft);
}
.dna-tile__status { position: absolute; top: .6rem; left: .6rem; display: flex; gap: .35rem; }
.dna-tile__body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.dna-tile__title { font-size: 1.02rem; font-weight: 700; margin: 0; color: #fff; }
.dna-tile__meta { font-size: .78rem; color: var(--dna-muted); }
.dna-tile__desc {
  font-size: .84rem; color: var(--dna-muted); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  white-space: pre-wrap;
}
.dna-tile__tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: .3rem; }

/* 标签片 */
.dna-chip {
  display: inline-flex; align-items: center;
  font-size: .74rem; color: #d8b4fe;
  padding: .18rem .55rem; border-radius: 999px;
  border: 1px solid var(--dna-border-strong);
  background: rgba(168,85,247,.1);
}

/* 空状态 */
.dna-empty {
  text-align: center; color: var(--dna-muted);
  padding: 3rem 1rem;
  border: 1px dashed var(--dna-border-strong);
  border-radius: var(--dna-radius);
  background: rgba(255,255,255,.02);
}
.dna-empty__icon { font-size: 2.4rem; opacity: .7; margin-bottom: .5rem; }

/* 统计小卡 */
.dna-stat { text-align: center; padding: 1.1rem .5rem; }
.dna-stat__num { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.dna-stat__label { font-size: .8rem; color: var(--dna-muted); margin-top: .3rem; }

/* 头像 */
.dna-avatar { border-radius: 50%; object-fit: cover; border: 2px solid var(--dna-border-strong); }
.dna-avatar-ph {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; background: var(--dna-grad);
}

/* 详情页信息头 */
.dna-detail-hero { position: relative; overflow: hidden; }
.dna-detail-hero__banner { width: 100%; max-height: 300px; object-fit: cover; border-radius: var(--dna-radius); }

/* 页脚 */
.footer.bg-light {
  background: rgba(12, 10, 22, .7) !important;
  border-top: 1px solid var(--dna-border);
  color: var(--dna-muted);
  backdrop-filter: blur(10px);
}
.footer.bg-light .text-muted { color: var(--dna-muted) !important; }

/* mark 高亮 */
mark, .bg-warning-subtle {
  background: rgba(236, 72, 153, .3) !important;
  color: #fff !important; border-radius: 4px; padding: 0 .15em;
}

/* 后台侧边栏 */
.sidebar.bg-light {
  background: rgba(18, 15, 34, .7) !important;
  border-right: 1px solid var(--dna-border);
  border-radius: var(--dna-radius);
}
.sidebar .nav-link { color: var(--dna-muted); border-radius: 10px; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.05); color: #fff; }
.sidebar .nav-pills .nav-link.active { background: var(--dna-grad); color: #fff; }

/* 表格（后台） */
.table { --bs-table-bg: transparent; --bs-table-color: var(--dna-text); --bs-table-border-color: var(--dna-border); }
.table > :not(caption) > * > * { background: transparent; }

/* ============================================================
   探索页
   ============================================================ */

/* 筛选条 */
.dna-filterbar {
  position: sticky;
  top: 64px;
  z-index: 1020;
  background: rgba(12, 10, 22, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--dna-border);
  border-radius: var(--dna-radius);
  padding: .9rem 1.1rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--dna-shadow);
}
.dna-filterbar__group { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dna-filterbar__group + .dna-filterbar__group { margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--dna-border); }
.dna-filterbar__label {
  font-size: .76rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--dna-muted); min-width: 3.2rem; flex-shrink: 0;
}

/* 可点击筛选 chip（性别 / 排序） */
.dna-chip-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; font-weight: 600; text-decoration: none;
  color: var(--dna-muted);
  padding: .34rem .85rem; border-radius: 999px;
  border: 1px solid var(--dna-border-strong);
  background: rgba(255, 255, 255, .03);
  transition: all .18s ease; white-space: nowrap;
}
.dna-chip-btn:hover { color: #fff; border-color: var(--dna-accent); background: rgba(168, 85, 247, .16); }
.dna-chip-btn.is-active {
  color: #fff; border-color: transparent;
  background: var(--dna-grad);
  box-shadow: var(--dna-glow);
}

/* 标签云 */
.dna-tagcloud { display: flex; flex-wrap: wrap; gap: .5rem; }
.dna-tag {
  --w: .5;
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: calc(.74rem + .25rem * var(--w, .5));
  text-decoration: none; color: #d8b4fe;
  padding: .32rem .8rem; border-radius: 999px;
  border: 1px solid var(--dna-border-strong);
  background: rgba(168, 85, 247, calc(.06 + .1 * var(--w, .5)));
  transition: all .18s ease;
}
.dna-tag:hover { color: #fff; border-color: var(--dna-accent); transform: translateY(-2px); }
.dna-tag.is-active { color: #fff; border-color: transparent; background: var(--dna-grad); box-shadow: var(--dna-glow); }
.dna-tag__count { font-size: .68em; opacity: .7; }

/* 当前筛选状态条 */
.dna-active-filters { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.dna-active-filters .dna-chip-btn { cursor: default; }
.dna-active-filters .dna-active-filters__clear { margin-left: auto; }

/* 探索页网格更紧凑，容纳更多卡片 */
.dna-explore-grid .dna-tile__media { aspect-ratio: 3 / 4; }

/* ============================================================
   富文本 / 文章正文
   ============================================================ */
.richtext-content { line-height: 1.7; word-break: break-word; }
.richtext-content p { margin: 0 0 1rem; }
.richtext-content h1, .richtext-content h2, .richtext-content h3,
.richtext-content h4, .richtext-content h5 {
  margin: 1.4rem 0 .8rem; font-weight: 700; line-height: 1.3; color: #fff;
}
.richtext-content a { color: var(--bs-link-color); text-decoration: underline; }
.richtext-content ul, .richtext-content ol { margin: 0 0 1rem 1.25rem; padding-left: 0; }
.richtext-content li { margin: .25rem 0; }
.richtext-content img { max-width: 100%; height: auto; border-radius: var(--dna-radius-sm); margin: .5rem 0; }
.richtext-content blockquote {
  margin: 1rem 0; padding: .6rem 1rem; border-left: 3px solid var(--dna-accent);
  background: rgba(168, 85, 247, .08); border-radius: var(--dna-radius-sm); color: var(--dna-muted);
}
.richtext-content code {
  background: rgba(255, 255, 255, .08); padding: .1rem .35rem; border-radius: 5px; font-size: .9em;
}
.richtext-content pre {
  background: rgba(0, 0, 0, .35); padding: 1rem; border-radius: var(--dna-radius-sm);
  overflow: auto; border: 1px solid var(--dna-border);
}

.article-body { font-size: 1.02rem; }

/* 文章正文：富文本编辑器会为每个元素写死 inline color:rgb(0,0,0)，
   其优先级高于主题样式，导致深色模式下正文发黑、且切换主题无变化。
   用 !important 强制覆盖行内黑色，让正文在深色=纯白、浅色=纯黑之间互相切换。 */
[data-bs-theme="dark"] .article-body,
[data-bs-theme="dark"] .article-body * { color: #fff !important; }
[data-bs-theme="light"] .article-body,
[data-bs-theme="light"] .article-body * { color: #000 !important; }
[data-bs-theme="dark"] .article-body table,
[data-bs-theme="dark"] .article-body table td,
[data-bs-theme="dark"] .article-body table th { border-color: var(--dna-border-strong) !important; }

/* ============================================================
   文章封面：从黑色模糊占位到清晰图片的丝滑渐显
   未加载时容器统一为黑色；图片加载完成后，从模糊+透明平滑
   过渡为清晰图（opacity + blur + 轻微缩放），过渡曲线刻意拉长。
   仅当 <html> 带 .js 类时才启用（渐进增强，无 JS 时图片正常显示）。
   ============================================================ */
.dna-img-fade {
  position: relative;
  background: #000;                 /* 未加载时统一为黑色 */
  overflow: hidden;
  border-radius: var(--dna-radius);
  aspect-ratio: 16 / 9;             /* 预留空间，避免加载时布局跳动 */
}
.dna-img-fade--top { border-radius: var(--dna-radius) var(--dna-radius) 0 0; }

/* 加载中：黑色占位块上的扫光（shimmer）——更亮、更频繁、更明显 */
.js .dna-img-fade::after {
  content: "";
  position: absolute; inset: 0;
  /* 透明处透出容器黑色背景，仅高光带可见 → 黑色底 + 扫光 */
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 28%,
    rgba(255, 255, 255, .26) 50%,
    rgba(255, 255, 255, 0) 72%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  opacity: 1;
  pointer-events: none;
  mix-blend-mode: screen;   /* 在黑色占位上让高光更亮、更明显 */
  animation: dna-shimmer 1.05s ease-in-out infinite;
  transition: opacity 1.2s ease;
}
@keyframes dna-shimmer {
  0%   { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}
.js .dna-img-fade.is-loaded::after { opacity: 0; animation: none; }

/* 加载期间即显示半透明模糊预览（不再纯黑隐藏），扫光叠加其上；
   加载完成后模糊缓缓散去、淡入为清晰图 → 模糊到正常的过渡真正可见、不再硬切 */
.js .dna-img-fade__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  filter: blur(22px);
  transform: scale(1.08);
  will-change: opacity, filter, transform;
  /* 分层缓动：模糊散去(慢) + 淡入(中) + 缩放(最慢) 错峰收尾，
     让“由模糊渐入清晰”平滑连贯，消除硬切换 */
  transition:
    opacity 1.3s cubic-bezier(.4, 0, .2, 1),
    filter 2s cubic-bezier(.22, .61, .36, 1),
    transform 2.2s cubic-bezier(.22, .61, .36, 1);
}
.js .dna-img-fade.is-loaded .dna-img-fade__img {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

/* 富文本编辑区占位提示 */
.rich-editor-area:empty::before {
  content: attr(placeholder); color: var(--dna-muted); pointer-events: none;
}
.rich-editor-area:focus { box-shadow: 0 0 0 .2rem rgba(168, 85, 247, .25); outline: 0; }

/* ============================================================
   主题切换按钮（图标随 data-bs-theme 自动切换）
   ============================================================ */
#themeToggle { text-decoration: none; }
.theme-icon { display: inline-flex; align-items: center; }
#themeToggle .icon-sun { display: none; }
#themeToggle .icon-moon { display: inline-flex; }
[data-bs-theme="light"] #themeToggle .icon-sun { display: inline-flex; }
[data-bs-theme="light"] #themeToggle .icon-moon { display: none; }

/* 主题切换时的平滑过渡 */
body, .navbar, .footer, .card, .dna-tile, .dna-hero,
.dropdown-menu, .form-control, .form-select, .list-group-item, .dna-filterbar, .sidebar {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ============================================================
   浅色模式
   通过覆盖 --dna-* 设计变量 + 少量组件级修正，让全站从
   霓虹深色调平滑切换为清爽浅色调，同时保持品牌渐变与质感。
   ============================================================ */
[data-bs-theme="light"] {
  /* 品牌色保持霓虹质感（略提亮以适配浅底） */
  --dna-accent: #9333ea;
  --dna-accent-2: #db2777;
  --dna-accent-3: #0891b2;
  --dna-grad: linear-gradient(135deg, #9333ea 0%, #db2777 55%, #ec4899 100%);
  --dna-grad-soft: linear-gradient(135deg, rgba(147, 51, 234, .14), rgba(219, 39, 119, .1));

  /* 背景与表面 */
  --dna-bg: #f6f4fb;
  --dna-bg-2: #ece7f6;
  --dna-surface: rgba(255, 255, 255, .82);
  --dna-surface-solid: #ffffff;
  --dna-border: rgba(28, 22, 54, .1);
  --dna-border-strong: rgba(28, 22, 54, .16);

  /* 文本 */
  --dna-text: #211c33;
  --dna-muted: #6a6385;

  --dna-shadow: 0 18px 48px -24px rgba(40, 20, 80, .28);
  --dna-glow: 0 0 0 1px rgba(147, 51, 234, .3), 0 12px 30px -12px rgba(147, 51, 234, .4);

  /* —— 覆盖 Bootstrap 主题变量 —— */
  --bs-body-bg: var(--dna-bg);
  --bs-body-color: var(--dna-text);
  --bs-border-color: var(--dna-border);
  --bs-primary: #9333ea;
  --bs-primary-rgb: 147, 51, 234;
  --bs-link-color: #7e22ce;
  --bs-link-hover-color: #9333ea;
  --bs-emphasis-color: #1a1526;
}

[data-bs-theme="light"] body {
  color: var(--dna-text);
  background-image:
    radial-gradient(60vw 60vw at 12% -10%, rgba(147, 51, 234, .12), transparent 60%),
    radial-gradient(55vw 55vw at 100% 0%, rgba(8, 145, 178, .1), transparent 55%),
    radial-gradient(50vw 50vw at 80% 110%, rgba(219, 39, 119, .1), transparent 55%);
}
[data-bs-theme="light"] ::selection { background: rgba(147, 51, 234, .25); color: #1a1526; }

/* 导航栏 */
[data-bs-theme="light"] .navbar.bg-dark {
  background: rgba(255, 255, 255, .8) !important;
  border-bottom: 1px solid var(--dna-border);
}
[data-bs-theme="light"] .navbar .nav-link:hover,
[data-bs-theme="light"] .navbar .nav-link.active { color: #1a1526 !important; background: rgba(0, 0, 0, .05); }

/* 卡片 / 表面 */
[data-bs-theme="light"] .card { background: var(--dna-surface); color: var(--dna-text); }
[data-bs-theme="light"] .card-header { background: rgba(0, 0, 0, .02); color: #1a1526; }
[data-bs-theme="light"] .list-group-item { background: var(--dna-surface); color: var(--dna-text); }

/* 按钮 */
[data-bs-theme="light"] .btn-outline-secondary:hover { background: rgba(0, 0, 0, .05); color: #1a1526; }
[data-bs-theme="light"] .btn-outline-light { border-color: var(--dna-border-strong); color: var(--dna-text); }
[data-bs-theme="light"] .btn-outline-light:hover { background: rgba(0, 0, 0, .05); color: #1a1526; }

/* 表单 */
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select { background: rgba(255, 255, 255, .75); color: var(--dna-text); }
[data-bs-theme="light"] .form-control::placeholder { color: rgba(106, 99, 133, .7); }
[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus { background: #fff; color: #1a1526; }
[data-bs-theme="light"] .input-group-text { background: rgba(0, 0, 0, .03); color: var(--dna-muted); }

/* 下拉 / 建议框 */
[data-bs-theme="light"] .dropdown-menu { background: rgba(255, 255, 255, .97); }
[data-bs-theme="light"] .dropdown-item { color: var(--dna-text); }
[data-bs-theme="light"] .dropdown-item:hover,
[data-bs-theme="light"] .dropdown-item:focus { background: var(--dna-grad-soft); color: #1a1526; }

/* 提示 */
[data-bs-theme="light"] main .alert { border-color: var(--dna-border); }
[data-bs-theme="light"] .alert-success { background: rgba(34, 197, 94, .12); color: #15803d; }
[data-bs-theme="light"] .alert-danger  { background: rgba(239, 68, 68, .12); color: #b91c1c; }
[data-bs-theme="light"] .alert-warning { background: rgba(234, 179, 8, .14); color: #a16207; }
[data-bs-theme="light"] .alert-info    { background: rgba(34, 211, 238, .12); color: #0e7490; }

/* Hero / 自定义组件 */
[data-bs-theme="light"] .dna-hero {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(147, 51, 234, .18), transparent 55%),
    radial-gradient(120% 140% at 100% 20%, rgba(8, 145, 178, .16), transparent 55%),
    rgba(255, 255, 255, .7);
}
[data-bs-theme="light"] .dna-hero::after {
  background-image: radial-gradient(rgba(0, 0, 0, .05) 1px, transparent 1px);
}
[data-bs-theme="light"] .dna-chip { color: #7e22ce; background: rgba(147, 51, 234, .1); }
[data-bs-theme="light"] .dna-tag { color: #7e22ce; }
[data-bs-theme="light"] .dna-tile__title { color: #1a1526; }
[data-bs-theme="light"] .dna-empty { background: rgba(0, 0, 0, .015); }

/* 页脚 / 后台侧边栏 */
[data-bs-theme="light"] .footer.bg-light {
  background: rgba(246, 244, 251, .85) !important;
  color: var(--dna-muted);
  border-top: 1px solid var(--dna-border);
}
[data-bs-theme="light"] .sidebar.bg-light { background: rgba(255, 255, 255, .7) !important; }

/* 探索页筛选条 */
[data-bs-theme="light"] .dna-filterbar { background: rgba(255, 255, 255, .8); }

/* 富文本 / 文章正文 */
[data-bs-theme="light"] .richtext-content h1,
[data-bs-theme="light"] .richtext-content h2,
[data-bs-theme="light"] .richtext-content h3,
[data-bs-theme="light"] .richtext-content h4,
[data-bs-theme="light"] .richtext-content h5 { color: #1a1526; }
[data-bs-theme="light"] .richtext-content code { background: rgba(0, 0, 0, .06); }
[data-bs-theme="light"] .richtext-content pre { background: rgba(0, 0, 0, .04); }

/* 高亮 mark */
[data-bs-theme="light"] mark,
[data-bs-theme="light"] .bg-warning-subtle { background: rgba(219, 39, 119, .18) !important; color: #831843 !important; }

/* 浅色模式下，原深色专用文本类改为可读深色 */
[data-bs-theme="light"] .text-light { color: var(--dna-text) !important; }