:root { color-scheme: light; }
* { box-sizing: border-box; }
body { font-family: "Segoe UI", Arial, sans-serif; margin: 0; background: #f4f6f8; color: #1a1a1a; }
.container { max-width: 640px; margin: 48px auto; background: #fff; padding: 32px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
h1 { margin-top: 0; font-size: 1.6rem; }
.hint { color: #444; }
.dropzone { border: 2px dashed #1f4e78; border-radius: 10px; padding: 28px; text-align: center; margin: 20px 0; background: #fafcff; }
.dropzone.dragover { background: #e8f0f7; }
.file-label { display: inline-block; margin: 8px 0; padding: 10px 18px; background: #1f4e78; color: #fff; border-radius: 6px; cursor: pointer; }
.filename { color: #333; word-break: break-all; }
.primary { display: block; width: 100%; padding: 12px; font-size: 1rem; background: #1f4e78; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
.primary:disabled { background: #9db2c5; cursor: not-allowed; }
.spinner { text-align: center; margin-top: 16px; }
.loader { margin: 0 auto; width: 32px; height: 32px; border: 4px solid #cdd9e4; border-top-color: #1f4e78; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error { margin-top: 16px; padding: 12px; background: #fdecea; color: #8f1d1d; border-radius: 6px; }
.success { margin-top: 16px; padding: 12px; background: #e6f4ea; color: #14532d; border-radius: 6px; }
.download { display: inline-block; margin-top: 16px; color: #1f4e78; font-weight: bold; }