/* ============================================================
   XL.AI — 主题系统（明亮 / 暗黑 / 跟随系统）
   用法：<html data-theme="dark|light">，由 js/theme.js 在 head 中同步写入
   说明：本文件只做「变量重定义 + 少量组件适配」，不改动各页面结构样式
   ============================================================ */

/* ---------- 暗色（默认，与 global.css 保持一致） ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0A0A;
  --bg-soft: #0E0E12;
  --surface: #141414;
  --surface-2: #1A1A1E;
  --surface-3: #202026;
  --surface-hover: #1C1C1E;
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.10);
  --border-hover: rgba(255, 255, 255, 0.10);
  --text: #ffffff;
  --text-sec: rgba(255, 255, 255, 0.55);
  --text-secondary: rgba(255, 255, 255, 0.55);
  --text-ter: rgba(255, 255, 255, 0.30);
  --text-tertiary: rgba(255, 255, 255, 0.30);
  --accent: #6C5CE7;
  --accent-light: #A29BFE;
  --accent-ink: #ffffff;
  --accent-soft: rgba(108, 92, 231, 0.12);
  --accent-glow: rgba(108, 92, 231, 0.25);
  --success: #00B894;
  --danger: #FF7675;
  --warning: #FDCB6E;
  --layer-1: rgba(255, 255, 255, 0.03);
  --layer-2: rgba(255, 255, 255, 0.06);
  --layer-3: rgba(255, 255, 255, 0.10);
  --nav-bg: rgba(10, 10, 10, 0.82);
  --glass: rgba(20, 20, 20, 0.72);
  --code-bg: #0F0F13;
  --shadow-1: 0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 20px 50px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 28px 80px rgba(0, 0, 0, 0.55);
  --poster-bg: #121218;
}

/* ---------- 亮色 ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F6F8;
  --bg-soft: #EFEFF3;
  --surface: #FFFFFF;
  --surface-2: #F4F4F7;
  --surface-3: #EAEAEF;
  --surface-hover: #F0F0F4;
  --border: rgba(17, 17, 22, 0.08);
  --border-strong: rgba(17, 17, 22, 0.14);
  --border-hover: rgba(17, 17, 22, 0.18);
  --text: #16161A;
  --text-sec: rgba(22, 22, 26, 0.62);
  --text-secondary: rgba(22, 22, 26, 0.62);
  --text-ter: rgba(22, 22, 26, 0.42);
  --text-tertiary: rgba(22, 22, 26, 0.42);
  --accent: #5B4BD6;
  --accent-light: #6C5CE7;
  --accent-ink: #ffffff;
  --accent-soft: rgba(91, 75, 214, 0.08);
  --accent-glow: rgba(91, 75, 214, 0.18);
  --success: #00996F;
  --danger: #D64545;
  --warning: #B47A00;
  --layer-1: rgba(17, 17, 22, 0.035);
  --layer-2: rgba(17, 17, 22, 0.06);
  --layer-3: rgba(17, 17, 22, 0.10);
  --nav-bg: rgba(255, 255, 255, 0.86);
  --glass: rgba(255, 255, 255, 0.78);
  --code-bg: #F1F1F5;
  --shadow-1: 0 2px 10px rgba(17, 17, 22, 0.06);
  --shadow-2: 0 14px 40px rgba(17, 17, 22, 0.10);
  --shadow-3: 0 24px 60px rgba(17, 17, 22, 0.14);
  --poster-bg: #FFFFFF;
}

/* 滚动条 */
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(17, 17, 22, 0.14) }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(17, 17, 22, 0.24) }

/* ---------- 旧页面在亮色下的必要适配 ----------
   这些页面的部分背景/描边写死了暗色 rgba(255,255,255,.0x)，
   在亮色下会「消失」，这里按组件批量纠偏。 */
