/* ============================================================================
   LaTeX ⇄ Word · Workbench 工业设计系统
   理念：多即是少 — 功能越复杂，界面越要呈现极致的秩序感。
   配色：亮白 + 暗金 + 深空灰   布局：三大物理层（导航 / 工作台 / 状态栏）
   注：本文件叠加在所有功能承载页之上（style-v3.css / style.css），
       只做视觉与层级的重构，绝不删除 / 移动功能 DOM 的 id 与 handler。
   ============================================================================ */

/* ----------------------------------------------------------------------------
   设计令牌（工业色板）
   ---------------------------------------------------------------------------- */
:root {
    /* 基础底色 — 亮白 */
    --ws-bright: #f6f7f9;          /* 画布亮白 */
    --ws-surface: #ffffff;         /* 面板白 */
    --ws-surface-dim: #eef0f3;     /* 次级面 */
    /* 暗金 */
    --ws-gold: #b8974e;            /* 主暗金 */
    --ws-gold-deep: #8a6f32;       /* 深度暗金（按压底/选中底） */
    --ws-gold-line: #c8ab63;       /* 悬停描边暗金 */
    /* 深空灰 */
    --ws-ink: #171a1f;             /* 最深灰 — 文字/铬件 */
    --ws-graphite: #2b2f36;        /* 石墨灰 — 按钮底/铬件 */
    --ws-steel: #3a3e46;           /* 钢灰 */
    --ws-slate: #6b7078;           /* 石板灰 — 次级文字 */
    --ws-mute: #9aa0a9;            /* 弱灰 */
    --ws-demoted: #b0b0b0;         /* 降级色（PDF 工具箱等） */
    /* 线 & 分隔 */
    --ws-hairline: #dfe1e6;        /* 极细分隔线 */
    --ws-hairline-strong: #c3c7cd;
    --ws-blackline: #171a1f;       /* 工况区之间的极细黑线 */
    /* 语义 */
    --ws-ok: #4a6a5a;
    --ws-warn: #a87b1e;
    --ws-err: #a63b3b;
}

/* ----------------------------------------------------------------------------
   全局骨板
   ---------------------------------------------------------------------------- */
body {
    background: var(--ws-bright);
    color: var(--ws-ink);
    font-family: var(--font-body, 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif);
    font-size: 15px;
}

/* 三层的容器化 */
.ws-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ws-bright);
}

/* ============================================================================
   LAYER 1 · 全局导航栏（height: 60px）
   ============================================================================ */
.ws-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    height: 60px;
    background: var(--ws-surface);
    border-bottom: 1px solid var(--ws-hairline);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 22px;
}
.ws-nav__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}
.ws-nav__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--ws-graphite);
    color: var(--ws-gold-line);
    font-family: var(--font-mono, monospace);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.5px;
    user-select: none;
}
.ws-nav__name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ws-ink);
    white-space: nowrap;
}
.ws-nav__version {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    color: var(--ws-mute);
    margin-top: 2px;
}

/* —— 双向模式切换拨杆（物理滑块）—— */
.ws-mode {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 12px;
    padding: 3px;
    background: var(--ws-surface-dim);
    border: 1px solid var(--ws-hairline-strong);
    isolation: isolate;
    user-select: none;
}
.ws-mode__track {
    display: flex;
    position: relative;
    z-index: 1;
}
.ws-mode__opt {
    position: relative;
    z-index: 2;
    width: 96px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--ws-slate);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color .12s steps(2, end);
}
.ws-mode__opt.active { color: var(--ws-bright); }
.ws-mode__thumb {
    position: absolute;
    z-index: 0;                     /* 位于文字之下：深色滑块充当活动项底色，文字浮于其上 */
    top: 3px;
    left: 3px;
    width: 96px;
    height: 36px;
    background: var(--ws-graphite);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 4px 10px rgba(23,26,31,.28),
        0 1px 2px rgba(23,26,31,.35);   /* 阻尼感：深色投影 */
    transition: transform .16s cubic-bezier(.4,0,.2,1);
}
.ws-mode[data-mode="latex"] .ws-mode__thumb { transform: translateX(100%); }
.ws-mode[data-mode="typst"] .ws-mode__thumb { transform: translateX(200%); }

