:root { --accent:#0ea5e9; --ok:#16a34a; --err:#b91c1c; }
body { font-family: Arial, sans-serif; background:#f8fafc; margin:0; padding:20px; }
.wrap { max-width: 800px; margin:auto; }
h1 { margin-bottom:10px; }
p.lead { color:#555; margin-top:0; }
.card { background:#fff; border:1px solid #ccc; border-radius:8px; padding:20px; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:700px){ .grid { grid-template-columns:1fr; } }
label { display:block; font-size:14px; margin-bottom:4px; }
input, textarea { width:100%; padding:8px; border:1px solid #ccc; border-radius:6px; }
textarea { min-height:80px; }
#dropzone { border:2px dashed #aaa; padding:20px; text-align:center; margin-top:14px; border-radius:8px; }
#dropzone.drag { background:#e0f7ff; border-color:var(--accent); }
.muted { font-size:12px; color:#666; }
.file-card { border:1px solid #ddd; border-radius:6px; padding:8px; margin-top:10px; background:#fff; }
.progress { height:6px; background:#eee; border-radius:4px; overflow:hidden; margin-top:6px; }
.bar { height:100%; width:0; background:var(--ok); transition:width .2s; }
.preview { max-height:100px; margin-top:8px; border:1px solid #ddd; border-radius:4px; }
button { background:var(--accent); color:#fff; border:0; padding:10px 16px; border-radius:8px; cursor:pointer; font-weight:bold; }
button[disabled]{opacity:0.5; cursor:not-allowed;}
.success{border-left:4px solid var(--ok); background:#f0fdf4; padding:12px; margin-top:16px;}
.error{border-left:4px solid var(--err); background:#fef2f2; padding:12px; margin-top:16px; color:#991b1b;}