/**
 * 主观题聚焦模式样式
 * 
 * 设计原则：简约、高级、专业、有质感的沉浸式美学
 * 平台：桌面端优先，预留移动端扩展
 * 
 * 文件结构：
 * 1. CSS变量定义
 * 2. 全局模式标记（body类）
 * 3. 双页模式布局（当前主要使用）
 * 4. 单页模式布局（预留，暂不维护）
 * 5. 共享组件样式（按钮、输入框等）
 * 6. 响应式适配
 * 7. 滚动条美化
 */

/* =============================================================================
   1. CSS 变量定义
   ============================================================================= */

/* --subjective-* 是这个作答模式自己的色阶(仅 8% 与全局语义色阶同值,无双源可消),不要搬进
   style.css、不再扩展新名。--subjective-bg 与 --color-tooltip-header 同为 #f8f9fa 是巧合,别做别名。
   :root 作用域是刻意的:ruled-background.js 从 documentElement 读 --subjective-line-color,
   降作用域会让它回落成 '#e5e7eb' 而改掉稿纸横线颜色。理由见 AGENTS「设计 token 规约」。 */
:root {
    /* 色彩系统 - 专业、沉稳的中性色调 */
    --subjective-bg: #f8f9fa;
    --subjective-card-bg: var(--color-surface);
    --subjective-text: #1a1d21;
    --subjective-text-secondary: #5a6169;
    --subjective-text-muted: #8c939a;

    /* 边框 - 基于文本色的透明度变化，语义化跟随主题 */
    --subjective-input-border: color-mix(in srgb, var(--subjective-text) 8%, transparent);

    /* 交互色:主按钮走全站按钮一体令牌 --btn-primary-*(style.css),此处不再自带私有色 */

    /* 阴影 - 柔和层次 */
    --subjective-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);

    /* 动画 */
    --subjective-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --subjective-transition-fast: 150ms ease-out;

    /* 横线输入框配置 */
    --subjective-line-color: color-mix(in srgb, var(--subjective-text) 12%, transparent);

    /* 统一字体 */
    --subjective-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Microsoft YaHei", sans-serif;
    /* 'Noto Serif' / 'Noto Serif SC' 随 Google Fonts 外链撤除一并删名（无本地来源）；
       删的是栈首两个取不到的名字，大陆用户的实际渲染（拉丁 Georgia、中文系统宋体）不变。 */
    --subjective-font-input: Georgia, 'Times New Roman', 'Songti SC', serif;
    --subjective-font-translation: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* =============================================================================
   2. 全局模式标记
   ============================================================================= */

/* 单页/双页模式：仅禁止背景滚动，保持滚动位置不变 */
html.subjective-mode-dual,
body.subjective-mode-dual {
    overflow: hidden;
    overscroll-behavior: none;
}

body.subjective-mode-dual #pdf-viewer {
    visibility: hidden;
    pointer-events: none;
}

/* =============================================================================
   3. 双页模式布局
   ============================================================================= */

/* 3.1 全屏容器 */
.subjective-dual-container {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--subjective-bg);
    opacity: 0;
    transition: opacity var(--subjective-transition);
    overflow: hidden;
}

.subjective-dual-container.visible {
    opacity: 1;
}

/* 3.2 双栏网格布局 - 无缝一体化设计 */
.subjective-dual-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 20px 28px;
    box-sizing: border-box;
    overflow: hidden;
    /* 整体卡片容器 - 提供专注区域边界 */
    background: var(--subjective-card-bg);
    border-radius: 16px;
    box-shadow: 0 4px 24px color-mix(in srgb, var(--subjective-text) 6%, transparent), 0 0 0 1px color-mix(in srgb, var(--subjective-text) 3%, transparent);
}

/* 3.3 左侧：PDF页面区域 */
.subjective-dual-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    background: var(--subjective-card-bg);
    border-radius: 0;
    padding: 20px 28px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--subjective-text) 10%, transparent) transparent;
    /* 触摸设备滚动优化 */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    /* 右侧精致分隔线 */
    border-right: 1px solid color-mix(in srgb, var(--subjective-text) 5%, transparent);
}

.subjective-pdf-page-dual {
    max-width: 800px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subjective-pdf-page-dual img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* 3.4 右侧：输入面板区域 */
.subjective-dual-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    background: var(--subjective-card-bg);
    border-radius: 0;
    overflow: hidden;
    padding: 20px 28px;
}

.subjective-input-panel-dual {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
}

/* 3.5 面板内部结构 - 尺寸由JS动态设置，与左侧PDF页面一致 */
.panel-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--subjective-card-bg);
    box-sizing: border-box;
    overflow: hidden;
}

/* 面板头部 — 间距由父容器 gap 统一管理 */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0 0 0;
    background: var(--subjective-card-bg);
    flex-shrink: 0;
}

.panel-title {
    font-family: var(--subjective-font-ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--subjective-text-muted);
    letter-spacing: 0.06em;
    margin: 0;
}

/* 面板主体 - 填充剩余空间 */
.panel-body {
    flex: 1;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    background: var(--subjective-card-bg);
    min-height: 0;
    touch-action: pan-y;
}

/* 批改结果预留插槽 - 初始状态不可见 */
.ai-feedback-slot {
    display: none;
}

/* 面板底栏 — 间距由父容器 gap 统一管理 */
.panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    background: transparent;
    flex-shrink: 0;
}

.panel-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* =============================================================================
   5. 共享组件样式
   ============================================================================= */

