/* ============================================================
   浅色主题预览（theme-light.css）
   仅用于本次预览，不改动原深色 CSS。
   页面在最后加载本文件，用同名 CSS 变量覆盖深色主题，
   并补齐少量写死的深色块。若预览不合适，删除本文件并
   移除页面中的 <link rel="stylesheet" href="...theme-light.css">
   即可恢复深色最终版。
   ============================================================ */

:root{
  --bg:#f4f7fb;
  --bg-soft:#ffffff;
  --card:#ffffff;
  --card-hover:#eef3ff;
  --line:#d9e0ec;
  --text:#182238;
  --txt:#182238;
  --text-dim:#5b6883;
  --accent:#008fb3;
  --accent-2:#6c5ce7;
  --gold:#b57a16;
  --danger:#d64568;
  --green:#2f9c6c;
  --ok:#2f9c6c;
  --bg-card:#ffffff;
  --border:#dbe4f0;
  --silver:#8793ad;
  --el-咒:#c8326a;
  --el-暗:#7d42cf;
  --el-灵:#087fa5;
  --el-魂:#238a58;
  --el-光:#b47913;
  --el-相:#2f68d6;
  --radius:14px;
}

html,
body{
  background:var(--bg);
  color:var(--text);
}

a{
  color:inherit;
}

/* 页头与下拉菜单 */
header,
.site-header{
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 0 rgba(30,41,59,.05);
}
.nav-item .dropdown,
.dropdown{
  box-shadow:0 12px 32px rgba(30,41,59,.14);
}

