/* ============================================================
   style3.css — DOM 版全局框架与星云首页
   替代原 canvas 绘制：左上用户面板 / 底部导航栏 / 顶部标题 / 首页标签
   本文件在所有主题样式之后加载，以 CSS 变量适配深浅两种配色
   ============================================================ */

/* 隐藏不再使用的 canvas */
canvas#stageCanvas {
    display: none !important;
}

/* ---------------- 登录墙遮罩 ---------------- */
/* 登录对话框弹出时，用加深的全屏遮罩盖住后台页面（仅登录场景） */
#mask-div.login-wall {
    background-color: rgba(15, 25, 40, .55);
}

:root[data-theme='light'] #mask-div.login-wall {
    background-color: rgba(35, 45, 60, .45);
}

/* ---------------- 顶部标题 ---------------- */
#app-title {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 950;
    font-size: 31.25px;
    font-weight: 600;
    letter-spacing: 2px;
    white-space: nowrap;
    pointer-events: none;
    color: #9dc3e2;
    text-shadow: 0 0 8px rgba(0, 0, 0, .35);
}

:root[data-theme='light'] #app-title {
    color: #2f6f9f;
    text-shadow: none;
}

/* 登录前初始隐藏：避免未登录时闪现首页内容（云标签、左上角面板、底部栏、工具栏），登录/访客成功由 post_login 移除该类 */
body.se-logged-out #nebula-div,
body.se-logged-out #app-panel,
body.se-logged-out #app-bottom,
body.se-logged-out #tools-div {
    display: none !important;
}

/* ---------------- 左上用户面板（DOM 版） ---------------- */
#app-panel {
    position: absolute;
    left: calc(20px + 2vw);
    top: 48px;
    z-index: 900;
}

#app-panel .panel-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 14px 10px 10px;
    border-radius: 14px;
    background: var(--se-card-bg, rgba(255, 255, 255, .92));
    border: 1px solid var(--se-card-border, rgba(120, 150, 190, .5));
    box-shadow: var(--se-shadow, 0 4px 18px rgba(30, 45, 70, .2));
    backdrop-filter: blur(6px);
    width: fit-content;
    min-width: max(25vw, 280px);
}

#app-panel .panel-avatar-wrap {
    position: relative;
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: 50%;
    cursor: pointer;
}

#app-panel .panel-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(157, 195, 226, .35);
}

#app-panel .panel-avatar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--se-input-bg, #fff);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

#app-panel .panel-info {
    min-width: 0;
    border-left: 1px solid var(--se-card-border, rgba(120, 150, 190, .5));
    padding-left: 14px;
}

#app-panel .panel-nick {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--se-text, #4b4b4b);
    min-width: 0;
}

/* 昵称文本：过长时省略号截断（不影响 Lv 徽章） */
#app-panel .panel-nick-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#app-panel .panel-level-badge {
    flex: none;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 9px;
    background: linear-gradient(135deg, #2b8cdd, #1b5997);
    color: #fff !important;
}

#app-panel .panel-meta {
    display: flex;
    gap: 14px;
    margin-top: 12px;
}

#app-panel .panel-gold,
#app-panel .panel-credit {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--se-text, #4b4b4b);
}

/* 图标使用资源图片（assets/gold.png、assets/credit.png） */
#app-panel .panel-gold img,
#app-panel .panel-credit img {
    width: 16px;
    height: 16px;
    flex: none;
}

/* 返回按钮：作为面板卡片内的 flex 子元素，与头像/昵称同一行（视觉一体） */
#app-panel .panel-back {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(27, 89, 151, .85);
    color: #fff !important;
    text-align: center;
    line-height: 24px;
    text-decoration: none;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

#app-panel .panel-back::after {
    content: '‹';
}

/* ---------------- 底部导航栏（DOM 版，完整复刻原 canvas 三图结构） ---------------- */
#app-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
    z-index: 900;
    pointer-events: none;
    transform: translateY(105%);
    transition: transform .6s ease;
}

#app-bottom.show {
    transform: translateY(0);
    pointer-events: auto;
}

#app-bottom .app-bottom-bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
}

/* 中央凸起（008a 700x180 → 280x72） */
#app-bottom .app-bottom-mid {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 280px;
    height: 72px;
    background: url(../assets/008a.png?v=2) no-repeat center bottom;
    background-size: 100% 100%;
}

/* 左延伸杆：左端 008b 装饰 + 008c 杆拉伸填满到中央凸起 */
#app-bottom .app-bottom-left {
    position: absolute;
    left: 0;
    right: 50%;
    bottom: 0;
    height: 40px;
    margin-right: 140px;
    background-image: url(../assets/008b.png?v=2), url(../assets/008c.png?v=2);
    background-repeat: no-repeat, no-repeat;
    background-position: left bottom, right bottom;
    background-size: 144px 100%, calc(100% - 144px) 100%;
    opacity: .95;
}

/* 右延伸杆：对称（008b 端头在右端） */
#app-bottom .app-bottom-right {
    position: absolute;
    right: 0;
    left: 50%;
    bottom: 0;
    height: 40px;
    margin-left: 140px;
    transform: scaleX(-1);
    background-image: url(../assets/008b.png?v=2), url(../assets/008c.png?v=2);
    background-repeat: no-repeat, no-repeat;
    background-position: left bottom, right bottom;
    background-size: 144px 100%, calc(100% - 144px) 100%;
    opacity: .95;
}

#app-bottom .app-bottom-btn {
    position: absolute;
    top: 65%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
    transition: transform .15s ease, filter .15s ease;
}

#app-bottom .app-bottom-btn:hover {
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)) brightness(1.15);
}

#app-bottom .btn-left {
    left: calc(50% - 60px);
}

#app-bottom .btn-center {
    left: 50%;
}

#app-bottom .btn-right {
    left: calc(50% + 60px);
}

#app-bottom .btn-left img,
#app-bottom .btn-right img {
    width: 30px;
    height: 30px;
}

#app-bottom .btn-center img {
    width: 58px;
    height: 38px;
}

#app-bottom .unread-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #a10000;
    display: none;
}

/* ---------------- 星云首页：云入口标签 ---------------- */
#nebula-div {
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

#nebula-div #nebula_ul {
    position: static;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: clamp(20px, 5vh, 40px) 0;
    list-style: none;
    display: flex;
    flex-flow: column nowrap;
    /* 四个条作为一个整体垂直居中 */
    justify-content: center;
    gap: clamp(18px, 3vh, 36px);
}

