/* ============================================
   AI项目开发实战教学平台 - 全局样式
   参考风格：locator_teach.html（浅色白卡 + 紫蓝渐变主色）
   ============================================ */

/* ---- 全局重置 ---- */
* { scroll-behavior: smooth; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================
   ① 深色 → 浅色 基础覆盖
   ========================== */

/* body 和主容器背景：dark → locator_teach 浅色渐变 */
body,
body.bg-slate-900,
body.bg-gray-900,
body.dark,
.bg-slate-900,
.bg-gray-900,
[class*="bg-slate-900"],
[class*="bg-gray-900"] {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%) !important;
    background-attachment: fixed !important;
}

/* 覆盖 Tailwind 的 bg-dark/gray-900/slate-800 等 */
.bg-slate-800,
.bg-gray-800,
[class*="bg-slate-800"],
[class*="bg-gray-800"] {
    background: transparent !important;
}

/* 覆盖 Tailwind 内联设置的 page 容器背景 */
main, main.bg-slate-900, main.bg-gray-900,
section.page-bg, div.page-bg,
.container-main, div.min-h-screen.bg-slate-900, div.min-h-screen.bg-gray-900 {
    background: transparent !important;
}

/* ==========================
   ② glass / glass-light → 白卡
   ========================== */
.glass,
.glass-light {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.03) !important;
    transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease !important;
    color: #2d3748 !important;
    position: relative;
    overflow: hidden;
}
.glass:hover,
.glass-light:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1), 0 4px 8px rgba(15, 23, 42, 0.05) !important;
    border-color: #cbd5e1 !important;
}

