/* 固定功能区与底栏；PDF 仅在 viewport 中滚动，切换工具页签不改变页面阅读位置。 */
:root { color-scheme: light; --accent: #cc3446; --accent-soft: #fff0f2; --ink: #29313e; --muted: #88909c; --line: #e2e5e9; --surface: #fff; font: 13px "Segoe UI", "Microsoft YaHei", system-ui, sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; color: var(--ink); background: #f2f3f5; display: flex; flex-direction: column; }
button, input, select { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; border: 1px solid transparent; background: transparent; border-radius: 4px; padding: 5px 9px; white-space: nowrap; touch-action: manipulation; }
/* PDF 命中层与控制柄始终透明，只有工具按钮使用悬停底色。 */
button:hover:not(:disabled):not(.frame-handle):not(.text-hit):not(.image-hit):not(.image-handle):not(.line-hit):not(.line-endpoint), summary:hover { background: #eef0f3; }
button:disabled, input:disabled, select:disabled { color: #a2a8b2; cursor: default; }
button:disabled .icon { opacity: .45; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid #668de4; outline-offset: 2px; }
fieldset { min-width: 0; border: 0; padding: 0; margin: 0; }
.icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 30px; padding: 5px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
main { flex: 1; min-height: 0; position: relative; }
#workspace { height: 100%; display: flex; flex-direction: column; }
.tabbar { height: 35px; flex-shrink: 0; display: flex; align-items: stretch; gap: 10px; padding: 0 13px; background: #fafbfc; border-bottom: 1px solid var(--line); position: relative; z-index: 25; }
.ribbon-tabs { display: flex; align-items: stretch; gap: 4px; }
.ribbon-tabs [role=tab] { min-width: 52px; position: relative; padding: 0 11px; border: 0; border-radius: 0; font-size: 13px; }
.ribbon-tabs [aria-selected=true] { color: var(--accent); font-weight: 650; }
.ribbon-tabs [aria-selected=true]::after { content: ''; height: 3px; border-radius: 3px 3px 0 0; position: absolute; left: 13px; right: 13px; bottom: 0; background: var(--accent); }
.file-menu { position: relative; display: flex; align-items: center; flex-shrink: 0; }
summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; height: 100%; padding: 0 8px; border-radius: 4px; }
summary::-webkit-details-marker { display: none; }.file-menu summary { color: var(--accent); white-space: nowrap; min-width: 48px; }.file-menu summary .icon { width: 12px; }
.menu-popover, .help-panel, .position-popover { position: absolute; z-index: 40; background: white; border: 1px solid #dfe3e8; border-radius: 7px; box-shadow: 0 10px 32px #1d273224; }
.menu-popover { top: 100%; left: -7px; width: 270px; padding: 7px; }
.menu-popover button, .menu-popover .menu-download { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px; text-align: left; border-radius: 4px; font-size: 12px; }.menu-popover .menu-download:hover:not([aria-disabled=true]) { background: #eef0f3; }.menu-popover .menu-download[aria-disabled=true] { opacity: .45; cursor: default; }.menu-popover .icon { width: 18px; height: 18px; }.menu-popover kbd { margin-left: auto; font: 10px inherit; color: var(--muted); }
.menu-popover p { border-top: 1px solid var(--line); padding: 10px 10px 3px; margin: 5px 0; font-size: 11px; color: var(--muted); }
.help { position: relative; margin-left: auto; font-size: 11px; color: #747d8b; }.help summary .icon { width: 17px; }
.help-panel { top: 100%; right: 0; width: 320px; max-width: calc(100vw - 32px); padding: 19px; color: var(--ink); line-height: 1.8; }.help-panel p { color: #737d8e; font-size: 12px; }
.ribbon-shell { background: white; position: relative; flex-shrink: 0; box-shadow: 0 1px 2px #202b3808; z-index: 20; }
/* 各页签统一紧凑尺寸；保留双行控件空间，避免切换时画布跳动。 */
.ribbon-panel { display: flex; align-items: stretch; padding: 6px 10px 4px; height: 88px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #d2d6dd transparent; }
.ribbon-group { display: flex; flex-direction: column; flex-shrink: 0; border-right: 1px solid var(--line); padding: 0 8px; }
.ribbon-group:first-child { padding-left: 4px; }.ribbon-group:last-child { border-right: 0; }
.group-tools { display: flex; align-items: center; justify-content: center; gap: 2px; height: 58px; }
.group-caption { text-align: center; color: #959da8; font-size: 10px; line-height: 16px; user-select: none; }
.vertical-tools, .two-rows { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 3px; }
.vertical-tools button, .text-tool { display: flex; align-items: center; justify-content: flex-start; gap: 5px; height: 27px; padding: 3px 6px; }
.vertical-tools button[aria-pressed=true] { background: #eceef2; border-color: #e0e3e8; }.vertical-tools .icon { width: 17px; height: 17px; }
.large-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 60px; height: 56px; padding: 4px 6px; font-size: 12px; }.large-tool .icon { height: 22px; width: 22px; stroke-width: 1.65; }
.ribbon-panel .number-field { height: 27px; gap: 4px; }
.ribbon-panel select, .ribbon-panel .number-field input { height: 26px; }
.ribbon-panel .check-label { min-height: 27px; gap: 5px; }
.ribbon-panel .icon-button { width: 27px; height: 27px; padding: 4px; }
.ribbon-panel .text-tool .icon, .ribbon-panel .number-field .icon, .ribbon-panel .icon-button .icon { width: 16px; height: 16px; }
.ribbon-panel .alignments { gap: 2px; }
.ribbon-panel .text-tool .icon:last-child:not(:first-child) { width: 10px; }
#paragraph-tools { display: flex; flex-shrink: 0; }
#paragraph-tools .ribbon-group:last-child { border-right: 1px solid var(--line); }
#paragraph-tools:disabled .number-field, #paragraph-tools:disabled #font-size { color: #a2a8b2; }
select { color: inherit; background: white; border: 1px solid #d7dce2; border-radius: 4px; padding: 3px 7px; height: 30px; font-size: 12px; }
.alignments { display: flex; gap: 4px; }.alignments [aria-pressed=true] { background: #e9ecf1; border-color: #dfe3e9; color: #2d3d54; }.alignments .icon-button { width: 32px; }
.number-field { display: flex; align-items: center; gap: 6px; height: 30px; font-size: 12px; white-space: nowrap; }.number-field .icon { width: 18px; height: 18px; color: #667d9f; }.number-field input { width: 62px; min-width: 0; height: 28px; border: 1px solid #d7dce2; border-radius: 4px; color: inherit; padding: 3px 5px; font-variant-numeric: tabular-nums; background: white; }.number-field .unit { font-size: 11px; color: #9199a6; }.paragraph-group input { width: 55px; }
.field-row { display: flex; align-items: center; gap: 13px; }.compact-stack { min-width: 116px; }.text-tool .icon { width: 19px; }.text-tool .icon:last-child:not(:first-child) { width: 12px; margin-left: auto; }.danger { color: #b84150; }
.check-label { display: flex; align-items: center; gap: 7px; min-height: 29px; white-space: nowrap; font-size: 12px; cursor: pointer; }input[type=checkbox] { width: 14px; height: 14px; margin: 0; accent-color: #467ad4; }input[type=range] { accent-color: #8c96a7; }
.options-group { min-width: 162px; }.ribbon-note { display: flex; align-items: center; gap: 8px; padding: 0 14px; color: #9aa1ad; flex-shrink: 0; }.ribbon-note > .icon { width: 22px; height: 22px; }.ribbon-note div { display: flex; flex-direction: column; gap: 7px; }.ribbon-note strong { font-size: 12px; font-weight: 500; color: #748090; }.ribbon-note span { font-size: 11px; }
.position-popover { top: 100%; right: 16px; width: 326px; max-width: calc(100vw - 24px); padding: 13px 16px; }.popover-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }.popover-heading strong { font-size: 12px; font-weight: 600; }.position-popover fieldset { display: flex; flex-direction: column; gap: 8px; }.position-popover p { font-size: 11px; color: var(--muted); margin: 10px 0 0; }
/* 文字功能区按选择、字体、段落、文本框与编辑选项排列，尺寸只影响本页签。
   两行均为 27px；合并输入框与单位边框，减少装饰线和无效留白。 */
#panel-text { scroll-snap-type: x proximity; overflow-y: hidden; padding-top: 4px; padding-bottom: 2px; }
#panel-text .ribbon-group { scroll-snap-align: start; }
#panel-text .group-caption { line-height: 14px; flex-shrink: 0; }
#panel-text .mode-group { width: 102px; }
#panel-text .style-group { width: 284px; }
#panel-text .selection-group { width: 69px; }
#panel-text .paragraph-group { width: 196px; }
#panel-text .frame-group { width: 218px; }
#panel-text .options-group { min-width: 0; width: 148px; }
#panel-text .vertical-tools button { font-size: 12px; }
#panel-text .vertical-tools button[aria-pressed=true] { color: #30455f; background: #edf2f8; border-color: #dce4ee; }
.font-picker { display: flex; align-items: center; height: 27px; border: 1px solid #d7dce2; border-radius: 5px; background: #fff; overflow: hidden; }
.font-picker:focus-within { border-color: #668de4; box-shadow: 0 0 0 1px #668de41a; }
#paragraph-style { flex: 1; width: 100%; min-width: 0; height: 25px; border: 0; border-radius: 0; padding: 2px 6px; text-overflow: ellipsis; }
#paragraph-style:focus-visible { outline: 0; }
.font-size-combo { display: inline-flex; flex: 0 0 64px; align-items: center; height: 25px; border-left: 1px solid #e3e6eb; background: #fafbfc; }
#font-size { width: 43px; min-width: 0; height: 25px; padding: 0 3px; border: 0; border-radius: 0; text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; color: #46546a; background: transparent; }
#font-size:focus-visible { outline: 0; }
#font-size[aria-invalid=true] { box-shadow: inset 0 -2px #cc3446; }
#font-size-toggle { display: grid; place-items: center; width: 20px; height: 25px; padding: 3px; border-radius: 0; }
#panel-text #font-size-toggle .icon { width: 11px; height: 11px; transition: transform .12s; }
#font-size-toggle[aria-expanded=true] .icon { transform: rotate(180deg); }
.font-size-list { position: fixed; z-index: 45; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: #cdd3dc transparent; padding: 5px; border: 1px solid #d7dde6; border-radius: 6px; background: #fff; box-shadow: 0 6px 22px #202d4326; }
.font-size-option { display: flex; align-items: center; justify-content: space-between; min-height: 29px; padding: 5px 9px; border-radius: 3px; font-size: 12px; cursor: pointer; user-select: none; }
.font-size-option:hover, .font-size-option.is-active { background: #edf2fa; color: #254a7b; }
.font-size-option[aria-selected=true] { background: #e1e9f5; color: #234f8c; font-weight: 600; }
.font-size-option.numeric-start { margin-top: 5px; border-top: 1px solid #e8ebef; border-radius: 0 0 3px 3px; padding-top: 9px; }
.font-size-points { margin-left: 18px; color: #8993a3; font-size: 10px; font-weight: 400; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { #panel-text #font-size-toggle .icon { transition: none; } }
.font-picker-row { display: flex; align-items: center; gap: 2px; height: 27px; }
.font-picker-row .font-picker { flex: 1; min-width: 0; }
#panel-text .font-picker-row .icon-button, #panel-text .font-actions .icon-button { width: 27px; height: 26px; flex-shrink: 0; padding: 4px; border-radius: 4px; }
#panel-text .font-picker-row .icon, #panel-text .font-actions .icon { width: 17px; height: 17px; }
#panel-text .font-actions [aria-pressed=true] { color: #245da8; background: #e7effb; border-color: #c9d9ee; }
#panel-text .font-actions [aria-pressed=mixed] { background: repeating-linear-gradient(135deg, #f3f6fa, #f3f6fa 3px, #e5ebf4 3px, #e5ebf4 6px); }
.font-actions, .paragraph-settings, .frame-metrics, .frame-actions { display: flex; align-items: center; height: 27px; gap: 7px; }
.font-actions { gap: 2px; }
.color-tool { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 26px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; --text-color: #222; --highlight-color: #fff19a; }
.color-tool:hover { background: #edf2fa; border-color: #d8e1ed; }
.color-tool:focus-within { outline: 2px solid #668de4; outline-offset: -2px; }
.color-tool input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.color-tool:has(input:disabled) { opacity: .5; cursor: default; }
.color-split { display: inline-flex; align-items: center; --highlight-color: #fff19a; }
.color-split .color-arrow { width: 13px; }
#panel-text .font-actions .color-arrow .icon { width: 9px; height: 9px; }
.group-caption .text-style-state { margin-left: 8px; font-size: 9px; }
.font-actions .text-tool { padding: 3px 5px; font-size: 11px; }
.tool-separator { flex-shrink: 0; width: 1px; height: 15px; background: #e4e7ec; margin: 0 1px; }
.font-color-preview { display: inline-flex; align-items: center; flex-shrink: 0; color: #49566a; --text-color: #49566a; }
.font-color-preview .icon { width: 18px; height: 18px; }
.font-color-preview.is-mixed { background: linear-gradient(135deg, #e4e9f1 25%, transparent 25%, transparent 75%, #e4e9f1 75%); background-size: 6px 6px; border-radius: 3px; }
.text-style-state { min-width: 0; font-size: 10px; color: #7a8595; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#paragraph-tools:disabled .font-color-preview, #paragraph-tools:disabled .text-style-state { opacity: .5; }
#panel-text .alignments { gap: 3px; height: 27px; }
#panel-text .alignments .icon-button { width: 30px; border-radius: 4px; }
#panel-text .alignments .icon { width: 18px; height: 18px; }
#panel-text .alignments [aria-pressed=true] { background: #e9eff7; color: #304c72; border-color: #d8e2f0; }
#panel-text .field-input { display: inline-flex; align-items: center; height: 26px; border: 1px solid #d7dce2; border-radius: 4px; overflow: hidden; background: #fff; }
#panel-text .field-input:focus-within { border-color: #668de4; box-shadow: 0 0 0 1px #668de41a; }
#panel-text .field-input input { height: 24px; width: 50px; border: 0; border-radius: 0; padding: 2px 4px; appearance: textfield; -moz-appearance: textfield; }
#panel-text .field-input input:focus-visible { outline: 0; }
#panel-text .field-input input::-webkit-inner-spin-button, #panel-text .field-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#panel-text .field-input .unit { padding-right: 5px; font-size: 10px; color: #8b95a3; }
#panel-text .paragraph-settings .check-label { gap: 4px; font-size: 11px; }
#panel-text input[type=checkbox] { width: 13px; height: 13px; }
#panel-text .frame-metrics { justify-content: space-between; gap: 6px; }
#panel-text #frame-angle { width: 43px; }
#panel-text .frame-actions { gap: 6px; }
#panel-text #position-toggle { flex: 1; font-size: 12px; }
#panel-text #delete-frame { width: 29px; margin-left: auto; }
#panel-text #delete-frame:hover:not(:disabled) { background: #fff0f2; border-color: #f1d6dc; }
#panel-text .options-group .check-label { font-size: 11px; }
.editor-layout { display: flex; flex: 1; min-height: 0; position: relative; }
/* 插入菜单脱离横向滚动的功能面板，窄屏仍可展开；图标沿用同一矢量精灵图。 */
.large-tool > span { display: inline-flex; align-items: center; gap: 4px; }.large-tool > span .icon { width: 11px; height: 11px; }
.insert-popover { position: absolute; top: 100%; left: 12px; z-index: 45; width: 378px; max-width: calc(100vw - 24px); max-height: min(540px, calc(100dvh - 210px)); overflow-y: auto; padding: 16px; background: #fff; border: 1px solid #e1e5eb; border-radius: 9px; box-shadow: 0 12px 36px #26334322; }
.table-panel { left: 160px; width: 450px; }.insert-section-label { margin: 17px 0 9px; color: #7b8595; font-size: 11px; }
.local-stamp { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px; border: 1px dashed #c7cfdb; background: #fafbfe; border-radius: 6px; text-align: left; }.local-stamp > .icon:first-child { width: 27px; height: 27px; color: #7387a4; }.local-stamp > .icon:last-child { margin-left: auto; width: 17px; }.local-stamp span { display: flex; flex-direction: column; gap: 4px; }.local-stamp strong { font-size: 12px; font-weight: 500; }.local-stamp small { font-size: 10px; color: #8791a1; }
.stamp-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }.stamp-choice { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 9px 5px; border: 1px solid #e8ebf0; border-radius: 6px; font-size: 11px; color: #697587; }.stamp-choice:hover { border-color: #b8cbe6; }.stamp-art { position: relative; display: grid; place-items: center; width: 82px; height: 82px; color: #2b7dc7; transform: rotate(-12deg); }.stamp-red .stamp-art { color: #cd3446; }.stamp-art .icon { position: absolute; inset: 0; width: 100%; height: 100%; }.stamp-art strong { font-size: 22px; font-weight: 500; letter-spacing: 2px; }
.table-dimensions { display: flex; gap: 12px; margin: 12px 0; }.table-dimensions label { display: flex; align-items: center; gap: 6px; font-size: 12px; }.table-dimensions input { width: 46px; height: 29px; padding: 3px; border: 1px solid #d7dce2; border-radius: 4px; }.table-dimensions span { color: var(--muted); font-size: 10px; }
.table-entry-grid { display: grid; max-height: 228px; overflow: auto; border: 1px solid #dce2ea; border-radius: 4px; }.table-entry-grid input { min-width: 72px; width: 100%; height: 33px; padding: 6px; border: 0; border-right: 1px solid #e5e9ef; border-bottom: 1px solid #e5e9ef; color: var(--ink); font-size: 12px; }.table-entry-grid input:focus { position: relative; z-index: 1; outline-offset: -2px; }.insert-caption { color: #8490a0; font-size: 11px; line-height: 1.6; margin: 11px 0; }.insert-error { color: #b33432; font-size: 12px; }.insert-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }.insert-actions button { padding: 7px 14px; }.primary-action { background: #cc3446; color: white; }.primary-action:hover:not(:disabled) { background: #b72c3d; }
.insert-placement { position: absolute; inset: 0; z-index: 12; cursor: crosshair; touch-action: none; overflow: hidden; }.insert-ghost { position: absolute; border: 1px dashed #467ddb; background: #467ddb12; pointer-events: none; contain: layout paint; }.insert-ghost img { width: 100%; height: 100%; object-fit: fill; opacity: .6; }
@media (max-width: 760px) { .insert-popover, .table-panel { left: 12px; }.stamp-art { width: 76px; height: 76px; }.table-dimensions { gap: 8px; } }
.thumbnail-sidebar { width: 174px; flex-shrink: 0; background: #f7f8fa; border-right: 1px solid #dadee5; display: flex; flex-direction: column; }
.sidebar-heading { height: 43px; flex-shrink: 0; padding: 0 12px 0 16px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; }.sidebar-heading > span { display: flex; align-items: center; gap: 8px; }.sidebar-heading .icon { width: 16px; height: 16px; }.sidebar-heading strong { font-weight: 500; }
.thumbnails { overflow-y: auto; padding: 6px 12px 24px; scrollbar-width: thin; }.thumbnail-empty { display: block; color: #a3aab5; font-size: 11px; text-align: center; margin-top: 24px; }
.thumbnail { width: 100%; padding: 11px 9px 8px; margin-bottom: 8px; display: flex; align-items: center; flex-direction: column; gap: 8px; font-size: 11px; color: #788395; border: 1px solid transparent; }
.thumbnail[aria-current] { background: #fcecef; color: var(--accent); border-color: #f3dbe0; }.thumbnail-paper { display: flex; align-items: center; justify-content: center; width: 98px; max-height: 155px; background: white; border: 1px solid #dde1e7; box-shadow: 0 2px 4px #24314810; color: #c1c8d4; font-size: 24px; overflow: hidden; }.thumbnail[aria-current] .thumbnail-paper { outline: 1px solid #d94d5d; outline-offset: 1px; }.thumbnail-paper canvas { width: 100%; height: 100%; object-fit: contain; }.thumbnails-closed .thumbnail-sidebar { display: none; }
.viewport { position: relative; flex: 1; min-width: 0; overflow: auto; overflow-y: scroll; background: #e9ecf1; overscroll-behavior: contain; overflow-anchor: none; scrollbar-color: #b7beca #e9ecf1; }
/* 滚动区由脚本接收编辑焦点；覆盖浏览器默认黑色整框，键盘访问时保留轻量焦点提示。 */
.viewport:focus { outline: none; }
.viewport:focus-visible { box-shadow: inset 0 2px 0 #668de4; }
.page-stack { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; width: max-content; min-width: 100%; padding: 24px; }
.page { position: relative; flex-shrink: 0; background: white; box-shadow: 0 2px 7px #2431481c; }.page > canvas { display: block; width: 100%; height: 100%; }.page-notice { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; color: var(--muted); padding: 20px; font-size: 12px; text-align: center; }.page-notice button { border: 1px solid var(--line); }
.objects { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }.objects .text-hit { position: absolute; pointer-events: auto; padding: 0; border: 1px solid transparent; border-radius: 0; background: transparent; cursor: text; }.objects .text-hit:hover { border-color: #6594f2; background: #3d72e810; }.show-bounds .text-hit { border: 1px dashed #8aa3cb65; }.reading .objects { display: none; }.reading .viewport { cursor: grab; }.reading .viewport.is-panning { cursor: grabbing; user-select: none; }
.empty-canvas { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #929caa; padding: 24px; pointer-events: none; }.empty-document { display: grid; place-items: center; width: 64px; height: 78px; border-radius: 6px; background: #f7f8fa; border: 1px solid #d9dfe7; margin-bottom: 4px; box-shadow: 0 2px 5px #35445a06; }.empty-document .icon { width: 31px; height: 31px; stroke-width: 1.1; color: #a7b2c2; }.empty-canvas strong { font-weight: 500; font-size: 14px; }.empty-canvas > span:last-child { font-size: 12px; }.is-empty .page-stack { display: none; }.viewport.drag-over { box-shadow: inset 0 0 0 2px #cd5566; background: #f2e9ed; }
.bottom-bar { flex-shrink: 0; min-height: 37px; display: flex; align-items: center; gap: 17px; padding: 3px 13px; background: #fafbfc; border-top: 1px solid #d8dee6; z-index: 20; padding-bottom: max(3px,env(safe-area-inset-bottom)); }
.document-state { display: flex; align-items: center; gap: 6px; max-width: 260px; min-width: 0; font-size: 11px; color: #737e8d; white-space: nowrap; }.document-state #version { overflow: hidden; text-overflow: ellipsis; }.state-dot { width: 6px; height: 6px; border-radius: 50%; background: #7ca88a; flex-shrink: 0; }.document-state.dirty .state-dot { background: #d59b47; }
.page-controls, .view-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }.bottom-bar .icon-button { width: 27px; height: 27px; padding: 5px; }.bottom-bar .icon { width: 17px; height: 17px; }#page-jump { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #758093; }#page-number { width: 36px; height: 23px; padding: 2px; border: 1px solid #d8dee5; border-radius: 3px; text-align: center; appearance: textfield; -moz-appearance: textfield; color: var(--ink); background: white; }#page-number::-webkit-inner-spin-button, #page-number::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.divider { height: 17px; width: 1px; background: var(--line); margin: 0 5px; }.status { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; color: #8791a1; }.status.error { color: #b33432; }.status.busy { color: #5879bb; }#zoom-range { width: 92px; height: 3px; cursor: pointer; }#zoom-value { width: 40px; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }.continuous-label { font-size: 10px; color: var(--muted); margin-right: 8px; }
.inline-editor { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.inline-content { position: absolute; inset: 0; overflow: hidden; }
.paragraph-content { position: absolute; inset: 0; }
.inline-input { position: absolute; pointer-events: auto; transform-origin: top left; border: 0; outline: 1px solid var(--accent); border-radius: 0; padding: 0; margin: 0; background: #fff; color: #172c46; line-height: 1; box-shadow: 0 0 0 3px #315fdd18; font-family: Arial, "Microsoft YaHei", sans-serif; }
.inline-input:focus-visible { outline: 1px solid var(--accent); outline-offset: 0; }
.inline-hint { position: absolute; padding: 8px 12px; background: #fff4f2; border: 1px solid #efccc6; border-radius: 4px; color: #b33432; font-size: 12px; line-height: 1.6; }
.block-editor .inline-input { resize: none; overflow: auto; padding: 0; white-space: pre-wrap; overflow-wrap: break-word; border-radius: 0; box-shadow: 0 0 0 1px #315fdd20; }
.objects .text-hit:hover { background: transparent; border: 1px solid #6594f2; outline: none; }
.objects .text-hit:focus-visible { background: transparent; outline: 1px solid #6594f2; outline-offset: 1px; }
.page-notice.refresh-error { inset: auto 12px 12px; padding: 8px 12px; border: 1px solid #efccc6; border-radius: 4px; background: #fff4f2; color: #aa302b; flex-direction: row; z-index: 6; }
/* 原字体矢量编辑层：布局来自同一个服务端计划，浏览器只绘制路径、光标和选区。 */
.paragraph-surface { position: absolute; transform-origin: top left; pointer-events: auto; background: transparent; outline: 1px solid #5684e8; cursor: text; touch-action: pan-y; }
.paragraph-surface:focus { outline: 1px solid #315fdd; }
.frame-handle { position: absolute; z-index: 3; padding: 0; min-width: 0; border: 0; border-radius: 0; background: transparent; touch-action: none; cursor: move; }
.frame-top, .frame-bottom { left: 0; width: 100%; height: 10px; }
.frame-top { top: -6px; }.frame-bottom { bottom: -6px; }
.frame-left, .frame-right { top: 0; height: 100%; width: 10px; }.frame-left { left: -6px; }.frame-right { right: -6px; }
.frame-rotate { left: calc(50% - 7px); top: -30px; width: 14px; height: 14px; border: 1.5px solid #315fdd; border-radius: 50%; background: white; cursor: grab; }
.frame-rotate::after { content: ''; position: absolute; width: 1px; height: 15px; background: #315fdd; left: 5px; top: 12px; pointer-events: none; }
.frame-width { top: calc(50% - 5px); right: -5px; width: 10px; height: 10px; background: white; border: 1px solid #315fdd; cursor: ew-resize; }
.paragraph-tools .danger { color: #b33432; }
.paragraph-vector, .paragraph-selection, .paragraph-input { position: absolute; inset: 0; width: 100%; height: 100%; }
.paragraph-vector, .paragraph-selection { pointer-events: none; }
.paragraph-input { margin: 0; padding: 0; resize: none; border: 0; outline: none !important; color: transparent; caret-color: transparent; background: transparent; overflow: hidden; white-space: pre-wrap; }
.paragraph-input::selection { background: transparent; }
.paragraph-caret { position: absolute; width: 1px; background: #214eb8; }
.paragraph-surface:not(.is-text-focused) .paragraph-caret { display: none; }
.awaiting-background .paragraph-vector, .awaiting-background .paragraph-selection { visibility: hidden; }
.retiring-editor, .retiring-editor * { pointer-events: none !important; }
.retiring-editor .frame-handle, .retiring-editor .paragraph-selection, .retiring-editor .paragraph-hint, .retiring-editor .inline-hint { visibility: hidden; }
.retiring-editor .paragraph-surface { outline: none; }
/* 图片命中层始终透明；拖动只变换元素，原像素由浏览器复用。 */
.objects .image-hit { position: absolute; pointer-events: auto; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 0; transform-origin: top left; cursor: move; }
.objects .image-hit:hover, .objects .image-hit:focus-visible { border-color: #5684e8; outline: none; background: transparent; }
#image-tools { display: flex; flex-shrink: 0; }.image-resolution { font-size: 11px; color: #758093; white-space: nowrap; }
#line-tools { display: flex; flex-shrink: 0; }
#line-color { width: 42px; padding: 2px; cursor: pointer; }
.objects .line-hit { position: absolute; pointer-events: auto; padding: 0; border: 0; border-radius: 0; background: transparent; transform-origin: left center; cursor: move; }
.objects .line-hit:hover, .objects .line-hit:focus-visible { outline: 1px solid #84a5e8; background: transparent; }
.line-ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.line-surface { position: absolute; height: 20px; transform-origin: 0 10px; pointer-events: auto; touch-action: none; cursor: move; outline: none; }
.line-endpoint { position: absolute; width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid #5684e8; background: #fff; transform: translate(-50%, -50%); pointer-events: auto; touch-action: none; cursor: crosshair; }
.line-endpoint::after { content: ''; position: absolute; inset: -7px; }
.awaiting-line .line-ink { visibility: hidden; }
.retiring-editor .line-endpoint, .retiring-editor.line-editor .image-hint { visibility: hidden; }
@media (pointer: coarse) { .line-endpoint { width: 14px; height: 14px; } }
#image-crop[aria-pressed=true] { background: #eef3fc; color: #315fdd; }
.image-surface { position: absolute; transform-origin: top left; pointer-events: auto; outline: 1px solid #5684e8; touch-action: none; }
.image-pixels { position: absolute; inset: 0; }
.image-content { position: absolute; inset: 0; overflow: hidden; cursor: move; }.image-content img, .image-ghost { position: absolute; max-width: none; user-select: none; pointer-events: none; }
.image-ghost { opacity: .22; display: none; }.is-cropping .image-ghost { display: block; }.is-cropping .image-content { cursor: move; }
.image-handle { position: absolute; z-index: 3; width: 9px; height: 9px; border: 1px solid #315fdd; border-radius: 0; padding: 0; background: white; touch-action: none; }
.image-nw { left: -5px; top: -5px; cursor: nwse-resize; }.image-ne { right: -5px; top: -5px; cursor: nesw-resize; }.image-sw { left: -5px; bottom: -5px; cursor: nesw-resize; }.image-se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.image-n { left: calc(50% - 4px); top: -5px; cursor: ns-resize; }.image-s { left: calc(50% - 4px); bottom: -5px; cursor: ns-resize; }.image-w { left: -5px; top: calc(50% - 4px); cursor: ew-resize; }.image-e { right: -5px; top: calc(50% - 4px); cursor: ew-resize; }
.image-rotate { left: calc(50% - 7px); top: -30px; width: 14px; height: 14px; border-radius: 50%; cursor: grab; }.image-rotate::after { content: ''; position: absolute; left: 5px; top: 12px; width: 1px; height: 16px; background: #315fdd; }
.is-cropping .image-handle { background: #29313e; border-color: white; }.is-cropping .image-rotate { display: none; }.image-hint { position: absolute; background: #fff4f2; padding: 7px 10px; color: #aa302b; border-radius: 4px; max-width: 350px; }
.awaiting-image .image-content, .awaiting-image .image-ghost { visibility: hidden; }.retiring-editor .image-handle, .retiring-editor .image-hint, .retiring-editor .image-ghost { visibility: hidden; }.retiring-editor .image-surface { outline: none; }
/* 触摸命中区扩大而不加粗控制点，手指也能准确抓取边角。 */
@media (pointer: coarse) { .image-handle::before { content: ''; position: absolute; inset: -10px; }.image-rotate { top: -38px; } }
.paragraph-range { position: absolute; background: #5184e535; }
.paragraph-hint { position: absolute; font-size: 10px; padding: 4px 6px; color: #4974c7; background: #f2f6ff; border-radius: 3px; max-width: 360px; white-space: normal; }
.paragraph-hint.error { color: #aa302b; background: #fff1ee; }
.paragraph-hint:not(.error):not(.font-notice) { display: none; }
.paragraph-surface.is-updating { outline-style: dashed; }
.paragraph-surface.is-composing .paragraph-input { color: #243148; caret-color: #315fdd; background: #ffffffed; }
.paragraph-surface.is-composing .paragraph-selection { display: none; }
.paragraph-surface.is-invalid .paragraph-input { color: #243148; caret-color: #315fdd; background: white; overflow: auto; }
.paragraph-surface.is-invalid .paragraph-selection { display: none; }

/* 编辑内容颜色保持蓝色，工作台选项卡使用红色，避免选择框与文档内容混淆。 */
.inline-input { outline-color: #5684e8; }
@media (max-width: 1150px) { .ribbon-group { padding-left: 7px; padding-right: 7px; }.style-group { width: 232px; } }
@media (max-width: 760px) {
  .tabbar { height: 35px; padding: 0 9px; gap: 2px; }.ribbon-tabs { gap: 0; min-width: 0; overflow-x: auto; }.ribbon-tabs [role=tab] { min-width: 43px; padding: 0 7px; font-size: 12px; flex-shrink: 0; }.help summary span { display: none; }.help summary { padding: 0 5px; }
  .ribbon-panel { padding-left: 8px; padding-right: 8px; }.ribbon-group { padding-left: 7px; padding-right: 7px; }.style-group { width: 220px; }.vertical-tools button { gap: 5px; font-size: 12px; padding-left: 4px; padding-right: 4px; }.group-caption { font-size: 9px; }
  .thumbnail-sidebar { position: absolute; top: 0; bottom: 0; left: 0; z-index: 15; box-shadow: 5px 0 20px #24314815; }
  .bottom-bar { gap: 5px; padding: 3px 7px; flex-wrap: wrap; }.status { order: 3; flex: 1 1 0; font-size: 10px; line-height: 16px; padding-left: 5px; }.view-controls { margin-left: auto; gap: 1px; }.document-state { order: 4; margin-left: auto; max-width: 90px; font-size: 10px; }.continuous-label { display: none; }#zoom-range { width: 60px; }.bottom-bar .divider { margin: 0 3px; }#page-jump label { display: none; }.empty-canvas > span:last-child { max-width: 240px; text-align: center; line-height: 1.8; }
}
@media (max-width: 430px) { #zoom-range { display: none; }.bottom-bar { column-gap: 0; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }