/* =============================================================================
   文件路径: public/static/css/theme.css
   说明: 课件前台展示主题系统
         - 6 种展示风格（.edu-style-*），每种均为完整美观版式
         - 10 种配色系（.edu-color-*），与任意风格自由组合
         - 学生端大屏、课程预览、教师端主题选择器共用
   命名: 风格 / 配色 均通过容器 class 生效，无需额外内联样式
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. 配色系（先声明，风格类在后可覆盖深色场景）
   ----------------------------------------------------------------------------- */
.edu-color-blue   { --edu-primary:#1d6ff2; --edu-accent:#38bdf8; --edu-bg:#f3f8ff; --edu-bg2:#e3efff; --edu-ink:#0f172a; }
.edu-color-green  { --edu-primary:#0f9d76; --edu-accent:#34d399; --edu-bg:#f2fbf7; --edu-bg2:#e0f5ea; --edu-ink:#0f1f1a; }
.edu-color-orange { --edu-primary:#ea7a1f; --edu-accent:#fbbf24; --edu-bg:#fff8f0; --edu-bg2:#ffeeda; --edu-ink:#2a1a0c; }
.edu-color-purple { --edu-primary:#7c4dff; --edu-accent:#c084fc; --edu-bg:#f8f5ff; --edu-bg2:#efe6ff; --edu-ink:#1b1033; }
.edu-color-red    { --edu-primary:#e23a3a; --edu-accent:#fb7185; --edu-bg:#fff5f5; --edu-bg2:#ffe6e6; --edu-ink:#2b0f0f; }
.edu-color-teal   { --edu-primary:#0e7490; --edu-accent:#22d3ee; --edu-bg:#f0fbfd; --edu-bg2:#dcf5fa; --edu-ink:#062a33; }
.edu-color-indigo { --edu-primary:#3f51b5; --edu-accent:#818cf8; --edu-bg:#f4f5ff; --edu-bg2:#e6e8ff; --edu-ink:#141a3a; }
.edu-color-slate  { --edu-primary:#475569; --edu-accent:#94a3b8; --edu-bg:#f8fafc; --edu-bg2:#eef2f6; --edu-ink:#111827; }
.edu-color-pink   { --edu-primary:#db2777; --edu-accent:#f9a8d4; --edu-bg:#fff5fa; --edu-bg2:#ffe6f2; --edu-ink:#2b0f1e; }
.edu-color-brown  { --edu-primary:#8b5e34; --edu-accent:#d6a06a; --edu-bg:#fdf8f3; --edu-bg2:#f6ece1; --edu-ink:#29180c; }

/* -----------------------------------------------------------------------------
   2. 舞台基础（学生端大屏容器）
   ----------------------------------------------------------------------------- */
.edu-stage {
    --edu-surface: #ffffff;
    --edu-surface-2: #ffffff;
    --edu-surface-border: rgba(15, 23, 42, .08);
    --edu-text: var(--edu-ink, #0f172a);
    --edu-muted: rgba(15, 23, 42, .58);
    --edu-radius-lg: 22px;
    --edu-radius-sm: 12px;
    --edu-title-weight: 800;
    --edu-title-font: inherit;
    --edu-shadow-lg: 0 24px 60px rgba(15, 23, 42, .12);
    --edu-letter: 0;

    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: 48px 40px 40px;
    background: linear-gradient(160deg, var(--edu-bg, #f5f8ff) 0%, var(--edu-bg2, #e8f1ff) 100%);
    color: var(--edu-text);
    font-family: var(--edu-font);
    overflow: hidden;
    transition: background .4s ease, color .4s ease;
}
.edu-stage * { box-sizing: border-box; }

.edu-stage .stage-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 2; }

.edu-stage .stage-kicker {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .9rem; font-weight: 700; letter-spacing: .08em;
    color: var(--edu-primary);
    background: color-mix(in srgb, var(--edu-primary) 12%, transparent);
    padding: .35rem .9rem; border-radius: 999px;
    margin-bottom: 14px;
}

.edu-stage .stage-title {
    font-weight: var(--edu-title-weight);
    font-family: var(--edu-title-font);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.3;
    letter-spacing: var(--edu-letter);
    margin: 0 0 20px;
    color: var(--edu-text);
}

.edu-stage .stage-body {
    font-size: clamp(1rem, 1.35vw, 1.22rem);
    line-height: 1.95;
    color: var(--edu-text);
}
.edu-stage .stage-body img { max-width: 100%; height: auto; border-radius: var(--edu-radius-sm); }
.edu-stage .stage-body table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.edu-stage .stage-body td, .edu-stage .stage-body th {
    border: 1px solid var(--edu-surface-border); padding: 10px 14px;
}
.edu-stage .stage-body blockquote {
    margin: 18px 0; padding: 12px 20px;
    border-left: 5px solid var(--edu-primary);
    background: color-mix(in srgb, var(--edu-primary) 7%, transparent);
    border-radius: 0 var(--edu-radius-sm) var(--edu-radius-sm) 0;
    color: var(--edu-text);
}
.edu-stage .stage-body pre {
    background: color-mix(in srgb, var(--edu-text) 8%, transparent);
    padding: 14px 18px; border-radius: var(--edu-radius-sm); overflow: auto;
}
.edu-stage .stage-body a { color: var(--edu-primary); text-decoration: underline; }
.edu-stage .stage-body iframe,
.edu-stage .stage-body video { max-width: 100%; border: 0; border-radius: var(--edu-radius-sm); }

/* 步骤切换：卡片从下往上滑入 + 透明度渐变 */
.edu-stage .stage-card { will-change: transform, opacity; }

/* 底栏 */
.edu-stage .stage-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: flex; align-items: center; gap: 14px;
    padding: 12px 26px;
    background: color-mix(in srgb, var(--edu-surface) 88%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--edu-surface-border);
}
.edu-stage .stage-progress { flex: 1 1 auto; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--edu-text) 12%, transparent); overflow: hidden; }
.edu-stage .stage-progress > i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--edu-primary), var(--edu-accent)); transition: width .35s ease; }
.edu-stage .stage-dots { display: flex; gap: 7px; align-items: center; }
.edu-stage .stage-dots span { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--edu-text) 22%, transparent); transition: all .25s ease; }
.edu-stage .stage-dots span.on { width: 24px; border-radius: 99px; background: linear-gradient(90deg, var(--edu-primary), var(--edu-accent)); }

/* 按钮 */
.edu-btn {
    border: none; cursor: pointer; font-weight: 700; font-family: inherit;
    border-radius: 999px; padding: .7rem 1.6rem; font-size: 1rem;
    color: #fff; background: linear-gradient(135deg, var(--edu-primary), var(--edu-accent));
    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--edu-primary) 34%, transparent);
}
.edu-btn:hover { transform: scale(1.05); box-shadow: 0 14px 34px color-mix(in srgb, var(--edu-primary) 42%, transparent); }
.edu-btn:active { transform: scale(.95); }
.edu-btn.ghost {
    background: transparent; color: var(--edu-primary);
    border: 2px solid color-mix(in srgb, var(--edu-primary) 45%, transparent);
    box-shadow: none;
}
.edu-btn.ghost:hover { background: color-mix(in srgb, var(--edu-primary) 10%, transparent); transform: scale(1.05); }

/* =============================================================================
   3. 展示风格 —— 每种风格为一套完整版式
   ============================================================================= */

/* ------------------------- 3.1 经典课堂 classic --------------------------- */
.edu-style-classic .stage-inner { text-align: center; padding-top: 20px; }
.edu-style-classic .stage-title::after {
    content: ""; display: block; width: 88px; height: 6px; margin: 16px auto 0;
    border-radius: 99px; background: linear-gradient(90deg, var(--edu-primary), var(--edu-accent));
}
.edu-style-classic .stage-card {
    text-align: left; margin-top: 26px; padding: 34px 38px;
    background: var(--edu-surface);
    border: 1px solid var(--edu-surface-border);
    border-radius: var(--edu-radius-lg);
    box-shadow: var(--edu-shadow-lg);
}
.edu-style-classic .edu-stage-deco {
    position: absolute; left: -140px; bottom: -160px; width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--edu-accent) 38%, transparent), transparent 68%);
    z-index: 1;
}