.subjective-save-status {
    font-family: var(--subjective-font-ui);
    font-size: 12px;
    color: var(--subjective-text-muted);
    display: inline-flex;
    align-items: center;
    opacity: 0;
    transition: opacity 200ms ease-out, color 150ms ease-out;
    pointer-events: none;
    font-weight: 400;
    flex: 0 1 auto;
    min-width: 0;
    min-height: 1.2em;
    max-width: min(18ch, 100%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subjective-save-status[data-state] {
    opacity: 1;
}

.subjective-save-status[data-state="submitted"] {
    color: color-mix(in srgb, var(--subjective-text) 82%, transparent);
}

.subjective-save-status[data-state="error"] {
    color: var(--color-error, #dc2626);
}

/* 5.1 输入框 - 横线纸张效果（行高和横线背景由 JS ruled-background.js 统一引擎动态设置） */
.subjective-textarea {
    font-family: var(--subjective-font-input);
    /* font-size 由 JS 等比缩放算法动态设置，fontSize ∝ contentWidth */
    font-weight: 400;
    font-kerning: normal;
    font-feature-settings: "kern" 1, "liga" 1;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.003em;
    color: var(--subjective-text);
    background-color: transparent;
    border: 1px solid var(--subjective-input-border);
    border-radius: 12px;
    outline: none;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--color-paper) 92%, transparent),
        0 1px 3px 0 rgba(0, 0, 0, 0.02);
    resize: none;
    padding: 24px;
    box-sizing: border-box;
    /* 整块可编辑区域(含 padding 内衬)都给文本光标 */
    cursor: text;

    text-align: justify;
    text-justify: inter-ideograph;
    text-align-last: left;

    /* 换行行为 — 模拟 textarea 的自动换行 */
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: break-word;
    
    /* 高度由 JS ruled-background.js 动态设置，不设 height/flex */
    width: 100%;
    min-height: 0;
    
    /* 滚动 — 纵向按需，横向禁止 */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    /* 预留滚动条空间，防止 overflow 前后宽度跳变破坏排版不变量 */
    scrollbar-gutter: stable;
    
    /* 横线背景定位 — 值由 JS 动态设置，此处只声明渲染模式 */
    background-clip: content-box;
    background-origin: content-box;
    background-attachment: local;
    
    transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}

/* contenteditable placeholder — 纯 CSS 实现
 * JS 在 input 事件中维护 :empty 状态（清除残留 <br>） */
.subjective-textarea[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: var(--subjective-text-muted);
    font-style: normal;
    opacity: 0.6;
    pointer-events: none;
    display: block;
}

/* 聚焦时 placeholder 变淡 — 提示已可输入 */
.subjective-textarea[data-placeholder]:empty:focus::before {
    opacity: 0.35;
}

@media (hover: hover) {
    .subjective-textarea:hover:not(:focus) {
        border-color: color-mix(in srgb, var(--subjective-text) 14%, transparent);
    }
}

.subjective-textarea:focus {
    border-color: color-mix(in srgb, var(--subjective-text) 18%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--subjective-text) 6%, transparent);
    caret-color: var(--subjective-text);
}

/* 5.2 字数统计 — 与保存状态组成信息流 */
.word-count-display {
    font-family: var(--subjective-font-ui);
    font-size: 12px;
    color: var(--subjective-text-muted);
    /* inline 而不是 flex：三段之间是真正的空格文本节点（editor-core.updateCountDisplay），
       flex 会把空白文本节点整个丢掉，读出来就成了「99词」。 */
    display: inline;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.count-value {
    font-weight: 500;
    color: var(--subjective-text-secondary);
    white-space: nowrap;
}

.count-unit {
    color: var(--subjective-text-muted);
}

/* 5.3 关闭按钮 */
.panel-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--subjective-text-muted);
    cursor: pointer;
    transition: background var(--subjective-transition-fast),
                color var(--subjective-transition-fast),
                transform var(--subjective-transition-fast);
}

@media (hover: hover) {
    .panel-close-btn:hover {
        background: color-mix(in srgb, var(--subjective-text) 5%, transparent);
        color: var(--subjective-text);
    }
}

.panel-close-btn:active {
    background: color-mix(in srgb, var(--subjective-text) 8%, transparent);
    transform: scale(0.94);
}

/* 5.4 底栏按钮 —— 只是 .btn 的尺寸修饰类。
   UX_DESIGN_2026_09_08 §1.2:全站按钮三级由 style.css 的 .btn / .btn-primary / .btn-ghost 承担;
   本类不得再自带背景、边框、字号、字重,否则会盖掉主钮墨底
   (subjective-mode.css 后加载,同权重后来居上)。 */
.subjective-btn {
    min-width: 88px;
    font-family: var(--subjective-font-ui);
    -webkit-tap-highlight-color: transparent;
}

.subjective-btn.btn-ghost {
    min-width: 0;
}

/* 5.5 行内状态字里的「重试」(§1.5 状态字 + §1.2 文字钮)。
   它由 _renderStatus() 追加进 .dl-inline-status 里,横屏页与内联页共用这一份。
   不套 .btn/.btn-ghost:那对基类是 36px 高的表单钮,塞进一行 12px 的状态字会把行撑开;
   这里只借 .btn-ghost 的三个态令牌,尺寸随状态字(font: inherit)。零位移。 */
.subjective-status-retry {
    padding: 0 var(--spacing-sm);
    border: none;
    border-radius: var(--dl-r-item);
    background-color: transparent;
    color: var(--btn-ghost-fg);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 120ms, color 120ms;
}

@media (hover: hover) {
    .subjective-status-retry:hover {
        background-color: var(--btn-secondary-bg-hover);
        color: var(--btn-secondary-fg);
    }
}

.subjective-status-retry:active {
    background-color: var(--btn-secondary-bg-active);
    color: var(--btn-secondary-fg);
}

