/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:#f4f6f8; color:#222; line-height:1.5; min-height:100vh; display:flex; justify-content:center; padding:2rem; }

/* ---------- LAYOUT ---------- */
.container { width:100%; max-width:960px; display:flex; flex-direction:column; gap:1.5rem; }
header h1 { font-size:1.75rem; font-weight:600; color:#1a1a2e; }

.card { background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.07); padding:1.5rem; }
.card h2 { margin-bottom:1rem; font-size:1.25rem; color:#333; }

/* ---------- UPLOAD FORM ---------- */
.upload-card form { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; }
.file-label { position:relative; cursor:pointer; }
.file-label .btn { background:#e0e7ef; color:#333; border:none; padding:.6rem 1.2rem; border-radius:6px; font-weight:500; transition:background .2s; }
.file-label .btn:hover { background:#d0d9e8; }
.btn.primary { background:#2563eb; color:#fff; border:none; padding:.6rem 1.2rem; border-radius:6px; font-weight:600; cursor:pointer; transition:background .2s; }
.btn.primary:hover { background:#1d4ed8; }
.msg { margin-top:.5rem; font-size:.9rem; }
.msg.error { color:#dc2626; }
.msg.success { color:#16a34a; }

/* ---------- GALLERY ---------- */
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; }
.gallery-item { position:relative; background:#fafafa; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; display:flex; flex-direction:column; }
.gallery-item img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.gallery-item .meta { padding:.5rem; display:flex; flex-direction:column; gap:.25rem; }
.gallery-item input.rename-input { border:1px solid #d1d5db; border-radius:4px; padding:.35rem .5rem; font-size:.85rem; }
.gallery-item .actions { display:flex; gap:.4rem; margin-top:.4rem; }
.gallery-item button { flex:1; border:none; border-radius:4px; padding:.35rem .5rem; font-size:.8rem; cursor:pointer; transition:background .2s; }
.gallery-item button.rename-btn { background:#2563eb; color:#fff; }
.gallery-item button.rename-btn:hover { background:#1d4ed8; }
.gallery-item button.delete-btn { background:#ef4444; color:#fff; }
.gallery-item button.delete-btn:hover { background:#dc2626; }
.hidden { display:none !important; }