:root{ --bg:#0b0c10; --card:#121317; --text:#e8e9ef; --muted:#a0a3ad; }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial}
header{padding:24px 16px;text-align:center}
.container{max-width:980px;margin:0 auto;padding:0 16px}
.card{background:var(--card);border-radius:16px;padding:16px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.thumb{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;border:1px solid #222}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid #2a2d37;background:#171923;color:#fff;text-decoration:none}
.btn:disabled{opacity:.6}
.input{padding:12px;border-radius:12px;border:1px solid #2a2d37;background:#0e1016;color:#fff;width:100%}
.progress{height:8px;background:#1f2330;border-radius:999px;overflow:hidden}
.progress>div{height:100%;background:#3b82f6;width:0}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.small{color:var(--muted);font-size:.9rem}
.login{max-width:420px;margin:40px auto}
/* ---- index polishing ---- */
.hero{
  padding:48px 16px;
  background: radial-gradient(1200px 600px at 10% -10%, #1a1f2b 0%, transparent 60%),
              radial-gradient(1200px 600px at 110% 10%, #141827 0%, transparent 55%),
              linear-gradient(135deg,#111319,#0b0c10);
  border-bottom:1px solid #202433;
  text-align:center
}
.hero h1{ font-size:clamp(28px,4.5vw,40px); margin:0 0 8px 0; }
.hero p{ color:var(--muted); margin:0 }

.form-card{ display:grid; gap:16px }
.label{ font-weight:600; font-size:.95rem; margin-bottom:4px }
.hint{ color:var(--muted); font-size:.9rem }

.drop{
  border:1.5px dashed #2a2d37; border-radius:16px; padding:18px;
  background: #0e1016; text-align:center; cursor:pointer
}
.drop.dragover{ background:#121525; border-color:#3b82f6 }
.previews{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px }
.preview{ width:88px; height:88px; border-radius:12px; overflow:hidden; border:1px solid #232635 }
.preview img{ width:100%; height:100%; object-fit:cover }

.btn.primary{ background:#2563eb; border-color:#2563eb }
.btn.ghost{ background:transparent; border-color:#2a2d37 }
.row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }

.badge{
  display:inline-block; padding:4px 10px; border:1px solid #2a2d37;
  border-radius:999px; font-size:.85rem; color:#cbd5e1; background:#0f1320
}