/* ==================== 字体与基础样式 ==================== */
/* 引入Google Inter字体，定义中文字体回退序列，确保跨平台一致性 */
@import url('../vendor/google-fonts/openstd-main.css');

:root {
    --openstd-primary: #9AFC71;
    --openstd-primary-hover: #B6FF93;
    --openstd-primary-soft: rgba(154, 252, 113, 0.12);
    --openstd-secondary: #66E1D6;
    --openstd-accent: #66E1D6;
    --openstd-accent-soft: rgba(102, 225, 214, 0.12);
    --openstd-progress: #9AFC71;
    --openstd-progress-hover: #B6FF93;
    --openstd-warning: #D2A84F;
    --openstd-warning-soft: rgba(210, 168, 79, 0.14);
    --openstd-danger: #FF5C3D;
    --openstd-danger-soft: rgba(255, 92, 61, 0.14);
    --openstd-bg: #080A0A;
    --openstd-warm: #F4ECD8;
    --openstd-panel: #151A18;
    --openstd-panel-soft: #1D241F;
    --openstd-surface: rgba(21, 26, 24, 0.88);
    --openstd-surface-raised: rgba(29, 36, 31, 0.92);
    --openstd-button-bg: rgba(244, 236, 216, 0.05);
    --openstd-heading: #F4ECD8;
    --openstd-body: rgba(244, 236, 216, 0.86);
    --openstd-helper: rgba(244, 236, 216, 0.72);
    --openstd-subtle: rgba(244, 236, 216, 0.56);
    --openstd-placeholder: rgba(244, 236, 216, 0.52);
    --openstd-ink: #F4ECD8;
    --openstd-text: rgba(244, 236, 216, 0.86);
    --openstd-muted: rgba(244, 236, 216, 0.64);
    --openstd-border: rgba(244, 236, 216, 0.18);
    --openstd-soft-border: rgba(244, 236, 216, 0.12);
    --openstd-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
    --openstd-soft-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    --openstd-focus: 0 0 0 4px rgba(154, 252, 113, 0.18);
}

html, body {
    font-family: 'IBM Plex Sans', 'Microsoft YaHei', 'PingFang SC', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    background-color: var(--openstd-bg);
    color: var(--openstd-body);
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    letter-spacing: 0;
}

/* 配合HTML的flex布局，让body内容占满整个视口高度 */
body {
    display: flex;
    flex-direction: row;
}

[hidden] {
    /* 中文注释：只让显式 hidden 属性压住组件 display，避免破坏 Tailwind 的 hidden md:flex 响应式侧边栏。 */
    display: none !important;
}

/* 设计意图：用轻量学习平台视觉底座统一全站，不改变现有页面切换和业务脚本。 */
/* 设计意图：把参考介绍页的墨黑网格翻译成全站底座，让工具界面也有稳定的工程展示感。 */
.app-root {
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(90deg, rgba(244, 236, 216, 0.045) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(0deg, rgba(244, 236, 216, 0.035) 1px, transparent 1px) 0 0 / 34px 34px,
        radial-gradient(circle at 72% 18%, rgba(154, 252, 113, 0.09), transparent 34%),
        radial-gradient(circle at 18% 82%, rgba(102, 225, 214, 0.08), transparent 28%),
        var(--openstd-bg);
}

/* 设计意图：动态节点只服务呵哩伴学首页，默认收起可以避免资源中心、知识库等工作页被背景动效打断。 */
.app-algorithm-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    mix-blend-mode: screen;
    transition: opacity 220ms ease, visibility 220ms ease;
}

/* 设计意图：只有聊天页主动声明激活时才放出算法网络，让学习入口有氛围，其他页面保持各自原来的背景。 */
.app-main-shell.is-chat-active .app-algorithm-backdrop {
    opacity: 0.92;
    visibility: visible;
}

button {
    font: inherit;
}

/* ==================== 毛玻璃效果 ==================== */
/* 功能效果：半透明背景配合模糊滤镜，营造现代感UI效果 */
/* 实现原理：backdrop-filter实现背景模糊，rgba实现半透明，border实现边缘柔化 */
.glass-panel {
    background: rgba(21, 26, 24, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--openstd-soft-border);
}

/* ==================== GitHub风格按钮 ==================== */
/* 功能效果：提供统一的按钮样式，支持hover和active状态反馈 */
/* 实现原理：CSS transition实现平滑状态过渡，box-shadow实现立体感 */
.btn-gh {
    min-height: 38px;
    background: var(--openstd-button-bg);
    border: 1px solid var(--openstd-soft-border);
    box-shadow: inset 0 1px 0 rgba(244, 236, 216, 0.05), 0 12px 24px rgba(0, 0, 0, 0.20);
    transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease, transform 180ms ease;
    border-radius: 8px;
    padding: 8px 14px;
    color: var(--openstd-heading);
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.btn-gh:hover {
    background: rgba(154, 252, 113, 0.10);
    border-color: rgba(154, 252, 113, 0.70);
    color: var(--openstd-primary-hover);
    box-shadow: 0 0 28px rgba(154, 252, 113, 0.12), 0 12px 24px rgba(0, 0, 0, 0.28);
}

.btn-gh:active {
    transform: translateY(1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

.btn-gh:disabled, .btn-gh[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.56;
    box-shadow: none;
    transform: none;
}

/* 主要操作按钮：绿色主题，用于提交、确认等核心操作 */
.btn-gh-primary {
    color: #080A0A;
    background: linear-gradient(135deg, var(--openstd-progress), var(--openstd-accent));
    border-color: rgba(154, 252, 113, 0.54);
    box-shadow: 0 0 28px rgba(154, 252, 113, 0.18), 0 12px 26px rgba(0, 0, 0, 0.30);
}

.btn-gh-primary:hover {
    background: linear-gradient(135deg, var(--openstd-progress-hover), var(--openstd-secondary));
    color: #080A0A;
    box-shadow: 0 0 34px rgba(154, 252, 113, 0.24), 0 14px 30px rgba(0, 0, 0, 0.34);
}

/* 设计意图：图标按钮用统一的正方形触控面积，避免顶部栏和输入区的工具按钮大小不一。 */
.app-icon-button {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    border: 1px solid var(--openstd-soft-border);
    border-radius: 8px;
    background: var(--openstd-button-bg);
    color: var(--openstd-muted);
    box-shadow: inset 0 1px 0 rgba(244, 236, 216, 0.04);
    cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.app-icon-button:hover {
    border-color: rgba(154, 252, 113, 0.64);
    background: var(--openstd-primary-soft);
    color: var(--openstd-primary-hover);
    box-shadow: 0 0 22px rgba(154, 252, 113, 0.12);
}

.app-icon-button:active {
    transform: translateY(1px);
}

.app-icon-button.btn-gh {
    padding: 0;
}

.chat-new-session-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(154, 252, 113, 0.35);
    border-radius: 8px;
    background: rgba(154, 252, 113, 0.12);
    color: var(--openstd-heading);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.chat-new-session-button:hover {
    border-color: var(--openstd-primary);
    background: var(--openstd-primary-soft);
    transform: translateY(-1px);
}

.chat-history-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    justify-content: flex-end;
}

.chat-history-modal.hidden {
    display: none;
}

.chat-history-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 10, 0.58);
    backdrop-filter: blur(7px);
}

.chat-history-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(430px, calc(100vw - 28px));
    height: calc(100vh - 28px);
    margin: 14px;
    border: 1px solid var(--openstd-soft-border);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(244, 236, 216, 0.06), transparent 24%),
        var(--openstd-panel);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
    overflow: hidden;
}

.chat-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    border-bottom: 1px solid var(--openstd-soft-border);
}

.chat-history-head p,
.chat-history-head h2 {
    margin: 0;
}

.chat-history-head p {
    color: var(--openstd-primary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chat-history-head h2 {
    margin-top: 4px;
    color: var(--openstd-heading);
    font-size: 21px;
    font-weight: 900;
}

.chat-history-list {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    overflow-y: auto;
}

.chat-history-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    width: 100%;
    padding: 14px;
    border: 1px solid var(--openstd-soft-border);
    border-radius: 8px;
    background: rgba(244, 236, 216, 0.035);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.chat-history-item:hover,
.chat-history-item.active {
    border-color: rgba(154, 252, 113, 0.5);
    background: rgba(154, 252, 113, 0.08);
    transform: translateY(-1px);
}

.chat-history-item-title {
    display: block;
    color: var(--openstd-heading);
    font-size: 14px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-history-item-meta {
    display: block;
    margin-top: 5px;
    color: var(--openstd-muted);
    font-size: 12px;
}

.chat-history-item-count {
    align-self: start;
    border-radius: 999px;
    padding: 4px 8px;
    background: var(--openstd-button-bg);
    color: var(--openstd-primary);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.chat-history-empty {
    margin: auto 0;
    padding: 28px 18px;
    border: 1px dashed var(--openstd-soft-border);
    border-radius: 10px;
    color: var(--openstd-muted);
    text-align: center;
    line-height: 1.6;
}

.chat-history-footer {
    padding: 16px;
    border-top: 1px solid var(--openstd-soft-border);
}

.chat-history-start-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--openstd-primary);
    border-radius: 8px;
    background: var(--openstd-primary);
    color: #080A0A;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

.chat-history-start-button:hover {
    filter: brightness(1.05);
}

.app-avatar-button {
    border-color: var(--openstd-soft-border) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.app-avatar-button:hover {
    border-color: rgba(154, 252, 113, 0.64) !important;
    box-shadow: 0 0 26px rgba(154, 252, 113, 0.14), 0 12px 26px rgba(0, 0, 0, 0.30);
}

.app-avatar-button:active {
    transform: translateY(1px);
}

/* ==================== 侧边导航栏样式 ==================== */
/* 功能效果：固定左侧240px宽导航栏，包含Logo、主菜单、底部用户入口 */
/* 实现原理：flex-col纵向布局，固定宽度，高度100%覆盖视口 */
.sidebar {
    position: relative;
    z-index: 2;
    width: 240px;
    min-width: 240px;
    border-right: 1px solid var(--openstd-soft-border);
    background: linear-gradient(180deg, rgba(21, 26, 24, 0.96) 0%, rgba(16, 20, 19, 0.94) 58%, rgba(8, 10, 10, 0.98) 100%);
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: inset -1px 0 0 rgba(244, 236, 216, 0.04), 18px 0 46px rgba(0, 0, 0, 0.24);
    transition: width 180ms ease, min-width 180ms ease, box-shadow 180ms ease;
}

/* 设计意图：品牌文字使用深靛蓝，和导航正文区分层级，同时保持浅色背景上的高对比度。 */
.sidebar .tracking-tight {
    color: var(--openstd-heading);
}

.sidebar-brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    padding: 16px;
    margin-bottom: 8px;
}

.sidebar-brand-button,
.sidebar-toggle-button {
    /* 中文注释：侧边栏开关使用纯图标触点，避免文字按钮在窄栏状态下挤压导航布局。 */
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--openstd-helper);
    cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.sidebar-brand-button {
    cursor: pointer;
}

.sidebar-toggle-button {
    margin-left: auto;
    border-color: var(--openstd-soft-border);
    background: var(--openstd-button-bg);
}

.sidebar-toggle-button:hover {
    border-color: rgba(154, 252, 113, 0.58);
    background: var(--openstd-primary-soft);
    color: var(--openstd-primary-hover);
    box-shadow: 0 0 20px rgba(154, 252, 113, 0.10);
}

.sidebar-brand-text,
.sidebar-item-label,
.sidebar-section-label {
    transition: opacity 160ms ease;
}

/* 设计意图：复用介绍页原本的 OS 标识语言，让项目入口和展示页品牌保持同一套视觉记忆。 */
.sidebar-brand-mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(154, 252, 113, 0.58);
    border-radius: 8px;
    color: var(--openstd-primary);
    background: linear-gradient(135deg, rgba(154, 252, 113, 0.12), rgba(102, 225, 214, 0.08));
    box-shadow: 0 0 28px rgba(154, 252, 113, 0.14);
    font-family: 'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
}

.sidebar-brand-toggle-icon {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(244, 236, 216, 0.16);
    border-radius: 8px;
    background: var(--openstd-button-bg);
    color: var(--openstd-heading);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

/* 侧边栏菜单项：hover和active状态反馈 */
.sidebar-item {
    padding: 9px 12px;
    margin: 2px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--openstd-helper);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    min-height: 40px;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

/* 设计意图：分组标签不抢主导航注意力，但仍避免浅灰导致的低对比阅读问题。 */
.sidebar nav > div.mt-8 {
    color: var(--openstd-subtle);
}

.sidebar-item:hover {
    background-color: rgba(244, 236, 216, 0.06);
    border-color: var(--openstd-border);
    color: var(--openstd-heading);
}

.sidebar-item.active {
    background: linear-gradient(135deg, rgba(154, 252, 113, 0.12), rgba(102, 225, 214, 0.07));
    border-color: rgba(154, 252, 113, 0.42);
    color: var(--openstd-heading);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--openstd-primary), 0 12px 26px rgba(0, 0, 0, 0.26);
}

.app-root.is-sidebar-collapsed .sidebar {
    width: 64px;
    min-width: 64px;
    box-shadow: inset -1px 0 0 rgba(244, 236, 216, 0.04), 8px 0 28px rgba(0, 0, 0, 0.20);
}

.app-root.is-sidebar-collapsed .sidebar-brand-row {
    justify-content: center;
    min-height: 64px;
    padding: 14px 0;
    margin-bottom: 6px;
}

.app-root.is-sidebar-collapsed .sidebar-brand-text {
    display: none;
}

.app-root.is-sidebar-collapsed .sidebar-toggle-button {
    display: none;
}

.app-root.is-sidebar-collapsed .sidebar-brand-button {
    cursor: pointer;
}

.app-root.is-sidebar-collapsed .sidebar-brand-button:hover .sidebar-brand-mark {
    opacity: 0;
}

.app-root.is-sidebar-collapsed .sidebar-brand-button:hover .sidebar-brand-toggle-icon {
    opacity: 1;
}

.app-root.is-sidebar-collapsed .sidebar nav {
    width: 100%;
}

.app-root.is-sidebar-collapsed .sidebar-section-label {
    display: none;
}

.app-root.is-sidebar-collapsed .sidebar-item {
    justify-content: center;
    width: 44px;
    padding: 9px 0;
    margin: 2px auto;
    gap: 0;
}

.app-root.is-sidebar-collapsed .sidebar-item.active {
    box-shadow: inset 0 -3px 0 var(--openstd-primary), 0 10px 22px rgba(0, 0, 0, 0.22);
}

.app-root.is-sidebar-collapsed .sidebar-item-label {
    display: none;
}

.app-root.is-sidebar-collapsed .sidebar-footer {
    width: 100%;
    padding: 12px 0;
}

/* ==================== 主内容区域 ==================== */
/* 功能说明：flex弹性布局填充剩余空间，内部采用flex-col实现内容分区 */
/* 实现原理：flex:1占满父元素剩余空间，overflow:hidden防止内容溢出 */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow: hidden;
}

main.app-main-shell {
    position: relative;
    z-index: 1;
    background: transparent !important;
    /* 中文注释：把金牌教练首屏当作一个 27 寸参考舞台，所有关键尺寸从这里继承，避免不同屏幕各自漂移。 */
    --coach-welcome-max-width: 860px;
    --coach-welcome-margin-top: 64px;
    --coach-welcome-title-size: 58px;
    --coach-card-min-height: 122px;
    --coach-card-icon-size: 42px;
    --coach-card-icon-radius: 8px;
    --coach-card-column-gap: 12px;
    --coach-input-max-width: 920px;
    --coach-input-area-padding: 12px 24px 24px;
    --coach-input-inner-padding: 12px;
}

/* 设计意图：聊天页上下区域必须共享同一张背景底图，避免输入区单独绘制时产生偏蓝或断层。 */
main.app-main-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background:
        linear-gradient(90deg, rgba(244, 236, 216, 0.045) 1px, transparent 1px),
        linear-gradient(0deg, rgba(244, 236, 216, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 70% 22%, rgba(154, 252, 113, 0.10), transparent 34%),
        radial-gradient(circle at 18% 80%, rgba(102, 225, 214, 0.08), transparent 28%),
        rgba(8, 10, 10, 0.36);
    background-size: 44px 44px, 44px 44px, auto, auto, auto;
}

/* 设计意图：统一背景只在呵哩伴学页启用，其他页面继续使用各自独立的静态背景。 */
main.app-main-shell.is-chat-active::before {
    opacity: 1;
    visibility: visible;
}

header.app-topbar {
    position: relative;
    z-index: 2;
    height: 64px;
    border-color: var(--openstd-soft-border);
    background: rgba(8, 10, 10, 0.76);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30);
}

header.app-topbar h1 {
    color: var(--openstd-heading);
    font-weight: 700;
}

#chatContainer.app-chat-canvas {
    position: relative;
    z-index: 1;
    align-items: center;
    background: transparent;
}

/* ==================== 输入区域样式 ==================== */
/* 功能效果：聊天输入框毛玻璃效果，focus状态蓝色边框高亮 */
/* 实现原理：box-shadow实现阴影，transition实现平滑过渡，:focus-within伪类触发焦点样式 */
.input-container {
    max-width: 840px;
    width: 90%;
    margin: 0 auto;
    position: relative;
}

.chat-input-wrapper {
    background: rgba(21, 26, 24, 0.88);
    border: 1px solid var(--openstd-border);
    border-radius: 8px;
    box-shadow: var(--openstd-shadow);
    padding: var(--coach-input-inner-padding);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.chat-input-wrapper:focus-within {
    border-color: var(--openstd-primary);
    box-shadow: var(--openstd-focus), var(--openstd-shadow);
}

.chat-input-wrapper textarea {
    background: transparent;
    color: var(--openstd-body);
}

/* 设计意图：占位提示需要低于正文层级，但不能浅到在输入框里发灰发虚。 */
.chat-input-wrapper textarea::placeholder {
    color: var(--openstd-placeholder);
}

.chat-input-tools {
    align-items: center;
    flex-wrap: wrap;
}

/* ==================== 标签样式 ==================== */
/* 功能效果：GitHub风格的圆角标签，用于显示分类、难度等信息 */
/* 实现原理：inline-block行内块布局，border-radius实现圆角，背景色和文字色对比 */
.tag-gh {
    display: inline-block;
    padding: 0 7px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 2em;
    background-color: #eff1f3;
    color: #636c76;
}

/* 隐藏滚动条：保持视觉整洁的同时保留滚动功能 */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* ==================== 引导卡片样式 ==================== */
/* 功能效果：初始引导界面展示功能入口卡片，hover时蓝色边框提示可点击 */
/* 实现原理：border+background基础样式，transition实现颜色平滑过渡 */
.status-card {
    border: 1px solid var(--openstd-soft-border);
    border-radius: 8px;
    background: rgba(244, 236, 216, 0.05);
    padding: 16px;
}

/* 设计意图：欢迎区承担孩子首次进入的决策入口，需要比普通卡片更友好，但仍保持学习工具的克制密度。 */
#welcomeScreen.welcome-screen {
    max-width: var(--coach-welcome-max-width);
    margin: var(--coach-welcome-margin-top) auto 0;
    text-align: left;
}

#welcomeScreen.welcome-screen::before {
    content: "";
    display: block;
    width: 92px;
    height: 8px;
    margin: 0 0 22px;
    border-radius: 999px;
    background: var(--openstd-primary);
    box-shadow: 0 0 22px rgba(154, 252, 113, 0.48);
}

/* 设计意图：首屏只保留四个学习入口，让注意力集中在用户真正要点击的行动卡片上。 */
#welcomeScreen .welcome-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
}

.welcome-main-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.welcome-eyebrow {
    margin: 0 0 12px;
    color: var(--openstd-accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    line-height: 1;
    text-transform: uppercase;
}

#welcomeScreen .welcome-title {
    margin-bottom: 12px;
    color: var(--openstd-heading);
    font-family: 'Cormorant Garamond', 'STZhongsong', 'Songti SC', 'Microsoft YaHei', serif;
    font-size: var(--coach-welcome-title-size);
    line-height: 0.98;
    letter-spacing: 0;
}

#welcomeScreen .welcome-subtitle {
    max-width: 620px;
    margin: 0 0 30px;
    color: var(--openstd-helper);
    font-size: 15px;
    line-height: 1.8;
}

#welcomeScreen .welcome-card-grid {
    gap: 14px;
}

.welcome-card {
    width: 100%;
    min-height: var(--coach-card-min-height);
    display: grid;
    grid-template-columns: var(--coach-card-icon-size) 1fr;
    grid-template-rows: auto 1fr;
    column-gap: var(--coach-card-column-gap);
    row-gap: 5px;
    text-align: left;
    color: var(--openstd-body);
    background: linear-gradient(180deg, rgba(244, 236, 216, 0.07), rgba(244, 236, 216, 0.025));
    border: 1px solid var(--openstd-border);
    border-radius: 8px;
    box-shadow: var(--openstd-soft-shadow), inset 0 1px 0 rgba(244, 236, 216, 0.05);
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.welcome-card:hover {
    transform: translateY(-2px);
    border-color: rgba(154, 252, 113, 0.68);
    box-shadow: 0 0 28px rgba(154, 252, 113, 0.12), 0 18px 38px rgba(0, 0, 0, 0.34);
}

.welcome-card-icon {
    width: var(--coach-card-icon-size);
    height: var(--coach-card-icon-size);
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--coach-card-icon-radius);
    color: var(--openstd-primary);
    background: rgba(154, 252, 113, 0.10);
    box-shadow: inset 0 0 0 1px rgba(154, 252, 113, 0.22);
}

.welcome-card:nth-child(2) .welcome-card-icon {
    color: var(--openstd-secondary);
    background: rgba(102, 225, 214, 0.10);
}

.welcome-card:nth-child(3) .welcome-card-icon {
    color: var(--openstd-warning);
    background: rgba(210, 168, 79, 0.12);
}

