:root{--bg:#f6f8fb;--card:#fff;--muted:#6b7280;--accent:#2563eb}
body{font-family:Inter, system-ui, Arial; background:var(--bg); margin:0;padding:28px;color:#0f1724}
.wrap{max-width:980px;margin:0 auto}
.card{background:var(--card);border-radius:12px;padding:18px;box-shadow:0 6px 18px rgba(12,15,30,0.06)}
h1{margin:0 0 8px;font-size:20px}
p.lead{color:var(--muted);margin:0 0 16px}

.uploader{border:2px dashed #e6eef8;border-radius:10px;padding:28px;text-align:center;cursor:pointer;background:#fbfdff}
.uploader.drag{border-color:var(--accent);background:#f0f6ff}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

input[type=file]{display:none}
button{background:var(--accent);color:white;border:0;padding:10px 12px;border-radius:8px;cursor:pointer}
button.ghost{background:#fff;border:1px solid #e6eef8;color:var(--accent)}
button.warning{background:#ef4444}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:18px}
.item{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:8px;border:1px solid #eef2ff;background:#fff}
.thumb{width:110px;height:78px;object-fit:cover;border-radius:6px;background:#f8fafc;border:1px solid #e6eef8}
.meta{flex:1}
.meta h4{margin:0;font-size:14px}
.meta p{margin:6px 0 0;font-size:13px;color:var(--muted)}
.progress{height:8px;background:#eef2ff;border-radius:6px;margin-top:8px;overflow:hidden}
.bar{height:100%;background:var(--accent);width:0}
pre{background:#0f1724;color:#e6eef8;padding:10px;border-radius:6px;white-space:pre-wrap;max-height:180px;overflow:auto}

.bottom{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:18px}
.small{font-size:13px;color:var(--muted)}

.alert{background:#fff3cd;border:1px solid #ffeeba;padding:10px;border-radius:6px;margin-bottom:12px;color:#664d03}

@media (max-width:640px){.grid{grid-template-columns:1fr}}