/* ============================================================================
   LaTeX ⇄ Word · Workbench — 现代 B2B 工作台质感层（品牌蓝 / 白卡 / 窄侧栏）
   ----------------------------------------------------------------------------
   加载顺序：style(v3).css → workspace.css(布局&data-mode逻辑) → 本文件(质感层)。
   本文件只做材质/氛围/动效/组件视觉的覆写，绝不触碰 workspace.css 的网格骨架、
   data-mode / data-rail 切换逻辑，以及任何功能元素 id / handler。
   理念：核心编辑区占主版面，结果/操作收窄为可折叠右侧栏 —— 成熟 B2B 工作台。
   ============================================================================ */

:root {
    /* ================= 蓝色家族通阶（全站唯一色彩轴，不引入杂色） =================
       天蓝 → 蓝的色域：从「天蓝」到「深蓝」，整体以天蓝为品牌主色，
       按钮用天蓝，不落青色，不落深蓝更不落黑。 */
    --g-navy:        #1e63a8;   /* 深蓝（渐变收尾的深档，备用） */
    --g-blue:        #4a90e2;   /* 品牌天蓝（主按钮/选中态/链接） */
    --g-blue-bright: #6fb1f0;   /* 亮天蓝（hover / 高光描边） */
    --g-blue-sky:    #9ed2f2;   /* 浅天蓝（渐变起点/次级点缀） */
    --g-blue-tint:   rgba(74, 144, 226, .08);   /* 天蓝雾底（选区/浅卡片） */
    --g-blue-glow:   rgba(74, 144, 226, .16);   /* 聚焦环 */

    /* —— 文字四阶（蓝调中性，冷而不灰） —— */
    --g-ink:         #10182b;   /* 深海军黑（正文最高对比） */
    --g-graphite:    #22304d;   /* 墨蓝石墨（标题/深色铬件） */
    --g-slate:       #48566f;   /* 蓝灰（次级文字） */
    --g-mute:        #8593ab;   /* 弱蓝灰（说明/占位） */

    /* —— 面层三阶：画布(深) < 卡片(白) < 内嵌面板(中) —— 层次靠色阶而非阴影 */
    --g-canvas:      #e9eef7;   /* 画布：蓝灰底 */
    --g-glass:       rgba(255, 255, 255, .96);   /* 卡片：近纯白，浮于画布之上 */
    --g-glass-soft:  rgba(255, 255, 255, .72);   /* 次卡片 */
    --g-panel:       #f1f5fb;   /* 内嵌面板（输入框/预览/统计片） */
    --g-panel-deep:  #e6edf8;   /* 内嵌面板 hover/按压 */
    --g-glass-line:  rgba(255, 255, 255, .95);   /* 卡片上缘高光线 */
    --g-rim:         rgba(32, 58, 112, .10);     /* 柔和描边（蓝调） */
    --g-rim-strong:  rgba(32, 58, 112, .18);     /* 强调描边（dashed 等） */

    /* 阴影：轻 · 弥散 · 低透明度 —— 只做“微微浮起”，不要厚重塑料感 */
    --g-shadow:      0 2px 12px rgba(23, 38, 84, .07);
    --g-shadow-deep: 0 4px 20px rgba(23, 38, 84, .10);
    --g-shadow-tiny: 0 1px 4px rgba(23, 38, 84, .05);
    --g-shadow-blue: 0 4px 16px -6px rgba(74, 144, 226, .32);

    /* 圆角语言：全站统一 8px（输入框/卡片/按钮/上传框全部一致） */
    --g-radius:    8px;
    --g-radius-md: 8px;
    --g-radius-pill: 8px;

    /* 动效弹性曲线 */
    --g-ease-spring: cubic-bezier(.22, 1.06, .28, 1.1);
    --g-ease-out:    cubic-bezier(.22, 1, .36, 1);

    /* —— 旧「学术色板」token 重映射：金色/酒红全部退场，统一进蓝色家族 ——
       旧 style-v3 是 暖象牙纸 + 酒红 navy(#6b1d2a) + 老金 + serif 衬线；
       这里把历史变量直接改写，让所有残留 inline `var(--navy)` 等自动跟随新主题。 */
    /* —— 旧「学术色板」token 重映射：金色/酒红全部退场，统一进蓝色家族 ——
       旧 style-v3 是 暖象牙纸 + 酒红 navy(#6b1d2a) + 老金 + serif 衬线；
       这里把历史变量直接改写，让所有残留 inline `var(--navy)` 等自动跟随新主题。
       字体：回归旧版高级感衬线（Georgia/Palatino/Noto Serif SC），全站去粗体。 */
    --font-display: 'Georgia','Times New Roman','Noto Serif SC','Noto Serif CJK SC','Source Han Serif SC','SimSun','STSong',serif;
    --font-body:    'Georgia','Palatino Linotype','Book Antiqua','Palatino','Noto Serif SC','Noto Serif CJK SC','Source Han Serif SC','SimSun','STSong','PingFang SC','Microsoft YaHei',serif;
    --font-mono:    'JetBrains Mono','Cascadia Code','SF Mono','Consolas',monospace;
    --ink:          #10182b;    /* 旧 #1a1410 → 深海军黑 */
    --ink-light:    #48566f;    /* 旧 #5c4f43 */
    --paper:        #f2f6fc;    /* 旧 #fdfaf4 暖纸 → 蓝灰纸面 */
    --paper-dark:   #e6edf8;
    --navy:         #4a90e2;    /* 旧 #6b1d2a 酒红 → 品牌天蓝 */
    --navy-light:   #6fb1f0;    /* 旧 #8b2e3a */
    --gold:         #4a90e2;    /* 旧 #9b7d3c 老金 → 品牌天蓝 */
    --gold-light:   #6fb1f0;    /* 旧 #c4a35a */
    --border:       #dfe6f2;    /* 旧 #e0d7c6 暖边 → 蓝灰边 */
    --border-dark:  #c3cfe4;
    --success:      #2e7d4f;
    --error:        #c93b3b;
    --warning:      #b7791f;
    --shadow-glow:  0 0 0 3px rgba(74, 144, 226, .14);   /* 旧酒红辉光 → 品牌蓝 */
    --glass-bg:     rgba(255, 255, 255, .82);   /* 旧暖象牙玻璃 → 冷白玻璃 */
    --glass-border: rgba(32, 58, 112, .08);     /* 旧暖边 → 蓝灰边 */
    --glass-shadow: 0 2px 12px rgba(23, 38, 84, .05);
    /* 旧圆角体系 → 全站统一 8px（demo 卡/计划卡/弹窗/旧面板全部归一） */
    --radius:      8px;
    --radius-sm:   8px;
    --radius-lg:   8px;
    --radius-xl:   8px;
    /* 降级工具链文字：弱蓝灰，次要但可读 */
    --ws-demoted:   #8593ab;
}


/* ----------------------------------------------------------------------------
   光场背景：冷调渐变网格（蓝/青微光，保持纯白主体）。canvas(#ws-bg) 承载粒子。
   视觉层级：canvas(z:0) < 渐变网格(z:1) < 内容(z:2)
   ---------------------------------------------------------------------------- */
