.tool-app .header { gap: 24px; }
.tool-switch { display:flex; gap:4px; padding:4px; background:#e7edf1; border-radius:9px; }
.tool-switch button { border:0; background:transparent; min-height:36px; padding:7px 18px; font-size:13px; color:var(--muted); }
.tool-switch button[aria-pressed=true] { color:var(--blue); background:white; box-shadow:0 1px 4px #263b4d12; }
.general-workbench { display:grid; grid-template-columns:minmax(0,1fr) 272px; gap:22px; padding-bottom:32px; align-items:start; }
.general-panel { min-width:0; background:white; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.general-title { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
.general-title h2 { font-size:16px; }
.general-title p { font-size:11px; color:var(--muted); margin-top:4px; }
.general-upload { position:relative; display:flex; min-height:clamp(340px,55vh,620px); flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:30px; text-align:center; cursor:pointer; }
.general-upload strong { font-size:22px; font-weight:550; }
.general-upload span { font-size:12px; color:var(--muted); }
.general-upload svg { height:48px; width:48px; color:var(--red); fill:none; stroke:currentColor; stroke-width:1.5; margin-bottom:12px; }
.general-upload.dragover { background:var(--accent-soft); outline:2px dashed var(--red); outline-offset:-8px; }
#general-file { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }
.general-upload:focus-within { outline:2px solid var(--red); outline-offset:-6px; }
.general-comparison { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); }
.general-comparison figure { margin:0; min-width:0; background:white; }
.general-comparison figcaption { padding:12px 18px; font-size:12px; color:var(--muted); }
.general-frame { display:flex; position:relative; width:100%; min-height:320px; height:clamp(320px,48vh,570px); padding:20px; align-items:center; justify-content:center; border:0; border-radius:0; background:var(--paper); overflow:hidden; }
.general-frame img { max-width:100%; max-height:100%; object-fit:contain; }
.general-frame:disabled { opacity:1; cursor:default; }
.general-frame .general-wait { font-size:13px; color:var(--muted); line-height:1.8; }
.general-actions { display:flex; padding:12px 18px; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); }
.general-actions>div { display:flex; align-items:center; gap:10px; }
.general-actions button { font-size:12px; }
.general-controls { padding:22px; border:1px solid var(--line); border-radius:12px; background:white; }
.general-controls h2 { font-size:14px; }
.general-controls .general-field { margin-top:24px; }
.general-field label { display:flex; justify-content:space-between; align-items:center; font-size:12px; margin-bottom:10px; }
.general-field output { font-variant-numeric:tabular-nums; background:var(--paper); padding:2px 6px; border-radius:4px; }
.general-field input { width:100%; accent-color:var(--red); margin:0; min-height:28px; }
.general-field p { font-size:11px; color:var(--muted); margin-top:5px; }
.general-controls .primary { min-width:0; width:100%; background:var(--red); border-color:var(--red); margin:22px 0 0; min-height:44px; }
.general-controls .primary:disabled { background:#edf0f2; border-color:transparent; color:var(--muted); opacity:1; }
.general-controls .primary:not(:disabled):hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.general-controls .general-reset { margin-top:12px; width:100%; background:white; border-color:var(--line); font-size:12px; }
.general-status { min-height:38px; margin-top:18px; font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.general-status.is-error { color:#a3313a; }
.general-status.is-error + .general-footnote { margin-top:16px; }
.general-footnote { font-size:11px; color:var(--muted); margin-top:14px; line-height:1.8; }
.general-progress { width:100%; height:5px; accent-color:var(--red); margin-top:14px; }
.general-backgrounds { display:flex; gap:6px; }
.general-backgrounds button { width:32px; height:32px; min-height:32px!important; padding:0; border:5px solid white; border-radius:50%; outline:1px solid var(--line); outline-offset:-3px; }
.general-backgrounds button[aria-pressed=true] { outline:2px solid var(--red); }
.general-result-bg-white { background:white!important; background-image:none!important; }
.general-result-bg-dark { background:#1e2b35!important; background-image:none!important; }
@media(max-width:1050px) { .general-workbench { grid-template-columns:minmax(0,1fr) 240px; gap:16px; }.general-controls{padding:18px}.general-frame{padding:12px;min-height:260px} }
@media(max-width:760px) { .tool-app .header{height:auto;min-height:72px;flex-wrap:wrap;padding-block:12px;gap:12px}.tool-switch button{padding:6px 12px;font-size:12px}.general-workbench{grid-template-columns:1fr;gap:16px}.general-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}.general-controls>h2,.general-status,.general-footnote,.general-progress{grid-column:1/-1}.general-controls .general-field{margin-top:4px}.general-controls .primary,.general-controls .general-reset{margin-top:0}.general-controls .general-status{margin-top:0;min-height:0}.general-footnote{margin-top:0}.general-frame{height:280px;min-height:180px;padding:10px}.general-title{padding:16px}.general-actions{padding:10px}.general-upload{min-height:330px}.general-upload strong{font-size:20px} }
@media(max-width:430px) { .general-frame{height:210px}.general-actions>div{gap:6px}.general-actions{gap:6px}.general-actions button{padding-inline:8px}.general-backgrounds button{width:30px;height:30px;padding:0} }