/* —— Typst 工作台：四方向选择条（与主拨杆同族：石墨滑块分段） —— */
.ws-tdirs {
    grid-column: 1 / -1;
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--ws-surface-dim);
    border-bottom: 1px solid var(--ws-hairline-strong);
    overflow-x: auto;
    scrollbar-width: none;
}
.ws-tdirs::-webkit-scrollbar { display: none; }
.ws-tdir {
    position: relative;
    flex: 1 0 auto;
    min-width: 150px;
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--ws-slate);
    background: transparent;
    border: 0;
    border-right: 1px solid var(--ws-hairline);
    cursor: pointer;
    white-space: nowrap;
    transition: color .12s steps(2, end), background .12s;
}
.ws-tdir:last-child { border-right: 0; }
.ws-tdir small {
    display: block;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--ws-mute);
    letter-spacing: .02em;
    margin-top: 1px;
}
.ws-tdir:hover { color: var(--ws-ink); }
.ws-tdir.active {
    color: var(--ws-bright);
    background: var(--ws-graphite);
    font-weight: 600;
}
.ws-tdir.active small { color: rgba(255,255,255,.75); }

/* —— 产品输出切换：两块方形金属铭牌 —— */
.ws-meta {
    display: flex;
    flex: 0 0 auto;
}
.ws-meta__label {
    align-self: center;
    margin-right: 12px;
    font-size: 11px;
    letter-spacing: .16em;
    color: var(--ws-mute);
    text-transform: uppercase;
}
.ws-plates {
    display: flex;
    gap: 6px;
}
.ws-plate {
    width: 92px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    cursor: pointer;
    border: 1px solid var(--ws-hairline-strong);
    background: var(--ws-surface-dim);
    color: var(--ws-slate);
    transition: none;               /* 切换干脆利落，无渐变 */
    user-select: none;
}
.ws-plate:hover { border-color: var(--ws-gold-line); }   /* 悬停边框变暗金 */
.ws-plate.active {
    background: var(--ws-gold-deep);   /* 选中底填深色 */
    color: var(--ws-bright);
    border-color: var(--ws-gold-deep);
}

/* 顶部副标题：普通字重 300，深灰，悬于导航下方左侧 */
.ws-nav-subtitle {
    font-size: 13px;
    font-weight: 300;
    letter-spacing: .02em;
    color: var(--ws-slate);
}

/* 导航右侧分组（登录/积分等业务控件） */
.ws-nav__right {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    white-space: nowrap;
}
.ws-nav__right .ws-mode,
.ws-nav__right .ws-meta { flex: 0 0 auto; }

/* 兼容旧 topbar 业务控件的排布容器 */
.ws-nav .topbar-right,
.ws-nav #topbarRight,
.ws-nav #userDropdown { margin-left: 0; }

/* ============================================================================
   LAYER 2 · 核心工作台（6:4 非对称，占据主视觉）
   —— 设计注释：
      将文本区和文件区纵向堆叠，是为了让视线沿着重力方向自然下落；
      将PDF工具踢到底角，是为了把舞台100%让给转换核心。
   ============================================================================ */
.ws-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* 每个方向的板：编辑区为主（自适应 1fr）+ 结果侧栏（固定窄幅 ~392px）。
   —— 设计注释：核心工作是输入/编辑，占主版面；结果与操作收窄为右侧固定栏；
      侧栏可通过 .ws-rail__toggle 折叠，折叠后编辑区独占全宽。 */
.ws-board {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 27vw, 392px);
    gap: 1px;
    background: var(--ws-hairline);
    min-height: 0;
}
/* 侧栏折叠态：编辑区独占全宽，控制台整体隐藏（由 .ws-rail__reopen 召回） */
.ws-body[data-rail="collapsed"] .ws-board { grid-template-columns: minmax(0, 1fr); }
.ws-body[data-rail="collapsed"] .ws-console { display: none; }
/* 由容器 data-mode 决定显示哪块板（瞬时硬切换，无动画） */
.ws-body[data-mode="word"]  .board-reverse, .ws-body[data-mode="word"]  .board-typst { display: none; }
.ws-body[data-mode="latex"] .board-forward, .ws-body[data-mode="latex"] .board-typst { display: none; }
.ws-body[data-mode="typst"] .board-forward, .ws-body[data-mode="typst"] .board-reverse { display: none; }
.board-typst { display: none; }
.ws-body[data-mode="typst"] .board-typst { display: grid; }

.ws-work__input,
.ws-work__console,
.ws-board > .ws-input,
.ws-board > .ws-console {
    background: var(--ws-bright);
    min-width: 0;
}

