:root{
  --bg: #f6f8fa;
  --card: #ffffff;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-2: #06b6d4;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, 'Helvetica Neue', Arial; background:var(--bg); color:#111; margin:0}
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.site-header{background:linear-gradient(90deg,#0ea5a4, #2563eb);color:white;padding:28px 0}
.site-header h1{margin:0;font-size:1.4rem}
.site-header .muted{opacity:.9;margin-top:6px}
.card{background:var(--card);border-radius:10px;padding:16px;box-shadow:0 6px 18px rgba(16,24,40,0.06);margin-bottom:16px}
.upload-card{display:flex;gap:18px;align-items:flex-start}
.upload-left{flex:1}
.upload-right{width:320px}
.file-drop{display:block;border:2px dashed #d1d5db;border-radius:8px;padding:20px;text-align:center;cursor:pointer;background:linear-gradient(180deg,#fff,#fbfdff);transition:all .15s}
.file-drop:hover{box-shadow:0 4px 12px rgba(16,24,40,0.06);transform:translateY(-2px)}
.file-drop input{display:none}
.file-drop.drag{background:#f1f5f9;border-color:var(--accent)}
.drop-inner p{margin:8px 0;font-weight:600}
.preview{margin-top:12px}
.preview img{max-width:100%;border-radius:6px;display:block}
#preview-img{max-width:100%;max-height:300px;object-fit:contain;border-radius:6px;display:block}
.field{margin:12px 0}
select, button, input[type=text]{width:100%;padding:10px;border-radius:8px;border:1px solid #e6e8eb}
.btn-primary{background:var(--accent);color:#fff;border:none;padding:10px 14px;border-radius:8px;cursor:pointer}
.btn-secondary{background:#f3f4f6;border:none;padding:8px 12px;border-radius:8px;cursor:pointer}
.muted{color:var(--muted)}
.status-messages p{margin:6px 0}
.msg{padding:8px;border-radius:6px;margin-bottom:8px;font-size:14px}
.msg.info{background:#e6f2ff;color:#0c4a6e}
.msg.success{background:#ecfdf5;color:#065f46}
.msg.error{background:#fff1f2;color:#9f1239}
.status-info{color:#0f172a}
.status-error{color:#b91c1c}
.status-success{color:#059669}
.progress-wrap{background:#e6e8eb;border-radius:999px;height:12px;overflow:hidden}
.progress-bar{height:12px;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0}
.result-area, .result{margin-top:12px;padding:12px;background:#fbfdff;border-radius:8px}
.result code{background:#fff;padding:4px 8px;border-radius:6px;display:inline-block}
.download-link a{display:inline-block;margin-top:8px}
.legacy-forms{display:flex;gap:12px;flex-wrap:wrap}
.site-footer{padding:18px 0;text-align:center}

@media(max-width:880px){
  .upload-card{flex-direction:column}
  .upload-right{width:100%}
}