:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif; color: #272421; background: #eeeae4; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 980px; }
button, .import-button { font: inherit; } button { cursor: pointer; }
.app-header { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:18px 24px; border-bottom:1px solid #d9d2c8; background:#faf8f5; }
h1,h2,p { margin:0; } h1 { font-size:20px; font-weight:650; } .app-header p { margin-top:4px; color:#716b63; font-size:13px; }
.count-notice { padding:8px 12px; border:1px solid #d3cbc1; border-radius:6px; background:#f5f2ed; color:#625b53; font-size:13px; white-space:nowrap; }.count-notice.is-different { border-color:#d6b581; background:#fff7eb; color:#77542a; }
.workspace { display:grid; grid-template-columns:minmax(210px,270px) minmax(560px,1fr) minmax(210px,270px); height:calc(100vh - 78px); min-height:620px; transition:grid-template-columns .18s ease; }
.workspace.left-collapsed { grid-template-columns:42px minmax(560px,1fr) minmax(210px,270px); }.workspace.right-collapsed { grid-template-columns:minmax(210px,270px) minmax(560px,1fr) 42px; }.workspace.left-collapsed.right-collapsed { grid-template-columns:42px minmax(560px,1fr) 42px; }
.file-panel { position:relative; display:flex; min-height:0; flex-direction:column; padding:16px; border-right:1px solid #d9d2c8; background:#f8f6f2; overflow:hidden; }.file-panel:last-child { border-right:0; border-left:1px solid #d9d2c8; }
.panel-collapse { position:absolute; z-index:2; top:12px; right:10px; width:26px; height:26px; padding:0; border:1px solid #cfc7bc; border-radius:5px; background:#fff; color:#4b6f8f; font-size:20px; line-height:20px; }.panel-collapse:hover { background:#e9f1f6; }.file-panel.is-collapsed { padding:0; }.file-panel.is-collapsed > :not(.panel-collapse) { display:none; }.file-panel.is-collapsed .panel-collapse { top:12px; right:7px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:36px; } h2 { font-size:16px; } h2 span { color:#8a8176; font-size:13px; font-weight:500; }
.sort-button,.view-controls button,.navigation button { padding:7px 10px; border:1px solid #cfc7bc; border-radius:5px; background:#fff; color:#3e3934; font-size:12px; }.sort-button:hover,.view-controls button:hover,.navigation button:hover:not(:disabled) { background:#f1ece5; } button:disabled { cursor:not-allowed; opacity:.45; }
input[type="file"] { display:none; }.import-button { display:block; margin:14px 0 7px; padding:10px; border-radius:6px; background:#4b6f8f; color:#fff; text-align:center; font-size:13px; font-weight:600; cursor:pointer; }.import-button:hover { background:#3d607e; }.list-help { color:#80786f; font-size:11px; line-height:1.45; }
.file-list { position:relative; display:flex; min-height:0; flex:1; flex-direction:column; gap:5px; overflow:auto; margin:13px 0 0; padding:0; list-style:none; }.file-item { display:grid; grid-template-columns:22px 18px 42px minmax(0,1fr); align-items:center; gap:6px; min-height:54px; padding:5px; border:1px solid transparent; border-radius:6px; background:#fff; cursor:grab; user-select:none; touch-action:none; transition:opacity .12s ease, transform .12s ease, box-shadow .12s ease; }.file-item:hover { border-color:#b8c6d1; }.file-item.current { border-color:#4b6f8f; background:#e9f1f6; box-shadow:inset 3px 0 #4b6f8f; }.file-item.is-dragging { opacity:.48; transform:scale(.985); border-color:#4b6f8f; box-shadow:0 3px 10px rgba(39,55,69,.18); cursor:grabbing; }.file-number { color:#847b71; font-size:12px; text-align:center; }.drag-handle { color:#82796e; font-size:17px; font-weight:700; line-height:1; letter-spacing:-3px; cursor:grab; }.file-item.is-dragging .drag-handle { cursor:grabbing; }.file-thumb { width:42px; height:42px; border-radius:3px; object-fit:cover; background:#e3ddd5; }.file-name { overflow:hidden; color:#39342f; font-size:12px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }.file-list:empty::after { content:"尚未导入图片"; padding:18px 0; color:#958c82; font-size:13px; text-align:center; }.drop-indicator { position:absolute; z-index:4; right:5px; left:5px; height:3px; border-radius:3px; background:#2f668f; box-shadow:0 0 0 1px rgba(255,255,255,.9); pointer-events:none; }
.compare-section { display:flex; min-width:0; flex-direction:column; padding:16px; background:#e8e4de; }.navigation { display:flex; align-items:center; justify-content:center; gap:18px; }.navigation button { min-width:98px; font-size:13px; }#position-label { min-width:72px; text-align:center; font-size:14px; }.view-controls { display:flex; align-items:center; justify-content:center; gap:8px; margin:12px 0; flex-wrap:wrap; }.view-controls span { color:#756d64; font-size:12px; }.link-status { padding:4px 7px; border-radius:4px; background:#e8ddd2; color:#6e5542; }.link-status.locked { background:#dcebe3; color:#286044; }.control-help { margin-left:2px; }
.default-link-toggle { display:inline-flex; align-items:center; gap:6px; color:#554d45; font-size:12px; white-space:nowrap; cursor:pointer; }.default-link-toggle input { position:absolute; width:1px; height:1px; opacity:0; }.toggle-track { position:relative; width:30px; height:18px; border-radius:9px; background:#aaa39a; transition:background .15s ease; }.toggle-track::after { position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; content:""; transition:transform .15s ease; }.default-link-toggle input:checked + .toggle-track { background:#4b6f8f; }.default-link-toggle input:checked + .toggle-track::after { transform:translateX(12px); }.default-link-toggle input:focus-visible + .toggle-track { outline:2px solid #234d72; outline-offset:2px; }
.compare-grid { display:grid; min-height:0; flex:1; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }.image-card { display:flex; min-width:0; flex-direction:column; border:1px solid #cfc7bc; border-radius:7px; overflow:hidden; background:#fff; }.image-name { min-height:37px; padding:10px 12px; overflow:hidden; border-bottom:1px solid #ded8d0; background:#faf9f7; color:#4a443e; font-size:12px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }.image-viewer { position:relative; min-height:0; flex:1; overflow:hidden; background:#272727; cursor:grab; user-select:none; }.image-viewer.dragging { cursor:grabbing; }.compare-image { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; transform-origin:center center; will-change:transform; }.empty-viewer { position:absolute; top:50%; right:0; left:0; margin:0; color:#bdb8b1; font-size:14px; text-align:center; transform:translateY(-50%); }
@media (max-width:1100px) { body { min-width:760px; }.workspace { grid-template-columns:190px minmax(420px,1fr) 190px; }.workspace.left-collapsed { grid-template-columns:42px minmax(420px,1fr) 190px; }.workspace.right-collapsed { grid-template-columns:190px minmax(420px,1fr) 42px; }.workspace.left-collapsed.right-collapsed { grid-template-columns:42px minmax(420px,1fr) 42px; }.compare-section { padding:10px; }.control-help { display:none; } }

/* 专注模式不只是收起面板：直接让中间画布占用整个视口。 */
body.focus-layout { min-width:720px; overflow:hidden; }
body.focus-layout .app-header { display:none; }
.workspace.focus-mode { grid-template-columns:0 minmax(0,1fr) 0 !important; height:100vh; min-height:0; }
.workspace.focus-mode .file-panel { min-width:0; padding:0; visibility:hidden; pointer-events:none; border:0; }
.workspace.focus-mode .compare-section { padding:0; }
.toolbar { display:flex; flex-direction:column; flex:none; }
.workspace.focus-mode .toolbar { display:flex; min-height:56px; padding:5px 8px; align-items:center; justify-content:center; gap:7px; border-bottom:1px solid #cfc7bc; background:#f5f2ed; }
.workspace.focus-mode .navigation { flex:none; gap:8px; }
.workspace.focus-mode .navigation button { min-width:78px; padding:5px 8px; }
.workspace.focus-mode .view-controls { flex:0 1 auto; justify-content:center; gap:5px; margin:0; }
.workspace.focus-mode .view-controls button { padding:5px 7px; white-space:nowrap; }
.workspace.focus-mode .control-help { display:none; }
.workspace.focus-mode .link-status { padding:3px 5px; }
.workspace.focus-mode .compare-grid { gap:1px; }
.workspace.focus-mode .image-card { border:0; border-radius:0; }
.workspace.focus-mode .image-name { min-height:27px; padding:6px 9px; font-size:11px; }
html:fullscreen, html:fullscreen body { width:100%; height:100%; }
html:fullscreen body.focus-layout .workspace { height:100vh; }
@media (min-width:1180px) { .workspace.focus-mode .toolbar { flex-direction:row; } }