#nebula_ul li.nebula-card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    /* 无边框、无阴影：渐变直接融入背景，透明端不显示边缘 */
    /* 立体悬浮：与星儿对话框一致的阴影 */
    width: clamp(38%, 40vw, 44%);
    height: clamp(84px, 10.2vh, 120px);
    border-radius: 16px;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    transition: transform .25s ease;
    box-sizing: border-box;
    padding: 0 28px;
    gap: 20px;
}

/* 4 个条统一靠左对齐 */
#nebula_ul li.card-semantic,
#nebula_ul li.card-teaching,
#nebula_ul li.card-skill,
#nebula_ul li.nebula-placeholder {
    align-self: flex-start;
    flex-direction: row;
}

/* 蛇形两列布局：4、1 同列（48%），2、3 同列（59%） */
/* 两列错开约 11%：整体紧凑且左右留白接近均衡 */
/* 垂直保持逐级下降的阶梯偏移 */
#nebula_ul li.card-semantic {
    top: clamp(-90px, -12.5vh, -78px);
    margin-left: calc(48% - clamp(38%, 40vw, 44%) / 2);
}

#nebula_ul li.card-teaching {
    top: calc(clamp(-90px, -12.5vh, -78px) + clamp(52px, 7.4vh, 60px));
    margin-left: calc(59% - clamp(38%, 40vw, 44%) / 2);
}

#nebula_ul li.card-skill {
    top: calc(clamp(-90px, -12.5vh, -78px) + 2 * clamp(52px, 7.4vh, 60px));
    margin-left: calc(59% - clamp(38%, 40vw, 44%) / 2);
}

#nebula_ul li.nebula-placeholder {
    top: calc(clamp(-90px, -12.5vh, -78px) + 3 * clamp(52px, 7.4vh, 60px));
    margin-left: calc(48% - clamp(38%, 40vw, 44%) / 2);
}

/* 悬停：统一向右浮（不加深阴影，保持融入背景） */
#nebula_ul li.nebula-card:hover {
    transform: translateX(8px);
}

/* 亮色主题：彩色条阴影与星儿对话框一致，外阴影增强使立体感清晰可见 */
:root[data-theme='light'] #nebula_ul li.nebula-card {
    box-shadow: inset 0 0 0 1px rgba(120, 150, 190, .45), 0 10px 24px rgba(30, 45, 70, .35);
}

/* 1、3 渐变：图标（左）实色 → 文字（右）逐渐变淡 */
#nebula_ul li.card-semantic {
    background: linear-gradient(to left,
            rgba(43, 140, 221, .4) 0%,
            rgba(43, 140, 221, .55) 55%,
            rgba(27, 89, 151, .95) 100%);
}

#nebula_ul li.card-skill {
    background: linear-gradient(to left,
            rgba(241, 154, 56, .4) 0%,
            rgba(241, 154, 56, .55) 55%,
            rgba(206, 105, 18, .95) 100%);
}

/* 2、4 渐变：与 1、3 一致，图标（左）实色 → 文字（右）逐渐变淡 */
#nebula_ul li.card-teaching {
    background: linear-gradient(to left,
            rgba(155, 89, 182, .4) 0%,
            rgba(155, 89, 182, .55) 55%,
            rgba(111, 45, 148, .95) 100%);
}

/* 预留占位（灰调） */
#nebula_ul li.nebula-placeholder {
    background: linear-gradient(to left,
            rgba(150, 160, 175, .4) 0%,
            rgba(150, 160, 175, .45) 55%,
            rgba(110, 120, 135, .9) 100%);
    cursor: default;
    opacity: .85;
}

/* 浅色主题下强化图标侧对比度 */
/* 浅色主题下强化卡片对比度：渐变加深实色，白字可读 */
:root[data-theme='light'] #nebula_ul li.card-semantic {
    background: linear-gradient(to left, rgba(43, 140, 221, .80) 0%, rgba(22, 72, 135, .99) 100%);
}

:root[data-theme='light'] #nebula_ul li.card-skill {
    background: linear-gradient(to left, rgba(241, 154, 56, .80) 0%, rgba(190, 95, 15, .99) 100%);
}

:root[data-theme='light'] #nebula_ul li.card-teaching {
    background: linear-gradient(to left, rgba(155, 89, 182, .80) 0%, rgba(98, 38, 131, .99) 100%);
}

:root[data-theme='light'] #nebula_ul li.nebula-placeholder {
    background: linear-gradient(to left, rgba(150, 160, 175, .95) 0%, rgba(90, 100, 115, .99) 100%);
}

/* 图标（1、3 在左 / 2、4 在右，均位于渐变实色端） */
#nebula_ul .nebula-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

#nebula_ul .nebula-icon img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35));
}

/* 文字区：标题 + 提示 */
#nebula_ul .nebula-text {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0;
    min-width: 0;
}

/* 大字标题（横排，统一大字）——强制白色，避免被主题深色文字覆盖 */
#nebula_ul .nebula-title {
    display: block;
    font-size: clamp(31.2px, 2.88vw, 40.8px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 3px;
    text-align: left;
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}

/* 提示文字：默认隐藏，鼠标悬停标签时显示（标题下方）——强制白色 */
#nebula_ul .nebula-hint {
    font-size: calc(clamp(31.2px, 2.88vw, 40.8px) * .6);
    line-height: 1.4;
    color: rgba(255, 255, 255, .88) !important;
    white-space: nowrap;
    margin-left: clamp(31.2px, 2.88vw, 40.8px);
    opacity: 0;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    transition: opacity .25s ease;
}

#nebula_ul li.nebula-card:hover .nebula-hint {
    opacity: 1;
}

#nebula_ul li.nebula-placeholder .nebula-hint {
    opacity: 0;
}

/* ---------------- 星云首页左下角星儿助手 ---------------- */
#nebula-div #nebula-helper {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 20;
    cursor: pointer;
    user-select: none;
}

/* 头像：位置固定，不因对话框显隐而移动 */
#nebula-div #nebula-helper .nebula-helper-avatar {
    width: 164px;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .3));
}

/* 对话框：简单背景色气泡（暗主题深蓝），绝对定位于头像上方居中 */
#nebula-div #nebula-helper .nebula-helper-dialog {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%);
    width: 320px;
    padding: 28px 40px;
    border-radius: 18px;
    background: rgba(27, 54, 88, .95);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    box-sizing: border-box;
}

