/* ====== 深色/浅色/自动 主题系统 ====== */
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');

/* --- 全局字体与首页一致 --- */
html, body, button, input, textarea, select {
    font-family: 'Comic Neue', cursive, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}
/* 字体选择方案（html[data-font] 由 theme.js 设置） */
html[data-font="kai"] body, html[data-font="kai"] button, html[data-font="kai"] input,
html[data-font="kai"] textarea, html[data-font="kai"] select {
    font-family: 'KaiTi', 'STKaiti', '楷体', serif !important;
}
html[data-font="song"] body, html[data-font="song"] button, html[data-font="song"] input,
html[data-font="song"] textarea, html[data-font="song"] select {
    font-family: 'SimSun', 'Songti SC', '宋体', serif !important;
}
html[data-font="hei"] body, html[data-font="hei"] button, html[data-font="hei"] input,
html[data-font="hei"] textarea, html[data-font="hei"] select {
    font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', 'PingFang SC', sans-serif !important;
}
html[data-font="noto-sans"] body, html[data-font="noto-sans"] button, html[data-font="noto-sans"] input,
html[data-font="noto-sans"] textarea, html[data-font="noto-sans"] select {
    font-family: 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}
html[data-font="zcool"] body, html[data-font="zcool"] button, html[data-font="zcool"] input,
html[data-font="zcool"] textarea, html[data-font="zcool"] select {
    font-family: 'ZCOOL KuaiLe', 'Comic Neue', cursive, sans-serif !important;
}
/* 代码块保持等宽字体 */
code, pre, .mono {
    font-family: 'Courier New', monospace !important;
}

/* --- 隐藏背景（深色/浅色模式下不使用视频/图片背景） --- */
html[data-theme="dark"] .bg-container,
html[data-theme="light"] .bg-container {
    display: none !important;
}