.subjective-status-retry:focus-visible {
    outline: none;
    box-shadow: var(--dl-focus-ring);
}

/* 本类带 display:inline-flex,会盖掉 UA 的 [hidden]{display:none};补一条。
   没有这条时 _syncActionButtons() 设的 hidden 全部失效:翻译页会冒出「批改」、
   作文页会冒出「提交」,而代码本意是这两处各自不显示。 */
.subjective-btn[hidden] {
    display: none !important;
}

/* =============================================================================
   6. 响应式适配 — 平板横屏 (769–1180px landscape)
   ============================================================================= */

@media (min-width: 769px) and (max-width: 1180px) and (orientation: landscape) {
    .subjective-dual-wrapper {
        padding: 16px 20px;
        border-radius: 12px;
    }

    .subjective-dual-left {
        padding: 16px 20px;
    }

    .subjective-dual-right {
        padding: 16px 20px;
    }

    .panel-header {
        padding: 10px 0 0 0;
    }

    .panel-title {
        font-size: 13px;
    }

    .panel-footer {
        padding: 0;
    }

    .subjective-textarea {
        padding: 20px;
    }

    .multi-translation-container {
        padding: 20px;
        font-size: 16px;
    }

    .panel-close-btn {
        width: 36px;
        height: 36px;
    }
}

/* =============================================================================
   7. 滚动条美化
   ============================================================================= */

.subjective-textarea::-webkit-scrollbar,
.subjective-dual-left::-webkit-scrollbar,
.panel-body::-webkit-scrollbar {
    width: 6px;
}

.subjective-textarea::-webkit-scrollbar-track,
.subjective-dual-left::-webkit-scrollbar-track,
.panel-body::-webkit-scrollbar-track {
    background: transparent;
}

.subjective-textarea::-webkit-scrollbar-thumb,
.subjective-dual-left::-webkit-scrollbar-thumb,
.panel-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--subjective-text) 10%, transparent);
    border-radius: 3px;
}

@media (hover: hover) {
    .subjective-textarea::-webkit-scrollbar-thumb:hover,
    .subjective-dual-left::-webkit-scrollbar-thumb:hover,
    .panel-body::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--subjective-text) 20%, transparent);
    }
}

/* =============================================================================
   8. 多题翻译模式
   ============================================================================= */

/* 
 * 多题翻译容器
 * 
 * 设计目标：
 * 1. 尺寸由 JS 动态设置，与左侧PDF页面完全一致
 * 2. 与作文 textarea 样式一致（边框、圆角、内边距）
 * 3. 内部沿用作文同一基线网格，5道小题按 3 行答题线分组排布
 * 4. 题组之间保留明确呼吸感，但不破坏整张纸的秩序
 */
.multi-translation-container {
    --translation-line-height: 1.56em;
    --translation-question-height: calc(var(--translation-line-height) * 3);
    --translation-group-gap: calc(var(--translation-line-height) * 2);
    --translation-optical-inset-top: calc(var(--translation-line-height) * 1.5);
    --translation-optical-inset-bottom: calc(var(--translation-line-height) * 1.5);
    width: 100%;
    border: 1px solid var(--subjective-input-border);
    border-radius: 12px;
    padding: var(--translation-optical-inset-top) 24px var(--translation-optical-inset-bottom);
    font-size: 15px;
    background-color: transparent;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-self: stretch;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--color-paper) 92%, transparent),
        0 1px 3px 0 rgba(0, 0, 0, 0.02);
    transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}

.multi-translation-container:focus-within {
    border-color: color-mix(in srgb, var(--subjective-text) 18%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--subjective-text) 6%, transparent);
}

.translation-item {
    flex: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-top: 0;
}

.translation-item:not(:last-child) {
    margin-bottom: var(--translation-group-gap);
}

/* 题号和输入行的水平排列容器 */
.translation-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: none;
    min-height: 0;
}

.translation-item-number {
    font-family: var(--subjective-font-ui);
    font-size: 0.84em;
    font-weight: 520;
    color: color-mix(in srgb, var(--subjective-text-secondary) 62%, transparent);
    flex-shrink: 0;
    width: 2.08em;
    min-width: 2.08em;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding-top: 0.18em;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    user-select: none;
    pointer-events: none;
    transition: color 160ms ease-out;
}

.translation-item:focus-within .translation-item-number {
    color: color-mix(in srgb, var(--subjective-text) 78%, transparent);
}

.translation-lines-wrapper {
    flex: 1;
    min-height: 0;
    min-width: 0;
    border-radius: 8px;
    transition:
        background-color 200ms ease-out,
        box-shadow 220ms ease-out;
}

/* 每题一个连续的三行书写区，视觉上挂在和作文相同的基线上 */
.translation-question-editor {
    width: 100%;
    min-height: var(--translation-question-height);
    height: var(--translation-question-height);
    max-height: var(--translation-question-height);
    font-family: var(--subjective-font-translation);
    font-size: 1em;
    font-weight: 400;
    line-height: var(--translation-line-height);
    letter-spacing: 0.008em;
    font-kerning: normal;
    font-feature-settings: "kern" 1, "liga" 1;
    font-synthesis: none;
    color: var(--subjective-text);
    background-color: transparent;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(var(--translation-line-height) - 1px),
        var(--subjective-line-color) calc(var(--translation-line-height) - 1px),
        var(--subjective-line-color) var(--translation-line-height)
    );
    background-size: 100% var(--translation-line-height);
    background-position: 0 0;
    background-origin: content-box;
    background-attachment: local;
    background-clip: content-box;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: break-word;
    text-align: justify;
    text-justify: inter-ideograph;
    text-align-last: left;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.translation-question-editor:focus {
    caret-color: var(--subjective-text);
}

