:root {
  --bg: #0f1115;
  --card: #171a21;
  --text: #e8eaf0;
  --muted: #9aa0aa;
  --accent: #6aa1ff;
  --accent-2: #22c55e;
  --danger: #ef4444;
  --amber: #f59e0b;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; }

.header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid #222630; background:#0d1016;
}
.header h1 { margin:0; font-size:20px; }
.actions { display:flex; gap:10px; }
.btn {
  padding:10px 14px; border-radius:10px; border:1px solid #2b3140; background:#1b1f2a; color:var(--text);
  cursor:pointer; transition: all .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--accent); border-color: #3b82f6; color:#0b1020; font-weight: 600; }
.btn.secondary { background:#202432; }
.btn.danger { background:var(--danger); border-color:#7f1d1d; }

.container { max-width:1200px; margin:0 auto; padding:22px; }
.upload { background:var(--card); border:1px solid #232838; padding:20px; border-radius:16px; }
.uploader {
  display:flex; align-items:center; justify-content:center; gap:12px;
  border:2px dashed #2a3142; padding:40px; border-radius:16px; cursor:pointer;
  color:var(--muted);
}
.uploader input { display:none; }
.hint { margin-top:10px; color:var(--muted); font-size:14px; }

.progress { margin:18px 0 6px; }
.bar { width:100%; height:10px; background:#1b2130; border-radius:10px; overflow:hidden; }
.bar-fill { height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transition:width .3s; }
#progressText { margin-bottom:6px; color:var(--muted); font-size:14px; }

.grid {
  display:grid; gap:14px; margin-top:20px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.card {
  background:var(--card); border:1px solid #232838; border-radius:16px; overflow:hidden; display:flex; flex-direction:column;
}
.thumb { aspect-ratio: 16/9; background:#0e121a; display:flex; align-items:center; justify-content:center; color:#4b5563; font-size:12px; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.meta { padding:12px 12px 0; display:flex; flex-direction:column; gap:6px; }
.meta b { font-size:14px; }
.meta small { color:var(--muted); }
.actions-row { display:flex; gap:8px; padding:12px; }
.action { flex:1; text-align:center; padding:10px 8px; border-radius:8px; border:1px solid #2a3242; background:#1c2030; cursor:pointer; font-size:14px; }
.action.primary { background: #2b3450; }
.action.success { background:#14301e; border-color:#1f4d2f; color:#a7f3d0; }
.action.warn { background:#2f2612; border-color:#3d2a0a; color:#fef08a; }
.badge { display:inline-flex; gap:6px; align-items:center; padding:4px 8px; border-radius:999px; background:#1e2635; border:1px solid #2a3245; color:#cbd5e1; font-size:12px; }
.footer { padding:20px; text-align:center; color:#6b7280; border-top:1px solid #222630; }