/* ===== 日不落 MOD 主题 —— 兰斯系列暗黑奇幻风 =====
   配色取自 LOGO：哥特蓝字渐变 + 火焰橙剑痕 + 纯黑底，
   辅以兰斯X风格的暗金描边。 */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background-color: #05060a; color-scheme: dark; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(30, 47, 125, .25), transparent 70%),
    #05060a;
  color: #d6dbe8; line-height: 1.7;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: #8fb8ef; text-decoration: none; transition: color .15s; }
a:hover { color: #ffb163; text-decoration: none; }
.container { max-width: 1440px; margin: 0 auto; padding: 0 16px; }

/* 哥特衬线标题字（英文/数字呈 Old English 风格） */
h1, .gothic, .main-nav, .hero-sub {
  font-family: Georgia, "Times New Roman", "Palatino Linotype", "STSong", "SimSun", serif;
  letter-spacing: .06em;
}
h1 {
  font-size: 26px; margin-bottom: 14px;
  background: linear-gradient(180deg, #f2f7ff 20%, #7fa8e8 60%, #3a63c8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 24px rgba(63, 111, 209, .25);
}

/* 顶部导航：纯黑 + 蓝→橙渐变分割线（蓝字与火焰剑） */
.site-header {
  background: #000;
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, #1e2f7d 0%, #6db9f2 40%, #ff6a00 100%) 1;
}
.header-inner { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; padding: 10px 16px 12px; }
.logo img { height: 52px; display: block; }
.main-nav { display: flex; gap: 22px; flex: 1; font-size: 18px; flex-wrap: nowrap; white-space: nowrap; }
.main-nav a { color: #aab3c8; padding: 4px 0; border-bottom: 2px solid transparent; }
@media (max-width: 860px) {
  .header-inner { flex-wrap: wrap; }
  .main-nav { flex-wrap: wrap; gap: 16px; }
}
.main-nav a:hover { color: #ffb163; border-bottom-color: #ff6a00; }
.user-area { display: flex; align-items: center; gap: 8px; }
.user-link { color: #e8ecf5; display: flex; align-items: center; gap: 6px; }

.main-content { padding-top: 24px; padding-bottom: 48px; min-height: 60vh; flex: 1; width: 100%; }
.site-footer {
  background: #000; color: #5f6675; padding: 20px 0; font-size: 13px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, #1e2f7d, #6db9f2, #ff6a00) 1;
}

/* 按钮 */
.btn {
  display: inline-block; padding: 6px 16px; border: 1px solid #3a63c8; border-radius: 3px;
  background: #0e1220; color: #8fc3f5; cursor: pointer; font-size: 14px; transition: all .15s;
}
.btn:hover { border-color: #6db9f2; color: #fff; box-shadow: 0 0 10px rgba(79, 127, 224, .35); }
.btn-primary {
  background: linear-gradient(160deg, #1e2f7d, #3f6fd1); border-color: #5b83e0; color: #fff;
}
.btn-primary:hover { background: linear-gradient(160deg, #28399c, #5585e8); }
.btn-danger { border-color: #7a3b22; color: #ffab8f; background: #1d0f0a; }
.btn-danger:hover { border-color: #ff6a4d; color: #ffd2c4; box-shadow: 0 0 10px rgba(255, 106, 77, .3); }
.btn-sm { padding: 3px 10px; font-size: 13px; }

/* 首页头图：黑底 + 火焰辉光 + 主 LOGO */
.hero {
  position: relative; text-align: center; padding: 44px 32px 36px; margin-bottom: 28px;
  background: #000 radial-gradient(ellipse 60% 80% at 50% 60%, rgba(255, 90, 0, .16), transparent 70%);
  border: 1px solid #2a2417; border-radius: 6px; overflow: hidden;
}
.hero::after { /* 底部剑痕式渐变线 */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #1e2f7d 25%, #6db9f2 50%, #ff6a00 75%, transparent);
}
.hero img { max-width: 520px; width: 100%; height: auto; filter: drop-shadow(0 0 22px rgba(255, 100, 0, .3)); }
.hero-sub { color: #c8b280; font-size: 15px; margin-top: 14px; letter-spacing: .18em; }
.hero-actions { margin-top: 22px; display: flex; gap: 14px; justify-content: center; }
.hero .btn-primary {
  border-color: #ff7a1a; background: linear-gradient(160deg, #b23c00, #ff6a00); font-weight: bold;
}
.hero .btn-primary:hover { background: linear-gradient(160deg, #d14d00, #ff8a2e); box-shadow: 0 0 14px rgba(255, 122, 26, .5); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

/* 面板：暗金细边框，类兰斯X游戏UI框 */
.card-box {
  background: linear-gradient(180deg, #10131c, #0b0e16);
  border: 1px solid #3a3423; border-radius: 4px; padding: 18px 22px; margin-bottom: 16px;
  box-shadow: inset 0 0 0 1px rgba(216, 180, 90, .06), 0 2px 10px rgba(0, 0, 0, .5);
}
.card-box h2 {
  font-family: Georgia, "Times New Roman", "STSong", "SimSun", serif;
  font-size: 18px; color: #d8b45a; letter-spacing: .08em; margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, #d8b45a, transparent 80%) 1;
}
.muted { color: #767e92; font-size: 13px; }
.date { color: #767e92; font-size: 13px; margin-right: 6px; }
.simple-list { list-style: none; margin: 8px 0; }
.simple-list li { padding: 6px 0; border-bottom: 1px dashed #232a3c; }

.flash-box { margin-bottom: 14px; }
.flash { background: #241b0c; border: 1px solid #8a6a2a; color: #f0d08a; padding: 8px 12px; border-radius: 3px; margin-bottom: 6px; }

/* 表单 */
.form-box {
  background: linear-gradient(180deg, #10131c, #0b0e16); border: 1px solid #3a3423;
  max-width: 420px; margin: 30px auto; padding: 28px; border-radius: 4px;
}
.form-box.form-wide { max-width: 720px; }
.form-box h1 { margin-bottom: 16px; }
.form-box label, .card-box label { display: block; margin-bottom: 12px; font-size: 14px; color: #b6bdd0; }
input[type=text], input[type=password], input[type=file], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #2e3547; border-radius: 3px; font-size: 14px;
  margin-top: 4px; font-family: inherit; background: #070910; color: #dfe3ec;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: #4f7fe0; box-shadow: 0 0 8px rgba(79, 127, 224, .3); }
textarea { resize: vertical; }
.form-box form .btn { margin-top: 4px; }
.form-box p { margin-top: 12px; font-size: 14px; }

/* 表格 */
.table { width: 100%; border-collapse: collapse; background: #0e1119; border: 1px solid #2a2f40; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #212636; }
.table th { background: #080a10; color: #d8b45a; font-weight: normal; letter-spacing: .1em; font-size: 13px; }
.table tr:hover td { background: #12162a; }

/* 卡牌搜索 */
.search-bar { display: flex; gap: 10px; margin: 14px 0; flex-wrap: wrap; }
.search-bar input { flex: 2; min-width: 200px; }
.search-bar select { flex: 1; min-width: 140px; }
.search-bar .btn { flex-shrink: 0; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.card-item {
  background: linear-gradient(180deg, #10131c, #0b0e16); border: 1px solid #2e3547;
  border-radius: 4px; padding: 8px; transition: border-color .15s;
  /* 长列表渲染优化：屏幕外的卡牌跳过布局与绘制，滚动到附近才渲染 */
  content-visibility: auto;
  contain-intrinsic-size: auto 380px;
}
.card-item:hover { border-color: #4f7fe0; }
/* 卡牌翻转：点击后 3D 翻转，背面为压暗卡面 + 技能详情 */
.card-flip { position: relative; aspect-ratio: 208 / 312; perspective: 900px; cursor: pointer; }
.card-face {
  position: absolute; inset: 0; border-radius: 3px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .55s ease;
}
.card-front { transform: rotateY(0deg); }
.card-back { transform: rotateY(180deg); background: #05070c; }
.card-flip.flipped .card-front { transform: rotateY(-180deg); }
.card-flip.flipped .card-back { transform: rotateY(0deg); }
.card-back-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: brightness(.16);
}
.card-back-text {
  position: relative; height: 100%; overflow-y: auto;
  padding: 10px 9px; font-size: 12px; line-height: 1.6;
}
.card-back-text .skill-block { margin-bottom: 10px; }
.card-back-text .skill-block p { font-size: 12px; color: #c3cadb; margin-top: 2px; }
.card-item h3 { margin: 6px 0 4px; color: #c9d8f2; letter-spacing: .03em; text-align: center; font-size: 14px; }
.card-item > p { text-align: center; font-size: 12px; }
/* 卡牌图固定 208×312（2:3）比例，透明背景直接透出面板底色 */
.card-img { width: 100%; aspect-ratio: 208 / 312; object-fit: cover; border-radius: 3px; display: block; }
.card-img-empty { display: flex; align-items: center; justify-content: center; color: #4a5265; font-size: 13px; background: #070910; border: 1px solid #2e3547; }
.card-thumb { height: 48px; border-radius: 3px; border: 1px solid #2e3547; }
.card-detail { margin-top: 10px; border-top: 1px dashed #2a3040; padding-top: 10px; }
.skill-block { margin-bottom: 10px; }
.skill-block p { font-size: 13px; color: #aab3c8; margin-top: 2px; }
.skill-name { color: #ffa04d; font-size: 13px; }

/* 标签 */
.tag { display: inline-block; background: #16203c; color: #8fc3f5; border: 1px solid #2a3d6b; border-radius: 2px; padding: 0 8px; font-size: 12px; margin-right: 4px; }
.tag-skill { background: #2e1306; color: #ffa04d; border-color: #6b3410; }
.tag-pending { background: #241b0c; color: #f0d08a; border-color: #6b5a2a; }
.tag-essence { background: #2e1306; color: #ffb163; border-color: #a85c12; font-weight: bold; }
.soon-box { text-align: center; padding: 80px 20px; }

/* 头像 */
.avatar-sm { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; }
.avatar-lg { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-size: 36px; }
.avatar-placeholder { background: linear-gradient(135deg, #1e2f7d, #3f6fd1); color: #fff; border: 1px solid #5b83e0; }
.profile-box { display: flex; gap: 20px; align-items: center; }

.page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; flex-wrap: wrap; }
.reply-box .reply-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.inline-form { display: inline; }
.pending-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #232a3c; }
.pending-actions { display: flex; gap: 6px; align-items: flex-start; flex-shrink: 0; }
.content-text { margin-top: 8px; }
.post-img { max-width: 100%; border-radius: 4px; margin-top: 12px; border: 1px solid #2e3547; }
.card-form label { margin-bottom: 8px; }

/* 上传进度条 */
.up-bar { width: 100%; height: 14px; margin-top: 10px; background: #070910; border: 1px solid #2e3547; border-radius: 3px; overflow: hidden; }
.up-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, #1e2f7d, #3f6fd1); transition: width .2s; }
#up-text { margin-top: 6px; }
#upload-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ===== BOSS 图鉴 ===== */
.boss-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 16px; }
.boss-menu-item {
  display: block; text-align: center; padding: 34px 16px; font-size: 19px; letter-spacing: .12em;
  font-family: Georgia, "Times New Roman", "STSong", "SimSun", serif;
  color: #d8b45a; background: linear-gradient(180deg, #10131c, #0b0e16);
  border: 1px solid #3a3423; border-radius: 4px; transition: all .15s;
}
.boss-menu-item:hover { border-color: #ff6a00; color: #ffb163; box-shadow: 0 0 14px rgba(255, 106, 0, .25); }
.boss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; }
.boss-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px;
  background: linear-gradient(180deg, #10131c, #0b0e16); border: 1px solid #2e3547;
  border-radius: 4px; color: #c9d8f2; transition: border-color .15s;
}
.boss-card:hover { border-color: #4f7fe0; color: #fff; }
.boss-card img { max-width: 100%; max-height: 180px; object-fit: contain; border-radius: 3px; }
.boss-noimg { display: flex; align-items: center; justify-content: center; height: 120px; color: #4a5265; font-size: 13px; }
.comment-top { border-color: #a85c12; }
.like-btn { color: #8fc3f5; font-size: 13px; padding: 2px 10px; }
.like-btn.liked { color: #ffb163; border-color: #a85c12; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0; }

/* ===== 遗物图鉴：圆形图标 ===== */
.relic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px 12px; margin-top: 14px; }
.relic-card { text-align: center; }
.relic-img {
  width: 132px; height: 132px; border-radius: 50%; object-fit: cover;
  border: 2px solid #b49830; background: #0b0e16;
  box-shadow: 0 0 12px rgba(180, 152, 48, .25);
}
.relic-img.relic-neg { border-color: #a83c3c; box-shadow: 0 0 12px rgba(200, 60, 60, .3); }
.relic-img-empty { display: inline-flex; align-items: center; justify-content: center; color: #4a5265; font-size: 12px; border: 2px dashed #2e3547; }
.relic-name { display: block; margin-top: 8px; color: #d8b45a; font-size: 14px; }
.relic-desc { margin-top: 4px; font-size: 12px; color: #aab3c8; line-height: 1.6; min-height: 1.6em; }

/* ===== 说明书章节布局与正文（暗色版，沿用原说明书左侧目录设计） ===== */
.guide-layout { display: grid; grid-template-columns: 232px 1fr; gap: 18px; align-items: start; }
.guide-nav {
  position: sticky; top: 16px; background: #10131c; border: 1px solid #3a3423;
  border-radius: 4px; padding: 12px 10px; display: flex; flex-direction: column;
  max-height: calc(100vh - 32px); overflow-y: auto;
}
.guide-nav-item { color: #b6bdd0; padding: 4px 10px; font-size: 14px; border-left: 3px solid transparent; }
.guide-nav-item.sub { padding-left: 24px; font-size: 13px; color: #8b93a8; }
.guide-nav-item:hover { color: #ffb163; }
.guide-nav-item.active { color: #ffb163; border-left-color: #ff6a00; }
@media (max-width: 860px) {
  .guide-layout { grid-template-columns: 1fr; }
  .guide-nav { position: static; max-height: none; }
}

.manual-body { min-width: 0; }
.manual-body p { margin: .4em 0 1em; }
.manual-body .cent { text-align: center; }
.manual-body h3.hback {
  font-family: Georgia, "Times New Roman", "STSong", "SimSun", serif;
  font-size: 150%; color: #d8b45a; letter-spacing: .06em;
  background: #171a24; border-left: 10px solid #b49830;
  border-top: 1px solid #3a3423; border-bottom: 1px solid #3a3423;
  padding: 10px 16px; margin: .2em 0 1em;
}
.manual-body .h5back {
  font-family: Georgia, "Times New Roman", "STSong", "SimSun", serif;
  font-size: 112%; color: #d8b45a; letter-spacing: .05em; font-weight: bold;
  background: #151823; border-left: 6px solid #b49830; border-bottom: 1px solid #3a3423;
  padding: 5px 12px; margin: 1.4em 0 .7em;
}
.manual-body .txtm p { padding-left: .4em; }
.manual-body img { max-width: 100%; height: auto; }
.manual-body .guideImage { display: block; margin: .7em auto 1.1em; border: 1px solid #3a3423; background: #0e1017; }
.manual-body .dataTable { border-collapse: collapse; width: 100%; margin: .4em 0 1.2em; }
.manual-body .dataTable th, .manual-body .dataTable td { border: 1px solid #2e3547; padding: .45em .6em; vertical-align: top; line-height: 150%; }
.manual-body .dataTable th { background: #0e1017; color: #d8b45a; text-align: left; white-space: nowrap; font-weight: bold; }
.manual-body .dataTable td { background: #10131c; }
.manual-body .noticeBox { color: #f0d08a; background: #241b0c; border: 1px solid #8a6a2a; padding: .6em 1em; margin: 1em 0 1.2em; }
.manual-body .noticeBox p { margin: .2em 0; }
.manual-body .placeholder { color: #b49a5a; background: #1d1a12; border: 1px dotted #8a6a2a; padding: .6em 1em; margin: .5em 0 .5em 1em; }
.manual-body .statusIcon { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; margin-right: .45em; }
.manual-body .equipGrid { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; margin: .8em 0 1.2em; }
.manual-body .equipCard, .manual-body .buttonCard, .manual-body .actionIconCard { border: 1px solid #2e3547; background: #0e1017; padding: .6em; text-align: center; }
.manual-body .equipCard h5, .manual-body .buttonCard h5 { color: #d8b45a; border-bottom: 1px solid #2e3547; padding-bottom: .25em; margin-bottom: .45em; }
.manual-body .buttonGallery { display: flex; justify-content: center; gap: 1.2em; margin: .7em 0 1em; flex-wrap: wrap; }
.manual-body .actionIconGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: .55em; margin: .7em 0 1.1em; }
.manual-body .actionIconCard span { display: block; color: #aab3c8; font-size: 92%; margin-top: .3em; }
.manual-body .relicGarbageGrid { display: flex; flex-wrap: wrap; gap: .6em; justify-content: center; margin: .6em 0 1em; }
.manual-body .relicGarbageGrid img { width: 118px; border: 1px solid #2e3547; }
.manual-body .signatureDate, .manual-body .sysnote { color: #767e92; font-size: 90%; }
@media (max-width: 860px) { .manual-body .equipGrid { grid-template-columns: 1fr; } }

/* ===== 论坛表情包 ===== */
.emoji { height: 52px; vertical-align: middle; border-radius: 4px; }
.emoji-bar { margin: 2px 0 6px; display: flex; align-items: center; gap: 10px; }
.emoji-panel {
  display: none; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px;
  margin: 0 0 10px; padding: 8px; background: #0e1017; border: 1px solid #2e3547;
  border-radius: 4px; max-height: 230px; overflow-y: auto;
}
.emoji-panel.open { display: grid; }
.emoji-panel img { width: 58px; height: 58px; object-fit: cover; cursor: pointer; border-radius: 4px; border: 1px solid #2e3547; }
.emoji-panel img:hover { border-color: #ff6a00; box-shadow: 0 0 8px rgba(255, 106, 0, .35); }

/* 阵营分组 */
.faction-section { margin-bottom: 26px; }
.faction-title {
  font-family: Georgia, "Times New Roman", "STSong", "SimSun", serif;
  color: #d8b45a; font-size: 20px; letter-spacing: .1em; margin: 20px 0 12px;
  padding-bottom: 6px; border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, #d8b45a, transparent 70%) 1;
}
.faction-title .muted { font-size: 13px; margin-left: 8px; letter-spacing: 0; }

/* 阵营/阶段选项卡：一排排列，超出可横向滚动（支持鼠标按住拖动） */
.faction-tabs { display: flex; flex-wrap: nowrap; gap: 10px; margin: 14px 0 16px; overflow-x: auto; padding-bottom: 6px; user-select: none; cursor: grab; }
.faction-tabs:active { cursor: grabbing; }
.ftab {
  padding: 7px 18px; border: 1px solid #3a3423; border-radius: 16px;
  color: #b6bdd0; font-size: 15px; background: #10131c; white-space: nowrap; flex-shrink: 0;
}
.ftab:hover { color: #ffb163; border-color: #ff6a00; }
.ftab.active {
  color: #fff; background: linear-gradient(160deg, #1e2f7d, #3f6fd1);
  border-color: #5b83e0; font-weight: bold;
}
/* 阶段选项卡（中期/后期/崩坏）：暗金描边区分于阵营 */
.ftab-stage { border-color: #6b5a2a; color: #d8b45a; }
.ftab-stage:hover { color: #ffd75e; border-color: #b49830; }
.ftab-stage.active {
  background: linear-gradient(160deg, #6b4e12, #b49830);
  border-color: #d8b45a; color: #fff;
}

/* 卡图覆盖层：AP徽标 + 技能名（仿游戏内卡牌样式） */
.card-img-wrap { position: relative; }
.card-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 4px 4px; display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .88) 55%);
}
.skill-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ap-badge {
  flex-shrink: 0; min-width: 26px; height: 26px; line-height: 24px; text-align: center;
  background: #0a0c12; color: #ffd75e; border: 1px solid #b49830; border-radius: 3px;
  font-size: 15px; font-weight: bold; padding: 0 3px;
}
.skill-n {
  color: #fff; font-size: 18px; line-height: 26px; text-shadow: 0 1px 3px #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ===== 亮色主题 —— 兰斯X白金风 =====
   象牙白底 + 暗金描边 + 绯红点缀（取兰斯X决战配色），
   由导航栏按钮切换，选择保存在浏览器 localStorage。
   卡牌图上的覆盖层（技能名/AP徽标/卡背）保持深色，无需覆盖。 */
html[data-theme=light] { background-color: #f4f1e8; color-scheme: light; }
html[data-theme=light] body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(180, 152, 48, .14), transparent 70%),
    #f4f1e8;
  color: #2b2f3a;
}
html[data-theme=light] a { color: #3560b8; }
html[data-theme=light] a:hover { color: #c03a1b; }
html[data-theme=light] h1 {
  background: linear-gradient(180deg, #4a5f9e 20%, #27356b 60%, #1a2450);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 18px rgba(90, 110, 180, .18);
}

/* 顶部导航与页脚 */
html[data-theme=light] .site-header {
  background: #fffdf6;
  border-image: linear-gradient(90deg, #b49830 0%, #e3c878 40%, #c03a1b 100%) 1;
}
html[data-theme=light] .main-nav a { color: #4a5060; }
html[data-theme=light] .main-nav a:hover { color: #c03a1b; border-bottom-color: #c03a1b; }
html[data-theme=light] .user-link { color: #2b2f3a; }
html[data-theme=light] .site-footer {
  background: #fffdf6; color: #8a8f9c;
  border-image: linear-gradient(90deg, #b49830, #e3c878, #c03a1b) 1;
}

/* 按钮 */
html[data-theme=light] .btn { background: #fffdf6; border-color: #b9a05a; color: #6a5518; }
html[data-theme=light] .btn:hover { border-color: #c03a1b; color: #c03a1b; box-shadow: 0 0 8px rgba(192, 58, 27, .2); }
html[data-theme=light] .btn-primary { background: linear-gradient(160deg, #2c3a6e, #4a5f9e); border-color: #4a5f9e; color: #fff; }
html[data-theme=light] .btn-primary:hover { background: linear-gradient(160deg, #364682, #5a72b5); color: #fff; }
html[data-theme=light] .btn-danger { border-color: #c05a48; color: #b03a28; background: #fdf3f0; }
html[data-theme=light] .btn-danger:hover { border-color: #c03a1b; color: #a02a16; box-shadow: 0 0 8px rgba(192, 58, 27, .25); }

/* 首页头图 */
html[data-theme=light] .hero {
  background: #fffdf6 radial-gradient(ellipse 60% 80% at 50% 60%, rgba(224, 120, 30, .1), transparent 70%);
  border-color: #e0d2a8;
}
html[data-theme=light] .hero::after { background: linear-gradient(90deg, transparent, #b49830 25%, #e3c878 50%, #c03a1b 75%, transparent); }
html[data-theme=light] .hero img { filter: drop-shadow(0 0 18px rgba(200, 120, 30, .28)); }
html[data-theme=light] .hero-sub { color: #8a6d1f; }
html[data-theme=light] .hero .btn-primary { border-color: #d0601a; background: linear-gradient(160deg, #c04a10, #e07830); }
html[data-theme=light] .hero .btn-primary:hover { background: linear-gradient(160deg, #d05518, #ee8a40); box-shadow: 0 0 12px rgba(224, 120, 30, .4); }

/* 面板 */
html[data-theme=light] .card-box {
  background: linear-gradient(180deg, #fffef9, #faf6ea);
  border-color: #ddd0a8;
  box-shadow: inset 0 0 0 1px rgba(180, 152, 48, .08), 0 2px 8px rgba(120, 100, 40, .12);
}
html[data-theme=light] .card-box h2 { color: #8a6d1f; border-image: linear-gradient(90deg, #b49830, transparent 80%) 1; }
html[data-theme=light] .muted, html[data-theme=light] .date { color: #8a8f9c; }
html[data-theme=light] .simple-list li { border-bottom-color: #e4dcc2; }
html[data-theme=light] .flash { background: #fdf6e0; border-color: #c9a84c; color: #7a5c14; }

/* 表单 */
html[data-theme=light] .form-box { background: linear-gradient(180deg, #fffef9, #faf6ea); border-color: #ddd0a8; }
html[data-theme=light] .form-box label, html[data-theme=light] .card-box label { color: #4a5060; }
html[data-theme=light] input[type=text], html[data-theme=light] input[type=password],
html[data-theme=light] input[type=file], html[data-theme=light] select, html[data-theme=light] textarea {
  background: #fff; border-color: #d5cba6; color: #2b2f3a;
}
html[data-theme=light] input:focus, html[data-theme=light] select:focus, html[data-theme=light] textarea:focus {
  border-color: #b49830; box-shadow: 0 0 8px rgba(180, 152, 48, .3);
}

/* 表格 */
html[data-theme=light] .table { background: #fffef9; border-color: #ddd0a8; }
html[data-theme=light] .table th, html[data-theme=light] .table td { border-bottom-color: #e8e0c6; }
html[data-theme=light] .table th { background: #f4ecd4; color: #8a6d1f; }
html[data-theme=light] .table tr:hover td { background: #f8f2e0; }

/* 卡牌 */
html[data-theme=light] .card-item { background: linear-gradient(180deg, #fffef9, #faf6ea); border-color: #ddd0a8; }
html[data-theme=light] .card-item:hover { border-color: #b49830; }
html[data-theme=light] .card-item h3 { color: #2c3a6e; }
html[data-theme=light] .card-img-empty { background: #f2ecdc; border-color: #ddd0a8; color: #9a9378; }
html[data-theme=light] .card-thumb { border-color: #ddd0a8; }
html[data-theme=light] .card-detail { border-top-color: #e4dcc2; }
html[data-theme=light] .skill-block p { color: #5a6070; }
html[data-theme=light] .skill-name { color: #c05a10; }

/* 标签 */
html[data-theme=light] .tag { background: #e8eefb; color: #3560b8; border-color: #b8c8e8; }
html[data-theme=light] .tag-skill { background: #fbeadd; color: #c05a10; border-color: #e0a878; }
html[data-theme=light] .tag-pending { background: #fdf6e0; color: #7a5c14; border-color: #c9a84c; }
html[data-theme=light] .tag-essence { background: #fbeadd; color: #c03a1b; border-color: #d08048; }

/* 头像与帖子 */
html[data-theme=light] .avatar-placeholder { background: linear-gradient(135deg, #2c3a6e, #4a5f9e); }
html[data-theme=light] .pending-item { border-bottom-color: #e4dcc2; }
html[data-theme=light] .post-img { border-color: #ddd0a8; }
html[data-theme=light] .up-bar { background: #f2ecdc; border-color: #ddd0a8; }
html[data-theme=light] .up-bar-fill { background: linear-gradient(90deg, #2c3a6e, #4a5f9e); }

/* BOSS 图鉴 */
html[data-theme=light] .boss-menu-item { color: #8a6d1f; background: linear-gradient(180deg, #fffef9, #faf6ea); border-color: #ddd0a8; }
html[data-theme=light] .boss-menu-item:hover { border-color: #c03a1b; color: #c03a1b; box-shadow: 0 0 12px rgba(192, 58, 27, .2); }
html[data-theme=light] .boss-card { background: linear-gradient(180deg, #fffef9, #faf6ea); border-color: #ddd0a8; color: #2c3a6e; }
html[data-theme=light] .boss-card:hover { border-color: #b49830; color: #1a2450; }
html[data-theme=light] .boss-noimg { color: #9a9378; }
html[data-theme=light] .comment-top { border-color: #d08048; }
html[data-theme=light] .like-btn { color: #3560b8; }
html[data-theme=light] .like-btn.liked { color: #c03a1b; border-color: #d08048; }

/* 遗物图鉴 */
html[data-theme=light] .relic-img { background: #faf6ea; }
html[data-theme=light] .relic-img-empty { color: #9a9378; border-color: #d5cba6; }
html[data-theme=light] .relic-name { color: #8a6d1f; }
html[data-theme=light] .relic-desc { color: #5a6070; }

/* 说明书 */
html[data-theme=light] .guide-nav { background: #fffef9; border-color: #ddd0a8; }
html[data-theme=light] .guide-nav-item { color: #4a5060; }
html[data-theme=light] .guide-nav-item.sub { color: #7a8090; }
html[data-theme=light] .guide-nav-item:hover, html[data-theme=light] .guide-nav-item.active { color: #c03a1b; }
html[data-theme=light] .guide-nav-item.active { border-left-color: #c03a1b; }
html[data-theme=light] .manual-body h3.hback { color: #8a6d1f; background: #f4ecd4; border-top-color: #ddd0a8; border-bottom-color: #ddd0a8; }
html[data-theme=light] .manual-body .h5back { color: #8a6d1f; background: #f7f1de; border-bottom-color: #ddd0a8; }
html[data-theme=light] .manual-body .guideImage { border-color: #ddd0a8; background: #f2ecdc; }
html[data-theme=light] .manual-body .dataTable th, html[data-theme=light] .manual-body .dataTable td { border-color: #d5cba6; }
html[data-theme=light] .manual-body .dataTable th { background: #f4ecd4; color: #8a6d1f; }
html[data-theme=light] .manual-body .dataTable td { background: #fffef9; }
html[data-theme=light] .manual-body .noticeBox { color: #7a5c14; background: #fdf6e0; border-color: #c9a84c; }
html[data-theme=light] .manual-body .placeholder { color: #8a6d1f; background: #f7f1de; border-color: #c9a84c; }
html[data-theme=light] .manual-body .equipCard, html[data-theme=light] .manual-body .buttonCard,
html[data-theme=light] .manual-body .actionIconCard { border-color: #ddd0a8; background: #fffef9; }
html[data-theme=light] .manual-body .equipCard h5, html[data-theme=light] .manual-body .buttonCard h5 { color: #8a6d1f; border-bottom-color: #e4dcc2; }
html[data-theme=light] .manual-body .actionIconCard span { color: #5a6070; }
html[data-theme=light] .manual-body .relicGarbageGrid img { border-color: #ddd0a8; }
html[data-theme=light] .manual-body .signatureDate, html[data-theme=light] .manual-body .sysnote { color: #8a8f9c; }

/* 表情包 */
html[data-theme=light] .emoji-panel { background: #fffef9; border-color: #ddd0a8; }
html[data-theme=light] .emoji-panel img { border-color: #ddd0a8; }
html[data-theme=light] .emoji-panel img:hover { border-color: #c03a1b; box-shadow: 0 0 8px rgba(192, 58, 27, .3); }

/* 阵营/阶段选项卡 */
html[data-theme=light] .faction-title { color: #8a6d1f; border-image: linear-gradient(90deg, #b49830, transparent 70%) 1; }
html[data-theme=light] .ftab { background: #fffef9; border-color: #ddd0a8; color: #4a5060; }
html[data-theme=light] .ftab:hover { color: #c03a1b; border-color: #c03a1b; }
html[data-theme=light] .ftab.active { background: linear-gradient(160deg, #2c3a6e, #4a5f9e); border-color: #4a5f9e; color: #fff; }
html[data-theme=light] .ftab-stage { border-color: #c9a84c; color: #8a6d1f; }
html[data-theme=light] .ftab-stage:hover { color: #6a5518; border-color: #b49830; }
html[data-theme=light] .ftab-stage.active { background: linear-gradient(160deg, #8a6d1f, #b49830); border-color: #b49830; color: #fff; }

/* 登录页"记住登录"复选框 */
.remember-check { display: flex; align-items: center; gap: 6px; }
.remember-check input { width: auto; margin-top: 0; }

/* 管理后台模块选项卡：默认隐藏，点击后显示 */
.admin-mod { display: none; }
.admin-mod.show { display: block; }
.admin-mod.grid-2.show { display: grid; }

/* ===== 论坛楼中楼 ===== */
.sub-replies { margin-top: 12px; padding: 8px 12px; background: #0b0e16; border: 1px solid #232a3c; border-radius: 4px; }
.sub-reply { padding: 6px 0; border-bottom: 1px dashed #232a3c; font-size: 13px; }
.sub-reply:last-of-type { border-bottom: none; }
.sub-reply .muted { font-size: 12px; margin-left: 6px; }
.sub-at { color: #ffa04d; }
.sub-reply-btn { font-size: 12px; margin-left: 8px; }
.sub-more { display: inline-block; margin-top: 6px; font-size: 13px; }
.sub-reply-form { margin-top: 8px; }
.sub-reply-form textarea { margin-bottom: 6px; }

html[data-theme=light] .sub-replies { background: #f7f1de; border-color: #e4dcc2; }
html[data-theme=light] .sub-reply { border-bottom-color: #e4dcc2; }
html[data-theme=light] .sub-at { color: #c05a10; }

/* 导航栏未读消息角标 */
.notif-badge { display: inline-block; background: #c03a1b; color: #fff; border-radius: 9px; padding: 0 6px; font-size: 12px; line-height: 16px; margin-left: 4px; }

/* 顶部用户区：按钮与昵称不折行，避免挤压成竖排字 */
.user-area { flex-shrink: 0; }
.user-area .btn, .user-area .user-link { white-space: nowrap; }

/* ===== 手机端适配（≤720px） ===== */
@media (max-width: 720px) {
  /* 顶部：logo 与用户区一行，导航第二行横向滚动 */
  .header-inner { gap: 8px; padding: 8px 12px 10px; }
  .logo img { height: 40px; }
  .main-nav {
    order: 3; flex-basis: 100%;
    flex-wrap: nowrap; overflow-x: auto; gap: 16px;
    font-size: 15px; padding-bottom: 4px;
  }
  .user-area { margin-left: auto; }
  .user-area .btn { padding: 3px 8px; font-size: 13px; }

  /* 首页头图：压缩内边距与字号，按钮允许换行 */
  .hero { padding: 28px 16px 24px; }
  .hero-sub { font-size: 13px; letter-spacing: .1em; }
  .hero-actions { flex-wrap: wrap; gap: 10px; }
  .hero-actions .btn { padding: 6px 12px; font-size: 14px; }

  /* 表格：整体横向滚动，单元格不竖排折字 */
  .table { display: block; overflow-x: auto; white-space: nowrap; font-size: 13px; }
  .table th, .table td { padding: 8px 10px; }

  /* 图鉴网格：手机两列/更小卡片（minmax(0,1fr) 防止 content-visibility 撑宽轨道） */
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .card-item { min-width: 0; }
  .boss-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .relic-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px 6px; }
  .relic-img { width: 100px; height: 100px; }

  /* 版面收紧 */
  h1 { font-size: 22px; }
  .main-content { padding-top: 16px; }
  .card-box { padding: 14px; }
  .form-box { margin: 16px auto; padding: 20px 16px; }
  .pending-item { flex-direction: column; }
  .profile-box { flex-direction: column; align-items: flex-start; }
  .emoji-panel { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
  .emoji-panel img { width: 48px; height: 48px; }
}

/* 技能类型图标（卡面技能名后） */
.skill-icon { width: 20px; height: 20px; object-fit: contain; vertical-align: -4px; margin-left: 4px; }

/* 单卡评论区入口与详情页布局 */
.card-more { font-weight: normal; letter-spacing: .1em; }
.card-detail-head { display: flex; gap: 20px; align-items: flex-start; }
.card-detail-img { width: 208px; border-radius: 4px; flex-shrink: 0; }
@media (max-width: 720px) { .card-detail-head { flex-direction: column; } .card-detail-img { width: 160px; } }

/* ===== BOSS 详情页：数据表与难度坐标图 ===== */
.boss-head { display: flex; gap: 20px; align-items: flex-start; }
.boss-detail-img { max-width: 260px; border-radius: 4px; flex-shrink: 0; }
.boss-info { flex: 1; min-width: 0; }
.boss-stats { max-width: 420px; margin-top: 10px; }
.boss-stats th { width: 110px; white-space: nowrap; }
.charts { display: flex; gap: 14px; flex-wrap: wrap; }
.chart { margin: 0; }
.chart figcaption { text-align: center; font-size: 14px; color: #d8b45a; margin-bottom: 4px; letter-spacing: .06em; }
.chart svg { display: block; width: 300px; background: #0b0e16; border: 1px solid #2e3547; border-radius: 4px; }
.chart .axis { stroke: #8b93a8; stroke-width: 1.5; fill: #8b93a8; }
.chart .curve { stroke: #6db9f2; stroke-width: 2; stroke-dasharray: 6 5; fill: none; }
.chart .axis-label { fill: #8b93a8; font-size: 12px; }
.chart .curve-note { fill: #5f6675; font-size: 13px; }
@media (max-width: 720px) {
  .boss-head { flex-direction: column; }
  .boss-detail-img { max-width: 200px; }
  .chart svg { width: 100%; }
  .chart { flex: 1 1 240px; }
}

html[data-theme=light] .chart figcaption { color: #8a6d1f; }
html[data-theme=light] .chart svg { background: #fffef9; border-color: #ddd0a8; }
html[data-theme=light] .chart .axis { stroke: #7a8090; fill: #7a8090; }
html[data-theme=light] .chart .curve { stroke: #3560b8; }
html[data-theme=light] .chart .axis-label { fill: #7a8090; }
html[data-theme=light] .chart .curve-note { fill: #9a9378; }

/* 中等屏幕（≤1240px）：顶栏同样换两行，导航第二行可横向滚动，避免页面横向溢出 */
@media (max-width: 1240px) {
  .header-inner { flex-wrap: wrap; }
  .main-nav { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
}

/* 卡面左上角评论数徽标（半透明小圆） */
.comment-badge {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  min-width: 24px; height: 24px; line-height: 22px; padding: 0 4px;
  border-radius: 50%; background: rgba(5, 6, 10, .55);
  border: 1px solid rgba(216, 180, 90, .65); color: #ffd75e;
  font-size: 13px; font-weight: bold; text-align: center;
  pointer-events: none;
}

/* ===== 头像裁剪器 ===== */
.crop-view {
  position: relative; width: 260px; height: 260px; margin: 10px 0;
  overflow: hidden; border: 1px solid #3a3423; border-radius: 4px;
  background: #070910; cursor: grab; touch-action: none;
}
.crop-view:active { cursor: grabbing; }
.crop-view img { position: absolute; max-width: none; user-select: none; }
/* 圆形截取区：内接圆清晰，圆外压暗 */
.crop-circle {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .55);
  border: 2px solid rgba(216, 180, 90, .8);
  pointer-events: none;
}
.crop-zoom { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.crop-zoom input { flex: 1; max-width: 220px; }
.crop-actions { display: flex; gap: 10px; margin: 10px 0 6px; }
html[data-theme=light] .crop-view { background: #f2ecdc; border-color: #ddd0a8; }
html[data-theme=light] .crop-circle { border-color: rgba(138, 109, 31, .9); }

/* ===== 主楼富文本编辑器 ===== */
.editor-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.editor-colors { display: inline-flex; gap: 5px; margin: 0 4px; }
.color-dot {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid #4a5265;
  cursor: pointer; padding: 0;
}
.color-dot:hover { transform: scale(1.15); }
.editor-preview-wrap { margin-top: 10px; }
.editor-preview { min-height: 60px; font-size: 14px; }
.post-img-inline { max-width: 100%; border-radius: 4px; margin: 8px 0; display: block; border: 1px solid #2e3547; }
html[data-theme=light] .color-dot { border-color: #b9a05a; }
html[data-theme=light] .post-img-inline { border-color: #ddd0a8; }

/* 所见即所得编辑区（样式与输入框一致） */
.editor-area {
  width: 100%; min-height: 220px; padding: 8px 10px; margin-top: 4px;
  border: 1px solid #2e3547; border-radius: 3px; font-size: 14px;
  font-family: inherit; line-height: 1.7; background: #070910; color: #dfe3ec;
  outline: none; overflow-y: auto;
}
.editor-area:focus { border-color: #4f7fe0; box-shadow: 0 0 8px rgba(79, 127, 224, .3); }
.editor-area:empty::before { content: attr(data-placeholder); color: #4a5265; }
.editor-area .emoji { height: 52px; }
html[data-theme=light] .editor-area { background: #fff; border-color: #d5cba6; color: #2b2f3a; }
html[data-theme=light] .editor-area:focus { border-color: #b49830; box-shadow: 0 0 8px rgba(180, 152, 48, .3); }

/* 编辑器字号下拉 */
.editor-size { width: auto; padding: 4px 6px; font-size: 13px; }

/* 审核中心子选项卡 */
.review-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.review-sub { display: none; }
.review-sub.show { display: block; }
/* 遗物圆形图标的评论角标定位容器 */
.relic-img-wrap { position: relative; display: inline-block; }
.relic-img-wrap .comment-badge { top: 4px; left: 4px; }