.translation-item.limit-feedback .translation-lines-wrapper {
    background-color: color-mix(in srgb, var(--subjective-text) 3%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--subjective-text) 10%, transparent);
}

.translation-item.limit-feedback .translation-item-number {
    color: color-mix(in srgb, var(--subjective-text) 84%, transparent);
}

/* 多题翻译模式下的面板主体需要 flex 布局 */
.panel-body.multi-translation-mode {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* =============================================================================
   6. 收纳/展开机制
   ============================================================================= */

/* 6.1 面板头部操作按钮组 */
.panel-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 6.2 收纳/展开切换按钮 */
.panel-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--subjective-text-muted);
    cursor: pointer;
    transition: all var(--subjective-transition-fast);
}

.panel-collapse-btn svg {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 收纳态下箭头翻转：指向右侧（展开方向） */
.subjective-dual-wrapper.collapsed .panel-collapse-btn svg {
    transform: rotate(180deg);
}

@media (hover: hover) {
    .panel-collapse-btn:hover {
        background: color-mix(in srgb, var(--subjective-text) 4%, transparent);
        color: var(--subjective-text);
    }
}

.panel-collapse-btn:active {
    background: color-mix(in srgb, var(--subjective-text) 8%, transparent);
    transform: scale(0.96);
}

/* 6.3 收纳态布局过渡 */
.subjective-dual-wrapper {
    transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.subjective-dual-wrapper.collapsed {
    grid-template-columns: 60px 1fr;
}

/* 6.4 收纳态左侧：缩略图栏 */
.subjective-dual-wrapper.collapsed .subjective-dual-left {
    padding: 8px 4px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.subjective-dual-wrapper.collapsed .subjective-pdf-page-dual {
    transform: scale(0.08);
    transform-origin: top center;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.subjective-dual-wrapper.collapsed .subjective-dual-left::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        color-mix(in srgb, var(--subjective-card-bg) 60%, transparent) 70%,
        var(--subjective-card-bg) 100%
    );
    pointer-events: none;
}

/* 6.5 收纳态右侧：全宽输入 */
.subjective-dual-wrapper.collapsed .subjective-dual-right {
    border-left: 1px solid var(--subjective-input-border);
}

/* 6.6 无障碍：减少动效 */
@media (prefers-reduced-motion: reduce) {
    .subjective-dual-wrapper {
        transition: none;
    }
    .panel-collapse-btn svg {
        transition: none;
    }
    .subjective-dual-wrapper.collapsed .subjective-pdf-page-dual {
        transition: none;
    }
}

/* =============================================================================
   主观题模式 - 护眼模式适配
   ============================================================================= */
html.theme-eye-care {
    --subjective-bg: #f5f0e6;
    --subjective-card-bg: #fffcf7;
    --subjective-text: #3d3a35;
    --subjective-text-secondary: #5c574e;
    --subjective-text-muted: #8b7a68;
    --subjective-input-border: color-mix(in srgb, var(--subjective-text) 10%, transparent);
    --subjective-shadow-sm: 0 1px 2px rgba(139, 119, 91, 0.04);
    --subjective-line-color: rgba(139, 119, 91, 0.18);
}

/* =============================================================================
   主观题模式 - 黑暗模式适配
   同时覆盖阅读器主题（html.theme-dark）和全局主题（html[data-theme="dark"]）
   ============================================================================= */
html.theme-dark,
html[data-theme="dark"] {
    --subjective-bg: #0f0f11;
    --subjective-card-bg: #18181b;
    --subjective-text: #e4e4e7;
    --subjective-text-secondary: #a1a1aa;
    --subjective-text-muted: #71717a;
    --subjective-input-border: color-mix(in srgb, var(--subjective-text) 10%, transparent);
    --subjective-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --subjective-line-color: rgba(255, 255, 255, 0.12);
}

/* 黑暗模式下收纳/关闭按钮 hover */
@media (hover: hover) {
    html.theme-dark .panel-close-btn:hover,
    html.theme-dark .panel-collapse-btn:hover,
    html[data-theme="dark"] .panel-close-btn:hover,
    html[data-theme="dark"] .panel-collapse-btn:hover {
        background: color-mix(in srgb, var(--subjective-text) 5%, transparent);
        color: var(--subjective-text);
    }
}

/* 护眼模式下收纳/关闭按钮 hover */
@media (hover: hover) {
    html.theme-eye-care .panel-close-btn:hover,
    html.theme-eye-care .panel-collapse-btn:hover {
        background: color-mix(in srgb, var(--subjective-text) 5%, transparent);
        color: var(--subjective-text);
    }
}

/* =============================================================================
   9. 答题页（文档流插入模式）
   ============================================================================= */

/*
 * 核心不变量：
 * .subjective-answer-page 的外观框架（宽度、边框、阴影、圆角、间距）
 * 必须与 .pdf-page 完全一致，使用相同的 CSS 变量。
 */

.subjective-answer-page {
    width: 100%;
    max-width: var(--pdf-width);
    margin-bottom: var(--page-gap);
    position: relative;
    background-color: var(--color-paper);
    border: 1px solid var(--paper-border);
    box-shadow: var(--shadow-paper);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    aspect-ratio: 1 / 1.414;
    display: grid;
    grid-template-rows:
        minmax(48px, calc(var(--pdf-content-inset-top) - var(--pdf-content-margin-edge-gap)))
        minmax(0, 1fr)
        minmax(56px, calc(var(--pdf-content-inset-bottom) - var(--pdf-content-margin-edge-gap)));
    box-sizing: border-box;
    padding: var(--pdf-content-margin-edge-gap) var(--pdf-content-inset-inline);
    gap: 0;
    contain: layout style paint;
    transform: translateZ(0);
    transform-origin: center top;
    backface-visibility: hidden;

    /* 动画由 Web Animations API 控制 */
}

/* 双页模式下 grid gap 代替 margin */
body.dual-page-mode .subjective-answer-page {
    margin-bottom: 0;
    max-width: 100%;
    width: 100%;
}

body.dual-page-mode .subjective-ghost-spacer {
    max-width: 100%;
}

/* 双页模式下的 Ghost 占位元素 — 页面移走后的"纸痕"凹印 */
.subjective-ghost-spacer {
    width: 100%;
    aspect-ratio: 1 / 1.414;
    border: none;
    border-radius: var(--border-radius-sm);
    background: rgba(0, 0, 0, 0.025);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04),
                inset 0 0 2px rgba(0, 0, 0, 0.02);
    box-sizing: border-box;
    pointer-events: none;
    transform: translateZ(0);
    transform-origin: center top;
    backface-visibility: hidden;
}

html.theme-dark .subjective-ghost-spacer,
html[data-theme="dark"] .subjective-ghost-spacer {
    background: rgba(255, 255, 255, 0.018);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15),
                inset 0 0 2px rgba(0, 0, 0, 0.08);
}