.ws-app { position: relative; }

.ws-app::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        /* 顶部大面提亮（把视线引向工作区，中央保持明亮） */
        radial-gradient(1500px 1000px at 50% -10%, rgba(255, 255, 255, .9), transparent 60%),
        /* 极淡蓝 · 左上（品牌蓝的空气感） */
        radial-gradient(1200px 900px at 14% -10%, rgba(66, 145, 196, .20), transparent 58%),
        /* 极淡蓝紫 · 右下（深一点的冷色层次，形成对角纵深） */
        radial-gradient(1100px 880px at 96% 112%, rgba(74, 144, 226, .16), transparent 60%),
        /* 天蓝 · 右上点缀 */
        radial-gradient(1000px 800px at 88% 2%, rgba(110, 185, 220, .14), transparent 56%),
        /* 蓝灰画布基色（卡片与画布的分层由色差撑起） */
        linear-gradient(168deg, #eef2f9 0%, #e9eef7 52%, #e2e9f4 100%);
    background-blend-mode: normal, normal, normal, normal, normal;
    mix-blend-mode: normal;
    opacity: 1;
}

/* three.js 视差画布：垫底，让光点从网格缝隙与玻璃后透出 */
#ws-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: block;
}

/* 让正文三层浮于背景之上（不触碰 modal/toast 的独立 z-index） */
.ws-nav,
.ws-nav-subtitle,
.ws-body,
.ws-status {
    position: relative;
    z-index: 2;
}


/* ----------------------------------------------------------------------------
   LAYER 1 · 导航栏 —— 悬浮玻璃 + 分组控件（方向│输出 一个分段条，右侧账户区）
   ---------------------------------------------------------------------------- */
.ws-nav {
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    border-bottom: 1px solid var(--g-rim);
    box-shadow: 0 2px 12px rgba(23, 38, 84, .06);
}

.ws-nav__logo {
    border-radius: 8px;
    background: linear-gradient(150deg, var(--g-blue-sky), var(--g-blue));
    box-shadow: 0 2px 8px rgba(42, 87, 180, .22), inset 0 1px 0 rgba(255, 255, 255, .32);
    color: #f2f7ff;
}
.ws-nav__name { letter-spacing: .01em; }

/* 顶部介绍副标题：蓝调细分隔线，融入光场 */
.ws-nav-subtitle {
    border-bottom: 1px solid rgba(32, 58, 112, .06) !important;
}

/* —— 分组分段条：方向切换 + 公式输出 合并为一个控件群 —— */
.ws-nav__controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 14px;
    padding: 4px;
    border: 1px solid var(--g-rim);
    border-radius: 8px;
    background: #f4f7fc;
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
    box-shadow: inset 0 1px 3px rgba(32, 58, 112, .06);
}
.ws-nav__controls .ws-mode {
    margin-left: 0;
    padding: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.ws-nav__controls .ws-meta {
    margin-left: 4px;
    padding-left: 14px;
    border-left: 1px solid var(--g-rim);
}
.ws-nav__controls .ws-meta__label { margin-right: 8px; }

/* 双向模式切换：蓝色滑块，选中即品牌蓝（清晰激活态）。
   注意：外层 .ws-nav__controls 承担了 4px 内边距，.ws-mode 自身 padding=0，
   滑块必须从 0,0 定位，与选项严格对齐（避免转 LaTeX 时偏移 4px）。 */
.ws-mode__opt {
    width: 110px;
    height: 38px;
    line-height: 38px;
    border-radius: 8px;
    font-weight: 500;
    color: var(--g-slate);
}
.ws-mode__opt.active { color: #fff; font-weight: 600; }
.ws-mode__thumb {
    top: 0;
    left: 0;
    width: 110px;
    height: 38px;
    border-radius: 8px;
    background: linear-gradient(150deg, var(--g-blue-sky), var(--g-blue));
    border: 1px solid rgba(255, 255, 255, .32);
    box-shadow:
        0 2px 8px rgba(41, 115, 160, .25),
        0 1px 2px rgba(32, 58, 112, .10),
        inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform .28s var(--g-ease-spring);
}
.ws-mode[data-mode="latex"] .ws-mode__thumb { transform: translateX(110px); }

/* 公式输出铭牌 → 玻璃胶囊；选中 = 品牌蓝渐变（与模式滑块同一激活语言） */
.ws-meta__label { letter-spacing: .18em; }
.ws-plate {
    width: auto;
    min-width: 86px;
    height: 38px;
    padding: 0 16px;
    border-radius: var(--g-radius-md);
    background: transparent;
    border: 1px solid transparent;
    color: var(--g-slate);
    font-weight: 600;
    letter-spacing: .06em;
    transition: all .16s var(--g-ease-out), transform .16s var(--g-ease-spring);
}
.ws-plate:hover {
    border-color: var(--g-blue-bright);
    color: var(--g-ink);
    transform: translateY(-1px);
}
.ws-plate.active {
    background: linear-gradient(150deg, var(--g-blue-sky), var(--g-blue));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(41, 115, 160, .28), inset 0 1px 0 rgba(255, 255, 255, .32);
}


/* ----------------------------------------------------------------------------
   统一按钮组件（.btn 家族 + 导航链接）—— 圆角、柔影、微抬升
   ---------------------------------------------------------------------------- */
.btn,
.btn-sm,
.btn-xs {
    border-radius: var(--g-radius-md);
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .16s var(--g-ease-spring), box-shadow .2s var(--g-ease-out),
                background .2s var(--g-ease-out), border-color .2s var(--g-ease-out);
    border: 1px solid transparent;
}
.btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-outline:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(23, 38, 84, .10);
}
.btn:active, .btn-primary:active, .btn-secondary:active, .btn-outline:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(23, 38, 84, .08);
}
/* 统一的聚焦可见环（无障碍） */
.btn:focus-visible, .ws-plate:focus-visible, .ws-go:focus-visible,
.ws-mode__opt:focus-visible, .ws-demote:focus-visible, .ws-drop:focus-visible,
.ws-rail-toggle:focus-visible, .ws-tools__head:focus-visible {
    outline: 2px solid var(--g-blue);
    outline-offset: 2px;
}

/* 普通 / 次按钮 —— 玻璃白（先声明，作为主按钮的基底） */
.btn, .btn-secondary, .btn-outline {
    background: var(--g-glass);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--g-ink);
    border-color: var(--g-rim);
    box-shadow: var(--g-shadow-tiny);
}
.btn-secondary:hover, .btn-outline:hover {
    background: #fff;
    border-color: var(--g-blue-bright);
}
.btn.btn-secondary { color: var(--g-ink); }

