/**
 * theme.css — 设计 Token + 全局 reset + 安全区域 + 断点栅格
 * 来源：DESIGN.md 第四章「视觉系统」 + 第三章「设备适配策略」
 * 命名约定：CSS 变量统一 `--lx-*`，避免与第三方样式冲突
 * 加载顺序：本文件必须在 components.css 之前
 */

/* ============================================================
 * 1. 设计 Token（CSS Custom Properties）
 * ============================================================ */
:root {
    /* 1.1 中性色 + 默认（紫）主题背景微染 */
    --lx-bg:           #ecedff;   /* 页面背景：默认紫主题的浅薰衣草微染 */
    --lx-surface:      #ffffff;   /* 卡片背景：始终纯白，与微染背景形成层次 */
    --lx-surface-alt:  #f1f5f9;   /* 次级背景（折叠面板内、tab 条） */
    --lx-border:       #e2e8f0;   /* 边框 */
    --lx-border-light: #f1f5f9;   /* 轻边框（数据行分隔） */

    /* 1.2 文字 */
    --lx-text:         #0f172a;   /* 主文字 */
    --lx-text-muted:   #64748b;   /* 次文字（标签/提示） */
    --lx-text-light:   #94a3b8;   /* 辅助文字（空状态/占位） */

    /* 1.3 主色（紫，仅用于主按钮/链接/focus/进度条） */
    --lx-primary:        #4f46e5;
    --lx-primary-hover:  #4338ca;
    --lx-primary-active: #4338ca;
    --lx-primary-light:  #eef2ff;
    --lx-primary-soft:   #c7d2fe;

    /* 1.4 状态色（语义化：绿=掌握，橙=错题/复习，红=答错瞬时，蓝=信息） */
    --lx-success:        #16a34a;
    --lx-success-light:  #dcfce7;
    --lx-success-soft:   #bbf7d0;
    --lx-warning:        #ea580c;
    --lx-warning-light:  #fed7aa;
    --lx-warning-soft:   #fdba74;
    --lx-danger:         #dc2626;
    --lx-danger-light:   #fee2e2;
    --lx-info:           #0284c7;
    --lx-info-light:     #e0f2fe;

    /* 1.5 字号（移动端 ≥ 桌面端，DESIGN.md 4.2） */
    --lx-text-xs:  12px;  --lx-leading-xs: 1.4;
    --lx-text-sm:  13px;  --lx-leading-sm: 1.5;
    --lx-text-base:15px;  --lx-leading-base: 1.6;
    --lx-text-lg:  17px;  --lx-leading-lg: 1.7;
    --lx-text-xl:  19px;  --lx-leading-xl: 1.7;
    --lx-text-2xl: 22px;  --lx-leading-2xl: 1.3;
    --lx-text-3xl: 28px;  --lx-leading-3xl: 1.2;

    /* 1.6 间距（4px 基准网格，DESIGN.md 4.3） */
    --lx-space-1: 4px;
    --lx-space-2: 8px;
    --lx-space-3: 12px;
    --lx-space-4: 16px;
    --lx-space-6: 24px;
    --lx-space-8: 32px;

    /* 1.7 圆角（DESIGN.md 4.4） */
    --lx-radius-sm:    8px;
    --lx-radius-md:    12px;
    --lx-radius-lg:    16px;
    --lx-radius-xl:    24px;
    --lx-radius-full:  9999px;

    /* 1.8 阴影层级（DESIGN.md 4.5） */
    --lx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --lx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --lx-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.10);

    /* 1.9 触摸热区（DESIGN.md 5.1：≥44×44，推荐 48×48） */
    --lx-touch-min: 44px;
    --lx-touch-rec: 48px;

    /* 1.10 布局尺寸 */
    --lx-topbar-h-mobile: 56px;
    --lx-topbar-h-desktop: 64px;
    --lx-bottombar-h-mobile: 88px;   /* 两行 44px */
    --lx-bottombar-h-landscape: 56px; /* 横屏合并为一行 */
    --lx-content-max-mobile: 100%;
    --lx-content-max-tablet: 600px;
    --lx-content-max-desktop: 1100px;
    --lx-drawer-w-mobile: 84vw;
    --lx-drawer-w-mobile-max: 320px;
    --lx-drawer-w-desktop: 320px;

    /* 1.11 动画时长 */
    --lx-dur-fast: 120ms;
    --lx-dur-base: 200ms;
    --lx-dur-slow: 320ms;
    --lx-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* 1.12 z-index 层级 */
    --lx-z-base:    1;
    --lx-z-sticky:  10;
    --lx-z-drawer:  100;
    --lx-z-overlay: 200;
    --lx-z-modal:   300;
    --lx-z-toast:   400;

    /* 1.13 安全区（ viewport-fit=cover 时由 env() 注入） */
    --lx-safe-top:    env(safe-area-inset-top, 0px);
    --lx-safe-bottom: env(safe-area-inset-bottom, 0px);
    --lx-safe-left:   env(safe-area-inset-left, 0px);
    --lx-safe-right:  env(safe-area-inset-right, 0px);
}

