:root {
  --bg: #f6f4ef; --surface: #fff; --text: #1d2330; --muted: #5d6576; --line: #e3e0d8;
  --accent: #1f5f8b; --accent-soft: #e7f0f7; --ok: #1d7a46; --err: #b3261e;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #12161f; --surface: #1a202c; --text: #e8eaef; --muted: #a3abbb; --line: #2b3342; --accent: #7cb7e0; --accent-soft: #1d2b3a; --ok: #6fcf97; --err: #f28b82; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; padding: 1.25rem 1rem 2rem; }
.card { max-width: 32rem; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem 1.25rem; }
.brand { margin: 0 0 .5rem; color: var(--accent); font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
h1 { font-size: 1.45rem; line-height: 1.2; margin: 0 0 .5rem; }
.lede { color: var(--muted); margin: 0 0 1.25rem; }
.drop { display: flex; align-items: center; gap: 1rem; padding: 1.1rem; border: 2px dashed var(--accent); border-radius: 14px; background: var(--accent-soft); cursor: pointer; }
.drop:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.drop-icon { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--accent); color: var(--surface); display: grid; place-items: center; }
.drop-icon svg { width: 26px; height: 26px; }
.drop-text { font-size: .95rem; }
.drop-text span { color: var(--muted); }
#files { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tips { color: var(--muted); font-size: .92rem; padding-left: 1.2rem; margin: 1rem 0 0; }
.list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; }
.list li { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--line); }
.list img { width: 100%; height: 100%; object-fit: cover; display: block; }
.list .badge { position: absolute; inset: auto 0 0 0; font-size: .72rem; padding: .15rem .35rem; background: rgba(0,0,0,.6); color: #fff; }
.list .done .badge { background: var(--ok); }
.list .fail .badge { background: var(--err); }
.button { width: 100%; margin-top: 1.25rem; padding: .9rem 1rem; border: 0; border-radius: 999px; background: var(--accent); color: var(--surface); font: inherit; font-weight: 700; cursor: pointer; }
.button[disabled] { opacity: .6; cursor: progress; }
.status { min-height: 1.5rem; margin: 1rem 0 0; font-weight: 600; }
.status.ok { color: var(--ok); } .status.err { color: var(--err); }
.foot { max-width: 32rem; margin: 1rem auto 0; text-align: center; color: var(--muted); font-size: .82rem; }