/* 主按钮 —— 天蓝→品牌蓝渐变 + 蓝辉（置于玻璃块之后，确保叠加在次级之上） */
.btn-primary {
    background: linear-gradient(135deg, var(--g-blue-sky), var(--g-blue));
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(41, 115, 160, .3), inset 0 1px 0 rgba(255, 255, 255, .32);
}
.btn-primary:hover {
    background: linear-gradient(135deg, #aad9f2, var(--g-blue-bright) 60%, var(--g-blue));
    box-shadow: 0 4px 16px rgba(41, 115, 160, .35), inset 0 1px 0 rgba(255, 255, 255, .38);
}

/* 加载态：按钮插入旋转 spinner（app.js 的 setBtnLoading 只挂 .is-loading，纯 CSS 反馈） */
.btn.is-loading::after,
.btn-primary.is-loading::after {
    content: "";
    width: 14px;
    height: 14px;
    margin-left: 6px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    animation: ws-spin .7s linear infinite;
}
@keyframes ws-spin { to { transform: rotate(360deg); } }

/* 导航栏内的 .btn（登录/注册）—— 抵消 workspace.css 的方形重置，纳入统一语言 */
.ws-nav .btn,
.ws-nav .btn-primary,
.ws-nav .btn-secondary,
.ws-nav .btn-outline {
    border-radius: var(--g-radius-md);
}

/* 导航右侧的链接型按钮（论文编辑器 / 反馈）—— 与 .btn 同一语言 */
.ws-nav__right .ws-demote {
    border-radius: var(--g-radius-md) !important;
    font-weight: 600 !important;
    background: var(--g-glass) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--g-shadow-tiny) !important;
    transition: transform .16s var(--g-ease-spring), box-shadow .2s var(--g-ease-out), border-color .2s;
}
.ws-nav__right .ws-demote:hover {
    transform: translateY(-1px);
    border-color: var(--g-blue-bright) !important;
    box-shadow: 0 4px 14px rgba(23, 38, 84, .10) !important;
    color: var(--g-ink) !important;
}


/* ----------------------------------------------------------------------------
   LAYER 2 · 工作台 —— 编辑区为主 + 窄侧栏（两块悬浮玻璃板）
   ---------------------------------------------------------------------------- */
.ws-board {
    padding: 26px 28px;
    gap: 24px;
    background: transparent;      /* 让光场透入两板之间 */
}

/* 两块玻璃板：左 = 编辑/上传工作区（主），右 = 结果/操作侧栏（窄）。
   画布为蓝灰底，卡片为近纯白 —— 层次由色阶差支撑。 */
.ws-board > .ws-input,
.ws-board > .ws-console {
    background: var(--g-glass);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(32, 58, 112, .12);
    border-top-color: var(--g-glass-line);
    border-radius: var(--g-radius);
    box-shadow: var(--g-shadow), inset 0 1px 0 rgba(255, 255, 255, .6);
    overflow: hidden;
}

/* —— 左侧工作区：内部上下两张独立卡片（输入 │ 上传），模块边界清晰 —— */
.ws-input {
    gap: 14px;
    padding: 16px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* 源码编辑器卡片：纯白底（画布之上最亮面） */
.ws-input__text {
    flex: 1 1 auto;
    padding: 18px 20px 12px;
    background: #ffffff;
    border: 1px solid rgba(32, 58, 112, .10);
    border-radius: var(--g-radius-md);
    box-shadow: var(--g-shadow-tiny);
}
/* 文件上传卡片：第二档蓝灰面——与编辑器卡片一眼分层，但仍是中性浅色 */
.ws-input__files {
    flex: 0 0 auto;
    padding: 18px 20px 20px;
    background: var(--g-panel);
    border: 1px solid rgba(32, 58, 112, .10);
    border-radius: var(--g-radius-md);
    box-shadow: none;
}

/* 区块标题：品牌蓝短杠 + 大号黑体（区域说明突出） */
.ws-input__title,
.ws-console__title,
.ws-tools__title,
.ws-live-label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 600;
    color: var(--g-ink);
    letter-spacing: .06em;
    margin-bottom: 8px;
}
.ws-input__title::before,
.ws-console__title::before,
.ws-tools__title::before,
.ws-live-label::before {
    content: "";
    width: 4px;
    height: 15px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--g-blue-bright), var(--g-blue));
    flex: 0 0 auto;
}
.ws-input__title { margin-bottom: 12px; }

/* 纯文本输入框：内嵌面板色（比卡片深一档）+ 柔和内阴影 + 品牌蓝聚焦环 */
.ws-input__textarea {
    background: var(--g-panel);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid transparent;
    border-radius: var(--g-radius-md);
    box-shadow: inset 0 2px 6px rgba(32, 58, 112, .06);
    color: var(--g-ink);
    padding: 20px 24px;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.ws-input__textarea:focus {
    border-color: var(--g-blue-bright);
    background: #fff;
    box-shadow: 0 0 0 4px var(--g-blue-glow), inset 0 2px 6px rgba(32, 58, 112, .04);
}
.ws-input__textarea::placeholder { color: var(--g-mute); }

/* 字符计数：蓝色数字，醒目但不喧宾夺主 */
.ws-input__meta {
    color: var(--g-slate);
    font-weight: 500;
}
.ws-input__meta #charCount {
    color: var(--g-blue);
    font-weight: 600;
    font-family: var(--font-mono);
}

/* 文件拖拽区：比卡片深一档的蓝灰面板（内嵌，浮于最上层卡片之内） */
.ws-drop {
    border: 2px dashed var(--g-rim-strong);
    border-radius: var(--g-radius-md);
    background: rgba(255, 255, 255, .6);
    transition: border-color .18s, background .18s, transform .2s var(--g-ease-out), box-shadow .2s;
}
.ws-drop:hover,
.ws-drop.drag-over {
    border-color: var(--g-blue-bright);
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(74, 144, 226, .12);
}
.ws-drop__icon { filter: saturate(0); opacity: .72; }
.ws-drop:not(.drag-over) .ws-drop__icon { transition: transform .25s var(--g-ease-out); }
.ws-drop:hover .ws-drop__icon { transform: scale(1.08); filter: none; opacity: .9; }
.ws-drop__sub { color: var(--g-mute); }

/* —— 右侧结果侧栏（窄 · 可折叠）—— */
.ws-console {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* 侧栏头部：标题 + 折叠钮 */
.ws-console__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 0;
}
.ws-console__head .ws-console__title { margin-bottom: 0; }
.ws-rail-toggle {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--g-rim);
    border-radius: 8px;
    background: var(--g-glass);
    color: var(--g-slate);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: all .16s var(--g-ease-out);
}
.ws-rail-toggle:hover {
    border-color: var(--g-blue-bright);
    color: var(--g-blue);
    transform: translateX(-1px);
}

/* 统计区：三枚小徽片并排 */
.ws-console__preview { padding: 14px 18px 4px; }
.ws-param {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.ws-param li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 9px 4px 8px;
    background: var(--g-panel);
    border: 1px solid rgba(32, 58, 112, .08);
    border-radius: 8px;
}
.ws-param dt {
    color: var(--g-slate);
    font-size: 12px;
    font-weight: 500;
}
.ws-param dd {
    margin: 0;
    color: var(--g-blue);
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
}
.ws-param__empty {
    color: var(--g-mute);
    font-size: 13.5px;
    font-style: normal;
}

