:root {
  /* === SearchGrid === */
  --sgm-bg: #0a0c10;
  --sgm-surface: rgba(20, 24, 32, 0.92);
  --sgm-text: #e8ecf1;
  --sgm-accentA: #ff3366;
  --sgm-accentB: #ff4b2b;
  --sgm-radius: 18px;
  --sgm-gap: 16px;
  --sgm-glow: 0 0 18px rgba(255, 77, 122, 0.6);
  --sgm-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);

  /* === Video Panel === */
  --vp-bg: rgba(0,0,0,0.85);
  --vp-surface: rgba(20,24,32,0.95);
  --vp-radius: 20px;
  --vp-shadow: 0 24px 60px rgba(0,0,0,0.8);
  --vp-accent: #ff3366;
}

/* ================= SearchGrid Modal ================= */
.sgm-overlay {
  position: fixed; top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.75);
  display: none;
  align-items: center; justify-content: center;
  z-index: 9999;
}

.sgm-modal {
  background: var(--sgm-surface);
  border-radius: var(--sgm-radius);
  width: 95%; max-width: 1100px; max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: var(--sgm-shadow); overflow: hidden;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn { from {opacity:0; transform:scale(0.95);} to {opacity:1; transform:scale(1);} }

.sgm-grid {
  flex: 1; overflow-y: auto; padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-auto-rows: minmax(240px, auto);
  gap: var(--sgm-gap);
}

.sgm-card {
  position: relative; border-radius: var(--sgm-radius);
  overflow: hidden; background: rgba(255,255,255,0.05);
  box-shadow: var(--sgm-shadow); cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex; flex-direction: column;
}

.sgm-card:hover {
  transform: scale(1.03); box-shadow: var(--sgm-glow);
}

.sgm-card img {
  width: 100%; height: auto; max-height: 220px;
  object-fit: cover;
  transition: transform .5s ease, filter .4s ease;
}

.sgm-card:hover img {
  transform: scale(1.08); filter: brightness(1.15);
}

.sgm-name {
  font-weight: 700; font-size: clamp(13px, 2vw, 16px);
  color: #fff; padding: 8px 10px;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  background: linear-gradient(90deg, rgba(0,0,0,0.7), transparent);
}

.sgm-rating {
  position: absolute; top:10px; left:10px;
  background: rgba(0,0,0,0.4); backdrop-filter: blur(6px);
  border-radius: 20px; padding: 3px 10px;
  font-weight: 600; font-size:12px;
  display: inline-flex; align-items:center; gap:4px;
  color:#fff;
}
.sgm-rating::before { content:"★"; color:#ffcc00; }
.sgm-rating::after { content:"IMDb"; color:#ffcc00; font-size:11px; margin-left:4px; }

@media(max-width:500px){
  .sgm-grid { grid-template-columns: repeat(2, 1fr); }
  .sgm-card img { max-height: 180px; }
}

/* ================= Video Panel Modal ================= */
.vidro-overlay {
  position: fixed; top:0; left:0;
  width:100%; height:100%;
  background: var(--vp-bg);
  display: none; align-items: center; justify-content: center;
  z-index: 10000;
}

.vidro-panel {
  background: var(--vp-surface); border-radius: var(--vp-radius);
  width: 90%; max-width: 900px; max-height: 85vh;
  overflow-y: auto; display: flex; flex-direction: column;
  box-shadow: var(--vp-shadow); position: relative;
  animation: fadeIn 0.3s ease;
}

.vidro-close {
  position: absolute; top:12px; right:16px;
  font-size:28px; cursor:pointer; color:#ffcc00;
  transition: color .2s;
}
.vidro-close:hover { color:#fff; }

.vidro-content {
  display:flex; flex-direction: row; gap:20px; padding:16px; flex-wrap: wrap;
}

.vidro-content img {
  width: 250px; max-width:100%; border-radius: var(--vp-radius); object-fit: cover;
}

.vidro-info { flex:1; color:#fff; }

.vidro-info h2 { margin:0; font-size: clamp(20px, 2.5vw, 28px); }

.vidro-info p { margin:4px 0; font-size:14px; }

.vidro-buttons { margin-top:12px; display:flex; gap:12px; flex-wrap: wrap; }

.vidro-buttons button {
  padding:8px 16px; background: var(--vp-accent);
  border:none; border-radius:12px; color:#fff; font-weight:600; cursor:pointer;
  transition: transform .2s, filter .2s;
}
.vidro-buttons button:hover { transform: scale(1.05); filter: brightness(1.1); }

@media(max-width:700px){
  .vidro-content { flex-direction: column; align-items:center; }
  .vidro-content img { width:100%; max-width:300px; }
}