:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    margin: 0; padding: 2rem; display: flex; justify-content: center;
}
main { width: 100%; max-width: 780px; }
h1 { margin: 0 0 .25rem; font-size: 1.5rem; }
h2 { font-size: 1rem; margin: 0 0 .5rem; }
.opt { font-weight: 400; opacity: .6; }
.sub { margin: 0 0 1.5rem; opacity: .75; }
.zones { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 640px) { .zones { grid-template-columns: 1fr; } }
.dropzone {
    border: 2px dashed #888; border-radius: 12px; padding: 2rem 1rem;
    text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone:focus { border-color: #40c080; outline: none; }
.dropzone.drag { border-color: #40c080; background: rgba(64,192,128,.12); }
.hint { font-size: .85rem; opacity: .7; margin: .5rem 0 0; }
.file-list { list-style: none; padding: 0; margin: .75rem 0 0; }
.file-list li {
    padding: .4rem .6rem; border-radius: 6px; background: rgba(128,128,128,.12);
    margin-bottom: .35rem; font-size: .9rem; word-break: break-all;
}
.actionbar {
    position: sticky; top: 0; z-index: 2;
    background: Canvas;
    padding: .5rem 0 .9rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(128,128,128,.25);
}
.actions { display: flex; gap: .75rem; }
button {
    padding: .6rem 1.2rem; border: 0; border-radius: 8px; font-size: 1rem;
    cursor: pointer; background: #40c080; color: #062; font-weight: 600;
}
button.secondary { background: rgba(128,128,128,.25); color: inherit; font-weight: 400; }
button:disabled { opacity: .5; cursor: not-allowed; }
.status { margin: .5rem 0 0; white-space: pre-wrap; min-height: 1.2em; }