/* 实时公式预览：淡面板 + 滚动 */
.ws-console__live {
    padding: 12px 18px 2px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* 「下载 HTML 预览」按钮：侧栏内唯一的预览入口（生成自包含 HTML，本地打开） */
.ws-console__live .ws-download-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--g-blue);
    border: 1px solid var(--g-blue);
    border-radius: var(--g-radius-md);
    cursor: pointer;
    text-align: center;
    transition: all .16s var(--g-ease-out);
}
.ws-console__live .ws-download-btn:hover {
    background: var(--g-blue-bright);
    border-color: var(--g-blue-bright);
    transform: translateY(-1px);
}
.ws-console__live .ws-download-btn:disabled {
    opacity: .6;
    cursor: default;
    transform: none;
}
/* 「结果与操作」栏友好提示卡（预览下载免费 / 只当参考 / 大图耗时） */
.ws-console__hint {
    margin-top: 12px;
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.85;
    color: var(--g-slate);
    background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.4));
    border: 1px solid rgba(32, 58, 112, .1);
    border-radius: var(--g-radius-md);
}
.ws-console__hint strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--g-ink);
    margin-bottom: 4px;
}
.ws-console__hint p { margin: 0 0 4px; }
.ws-console__hint p:last-child { margin-bottom: 0; }
.ws-console__hint b { color: var(--g-blue); font-weight: 600; }
/* 售后/联系方式卡：天蓝左侧色条，与免费提示卡区分 */
.ws-console__hint.ws-console__ar {
    border-left: 3px solid var(--g-blue-bright);
    background: linear-gradient(180deg, rgba(74, 144, 226, .10), rgba(255, 255, 255, .4));
}
/* 顶部「购买积分」：站内青蓝主风格, 略放大加粗提升识别度(2026-08-27) */
.ws-buy-top {
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 9px 20px !important;
    margin-left: 8px;
    background: linear-gradient(155deg, #7ad8f0, var(--g-blue-sky) 30%, #12a8c8 72%, #0098b8) !important;
    border-color: transparent !important;
    color: #04303e !important;
    box-shadow: 0 2px 10px rgba(0, 184, 212, .30);
}
.ws-buy-top:hover {
    box-shadow: 0 4px 16px rgba(0, 184, 212, .42);
}
/* 顶部积分显示(2026-09-06 重排): 双统计块——数值大字在上/标签在下,
   发丝分隔线;替换旧"免费300 + 已购X积分"单行小药丸(字小拥挤) */
.ws-credits {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 5px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--g-blue);
    background: rgba(0, 184, 212, .10);
    border: 1px solid rgba(0, 184, 212, .32);
    border-radius: 10px;
    white-space: nowrap;
    letter-spacing: .2px;
}
.ws-credits__dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--g-blue);
    box-shadow: 0 0 0 3px rgba(0, 184, 212, .18);
}
.ws-credits__stat {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 54px;
}
.ws-credits__num {
    font-size: 17.5px;
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
}
.ws-credits__lab {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 2.5px;
    opacity: .62;
}
.ws-credits__sep {
    width: 1px;
    align-self: stretch;
    margin: 3px 0;
    background: currentColor;
    opacity: .18;
}
.ws-credits__free { color: var(--g-blue); }
.ws-credits__paid { color: var(--g-blue-bright); }
/* 余额变动徽标(2026-09-07): 扣费 −N(橙红) / 到账 +N(绿), 8s 后由 JS 移除 */
.ws-credits__delta {
    align-self: center;
    margin-left: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    animation: wsDeltaIn .35s var(--g-ease-out);
}
.ws-credits__delta.is-use { background: rgba(245, 108, 108, .12); color: #d64545; }
.ws-credits__delta.is-add { background: rgba(52, 199, 123, .12); color: #1d9e5f; }
@keyframes wsDeltaIn {
    from { opacity: 0; transform: translateX(4px); }
    to   { opacity: 1; transform: translateX(0); }
}
.ws-credits__guest { color: var(--g-blue-bright); font-size: 13.5px; cursor: pointer; }
.ws-credits.updated { animation: quotaFlash .6s var(--g-ease-out); }
/* 余额变动强调(2026-09-06): 数字块脉冲式高亮一拍 */
@keyframes wsQuotaPulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 184, 212, .35); }
    60% { box-shadow: 0 0 0 7px rgba(0, 184, 212, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 184, 212, 0); }
}
.ws-credits.updated { animation: quotaFlash .6s var(--g-ease-out), wsQuotaPulse .9s var(--g-ease-out); }

/* 2026-08-27 副标题内注册提示：跟随站内青蓝语言, 常驻显眼但不抢戏 */
.ws-auth-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--g-ink);
    border-top: 1px dashed rgba(0, 184, 212, .30);
}
.ws-auth-hint .ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--g-blue); }
.ws-auth-hint b { color: var(--g-blue-bright); font-weight: 700; }
.ws-auth-hint__btn {
    border: none;
    background: none;
    color: var(--g-blue);
    font-size: 14px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
}
.ws-auth-hint__btn:hover { background: rgba(0, 184, 212, .10); }

@media (max-width: 900px) {
    .ws-credits { gap: 10px; padding: 4px 12px; }
    .ws-credits__num { font-size: 15.5px; }
    .ws-credits__lab { font-size: 10px; letter-spacing: 2px; }
    .ws-auth-hint { font-size: 13px; }
}

/* 上传区处理中状态（spinner + 文案）：拖入项目后立刻给出反馈，避免“看起来没反应” */
.ws-drop__status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--g-blue);
    background: rgba(74, 144, 226, .08);
    border: 1px solid rgba(74, 144, 226, .25);
    border-radius: var(--g-radius-md);
}
.ws-spinner {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border: 2.5px solid rgba(74, 144, 226, .25);
    border-top-color: var(--g-blue);
    border-radius: 50%;
    animation: ws-spin .7s linear infinite;
}
@keyframes ws-spin { to { transform: rotate(360deg); } }
.ws-live {
    flex: 1 1 auto;
    min-height: 84px;
    max-height: 300px;
    overflow-y: auto;
    padding: 12px 14px;
    background: var(--g-panel);
    border: 1px solid rgba(32, 58, 112, .08);
    border-radius: var(--g-radius-md);
    box-shadow: inset 0 1px 3px rgba(32, 58, 112, .05);
    font-size: 15px;
    line-height: 1.8;
}
.ws-live .katex-display { margin: 8px 0; }
.ws-live__item + .ws-live__item { margin-top: 8px; }
.ws-live__placeholder {
    display: block;
    color: var(--g-mute);
    font-size: 13px;
    text-align: center;
    padding: 22px 10px;
}
.ws-live__err { color: var(--error); font-family: var(--font-mono); font-size: 12.5px; }
/* 全文本预览持有容器：后端语义化 HTML（latex_engine.HtmlWriter 输出）
   注意：内容由 /api/latex/to-html 产出，前端不做任何 LaTeX 解析。 */
