/* ============================================================
 * 课粒工坊 · 墨水紫金品牌设计系统 v2.0
 * Brand: 课粒（知识晶格 + 发光粒子）
 * 夜间: 深邃星空紫 | 日间: 暖宣纸靛蓝
 * ============================================================ */

/* ★ Phase 1: 品牌色彩 + 间距 + 字体层级系统 */
:root {
    /* ---- 品牌核心色（紫金体系） ---- */
    --brand-primary: #6C5CE7;
    --brand-primary-light: #A78BFA;
    --brand-primary-dark: #5B4BD5;
    --brand-accent: #F59E0B;
    --brand-accent-light: #FBBF24;
    --brand-gradient: linear-gradient(135deg, #6C5CE7 0%, #A78BFA 50%, #C4B5FD 100%);
    --brand-gradient-accent: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
    --brand-glow: 0 0 20px rgba(108, 92, 231, 0.15);
    --brand-glow-accent: 0 0 16px rgba(245, 158, 11, 0.12);

    /* ---- Phase 6: 间距系统 ---- */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* ---- Phase 6: 字体层级 ---- */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 20px;
    --text-2xl: 28px;
    --text-3xl: 36px;
    --font-sans: 'Inter', -apple-system, 'SF Pro Text', BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

    /* ---- 向下兼容（旧变量保留别名） ---- */
    --primary: var(--brand-primary);
    --primary-light: var(--brand-primary-light);
    --primary-gradient: var(--brand-gradient);
    --primary-glow: rgba(108, 92, 231, 0.4);
    --accent: #d97706;
    --accent-light: var(--brand-accent-light);
    --accent-gradient: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    --accent-glow: rgba(217, 119, 6, 0.3);

    /* ---- 夜间模式（默认） ---- */
    --bg-star: #0a0c1a;
    --glass-bg: rgba(14, 17, 32, 0.70);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(108, 92, 231, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    --glass-blur: blur(40px) saturate(1.4);
    --text-light: #e8eafd;
    --text-primary: #e8eafd;
    --text-secondary: rgba(232, 234, 253, 0.65);
    --text-muted: rgba(232, 234, 253, 0.35);

    --error: #ef4444;
    --success: #22c55e;
    --warning: #FB8C00;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    --night-glass-side-light: rgba(180, 200, 255, 0.12);
    --night-glass-side-strong: rgba(160, 180, 255, 0.35);
    --night-glass-refract: rgba(255, 255, 255, 0.12);
    --night-glass-edge: rgba(167, 139, 250, 0.45);
    --night-border-width: 1.5px;

    /* ---- 白天模式变量 ---- */
    --day-bg-paper: #FBF8F3;
    --day-card-bg: #FFFFFF;
    --day-text-dark: #1E293B;
    --day-text-medium: #475569;
    --day-text-faint: #94A3B8;
    --day-border-light: #E2E8F0;
    --day-border-medium: rgba(148,163,184,0.45);
    --day-shadow-warm: rgba(100,116,139,0.08);
    --day-primary: #4F46E5;
    --day-primary-hover: #4338CA;
    --day-primary-light: #6366F1;
    --day-primary-bg: #EEF0FF;
    --day-card-bg: #FFFCF7;
}

/* ---- Phase 5: 品牌微动画系统 ---- */
@keyframes brandPulse {
    0% { box-shadow: 0 0 0 0 rgba(108,92,231,0.35); }
    70% { box-shadow: 0 0 0 12px rgba(108,92,231,0); }
    100% { box-shadow: 0 0 0 0 rgba(108,92,231,0); }
}
@keyframes particleFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
    50% { transform: translateY(-6px) scale(1.15); opacity: 0.8; }
}
@keyframes crystalGlow {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.03); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes cardAppear {
    from { opacity: 0; transform: scale(0.97) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-sans);
    background: radial-gradient(circle at 20% 30%, #0a0c1a, #03050a);
    min-height: 100vh;
    color: var(--text-light);
}

/* ========== 高性能静态星空背景（简洁版） ========== */
body.static-stars {
    background:
        /* 少量稀疏微星 */
        radial-gradient(1px 1px at 12% 18%, rgba(220,240,255,0.35) 1px, transparent 1px),
        radial-gradient(1px 1px at 28% 8%, rgba(255,255,255,0.3) 1px, transparent 1px),
        radial-gradient(1px 1px at 45% 22%, rgba(200,230,255,0.28) 1px, transparent 1px),
        radial-gradient(1px 1px at 62% 12%, rgba(220,240,255,0.32) 1px, transparent 1px),
        radial-gradient(1px 1px at 78% 28%, rgba(255,255,255,0.25) 1px, transparent 1px),
        radial-gradient(1px 1px at 88% 15%, rgba(200,230,255,0.3) 1px, transparent 1px),
        radial-gradient(1px 1px at 6% 42%, rgba(220,240,255,0.28) 1px, transparent 1px),
        radial-gradient(1px 1px at 18% 55%, rgba(255,255,255,0.32) 1px, transparent 1px),
        radial-gradient(1px 1px at 35% 48%, rgba(200,230,255,0.25) 1px, transparent 1px),
        radial-gradient(1px 1px at 52% 58%, rgba(220,240,255,0.3) 1px, transparent 1px),
        radial-gradient(1px 1px at 68% 65%, rgba(255,255,255,0.28) 1px, transparent 1px),
        radial-gradient(1px 1px at 82% 52%, rgba(200,230,255,0.32) 1px, transparent 1px),
        radial-gradient(1px 1px at 92% 72%, rgba(220,240,255,0.25) 1px, transparent 1px),
        radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,0.28) 1px, transparent 1px),
        radial-gradient(1px 1px at 25% 88%, rgba(200,230,255,0.3) 1px, transparent 1px),
        radial-gradient(1px 1px at 48% 92%, rgba(220,240,255,0.25) 1px, transparent 1px),
        radial-gradient(1px 1px at 72% 85%, rgba(255,255,255,0.28) 1px, transparent 1px),
        /* 基础背景 */
        radial-gradient(circle at 20% 30%, #0a0c1a 0%, #05070d 40%, #020305 100%);
    background-attachment: fixed;
}

/* 静态星空下不需要 Canvas */
body.static-stars #starfieldCanvas {
    display: none;
}