#nebula-div #nebula-helper .nebula-helper-dialog-text {
    display: block;
    text-align: left;
    font-size: 24px;
    line-height: 1.4;
    color: #dff4ff !important;
    text-shadow: 0 1px 2px rgba(11, 40, 68, .7);
    pointer-events: none;
    white-space: normal;
    word-break: break-all;
}

/* 亮色主题：浅色背景 + 深色文字，边框用 inset 阴影模拟不占布局宽度 */
:root[data-theme='light'] #nebula-div #nebula-helper .nebula-helper-dialog {
    background: #f0eff4;
    box-shadow: inset 0 0 0 1px rgba(120, 150, 190, .45), 0 6px 20px rgba(30, 45, 70, .2);
}

/* 亮色主题：三个对话框底色统一为 #F0EFF4 */
:root[data-theme='light'] #app-panel .panel-card {
    background: #f0eff4;
    border: 1px solid rgba(120, 150, 190, .45);
}

/* 亮色主题：panel 深色文字与星儿对话框文字颜色一致 */
:root[data-theme='light'] #app-panel .panel-nick,
:root[data-theme='light'] #app-panel .panel-gold,
:root[data-theme='light'] #app-panel .panel-credit {
    color: #142736 !important;
}

/* 暗色主题：panel/panelM 背景与前景对齐星儿对话框 */
:root[data-theme='dark'] #app-panel .panel-card {
    background: rgba(27, 54, 88, .95);
}

:root[data-theme='dark'] #app-panel .panel-nick,
:root[data-theme='dark'] #app-panel .panel-gold,
:root[data-theme='dark'] #app-panel .panel-credit {
    color: #dff4ff !important;
}

:root[data-theme='light'] #tools-div {
    background-color: #f0eff4 !important;
    border: 1px solid rgba(120, 150, 190, .45) !important;
}

/* 亮色主题：搜索输入栏文字与星儿对话框文字颜色一致 */
:root[data-theme='light'] #tools-div .tool-search .input {
    color: #142736 !important;
}

/* 暗色主题：search 背景与前景对齐星儿对话框，边框对齐 panel */
:root[data-theme='dark'] #tools-div {
    background-color: rgba(27, 54, 88, .95) !important;
    border: 1px solid #3a4456 !important;
}

:root[data-theme='dark'] #tools-div .tool-search .input,
:root[data-theme='dark'] #tools-div .tool-search .input:focus {
    color: #dff4ff !important;
    background-color: rgba(27, 54, 88, .95) !important;
}

/* 暗色主题：星儿对话框边框对齐 panel，inset 模拟不占布局宽度 */
:root[data-theme='dark'] #nebula-div #nebula-helper .nebula-helper-dialog {
    box-shadow: inset 0 0 0 1px #3a4456, 0 6px 20px rgba(0, 0, 0, .35);
}

:root[data-theme='light'] #nebula-div #nebula-helper .nebula-helper-dialog-text {
    color: #142736 !important;
    text-shadow: none;
}

/* ---------------- 星系页（galaxy）：星球长行轨道 ---------------- */
#galaxy-page {
    width: 100%;
    left: 0;
    top: 0;
    bottom: auto;
    height: 100%;
    overflow: hidden;
}

/* 小标题（单元名称）居中，与大标题对齐 */
.galaxy-subtitle {
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    font-size: 25.5px;
    font-weight: 600;
    letter-spacing: 2px;
    white-space: nowrap;
    color: var(--se-text, #4b4b4b);
    opacity: .85;
}

/* 星儿助手（位置与星云页一致：left 14.55vw、距底 11.93vh） */
#galaxy-page .hintBox {
    left: 14.55vw;
    bottom: 11.93vh;
    z-index: 8;
}

#galaxyList {
    bottom: 80px;
    z-index: 8;
}

/* 切换器按钮：上移 2vh 避开下方滚动条 */
#btnShowGalaxyList {
    bottom: 2vh;
}

/* 下方切换按钮：放大至 133% */
#btnShowGalaxyList .btnRectMain {
    height: 77px;
    line-height: 77px;
    padding: 0 21px;
    font-size: 21.3px;
}

#btnShowGalaxyList .btnRectMain .inner {
    padding: 0 21px;
}

#btnShowGalaxyList .btnRectMain:before,
#btnShowGalaxyList .btnRectMain:after {
    width: 21px;
}

/* 星系页弹出菜单：向上移留 1vh 间距，背景/前景/边框追 panel */
#galaxyList .galaxyListInner {
    bottom: calc(3vh + 77px);
}

#galaxyList.expand .galaxyListInner {
    background: rgba(27, 54, 88, .95);
    border: 1px solid #3a4456;
    color: #dff4ff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

#galaxyList .galaxyListInner .title {
    color: #dff4ff;
}

#galaxyList .galaxyListInner .channel {
    background: rgba(120, 150, 190, .15);
    border: 1px solid rgba(120, 150, 190, .45);
    color: #dff4ff !important;
    border-radius: 8px;
}

#galaxyList .galaxyListInner .channel:hover,
#galaxyList .galaxyListInner .channel.active {
    background: rgba(120, 150, 190, .35);
}

/* 星系页弹出菜单：切换星系/切换水平 标签，未选中与选中对比明显 */
#galaxyList .galaxyListInner .galaxy-menu-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

#galaxyList .galaxyListInner .galaxy-menu-tab {
    background: rgba(120, 150, 190, .12);
    border: 1px solid rgba(120, 150, 190, .35);
    color: #a9bdd4 !important;
    border-radius: 8px;
    padding: 4px 16px;
    cursor: pointer;
}

#galaxyList .galaxyListInner .galaxy-menu-tab.active {
    background: rgba(120, 150, 190, .45);
    border-color: rgba(160, 190, 230, .65);
    color: #ffffff !important;
    font-weight: bold;
}

:root[data-theme='light'] #galaxyList.expand .galaxyListInner {
    background: #f0eff4;
    border: 1px solid rgba(120, 150, 190, .45);
    color: #142736;
    box-shadow: 0 6px 20px rgba(30, 45, 70, .2);
}

:root[data-theme='light'] #galaxyList .galaxyListInner .title {
    color: #142736;
}

:root[data-theme='light'] #galaxyList .galaxyListInner .channel {
    background: rgba(120, 150, 190, .12);
    border: 1px solid rgba(120, 150, 190, .45);
    color: #142736 !important;
    border-radius: 8px;
}