/* ====== 深色模式 ====== */
html[data-theme="dark"] body {
    background: #121220 !important;
    color: #d0d0e0;
}
html[data-theme="dark"] .navbar {
    background: rgba(18, 18, 32, 0.92) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .navbar-brand {
    color: #d0d0e0 !important;
    text-shadow: none !important;
}
html[data-theme="dark"] .nav-btn {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #c0c0d0 !important;
    text-shadow: none !important;
}
html[data-theme="dark"] .nav-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}
html[data-theme="dark"] .nav-btn-primary {
    background: rgba(100, 100, 160, 0.35) !important;
    border-color: rgba(100, 100, 160, 0.5) !important;
}
html[data-theme="dark"] .nav-user-name {
    color: #c0c0d0 !important;
    text-shadow: none !important;
}
html[data-theme="dark"] .settings-dropdown {
    background: rgba(30, 30, 50, 0.97) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .settings-dropdown .settings-title {
    color: #8888a0 !important;
}
html[data-theme="dark"] .settings-dropdown .settings-option {
    color: #b0b0c8 !important;
}
html[data-theme="dark"] .settings-dropdown .settings-option:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}
html[data-theme="dark"] .hero h1 {
    color: #e0e0f0 !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}
html[data-theme="dark"] .hero .hero-sub {
    color: rgba(200, 200, 220, 0.85) !important;
    text-shadow: none !important;
}
html[data-theme="dark"] .hero-cta .cta-btn-primary {
    background: linear-gradient(135deg, #7a77a4, #656295) !important;
    box-shadow: 0 4px 20px rgba(100, 100, 160, 0.25) !important;
}
html[data-theme="dark"] .hero-cta .cta-btn-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #c0c0d0 !important;
}
html[data-theme="dark"] .section-title {
    color: #d0d0e0 !important;
    text-shadow: none !important;
}
html[data-theme="dark"] .feature-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .feature-card:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="dark"] .feature-card h3 {
    color: #d0d0e0 !important;
}
html[data-theme="dark"] .feature-card p {
    color: rgba(200, 200, 220, 0.6) !important;
}
html[data-theme="dark"] .feature-card .card-link {
    color: rgba(140, 160, 220, 0.9) !important;
}
html[data-theme="dark"] .feature-card .card-link:hover {
    color: #c0c0e0 !important;
}
html[data-theme="dark"] .register-cta-inner {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .register-cta h2 {
    color: #d0d0e0 !important;
    text-shadow: none !important;
}
html[data-theme="dark"] .register-cta p {
    color: rgba(200, 200, 220, 0.6) !important;
}
html[data-theme="dark"] footer {
    border-top-color: rgba(255, 255, 255, 0.04) !important;
}
html[data-theme="dark"] footer p,
html[data-theme="dark"] footer a {
    color: rgba(200, 200, 220, 0.4) !important;
}
/* Modal */
html[data-theme="dark"] .login-overlay {
    background: rgba(0,0,0,0.7) !important;
}
html[data-theme="dark"] .login-modal-box {
    background: rgba(28, 28, 48, 0.97) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .login-modal-left {
    background: linear-gradient(160deg, #353560, #2c2c4a) !important;
}
html[data-theme="dark"] .login-header h2 {
    color: #c0c0d8 !important;
}
html[data-theme="dark"] .login-header p {
    color: #8888a0 !important;
}
html[data-theme="dark"] .login-tabs {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .tab-btn {
    color: #8888a0 !important;
}
html[data-theme="dark"] .tab-btn.active {
    background: rgba(100, 100, 160, 0.3) !important;
    color: #a0a0d0 !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.2) !important;
}
html[data-theme="dark"] .auth-form .input-group input {
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
    color: #c0c0d8 !important;
    background: transparent !important;
}
html[data-theme="dark"] .auth-form .input-group input:focus {
    border-bottom-color: #7a77a4 !important;
}
html[data-theme="dark"] .auth-form .input-group input::placeholder {
    color: #666680 !important;
}
html[data-theme="dark"] .code-btn,
html[data-theme="dark"] .submit-btn {
    background: #6a67a0 !important;
}
html[data-theme="dark"] .code-btn:hover,
html[data-theme="dark"] .submit-btn:hover {
    background: #7a77b0 !important;
}
html[data-theme="dark"] .form-links a {
    color: #8888a0 !important;
}
html[data-theme="dark"] .form-links a:hover {
    color: #a0a0c8 !important;
}
html[data-theme="dark"] .login-modal-close {
    background: rgba(255,255,255,0.04) !important;
    color: #8888a0 !important;
}
html[data-theme="dark"] .login-modal-close:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #c0c0d0 !important;
}

/* ====== 浅色模式 ====== */
html[data-theme="light"] body {
    background: #f5f5f8 !important;
    color: #333340;
}
html[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.9) !important;
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .navbar-brand {
    color: #4a4a6a !important;
    text-shadow: none !important;
}
html[data-theme="light"] .nav-btn {
    border-color: rgba(0, 0, 0, 0.12) !important;
    background: rgba(0, 0, 0, 0.03) !important;
    color: #555570 !important;
    text-shadow: none !important;
}
html[data-theme="light"] .nav-btn:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}
html[data-theme="light"] .nav-btn-primary {
    background: rgba(154, 151, 196, 0.25) !important;
    border-color: rgba(154, 151, 196, 0.4) !important;
}
html[data-theme="light"] .nav-user-name {
    color: #555570 !important;
    text-shadow: none !important;
}
html[data-theme="light"] .hero h1 {
    color: #4a4a6a !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}
html[data-theme="light"] .hero .hero-sub {
    color: rgba(80, 80, 100, 0.8) !important;
    text-shadow: none !important;
}
html[data-theme="light"] .hero-cta .cta-btn-primary {
    background: linear-gradient(135deg, #9a97c4, #8582b5) !important;
    box-shadow: 0 4px 20px rgba(154, 151, 196, 0.2) !important;
}
html[data-theme="light"] .hero-cta .cta-btn-secondary {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #555570 !important;
}
html[data-theme="light"] .section-title {
    color: #4a4a6a !important;
    text-shadow: none !important;
}
html[data-theme="light"] .feature-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="light"] .feature-card:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.06) !important;
}
html[data-theme="light"] .feature-card h3 {
    color: #4a4a6a !important;
}
html[data-theme="light"] .feature-card p {
    color: rgba(80, 80, 100, 0.6) !important;
}
html[data-theme="light"] .feature-card .card-link {
    color: rgba(100, 100, 160, 0.8) !important;
}
html[data-theme="light"] .feature-card .card-link:hover {
    color: #6a67a0 !important;
}
html[data-theme="light"] .register-cta-inner {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] .register-cta h2 {
    color: #4a4a6a !important;
    text-shadow: none !important;
}
html[data-theme="light"] .register-cta p {
    color: rgba(80, 80, 100, 0.6) !important;
}
html[data-theme="light"] footer {
    border-top-color: rgba(0, 0, 0, 0.04) !important;
}
html[data-theme="light"] footer p,
html[data-theme="light"] footer a {
    color: rgba(80, 80, 100, 0.4) !important;
}
/* Modal */
html[data-theme="light"] .login-overlay {
    background: rgba(0,0,0,0.3) !important;
}
html[data-theme="light"] .login-modal-box {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .login-header h2 {
    color: #4a4a6a !important;
}

/* ====== 主题切换按钮 ====== */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    border-radius: 50%;
    transition: all 0.25s;
    color: inherit;
    line-height: 1;
    flex-shrink: 0;
}
.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.12);
}
html[data-theme="light"] .theme-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}
.theme-toggle-btn:focus-visible {
    outline: 2px solid rgba(154, 151, 196, 0.6);
    outline-offset: 2px;
}