.welcome-card:nth-child(4) .welcome-card-icon {
    color: var(--openstd-primary);
    background: rgba(154, 252, 113, 0.10);
}

.welcome-card-title {
    display: block;
    color: var(--openstd-heading);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.welcome-card-text {
    display: block;
    color: var(--openstd-muted);
    font-size: 12px;
    line-height: 1.7;
}

.layout-input-area {
    border-color: var(--openstd-soft-border);
}

/* 设计意图：输入区外层来自 Tailwind 旧浅色渐变，必须在主题层显式收束，避免暗色首屏底部露出白雾。 */
#chatInputArea {
    position: relative;
    z-index: 2;
    background: transparent;
    border-top: 0;
    border-color: var(--openstd-soft-border);
    padding: var(--coach-input-area-padding);
}

.chat-input-dock {
    position: relative;
    z-index: 1;
    width: min(100%, var(--coach-input-max-width));
    max-width: var(--coach-input-max-width);
    display: grid;
    margin: 0 auto;
}

.chat-input-dock .input-container {
    width: 100%;
    max-width: none;
}

/* 中文注释：高 DPI 笔记本常把 16 寸屏幕暴露成更宽的短桌面视口，这里放大首屏舞台，使打开页面时接近 27 寸参考效果。 */
@media (min-resolution: 1.25dppx) and (min-width: 1200px) and (min-height: 760px) and (max-height: 1120px) {
    main.app-main-shell.is-chat-active {
        --coach-welcome-max-width: 1075px;
        --coach-welcome-margin-top: 80px;
        --coach-welcome-title-size: 72px;
        --coach-card-min-height: 152px;
        --coach-card-icon-size: 52px;
        --coach-card-icon-radius: 10px;
        --coach-card-column-gap: 15px;
        --coach-input-max-width: 1150px;
        --coach-input-area-padding: 15px 30px 30px;
        --coach-input-inner-padding: 15px;
    }
}

.chat-input-tools {
    flex-wrap: wrap;
}

.chat-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(201, 100, 66, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.80);
    color: var(--openstd-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.chat-mode-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(201, 100, 66, 0.42);
    color: var(--openstd-heading);
}

.chat-mode-toggle.is-knowledge {
    border-color: rgba(201, 100, 66, 0.62);
    background: linear-gradient(135deg, rgba(201, 100, 66, 0.16), rgba(210, 168, 79, 0.13));
    color: var(--openstd-heading);
}

.chat-mode-toggle.is-unavailable {
    opacity: 0.72;
}

.btn-gh:focus-visible, .sidebar-item:focus-visible, .sidebar-brand-button:focus-visible, .sidebar-toggle-button:focus-visible, .welcome-card:focus-visible, .knowledge-icon-button:focus-visible, .chat-mode-toggle:focus-visible {
    outline: 3px solid rgba(79, 70, 229, 0.42);
    outline-offset: 3px;
    box-shadow: var(--openstd-focus), var(--openstd-soft-shadow);
}

/* 功能效果：把知识库问答迁移到“呵哩伴学”后，用一张状态横幅统一承接入口说明和快捷操作 */
/* 实现原理：顶部横幅采用浅蓝渐变和双按钮布局，让用户一眼知道知识库问答现在应该去哪里 */
.chat-knowledge-banner-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid #d8e6ff;
    border-radius: 22px;
    background:
        radial-gradient(circle at top left, rgba(96, 165, 250, 0.18), transparent 42%),
        linear-gradient(135deg, #ffffff 0%, #f4f8ff 62%, #edf4ff 100%);
    box-shadow: 0 18px 40px rgba(37, 99, 235, 0.08);
    padding: 22px 24px;
}

.chat-knowledge-banner-copy {
    min-width: 0;
}

.chat-knowledge-banner-copy h2,
.chat-knowledge-banner-copy p {
    margin: 0;
}

.chat-knowledge-banner-copy h2 {
    color: #0f172a;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.chat-knowledge-banner-copy p {
    margin-top: 8px;
    color: #475569;
    font-size: 14px;
    line-height: 1.7;
}

.chat-knowledge-banner-eyebrow {
    margin: 0 0 8px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.chat-knowledge-banner-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.chat-knowledge-toggle,
.chat-knowledge-manage {
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.chat-knowledge-toggle {
    border: 1px solid #bfdbfe;
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
}

.chat-knowledge-toggle:hover:not(:disabled),
.chat-knowledge-manage:hover {
    transform: translateY(-1px);
}

.chat-knowledge-toggle:disabled {
    cursor: not-allowed;
    border-color: #cbd5e1;
    background: #e2e8f0;
    color: #64748b;
    box-shadow: none;
}

.chat-knowledge-toggle.is-muted {
    border-color: #cbd5e1;
    background: #ffffff;
    color: #334155;
    box-shadow: none;
}

.chat-knowledge-manage {
    border: 1px solid #dbe5f0;
    background: rgba(255, 255, 255, 0.88);
    color: #0f172a;
}

/* ==================== Markdown内容样式 ==================== */
/* 功能效果：渲染AI回复的Markdown内容，支持代码高亮、列表、段落等格式 */
/* 实现原理：针对不同Markdown元素定义专属样式，code使用等宽字体和背景色块 */
.md-content {
    font-size: 14px;
    line-height: 1.7;
    word-break: break-word;
    text-align: left;
}

.md-content p {
    margin: 0.35em 0;
    text-align: left;
}

.md-content ul,
.md-content ol {
    margin: 0.4em 0 0.4em 1.2em;
    text-align: left;
}

.md-content h1,
.md-content h2,
.md-content h3,
.md-content h4,
.md-content h5,
.md-content h6 {
    margin: 1em 0 0.5em 0;
    text-align: left;
    font-weight: 600;
}

.md-content code {
    background: rgba(148, 163, 184, 0.18);
    border-radius: 6px;
    padding: 0.1em 0.35em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.9em;
}

.md-content pre {
    background: #000;
    color: #F8FAFC;
    border: 1px solid #000;
    border-radius: 10px;
    padding: 16px 18px;
    overflow-x: auto;
    margin: 0.6em 0;
    white-space: pre;
    tab-size: 4;
    -moz-tab-size: 4;
}

.md-content pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* 代码高亮配色：针对不同语法元素定义专属颜色，接近IDE配色风格 */
.md-content .hljs {
    color: #1f2937;
    background: transparent;
}
.md-content .hljs-keyword,
.md-content .hljs-selector-tag,
.md-content .hljs-literal {
    color: #7c3aed;
    font-weight: 600;
}
.md-content .hljs-string,
.md-content .hljs-regexp {
    color: #0f766e;
}
.md-content .hljs-number,
.md-content .hljs-symbol,
.md-content .hljs-bullet {
    color: #b45309;
}
.md-content .hljs-title,
.md-content .hljs-function,
.md-content .hljs-attr {
    color: #2563eb;
}
.md-content .hljs-comment,
.md-content .hljs-quote {
    color: #6b7280;
    font-style: italic;
}

.assistant-stream {
    width: 100%;
}

.assistant-stream-shell {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 6px;
    padding: 14px 16px 16px;
    border-radius: 8px;
    background: rgba(8, 10, 10, 0.96);
}

.assistant-plain-message {
    width: 100%;
    padding: 14px 16px 16px;
    border-radius: 8px;
    background: rgba(8, 10, 10, 0.96);
    color: #111827;
}

/* 功能效果：在思考过程中展示命中的知识库文件，让资料来源先于正文被用户看见。 */
/* 实现原理：来源区只展示文件级条目，片段内容留给后端 prompt 使用，避免同一 PDF 因多分片重复占满界面。 */
.assistant-source-panel {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.assistant-source-meta {
    display: block;
}

.assistant-source-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    padding: 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.assistant-source-chevron {
    color: currentColor;
    transition: transform 0.2s ease;
}

.assistant-source-citations {
    display: block;
}

.assistant-source-file-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 10px 12px;
    list-style: none;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.04);
}

.assistant-source-file-item {
    min-width: 0;
}

.assistant-source-citation {
    width: 100%;
    display: flex;
    max-width: 100%;
    align-items: center;
    gap: 4px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    padding: 3px 4px;
    text-align: left;
    color: #047857;
}

.assistant-source-citation.is-clickable {
    cursor: pointer;
}

.assistant-source-citation.is-clickable:hover {
    background: rgba(16, 185, 129, 0.10);
}

.assistant-source-citation-index {
    flex: 0 0 auto;
    color: currentColor;
    font-size: 13px;
    font-weight: 600;
}

.assistant-source-citation-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: currentColor;
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assistant-source-citation-snippet {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.55;
}

.thinking-toggle {
    width: 100%;
    border: none;
    background: transparent;
    color: #4b5563;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.thinking-toggle-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.thinking-chevron {
    color: #9ca3af;
    transition: transform 0.2s ease;
}

.thinking-panel {
    margin-top: 0;
    padding: 10px 12px;
    border-left: 2px solid rgba(210, 168, 79, 0.70);
    border-radius: 8px;
    background: rgba(8, 10, 10, 0.24);
}

.thinking-panel .md-content {
    color: #4b5563;
    font-size: 15px;
}

.thinking-panel .md-content ul,
.thinking-panel .md-content ol {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

.assistant-stream.thinking-collapsed .thinking-panel {
    display: none;
}

.answer-panel {
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px solid var(--openstd-soft-border);
}

.answer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.answer-toolbar-label {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

.answer-toolbar-icons {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.answer-action {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #9ca3af;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.answer-action:hover {
    background: #f3f4f6;
    color: #4b5563;
}

.answer-content.md-content {
    font-size: 16px;
    line-height: 1.9;
    color: #111827;
}

.answer-content.md-content p {
    margin: 0.25em 0;
}

.daily-question-recommendations {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.daily-question-summary {
    margin: 0;
    color: #374151;
    font-size: 15px;
    line-height: 1.75;
}

.daily-question-card-list {
    display: grid;
    gap: 10px;
}

.daily-question-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid #dbe5f0;
    border-radius: 8px;
    background: #ffffff;
    padding: 12px 14px;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.daily-question-card:hover,
.daily-question-card:focus-visible {
    border-color: rgba(201, 100, 66, 0.38);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
    transform: translateY(-1px);
    outline: none;
}

.daily-question-card-topline,
.daily-question-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
}

.daily-question-card strong {
    color: #111827;
    font-size: 16px;
    line-height: 1.45;
}

.daily-question-card-reason {
    color: #4b5563;
    font-size: 13px;
    line-height: 1.65;
}

.daily-question-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.daily-question-card-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border-radius: 999px;
    background: #f3f4f6;
    padding: 3px 8px;
    color: #374151;
    font-size: 12px;
    font-weight: 700;
}

.daily-question-card-footer {
    margin-top: 2px;
    color: #9a5a3d;
}

.md-content .markdown-body.markdown-output {
    background: transparent;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    word-break: break-word;
}

.md-content .markdown-body.markdown-output > :first-child {
    margin-top: 0;
}

.md-content .markdown-body.markdown-output > :last-child {
    margin-bottom: 0;
}

.md-content .markdown-body.markdown-output pre {
    background: #000;
    color: #F8FAFC;
    border: 1px solid #000;
    border-radius: 12px;
    padding: 16px 18px;
    overflow-x: auto;
    white-space: pre;
    tab-size: 4;
    -moz-tab-size: 4;
}

.md-content .markdown-body.markdown-output pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    display: block;
    white-space: pre;
    line-height: 1.65;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.md-content .markdown-body.markdown-output code:not(pre code) {
    background: rgba(148, 163, 184, 0.18);
    border-radius: 6px;
    padding: 0.12em 0.35em;
}

.md-content .markdown-body.markdown-output table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-spacing: 0;
}

.md-content .markdown-body.markdown-output th,
.md-content .markdown-body.markdown-output td {
    white-space: nowrap;
}

.md-content .markdown-body.markdown-output blockquote {
    color: #4b5563;
    border-left-color: #d1d5db;
}

.md-content .markdown-body.markdown-output p {
    margin: 0.55em 0;
}

.md-content .markdown-body.markdown-output h1,
.md-content .markdown-body.markdown-output h2,
.md-content .markdown-body.markdown-output h3 {
    margin: 1.05em 0 0.55em;
    color: inherit;
    font-weight: 750;
    line-height: 1.35;
}

.md-content .markdown-body.markdown-output ul {
    margin: 0.55em 0 0.75em;
    padding-left: 1.35em;
    list-style-position: outside;
    list-style-type: disc;
}

.md-content .markdown-body.markdown-output ol {
    margin: 0.55em 0 0.75em;
    padding-left: 1.35em;
    list-style-position: outside;
    list-style-type: decimal;
}

.md-content .markdown-body.markdown-output li {
    margin: 0.25em 0;
}

.thinking-content .markdown-body.markdown-output {
    color: #4b5563;
}

.answer-content .markdown-body.markdown-output {
    color: #111827;
}

.md-content .markdown-body.markdown-output .katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.2rem 0;
}

/* ==================== 个人中心页面样式 ==================== */
/* 功能说明：用户信息展示、刷题统计、Rating图表等个人信息管理界面 */
/* 实现原理：白色卡片+阴影+圆角实现卡片化布局，与页面背景形成层次感 */
#personalCenter {
    flex: 1;
    overflow-y: auto;
    background-color: #f6f8fa;
}

#personalCenter .bg-white {
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 设计意图：设置弹窗承载账号安全操作，使用独立遮罩和紧凑表单，避免嵌在画像面板中造成主次混乱。 */
.personal-settings-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 24px;
}

.personal-settings-modal.hidden {
    display: none;
}

.personal-settings-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 10, 0.68);
    backdrop-filter: blur(12px);
}

.personal-settings-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 640px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    border: 1px solid var(--openstd-border);
    border-radius: 8px;
    background:
        radial-gradient(circle at 86% 10%, rgba(154, 252, 113, 0.10), transparent 32%),
        var(--openstd-panel);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
}

.personal-settings-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--openstd-soft-border);
}

.personal-settings-head p {
    margin: 0 0 4px;
    color: var(--openstd-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.personal-settings-head h3 {
    margin: 0;
    color: var(--openstd-heading);
    font-size: 21px;
    font-weight: 800;
}

.personal-settings-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 22px 22px;
}

.personal-settings-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.personal-settings-field label,
.personal-settings-field > span {
    color: var(--openstd-helper);
    font-size: 12px;
    font-weight: 800;
}

.personal-settings-field input {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--openstd-border);
    border-radius: 8px;
    background: rgba(8, 10, 10, 0.34);
    color: var(--openstd-heading);
    font-size: 14px;
    outline: none;
    padding: 10px 12px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.personal-settings-field input:focus {
    border-color: var(--openstd-primary);
    box-shadow: 0 0 0 3px var(--openstd-primary-soft);
    background: rgba(8, 10, 10, 0.48);
}

.personal-avatar-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.personal-avatar-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 96px;
    border: 1px solid var(--openstd-soft-border);
    border-radius: 8px;
    background: var(--openstd-button-bg);
    color: var(--openstd-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.personal-avatar-option:hover {
    transform: translateY(-1px);
    border-color: var(--openstd-primary);
    color: var(--openstd-heading);
}

.personal-avatar-option.is-selected {
    border-color: var(--openstd-primary);
    background: var(--openstd-primary-soft);
    color: var(--openstd-primary);
    box-shadow: inset 0 0 0 1px rgba(154, 252, 113, 0.34);
}

.personal-avatar-option img {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    object-fit: cover;
    background: rgba(244, 236, 216, 0.08);
}

.personal-settings-password-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.personal-settings-message {
    margin: 0;
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
}

.personal-settings-message.is-error {
    background: rgba(255, 92, 61, 0.11);
    color: var(--openstd-danger);
}

.personal-settings-message.is-success {
    background: rgba(154, 252, 113, 0.10);
    color: var(--openstd-primary);
}

.personal-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 760px) {
    .personal-settings-modal {
        padding: 14px;
        align-items: end;
    }

    .personal-settings-panel {
        max-height: calc(100vh - 28px);
    }

    .personal-avatar-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .personal-settings-password-grid {
        grid-template-columns: 1fr;
    }
}

/* 设计意图：学习画像是个人中心里的工作面板，采用紧凑深色数据台，让阶段、风险和建议能被快速扫描。 */
.student-assessment-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
    padding: 22px;
    border: 1px solid var(--openstd-soft-border);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(154, 252, 113, 0.08), transparent 32%),
        linear-gradient(225deg, rgba(102, 225, 214, 0.08), transparent 30%),
        var(--openstd-panel);
    box-shadow: var(--openstd-soft-shadow);
}

.student-assessment-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.student-assessment-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--openstd-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.student-assessment-head h3 {
    margin: 0;
    color: var(--openstd-heading);
    font-size: 20px;
    font-weight: 800;
}

.student-assessment-head p {
    margin: 6px 0 0;
    color: var(--openstd-muted);
    font-size: 13px;
    line-height: 1.5;
}

.student-assessment-head p.student-assessment-status-error {
    color: var(--openstd-danger);
}

.student-assessment-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 9px 14px;
    border: 1px solid var(--openstd-border);
    border-radius: 8px;
    background: var(--openstd-button-bg);
    color: var(--openstd-heading);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.student-assessment-refresh:hover:not(:disabled) {
    border-color: var(--openstd-primary);
    color: var(--openstd-primary);
    background: var(--openstd-primary-soft);
}

.student-assessment-refresh:disabled {
    cursor: wait;
    opacity: 0.62;
}

.student-assessment-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--openstd-soft-border);
    border-radius: 8px;
    background: rgba(244, 236, 216, 0.035);
}

.student-assessment-stage span {
    color: var(--openstd-subtle);
    font-size: 12px;
    font-weight: 700;
}

.student-assessment-stage strong {
    display: block;
    margin-top: 4px;
    color: var(--openstd-heading);
    font-size: 23px;
    line-height: 1.2;
}

.student-assessment-stage p {
    margin: 8px 0 0;
    color: var(--openstd-muted);
    font-size: 13px;
    line-height: 1.55;
}

#studentAssessmentRefreshedAt {
    align-self: start;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--openstd-button-bg);
    color: var(--openstd-helper);
    font-size: 11px;
    white-space: nowrap;
}

.student-assessment-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.student-assessment-metrics div {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid var(--openstd-soft-border);
    border-radius: 8px;
    background: var(--openstd-button-bg);
}

.student-assessment-metrics span {
    display: block;
    color: var(--openstd-subtle);
    font-size: 11px;
    font-weight: 700;
}

.student-assessment-metrics strong {
    display: block;
    margin-top: 7px;
    color: var(--openstd-primary);
    font-size: 24px;
    line-height: 1;
}

.student-assessment-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
    gap: 16px;
}

.student-assessment-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
    gap: 16px;
}

.student-assessment-practice-section {
    grid-row: span 2;
}

.student-assessment-section {
    min-width: 0;
    border: 1px solid var(--openstd-soft-border);
    border-radius: 8px;
    background: rgba(8, 10, 10, 0.24);
    overflow: hidden;
}

.student-assessment-section.actions {
    background: rgba(102, 225, 214, 0.045);
}

.student-assessment-section-head {
    padding: 13px 15px;
    border-bottom: 1px solid var(--openstd-soft-border);
}

.student-assessment-section-head h4 {
    margin: 0;
    color: var(--openstd-heading);
    font-size: 14px;
    font-weight: 800;
}

.student-assessment-list,
.student-assessment-actions {
    display: flex;
    flex-direction: column;
}

.student-assessment-practice-record {
    padding: 15px;
}

.student-assessment-practice-record-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.student-assessment-heatmap {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px;
    padding: 2px;
}

.student-assessment-heatmap-cell {
    aspect-ratio: 1;
    min-width: 9px;
    border-radius: 3px;
    background: rgba(244, 236, 216, 0.07);
    border: 1px solid var(--openstd-soft-border);
}

.student-assessment-heatmap-cell.level-1 {
    background: rgba(154, 252, 113, 0.18);
}

.student-assessment-heatmap-cell.level-2 {
    background: rgba(154, 252, 113, 0.35);
}

.student-assessment-heatmap-cell.level-3 {
    background: rgba(154, 252, 113, 0.58);
}

.student-assessment-heatmap-cell.level-4 {
    background: var(--openstd-primary);
}

.student-assessment-practice-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.student-assessment-practice-stats div {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--openstd-soft-border);
    border-radius: 8px;
    background: rgba(244, 236, 216, 0.035);
}

.student-assessment-practice-stats strong {
    display: block;
    color: var(--openstd-primary);
    font-size: 21px;
    line-height: 1;
}

.student-assessment-practice-stats span {
    display: block;
    margin-top: 6px;
    color: var(--openstd-subtle);
    font-size: 11px;
    font-weight: 700;
}

.student-assessment-row,
.student-assessment-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 14px 15px;
    border-bottom: 1px solid var(--openstd-soft-border);
}

.student-assessment-row:last-child,
.student-assessment-action:last-child {
    border-bottom: 0;
}

.student-assessment-row.compact {
    display: block;
}

.student-assessment-row-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.student-assessment-row-title strong,
.student-assessment-action strong {
    color: var(--openstd-heading);
    font-size: 13px;
    font-weight: 800;
}

.student-assessment-row-title span:not(.student-assessment-risk) {
    color: var(--openstd-subtle);
    font-size: 11px;
    white-space: nowrap;
}

.student-assessment-row p,
.student-assessment-action p {
    margin: 6px 0 0;
    color: var(--openstd-muted);
    font-size: 12px;
    line-height: 1.5;
}

.student-assessment-problem-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 15px;
    border-bottom: 1px solid var(--openstd-soft-border);
    color: inherit;
    text-decoration: none;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.student-assessment-problem-card:last-child {
    border-bottom: 0;
}

.student-assessment-problem-card:hover,
.student-assessment-problem-card:focus-visible {
    background: rgba(201, 100, 66, 0.06);
    border-color: rgba(201, 100, 66, 0.24);
    outline: none;
    transform: translateY(-1px);
}

.student-assessment-problem-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--openstd-subtle);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.student-assessment-problem-card strong {
    color: var(--openstd-heading);
    font-size: 13px;
    font-weight: 800;
}

