.gr-lib { max-width: 1100px; margin: 0 auto; padding: 24px; }
.gr-lib h1 { font-size: 24px; margin: 0 0 6px; }
.gr-status { color: var(--greyForegroundColor, #9aa0ab); margin: 0 0 20px; }

.gr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.gr-card {
  display: flex; flex-direction: column; gap: 6px;
  text-align: left; cursor: pointer;
  padding: 16px; border-radius: 12px;
  border: 1px solid var(--inputBorderColor, #2a2e3a);
  background: var(--channelBackgroundColor, #15171d);
  color: inherit; min-height: 84px;
  transition: border-color .15s ease, transform .05s ease;
}
.gr-card:hover { border-color: #22d3ee; }
.gr-card:active { transform: scale(.99); }
.gr-card-title { font-weight: 600; font-size: 15px; }
.gr-card-ch { font-size: 12px; color: var(--greyForegroundColor, #9aa0ab); }

.gr-modal { display: none; position: fixed; inset: 0; z-index: 12000; }
.gr-modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,.75); }
.gr-modal-box {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(90vw, 1024px); aspect-ratio: 16 / 9;
  background: #000; border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
}
.gr-modal-box iframe { width: 100%; height: 100%; border: 0; }
.gr-close {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.6); color: #fff; font-size: 16px; cursor: pointer;
}
.gr-close:hover { background: rgba(0,0,0,.85); }