:root { color-scheme: light dark; --fg:#1a1a1a; --bg:#fafafa; --acc:#5b5bd6; --mut:#777; }
@media (prefers-color-scheme: dark) { :root { --fg:#eee; --bg:#141416; --mut:#999; } }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui,sans-serif; color:var(--fg); background:var(--bg); }
main { max-width:640px; margin:0 auto; padding:48px 20px; }
h1 { font-size:2.2rem; margin:0; letter-spacing:-.02em; }
.sub { color:var(--mut); margin:.25rem 0 1.5rem; }
#drop { display:flex; align-items:center; justify-content:center; min-height:160px; border:2px dashed var(--mut); border-radius:14px; cursor:pointer; text-align:center; padding:20px; transition:.15s; }
#drop:hover, #drop.over, #drop:focus-visible { border-color:var(--acc); background:color-mix(in srgb, var(--acc) 8%, transparent); outline:none; }
.opts { display:flex; gap:20px; margin:18px 0; }
.opts select { margin-left:6px; font:inherit; padding:4px 8px; }
ul { list-style:none; padding:0; margin:0; }
li { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid color-mix(in srgb, var(--mut) 30%, transparent); }
li .name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
li .meta { color:var(--mut); font-size:.85rem; }
li img { width:36px; height:50px; object-fit:cover; background:#fff; border-radius:3px; }
a.dl { background:var(--acc); color:#fff; padding:6px 14px; border-radius:8px; text-decoration:none; }
#error { color:#d33; }
.foot { color:var(--mut); font-size:.8rem; margin-top:32px; }