html[data-theme="light"] .nav {
  background: var(--nav-bg);
  border-bottom: 0.5px solid var(--border);
  box-shadow: 0 1px 0 rgba(17, 17, 22, 0.03);
}
html[data-theme="light"] .nav-link:hover { background: var(--layer-1) }
/* 「AI 画布」入口：原样式 hover 时把文字改成 #fff —— 配的是 16% 透明度的浅紫底，
   亮色主题下就是「白字浅紫底」，等于 hover 后按钮里的字消失。改成深紫 + 加深底色。 */
html[data-theme="light"] .nav-canvas:hover {
  color: var(--accent);
  background: rgba(91, 75, 214, 0.14);
  box-shadow: 0 4px 16px var(--accent-glow);
}
.nav-canvas:active { transform: translateY(1px) }

/* 导航 / 侧栏里的「退出登录」按钮：各页面用内联 style 写死了 --text-tertiary，
   这个色在深色底上（white 30%）和浅色底上（black 42%）都偏淡，切换主题时尤其明显。
   用 title 兜住这一批，统一提一档对比度；hover 再亮一档并给底色反馈。 */
[title="退出登录"] {
  color: var(--text-sec) !important;
  transition: color .2s, background .2s, border-color .2s;
}
[title="退出登录"]:hover {
  color: var(--text) !important;
  background: var(--layer-2) !important;
  border-color: var(--border-strong) !important;
}
html[data-theme="light"] .card,
html[data-theme="light"] .learn-card { border-color: var(--border); background: var(--surface) }
html[data-theme="light"] .card:hover,
html[data-theme="light"] .learn-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2) }
html[data-theme="light"] .card-tag,
html[data-theme="light"] .learn-tag { background: var(--layer-1); border-color: var(--border) }
html[data-theme="light"] .site-footer { border-top-color: var(--border) }
html[data-theme="light"] .skeleton { background: linear-gradient(90deg, #EDEDF1 25%, #F6F6F8 50%, #EDEDF1 75%); background-size: 200% 100% }
html[data-theme="light"] .toast { background: rgba(24, 24, 30, 0.94); color: #fff; border-color: rgba(0, 0, 0, 0.2) }

/* 后台通用：白底下的表格 / 面板 */
html[data-theme="light"] thead { background: var(--surface-2) }
html[data-theme="light"] tr:hover td { background: var(--layer-1) }
html[data-theme="light"] td { border-bottom-color: var(--border) }
html[data-theme="light"] .sidebar-item:hover { background: var(--layer-1) }
html[data-theme="light"] .tab-item:hover { background: var(--layer-1) }
html[data-theme="light"] .tab-item .badge { background: var(--layer-2) }

/* 输入控件统一走变量，避免亮色下变成「白底白字」 */
input, textarea, select { color-scheme: inherit }

/* ---------- 表单控件 ----------
   旧页面输入框统一是「透明底 + 0.5px 淡描边」，浅底上会完全没有边界感。 */
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group select,
html[data-theme="light"] .form-group textarea,
html[data-theme="light"] .search-box input,
html[data-theme="light"] .vp-custom input {
  background: var(--surface);
  border-color: var(--border-strong);
}
html[data-theme="light"] .form-group input:focus,
html[data-theme="light"] .form-group select:focus,
html[data-theme="light"] .form-group textarea:focus,
html[data-theme="light"] .search-box input:focus { border-color: rgba(91, 75, 214, 0.55) }

/* ---------- 虚线上传区 ---------- */
html[data-theme="light"] .upload-zone,
html[data-theme="light"] .upload-area {
  /* 0.14 的淡描边配 1px dashed 在白底上几乎看不出边界，虚线区等于消失了 */
  border-color: rgba(17, 17, 22, 0.22);
  background: var(--surface);
}
html[data-theme="light"] .upload-zone:hover,
html[data-theme="light"] .upload-zone.dragover,
html[data-theme="light"] .upload-area:hover,
html[data-theme="light"] .upload-area.dragover {
  border-color: rgba(91, 75, 214, 0.5);
  background: rgba(91, 75, 214, 0.04);
}
/* 上传区里的「粘贴图片」小胶囊：原先是 8% 紫底 + 浅紫字，白底上整块糊在一起 */
html[data-theme="light"] .upload-zone .paste-badge,
html[data-theme="light"] .upload-area .paste-badge {
  background: rgba(91, 75, 214, 0.07);
  border-color: rgba(91, 75, 214, 0.2);
  color: var(--accent);
}
html[data-theme="light"] .upload-zone .paste-badge button,
html[data-theme="light"] .upload-area .paste-badge button {
  background: rgba(91, 75, 214, 0.12) !important;
  color: var(--accent) !important;
}
html[data-theme="light"] .upload-zone .paste-badge button:hover,
html[data-theme="light"] .upload-area .paste-badge button:hover {
  background: var(--accent) !important;
  color: #fff !important;
}
/* ---------- 搜索页头部 ---------- */
/* 「搜索」提交按钮原来也是 15% 紫底 + 紫字，白底上像个禁用态；亮色下直接给实心主色按钮 */
html[data-theme="light"] .search-box button {
  background: var(--accent) !important;
  color: #fff !important;
}
html[data-theme="light"] .search-box button:hover { filter: brightness(1.08) }
html[data-theme="light"] .search-top .back { color: var(--text-sec) }
html[data-theme="light"] .search-top .back:hover { color: var(--accent) }

/* ---------- 卡片内的小标签 / 参数面板 / 浅色块 ---------- */
html[data-theme="light"] .card-tag,
html[data-theme="light"] .detail-tag,
html[data-theme="light"] .tag-bar .t,
html[data-theme="light"] .detail-params-box,
html[data-theme="light"] .params-line,
html[data-theme="light"] .detail-votes,
html[data-theme="light"] .vote-stats .tag,
html[data-theme="light"] .vote-stats .vs-tag,
html[data-theme="light"] .vc-col,
html[data-theme="light"] .mode-bar,
html[data-theme="light"] .paste-badge .key,
html[data-theme="light"] .modal-close,
html[data-theme="light"] .del-cancel,
html[data-theme="light"] .btn-reselect,
html[data-theme="light"] .shimmer {
  background: var(--layer-1);
  border-color: var(--border);
}
html[data-theme="light"] .vc-col { background: var(--layer-2) }
html[data-theme="light"] .shimmer {
  background: linear-gradient(90deg, #EDEDF1 25%, #F6F6F8 50%, #EDEDF1 75%);
  background-size: 200% 100%;
}

/* ---------- 各类「微弱高亮」hover ---------- */
html[data-theme="light"] .fp-item:hover,
html[data-theme="light"] .vp-item:hover,
html[data-theme="light"] .rank-row:hover,
html[data-theme="light"] .type-btn:hover,
html[data-theme="light"] .period-btn:hover,
html[data-theme="light"] .pf-sort-btn:hover,
html[data-theme="light"] .pwd-btn:hover,
html[data-theme="light"] .admin-btn:hover,
html[data-theme="light"] .detail-actions .btn-secondary:hover,
html[data-theme="light"] .detail-actions .btn-sec:hover,
html[data-theme="light"] .search-top .back:hover,
html[data-theme="light"] .detail-votes .vote-btn:hover { background: var(--layer-1) }

/* ---------- 首页搜索框（Uiverse 弧形描边） ----------
   原实现基于深色：#010201 底 + 深色 conic-gradient 描边。
   亮色下不改会把搜索框变成一整块纯黑，与页面极不协调。 */
html[data-theme="light"] .input {
  background-color: #FFFFFF;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(17, 17, 22, 0.04);
}
html[data-theme="light"] .input::placeholder { color: rgba(22, 22, 26, 0.38) }
/* 这个渐变遮罩原本是让文字淡出到黑色输入框里，白底上会「切断」占位文字，直接关掉 */
html[data-theme="light"] #input-mask { display: none }
/* 浏览器自动填充会用内联 -webkit-box-shadow 刷一层 #010201 深色底，
   白底页面里就变成一个突兀的黑块，这里改成白底 + 正常文字色 */
html[data-theme="light"] .input:-webkit-autofill,
html[data-theme="light"] .input:-webkit-autofill:hover,
html[data-theme="light"] .input:-webkit-autofill:focus,
html[data-theme="light"] .input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  -webkit-text-fill-color: var(--text) !important;
  box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  caret-color: var(--text);
}
/* 搜索框外圈那层 30px 模糊的紫光在深色底上是氛围，在白底上就是一片脏雾 */
html[data-theme="light"] .glow { opacity: .18 }
html[data-theme="light"] #filter-icon {
  background: linear-gradient(180deg, #F1EFFB, #FFFFFF, #EAE6FA);
  border-color: rgba(91, 75, 214, 0.18);
}
html[data-theme="light"] #filter-icon svg { stroke: var(--accent) }
html[data-theme="light"] .grid-bg {
  background-image:
    linear-gradient(to right, rgba(17, 17, 22, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 17, 22, 0.05) 1px, transparent 1px);
}
html[data-theme="light"] .border::before {
  background-image: conic-gradient(#E7E4F5, #7E6BE8 5%, #E7E4F5 14%, #E7E4F5 50%, #D46BC0 60%, #E7E4F5 64%);
  filter: brightness(1);
}
html[data-theme="light"] .darkBorderBg::before {
  background-image: conic-gradient(rgba(255, 255, 255, 0), #C9C2F0, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 50%, #E3B7DD, rgba(255, 255, 255, 0) 60%);
}
html[data-theme="light"] .white::before { filter: brightness(1) saturate(1.1) }

/* ---------- 排行榜领奖台 ----------
   原来的半透明金银铜渐变在浅底上会退化成「空白方块」，亮色改用实色渐变 + 内高光。 */
html[data-theme="light"] .podium-item.gold .bar {
  background: linear-gradient(180deg, #F6D26A, #FDF0C4);
  box-shadow: inset 0 0 0 1px rgba(168, 126, 0, 0.14), 0 6px 18px rgba(214, 168, 0, 0.18);
}
html[data-theme="light"] .podium-item.silver .bar {
  background: linear-gradient(180deg, #CDD4E0, #E9EDF4);
  box-shadow: inset 0 0 0 1px rgba(110, 122, 140, 0.14), 0 6px 16px rgba(120, 128, 145, 0.14);
}
html[data-theme="light"] .podium-item.bronze .bar {
  background: linear-gradient(180deg, #DFA97C, #F6DCC4);
  box-shadow: inset 0 0 0 1px rgba(150, 90, 30, 0.14), 0 6px 16px rgba(180, 110, 40, 0.14);
}
html[data-theme="light"] .podium-item.gold .bar::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent) }
html[data-theme="light"] .podium-item.gold .rank-badge {
  background: linear-gradient(135deg, #FFE9A8, #FFF7DE);
  border-color: rgba(200, 160, 0, 0.35);
}
html[data-theme="light"] .podium-item.silver .rank-badge {
  background: linear-gradient(135deg, #E9EBF1, #F8F9FC);
  border-color: rgba(130, 140, 158, 0.35);
}
html[data-theme="light"] .podium-item.bronze .rank-badge {
  background: linear-gradient(135deg, #F7DCC4, #FDF3E8);
  border-color: rgba(180, 110, 40, 0.32);
}
html[data-theme="light"] .podium-item::before { box-shadow: none }
html[data-theme="light"] .podium-item.gold::before { background: radial-gradient(ellipse at center, rgba(255, 205, 40, 0.22), transparent 70%) }
html[data-theme="light"] .podium-item.silver::before { background: radial-gradient(ellipse at center, rgba(150, 160, 180, 0.18), transparent 70%) }
html[data-theme="light"] .podium-item.bronze::before { background: radial-gradient(ellipse at center, rgba(200, 130, 60, 0.18), transparent 70%) }
html[data-theme="light"] .podium-item .asset-thumb-wrap { box-shadow: 0 6px 20px rgba(17, 17, 22, 0.14) }

/* ---------- 收藏夹卡片 ----------
   原样式是透明底 + 极淡紫描边，在浅底上几乎与背景同色，看不出是个可点的卡片。 */
html[data-theme="light"] .folder-card {
  background: var(--surface);
  border-color: rgba(91, 75, 214, 0.16);
  box-shadow: var(--shadow-1);
}
html[data-theme="light"] .folder-card:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  box-shadow: 0 3px 34px 2px rgba(108, 92, 231, 0.28);
}
html[data-theme="light"] .folder-card .fc-header .fc-count { background: var(--layer-2) }
/* 收藏页头部的虚线小按钮 + 批量条里的「取消选择」：
   原来都是白描边 / 白微底（写死 rgba(255,255,255,...)），白底上等于没有边 */
html[data-theme="light"] .add-folder-btn {
  border-color: var(--border-strong);
  color: var(--text-sec);
}
html[data-theme="light"] .add-folder-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
html[data-theme="light"] #batchBar {
  background: linear-gradient(135deg, rgba(91, 75, 214, 0.07), rgba(91, 75, 214, 0.03));
  border-color: rgba(91, 75, 214, 0.16);
}
html[data-theme="light"] #batchCancelBtn {
  border-color: var(--border-strong) !important;
  background: var(--surface) !important;
  color: var(--text-sec) !important;
}
html[data-theme="light"] #batchCancelBtn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

/* ---------- 其它细节 ---------- */
/* 登录页「管理员入口」等极淡链接，浅底上需要再加深一档 */
html[data-theme="light"] .admin-entry,
html[data-theme="light"] .login-foot a { color: var(--text-ter) }
html[data-theme="light"] .admin-entry:hover,
html[data-theme="light"] .login-foot a:hover { color: var(--accent) }
/* 作品卡片上的标签（图片 / 通用行业 …）在浅底卡片里靠描边区分 */
html[data-theme="light"] .asset-card .card-tag,
html[data-theme="light"] .tag { background: var(--layer-1); border-color: var(--border) }
/* 图片上的浮层（日期、下载量等）保持深色衬底，两种主题下都保证可读 */
html[data-theme="light"] .io-stat,
html[data-theme="light"] .card-img-overlay .io-stat { background: rgba(0, 0, 0, 0.42); color: #fff }

/* ============================================================
   主题切换器（由 js/theme.js 注入）
   ============================================================ */
.xl-theme-btn {
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  border: 0.5px solid var(--border);
  background: transparent;
  color: var(--text-sec);
  cursor: pointer;
  transition: all .2s var(--ease);
  padding: 0;
}
.xl-theme-btn:hover { color: var(--text); border-color: var(--border-hover); background: var(--layer-1) }
.xl-theme-btn svg { width: 16px; height: 16px; display: block }

.xl-theme-pop {
  position: fixed;
  z-index: 9999;
  min-width: 148px;
  padding: 6px;
  border-radius: 12px;
  background: var(--surface);
  border: 0.5px solid var(--border-strong);
  box-shadow: var(--shadow-3);
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.xl-theme-pop.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto }
.xl-theme-pop button {
  width: 100%;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border: none; background: transparent;
  border-radius: 8px;
  color: var(--text-sec);
  font-family: inherit; font-size: 12.5px;
  cursor: pointer;
  text-align: left;
  transition: all .15s;
}
.xl-theme-pop button:hover { background: var(--layer-1); color: var(--text) }
.xl-theme-pop button svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .85 }
.xl-theme-pop button.on { color: var(--accent-light); background: var(--accent-soft) }
.xl-theme-pop .sep { height: 1px; background: var(--border); margin: 4px 6px }

/* 右侧浮动（登录页 / 无导航页面） */
.xl-theme-btn.floating {
  position: fixed; top: 14px; right: 14px; z-index: 900;
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-1);
}

/* 图标基础样式：所有线性图标统一 1.6 描边、圆头圆角、继承文字色 */
.xl-ico { display: inline-block; vertical-align: -0.145em; flex-shrink: 0; }
.xl-ico * { vector-effect: non-scaling-stroke }