/* ===========================================================
   发票排版工具 — 专属样式（工作台布局 / 裁剪 / 预览）
   =========================================================== */

.app-shell{max-width:var(--tool-maxw);margin-inline:auto;padding:18px 20px 60px;}

/* 顶部工作条 */
.app-topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0 16px;}
.app-topbar .title{font-size:1.2rem;font-weight:800;display:flex;align-items:center;gap:10px;margin:0;}
.app-topbar .title .logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--accent));display:grid;place-items:center;color:var(--on-brand);font-size:16px;}
.app-topbar .actions{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}

/* 主工作区：左列（清单+设置） / 中列（预览） */
.workbench{display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start;}
@media (max-width:1000px){.workbench{grid-template-columns:1fr;}}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);}
.panel-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700;}
.panel-head .sub{font-weight:500;color:var(--muted);font-size:.82rem;margin-left:auto;}
.panel-body{padding:16px;}

/* 上传区 */
.dropzone{
  border:2px dashed var(--line-2);border-radius:14px;background:var(--surface-2);
  padding:26px 18px;text-align:center;cursor:pointer;transition:.16s;color:var(--muted);
}
.dropzone:hover,.dropzone.drag{border-color:var(--brand);background:var(--brand-050);color:var(--brand);}
.dropzone .dz-ic{width:52px;height:52px;border-radius:14px;background:var(--surface);color:var(--brand);display:grid;place-items:center;margin:0 auto 10px;box-shadow:var(--shadow-sm);}
.dropzone .dz-ic svg{width:26px;height:26px;}
.dropzone strong{color:var(--ink);}
.dz-types{display:flex;gap:6px;justify-content:center;margin-top:12px;flex-wrap:wrap;}
.dz-types span{padding:3px 10px;border:1px solid var(--line-2);border-radius:999px;font-size:.72rem;background:var(--surface);color:var(--muted);font-weight:600;}

/* 文件清单 */
.item-list{display:flex;flex-direction:column;gap:10px;margin-top:4px;}
.item{
  display:grid;
  grid-template-columns:auto 52px 1fr auto;
  grid-template-areas:
    "pick thumb meta moves"
    "ops  ops   ops  ops";
  gap:10px;align-items:center;
  border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--surface);cursor:grab;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.item:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm);transform:translateY(-1px);}
.item:active{cursor:grabbing;}
.item.picked{border-color:var(--brand);background:var(--brand-050);box-shadow:0 0 0 2px rgba(37,99,235,.12);}
.item img,.item svg{-webkit-user-drag:none;-webkit-user-select:none;user-select:none;}
.item.dragging{opacity:.5;}
.item .pick{grid-area:pick;display:grid;place-items:center;width:20px;}
.item .pick input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;}
.item .thumb{grid-area:thumb;width:52px;height:64px;border-radius:7px;object-fit:contain;background:var(--surface-2);border:1px solid var(--line);flex:none;}
.item .meta{grid-area:meta;min-width:0;}
.item .moves{grid-area:moves;display:flex;gap:4px;flex:none;}
.item .ops{
  grid-area:ops;display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;
  border-top:1px dashed var(--line);padding-top:8px;
}
.item .meta .nm{font-size:.86rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.item .info-line{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.item .badge.type{font-size:.68rem;padding:1px 7px;}
.icon-btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;width:30px;height:30px;display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:.14s;}
@media (min-width:621px){.icon-btn{min-width:32px;min-height:32px;}}
.icon-btn:hover{color:var(--brand);border-color:var(--brand);background:var(--brand-050);}
.icon-btn:disabled{opacity:.3;cursor:default;background:var(--surface);}
.icon-btn.del:hover{color:var(--danger);border-color:var(--danger);background:var(--tint-red);}
.icon-btn svg{width:16px;height:16px;}

/* 清单搜索 + 批量操作 */
.list-tools{display:flex;gap:8px;align-items:center;margin-bottom:10px;}
.list-tools .input{flex:1;min-width:0;padding:8px 11px;font-size:.9rem;}
.list-tools .btn{flex:none;}
.batch-bar{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  background:var(--brand-050);border:1px solid var(--brand-100);border-radius:10px;
  padding:8px 10px;margin-bottom:10px;
}
.batch-bar .btn{flex:none;}
.batch-bar b{color:var(--brand-700);}
.btn.danger-soft{color:var(--danger);}
.btn.danger-soft:hover{color:var(--danger);background:var(--tint-red);border-color:var(--danger-100);box-shadow:none;}

/* 页码快捷导航 */
.page-nav{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px;background:var(--surface-2);border-bottom:1px solid var(--line);}
.nav-pill{min-width:30px;height:28px;padding:0 8px;border:1px solid var(--line-2);background:var(--surface);border-radius:8px;font-size:.8rem;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.14s;}
.nav-pill:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-050);}

.empty-state{text-align:center;color:var(--faint);padding:24px 10px;font-size:.9rem;}

/* 预览空状态插画（迷你 A4） */
.empty-illus{display:grid;place-items:center;padding-top:46px;}
.a4-mini{width:190px;aspect-ratio:1/1.32;background:var(--paper);border:1.5px dashed var(--line-2);border-radius:10px;box-shadow:var(--shadow-sm);display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:13px;}
.a4-mini i{border:1.5px dashed var(--line);border-radius:6px;background:repeating-linear-gradient(135deg,var(--paper),var(--paper) 7px,var(--surface-2) 7px,var(--surface-2) 14px);}