/* 主题/模式设计说明（v2.6 重构）：
 *   - 不再使用 @media (prefers-color-scheme: dark) 自动跟随系统。
 *     根因：应用有显式「普通/夜间/护眼」模式开关，自动跟随会与用户显式选择冲突——
 *     曾导致系统深色时「普通模式」被污染成夜间配色。现已移除该媒体查询。
 *   - 普通模式（无 data-mode）恒为浅色：:root 与各 :root[data-theme] 提供浅色微染背景。
 *   - 夜间深色：由 :root[data-mode="night"] 显式覆盖（见后段）。
 *   - 护眼米黄：由 :root[data-mode="eye"] 显式覆盖（见后段）。
 *   - 各色主题会同时染 primary 家族 + 页面背景 --lx-bg，卡片 --lx-surface 始终纯白以形成层次。
 */

/* ============================================================
 * 2. 全局 Reset
 * ============================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* 移除 iOS 点击高亮 */
}

html {
    -webkit-text-size-adjust: 100%;      /* iOS 横屏不放大字号 */
    text-size-adjust: 100%;
    font-size: 16px;                     /* 1rem = 16px 基准 */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
                 'Hiragino Sans GB', 'Microsoft YaHei', Roboto, sans-serif;
    background: var(--lx-bg);
    color: var(--lx-text);
    min-height: 100vh;
    min-height: 100dvh;  /* 移动端动态视口高度，避免地址栏伸缩跳动 */
    font-size: var(--lx-text-base);
    line-height: var(--lx-leading-base);
    /* iOS 平滑滚动 + 回弹 */
    -webkit-overflow-scrolling: touch;
    /* 字体抗锯齿 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 防止横向溢出（移动端常见 bug） */
    overflow-x: hidden;
    /* 词组断行：长 URL / 长英文单词不溢出 */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

button, input, textarea, select {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

button {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation; /* 移除 300ms 点击延迟 */
}

a {
    color: var(--lx-primary);
    text-decoration: none;
}

ul, ol { list-style: none; }

img, svg, video {
    max-width: 100%;
    display: block;
}

/* 焦点可见性：键盘用户必看；鼠标点击通过 :focus-visible 区分 */
:focus-visible {
    outline: 2px solid var(--lx-primary);
    outline-offset: 2px;
}

/* 屏幕阅读器辅助类 */
.lx-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
 * 3. 安全区域适配（iPhone 刘海/底部 Home Indicator）
 * ============================================================ */
/* 应用根容器：所有内容应该放在 #app 内，由它统一处理 safe-area */
#app {
    /* 顶栏使用 sticky 顶部对齐，自身带 padding-top: safe-top */
    /* 底部操作区使用 sticky 底部，自身带 padding-bottom: safe-bottom */
    /* 主体内容则在顶栏与底栏之间滚动 */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* ============================================================
 * 4. 断点栅格（Mobile First，DESIGN.md 3.1）
 *    默认 mobile，min-width 向上覆盖
 * ============================================================ */
.lx-container {
    width: 100%;
    margin: 0 auto;
    padding-left: var(--lx-space-3);
    padding-right: var(--lx-space-3);
}

/* sm ≥ 640：手机横屏 / 小平板 */
@media (min-width: 640px) {
    .lx-container {
        padding-left: var(--lx-space-4);
        padding-right: var(--lx-space-4);
    }
}

/* md ≥ 768：平板竖屏，居中 600 */
@media (min-width: 768px) {
    .lx-container {
        max-width: var(--lx-content-max-tablet);
    }
}

/* lg ≥ 1024：平板横屏 / 小桌面，双列 */
@media (min-width: 1024px) {
    .lx-container {
        max-width: var(--lx-content-max-desktop);
        padding-left: var(--lx-space-6);
        padding-right: var(--lx-space-6);
    }
}

/* ============================================================
 * 5. 工具类（间距/字号/状态色快捷）
 * ============================================================ */
/* 显示控制 */
.lx-hidden { display: none !important; }
@media (min-width: 768px) {
    .lx-mobile-only { display: none !important; }
}
@media (max-width: 767px) {
    .lx-desktop-only { display: none !important; }
}

/* 文字截断（单行） */
.lx-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 多行截断（默认 2 行，可改 --lx-line-clamp） */
.lx-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lx-line-clamp, 2);
    line-clamp: var(--lx-line-clamp, 2);
    overflow: hidden;
}

