:root { color: #182033; background: #f7f8fc; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
.tool { margin: 0 auto; max-width: 680px; padding: 56px 20px; }
.back { color: #66718a; font-size: 14px; text-decoration: none; }
.eyebrow { color: #5268df; font-size: 12px; font-weight: 800; letter-spacing: .15em; margin: 56px 0 12px; }
h1 { font-size: clamp(40px, 9vw, 72px); letter-spacing: -.07em; line-height: .98; margin: 0; }
h1 span { color: #5268df; }
.intro { color: #69758c; font-size: 17px; line-height: 1.6; max-width: 540px; }
.drop-zone { align-items: center; background: #fff; border: 2px dashed #ccd4e2; border-radius: 18px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; justify-content: center; min-height: 260px; padding: 30px; text-align: center; transition: .2s; }
.drop-zone.active, .drop-zone:hover { background: #f2f5ff; border-color: #5268df; }
.drop-zone input { display: none; }
.drop-icon { color: #5268df; font-size: 42px; line-height: 1; }
.drop-zone small { color: #8791a5; }
.selected { color: #4054bf; font-size: 14px; font-weight: 700; margin-top: 8px; overflow-wrap: anywhere; }
button { background: #5268df; border: 0; border-radius: 10px; color: #fff; cursor: pointer; font: inherit; font-weight: 700; margin-top: 16px; padding: 14px 20px; width: 100%; }
button:disabled { cursor: not-allowed; opacity: .5; }
.progress, .result { background: #fff; border-radius: 10px; margin-top: 16px; padding: 14px; }
.progress-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
progress { appearance: none; height: 10px; overflow: hidden; width: 100%; }
progress::-webkit-progress-bar { background: #e9edf6; border-radius: 99px; }
progress::-webkit-progress-value { background: #5268df; border-radius: 99px; transition: width .2s; }
progress::-moz-progress-bar { background: #5268df; border-radius: 99px; }
progress.processing { animation: pulse 1.2s ease-in-out infinite; }
.result { align-items: center; color: #218650; display: flex; font-weight: 700; gap: 12px; }
.download-link { background: #5268df; border-radius: 8px; color: #fff; font-size: 14px; margin-left: auto; padding: 9px 12px; text-decoration: none; white-space: nowrap; }
.spinner { border: 3px solid #dbe1f3; border-radius: 50%; border-top-color: #5268df; height: 18px; width: 18px; animation: spin .8s linear infinite; }
.error { color: #be3e49; min-height: 24px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .45; } }
@media (max-width: 600px) { .result { align-items: stretch; flex-direction: column; } .download-link { margin-left: 0; text-align: center; } }