/* ================= WePDF Viewer — 深色 Acrobat 风格 ================= */
:root {
  --bg-top: #1b1c1f;
  --bg-toolbar: #242528;
  --bg-panel: #1e1f22;
  --bg-viewer: #525659;
  --bg-input: #17181b;
  --border: #3a3c40;
  --border-soft: #2e2f33;
  --fg: #e8e9ea;
  --fg-dim: #9d9fa4;
  --accent: #1473e6;
  --accent-soft: rgba(20, 115, 230, 0.22);
  --accent-fg: #71b1f5;
  --danger: #e5484d;
  --radius: 6px;
  --shadow-page: 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }
/* hidden 属性必须始终生效（否则会被元素自身的 display 规则覆盖） */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  color: var(--fg);
  background: var(--bg-viewer);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#app { display: flex; flex-direction: column; height: 100vh; }

/* ================= 顶栏 ================= */
#topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 12px;
  background: var(--bg-top);
  border-bottom: 1px solid #000;
  flex: none;
  z-index: 30;
}
.brand { display: flex; align-items: center; gap: 8px; user-select: none; }
.brand-logo {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, #e5484d, #b3271e);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.brand-name { font-size: 14px; color: var(--fg-dim); letter-spacing: 0.2px; }
.brand-name b { color: var(--fg); font-weight: 600; }
.top-actions { display: flex; align-items: center; gap: 2px; }
.spacer { flex: 1; }
.doc-title {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-dim);
  font-size: 12px;
}

/* ================= 通用按钮/控件 ================= */
.tbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  min-width: 30px;
  padding: 0 6px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: #cfd1d4;
  cursor: pointer;
  font: inherit;
}
.tbtn svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.tbtn:hover:not(:disabled) { background: #37393e; color: #fff; }
.tbtn:active:not(:disabled) { background: #2e3034; }
.tbtn:disabled { opacity: 0.35; cursor: default; }
.tbtn.labeled { padding: 0 10px; }
.tbtn.labeled span { font-size: 12.5px; }
.tbtn.mini { height: 24px; min-width: 24px; }
.tbtn.mini svg { width: 14px; height: 14px; }
.tbtn.tool.active {
  background: var(--accent-soft);
  color: var(--accent-fg);
  box-shadow: inset 0 0 0 1px rgba(20, 115, 230, 0.55);
}
.sep { width: 1px; height: 22px; background: var(--border); margin: 0 6px; flex: none; }
.dim { color: var(--fg-dim); }

select {
  height: 27px;
  padding: 0 6px;
  background: var(--bg-input);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 5px;
  font: inherit;
  outline: none;
  cursor: pointer;
}
select:disabled { opacity: 0.35; }
select:focus { border-color: var(--accent); }

#pageInput {
  width: 42px;
  height: 27px;
  text-align: center;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--fg);
  font: inherit;
  outline: none;
}
#pageInput:focus { border-color: var(--accent); }
#pageInput:disabled { opacity: 0.35; }

.color-wrap {
  width: 30px; height: 30px;
  border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.color-wrap:hover { background: #37393e; }
.color-wrap input[type="color"] {
  width: 20px; height: 20px;
  padding: 0; border: none;
  border-radius: 4px;
  background: none;
  cursor: pointer;
}
.color-wrap input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-wrap input[type="color"]::-webkit-color-swatch { border: 1px solid rgba(255,255,255,.35); border-radius: 4px; }

/* ================= 搜索框 ================= */
#searchBox {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 6px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 15px;
}
#searchBox:focus-within { border-color: var(--accent); }
.search-ico { width: 14px; height: 14px; fill: var(--fg-dim); flex: none; margin-left: 2px; }
#searchInput {
  width: 150px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  font: inherit;
}
#searchCount { font-size: 11.5px; color: var(--fg-dim); white-space: nowrap; }

