* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #f4f6f9;
  color: #222;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  min-height: 100vh;
  display: flex;
}
#sidebar {
  width: 200px; flex-shrink: 0; padding: 40px 30px;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.profile { display: flex; gap: 12px; align-items: center; margin-bottom: 60px; }
.avatar { width: 44px; height: 44px; border-radius: 8px; background: #333; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.name { font-weight: 600; }
.role { color: #777; font-size: 0.85rem; font-style: italic; }
.menu a { display: block; margin: 14px 0 14px 20px; color: #555; text-decoration: none; font-style: italic; }
.menu a.active { margin-left: 0; color: #111; }
.socials { margin-top: auto; }
.socials a { color: #333; text-decoration: none; margin-right: 14px; font-size: 1.1rem; }
#content { flex: 1; padding: 50px 4vw 80px 2vw; }
.topbar { display: flex; flex-direction: column; align-items: flex-end; margin-bottom: 50px; font-style: italic; }
.topbar .reachout { margin-top: 14px; color: #333; text-decoration: none; }
.collection { display: flex; gap: 40px; align-items: flex-start; margin-bottom: 80px; }
.collection figure { flex: 1; align-self: flex-start; }
.collection figure img { width: 100%; height: 65vh; object-fit: cover; border-radius: 12px; cursor: pointer; }
.collection .side { width: 260px; flex-shrink: 0; }
.collection .info { font-style: italic; margin-bottom: 14px; }
.collection h2 { font-size: 1.3rem; font-weight: 400; font-style: italic; }
.collection .location { color: #888; margin: 8px 0 20px; font-size: 0.9rem; }
.collection .view { color: #555; cursor: pointer; }
.collection .thumbs { display: flex; gap: 8px; flex-wrap: wrap; max-height: 65vh; overflow-y: scroll; align-content: flex-start; padding-right: 6px; }
.collection .thumbs::-webkit-scrollbar { width: 8px; }
.collection .thumbs::-webkit-scrollbar-track { background: #e5e5e5; border-radius: 4px; }
.collection .thumbs::-webkit-scrollbar-thumb { background: #bbb; border-radius: 4px; }
.collection .thumbs img { width: 90px; height: 65px; object-fit: cover; border-radius: 6px; cursor: pointer; }

#lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); align-items: center; justify-content: center; z-index: 10; }
#lightbox.open { display: flex; }
#lightbox img { max-width: 90vw; max-height: 85vh; }
#lightbox .caption { position: absolute; bottom: 24px; color: #ccc; font-style: italic; }
#lightbox .close { position: absolute; top: 20px; right: 30px; font-size: 2rem; cursor: pointer; color: #aaa; }
#lightbox .arrow { position: absolute; top: 50%; transform: translateY(-50%); font-size: 3rem; color: #aaa; cursor: pointer; padding: 20px; user-select: none; }
#lightbox .arrow:hover { color: #fff; }
#lightbox .prev { left: 10px; }
#lightbox .next { right: 10px; }

form { max-width: 520px; margin-top: 30px; }
label { display: block; margin: 18px 0 6px; color: #555; font-size: 0.95rem; }
input { width: 100%; padding: 10px; background: #fff; border: 1px solid #ddd; border-radius: 4px; }
button { margin-top: 24px; padding: 12px 28px; background: #111; color: #fafafa; border: none; font-size: 1rem; cursor: pointer; border-radius: 4px; }
button:hover { background: #333; }
#status { margin-top: 16px; color: #3a3; }

.admin-photo { display: inline-block; margin: 10px; vertical-align: top; width: 170px; }
.admin-photo img { width: 150px; height: 110px; object-fit: cover; display: block; }
.admin-photo input { margin-top: 4px; padding: 4px; font-size: 0.8rem; }
.admin-photo .row { margin-top: 6px; }
.admin-photo button { margin: 6px 4px 0 0; padding: 4px 10px; font-size: 0.8rem; background: #eee; color: #111; border: 1px solid #ddd; }
.admin-photo button.delete { background: #f8eeee; color: #a33; }

@media (max-width: 900px) {
  body { flex-direction: column; }
  #sidebar { width: 100%; height: auto; position: static; padding: 24px; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 16px; }
  .profile { margin-bottom: 0; }
  .menu { display: flex; gap: 16px; }
  .menu a { margin: 0; }
  #content { padding: 20px 4vw 60px; }
  .collection { flex-direction: column; gap: 16px; }
  .collection .location { margin: 8px 0 6px; }
  .collection figure img { height: 45vh; }
  .collection .side { width: 100%; }
  .collection .thumbs { max-height: 40vh; padding-right: 0; }
  .collection .thumbs img { flex: none; width: calc((100% - 16px) / 3); height: auto; aspect-ratio: 4 / 3; border-radius: 6px; }
  .topbar { align-items: flex-start; }
}
@media (max-width: 500px) {
  .collection figure img { height: 35vh; }
  #lightbox img { max-width: 96vw; max-height: 80vh; }
  #lightbox .arrow { font-size: 2rem; padding: 10px; }
}

#hamburger { display: none; background: none; border: none; font-size: 2rem; cursor: pointer; margin: 0; padding: 4px 8px; color: #222; line-height: 1; }
@media (max-width: 900px) {
  #hamburger { display: block; margin-left: auto; position: relative; z-index: 60; }
  #sidebar { position: relative; }
  .menu { display: none; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; background: #f4f6f9; border-bottom: 1px solid #e0e0e0; padding: 80px 8vw 40px; z-index: 50; gap: 18px; align-items: flex-start; width: auto; }
  .menu.open { display: flex; }
  .menu a { margin: 0; white-space: nowrap; font-size: 1.1rem; }
}
@media (max-width: 900px) {
  .collection .side { display: contents; }
  .collection .info { order: -1; }
}