/* 文字字号快捷 */
.lx-text-xs   { font-size: var(--lx-text-xs);   line-height: var(--lx-leading-xs); }
.lx-text-sm   { font-size: var(--lx-text-sm);   line-height: var(--lx-leading-sm); }
.lx-text-base { font-size: var(--lx-text-base);  line-height: var(--lx-leading-base); }
.lx-text-lg   { font-size: var(--lx-text-lg);    line-height: var(--lx-leading-lg); }
.lx-text-xl   { font-size: var(--lx-text-xl);    line-height: var(--lx-leading-xl); }
.lx-text-2xl  { font-size: var(--lx-text-2xl);   line-height: var(--lx-leading-2xl); }
.lx-text-3xl  { font-size: var(--lx-text-3xl);   line-height: var(--lx-leading-3xl); }

/* 文字颜色 */
.lx-text-muted  { color: var(--lx-text-muted); }
.lx-text-light   { color: var(--lx-text-light); }
.lx-text-primary { color: var(--lx-primary); }
.lx-text-success { color: var(--lx-success); }
.lx-text-warning { color: var(--lx-warning); }
.lx-text-danger  { color: var(--lx-danger); }
.lx-text-info    { color: var(--lx-info); }

/* 字重 */
.lx-font-normal { font-weight: 400; }
.lx-font-medium { font-weight: 500; }
.lx-font-semibold { font-weight: 600; }
.lx-font-bold { font-weight: 700; }

/* 间距快捷（margin/padding 各方向） */
.lx-mt-1 { margin-top: var(--lx-space-1); }
.lx-mt-2 { margin-top: var(--lx-space-2); }
.lx-mt-3 { margin-top: var(--lx-space-3); }
.lx-mt-4 { margin-top: var(--lx-space-4); }
.lx-mt-6 { margin-top: var(--lx-space-6); }
.lx-mb-1 { margin-bottom: var(--lx-space-1); }
.lx-mb-2 { margin-bottom: var(--lx-space-2); }
.lx-mb-3 { margin-bottom: var(--lx-space-3); }
.lx-mb-4 { margin-bottom: var(--lx-space-4); }
.lx-mb-6 { margin-bottom: var(--lx-space-6); }
.lx-p-3  { padding: var(--lx-space-3); }
.lx-p-4  { padding: var(--lx-space-4); }

/* flex 布局快捷 */
.lx-flex { display: flex; }
.lx-flex-col { display: flex; flex-direction: column; }
.lx-flex-center { display: flex; align-items: center; justify-content: center; }
.lx-flex-between { display: flex; align-items: center; justify-content: space-between; }
.lx-flex-1 { flex: 1 1 0%; min-width: 0; }
.lx-gap-1 { gap: var(--lx-space-1); }
.lx-gap-2 { gap: var(--lx-space-2); }
.lx-gap-3 { gap: var(--lx-space-3); }
.lx-gap-4 { gap: var(--lx-space-4); }

/* ============================================================
 * 6. 动画
 * ============================================================ */