.student-assessment-problem-card p {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    color: var(--openstd-muted);
    font-size: 12px;
    line-height: 1.5;
}

.student-assessment-problem-card p span {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    color: #080A0A;
    background: var(--openstd-primary);
    font-size: 10px;
    font-weight: 800;
}

.student-assessment-risk {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 800;
}

.student-assessment-risk.insufficient {
    color: var(--openstd-subtle);
    background: var(--openstd-button-bg);
}

.student-assessment-risk.stable {
    color: var(--openstd-primary);
    background: var(--openstd-primary-soft);
}

.student-assessment-risk.watch {
    color: var(--openstd-warning);
    background: var(--openstd-warning-soft);
}

.student-assessment-risk.review {
    color: var(--openstd-danger);
    background: var(--openstd-danger-soft);
}

.student-assessment-progress {
    height: 6px;
    margin-top: 10px;
    border-radius: 999px;
    background: var(--openstd-button-bg);
    overflow: hidden;
}

.student-assessment-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--openstd-secondary), var(--openstd-primary));
}

.student-assessment-row-score {
    color: var(--openstd-primary);
    font-size: 18px;
    font-weight: 800;
    white-space: nowrap;
}

.student-assessment-empty {
    padding: 16px;
    color: var(--openstd-muted);
    font-size: 13px;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .student-assessment-grid,
    .student-assessment-profile-grid {
        grid-template-columns: 1fr;
    }

    .student-assessment-practice-section {
        grid-row: auto;
    }

    .student-assessment-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .student-assessment-panel {
        padding: 18px;
    }

    .student-assessment-head {
        flex-direction: column;
    }

    .student-assessment-stage {
        grid-template-columns: 1fr;
    }

    .student-assessment-refresh {
        width: 100%;
    }

    .student-assessment-metrics {
        grid-template-columns: 1fr;
    }

    .student-assessment-row {
        grid-template-columns: 1fr;
    }
}

/* ==================== 刷题记录热力图样式 ==================== */
/* 功能效果：GitHub风格的热力图，通过颜色深浅展示每日刷题量 */
/* 实现原理：CSS Grid或Flex布局渲染日历格子，通过不同背景色等级表示刷题密度 */
.problem-heatmap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.heatmap-month-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.heatmap-day-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.heatmap-empty {
    width: 30px;
}

.heatmap-day-label {
    width: 30px;
    font-size: 12px;
    color: #6b7280;
    text-align: right;
}

.heatmap-month {
    width: 48px;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
}

.heatmap-cell {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    transition: all 0.2s ease;
}

.heatmap-cell:hover {
    transform: scale(1.2);
}

/* 热力图颜色等级：从浅到深表示刷题量递增 */
.heatmap-cell-0 {
    background-color: #ebedf0;
}

.heatmap-cell-1 {
    background-color: #c6e48b;
}

.heatmap-cell-2 {
    background-color: #7bc96f;
}

.heatmap-cell-3 {
    background-color: #239a3b;
}

/* ==================== 资源中心页面样式 ==================== */
#resourceCenter {
    flex: 1;
    overflow-y: auto;
    /* 设计意图：资源中心和知识库一样承载大面积内容，用侧栏同源渐变增强平台气质，同时不干扰课程卡片阅读。 */
    background:
        linear-gradient(90deg, rgba(244, 236, 216, 0.035) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(0deg, rgba(244, 236, 216, 0.026) 1px, transparent 1px) 0 0 / 34px 34px,
        radial-gradient(circle at 12% 6%, rgba(154, 252, 113, 0.08), transparent 24%),
        radial-gradient(circle at 88% 14%, rgba(102, 225, 214, 0.08), transparent 28%),
        var(--openstd-bg);
}

/* ==================== 分区导航样式 ==================== */
/* 功能效果：顶部导航标签页，支持hover和active状态切换 */
/* 实现原理：inline-block行内块布局，背景色和文字色联动变化 */
.nav-item {
    transition: all 0.2s ease;
    background-color: #f6f8fa;
    color: #6b7280;
}

.nav-item:hover {
    background-color: #e5e7eb;
    color: #374151;
}

.nav-item.active {
    background-color: #3b82f6;
    color: white;
}

/* ==================== 课程卡片样式 ==================== */
/* 功能效果：展示课程封面、标题、价格等信息，hover时上浮并增强阴影 */
/* 实现原理：overflow:hidden裁剪超出的封面图片，transition实现动画过渡 */
.course-card-new {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.course-card-new:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.course-image {
    position: relative;
    height: 160px;
    background-color: #f3f4f6;
    overflow: hidden;
}

.course-cover {
    width: 100%;
    height: 100%;
    background-image: url('../image/resource-center/grammar-foundation.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.94;
}

.course-badge-new {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 12px;
    color: white;
    background-color: #3b82f6;
}

.course-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 12px;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 2px 6px;
    border-radius: 4px;
}

.course-info {
    padding: 12px;
}

.course-title-new {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #1f2937;
}

.course-desc-new {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 12px;
    line-height: 1.4;
}

.course-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.course-enroll {
    font-size: 12px;
    color: #9ca3af;
}

.course-price {
    font-size: 16px;
    font-weight: bold;
    color: #ef4444;
}

/* ==================== 小课程卡片样式 ==================== */
.course-card-small {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.course-card-small:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.course-image-small {
    height: 100px;
    background-color: #f3f4f6;
    overflow: hidden;
}

.course-cover-small {
    width: 100%;
    height: 100%;
    background-image: url('../image/resource-center/grammar-foundation.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.94;
}

/* 资源中心课程封面：用课程主题绑定生成图，避免所有卡片继续复用同一张占位图。 */
.course-cover-grammar-foundation {
    background-image: url('../image/resource-center/grammar-foundation.png');
}

.course-cover-algorithm-basics {
    background-image: url('../image/resource-center/algorithm-basics.png');
}

.course-cover-dynamic-programming {
    background-image: url('../image/resource-center/dynamic-programming.png');
}

.course-cover-code-speed {
    background-image: url('../image/resource-center/code-speed-drills.png');
}

.course-cover-cpp-syntax {
    background-image: url('../image/resource-center/cpp-syntax.png');
}

.course-cover-syntax-practice {
    background-image: url('../image/resource-center/syntax-practice.png');
}

.course-cover-data-structures {
    background-image: url('../image/resource-center/data-structures.png');
}

.course-cover-graph-theory {
    background-image: url('../image/resource-center/graph-theory.png');
}

.course-info-small {
    padding: 8px;
}

.course-title-small {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 4px;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-price-small {
    font-size: 14px;
    font-weight: bold;
    color: #ef4444;
}

.course-price-small.free {
    color: #10b981;
}

/* ==================== 套餐卡片样式 ==================== */
/* 功能效果：特惠套餐展示卡片，包含原价划线显示优惠力度 */
/* 实现原理：顶部背景图+半透明遮罩实现渐变效果，text-decoration:line-through实现划线价格 */
.course-package-new {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid #e5e7eb;
}

.course-package-new:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border-color: #3b82f6;
}

.package-header {
    background-image: url('../image/Class.webp');
    background-size: cover;
    background-position: center;
    padding: 16px;
    color: white;
    position: relative;
}

/* 伪元素实现半透明黑色遮罩，确保文字可读性 */
.package-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.package-header > * {
    position: relative;
    z-index: 2;
}

.package-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.2);
}

.package-title {
    font-size: 18px;
    font-weight: bold;
    margin-top: 24px;
}

.package-content {
    padding: 16px;
}

.package-desc {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 12px;
    line-height: 1.4;
}

.package-price {
    font-size: 20px;
    font-weight: bold;
    color: #ef4444;
    margin-bottom: 4px;
}

.package-original-price {
    font-size: 14px;
    color: #9ca3af;
    text-decoration: line-through;
}

/* ==================== 购买模态框样式 ==================== */
/* 功能效果：课程购买确认弹窗，固定遮罩层居中显示 */
/* 实现原理：fixed定位铺满全屏，flex居中内容区，点击遮罩或按钮关闭 */
#purchaseModal {
    font-family: 'Inter', sans-serif;
}

.payment-option {
    transition: all 0.2s ease;
}

.payment-option:hover {
    border-color: #3b82f6;
    background-color: #eff6ff;
}

/* ==================== 知识库页面样式 ==================== */
/* 功能说明：搭建类网盘知识库界面，让文件管理、导入和阅读器形成一个连续工作区 */
/* 实现原理：主页面采用固定工具栏 + 自适应卡片网格 + 底部对话框，阅读器用绝对定位覆盖当前知识库页 */
.knowledge-drive:not(.hidden) {
    position: relative;
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--openstd-bg);
}

.knowledge-drive-shell {
    position: relative;
    flex: 1;
    min-width: 0;
}

.knowledge-drive-canvas {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    padding: 0 28px 28px;
    /* 设计意图：将方格纸背景直接铺在 workspace 上，卡片半透明叠入其中，不再需要独立的画布容器。 */
    background:
        linear-gradient(90deg, rgba(244, 236, 216, 0.035) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(0deg, rgba(244, 236, 216, 0.03) 1px, transparent 1px) 0 0 / 34px 34px,
        radial-gradient(circle at 12% 6%, rgba(154, 252, 113, 0.07), transparent 24%),
        radial-gradient(circle at 88% 14%, rgba(102, 225, 214, 0.07), transparent 28%),
        var(--openstd-panel);
}

.knowledge-workspace:not(.hidden) {
    display: flex;
    flex-direction: column;
}

.knowledge-guest,
.knowledge-placeholder-panel {
    width: min(520px, calc(100% - 32px));
    margin: 72px auto;
    padding: 36px;
    border: 1px solid var(--openstd-border);
    border-radius: 24px;
    background: var(--openstd-surface);
    text-align: center;
    box-shadow: var(--openstd-shadow);
    color: var(--openstd-body);
    backdrop-filter: blur(16px);
}

.knowledge-drive-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 48px;
    padding: 4px 0 10px;
    background: transparent;
}

.knowledge-breadcrumb-wrap,
.knowledge-nav-buttons,
.knowledge-toolbar-actions,
.knowledge-reader-title,
.knowledge-reader-actions,
.knowledge-ai-actions {
    display: flex;
    align-items: center;
}

.knowledge-breadcrumb-wrap {
    min-width: 0;
    gap: 10px;
}

.knowledge-nav-buttons {
    gap: 6px;
    color: var(--openstd-muted);
}

.knowledge-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    color: var(--openstd-helper);
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.knowledge-icon-button:hover {
    background: var(--openstd-button-bg);
    color: var(--openstd-heading);
}

.knowledge-breadcrumb {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--openstd-heading);
    white-space: nowrap;
}

.knowledge-breadcrumb button {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.knowledge-breadcrumb span {
    color: var(--openstd-muted);
}

.knowledge-toolbar-actions {
    flex-shrink: 0;
    gap: 8px;
}

.knowledge-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 210px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--openstd-border);
    border-radius: 12px;
    background: var(--openstd-panel);
    color: var(--openstd-muted);
}

.knowledge-search-box input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13px;
    color: var(--openstd-body);
}

.knowledge-search-box input::placeholder {
    color: var(--openstd-placeholder);
}

.knowledge-sort-control,
.knowledge-sort-select,
.knowledge-import-button {
    height: 34px;
    border: 1px solid var(--openstd-border);
    border-radius: 12px;
    background: var(--openstd-panel);
    color: var(--openstd-body);
    font-size: 13px;
}

.knowledge-sort-control {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    color: var(--openstd-helper);
}

.knowledge-sort-select {
    height: auto;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    outline: 0;
    color: var(--openstd-body);
}

.knowledge-sort-select option {
    background: var(--openstd-panel);
    color: var(--openstd-body);
}

.knowledge-import-wrap {
    position: relative;
}

.knowledge-import-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.knowledge-import-button:hover,
.knowledge-sort-control:hover {
    border-color: var(--openstd-primary);
    background: var(--openstd-primary-soft);
    color: var(--openstd-primary);
}

.knowledge-import-menu,
.knowledge-context-menu {
    position: absolute;
    z-index: 40;
    min-width: 150px;
    padding: 6px;
    border: 1px solid var(--openstd-border);
    border-radius: 14px;
    background: var(--openstd-surface-raised);
    box-shadow: var(--openstd-shadow);
    backdrop-filter: blur(20px);
}

.knowledge-import-menu {
    top: 40px;
    right: 0;
}

.knowledge-import-menu button,
.knowledge-context-menu button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    padding: 9px 10px;
    color: var(--openstd-body);
    font-size: 13px;
    text-align: left;
    transition: background 0.14s ease, color 0.14s ease;
}

.knowledge-import-menu button:hover,
.knowledge-context-menu button:hover {
    background: var(--openstd-button-bg);
    color: var(--openstd-heading);
}

.knowledge-context-menu button.danger {
    color: var(--openstd-danger);
}

.knowledge-context-menu button.danger:hover {
    background: var(--openstd-danger-soft);
}

.knowledge-import-menu button:disabled {
    color: var(--openstd-subtle);
    cursor: not-allowed;
}

.knowledge-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 28px;
    margin-bottom: 8px;
    color: var(--openstd-body);
}

.knowledge-status-row p {
    margin: 0;
}

.knowledge-count-pill {
    margin-left: auto;
    border-radius: 999px;
    background: var(--openstd-button-bg);
    padding: 4px 10px;
    color: var(--openstd-muted);
    font-size: 12px;
    font-weight: 700;
}

/* 设计意图：不再使用独立画布容器，卡片直接排列在 workspace 方格纸背景上，消除双层嵌套的视觉割裂。 */

.knowledge-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 148px);
    row-gap: 32px;
    column-gap: 32px;
    align-items: start;
    /* 设计意图：锁定行轨道从顶部排列，并让实际卡片列作为一组居中，避免宽屏时偏左。 */
    align-content: start;
    justify-content: center;
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 16px 2px;
    scroll-behavior: smooth;
}

/* 设计意图：卡片使用半透明背景 + 模糊，让 workspace 的方格线自然透出，形成“信息嵌在网格上”的整体感。 */
.knowledge-card {
    display: flex;
    min-height: 154px;
    flex-direction: column;
    border: 1px solid rgba(244, 236, 216, 0.1);
    border-radius: 4px;
    background: rgba(21, 26, 24, 0.68);
    backdrop-filter: blur(4px);
    padding: 10px;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.knowledge-card:hover,
.knowledge-card.active {
    border-color: var(--openstd-primary);
    background: rgba(21, 26, 24, 0.88);
    backdrop-filter: blur(8px);
    box-shadow: 0 0 24px rgba(154, 252, 113, 0.16), 0 8px 24px rgba(0, 0, 0, 0.36);
    transform: translateY(-2px);
}

.knowledge-folder-card {
    text-align: left;
}

.knowledge-folder-illustration {
    position: relative;
    display: flex;
    width: 100%;
    height: 72px;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    border: 1px solid rgba(244, 236, 216, 0.08);
    border-radius: 2px;
    background: linear-gradient(135deg, rgba(154, 252, 113, 0.06) 0%, rgba(102, 225, 214, 0.04) 100%);
    color: var(--openstd-primary);
    padding: 10px 12px;
}

.knowledge-folder-illustration::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.knowledge-document-cover {
    position: relative;
    height: 72px;
    overflow: hidden;
    border: 1px solid rgba(244, 236, 216, 0.08);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.015);
}

.knowledge-document-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.knowledge-document-cover.pdf {
    background: linear-gradient(135deg, rgba(255, 92, 61, 0.06) 0%, rgba(210, 168, 79, 0.04) 100%);
}

.knowledge-document-cover.md {
    background: linear-gradient(135deg, rgba(154, 252, 113, 0.06) 0%, rgba(102, 225, 214, 0.04) 100%);
}

.knowledge-document-cover.doc,
.knowledge-document-cover.docx {
    background: linear-gradient(135deg, rgba(102, 225, 214, 0.06) 0%, rgba(154, 252, 113, 0.04) 100%);
}

.knowledge-cover-lines {
    position: absolute;
    inset: 10px 12px auto;
    height: 42px;
    background:
        linear-gradient(var(--openstd-border) 0 0) 0 0 / 86% 1px no-repeat,
        linear-gradient(var(--openstd-soft-border) 0 0) 0 12px / 72% 1px no-repeat,
        linear-gradient(var(--openstd-border) 0 0) 0 24px / 92% 1px no-repeat,
        linear-gradient(var(--openstd-soft-border) 0 0) 0 36px / 58% 1px no-repeat;
}

.knowledge-cover-tag {
    position: absolute;
    left: 8px;
    bottom: 7px;
    border-radius: 999px;
    background: rgba(154, 252, 113, 0.22);
    padding: 2px 8px;
    color: var(--openstd-primary);
    font-size: 10px;
    font-weight: 600;
}

.knowledge-card-title {
    display: -webkit-box;
    min-height: 40px;
    margin-top: 8px;
    overflow: hidden;
    color: var(--openstd-heading);
    font-size: 14px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.knowledge-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.knowledge-card-tags span {
    max-width: 100%;
    overflow: hidden;
    border-radius: 999px;
    background: var(--openstd-primary-soft);
    padding: 2px 7px;
    color: var(--openstd-primary);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.knowledge-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: var(--openstd-muted);
    font-size: 12px;
}

.knowledge-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.knowledge-modal {
    position: absolute;
    inset: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(4px);
}

.knowledge-modal.hidden {
    display: none;
}

.knowledge-move-panel {
    width: min(420px, calc(100% - 32px));
    max-height: min(520px, calc(100% - 48px));
    overflow: hidden;
    border: 1px solid var(--openstd-border);
    border-radius: 22px;
    background: var(--openstd-surface-raised);
    box-shadow: var(--openstd-shadow);
    backdrop-filter: blur(20px);
}

.knowledge-move-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--openstd-soft-border);
    padding: 18px 18px 14px;
}

.knowledge-move-eyebrow {
    margin: 0 0 4px;
    color: var(--openstd-subtle);
    font-size: 12px;
}

.knowledge-move-header h3 {
    color: var(--openstd-heading);
    font-size: 17px;
    font-weight: 700;
}

.knowledge-move-folder-list {
    max-height: 390px;
    overflow: auto;
    padding: 8px;
}

.knowledge-move-folder-list button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    padding: 11px 12px;
    color: var(--openstd-body);
    font-size: 14px;
    text-align: left;
    transition: background 0.14s ease;
}

.knowledge-move-folder-list button:hover,
.knowledge-move-folder-list button.active {
    background: var(--openstd-button-bg);
}

.knowledge-move-folder-list button small {
    margin-left: auto;
    border-radius: 999px;
    background: var(--openstd-primary-soft);
    padding: 2px 8px;
    color: var(--openstd-primary);
    font-size: 11px;
    font-weight: 600;
}

.knowledge-empty-card {
    display: flex;
    width: min(420px, 100%);
    min-height: 150px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px dashed var(--openstd-border);
    border-radius: 18px;
    background: var(--openstd-button-bg);
    color: var(--openstd-muted);
}

.knowledge-workbench-panel {
    position: absolute;
    left: 58px;
    right: 58px;
    bottom: 116px;
    z-index: 14;
    max-height: min(55vh, 480px);
    display: flex;
    flex-direction: column;
}

.knowledge-workbench-empty,
.knowledge-workbench-thread {
    overflow: hidden;
    border: 1px solid var(--openstd-border);
    border-radius: 20px;
    background: var(--openstd-surface-raised);
    box-shadow: var(--openstd-shadow);
    backdrop-filter: blur(16px);
}

.knowledge-workbench-thread {
    overflow-y: auto;
    scroll-behavior: smooth;
    flex: 1;
    max-height: min(55vh, 480px);
    scrollbar-width: thin;
    scrollbar-color: var(--openstd-border) transparent;
}

.knowledge-workbench-thread::-webkit-scrollbar { width: 4px; }
.knowledge-workbench-thread::-webkit-scrollbar-track { background: transparent; }
.knowledge-workbench-thread::-webkit-scrollbar-thumb { background: var(--openstd-border); border-radius: 99px; }
.knowledge-workbench-thread::-webkit-scrollbar-thumb:hover { background: var(--openstd-muted); }

.knowledge-workbench-empty {
    display: flex;
    min-height: 120px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    padding: 22px 24px;
}

.knowledge-workbench-empty h3,
.knowledge-workbench-empty p {
    margin: 0;
}

.knowledge-workbench-empty h3 {
    color: var(--openstd-heading);
    font-size: 16px;
    font-weight: 600;
}

.knowledge-workbench-empty p {
    color: var(--openstd-muted);
    font-size: 13px;
    line-height: 1.6;
}

.knowledge-workbench-empty-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--openstd-primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.knowledge-workbench-thread {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 18px;
}

.knowledge-workbench-thread.hidden {
    display: none;
}

.knowledge-workbench-message {
    display: flex;
}

.knowledge-workbench-message.user {
    justify-content: flex-end;
}

.knowledge-workbench-message.assistant {
    justify-content: flex-start;
}

.knowledge-workbench-user-bubble {
    max-width: min(78%, 680px);
    border-radius: 16px 16px 4px 16px;
    background: var(--openstd-primary);
    padding: 10px 14px;
    color: var(--openstd-bg);
    font-size: 14px;
    line-height: 1.65;
    font-weight: 500;
}

.knowledge-workbench-assistant-shell {
    width: min(100%, 860px);
}

.knowledge-workbench-banner {
    margin-bottom: 8px;
    border: 1px solid rgba(210, 168, 79, 0.28);
    border-radius: 10px;
    background: var(--openstd-warning-soft);
    padding: 8px 12px;
    color: var(--openstd-warning);
    font-size: 12px;
}

.knowledge-workbench-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.knowledge-workbench-meta span {
    border-radius: 999px;
    background: var(--openstd-button-bg);
    padding: 4px 9px;
    color: var(--openstd-muted);
    font-size: 11px;
}

.knowledge-workbench-shell {
    border: 1px solid var(--openstd-border);
    border-radius: 20px;
    background: var(--openstd-panel);
    box-shadow: var(--openstd-soft-shadow);
}

