/* ============================================================
   全局主题变量 — 前台页面（index / about / tutorial）
   ============================================================ */

/* 默认：暗色模式（由各自页面内联样式提供，此处仅补充） */

/* 亮色模式：覆盖前台公共 CSS 变量 */
html[data-theme="light"] {
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface2: #f1f5f9;
    --surface3: #e2e8f0;
    --border: #e2e8f0;
    --text: #1e293b;
    --text2: #475569;
    --text3: #94a3b8;
    --primary: #6366f1;
    --primary2: #4f46e5;
    --accent: #0891b2;
    --green: #059669;
    --red: #dc2626;
    --amber: #d97706;
    --purple: #7c3aed;
    --grad1: linear-gradient(135deg, #6366f1, #8b5cf6);
    --grad2: linear-gradient(135deg, #06b6d4, #3b82f6);
}

/* 页面背景光晕在亮色模式下变淡 */
html[data-theme="light"] body::before {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(99,102,241,.06) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 100%, rgba(6,182,212,.04) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 20% 100%, rgba(139,92,246,.04) 0%, transparent 60%);
}

/* 导航栏与工具按钮 */
html[data-theme="light"] .navbar {
    background: rgba(255,255,255,.9);
    border-bottom-color: var(--border);
}
html[data-theme="light"] .nav-overlay {
    background: rgba(248,250,252,.97);
}
html[data-theme="light"] .nav-links a {
    color: var(--text2);
}
html[data-theme="light"] .nav-links a:hover {
    color: var(--text);
    background: rgba(0,0,0,.04);
}
html[data-theme="light"] .nav-links a.nav-cta {
    color: #fff;
}

/* 顶部工具栏按钮 */
.nav-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
    position: relative;
    z-index: 200;
    pointer-events: auto;
}
.nav-tools button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.05);
    color: var(--text2);
    cursor: pointer !important;
    font-size: 13px;
    font-weight: 600;
    transition: all .2s;
    font-family: inherit;
    position: relative;
    z-index: 200;
    pointer-events: auto !important;
}
.nav-tools button:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
    border-color: var(--primary);
}
html[data-theme="light"] .nav-tools button {
    background: var(--surface);
    color: var(--text2);
    border-color: var(--border);
}
html[data-theme="light"] .nav-tools button:hover {
    background: var(--surface2);
    color: var(--text);
    border-color: var(--primary);
}
@media (max-width: 768px) {
    .nav-tools { margin-left: auto; margin-right: 8px; }
}

/* 通用亮色文本覆盖 */
html[data-theme="light"] .hero h1,
html[data-theme="light"] .hero-stat-num,
html[data-theme="light"] .section-title,
html[data-theme="light"] .section h2,
html[data-theme="light"] .section h3,
html[data-theme="light"] .section h4,
html[data-theme="light"] .feature-card h3,
html[data-theme="light"] .about-hero h1,
html[data-theme="light"] .card h2,
html[data-theme="light"] .contact-card h2,
html[data-theme="light"] .page-hero h1,
html[data-theme="light"] .flogo-text,
html[data-theme="light"] .nav-brand,
html[data-theme="light"] .contact-value,
html[data-theme="light"] .faq-question,
html[data-theme="light"] .workflow-body h4,
html[data-theme="light"] .endpoint-path,
html[data-theme="light"] .info-value,
html[data-theme="light"] .tl-header h4,
html[data-theme="light"] .arch-item h4,
html[data-theme="light"] .timeline-mini-content h4 {
    color: #0f172a;
}
html[data-theme="light"] .hero h1 .grad {
    -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .hero .subtitle,
html[data-theme="light"] .section-desc,
html[data-theme="light"] .feature-card p,
html[data-theme="light"] .about-hero .subtitle,
html[data-theme="light"] .card p,
html[data-theme="light"] .footer-desc,
html[data-theme="light"] .footer-links a,
html[data-theme="light"] .footer-copy,
html[data-theme="light"] .footer-icp,
html[data-theme="light"] .page-hero p,
html[data-theme="light"] .section > p,
html[data-theme="light"] .section code,
html[data-theme="light"] .endpoint-summary,
html[data-theme="light"] .endpoint-desc,
html[data-theme="light"] .faq-answer-inner,
html[data-theme="light"] .workflow-body p,
html[data-theme="light"] .timeline-card .tl-content,
html[data-theme="light"] .contact-label,
html[data-theme="light"] .card p b,
html[data-theme="light"] .timeline-mini-content p,
html[data-theme="light"] .timeline-mini-date,
html[data-theme="light"] .arch-item p,
html[data-theme="light"] .feature-item,
html[data-theme="light"] .tech-tag {
    color: var(--text2);
}
html[data-theme="light"] .card p b,
html[data-theme="light"] .tip-box strong,
html[data-theme="light"] .warn-box strong,
html[data-theme="light"] .note-box strong {
    color: #0f172a;
}
html[data-theme="light"] .section-label,
html[data-theme="light"] .hero-stat-label,
html[data-theme="light"] .footer-heading,
html[data-theme="light"] .info-label,
html[data-theme="light"] .sidebar-group-title,
html[data-theme="light"] .endpoint-body h4,
html[data-theme="light"] .footer-links a:hover,
html[data-theme="light"] .nav-overlay a:hover {
    color: var(--text3);
}
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-overlay a:hover,
html[data-theme="light"] .footer-links a:hover {
    color: #0f172a;
}
html[data-theme="light"] .nav-links a.active,
html[data-theme="light"] .nav-overlay a.active {
    color: var(--primary2);
}

/* 按钮与卡片 */
html[data-theme="light"] .btn-outline {
    border-color: var(--border);
    color: var(--text);
}
html[data-theme="light"] .btn-outline:hover {
    background: rgba(0,0,0,.04);
    border-color: var(--primary);
    color: var(--primary);
}
html[data-theme="light"] .btn-ghost {
    color: var(--text2);
}
html[data-theme="light"] .btn-ghost:hover {
    color: var(--text);
    background: rgba(0,0,0,.04);
}
html[data-theme="light"] .feature-card,
html[data-theme="light"] .card,
html[data-theme="light"] .timeline-card,
html[data-theme="light"] .path-card,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .info-card,
html[data-theme="light"] .field-item,
html[data-theme="light"] .workflow-body,
html[data-theme="light"] .steps-list li,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .endpoint-card {
    background: var(--surface);
    border-color: var(--border);
}
html[data-theme="light"] .feature-card:hover,
html[data-theme="light"] .path-card:hover,
html[data-theme="light"] .timeline-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,.08);
}
html[data-theme="light"] .feature-card::before {
    background: radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(99,102,241,.04), transparent 40%);
}
html[data-theme="light"] .contact-card {
    background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(139,92,246,.04));
    border-color: rgba(99,102,241,.2);
}
html[data-theme="light"] .mission-card {
    background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(139,92,246,.04));
    border-color: rgba(99,102,241,.2);
}
html[data-theme="light"] .contact-icon {
    background: rgba(99,102,241,.08);
    border-color: rgba(99,102,241,.15);
}
html[data-theme="light"] .nav-overlay a:hover {
    background: rgba(0,0,0,.04);
}
html[data-theme="light"] .footer-links a:hover {
    color: #0f172a;
}
html[data-theme="light"] .tech-tag,
html[data-theme="light"] .feature-item {
    background: var(--surface2);
    border-color: var(--border);
    color: var(--text2);
}
html[data-theme="light"] .tech-tag:hover {
    border-color: var(--primary);
    color: var(--primary);
}
html[data-theme="light"] .fs-link {
    background: rgba(0,0,0,.03);
    border-color: var(--border);
    color: var(--text3);
}
html[data-theme="light"] .fs-link:hover {
    background: rgba(99,102,241,.08);
    border-color: rgba(99,102,241,.2);
    color: var(--primary);
}
html[data-theme="light"] .footer-bottom {
    border-top-color: rgba(0,0,0,.06);
}

