:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #697386;
  --line: #e5e7eb;
  --panel: #ffffff;
  --canvas: #f1f3f7;
  --accent: #315efb;
  --accent-dark: #2448c7;
  --highlight: rgba(255, 207, 54, .42);
  --shadow: 0 24px 70px rgba(22, 32, 58, .12);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: #f9fafb; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* 首页：把上传操作放在首屏中央，触控区域不小于 44px。 */
.landing { min-height: 100vh; padding: 32px 24px 64px; background: radial-gradient(circle at 78% 8%, #e5ecff 0, transparent 36%), #f9fafb; }
.hero { width: min(1040px, 100%); margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; color: white; background: var(--ink); border-radius: 10px; font-weight: 900; }
.hero-copy { width: min(700px, 100%); margin: 96px 0 42px; }
.eyebrow { margin: 0 0 16px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(42px, 7vw, 76px); line-height: .98; letter-spacing: -.07em; }
.hero-description { max-width: 590px; margin: 26px 0 0; color: var(--muted); font-size: 18px; line-height: 1.7; }
.upload-card { padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 240px; padding: 32px; color: var(--muted); border: 1px dashed #b7c1d4; border-radius: 16px; text-align: center; transition: border-color .2s, background .2s, transform .2s; }
.drop-zone.is-dragging, .drop-zone:hover { border-color: var(--accent); background: #f5f7ff; transform: translateY(-1px); }
.drop-zone strong { margin-top: 15px; color: var(--ink); font-size: 18px; }
.drop-zone span:last-of-type { margin-top: 8px; font-size: 13px; }
.drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-icon { display: grid; place-items: center; width: 58px; height: 70px; color: #e74a59; border: 2px solid currentColor; border-radius: 7px; font-size: 11px; font-weight: 900; }
.upload-options { display: flex; align-items: end; gap: 14px; margin-top: 16px; }
.password-field { display: flex; flex: 1; flex-direction: column; gap: 7px; color: var(--muted); font-size: 12px; }
.password-field input, .search-input-row input { width: 100%; min-height: 44px; padding: 0 13px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 3px; outline: none; }
.password-field input:focus, .search-input-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(49,94,251,.15); }
.primary-button { min-height: 44px; padding: 0 22px; color: white; background: var(--accent); border: 0; border-radius: 3px;white-space: nowrap; word-break: keep-all; transition: background .2s, opacity .2s; }
.primary-button:hover { background: var(--accent-dark); }
.primary-button:disabled { cursor: not-allowed; opacity: .45; }
.primary-button.compact { min-height: 40px; padding: 0 16px; }
.upload-progress { display: flex; align-items: center; gap: 9px; margin: 16px 2px 0; color: var(--muted); font-size: 13px; }
.form-error { margin: 14px 2px 0; color: #c93645; font-size: 13px; }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #d7dded; border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }
.feature-grid article { display: flex; flex-direction: column; gap: 5px; padding: 18px; background: rgba(255,255,255,.65); border: 1px solid rgba(229,231,235,.8); border-radius: 14px; }
.feature-grid strong { font-size: 14px; }
.feature-grid span { color: var(--muted); font-size: 12px; line-height: 1.5; }

/* 阅读器：固定工具栏、独立滚动区和轻量表面层。颜色变化只作用于容器，
   不会重绘 PDF Canvas 或重新创建页面 DOM。 */
.viewer-app {
  --viewer-background: #e7e9eb;
  --viewer-surface: #f3f4f4;
  --viewer-toolbar: #fbfcfc;
  --viewer-toolbar-line: #dfe3e5;
  --viewer-toolbar-control: #f0f2f3;
  --viewer-toolbar-control-line: #dfe3e5;
  --viewer-toolbar-text: #30383d;
  --viewer-control-text: #667176;
  --viewer-control-hover: #edf3f1;
  --viewer-control-hover-line: #d7e4e0;
  --viewer-toolbar-divider: #d9dfe1;
  --viewer-input: #ffffff;
  --viewer-input-text: #22282b;
  --viewer-input-line: #d9dfe1;
  --viewer-zoom-text: #4c595e;
  --viewer-toolbar-shadow: 0 1px 6px rgba(40,51,56,.06);
  --viewer-accent: #4e746d;
  --viewer-text: #273036;
  --viewer-muted: #707a80;
  /* 缩略图面板使用独立的轻量颜色变量。这样切换阅读背景时只更新颜色，
     不会触发缩略图 Canvas 重新解析或重新下载资源。 */
  --thumbnail-panel: #eef2f5;
  --thumbnail-header: #ffffff;
  --thumbnail-header-line: #e0e5ea;
  --thumbnail-text: #52606b;
  --thumbnail-muted: #8b96a0;
  --thumbnail-card: #ffffff;
  --thumbnail-card-hover: #fbfdff;
  --thumbnail-card-active: #e3f3ff;
  --thumbnail-card-line: #e2e7ed;
  --thumbnail-card-active-line: #2f86ff;
  --thumbnail-frame-line: #dfe4ea;
  --thumbnail-frame-shadow: 0 2px 7px rgba(24,35,58,.10);
  --thumbnail-scrollbar: rgba(83,95,101,.30);
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  grid-template-rows: 56px minmax(0, 1fr);
  height: 100vh;
  overflow: hidden;
  background-color: var(--viewer-background);
  transition: background-color .18s ease;
}
.viewer-app.toolbar-hidden { grid-template-rows: 0 minmax(0, 1fr); }
.viewer-app.toolbar-hidden .viewer-toolbar { display: none; }
.viewer-app.thumbnail-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.viewer-app[data-background-theme="dark"] {
  --viewer-background: #292d31;
  --viewer-surface: #32373b;
  --viewer-toolbar: #252a2e;
  --viewer-toolbar-line: #41494e;
  --viewer-toolbar-control: #343b40;
  --viewer-toolbar-control-line: #4a555a;
  --viewer-toolbar-text: #e8edef;
  --viewer-control-text: #c0c9cc;
  --viewer-control-hover: #414b4f;
  --viewer-control-hover-line: #5b6b69;
  --viewer-toolbar-divider: #4a555a;
  --viewer-input: #202529;
  --viewer-input-text: #eef2f3;
  --viewer-input-line: #4a555a;
  --viewer-zoom-text: #d2dcde;
  --viewer-toolbar-shadow: 0 1px 8px rgba(0,0,0,.24);
  --thumbnail-panel: #2b3135;
  --thumbnail-header: rgba(37,42,46,.72);
  --thumbnail-header-line: rgba(255,255,255,.11);
  --thumbnail-text: #b9c4c7;
  --thumbnail-muted: #909da1;
  --thumbnail-card: rgba(255,255,255,.025);
  --thumbnail-card-hover: rgba(255,255,255,.08);
  --thumbnail-card-active: rgba(255,255,255,.13);
  --thumbnail-card-line: rgba(255,255,255,.12);
  --thumbnail-card-active-line: rgba(155,196,184,.66);
  --thumbnail-frame-line: rgba(255,255,255,.24);
  --thumbnail-frame-shadow: 0 6px 16px rgba(0,0,0,.26);
  --thumbnail-scrollbar: rgba(255,255,255,.27);
}
.viewer-app[data-background-theme="warm"] {
  --viewer-background: #eee9df;
  --viewer-surface: #f8f5ee;
  --viewer-toolbar: #fbfaf6;
  --viewer-toolbar-line: #ddd7ca;
  --viewer-toolbar-control: #f4f0e8;
  --viewer-toolbar-control-line: #ded6c7;
  --viewer-toolbar-text: #4e463b;
  --viewer-control-text: #746a5c;
  --viewer-control-hover: #eee8db;
  --viewer-control-hover-line: #d8c9ac;
  --viewer-toolbar-divider: #d9d0c1;
  --viewer-input: #fffefa;
  --viewer-input-text: #413a32;
  --viewer-input-line: #d9d0c1;
  --viewer-zoom-text: #685d50;
  --viewer-toolbar-shadow: 0 1px 7px rgba(86,70,48,.10);
  --thumbnail-panel: #eeeae1;
  --thumbnail-header: rgba(255,255,255,.58);
  --thumbnail-header-line: rgba(111,95,73,.18);
  --thumbnail-text: #6c6255;
  --thumbnail-muted: #9a8e7d;
  --thumbnail-card: rgba(255,255,255,.22);
  --thumbnail-card-hover: rgba(255,255,255,.72);
  --thumbnail-card-active: rgba(255,255,255,.96);
  --thumbnail-card-line: rgba(111,95,73,.14);
  --thumbnail-card-active-line: rgba(126,101,63,.54);
  --thumbnail-frame-line: rgba(111,95,73,.22);
  --thumbnail-frame-shadow: 0 5px 14px rgba(86,70,48,.14);
  --thumbnail-scrollbar: rgba(111,95,73,.30);
}
.viewer-app[data-background-theme="light"] {
  --viewer-background: #f4f4f1;
  --viewer-surface: #fafaf8;
  --viewer-toolbar: #f9faf8;
  --viewer-toolbar-line: #d9ddd8;
  --viewer-toolbar-control: #eef1ed;
  --viewer-toolbar-control-line: #d8ddd8;
  --viewer-toolbar-text: #34403b;
  --viewer-control-text: #607067;
  --viewer-control-hover: #e6eee9;
  --viewer-control-hover-line: #cbdcd2;
  --viewer-toolbar-divider: #d4dbd5;
  --viewer-input: #ffffff;
  --viewer-input-text: #29332f;
  --viewer-input-line: #d4dbd5;
  --viewer-zoom-text: #53635b;
  --viewer-toolbar-shadow: 0 1px 7px rgba(44,66,54,.08);
  --thumbnail-panel: #eef2ef;
  --thumbnail-header: rgba(255,255,255,.64);
  --thumbnail-header-line: rgba(73,94,82,.16);
  --thumbnail-text: #53625b;
  --thumbnail-muted: #8b9991;
  --thumbnail-card: rgba(255,255,255,.24);
  --thumbnail-card-hover: rgba(255,255,255,.76);
  --thumbnail-card-active: rgba(255,255,255,.98);
  --thumbnail-card-line: rgba(73,94,82,.14);
  --thumbnail-card-active-line: rgba(78,116,109,.56);
  --thumbnail-frame-line: rgba(73,94,82,.22);
  --thumbnail-frame-shadow: 0 5px 14px rgba(44,66,54,.12);
  --thumbnail-scrollbar: rgba(73,94,82,.30);
}
.viewer-toolbar { z-index: 20; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 0 16px; color: var(--viewer-toolbar-text); background: var(--viewer-toolbar); border-bottom: 1px solid var(--viewer-toolbar-line); box-shadow: var(--viewer-toolbar-shadow); transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.toolbar-start, .toolbar-center, .toolbar-end { display: flex; align-items: center; gap: 7px; min-width: 0; }
.toolbar-center { position: absolute; left: 50%; display: flex; flex: 0 0 auto; align-items: center; min-width: max-content; padding: 3px; white-space: nowrap;transform: translateX(-50%); transition: background-color .18s ease, border-color .18s ease; }
.icon-button, .toolbar-button, .zoom-value { display: inline-grid; place-items: center; min-width: 34px; min-height: 34px; padding: 0 8px; color: var(--viewer-control-text); background: transparent; border: 1px solid transparent; border-radius: 6px; transition: color .12s ease, background-color .12s ease, border-color .12s ease; }
.icon-button { font-size: 24px; line-height: 1; }
.icon-button:hover, .toolbar-button:hover, .zoom-value:hover { color: var(--viewer-toolbar-text); background: var(--viewer-control-hover); border-color: var(--viewer-control-hover-line); }
.toolbar-start .thumbnail-toggle { width: 34px; min-width: 34px; padding: 0; }
.toolbar-start .thumbnail-toggle .button-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.toolbar-button { gap: 6px; font-size: 12px; text-decoration: none; white-space: nowrap; word-break: keep-all; }
.toolbar-icon { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
.toolbar-icon rect { fill: none; }
.toolbar-button:disabled { cursor: wait; color: #9ca3af; opacity: .72; }
.toolbar-button.is-busy { cursor: wait; opacity: .68; pointer-events: none; }
.toolbar-button.is-disabled { cursor: not-allowed; opacity: .52; pointer-events: none; }
.toolbar-button.mobile-print-unsupported { color: #9ca3af; opacity: .8; }
.toolbar-button.mobile-print-unsupported:hover { color: var(--viewer-control-text); background: var(--viewer-toolbar-control); }
.background-swatch { width: 13px; height: 13px; background: var(--viewer-background); border: 1px solid var(--viewer-toolbar-line); border-radius: 50%; box-shadow: 0 0 0 1px rgba(37,53,56,.1); }
.zoom-value { min-width: 52px; color: var(--viewer-zoom-text); font-size: 12px; }
.toolbar-divider { width: 1px; height: 22px; background: var(--viewer-toolbar-divider); }
.page-control { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; min-width: max-content; padding: 0 4px; color: var(--viewer-control-text); font-size: 12px; white-space: nowrap; }
.page-control input { flex: 0 0 42px; width: 42px; height: 30px; box-sizing: border-box; color: var(--viewer-input-text); background: var(--viewer-input); border: 1px solid var(--viewer-input-line); border-radius: 5px; text-align: center; }
.page-control > span:not(.sr-only) { flex: 0 0 auto; white-space: nowrap; }
.toolbar-end { padding-left: 8px; border-left: 1px solid var(--viewer-toolbar-line); }
.thumbnail-panel { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--thumbnail-panel); border-right: 1px solid var(--thumbnail-header-line); box-shadow: inset -1px 0 0 rgba(255,255,255,.12); contain: layout paint; will-change: transform; transition: opacity .18s ease, transform .18s ease, background-color .18s ease, border-color .18s ease; }
.thumbnail-collapsed .thumbnail-panel { opacity: 0; pointer-events: none; transform: translateX(-12px); }
.thumbnail-panel-header { position: relative; display: flex; align-items: stretch; min-height: 62px; padding: 0; color: var(--thumbnail-text); background: var(--thumbnail-header); border-bottom: 1px solid var(--thumbnail-header-line); }
.thumbnail-panel-tabs { display: flex; align-items: stretch; width: 100%; min-width: 0; }
.thumbnail-tab { position: relative; display: inline-flex; flex: 1 1 50%; align-items: center; justify-content: center; gap: 7px; min-width: 0; padding: 0 12px; color: var(--thumbnail-muted); background: transparent; border: 0; border-bottom: 3px solid transparent; font-size: 13px; font-weight: 650; white-space: nowrap; transition: color .12s ease, background-color .12s ease, border-color .12s ease; }
.thumbnail-tab:hover:not(:disabled) { color: var(--viewer-accent); background: rgba(255,255,255,.28); }
.thumbnail-tab.is-active { color: #2f7cf6; border-bottom-color: #2f7cf6; }
.thumbnail-tab:disabled { cursor: default; opacity: 1; }
.thumbnail-tab-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; }
.thumbnail-scroller, .outline-scroller { flex: 1 1 auto; min-height: 0; overflow: auto; outline: none; overscroll-behavior: contain; scroll-behavior: auto; scrollbar-width: thin; scrollbar-color: var(--thumbnail-scrollbar) transparent; scrollbar-gutter: stable; }
.thumbnail-scroller::-webkit-scrollbar, .outline-scroller::-webkit-scrollbar { width: 8px; }
.thumbnail-scroller::-webkit-scrollbar-track, .outline-scroller::-webkit-scrollbar-track { background: transparent; }
.thumbnail-scroller::-webkit-scrollbar-thumb, .outline-scroller::-webkit-scrollbar-thumb { background: var(--thumbnail-scrollbar); border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; }
.thumbnail-list { position: relative; min-height: 100%; margin: 0; padding: 10px 7px 28px; list-style: none; }
.thumbnail-item { position: absolute; top: 0; right: 0; left: 0; display: flex; align-items: flex-start; justify-content: center; min-width: 0; padding: 9px 7px; }
.thumbnail-card { position: relative; display: flex; align-items: center; flex-direction: column; gap: 8px; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; padding: 8px 6px 7px; color: var(--thumbnail-text); background: var(--thumbnail-card); border: 1px solid transparent; border-radius: 7px; cursor: pointer; transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease; }
.thumbnail-card:hover { color: var(--viewer-toolbar-text); background: var(--thumbnail-card-hover); border-color: var(--thumbnail-card-line); box-shadow: 0 3px 10px rgba(31,43,47,.06); }
.thumbnail-card.is-active { color: var(--viewer-accent); background: transparent; border-color: var(--thumbnail-card-active-line); box-shadow: 0 4px 12px rgba(31,43,47,.11); }
.thumbnail-frame { position: relative; display: grid; flex: 0 0 auto; place-items: center; max-width: 100%; max-height: 276px; overflow: hidden; background: #fff; border: 1px solid var(--thumbnail-frame-line); border-radius: 3px; box-shadow: var(--thumbnail-frame-shadow); isolation: isolate; }
.thumbnail-visual { position: absolute; top: 0; left: 0; flex: none; transform-origin: 0 0; }
.thumbnail-frame canvas { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; background: #fff; }
.thumbnail-loading { position: absolute; inset: 0; display: grid; place-items: center; gap: 5px; color: var(--thumbnail-muted); font-size: 10px; background: rgba(255,255,255,.84); }
.thumbnail-loading::before { width: 12px; height: 12px; border: 2px solid rgba(78,116,109,.20); border-top-color: var(--viewer-accent); border-radius: 50%; animation: spin .8s linear infinite; content: ""; }
.thumbnail-loading[hidden] { display: none; }
.thumbnail-error { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; color: #c93645; font-size: 10px; text-align: center; background: #fff; }
.thumbnail-error[hidden] { display: none; }
.thumbnail-page-number { padding: 2px 8px 3px; color: var(--thumbnail-muted); border-radius: 999px; font-size: 13px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.thumbnail-card:hover .thumbnail-page-number { color: var(--thumbnail-text); }
.thumbnail-card.is-active .thumbnail-page-number { color: var(--viewer-accent); background: transparent; }
.outline-scroller { position: relative; contain: strict; }
.outline-scroller[hidden], .outline-list[hidden], .outline-status[hidden], .outline-retry[hidden] { display: none; }
.outline-list { position: relative; min-height: 100%; margin: 0; padding: 0; list-style: none; contain: layout paint; }
.outline-item { position: absolute; top: 0; right: 6px; left: 6px; display: flex; align-items: center; height: 40px; min-width: 0; padding-left: calc(4px + var(--outline-depth, 0) * 14px); border-radius: 7px; color: var(--thumbnail-text); contain: layout paint; }
.outline-item:hover { background: var(--thumbnail-card-hover); }
.outline-item.is-active { color: var(--viewer-accent); background: var(--thumbnail-card-active); box-shadow: inset 3px 0 0 #2f7cf6; }
.outline-toggle { position: relative; flex: 0 0 24px; width: 24px; height: 28px; padding: 0; color: var(--thumbnail-muted); background: transparent; border: 0; border-radius: 5px; }
.outline-toggle:hover:not(:disabled) { color: var(--viewer-accent); background: rgba(47,124,246,.10); }
.outline-toggle::before { position: absolute; top: 50%; left: 8px; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ""; transform: translateY(-65%) rotate(-45deg); transition: transform .12s ease; }
.outline-toggle.is-expanded::before { transform: translateY(-65%) rotate(45deg); }
.outline-toggle:disabled::before { display: none; }
.outline-link { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; height: 34px; padding: 0 8px 0 2px; color: inherit; background: transparent; border: 0; border-radius: 5px; text-align: left; }
.outline-link:disabled { cursor: default; color: inherit; opacity: 1; }
.outline-link:not(:disabled):hover .outline-title { color: var(--viewer-accent); }
.outline-title { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.outline-page-number { flex: 0 0 auto; min-width: 24px; color: var(--thumbnail-muted); font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }
.outline-item.is-active .outline-page-number { color: var(--viewer-accent); }
.outline-status { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; padding: 24px; color: var(--thumbnail-muted); font-size: 12px; line-height: 1.6; text-align: center; }
.outline-retry { min-height: 32px; padding: 0 14px; color: #fff; background: #2f7cf6; border: 0; border-radius: 7px; font-size: 12px; }
.outline-retry:hover { background: #246de0; }
.outline-toggle:focus-visible, .outline-link:focus-visible, .outline-retry:focus-visible { outline: 2px solid var(--viewer-accent); outline-offset: -2px; }
.viewer-scroller { grid-column: 2; grid-row: 2; position: relative; overflow: auto; outline: none; overscroll-behavior: contain; scroll-behavior: auto; scrollbar-color: rgba(83,95,101,.36) transparent; }
.pages-container { display: flex; flex-direction: column; align-items: center; gap: 22px; min-width: max-content; padding: 28px 28px 74px; }
.pages-container.zoom-preview { transform-origin: 0 0; will-change: transform; }
.page-shell { position: relative; flex: none; background: #fff; border: 1px solid rgba(83,95,101,.2); box-shadow: 0 5px 16px rgba(32,42,46,.12); contain: layout paint; content-visibility: auto; }
.page-content { position: relative; overflow: hidden; contain: strict; }
/* 旋转由脚本作用在共同视觉容器上；不添加 transition，连续点击时立即换向且不产生
   多帧叠加动画。Canvas、文字层、链接和批注因此始终共享同一套几何变换。 */
.page-visual { position: relative; flex: none; transform-origin: 0 0; }
.page-canvas { position: absolute; inset: 0; display: block; }
.text-layer, .highlight-layer, .link-layer { position: absolute; inset: 0; overflow: hidden; }
.text-layer { z-index: 2; user-select: text; cursor: text; }
.text-run { position: absolute; display: block; overflow: visible; color: transparent; white-space: pre; line-height: 1; user-select: text; transform-origin: left top; }
.text-run::selection { color: transparent; background: rgba(49,94,251,.35); }
.viewer-app.copy-disabled .text-layer,
.viewer-app.copy-disabled .text-run { -webkit-user-select: none; user-select: none; cursor: default; }
.viewer-app.copy-disabled .text-run::selection { color: transparent; background: transparent; }
.highlight-layer { z-index: 3; pointer-events: none; }
.search-highlight { position: absolute; display: block; background: var(--highlight); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(214,160,0,.22); }
.search-highlight.active { background: rgba(255,157,33,.66); box-shadow: inset 0 0 0 2px rgba(218,108,0,.7); }
.link-layer { z-index: 4; pointer-events: none; }
.link-layer[hidden] { display: none; }
.page-link { position: absolute; display: block; pointer-events: auto; cursor: pointer; touch-action: manipulation; background: transparent; border-radius: 2px; -webkit-tap-highlight-color: rgba(49,94,251,.14); }
.page-link:hover { background: rgba(49,94,251,.07); }
.page-link:focus-visible { outline: 2px solid var(--viewer-accent); outline-offset: -2px; background: rgba(49,94,251,.1); }
.page-loading, .page-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: #9aa3b5; font-size: 12px; background: #fff; }
.page-loading.passive { opacity: .45; }
.page-error { color: #c93645; }
.page-error span { max-width: 80%; color: #697386; text-align: center; }
.page-error button { min-height: 34px; padding: 0 13px; color: var(--accent); background: #eef2ff; border: 0; border-radius: 8px; }
.viewer-status { position: absolute; inset: 0; display: grid; place-items: center; color: #697386; font-size: 14px; pointer-events: none; }
.viewer-status[hidden] { display: none; }
.viewer-status.error { color: #c93645; }

/* 页面内打印容器必须参与 PDF 加载，不能使用 display:none。把它放到屏幕外即可
   避免视觉、布局和点击干扰，同时保留浏览器的原生 PDF Range 加载能力。 */
.pdf-print-frame { position: fixed; left: -10000px; top: 0; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }

/* 搜索抽屉使用独立层，不改变 Canvas 页面坐标。 */
.search-panel { position: absolute; z-index: 30; top: 56px; right: 0; bottom: 0; width: min(360px, 94vw); padding: 18px; overflow: auto; background: var(--viewer-surface); border-left: 1px solid rgba(83,95,101,.2); box-shadow: -8px 0 22px rgba(32,42,46,.1); }
.viewer-app.toolbar-hidden .search-panel { top: 0; }
.viewer-app .search-form label { display: block; margin-bottom: 8px; color: var(--viewer-toolbar-text); font-size: 12px; font-weight: 700; }
.search-input-row { display: flex; gap: 8px; }
.search-input-row .primary-button { flex: 0 0 auto; min-width: 64px; }
.viewer-app .search-input-row input { min-width: 0; min-height: 40px; color: var(--viewer-input-text); background: var(--viewer-input); border-color: var(--viewer-input-line); }
.viewer-app .search-input-row input::placeholder { color: var(--viewer-control-text); opacity: .82; }
.viewer-app .search-summary { margin: 12px 0; color: var(--viewer-control-text); font-size: 12px; }
.search-results { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.viewer-app .search-results button { display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 11px; color: var(--viewer-toolbar-text); background: var(--viewer-input); border: 1px solid transparent; border-radius: 8px; text-align: left; }
.viewer-app .search-results button:hover { background: var(--viewer-control-hover); border-color: var(--viewer-control-hover-line); }
.viewer-app .search-results strong { color: var(--viewer-accent); font-size: 11px; }
.viewer-app .search-results span { overflow: hidden; color: var(--viewer-control-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

/* 桌面端采用图标优先的操作栏，文字仍保留在 DOM 中供无障碍工具读取，
   鼠标悬停时由 title 提供完整说明，避免一排文字按钮挤占阅读空间。 */
@media (min-width: 701px) {
  .toolbar-end .button-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .toolbar-end .toolbar-button { min-width: 34px; padding: 0 8px; }
}

/* 键盘用户保留清晰但克制的焦点提示，不使用大面积发光效果。 */
.viewer-toolbar button:focus-visible,
.viewer-toolbar a:focus-visible,
.page-control input:focus-visible,
.thumbnail-card:focus-visible,
.search-panel button:focus-visible,
.search-panel input:focus-visible {
  outline: 2px solid #9bc4b8;
  outline-offset: 1px;
}

/* 深色阅读背景只改变阅读器表面颜色，缩略图仍保持白色纸张对比。 */
.viewer-app[data-background-theme="dark"] .thumbnail-panel-header { color: #d5dcde; border-bottom-color: rgba(255,255,255,.12); }
.viewer-app[data-background-theme="dark"] .thumbnail-page-number { color: #aab5b9; }
.viewer-app[data-background-theme="dark"] .thumbnail-card { color: #aeb8bb; }
.viewer-app[data-background-theme="dark"] .thumbnail-card:hover { color: #e4e9e9; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.viewer-app[data-background-theme="dark"] .thumbnail-card.is-active { color: #b9ddd1; background: transparent; border-color: rgba(155,196,184,.58); }

@media (min-width: 701px) and (max-width: 980px) {
  .viewer-app { grid-template-columns: 232px minmax(0, 1fr); }
  .viewer-toolbar { gap: 8px; padding: 0 10px; }
  .button-label { display: none; }
  .toolbar-end { gap: 3px; }
  .toolbar-button { min-width: 31px; padding: 0 6px; }
}

@media (max-width: 700px) {
  .landing { padding: 20px 14px 44px; }
  .hero-copy { margin-top: 64px; }
  .hero-description { font-size: 16px; }
  .upload-options { flex-direction: column; align-items: stretch; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .viewer-app { display: grid; grid-template-columns: minmax(0, 1fr); }
  .viewer-toolbar { padding: 0 8px; }
  .thumbnail-panel { position: absolute; z-index: 25; top: 56px; bottom: 0; left: 0; width: min(320px, 88vw); box-shadow: 12px 0 24px rgba(32,42,46,.18); transform: translateX(-102%); }
  .viewer-app.toolbar-hidden .thumbnail-panel { top: 0; }
  .viewer-app.thumbnails-open .thumbnail-panel { opacity: 1; pointer-events: auto; transform: translateX(0); }
  .viewer-app.thumbnail-collapsed { grid-template-columns: minmax(0, 1fr); }
  .thumbnail-collapsed .thumbnail-panel { opacity: 0; pointer-events: none; transform: translateX(-102%); }
  .viewer-scroller { grid-column: 1; grid-row: 2; }
  .toolbar-center { position: static; transform: none; }
  .button-label { display: none; }
  .pages-container { padding: 14px 8px 50px; }
}

@media (max-width: 460px) {
  .toolbar-divider, #zoom-out, #zoom-in, #zoom-value { display: none; }
  .toolbar-center { gap: 2px; }
  .toolbar-end { gap: 2px; }
  .icon-button { min-width: 30px; padding: 0 5px; }
  .toolbar-end .toolbar-button { min-width: 30px; padding: 0 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .viewer-app, .icon-button, .toolbar-button, .zoom-value, .thumbnail-panel, .thumbnail-card { transition: none; }
}