html.theme-eye-care .subjective-ghost-spacer {
    background: rgba(139, 119, 91, 0.025);
    box-shadow: inset 0 2px 6px rgba(139, 119, 91, 0.06),
                inset 0 0 2px rgba(139, 119, 91, 0.03);
}

/* 答题页 header — 间距由父容器 gap 统一管理 */
.answer-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 12px;
    min-height: 0;
}

.answer-page-title {
    font-family: var(--subjective-font-ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--subjective-text-muted);
    letter-spacing: 0.06em;
    margin: 0;
}

.subjective-answer-page[data-question-type="translation"] .answer-page-title,
.subjective-inline-page[data-question-type="translation"] .answer-page-title {
    font-size: 12px;
    font-weight: 500;
    color: color-mix(in srgb, var(--subjective-text-secondary) 76%, transparent);
    letter-spacing: 0.04em;
}

.answer-page-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--subjective-text-muted);
    cursor: pointer;
    transition: background var(--subjective-transition-fast),
                color var(--subjective-transition-fast),
                transform var(--subjective-transition-fast);
}

.answer-page-close-btn svg {
    width: 15px;
    height: 15px;
}

@media (hover: hover) {
    .answer-page-close-btn:hover {
        background: color-mix(in srgb, var(--subjective-text) 5%, transparent);
        color: var(--subjective-text);
    }
}

.answer-page-close-btn:active {
    background: color-mix(in srgb, var(--subjective-text) 8%, transparent);
    transform: scale(0.94);
}

/* 答题页 body — 填充剩余空间，textarea 垂直居中 */
.answer-page-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
}

/* 答题页 body 中的 textarea — 高度由 JS 动态设置（targetLineCount × lineHeight） */
.answer-page-body .subjective-textarea {
    min-height: 0;
    align-self: stretch;
}

.subjective-answer-page[data-question-type="translation"] .subjective-textarea,
.subjective-inline-page[data-question-type="translation"] .sip-textarea {
    font-family: var(--subjective-font-translation);
    letter-spacing: 0.01em;
}

/* 答题页 body 中的多题翻译容器填满 */
.answer-page-body .multi-translation-container {
    min-height: 0;
    flex: none;
    align-self: stretch;
}

/* 答题页 footer — 间距由父容器 gap 统一管理 */
.answer-page-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 10px;
    margin-top: 0;
    background: transparent;
    min-height: 0;
}

.answer-page-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.answer-page-actions {
    display: flex;
    align-items: center;
    /* 同排纸面控件间距 8（§15.1.2） */
    gap: 8px;
    flex-shrink: 0;
    justify-content: flex-end;
}

/* 暗色模式下答题页关闭按钮适配 */
@media (hover: hover) {
    html.theme-dark .answer-page-close-btn:hover,
    html[data-theme="dark"] .answer-page-close-btn:hover,
    html.theme-eye-care .answer-page-close-btn:hover {
        background: color-mix(in srgb, var(--subjective-text) 5%, transparent);
        color: var(--subjective-text);
    }
}

/* 无障碍：减少动效 */
@media (prefers-reduced-motion: reduce) {
    .answer-page-close-btn,
    .paper-btn,
    .composition-panels-track,
    .composition-tab,
    .composition-tab-indicator,
    .subjective-save-status,
    .subjective-btn,
    .subjective-textarea,
    .multi-translation-container,
    .panel-close-btn,
    .panel-collapse-btn {
        transition: none !important;
        animation: none !important;
    }
}

/* =============================================================================
   10. 作文合并页 — Tab 栏 & 面板滑动
   ============================================================================= */

/* Apple 式 Segmented Control Tab 栏 — iOS 17 滑动 pill */
.composition-tab-bar {
    display: flex;
    position: relative;
    padding: 3px;
    background: color-mix(in srgb, var(--subjective-text) 6%, transparent);
    border-radius: 8px;
    gap: 1px;
    max-width: 200px;
}

/* 滑动 pill 指示条 */
.composition-tab-indicator {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 7px) / 2);
    background: var(--color-paper);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06),
                0 0 0.5px rgba(0, 0, 0, 0.12);
    transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: none;
    z-index: 0;
}