:root[data-theme='light'] #galaxyList .galaxyListInner .channel:hover,
:root[data-theme='light'] #galaxyList .galaxyListInner .channel.active {
    background: rgba(120, 150, 190, .25);
}

:root[data-theme='light'] #galaxyList .galaxyListInner .galaxy-menu-tab {
    background: rgba(120, 150, 190, .10);
    border: 1px solid rgba(120, 150, 190, .35);
    color: #5d6f84 !important;
    border-radius: 8px;
    padding: 4px 16px;
    cursor: pointer;
}

:root[data-theme='light'] #galaxyList .galaxyListInner .galaxy-menu-tab.active {
    background: rgba(120, 150, 190, .32);
    border-color: rgba(120, 150, 190, .6);
    color: #142736 !important;
    font-weight: bold;
}

/* 星系页星儿对话框：亮色主题样式与星云页一致 */
:root[data-theme='light'] #galaxy-page .hintBox .hintBoxInfo {
    background-color: #f0eff4;
    color: #142736;
    box-shadow: inset 0 0 0 1px rgba(120, 150, 190, .45), 0 6px 20px rgba(30, 45, 70, .2);
}

:root[data-theme='light'] #galaxy-page .hintBox .hintBoxInfo:after {
    display: none;
}

/* 星球长行轨道：同屏最多 8 个，溢出横向滚动（滚动条位于按钮与下方面板中线） */
#galaxyStarTrack {
    position: absolute;
    left: 4%;
    right: 4%;
    top: 100px;
    bottom: 77px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    z-index: 4;
    scrollbar-width: auto;
    scrollbar-color: rgba(120, 160, 200, .5) transparent;
}

#galaxyStarTrack::-webkit-scrollbar {
    height: 22px;
}

#galaxyStarTrack::-webkit-scrollbar-thumb {
    background: rgba(120, 160, 200, .5);
    border-radius: 3px;
}

#galaxyStarTrack::-webkit-scrollbar-track {
    background: transparent;
}

#galaxyStarInner {
    position: relative;
    height: 100%;
}

.galaxy-star {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    text-align: center;
    user-select: none;
}

.galaxy-star-ball {
    border-radius: 50%;
    margin: 0 auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform .2s ease;
}

.galaxy-star:hover .galaxy-star-ball {
    transform: scale(1.1);
}

.galaxy-star-label {
    margin-top: 12px;
    font-size: 32.4px;
    font-weight: 600;
    color: var(--se-text, #4b4b4b);
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.galaxy-track-empty {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--se-text, #4b4b4b);
    font-size: 16px;
    opacity: .7;
}

/* ---------------- 小面板（panelM）：更紧凑 ---------------- */
#app-panel .panel-card-m {
    padding: 7px 12px 7px 7px;
    gap: 16px;
}

#app-panel .panel-card-m .panel-avatar-wrap {
    width: 40px;
    height: 40px;
}

#app-panel .panel-card-m .panel-avatar {
    width: 32px;
    height: 32px;
}

#app-panel .panel-card-m .panel-nick {
    font-size: 16px;
}

#app-panel .panel-card-m .panel-back {
    width: 40px;
    height: 40px;
    line-height: 38px;
    font-size: 24px;
}

#app-panel .panel-card-m .panel-level-badge {
    font-size: 14px;
}

/* ---------------- 移动端适配 ---------------- */
@media screen and (max-width: 900px) {
    #app-panel .panel-nick {
        max-width: 110px;
    }

    #nebula-div #nebula_ul {
        padding: 40px 0 60px;
        justify-content: flex-start;
        gap: 14px;
    }

    #nebula_ul li.nebula-card,
    #nebula_ul li.card-semantic,
    #nebula_ul li.card-skill,
    #nebula_ul li.card-teaching,
    #nebula_ul li.nebula-placeholder {
        width: 88%;
        height: 92px;
        align-self: center;
        margin: 0;
        top: 0;
        padding: 0 18px;
        gap: 14px;
        flex-direction: row;
    }

    /* 移动端悬停不浮动 */
    #nebula_ul li.nebula-card:hover,
    #nebula_ul li.card-semantic:hover,
    #nebula_ul li.card-skill:hover,
    #nebula_ul li.card-teaching:hover,
    #nebula_ul li.nebula-placeholder:hover {
        transform: none;
    }

    /* 移动端统一渐变：图标（左）透明 → 文字（右）实色 */
    #nebula_ul li.card-semantic {
        background: linear-gradient(to right, rgba(43, 140, 221, .4) 0%, rgba(43, 140, 221, .55) 55%, rgba(27, 89, 151, .95) 100%);
    }

    #nebula_ul li.card-skill {
        background: linear-gradient(to right, rgba(241, 154, 56, .4) 0%, rgba(241, 154, 56, .55) 55%, rgba(206, 105, 18, .95) 100%);
    }

    #nebula_ul li.card-teaching {
        background: linear-gradient(to right, rgba(155, 89, 182, .4) 0%, rgba(155, 89, 182, .55) 55%, rgba(111, 45, 148, .95) 100%);
    }

    #nebula_ul li.nebula-placeholder {
        background: linear-gradient(to right, rgba(150, 160, 175, .4) 0%, rgba(150, 160, 175, .45) 55%, rgba(110, 120, 135, .9) 100%);
    }

    #nebula_ul .nebula-icon img {
        width: 46px;
        height: 46px;
    }

    #nebula_ul .nebula-title {
        font-size: 20.4px;
        letter-spacing: 2px;
    }

    #nebula_ul .nebula-hint {
        font-size: 12.24px;
        margin-left: 20.4px;
    }
}

/* ============================================================
   微课云（teachingcloud）—— Copilot 式对话改造
   writer-card 恒为深蓝背景，文字一律强制浅色（不受主题变量影响）
   ============================================================ */

/* 亮色主题对比度修复：writer-card 内文字全部浅色（!important 覆盖主题变量） */
#teachingcloud-div .writer-card h1,
#teachingcloud-div .writer-sub,
#teachingcloud-div .teaching-workspace-panel .writer-field label,
#teachingcloud-div #teachingWorkspaceList,
#teachingcloud-div .writer-result-item,
#teachingcloud-div #teachingCopilotLog,
#teachingcloud-div #teachingThemeInput,
#teachingcloud-div #teachingResultBox,
#teachingcloud-div .teaching-workspace-helper-dialog-text,
#teachingcloud-div #teachingValidationBox,
#teachingcloud-div #teachingErrorMessage {
    color: #dbe8ff !important;
}