/* 首页轮播与卡片 */
/* 翻页长条胶囊自带深色底托（见 main.css），浅色主题沿用，保证在深浅封面上都看得清（2026-09-16） */
.ai-panel{
  background:linear-gradient(160deg,#eaf7fb,#f0edff);
  border:1px solid rgba(0,143,179,.35);
  box-shadow:0 12px 30px rgba(0,143,179,.10);
}
/* 配队攻略面板：大条与梯度小块在浅色主题下用白底 + 淡描边 */
.ai-total{
  background:rgba(255,255,255,.86);
  border-color:var(--line);
}
.ai-tiers .ai-tier{
  background:rgba(255,255,255,.7);
  border-color:var(--line);
}
.ai-tiers .ai-tier.is-top{
  background:linear-gradient(135deg,rgba(0,143,179,.14),rgba(108,92,231,.14));
  border-color:rgba(0,143,179,.42);
}
.npc-card{
  background:linear-gradient(120deg,#eef5ff,#f2efff);
}

/* 编辑模式与弹层 */
.edit-btn{
  background:rgba(255,255,255,.92);
  box-shadow:0 4px 16px rgba(30,41,59,.12);
}
.edit-overlay{
  background:rgba(30,41,59,.42);
}
.edit-fmtbar,
.edit-modal{
  box-shadow:0 12px 32px rgba(30,41,59,.18);
}

/* 文章正文：原深色稿中有少量写死浅色文字，统一改回正文色 */
.article-body p,
.article-body ul,
.article-body ol,
.article-body td,
.article-body .lead{
  color:var(--text);
}
.article-body .lead{
  color:#3e4b66;
}
.article-body pre{
  background:#f1f5f9;
  color:var(--text);
}
.article-body tr:nth-child(even) td{
  background:rgba(30,41,59,.035);
}
.article-list .card-excerpt p,
.article-list .card-excerpt h4,
.article-list .card-excerpt li{
  color:var(--text-dim);
}
.article-list .card-excerpt h4{
  color:var(--accent);
}

/* 提示条 */
.note-bar{
  background:#eaf7fb;
  border-color:rgba(0,143,179,.45);
  color:#245663;
}

/* 图鉴卡片里的深色渐变块 */
.left-art{
  background:radial-gradient(ellipse at center,#eef5ff,#e8f1f8);
}
.showroom,
.v-thumb,
.d-thumb,
.skin-card img{
  background:radial-gradient(ellipse at 50% 120%,#e9f2fa 0%,#f5f7fb 58%,#eef3ff 100%);
}
.v-thumb::after{
  background:linear-gradient(180deg,rgba(255,255,255,0) 52%,rgba(244,247,251,.88) 100%);
}
.d-type,
.d-rar,
.type-chip,
.brand-tag{
  background:rgba(255,255,255,.72);
}
/* 车辆图鉴卡片左上角的车型标签在源码里是 .type-chip.t-xxx（两个类），
   优先级高于上面的 .type-chip，会带着深色主题的 rgba(13,16,32,.55) 底；
   这里用同优先级选择器补一层浅底，右侧品牌标签保持同一观感。 */
.type-chip.t-汽车,
.type-chip.t-摩托车,
.type-chip.t-卡丁车,
.type-chip.t-自行车,
.type-chip.t-电瓶车,
.type-chip.t-摩托艇{
  background:rgba(255,255,255,.78);
}
.reaction-box .icon{
  background:#eef3ff;
}
.splash-caption{
  color:var(--text);
  background:linear-gradient(180deg,rgba(244,247,251,0),rgba(244,247,251,.88));
}

/* 勾选完成状态 */
.cat-row.done,
.code-row.done{
  background:rgba(30,41,59,.045);
}
.cat-detail,
.sub-row{
  background:rgba(30,41,59,.028);
}

/* 配队/自定义配队中的深色卡片 */
.team-card,
.slot,
.kongmu-board{
  background:var(--card);
}
.team-card{
  box-shadow:0 14px 34px rgba(30,41,59,.10);
}
.kongmu-board .kcell.kc-void{
  background:#e9eef7;
  border-color:rgba(30,41,59,.08);
}
.toast{
  background:#ffffff;
  border:1px solid rgba(0,143,179,.5);
  color:var(--text);
  box-shadow:0 10px 24px rgba(30,41,59,.18);
}

/* 图片占位底色统一改为浅色 */
.team-avatars img,
.member-strip img,
.member-portrait img,
.arc-icon,
.gear-icon,
.gear-shapes .shape,
.alt-avatar,
.slot-main img,
.char-card img,
.pick-grid .pick-item img,
.pick-placeholder{
  background:#eef3ff;
}

/* 浅色主题下按钮文字改用白色，避免深色渐变按钮上仍用深字 */
.ai-btn,
.btn.primary,
.btn.search-btn,
.edit-toggle.on,
.edit-btn-primary,
.gallery-page-btn.active,
.fbtn.on,
.switch-btn.on,
.lv-btn.active,
.chip.on,
.copy-btn:hover,
.copy-btn.copied,
.exp-btn:hover,
.code-item button{
  color:#ffffff;
}

/* 个别浅色/金色按钮保留深字，保证对比度 */
.fbtn.rar-A.on,
.fbtn[data-val="摩托车"].on,
.switch-btn.q-blue.on,
.switch-btn.q-purple.on{
  color:#182238;
}
.fbtn.rar-S.on,
.fbtn.rar-B.on,
.fbtn[data-val="汽车"].on,
.fbtn[data-val="卡丁车"].on,
.fbtn[data-val="自行车"].on,
.fbtn[data-val="电瓶车"].on,
.fbtn[data-val="摩托艇"].on,
.switch-btn.q-orange.on{
  color:#ffffff;
}

/* 编辑态和图片弹窗按钮 */
.edit-dock button:hover,
.edit-dock button.active,
.edit-img-panel .btn-ok{
  color:#ffffff;
}

/* 标签、徽章、筛选芯片：浅色主题下改成浅底深字 */
.badge,
.tag,
.meta-chip,
.type-chip,
.tag-pill,
.set-el,
.pri,
.chip{
  background:rgba(255,255,255,.72);
  border-color:rgba(30,41,59,.16);
  color:var(--text-dim);
}

.badge.rar-S,
.badge.rarity-S,
.badge.rarity-orange,
.badge.q-orange,
.tag-rarity,
.tag-type,
.pri.p-medium,
.set-el.el-光{
  background:rgba(181,122,22,.10);
  border-color:rgba(181,122,22,.35);
  color:var(--gold);
}

.badge.rar-A,
.badge.rarity-A,
.badge.rarity-blue,
.badge.q-blue,
.badge.rarity-B,
.badge.lv-silver{
  background:rgba(95,107,133,.10);
  border-color:rgba(95,107,133,.35);
  color:#5f6b85;
}

.badge.rarity-B{
  background:rgba(42,105,156,.10);
  border-color:rgba(42,105,156,.35);
  color:#2a699c;
}

.badge.rarity-purple,
.badge.q-purple,
.badge.role,
.set-el.el-咒,
.set-el.el-暗,
.set-el.el-相,
.tag-el.el-咒,
.tag-el.el-暗,
.tag-el.el-相{
  background:rgba(108,92,231,.10);
  border-color:rgba(108,92,231,.32);
  color:#5b45c2;
}

.badge.slot,
.tag-el.el-灵,
.set-el.el-灵{
  background:rgba(0,143,179,.10);
  border-color:rgba(0,143,179,.32);
  color:var(--accent);
}

.badge.set,
.tag-el.el-魂,
.set-el.el-魂{
  background:rgba(47,156,108,.10);
  border-color:rgba(47,156,108,.32);
  color:var(--green);
}

.badge.gstat,
.tag-el.el-光{
  background:rgba(181,122,22,.10);
  border-color:rgba(181,122,22,.32);
  color:var(--gold);
}

.badge.lv-gold{
  background:rgba(181,122,22,.10);
  border-color:rgba(181,122,22,.35);
  color:var(--gold);
}
.badge.lv-bronze{
  background:rgba(138,90,42,.10);
  border-color:rgba(138,90,42,.35);
  color:#8a5a2a;
}
.badge.lv-other{
  background:rgba(30,41,59,.05);
  border-color:rgba(30,41,59,.16);
  color:var(--text-dim);
}

/* 元素徽章按浅色可读色覆盖原亮色 */
.el-光,
.el-灵,
.el-咒,
.el-暗,
.el-魂,
.el-相{
  color:var(--text-dim);
  border-color:rgba(30,41,59,.20);
}
.el-光{color:var(--el-光);border-color:var(--el-光)}
.el-灵{color:var(--el-灵);border-color:var(--el-灵)}
.el-咒{color:var(--el-咒);border-color:var(--el-咒)}
.el-暗{color:var(--el-暗);border-color:var(--el-暗)}
.el-魂{color:var(--el-魂);border-color:var(--el-魂)}
.el-相{color:var(--el-相);border-color:var(--el-相)}

.set-el.el-心灵,
.tag-el.el-心灵{
  background:rgba(204,122,60,.10);
  border-color:rgba(204,122,60,.35);
  color:#b05c1d;
}
.set-el.el-防御,
.tag-el.el-防御{
  background:rgba(38,122,181,.10);
  border-color:rgba(38,122,181,.35);
  color:#2679b3;
}
.set-el.el-生命,
.tag-el.el-生命{
  background:rgba(47,156,108,.10);
  border-color:rgba(47,156,108,.35);
  color:var(--green);
}
.set-el.el-攻击,
.tag-el.el-攻击{
  background:rgba(209,62,95,.10);
  border-color:rgba(209,62,95,.35);
  color:var(--danger);
}
.set-el.el-充能,
.tag-el.el-充能{
  background:rgba(108,92,231,.10);
  border-color:rgba(108,92,231,.35);
  color:#5b45c2;
}

/* 角色详情立绘区明确使用白色底 */
.splash-wrap,
.hero-right .splash-wrap,
.splash-ph{
  background:#ffffff;
}
.splash-wrap{
  border-color:rgba(0,143,179,.35);
}

/* 展示框、信息卡和弹层统一为浅色卡片 */
.info-card,
.acquire-card,
.section,
.article-body,
.price-box,
.reaction-box,
.cat-row,
.sub-row,
.code-row,
.gantt-card,
.skin-item,
.skin-dot-preview,
.edit-modal,
.edit-fmtbar,
.edit-img-panel{
  background:#ffffff;
  border-color:var(--line);
}

.skin-dot-preview{
  box-shadow:0 10px 26px rgba(30,41,59,.18);
}
.price-box{
  background:linear-gradient(120deg,rgba(181,122,22,.08),rgba(108,92,231,.06));
  border-color:rgba(181,122,22,.35);
}

/* 活动日历状态条与标签改浅色底 */
.g-bar.b-upcoming{
  background:rgba(181,122,22,.10);
  border-color:rgba(181,122,22,.35);
  color:var(--gold);
}
.g-bar.b-ended{
  background:rgba(91,100,134,.16);
  color:var(--text-dim);
}
.g-bar.b-permanent{
  background:rgba(108,92,231,.14);
  border-color:rgba(108,92,231,.35);
  color:#4b3f8c;
}

/* 成就卡标题后的条数 */
.achv-card .meta .cnt{
  color:var(--text-dim);
}