/* 页面里直接看文件（shared/file-viewer.js）：缩略图卡片 + 铺满这一页的看文件那层。
 * 2026-10-08 老板截图开票回传右栏：「想要能够看到那个票，能够预览，不用跳其他页面。」样子照给客户开票页那套（si.css 的 .si-th / .si-viewer）。 */
[hidden] { display: none !important; }
.sqf-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.sqf-card { display: grid; grid-template-rows: auto auto auto; gap: 2px; width: 104px; padding: 4px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface); cursor: zoom-in; text-align: left; font: inherit; color: var(--ink-2); }
.sqf-card:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.sqf-pic { display: block; width: 100%; height: 118px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-sunken); }
.sqf-pic img { width: 100%; height: 100%; object-fit: contain; object-position: top; display: block; background: var(--surface); }
.sqf-name { font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sqf-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sqf-card.warn { border-color: var(--warning-border); }
.sqf-card.warn .sqf-name { color: var(--warning-fg); }
.sqf-ico { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; font: 700 11px/1 var(--font-sans);
  color: var(--danger-fg); background: var(--danger-bg); }

.sqf-viewer { position: fixed; inset: 0; z-index: 40; background: var(--overlay); display: flex; align-items: stretch; justify-content: center; padding: 16px; }
.sqf-box { flex: 1; max-width: 1200px; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); overflow: hidden; }
.sqf-top { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.sqf-title { flex: 1 1 200px; min-width: 0; display: grid; }
.sqf-title b { font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sqf-title span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sqf-btn { white-space: nowrap; border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: var(--radius-sm);
  padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; }
.sqf-btn:hover { background: var(--surface-hover); }
.sqf-pos { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sqf-x { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.sqf-x:hover { color: var(--ink); }
.sqf-body { flex: 1; min-height: 0; background: var(--surface-sunken); overflow: auto; }
.sqf-pages { display: grid; justify-items: center; gap: 12px; padding: 12px; }
.sqf-pages img { display: block; width: 100%; max-width: 980px; height: auto; background: var(--surface); box-shadow: var(--shadow-2); cursor: zoom-in; }
.sqf-pages img.zoom { width: auto; max-width: none; cursor: zoom-out; }
.sqf-other { margin: auto; padding: 40px; font-size: 14px; color: var(--muted); }
.sqf-strip { display: flex; gap: 6px; padding: 6px 10px; border-top: 1px solid var(--border); overflow-x: auto; }
.sqf-strip:empty { display: none; }
.sqf-strip button { flex: none; display: grid; gap: 2px; width: 84px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; font: inherit; font-size: 11px; color: var(--ink-2); text-align: left; }
.sqf-strip button span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sqf-strip button .sqf-pic { height: 58px; }
.sqf-strip button.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
@media (max-width: 720px) {
  .sqf-viewer { padding: 0; }
  .sqf-box { border-radius: 0; }
  .sqf-card { width: 92px; }
  .sqf-pic { height: 100px; }
}
/* 还没有的那一格：虚框写「还没收到」，一眼看出缺哪样（不能点） */
.sqf-card.empty { cursor: default; border-style: dashed; background: var(--surface-sunken); }
.sqf-card.empty:hover { border-color: var(--border); box-shadow: none; }
.sqf-card.empty .sqf-name { color: var(--muted); }
.sqf-none { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 12px; color: var(--muted); }