.ws-live__holder {
    color: var(--g-ink);
    font-size: 14px;
    line-height: 1.9;
}
.ws-live__holder .katex { font-size: 1.05em; }
/* —— 后端 HtmlWriter 结构类 —— */
.ws-live__holder .latex-page { display: block; }
.ws-live__holder .latex-section {
    margin: 12px 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--g-graphite);
    border-left: 3px solid var(--g-blue-bright);
    padding-left: 8px;
}
.ws-live__holder .latex-section-lv1 { font-size: 16px; }
.ws-live__holder .latex-section-number { color: var(--g-blue); font-weight: 600; margin-right: 4px; }
.ws-live__holder .latex-para { margin: 4px 0; }
.ws-live__holder .latex-math { margin: 6px 0; }
.ws-live__holder .latex-inline-math {
    padding: 0 2px;
}
.ws-live__holder .latex-display-math {
    display: block;
    margin: 8px 0;
    padding: 8px 12px;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(32, 58, 112, .08);
    border-radius: 8px;
    overflow-x: auto;
}
.ws-live__holder .latex-math math {
    font-size: 1.02em;
}
.ws-live__holder .latex-table {
    margin: 8px 0;
    border-collapse: collapse;
    font-size: 13px;
}
.ws-live__holder .latex-table th,
.ws-live__holder .latex-table td {
    border: 1px solid rgba(32, 58, 112, .14);
    padding: 4px 8px;
}
.ws-live__holder .latex-table th { background: var(--g-panel); font-weight: 500; }
.ws-live__holder .latex-figure {
    margin: 8px 0;
    text-align: center;
}
.ws-live__holder .latex-figure img { max-width: 100%; border-radius: 8px; }
.ws-live__holder .latex-caption {
    font-size: 12.5px;
    color: var(--g-slate);
    margin-top: 4px;
}
.ws-live__holder .latex-cite {
    color: var(--g-blue);
    font-size: 13px;
}
.ws-live__holder .latex-math-raw {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--g-slate);
    background: rgba(255, 255, 255, .6);
    padding: 1px 4px;
    border-radius: 4px;
}
.ws-live__holder .latex-math-unicode { color: var(--g-slate); }

/* ═══════════════════════════════════════════════════════════════════
   预览文档渲染（/api/latex/preview → docx-preview）
   后端调 convert_latex_to_docx_v2 生成本 Word（与"转换为 Word"同源），
   前端 docx-preview 渲染 → 预览 = 转换结果（公式 MathML、图片、排版、分节）。
   docx-preview 输出 .docx-wrapper > section.docx（真实 Word DOM）。
   ═══════════════════════════════════════════════════════════════════ */
.wsdoc {
    background: #d7dceb;    /* 纸张衬底（呼应全屏预览遮罩） */
}
.wsdoc .docx-wrapper {
    background: transparent;
    padding: 26px 18px 30px;
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 20px;
}
.wsdoc .docx-wrapper > section.docx {
    background: #fff;
    box-shadow: 0 2px 12px rgba(23, 38, 84, .12);
    max-width: 100%;
    overflow-x: auto;
}
.wsdoc .docx-wrapper > section.docx article,
.wsdoc .docx-wrapper > section.docx p {
    font-family: var(--font-body);
}
.wsdoc .docx-wrapper section.docx table {
    border-collapse: collapse;
}
.wsdoc .docx-wrapper section.docx table td,
.wsdoc .docx-wrapper section.docx table th {
    padding: 3px 6px;
}
/* 长文档虚拟化：docx-preview 整篇塞进一个 section.docx > article(全篇一个块)，
   滚到哪才会布局/绘制哪。只作用于文章级内容段落(图片也包在 p 里)，表格/标题排除
   (避免 contain-intrinsic-size 撑坏表格/结构)。contain-intrinsic-size 后的
   auto 关键字会让浏览器记住真实高度，滚动条高度稳定不跳。实测首渲染从 ~810ms
   降至 ~570ms，且滚动帧率更大提升。 */
.wsdoc .docx-wrapper > section.docx article > p,
.wsdoc .docx-wrapper > section.docx article > div {
    content-visibility: auto;
    contain-intrinsic-size: auto 96px;
}
/* 公式（docx-preview 将 OMML 转 MathML）——浏览器原生渲染 */
.wsdoc mjx-container,
.wsdoc .docx-wrapper math {
    font-size: 1.04em;
    vertical-align: middle;
}
.wsdoc-error {
    padding: 14px;
    color: var(--error);
    font-size: 13px;
}

/* ── 侧栏实时预览：docx-preview 输出居中、超宽时横向滚动 ── */
.ws-live__holder.wsdoc .docx-wrapper {
    padding: 12px 4px 14px;
    align-items: flex-start;
}
.ws-live__holder.wsdoc .docx-wrapper > section.docx {
    width: auto;
    max-width: 100%;
}


/* 无公式诊断：淡青灰提示条，明确告诉用户预览在生效、只是当前无可渲染内容 */
.ws-live__diagnosis {
    display: block;
    padding: 12px 14px;
    border: 1px dashed var(--g-rim-strong);
    border-radius: var(--g-radius-md);
    background: rgba(255, 255, 255, .45);
    color: var(--g-slate);
    font-size: 12.5px;
    line-height: 1.8;
    text-align: center;
}
/* 「排版预览」入口按钮：与区头同行的辅助按钮 */
.ws-live-fullbtn {
    margin-left: auto;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--g-blue);
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--g-rim);
    border-radius: 8px;
    cursor: pointer;
    transition: all .16s var(--g-ease-out);
    white-space: nowrap;
}
.ws-live-fullbtn:hover {
    border-color: var(--g-blue-bright);
    color: var(--g-blue);
    background: #fff;
    transform: translateY(-1px);
}
/* 「下载 HTML」：实心品牌蓝，与「排版预览」描边按钮同排区分 */
.ws-live-fullbtn + .ws-live-htmlbtn { margin-left: 0; }
.ws-live-htmlbtn {
    color: #fff;
    background: var(--g-blue);
    border-color: var(--g-blue);
}
.ws-live-htmlbtn:hover {
    background: var(--g-blue-bright);
    border-color: var(--g-blue-bright);
    color: #fff;
    transform: translateY(-1px);
}


/* ----------------------------------------------------------------------------
   排版预览完全版 —— 全屏纸面预览（后端 paginated 分页 HTML）
   ---------------------------------------------------------------------------- */