/* —— 左侧（60%）：上下堆叠 —— */
.ws-input {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ws-input__text {
    flex: 7 1 0;                          /* 上方 70% */
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 20px 24px 12px;
}
.ws-input__files {
    flex: 3 1 0;                          /* 下方 30% */
    display: flex;
    flex-direction: column;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--ws-blackline);   /* 极细黑线隔开，二选一互不干扰 */
}

.ws-input__title {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ws-mute);
    margin-bottom: 10px;
    font-weight: 500;
}

/* 纯文本输入框 —— 边缘锋利，等宽字体 */
.ws-input__textarea {
    flex: 1 1 auto;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    background: var(--ws-surface);
    border: 1px solid var(--ws-hairline-strong);
    border-radius: 0;                      /* 锋利边缘 */
    color: var(--ws-ink);
    font-family: var(--font-mono, 'JetBrains Mono', 'Consolas', monospace);
    font-size: 13.5px;
    line-height: 1.72;
    resize: none;
    outline: none;
    transition: border-color .12s;
}
.ws-input__textarea:focus { border-color: var(--ws-gold-line); }
.ws-input__textarea::placeholder { color: var(--ws-mute); }

.ws-input__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: var(--ws-slate);
    min-height: 18px;
}

/* 文件拖拽上传区：3px 粗虚线框 */
.ws-drop {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 0;
    border: 3px dashed var(--ws-hairline-strong);
    background: var(--ws-surface);
    cursor: pointer;
    text-align: center;
    padding: 16px;
    transition: border-color .12s, background .12s;
}
.ws-drop:hover,
.ws-drop.drag-over { border-color: var(--ws-gold-line); background: #fbf9f2; }
.ws-drop__icon {
    font-size: 22px;
    color: var(--ws-slate);
    line-height: 1;
}
.ws-drop__hint {
    font-size: 13px;
    color: var(--ws-slate);
    font-weight: 500;
    letter-spacing: .02em;
}
.ws-drop__sub {
    font-size: 11.5px;
    color: var(--ws-mute);
}
.ws-drop__actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

/* —— 右侧（40%）：执行控制台 —— */
.ws-console {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ws-console__preview {
    padding: 20px 24px 6px;
}
.ws-console__title {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ws-mute);
    margin-bottom: 12px;
    font-weight: 500;
}
/* 参数预览：当前模式下的检测结果 */
.ws-param {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.ws-param li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}
.ws-param dt {
    color: var(--ws-slate);
    font-size: 12.5px;
    font-weight: 300;
}
.ws-param dd {
    margin: 0;
    color: var(--ws-ink);
    font-family: var(--font-mono, monospace);
    font-size: 12.5px;
    font-weight: 600;
}
.ws-param__empty {
    color: var(--ws-mute);
    font-size: 12px;
    font-style: normal;
}

.ws-console__action {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 18px 24px 26px;
}
/* 巨型按钮：深灰底 + 暗金字，文案随模式动态变化 */
.ws-go {
    width: 100%;
    min-height: 132px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 18px;
    background: var(--ws-graphite);
    color: var(--ws-gold-line);
    border: 1px solid var(--ws-graphite);
    cursor: pointer;
    font-family: inherit;
    transition: none;                  /* 瞬时切换，无淡入淡出 */
    box-shadow: 0 8px 22px rgba(23,26,31,.16), inset 0 1px 0 rgba(255,255,255,.08);
}
.ws-go:hover { background: var(--ws-ink); }
.ws-go:active { transform: translateY(1px); }
.ws-go.is-loading { cursor: wait; opacity: .82; }
.ws-go__main {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.1;
}
.ws-go__sub {
    font-size: 12px;
    font-weight: 300;
    letter-spacing: .04em;
    color: var(--ws-mute);
}

/* 报告区（转换输出）置于控制台底部 */
.ws-console__report {
    padding: 0 24px 26px;
}
.ws-console__report .report-section {
    margin: 0;
    background: var(--ws-surface);
    border: 1px solid var(--ws-hairline);
    border-radius: 0;
}
.ws-console__report .preview-label {
    color: var(--ws-mute);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* ============================================================================
   LAYER 3 · 状态栏 / 附属工具（height: 50px）
   ============================================================================ */
.ws-status {
    height: 50px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    border-top: 1px solid var(--ws-hairline-strong);   /* 极细分割线 */
    background: var(--ws-surface);
}
.ws-status__left {
    font-size: 12px;
    color: var(--ws-slate);
    display: flex;
    align-items: center;
    gap: 18px;
}
.ws-status__right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* PDF 工具箱等降级为：低饱和灰 · 无背景框 · 缩小字号 · 微齿轮图标
   —— 设计注释：把 PDF 工具踢到底角，是为了把舞台 100% 让给转换核心；
      低饱和灰 + 无背景框，让用户潜意识把它当「地下室的杂物间」，而非主工具。 */
.ws-demote {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 400;
    color: var(--ws-demoted);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: .02em;
    padding: 0;
}
.ws-demote:hover { color: var(--ws-slate); }
.ws-demote .gear {
    font-size: 12px;
    line-height: 1;
    transform: translateY(-1px);
}

/* ============================================================================
   工具栏（返回顶部内容区）— 附属于 Layer 2 下方，低调呈现
   ============================================================================ */
.ws-tools {
    flex: 0 0 auto;
    background: var(--ws-bright);
    border-top: 1px solid var(--ws-hairline);
    padding: 14px 24px 20px;
}

/* ============================================================================
   旧结构适配 —— 保留功能，仅重塑视觉
   ============================================================================ */
/* 顶栏业务容器（登录/用户名/积分）放进 LAYER 1 */
.ws-nav .topbar-right { display: flex; align-items: center; gap: 8px; }

/* Tab 面板容器：工作台内再次铺排，保持 switchTab 逻辑可控 */
.tab-panel {
    padding: 0;
}
.tab-panel .container,
.ws-body + .container { max-width: none; padding: 0; }

/* 全局积分栏：并入 Layer 3 左侧 */
.ws-status .quota-bar {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 12px;
}
.ws-status .quota-text { font-size: 12px; color: var(--ws-slate); }

/* 旧 header 隐藏（其职责已被 LAYER 1 接管） */
.ws-shell .header { display: none; }
.ws-shell .topbar { display: none; }

/* 兼容旧按钮样式内部 */
.ws-nav .btn,
.ws-nav .btn-primary,
.ws-nav .btn-outline { border-radius: 0; }

/* 旧工具面板内容沿用但去圆角 */
.ws-shell .pdf-card,
.ws-shell .file-drop-zone,
.ws-shell .input-group,
.ws-shell .modal-card { border-radius: 0; }

/* 移动端适配(2026-09-05 增强):≤880px 工作台纵向 + 控件落位;
   ≤560px 手机进一步压缩(导航堆叠/控制组全宽/弹层全宽/触控目标加大) */
@media (max-width: 880px) {
    .ws-board { grid-template-columns: 1fr; }
    .ws-nav { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 12px; }
    .ws-nav__right { margin-left: 0; }
    .ws-mode__opt, .ws-mode__thumb { width: 96px; }
    .ws-tdir { min-width: 128px; padding: 10px 14px; }
    .ws-console__action { min-height: 160px; }
    .ws-nav__meta-slot { display: none; }
}

@media (max-width: 560px) {
    body { font-size: 14px; }
    /* 导航:品牌行 + 控制行两段堆叠 */
    .ws-nav { padding: 10px 12px; gap: 10px; }
    .ws-nav__controls { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
    .ws-mode, .ws-meta { width: 100%; }
    .ws-mode__track { width: 100%; display: flex; }
    .ws-mode__opt, .ws-mode__thumb { width: 33.33%; }
    .ws-nav__name { font-size: 14px; }
    .ws-nav__version { display: none; }
    /* 工作区:单列满宽,面板内边距收窄 */
    .ws-board { grid-template-columns: 1fr; gap: 12px; }
    .ws-input { padding: 14px 14px 10px; }
    .ws-input__files { padding: 12px 14px 14px; }
    .ws-console__preview { padding: 14px 14px 6px; }
    .ws-input, .ws-console { min-height: 0 !important; }
    .ws-console__action { min-height: 200px; }
    /* 输入区/按钮触控目标 */
    button, .ws-mode__opt { min-height: 40px; }
    /* 弹层全宽贴边 */
    .modal-card, .ws-shell .modal-card { width: 94vw !important; max-width: 94vw !important; max-height: 88vh; }
    .modal-overlay, .ws-shell .modal-overlay { padding: 10px !important; }
    /* 反馈栏/公告条不挤出屏 */
    #siteAnnounce { font-size: 12px; padding: 8px 34px 8px 12px; text-align: left; }
}