.knowledge-workbench-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    color: var(--openstd-helper);
    font-size: 13px;
}

.knowledge-workbench-toggle-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.knowledge-workbench-shell.collapsed .knowledge-workbench-thinking {
    display: none;
}

.knowledge-workbench-thinking {
    border-top: 1px solid var(--openstd-soft-border);
    padding: 0 14px 14px;
}

.knowledge-workbench-thinking .markdown-body,
.knowledge-workbench-answer .markdown-body {
    font-size: 13px;
    line-height: 1.7;
    color: var(--openstd-body);
}

.knowledge-workbench-answer {
    padding: 0 14px 14px;
}

.knowledge-workbench-answer.empty {
    color: var(--openstd-muted);
    font-size: 13px;
}

.knowledge-workbench-error {
    color: var(--openstd-danger);
}

.knowledge-workbench-citations {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 14px 14px;
}

.knowledge-workbench-citation {
    display: inline-flex;
    max-width: 100%;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid var(--openstd-soft-border);
    border-radius: 14px;
    background: var(--openstd-button-bg);
    padding: 10px 11px;
    text-align: left;
    transition: border-color 0.16s ease, background 0.16s ease;
}

.knowledge-workbench-citation:hover {
    border-color: var(--openstd-primary);
    background: var(--openstd-primary-soft);
}

.knowledge-workbench-citation-text {
    min-width: 0;
}

.knowledge-workbench-citation-title {
    color: var(--openstd-heading);
    font-size: 12px;
    font-weight: 700;
}

.knowledge-workbench-citation-snippet {
    margin-top: 3px;
    color: var(--openstd-muted);
    font-size: 11px;
    line-height: 1.55;
}

.knowledge-ai-dock {
    position: absolute;
    left: 58px;
    right: 58px;
    bottom: 18px;
    z-index: 15;
    border: 1px solid var(--openstd-border);
    border-radius: 20px;
    background: var(--openstd-surface-raised);
    padding: 12px 14px;
    box-shadow: var(--openstd-shadow);
    backdrop-filter: blur(16px);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.knowledge-ai-dock:focus-within {
    border-color: var(--openstd-primary);
    box-shadow: 0 0 0 3px var(--openstd-primary-soft), var(--openstd-shadow);
}

/* 功能效果：知识库页去掉对话框后，用迁移说明卡片承接用户心智，避免误以为问答功能消失 */
/* 实现原理：在文档区顶部增加一张轻量引导卡，文案说明职责拆分，按钮负责跳转到统一对话入口 */
.knowledge-chat-migration-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    border: 1px solid var(--openstd-border);
    border-radius: 20px;
    background:
        radial-gradient(circle at right top, rgba(102, 225, 214, 0.1), transparent 32%),
        linear-gradient(135deg, var(--openstd-panel) 0%, var(--openstd-panel-soft) 100%);
    padding: 18px 20px;
}

.knowledge-chat-migration-copy {
    min-width: 0;
}

.knowledge-chat-migration-copy h3,
.knowledge-chat-migration-copy p {
    margin: 0;
}

.knowledge-chat-migration-copy h3 {
    color: var(--openstd-heading);
    font-size: 18px;
    font-weight: 700;
}

.knowledge-chat-migration-copy p {
    margin-top: 6px;
    color: var(--openstd-muted);
    font-size: 13px;
    line-height: 1.65;
}

.knowledge-chat-migration-eyebrow {
    margin: 0 0 6px;
    color: var(--openstd-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.knowledge-chat-entry-button {
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--openstd-primary);
    padding: 11px 18px;
    color: var(--openstd-bg);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 22px rgba(154, 252, 113, 0.18);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.knowledge-chat-entry-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(154, 252, 113, 0.28);
}

#knowledgeAiInput {
    width: 100%;
    resize: none;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--openstd-body);
    font-size: 14px;
    line-height: 1.6;
    max-height: 120px;
    overflow-y: auto;
}

#knowledgeAiInput::placeholder {
    color: var(--openstd-placeholder);
}

.knowledge-ai-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.knowledge-ai-status {
    font-size: 12px;
    color: var(--openstd-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.knowledge-ai-send {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--openstd-button-bg);
    color: var(--openstd-muted);
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.knowledge-ai-send:not(:disabled) {
    background: var(--openstd-primary);
    color: var(--openstd-bg);
    box-shadow: 0 2px 8px rgba(154, 252, 113, 0.28);
}

.knowledge-ai-send:not(:disabled):hover {
    background: var(--openstd-primary-hover);
    box-shadow: 0 4px 14px rgba(154, 252, 113, 0.36);
}

.knowledge-ai-send:disabled {
    cursor: not-allowed;
}

.knowledge-reader {
    position: absolute;
    inset: 0;
    z-index: 50;
    flex-direction: column;
    background: var(--openstd-bg);
}

.knowledge-reader:not(.hidden) {
    display: flex;
}

.knowledge-reader-toolbar {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--openstd-soft-border);
    padding: 0 28px;
    background: var(--openstd-panel);
}

.knowledge-reader-title {
    min-width: 0;
    gap: 12px;
    color: var(--openstd-heading);
    font-size: 16px;
    font-weight: 500;
}

.knowledge-reader-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.knowledge-reader-actions {
    gap: 12px;
    color: var(--openstd-helper);
    font-size: 13px;
}

.knowledge-download-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-left: 1px solid var(--openstd-border);
    padding-left: 14px;
}

.knowledge-reader-body {
    --knowledge-reader-zoom: 1;
    flex: 1;
    overflow: auto;
    background: var(--openstd-bg);
    padding: 48px 9vw 96px;
}

.knowledge-markdown-page {
    max-width: 860px;
    transform: scale(var(--knowledge-reader-zoom));
    transform-origin: top center;
    color: var(--openstd-body);
    line-height: 1.8;
}

.knowledge-markdown-page h1,
.knowledge-markdown-page h2,
.knowledge-markdown-page h3 {
    margin: 28px 0 14px;
    font-weight: 700;
    color: var(--openstd-heading);
}

.knowledge-markdown-page h1 {
    font-size: 24px;
}

.knowledge-markdown-page h2 {
    font-size: 19px;
}

.knowledge-markdown-page h3 {
    font-size: 16px;
}

.knowledge-markdown-page p {
    margin: 9px 0;
    font-size: 15px;
}

.knowledge-md-list {
    padding-left: 22px;
}

.knowledge-md-space {
    height: 22px;
}

.knowledge-pdf-frame {
    display: block;
    width: 100%;
    min-height: calc(100vh - 160px);
    border: 0;
    transform: scale(var(--knowledge-reader-zoom));
    transform-origin: top center;
}

.knowledge-reader-placeholder {
    display: flex;
    min-height: 360px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--openstd-muted);
    text-align: center;
}

.knowledge-reader-placeholder h3 {
    color: var(--openstd-heading);
    font-size: 18px;
    font-weight: 700;
}

.knowledge-last-position {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--openstd-panel);
    padding: 10px 18px;
    color: var(--openstd-primary);
    font-size: 13px;
    box-shadow: var(--openstd-soft-shadow);
}

.knowledge-tab-button.active {
    border-color: var(--openstd-primary);
    background-color: var(--openstd-primary-soft);
    color: var(--openstd-primary);
}

.knowledge-document-item {
    border: 1px solid var(--openstd-soft-border);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--openstd-body);
}

.knowledge-document-item:hover {
    border-color: var(--openstd-border);
    background-color: var(--openstd-button-bg);
}

.knowledge-document-item.active {
    border-color: var(--openstd-primary);
    background-color: var(--openstd-primary-soft);
    box-shadow: inset 0 0 0 1px rgba(154, 252, 113, 0.16);
}

/* ==================== 知识图谱页面样式 ==================== */
/* 设计意图：知识图谱页单独声明深色变量，避免影响站内其他页面，同时让主轨、星群和焦点面板共享同一套色板 */
.knowledge-graph-page {
    --kg-bg: #050816;
    --kg-bg-soft: #0b1328;
    --kg-panel: rgba(9, 16, 35, 0.88);
    --kg-panel-strong: rgba(12, 21, 46, 0.96);
    --kg-border: rgba(130, 166, 255, 0.18);
    --kg-border-strong: rgba(130, 166, 255, 0.34);
    --kg-text: #eef4ff;
    --kg-text-soft: #aab8d6;
    --kg-text-muted: #7e8cae;
    --kg-gold: #f6d38b;
    --kg-cyan: #7ccfff;
    --kg-violet: #a495ff;
    --kg-track: rgba(116, 188, 255, 0.16);
    --kg-shadow: 0 32px 80px rgba(2, 6, 23, 0.55);
    display: block;
    min-height: 100%;
    background:
        radial-gradient(circle at top, rgba(95, 125, 255, 0.18), transparent 28%),
        radial-gradient(circle at 18% 18%, rgba(70, 205, 255, 0.12), transparent 20%),
        radial-gradient(circle at 82% 10%, rgba(246, 211, 139, 0.11), transparent 18%),
        linear-gradient(180deg, #030611 0%, #07111f 42%, #050816 100%);
    color: var(--kg-text);
}

.knowledge-graph-page-shell {
    width: min(1480px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 设计意图：顶部摘要先建立“考纲主轨”的阅读入口，把路径概念和夜空氛围在首屏一次交代清楚 */
.knowledge-graph-masthead {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.95fr);
    gap: 22px;
    padding: 28px 32px;
    border: 1px solid var(--kg-border);
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent 48%),
        radial-gradient(circle at top right, rgba(124, 207, 255, 0.12), transparent 30%),
        var(--kg-panel-strong);
    box-shadow: var(--kg-shadow);
}

.knowledge-graph-masthead::before,
.knowledge-graph-masthead::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.knowledge-graph-masthead::before {
    width: 280px;
    height: 280px;
    right: -120px;
    top: -160px;
    background: radial-gradient(circle, rgba(124, 207, 255, 0.26), transparent 68%);
}

.knowledge-graph-masthead::after {
    width: 180px;
    height: 180px;
    left: -40px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(246, 211, 139, 0.15), transparent 72%);
}

.knowledge-graph-masthead-copy,
.knowledge-graph-path-summary {
    position: relative;
    z-index: 1;
}

.knowledge-graph-kicker,
.knowledge-graph-eyebrow,
.knowledge-graph-placeholder-eyebrow {
    margin: 0;
    color: var(--kg-cyan);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.knowledge-graph-masthead-copy h2 {
    margin: 10px 0 0;
    font-family: 'Cormorant Garamond', "Times New Roman", serif;
    font-size: clamp(34px, 5vw, 52px);
    line-height: 0.96;
    letter-spacing: 0.01em;
    color: #f8fbff;
}

.knowledge-graph-route-summary,
.knowledge-graph-description,
.knowledge-graph-sidebar-head p,
.knowledge-graph-placeholder-card p {
    margin: 0;
    color: var(--kg-text-soft);
    font-family: 'IBM Plex Sans', 'Inter', sans-serif;
    line-height: 1.72;
}

.knowledge-graph-route-summary {
    max-width: 760px;
    margin-top: 14px;
    font-size: 15px;
}

.knowledge-graph-path-summary {
    display: grid;
    gap: 12px;
    align-content: start;
}

.knowledge-graph-path-chip {
    padding: 16px 18px;
    border: 1px solid rgba(246, 211, 139, 0.18);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(246, 211, 139, 0.1), rgba(124, 207, 255, 0.04)),
        rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.knowledge-graph-path-chip span,
.knowledge-graph-path-chip strong {
    display: block;
}

.knowledge-graph-path-chip span {
    color: var(--kg-text-muted);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.knowledge-graph-path-chip strong {
    margin-top: 8px;
    color: #fdf6e8;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

/* 设计意图：左侧舞台比右侧焦点更重，双栏比例向星图倾斜，强化“主轨观测台”而不是传统表单页 */
.knowledge-graph-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.58fr) minmax(320px, 0.82fr);
    gap: 22px;
    align-items: stretch;
}

.knowledge-graph-board,
.knowledge-graph-sidebar {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--kg-border);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 28%),
        var(--kg-panel);
    box-shadow: var(--kg-shadow);
    backdrop-filter: blur(16px);
}

.knowledge-graph-board {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
}

.knowledge-graph-board::before,
.knowledge-graph-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.18) 0 1px, transparent 1.2px),
        radial-gradient(circle at 78% 12%, rgba(255, 255, 255, 0.16) 0 1.2px, transparent 1.4px),
        radial-gradient(circle at 58% 34%, rgba(124, 207, 255, 0.16) 0 1.4px, transparent 1.7px),
        radial-gradient(circle at 24% 76%, rgba(246, 211, 139, 0.14) 0 1.3px, transparent 1.5px),
        radial-gradient(circle at 88% 72%, rgba(164, 149, 255, 0.14) 0 1.2px, transparent 1.5px);
}

.knowledge-graph-board-head,
.knowledge-graph-status,
.knowledge-graph-stage-frame,
.knowledge-graph-sidebar-head,
.knowledge-graph-detail {
    position: relative;
    z-index: 1;
}

.knowledge-graph-board-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.86fr);
    gap: 18px;
    align-items: start;
}

.knowledge-graph-board-copy h3,
.knowledge-graph-sidebar-head h3,
.knowledge-graph-placeholder-card h3,
.knowledge-graph-focus-heading h3 {
    margin: 10px 0 0;
    color: #f8fbff;
    font-family: 'Cormorant Garamond', "Times New Roman", serif;
}

.knowledge-graph-board-copy h3,
.knowledge-graph-sidebar-head h3 {
    font-size: 30px;
    line-height: 1;
}

.knowledge-graph-description {
    margin-top: 12px;
    max-width: 620px;
    font-size: 14px;
}

/* 设计意图：图例改成深色悬浮标签，维持脚本动态渲染的自由度，同时让“星群分类”更像观测面板 */
.knowledge-graph-legend {
    display: grid;
    gap: 10px;
    min-height: 44px;
    align-content: start;
}

.knowledge-graph-legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
}

.knowledge-graph-legend-swatch {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border: 1px solid transparent;
    border-radius: 999px;
}

.knowledge-graph-legend-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.knowledge-graph-legend-copy strong {
    color: var(--kg-text);
    font-size: 13px;
    font-weight: 600;
}

.knowledge-graph-legend-copy small {
    margin-top: 2px;
    color: var(--kg-text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.knowledge-graph-status {
    padding: 0;
    border: 0;
    background: transparent;
}

.knowledge-graph-status-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.knowledge-graph-status-pill {
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
        rgba(5, 10, 25, 0.66);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.knowledge-graph-status-pill.emphasis {
    border-color: rgba(246, 211, 139, 0.26);
    background:
        linear-gradient(135deg, rgba(246, 211, 139, 0.13), rgba(124, 207, 255, 0.05)),
        rgba(10, 18, 39, 0.82);
}

.knowledge-graph-status-label {
    display: block;
    color: var(--kg-text-muted);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.knowledge-graph-status-pill strong {
    display: block;
    margin-top: 8px;
    color: #f7fbff;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
}

.knowledge-graph-status-pill small {
    display: block;
    margin-top: 6px;
    color: var(--kg-text-soft);
    font-size: 12px;
    line-height: 1.55;
}

.knowledge-graph-level-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.knowledge-graph-level-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(130, 166, 255, 0.16);
    border-radius: 999px;
    background: rgba(8, 14, 30, 0.86);
    padding: 10px 14px;
    color: var(--kg-text-soft);
    font-size: 12px;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.knowledge-graph-level-chip strong {
    color: var(--kg-text);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
}

.knowledge-graph-level-chip:hover,
.knowledge-graph-level-chip.is-active {
    transform: translateY(-1px);
    border-color: rgba(124, 207, 255, 0.38);
    background: rgba(18, 29, 61, 0.96);
    box-shadow: 0 12px 28px rgba(6, 12, 28, 0.36);
}

.knowledge-graph-error {
    border-radius: 18px;
    border: 1px solid rgba(255, 120, 147, 0.28);
    background: rgba(85, 15, 33, 0.58);
    padding: 13px 16px;
    color: #ffd5de;
    font-size: 13px;
    line-height: 1.6;
}


/* 设计意图：画布外层负责星云、轨迹和内发光，真正的 Cytoscape 容器继续保持纯挂载职责 */
.knowledge-graph-stage-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(130, 166, 255, 0.18);
    border-radius: 24px;
    background:
        radial-gradient(circle at top, rgba(124, 207, 255, 0.13), transparent 30%),
        radial-gradient(circle at 80% 20%, rgba(246, 211, 139, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(8, 16, 37, 0.98), rgba(3, 8, 22, 1));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.knowledge-graph-stage-frame::before,
.knowledge-graph-stage-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.knowledge-graph-stage-frame::before {
    background:
        linear-gradient(rgba(130, 166, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(130, 166, 255, 0.06) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 100%);
}

.knowledge-graph-stage-frame::after {
    background:
        radial-gradient(circle at 10% 16%, rgba(255, 255, 255, 0.3) 0 1px, transparent 1.5px),
        radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.25) 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 74% 78%, rgba(124, 207, 255, 0.2) 0 1.3px, transparent 1.8px),
        radial-gradient(circle at 18% 72%, rgba(246, 211, 139, 0.16) 0 1.3px, transparent 1.7px);
}

.knowledge-graph-canvas {
    position: relative;
    z-index: 1;
    min-height: 650px;
    border-radius: 24px;
    overflow: hidden;
    background: transparent;
}

.knowledge-graph-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
}

.knowledge-graph-sidebar-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 2px 0;
}

.knowledge-graph-detail {
    display: flex;
    flex: 1;
}

/* 设计意图：默认占位卡片和节点详情共用统一的深色面板语法，这样脚本切换详情时视觉不会跳层 */
.knowledge-graph-placeholder-card,
.knowledge-graph-focus-card {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
        rgba(5, 12, 28, 0.84);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.knowledge-graph-placeholder-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    min-height: 100%;
    padding: 28px;
}

.knowledge-graph-placeholder-card h3 {
    font-size: 28px;
    line-height: 1;
}

.knowledge-graph-focus-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
}

.knowledge-graph-focus-heading p {
    margin: 12px 0 0;
    color: var(--kg-text-soft);
    font-size: 14px;
    line-height: 1.68;
}

.knowledge-graph-focus-track {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.knowledge-graph-focus-heading h3 {
    font-size: 34px;
    line-height: 0.96;
}

.knowledge-graph-focus-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.knowledge-graph-focus-stat {
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025);
}

.knowledge-graph-focus-stat span,
.knowledge-graph-progress-meta span,
.knowledge-graph-detail-section-head small,
.knowledge-graph-problem-copy small,
.knowledge-graph-focus-footnote {
    color: var(--kg-text-muted);
}

.knowledge-graph-focus-stat span {
    display: block;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.knowledge-graph-focus-stat strong {
    display: block;
    margin-top: 9px;
    color: var(--kg-text);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 600;
}

.knowledge-graph-focus-description {
    margin: 0;
    color: var(--kg-text-soft);
    font-size: 14px;
    line-height: 1.72;
}

.knowledge-graph-progress-shell {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid rgba(124, 207, 255, 0.14);
    border-radius: 20px;
    background: rgba(7, 15, 34, 0.8);
}

.knowledge-graph-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.knowledge-graph-progress-meta span {
    font-size: 12px;
}

.knowledge-graph-progress-meta strong {
    color: #f8fbff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 18px;
}

.knowledge-graph-progress-bar {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.knowledge-graph-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.knowledge-graph-detail-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 2px;
}

.knowledge-graph-detail-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.knowledge-graph-detail-section-head h4 {
    margin: 0;
    color: var(--kg-text);
    font-size: 15px;
    font-weight: 600;
}

.knowledge-graph-detail-section-head small {
    font-size: 11px;
}

.knowledge-graph-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.knowledge-graph-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border: 1px solid rgba(124, 207, 255, 0.14);
    border-radius: 999px;
    background: rgba(124, 207, 255, 0.08);
    padding: 8px 12px;
    color: #e5f7ff;
    font-size: 12px;
    line-height: 1.4;
}

.knowledge-graph-chip.muted {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: var(--kg-text-muted);
}

.knowledge-graph-problem-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.knowledge-graph-problem-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.knowledge-graph-problem-item:hover {
    transform: translateY(-1px);
    border-color: rgba(124, 207, 255, 0.2);
    background: rgba(17, 31, 63, 0.88);
}

.knowledge-graph-problem-item input {
    margin-top: 3px;
    accent-color: #7ccfff;
}

.knowledge-graph-problem-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.knowledge-graph-problem-copy strong {
    color: var(--kg-text);
    font-size: 14px;
    line-height: 1.55;
}

.knowledge-graph-problem-copy small {
    margin-top: 4px;
    font-size: 12px;
}

.knowledge-graph-problem-empty {
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    padding: 14px;
    color: var(--kg-text-muted);
    font-size: 13px;
    line-height: 1.65;
}

.knowledge-graph-focus-footnote {
    margin-top: 2px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12px;
    line-height: 1.7;
}

/* ==================== 响应式适配 ==================== */
/* 功能说明：针对移动端设备调整布局和尺寸，优化小屏幕显示效果 */
/* 实现原理：媒体查询@media (max-width: 768px)，缩小热力图格子、课程封面、字体大小等 */
@media (max-width: 1100px) {
    .knowledge-graph-masthead {
        grid-template-columns: 1fr;
    }

    .knowledge-graph-board-head {
        grid-template-columns: 1fr;
    }

    .knowledge-graph-status-rail,
    .knowledge-graph-focus-meta {
        grid-template-columns: 1fr;
    }

    /* 设计意图：中屏先改成单栏，优先保证图谱画布宽度和节点标签的可读性 */
    .knowledge-graph-shell {
        grid-template-columns: 1fr;
    }

    .knowledge-graph-canvas {
        min-height: 520px;
    }
}

@media (max-width: 768px) {
    .chat-knowledge-banner-card,
    .knowledge-chat-migration-banner {
        flex-direction: column;
        align-items: stretch;
    }

    .chat-knowledge-banner-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .chat-knowledge-toggle,
    .chat-knowledge-manage,
    .knowledge-chat-entry-button {
        justify-content: center;
        text-align: center;
    }

    .knowledge-graph-page {
        padding-left: 0;
        padding-right: 0;
    }

    .knowledge-graph-page-shell {
        gap: 16px;
    }

    .knowledge-graph-masthead,
    .knowledge-graph-board,
    .knowledge-graph-sidebar,
    .knowledge-graph-placeholder-card,
    .knowledge-graph-focus-card {
        border-radius: 22px;
    }

    .knowledge-graph-masthead {
        padding: 22px 20px;
    }

    .knowledge-graph-route-summary,
    .knowledge-graph-description,
    .knowledge-graph-sidebar-head p,
    .knowledge-graph-focus-description {
        font-size: 13px;
    }

    .knowledge-graph-shell {
        gap: 16px;
        min-height: auto;
    }

    .knowledge-graph-board,
    .knowledge-graph-sidebar {
        padding: 18px;
    }

    .knowledge-graph-sidebar {
        gap: 14px;
    }

    .knowledge-graph-board-copy h3,
    .knowledge-graph-sidebar-head h3,
    .knowledge-graph-placeholder-card h3 {
        font-size: 24px;
    }

    .knowledge-graph-focus-heading h3 {
        font-size: 28px;
    }

    .knowledge-graph-canvas {
        min-height: 380px;
        border-radius: 20px;
    }

    .knowledge-graph-stage-frame {
        border-radius: 20px;
    }

    .knowledge-graph-level-chip {
        width: 100%;
        justify-content: space-between;
    }

    .knowledge-graph-detail-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .knowledge-workspace {
        padding: 0 14px 14px;
    }

    .knowledge-drive-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .knowledge-toolbar-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .knowledge-search-box {
        width: 100%;
    }

    .knowledge-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
        row-gap: 14px;
        column-gap: 14px;
        justify-content: stretch;
    }

    .knowledge-drive-canvas {
        padding: 0 14px 18px;
    }

    .knowledge-workbench-panel {
        left: 14px;
        right: 14px;
        bottom: 108px;
        max-height: min(45vh, 320px);
    }

    .knowledge-ai-dock {
        left: 14px;
        right: 14px;
        bottom: 14px;
        border-radius: 20px;
    }

    .knowledge-reader-toolbar {
        min-height: auto;
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 12px 16px;
    }

    .knowledge-reader-actions {
        justify-content: space-between;
    }

    .knowledge-reader-body {
        padding: 28px 18px 84px;
    }

    .heatmap-cell {
        width: 10px;
        height: 10px;
    }

    .heatmap-month {
        width: 40px;
        font-size: 10px;
    }

    .heatmap-day-label {
        width: 25px;
        font-size: 10px;
    }

    .nav-item {
        font-size: 12px;
        padding: 6px 12px;
    }

    .course-card-new {
        margin-bottom: 16px;
    }

    .course-image {
        height: 120px;
    }

    .course-title-new {
        font-size: 14px;
    }

    .course-desc-new {
        font-size: 12px;
    }

    .course-image-small {
        height: 80px;
    }

    .course-title-small {
        font-size: 12px;
    }

    .course-price-small {
        font-size: 12px;
    }

    .package-title {
        font-size: 16px;
    }

    .package-desc {
        font-size: 12px;
    }

    .package-price {
        font-size: 18px;
    }
}