.ws-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 150;
    /* 近实底背景 + 去掉 backdrop-filter 模糊：全屏 backgdrop blur 是长文档滚动卡顿的主因
       （每次子内容滚动都重算背板，且把整屏拉到独立合成层）。.92 已几乎不透明，
       去掉后视觉几乎无差，但滚动帧率实测 ~19→~53 FPS。 */
    background: rgba(233, 238, 247, .97);
}
.ws-preview-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.ws-preview-topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1px solid var(--g-rim);
    box-shadow: 0 2px 12px rgba(23, 38, 84, .06);
}
.ws-preview-topbar__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--g-ink);
}
.ws-preview-topbar__info {
    font-size: 12.5px;
    color: var(--g-mute);
    flex: 1 1 auto;
}
.ws-preview-topbar__actions {
    display: flex;
    gap: 8px;
}
.ws-preview-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 28px 24px 60px;
}
.ws-preview-loading {
    text-align: center;
    padding: 80px 20px;
    color: var(--g-slate);
    font-size: 14px;
}
/* 纸面页：A4 比例（宽 21cm，高 29.7cm），白纸 + 页边距 + 页码 */
.ws-preview-page {
    width: min(820px, calc(100vw - 48px));
    margin: 0 auto 28px;
    background: #fff;
    border: 1px solid rgba(32, 58, 112, .10);
    border-radius: 4px;
    box-shadow: 0 4px 24px rgba(23, 38, 84, .12);
    overflow: hidden;
}
.ws-preview-page__body {
    padding: 52px 60px 40px;
    min-height: 380px;
    font-size: 14px;
    line-height: 1.9;
    color: #1c1c1e;
}
.ws-preview-page__num {
    padding: 10px 0 14px;
    text-align: center;
    font-size: 11.5px;
    color: var(--g-mute);
    border-top: 1px solid rgba(32, 58, 112, .06);
}
/* 纸面页内的结构样式（后端类 + 本地覆盖为「纸面排版」观感） */
.ws-preview-page__body .latex-section {
    margin: 16px 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: #111;
}
.ws-preview-page__body .latex-section-lv1 { font-size: 19px; }
.ws-preview-page__body .latex-section-lv3 { font-size: 14.5px; }
.ws-preview-page__body .latex-para { margin: 6px 0; text-align: justify; }
.ws-preview-page__body .latex-math { margin: 10px 0; }
.ws-preview-page__body .latex-display-math {
    padding: 10px 14px;
    background: #f7f9fb;
    border: 1px solid rgba(32, 58, 112, .07);
    border-radius: 6px;
    overflow-x: auto;
}
.ws-preview-page__body .latex-math math { font-size: 1.04em; }
.ws-preview-page__body .latex-table {
    margin: 12px 0;
    border-collapse: collapse;
    font-size: 13.5px;
    width: 100%;
}
.ws-preview-page__body .latex-table th,
.ws-preview-page__body .latex-table td {
    border: 1px solid rgba(0, 0, 0, .15);
    padding: 6px 10px;
}
.ws-preview-page__body .latex-table th { background: #f3f5f9; font-weight: 500; }
.ws-preview-page__body .latex-figure { margin: 12px 0; text-align: center; }
.ws-preview-page__body .latex-figure img { max-width: 100%; border-radius: 4px; }
.ws-preview-page__body .latex-caption { font-size: 12.5px; color: var(--g-slate); margin-top: 6px; }
.ws-preview-page__body .latex-cite { color: var(--g-blue); }
.ws-preview-page__body .latex-math-raw,
.ws-preview-page__body .latex-math-unicode {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--g-slate);
    background: rgba(0, 0, 0, .035);
    padding: 1px 5px;
    border-radius: 4px;
}
@media (max-width: 760px) {
    .ws-preview-page__body { padding: 28px 22px 24px; }
}

/* 主行动按钮：紧凑品牌蓝（不再是深灰巨板） */
.ws-console__action {
    flex: 0 0 auto;
    padding: 10px 18px 6px;
    align-items: stretch;
}
.ws-go {
    width: 100%;
    min-height: 0;
    border-radius: var(--g-radius-md);
    background:
        radial-gradient(120% 160% at 12% 0%, rgba(255, 255, 255, .14), transparent 46%),
        linear-gradient(155deg, #a9dbf4, var(--g-blue-sky) 30%, #3a9ccf 72%, var(--g-blue));
    border: 1px solid rgba(255, 255, 255, .36);
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: var(--g-shadow-blue), inset 0 1px 0 rgba(255, 255, 255, .34);
    transition: transform .18s var(--g-ease-spring), box-shadow .22s var(--g-ease-out), filter .22s;
}
.ws-go::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .22) 50%, transparent 66%);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.ws-go:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(41, 115, 160, .35),
                0 0 0 1px rgba(255, 255, 255, .4),
                inset 0 1px 0 rgba(255, 255, 255, .36);
}
.ws-go:hover::before { opacity: 1; }
.ws-go:active { transform: translateY(1px) scale(.99); }
.ws-go:disabled { opacity: .5; cursor: not-allowed; filter: saturate(.6) brightness(.96); }
.ws-go.is-loading { cursor: wait; }
.ws-go__main { color: #fff; font-weight: 600; }
.ws-go__sub { color: rgba(255, 255, 255, .78); }
/* 主行动按钮加载态：右侧 spinner */
.ws-go.is-loading::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .32);
    border-top-color: #fff;
    animation: ws-spin .7s linear infinite;
}

/* 报告区 */
.ws-console__report {
    flex: 0 0 auto;
    padding: 4px 18px 18px;
}
.ws-console__report .report-section {
    margin: 6px 0 0;
    border-radius: var(--g-radius-md);
    background: var(--g-glass-soft);
    border: 1px solid var(--g-rim);
    box-shadow: var(--g-shadow-tiny);
    overflow: hidden;
}
.ws-console__report .preview-label {
    color: var(--g-slate);
    font-size: 12.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
}

/* 空状态：引导用户行动（无结果时显示，出现报告后自动隐藏）—— 蓝灰面板色 */
.ws-console__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 22px 16px;
    border: 1.5px dashed rgba(32, 58, 112, .18);
    border-radius: var(--g-radius-md);
    background: var(--g-panel);
}
.ws-console__empty svg { color: var(--g-blue-bright); margin-bottom: 4px; }
.ws-console__empty-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--g-ink);
}
.ws-console__empty-desc {
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--g-slate);
    max-width: 260px;
}
/* 有报告时隐藏空状态（:has 现代浏览器） */
.ws-console__report:has(.report-section.visible) .ws-console__empty,
.ws-console__report:has(.report-section[style*="display: block"]) .ws-console__empty {
    display: none;
}

/* 折叠侧栏后的召回按钮（fixed 右下，仅 data-rail=collapsed 时显示） */
.ws-rail-reopen {
    display: none;
    position: fixed;
    right: 22px;
    bottom: 72px;
    z-index: 30;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 1px solid var(--g-rim);
    border-radius: 8px;
    background: var(--g-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--g-blue);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--g-shadow);
    transition: transform .16s var(--g-ease-spring), box-shadow .2s;
}
.ws-rail-reopen:hover {
    transform: translateY(-2px);
    border-color: var(--g-blue-bright);
    box-shadow: var(--g-shadow-deep);
}
.ws-body[data-rail="collapsed"] .ws-rail-reopen { display: inline-flex; }


/* ----------------------------------------------------------------------------
   LAYER 3 · 状态栏 —— 玻璃底边，与导航呼应
   ---------------------------------------------------------------------------- */
.ws-status {
    background: rgba(255, 255, 255, .84);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border-top: 1px solid var(--g-rim);
    box-shadow: 0 -2px 12px rgba(23, 38, 84, .05);
}