/* 星空背景 Canvas */
#starfieldCanvas {
    position: fixed;
    top: 0;
    left: 0;
    transition: filter 0.3s ease, opacity 0.3s ease;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* 星空 Canvas 容器（用于日间模式 filter 隔离） */
.starfield-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

/* ========== 装饰性背景光球（登录页精致效果） ========== */
.deco-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    animation: orbFloat 12s ease-in-out infinite;
}
@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(20px, -25px) scale(1.06); }
    66%      { transform: translate(-15px, 18px) scale(0.95); }
}

.deco-orb--purple {
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.15), transparent 70%);
    top: -120px; right: -100px;
    animation-delay: 0s;
}
.deco-orb--amber {
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(217, 119, 6, 0.08), transparent 70%);
    bottom: -60px; left: -80px;
    animation-delay: -5s;
}

/* ========== 导航栏整体 ========== */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px var(--space-xl);
    background: rgba(14, 17, 32, 0.55);
    backdrop-filter: blur(40px) saturate(1.4);
    -webkit-backdrop-filter: blur(40px) saturate(1.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: border-color 0.3s ease;
    min-height: 60px;
}

/* ★ 品牌 Logo 容器 */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    position: relative;
    padding: 2px 4px;
}
.logo .logo-svg {
    filter: drop-shadow(0 0 8px rgba(108, 92, 231, 0.3));
    animation: crystalGlow 4s ease-in-out infinite;
}
.logo .logo-text {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}
.logo .logo-text::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--brand-gradient);
    border-radius: 1px;
    opacity: 0.4;
}
.logo .logo-badge {
    font-size: 7px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 20px;
    background: rgba(245, 158, 11, 0.15);
    color: var(--brand-accent);
    border: 1px solid rgba(245,158,11,0.2);
    margin-left: 2px;
    letter-spacing: 0.05em;
}