/* ------------------------- 3.2 沉浸剧场 immersive ------------------------- */
.edu-style-immersive {
    --edu-bg: #0a1120;
    --edu-bg2: #060b16;
    --edu-text: #eef4ff;
    --edu-muted: rgba(238, 244, 255, .62);
    --edu-surface: rgba(255, 255, 255, .06);
    --edu-surface-border: rgba(255, 255, 255, .14);
    --edu-shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);
    background: radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--edu-primary) 30%, #060b16) 0%, #060b16 62%),
                radial-gradient(90% 70% at 100% 100%, color-mix(in srgb, var(--edu-accent) 24%, #060b16) 0%, #060b16 60%);
}
.edu-style-immersive .stage-kicker {
    background: color-mix(in srgb, var(--edu-primary) 30%, transparent);
    color: #fff;
}
.edu-style-immersive .stage-card {
    margin-top: 24px; padding: 40px 44px;
    background: var(--edu-surface);
    border: 1px solid var(--edu-surface-border);
    border-radius: var(--edu-radius-lg);
    box-shadow: var(--edu-shadow-lg);
    backdrop-filter: blur(14px);
}
.edu-style-immersive .stage-title {
    text-shadow: 0 0 28px color-mix(in srgb, var(--edu-accent) 55%, transparent);
}
.edu-style-immersive .edu-stage-glow {
    position: absolute; left: 50%; top: -220px; width: 900px; height: 460px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--edu-primary) 42%, transparent), transparent 70%);
    filter: blur(28px); z-index: 1;
}