#teachingcloud-div .writer-sub {
    color: #9ca3bf !important;
}

#teachingcloud-div .writer-result-header {
    color: #b3b9e6 !important;
}

#teachingcloud-div #teachingThemeInput::placeholder {
    color: rgba(219, 232, 255, .58) !important;
    opacity: 1;
}

/* theme.css 的 span/label/p/li/a 带 !important 会把微课云内文字覆盖为深灰，这里精准覆盖 */
#teachingcloud-div #teachingCloudTitleText,
#teachingcloud-div .writer-result-item b,
#teachingcloud-div #teachingResultTitle,
#teachingcloud-div .writer-status-badge,
#teachingcloud-div .writer-result-header span,
#teachingcloud-div .tc-copilot-chat .writer-result-header span,
#teachingcloud-div .teaching-level-select {
    color: #dbe8ff !important;
}

#teachingcloud-div #teachingScriptPreview,
#teachingcloud-div #teachingQuestPreview {
    color: #e2ecff !important;
}

#teachingcloud-div .tc-slide,
#teachingcloud-div .tc-quest-card {
    color: #e2ecff !important;
}

#teachingcloud-div .tc-slide-title,
#teachingcloud-div .tc-quest-header {
    color: #9cc3ff !important;
}

#teachingcloud-div .tc-slide-line,
#teachingcloud-div .tc-quest-option {
    color: #e2ecff !important;
}

/* 分镜帧画面卡片：逐帧渲染成静态画面，由上而下排列（去掉点击放大交互） */
#teachingcloud-div #teachingScriptPreview .frameitem {
    width: 100%;
    margin: 0;
    border: 1px solid #3f6190;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
    flex: none;
    box-sizing: border-box;
    cursor: default;
}

#teachingcloud-div #teachingScriptPreview .frameitem .framestage {
    border-radius: 14px;
    overflow: hidden;
}

#teachingcloud-div #teachingScriptPreview .frameitem .framebase {
    z-index: 5;
    width: 24px;
    height: 24px;
    line-height: 24px;
    right: 8px;
    bottom: 8px;
    left: auto;
    top: auto;
    background-color: rgba(0, 0, 0, .55);
    color: #fff;
    border-radius: 6px;
    text-align: center;
    font-size: 12px;
}

#teachingcloud-div #teachingScriptPreview .frameitem .framestage .sprite3,
#teachingcloud-div #teachingScriptPreview .frameitem .framestage .sprite2 {
    cursor: default;
}

#teachingcloud-div .tc-quest-key {
    color: #9ff0b5 !important;
}

#teachingcloud-div .tc-action-btn {
    color: #dbe8ff !important;
}

/* 输入框 Modern 醒目（初始即大输入框） */
#teachingcloud-div .teaching-prompt-shell {
    background: rgba(36, 69, 100, .55);
    border: 1px solid rgba(95, 155, 255, .35);
    border-radius: 20px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(255, 255, 255, .05);
}

#teachingcloud-div #teachingThemeInput {
    min-height: 84px;
    max-height: 150px;
    font-size: 1.02rem;
    color: #e8f1ff !important;
    line-height: 1.6;
}

/* Copilot 聊天栏：初始隐藏，生成后显示并扩大 */
#teachingcloud-div .tc-copilot-chat {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#teachingcloud-div .tc-copilot-chat .writer-result-area {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#teachingcloud-div #teachingCopilotLog {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: none;
    font-size: 16.32px;
    overflow-y: auto;
    white-space: pre-wrap;
    line-height: 1.7;
}

/* 完成后操作行：查看讲稿 / 查看试题 / 上传微课 */
#teachingcloud-div .tc-copilot-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
    align-items: center;
}

#teachingcloud-div .tc-action-btn {
    border: 1px solid #4f6f9a;
    background: #2f4d70;
    color: #dbe8ff;
    border-radius: 18px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: .92rem;
    line-height: 1.2;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

#teachingcloud-div .tc-action-btn:hover {
    border-color: #6ea2ff;
    color: #fff;
}

#teachingcloud-div .tc-action-btn.active {
    background: linear-gradient(145deg, #3a6cb5, #2b4a75);
    border-color: #6ea2ff;
    color: #fff;
}

#teachingcloud-div .tc-action-upload {
    background: linear-gradient(145deg, #2f8f5b, #1e6b42);
    border-color: #3fbf7a;
    color: #fff;
    font-weight: 600;
}

#teachingcloud-div .tc-action-upload:hover {
    border-color: #5fe0a0;
    color: #fff;
}

/* 发送按钮：单独右下角，与其他图标按钮同款深蓝样式 */
#teachingcloud-div .teaching-action-row #teachingGenerateBtn {
    margin-left: auto;
    width: 28px;
    height: 28px;
    background: #2f4d70;
    border: 1px solid #4f6f9a;
    color: #fff;
}

/* 图标按钮：图标强制白色，避免被主题深色文字覆盖导致看不清 */
#teachingcloud-div .teaching-icon-btn i {
    color: #fff !important;
}

/* 发送按钮：上传微课（文字按钮，始终可见） */
#teachingcloud-div .tc-upload-send {
    margin-left: auto;
    background: linear-gradient(145deg, #2f8f5b, #1e6b42) !important;
    border: 1px solid #3fbf7a !important;
    color: #fff !important;
    border-radius: 40px;
    padding: 9px 22px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

#teachingcloud-div .tc-upload-send:hover {
    background: linear-gradient(145deg, #36a76a, #247a4c) !important;
    border-color: #5fe0a0 !important;
}

/* 初始布局：仅输入框时垂直居中 */
#teachingcloud-div .teaching-copilot-panel.tc-input-only {
    justify-content: center;
}

/* 讲稿 / 试题预览区：从上到下依次排列，滚动查看 */
#teachingcloud-div .tc-preview-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 2px;
}

#teachingcloud-div .tc-slide {
    background: rgba(36, 69, 100, .65);
    border: 1px solid #3f6190;
    border-radius: 14px;
    padding: 16px 18px;
    color: #e2ecff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
    flex: none;
}

#teachingcloud-div .tc-slide-title {
    font-size: .95rem;
    font-weight: 600;
    color: #9cc3ff;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(159, 195, 255, .25);
}

