/* ==================== OpenSTD 浅色主题覆盖层 ==================== */
/* 设计意图：只在 .theme-light 作用域内改写颜色变量，保留当前工作台布局与业务脚本，后续可复用为主题切换方案。 */
.theme-light {
    --openstd-primary: #C96442;
    --openstd-primary-hover: #B75635;
    --openstd-primary-soft: rgba(201, 100, 66, 0.13);
    --openstd-secondary: #111111;
    --openstd-accent: #C96442;
    --openstd-accent-soft: rgba(17, 17, 17, 0.07);
    --openstd-action-ink: #111111;
    --openstd-progress: #C96442;
    --openstd-progress-hover: #B75635;
    --openstd-warning: #A06A1E;
    --openstd-warning-soft: rgba(160, 106, 30, 0.13);
    --openstd-danger: #A23D2E;
    --openstd-danger-soft: rgba(162, 61, 46, 0.12);
    --openstd-bg: #FAF9F5;
    --openstd-warm: #2E2A25;
    --openstd-panel: #F0EEE6;
    --openstd-panel-soft: #F7F5EE;
    --openstd-surface: rgba(255, 255, 252, 0.88);
    --openstd-surface-raised: rgba(255, 255, 252, 0.96);
    --openstd-button-bg: rgba(17, 17, 17, 0.04);
    --openstd-heading: #15120F;
    --openstd-body: rgba(21, 18, 15, 0.88);
    --openstd-helper: rgba(21, 18, 15, 0.68);
    --openstd-subtle: rgba(21, 18, 15, 0.50);
    --openstd-placeholder: rgba(21, 18, 15, 0.44);
    --openstd-ink: #15120F;
    --openstd-text: rgba(21, 18, 15, 0.86);
    --openstd-muted: rgba(21, 18, 15, 0.58);
    --openstd-border: rgba(17, 17, 17, 0.14);
    --openstd-soft-border: rgba(17, 17, 17, 0.09);
    --openstd-shadow: 0 24px 58px rgba(46, 42, 37, 0.14);
    --openstd-soft-shadow: 0 14px 34px rgba(46, 42, 37, 0.10);
    --openstd-focus: 0 0 0 4px rgba(201, 100, 66, 0.18);
}

body.theme-light {
    background:
        radial-gradient(circle at 18% 86%, rgba(201, 100, 66, 0.06), transparent 30%),
        #FAF9F5;
    color: var(--openstd-body);
}

/* 设计意图：浅色主题取消工程方格和上方红色光晕，保留底部环境光维持页面纵深。 */
.theme-light.app-root {
    background:
        radial-gradient(circle at 18% 82%, rgba(201, 100, 66, 0.07), transparent 28%),
        #FAF9F5;
}

.theme-light main.app-main-shell {
    background: #FAF9F5 !important;
}

/* 设计意图：首屏背景由主容器统一绘制，让 canvas 动效、纸面纹理和底部输入区处在同一张视觉底图里。 */
.theme-light main.app-main-shell.is-chat-active::before {
    background:
        radial-gradient(circle at 72% 72%, rgba(201, 100, 66, 0.09), transparent 34%),
        radial-gradient(circle at 18% 68%, rgba(201, 100, 66, 0.055), transparent 28%),
        linear-gradient(180deg, #FAF9F5 0%, #F0EEE6 58%, #FAF9F5 100%);
    background-size: auto, auto, auto;
}

.theme-light #chatContainer.app-chat-canvas {
    background: transparent !important;
}