/* 日间模式 logo */
[data-theme="day"] .logo .logo-text {
    background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="day"] .logo .logo-text::after {
    background: linear-gradient(135deg, #1E293B 0%, #334155 100%);
}

/* ★ Phase 3: 品牌导航链接 — 夜间无底色 */
.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: transparent;
    border-radius: 100px;
    backdrop-filter: blur(28px) saturate(2) brightness(1.15);
    -webkit-backdrop-filter: blur(28px) saturate(2) brightness(1.15);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-links a {
    position: relative;
    padding: 7px 16px;
    margin: 0 2px;
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    transition: var(--transition);
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 6px;
}
/* ★ 导航图标统一间距 */
.nav-links a .nav-icon {
    display: inline-flex;
    align-items: center;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.nav-links a:hover .nav-icon,
.nav-links a.active .nav-icon {
    opacity: 1;
}

.nav-links a:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.nav-links a.active {
    background: rgba(108, 92, 231, 0.3);
    border: 1px solid rgba(167, 139, 250, 0.3);
    color: var(--text-light);
    box-shadow: 0 0 16px rgba(108, 92, 231, 0.08);
}

.user-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    position: relative;
}

/* ★ Phase 3: 品牌用户头像按钮 */
.username {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(14, 17, 32, 0.55);
    backdrop-filter: blur(40px) saturate(1.4);
    color: var(--text-light);
    padding: 7px 20px 7px 12px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* ★ 用户头像圈 */
.username .user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.username:hover {
    background: rgba(14, 17, 32, 0.65);
    border-color: rgba(108, 92, 231, 0.3);
    transform: scale(1.02);
    box-shadow:
        0 6px 20px rgba(108, 92, 231, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ========== 下拉菜单玻璃风格（精致版） ========== */
.user-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: rgba(14, 17, 32, 0.55);
    backdrop-filter: blur(40px) saturate(1.4);
    -webkit-backdrop-filter: blur(40px) saturate(1.4);
    border-radius: 14px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(124, 58, 237, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    min-width: 160px;
    padding: 4px;
    display: none;
    z-index: 1000;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.user-dropdown.show {
    display: block;
    animation: dropdownSlide 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dropdownSlide {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.dropdown-item {
    padding: 6px 10px;
    color: var(--text-light);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: background 0.2s;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    border-radius: 8px;
    line-height: normal;
    height: 30px;
    box-sizing: border-box;
}

.dropdown-item:hover {
    background: rgba(124, 58, 237, 0.25);
    color: var(--text-light);
}

.dropdown-item .drop-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    opacity: 0.5;
    flex-shrink: 0;
}
.dropdown-item .drop-icon svg {
    display: block;
    width: 13px;
    height: 13px;
    max-width: 13px;
    max-height: 13px;
}
.dropdown-item:hover .drop-icon { opacity: 0.8; }

.dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 3px 0;
}
[data-theme="day"] .dropdown-divider {
    background: rgba(148, 163, 184, 0.2);
}

/* 通用按钮样式 */
.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

/* 苹果风格主按钮 - 紫金品牌色 */
.btn-primary {
    background: var(--primary-gradient);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    box-shadow:
        0 4px 16px rgba(124, 58, 237, 0.35),
        0 1px 3px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    position: relative;
    overflow: hidden;
}

/* 顶部高光 */
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 100%);
    border-radius: 14px 14px 0 0;
    pointer-events: none;
}

/* 悬停 → 琥珀金辉光（辅助色介入） */
.btn-primary:hover:not(:disabled) {
    transform: translateY(-2.5px) scale(1.01);
    box-shadow:
        0 10px 30px rgba(124, 58, 237, 0.45),
        0 4px 12px rgba(217, 119, 6, 0.15),
        0 1px 2px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0) scale(0.99);
    box-shadow: 0 3px 10px rgba(124, 58, 237, 0.35);
}

.btn-primary:disabled {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.4) 0%, rgba(118, 75, 162, 0.4) 100%);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.7);
}

