/* ── 自定义中文字体（供文字工具 canvas 渲染用）── */
    @font-face {
      font-family: 'Noto Sans SC';
      src: url('../fonts/NotoSansSC-Regular.otf') format('opentype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Source Han Sans CN';
      src: url('../fonts/SourceHanSansCN-Regular.otf') format('opentype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    html, body { height: 100%; margin: 0; padding: 0; }
    body.upload-mode { overflow: auto; }

    /* 编辑器模式：整个 body 变成 flex 列，撑满视口 */
    body.editor-mode {
      display: flex; flex-direction: column;
      height: 100vh; overflow: hidden;
    }
    body.editor-mode nav { position: relative; flex-shrink: 0; }
    body.editor-mode #editorState { flex: 1; min-height: 0; height: 0; }

    /* ══════════════════════════════════════
       Upload State
    ══════════════════════════════════════ */
    #uploadState {
      min-height: calc(100vh - 64px);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 64px 48px; text-align: center;
    }
    #uploadState h1 {
      font-family: 'Sora', sans-serif; font-size: 40px; font-weight: 800;
      color: var(--text); margin-bottom: 14px; letter-spacing: -0.02em;
    }
    #uploadState .subtitle {
      font-size: 16px; font-weight: 500; color: var(--muted); margin-bottom: 40px;
    }

    /* ── 统一拖放上传区（edit/sign/watermark/crop/merge 共用）── */
    .upload-area {
      display: flex; flex-direction: column; align-items: center; gap: 0;
      width: 100%; max-width: 560px;
    }
    /* 统一用 .pdf-drop-zone，与 merge 页的 .merge-drop-zone 参数完全对齐 */
    .pdf-drop-zone {
      width: 100%;
      border: 2px dashed var(--blue);
      border-radius: 16px;
      padding: 40px 24px;
      display: flex; flex-direction: column;
      align-items: center; gap: 16px;
      cursor: pointer;
      background: var(--blue-light);
      transition: border-color 0.2s, background 0.2s;
    }
    .pdf-drop-zone:hover,
    .pdf-drop-zone.drag-over {
      border-color: var(--blue-dark);
      background: #dde6fd;
    }
    .pdf-drop-zone svg {
      width: 40px; height: 40px;
      stroke: var(--blue); fill: none;
      stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    }
    .pdf-drop-zone-text {
      font-size: 15px;
      color: var(--muted);
    }
    .pdf-drop-zone-text strong {
      color: var(--blue);
      font-weight: 600;
      cursor: pointer;
    }

    /* 兼容旧 HTML 元素，不显示 */
    .upload-btn { display: none; }
    .drop-hint  { display: none; }
    /* 保留旧 class 别名，避免任何残留引用失效 */
    .upload-drop-zone { display: none; }

    .formats-hint {
      margin-top: 18px; font-size: 12px;
      color: #9ca3af; line-height: 1.8;
      display: flex; flex-direction: column; gap: 2px;
    }
    .formats-hint span { color: #9ca3af; font-weight: 500; }
    #fileInput { display: none; }

    /* ══════════════════════════════════════
       Editor Layout
    ══════════════════════════════════════ */
    body.editor-mode {
      display: flex; flex-direction: column;
      height: 100vh; overflow: hidden;
    }
    body.editor-mode nav { position: relative; flex-shrink: 0; }

    #editorState {
      display: none; flex-direction: column;
      flex: 1; min-height: 0; overflow: hidden;
    }
    body.editor-mode #editorState { display: flex; }

    /* 编辑器模式下隐藏底部 footer 和语言弹窗（保留登录/注册弹窗） */
    body.editor-mode footer,
    body.editor-mode .lang-overlay {
      display: none !important;
    }

    /* ── 文件名 + 工具栏合并为一行 ── */
    .file-bar {
      display: flex; align-items: center; gap: 6px;
      padding: 0 48px; height: 48px; flex-shrink: 0;
      border-bottom: 1px solid var(--border); background: #fff;
      overflow-x: auto; overflow-y: hidden;
    }
    .file-bar::-webkit-scrollbar { height: 0; }

    .file-bar .fname {
      font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 600;
      color: var(--text);
      min-width: 320px;  /* 保证工具栏起始位置与导航 Edit 对齐 */
      max-width: 420px;
      flex-shrink: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .file-bar .finish-btn {
      margin-left: auto; background: var(--blue); color: #fff; border: none;
      font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 700;
      padding: 9px 120px; border-radius: 999px; cursor: pointer; flex-shrink: 0;
      transition: background 0.15s, transform 0.1s;
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .file-bar .finish-btn:hover { background: var(--blue-dark); transform: translateY(-1px); }
    .file-bar .finish-btn svg { width: 16px; height: 10px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

    .tool-sep { width: 1px; height: 24px; background: var(--border); margin: 0 4px; flex-shrink: 0; }

    .tbtn {
      display: flex; align-items: center; justify-content: center; gap: 3px;
      height: 34px; min-width: 34px; padding: 0 8px; border: none; background: none;
      border-radius: 7px; cursor: pointer; color: #4b5563;
      font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
      transition: background 0.12s, color 0.12s; white-space: nowrap; flex-shrink: 0;
      position: relative;
    }
    .tbtn:hover { background: var(--blue-light); color: var(--blue); }
    .tbtn.active { background: var(--blue-light); color: var(--blue); }
    .tbtn svg { width: 18px; height: 18px; flex-shrink: 0; }
    .tbtn .crown {
      font-size: 12px; margin-left: 1px; line-height: 1;
    }

    /* 带下拉箭头的工具按钮 */
    .tbtn-group {
      display: flex; align-items: center; flex-shrink: 0;
      border-radius: 7px; overflow: visible; /* 必须 visible，否则下拉菜单被裁切 */
      position: relative;
    }
    .tbtn-group .tbtn { border-radius: 0; }
    .tbtn-group .tbtn:first-child { border-radius: 7px 0 0 7px; padding-right: 4px; }
    .tbtn-group .arr {
      display: flex; align-items: center; justify-content: center;
      width: 18px; height: 34px; border: none; background: none;
      cursor: pointer; color: #9ca3af; border-radius: 0 7px 7px 0;
      transition: background 0.12s, color 0.12s; flex-shrink: 0;
      padding: 0;
    }
    .tbtn-group .arr svg { width: 10px; height: 10px; }
    /* 绘制按钮组：整体 hover 二合一效果 */
    #drawBtnGroup:hover .tbtn,
    #drawBtnGroup:hover .arr { background: var(--blue-light); color: var(--blue); }
    #drawBtnGroup .tbtn.active,
    #drawBtnGroup .tbtn.active ~ .arr { background: var(--blue-light); color: var(--blue); }
    /* 其他 tbtn-group arr hover 保留 */
    .tbtn-group:not(#drawBtnGroup) .arr:hover { background: var(--blue-light); color: var(--blue); }

    /* ── 文字工具选项栏 ── */
    .text-toolbar {
      display: none; align-items: center; gap: 4px;
      padding: 0 48px; height: 44px; flex-shrink: 0;
      border-bottom: 1px solid var(--border);
      background: #fafafa; overflow-x: auto; overflow-y: hidden;
      flex-wrap: nowrap;
    }
    /* 占位，让格式栏内容与 T 按钮左对齐（fname min-width 320px + sep ~9px）*/
    .text-toolbar-spacer {
      min-width: 329px; flex-shrink: 0;
    }
    .text-toolbar::-webkit-scrollbar { height: 0; }
    .text-toolbar.show { display: flex; }

    /* 下拉选择器 */
    .tt-select {
      display: flex; align-items: center; gap: 3px;
      height: 30px; padding: 0 8px; border: 1.5px solid var(--border);
      border-radius: 7px; background: #fff; cursor: pointer;
      font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text);
      white-space: nowrap; flex-shrink: 0; position: relative;
      transition: border-color 0.12s; user-select: none;
    }
    .tt-select:hover { border-color: var(--blue); }
    .tt-select svg { width: 10px; height: 10px; color: #9ca3af; flex-shrink: 0; }

    /* 自定义字体下拉列表 */
    .tt-font-dropdown {
      display: none; position: absolute; top: calc(100% + 4px); left: 0;
      background: #fff; border: 1px solid var(--border); border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.12); z-index: 600;
      min-width: 160px; max-height: 240px; overflow-y: auto;
      padding: 4px;
    }
    .tt-font-dropdown.open { display: block; }
    .tt-font-dropdown::-webkit-scrollbar { width: 4px; }
    .tt-font-dropdown::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
    .tt-font-item {
      padding: 7px 12px; font-size: 13px; color: var(--text);
      border-radius: 5px; cursor: pointer; transition: background 0.1s;
      white-space: nowrap;
    }
    .tt-font-item:hover { background: var(--blue-light); color: var(--blue); }
    .tt-font-item.active { background: var(--blue-light); color: var(--blue); font-weight: 600; }

    /* 数字输入 */
    .tt-num {
      display: flex; align-items: center; gap: 2px;
      height: 30px; border: 1.5px solid var(--border);
      border-radius: 7px; background: #fff; overflow: hidden;
      flex-shrink: 0; transition: border-color 0.12s;
    }
    .tt-num:focus-within { border-color: var(--blue); }
    .tt-num input {
      width: 36px; text-align: center; border: none; outline: none;
      font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text);
      background: transparent; padding: 0 4px;
      -moz-appearance: textfield;
    }
    .tt-num input::-webkit-outer-spin-button,
    .tt-num input::-webkit-inner-spin-button { -webkit-appearance: none; }
    .tt-num-btn {
      width: 20px; height: 100%; border: none; background: none;
      cursor: pointer; color: #9ca3af; display: flex;
      align-items: center; justify-content: center;
      font-size: 14px; transition: background 0.1s, color 0.1s;
    }
    .tt-num-btn:hover { background: var(--blue-light); color: var(--blue); }

    /* 格式按钮 (B / I / U) */
    .tt-btn {
      width: 30px; height: 30px; border: 1.5px solid var(--border);
      border-radius: 7px; background: #fff; cursor: pointer;
      font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700;
      color: var(--text); display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: border-color 0.12s, background 0.12s, color 0.12s;
    }
    .tt-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
    .tt-btn.on { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
    .tt-btn svg { width: 14px; height: 14px; }

    /* 颜色按钮 */
    .tt-color {
      display: flex; align-items: center; gap: 3px;
      height: 30px; padding: 0 8px; border: 1.5px solid var(--border);
      border-radius: 7px; background: #fff; cursor: pointer;
      flex-shrink: 0; position: relative; transition: border-color 0.12s;
    }
    .tt-color:hover { border-color: var(--blue); }
    .tt-color-dot {
      width: 14px; height: 14px; border-radius: 3px;
      border: 1px solid rgba(0,0,0,0.12);
    }
    .tt-color svg { width: 10px; height: 10px; color: #9ca3af; }

    /* 透明度选择器 */
    .tt-opacity {
      display: flex; align-items: center; gap: 3px;
      height: 30px; padding: 0 8px; border: 1.5px solid var(--border);
      border-radius: 7px; background: #fff; cursor: pointer;
      font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text);
      flex-shrink: 0; position: relative; white-space: nowrap;
      transition: border-color 0.12s;
    }
    .tt-opacity:hover { border-color: var(--blue); }
    .tt-opacity select {
      position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%;
    }

    /* 对齐按钮组 */
    .tt-align-group {
      display: flex; align-items: center;
      border: 1.5px solid var(--border); border-radius: 7px;
      background: #fff; overflow: hidden; flex-shrink: 0;
    }
    .tt-align {
      width: 30px; height: 28px; border: none; background: none;
      cursor: pointer; color: var(--muted);
      display: flex; align-items: center; justify-content: center;
      transition: background 0.12s, color 0.12s;
    }
    .tt-align + .tt-align { border-left: 1px solid var(--border); }
    .tt-align:hover { background: var(--blue-light); color: var(--blue); }
    .tt-align.on { background: var(--blue-light); color: var(--blue); }
    .tt-align svg { width: 14px; height: 14px; }

    .tt-sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; flex-shrink: 0; }

    /* 颜色选择弹窗 */
    /* 颜色选择面板 */
    .color-panel {
      display: none; position: fixed;
      background: #fff; border: 1px solid var(--border); border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.15); padding: 12px 12px 10px;
      z-index: 9000; width: 244px;
    }
    .color-panel.open { display: block; }
    .color-swatches {
      display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-bottom: 10px;
    }
    .color-swatch {
      width: 18px; height: 18px; border-radius: 3px; cursor: pointer;
      border: 1px solid rgba(0,0,0,0.08);
      transition: transform 0.1s, box-shadow 0.1s;
    }
    .color-swatch:hover { transform: scale(1.15); box-shadow: 0 2px 6px rgba(0,0,0,0.18); }
    .color-swatch.selected { outline: 2px solid var(--blue); outline-offset: 1px; }
    .color-input-row {
      display: flex; align-items: center; gap: 6px;
      border: 1.5px solid var(--border); border-radius: 8px;
      padding: 0 10px; height: 32px; margin-bottom: 8px;
      transition: border-color 0.15s;
    }
    .color-input-row:focus-within { border-color: var(--blue); }
    .color-preview-box {
      width: 18px; height: 18px; border-radius: 3px;
      border: 1px solid rgba(0,0,0,0.1); flex-shrink: 0;
    }
    .color-hash { font-size: 13px; color: var(--muted); font-family: monospace; }
    .color-hex-bare {
      flex: 1; border: none; outline: none; font-size: 13px;
      font-family: monospace; color: var(--text); background: transparent;
      text-transform: uppercase; min-width: 0;
    }
    .color-clear-btn {
      font-size: 12px; color: var(--muted); border: none; background: none;
      cursor: pointer; padding: 0; white-space: nowrap;
      transition: color 0.12s;
    }
    .color-clear-btn:hover { color: #ef4444; }
    .color-btn-row {
      display: flex; justify-content: flex-end; gap: 8px;
    }
    .color-reset-btn {
      height: 28px; padding: 0 12px; background: none;
      border: 1.5px solid var(--border); border-radius: 6px;
      font-size: 12px; color: var(--muted); cursor: pointer;
      transition: border-color 0.12s, color 0.12s;
    }
    .color-reset-btn:hover { border-color: var(--blue); color: var(--blue); }
    .color-ok-btn {
      height: 28px; padding: 0 16px; background: var(--blue); color: #fff;
      border: none; border-radius: 6px; font-size: 12px; font-weight: 600;
      cursor: pointer; transition: background 0.12s;
    }
    .color-ok-btn:hover { background: var(--blue-dark); }

    /* ── 主体三栏 ── */
    .editor-body {
      display: flex; flex: 1; min-height: 0;
      position: relative; overflow: hidden;
    }

    /* ── 左侧缩略图 ── */
    .thumb-panel {
      width: 200px; flex-shrink: 0;
      border-right: 1px solid var(--border);
      background: #f4f5f7; overflow-y: auto; overflow-x: hidden;
      padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 0;
    }
    .thumb-panel::-webkit-scrollbar { width: 4px; }
    .thumb-panel::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

    .thumb-item { display: flex; flex-direction: column; align-items: center; margin-bottom: 8px; cursor: grab; }
    .thumb-item:active { cursor: grabbing; }

    /* 拖拽中的元素：半透明 */
    .thumb-item.dragging {
      opacity: 0.35;
      cursor: grabbing;
    }

    /* 虚线占位框 */
    .thumb-placeholder {
      display: flex; flex-direction: column; align-items: center;
      margin-bottom: 8px; pointer-events: none;
    }
    .thumb-placeholder-box {
      width: 140px; height: 186px;
      border: 2.5px dashed var(--blue);
      border-radius: 6px;
      background: rgba(59,110,248,0.08);
      box-shadow: inset 0 0 0 4px rgba(59,110,248,0.06);
      animation: dashedPulse 1s ease-in-out infinite alternate;
    }
    @keyframes dashedPulse {
      from { background: rgba(59,110,248,0.06); }
      to   { background: rgba(59,110,248,0.13); }
    }
    .thumb-placeholder-num {
      width: 24px; height: 8px;
      background: #e0e7ff; border-radius: 4px;
      margin-top: 10px;
    }

    .thumb-box {
      width: 140px; height: 186px; background: #fff;
      border: 2px solid transparent; border-radius: 6px;
      overflow: hidden; cursor: pointer; position: relative;
      transition: border-color 0.15s, box-shadow 0.15s;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }
    .thumb-box:hover { border-color: #93c5fd; }
    .thumb-item.active .thumb-box {
      border-color: var(--blue);
      box-shadow: 0 0 0 2px rgba(59,110,248,0.2);
    }
    .thumb-box canvas { width: 100%; height: 100%; display: block; object-fit: contain; }

    .thumb-actions {
      display: flex; align-items: center; gap: 2px; margin-top: 6px;
    }
    .thumb-act {
      width: 26px; height: 26px; border: none; background: none;
      border-radius: 6px; cursor: pointer; color: #6b7280;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.12s, color 0.12s;
    }
    .thumb-act:hover { background: #e5e7eb; color: var(--text); }
    .thumb-act.del:hover { background: #fee2e2; color: #ef4444; }
    .thumb-act svg { width: 14px; height: 14px; }

    .thumb-num { font-size: 11px; color: #9ca3af; margin-top: 4px; }

    .thumb-add {
      width: 140px; height: 32px; border: 1.5px dashed #d1d5db;
      border-radius: 6px; background: none; cursor: pointer; color: #9ca3af;
      display: flex; align-items: center; justify-content: center; gap: 4px;
      font-size: 12px; transition: border-color 0.12s, color 0.12s;
      margin-top: 4px; margin-bottom: 8px;
    }
    .thumb-add:hover { border-color: var(--blue); color: var(--blue); }
    .thumb-add svg { width: 13px; height: 13px; }

    /* ── 中间预览区 ── */
    .preview-panel {
      flex: 1; min-width: 0; background: #e5e7eb;
      overflow-y: auto; overflow-x: auto;
      display: flex; flex-direction: column; align-items: center;
      padding: 24px 24px 80px; gap: 16px;
      position: relative;
    }
    /* 高亮模式：禁止 preview-panel 的 touch-action，防止滚动干扰选区 */
    body.highlight-mode .preview-panel {
      -webkit-overflow-scrolling: auto;
    }
    .preview-panel::-webkit-scrollbar { width: 6px; }
    .preview-panel::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 4px; }

    .page-wrap {
      position: relative; flex-shrink: 0;
      box-shadow: 0 4px 24px rgba(0,0,0,0.15);
      background: #fff; border-radius: 2px;
    }
    .page-wrap canvas { display: block; }

    /* 浮动页码导航 */
    .float-nav {
      position: fixed; bottom: 24px;
      left: calc(176px + 50%); transform: translateX(-50%);
      background: rgba(17,24,39,0.85); backdrop-filter: blur(8px);
      border-radius: 999px; padding: 6px 16px;
      display: none; align-items: center; gap: 10px; z-index: 100;
    }
    .float-nav.show { display: flex; }
    .fnav-btn {
      width: 28px; height: 28px; border: none; background: rgba(255,255,255,0.15);
      border-radius: 50%; cursor: pointer; color: #fff;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.12s;
    }
    .fnav-btn:hover { background: rgba(255,255,255,0.25); }
    .fnav-btn:disabled { opacity: 0.3; cursor: default; }
    .fnav-btn svg { width: 14px; height: 14px; }
    .fnav-indicator {
      display: flex; align-items: center; gap: 6px;
      font-size: 13px; color: #fff; font-family: 'DM Sans', sans-serif;
    }
    .fnav-indicator input {
      width: 32px; text-align: center; background: rgba(255,255,255,0.15);
      border: none; border-radius: 4px; color: #fff; font-size: 13px;
      padding: 2px 4px; outline: none;
      /* 隐藏 number 输入框的上下箭头 */
      -moz-appearance: textfield;
    }
    .fnav-indicator input::-webkit-outer-spin-button,
    .fnav-indicator input::-webkit-inner-spin-button {
      -webkit-appearance: none; margin: 0;
    }
    .fnav-sep { color: rgba(255,255,255,0.5); font-size: 12px; }
    .zoom-group { display: flex; align-items: center; gap: 6px; margin-left: 4px; }
    .zoom-btn {
      width: 24px; height: 24px; border: none; background: rgba(255,255,255,0.15);
      border-radius: 50%; cursor: pointer; color: #fff; font-size: 16px; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.12s;
    }
    .zoom-btn:hover { background: rgba(255,255,255,0.25); }
    .zoom-val { font-size: 12px; color: rgba(255,255,255,0.8); min-width: 36px; text-align: center; }

    /* 适配宽度/高度切换按钮 */
    .fit-btn {
      width: 30px; height: 30px; border: none;
      background: rgba(255,255,255,0.12); border-radius: 6px;
      cursor: pointer; color: rgba(255,255,255,0.85);
      display: flex; align-items: center; justify-content: center;
      transition: background 0.12s; margin-left: 4px; flex-shrink: 0;
      position: relative;
    }
    .fit-btn:hover { background: rgba(255,255,255,0.25); }
    .fit-btn svg { width: 16px; height: 16px; }
    .fit-btn[data-tooltip]:hover::after {
      content: attr(data-tooltip);
      position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
      background: rgba(0,0,0,0.75); color: #fff; font-size: 11px;
      padding: 3px 8px; border-radius: 5px; white-space: nowrap; pointer-events: none;
      font-family: 'DM Sans', sans-serif;
    }

    /* ── Loading 状态 ── */
    .loading-overlay {
      display: none;
      position: absolute; inset: 0;
      background: #f4f5f7;
      align-items: center; justify-content: center;
      flex-direction: column; gap: 16px;
      z-index: 50;
    }
    .loading-overlay.show { display: flex; }

    .loading-spinner {
      width: 40px; height: 40px;
      border: 3px solid #e5e7eb;
      border-top-color: var(--blue);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .loading-text {
      font-family: 'DM Sans', sans-serif;
      font-size: 13px; color: var(--muted);
    }

    /* 预览区 loading */
    .preview-loading {
      display: none;
      position: absolute; inset: 0;
      background: #e5e7eb;
      align-items: center; justify-content: center;
      flex-direction: column; gap: 16px;
      z-index: 10;
    }
    .preview-loading.show { display: flex; }
    .preview-panel { position: relative; }

    /* 添加文字工具：预览区光标变十字 */
    body.addtext-mode .preview-panel { cursor: crosshair !important; }
    body.addtext-mode .preview-panel .page-wrap { cursor: crosshair !important; }

    /* 文字注释框基础 */
    .text-annotation { user-select: none; }
    .text-annotation.ta-editing [data-ed] { user-select: text; -webkit-user-select: text; }

    /* 选中态：蓝色轮廓（用 outline 不影响布局）*/
    .text-annotation.ta-selected {
      outline: 1.5px solid var(--blue);
      box-shadow: 0 0 0 2px rgba(59,110,248,0.12);
    }
    /* 编辑态：深蓝轮廓 */
    .text-annotation.ta-editing {
      outline: 1.5px solid var(--blue-dark);
      box-shadow: 0 0 0 2px rgba(59,110,248,0.2);
    }

    /* ── 注释操作按钮（文字框 ta- / 图片框 ia- 共用同一套视觉规范）── */
    /* 删除按钮：右上角 */
    .ta-del-btn, .ia-del-btn {
      position: absolute; top: -10px; right: -10px;
      width: 22px; height: 22px; border-radius: 50%;
      border: none; background: #ef4444; color: #fff;
      cursor: pointer; display: none;
      align-items: center; justify-content: center;
      z-index: 20; padding: 0;
      box-shadow: 0 1px 4px rgba(0,0,0,0.25);
      transition: background 0.12s;
    }
    .ta-del-btn:hover, .ia-del-btn:hover { background: #dc2626; }
    .text-annotation.ta-selected .ta-del-btn { display: flex; }

    /* 旋转按钮：左上角 */
    .ta-rot-btn, .ia-rot-btn {
      position: absolute; top: -10px; left: -10px;
      width: 22px; height: 22px; border-radius: 50%;
      border: none; background: #1f2937; color: #d1d5db;
      cursor: grab; display: none;
      align-items: center; justify-content: center;
      z-index: 20; padding: 0;
      box-shadow: 0 1px 4px rgba(0,0,0,0.25);
      transition: background 0.12s;
    }
    .ta-rot-btn:hover, .ia-rot-btn:hover { background: #374151; color: #fff; }
    .ta-rot-btn:active, .ia-rot-btn:active { cursor: grabbing; }
    .text-annotation.ta-selected .ta-rot-btn { display: flex; }

    /* 右下缩放手柄（文字框专用）*/
    .ta-resize-handle {
      position: absolute; right: -5px; bottom: -5px;
      width: 10px; height: 10px;
      background: var(--blue); border-radius: 2px;
      cursor: se-resize; z-index: 10; display: none;
    }
    .text-annotation.ta-selected .ta-resize-handle { display: block; }

    .drop-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(59,110,248,0.06);
      border: 3px dashed var(--blue); z-index: 300;
      pointer-events: none; align-items: center; justify-content: center;
    }
    .drop-overlay.active { display: flex; }
    .drop-overlay span { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 700; color: var(--blue); }


    /* 绘制下拉选择菜单 */
    .draw-dropdown-menu {
      display: none;
      position: absolute; top: calc(100% + 6px); left: 0;
      background: #fff; border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 8px 28px rgba(0,0,0,0.13);
      padding: 6px; z-index: 9999; min-width: 148px;
      animation: popUp 0.15s ease;
    }
    .draw-dropdown-menu.open { display: block; }
    /* ── 绘制下拉菜单 ── */
    .draw-menu-item {
      display: flex; align-items: center; gap: 10px;
      width: 100%; padding: 9px 12px; border: none; background: none;
      font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text);
      cursor: pointer; border-radius: 8px; text-align: left;
      transition: background 0.12s, color 0.12s;
    }
    .draw-menu-item:hover { background: var(--blue-light); color: var(--blue); }
    .draw-menu-item.active { background: var(--blue-light); color: var(--blue); font-weight: 600; }

    /* ── 画笔格式工具栏 ── */
    .draw-toolbar {
      display: none; align-items: center; gap: 6px;
      padding: 0 48px; height: 44px; flex-shrink: 0;
      border-bottom: 1px solid var(--border);
      background: #fafafa; overflow-x: auto; overflow-y: hidden;
    }
    .draw-toolbar.show { display: flex; }
    .draw-toolbar-spacer { min-width: 329px; flex-shrink: 0; }

    .dt-color-btn {
      display: flex; align-items: center; gap: 4px;
      height: 30px; padding: 0 8px; border: 1.5px solid var(--border);
      border-radius: 7px; background: #fff; cursor: pointer;
      flex-shrink: 0; transition: border-color 0.12s;
    }
    .dt-color-btn:hover { border-color: var(--blue); }
    .dt-color-dot { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.12); flex-shrink: 0; }
    .dt-color-btn svg { width: 10px; height: 10px; color: #9ca3af; }

    .dt-size-btn {
      display: flex; align-items: center; gap: 5px;
      height: 30px; padding: 0 10px; border: 1.5px solid var(--border);
      border-radius: 7px; background: #fff; cursor: pointer;
      font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text);
      flex-shrink: 0; white-space: nowrap; transition: border-color 0.12s;
    }
    .dt-size-btn:hover { border-color: var(--blue); }
    .dt-size-btn > svg:last-child { width: 10px; height: 10px; color: #9ca3af; }

    .dt-opacity-btn {
      display: flex; align-items: center; gap: 5px;
      height: 30px; padding: 0 10px; border: 1.5px solid var(--border);
      border-radius: 7px; background: #fff; cursor: pointer;
      font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text);
      flex-shrink: 0; white-space: nowrap; transition: border-color 0.12s;
    }
    .dt-opacity-btn:hover { border-color: var(--blue); }
    .dt-opacity-btn > svg:last-child { width: 10px; height: 10px; color: #9ca3af; }

    .dt-dropdown {
      display: none; position: fixed;
      background: #fff; border: 1px solid var(--border); border-radius: 10px;
      box-shadow: 0 6px 24px rgba(0,0,0,0.12); padding: 4px;
      z-index: 9000; min-width: 90px;
    }
    .dt-dropdown.open { display: block; }
    .dt-dropdown-item {
      padding: 8px 14px; font-size: 13px; color: var(--text);
      border-radius: 6px; cursor: pointer; transition: background 0.1s;
      font-family: 'DM Sans', sans-serif; white-space: nowrap;
    }
    .dt-dropdown-item:hover { background: var(--blue-light); color: var(--blue); }
    .dt-dropdown-item.active { background: var(--blue-light); color: var(--blue); font-weight: 600; }

    body.draw-pen-mode .preview-panel,
    body.draw-pen-mode .preview-panel .page-wrap { cursor: crosshair !important; }
    body.draw-marker-mode .preview-panel,
    body.draw-marker-mode .preview-panel .page-wrap { cursor: crosshair !important; }
    body.draw-eraser-mode .preview-panel,
    body.draw-eraser-mode .preview-panel .page-wrap { cursor: cell !important; }
    body.shape-mode .preview-panel,
    body.shape-mode .preview-panel .page-wrap { cursor: crosshair !important; }
    body.highlight-mode .preview-panel,
    body.highlight-mode .preview-panel .page-wrap { cursor: text !important; }
    body.highlight-mode .preview-panel { user-select: text !important; -webkit-user-select: text !important; }

    body.redact-mode .preview-panel,
    body.redact-mode .preview-panel .page-wrap { cursor: crosshair !important; }
    body.redact-mode .preview-panel { user-select: text !important; -webkit-user-select: text !important; }

    /* PDF 文本层 */
    .pdf-text-layer {
      pointer-events: none;
      user-select: none;
      -webkit-user-select: none;
    }
    body.highlight-mode .pdf-text-layer {
      pointer-events: auto !important;
      user-select: text !important;
      -webkit-user-select: text !important;
      z-index: 10 !important;
    }
    body.highlight-mode .pdf-text-layer span {
      pointer-events: auto !important;
      user-select: text !important;
      -webkit-user-select: text !important;
      cursor: text !important;
    }
    /* 文字选中高亮色 */
    .pdf-text-layer span::selection { background: rgba(59,130,246,0.35); color: transparent; }
    .pdf-text-layer span::-moz-selection { background: rgba(59,130,246,0.35); color: transparent; }

    /* ── edittext 模式 ── */
    body.edittext-mode .pdf-text-layer { pointer-events: auto !important; z-index: 10 !important; }
    body.edittext-mode .pdf-text-layer span {
      pointer-events: auto !important; cursor: pointer !important;
      outline: 1.5px dashed #94a3b8; outline-offset: 1px; border-radius: 2px;
    }
    body.edittext-mode .pdf-text-layer span:hover { outline-color: var(--blue); background: rgba(59,110,248,0.06); }
    body.edittext-mode .pdf-text-layer span.et-selected { outline: 2px solid var(--blue) !important; background: rgba(59,110,248,0.08); }
    body.edittext-mode .pdf-text-layer span.et-editing { color: #111 !important; outline: 2px solid #f59e0b !important; background: rgba(245,158,11,0.06); cursor: text !important; }
    .et-action-btn { width:28px;height:28px;border:none;background:none;border-radius:6px;cursor:pointer;color:#4b5563;display:flex;align-items:center;justify-content:center;transition:background 0.12s,color 0.12s; }
    .et-action-btn:hover { background: var(--blue-light); color: var(--blue); }
    .et-action-btn.et-del-btn:hover { background: #fee2e2; color: #ef4444; }
    .et-action-btn svg { width:15px;height:15px; }

    /* ── 签名面板 ── */
    .sign-panel {
      display: none; position: fixed;
      background: #fff; border: 1px solid var(--border);
      border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.15);
      padding: 16px; z-index: 99999; width: 300px;
    }
    .sign-panel.open { display: block; }

    .sign-section-title {
      font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700;
      color: var(--text); margin-bottom: 10px;
    }
    .sign-section { margin-bottom: 14px; }
    .sign-section:last-child { margin-bottom: 0; }

    .sign-item {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 10px; border: 1px solid var(--border);
      border-radius: 8px; margin-bottom: 6px; cursor: pointer;
      transition: border-color 0.12s, background 0.12s;
      position: relative;
    }
    .sign-item:hover { border-color: var(--blue); background: var(--blue-light); }
    .sign-item img {
      height: 32px; max-width: 120px; object-fit: contain;
    }
    .sign-item-label {
      font-size: 13px; color: var(--text); flex: 1;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .sign-item-del {
      width: 22px; height: 22px; border: none; background: none;
      cursor: pointer; color: var(--muted); border-radius: 5px;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.12s, color 0.12s; flex-shrink: 0;
    }
    .sign-item-del:hover { background: #fee2e2; color: #ef4444; }

    .sign-add-btn {
      display: flex; align-items: center; gap: 6px;
      width: 100%; padding: 8px 10px; border: 1.5px dashed var(--border);
      border-radius: 8px; background: none; cursor: pointer;
      font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--blue);
      transition: border-color 0.12s, background 0.12s;
    }
    .sign-add-btn:hover { border-color: var(--blue); background: var(--blue-light); }
    .sign-add-btn .crown { font-size: 14px; }

    .sign-login-hint {
      text-align: center; padding: 8px 0 4px;
      font-size: 13px; color: var(--muted); line-height: 1.6;
    }
    .sign-login-hint a {
      color: var(--blue); text-decoration: none; font-weight: 500;
    }
    .sign-login-hint a:hover { text-decoration: underline; }

    /* 签名颜色选择按钮 */
    .sign-color-btn {
      width: 22px; height: 22px; border-radius: 50%;
      border: 2.5px solid transparent; cursor: pointer;
      transition: border-color 0.12s, transform 0.1s;
      flex-shrink: 0;
    }
    .sign-color-btn.active { border-color: var(--blue); transform: scale(1.15); }
    .sign-color-btn:hover { transform: scale(1.1); }

    /* ── 图片注释 ── */
    .img-annotation {
      position: absolute;
      user-select: none;
      cursor: move;
      box-sizing: border-box;
      z-index: 150;
    }
    .img-annotation img {
      width: 100%; height: 100%;
      display: block;
      object-fit: fill;
      pointer-events: none;
      border-radius: 1px;
    }
    /* 选中态：蓝色轮廓 */
    .img-annotation.ia-selected {
      outline: 1.5px solid var(--blue);
      box-shadow: 0 0 0 2px rgba(59,110,248,0.12);
    }
    /* 删除/旋转按钮显示（样式复用 ta- 的共用规则）*/
    .img-annotation.ia-selected .ia-del-btn { display: flex; }
    .img-annotation.ia-selected .ia-rot-btn { display: flex; }
    /* 8向缩放手柄 */
    .ia-handle {
      position: absolute; width: 10px; height: 10px;
      background: #fff; border: 1.5px solid var(--blue);
      border-radius: 2px; z-index: 20; display: none;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    .img-annotation.ia-selected .ia-handle { display: block; }
    .ia-handle[data-dir="nw"] { top:-5px; left:-5px; cursor:nw-resize; }
    .ia-handle[data-dir="n"]  { top:-5px; left:calc(50% - 5px); cursor:n-resize; }
    .ia-handle[data-dir="ne"] { top:-5px; right:-5px; cursor:ne-resize; }
    .ia-handle[data-dir="e"]  { top:calc(50% - 5px); right:-5px; cursor:e-resize; }
    .ia-handle[data-dir="se"] { bottom:-5px; right:-5px; cursor:se-resize; }
    .ia-handle[data-dir="s"]  { bottom:-5px; left:calc(50% - 5px); cursor:s-resize; }
    .ia-handle[data-dir="sw"] { bottom:-5px; left:-5px; cursor:sw-resize; }
    .ia-handle[data-dir="w"]  { top:calc(50% - 5px); left:-5px; cursor:w-resize; }

    /* 上传区 */
    .sign-upload-area {
      border: 1.5px dashed var(--border); border-radius: 8px;
      padding: 28px 16px; display: flex; flex-direction: column;
      align-items: center; cursor: pointer;
      transition: border-color 0.12s, background 0.12s;
    }
    .sign-upload-area:hover { border-color: var(--blue); background: var(--blue-light); }

    /* 签名绘制弹窗 */
    .sign-draw-overlay {
      display: none; position: fixed; inset: 0;
      background: rgba(0,0,0,0.4); backdrop-filter: blur(3px);
      z-index: 100000; align-items: center; justify-content: center;
    }
    .sign-draw-overlay.open { display: flex; }
    .sign-draw-modal {
      background: #fff; border-radius: 16px; padding: 24px;
      width: 500px; max-width: calc(100vw - 32px);
      box-shadow: 0 16px 48px rgba(0,0,0,0.2);
    }
    .sign-draw-title {
      font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 700;
      color: var(--text); margin-bottom: 4px;
    }
    .sign-draw-tabs {
      display: flex; gap: 4px; margin-bottom: 16px; margin-top: 12px;
      border-bottom: 1px solid var(--border);
    }
    .sign-draw-tab {
      padding: 8px 16px; border: none; background: none; cursor: pointer;
      font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--muted);
      border-bottom: 2px solid transparent; margin-bottom: -1px;
      transition: color 0.12s;
    }
    .sign-draw-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
    .sign-draw-canvas-wrap {
      border: 1.5px solid var(--border); border-radius: 8px;
      overflow: hidden; margin-bottom: 12px; background: #fafafa;
      position: relative;
    }
    #signDrawCanvas { display: block; cursor: crosshair; touch-action: none; }
    .sign-draw-placeholder {
      position: absolute; inset: 0; display: flex; align-items: center;
      justify-content: center; pointer-events: none;
      font-size: 13px; color: #d1d5db;
    }
    .sign-type-input {
      width: 100%; padding: 10px 14px; border: 1.5px solid var(--border);
      border-radius: 8px; font-size: 28px; font-family: 'Caveat', cursive;
      color: var(--text); outline: none; margin-bottom: 12px;
      transition: border-color 0.15s;
    }
    .sign-type-input:focus { border-color: var(--blue); }
    .sign-draw-actions {
      display: flex; justify-content: space-between; align-items: center;
    }
    .sign-draw-clear {
      background: none; border: none; color: var(--muted); cursor: pointer;
      font-size: 13px; padding: 6px 10px; border-radius: 6px;
      transition: background 0.12s, color 0.12s;
    }
    .sign-draw-clear:hover { background: #f3f4f6; color: var(--text); }
    .sign-draw-btns { display: flex; gap: 8px; }
    .sign-draw-cancel {
      padding: 8px 18px; border: 1.5px solid var(--border); border-radius: 8px;
      background: none; cursor: pointer; font-size: 14px; color: var(--muted);
      transition: border-color 0.12s;
    }
    .sign-draw-cancel:hover { border-color: var(--text); color: var(--text); }
    .sign-draw-save {
      padding: 8px 20px; background: var(--blue); color: #fff; border: none;
      border-radius: 8px; cursor: pointer; font-family: 'Sora', sans-serif;
      font-size: 14px; font-weight: 600;
      transition: background 0.12s;
    }
    .sign-draw-save:hover { background: var(--blue-dark); }