/* ================= 工具栏 ================= */
#toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  padding: 4px 10px;
  background: var(--bg-toolbar);
  border-bottom: 1px solid #17181a;
  flex: none;
  flex-wrap: wrap;
  z-index: 25;
}
.tb-group { display: flex; align-items: center; gap: 2px; }

/* ================= 主区域 ================= */
#main { display: flex; flex: 1; min-height: 0; }

#sidebar {
  width: 200px;
  flex: none;
  background: var(--bg-panel);
  border-right: 1px solid #131417;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#sidebarTabs {
  display: flex;
  flex: none;
  border-bottom: 1px solid var(--border-soft);
}
.side-tab {
  flex: 1;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--fg-dim);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.side-tab:hover { color: var(--fg); }
.side-tab.active { color: var(--accent-fg); border-bottom-color: var(--accent); }
.side-panel { flex: 1; overflow-y: auto; min-height: 0; }
#thumbList { padding: 12px 8px; }

/* ---------- 目录（书签）面板 ---------- */
#outlinePanel { padding: 8px 4px 12px; }
.outline-empty { padding: 22px 14px; color: #6c6e73; font-size: 12px; text-align: center; }
.outline-row {
  display: flex;
  align-items: center;
  min-height: 26px;
  border-radius: 5px;
  cursor: pointer;
  padding-right: 6px;
}
.outline-row:hover { background: #2b2d31; }
.outline-caret {
  flex: none;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--fg-dim);
  cursor: pointer;
  font-size: 9px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s;
}
.outline-caret.collapsed { transform: rotate(-90deg); }
.outline-caret-ph { flex: none; width: 18px; }
.outline-title {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: #c9cbce;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 0;
}
.outline-row:hover .outline-title { color: #fff; }
.outline-children.collapsed { display: none; }
.thumb {
  margin: 0 auto 14px;
  width: fit-content;
  cursor: pointer;
  text-align: center;
  user-select: none;
}
.thumb .thumb-frame {
  border: 2px solid transparent;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  min-width: 90px;
  min-height: 60px;
}
.thumb.active .thumb-frame { border-color: var(--accent); }
.thumb:hover .thumb-frame { border-color: rgba(20, 115, 230, 0.5); }
.thumb canvas { display: block; }
.thumb .thumb-num { margin-top: 4px; font-size: 11px; color: var(--fg-dim); }
.thumb.active .thumb-num { color: var(--accent-fg); }

#viewerContainer {
  flex: 1;
  overflow: auto;
  position: relative;
  background: var(--bg-viewer);
  outline: none;
}
#viewerContainer.hand-cursor { cursor: grab; }
#viewerContainer.hand-cursor.panning { cursor: grabbing; }

#viewer { padding: 26px 40px; width: fit-content; margin: 0 auto; min-width: 100%; }

/* ================= 页面 ================= */
.page {
  position: relative;
  margin: 0 auto 18px;
  background: #fff;
  box-shadow: var(--shadow-page);
  flex: none;
}
.page > canvas.page-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  user-select: none;
}

/* ---------- PDF.js 文本层（官方样式精简版） ---------- */
.textLayer {
  color-scheme: only light;
  position: absolute;
  text-align: initial;
  inset: 0;
  overflow: clip;
  opacity: 1;
  line-height: 1;
  letter-spacing: normal;
  word-spacing: normal;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  caret-color: CanvasText;
  z-index: 1;
  --min-font-size: 1;
  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
  --min-font-size-inv: calc(1 / var(--min-font-size));
}
.textLayer :is(span, br) {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
  user-select: text;
}
.textLayer > :not(.markedContent),
.textLayer .markedContent span:not(.markedContent) {
  z-index: 1;
  --font-height: 0;
  font-size: calc(var(--text-scale-factor) * var(--font-height));
  --scale-x: 1;
  --rotate: 0deg;
  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}