/* 通用卡片样式（登录页精致玻璃质感） */
.card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-xl);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    position: relative;
    transition: box-shadow 0.4s ease;
}

.card:hover {
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(124, 58, 237, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

/* 动画 */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease;
}

/* ================================================================
 * ========== 白天模式 (data-theme="day") 全局切换系统 ==========
 *
 * 原理：通过 <html data-theme="day"> 属性选择器全局覆盖
 * - body: 纸张质感背景 + SVG噪点纹理
 * - 星空 Canvas: 通过 .starfield-wrapper 容器 filter 取反为暖金色
 * - 导航栏/卡片/按钮/输入框/文字: 全部取反为暖色调
 * - starfield-wrapper + isolation + will-change 防止浏览器降级丢弃filter
 * ================================================================ */

[data-theme="day"] {
    /* ====== 核心品牌色全面覆写：明亮靛蓝色调 ====== */
    --primary: var(--day-primary);              /* #4F46E5 明亮靛蓝 */
    --primary-light: var(--day-primary-light);  /* #6366F1 靛蓝 */
    --primary-gradient: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%);
    --primary-glow: rgba(79, 70, 229, 0.35);
    /* 辅助色也统一到蓝色系 */
    --accent: #2563EB;                          /* 蓝色（替代琥珀金） */
    --accent-light: #60A5FA;
    --accent-gradient: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
    --accent-glow: rgba(37, 99, 235, 0.30);

    /* 干净的白色玻璃质感 */
    --glass-bg: rgba(255, 255, 255, 0.88);
    --glass-border: rgba(148, 163, 184, 0.28);
    --glass-shadow:
        0 1px 3px rgba(100, 116, 139, 0.08),
        0 4px 16px rgba(100, 116, 139, 0.10),
        0 12px 32px var(--day-shadow-warm);
    --glass-blur: blur(16px);
    --text-light: #1E293B;
    --text-secondary: #475569;
    --text-muted: #94A3B8;
    --day-card-bg: #FFFCF7;
}

/* 白天模式：卡片边界加强（不依赖 backdrop-filter 时也能看清轮廓） */
[data-theme="day"] .glass-card,
[data-theme="day"] .glass-premium {
    border-color: var(--glass-border) !important;
    box-shadow:
        var(--glass-shadow),
        0 0 0 1px rgba(180, 160, 120, 0.08); /* 微妙外发光描边 */
}