/* ==================== C++考纲星图重绘 ==================== */
/* 设计意图：把旧的浅蓝卡片页面整体压到背景层，让用户第一眼先看到“主轨夜空”和右侧聚焦控制台。 */
.knowledge-graph-page {
    background:
        radial-gradient(circle at 18% 12%, rgba(56, 189, 248, 0.16), transparent 20%),
        radial-gradient(circle at 82% 18%, rgba(250, 204, 21, 0.12), transparent 18%),
        linear-gradient(180deg, #040b16 0%, #091425 46%, #0d1b30 100%);
}

.knowledge-graph-page-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.knowledge-graph-masthead {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
    gap: 18px;
    align-items: stretch;
}

.knowledge-graph-masthead-copy,
.knowledge-graph-path-summary,
.knowledge-graph-board,
.knowledge-graph-sidebar {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 28px;
    background: rgba(6, 14, 27, 0.78);
    box-shadow: 0 22px 60px rgba(2, 6, 23, 0.5);
    backdrop-filter: blur(18px);
}

.knowledge-graph-masthead-copy {
    padding: 26px 28px;
}

.knowledge-graph-masthead-copy::before,
.knowledge-graph-path-summary::before,
.knowledge-graph-board::before,
.knowledge-graph-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left, rgba(125, 211, 252, 0.12), transparent 32%),
        radial-gradient(circle at bottom right, rgba(250, 204, 21, 0.06), transparent 28%);
    pointer-events: none;
}

.knowledge-graph-kicker,
.knowledge-graph-eyebrow,
.knowledge-graph-placeholder-eyebrow {
    margin: 0 0 10px;
    color: #7dd3fc;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.knowledge-graph-masthead-copy h2,
.knowledge-graph-board-copy h3,
.knowledge-graph-sidebar-head h3,
.knowledge-graph-placeholder-card h3,
.knowledge-graph-focus-card h3 {
    margin: 0;
    color: #f8fbff;
}

.knowledge-graph-masthead-copy h2 {
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing: -0.04em;
}

.knowledge-graph-route-summary,
.knowledge-graph-description,
.knowledge-graph-sidebar-head p,
.knowledge-graph-placeholder-card p,
.knowledge-graph-focus-card p {
    margin: 0;
    color: #9fb1c8;
    line-height: 1.75;
}

.knowledge-graph-route-summary {
    margin-top: 14px;
    max-width: 720px;
    font-size: 14px;
}

.knowledge-graph-path-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
}

.knowledge-graph-path-chip {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(125, 211, 252, 0.12);
    border-radius: 20px;
    background: rgba(7, 20, 37, 0.72);
    padding: 16px 18px;
}

.knowledge-graph-path-chip span {
    display: block;
    color: #6c86a6;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.knowledge-graph-path-chip strong {
    display: block;
    margin-top: 10px;
    color: #f8fbff;
    font-size: 16px;
    line-height: 1.5;
}

.knowledge-graph-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.9fr);
    gap: 18px;
    align-items: stretch;
}

.knowledge-graph-board {
    padding: 22px;
}

.knowledge-graph-board-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.knowledge-graph-board-copy {
    min-width: 0;
    max-width: 640px;
}

.knowledge-graph-board-copy h3 {
    font-size: 30px;
    letter-spacing: -0.03em;
}

.knowledge-graph-description {
    margin-top: 10px;
    font-size: 14px;
}

.knowledge-graph-legend {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: min(320px, 100%);
}

.knowledge-graph-legend-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 18px;
    background: rgba(8, 20, 38, 0.72);
    padding: 12px 14px;
}

.knowledge-graph-legend-swatch {
    display: inline-flex;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    border: 1px solid transparent;
    border-radius: 999px;
    flex-shrink: 0;
}

.knowledge-graph-legend-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.knowledge-graph-legend-copy strong {
    color: #f8fbff;
    font-size: 13px;
}

.knowledge-graph-legend-copy small {
    color: #88a0bd;
    font-size: 11px;
    line-height: 1.55;
}

.knowledge-graph-status,
.knowledge-graph-error {
    position: relative;
    z-index: 1;
    margin-top: 18px;
}

.knowledge-graph-status-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.knowledge-graph-status-pill {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 22px;
    background: rgba(6, 18, 33, 0.84);
    padding: 16px 18px;
}

.knowledge-graph-status-pill.emphasis {
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.22), transparent 38%),
        rgba(8, 22, 40, 0.92);
    border-color: rgba(125, 211, 252, 0.2);
}

.knowledge-graph-status-label {
    display: block;
    color: #6d87a5;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.knowledge-graph-status-pill strong {
    display: block;
    margin-top: 10px;
    color: #f8fbff;
    font-size: 24px;
    line-height: 1.2;
}

.knowledge-graph-status-pill small {
    display: block;
    margin-top: 8px;
    color: #8ea6c2;
    font-size: 12px;
    line-height: 1.5;
}

.knowledge-graph-level-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.knowledge-graph-level-chip {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 132px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 999px;
    background: rgba(6, 18, 33, 0.8);
    padding: 10px 14px;
    color: #dbe7f5;
    font-size: 12px;
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.knowledge-graph-level-chip:hover,
.knowledge-graph-level-chip.is-active {
    transform: translateY(-1px);
    border-color: rgba(125, 211, 252, 0.36);
    box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.14), 0 12px 26px rgba(8, 47, 73, 0.26);
}

.knowledge-graph-level-chip span {
    color: #93a8c1;
}

.knowledge-graph-level-chip strong {
    color: #f8fbff;
}

.knowledge-graph-error {
    border: 1px solid rgba(251, 113, 133, 0.35);
    border-radius: 18px;
    background: rgba(62, 14, 24, 0.72);
    padding: 12px 14px;
    color: #fecdd3;
    font-size: 13px;
}

.knowledge-graph-stage-frame {
    position: relative;
    overflow: hidden;
    min-height: 760px;
    margin-top: 18px;
    border: 1px solid rgba(125, 211, 252, 0.14);
    border-radius: 28px;
    background:
        radial-gradient(circle at 26% 18%, rgba(56, 189, 248, 0.11), transparent 18%),
        radial-gradient(circle at 74% 70%, rgba(250, 204, 21, 0.06), transparent 14%),
        linear-gradient(180deg, rgba(4, 12, 23, 0.94), rgba(8, 19, 34, 0.94));
}

.knowledge-graph-stage-frame::before,
.knowledge-graph-stage-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.knowledge-graph-stage-frame::before {
    background:
        radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.95) 0 1px, transparent 1.5px),
        radial-gradient(circle at 64% 22%, rgba(255, 255, 255, 0.82) 0 1px, transparent 1.5px),
        radial-gradient(circle at 84% 34%, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.6px),
        radial-gradient(circle at 72% 78%, rgba(255, 255, 255, 0.68) 0 1px, transparent 1.6px),
        radial-gradient(circle at 38% 84%, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.5px),
        radial-gradient(circle at 54% 58%, rgba(125, 211, 252, 0.72) 0 1.2px, transparent 1.8px);
    opacity: 0.9;
}

.knowledge-graph-stage-frame::after {
    background:
        radial-gradient(circle at center, transparent 0 18%, rgba(125, 211, 252, 0.06) 18.2%, transparent 18.8%),
        radial-gradient(circle at center, transparent 0 35%, rgba(125, 211, 252, 0.05) 35.2%, transparent 35.8%),
        radial-gradient(circle at center, transparent 0 53%, rgba(125, 211, 252, 0.04) 53.3%, transparent 53.8%);
}

.knowledge-graph-canvas {
    position: relative;
    z-index: 1;
    min-height: 760px;
}

