body { background: #e5e5e5; font-family: Verdana, Arial, sans-serif; font-size: 12px; margin: 0; }
a { color: #039; }

/* header + nav */
.top { background: #039; color: #fff; }
.top div { max-width: 900px; margin: 0 auto; padding: 10px 12px; }
.top b { font-size: 20px; }
.top b a { color: #fff; text-decoration: none; }
.top span { color: #9cf; margin-left: 8px; }
.nav { background: #69c; }
.nav div { max-width: 900px; margin: 0 auto; padding: 5px 12px; }
.nav a { color: #fff; font-weight: bold; margin-right: 14px; text-decoration: none; }
.nav a:hover, .nav a.on { text-decoration: underline; }

/* two columns */
.wrap { max-width: 900px; margin: 12px auto 0; display: flex; gap: 12px; padding: 12px; background: #fff; box-sizing: border-box; }
.left { width: 250px; flex-shrink: 0; }
.right { flex: 1; min-width: 0; }

/* boxes */
.box { border: 1px solid #69c; margin-bottom: 12px; }
.box h3 { background: #69c; color: #fff; font-size: 12px; margin: 0; padding: 3px 6px; }
.box.alt { border-color: #f60; }
.box.alt h3 { background: #fc9; color: #c30; }
.box .in { padding: 6px; }

/* photos + videos */
.admin img { width: 100%; display: block; }
.photos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.photos img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.videos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.videos a { font-size: 11px; line-height: 1.3; text-decoration: none; }
.videos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; margin-bottom: 3px; }

/* share icon in the corner of each photo / video */
.photos a, .videos a { position: relative; }
.photos .share, .videos .share { position: absolute; top: 4px; right: 4px; width: 15px; height: 15px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; display: flex; align-items: center; justify-content: center; opacity: .8; }
.photos .share:hover, .videos .share:hover { opacity: 1; background: #039; }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #039; color: #fff; padding: 8px 14px; font-weight: bold; z-index: 20; display: none; }
#toast.on { display: block; }

/* a single shared photo or video (share/*.html) */
.solo { max-width: 900px; margin: 12px auto 0; padding: 12px; background: #fff; text-align: center; box-sizing: border-box; }
.solo img, .solo video { max-width: 100%; max-height: 80vh; display: block; margin: 0 auto; background: #000; }

.foot { text-align: center; color: #666; font-size: 10px; padding: 10px; }

/* pop-up for a clicked photo or video */
#box { display: none; position: fixed; inset: 0; z-index: 10; background: rgba(0,0,0,.9); align-items: center; justify-content: center; }
#box.open { display: flex; }
#box .media { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
#box img, #box video { max-width: 92%; max-height: 85%; }
#box p { position: absolute; bottom: 12px; left: 0; right: 0; margin: 0; text-align: center; color: #fff; }
#box button { position: absolute; background: none; border: 0; color: #fff; font-size: 36px; padding: 10px 16px; cursor: pointer; z-index: 1; }
#box .x { top: 0; right: 0; }
#box .share { top: 10px; left: 0; font-size: 14px; font-family: inherit; display: flex; align-items: center; gap: 6px; }
#box .prev { left: 0; }
#box .next { right: 0; }

@media (max-width: 640px) {
  .wrap { flex-direction: column; margin-top: 0; }
  .left { width: auto; }
  .admin img { width: 200px; }
  .photos { grid-template-columns: repeat(3, 1fr); }
  .videos { grid-template-columns: repeat(2, 1fr); }
  #box img, #box video { max-width: 100%; }
}