/* 白天模式 body 背景 — 杂志纸质感 + 靛蓝氛围光（星云取反） */
[data-theme="day"] body {
    background-color: #FBF8F3 !important;
    background-image:
        /* ═══ 星云层 → 取反为靛蓝品牌氛围光 ═══ */
        /* 原：冷蓝色星云 → 日间：明亮靛蓝品牌色晕染 */
        radial-gradient(ellipse 350px 220px at 15% 25%, rgba(79,70,229,0.10) 0%, transparent 65%),
        radial-gradient(ellipse 300px 180px at 78% 18%, rgba(99,102,241,0.09) 0%, transparent 60%),
        radial-gradient(ellipse 320px 250px at 82% 72%, rgba(79,70,229,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 240px 170px at 22% 78%, rgba(99,102,241,0.08) 0%, transparent 55%),
        /* 原：银白星系光晕 → 日间：暖金微光 */
        radial-gradient(ellipse 450px 300px at 18% 15%, rgba(245,235,210,0.07) 0%, transparent 55%),
        radial-gradient(ellipse 380px 280px at 82% 28%, rgba(240,228,200,0.06) 0%, transparent 50%),
        /* ═══ 杂志纸张纹理层 ═══ */
        /* 大面积暖黄不均匀 — 模拟印刷纸泛黄 */
        radial-gradient(ellipse 140% 110% at 15% 5%, rgba(250,242,225,0.50) 0%, transparent 58%),
        radial-gradient(ellipse 120% 95% at 85% 8%, rgba(245,232,208,0.42) 0%, transparent 52%),
        radial-gradient(ellipse 100% 85% at 48% 92%, rgba(248,238,218,0.45) 0%, transparent 55%),
        radial-gradient(ellipse 80% 70% at 5% 75%, rgba(240,225,200,0.30) 0%, transparent 50%),
        /* 纸张纤维粗噪点（高频率 = 杂志印刷质感） */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='5' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix type='saturate' values='0.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='0.065'/%3E%3C/svg%3E"),
        /* 半调网点（印刷杂志特征 — 微妙CMYK感） */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23000' opacity='0.03'/%3E%3Ccircle cx='12' cy='7' r='0.45' fill='%23000' opacity='0.025'/%3E%3Ccircle cx='7' cy='14' r='0.5' fill='%23000' opacity='0.02'/%3E%3Ccircle cx='17' cy='17' r='0.35' fill='%23000' opacity='0.02'/%3E%3C/svg%3E");
    background-attachment: fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed;
    color: #1E293B !important;
}

/* 白天模式静态星空 → 同样杂志纸+靛蓝氛围 */
[data-theme="day"] body.static-stars {
    background-color: #FBF8F3 !important;
    background-image:
        radial-gradient(ellipse 350px 220px at 15% 25%, rgba(79,70,229,0.10) 0%, transparent 65%),
        radial-gradient(ellipse 300px 180px at 78% 18%, rgba(99,102,241,0.09) 0%, transparent 60%),
        radial-gradient(ellipse 320px 250px at 82% 72%, rgba(79,70,229,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 240px 170px at 22% 78%, rgba(99,102,241,0.08) 0%, transparent 55%),
        radial-gradient(ellipse 450px 300px at 18% 15%, rgba(245,235,210,0.07) 0%, transparent 55%),
        radial-gradient(ellipse 380px 280px at 82% 28%, rgba(240,228,200,0.06) 0%, transparent 50%),
        radial-gradient(ellipse 140% 110% at 15% 5%, rgba(250,242,225,0.50) 0%, transparent 58%),
        radial-gradient(ellipse 120% 95% at 85% 8%, rgba(245,232,208,0.42) 0%, transparent 52%),
        radial-gradient(ellipse 100% 85% at 48% 92%, rgba(248,238,218,0.45) 0%, transparent 55%),
        radial-gradient(ellipse 80% 70% at 5% 75%, rgba(240,225,200,0.30) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cfilter id='p2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='5' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix type='saturate' values='0.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p2)' opacity='0.065'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23000' opacity='0.03'/%3E%3Ccircle cx='12' cy='7' r='0.45' fill='%23000' opacity='0.025'/%3E%3Ccircle cx='7' cy='14' r='0.5' fill='%23000' opacity='0.02'/%3E%3Ccircle cx='17' cy='17' r='0.35' fill='%23000' opacity='0.02'/%3E%3C/svg%3E");
    background-attachment: fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed;
}

/* 白天模式星空 Canvas → 取反为墨水手绘纹理（保留星空细节） */
[data-theme="day"] .starfield-wrapper {
    filter: invert(1) hue-rotate(175deg) saturate(0.85) sepia(0.05) brightness(0.95) contrast(1.25) opacity(0.48) !important;
    transition: filter 0.3s ease, opacity 0.3s ease;
    isolation: isolate;
    z-index: 0;
}
[data-theme="day"] #starfieldCanvas {
    display: block !important;
}

/* ====== 白天模式 导航栏 — 干净的毛玻璃白（精致版） ====== */
[data-theme="day"] .navbar {
    background: rgba(255, 255, 255, 0.82) !important;
    border-bottom-color: rgba(148, 163, 184, 0.25) !important;
    backdrop-filter: blur(40px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(40px) saturate(1.4) !important;
}
[data-theme="day"] .nav-links {
    background: rgba(148, 163, 184, 0.12) !important;
}
[data-theme="day"] .nav-links a {
    background: transparent !important;
    color: #475569 !important;
}
[data-theme="day"] .nav-links a:hover {
    background: rgba(79, 70, 229, 0.08) !important;
    color: var(--day-primary) !important;
}
[data-theme="day"] .nav-links a.active {
    background: var(--day-primary-bg) !important;
    border-color: var(--day-primary-light) !important;
    color: var(--day-primary) !important;
}

/* ====== 白天模式 用户区域（精致版） ====== */
[data-theme="day"] .username {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(40px) saturate(1.4) !important;
    color: #1E293B !important;
    border-color: rgba(148, 163, 184, 0.30) !important;
    box-shadow:
        0 4px 16px rgba(100, 116, 139, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
[data-theme="day"] .username:hover {
    background: var(--day-primary-bg) !important;
    border-color: var(--day-primary-light) !important;
    box-shadow:
        0 6px 20px rgba(79, 70, 229, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
[data-theme="day"] .username .user-avatar {
    background: linear-gradient(135deg, #2563EB 0%, #3B82F6 50%, #60A5FA 100%) !important;
}
[data-theme="day"] .user-dropdown {
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(40px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(40px) saturate(1.4) !important;
    border-radius: var(--radius-xl) !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
    box-shadow:
        0 30px 80px rgba(100, 116, 139, 0.20),
        0 0 0 1px rgba(79, 70, 229, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
[data-theme="day"] .dropdown-item { color: #334155 !important; }
[data-theme="day"] .dropdown-item:hover { background: var(--day-primary-bg) !important; color: var(--day-primary) !important; }
[data-theme="day"] .dropdown-divider { background: rgba(148, 163, 184, 0.20) !important; }

/* ====== 白天模式 全局文字颜色统一 ====== */
[data-theme="day"] body,
[data-theme="day"] p,
[data-theme="day"] span,
[data-theme="day"] div,
[data-theme="day"] label,
[data-theme="day"] h1,
[data-theme="day"] h2,
[data-theme="day"] h3,
[data-theme="day"] h4,
[data-theme="day"] h5,
[data-theme="day"] h6 {
    color: #1E293B !important;
}
[data-theme="day"] .text-muted,
[data-theme="day"] .text-secondary,
[data-theme="day"] small,
[data-theme="day"] .hint,
[data-theme="day"] .meta,
[data-theme="day"] .subtitle {
    color: #64748B !important;
}
[data-theme="day"] .text-faint,
[data-theme="day"] .placeholder {
    color: #94A3B8 !important;
}

/* ====== 白天模式 卡片 — 高对比度 + 干净阴影（精致版） ====== */
[data-theme="day"] .card,
[data-theme="day"] .upload-card,
[data-theme="day"] .page-header,
[data-theme="day"] .stat-card,
[data-theme="day"] .material-header,
[data-theme="day"] .sidebar {
    background: var(--day-card-bg) !important;
    backdrop-filter: blur(16px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
    border-radius: var(--radius-xl) !important;
    /* 清晰的边框 + 层次分明的阴影 */
    border-color: var(--day-border-light) !important;
    box-shadow:
        0 1px 2px rgba(100, 116, 139, 0.06),
        0 4px 12px rgba(100, 116, 139, 0.08),
        0 16px 40px rgba(100, 116, 139, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    position: relative;
    transition: box-shadow 0.4s ease;
}

[data-theme="day"] .card:hover {
    box-shadow:
        0 1px 2px rgba(100, 116, 139, 0.06),
        0 6px 16px rgba(100, 116, 139, 0.10),
        0 20px 50px rgba(100, 116, 139, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* 玻璃卡片白天模式 */
[data-theme="day"] .glass-card,
[data-theme="day"] .glass-premium,
[data-theme="day"] .annotation-card {
    background: var(--day-card-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-color: var(--day-border-light) !important;
    box-shadow:
        0 1px 3px rgba(100, 116, 139, 0.08),
        0 8px 24px rgba(100, 116, 139, 0.10),
        0 20px 48px rgba(100, 116, 139, 0.08) !important;
}

/* ====== 白天模式 按钮 — 高辨识度靛蓝CTA ====== */
[data-theme="day"] .btn-primary {
    background: var(--day-primary) !important;
    color: white !important;
    box-shadow:
        0 4px 14px rgba(79, 70, 229, 0.35),
        0 1px 3px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
[data-theme="day"] .btn-primary::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 100%);
}
[data-theme="day"] .btn-primary:hover:not(:disabled) {
    background: var(--day-primary-hover) !important;
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(79, 70, 229, 0.40),
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}
[data-theme="day"] .btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(79, 70, 229, 0.30) !important;
}
[data-theme="day"] .btn-primary:disabled {
    background: #94A3B8 !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

/* ====== 白天模式 输入框 ====== */
[data-theme="day"] input[type="text"],
[data-theme="day"] input[type="password"],
[data-theme="day"] input[type="email"],
[data-theme="day"] input[type="number"],
[data-theme="day"] input[type="url"],
[data-theme="day"] textarea,
[data-theme="day"] select,
[data-theme="day"] .input-field {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: var(--day-border-light) !important;
    color: #1E293B !important;
    box-shadow: inset 0 1px 2px rgba(100, 116, 139, 0.06) !important;
}
[data-theme="day"] input::placeholder,
[data-theme="day"] textarea::placeholder { color: #94A3B8 !important; }
[data-theme="day"] input:focus,
[data-theme="day"] textarea:focus,
[data-theme="day"] select:focus,
[data-theme="day"] .input-field:focus {
    background: #fff !important;
    border-color: var(--day-primary) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12) !important;
}

/* ====== 白天模式 文字颜色通用修复 ====== */
[data-theme="day"] h1, [data-theme="day"] h2, [data-theme="day"] h3,
[data-theme="day"] .title, [data-theme="day"] .page-title,
[data-theme="day"] .material-title, [data-theme="day"] label,
[data-theme="day"] .file-name, [data-theme="day"] .drop-text,
[data-theme="day"] th, [data-theme="day"] td {
    color: inherit;
}
[data-theme="day"] .page-subtitle, [data-theme="day"] .material-meta,
[data-theme="day"] .file-size, [data-theme="day"] .drop-hint,
[data-theme="day"] .text-muted, [data-theme="day"] .hint {
    color: var(--day-text-faint) !important;
}

/* ====== 白天模式 拖放区域 ====== */
[data-theme="day"] .drop-area {
    background: rgba(241, 245, 249, 0.8) !important;
    border-color: var(--day-border-medium) !important;
}
[data-theme="day"] .drop-area:hover, [data-theme="day"] .drop-area.highlight {
    background: var(--day-primary-bg) !important;
    border-color: var(--day-primary) !important;
}

/* ====== 白天模式 表格 ====== */
[data-theme="day"] table { color: #334155 !important; }
[data-theme="day"] thead th {
    background: #F8FAFC !important;
    color: #1E293B !important;
    border-bottom-color: var(--day-border-light) !important;
}
[data-theme="day"] tbody tr {
    border-bottom-color: var(--day-border-light) !important;
}
[data-theme="day"] tbody tr:hover { background: rgba(241, 245, 249, 0.7) !important; }

/* ====== 白天模式 消息提示 ====== */
[data-theme="day"] .message.error {
    background: rgba(239, 68, 68, 0.06) !important;
    border-color: rgba(239, 68, 68, 0.20) !important;
}
[data-theme="day"] .message.success {
    background: rgba(34, 197, 94, 0.06) !important;
    border-color: rgba(34, 197, 94, 0.20) !important;
}

/* ====== 白天模式 登录页 ====== */
[data-theme="day"] .login-card,
[data-theme="day"] body.login-page > div > .container > .card {
    background: var(--day-card-bg) !important;
    border-color: var(--day-border-light) !important;
    box-shadow:
        0 12px 48px rgba(100, 116, 139, 0.14),
        0 4px 16px rgba(100, 116, 139, 0.08) !important;
}

/* ====== 切换按钮（导航栏内）— 可爱简笔画圆形按钮 ====== */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    user-select: none;
    position: relative;
    overflow: hidden;
    /* 默认夜间模式 — 跟随导航栏暗色 */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: var(--text-light, #e8eafd);
}

/* 图标默认状态：月亮隐藏 / 灯泡显示 */
.theme-toggle-btn .theme-icon-moon { display: none; }
.theme-toggle-btn .theme-icon-bulb { display: block; }

/* 日间模式：干净浅色底 + 显示月亮 */
[data-theme="day"] .theme-toggle-btn {
    background: rgba(148, 163, 184, 0.18) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 3px rgba(100, 116, 139, 0.06) !important;
    color: #475569;
}
[data-theme="day"] .theme-toggle-btn .theme-icon-moon { display: block; }
[data-theme="day"] .theme-toggle-btn .theme-icon-bulb { display: none; }

/* 悬停效果 */
.theme-toggle-btn:hover {
    transform: scale(1.08);
    background: rgba(255, 255, 255, 0.14) !important;
}

[data-theme="day"] .theme-toggle-btn:hover {
    background: rgba(190, 170, 140, 0.38) !important;
}

/* 按压效果（日间） */
[data-theme="day"] .theme-toggle-btn:active {
    transform: scale(0.95);
    transition-duration: 0.08s;
}

/* ====== 夜间模式卡片基础样式（加粗边框） ====== */
body:not([data-theme="day"]) .glass-card,
body:not([data-theme="day"]) .glass-premium,
body:not([data-theme="day"]) .card,
body:not([data-theme="day"]) .upload-card,
body:not([data-theme="day"]) .annotation-card,
body:not([data-theme="day"]) .login-card,
body:not([data-theme="day"]) .material-card,
body:not([data-theme="day"]) .stat-card {
    border: var(--night-border-width) solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 悬停时也保持简洁 */
body:not([data-theme="day"]) .glass-card:hover,
body:not([data-theme="day"]) .glass-premium:hover,
body:not([data-theme="day"]) .card:hover,
body:not([data-theme="day"]) .upload-card:hover,
body:not([data-theme="day"]) .annotation-card:hover,
body:not([data-theme="day"]) .login-card:hover,
body:not([data-theme="day"]) .material-card:hover,
body:not([data-theme="day"]) .stat-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.28),
        0 2px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ================================================
 * Phase 4+5: 加载态 & 骨架屏优化系统
 * 解决首屏半加载丑 + 图标闪烁问题
 * ================================================ */

/* ★ 品牌图标未加载时的优雅回退：隐藏空占位，仅显示文字 */
.nav-icon { display: inline-flex; align-items: center; }
.nav-icon .kli-home,
.nav-icon .kli-materials,
.nav-icon .kli-upload,
.drop-icon .kli-settings,
.drop-icon .kli-user,
.drop-icon .kli-logout,
.logo-svg .kli-logo {
    display: inline-block;
    min-width: 18px;
    min-height: 18px;
}
/* SVG 加载前隐藏空 span，加载后显示 */
.kli-home svg,
.kli-materials svg,
.kli-upload svg,
.kli-settings svg,
.kli-user svg,
.kli-logout svg,
.kli-logo svg,
.kli svg {
    display: block;
}

/* ★ 首屏优雅加载指示器 */
body::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid rgba(108,92,231,0.1);
    border-top-color: #6C5CE7;
    border-radius: 50%;
    animation: kli-page-loading 0.7s linear infinite;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
body:not(.page-ready)::after {
    opacity: 1;
}
@keyframes kli-page-loading {
    to { transform: rotate(360deg); }
}

/* ★ 首屏加载骨架：页面可见前隐藏内容 */
body:not(.page-ready) .navbar,
body:not(.page-ready) .container {
    opacity: 0;
}
body.page-ready .navbar {
    animation: navSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
body.page-ready .container {
    animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes navSlideIn {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ★ 导航链接加载前的精简替代（防止图标空位太大） */
.nav-icon:empty {
    display: none;
}
.nav-icon:empty + span {
    margin-left: 0;
}

/* ★ 数据加载中的统计卡片骨架 */
.stat-card.loading .stat-num {
    display: inline-block;
    width: 60px;
    height: 24px;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(108,92,231,0.08) 25%, rgba(108,92,231,0.15) 50%, rgba(108,92,231,0.08) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ====== 全局动画 ====== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes navSlideIn {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}