.textLayer .markedContent { display: contents; }
.textLayer span[role="img"] { user-select: none; cursor: default; }
.textLayer ::selection { background: rgba(20, 115, 230, 0.32); color: transparent; }
.textLayer br::selection { background: transparent; }
.textLayer .endOfContent {
  display: block;
  position: absolute;
  inset: 100% 0 0;
  z-index: 0;
  cursor: default;
  user-select: none;
}
.textLayer.selecting .endOfContent { top: 0; }

/* 搜索命中高亮 */
.textLayer span.find-hl { background: rgba(255, 200, 0, 0.45); color: transparent; border-radius: 2px; }
.textLayer span.find-hl.find-current { background: rgba(255, 120, 0, 0.65); }

/* 视图旋转（PDF.js 通过 data-main-rotation 标记层旋转） */
.textLayer[data-main-rotation="90"], .annotLayer[data-main-rotation="90"] { transform: rotate(90deg) translateY(-100%); }
.textLayer[data-main-rotation="180"], .annotLayer[data-main-rotation="180"] { transform: rotate(180deg) translate(-100%, -100%); }
.textLayer[data-main-rotation="270"], .annotLayer[data-main-rotation="270"] { transform: rotate(270deg) translateX(-100%); }

/* ---------- 批注层 ---------- */
.annotLayer {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  z-index: 3;
  pointer-events: none;
}
/* 绘制类工具激活时，层本身接收事件 */
#viewer[data-tool="text"] .annotLayer,
#viewer[data-tool="highlight"] .annotLayer,
#viewer[data-tool="whiteout"] .annotLayer,
#viewer[data-tool="rect"] .annotLayer,
#viewer[data-tool="ellipse"] .annotLayer,
#viewer[data-tool="line"] .annotLayer,
#viewer[data-tool="ink"] .annotLayer {
  pointer-events: auto;
  cursor: crosshair;
  touch-action: none;
}
#viewer[data-tool="text"] .annotLayer { cursor: text; }
/* 绘制工具激活时文本层不抢事件 */
#viewer:not([data-tool="select"]):not([data-tool="hand"]) .textLayer { pointer-events: none; }

.annot { position: absolute; pointer-events: none; touch-action: none; }
#viewer[data-tool="select"] .annot { pointer-events: auto; cursor: move; }
.annot.selected {
  outline: 1.5px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(20, 115, 230, 0.18);
}
.annot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }

.annot-text {
  white-space: pre;
  line-height: 1.25;
  outline: none;
  min-width: 6px;
  min-height: 1em;
  font-family: Helvetica, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  padding: 0;
}
.annot-text.editing { cursor: text !important; outline: 1.5px dashed var(--accent); background: rgba(20, 115, 230, 0.06); }

/* 线条 / 手绘：整页 SVG，仅笔画本身可命中 */
.annot-path { pointer-events: none !important; }
.annot-path svg { pointer-events: none; }
.annot-path.selected { outline: none; box-shadow: none; }
#viewer[data-tool="select"] .annot-path svg .hit { pointer-events: stroke; cursor: move; }

