:root { font-family: system-ui, sans-serif; color: #eaf0ff; background: #101626; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top right, #263b55, transparent 34rem), #101626; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .55; }
.shell { max-width: 780px; margin: 0 auto; padding: 24px 16px 72px; }
.header, .section-heading, .file-row, .actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.header { margin-bottom: 28px; }
.eyebrow { color: #8fc7f5; text-transform: uppercase; font-size: .76rem; letter-spacing: .13em; font-weight: 750; margin: 0 0 8px; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(2.4rem, 8vw, 3.6rem); letter-spacing: -.05em; margin-bottom: 0; }
h2 { font-size: 1.3rem; letter-spacing: -.02em; margin-bottom: 0; }
p { line-height: 1.5; }
.card { background: #1a2436; border: 1px solid #34445c; border-radius: 18px; padding: 24px; margin-bottom: 18px; box-shadow: 0 14px 40px #0002; }
.intro p { color: #c7d2e6; margin: 18px 0 24px; }
.badge { white-space: nowrap; color: #c8d9ec; background: #304056; border-radius: 999px; padding: 7px 10px; font-size: .8rem; }
.primary, .quiet, .danger, select { border-radius: 10px; padding: 11px 16px; border: 1px solid transparent; }
.primary { background: #8cd4ff; color: #102032; font-weight: 750; }
.primary:hover { background: #b6e5ff; }
.quiet, select { background: #2a3950; color: #eaf0ff; border-color: #4b5b73; }
.quiet:hover { background: #364b66; }
.danger { background: transparent; color: #ffc1c1; border-color: #8b4c55; }
.danger:hover { background: #60333b; }
.file-picker { display: flex; flex-direction: column; gap: 5px; padding: 26px; margin: 22px 0 16px; border: 2px dashed #52708c; border-radius: 14px; cursor: pointer; background: #202e43; }
.file-picker:hover { border-color: #8cd4ff; }
.file-picker span, .hint, .metadata { color: #aebed3; font-size: .9rem; }
#file-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
#file-input:focus-visible + button, button:focus-visible, select:focus-visible, .file-picker:focus-within { outline: 3px solid #b6e5ff; outline-offset: 3px; }
#progress-area { margin-top: 18px; }
progress { width: 100%; height: 14px; accent-color: #8cd4ff; }
#progress-label { color: #c7d2e6; margin: 8px 0 0; }
.hint { margin: 16px 0; }
.files { display: grid; gap: 12px; }
.file-row { border: 1px solid #34445c; border-radius: 12px; padding: 14px; flex-wrap: wrap; }
.file-info { min-width: 0; }
.file-info strong { display: block; overflow-wrap: anywhere; }
.metadata { margin: 5px 0 0; }
.actions { flex-wrap: wrap; justify-content: flex-start; }
#message { min-height: 24px; color: #c9e7ff; }
#message.error { color: #ffb5b5; }
@media (max-width: 560px) { .card { padding: 18px; } .section-heading { align-items: flex-start; } .badge { font-size: .72rem; } .file-row { align-items: flex-start; } .actions { width: 100%; } .actions select, .actions button { flex: 1; } }