/* ------------------------- 3.3 卡片课件 card ------------------------------ */
.edu-style-card .stage-inner { text-align: left; }
.edu-style-card .stage-card {
    margin-top: 22px; padding: 30px 34px;
    background: var(--edu-surface);
    border: 1px solid var(--edu-surface-border);
    border-radius: 26px;
    box-shadow: 0 18px 40px color-mix(in srgb, var(--edu-primary) 14%, transparent);
    position: relative;
    overflow: hidden;
}
.edu-style-card .stage-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
    background: linear-gradient(90deg, var(--edu-primary), var(--edu-accent));
}
.edu-style-card .stage-body > p {
    background: color-mix(in srgb, var(--edu-primary) 5%, transparent);
    border-radius: 18px; padding: 16px 20px; margin: 0 0 14px;
}
.edu-style-card .stage-body > ul, .edu-style-card .stage-body > ol {
    background: color-mix(in srgb, var(--edu-accent) 8%, transparent);
    border-radius: 18px; padding: 16px 20px 16px 42px; margin: 0 0 14px;
}

/* ------------------------- 3.4 手账笔记 notebook -------------------------- */
.edu-style-notebook {
    --edu-title-font: "STKaiti", "KaiTi", "Kaiti SC", "Noto Serif SC", serif;
    --edu-title-weight: 800;
    --edu-radius-lg: 14px;
    --edu-radius-sm: 10px;
    background-color: var(--edu-bg);
    background-image:
        repeating-linear-gradient(to bottom, transparent 0 42px, color-mix(in srgb, var(--edu-primary) 14%, transparent) 42px 43px),
        radial-gradient(circle at 22px 22px, color-mix(in srgb, var(--edu-primary) 12%, transparent) 0 2px, transparent 2px);
    background-size: 100% 43px, 44px 43px;
}
.edu-style-notebook .stage-title {
    display: inline-block;
    padding-bottom: 6px;
    border-bottom: 4px double color-mix(in srgb, var(--edu-primary) 55%, transparent);
}
.edu-style-notebook .stage-card {
    margin-top: 22px; padding: 30px 34px;
    background: color-mix(in srgb, #ffffff 82%, var(--edu-bg2));
    border: 2px dashed color-mix(in srgb, var(--edu-primary) 38%, transparent);
    border-radius: var(--edu-radius-lg);
    box-shadow: 6px 8px 0 color-mix(in srgb, var(--edu-primary) 12%, transparent);
    transform: rotate(-.35deg);
}
.edu-style-notebook .stage-body { line-height: 2.15; }
.edu-style-notebook .stage-body blockquote { border-left-style: dotted; border-left-width: 5px; }

/* ------------------------- 3.5 极简学术 minimal --------------------------- */
.edu-style-minimal {
    --edu-radius-lg: 4px;
    --edu-radius-sm: 4px;
    --edu-shadow-lg: none;
    --edu-surface: transparent;
    --edu-surface-border: color-mix(in srgb, var(--edu-text) 18%, transparent);
    --edu-letter: -.01em;
    background: #fff;
}
.edu-style-minimal .stage-title {
    font-weight: 700;
    padding-bottom: 14px;
    border-bottom: 2px solid color-mix(in srgb, var(--edu-text) 82%, transparent);
}
.edu-style-minimal .stage-card { margin-top: 26px; padding: 6px 0 0; }
.edu-style-minimal .stage-body { font-size: clamp(1.02rem, 1.3vw, 1.16rem); line-height: 2.05; }
.edu-style-minimal .stage-kicker {
    background: transparent; color: var(--edu-muted); padding-left: 0;
    border-radius: 0; letter-spacing: .22em; text-transform: uppercase;
    border-bottom: 1px solid color-mix(in srgb, var(--edu-text) 22%, transparent);
}
.edu-style-minimal .edu-stage-deco { display: none; }

/* ------------------------- 3.6 聚光讲堂 focus ----------------------------- */
.edu-style-focus .stage-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 34px; align-items: start; }
.edu-style-focus .stage-card { text-align: left; }
.edu-style-focus .stage-title {
    font-size: clamp(1.8rem, 3.4vw, 2.9rem);
    border-left: 8px solid var(--edu-primary);
    padding-left: 18px;
    margin-bottom: 18px;
}
.edu-style-focus .stage-kicker { margin-left: 20px; }
.edu-style-focus .stage-panel {
    padding: 30px 34px;
    background: var(--edu-surface);
    border: 1px solid var(--edu-surface-border);
    border-radius: var(--edu-radius-lg);
    box-shadow: var(--edu-shadow-lg);
}
.edu-style-focus .edu-stage-deco {
    position: absolute; right: -120px; bottom: -120px; width: 430px; height: 430px;
    border-radius: 42% 58% 60% 40% / 45% 40% 60% 55%;
    background: linear-gradient(135deg, color-mix(in srgb, var(--edu-primary) 32%, transparent), transparent 72%);
    z-index: 1;
}
@media (max-width: 991.98px) {
    .edu-style-focus .stage-inner { grid-template-columns: 1fr; }
    .edu-stage { padding: 26px 18px 96px; }
    .edu-style-classic .stage-card,
    .edu-style-card .stage-card,
    .edu-style-notebook .stage-card,
    .edu-style-immersive .stage-card { padding: 22px 20px; }
}