#teachingcloud-div .tc-slide-line {
    line-height: 1.7;
    margin: 3px 0;
    color: #e2ecff;
    white-space: pre-wrap;
    word-break: break-word;
}

#teachingcloud-div .tc-quest-card {
    background: rgba(36, 69, 100, .65);
    border: 1px solid #3f6190;
    border-radius: 14px;
    padding: 14px 16px;
    color: #e2ecff;
    flex: none;
}

#teachingcloud-div .tc-quest-card .tc-quest-header {
    font-weight: 600;
    color: #9cc3ff;
    margin-bottom: 6px;
}

#teachingcloud-div .tc-quest-card .tc-quest-option {
    margin: 2px 0 2px 12px;
    color: #d7e6ff;
}

#teachingcloud-div .tc-quest-card .tc-quest-key {
    margin-top: 6px;
    color: #9ff0b5;
}

/* 初始布局：中间预览隐藏，copilot 栏占满右侧只显示输入框 */
#teachingcloud-div .teaching-copilot-panel.tc-input-only .teaching-prompt-shell {
    box-shadow: 0 10px 36px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .07);
    border-color: rgba(110, 162, 255, .55);
}

/* 体验云 / 翻译云：微课云式三列 Copilot 布局 */
#experience-div .writer-main-row,
#translation-div .writer-main-row {
    display: flex;
    flex: 1;
    min-height: 0;
    min-width: 0;
    gap: 14px;
    align-items: stretch !important;
}

#experience-div .teaching-workspace-panel,
#translation-div .teaching-workspace-panel {
    flex: 0 0 14%;
    min-width: 180px;
    max-width: none;
    height: 100%;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    padding-right: 0;
}

#experience-div .teaching-workspace-helper,
#translation-div .teaching-workspace-helper {
    margin-top: auto;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

#experience-div .teaching-workspace-helper-dialog,
#translation-div .teaching-workspace-helper-dialog {
    position: relative;
    width: 100%;
    max-width: 220px;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(27, 54, 88, .95);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    box-sizing: border-box;
}

#experience-div .teaching-workspace-helper-dialog-text,
#translation-div .teaching-workspace-helper-dialog-text {
    display: block;
    text-align: left;
    color: #dff4ff;
    font-size: 16.32px;
    line-height: 1.35;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(11, 40, 68, 0.7);
    white-space: normal;
    word-break: break-all;
}

#experience-div .teaching-workspace-helper-avatar,
#translation-div .teaching-workspace-helper-avatar {
    width: 164px;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .3));
}

#experience-div .teaching-center-panel,
#translation-div .teaching-center-panel {
    flex: 1 1 auto;
    min-width: 340px;
    max-width: none;
    overflow: hidden;
}

#experience-div .teaching-copilot-panel,
#translation-div .teaching-copilot-panel {
    flex: 0 0 28%;
    min-width: 300px;
    max-width: none;
    overflow: hidden;
    gap: 10px;
    align-items: stretch;
    padding-right: 0;
}

#experience-div .teaching-copilot-panel > .writer-result-area,
#experience-div .teaching-copilot-panel > .writer-field,
#translation-div .teaching-copilot-panel > .writer-result-area,
#translation-div .teaching-copilot-panel > .writer-field {
    width: 100%;
    box-sizing: border-box;
}

#experience-div .teaching-resizer,
#translation-div .teaching-resizer {
    flex: 0 0 8px;
    width: 8px;
    cursor: col-resize;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(90, 156, 255, 0.35), rgba(63, 97, 144, 0.35));
    border: 1px solid rgba(98, 140, 202, 0.45);
}

#experience-div .teaching-resizer:hover,
#translation-div .teaching-resizer:hover {
    background: linear-gradient(180deg, rgba(90, 156, 255, 0.6), rgba(63, 97, 144, 0.6));
}

#experience-div .teaching-prompt-shell,
#translation-div .teaching-prompt-shell {
    border: 1px solid rgba(95, 155, 255, .35);
    border-radius: 20px;
    background: rgba(36, 69, 100, .55);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(255, 255, 255, .05);
}

#experience-div #writerThemeInput,
#translation-div #translationSourceText {
    min-height: 84px !important;
    max-height: 150px;
    height: auto !important;
    flex: none !important;
    font-size: 1.02rem;
    color: #e8f1ff !important;
    line-height: 1.6;
    background: transparent !important;
    border: none !important;
    border-radius: 10px;
    padding: 8px 10px;
    resize: none;
}

#experience-div #writerThemeInput::placeholder,
#translation-div #translationSourceText::placeholder {
    color: rgba(219, 232, 255, .58) !important;
    opacity: 1;
}

#experience-div .teaching-action-row,
#translation-div .teaching-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    min-height: 0;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

#experience-div .teaching-action-row .teaching-send-btn,
#translation-div .teaching-action-row .teaching-send-btn {
    margin-left: auto;
}

#experience-div .teaching-icon-btn,
#translation-div .teaching-icon-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #4f6f9a;
    cursor: pointer;
    color: #fff;
    line-height: 1;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2f4d70;
}

#experience-div .teaching-icon-btn i,
#translation-div .teaching-icon-btn i {
    color: #fff !important;
}

#experience-div .tc-copilot-chat,
#translation-div .tc-copilot-chat {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#experience-div .tc-copilot-chat .writer-result-header,
#translation-div .tc-copilot-chat .writer-result-header {
    flex: 0 0 auto;
}

#experience-div #writerCopilotLog,
#translation-div #translationCopilotLog {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: none;
    font-size: 16.32px;
    overflow-y: auto;
    white-space: pre-wrap;
    line-height: 1.7;
}

#experience-div .teaching-copilot-panel.tc-input-only,
#translation-div .teaching-copilot-panel.tc-input-only {
    justify-content: center;
}

#experience-div .teaching-copilot-panel.tc-input-only .teaching-prompt-shell,
#translation-div .teaching-copilot-panel.tc-input-only .teaching-prompt-shell {
    box-shadow: 0 10px 36px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .07);
    border-color: rgba(110, 162, 255, .55);
}

#experience-div .writer-result-area,
#translation-div .writer-result-area {
    min-height: 0;
    display: flex;
    flex-direction: column;
    background-color: #244564;
    border-radius: 18px;
    padding: 14px;
    border: 1px solid #3f6190;
    box-sizing: border-box;
    overflow: hidden;
}