/* 设置组 */
.set-group{padding:14px 16px;border-bottom:1px solid var(--line);}
.set-group:last-child{border-bottom:none;}
.set-group>.gh{font-size:.8rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.set-row{margin-bottom:14px;}
.set-row:last-child{margin-bottom:0;}
.inline-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* 预览区 */
.preview-wrap{min-height:420px;}
.preview-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line);}
.page-zoom{display:flex;align-items:center;gap:8px;}
.pages-scroll{padding:22px;background:var(--surface-2);overflow:auto;max-height:calc(100vh - 220px);min-height:380px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;}
.pages-scroll::-webkit-scrollbar,.sum-list::-webkit-scrollbar{width:8px;height:8px;}
.pages-scroll::-webkit-scrollbar-thumb,.sum-list::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px;}
.pages-scroll::-webkit-scrollbar-thumb:hover,.sum-list::-webkit-scrollbar-thumb:hover{background:var(--faint);}
.pages-scroll::-webkit-scrollbar-track,.sum-list::-webkit-scrollbar-track{background:transparent;}
.pages-inner{display:flex;flex-direction:column;align-items:center;gap:22px;}
.page-fig{width:100%;display:flex;flex-direction:column;align-items:center;}
.page-card{background:var(--paper);box-shadow:var(--shadow);border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:box-shadow .16s, transform .16s;}
.page-fig:hover .page-card{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.page-card canvas{display:block;width:100%;height:auto;}
.page-label{font-size:.76rem;color:var(--muted);text-align:center;margin-top:6px;}

/* 步骤指示 */

/* 发票信息汇总 */
.sum-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 0 12px;border-bottom:1px dashed var(--line);margin-bottom:10px;}
.sum-date{width:auto;flex:0 1 138px;padding:6px 10px;font-size:.95rem;}
.sum-amt-in{width:86px;flex:none;padding:6px 10px;font-size:.95rem;}
.sum-list{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow:auto;}
.cat-sums{display:flex;gap:6px;flex-wrap:wrap;padding:2px 0 8px;}
.cat-sum{font-size:.72rem;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px 10px;}
.cat-sum b{color:var(--ok);}
.cat-sel{font-size:.72rem;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px 4px;margin-top:3px;max-width:120px;}
.cat-sel:focus{outline:none;border-color:var(--brand);}
.sum-month{font-size:.74rem;font-weight:700;color:var(--brand-700);background:var(--brand-050);border-radius:6px;padding:4px 8px;margin-top:6px;display:flex;justify-content:space-between;gap:8px;}
.sum-month span{font-weight:600;color:var(--ink-2);}
.sum-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px dashed var(--line);}
.sum-row:last-child{border-bottom:none;}
.sum-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;}
.sum-idx{font-size:.82rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sum-meta{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sum-amt{font-size:.9rem;font-weight:800;color:var(--ok);flex:none;}

/* 裁剪 & 编辑 modal 画布 */
.crop-stage{position:relative;background:var(--stage-bg);border-radius:12px;overflow:hidden;display:grid;place-items:center;min-height:220px;}
.crop-stage canvas{max-width:100%;touch-action:none;display:block;}
.crop-hint{font-size:.82rem;color:var(--muted);margin-top:10px;text-align:center;}
.crop-presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}

/* 水印文字预览输入 */
.wm-line{display:flex;gap:8px;align-items:center;}

/* 处理遮罩：需高于弹窗（900），否则弹窗内触发的加载态会被盖住 */
.app-loading{position:fixed;inset:0;background:var(--veil);display:grid;place-items:center;z-index:950;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.spinner{width:40px;height:40px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--brand);animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* 统计条 */
.stat-strip{display:flex;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--muted);padding:10px 16px;background:var(--surface-2);border-top:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);}
.stat-strip b{color:var(--ink);}

/* 移动端固定操作栏 */
.mobile-actions{position:fixed;left:12px;right:12px;bottom:12px;display:none;gap:10px;z-index:60;padding:10px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);}
.mobile-actions .btn{flex:1;margin:0;}
@media (max-width:620px){
  .mobile-actions{display:flex;}
}

/* 移动端调整：触控目标 ≥40px */
@media (max-width:620px){
  .app-shell{padding:12px 12px 110px;} /* 底部留出固定操作栏空间 */
  .icon-btn{width:40px;height:40px;}
  .btn{padding:12px 18px;}
  .btn.sm{padding:9px 14px;}
  .pages-scroll{max-height:none;}
  .input{font-size:16px;} /* 防 iOS 聚焦缩放 */
}

/* 直接 Ctrl+P 打印工具页时，只输出排好的页面 */
@media print{
  .site-header,.site-footer,.app-topbar,.preview-toolbar,.stat-strip,.page-label,.no-print,
  .modal-overlay,.app-loading,.skip-link,.toast-host,.mobile-actions,.page-nav{display:none!important;}
  .workbench{display:block!important;}
  .workbench > .col, .panel:not(.preview-wrap){display:none!important;}
  .app-shell{padding:0!important;max-width:none!important;}
  .preview-wrap{border:none;box-shadow:none;background:#fff;}
  .pages-scroll{max-height:none!important;overflow:visible!important;background:#fff;padding:0;}
  .page-card{box-shadow:none;border:none;}
  .page-fig{max-width:100%!important;break-inside:avoid;page-break-inside:avoid;}
}

/* ---------- 焦点可见性（键盘无障碍） ---------- */
.btn:focus-visible,.icon-btn:focus-visible,.nav-pill:focus-visible,.dropzone:focus-visible,
.lang-btn:focus-visible,.hamburger:focus-visible,.seg button:focus-visible,.modal-x:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;
}
.switch input:focus-visible + .track{outline:2px solid var(--brand);outline-offset:3px;}
input[type=range]:focus-visible{outline:2px solid var(--brand);outline-offset:4px;}