.theme-light .app-topbar {
    background: rgba(250, 249, 245, 0.88) !important;
    border-color: var(--openstd-soft-border) !important;
    color: var(--openstd-heading);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.theme-light .sidebar {
    background: linear-gradient(180deg, rgba(240, 238, 230, 0.94), rgba(250, 249, 245, 0.90));
    border-right-color: var(--openstd-soft-border);
    box-shadow: 10px 0 28px rgba(46, 42, 37, 0.08);
}

.theme-light .sidebar-brand-mark {
    /* 设计意图：浅色主题的品牌标识回到纸面底色，用陶土色 OS 呼应主按钮和选中态，避免左上角形成过重黑块。 */
    background: #FAF9F5;
    color: #C96442;
    border-color: rgba(201, 100, 66, 0.24);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 8px 18px rgba(201, 100, 66, 0.12);
}

.theme-light .sidebar-toggle-button {
    border-color: rgba(17, 17, 17, 0.10);
    background: rgba(255, 255, 252, 0.76);
    color: rgba(17, 17, 17, 0.62);
}

.theme-light .sidebar-toggle-button:hover {
    border-color: rgba(201, 100, 66, 0.25);
    background: rgba(201, 100, 66, 0.10);
    color: #C96442;
    box-shadow: 0 8px 18px rgba(201, 100, 66, 0.12);
}

.theme-light .sidebar-brand-toggle-icon {
    /* 中文注释：浅色收起态沿用纸面底色，让商标 hover 变成开关时不会突然出现深色块。 */
    border-color: rgba(201, 100, 66, 0.20);
    background: #F0EEE6;
    color: #111111;
}

.theme-light .sidebar-item {
    color: var(--openstd-helper);
}

.theme-light .sidebar-item:hover {
    background: rgba(255, 255, 252, 0.72);
    border-color: rgba(201, 100, 66, 0.20);
    color: var(--openstd-heading);
}

.theme-light .sidebar-item.active {
    background: rgba(201, 100, 66, 0.11);
    border-color: rgba(201, 100, 66, 0.24);
    color: #C96442;
    box-shadow: inset 3px 0 0 #C96442, 0 12px 24px rgba(201, 100, 66, 0.10);
}

.theme-light .glass-panel,
.theme-light .status-card,
.theme-light .chat-input-wrapper,
.theme-light .chat-input-dock,
.theme-light .knowledge-panel,
.theme-light .knowledge-workspace {
    background: var(--openstd-surface);
    border-color: var(--openstd-soft-border);
    box-shadow: var(--openstd-soft-shadow);
}

.theme-light .welcome-main-panel {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* 设计意图：欢迎标题上方短横在浅色主题中已经变成陶土色，光晕也要同步改为砖红，避免继承深色主题的绿色霓虹。 */
.theme-light #welcomeScreen.welcome-screen::before {
    box-shadow: 0 0 22px rgba(201, 100, 66, 0.42);
}

.theme-light .welcome-card {
    background: rgba(255, 255, 252, 0.72);
    border-color: rgba(17, 17, 17, 0.10);
    box-shadow: 0 16px 38px rgba(46, 42, 37, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.theme-light .welcome-card:hover {
    border-color: rgba(201, 100, 66, 0.34);
    box-shadow: 0 20px 42px rgba(201, 100, 66, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

.theme-light .welcome-eyebrow,
.theme-light .welcome-card-icon,
.theme-light .tag-gh {
    color: #C96442;
}

/* 设计意图：深色主题的欢迎卡片图标带有绿色/青色识别色，浅色主题统一收束到陶土色，避免首屏出现杂色光晕。 */
.theme-light .welcome-card-icon,
.theme-light .welcome-card:nth-child(2) .welcome-card-icon,
.theme-light .welcome-card:nth-child(3) .welcome-card-icon,
.theme-light .welcome-card:nth-child(4) .welcome-card-icon {
    background: rgba(201, 100, 66, 0.10);
    box-shadow: inset 0 0 0 1px rgba(201, 100, 66, 0.20);
    color: #C96442;
}

.theme-light .welcome-title,
.theme-light .welcome-card-title,
.theme-light h1,
.theme-light h2,
.theme-light h3 {
    color: var(--openstd-heading);
}

.theme-light .welcome-subtitle,
.theme-light .welcome-card-text,
.theme-light p,
.theme-light label {
    color: var(--openstd-helper);
}

/* 设计意图：主按钮使用陶土色承载明确行动，次级按钮使用黑色线性按钮，符合后续主题变量拆分的语义。 */
.theme-light .btn-gh {
    background: rgba(17, 17, 17, 0.035);
    border-color: rgba(17, 17, 17, 0.13);
    color: #111111;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 10px 22px rgba(46, 42, 37, 0.08);
}

.theme-light .btn-gh:not(.btn-gh-primary) {
    background: rgba(17, 17, 17, 0.035);
    border-color: rgba(17, 17, 17, 0.14);
    color: #111111;
}

.theme-light .btn-gh:hover,
.theme-light .btn-gh:not(.btn-gh-primary):hover {
    background: rgba(17, 17, 17, 0.07);
    border-color: rgba(17, 17, 17, 0.24);
    color: #111111;
    box-shadow: 0 12px 24px rgba(46, 42, 37, 0.12);
}

.theme-light .btn-gh-primary {
    background: #C96442;
    border-color: #C96442;
    color: #FAF9F5;
    box-shadow: 0 14px 28px rgba(201, 100, 66, 0.22);
}

.theme-light .btn-gh-primary:hover {
    background: #B75635;
    border-color: #B75635;
    color: #FAF9F5;
    box-shadow: 0 16px 32px rgba(201, 100, 66, 0.28);
}

.theme-light .app-icon-button {
    background: rgba(255, 255, 252, 0.78);
    border-color: var(--openstd-soft-border);
    color: var(--openstd-helper);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.theme-light .app-icon-button:hover {
    background: var(--openstd-primary-soft);
    border-color: rgba(201, 100, 66, 0.28);
    color: #C96442;
}

.theme-light .chat-new-session-button {
    border-color: rgba(201, 100, 66, 0.35);
    background: rgba(201, 100, 66, 0.12);
}

.theme-light .chat-new-session-button:hover {
    border-color: #C96442;
    background: rgba(201, 100, 66, 0.16);
}

.theme-light input,
.theme-light textarea,
.theme-light select {
    background: rgba(255, 255, 252, 0.88);
    border-color: var(--openstd-soft-border);
    color: var(--openstd-heading);
}

.theme-light input::placeholder,
.theme-light textarea::placeholder {
    color: var(--openstd-placeholder);
}

.theme-light .layout-input-area {
    background: transparent !important;
    border-top-color: transparent !important;
}

/* 设计意图：输入框、工具按钮和快捷动作共享一个轻量纸面容器，让首屏从上到下像一块完整工作区，而不是上下两个独立浮层。 */
.theme-light .chat-input-dock {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.theme-light .chat-input-dock .input-container {
    background: var(--openstd-surface-raised);
    border: 1px solid var(--openstd-soft-border);
    border-radius: 8px;
    box-shadow: var(--openstd-soft-shadow);
    padding: 10px;
}

.theme-light .chat-input-wrapper {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.theme-light .chat-input-wrapper:focus-within {
    border-color: #C96442;
    box-shadow: 0 0 0 4px rgba(201, 100, 66, 0.18);
}

.theme-light .chat-input-dock .input-container > .flex.justify-center {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(17, 17, 17, 0.08);
}

.theme-light .chat-message-bubble-user {
    background: #C96442;
    color: #FAF9F5;
}

.theme-light .chat-message-bubble-user .md-content,
.theme-light .chat-message-bubble-user .markdown-body {
    color: #FAF9F5;
}

.theme-light .chat-message-bubble-user .md-content code,
.theme-light .chat-message-bubble-user .markdown-body code {
    color: #FAF9F5;
    background: rgba(255, 255, 255, 0.15);
}

.theme-light .chat-message-bubble-ai {
    background: #C96442;
    color: #FAF9F5;
}

.theme-light .assistant-stream-shell,
.theme-light .assistant-plain-message {
    color: #1F2937;
    background: rgba(255, 255, 252, 0.97);
    box-shadow: 0 10px 32px rgba(46, 42, 37, 0.08);
}

/* 浅色主题：AI 回答改为正文流后，思考区域要回到低噪声的灰白信息层。 */
.theme-light .thinking-toggle {
    color: #8A8F98;
    border-bottom-color: rgba(17, 17, 17, 0.08);
}

.theme-light .thinking-toggle-left i {
    color: #8A8F98;
}

.theme-light .thinking-chevron {
    color: #A3AAB4;
}

.theme-light .thinking-panel {
    background: #F7F7F5;
    border-left-color: rgba(17, 17, 17, 0.08);
}

.theme-light .thinking-panel .md-content,
.theme-light .thinking-content .markdown-body.markdown-output {
    color: #8A8F98;
}

.theme-light .answer-panel {
    border-top-color: rgba(17, 17, 17, 0.08);
}

.theme-light .answer-toolbar-label {
    color: #8A8F98;
}

.theme-light .answer-action {
    border-color: rgba(17, 17, 17, 0.10);
    background: transparent;
    color: #8A8F98;
}

.theme-light .answer-action:hover {
    background: rgba(17, 17, 17, 0.05);
    border-color: rgba(17, 17, 17, 0.18);
    color: #111827;
}

.theme-light .answer-content.md-content {
    color: #1F2937;
}

.theme-light .assistant-source-summary {
    color: #8A8F98;
}

.theme-light .assistant-source-file-list {
    background: #F7F7F5;
    border-color: rgba(17, 17, 17, 0.06);
}

.theme-light .assistant-source-citation {
    color: #2D7C59;
}

.theme-light .assistant-source-citation.is-clickable:hover {
    background: rgba(45, 124, 89, 0.10);
}

.theme-light .chat-message-bubble-ai .md-content,
.theme-light .chat-message-bubble-ai .markdown-body {
    color: #FAF9F5;
}

.theme-light .chat-message-bubble-ai .md-content code,
.theme-light .chat-message-bubble-ai .markdown-body code {
    color: #FAF9F5;
    background: rgba(255, 255, 255, 0.12);
}

.theme-light .copy-toast {
    background: #C96442;
    border-color: rgba(255, 255, 255, 0.22);
    color: #FAF9F5;
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.18);
}

.theme-light .app-algorithm-backdrop {
    mix-blend-mode: normal;
}

.theme-light .app-main-shell.is-chat-active .app-algorithm-backdrop {
    opacity: 0.78;
    visibility: visible;
}

.theme-light .markdown-body,
.theme-light .md-content .markdown-body.markdown-output {
    color: var(--openstd-body);
    background: transparent;
}

/* 设计意图：AI 回答里的代码块保持纯黑，和浅色纸面形成明确边界，学生能一眼区分代码与讲解。 */
.theme-light .md-content .markdown-body.markdown-output pre,
.theme-light .md-content pre {
    background: #000 !important;
    color: #F8FAFC;
    border-color: #000;
}

.theme-light .md-content .markdown-body.markdown-output pre code,
.theme-light .md-content pre code {
    background: transparent !important;
    color: inherit;
}

.theme-light .md-content .markdown-body.markdown-output h1,
.theme-light .md-content .markdown-body.markdown-output h2,
.theme-light .md-content .markdown-body.markdown-output h3,
.theme-light .md-content .markdown-body.markdown-output strong {
    color: #111827;
}

/* 设计意图：个人中心沿用金牌教练首屏的陶土红背景层，替换深色主题残留的绿/青光晕。 */
.theme-light #personalCenter {
    background:
        radial-gradient(circle at 72% 72%, rgba(201, 100, 66, 0.09), transparent 34%),
        radial-gradient(circle at 18% 68%, rgba(201, 100, 66, 0.055), transparent 28%),
        linear-gradient(180deg, #FAF9F5 0%, #F0EEE6 58%, #FAF9F5 100%) !important;
}

.theme-light #personalCenter .bg-white {
    background: rgba(255, 255, 252, 0.78);
    border-color: rgba(201, 100, 66, 0.16);
    box-shadow: 0 16px 34px rgba(46, 42, 37, 0.08);
}

/* 设计意图：用户信息卡是个人中心的视觉锚点，用浅纸面叠加红色光晕，而不是整块砖红色，和金牌教练首屏渐变保持同源。 */
.theme-light #personalCenter .personal-profile-card {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 14%, rgba(255, 255, 252, 0.84), transparent 32%),
        radial-gradient(circle at 88% 18%, rgba(255, 190, 154, 0.56), transparent 36%),
        radial-gradient(circle at 28% 100%, rgba(201, 100, 66, 0.24), transparent 34%),
        linear-gradient(135deg, #FFF7EF 0%, #F9E0D2 46%, #D87652 100%);
    border-color: rgba(201, 100, 66, 0.24);
    color: var(--openstd-heading);
    box-shadow: 0 20px 42px rgba(201, 100, 66, 0.14);
}

.theme-light #personalCenter .personal-profile-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.32), transparent 42%, rgba(201, 100, 66, 0.12));
}

.theme-light #personalCenter .personal-profile-card > * {
    position: relative;
    z-index: 1;
}

.theme-light #personalCenter .personal-profile-card h2 {
    color: var(--openstd-heading);
}

.theme-light #personalCenter .personal-profile-card .btn-gh {
    background: rgba(255, 255, 252, 0.62);
    border-color: rgba(201, 100, 66, 0.24);
    color: var(--openstd-heading);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.theme-light #personalCenter .personal-profile-card .btn-gh:hover {
    background: rgba(255, 255, 252, 0.78);
    border-color: rgba(201, 100, 66, 0.36);
    color: #C96442;
}

.theme-light #personalCenter .personal-profile-card .rounded-full {
    border-color: rgba(255, 255, 255, 0.56);
    box-shadow: 0 12px 26px rgba(78, 34, 20, 0.20);
}

/* 设计意图：个人中心头部标签直接铺在红色胶囊背景上，浅色主题需要白色文字保证头像卡信息可读。 */
.theme-light #personalCenter .tag-gh {
    color: #FAF9F5;
    background: linear-gradient(90deg, #C96442, #B75635);
    border-color: rgba(201, 100, 66, 0.48);
    box-shadow: 0 8px 18px rgba(201, 100, 66, 0.16);
}

.theme-light #personalCenter .personal-profile-card .tag-gh {
    background: linear-gradient(90deg, #C96442, #B75635);
    border-color: rgba(201, 100, 66, 0.38);
    color: #FAF9F5;
    box-shadow: 0 8px 18px rgba(201, 100, 66, 0.14);
}

/* 设计意图：设置弹窗在浅色主题中沿用陶土红纸面，而不是继承深色主题的绿光和黑底。 */
.theme-light .personal-settings-backdrop {
    background: rgba(46, 42, 37, 0.24);
}

.theme-light .personal-settings-panel {
    background:
        radial-gradient(circle at 86% 12%, rgba(255, 190, 154, 0.34), transparent 34%),
        rgba(255, 255, 252, 0.94);
    border-color: rgba(201, 100, 66, 0.18);
    box-shadow: 0 28px 70px rgba(46, 42, 37, 0.16);
}

.theme-light .personal-settings-head {
    border-bottom-color: rgba(201, 100, 66, 0.14);
}

.theme-light .personal-settings-head p,
.theme-light .personal-settings-message.is-success,
.theme-light .personal-avatar-option.is-selected {
    color: #C96442;
}

.theme-light .personal-settings-field label,
.theme-light .personal-settings-field > span {
    color: rgba(46, 42, 37, 0.68);
}

.theme-light .personal-settings-field input {
    background: rgba(255, 255, 252, 0.78);
    border-color: rgba(201, 100, 66, 0.18);
    color: var(--openstd-heading);
}

.theme-light .personal-settings-field input:focus {
    border-color: #C96442;
    box-shadow: 0 0 0 3px rgba(201, 100, 66, 0.13);
    background: #FFFDFC;
}

.theme-light .personal-avatar-option {
    background: rgba(255, 255, 252, 0.70);
    border-color: rgba(201, 100, 66, 0.13);
    color: rgba(46, 42, 37, 0.62);
}

.theme-light .personal-avatar-option:hover,
.theme-light .personal-avatar-option.is-selected {
    border-color: #C96442;
    background: rgba(201, 100, 66, 0.09);
    box-shadow: inset 0 0 0 1px rgba(201, 100, 66, 0.18);
}

.theme-light .personal-settings-message.is-error {
    background: rgba(198, 57, 39, 0.10);
    color: #B93224;
}

.theme-light .personal-settings-message.is-success {
    background: rgba(201, 100, 66, 0.10);
}

/* 设计意图：学习画像属于个人中心核心数据面板，渐变和进度都回到浅色主题的红色系。 */
.theme-light .student-assessment-panel {
    background:
        radial-gradient(circle at 72% 18%, rgba(201, 100, 66, 0.10), transparent 34%),
        radial-gradient(circle at 18% 82%, rgba(201, 100, 66, 0.07), transparent 30%),
        rgba(255, 255, 252, 0.76);
    border-color: rgba(201, 100, 66, 0.16);
    box-shadow: 0 18px 40px rgba(46, 42, 37, 0.10);
}

.theme-light .student-assessment-stage,
.theme-light .student-assessment-metrics div,
.theme-light .student-assessment-section {
    background: rgba(255, 255, 252, 0.70);
    border-color: rgba(201, 100, 66, 0.14);
}

.theme-light .student-assessment-progress {
    background: rgba(201, 100, 66, 0.10);
}

.theme-light .student-assessment-progress span {
    background: linear-gradient(90deg, #C96442, #B75635);
}

.theme-light .student-assessment-practice-record-card,
.theme-light .student-assessment-practice-stats div,
.theme-light .student-assessment-problem-card {
    background: rgba(255, 255, 252, 0.66);
    border-color: rgba(201, 100, 66, 0.13);
}

.theme-light .student-assessment-heatmap-cell {
    background: rgba(201, 100, 66, 0.08);
    border-color: rgba(201, 100, 66, 0.08);
}

.theme-light .student-assessment-heatmap-cell.level-1 {
    background: rgba(201, 100, 66, 0.22);
}

.theme-light .student-assessment-heatmap-cell.level-2 {
    background: rgba(201, 100, 66, 0.38);
}

.theme-light .student-assessment-heatmap-cell.level-3 {
    background: rgba(201, 100, 66, 0.58);
}

.theme-light .student-assessment-heatmap-cell.level-4 {
    background: #C96442;
}

.theme-light .student-assessment-problem-card p span {
    background: rgba(201, 100, 66, 0.13);
    color: #C96442;
}

/* 设计意图：资源中心从旧的蓝绿大背景切换为浅色主题同源的陶土色渐变，保持页面之间的主题连续性。 */
.theme-light #resourceCenter {
    background:
        radial-gradient(circle at 14% 8%, rgba(201, 100, 66, 0.14), transparent 28%),
        radial-gradient(circle at 88% 16%, rgba(201, 100, 66, 0.10), transparent 32%),
        linear-gradient(180deg, #FAF9F5 0%, #F0EEE6 100%) !important;
}

/* 设计意图：训练营承载密集题目浏览，浅色主题需要去掉旧黑色题板，让卡片在纸面背景上更容易连续扫描。 */
.theme-light #trainingCamp {
    background:
        radial-gradient(circle at 82% 14%, rgba(201, 100, 66, 0.11), transparent 32%),
        radial-gradient(circle at 18% 86%, rgba(201, 100, 66, 0.07), transparent 28%),
        #FAF9F5 !important;
}

.theme-light .training-camp-hero,
.theme-light .training-camp-filter-panel {
    background: rgba(255, 255, 252, 0.78);
    border-color: var(--openstd-soft-border);
    box-shadow: var(--openstd-soft-shadow);
}

.theme-light .training-camp-board {
    background: rgba(255, 255, 252, 0.72);
    border-color: rgba(201, 100, 66, 0.18);
    box-shadow: 0 18px 44px rgba(46, 42, 37, 0.10);
}

.theme-light .training-camp-problem-card {
    background: rgba(240, 238, 230, 0.62);
    border-color: rgba(17, 17, 17, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.theme-light .training-camp-problem-card:hover,
.theme-light .training-camp-problem-card:focus-within {
    background: rgba(255, 255, 252, 0.88);
    border-color: rgba(201, 100, 66, 0.36);
    box-shadow: 0 16px 34px rgba(201, 100, 66, 0.14);
}

.theme-light .training-camp-filter-form input,
.theme-light .training-camp-filter-form select {
    background: rgba(255, 255, 252, 0.92);
    color: var(--openstd-heading);
}

.theme-light .training-camp-active-filter-row .tag-gh,
.theme-light .training-camp-page-button.is-active {
    background: #C96442;
    border-color: #C96442;
    color: #FAF9F5;
    box-shadow: 0 10px 22px rgba(201, 100, 66, 0.18);
}

.theme-light .training-camp-difficulty-beginner,
.theme-light .training-camp-difficulty-easy,
.theme-light .training-camp-difficulty-medium {
    background: rgba(201, 100, 66, 0.10);
    color: #C96442;
}

/* 设计意图：浅色知识图谱复用金牌教练背景，不再额外绘制图谱专属底色。 */
.theme-light .knowledge-graph-page,
.theme-light #knowledgeGraphPage {
    --kg-panel: rgba(255, 255, 252, 0.82);
    --kg-panel-strong: rgba(255, 255, 252, 0.94);
    --kg-line: rgba(201, 100, 66, 0.28);
    background: transparent !important;
}

.theme-light .knowledge-graph-atmosphere::before,
.theme-light .knowledge-graph-atmosphere::after {
    background:
        radial-gradient(circle at 14% 22%, rgba(201, 100, 66, 0.18) 0 1px, transparent 1.9px),
        radial-gradient(circle at 61% 16%, rgba(201, 100, 66, 0.14) 0 1px, transparent 1.8px),
        radial-gradient(circle at 78% 68%, rgba(201, 100, 66, 0.12) 0 1.2px, transparent 2px),
        radial-gradient(circle at 32% 76%, rgba(46, 42, 37, 0.10) 0 1px, transparent 1.8px);
}

.theme-light .knowledge-graph-meteor {
    display: none;
    background: linear-gradient(90deg, rgba(250, 249, 245, 0), rgba(201, 100, 66, 0.52), rgba(250, 249, 245, 0));
    box-shadow: 0 0 16px rgba(201, 100, 66, 0.20);
}

/* 设计意图：知识库是文件管理工作区，浅色主题需要在空白后景里加入陶土色层次，让文件卡片不再漂在纯白画布上。 */
.theme-light #knowledgeBase,
.theme-light .knowledge-workspace {
    background:
        radial-gradient(circle at 78% 12%, rgba(201, 100, 66, 0.13), transparent 28%),
        radial-gradient(circle at 22% 82%, rgba(201, 100, 66, 0.07), transparent 30%),
        linear-gradient(180deg, #FAF9F5 0%, #F0EEE6 100%) !important;
}

.theme-light .knowledge-card,
.theme-light .knowledge-card:hover,
.theme-light .knowledge-card.active {
    background: rgba(255, 255, 252, 0.78);
    border-color: rgba(201, 100, 66, 0.16);
    box-shadow: 0 16px 34px rgba(46, 42, 37, 0.08);
}

.theme-light .knowledge-card:hover,
.theme-light .knowledge-card.active {
    border-color: rgba(201, 100, 66, 0.34);
    box-shadow: 0 18px 38px rgba(201, 100, 66, 0.14);
}

/* 设计意图：知识图谱的操作控件服务于浅色画布，按钮和状态卡改成轻量纸面，避免黑色浮层打断阅读。 */
.theme-light .knowledge-graph-toolbar button,
.theme-light .knowledge-graph-drawer-close {
    background: rgba(255, 255, 252, 0.88);
    border-color: rgba(201, 100, 66, 0.22);
    color: #C96442;
    box-shadow: 0 12px 26px rgba(46, 42, 37, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.theme-light .knowledge-graph-toolbar button:hover,
.theme-light .knowledge-graph-drawer-close:hover {
    background: rgba(201, 100, 66, 0.12);
    border-color: rgba(201, 100, 66, 0.36);
    color: #B75635;
    box-shadow: 0 14px 28px rgba(201, 100, 66, 0.14);
}

.theme-light .knowledge-graph-status-pill,
.theme-light .knowledge-graph-status-pill.emphasis {
    background: rgba(255, 255, 252, 0.84);
    border-color: rgba(201, 100, 66, 0.18);
    box-shadow: 0 12px 28px rgba(46, 42, 37, 0.10);
}

.theme-light .knowledge-graph-level-chip {
    background: rgba(255, 255, 252, 0.86);
    border-color: rgba(17, 17, 17, 0.10);
    color: var(--openstd-helper);
    box-shadow: 0 8px 18px rgba(46, 42, 37, 0.08);
}

.theme-light .knowledge-graph-level-chip:hover,
.theme-light .knowledge-graph-level-chip.is-active {
    background: rgba(201, 100, 66, 0.12);
    border-color: rgba(201, 100, 66, 0.32);
    color: #C96442;
    box-shadow: 0 10px 22px rgba(201, 100, 66, 0.14);
}

/* 设计意图：右侧题目抽屉跟随浅色主题变成可阅读的侧边纸面，而不是压在画布上的黑色遮罩。 */
.theme-light .knowledge-graph-sidebar {
    background:
        radial-gradient(circle at 18% 12%, rgba(201, 100, 66, 0.10), transparent 30%),
        linear-gradient(180deg, rgba(250, 249, 245, 0.97) 0%, #F0EEE6 100%);
    border-color: rgba(201, 100, 66, 0.18);
    box-shadow: -12px 18px 38px rgba(46, 42, 37, 0.14);
}

.theme-light .knowledge-graph-focus-header {
    border-bottom-color: rgba(201, 100, 66, 0.14);
    background:
        linear-gradient(180deg, rgba(255, 255, 252, 0.76), rgba(255, 248, 234, 0.58)),
        rgba(255, 255, 252, 0.82);
}

.theme-light .knowledge-graph-sidebar .knowledge-graph-focus-card {
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.theme-light .knowledge-graph-focus-stat,
.theme-light .knowledge-graph-problem-item,
.theme-light .knowledge-graph-teacher-recommendation {
    background: rgba(255, 255, 252, 0.78);
    border-color: rgba(201, 100, 66, 0.16);
}

.theme-light .knowledge-graph-progress-shell {
    background: rgba(255, 255, 252, 0.80);
    border-color: rgba(201, 100, 66, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 12px 26px rgba(46, 42, 37, 0.08);
}

.theme-light .knowledge-graph-progress-meta strong {
    color: #C96442;
}

.theme-light .knowledge-graph-problem-item:hover,
.theme-light .knowledge-graph-problem-item:focus-visible {
    background: rgba(255, 255, 252, 0.94);
    border-color: rgba(201, 100, 66, 0.34);
}

.theme-light .knowledge-graph-progress-bar {
    background: rgba(201, 100, 66, 0.12);
}

.theme-light .knowledge-graph-chip {
    background: rgba(255, 255, 252, 0.72);
    border-color: rgba(201, 100, 66, 0.16);
    color: var(--openstd-helper);
}

/* ==================== 题目详情页 / 管理页通用浅色覆盖 ==================== */
/* 设计意图：problem.html、admin-control-panel.html、training-camp-admin.html 均使用
   .topbar 类而非主应用的 .app-topbar，需单独提供浅色毛玻璃顶栏样式。 */

.theme-light .topbar {
    background: rgba(250, 249, 245, 0.88) !important;
    border-color: rgba(17, 17, 17, 0.09) !important;
    color: rgba(21, 18, 15, 0.86);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* ==================== problem.html 题目详情页浅色组件覆盖 ==================== */
/* 设计意图：代码块、编辑器舞台、控制台输出等硬编码深色表面统一替换为暖白纸面，
   标签色系从绿色/青色/金色迁移到陶土色系，AI 评审浮层适配浅色背景。 */

/* markdown 代码块底色从 #080A0A 切换为暖白 */
.theme-light .markdown pre,
.theme-light .markdown code,
.theme-light .sample-box pre,
.theme-light #consoleOutput {
    background: rgba(240, 238, 230, 0.72) !important;
}
.theme-light .markdown pre {
    color: rgba(21, 18, 15, 0.86);
}
.theme-light .markdown code {
    background: rgba(201, 100, 66, 0.07) !important;
    color: #B75635;
}
.theme-light .markdown pre code {
    background: transparent !important;
    color: inherit;
}

/* 输入输出样例卡片 */
.theme-light .sample-box {
    background: rgba(240, 238, 230, 0.72) !important;
}
.theme-light .sample-box header {
    background: rgba(240, 238, 230, 0.86);
    color: #C96442;
    border-bottom-color: rgba(201, 100, 66, 0.18);
}
.theme-light .sample-box pre {
    background: transparent;
    color: rgba(21, 18, 15, 0.86);
}

/* 编辑器舞台和加载遮罩 */
.theme-light .editor-stage,
.theme-light #loading {
    background: rgba(240, 238, 230, 0.72) !important;
}
.theme-light .editor-stage {
    border-color: rgba(201, 100, 66, 0.22);
}

/* 控制台输出和自定义输入 */
.theme-light #consoleOutput {
    color: rgba(21, 18, 15, 0.86);
}
.theme-light #customInput {
    background: rgba(240, 238, 230, 0.72);
    color: rgba(21, 18, 15, 0.86);
}
.theme-light #customInput::placeholder {
    color: rgba(21, 18, 15, 0.44);
}
.theme-light #customInput:focus {
    outline-color: rgba(201, 100, 66, 0.18);
    border-color: #C96442;
}

/* 运行结果中的代码输出 */
.theme-light .result-output pre {
    background: rgba(240, 238, 230, 0.72);
    color: rgba(21, 18, 15, 0.86);
}

/* AI 可拖拽评审浮层 */
.theme-light .ai-review-panel {
    background: #F7F5EE;
    border-color: rgba(201, 100, 66, 0.18);
    box-shadow: 0 24px 64px rgba(46, 42, 37, 0.22);
}
.theme-light .ai-review-top {
    background: rgba(240, 238, 230, 0.92);
    border-bottom-color: rgba(201, 100, 66, 0.16);
    color: #C96442;
}
.theme-light .ai-chat-input-row {
    background: rgba(240, 238, 230, 0.78);
    border-top-color: rgba(17, 17, 17, 0.10);
}
.theme-light .ai-chat-input-row input {
    background: rgba(255, 255, 252, 0.88);
    color: rgba(21, 18, 15, 0.86);
}
.theme-light .ai-chat-input-row input::placeholder {
    color: rgba(21, 18, 15, 0.44);
}
.theme-light .ai-chat-input-row input:focus {
    border-color: #C96442;
}
.theme-light .ai-chat-input-row button {
    border-color: #C96442;
    background: rgba(201, 100, 66, 0.13);
    color: #C96442;
}
.theme-light .ai-chat-input-row button:hover {
    background: rgba(201, 100, 66, 0.22);
}

/* AI 对话气泡 */
.theme-light .ai-chat-bubble.assistant {
    background: rgba(201, 100, 66, 0.07);
    border-color: rgba(201, 100, 66, 0.14);
    color: rgba(21, 18, 15, 0.86);
}
.theme-light .ai-chat-bubble.user {
    background: rgba(201, 100, 66, 0.13);
    border-color: rgba(201, 100, 66, 0.28);
    color: rgba(21, 18, 15, 0.86);
}

/* 标签：diff/src/meta 从绿/青/金切换到陶土色系 */
.theme-light .tag.diff {
    background: rgba(201, 100, 66, 0.12);
    color: #C96442;
    border-color: rgba(201, 100, 66, 0.28);
}
.theme-light .tag.src {
    background: rgba(201, 100, 66, 0.08);
    color: #B75635;
    border-color: rgba(201, 100, 66, 0.22);
}
.theme-light .tag.meta {
    background: rgba(201, 100, 66, 0.06);
    color: rgba(21, 18, 15, 0.58);
    border-color: rgba(201, 100, 66, 0.14);
}

/* 面板分隔拖拽条 */
.theme-light .divider {
    background: linear-gradient(180deg, #F0EEE6, #FAF9F5);
    border-color: rgba(201, 100, 66, 0.14);
}
.theme-light .divider::before {
    background: rgba(201, 100, 66, 0.72);
}

/* 结果状态芯片 */
.theme-light .result-chip {
    background: rgba(201, 100, 66, 0.12);
    color: #C96442;
}

/* 卡片和面板底色 */
.theme-light .card {
    background: rgba(240, 238, 230, 0.86);
}
.theme-light .summary {
    background: rgba(240, 238, 230, 0.92);
}
.theme-light .sample-card,
.theme-light .sample-box,
.theme-light .editor-card {
    background: rgba(240, 238, 230, 0.78);
}
.theme-light .sample-card h3,
.theme-light .console-head h3 {
    color: #C96442;
}

/* ==================== 管理页通用浅色组件覆盖 ==================== */
/* 设计意图：admin-control-panel.html 和 training-camp-admin.html 共享按钮、输入框、
   表格、模态弹窗等组件，统一切换为纸面质感和陶土品牌色。 */

/* 按钮系统 */
.theme-light .btn {
    background: rgba(255, 255, 252, 0.78);
    color: rgba(21, 18, 15, 0.86);
}
.theme-light .btn-primary {
    background: #C96442;
    border-color: #C96442;
    color: #FAF9F5;
    font-weight: 700;
}
.theme-light .btn-primary:hover {
    background: #B75635;
    border-color: #B75635;
    color: #FAF9F5;
}
.theme-light .btn-danger {
    border-color: rgba(162, 61, 46, 0.32);
    background: rgba(162, 61, 46, 0.08);
    color: #A23D2E;
}

/* 输入框聚焦环 */
.theme-light input:focus,
.theme-light select:focus,
.theme-light textarea:focus {
    border-color: rgba(201, 100, 66, 0.66);
    box-shadow: 0 0 0 4px rgba(201, 100, 66, 0.16);
}

/* 角色胶囊 */
.theme-light .role-admin {
    color: #C96442;
    background: rgba(201, 100, 66, 0.13);
}
.theme-light .role-teacher {
    color: #B75635;
    background: rgba(201, 100, 66, 0.08);
}

/* 通用标签 pill */
.theme-light .pill {
    background: rgba(201, 100, 66, 0.10);
    color: #C96442;
}
.theme-light .pill-secondary {
    background: rgba(21, 18, 15, 0.04);
    color: rgba(21, 18, 15, 0.58);
}

/* Markdown 导入模板区 */
.theme-light .import-template {
    background: rgba(240, 238, 230, 0.86);
    color: rgba(21, 18, 15, 0.86);
    border-color: rgba(201, 100, 66, 0.14);
}

/* 辅助面板 */
.theme-light .helper-panel,
.theme-light .sample-section {
    background: rgba(240, 238, 230, 0.56);
    border-color: rgba(201, 100, 66, 0.14);
}
.theme-light .helper-panel ul {
    color: rgba(21, 18, 15, 0.58);
}

/* 模态弹窗 */
.theme-light .modal-backdrop {
    background: rgba(46, 42, 37, 0.32);
}
.theme-light .modal-panel {
    background: #F7F5EE;
    border-color: rgba(201, 100, 66, 0.18);
    box-shadow: 0 24px 60px rgba(46, 42, 37, 0.22);
}

/* 知识点选择卡片 */
.theme-light .node-choice {
    background: rgba(255, 255, 252, 0.72);
    border-color: rgba(201, 100, 66, 0.10);
}
.theme-light .node-choice:hover {
    border-color: rgba(201, 100, 66, 0.24);
}

/* 进度条 */
.theme-light .progress-track {
    background: rgba(201, 100, 66, 0.10);
}
.theme-light .progress-bar {
    background: linear-gradient(90deg, #C96442, #B75635);
}

/* 度量卡片 */
.theme-light .metric {
    background: rgba(255, 255, 252, 0.66);
    border-color: rgba(201, 100, 66, 0.10);
}

/* 行内提示条 */
.theme-light .inline-note {
    background: rgba(240, 238, 230, 0.56);
    border-color: rgba(201, 100, 66, 0.14);
}

/* 样本序号标记 */
.theme-light .sample-index {
    color: #C96442;
    background: rgba(201, 100, 66, 0.10);
}

/* 表格头尾 */
.theme-light th {
    background: rgba(240, 238, 230, 0.66);
    color: rgba(21, 18, 15, 0.58);
}
.theme-light td {
    color: rgba(21, 18, 15, 0.86);
}
.theme-light th,
.theme-light td {
    border-bottom-color: rgba(201, 100, 66, 0.08);
}
.theme-light tr:hover td {
    background: rgba(201, 100, 66, 0.06);
}

/* 空状态占位 */
.theme-light .empty {
    border-color: rgba(201, 100, 66, 0.10);
    color: rgba(21, 18, 15, 0.44);
}

/* 状态卡片 */
.theme-light .status-card {
    background: rgba(201, 100, 66, 0.06);
}
.theme-light .status-card.error {
    border-color: rgba(162, 61, 46, 0.32);
    color: #A23D2E;
}
.theme-light .status-card.success {
    border-color: rgba(201, 100, 66, 0.32);
    color: #C96442;
}

/* panel 面板 */
.theme-light .panel {
    background: rgba(240, 238, 230, 0.72);
}

/* 通用表单控件 */
.theme-light input,
.theme-light select,
.theme-light textarea {
    background: rgba(255, 255, 252, 0.88);
    color: rgba(21, 18, 15, 0.86);
}

/* metric / status-card / sample-index / pill 共享覆盖层 */
.theme-light .metric,
.theme-light .status-card,
.theme-light .sample-index,
.theme-light .pill {
    background: rgba(201, 100, 66, 0.06);
}

/* 设计意图：浅色主题下也让知识图谱透出金牌教练背景，避免覆盖主容器的算法网络动效。 */
.theme-light .knowledge-graph-page,
.theme-light #knowledgeGraphPage {
    --kg-bg: transparent;
    --kg-bg-soft: #FAF9F5;
    --kg-panel: rgba(255, 255, 252, 0.88);
    --kg-panel-strong: rgba(255, 255, 252, 0.96);
    --kg-border: rgba(255, 255, 255, 0.72);
    --kg-border-strong: rgba(255, 225, 190, 0.78);
    --kg-text: #6c3c32;
    --kg-muted: #9b665a;
    --kg-line: rgba(255, 255, 255, 0.78);
    --kg-accent: #ffd073;
    --kg-progress: #cf6f62;
    background: transparent !important;
    color: var(--kg-text);
}

.theme-light .knowledge-graph-masthead-copy,
.theme-light .knowledge-graph-path-summary,
.theme-light .knowledge-graph-focus-card,
.theme-light .knowledge-graph-placeholder-card,
.theme-light .knowledge-graph-sidebar,
.theme-light .knowledge-graph-problem-card,
.theme-light .knowledge-graph-recommendation-card,
.theme-light .knowledge-graph-teacher-panel,
.theme-light .knowledge-graph-problem-empty {
    border-color: rgba(255, 255, 255, 0.72);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 250, 232, 0.52)),
        rgba(255, 255, 252, 0.82);
    color: #315070;
}

.theme-light .knowledge-graph-status {
    display: none;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}


.theme-light .knowledge-graph-status-pill,
.theme-light .knowledge-graph-status-pill.emphasis {
    border-color: rgba(255, 255, 255, 0.56);
    background: rgba(255, 255, 252, 0.58);
    box-shadow: 0 8px 18px rgba(123, 57, 45, 0.10);
}

.theme-light .knowledge-graph-masthead-copy h2,
.theme-light .knowledge-graph-sidebar-head h3,
.theme-light .knowledge-graph-focus-card h3,
.theme-light .knowledge-graph-placeholder-card h3,
.theme-light .knowledge-graph-problem-title {
    color: #315070;
}

.theme-light .knowledge-graph-description,
.theme-light .knowledge-graph-sidebar-head p,
.theme-light .knowledge-graph-placeholder-card p,
.theme-light .knowledge-graph-problem-meta,
.theme-light .knowledge-graph-route-step span {
    color: #6687a4;
}

.theme-light .knowledge-graph-toolbar button,
.theme-light .knowledge-graph-drawer-close {
    border-color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 252, 0.88);
    color: #315070;
}

.theme-light .knowledge-graph-toolbar button:hover,
.theme-light .knowledge-graph-drawer-close:hover {
    border-color: rgba(255, 205, 106, 0.88);
    background: #fff8d6;
}