/* =============================================================================
   4. 主题选择器（教师端 / 管理端预览用）
   ============================================================================= */
.theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.theme-option {
    position: relative; cursor: pointer; border: 2px solid var(--edu-border, #e6ecf5);
    border-radius: 14px; padding: 12px; background: #fff; transition: all .18s ease;
}
.theme-option:hover { border-color: #c7d8f5; transform: translateY(-2px); }
.theme-option.active { border-color: var(--edu-primary, #1d6ff2); box-shadow: 0 8px 22px rgba(29, 111, 242, .16); }
.theme-option.active::after {
    content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; top: 8px; right: 10px;
    color: var(--edu-primary, #1d6ff2); font-size: 1.05rem;
}
.theme-option .t-name { font-weight: 700; font-size: .92rem; margin-bottom: 2px; }
.theme-option .t-desc { font-size: .76rem; color: #7c8aa2; line-height: 1.5; }
.theme-option .t-preview { height: 74px; border-radius: 10px; margin-bottom: 10px; overflow: hidden; position: relative; }

/* 风格缩略预览 */
.tp-classic { background: linear-gradient(160deg, #eef5ff, #dbeaff); }
.tp-classic::after { content: ""; position: absolute; left: 14px; right: 14px; top: 26px; bottom: 12px; background: #fff; border-radius: 8px; box-shadow: 0 6px 14px rgba(0, 0, 0, .08); }
.tp-classic::before { content: ""; position: absolute; left: 50%; top: 12px; width: 46px; height: 6px; margin-left: -23px; border-radius: 99px; background: #1d6ff2; z-index: 2; }

.tp-immersive { background: radial-gradient(120% 90% at 20% 0%, #24507f, #0a1120 70%); }
.tp-immersive::after { content: ""; position: absolute; left: 16px; right: 16px; top: 30px; bottom: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px; }

.tp-card { background: linear-gradient(160deg, #f1f7ff, #e2eeff); }
.tp-card::after { content: ""; position: absolute; inset: 14px 14px 12px; background: #fff; border-radius: 10px; box-shadow: 0 6px 14px rgba(29, 111, 242, .16); }
.tp-card::before { content: ""; position: absolute; left: 14px; right: 14px; top: 14px; height: 5px; border-radius: 10px 10px 0 0; background: linear-gradient(90deg, #1d6ff2, #38bdf8); z-index: 2; }

.tp-notebook { background-image: repeating-linear-gradient(to bottom, #fdf8f3 0 12px, #f0e2d2 12px 13px); background-color: #fdf8f3; }
.tp-notebook::after { content: ""; position: absolute; inset: 12px; border: 2px dashed rgba(139, 94, 52, .45); border-radius: 8px; }

.tp-minimal { background: #fff; border-bottom: 1px solid #e6ecf5; }
.tp-minimal::after { content: ""; position: absolute; left: 16px; right: 16px; top: 24px; height: 2px; background: #111827; }
.tp-minimal::before { content: ""; position: absolute; left: 16px; width: 64%; top: 38px; height: 2px; background: #cbd5e1; box-shadow: 0 10px 0 #cbd5e1, 0 20px 0 #cbd5e1; }

.tp-focus { background: linear-gradient(160deg, #f2f7ff, #e6f0ff); }
.tp-focus::after { content: ""; position: absolute; left: 14px; top: 16px; bottom: 14px; width: 4px; border-radius: 99px; background: #1d6ff2; }
.tp-focus::before { content: ""; position: absolute; right: 14px; top: 20px; bottom: 14px; left: 28px; background: #fff; border-radius: 8px; box-shadow: 0 6px 14px rgba(0, 0, 0, .07); }

/* 配色圆点 */
.color-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.color-swatch {
    width: 46px; height: 46px; border-radius: 12px; cursor: pointer; position: relative;
    border: 2px solid transparent; transition: transform .16s ease, box-shadow .16s ease;
}
.color-swatch:hover { transform: translateY(-2px) scale(1.04); }
.color-swatch.active { border-color: #0f172a; box-shadow: 0 0 0 3px rgba(15, 23, 42, .1); }
.color-swatch span {
    position: absolute; left: 0; right: 0; bottom: -20px; text-align: center;
    font-size: .7rem; color: #64748b; white-space: nowrap;
}
.color-swatch.sw-blue   { background: linear-gradient(135deg, #1d6ff2, #38bdf8); }
.color-swatch.sw-green  { background: linear-gradient(135deg, #0f9d76, #34d399); }
.color-swatch.sw-orange { background: linear-gradient(135deg, #ea7a1f, #fbbf24); }
.color-swatch.sw-purple { background: linear-gradient(135deg, #7c4dff, #c084fc); }
.color-swatch.sw-red    { background: linear-gradient(135deg, #e23a3a, #fb7185); }
.color-swatch.sw-teal   { background: linear-gradient(135deg, #0e7490, #22d3ee); }
.color-swatch.sw-indigo { background: linear-gradient(135deg, #3f51b5, #818cf8); }
.color-swatch.sw-slate  { background: linear-gradient(135deg, #475569, #94a3b8); }
.color-swatch.sw-pink   { background: linear-gradient(135deg, #db2777, #f9a8d4); }
.color-swatch.sw-brown  { background: linear-gradient(135deg, #8b5e34, #d6a06a); }