body { background: #111; color: #eee; font-family: 'Segoe UI', Arial, sans-serif; margin:0; }
a { color: #61dafb; text-decoration: none; }
header, footer { background: #181818; padding: 12px 24px; }
.logo { height: 48px; }
.header-row { display: flex; align-items: center; justify-content: space-between; }
.social-icons a { color: #eee; margin-left: 16px; font-size: 1.5em; }
.social-icons a:hover { color: #61dafb; }
.menu-btn { display: none; background: none; border: none; color: #eee; font-size: 2em; cursor: pointer; }
.nav-menu { display: flex; gap: 24px; justify-content: center; }
.nav-menu a { padding: 8px 12px; border-radius: 6px; }
.nav-menu a:hover { background: #232323; }
@media (max-width: 600px) {
  .logo { height: 32px; }
  .nav-menu { display: none; flex-direction: column; position: absolute; background: #222; width: 100vw; left: 0; top: 56px; }
  .nav-menu.open { display: flex; }
  .menu-btn { display: block; }
}
.gallery-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; padding: 24px; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .gallery-grid { grid-template-columns: 1fr; } }
.gallery-item { background: #181818; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px #000a; cursor: pointer; text-align: center; }
.gallery-item img { width: 90%; aspect-ratio: 3/4; object-fit: cover; }
.profile-title { font-weight: 600; margin: 12px 0 4px; }
.profile-teaser { color: #bbb; font-size: 0.97em; margin-bottom: 4px; }
footer { border-top: 1px solid #222; margin-top: 32px; font-size: 0.95em; }
.footer-copy { color: #888; }

/* Modal styles for expanded images */
#img-modal {
  display: none; 
  position: fixed; 
  z-index: 1000; 
  left: 0; top: 0; width: 100vw; height: 100vh; 
  background: rgba(0,0,0,0.7); 
  align-items: center; justify-content: center;
}
#img-modal.open {
  display: flex;
}
#img-modal img {
  max-width: 90vw; 
  max-height: 85vh; 
  border-radius: 14px;
  box-shadow: 0 0 32px #000b;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
}
#img-modal .close-btn {
  position: absolute; 
  top: 2rem; right: 2rem; 
  font-size: 2.2rem; 
  color: #fff; 
  cursor: pointer;
  z-index: 1001;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
#img-modal .close-btn:hover {
  background: rgba(0,0,0,0.6);
}
.gallery-img, #img-modal img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: auto;
}

/* Video grid styling */
.profile-videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.profile-video-item {
  background: #181818;
  padding: 0.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 12px #000a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

@media (max-width: 900px) {
  .profile-videos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .profile-videos-grid {
    grid-template-columns: 1fr;
  }
}

/* TikTok/Instagram embed adjustments if needed */
.profile-video-item iframe,
.profile-video-item blockquote {
  width: 100% !important;
  max-width: 100%;
  margin: 0 auto !important;
}

.ratings-legend-icon { 
  display:inline-flex; align-items:center; justify-content:center; 
  width:18px; height:18px; border-radius:50%; border:1px solid #fff6; 
  background:#232323; color:#fff; font-size:0.89em; position:relative; 
  cursor:pointer; font-family:inherit; margin-left:4px;
  transition:background 0.18s;
  min-width:18px; min-height:18px;
}
.ratings-legend-icon > span { font-weight:700; font-size:0.89em; }
.ratings-legend-tooltip {
  display:none;
  position:absolute; right:0; top:120%; z-index:100;
  background:#181818; color:#eee;
  padding:5px 10px; border-radius:7px; min-width:160px; font-size:0.91em;
  box-shadow:0 2px 8px #000a; white-space:pre-line;
  line-height:1.45;
  border:1px solid #444;
  font-weight:400;
}
.ratings-legend-icon:hover .ratings-legend-tooltip, .ratings-legend-icon:focus .ratings-legend-tooltip {
  display:block;
}