.knowledge-graph-sidebar {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.knowledge-graph-sidebar-head {
    position: relative;
    z-index: 1;
    padding: 4px 2px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.knowledge-graph-sidebar-head h3 {
    font-size: 28px;
    letter-spacing: -0.03em;
}

.knowledge-graph-sidebar-head p {
    margin-top: 10px;
    font-size: 13px;
}

.knowledge-graph-detail {
    position: relative;
    z-index: 1;
    flex: 1;
    padding-top: 18px;
}

.knowledge-graph-placeholder-card,
.knowledge-graph-focus-card {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 26px;
    background: rgba(8, 20, 38, 0.82);
}

.knowledge-graph-placeholder-card {
    padding: 22px;
}

.knowledge-graph-placeholder-card h3 {
    margin-top: 8px;
    font-size: 26px;
}

.knowledge-graph-placeholder-card p {
    margin-top: 12px;
    font-size: 14px;
}

.knowledge-graph-focus-card {
    padding: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.knowledge-graph-focus-heading {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.knowledge-graph-focus-track {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 700;
}

.knowledge-graph-focus-heading h3 {
    font-size: 30px;
    letter-spacing: -0.04em;
}

.knowledge-graph-focus-heading p {
    color: #8ba2be;
    font-size: 13px;
}

.knowledge-graph-focus-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.knowledge-graph-focus-stat {
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 20px;
    background: rgba(7, 17, 31, 0.72);
    padding: 14px 15px;
}

.knowledge-graph-focus-stat span {
    display: block;
    color: #6d87a5;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.knowledge-graph-focus-stat strong {
    display: block;
    margin-top: 8px;
    color: #f8fbff;
    font-size: 16px;
    line-height: 1.45;
}

.knowledge-graph-focus-description {
    margin-top: 18px;
    font-size: 14px;
}

.knowledge-graph-progress-shell {
    margin-top: 18px;
}

.knowledge-graph-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #8ca6c5;
    font-size: 13px;
}

.knowledge-graph-progress-meta strong {
    color: #f8fbff;
}

.knowledge-graph-progress-bar {
    height: 12px;
    margin-top: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.knowledge-graph-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.knowledge-graph-detail-section {
    margin-top: 18px;
}

.knowledge-graph-detail-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.knowledge-graph-detail-section-head h4 {
    margin: 0;
    color: #f8fbff;
    font-size: 16px;
}

.knowledge-graph-detail-section-head small {
    color: #7287a0;
    font-size: 11px;
}

.knowledge-graph-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.knowledge-graph-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(125, 211, 252, 0.12);
    border-radius: 999px;
    background: rgba(12, 30, 52, 0.72);
    padding: 7px 11px;
    color: #deebfa;
    font-size: 12px;
}

.knowledge-graph-chip.muted {
    border-color: rgba(148, 163, 184, 0.1);
    color: #8094ae;
}

.knowledge-graph-problem-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.knowledge-graph-problem-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 18px;
    background: rgba(7, 17, 31, 0.78);
    padding: 14px 15px;
}

.knowledge-graph-problem-item input {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    accent-color: #38bdf8;
}

.knowledge-graph-problem-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.knowledge-graph-problem-copy strong {
    color: #f8fbff;
    font-size: 14px;
    line-height: 1.55;
}

.knowledge-graph-problem-copy small {
    display: inline-flex;
    flex-shrink: 0;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.12);
    padding: 5px 9px;
    color: #7dd3fc;
    font-size: 11px;
}

.knowledge-graph-problem-empty,
.knowledge-graph-focus-footnote {
    color: #8498b2;
    font-size: 12px;
    line-height: 1.7;
}

.knowledge-graph-focus-footnote {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

@media (max-width: 1280px) {
    .knowledge-graph-masthead,
    .knowledge-graph-shell {
        grid-template-columns: 1fr;
    }

    .knowledge-graph-path-summary,
    .knowledge-graph-status-rail,
    .knowledge-graph-focus-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .knowledge-graph-stage-frame,
    .knowledge-graph-canvas {
        min-height: 680px;
    }
}

@media (max-width: 768px) {
    .knowledge-graph-page-shell,
    .knowledge-graph-shell {
        gap: 14px;
    }

    .knowledge-graph-masthead-copy,
    .knowledge-graph-path-summary,
    .knowledge-graph-board,
    .knowledge-graph-sidebar {
        border-radius: 22px;
    }

    .knowledge-graph-masthead-copy,
    .knowledge-graph-board,
    .knowledge-graph-sidebar {
        padding: 18px;
    }

    .knowledge-graph-path-summary,
    .knowledge-graph-status-rail,
    .knowledge-graph-focus-meta {
        grid-template-columns: 1fr;
    }

    .knowledge-graph-board-head {
        flex-direction: column;
    }

    .knowledge-graph-legend {
        min-width: 0;
        width: 100%;
    }

    .knowledge-graph-level-chip {
        width: 100%;
    }

    .knowledge-graph-stage-frame,
    .knowledge-graph-canvas {
        min-height: 520px;
    }

    .knowledge-graph-board-copy h3,
    .knowledge-graph-sidebar-head h3,
    .knowledge-graph-focus-heading h3,
    .knowledge-graph-placeholder-card h3 {
        font-size: 24px;
    }

    .knowledge-graph-problem-copy {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==================== 星座风格知识图谱 ==================== */
/* 设计意图：最终覆盖旧“夜空主轨”视觉，保留 Obsidian 式关系图谱结构，同时把节点做成更适合孩子观看的星星知识点。 */
.knowledge-graph-page {
    --kg-bg: var(--openstd-bg);
    --kg-bg-soft: #101712;
    --kg-panel: rgba(21, 26, 24, 0.88);
    --kg-panel-strong: rgba(21, 26, 24, 0.96);
    --kg-border: var(--openstd-border);
    --kg-text: var(--openstd-heading);
    --kg-muted: var(--openstd-helper);
    --kg-line: rgba(154, 252, 113, 0.34);
    --kg-accent: var(--openstd-primary);
    --kg-progress: var(--openstd-secondary);
    flex: 1 1 auto;
    position: relative;
    width: 100%;
    height: calc(100vh - 56px);
    min-height: calc(100vh - 56px);
    padding: 0;
    overflow: hidden;
    /* 设计意图：把图谱底图接回全站黑绿色底座，让节点关系像浮在同一张学习工作台上。 */
    background:
        radial-gradient(circle at 72% 18%, rgba(154, 252, 113, 0.10), transparent 34%),
        radial-gradient(circle at 18% 82%, rgba(102, 225, 214, 0.08), transparent 28%),
        linear-gradient(90deg, rgba(244, 236, 216, 0.045) 1px, transparent 1px),
        linear-gradient(0deg, rgba(244, 236, 216, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 22px 28px, rgba(244, 236, 216, 0.20) 0 1px, transparent 1.6px),
        radial-gradient(circle at 88px 74px, rgba(154, 252, 113, 0.18) 0 1.1px, transparent 1.8px),
        radial-gradient(circle at 138px 34px, rgba(102, 225, 214, 0.16) 0 1px, transparent 1.7px),
        var(--openstd-bg);
    background-size: auto, auto, 34px 34px, 34px 34px, 150px 150px, 240px 240px, 190px 190px, auto;
    color: var(--kg-text);
}

/* 设计意图：图谱只填满主内容区，保留应用侧栏和顶部 header，避免学习导航在星图页消失。 */
.knowledge-graph-page-shell {
    position: relative;
    display: flex;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    min-height: 0;
    flex-direction: column;
    gap: 0;
}

.knowledge-graph-topbar {
    position: relative;
    z-index: 5;
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(13, 17, 26, 0.94);
    padding: 0 18px 0 22px;
}

.knowledge-graph-title-block {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 12px;
}

.knowledge-graph-kicker,
.knowledge-graph-eyebrow,
.knowledge-graph-placeholder-eyebrow {
    margin: 0;
    color: var(--kg-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.knowledge-graph-title-block h2 {
    margin: 0;
    color: var(--kg-text);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
}

.knowledge-graph-shell {
    position: relative;
    display: block;
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.knowledge-graph-board,
.knowledge-graph-sidebar {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.knowledge-graph-board::before,
.knowledge-graph-board::after,
.knowledge-graph-sidebar::before,
.knowledge-graph-sidebar::after {
    content: none;
}

.knowledge-graph-board {
    position: absolute;
    inset: 0;
    isolation: isolate;
    width: 100%;
    height: 100%;
    padding: 0;
}

/* 设计意图：氛围层只负责轻量星光和流星装饰，保持 pointer-events 关闭以免干扰图谱拖拽、缩放和节点点击。 */
.knowledge-graph-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.knowledge-graph-atmosphere::before,
.knowledge-graph-atmosphere::after {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0.32;
    background:
        radial-gradient(circle at 14% 22%, rgba(244, 236, 216, 0.24) 0 1px, transparent 1.9px),
        radial-gradient(circle at 61% 16%, rgba(154, 252, 113, 0.22) 0 1px, transparent 1.8px),
        radial-gradient(circle at 78% 68%, rgba(102, 225, 214, 0.18) 0 1.2px, transparent 2px),
        radial-gradient(circle at 32% 76%, rgba(244, 236, 216, 0.16) 0 1px, transparent 1.8px);
    background-size: 380px 280px, 460px 340px, 560px 380px, 500px 320px;
    animation: kg-star-breathe 9s ease-in-out infinite;
}

.knowledge-graph-atmosphere::after {
    opacity: 0.18;
    transform: translate3d(18px, -12px, 0);
    animation-duration: 13s;
    animation-delay: -3s;
}

.knowledge-graph-meteor {
    --meteor-start-x: -20vw;
    --meteor-start-y: 12vh;
    --meteor-drift-x: 122vw;
    --meteor-drift-y: 44vh;
    --meteor-rotate: 22deg;
    position: absolute;
    top: 0;
    left: 0;
    width: 136px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(154, 252, 113, 0.68), rgba(102, 225, 214, 0));
    box-shadow: 0 0 16px rgba(154, 252, 113, 0.24);
    opacity: 0;
    transform: translate3d(var(--meteor-start-x), var(--meteor-start-y), 0) rotate(var(--meteor-rotate));
    animation: kg-meteor-drift 18s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.knowledge-graph-meteor::after {
    position: absolute;
    top: 50%;
    right: 0;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(154, 252, 113, 0.82);
    box-shadow: 0 0 14px rgba(154, 252, 113, 0.48);
    content: "";
    transform: translate(30%, -50%);
}

.knowledge-graph-meteor.meteor-two {
    --meteor-start-x: -24vw;
    --meteor-start-y: 8vh;
    --meteor-drift-x: 118vw;
    --meteor-drift-y: 38vh;
    --meteor-rotate: 18deg;
    top: 18%;
    animation-delay: -5s;
    animation-duration: 23s;
}

.knowledge-graph-meteor.meteor-three {
    --meteor-start-x: -18vw;
    --meteor-start-y: 4vh;
    --meteor-drift-x: 126vw;
    --meteor-drift-y: 50vh;
    --meteor-rotate: 24deg;
    top: 34%;
    animation-delay: -10s;
    animation-duration: 29s;
}

@keyframes kg-star-breathe {
    0%, 100% {
        opacity: 0.18;
    }
    50% {
        opacity: 0.42;
    }
}

@keyframes kg-meteor-drift {
    0%, 70% {
        opacity: 0;
        transform: translate3d(var(--meteor-start-x), var(--meteor-start-y), 0) rotate(var(--meteor-rotate));
    }
    74% {
        opacity: 0.56;
    }
    84% {
        opacity: 0;
        transform: translate3d(calc(var(--meteor-start-x) + var(--meteor-drift-x)), calc(var(--meteor-start-y) + var(--meteor-drift-y)), 0) rotate(var(--meteor-rotate));
    }
    100% {
        opacity: 0;
        transform: translate3d(calc(var(--meteor-start-x) + var(--meteor-drift-x)), calc(var(--meteor-start-y) + var(--meteor-drift-y)), 0) rotate(var(--meteor-rotate));
    }
}

.knowledge-graph-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    min-height: 0;
    height: 100%;
}

.knowledge-graph-toolbar {
    position: absolute;
    z-index: 4;
    top: 18px;
    left: 18px;
    display: flex;
    gap: 7px;
}

.knowledge-graph-toolbar button,
.knowledge-graph-drawer-close {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(154, 252, 113, 0.32);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(244, 236, 216, 0.08), rgba(244, 236, 216, 0.02)),
        rgba(21, 26, 24, 0.88);
    color: var(--openstd-primary);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28), inset 0 0 18px rgba(154, 252, 113, 0.08);
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.knowledge-graph-toolbar button:hover,
.knowledge-graph-drawer-close:hover {
    border-color: rgba(154, 252, 113, 0.68);
    background:
        linear-gradient(180deg, rgba(154, 252, 113, 0.14), rgba(102, 225, 214, 0.08)),
        rgba(29, 36, 31, 0.96);
    color: var(--openstd-heading);
}

.knowledge-graph-toolbar button.is-active {
    border-color: rgba(255, 232, 142, 0.74);
    background:
        linear-gradient(180deg, rgba(255, 232, 142, 0.16), rgba(154, 252, 113, 0.08)),
        rgba(29, 36, 31, 0.96);
    color: #fff2a6;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28), 0 0 18px rgba(255, 220, 96, 0.22);
}

.knowledge-graph-toolbar [data-knowledge-layout-save] {
    /* 中文注释：管理员保存入口是短命令文本，给它独立宽度，避免被 32px 图标按钮规则挤成竖排。 */
    width: auto;
    min-width: 62px;
    padding: 0 10px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
}

.knowledge-graph-legend {
    position: relative;
    z-index: 5;
    display: flex;
    min-width: 0;
    flex: 1;
    justify-content: flex-end;
    gap: 8px;
}

.knowledge-graph-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--openstd-soft-border);
    border-radius: 999px;
    background: rgba(21, 26, 24, 0.72);
    padding: 6px 10px;
}

.knowledge-graph-legend-swatch {
    width: 9px;
    height: 9px;
    margin: 0;
    border-radius: 999px;
}

.knowledge-graph-legend-copy {
    display: inline-flex;
}

.knowledge-graph-legend-copy strong {
    color: var(--openstd-heading);
    font-size: 11px;
    font-weight: 600;
}

.knowledge-graph-legend-copy small {
    display: none;
}

.knowledge-graph-status {
    position: absolute;
    z-index: 4;
    right: 24px;
    bottom: 22px;
    left: 24px;
    margin: 0;
    pointer-events: none;
}

.knowledge-graph-status-rail {
    display: flex;
    max-width: 720px;
    gap: 9px;
}

.knowledge-graph-status-pill {
    min-width: 128px;
    border: 1px solid rgba(154, 252, 113, 0.20);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(244, 236, 216, 0.08), rgba(244, 236, 216, 0.02)),
        rgba(21, 26, 24, 0.84);
    padding: 10px 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
}

.knowledge-graph-status-pill.emphasis {
    border-color: rgba(154, 252, 113, 0.42);
    background:
        linear-gradient(135deg, rgba(154, 252, 113, 0.16), rgba(102, 225, 214, 0.10)),
        rgba(29, 36, 31, 0.92);
}

.knowledge-graph-status-label {
    display: block;
    color: var(--kg-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.knowledge-graph-status-pill strong {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: var(--openstd-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.knowledge-graph-status-pill small {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--kg-muted);
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.knowledge-graph-level-rail {
    display: flex;
    max-width: min(100%, 920px);
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
    pointer-events: auto;
}

.knowledge-graph-level-chip {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(154, 252, 113, 0.18);
    border-radius: 999px;
    background: rgba(21, 26, 24, 0.76);
    padding: 6px 9px;
    color: var(--openstd-helper);
    cursor: pointer;
    font-size: 11px;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.knowledge-graph-level-chip:hover,
.knowledge-graph-level-chip.is-active {
    transform: none;
    border-color: rgba(154, 252, 113, 0.50);
    background: rgba(29, 36, 31, 0.94);
    box-shadow: 0 0 18px rgba(154, 252, 113, 0.16);
}

.knowledge-graph-level-chip span,
.knowledge-graph-level-chip strong {
    color: inherit;
    font-size: inherit;
}

.knowledge-graph-error {
    position: absolute;
    z-index: 6;
    left: 18px;
    right: 18px;
    top: 18px;
    margin: 0;
    border: 1px solid rgba(248, 113, 113, 0.4);
    border-radius: 10px;
    background: rgba(64, 18, 28, 0.92);
    padding: 10px 12px;
    color: #fecdd3;
    font-size: 13px;
}

.knowledge-graph-sidebar {
    position: absolute;
    z-index: 7;
    top: 14px;
    right: 14px;
    bottom: 14px;
    display: block;
    width: clamp(390px, 27vw, 460px);
    padding: 0;
    border: 1px solid rgba(154, 252, 113, 0.22);
    border-radius: 22px;
    background:
        radial-gradient(circle at 28px 30px, rgba(154, 252, 113, 0.12) 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 94px 84px, rgba(102, 225, 214, 0.11) 0 1px, transparent 1.7px),
        linear-gradient(180deg, rgba(21, 26, 24, 0.98), rgba(10, 12, 12, 0.99));
    background-size: 130px 130px, 190px 190px, auto;
    box-shadow: -18px 18px 46px rgba(0, 0, 0, 0.32);
    transform: translateX(calc(100% + 18px));
    transition: transform 0.22s ease;
}

.knowledge-graph-sidebar.is-open {
    transform: translateX(0);
}

.knowledge-graph-detail {
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.knowledge-graph-placeholder-card,
.knowledge-graph-focus-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.knowledge-graph-placeholder-card {
    padding: 18px;
}

.knowledge-graph-placeholder-card h3,
.knowledge-graph-focus-heading h3 {
    margin: 0;
    color: var(--kg-text);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
}

.knowledge-graph-placeholder-card p,
.knowledge-graph-focus-card p {
    margin: 8px 0 0;
    color: var(--kg-muted);
    line-height: 1.65;
}

.knowledge-graph-focus-card {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    padding: 0;
}

.knowledge-graph-focus-header {
    position: relative;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(154, 252, 113, 0.14);
    background:
        linear-gradient(180deg, rgba(244, 236, 216, 0.05), rgba(244, 236, 216, 0.015)),
        rgba(21, 26, 24, 0.72);
    padding: 18px 18px 16px;
}

.knowledge-graph-focus-heading {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding-right: 42px;
}

.knowledge-graph-drawer-close {
    position: absolute;
    /* 设计意图：关闭按钮浮在标题区之上，避免后渲染的标题容器覆盖按钮命中区域。 */
    z-index: 2;
    top: 18px;
    right: 18px;
}

.knowledge-graph-focus-track {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 700;
}

.knowledge-graph-focus-heading p {
    color: var(--openstd-subtle);
    font-size: 12px;
}

.knowledge-graph-focus-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.knowledge-graph-focus-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0;
}

.knowledge-graph-focus-stat {
    border: 1px solid rgba(154, 252, 113, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    padding: 10px;
}

.knowledge-graph-focus-stat span {
    display: block;
    color: var(--kg-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
}

.knowledge-graph-focus-stat strong {
    display: block;
    margin-top: 6px;
    color: var(--kg-text);
    font-size: 15px;
    line-height: 1.35;
}

.knowledge-graph-focus-description {
    margin-top: 0;
    font-size: 13px;
}

.knowledge-graph-progress-shell {
    margin-top: 0;
    border: 1px solid rgba(102, 225, 214, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    padding: 12px;
}

.knowledge-graph-progress-meta {
    display: flex;
    justify-content: space-between;
    color: var(--kg-muted);
    font-size: 12px;
}

.knowledge-graph-progress-meta strong {
    color: var(--kg-text);
}

.knowledge-graph-progress-bar {
    height: 7px;
    margin-top: 8px;
    border-radius: 999px;
    background: rgba(102, 225, 214, 0.12);
    overflow: hidden;
}

.knowledge-graph-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.knowledge-graph-detail-body {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px 18px;
}

.knowledge-graph-detail-section {
    margin-top: 18px;
}

.knowledge-graph-problems-section {
    margin-top: 16px;
}

.knowledge-graph-detail-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.knowledge-graph-detail-section-head h4 {
    margin: 0;
    color: var(--kg-text);
    font-size: 15px;
}

.knowledge-graph-detail-section-head small {
    max-width: 210px;
    color: var(--kg-muted);
    font-size: 11px;
    line-height: 1.45;
    text-align: right;
}

.knowledge-graph-problem-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 10px;
}

.knowledge-graph-problem-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(154, 252, 113, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    padding: 11px 12px;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

.knowledge-graph-problem-item:hover,
.knowledge-graph-problem-item:focus-visible {
    border-color: rgba(154, 252, 113, 0.42);
    background: rgba(255, 255, 255, 0.07);
}

.knowledge-graph-problem-item:focus-visible {
    outline: 2px solid rgba(154, 252, 113, 0.34);
    outline-offset: 2px;
}

.knowledge-graph-problem-item input {
    width: 15px;
    height: 15px;
    margin-top: 3px;
    accent-color: var(--kg-accent);
}

.knowledge-graph-problem-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
}

.knowledge-graph-problem-copy strong {
    color: var(--kg-text);
    font-size: 13px;
    line-height: 1.45;
}

.knowledge-graph-problem-meta {
    display: inline-flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
}

.knowledge-graph-problem-meta small,
.knowledge-graph-problem-meta em {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 10px;
    font-style: normal;
    line-height: 1;
}

.knowledge-graph-problem-meta small {
    background: rgba(154, 252, 113, 0.14);
    color: var(--openstd-primary-hover);
}

.knowledge-graph-problem-meta em {
    background: rgba(102, 225, 214, 0.12);
    color: var(--openstd-secondary);
}

.knowledge-graph-problem-remove,
.knowledge-graph-teacher-action {
    flex-shrink: 0;
    border: 1px solid rgba(249, 214, 109, 0.32);
    border-radius: 999px;
    background: rgba(249, 214, 109, 0.1);
    padding: 6px 10px;
    color: #ffe9a6;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.knowledge-graph-problem-remove:hover,
.knowledge-graph-teacher-action:hover {
    border-color: rgba(249, 214, 109, 0.58);
    background: rgba(249, 214, 109, 0.18);
    color: #fff7d8;
}

.knowledge-graph-problem-remove:disabled,
.knowledge-graph-teacher-action:disabled {
    cursor: progress;
    opacity: 0.66;
}

.knowledge-graph-teacher-panel {
    border-top: 1px solid rgba(125, 211, 252, 0.12);
    padding-top: 14px;
}

.knowledge-graph-teacher-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.knowledge-graph-teacher-recommendation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(125, 211, 252, 0.13);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    padding: 10px 11px;
}

.knowledge-graph-teacher-recommendation .knowledge-graph-problem-copy,
.knowledge-graph-teacher-recommendation .knowledge-graph-problem-copy strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.knowledge-graph-teacher-empty,
.knowledge-graph-teacher-message {
    color: var(--kg-muted);
    font-size: 12px;
    line-height: 1.55;
}

.knowledge-graph-teacher-message {
    margin-top: 8px;
    color: #baf2d8;
}

.knowledge-graph-teacher-message.is-error {
    color: #fecaca;
}

.knowledge-graph-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.knowledge-graph-chip {
    display: inline-flex;
    border: 1px solid var(--openstd-soft-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    padding: 5px 8px;
    color: var(--openstd-helper);
    font-size: 11px;
}

.knowledge-graph-chip.muted,
.knowledge-graph-problem-empty,
.knowledge-graph-focus-footnote {
    color: var(--kg-muted);
    font-size: 12px;
    line-height: 1.65;
}

.knowledge-graph-focus-footnote {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}

@media (max-width: 1180px) {
    .knowledge-graph-topbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 12px 16px;
    }

    .knowledge-graph-legend {
        justify-content: flex-start;
        width: 100%;
        flex-wrap: wrap;
    }

    .knowledge-graph-shell {
        min-height: 660px;
    }

    .knowledge-graph-sidebar {
        width: min(420px, calc(100% - 28px));
        min-width: 0;
    }
}

@media (max-width: 760px) {
    .knowledge-graph-page-shell {
        min-height: calc(100vh - 56px);
    }

    .knowledge-graph-title-block {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .knowledge-graph-shell {
        min-height: 620px;
    }

    .knowledge-graph-toolbar {
        top: 12px;
        left: 12px;
    }

    .knowledge-graph-atmosphere::before {
        opacity: 0.26;
        animation-name: kg-star-breathe-mobile-primary;
    }

    .knowledge-graph-atmosphere::after {
        opacity: 0.14;
        animation-name: kg-star-breathe-mobile-secondary;
    }

    .knowledge-graph-meteor {
        width: 112px;
        box-shadow: 0 0 10px rgba(255, 231, 155, 0.22);
    }

    .knowledge-graph-meteor.meteor-three {
        display: none;
    }

    .knowledge-graph-status {
        right: 12px;
        bottom: 12px;
        left: 12px;
    }

    .knowledge-graph-status-rail {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: none;
    }

    .knowledge-graph-status-pill {
        min-width: 0;
        padding: 8px;
    }

    .knowledge-graph-status-pill strong {
        font-size: 13px;
    }

    .knowledge-graph-level-rail {
        max-height: 74px;
        overflow-y: auto;
    }

    .knowledge-graph-sidebar {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        min-width: 0;
        border-radius: 0;
        transform: translateX(100%);
    }

    .knowledge-graph-sidebar.is-open {
        transform: translateX(0);
    }

    .knowledge-graph-focus-meta {
        grid-template-columns: 1fr;
    }

    .knowledge-graph-teacher-recommendation {
        align-items: stretch;
        flex-direction: column;
    }

    .knowledge-graph-teacher-action {
        align-self: flex-start;
    }

    .knowledge-graph-problem-copy {
        flex-direction: column;
        align-items: flex-start;
    }
}

@keyframes kg-star-breathe-mobile-primary {
    0%, 100% {
        opacity: 0.12;
    }
    50% {
        opacity: 0.26;
    }
}

@keyframes kg-star-breathe-mobile-secondary {
    0%, 100% {
        opacity: 0.06;
    }
    50% {
        opacity: 0.14;
    }
}

@media (max-width: 767px) {
    header.app-topbar {
        height: 58px;
        padding-right: 14px;
        padding-left: 14px;
    }

    #chatContainer.app-chat-canvas {
        padding: 22px 16px 12px;
        background-size: 36px 36px, 36px 36px, auto;
    }

    #welcomeScreen.welcome-screen {
        margin-top: 34px;
        text-align: left;
    }

    #welcomeScreen.welcome-screen::before {
        margin-right: 0;
        margin-left: 0;
    }

    #welcomeScreen .welcome-title {
        font-size: 36px;
        line-height: 1.08;
    }

    #welcomeScreen .welcome-subtitle {
        margin-right: 0;
        margin-left: 0;
        font-size: 14px;
    }

    .welcome-card {
        min-height: 108px;
    }

    .chat-input-dock {
        width: 100%;
    }

    .input-container {
        width: 100%;
    }

    .chat-input-tools {
        width: 100%;
    }

    #chatInputArea {
        padding: 14px 16px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .welcome-card,
    .btn-gh,
    .sidebar-item,
    .chat-input-wrapper {
        transition: none !important;
        transform: none !important;
    }

    .knowledge-graph-atmosphere::before,
    .knowledge-graph-atmosphere::after,
    .knowledge-graph-meteor {
        animation: none !important;
    }

    .knowledge-graph-meteor {
        display: none;
    }

    .app-main-shell.is-chat-active .app-algorithm-backdrop {
        opacity: 0.34;
    }
}

/* ==================== 全局文本选中解释弹框 ==================== */
/* 设计意图：选区工具只保留即时动作，颜色完全继承主题变量，让深色和浅色题目页使用同一套视觉语言。 */
.selection-explain-popover {
    position: fixed;
    z-index: 1200;
    width: auto;
    max-width: min(420px, calc(100vw - 24px));
    max-height: min(560px, calc(100vh - 24px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    color: var(--openstd-heading);
    background: var(--openstd-surface-raised);
    border: 1px solid var(--openstd-soft-border);
    border-radius: 8px;
    box-shadow: var(--openstd-shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.selection-explain-popover.is-expanded {
    width: min(420px, calc(100vw - 24px));
    padding: 10px;
}

.selection-explain-popover.hidden {
    display: none;
}

.selection-explain-actions {
    display: grid;
    grid-template-columns: 34px auto auto;
    align-items: center;
    gap: 8px;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.selection-explain-popover.is-dragging .selection-explain-actions {
    cursor: grabbing;
}

.selection-explain-icon,
.selection-explain-primary,
.selection-explain-secondary {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.selection-explain-icon {
    width: 34px;
    color: var(--openstd-primary);
    background: var(--openstd-primary-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--openstd-primary) 28%, transparent);
}

.selection-explain-icon-glyph {
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
}

.selection-explain-primary,
.selection-explain-secondary {
    border: 1px solid var(--openstd-soft-border);
    cursor: pointer;
    gap: 6px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.selection-explain-primary {
    color: var(--openstd-bg);
    background: linear-gradient(135deg, var(--openstd-primary), var(--openstd-accent));
    border-color: color-mix(in srgb, var(--openstd-primary) 54%, transparent);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--openstd-primary) 22%, transparent);
}

.selection-explain-primary:hover {
    background: linear-gradient(135deg, var(--openstd-primary-hover), var(--openstd-accent));
    box-shadow: 0 12px 26px color-mix(in srgb, var(--openstd-primary) 28%, transparent);
    transform: translateY(-1px);
}

.selection-explain-primary:disabled {
    cursor: wait;
    opacity: 0.78;
    transform: none;
}

.selection-explain-primary.is-loading svg {
    animation: selection-explain-spin 1s linear infinite;
}

.selection-explain-secondary {
    color: var(--openstd-heading);
    background: var(--openstd-button-bg);
}

.selection-explain-secondary:hover,
.selection-explain-secondary.is-copied {
    color: var(--openstd-primary);
    background: var(--openstd-primary-soft);
    border-color: color-mix(in srgb, var(--openstd-primary) 42%, transparent);
}

.selection-explain-secondary:disabled,
.selection-explain-secondary.is-disabled {
    cursor: not-allowed;
    opacity: 0.58;
    transform: none;
}

.selection-explain-dialog-body {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.selection-explain-dialog-body.hidden {
    display: none;
}

.selection-explain-result {
    min-height: 88px;
    max-height: 360px;
    overflow: hidden;
    padding: 12px;
    border: 1px solid var(--openstd-soft-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--openstd-surface-raised) 86%, var(--openstd-bg));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--openstd-heading) 8%, transparent);
}

.selection-explain-result.is-error {
    border-color: color-mix(in srgb, var(--openstd-danger) 48%, transparent);
    background: var(--openstd-danger-soft);
}

.selection-explain-result-label {
    margin-bottom: 8px;
    color: var(--openstd-primary);
    font-size: 12px;
    font-weight: 800;
}

.selection-explain-result-body {
    color: var(--openstd-body);
    font-size: 13px;
    line-height: 1.72;
    white-space: pre-line;
    word-break: break-word;
}

.selection-explain-conversation {
    max-height: 292px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 2px;
}

.selection-explain-message {
    max-width: 94%;
    display: grid;
    gap: 5px;
    padding: 9px 10px;
    border: 1px solid var(--openstd-soft-border);
    border-radius: 8px;
    color: var(--openstd-body);
    background: color-mix(in srgb, var(--openstd-surface-raised) 78%, var(--openstd-bg));
    word-break: break-word;
}

.selection-explain-message.is-assistant {
    align-self: flex-start;
    border-color: color-mix(in srgb, var(--openstd-primary) 32%, var(--openstd-soft-border));
    background: color-mix(in srgb, var(--openstd-primary-soft) 48%, var(--openstd-surface-raised));
}

.selection-explain-message.is-user {
    align-self: flex-end;
    border-color: color-mix(in srgb, var(--openstd-accent) 35%, var(--openstd-soft-border));
    background: color-mix(in srgb, var(--openstd-accent) 18%, var(--openstd-surface-raised));
}

.selection-explain-message.is-error {
    border-color: color-mix(in srgb, var(--openstd-danger) 48%, transparent);
    background: var(--openstd-danger-soft);
}

.selection-explain-message.is-pending .selection-explain-message-body {
    color: var(--openstd-muted);
}

.selection-explain-message-speaker {
    color: var(--openstd-primary);
    font-size: 11px;
    font-weight: 800;
}

.selection-explain-message.is-user .selection-explain-message-speaker {
    color: var(--openstd-accent);
}

.selection-explain-message-body {
    font-size: 13px;
    line-height: 1.68;
    white-space: pre-line;
}

.selection-explain-followup-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
}

.selection-explain-followup-form.hidden {
    display: none;
}

.selection-explain-followup-input {
    min-height: 42px;
    max-height: 98px;
    resize: vertical;
    border: 1px solid var(--openstd-soft-border);
    border-radius: 8px;
    padding: 9px 10px;
    color: var(--openstd-heading);
    background: var(--openstd-input-bg);
    font: inherit;
    font-size: 13px;
    line-height: 1.5;
    outline: none;
}

.selection-explain-followup-input:focus {
    border-color: color-mix(in srgb, var(--openstd-primary) 58%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--openstd-primary) 16%, transparent);
}

.selection-explain-followup-send {
    min-height: 42px;
    border: 1px solid color-mix(in srgb, var(--openstd-primary) 46%, transparent);
    border-radius: 8px;
    padding: 0 13px;
    cursor: pointer;
    color: var(--openstd-bg);
    background: linear-gradient(135deg, var(--openstd-primary), var(--openstd-accent));
    font-size: 13px;
    font-weight: 800;
}

.selection-explain-followup-send:disabled {
    cursor: wait;
    opacity: 0.74;
}

@keyframes selection-explain-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ==================== 训练营卡片网格 ==================== */
/* 设计意图：训练营承载题目浏览任务，卡片网格比表格更适合学生选择练习，同时沿用全站暗色工程底座。 */
#trainingCamp {
    position: relative;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(244, 236, 216, 0.035) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(0deg, rgba(244, 236, 216, 0.026) 1px, transparent 1px) 0 0 / 34px 34px,
        radial-gradient(circle at 82% 14%, rgba(154, 252, 113, 0.08), transparent 30%),
        radial-gradient(circle at 18% 86%, rgba(102, 225, 214, 0.08), transparent 28%),
        var(--openstd-bg);
}

.training-camp-page-root {
    width: 100%;
    max-width: min(100%, 1740px);
    margin: 0 auto;
}

.training-camp-shell {
    width: 100%;
    max-width: 1740px;
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.training-camp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    border: 1px solid var(--openstd-border);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(244, 236, 216, 0.07), rgba(244, 236, 216, 0.025)), var(--openstd-panel);
    box-shadow: var(--openstd-soft-shadow);
    padding: 18px;
}

.training-camp-eyebrow {
    margin: 0 0 8px;
    color: var(--openstd-accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.training-camp-hero h2 {
    margin: 0;
    color: var(--openstd-heading);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
}

.training-camp-hero p:last-child {
    margin: 8px 0 0;
    color: var(--openstd-muted);
    font-size: 14px;
    line-height: 1.7;
}

.training-camp-admin-link {
    white-space: nowrap;
}

.training-camp-filter-panel {
    border: 1px solid var(--openstd-border);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(244, 236, 216, 0.07), rgba(244, 236, 216, 0.025)), var(--openstd-panel);
    box-shadow: var(--openstd-soft-shadow);
    padding: 16px;
}

.training-camp-filter-form {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(150px, 0.8fr) minmax(180px, 1fr) auto;
    align-items: end;
    gap: 12px;
}

.training-camp-filter-form label {
    display: block;
    margin-bottom: 6px;
    color: var(--openstd-helper);
    font-size: 13px;
    font-weight: 700;
}

.training-camp-filter-form input,
.training-camp-filter-form select {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--openstd-border);
    border-radius: 8px;
    background: rgba(8, 10, 10, 0.42);
    color: var(--openstd-body);
    padding: 9px 11px;
}

.training-camp-filter-actions {
    display: flex;
    align-items: end;
    gap: 8px;
}

.training-camp-filter-actions .btn-gh {
    min-width: 76px;
}

.training-camp-active-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.training-camp-active-filter-row .tag-gh {
    border-color: rgba(154, 252, 113, 0.72);
    background: linear-gradient(135deg, var(--openstd-primary), var(--openstd-secondary));
    color: #080A0A;
    font-weight: 800;
    box-shadow: 0 0 18px rgba(154, 252, 113, 0.18);
}

.training-camp-board {
    border: 1px solid var(--openstd-border);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(244, 236, 216, 0.06), rgba(244, 236, 216, 0.02)), rgba(21, 26, 24, 0.78);
    box-shadow: var(--openstd-soft-shadow);
    padding: 16px;
}

.training-camp-card-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.training-camp-problem-card {
    min-height: 190px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--openstd-border);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(244, 236, 216, 0.07), rgba(244, 236, 216, 0.025)), var(--openstd-panel);
    box-shadow: inset 0 1px 0 rgba(244, 236, 216, 0.05);
    padding: 14px;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.training-camp-problem-card:hover,
.training-camp-problem-card:focus-within {
    transform: translateY(-2px);
    border-color: rgba(154, 252, 113, 0.66);
    background: linear-gradient(180deg, rgba(154, 252, 113, 0.08), rgba(244, 236, 216, 0.025)), var(--openstd-panel-soft);
    box-shadow: 0 0 28px rgba(154, 252, 113, 0.12), 0 18px 38px rgba(0, 0, 0, 0.34);
}

.training-camp-problem-head,
.training-camp-problem-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.training-camp-problem-id {
    color: var(--openstd-secondary);
    font-family: 'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;
    font-size: 12px;
    font-weight: 800;
}

.training-camp-difficulty {
    display: inline-flex;
    align-items: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.training-camp-difficulty-beginner,
.training-camp-difficulty-easy {
    background: rgba(154, 252, 113, 0.12);
    color: var(--openstd-primary);
}

.training-camp-difficulty-medium {
    background: rgba(102, 225, 214, 0.12);
    color: var(--openstd-secondary);
}

.training-camp-difficulty-hard {
    background: rgba(210, 168, 79, 0.14);
    color: var(--openstd-warning);
}

.training-camp-difficulty-expert {
    background: rgba(255, 92, 61, 0.14);
    color: var(--openstd-danger);
}

.training-camp-difficulty-default {
    background: rgba(244, 236, 216, 0.08);
    color: var(--openstd-muted);
}

.training-camp-problem-title {
    margin: 14px 0 0;
    color: var(--openstd-heading);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.45;
}

.training-camp-problem-summary {
    margin: 8px 0 0;
    color: var(--openstd-muted);
    font-size: 12px;
    line-height: 1.65;
}

.training-camp-problem-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.training-camp-problem-tags span {
    border: 1px solid var(--openstd-soft-border);
    border-radius: 999px;
    background: rgba(244, 236, 216, 0.05);
    color: var(--openstd-muted);
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1;
}

.training-camp-problem-footer {
    margin-top: auto;
    padding-top: 14px;
    color: var(--openstd-subtle);
    font-size: 12px;
}

.training-camp-problem-footer span,
.training-camp-problem-footer time {
    min-width: 0;
}

.training-camp-empty-card {
    grid-column: 1 / -1;
    border: 1px dashed var(--openstd-border);
    border-radius: 8px;
    background: rgba(244, 236, 216, 0.04);
    color: var(--openstd-muted);
    padding: 32px 18px;
    text-align: center;
    font-size: 14px;
}

.training-camp-state {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--openstd-muted);
}

.training-camp-error-state {
    color: var(--openstd-danger);
}

.training-camp-spinner {
    width: 34px;
    height: 34px;
    border: 4px solid rgba(244, 236, 216, 0.16);
    border-top-color: var(--openstd-primary);
    border-radius: 999px;
    animation: selection-explain-spin 1s linear infinite;
}

.training-camp-pagination {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    border-top: 1px solid var(--openstd-soft-border);
    padding-top: 14px;
    color: var(--openstd-muted);
    font-size: 13px;
}

.training-camp-pagination-controls,
.training-camp-pagination-numbers {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.training-camp-page-button {
    min-height: 32px;
    border: 1px solid var(--openstd-soft-border);
    border-radius: 8px;
    background: rgba(244, 236, 216, 0.05);
    color: var(--openstd-heading);
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.training-camp-page-button:hover:not(:disabled) {
    border-color: rgba(154, 252, 113, 0.64);
    background: rgba(154, 252, 113, 0.10);
    color: var(--openstd-primary-hover);
}

.training-camp-page-button.is-active {
    border-color: rgba(154, 252, 113, 0.54);
    background: linear-gradient(135deg, var(--openstd-primary), var(--openstd-secondary));
    color: #080A0A;
}

.training-camp-page-button:disabled {
    cursor: not-allowed;
    opacity: 0.46;
}

.training-camp-page-ellipsis {
    color: var(--openstd-subtle);
    padding: 0 2px;
}

@media (max-width: 1500px) {
    .training-camp-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .training-camp-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .training-camp-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .training-camp-hero,
    .training-camp-pagination {
        grid-template-columns: 1fr;
    }

    .training-camp-filter-form,
    .training-camp-card-grid {
        grid-template-columns: 1fr;
    }

    .training-camp-filter-actions,
    .training-camp-pagination-controls {
        width: 100%;
    }

    .training-camp-filter-actions .btn-gh,
    .training-camp-pagination-controls > button {
        flex: 1;
    }
}

/* ==================== 深色工程展示风全站收束 ==================== */
/* 设计意图：现有页面大量使用 Tailwind 浅色工具类，这里统一压到墨黑面板体系，避免局部白底破坏整站一致性。 */
.app-root .bg-white,
.app-root .bg-gray-50,
.app-root .bg-gray-100,
.app-root .bg-slate-50,
.app-root .bg-slate-100,
.app-root .bg-\[\#f6f8fa\] {
    background-color: var(--openstd-panel) !important;
}

.app-root .text-gray-400,
.app-root .text-gray-500,
.app-root .text-gray-600,
.app-root .text-slate-400,
.app-root .text-slate-500,
.app-root .text-slate-600 {
    color: var(--openstd-muted) !important;
}

.app-root .text-gray-700,
.app-root .text-gray-800,
.app-root .text-slate-700,
.app-root .text-slate-800,
.app-root .text-black {
    color: var(--openstd-heading) !important;
}

.app-root .border-gray-100,
.app-root .border-gray-200,
.app-root .border-gray-300,
.app-root .border-slate-200,
.app-root .border-slate-300 {
    border-color: var(--openstd-soft-border) !important;
}

.app-root input,
.app-root textarea,
.app-root select {
    color: var(--openstd-body);
    background: rgba(8, 10, 10, 0.42);
    border-color: var(--openstd-border);
}

.app-root input:focus,
.app-root textarea:focus,
.app-root select:focus {
    outline: none;
    border-color: rgba(154, 252, 113, 0.66);
    box-shadow: var(--openstd-focus);
}

/* 设计意图：课程、知识库和个人中心都属于重复工作卡片，统一采用参考页的薄边框暗面板，信息层级更稳定。 */
#personalCenter,
.knowledge-drive-toolbar,
.course-info,
.course-info-small,
.package-content {
    background: transparent;
}

#personalCenter {
    background:
        linear-gradient(90deg, rgba(244, 236, 216, 0.035) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(0deg, rgba(244, 236, 216, 0.026) 1px, transparent 1px) 0 0 / 34px 34px,
        radial-gradient(circle at 88% 10%, rgba(102, 225, 214, 0.08), transparent 28%),
        var(--openstd-bg);
}

#personalCenter .bg-white,
.course-card-new,
.course-card-small,
.course-package-new,
.knowledge-card,
.knowledge-guest,
.knowledge-placeholder-panel,
.knowledge-empty-card {
    color: var(--openstd-body);
    background: linear-gradient(180deg, rgba(244, 236, 216, 0.07), rgba(244, 236, 216, 0.025)), var(--openstd-panel);
    border: 1px solid var(--openstd-border);
    border-radius: 8px;
    box-shadow: var(--openstd-soft-shadow);
}

.course-card-new:hover,
.course-card-small:hover,
.course-package-new:hover,
.knowledge-card:hover,
.knowledge-card.active {
    border-color: rgba(154, 252, 113, 0.64);
    box-shadow: 0 0 28px rgba(154, 252, 113, 0.10), 0 18px 38px rgba(0, 0, 0, 0.34);
}

.course-title-new,
.course-title-small,
.package-title,
.knowledge-breadcrumb,
.knowledge-card-title {
    color: var(--openstd-heading);
}

.course-desc-new,
.package-desc,
.course-enroll,
.knowledge-card-meta,
.knowledge-count-pill {
    color: var(--openstd-muted);
}

.course-price,
.course-price-small,
.package-price {
    color: var(--openstd-warning);
}

.course-price-small.free {
    color: var(--openstd-primary);
}

.course-image,
.course-image-small,
.knowledge-folder-illustration,
.knowledge-document-cover {
    background:
        linear-gradient(90deg, rgba(244, 236, 216, 0.05) 1px, transparent 1px) 0 0 / 20px 20px,
        linear-gradient(135deg, rgba(154, 252, 113, 0.12), rgba(102, 225, 214, 0.07));
    border-color: var(--openstd-soft-border);
}

.course-badge-new,
.tag-gh,
.knowledge-card-tags span,
.knowledge-count-pill {
    color: #080A0A;
    background: var(--openstd-primary);
    border: 1px solid rgba(154, 252, 113, 0.72);
    box-shadow: 0 0 16px rgba(154, 252, 113, 0.22);
}

.nav-item {
    color: var(--openstd-muted);
    background: rgba(244, 236, 216, 0.05);
    border: 1px solid var(--openstd-soft-border);
}

.nav-item:hover,
.nav-item.active {
    color: #080A0A;
    background: linear-gradient(135deg, var(--openstd-primary), var(--openstd-secondary));
}

.chat-knowledge-banner-card,
.knowledge-chat-migration-banner,
.message-content,
.ai-message,
.user-message {
    color: var(--openstd-body);
    background: linear-gradient(180deg, rgba(244, 236, 216, 0.07), rgba(244, 236, 216, 0.025)), var(--openstd-panel);
    border-color: var(--openstd-border);
}

.chat-knowledge-banner-copy h2,
.assistant-source-citation-title,
.answer-content.md-content,
.answer-content .markdown-body.markdown-output,
.md-content h1,
.md-content h2,
.md-content h3,
.md-content h4,
.md-content h5,
.md-content h6 {
    color: var(--openstd-heading);
}

.chat-knowledge-banner-copy p,
.chat-knowledge-banner-eyebrow,
.assistant-source-citation-snippet,
.thinking-toggle,
.thinking-panel .md-content,
.thinking-content .markdown-body.markdown-output,
.answer-toolbar-label,
.md-content .markdown-body.markdown-output blockquote {
    color: var(--openstd-muted);
}

.chat-knowledge-toggle {
    color: #080A0A;
    background: linear-gradient(135deg, var(--openstd-primary), var(--openstd-secondary));
    border-color: rgba(154, 252, 113, 0.48);
}

.chat-knowledge-toggle.is-muted,
.chat-knowledge-manage,
.assistant-source-citation,
.assistant-source-meta span {
    color: var(--openstd-heading);
    background: rgba(244, 236, 216, 0.05);
    border-color: var(--openstd-border);
    box-shadow: var(--openstd-soft-shadow);
}

.answer-action:hover {
    color: var(--openstd-primary);
    background: rgba(154, 252, 113, 0.10);
}

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

.md-content pre,
.md-content .markdown-body.markdown-output pre,
.markdown-body pre,
.markdown-body code {
    color: var(--openstd-heading);
    background: #000;
    border-color: #000;
}

.md-content code,
.md-content .markdown-body.markdown-output code:not(pre code) {
    color: var(--openstd-heading);
    background: rgba(244, 236, 216, 0.08);
}

.md-content .hljs,
.md-content .markdown-body.markdown-output pre code {
    color: var(--openstd-heading);
    background: transparent;
}

.md-content .markdown-body.markdown-output h1,
.md-content .markdown-body.markdown-output h2,
.md-content .markdown-body.markdown-output h3 {
    color: var(--openstd-heading);
}

.md-content .markdown-body.markdown-output strong {
    color: var(--openstd-heading);
    font-weight: 800;
}

/* ==================== 呵哩伴学对话框精修 ==================== */
/* 设计意图：消息流需要明确区分“我”和“AI”，同时仍像嵌在同一张工程暗色画布里的连续对话。 */
.app-chat-message-list {
    width: min(100%, 920px);
    max-width: 920px;
}

.chat-message {
    width: 100%;
    display: flex;
    margin-block: 14px;
}

.chat-message-user {
    justify-content: flex-end;
}

.chat-message-ai {
    justify-content: flex-start;
}

.chat-message-bubble {
    position: relative;
    max-width: min(88%, 920px);
    border: 1px solid var(--openstd-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(244, 236, 216, 0.05);
}

.chat-message-bubble-user {
    max-width: min(72%, 680px);
    padding: 13px 16px;
    color: var(--openstd-heading);
    background: rgba(8, 10, 10, 0.92);
    border-color: rgba(244, 236, 216, 0.24);
    border-top-right-radius: 3px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(244, 236, 216, 0.08);
}

.chat-message-bubble-user .md-content,
.chat-message-bubble-user .markdown-body {
    color: var(--openstd-heading);
}

.chat-message-bubble-user .md-content code,
.chat-message-bubble-user .markdown-body code {
    color: var(--openstd-heading);
    background: rgba(244, 236, 216, 0.10);
}

.chat-message-bubble-ai {
    width: min(90%, 920px);
    padding: 14px 16px 16px;
    color: var(--openstd-body);
    background: linear-gradient(180deg, rgba(244, 236, 216, 0.075), rgba(244, 236, 216, 0.028)), rgba(21, 26, 24, 0.86);
    border-color: var(--openstd-border);
    border-top-left-radius: 3px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.chat-message-bubble-legacy {
    padding: 14px 16px;
}

.chat-message-markdown {
    font-size: 15px;
    line-height: 1.75;
}

.assistant-stream {
    width: 100%;
}

.assistant-plain-message {
    width: 100%;
    padding: 14px 16px 16px;
    border-radius: 8px;
    background: rgba(8, 10, 10, 0.96);
    color: var(--openstd-body);
}

.assistant-stream-shell {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px 16px;
    border-radius: 8px;
    background: rgba(8, 10, 10, 0.96);
    color: var(--openstd-body);
}

/* 复制 toast：从顶部滑入，2 秒后自动消失 */
.copy-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    z-index: 200;
    padding: 10px 24px;
    border-radius: 8px;
    background: rgba(8, 10, 10, 0.92);
    border: 1px solid var(--openstd-soft-border);
    color: var(--openstd-heading);
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.40);
}

.copy-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.thinking-toggle {
    min-height: 34px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--openstd-soft-border);
    color: var(--openstd-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
}

.thinking-toggle-left i {
    color: var(--openstd-warning);
}

.thinking-chevron {
    color: var(--openstd-muted);
}

.thinking-panel {
    margin-top: 0;
    padding: 10px 12px;
    border-left: 2px solid rgba(210, 168, 79, 0.70);
    border-radius: 8px;
    background: rgba(8, 10, 10, 0.24);
}

.thinking-panel .md-content,
.thinking-content .markdown-body.markdown-output {
    color: var(--openstd-muted);
    font-size: 13px;
    line-height: 1.65;
}

.answer-panel {
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px solid var(--openstd-soft-border);
}

.answer-toolbar {
    margin-bottom: 10px;
}

.answer-toolbar-label {
    color: var(--openstd-secondary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.answer-action {
    border: 1px solid var(--openstd-soft-border);
    background: rgba(244, 236, 216, 0.045);
    color: var(--openstd-muted);
}

.answer-action:hover {
    color: #080A0A;
    background: linear-gradient(135deg, var(--openstd-primary), var(--openstd-secondary));
    border-color: rgba(154, 252, 113, 0.54);
}

.answer-content.md-content {
    font-size: 15px;
    line-height: 1.85;
}

.assistant-source-panel {
    margin: 0 0 10px;
    padding: 0;
    border-top: 0;
}

.assistant-source-summary {
    color: var(--openstd-muted);
}

.assistant-source-file-list {
    background: rgba(244, 236, 216, 0.055);
    border: 1px solid rgba(244, 236, 216, 0.08);
}

.assistant-source-citation {
    color: var(--openstd-secondary);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.assistant-source-citation.is-clickable:hover {
    background: rgba(154, 252, 113, 0.08);
}

@media (max-width: 760px) {
    .chat-message-bubble,
    .chat-message-bubble-ai,
    .chat-message-bubble-user {
        width: auto;
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .selection-explain-popover {
        left: 12px !important;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: min(520px, calc(100vh - 24px));
    }

    .selection-explain-popover.is-expanded {
        width: auto;
    }

    .selection-explain-actions {
        grid-template-columns: 34px 1fr auto;
    }
}

/* ==================== 练习记录工作台 ==================== */
/* 设计意图：将练习数据转化为行动导向面板，深色工作台、酸绿强调色与主站视觉一致 */
.practice-history-shell {
    width: min(1120px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- 顶部行动区 ---------- */
.practice-history-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 28px;
    border: 1px solid var(--openstd-border);
    border-radius: 12px;
    background: var(--openstd-surface-raised);
    box-shadow: var(--openstd-soft-shadow);
    backdrop-filter: blur(12px);
}

.practice-hero-copy h2 {
    margin: 0 0 6px;
    color: var(--openstd-heading);
    font-size: 22px;
    font-weight: 700;
}

.practice-hero-copy p {
    margin: 0;
    color: var(--openstd-muted);
    font-size: 13px;
    line-height: 1.55;
}

.practice-hero-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.practice-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--openstd-primary);
    color: var(--openstd-bg);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.practice-hero-primary:hover {
    background: var(--openstd-primary-hover);
    box-shadow: 0 6px 18px rgba(154, 252, 113, 0.28);
    transform: translateY(-1px);
}

.practice-hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border: 1px solid var(--openstd-border);
    border-radius: 10px;
    background: var(--openstd-button-bg);
    color: var(--openstd-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.practice-hero-secondary:hover {
    border-color: var(--openstd-primary);
    background: var(--openstd-primary-soft);
    color: var(--openstd-primary);
}

/* ---------- 核心指标区 ---------- */
.practice-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.practice-metric-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid var(--openstd-soft-border);
    border-radius: 10px;
    background: var(--openstd-panel);
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.practice-metric-card:hover {
    border-color: var(--openstd-border);
    box-shadow: var(--openstd-soft-shadow);
}

.practice-metric-label {
    color: var(--openstd-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.practice-metric-value {
    color: var(--openstd-primary);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}

.practice-metric-trend {
    color: var(--openstd-subtle);
    font-size: 11px;
}

.practice-metric-trend.up {
    color: var(--openstd-primary);
}

/* ---------- 主体概览区 ---------- */
.practice-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr);
    gap: 18px;
}

.practice-overview-panel {
    border: 1px solid var(--openstd-soft-border);
    border-radius: 10px;
    background: var(--openstd-panel);
    padding: 20px;
}

.practice-overview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.practice-overview-head h3 {
    margin: 0;
    color: var(--openstd-heading);
    font-size: 16px;
    font-weight: 700;
}

.practice-time-filter {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--openstd-border);
    border-radius: 8px;
    background: var(--openstd-button-bg);
}

.practice-time-filter button {
    padding: 5px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--openstd-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
}

.practice-time-filter button.active {
    background: var(--openstd-panel);
    color: var(--openstd-heading);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* ---------- 练习热力图 ---------- */
.practice-heatmap {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.practice-heatmap-cell {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    background: var(--openstd-button-bg);
}

.practice-heatmap-cell.level-1 { background: rgba(255, 92, 61, 0.20); }
.practice-heatmap-cell.level-2 { background: rgba(255, 92, 61, 0.38); }
.practice-heatmap-cell.level-3 { background: rgba(255, 92, 61, 0.62); }
.practice-heatmap-cell.level-4 { background: var(--openstd-danger); }

.practice-heatmap-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: var(--openstd-subtle);
    font-size: 11px;
}

/* ---------- 技能进度条 ---------- */
.practice-skills {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.practice-skill-row {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) 48px;
    gap: 10px;
    align-items: center;
}

.practice-skill-label {
    color: var(--openstd-body);
    font-size: 12px;
    font-weight: 600;
}

.practice-skill-bar-wrap {
    height: 7px;
    border-radius: 99px;
    background: var(--openstd-button-bg);
    overflow: hidden;
}

.practice-skill-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: var(--openstd-primary);
    transition: width 0.4s ease;
}

.practice-skill-pct {
    color: var(--openstd-muted);
    font-size: 11px;
    text-align: right;
    font-weight: 600;
}

/* ---------- 今日建议 ---------- */
.practice-suggestions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.practice-suggestion-card {
    padding: 14px 16px;
    border: 1px solid var(--openstd-soft-border);
    border-left: 3px solid var(--openstd-secondary);
    border-radius: 8px;
    background: var(--openstd-button-bg);
    transition: border-color 0.16s ease, background 0.16s ease;
}

.practice-suggestion-card:hover {
    border-color: var(--openstd-secondary);
    background: var(--openstd-accent-soft);
}

.practice-suggestion-card h4 {
    margin: 0 0 4px;
    color: var(--openstd-heading);
    font-size: 13px;
    font-weight: 700;
}

.practice-suggestion-card p {
    margin: 0;
    color: var(--openstd-muted);
    font-size: 12px;
    line-height: 1.5;
}

/* ---------- 提交流水区 ---------- */
.practice-stream {
    border: 1px solid var(--openstd-soft-border);
    border-radius: 10px;
    background: var(--openstd-panel);
    overflow: hidden;
}

.practice-stream-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--openstd-soft-border);
}

.practice-stream-head h3 {
    margin: 0;
    color: var(--openstd-heading);
    font-size: 16px;
    font-weight: 700;
}

.practice-stream-filter {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--openstd-border);
    border-radius: 8px;
    background: var(--openstd-button-bg);
}

.practice-stream-filter button {
    padding: 6px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--openstd-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
}

.practice-stream-filter button.active {
    background: var(--openstd-panel);
    color: var(--openstd-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.practice-stream-filter button:hover:not(.active) {
    color: var(--openstd-body);
}

.practice-stream-table {
    width: 100%;
    border-collapse: collapse;
}

.practice-stream-table th,
.practice-stream-table td {
    padding: 12px 16px;
    text-align: left;
    font-size: 13px;
}

.practice-stream-table th {
    color: var(--openstd-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--openstd-soft-border);
}

.practice-stream-table tbody tr {
    border-bottom: 1px solid var(--openstd-soft-border);
    transition: background 0.12s ease;
}

.practice-stream-table tbody tr:hover {
    background: var(--openstd-button-bg);
}

.practice-stream-table tbody tr:last-child {
    border-bottom: 0;
}

.practice-stream-table td {
    color: var(--openstd-body);
    vertical-align: middle;
}

.practice-stream-question {
    color: var(--openstd-heading);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.14s ease;
}

.practice-stream-question:hover {
    color: var(--openstd-primary);
    text-decoration: underline;
}

.practice-stream-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.practice-stream-tag {
    border-radius: 999px;
    background: var(--openstd-primary-soft);
    padding: 2px 7px;
    color: var(--openstd-primary);
    font-size: 10px;
    font-weight: 600;
}

.practice-stream-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
}

.practice-stream-status.ac {
    color: var(--openstd-primary);
    background: var(--openstd-primary-soft);
}

.practice-stream-status.failed {
    color: var(--openstd-danger);
    background: var(--openstd-danger-soft);
}

.practice-stream-status.redo {
    color: var(--openstd-warning);
    background: var(--openstd-warning-soft);
}

.practice-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--openstd-soft-border);
    color: var(--openstd-muted);
    font-size: 12px;
}

.practice-pagination button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.practice-code-view-btn {
    border: 1px solid var(--openstd-border);
    border-radius: 7px;
    background: var(--openstd-button-bg);
    padding: 6px 10px;
    color: var(--openstd-primary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.practice-code-viewer {
    padding: 14px 16px 18px;
    border-top: 1px solid var(--openstd-soft-border);
    background: var(--openstd-button-bg);
}

.practice-code-viewer-card {
    display: grid;
    gap: 10px;
}

.practice-code-viewer-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--openstd-muted);
    font-size: 12px;
}

.practice-code-viewer-card strong {
    color: var(--openstd-heading);
}

.practice-code-viewer-card pre {
    margin: 0;
    max-height: 320px;
    overflow: auto;
    border: 1px solid var(--openstd-soft-border);
    border-radius: 8px;
    background: var(--openstd-bg);
    padding: 12px;
    color: var(--openstd-heading);
    font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
}

/* ---------- 状态提示 ---------- */
.practice-history-message {
    margin: 0;
    min-height: 20px;
    color: var(--openstd-muted);
    font-size: 13px;
}

.practice-history-message-error {
    color: var(--openstd-danger);
}

.practice-history-empty {
    padding: 28px;
    border: 1px dashed var(--openstd-border);
    border-radius: 10px;
    background: var(--openstd-button-bg);
    text-align: center;
}

.practice-history-empty h3 {
    margin: 0 0 8px;
    color: var(--openstd-heading);
    font-size: 18px;
    font-weight: 700;
}

.practice-history-empty p {
    margin: 0 0 14px;
    color: var(--openstd-muted);
    font-size: 14px;
}

.practice-history-empty-inline {
    margin: 0;
    padding: 28px;
    color: var(--openstd-muted);
    font-size: 13px;
    text-align: center;
}

/* ---------- 响应式 ---------- */
@media (max-width: 940px) {
    .practice-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .practice-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .practice-history-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .practice-hero-actions {
        width: 100%;
    }

    .practice-hero-primary,
    .practice-hero-secondary {
        flex: 1;
        justify-content: center;
    }

    .practice-metrics-grid {
        grid-template-columns: 1fr 1fr;
    }

    .practice-stream-table th:nth-child(4),
    .practice-stream-table td:nth-child(4) {
        display: none;
    }
}

/* ==================== 软糖星空知识图谱迁移 ==================== */
/* 设计意图：知识图谱复用金牌教练的主背景，图谱本身只负责节点、连线和浮层，不再盖一张独立星空底图。 */
.knowledge-graph-page {
    --kg-bg: transparent;
    --kg-bg-soft: var(--openstd-bg);
    --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-text-soft: #9b665a;
    --kg-line: rgba(255, 255, 255, 0.78);
    --kg-accent: #ffd073;
    --kg-progress: #cf6f62;
    --kg-shadow: 0 18px 42px rgba(135, 64, 51, 0.18);
    position: relative;
    overflow: hidden;
    background: transparent;
    color: var(--kg-text);
}

/* 设计意图：页面底纹交给金牌教练背景统一绘制，避免两套背景叠加后显脏。 */
.knowledge-graph-page::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: none;
    pointer-events: none;
    background-image: none;
    opacity: 0;
}

.knowledge-graph-page-shell {
    position: relative;
    z-index: 1;
}

.knowledge-graph-masthead,
.knowledge-graph-path-summary,
.knowledge-graph-status,
.knowledge-graph-focus-card,
.knowledge-graph-placeholder-card,
.knowledge-graph-detail,
.knowledge-graph-sidebar {
    color: var(--kg-text);
}

/* 设计意图：信息面板用半透明纸面悬浮在天空上，保持阅读清楚但不抢走星图主体。 */
.knowledge-graph-masthead-copy,
.knowledge-graph-path-summary,
.knowledge-graph-focus-card,
.knowledge-graph-placeholder-card,
.knowledge-graph-sidebar {
    border: 1px solid var(--kg-border);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 250, 232, 0.42)),
        var(--kg-panel);
    box-shadow: 0 16px 34px rgba(57, 126, 181, 0.16);
    backdrop-filter: blur(14px);
}

.knowledge-graph-status {
    display: none;
    left: 18px;
    right: auto;
    bottom: 16px;
    max-width: min(620px, calc(100% - 36px));
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.knowledge-graph-status-rail {
    max-width: none;
    flex-wrap: wrap;
    gap: 8px;
}

.knowledge-graph-status-pill,
.knowledge-graph-status-pill.emphasis {
    min-width: 96px;
    max-width: 158px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.56);
    border-radius: 999px;
    background: rgba(255, 255, 252, 0.58);
    box-shadow: 0 8px 18px rgba(123, 57, 45, 0.10);
    backdrop-filter: blur(8px);
}

.knowledge-graph-status-pill strong {
    margin-top: 2px;
    font-size: 14px;
}

.knowledge-graph-status-pill small {
    margin-top: 1px;
    font-size: 10px;
    line-height: 1.2;
}

.knowledge-graph-masthead-copy h2,
.knowledge-graph-board-copy h3,
.knowledge-graph-sidebar-head h3,
.knowledge-graph-placeholder-card h3,
.knowledge-graph-focus-card h3,
.knowledge-graph-focus-heading h3 {
    color: #315070;
    letter-spacing: 0;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.48);
}

.knowledge-graph-description,
.knowledge-graph-sidebar-head p,
.knowledge-graph-placeholder-card p,
.knowledge-graph-focus-card p,
.knowledge-graph-focus-description,
.knowledge-graph-status-label,
.knowledge-graph-status-copy {
    color: var(--kg-muted);
}

.knowledge-graph-board {
    isolation: isolate;
}

/* 设计意图：正式图谱继续占满主区域，装饰层和画布分层明确，拖拽、缩放和点击都交给 Cytoscape。 */
.knowledge-graph-stage-frame {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.knowledge-graph-stage-frame::before,
.knowledge-graph-stage-frame::after {
    content: none;
}

.knowledge-graph-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: none;
    overflow: hidden;
    pointer-events: none;
}

.knowledge-graph-atmosphere::before,
.knowledge-graph-atmosphere::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 22%, rgba(255, 255, 255, 0.9) 0 1.2px, transparent 1.8px),
        radial-gradient(circle at 18% 58%, rgba(255, 236, 168, 0.82) 0 1px, transparent 1.7px),
        radial-gradient(circle at 42% 18%, rgba(255, 255, 255, 0.76) 0 1.4px, transparent 2px),
        radial-gradient(circle at 62% 34%, rgba(255, 220, 150, 0.8) 0 1px, transparent 1.8px),
        radial-gradient(circle at 78% 20%, rgba(222, 246, 255, 0.86) 0 1.4px, transparent 2px),
        radial-gradient(circle at 90% 62%, rgba(255, 255, 255, 0.7) 0 1.2px, transparent 1.9px);
    background-size: 220px 170px, 260px 190px, 300px 210px, 240px 180px, 280px 210px, 320px 230px;
    animation: kg-star-breathe 9s ease-in-out infinite alternate;
}