@keyframes lx-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes lx-slide-in-right {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes lx-slide-in-left {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
@keyframes lx-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes lx-scale-in {
    from { transform: scale(0.95); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
@keyframes lx-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
@keyframes lx-shake {
    0%, 100% { transform: translateX(0); }
    20%  { transform: translateX(-8px); }
    40%  { transform: translateX(8px); }
    60%  { transform: translateX(-4px); }
    80%  { transform: translateX(4px); }
}

/* prefers-reduced-motion：尊重用户偏好，关闭非必要动画 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
 * 主题系统：通过 <html data-theme="…"> 或 <html data-mode="…"> 切换变量
 *   - 色主题：default / red / orange / yellow / green / cyan / blue / purple / red-blue / blue-green / rainbow
 *   - 模式：normal / night（夜间） / eye（护眼）
 *   二者可组合（如 data-theme="orange" data-mode="night"）
 * 持久化：localStorage 键 lx_theme / lx_mode（见 render/theme.js）
 * ============================================================ */

/* ---------- 色主题：覆盖 primary 家族 + 页面背景 --lx-bg 微染 ----------
 * 每个主题同时染主色与背景，使换主题能明显改变页面观感；
 * --lx-surface（卡片）始终纯白，在微染背景上形成层次；
 * 各主题背景明度统一（~90% lightness），保证风格一致、深色文字可读。
 */
:root[data-theme="red"] {
    --lx-primary:        #dc2626;
    --lx-primary-hover:  #b91c1c;
    --lx-primary-active: #b91c1c;
    --lx-primary-light:  #fef2f2;
    --lx-primary-soft:   #fecaca;
    --lx-bg:             #fce9e9;   /* 浅红微染 */
}
:root[data-theme="orange"] {
    --lx-primary:        #ea580c;
    --lx-primary-hover:  #c2410c;
    --lx-primary-active: #c2410c;
    --lx-primary-light:  #fff7ed;
    --lx-primary-soft:   #fed7aa;
    --lx-bg:             #fcebe3;   /* 浅橙微染 */
}
:root[data-theme="yellow"] {
    --lx-primary:        #ca8a04;
    --lx-primary-hover:  #a16207;
    --lx-primary-active: #a16207;
    --lx-primary-light:  #fefce8;
    --lx-primary-soft:   #fde68a;
    --lx-bg:             #fbf2da;   /* 浅黄微染 */
}
:root[data-theme="green"] {
    --lx-primary:        #16a34a;
    --lx-primary-hover:  #15803d;
    --lx-primary-active: #15803d;
    --lx-primary-light:  #f0fdf4;
    --lx-primary-soft:   #bbf7d0;
    --lx-bg:             #e4f5ea;   /* 浅绿微染 */
}
:root[data-theme="cyan"] {
    --lx-primary:        #0891b2;
    --lx-primary-hover:  #0e7490;
    --lx-primary-active: #0e7490;
    --lx-primary-light:  #ecfeff;
    --lx-primary-soft:   #a5f3fc;
    --lx-bg:             #ddf3f8;   /* 浅青微染 */
}
:root[data-theme="blue"] {
    --lx-primary:        #2563eb;
    --lx-primary-hover:  #1d4ed8;
    --lx-primary-active: #1d4ed8;
    --lx-primary-light:  #eff6ff;
    --lx-primary-soft:   #bfdbfe;
    --lx-bg:             #e2ecfd;   /* 浅蓝微染 */
}
:root[data-theme="purple"] {
    --lx-primary:        #7c3aed;
    --lx-primary-hover:  #6d28d9;
    --lx-primary-active: #6d28d9;
    --lx-primary-light:  #f5f3ff;
    --lx-primary-soft:   #ddd6fe;
    --lx-bg:             #efe7ff;   /* 浅紫微染 */
}
/* 红蓝（主色红蓝渐变按钮） */
:root[data-theme="red-blue"] {
    --lx-primary:        #dc2626;
    --lx-primary-hover:  #1d4ed8;
    --lx-primary-active: #1d4ed8;
    --lx-primary-light:  #eff6ff;
    --lx-primary-soft:   #bfdbfe;
    /* 背景：浅红 → 浅蓝 渐变（~90% 明度，与其他主题一致） */
    --lx-bg:             linear-gradient(135deg, #fce9e9 0%, #e2ecfd 100%);
}
/* 蓝绿 */
:root[data-theme="blue-green"] {
    --lx-primary:        #0ea5e9;
    --lx-primary-hover:  #10b981;
    --lx-primary-active: #10b981;
    --lx-primary-light:  #ecfdf5;
    --lx-primary-soft:   #6ee7b7;
    /* 背景：浅蓝 → 浅绿 渐变 */
    --lx-bg:             linear-gradient(135deg, #e2ecfd 0%, #e4f5ea 100%);
}
/* 彩虹色：primary 换成彩虹渐变按钮，色主色用紫 */
:root[data-theme="rainbow"] {
    --lx-primary:        #7c3aed;
    --lx-primary-hover:  #db2777;
    --lx-primary-active: #0891b2;
    --lx-primary-light:  #fdf4ff;
    --lx-primary-soft:   #f5d0fe;
    /* 背景：七色彩虹浅色渐变（与按钮彩虹同序、但 90%+ 明度），呼应彩虹色主题 */
    --lx-bg:             linear-gradient(135deg,
                                #fce9e9 0%,    /* 红 */
                                #fcebe3 16%,   /* 橙 */
                                #fbf2da 32%,   /* 黄 */
                                #e4f5ea 48%,   /* 绿 */
                                #ddf3f8 64%,   /* 青 */
                                #e2ecfd 80%,   /* 蓝 */
                                #efe7ff 100%   /* 紫 */
                              );
}

/* 彩虹主题下主按钮用线性渐变 */
:root[data-theme="rainbow"] .lx-button--primary {
    background: linear-gradient(90deg,
        #dc2626 0%,
        #ea580c 16%,
        #ca8a04 32%,
        #16a34a 48%,
        #0891b2 64%,
        #2563eb 80%,
        #7c3aed 100%);
    border-color: transparent;
}
:root[data-theme="rainbow"] .lx-button--primary:hover {
    filter: brightness(1.05);
}
:root[data-theme="rainbow"] .lx-progress-bar__fill {
    background: linear-gradient(90deg,
        #dc2626, #ea580c, #ca8a04, #16a34a, #0891b2, #2563eb, #7c3aed);
}
/* 红蓝主题下主按钮渐变 */
:root[data-theme="red-blue"] .lx-button--primary {
    background: linear-gradient(90deg, #dc2626, #2563eb);
    border-color: transparent;
}
/* 蓝绿主题下主按钮渐变 */
:root[data-theme="blue-green"] .lx-button--primary {
    background: linear-gradient(90deg, #2563eb, #10b981);
    border-color: transparent;
}

/* ---------- 模式：夜间 mode=night（深色模式） ---------- */
:root[data-mode="night"] {
    --lx-bg:           #0f172a;
    --lx-surface:      #1e293b;
    --lx-surface-alt:  #334155;
    --lx-border:       #334155;
    --lx-border-light: #1e293b;

    --lx-text:         #f1f5f9;
    --lx-text-muted:   #cbd5e1;
    --lx-text-light:   #64748b;

    --lx-primary-light: rgba(79, 70, 229, 0.2);
    --lx-primary-soft:  rgba(199, 210, 254, 0.35);
    --lx-success-light: rgba(22, 163, 74, 0.18);
    --lx-success-soft:  rgba(187, 247, 208, 0.3);
    --lx-warning-light: rgba(234, 88, 12, 0.18);
    --lx-warning-soft:  rgba(253, 186, 116, 0.3);
    --lx-danger-light:  rgba(220, 38, 38, 0.2);
    --lx-info-light:    rgba(2, 132, 199, 0.2);

    --lx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --lx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --lx-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
}
:root[data-mode="night"] .lx-card,
:root[data-mode="night"] .lx-drawer,
:root[data-mode="night"] .lx-modal__content {
    background: var(--lx-surface);
    border: 1px solid var(--lx-border);
}
:root[data-mode="night"] .lx-topbar {
    background: var(--lx-surface);
    border-bottom: 1px solid var(--lx-border);
}
:root[data-mode="night"] .lx-bottombar {
    background: var(--lx-surface);
    border-top: 1px solid var(--lx-border);
}

/* ---------- 模式：护眼 mode=eye（浅米黄纸色，降低对比度） ---------- */
:root[data-mode="eye"] {
    --lx-bg:           #f5efd9;
    --lx-surface:      #fbf6e2;
    --lx-surface-alt:  #f1e8c7;
    --lx-border:       #e6dcb0;
    --lx-border-light: #efe5b9;

    --lx-text:         #3a3520;
    --lx-text-muted:   #6f6645;
    --lx-text-light:   #a09569;

    /* 护眼主色：偏绿（缓解疲劳） */
    --lx-primary:        #4a7c59;
    --lx-primary-hover:  #3a6448;
    --lx-primary-active: #3a6448;
    --lx-primary-light:  #e8f2e1;
    --lx-primary-soft:   #c6dfb8;

    --lx-success:        #4a7c59;
    --lx-success-light:  #e8f2e1;
    --lx-success-soft:   #c6dfb8;
}
:root[data-mode="eye"] body {
    background: var(--lx-bg);
    /* 米黄纸质感：极淡的 noise 感（兼容） */
    background-image:
        repeating-linear-gradient(0deg,
            rgba(0,0,0,0.012) 0px,
            rgba(0,0,0,0.012) 1px,
            transparent 1px,
            transparent 3px);
}