#experience-div .teaching-center-panel > .writer-result-area,
#translation-div .teaching-center-panel > .writer-result-area {
    flex: 1 1 auto;
    min-height: 0;
}

#experience-div .writer-result-header,
#translation-div .writer-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: #b3b9e6;
}

#experience-div .teaching-header-action,
#translation-div .teaching-header-action {
    margin-left: 8px;
}

#experience-div .writer-status-badge,
#translation-div .writer-status-badge {
    background: #1e3a5f;
    padding: 6px 16px;
    border-radius: 40px;
    color: #d7e6ff;
}

#experience-div .writer-result-header .writer-btn,
#translation-div .writer-result-header .writer-btn {
    border: none;
    border-radius: 40px;
    padding: 10px 18px;
    cursor: pointer;
    color: #fff;
}

#experience-div .writer-result-header .writer-btn-primary,
#translation-div .writer-result-header .writer-btn-primary {
    background: linear-gradient(145deg, #2b4a75, #1e3a5f);
}

#experience-div .writer-result-header .writer-btn-secondary,
#translation-div .writer-result-header .writer-btn-secondary {
    background: #2f4d70;
    border: 1px solid #4f6f9a;
}

#experience-div #writerResultBox,
#translation-div #translationResultBox,
#translation-div #translationSignResultBox {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: 16.32px;
    line-height: 1.7;
    word-break: break-word;
}

#experience-div #writerResultBox {
    background-color: transparent;
    border: none;
    padding: 0;
}

#experience-div .writer-error-message,
#translation-div .writer-error-message {
    flex: 0 0 auto;
}

#experience-div .writer-field,
#translation-div .writer-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

#experience-div .writer-field label,
#translation-div .writer-field label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: #a9b7d4;
}

#experience-div .teaching-workspace-panel .writer-field,
#translation-div .teaching-workspace-panel .writer-field {
    flex: 0 0 auto;
    min-height: 0;
    margin-bottom: 0;
}

#experience-div .teaching-workspace-panel .writer-field > label,
#translation-div .teaching-workspace-panel .writer-field > label {
    margin-bottom: 6px;
}

#experience-div #writerWorkspaceList,
#translation-div #translationWorkspaceList {
    flex: 0 0 auto;
    min-height: 0 !important;
    height: auto;
    max-height: 150px !important;
    margin-bottom: 0;
    overflow-y: auto;
}

#experience-div .writer-result-item,
#translation-div .writer-result-item {
    border: 1px solid #3f6190;
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: #1c3857;
    cursor: pointer;
}

#experience-div .teaching-workspace-panel,
#experience-div .teaching-center-panel,
#experience-div .teaching-copilot-panel,
#translation-div .teaching-workspace-panel,
#translation-div .teaching-center-panel,
#translation-div .teaching-copilot-panel {
    align-self: stretch;
}

/* 体验云 / 翻译云：界面字号统一到与 copilot 输入框一致 */
#experience-div .writer-field,
#experience-div .writer-field label,
#experience-div .writer-result-area,
#experience-div .writer-result-header,
#experience-div .writer-result-header span,
#experience-div .writer-result-item,
#experience-div .writer-status-badge,
#experience-div .writer-btn,
#experience-div .writer-result-item b,
#translation-div .writer-field,
#translation-div .writer-field label,
#translation-div .writer-result-area,
#translation-div .writer-result-header,
#translation-div .writer-result-header span,
#translation-div .writer-result-item,
#translation-div .writer-status-badge,
#translation-div .writer-btn,
#translation-div .writer-result-item b {
    font-size: 16.32px;
}

@media screen and (max-width: 880px) {
    #experience-div .writer-main-row,
    #translation-div .writer-main-row {
        flex-direction: column;
    }

    #experience-div .teaching-resizer,
    #translation-div .teaching-resizer {
        display: none;
    }
}

/* 隐藏的文件导入控件：覆盖 all:unset 造成的显形 */
#experience-div .teaching-prompt-shell input.hidden-file,
#translation-div .teaching-prompt-shell input.hidden-file {
    display: none !important;
}

/* 阅读云：微课云式三列 Copilot 布局 */
#reading-div .writer-main-row {
    display: flex;
    flex: 1;
    min-height: 0;
    min-width: 0;
    gap: 14px;
    align-items: stretch !important;
}

#reading-div .teaching-workspace-panel {
    flex: 0 0 14%;
    min-width: 180px;
    max-width: none;
    height: 100%;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    padding-right: 0;
}

#reading-div .teaching-workspace-helper {
    margin-top: auto;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

#reading-div .teaching-workspace-helper-dialog {
    position: relative;
    width: 100%;
    max-width: 220px;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(27, 54, 88, .95);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    box-sizing: border-box;
}

#reading-div .teaching-workspace-helper-dialog-text {
    display: block;
    text-align: left;
    color: #dff4ff;
    font-size: 16.32px;
    line-height: 1.35;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(11, 40, 68, 0.7);
    white-space: normal;
    word-break: break-all;
}

#reading-div .teaching-workspace-helper-avatar {
    width: 164px;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .3));
}

#reading-div .teaching-center-panel {
    flex: 1 1 auto;
    min-width: 340px;
    max-width: none;
    overflow: hidden;
}

#reading-div .teaching-copilot-panel {
    flex: 0 0 28%;
    min-width: 300px;
    max-width: none;
    overflow: hidden;
    gap: 10px;
    align-items: stretch;
    padding-right: 0;
}

#reading-div .teaching-copilot-panel > .writer-result-area,
#reading-div .teaching-copilot-panel > .writer-field {
    width: 100%;
    box-sizing: border-box;
}

#reading-div .teaching-resizer {
    flex: 0 0 8px;
    width: 8px;
    cursor: col-resize;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(90, 156, 255, 0.35), rgba(63, 97, 144, 0.35));
    border: 1px solid rgba(98, 140, 202, 0.45);
}

#reading-div .teaching-resizer:hover {
    background: linear-gradient(180deg, rgba(90, 156, 255, 0.6), rgba(63, 97, 144, 0.6));
}

#reading-div .teaching-prompt-shell {
    border: 1px solid rgba(95, 155, 255, .35);
    border-radius: 20px;
    background: rgba(36, 69, 100, .55);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(255, 255, 255, .05);
}

