:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
body { margin: 0; }
body:not(.ready) main { visibility: hidden; }
main { max-width: 42rem; margin: 2rem auto; padding: 0 1rem; }
header { display: flex; gap: 1rem; align-items: baseline; }
header h1 { flex: 1; margin: 0; }
#drop { margin: 1.5rem 0; padding: 3rem 1rem; border: 2px dashed #888; border-radius: .75rem; text-align: center; cursor: pointer; }
#drop.over { border-color: #3b82f6; background: #3b82f620; }
#list { list-style: none; padding: 0; }
#list li { margin-bottom: 1rem; }
.row { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
progress { width: 100%; height: .6rem; }
.err { color: #dc2626; }
.ok { color: #16a34a; }
h2 { font-size: 1.1rem; }
#files { width: 100%; border-collapse: collapse; font-size: .9rem; }
#files td { padding: .35rem .5rem; border-bottom: 1px solid #8884; word-break: break-all; }
#files td.num { white-space: nowrap; text-align: right; }
#files td:last-child { white-space: nowrap; text-align: right; }
#files button { margin-left: .4rem; }
#share { margin: 1rem 0; padding: .75rem; border: 1px solid #8886; border-radius: .5rem; font-size: .9rem; }
.sharerow { display: flex; gap: .4rem; margin-top: .4rem; }
#share-link { flex: 1; min-width: 0; font-family: monospace; }