/* 白卡顶部添加 locator_teach 风格的彩色装饰线 */
.glass {
    border-top: 6px solid #667eea !important;
}
/* 不同卡片类型的彩色顶部（通过 data- 或 aria- 属性可切换） */
.glass.cv-card   { border-top-color: #667eea !important; }
.glass.nlp-card  { border-top-color: #38b2ac !important; }
.glass.data-card { border-top-color: #f56565 !important; }
.glass.dep-card  { border-top-color: #9c27b0 !important; }
.glass.train-card{ border-top-color: #f7971e !important; }
.glass.eval-card { border-top-color: #00bcd4 !important; }

/* ==========================
   ③ 导航栏：深色玻璃 → 白色清晰
   ========================== */
nav.fixed,
nav.glass,
nav[class*="glass"],
header.glass {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

/* Logo / 品牌文字：白 → 深色紫色 */
nav.fixed .font-bold.text-white,
nav.fixed .font-bold.text-white\/90,
nav.fixed > div:first-child span:first-child,
nav.fixed [class*="text-white"] {
    color: #4f46e5 !important;
}

/* 导航链接：白灰 → 深灰 hover 紫色 */
nav.fixed a.text-gray-300,
nav.fixed a.text-gray-200,
nav.fixed a[class*="text-gray"],
nav.fixed a[class*="text-white"] {
    color: #475569 !important;
    transition: color 0.2s ease, background 0.2s ease !important;
}
nav.fixed a.text-gray-300:hover,
nav.fixed a.text-gray-200:hover,
nav.fixed a[class*="text-gray"]:hover,
nav.fixed a[class*="text-white"]:hover {
    color: #667eea !important;
    background: rgba(102, 126, 234, 0.08) !important;
}

/* ==========================
   ④ 文字颜色统一覆盖
   ========================== */

/* 主要正文：text-white → slate-800 */
.text-white,
.text-white\/90,
.text-white\/80,
.text-white\/70,
.text-white\/60,
.text-white\/50,
div[class*="text-white"],
section[class*="text-white"],
article[class*="text-white"],
main[class*="text-white"] {
    color: #2d3748 !important;
}

/* 次要文字：gray-300 → slate-500 */
.text-gray-300,
.text-gray-200,
.text-gray-100,
.text-slate-300,
.text-slate-200,
.text-slate-100 {
    color: #718096 !important;
}

/* 说明文字：gray-400 → slate-400 */
.text-gray-400,
.text-slate-400,
.text-gray-500 {
    color: #94a3b8 !important;
}

/* 标题保持深色突出 */
h1.text-white, h2.text-white, h3.text-white, h4.text-white,
h1[class*="text-white"], h2[class*="text-white"],
.hero-title, h1.leading-tight {
    color: #1e293b !important;
}

/* hero 副标题特殊处理 */
h1.text-white\/60 + br + span.text-white,
h1 br + span.text-white,
.hero-gradient-text,
[class*="hero"] h1,
.hero-section h1 {
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================
   ⑤ 按钮：蓝 → 紫蓝渐变
   ========================== */
/* 主按钮 */
button[class*="bg-primary"],
a[class*="bg-primary"],
.btn-primary,
button.bg-blue-600,
a.bg-blue-600,
button.bg-blue-500,
a.bg-blue-500,
button[class*="bg-indigo"],
a[class*="bg-indigo"] {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    box-shadow: 0 3px 10px rgba(102,126,234,0.22) !important;
    border: none !important;
    transition: all 0.25s ease !important;
}
button[class*="bg-primary"]:hover,
button.bg-blue-600:hover,
button.bg-blue-500:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 7px 18px rgba(102,126,234,0.32) !important;
}

/* 次级按钮/链接（glass 样式的动作按钮） */
a.glass.px-8,
a.glass.px-6,
button.glass,
a[class*="glass"].rounded-xl,
a[class*="glass"].rounded-lg {
    background: white !important;
    color: #667eea !important;
    border: 2px solid #c7d2fe !important;
    box-shadow: 0 2px 6px rgba(102,126,234,0.08) !important;
}
a.glass.px-8:hover,
a.glass.px-6:hover,
button.glass:hover,
a[class*="glass"].rounded-xl:hover,
a[class*="glass"].rounded-lg:hover {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    border-color: transparent !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 7px 18px rgba(102,126,234,0.32) !important;
}

/* glass rounded-full 小徽章 */
span.inline-flex.glass.rounded-full,
div.inline-flex.glass.rounded-full {
    background: linear-gradient(135deg, #eef2ff, #f0f4ff) !important;
    color: #6366f1 !important;
    border: 1px solid #c7d2fe !important;
    backdrop-filter: none !important;
}

/* ==========================
   ⑥ 表单/输入框
   ========================== */
select,
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input:not([type]),
textarea {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 9px !important;
    outline: none !important;
    transition: all 0.25s ease !important;
    font-family: inherit !important;
}

/* 覆盖 Tailwind 的深色输入框 bg-white/10 text-white */
.bg-white\/10.text-white,
select.bg-white\/10.text-white,
input.bg-white\/10.text-white {
    background: #ffffff !important;
    color: #1e293b !important;
    border-color: #cbd5e0 !important;
}

select:focus,
input:focus,
textarea:focus,
select.bg-white\/10:focus,
input.bg-white\/10:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12) !important;
    background: #fafbff !important;
}

/* 下拉框选项（浅色页面直接跟随系统即可） */
select:not(.select-dark-option) option {
    background-color: #ffffff;
    color: #1e293b;
}
select.select-dark-option option {
    background-color: #1e293b;
    color: #f1f5f9;
}
select.select-dark-option option:checked,
select.select-dark-option option:hover {
    background-color: #667eea;
    color: #ffffff;
}

/* ==========================
   ⑦ 代码块（保持 locator_teach 风格深色终端）
   ========================== */
pre.code-block {
    padding: 18px 20px !important;
    border-radius: 12px !important;
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.15), inset 0 1px 0 rgba(255,255,255,0.03) !important;
    color: #e2e8f0 !important;
    font-size: 12.5px;
    line-height: 1.65;
    tab-size: 4;
}
pre.code-block::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 14px;
    display: flex;
    gap: 6px;
    width: 42px;
    height: 12px;
}
pre.code-block .lang-tag {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 10px;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(102, 126, 234, 0.25);
    color: #a5b4fc;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
pre.code-block .copy-btn {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 6px;
    background: #334155;
    border: 1px solid #475569;
    color: #cbd5e1;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    font-family: inherit;
    z-index: 2;
}
pre.code-block:hover .copy-btn { opacity: 1; }
pre.code-block .copy-btn:hover {
    background: #475569;
    color: white;
    transform: translateY(-1px);
}

/* 普通非 .code-block 的 pre */
pre:not(.code-block) {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
}

/* ==========================
   ⑧ 侧边目录导航
   ========================== */
.sidebar-toc {
    position: fixed;
    right: 20px;
    top: 80px;
    width: 210px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 16px 14px;
    z-index: 40;
    border-radius: 14px;
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
    scrollbar-width: thin;
}
.sidebar-toc h4 {
    font-size: 12px;
    font-weight: 700;
    color: #667eea;
    text-transform: none;
    letter-spacing: 0.3px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sidebar-toc ul { list-style: none; padding: 0; margin: 0; }
.sidebar-toc a {
    display: block;
    padding: 6px 8px;
    font-size: 12.5px;
    color: #64748b;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.15s ease;
    border-left: 2px solid transparent;
    line-height: 1.5;
    font-weight: 500;
}
.sidebar-toc a:hover {
    color: #4f46e5;
    background: #f0f3ff;
    border-left-color: #c7d2fe;
}
.sidebar-toc a.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    border-left-color: transparent !important;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(102,126,234,0.25);
}
.sidebar-toc .toc-h3 a { padding-left: 12px; }
.sidebar-toc .toc-h4 a { padding-left: 24px; font-size: 11.5px; color: #94a3b8; }

@media (max-width: 1280px) { .sidebar-toc { display: none; } }

/* ==========================
   ⑨ 返回顶部按钮
   ========================== */
.back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 50;
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 20px rgba(102,126,234,0.35) !important;
    border: none !important;
}
.back-to-top.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.back-to-top:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 30px rgba(102,126,234,0.5) !important;
}
.back-to-top svg {
    width: 22px;
    height: 22px;
    fill: white;
}

/* ==========================
   ⑩ 移动端菜单
   ========================== */
.mobile-menu-btn {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    cursor: pointer;
    color: #475569 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
@media (max-width: 768px) { .mobile-menu-btn { display: flex; } }

.mobile-menu-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(4px);
    z-index: 80; opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
}
.mobile-menu-overlay.show { opacity: 1; pointer-events: auto; }

.mobile-menu-drawer {
    position: fixed; top: 0; right: -320px;
    width: 300px; max-width: 85vw; height: 100vh;
    background: #ffffff !important;
    z-index: 90; transition: right 0.35s cubic-bezier(0.4,0,0.2,1);
    padding: 20px; overflow-y: auto;
    border-left: 1px solid #e2e8f0 !important;
    box-shadow: -8px 0 24px rgba(15,23,42,0.08);
}
.mobile-menu-drawer.show { right: 0; }

/* ==========================
   ⑪ 滚动条美化（浅色主题）
   ========================== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #a5b4fc, #c4b5fd);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #818cf8, #a78bfa);
}

/* ==========================
   ⑫ 动画 & 效果
   ========================== */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-up {
    animation: fadeUp 0.6s cubic-bezier(0.4,0,0.2,1) both;
}

/* Tab/Chip 切换按钮：浅色 */
.tab-btn, .clean-tab, .model-btn, .deploy-btn {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}
.tab-btn:hover, .clean-tab:hover, .model-btn:hover, .deploy-btn:hover {
    background: #eef2ff !important;
    color: #4f46e5 !important;
    border-color: #c7d2fe !important;
}
.tab-btn.active, .clean-tab.active, .model-btn.active, .deploy-btn.active,
button.active {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 3px 10px rgba(102,126,234,0.3) !important;
}

/* 徽章 Badge */
span[class*="rounded-full"][class*="bg-blue"],
span[class*="bg-blue-500"], span[class*="bg-blue-600"] {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
}

/* ==========================
   ⑬ 表格增强（浅色风格）
   ========================== */
table { border-collapse: collapse; background: white !important; }
table th {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    border-bottom: none !important;
}
table td {
    padding: 12px 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}
table tbody tr:hover { background: #f8fafc !important; }
table tbody tr:nth-child(even) { background: #fafbfc !important; }

/* ==========================
   ⑭ 链接 & 通用
   ========================== */
a { color: #667eea; }
a:hover { color: #4f46e5; }

/* 卡片悬浮 */
.card-hover {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.card-hover:hover {
    transform: translateY(-4px) !important;
}

/* 分割线 */
hr, [class*="border-t"][class*="border-white"] {
    border-color: #e2e8f0 !important;
}

/* 按钮波纹 */
button, .card-hover, a[class*="rounded"] {
    position: relative;
    overflow: hidden;
}

/* ==========================
   ⑮ 浅色主题下的暗色元素兜底
   ========================== */
/* border-white/10 → 更柔和的分隔 */
[class*="border-white/"], [class*="border-white-"] {
    border-color: #e2e8f0 !important;
}
/* bg-white/5, bg-white/10 → 实际需要白 */
[class*="bg-white/5"], [class*="bg-white/10"],
[class*="bg-white/8"], [class*="bg-white/6"],
[class*="bg-white/12"] {
    background: #ffffff !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
}
/* 覆盖 hover:bg-white/10 */
[class*="hover:bg-white/10"]:hover {
    background: #f0f3ff !important;
}
/* border-b border-white/10 */
nav[class*="border-white/10"],
[class*="border-white/10"] {
    border-color: #e2e8f0 !important;
}

/* ==========================
   ⑯ Hero / Banner 特殊样式
   ========================== */
.hero-section,
section[id*="hero"],
div[class*="hero"],
header.hero {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    border-radius: 16px;
    color: white !important;
    box-shadow: 0 10px 30px rgba(102,126,234,0.25);
    position: relative;
    overflow: hidden;
}
.hero-section::before,
header.hero::before {
    content: "";
    position: absolute;
    top: -10px; left: -10px; right: -10px; bottom: -10px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    pointer-events: none;
}
.hero-section h1, header.hero h1 { color: white !important; }
.hero-section p, header.hero p { color: rgba(255,255,255,0.9) !important; }

/* ==========================
   ⑰ 响应式断点
   ========================== */
@media (max-width: 640px) { .hide-sm { display: none !important; } }
@media (max-width: 768px) { .hide-md { display: none !important; } }
@media (max-width: 1024px) { .hide-lg { display: none !important; } }

/* ==========================
   ⑱ 最终全局覆盖（Catch-all）
   确保所有 Tailwind 蓝/紫/暗 色 → locator_teach 紫蓝主色
   ========================== */

/* 所有渐变按钮 → 紫蓝渐变 */
button[class*="bg-gradient-to-r"],
a[class*="bg-gradient-to-r"],
button[class*="from-blue"],
a[class*="from-blue"],
button[class*="from-indigo"],
a[class*="from-indigo"],
button[class*="bg-primary"],
a[class*="bg-primary"],
button[class*="bg-violet"],
a[class*="bg-violet"] {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 3px 10px rgba(102,126,234,0.22) !important;
}
button[class*="bg-gradient-to-r"]:hover,
button[class*="from-blue"]:hover,
button[class*="bg-primary"]:hover {
    background: linear-gradient(135deg, #5a67d8, #6b46c1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 7px 18px rgba(102,126,234,0.32) !important;
}

/* 装饰圆形（blur 光斑）— 浅色页面上需要减弱 */
[class*="bg-primary/20"][class*="blur-3xl"],
[class*="bg-blue-500/10"][class*="blur-3xl"],
[class*="bg-blue-500/20"][class*="blur-3xl"] {
    background: radial-gradient(circle, rgba(102,126,234,0.12), transparent 70%) !important;
}

/* 文字蓝 → 紫蓝系 */
.text-blue-300, .text-blue-400, .text-blue-500, .text-blue-600,
[class*="text-blue"] {
    color: #667eea !important;
}
.text-primary, [class*="text-primary"] {
    color: #4f46e5 !important;
}

/* 背景蓝半透明 chip → 紫蓝系 */
.bg-blue-500\/20, .bg-blue-500\/30,
.bg-blue-600\/10, .bg-blue-600\/20,
[class*="bg-blue-500/"], [class*="bg-blue-600/"],
.bg-primary\/20, [class*="bg-primary/"] {
    background: #eef2ff !important;
    color: #6366f1 !important;
    border: 1px solid #c7d2fe;
}

/* 边框蓝 → 紫蓝系 */
.border-blue-500, .border-blue-600, [class*="border-blue"] {
    border-color: #667eea !important;
}

/* hover:bg-primary 交互色 */
button[class*="hover:bg-primary"]:hover,
a[class*="hover:bg-primary"]:hover,
button[class*="hover:bg-blue"]:hover {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
}

/* 覆盖 Tailwind bg-accent */
[class*="bg-accent"] {
    background: linear-gradient(135deg, #764ba2, #667eea) !important;
    color: white !important;
}