/* ----------------------------------------------------------------------------
   附属工具区 —— 可折叠抽屉（默认收起，不干扰主工作流）
   ---------------------------------------------------------------------------- */
.ws-tools {
    background: var(--g-glass);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(32, 58, 112, .12);
    border-radius: var(--g-radius);
    margin: 0 28px 26px;
    box-shadow: var(--g-shadow-tiny);
    overflow: hidden;
}
.ws-tools__head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
}
.ws-tools__head:hover { background: var(--g-panel); }
.ws-tools__head .ws-tools__title { margin-bottom: 0; flex: 1 1 auto; }
.ws-tools__chevron {
    color: var(--g-slate);
    font-size: 13px;
    transition: transform .2s var(--g-ease-out);
    flex: 0 0 auto;
}
.ws-tools.tools-open .ws-tools__chevron { transform: rotate(180deg); }
.ws-tools__body {
    display: none;
    padding: 2px 20px 20px;
    border-top: 1px solid var(--g-rim);
}
.ws-tools.tools-open .ws-tools__body { display: block; animation: ws-tools-in .28s var(--g-ease-out); }
@keyframes ws-tools-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ws-tools .tab-btn.ws-demote {
    font-size: 13.5px;
    margin: 0;
    padding: 8px 14px;
    border-radius: 8px;
    background: transparent;
    color: var(--g-slate);
    opacity: .85;
    transition: all .16s var(--g-ease-out);
}
.ws-tools .tab-btn.ws-demote:hover { color: var(--g-blue); opacity: 1; }
/* 激活的工具标签：品牌蓝底白字（清晰的选中态） */
.ws-tools .tab-btn.active { background: var(--g-blue); color: #fff !important; opacity: 1; }

/* 旧工具卡片 / 表单面 / 弹窗卡 —— 统一玻璃 + 圆角 + 柔影 */
.ws-shell .pdf-card,
.ws-shell .file-drop-zone,
.ws-shell .input-group,
.ws-shell .modal-card {
    border-radius: var(--g-radius-md);
    background: var(--g-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--g-rim);
    box-shadow: var(--g-shadow-tiny);
}

/* 圆角归一：遗留硬编码 12px/4px/20px 的旧组件（登录框、demo 徽标、demo 卡等级标） */
.ws-shell .auth-input { border-radius: var(--g-radius-md); }
.ws-shell .demo-section-badge,
.ws-shell .demo-card-level,
.ws-shell .demo-card-free,
.ws-shell .demo-card { border-radius: var(--g-radius-md); }
/* 编辑器内的“快速体验”条：内嵌面板色，与源码输入框同层 */
.ws-shell .demo-cards-section {
    background: var(--g-panel);
    border-color: rgba(32, 58, 112, .08);
}
.ws-shell .demo-card { background: #fff; border-color: rgba(32, 58, 112, .10); }
.ws-shell .demo-section-title { color: var(--g-ink); font-weight: 500; }
.ws-shell .demo-card-name,
.ws-shell .demo-card-btn,
.ws-shell .demo-card-ref .demo-card-btn,
.ws-shell .demo-category-label { font-weight: 500; }
.ws-shell .demo-section-badge,
.ws-shell .demo-card-level,
.ws-shell .demo-card-free { font-weight: 500; }
/* 参考卡（premium 高亮）：金渐变 → 蓝家族渐变描边，仍做点缀不抢画面 */
.ws-shell .demo-card-ref {
    border: 1.5px solid rgba(66, 145, 196, .35);
    background: linear-gradient(135deg, #ffffff, #f2f6fc);
    box-shadow: 0 2px 12px rgba(23, 38, 84, .06);
}
.ws-shell .demo-card-ref:hover {
    border-color: rgba(66, 145, 196, .55);
    box-shadow: 0 4px 20px rgba(23, 38, 84, .10);
}
.ws-shell .demo-card-level { background: var(--g-blue); }
.ws-shell .demo-card-free { background: rgba(46, 125, 79, .10); }
.ws-shell .modal-overlay { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ws-shell input[type="text"],
.ws-shell input[type="password"],
.ws-shell textarea,
.ws-shell select {
    border-radius: var(--g-radius-md);
    border-color: rgba(32, 58, 112, .14);
    background: #fff;
}
.ws-shell input[type="text"]:focus,
.ws-shell input[type="password"]:focus,
.ws-shell textarea:focus {
    border-color: var(--g-blue-bright);
    box-shadow: 0 0 0 4px var(--g-blue-glow);
}
.ws-shell .plan-card {
    border-radius: var(--g-radius-md);
    background: var(--g-glass-soft);
    border: 1px solid var(--g-rim);
    box-shadow: var(--g-shadow-tiny);
    transition: transform .16s var(--g-ease-spring), box-shadow .2s, border-color .2s;
}
.ws-shell .plan-card:hover {
    transform: translateY(-2px);
    border-color: var(--g-blue-bright);
    box-shadow: var(--g-shadow);
}
.ws-shell .plan-price { color: var(--g-blue); }


/* ----------------------------------------------------------------------------
   动效：进场序列 + 滚动渐入 + 弹性
   ---------------------------------------------------------------------------- */
@keyframes ws-drop-in {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ws-rise-in {
    from { opacity: 0; transform: translateY(26px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ws-nav { animation: ws-drop-in .6s var(--g-ease-out) both; }
.ws-nav-subtitle { animation: ws-drop-in .6s var(--g-ease-out) .06s both; }
.ws-board > .ws-input   { animation: ws-rise-in .7s var(--g-ease-out) .10s both; }
.ws-board > .ws-console { animation: ws-rise-in .7s var(--g-ease-out) .18s both; }

/* 滚动渐入：标记 [data-reveal] 的元素进入视口时上浮淡入 */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--g-ease-out), transform .7s var(--g-ease-out);
    will-change: opacity, transform;
}
[data-reveal].in-view {
    opacity: 1;
    transform: translateY(0);
}


/* ----------------------------------------------------------------------------
   无障碍：用户偏好减少动态效果时，关闭全部进入/切换动效与视差
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    [data-reveal] { opacity: 1; transform: none; }
    #ws-bg { display: none !important; }
}


/* ============================================================================
   排版放大 & 串色收敛
   说明：旧 style-v3 / style.css 的字体偏小、且带衬线/酒红，这里统一
   「现代无衬线 + 更大的可读字号」，并归一残留的旧色 inline 元素。
   ============================================================================ */

/* 全局正文：旧版高级感衬线 + 基线放大（告别小字与粗体，向参考图的“大而透气”靠拢） */
body {
    font-family: var(--font-body, 'Georgia', 'Palatino Linotype', 'Book Antiqua', 'Noto Serif SC', 'SimSun', 'STSong', serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.66;
    color: var(--g-ink);
}

/* LAYER 1 导航（压缩间距避免横向溢出 + 突出主题黑体标题） */
.ws-nav { gap: 12px; padding: 0 14px; }
.ws-nav__right { gap: 6px; }
.ws-nav__name { font-size: 24px; font-weight: 600; color: var(--g-ink); letter-spacing: .01em; }
.ws-nav__version { font-size: 13.5px; }
.ws-nav-subtitle { font-size: 16.5px; color: var(--g-slate); }
.ws-mode__opt { font-size: 16.5px; }
.ws-plate { font-size: 15px; }
.ws-nav__right .ws-demote { font-size: 15px; }

/* 输入区 */
.ws-input__title { font-size: 16px; font-weight: 600; color: var(--g-ink); letter-spacing: .08em; }
.ws-input__textarea { font-size: 18px; line-height: 1.82; }

/* 旧 style-v3 用 ID 级选择器给输入框定了小字号/描边/衬线斜体，这里用同级覆盖。
   输入框 = 内嵌面板（白卡内更深一档的蓝灰），聚焦时提亮为白。 */
.ws-shell textarea#latexInput,
.ws-shell textarea#aiTextInput,
.ws-shell textarea#mtLatexInput {
    font-size: 19px;
    line-height: 1.9;
    padding: 20px 24px;
    border-radius: var(--g-radius-md);
    border: 1px solid rgba(32, 58, 112, .12);
    background: var(--g-panel);
    color: var(--g-ink);
}
.ws-shell textarea#latexInput::placeholder,
.ws-shell textarea#aiTextInput::placeholder,
.ws-shell textarea#mtLatexInput::placeholder {
    font-size: 15.5px;
    font-style: normal;
    color: var(--g-mute);
}
.ws-shell textarea#latexInput:focus,
.ws-shell textarea#aiTextInput:focus,
.ws-shell textarea#mtLatexInput:focus {
    border-color: var(--g-blue-bright);
    box-shadow: 0 0 0 4px var(--g-blue-glow);
    background: #fff;
}
.ws-input__meta { font-size: 15px; }
.ws-drop__hint { font-size: 17.5px; }
.ws-drop__sub { font-size: 15px; }
.ws-drop__actions .btn { font-size: 15px; }

/* 控制台 */
.ws-console__title { font-size: 15.5px; font-weight: 600; color: var(--g-ink); letter-spacing: .08em; }
.ws-param dt { font-size: 12.5px; }
.ws-param dd { font-size: 16.5px; }
.ws-param__empty { font-size: 14px; }
/* 主行动按钮：紧凑品牌蓝大字号 */
.ws-go__main { font-size: 21px; letter-spacing: .03em; }
.ws-go__sub { font-size: 13.5px; }

/* 状态栏 / 附属工具 */
.ws-status { font-size: 15.5px; }
.ws-tools__title { font-size: 15px; font-weight: 600; color: var(--g-ink); letter-spacing: .08em; }
.ws-tools .tab-btn.ws-demote,
.ws-status .ws-demote,
.ws-demote { font-size: 15px; }

/* 旧样式组件（风格库）放大、无衬线 */
.ws-shell .btn,
.ws-shell .btn-sm,
.ws-shell .btn-xs { font-size: 15px; }
.ws-shell .input-label { font-size: 15px; }
.ws-shell .pdf-card h4 { font-size: 17.5px; }
.ws-shell .pdf-desc { font-size: 15px; }
.ws-shell .preview-label { font-size: 14px; }

/* 收敛残留的旧色串扰：让报告/状态等去衬线、归一为中性石板灰 */
.ws-shell .report-content,
.ws-shell .report-section .report-content,
.ws-shell .file-hint,
.ws-shell .file-list,
.ws-shell .char-count { color: var(--g-slate); }

/* 收敛 demo 卡片溢出：避免撑破输入区、叠压文件上传 */
.ws-input__text { overflow-y: auto; }
.ws-input__text .demo-cards-grid { max-height: 170px; overflow-y: auto; }


/* ============================================================================
   极简模式开关（状态栏）—— 清晰可见的切换控件
   放在持久可见的状态栏里，切到极简模式后也不会把自己藏起来。
   ============================================================================ */
.ws-minswitch {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--g-slate);
    white-space: nowrap;
}
.ws-minswitch input { display: none; }
.ws-minswitch__track {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 8px;
    background: rgba(32, 58, 112, .18);
    box-shadow: inset 0 1px 2px rgba(32, 58, 112, .14);
    flex: 0 0 auto;
    transition: background .2s var(--g-ease-out);
}
.ws-minswitch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(32, 58, 112, .22);
    transition: transform .22s var(--g-ease-spring);
}
.ws-minswitch input:checked + .ws-minswitch__track {
    background: linear-gradient(150deg, var(--g-blue-bright), var(--g-blue));
}
.ws-minswitch input:checked + .ws-minswitch__track .ws-minswitch__thumb { transform: translateX(18px); }
.ws-minswitch__text { letter-spacing: .04em; }


/* ============================================================================
   Toast 提示 —— 浅色卡片 + 品牌色左描边（info=蓝/success=绿/error=红）
   ============================================================================ */
/* 修复：style-v3 的 .toast 无 position/display 门控，遗留 #toast 空元素会常驻页面底部；
   只对遗留 #toast 做固定底部居中 + .visible 门控。V3 容器内的 .toast 保持容器布局。 */
#toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    z-index: 9999;
    max-width: min(560px, calc(100vw - 48px));
}
#toast.visible {
    display: flex;
    animation: ws-toast-in .35s var(--g-ease-out) both;
}
@keyframes ws-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(14px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* V3 系统：容器右上角堆叠，toast 项保持文档流内的卡片外观 */
.toast-container {
    position: fixed;
    top: 80px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.toast-container .toast { display: flex; }
.toast {
    padding: 14px 18px;
    border-radius: var(--g-radius-md);
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--g-ink);
    border: 1px solid var(--g-rim);
    border-left: 4px solid var(--g-blue);
    box-shadow: var(--g-shadow);
    font-size: 15px;
    font-weight: 600;
}
.toast.info { border-left-color: var(--g-blue); background: rgba(255, 255, 255, .94); color: var(--g-ink); }
.toast.success { border-left-color: var(--success); background: rgba(255, 255, 255, .94); color: var(--g-ink); }
.toast.error { border-left-color: var(--error); background: rgba(255, 255, 255, .94); color: var(--g-ink); }
.toast .toast-icon { color: inherit; }


/* ============================================================================
   响应式兜底：窄屏（≤1080px）侧栏转纵向全宽，≤880px 板纵向堆叠
   ============================================================================ */
@media (max-width: 1080px) {
    .ws-board { grid-template-columns: minmax(0, 1fr); }
    .ws-console { max-height: none; }
    .ws-live { max-height: 180px; }
}
@media (max-width: 880px) {
    .ws-board { grid-template-columns: 1fr; }
    .ws-nav { flex-wrap: wrap; height: auto; padding: 12px 14px; gap: 10px; }
    .ws-nav__controls { flex-wrap: wrap; margin-left: 0; }
    .ws-mode__opt, .ws-mode__thumb { width: 104px; }
    .ws-console__action { min-height: 0; }
    .ws-tools { margin: 0 14px 18px; }
}