/* ====== 全局 Tailwind 通用覆盖（适用于所有子页面） ====== */
/* 深色模式 */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-gray-100 {
    background-color: #1e1e36 !important;
}
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-800 {
    color: #b0b0c8 !important;
}
html[data-theme="dark"] .text-gray-400 {
    color: #8888a0 !important;
}
html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-200 {
    border-color: rgba(255,255,255,0.08) !important;
}
html[data-theme="dark"] .shadow-\[0_5px_20px_rgba\(0\,0\,0\,0\.04\)\] {
    box-shadow: 0 5px 20px rgba(0,0,0,0.25) !important;
}
html[data-theme="dark"] .shadow-sm {
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* 浅色模式 */
html[data-theme="light"] .bg-white {
    background-color: #ffffff !important;
}
html[data-theme="light"] .bg-gray-50 {
    background-color: #f9f9fb !important;
}
html[data-theme="light"] .bg-gray-100 {
    background-color: #f0f0f5 !important;
}

/* ====== 浮动切换按钮（深色模式覆盖） ====== */
html[data-theme="dark"] #theme-toggle {
    background: rgba(60, 60, 100, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #c0c0d0 !important;
}
html[data-theme="light"] #theme-toggle {
    background: rgba(154, 151, 196, 0.2) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #555570 !important;
}

/* ====== 登录页覆盖 ====== */
html[data-theme="dark"] .login-wrapper {
    background: linear-gradient(135deg, #1a1a30 0%, #1e1e38 40%, #222245 100%) !important;
}
html[data-theme="dark"] .login-box {
    background: rgba(28, 28, 48, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .login-left {
    background: linear-gradient(160deg, #2a2a50, #252548) !important;
}
html[data-theme="dark"] .login-header h1 {
    color: #c0c0d8 !important;
}
html[data-theme="dark"] .login-desc {
    color: #8888a0 !important;
}
html[data-theme="dark"] .login-tabs {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .tab-btn {
    color: #8888a0 !important;
}
html[data-theme="dark"] .tab-btn.active {
    background: rgba(100, 100, 160, 0.3) !important;
    color: #a0a0d0 !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.2) !important;
}
html[data-theme="dark"] .input-group input {
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
    color: #c0c0d8 !important;
}
html[data-theme="dark"] .input-group input::placeholder {
    color: #666680 !important;
}
html[data-theme="dark"] .code-btn,
html[data-theme="dark"] .submit-btn {
    background: #6a67a0 !important;
}
html[data-theme="dark"] .code-btn:hover,
html[data-theme="dark"] .submit-btn:hover {
    background: #7a77b0 !important;
}
html[data-theme="dark"] .form-links a {
    color: #8888a0 !important;
}
html[data-theme="dark"] .form-links a:hover {
    color: #a0a0c8 !important;
}
html[data-theme="dark"] .login-close {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #8888a0 !important;
}
html[data-theme="dark"] .login-close:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #c0c0d0 !important;
}

/* 浅色模式登录页 */
html[data-theme="light"] .login-wrapper {
    background: linear-gradient(135deg, #e8e6f3 0%, #e2eaf4 40%, #d5d3e8 100%) !important;
}
html[data-theme="light"] .login-header h1 {
    color: #4a4a6a !important;
}