.knowledge-graph-atmosphere::after {
    transform: translate3d(28px, -18px, 0);
    opacity: 0.46;
    animation-duration: 13s;
}

.knowledge-graph-canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    min-height: 0;
    height: 100%;
}

.knowledge-graph-star-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.knowledge-graph-star-node {
    --kg-star-node-color: #5c5c5c;
    position: absolute;
    left: var(--kg-star-x);
    top: var(--kg-star-y);
    display: grid;
    width: var(--kg-star-size);
    height: var(--kg-star-size);
    place-items: center;
    transform-origin: center;
    isolation: isolate;
    transition:
        transform 180ms ease,
        opacity 180ms ease,
        filter 180ms ease;
    pointer-events: none;
}

/* 设计意图：在灰色节点后方加一层黑色柔光，让节点从深色星图背景中浮出来，同时不恢复旧的彩色光晕体系。 */
.knowledge-graph-star-node::before {
    content: '';
    position: absolute;
    inset: -24%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 46%, transparent 72%);
    filter: blur(9px);
    opacity: 0.82;
    pointer-events: none;
    transition:
        background 180ms ease,
        opacity 180ms ease;
}

/* 设计意图：可见节点统一为中性灰色实心圆，父子节点只通过尺寸和标签区分，避免颜色与光晕干扰图谱阅读。 */
.knowledge-graph-star-node-core {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--kg-star-node-color);
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        transform 180ms ease;
}

