.dropzone { border:1.5px dashed var(--hairline-strong); border-radius:var(--radius); padding:clamp(2.2rem,6vh,3.5rem) 1.5rem; text-align:center; color:var(--ink-2); cursor:pointer; transition:border-color .2s, background-color .2s; margin:2rem 0 1.2rem; max-width:var(--measure); }
.dropzone:hover, .dropzone.over { border-color:var(--ink-2); background:var(--bg-2); }
.dropzone:focus-visible { outline:2px solid var(--focus); outline-offset:3px; border-color:var(--ink-2); }
.dropzone strong { display:block; font-family:var(--font-display); font-size:1.25rem; font-weight:400; color:var(--ink); margin-bottom:.4rem; }
.controls { display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem 1.6rem; margin:0 0 1.4rem; max-width:var(--measure); }
.controls label { font-size:.9rem; color:var(--ink-2); display:flex; align-items:center; gap:.5rem; }
.controls select, .controls input[type=number], .controls input[type=text] { font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--hairline-strong); border-radius:6px; padding:.35rem .55rem; }
.controls input[type=text] { font-family:var(--font-mono); font-size:.85rem; }
.controls input[type=range] { accent-color:var(--ink); }
.controls input:disabled, .controls select:disabled { opacity:.45; }
.controls output { font-family:var(--font-mono); font-size:.8rem; color:var(--muted); min-width:3ch; }
button.primary { font:inherit; font-weight:600; color:var(--bg); background:var(--ink); border:1px solid var(--ink); border-radius:var(--radius); padding:.65rem 1.4rem; cursor:pointer; transition:opacity .2s; }
button.primary:disabled { opacity:.45; cursor:default; }
button.ghost { font:inherit; font-size:.85rem; color:var(--ink-2); background:none; border:none; cursor:pointer; text-decoration:underline; text-underline-offset:2px; padding:0; margin:0 0 2rem; }
.filelist { max-width:var(--measure); margin:1.4rem 0 1rem; display:grid; gap:.7rem; }
.filecard { display:flex; align-items:center; gap:1rem; padding:.7rem; background:var(--card); border:1px solid var(--hairline); border-radius:var(--radius); }
.filecard.failed { border-color:rgba(200,60,40,.45); }
.filecard .thumb { flex:0 0 auto; width:72px; height:72px; border-radius:6px; overflow:hidden; background:var(--bg-2); display:flex; align-items:center; justify-content:center; }
.filecard .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.thumbbadge { font-family:var(--font-mono); font-size:.62rem; font-weight:600; letter-spacing:.06em; color:var(--muted); }
.filecard .finfo { min-width:0; flex:1; }
.filecard .fname { color:var(--ink); font-weight:500; overflow-wrap:anywhere; }
.fmeta { font-family:var(--font-mono); font-size:.76rem; color:var(--muted); letter-spacing:.02em; }
.fnote { font-size:.82rem; color:var(--ink-2); margin-top:.25rem; }
.fnote.warn { color:#C0392B; }
@media (prefers-color-scheme: dark) { .fnote.warn { color:#E88377; } }
.filecard .fout { flex:0 0 auto; text-align:right; }
.filecard .fout .stat { font-size:.85rem; color:var(--muted); }
.filecard .fout .stat.err { color:#C0392B; max-width:22ch; display:inline-block; }
@media (prefers-color-scheme: dark) { .filecard .fout .stat.err { color:#E88377; } }
.filecard .fout a.dl { display:inline-block; font-weight:600; text-decoration:none; color:var(--link); }
.filecard .fout a.dl:hover { text-decoration:underline; }
.filecard .fout a.dl .fmeta { display:block; margin-top:.15rem; color:var(--muted); font-weight:400; }
.rowdel { flex:0 0 auto; background:none; border:none; color:var(--muted); font-size:.9rem; cursor:pointer; padding:.3rem .4rem; border-radius:4px; line-height:1; }
.rowdel:hover { color:var(--ink); }
.toolnote { font-size:.9rem; color:var(--muted); max-width:var(--measure); }
.textin { display:block; width:100%; max-width:var(--measure); margin:1.6rem 0 1.2rem; padding:1rem 1.1rem;
  font:inherit; line-height:1.6; color:var(--ink); background:var(--card);
  border:1px solid var(--hairline-strong); border-radius:var(--radius); resize:vertical; }
.textin:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px;
  background:var(--hairline); border:1px solid var(--hairline); border-radius:var(--radius);
  overflow:hidden; max-width:var(--measure); margin:1.2rem 0; }
.statcell { background:var(--card); padding:1rem 1.1rem; }
.statlabel { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.35rem; }
.statvalue { font-family:var(--font-mono); font-size:1.35rem; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--ink); }
.stathint { font-size:.72rem; color:var(--muted); margin-top:.25rem; }
.toolbar { font-size:.85rem; color:var(--muted); max-width:var(--measure); }
.toolbar .ghost { margin:0; }
.textout { font-family:var(--font-mono); font-size:.84rem; background:var(--bg-2); }
.outlabel { display:block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:1.4rem; }
.errorbox { max-width:var(--measure); margin:1rem 0; padding:.9rem 1.1rem; border-radius:var(--radius);
  border:1px solid rgba(192,57,43,.45); background:rgba(192,57,43,.07); color:#C0392B; font-size:.92rem; }
@media (prefers-color-scheme: dark) { .errorbox { color:#E88377; border-color:rgba(232,131,119,.4); background:rgba(232,131,119,.08); } }
.errpointer { font-family:var(--font-mono); font-size:.8rem; margin-top:.6rem; white-space:pre; overflow-x:auto; color:var(--ink-2); }
@media (max-width:520px){ .filecard .thumb{width:56px;height:56px} }
.twoup { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; max-width:var(--measure); }
.twoup .textin { margin:.4rem 0 0; }
.diffout { max-width:var(--measure); margin:1.2rem 0; border:1px solid var(--hairline); border-radius:var(--radius); overflow:auto; background:var(--card); }
.drow { display:grid; grid-template-columns:3.5ch 1fr 3.5ch 1fr; font-family:var(--font-mono); font-size:.8rem; line-height:1.55; }
.drow .dnum { color:var(--muted); text-align:right; padding-right:.6rem; user-select:none; opacity:.7; }
.drow .dtext { white-space:pre-wrap; overflow-wrap:anywhere; padding-right:.8rem; }
.drow.equal { color:var(--ink-2); }
.drow.change .dtext:nth-of-type(1), .drow.delete .dtext:nth-of-type(1) { background:rgba(192,57,43,.12); color:#C0392B; }
.drow.change .dtext:nth-of-type(2), .drow.insert .dtext:nth-of-type(2) { background:rgba(26,140,90,.12); color:#1A8C5A; }
@media (prefers-color-scheme: dark) {
  .drow.change .dtext:nth-of-type(1), .drow.delete .dtext:nth-of-type(1) { background:rgba(232,131,119,.12); color:#E88377; }
  .drow.change .dtext:nth-of-type(2), .drow.insert .dtext:nth-of-type(2) { background:rgba(94,206,152,.12); color:#5ECE98; }
}
.resultbox { max-width:var(--measure); margin:1.2rem 0 2rem; padding:1.1rem 1.3rem;
  background:var(--card); border:1px solid var(--hairline-strong); border-radius:var(--radius);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1rem; }
.resultbox a.dl { font-weight:600; text-decoration:none; color:var(--link); font-size:1.02rem; }
.resultbox a.dl:hover { text-decoration:underline; }