.composition-tab-bar[data-active="big"] .composition-tab-indicator {
    transform: translateX(calc(100% + 1px));
}

.composition-tab {
    flex: 1;
    position: relative;
    z-index: 1;
    padding: 6px 16px;
    font-family: var(--subjective-font-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--subjective-text-secondary);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1),
                font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    min-height: 32px;
    line-height: 1.2;
}

.composition-tab.active {
    color: var(--subjective-text);
    font-weight: 600;
}

@media (hover: hover) {
    .composition-tab:not(.active):hover {
        color: var(--subjective-text);
    }
}

.composition-tab:active {
    transform: scale(0.97);
}

/* 暗色模式 Tab 栏 + indicator */
html.theme-dark .composition-tab-bar,
html[data-theme="dark"] .composition-tab-bar {
    background: rgba(255, 255, 255, 0.08);
}

html.theme-dark .composition-tab-indicator,
html[data-theme="dark"] .composition-tab-indicator {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

@media (hover: hover) {
    html.theme-dark .composition-tab:not(.active):hover,
    html[data-theme="dark"] .composition-tab:not(.active):hover {
        color: var(--subjective-text);
    }

}

/* 护眼模式 Tab 栏 + indicator */
html.theme-eye-care .composition-tab-bar {
    background: rgba(139, 119, 91, 0.08);
}

html.theme-eye-care .composition-tab-indicator {
    background: color-mix(in srgb, var(--color-paper) 90%, transparent);
    box-shadow: 0 1px 3px rgba(139, 119, 91, 0.1);
}

@media (hover: hover) {
    html.theme-eye-care .composition-tab:not(.active):hover {
        color: var(--subjective-text);
    }
}

/* 面板滑动轨道 */
.composition-panels-track {
    display: flex;
    width: 200%;
    height: 100%;
    will-change: transform;
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

.composition-panels-track.show-big {
    transform: translateX(-50%);
}

.composition-panel {
    width: 50%;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

.composition-panel .subjective-textarea {
    /* 高度由 JS ruled-background.js 动态设置 */
    min-height: 0;
}

/* =============================================================================
   10. 移动设备响应式适配
   ============================================================================= */

@media (max-width: 768px) {
    .answer-page-header {
        padding-bottom: 12px;
    }

    .answer-page-title {
        font-size: 13px;
        font-weight: 500;
    }

    .answer-page-close-btn {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        border-radius: 10px;
    }

    .composition-tab {
        font-size: 14px;
        padding: 10px 16px;
        min-height: 36px;
    }

    .answer-page-body .subjective-textarea {
        padding: 20px;
        border-radius: 10px;
    }

    .answer-page-body .multi-translation-container {
        padding: var(--translation-optical-inset-top) 20px var(--translation-optical-inset-bottom);
        border-radius: 10px;
    }

    .answer-page-footer {
        gap: 10px;
    }

    .word-count-display {
        font-size: 11px;
    }

}

@media (max-width: 600px) {
    .answer-page-header {
        gap: 8px;
    }

    .answer-page-title {
        font-size: 13px;
        font-weight: 500;
    }

    .answer-page-close-btn {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }

    .composition-tab {
        font-size: 14px;
        padding: 10px 14px;
        min-height: 36px;
    }

    .composition-tab-bar {
        padding: 3px;
        border-radius: 8px;
        max-width: none;
    }

    .answer-page-body {
        margin: 0;
    }

    .answer-page-body .subjective-textarea {
        padding: 16px;
        border-radius: 8px;
    }

    .answer-page-body .multi-translation-container {
        padding: var(--translation-optical-inset-top) 16px var(--translation-optical-inset-bottom);
        border-radius: 8px;
    }

    .answer-page-footer {
        gap: 8px;
    }

    .word-count-display {
        font-size: 11px;
        flex: 0 1 auto;
    }

    .answer-page-actions {
        flex: 1;
        justify-content: flex-end;
        gap: 6px;
    }

    .subjective-btn {
        white-space: nowrap;
    }

    .subjective-save-status {
        font-size: 12px;
    }

    /* 多语言翻译优化 */
    .translation-item-number {
        font-size: 0.8em;
        width: 2em;
        min-width: 2em;
        padding-top: 0.2em;
    }

    .translation-question-editor {
        letter-spacing: 0.008em;
    }
}

@media (max-width: 480px) {
    .answer-page-header {
        gap: 4px;
    }

    .answer-page-title {
        font-size: 11px;
        font-weight: 500;
    }

    .answer-page-close-btn {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }

    .composition-tab {
        font-size: 14px;
        padding: 10px 12px;
        min-height: 36px;
    }

    .answer-page-body .subjective-textarea {
        padding: 16px;
        border-radius: 8px;
    }

    .answer-page-body .multi-translation-container {
        padding: var(--translation-optical-inset-top) 16px var(--translation-optical-inset-bottom);
        border-radius: 8px;
    }

    .answer-page-footer {
        gap: 8px;
        flex-direction: row;
    }

    .word-count-display {
        font-size: 10px;
        white-space: nowrap;
    }

    .answer-page-actions {
        gap: 6px;
    }

    .subjective-save-status {
        font-size: 11px;
    }
}

@media (max-height: 700px) {
    .answer-page-body .subjective-textarea {
        padding: 12px;
    }

    .answer-page-body .multi-translation-container {
        padding: var(--translation-optical-inset-top) 12px var(--translation-optical-inset-bottom);
    }
}

/* =============================================================================
   11. 纸面印刷层（§14.1）—— 答案纸 = 试卷的另外几页
   -----------------------------------------------------------------------------
   数值真相源 typeset/latex/template/spec.json（em 13.6 / pitch 21.8 / 左右 23mm=65.2pt /
   上 68.5pt / 下 58pt / 节标题 16pt / 页脚 10.5pt + 品牌 9pt / 线粗 0.58pt / 悬挂 1.5em）；
   页脚字面抄 typeset/latex/template/exam.typ 的 foot()。
   印刷层没有灰阶：层级只靠字号、粗细、缩进、居中。三色语义 = 黑印刷 / 红批改 / 绿改法。
   §15.1.1 起答题纸退回 §9 的文档流骨架，本节只服务答案纸；
   11.5 的纸面控件是两张纸共用的一套。
   ============================================================================= */

/* 11.0 答案纸的纸根。它同时带 .subjective-answer-page，
   所以要把那条的 grid / padding / gap 覆盖回来（§15.1.1）。 */
.subjective-answer-page.subjective-review-page {
    display: block;
    padding: 0;
    gap: 0;
    /* 纸坐标（§14.1.1）：A4 宽 595.28pt = 纸的 100% 宽。
       注意 cqw 只在**后代**里求值——容器自身不是自己的查询容器，所以版心、字号、
       页脚、工具条一律挂在后代元素上，纸根自身的任何属性都不写 var(--pt)。 */
    container-type: inline-size;
    --pt: calc(100cqw / 595.28);
    /* 拉丁走 Times、中文走宋体，逐字回退天然分工 */
    --paper-font: "Times New Roman", Georgia, "SimSun", "Songti SC", "Noto Serif CJK SC", serif;
}

/* 纸上的印刷内容可选可复制（§15.1.3-2）。阅读器 body 整体 `user-select: none`
   （style.css:545-549），PDF 页靠 .text-selection-layer 自己开回来；答案纸是真 DOM 文字，
   不开这一条就选不中，「选一段中文右键问华生」也就无从谈起。 */
.subjective-review-page .er-content {
    -webkit-user-select: text;
    user-select: text;
    /* 指针随语义走（D-210 裁定）：正文是可选的文字，英文词是可点的 */
    cursor: text;
}

.subjective-review-page .ref-w {
    cursor: pointer;
}

/* 11.1 版心：单列，四周边距即 spec.json 的页边距 */
.paper-sheet {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    padding: calc(68.5 * var(--pt)) calc(65.2 * var(--pt)) calc(58 * var(--pt));
    display: flex;
    flex-direction: column;
    font-family: var(--paper-font);
    font-size: calc(13.6 * var(--pt));
    line-height: calc(21.8 * var(--pt));
    color: var(--dl-ink);
    hyphens: none;
}

/* 行 1：与 PDF「Section III Writing」同位同号 */
.paper-title {
    margin: 0;
    font-size: calc(16 * var(--pt));
    line-height: calc(21.8 * var(--pt));
    font-weight: 400;
    text-align: center;
    color: var(--dl-ink);
}

/* 行 2：左 = 题型 + 题号范围；右 = 红笔总分（答案纸；答题纸这一格空着） */
.paper-scope {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(13.6 * var(--pt));
    line-height: calc(21.8 * var(--pt));
}

.paper-scope-num {
    font-family: "Times New Roman", Times, serif;
    font-weight: 700;
}

/* 空一行（21.8pt），行 2 与正文之间 */
.paper-lead-gap {
    flex: none;
    height: calc(21.8 * var(--pt));
}

/* 11.2 页脚：绝对定位在下边距内，y 抄 spec.json（footer_y0 / footer_brand_y0） */
.paper-footer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.paper-foot-page,
.paper-foot-brand {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    line-height: 1;
    color: var(--dl-ink);
    white-space: nowrap;
}

.paper-foot-page {
    /* footer_y0_pt 803.6 = 墨顶；line-height:1 的行盒顶略高于墨顶，偏移量由截图实测校准 */
    top: calc((803.6 - var(--paper-foot-lift, 0.6)) * var(--pt));
    font-family: "KaiTi", "STKaiti", "SimSun", "Songti SC", serif;
    font-size: calc(10.5 * var(--pt));
}

.paper-foot-brand {
    /* footer_brand_y0_pt 818.07 = 墨顶（Times 升部顶）。0 = 与 PDF 位图逐行对齐（实测校准） */
    top: calc((818.07 - var(--paper-foot-brand-lift, 0)) * var(--pt));
    font-family: "Times New Roman", Times, serif;
    font-size: calc(9 * var(--pt));
}

/* 11.3 工具层（§16.2）：卡片工具层，不是印刷层的一部分。
   两张纸共用一条线：上沿 = 身份 + 关闭，答案纸左沿放「参考答案｜批改」切换与状态字。
   左右内缩改用答题纸的同一个 token（不再是版心 65.2pt）；纵向对齐答题纸 header 那条线：
   top 27 = edge-gap 14 + (inset-top 72 − 14) / 2 − 16，钮中心落在纸顶下 43px。
   `%` 写在 top 里按容器高解析，所以这里写成常量；纸太窄时 min() 上滑，保证钮底到版心顶 ≥ 4px。 */
.paper-tools {
    position: absolute;
    top: min(27px, calc(68.5 * var(--pt) - 36px));
    left: var(--pdf-content-inset-inline);
    right: var(--pdf-content-inset-inline);
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--dl-font);
}

.paper-tools-left,
.paper-tools-right {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* 不设 overflow：切换 Tab 是 38 高（32 + 3×2 内衬），在 32 高的工具条里上下各溢 3px */
.paper-tools-left {
    flex: 1 1 auto;
}

.paper-tools-right {
    flex: none;
}

/* 钮的横向位置只靠 .paper-tools-right 的 gap，包裹层不参与布局 */
.paper-review-slot {
    display: contents;
}

/* 答案纸工具条左侧的切换（§16.5）：复用答题纸「小作文｜大作文」那一个组件，
   只多一条镜像规则。.composition-tab-bar 自带 display:flex，会盖掉 UA 的 [hidden] */
.composition-tab-bar[data-active="review"] .composition-tab-indicator {
    transform: translateX(calc(100% + 1px));
}

/* 这一排里全部控件垂直居中在同一条 32 线上（§15.1.2）：钮 32、× 32，Tab 条也是 32。
   复用的是形态语言——灰胶囊 + 白滑块 + 同一套字号字重与滑动曲线，不是答题纸那一排
   里的 38 高（§16.14-1）。内衬 3→2（白滑块 28），圆角按比例收 8→7 / 6→5，
   字号 13/500、active 600、滑块 300ms 曲线一个字不改；只覆盖答案纸这一组。 */
.paper-tools .paper-view-tabs {
    padding: 2px;
    border-radius: 7px;
}

.paper-tools .paper-view-tabs .composition-tab-indicator {
    top: 2px;
    bottom: 2px;
    left: 2px;
    /* 5 = 左内衬 2 + 右内衬 2 + 两段之间的 gap 1；镜像规则的 translateX(100% + 1px) 不变 */
    width: calc((100% - 5px) / 2);
    border-radius: 5px;
}

/* 两段都是两个字（§16.15-1）之后重新取值：横向内衬 16→14，与同排 `.paper-btn` 的
   `padding: 0 14px` 取同一个数——这一排从此只有一个横向内衬值。实测每段 26.27（13px 两字
   + letter-spacing .01em）+ 28 = 54.27，条总宽 54.27×2 + 段间 1 + 内衬 2×2 = 113.54，
   正好是内容自然宽，不留任何为四字文案算的余量。 */
.paper-tools .paper-view-tabs .composition-tab {
    min-height: 28px;
    padding: 4px 14px;
    border-radius: 5px;
}

.paper-tools .composition-tab-bar[hidden] {
    display: none !important;
}

.paper-tools .paper-status {
    font-family: var(--dl-font);
    font-size: 12px;
    /* 墨二色：这行字要读得清（「作答未达到字数要求」「按报考地区北京算 · 已改为河南」），ink-3 只有 3.3:1 */
    color: var(--dl-ink-2);
    flex: 1 1 auto;
}

/* 答案纸工具条左侧的状态字（§16.3）：说明「你看到的批改对应哪一版作答」，不可点。
   两行封顶——一行截断会把后端那几句闸门文案吃掉半截。 */
.paper-status {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    line-height: 16px;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
}

.paper-status[hidden],
.paper-status:empty {
    display: none;
}

/* -----------------------------------------------------------------------------
   11.5 纸面控件（§15.1.2 / §16.1）—— 两张纸共用的一套 32 高三形态
   答题纸：header 右 × ／ footer 右 [答案][提交]；答案纸：工具条 [参考答案｜批改][批改][×]。
   整片主观题界面只有一枚实色主钮 = 答题纸的「提交」；答案纸上的批改入口是 secondary
   （§16.1 ①：黑色在这片界面只剩一个意思），其余 secondary 或图标 ghost。
   ----------------------------------------------------------------------------- */

.paper-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 32px;
    min-height: 32px;
    min-width: 64px;
    padding: 0 14px;
    border: none;
    border-radius: var(--dl-r-item-lg);
    background-color: transparent;
    font-family: var(--dl-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: var(--dl-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--transition-fast) ease,
                color var(--transition-fast) ease;
}

/* .paper-btn 带 display:inline-flex，会盖掉 UA 的 [hidden]{display:none} */
.paper-btn[hidden] {
    display: none !important;
}

.paper-btn:focus-visible {
    outline: none;
    box-shadow: var(--dl-focus-ring);
}

.paper-btn:disabled,
.paper-btn[aria-disabled="true"] {
    opacity: .38;
    cursor: not-allowed;
}

/* 实色主钮：墨底白字 */
.paper-btn--primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
}

@media (hover: hover) {
    .paper-btn--primary:hover {
        background-color: var(--btn-primary-bg-hover);
    }

    .paper-btn--primary:disabled:hover,
    .paper-btn--primary[aria-disabled="true"]:hover {
        background-color: var(--btn-primary-bg);
    }
}

.paper-btn--primary:active {
    background-color: var(--btn-primary-bg-active);
}

/* 次钮：白面 + inset 1px 描边，墨字 */
.paper-btn--secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-fg);
    box-shadow: inset 0 0 0 1px var(--dl-line-pop);
}

@media (hover: hover) {
    .paper-btn--secondary:hover {
        background-color: var(--btn-secondary-bg-hover);
    }
}

.paper-btn--secondary:active {
    background-color: var(--btn-secondary-bg-active);
}

.paper-btn--secondary:focus-visible {
    box-shadow: inset 0 0 0 1px var(--dl-line-pop), var(--dl-focus-ring);
}

/* 图标钮：32×32 ghost，svg 16 */
.paper-btn--icon {
    width: 32px;
    min-width: 32px;
    padding: 0;
    color: var(--dl-ink-2);
}

.paper-btn--icon svg {
    width: 16px;
    height: 16px;
}

@media (hover: hover) {
    .paper-btn--icon:hover {
        background-color: var(--dl-hover);
        color: var(--dl-ink);
    }
}

.paper-btn--icon:active {
    background-color: var(--dl-pressed);
    color: var(--dl-ink);
}

@media (prefers-reduced-motion: reduce) {
    .paper-btn {
        transition: none;
    }
}