#reading-div #readingInputText {
    min-height: 84px !important;
    max-height: 150px;
    height: auto !important;
    flex: none !important;
    font-size: 1.02rem;
    color: #e8f1ff !important;
    line-height: 1.6;
    background: transparent !important;
    border: none !important;
    border-radius: 10px;
    padding: 8px 10px;
    resize: none;
}

#reading-div #readingInputText::placeholder {
    color: rgba(219, 232, 255, .58) !important;
    opacity: 1;
}

#reading-div .teaching-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    min-height: 0;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

#reading-div .teaching-action-row .teaching-send-btn {
    margin-left: auto;
}

#reading-div .teaching-icon-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #4f6f9a;
    cursor: pointer;
    color: #fff;
    line-height: 1;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2f4d70;
}

#reading-div .teaching-icon-btn i {
    color: #fff !important;
}

#reading-div .tc-copilot-chat {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#reading-div .tc-copilot-chat .writer-result-header {
    flex: 0 0 auto;
}

#reading-div #readingCopilotLog {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: none;
    font-size: 16.32px;
    overflow-y: auto;
    white-space: pre-wrap;
    line-height: 1.7;
}

#reading-div .teaching-copilot-panel.tc-input-only {
    justify-content: center;
}

#reading-div .teaching-copilot-panel.tc-input-only .teaching-prompt-shell {
    box-shadow: 0 10px 36px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .07);
    border-color: rgba(110, 162, 255, .55);
}

#reading-div .writer-result-area {
    min-height: 0;
    display: flex;
    flex-direction: column;
    background-color: #244564;
    border-radius: 18px;
    padding: 14px;
    border: 1px solid #3f6190;
    box-sizing: border-box;
    overflow: hidden;
}

#reading-div .teaching-center-panel > .writer-result-area {
    flex: 1 1 auto;
    min-height: 0;
}

#reading-div .writer-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: #b3b9e6;
}

#reading-div .teaching-header-action {
    margin-left: 8px;
}

#reading-div .writer-status-badge {
    background: #1e3a5f;
    padding: 6px 16px;
    border-radius: 40px;
    color: #d7e6ff;
}

#reading-div .writer-result-header .writer-btn {
    border: none;
    border-radius: 40px;
    padding: 10px 18px;
    cursor: pointer;
    color: #fff;
}

#reading-div .writer-result-header .writer-btn-primary {
    background: linear-gradient(145deg, #2b4a75, #1e3a5f);
}

#reading-div .writer-result-header .writer-btn-secondary {
    background: #2f4d70;
    border: 1px solid #4f6f9a;
}

#reading-div .writer-result-header .writer-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

#reading-div #readingLeftResult {
    flex: 0 0 auto;
    overflow-y: auto;
    border-radius: 12px;
    padding: 10px 12px;
}

#reading-div #readingResultBox {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: 16.32px;
    line-height: 1.7;
    word-break: break-word;
}

#reading-div .writer-error-message {
    flex: 0 0 auto;
}

#reading-div .writer-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

#reading-div .writer-field label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: #a9b7d4;
}

#reading-div .teaching-workspace-panel .writer-field {
    flex: 0 0 auto;
    min-height: 0;
    margin-bottom: 0;
}

#reading-div .teaching-workspace-panel .writer-field > label {
    margin-bottom: 6px;
}

#reading-div #readingWorkspaceList {
    flex: 0 0 auto;
    min-height: 0 !important;
    height: auto;
    max-height: 150px !important;
    margin-bottom: 0;
    overflow-y: auto;
}

#reading-div .writer-result-item {
    border: 1px solid #3f6190;
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: #1c3857;
    cursor: pointer;
}

#reading-div .teaching-workspace-panel,
#reading-div .teaching-center-panel,
#reading-div .teaching-copilot-panel {
    align-self: stretch;
}

/* 阅读云：界面字号统一 */
#reading-div .writer-field,
#reading-div .writer-field label,
#reading-div .writer-result-area,
#reading-div .writer-result-header,
#reading-div .writer-result-header span,
#reading-div .writer-result-item,
#reading-div .writer-result-item b,
#reading-div .writer-status-badge,
#reading-div .writer-btn {
    font-size: 16.32px;
}

@media screen and (max-width: 880px) {
    #reading-div .writer-main-row {
        flex-direction: column;
    }

    #reading-div .teaching-resizer {
        display: none;
    }
}

/* 星儿对话框内的页间导航链接 */
#experience-div .helper-nav-links,
#reading-div .helper-nav-links,
#translation-div .helper-nav-links {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(159, 195, 255, .35);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#experience-div .helper-nav-link,
#reading-div .helper-nav-link,
#translation-div .helper-nav-link {
    display: block;
    color: #9cc3ff;
    font-size: 15px;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
}

#experience-div .helper-nav-link:hover,
#reading-div .helper-nav-link:hover,
#translation-div .helper-nav-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* 语义云图谱：换一换按钮 */
#cloud-div .cloud-graph-reroll {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
    border: 1px solid #4f6f9a;
    background: rgba(47, 77, 112, .92);
    color: #dbe8ff;
    border-radius: 18px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: .92rem;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

#cloud-div .cloud-graph-reroll:hover {
    border-color: #6ea2ff;
    color: #fff;
}

#experience-div .helper-nav-link i,
#reading-div .helper-nav-link i,
#translation-div .helper-nav-link i {
    display: inline-block;
    width: 1.35em;
    text-align: center;
    margin-right: 2px;
}

/* 阅读云原文标注与悬停释义 */
#reading-div #readingLeftResult {
    display: block;
    line-height: 1.9;
    font-size: 16.32px;
    color: #e2ecff;
    white-space: pre-wrap;
    word-break: break-word;
}

#reading-div .writer-highlight-markup,
#reading-div .writer-highlight-markup-another {
    font-weight: bold;
    border-radius: 4px;
    padding: 0 4px;
    cursor: help;
    display: inline-block;
}

#reading-div .writer-highlight-markup-another {
    background-color: #2e4a3a;
    border: 1px solid #5fa86f;
}

#reading-div .writer-highlight-markup {
    background-color: #2d3b4f;
    border: 1px solid #5d7ab3;
}

#readingHighlightTooltip {
    position: absolute;
    z-index: 1000;
    max-width: 350px;
    min-width: 200px;
    background: #2d2d44;
    border: 1px solid #3f3f5a;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    padding: 12px 15px;
    line-height: 1.5;
    display: none;
    color: #e4e4f0;
}

#readingHighlightTooltip.active {
    display: block;
}