.knowledge-graph-star-node.is-level .knowledge-graph-star-node-core {
    background: var(--kg-star-node-color);
}

.knowledge-graph-star-node.is-topic .knowledge-graph-star-node-core {
    background: var(--kg-star-node-color);
}

.knowledge-graph-star-node.is-selected .knowledge-graph-star-node-core,
.knowledge-graph-star-node.is-active .knowledge-graph-star-node-core {
    transform: scale(1.06);
}

.knowledge-graph-star-node.is-focus-linked .knowledge-graph-star-node-core {
    background: var(--kg-star-focus-color);
}

.knowledge-graph-star-node.is-focus-selected .knowledge-graph-star-node-core {
    background: var(--kg-star-focus-color);
    transform: scale(1.12);
}

.knowledge-graph-star-node.is-focus-linked::before {
    /* 设计意图：节点变色时让背光跟随当前节点自己的等级色，避免彩色圆点后面仍然冒黑色光晕。 */
    background: radial-gradient(circle, color-mix(in srgb, var(--kg-star-focus-color) 72%, transparent) 0%, color-mix(in srgb, var(--kg-star-focus-color) 34%, transparent) 46%, transparent 76%);
    opacity: 0.94;
}

.knowledge-graph-star-node.is-focus-dimmed {
    opacity: 0.18;
    filter: grayscale(1);
}

.knowledge-graph-star-node.is-focus-dimmed::before {
    opacity: 0.18;
}

/* 设计意图：标签移到节点下方，节点本体只负责表达等级颜色和父子层级，避免文字压在圆形内部变小。 */
.knowledge-graph-star-node-label {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    z-index: 2;
    transform: translateX(-50%);
    width: max-content;
    max-width: 138%;
    color: #f6fbff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.12;
    text-align: center;
    text-shadow:
        0 2px 6px rgba(8, 14, 28, 0.84),
        0 0 12px rgba(8, 14, 28, 0.68);
}

.knowledge-graph-star-node.is-level .knowledge-graph-star-node-label {
    font-size: 15px;
    line-height: 1.08;
}

.knowledge-graph-meteor {
    display: none;
    background: linear-gradient(90deg, transparent, rgba(255, 250, 220, 0.8), rgba(255, 199, 109, 0.96));
    box-shadow: 0 0 18px rgba(255, 232, 164, 0.32);
}

.knowledge-graph-meteor::after {
    background: #fff5ad;
    box-shadow: 0 0 18px rgba(255, 224, 112, 0.62);
}

/* 设计意图：用 CSS 绘制星球、云边和宇航员，减少新资源依赖，也能跟随主题即时加载。 */
.knowledge-graph-planet,
.knowledge-graph-astronaut,
.knowledge-graph-cloud {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.knowledge-graph-planet {
    border-radius: 50%;
    opacity: 0.9;
    filter: drop-shadow(0 10px 16px rgba(70, 140, 190, 0.16));
}

.knowledge-graph-planet::before {
    position: absolute;
    inset: 42% -18%;
    content: "";
    border: 5px solid rgba(255, 238, 181, 0.86);
    border-left-color: transparent;
    border-right-color: transparent;
    border-radius: 50%;
    transform: rotate(-14deg);
}

.knowledge-graph-planet.planet-large {
    top: 8%;
    right: 6%;
    width: 118px;
    height: 118px;
    background:
        radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.82), transparent 24%),
        linear-gradient(145deg, #ffd4cc, #f9a89b 58%, #e78ca1);
}

.knowledge-graph-planet.planet-small {
    left: 7%;
    bottom: 14%;
    width: 72px;
    height: 72px;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.74), transparent 24%),
        linear-gradient(145deg, #d7f4ff, #9fe0ff 62%, #92c7ff);
}

.knowledge-graph-astronaut {
    right: 13%;
    bottom: 12%;
    width: 66px;
    height: 92px;
    border-radius: 34px 34px 30px 30px;
    background:
        radial-gradient(circle at 50% 28%, #8fc8f4 0 16px, #f8fbff 17px 24px, transparent 25px),
        linear-gradient(180deg, #ffffff 0 72%, #e7f5ff 100%);
    box-shadow: 0 12px 22px rgba(55, 125, 180, 0.14);
    transform: rotate(-9deg);
    animation: kg-float 7s ease-in-out infinite alternate;
}

.knowledge-graph-astronaut::before,
.knowledge-graph-astronaut::after {
    position: absolute;
    top: 42px;
    width: 22px;
    height: 42px;
    content: "";
    border-radius: 16px;
    background: #fffdf8;
    box-shadow: inset 0 -8px 0 rgba(158, 217, 255, 0.26);
}

.knowledge-graph-astronaut::before {
    left: -15px;
    transform: rotate(24deg);
}

.knowledge-graph-astronaut::after {
    right: -15px;
    transform: rotate(-24deg);
}

.knowledge-graph-cloud {
    height: 138px;
    opacity: 0.92;
    background:
        radial-gradient(circle at 18% 70%, rgba(255, 255, 255, 0.96) 0 38px, transparent 39px),
        radial-gradient(circle at 38% 54%, rgba(255, 255, 255, 0.96) 0 54px, transparent 55px),
        radial-gradient(circle at 62% 64%, rgba(231, 249, 255, 0.92) 0 44px, transparent 45px),
        radial-gradient(circle at 82% 72%, rgba(255, 240, 236, 0.94) 0 42px, transparent 43px);
    filter: drop-shadow(0 -8px 18px rgba(255, 255, 255, 0.34));
}

.knowledge-graph-cloud.cloud-left {
    left: -52px;
    bottom: -56px;
    width: 360px;
}

.knowledge-graph-cloud.cloud-right {
    right: -64px;
    bottom: -48px;
    width: 390px;
    transform: scaleX(-1);
}

.knowledge-graph-toolbar button,
.knowledge-graph-drawer-close {
    border-color: rgba(255, 255, 255, 0.78);
    border-radius: 8px;
    background: rgba(255, 255, 252, 0.88);
    color: #315070;
    box-shadow: 0 8px 18px rgba(60, 128, 178, 0.14);
}

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

.knowledge-graph-toolbar button.is-active {
    border-color: rgba(255, 205, 106, 0.92);
    background: #fff5c2;
    color: #bd6f11;
    box-shadow: 0 8px 18px rgba(255, 194, 65, 0.20);
}

.knowledge-graph-level-chip,
.knowledge-graph-track-pill,
.knowledge-graph-meta-pill,
.knowledge-graph-problem-count,
.knowledge-graph-recommendation-badge {
    border-radius: 8px;
    background: rgba(255, 255, 252, 0.76);
    color: #315070;
}

.knowledge-graph-progress-track,
.knowledge-graph-focus-progress-track {
    background: rgba(255, 255, 255, 0.56);
}

.knowledge-graph-progress-bar,
.knowledge-graph-focus-progress-bar {
    background: linear-gradient(90deg, #ffb0a6, #ffdf7a, #9edfff);
}

.knowledge-graph-problem-card,
.knowledge-graph-recommendation-card,
.knowledge-graph-teacher-panel,
.knowledge-graph-problem-empty {
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 8px;
    background: rgba(255, 255, 252, 0.74);
    color: #315070;
    box-shadow: 0 10px 24px rgba(55, 126, 180, 0.12);
}

.knowledge-graph-problem-title,
.knowledge-graph-focus-label,
.knowledge-graph-route-step strong {
    color: #315070;
}

.knowledge-graph-problem-meta,
.knowledge-graph-route-step span,
.knowledge-graph-problem-empty,
.knowledge-graph-teacher-panel p {
    color: #6687a4;
}

.knowledge-graph-sidebar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 249, 226, 0.64)),
        rgba(255, 255, 252, 0.88);
    border-radius: 22px;
}

/* 设计意图：抽屉外壳承担纸面与阴影，内部详情只负责排版，避免出现卡片套卡片的视觉层级。 */
.knowledge-graph-sidebar .knowledge-graph-focus-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.knowledge-graph-sidebar-head {
    border-bottom-color: rgba(255, 205, 106, 0.34);
}

@keyframes kg-float {
    from {
        transform: translate3d(0, 0, 0) rotate(-9deg);
    }
    to {
        transform: translate3d(0, -14px, 0) rotate(-4deg);
    }
}

@media (max-width: 760px) {
    .knowledge-graph-planet.planet-large {
        width: 84px;
        height: 84px;
        right: 2%;
    }

    .knowledge-graph-astronaut {
        right: 5%;
        bottom: 18%;
        transform: scale(0.78) rotate(-9deg);
    }

    .knowledge-graph-cloud {
        width: 260px;
        opacity: 0.84;
    }
}

@media (prefers-reduced-motion: reduce) {
    .knowledge-graph-astronaut {
        animation: none !important;
    }
}