/* 代码块与表格 */
html[data-theme="light"] .code-tabs,
html[data-theme="light"] .code-block,
html[data-theme="light"] .code-tab-bar {
    background: #f1f5f9;
    border-color: var(--border);
}
html[data-theme="light"] .code-block pre,
html[data-theme="light"] .code-tab-panel pre {
    color: #334155;
    background: #f1f5f9;
}
html[data-theme="light"] .code-copy-btn {
    background: rgba(0,0,0,.05);
    border-color: var(--border);
    color: var(--text3);
}
html[data-theme="light"] .code-copy-btn:hover {
    background: rgba(0,0,0,.08);
    color: var(--text);
}
html[data-theme="light"] .response-block.success,
html[data-theme="light"] .response-block.error {
    background: var(--surface2);
    border-color: var(--border);
}
html[data-theme="light"] .param-table th {
    background: var(--surface2);
    border-bottom-color: var(--border);
}
html[data-theme="light"] .param-table td {
    border-bottom-color: rgba(0,0,0,.04);
    color: var(--text2);
}
html[data-theme="light"] .code-tab-btn:hover {
    color: var(--text);
    background: rgba(0,0,0,.04);
}
html[data-theme="light"] .code-tab-btn.active {
    color: var(--text);
    border-bottom-color: var(--primary);
    background: rgba(99,102,241,.08);
}

/* 提示框 */
html[data-theme="light"] .tip-box {
    background: rgba(99,102,241,.04);
    border-color: rgba(99,102,241,.12);
}
html[data-theme="light"] .warn-box {
    background: rgba(245,158,11,.04);
    border-color: rgba(245,158,11,.12);
}
html[data-theme="light"] .note-box {
    background: rgba(6,182,212,.04);
    border-color: rgba(6,182,212,.12);
}

/* 侧边栏（教程页） */
html[data-theme="light"] .sidebar {
    border-right-color: var(--border);
}
html[data-theme="light"] .sidebar-link:hover {
    background: rgba(0,0,0,.03);
}
html[data-theme="light"] .sidebar-link.active {
    background: rgba(99,102,241,.08);
}

/* 其他细节 */
html[data-theme="light"] .hero-badge {
    background: rgba(99,102,241,.06);
    border-color: rgba(99,102,241,.15);
}
html[data-theme="light"] .admin-badge {
    background: rgba(16,185,129,.08);
    border-color: rgba(16,185,129,.2);
}
html[data-theme="light"] .admin-badge a {
    border-color: var(--border);
    color: var(--text3) !important;
}
html[data-theme="light"] .admin-badge a:hover {
    color: var(--text) !important;
    background: rgba(0,0,0,.04) !important;
}
html[data-theme="light"] .hamburger-inner,
html[data-theme="light"] .hamburger-inner::before,
html[data-theme="light"] .hamburger-inner::after {
    background: var(--text);
}

/* Google Translate 隐藏容器 */
#google_translate_element {
    display: none !important;
}

/* 修正 Google Translate 顶部横幅带来的布局偏移 */
body > .goog-te-banner-frame {
    display: none !important;
}
body {
    top: 0 !important;
}