/* PDF 页面排序（/tools/pdf_reorder）样式
   约定：class 前缀 pr-；配色沿用站点主题变量，自动适配深/浅色。
   注意：本站多处用 display:flex 声明容器，凡用 hidden 属性控制显隐的元素
         都必须补 [hidden]{display:none!important} 兜底，否则 hidden 不生效。 */

.pr {
    padding: 22px 24px 56px;
    box-sizing: border-box;
    color: var(--text-primary, #111827);
}

/* ---------- 头部 ---------- */
.pr-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pr-hero-ico {
    flex: 0 0 52px; width: 52px; height: 52px; border-radius: 15px;
    display: flex; align-items: center; justify-content: center; font-size: 26px;
    background: linear-gradient(135deg, color-mix(in srgb, #dc2626 16%, transparent), color-mix(in srgb, #dc2626 5%, transparent));
    border: 1px solid color-mix(in srgb, #dc2626 24%, transparent);
}
.pr-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: .2px; }
.pr-sub { margin: 5px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary, #6b7280); }

/* ---------- 提示条 ---------- */
.pr-note {
    margin: 0 0 14px; padding: 9px 13px; border-radius: 10px;
    font-size: 13px; line-height: 1.5;
    background: color-mix(in srgb, var(--accent, #136ce9) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, #136ce9) 26%, transparent);
}
.pr-note.is-err {
    background: color-mix(in srgb, #dc2626 10%, transparent);
    border-color: color-mix(in srgb, #dc2626 32%, transparent); color: #b91c1c;
}
.pr-note.is-warn {
    background: color-mix(in srgb, #f59e0b 12%, transparent);
    border-color: color-mix(in srgb, #f59e0b 34%, transparent); color: #b45309;
}
.pr-note.is-ok {
    background: color-mix(in srgb, #16a34a 10%, transparent);
    border-color: color-mix(in srgb, #16a34a 30%, transparent); color: #15803d;
}
.pr-note[hidden] { display: none !important; }

/* ---------- 布局 ---------- */
.pr-app { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.pr-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }
.pr-main { min-width: 0; display: flex; flex-direction: column; }

.pr-card {
    padding: 14px 15px; box-sizing: border-box;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
}
.pr-block + .pr-block { margin-top: 14px; }

/* ---------- 上传 ---------- */
.pr-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 26px 16px; text-align: center; cursor: pointer;
    border: 2px dashed var(--border-color, #e5e7eb); border-radius: 14px;
    transition: border-color .15s, background .15s;
}
.pr-drop:hover { border-color: color-mix(in srgb, var(--accent, #136ce9) 45%, transparent); }
.pr-drop.is-over {
    border-color: var(--accent, #136ce9);
    background: color-mix(in srgb, var(--accent, #136ce9) 6%, transparent);
}
.pr-drop-ico { font-size: 34px; line-height: 1; }
.pr-drop-t { margin: 4px 0 0; font-size: 15px; font-weight: 600; }
.pr-drop-s { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary, #6b7280); }
.pr-drop .pr-btn-go { margin-top: 10px; flex: 0 0 auto; }
.pr-drop[hidden], .pr-file[hidden], .pr-card[hidden], .pr-selbar[hidden],
.pr-empty[hidden], .pr-grid[hidden], .pr-spin[hidden] { display: none !important; }

/* ---------- 文件卡片 ---------- */
.pr-file-head { display: flex; align-items: center; gap: 10px; }
.pr-file-ico {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    background: color-mix(in srgb, #dc2626 12%, transparent);
}
.pr-file-info { flex: 1 1 auto; min-width: 0; }
.pr-file-name {
    font-size: 13.5px; font-weight: 700; word-break: break-all;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pr-file-meta { font-size: 11.5px; color: var(--text-secondary, #6b7280); font-variant-numeric: tabular-nums; margin-top: 2px; }
.pr-icon-btn {
    flex: 0 0 auto; width: 30px; height: 30px; padding: 0; cursor: pointer; font-size: 14px;
    border-radius: 8px; border: 1px solid var(--border-color, #e5e7eb);
    background: transparent; color: var(--text-secondary, #6b7280);
}
.pr-icon-btn:hover { color: #dc2626; border-color: #dc2626; }
.pr-btn-line { margin-top: 10px; width: 100%; justify-content: center; }

/* ---------- 表单 ---------- */
.pr-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary, #6b7280); margin-bottom: 6px; }
.pr-input {
    width: 100%; box-sizing: border-box; height: 34px; padding: 0 10px;
    font-size: 14px; color: var(--text-primary, #111827);
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e5e7eb); border-radius: 9px;
}
.pr-input:focus { outline: none; border-color: var(--accent, #136ce9); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #136ce9) 14%, transparent); }
.pr-order-row { display: flex; gap: 6px; }
.pr-order-row .pr-input { flex: 1 1 auto; min-width: 0; }
.pr-out-row { position: relative; }
.pr-out-row .pr-input { padding-right: 42px; }
.pr-suffix {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: 12.5px; color: var(--text-secondary, #6b7280); pointer-events: none;
}
.pr-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }

/* ---------- 按钮 ---------- */
.pr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    min-height: 34px; padding: 0 12px; cursor: pointer;
    font-size: 13px; font-weight: 600; font-family: inherit;
    color: var(--text-primary, #111827);
    background: var(--bg-secondary, #f3f4f6);
    border: 1px solid var(--border-color, #e5e7eb); border-radius: 9px;
    transition: border-color .15s, color .15s, background .15s;
}
.pr-btn:hover { border-color: var(--accent, #136ce9); color: var(--accent, #136ce9); }
.pr-btn:disabled { opacity: .5; cursor: not-allowed; }
.pr-btn:disabled:hover { border-color: var(--border-color, #e5e7eb); color: var(--text-primary, #111827); }
.pr-btn-xs { min-height: 28px; padding: 0 9px; font-size: 12px; border-radius: 8px; }
.pr-btn-icon { flex: 0 0 38px; padding: 0; font-size: 15px; }
.pr-btn-block { width: 100%; margin-top: 14px; min-height: 38px; font-size: 14px; }
.pr-btn-go { color: #fff; background: var(--accent, #136ce9); border-color: var(--accent, #136ce9); }
.pr-btn-go:hover { color: #fff; background: color-mix(in srgb, var(--accent, #136ce9) 86%, #000); border-color: color-mix(in srgb, var(--accent, #136ce9) 86%, #000); }
.pr-btn-go:disabled:hover { color: #fff; background: var(--accent, #136ce9); }
.pr-btn-danger:hover { border-color: #dc2626; color: #dc2626; }

/* ---------- 预览区 ---------- */
.pr-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; box-sizing: border-box;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px 14px 0 0; border-bottom: none;
}
.pr-bar-left { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pr-bar-title { margin: 0; font-size: 14.5px; font-weight: 700; }
.pr-bar-count { font-size: 12px; color: var(--text-secondary, #6b7280); font-variant-numeric: tabular-nums; }
.pr-bar-hint { font-size: 11.5px; color: var(--text-secondary, #6b7280); }
.pr-bar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-selbar {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px;
    background: color-mix(in srgb, var(--accent, #136ce9) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, #136ce9) 22%, transparent);
}
.pr-sel-count { font-size: 12px; font-weight: 700; color: var(--accent, #136ce9); white-space: nowrap; }

.pr-stage {
    flex: 1 1 auto; min-height: 420px; padding: 14px; box-sizing: border-box;
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 0 0 14px 14px;
}
.pr-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px;
}
.pr-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 360px; color: var(--text-secondary, #6b7280); }
.pr-empty-ico { font-size: 40px; opacity: .5; }
.pr-empty p { margin: 0; font-size: 14px; }

/* ---------- 页面卡片 ---------- */
.pr-page {
    position: relative; user-select: none;
    padding: 6px 6px 4px; box-sizing: border-box;
    /* 长文档：视口外的磁贴跳过渲染（缩略图本身也是按需渲染），首屏与滚动都明显更快 */
    content-visibility: auto; contain-intrinsic-size: auto 190px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 11px;
    transition: border-color .15s, box-shadow .15s, opacity .15s;
}
.pr-page:hover { border-color: color-mix(in srgb, var(--accent, #136ce9) 40%, transparent); box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.pr-page.is-sel { border-color: var(--accent, #136ce9); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #136ce9) 22%, transparent); }
.pr-page.is-drag { opacity: .35; }
.pr-page.is-over { border-color: var(--accent, #136ce9); border-left-width: 3px; }
.pr-page.is-blank .pr-thumb { display: flex; align-items: center; justify-content: center; }

.pr-thumb {
    position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; cursor: pointer;
    background: #fff; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
}
.pr-thumb canvas { max-width: 100%; max-height: 100%; display: block; }
.pr-blank-txt { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-secondary, #6b7280); }
.pr-spin {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.pr-spin::after {
    content: ''; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--accent, #136ce9) 30%, transparent);
    border-top-color: var(--accent, #136ce9);
    animation: prSpin .7s linear infinite;
}
@keyframes prSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pr-spin::after { animation-duration: 1.6s; } }

.pr-check {
    position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1;
    color: var(--text-secondary, #6b7280);
    background: color-mix(in srgb, var(--bg-primary, #fff) 80%, transparent);
    border: 1px solid var(--border-color, #e5e7eb);
}
.pr-page.is-sel .pr-check { color: #fff; background: var(--accent, #136ce9); border-color: var(--accent, #136ce9); }

.pr-page-no {
    position: absolute; bottom: 4px; left: 0; right: 0; text-align: center;
    font-size: 10px; font-weight: 700; color: #fff; pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
.pr-rot-tag {
    position: absolute; top: 5px; right: 5px; padding: 1px 5px; border-radius: 5px;
    font-size: 10px; font-weight: 700; color: #fff;
    background: color-mix(in srgb, var(--accent, #136ce9) 82%, transparent);
}

/* 缩略图上的放大查看按钮：默认隐藏，悬停/聚焦时显示，点击打开灯箱（不触发选择） */
.pr-thumb-zoom {
    position: absolute; top: 5px; left: 5px; z-index: 3;
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
    display: none; align-items: center; justify-content: center; font-size: 13px; line-height: 1;
    color: #fff; background: rgba(17, 24, 39, .62);
    border: 1px solid rgba(255, 255, 255, .5); padding: 0;
}
.pr-thumb-zoom:hover { background: var(--accent, #136ce9); }
.pr-page:hover .pr-thumb-zoom,
.pr-page:focus-within .pr-thumb-zoom,
.pr-thumb-zoom:focus-visible { display: flex; }

.pr-pact {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 5px;
}
.pr-pact button {
    min-height: 24px; padding: 0; cursor: pointer; font-size: 12px; line-height: 1;
    border: none; border-radius: 6px; background: transparent; color: var(--text-secondary, #6b7280);
}
.pr-pact button:hover { background: var(--bg-secondary, #f3f4f6); color: var(--accent, #136ce9); }
.pr-pact button:disabled { opacity: .3; cursor: not-allowed; }
.pr-pact button:disabled:hover { background: transparent; color: var(--text-secondary, #6b7280); }
.pr-pact .pr-del:hover { color: #dc2626; }

.pr-add-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    aspect-ratio: 3 / 4; cursor: pointer; font-size: 11px; font-weight: 700;
    color: var(--text-secondary, #6b7280);
    border: 2px dashed var(--border-color, #e5e7eb); border-radius: 11px;
    background: transparent;
}
.pr-add-tile:hover { color: var(--accent, #136ce9); border-color: var(--accent, #136ce9); }
.pr-add-ico { font-size: 20px; }

/* ---------- 说明区 ---------- */
.pr-about {
    margin-top: 26px; padding: 18px 20px; box-sizing: border-box;
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e5e7eb); border-radius: 14px;
}
.pr-about-title { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.pr-about h3 { margin: 16px 0 8px; font-size: 14px; font-weight: 700; }
.pr-about-list { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.95; color: var(--text-secondary, #6b7280); }
.pr-about table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pr-about th, .pr-about td { padding: 7px 9px; text-align: left; border: 1px solid var(--border-color, #e5e7eb); }
.pr-about th { background: color-mix(in srgb, var(--text-primary, #111827) 5%, transparent); font-weight: 700; }
.pr-about td { color: var(--text-secondary, #6b7280); }
.pr-hint { margin: 12px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--text-secondary, #6b7280); }

/* ---------- 响应式：平板 ---------- */
@media (max-width: 1099px) {
    .pr { padding: 18px 18px 52px; }
    .pr-title { font-size: 23px; }
    .pr-app { grid-template-columns: 1fr; }
    .pr-side { position: static; order: 2; }
    .pr-main { order: 1; }
    .pr-stage { min-height: 300px; }
}
/* ---------- 响应式：手机 ---------- */
@media (max-width: 767px) {
    .pr { padding: 14px 12px 48px; }
    .pr-hero { gap: 11px; }
    .pr-hero-ico { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; font-size: 22px; }
    .pr-title { font-size: 20px; }
    .pr-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }
    .pr-stage { padding: 10px; min-height: 260px; }
    .pr-empty { min-height: 240px; }
    .pr-bar { padding: 9px 10px; }
    .pr-bar-hint { display: none; }
    .pr-input { font-size: 16px; }   /* 防 iOS 聚焦缩放 */
    .pr-about { padding: 14px 13px; }
}
@media (max-width: 420px) {
    .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pr-btn-row { grid-template-columns: 1fr; }
}

/* ---------- 页面预览放大 / 全屏 灯箱 ---------- */
.pr-zoom {
    position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center;
}
.pr-zoom[hidden] { display: none !important; }
.pr-zoom-mask { position: absolute; inset: 0; background: rgba(8, 12, 22, .82); }
.pr-zoom-box {
    position: relative; z-index: 1; display: flex; flex-direction: column; width: min(94vw, 1100px);
    height: min(92vh, 880px); background: var(--bg-primary, #fff); border-radius: 16px; overflow: hidden;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
}
.pr-zoom-bar {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px; flex: 0 0 auto;
    border-bottom: 1px solid var(--border-color, #e5e7eb); background: var(--bg-primary, #fff);
}
.pr-zoom-title { font-size: 14px; font-weight: 700; }
.pr-zoom-val {
    font-size: 12.5px; color: var(--text-secondary, #6b7280); font-variant-numeric: tabular-nums;
    min-width: 44px;
}
.pr-zoom-btns { margin-left: auto; display: flex; gap: 6px; }
.pr-zoom-btn {
    min-width: 32px; height: 32px; padding: 0 8px; cursor: pointer; font-size: 15px; line-height: 1;
    color: var(--text-primary, #111827); background: var(--bg-secondary, #f3f4f6);
    border: 1px solid var(--border-color, #e5e7eb); border-radius: 8px;
}
.pr-zoom-btn:hover { border-color: var(--accent, #136ce9); color: var(--accent, #136ce9); }
.pr-zoom-stage {
    flex: 1 1 auto; min-height: 0; position: relative; overflow: auto; padding: 16px;
    display: flex; align-items: center; justify-content: center;
    cursor: grab;
}
.pr-zoom-stage.is-pan { cursor: grabbing; }
.pr-zoom-stage canvas {
    display: block; max-width: none; border-radius: 4px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .35); background: #fff;
    transform-origin: top left;
}
.pr-zoom-hint {
    margin: 0; flex: 0 0 auto; padding: 8px 14px; font-size: 12px; line-height: 1.5;
    color: var(--text-secondary, #6b7280); border-top: 1px solid var(--border-color, #e5e7eb);
}
/* 灯箱打开时锁住页面滚动 */
body.pr-zoom-open { overflow: hidden; }
@media (max-width: 420px) {
    .pr-zoom-box { width: 100vw; height: 100vh; border-radius: 0; }
    .pr-zoom-btns .pr-zoom-btn { min-width: 30px; }
}