/* 白色遮盖：悬停时提示边界 */
.annot-whiteout { background: #fff; }
#viewer[data-tool="select"] .annot-whiteout:hover:not(.selected) { outline: 1px dashed rgba(0, 0, 0, 0.3); }

.handle {
  position: absolute;
  width: 9px; height: 9px;
  background: #fff;
  border: 1.5px solid var(--accent);
  border-radius: 2px;
  z-index: 6;
  pointer-events: auto;
}
.handle[data-h="nw"] { left: -5px; top: -5px; cursor: nwse-resize; }
.handle[data-h="ne"] { right: -5px; top: -5px; cursor: nesw-resize; }
.handle[data-h="sw"] { left: -5px; bottom: -5px; cursor: nesw-resize; }
.handle[data-h="se"] { right: -5px; bottom: -5px; cursor: nwse-resize; }
.handle[data-h="p1"], .handle[data-h="p2"] { cursor: crosshair; border-radius: 50%; }

/* ================= 空状态 ================= */
#emptyState {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(20, 115, 230, 0.16), transparent 60%),
    var(--bg-viewer);
  z-index: 10;
}
.empty-card {
  width: 430px;
  max-width: calc(100vw - 48px);
  background: #26272b;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 36px 32px 26px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.empty-ico { width: 52px; height: 52px; fill: var(--danger); margin-bottom: 6px; }
.empty-card h1 { margin: 4px 0 10px; font-size: 22px; font-weight: 600; }
.empty-card p { margin: 0 0 20px; color: var(--fg-dim); line-height: 1.6; }
.empty-actions { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; }
button.primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  height: 38px;
  padding: 0 20px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button.primary:hover { background: #2b82ea; }
button.ghost {
  background: transparent;
  color: var(--accent-fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 38px;
  padding: 0 16px;
  font: inherit;
  cursor: pointer;
}
button.ghost:hover { border-color: var(--accent); }
.empty-card .hint { font-size: 11.5px; color: #6c6e73; margin: 0; }
#app.has-doc #emptyState { display: none; }

/* ---------- 最近打开 ---------- */
.recent-section { margin: 4px 0 16px; text-align: left; }
.recent-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--fg-dim);
}
.recent-head button {
  background: none;
  border: none;
  padding: 2px 4px;
  color: #7d8085;
  font-size: 11.5px;
  cursor: pointer;
}
.recent-head button:hover { color: var(--accent-fg); }
#recentList {
  max-height: 264px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 2px;
}
.recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: #2c2d32;
  cursor: pointer;
  user-select: none;
}
.recent-item:hover { border-color: var(--accent); background: #30323a; }
.recent-thumb {
  width: 34px;
  height: 44px;
  object-fit: cover;
  object-position: top;
  border-radius: 3px;
  background: #fff;
  flex: none;
}
.recent-thumb-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #b3271e;
}
.recent-meta { flex: 1; min-width: 0; }
.recent-name {
  font-size: 12.5px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-sub { font-size: 11px; color: var(--fg-dim); margin-top: 3px; }
.recent-del {
  flex: none;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--fg-dim);
  cursor: pointer;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recent-del svg { fill: currentColor; }
.recent-item:hover .recent-del { opacity: 1; }
.recent-del:hover { background: #45474d; color: #fff; }

/* ================= 拖放遮罩 / 提示 / 加载条 ================= */
#dropOverlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 40, 90, 0.35);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.drop-box {
  padding: 30px 60px;
  border: 2.5px dashed #8ec0ff;
  border-radius: 16px;
  font-size: 20px;
  color: #eaf3ff;
  background: rgba(20, 115, 230, 0.25);
}

#toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  background: #101114;
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 12.5px;
  z-index: 200;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  max-width: 70vw;
}
#toast.error { border-color: var(--danger); color: #ffb3b5; }

#loadingBar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 300;
  overflow: hidden;
  background: rgba(20, 115, 230, 0.15);
}
#loadingBar .bar {
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: loading-slide 1.1s linear infinite;
}
@keyframes loading-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(350%); }
}

/* ================= 滚动条 ================= */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #6b6e73; border: 3px solid transparent; border-radius: 7px; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #85888d; border: 3px solid transparent; background-clip: content-box; }
#sidebar::-webkit-scrollbar-thumb { background: #3f4145; border: 3px solid transparent; background-clip: content-box; }

/* ================= 打印 ================= */
#printRoot { display: none; }
@media print {
  body { overflow: visible; background: #fff; }
  #app, #toast, #dropOverlay, #loadingBar { display: none !important; }
  #printRoot { display: block; }
  #printRoot .print-page {
    page-break-after: always;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #printRoot .print-page:last-child { page-break-after: auto; }
  #printRoot img { max-width: 100%; max-height: 100vh; }
}