/* 现有设计体系上的交互精修 */
:root{--space:8px;--accent:#276552;--surface:#fff;--danger:#a23222;--sidebar:224px}html{scroll-padding-bottom:130px}body{padding-bottom:110px}.header{height:72px}.shell{grid-template-columns:var(--sidebar) minmax(0,1fr)}.sidebar{padding-top:30px;min-height:calc(100vh - 72px)}main{padding:28px 32px 0}.breadcrumb{margin-bottom:10px}h1{font-size:34px;letter-spacing:-1.1px}.intro{font-size:14px;max-width:65ch}.workspace-symbol{display:none}.steps{margin:20px 0;padding:12px 0;gap:24px}.steps>span{font-size:12px}.steps>span.current b{background:var(--green);color:white;border-radius:50%;width:24px;height:24px;display:grid;place-items:center}.work-grid{grid-template-columns:minmax(0,1fr) 326px;gap:22px}.panel-head{padding:10px 18px}.files-panel,.settings-panel{border-radius:12px}.drop-zone{padding:28px 12px;margin:18px;background:#f4f7f0}.drop-zone.compact{margin:12px 18px;padding:12px;display:flex;align-items:center;gap:12px;text-align:left;flex-wrap:wrap;border-style:solid;background:#f7f9f3}.drop-zone.compact svg{width:28px;height:28px}.drop-zone.compact h3{font-size:13px;margin:0}.drop-zone.compact>p,.drop-zone.compact>.sample-button{display:none}.drop-zone.compact>.button{margin-left:auto;padding:10px 16px;background:#e7efe3;color:#214e39}.empty-note{padding:20px 24px 28px}.queue{padding:0 18px}.file-row{padding:11px 0}.file-meta{display:flex;flex-wrap:wrap;gap:6px}.state-tag{font-size:11px;background:#f0f2ec;border-radius:4px;padding:2px 6px;line-height:1.4}.state-tag.done{background:#e5f0e3;color:#25543b}.state-tag.failed{background:#fae7df;color:var(--danger)}.queue-head{padding:10px 18px;font-size:12px}.queue-head span:first-child{font-weight:600}.preset-block{padding:16px 18px 0}.preset-label{font-size:12px;font-weight:600;margin:0 0 10px}.presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.preset{border:1px solid var(--line);border-radius:6px;min-height:44px;padding:8px 4px;font-size:12px;text-align:center}.preset.active{border-color:var(--green);background:#e9f0e4;color:#23523d;font-weight:600}.preset:hover:not(:disabled){background:#edf3e8}form{padding:18px 18px 0}fieldset{margin-bottom:18px}legend{margin-bottom:12px}.range-label{margin-top:14px}.naming{padding:0 0 16px}.naming summary{padding:12px 0}.naming label{margin-top:6px}.run-area{display:none}.field-error{color:var(--danger);font-size:12px;margin-top:6px;line-height:1.5}input[aria-invalid=true]{border-color:var(--danger)}.results{padding:18px;border-top:1px solid var(--line);margin-top:14px}.results-head{align-items:flex-start;gap:12px}.results .section-label{font-size:11px}.results h2{font-size:23px}.results p{font-size:12px}.outputs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.output-card{border-radius:7px}.output-body{padding:12px}.output-body strong{font-size:13px}.image-preview{height:146px}.output-body a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}.result-tools{display:flex;gap:12px;align-items:center}.status:empty{display:none}.actionbar{position:fixed;z-index:8;left:calc(var(--sidebar) + 32px);right:32px;bottom:16px;background:#fcfdf9;border:1px solid #cdd9cd;border-radius:10px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 6px 24px #17312b0d;max-width:1280px;margin:auto}.action-context{min-width:0;max-width:65%;flex:1}.action-context strong{font-size:13px;display:block}.action-context .status{margin:4px 0 0;font-size:12px;color:var(--muted);line-height:1.6}.action-context .status.error{color:var(--danger)}.action-buttons{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.action-buttons .button{min-height:44px;padding:11px 18px}.action-buttons #process{background:#edf2e8;color:#254e3b;border:1px solid #cdd9c7}.action-buttons #process.primary-action{background:var(--green);color:white;border-color:var(--green)}.action-buttons #zip{background:var(--green)}.batch-progress{width:100%;height:6px;display:block;accent-color:var(--green);margin-top:8px}.undo-toast{margin:12px 18px;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f2f5ec;border-radius:6px;font-size:12px}.preview-tabs{display:flex;gap:8px;margin:10px 0}.preview-tabs button{border:1px solid var(--line);border-radius:6px;padding:10px 16px;min-height:44px;font-size:13px}.preview-tabs button[aria-pressed=true]{background:#e7f0e2;border-color:var(--green)}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-width:0}.compare-grid figure{margin:0;min-width:0}.compare-grid figcaption{font-size:12px;line-height:1.6;margin:8px 0}.compare-grid img{width:100%;height:360px;object-fit:contain;background:repeating-conic-gradient(#eef0e9 0 25%,#fff 0 50%) 0/18px 18px}.compare-grid .single{grid-column:1/-1}#preview-dialog{width:min(940px,94vw)}#preview-dialog>img{display:none}.mobile-tool-label{display:none}.settings-panel .helper{font-size:12px}.details-inner{gap:6px}.compact .text-button{min-height:44px}.file-name{font-size:13px}.sidebar-note{margin-top:36px}.sidebar-foot{margin-top:30px}.dismiss-error{min-width:44px;min-height:44px}.queue-head .button{padding:6px 10px}.steps>span.done b{color:var(--green)}.settings-panel{scroll-margin-bottom:125px}footer{margin-top:20px}.mobile-tool-select{display:none}.files-panel>.status{margin:14px 18px}.settings-panel .range-ends{margin-bottom:14px}
@media(min-width:1440px){main{padding:28px 48px 0}.actionbar{left:calc(var(--sidebar) + 48px);right:48px}.drop-zone{padding:30px 20px}.work-grid{grid-template-columns:minmax(0,1fr) 350px}.outputs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1120px){:root{--sidebar:190px}.work-grid{grid-template-columns:minmax(0,1fr) 290px;gap:18px}main{padding-left:24px;padding-right:24px}.actionbar{left:calc(var(--sidebar) + 24px);right:24px}.presets{gap:4px}.preset{font-size:11px}.results-head{flex-direction:column}}
@media(max-width:900px){:root{--sidebar:0px}.shell{grid-template-columns:minmax(0,1fr)}.sidebar{min-height:0;padding:10px 24px}.actionbar{left:24px;right:24px}.work-grid{grid-template-columns:minmax(0,1fr) 290px}}
@media(max-width:640px){html{scroll-padding-bottom:180px}body{padding-bottom:155px}.header{height:64px}main{padding:20px 16px 0}h1{font-size:28px;letter-spacing:-.6px}.intro{font-size:14px}.sidebar{padding:12px 16px;display:flex;align-items:center;gap:12px}.sidebar #tools{display:none}.mobile-tool-select{display:block;flex:1;max-width:100%;font-size:14px;font-weight:600;background:#eaf1e4;min-width:0}.mobile-tool-label{display:block;font-size:12px;color:var(--muted);white-space:nowrap}.work-grid{grid-template-columns:minmax(0,1fr)}.steps{gap:12px;margin:16px 0}.steps>span:last-child{display:flex}.steps>span{font-size:11px;gap:6px}.steps b{font-size:11px}.steps>span.current b{width:21px;height:21px}.actionbar{left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));padding:12px;flex-wrap:wrap;gap:8px}.action-context{max-width:100%;width:100%;flex-basis:100%}.action-context strong{font-size:12px}.action-context .status{font-size:11px}.action-buttons{width:100%;flex-wrap:nowrap}.action-buttons .button{flex:1;padding:10px;font-size:12px}.action-buttons #process:has(+button:not([hidden])){flex:1}.compare-grid{grid-template-columns:1fr}.compare-grid img{height:230px}.compare-grid .single{grid-column:auto}.dialog-head{gap:12px}#preview-dialog{padding:14px}.outputs{grid-template-columns:repeat(2,minmax(0,1fr))}.results-head{flex-direction:row;align-items:center}.results h2{font-size:21px}.results{padding:14px}.result-tools{display:none}.preset{font-size:12px}.drop-zone.compact{gap:8px}.drop-zone.compact h3{font-size:12px}.drop-zone.compact .button{padding:10px 12px;font-size:12px}.drop-zone.compact svg{width:22px}.drop-zone.compact{margin:12px 14px}.settings-panel{scroll-margin-bottom:175px}.queue{padding:0 14px}.empty-note{padding:16px 18px 24px}form{padding-top:16px}.drop-zone{padding:24px 12px}.file-name{font-size:13px}.preview-tabs button{padding:9px 12px}}
@media(max-width:360px){.outputs{grid-template-columns:1fr}.steps{gap:8px}.steps>span{font-size:10px;gap:4px}.drop-zone.compact h3{display:none}}
@media(prefers-reduced-motion:no-preference){.output-card{animation:result-in .18s ease-out}@keyframes result-in{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}}
.queue-preview{padding:0;width:48px;height:48px;border-radius:5px;cursor:zoom-in}.queue-preview img{display:block}.mobile-tabs{display:none}@media(max-width:640px){.mobile-tabs{display:flex;gap:8px;margin:0 0 14px}.mobile-tabs button{flex:1;min-height:44px;border:1px solid var(--line);border-radius:6px;font-size:13px;background:white}.mobile-tabs button[aria-pressed=true]{background:#e7f0e2;border-color:var(--green);font-weight:600}body[data-panel=files] .settings-panel,body[data-panel=files] .results,body[data-panel=settings] .files-panel,body[data-panel=results] .settings-panel{display:none}body[data-panel=results] .files-panel>.panel-head,body[data-panel=results] .files-panel>.drop-zone,body[data-panel=results] .files-panel>.queue-head,body[data-panel=results] .files-panel>.queue,body[data-panel=results] .files-panel>.empty-note,body[data-panel=results] .files-panel>.undo-toast{display:none}body[data-panel=results] .results{border-top:0;margin-top:0}.actionbar .status{max-height:3.2em;overflow:auto}}