* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; max-width: 960px; margin: 0 auto; padding: 20px; background: #fafafa; color: #222; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.1rem; margin: 24px 0 12px; }

#gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
#gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }

#comments-section { margin-top: 48px; }
#comment-form { display: flex; flex-direction: column; gap: 8px; max-width: 400px; }
#comment-form input, #comment-form textarea { padding: 8px; border: 1px solid #ccc; border-radius: 6px; font: inherit; }
#comment-form textarea { min-height: 80px; resize: vertical; }
button { padding: 8px 16px; border: none; border-radius: 6px; background: #2563eb; color: #fff; cursor: pointer; font: inherit; }
button:hover { background: #1d4ed8; }

.comment { border-bottom: 1px solid #e5e5e5; padding: 10px 0; }
.comment time { font-size: 0.8rem; color: #888; margin-left: 8px; }
.comment p { margin-top: 4px; }

#admin-panel { margin-top: 20px; }
#admin-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.admin-img { position: relative; }
.admin-img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.admin-img .delete-btn { position: absolute; bottom: 4px; right: 4px; padding: 2px 8px; font-size: 0.75rem; background: #dc2626; }