.genre-menu {
  box-sizing: border-box; width: min(720px, calc(100vw - 32px)); max-width: calc(100vw - 24px); max-height: 82vh;
  padding: 24px; border: 1px solid #345068; border-radius: 18px;
  color: #f3f7fb; background: #091722; box-shadow: 0 24px 90px #000a;
  overflow: auto;
}
.genre-menu::backdrop { background: #000a; }
.genre-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.genre-menu h2 { margin: 0; font-size: 1.7rem; }
.genre-menu p { line-height: 1.5; }
.genre-menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.genre-menu .genre-chip { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; min-height: 52px; border-radius: 10px; background: #102738; border: 1px solid #345068; padding: 12px; overflow-wrap: anywhere; }
.genre-count { color: #a8c5d8; font-size: .85em; }
.genre-menu .genre-chip[aria-pressed="true"] { background: #07476a; border-color: #19bfff; }
.genre-menu button:focus-visible, .genre-filter button:focus-visible { outline: 3px solid #22c6ff; outline-offset: 3px; }
.genre-menu-footer { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.genre-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.genre-filter strong { font-size: 1.2rem; }
@media (max-width: 600px) {
  .genre-menu { padding: 18px; width: calc(100vw - 24px); max-height: 80dvh; }
  .genre-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .genre-menu .genre-chip { min-height: 52px; font-size: 14px; gap: 6px; padding: 10px; }
}
/* Shared, full-size overview: genres and imported provider categories. */
body[data-skin='glassy'][data-presentation][data-variant='glassy'] .genre-menu {
  width: min(760px, calc(100vw - 32px)); max-width: calc(100vw - 24px);
  max-height: 86vh; max-height: 86dvh; padding: 0; border-radius: 22px;
  border: 1px solid rgba(215,235,255,.24); color: #f1f6fb;
  background: linear-gradient(125deg,rgba(41,59,77,.95),rgba(10,23,35,.97) 75%);
  box-shadow: inset 0 1px 0 #ffffff0c, 0 28px 90px #0009;
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); overflow: hidden;
}
.genre-menu[open] { display: flex; flex-direction: column; }
.genre-menu-head { flex: 0 0 auto; margin: 0 24px; padding: 20px 0 16px; border-bottom: 1px solid #cfe6ff26; }
.genre-menu-head h2 { letter-spacing: -.035em; }
.genre-menu-body { padding: 0 24px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; scrollbar-width: thin; scrollbar-color: #667d91 transparent; }
.genre-menu-source { color: #b8c8d8; margin: 14px 0; font-size: .95rem; }
.genre-menu-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.genre-menu-tabs[hidden], .genre-menu-search[hidden] { display: none; }
.genre-menu-status { color: #bccbdb; margin: 14px 0; font-size: .95rem; }
.genre-menu-search { display: flex; gap: 8px; margin-top: 16px; }
.genre-menu-search input { min-width: 0; flex: 1; }
.genre-menu-grid { gap: 8px; }
body[data-skin='glassy'][data-presentation][data-variant='glassy'] .genre-menu button {
  width: auto; min-height: 44px; padding: 10px 15px; border-radius: 11px;
  background: #cde2ff0c; border: 1px solid #d2e7ff36; color: #eef5fc;
  box-shadow: inset 0 1px 0 #ffffff05; font: inherit; font-size: .9rem; line-height: 1.35;
}
body[data-skin='glassy'][data-presentation][data-variant='glassy'] .genre-menu .genre-chip {
  display: flex; width: 100%; min-height: 44px; padding: 10px 14px; gap: 10px;
  text-align: left; justify-content: space-between; align-items: center; background: #bddeff0c;
}
.genre-name { min-width: 0; overflow-wrap: anywhere; }
.genre-menu .genre-count { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 22px; padding: 2px 7px; border-radius: 20px; background: #04142177; color: #c8dcec; font-size: .78rem; font-variant-numeric: tabular-nums; }
body[data-skin='glassy'][data-presentation][data-variant='glassy'] .genre-menu button:hover { background: #cde2ff18; border-color: #cde2ff70; }
body[data-skin='glassy'][data-presentation][data-variant='glassy'] .genre-menu button[aria-pressed='true'] { color: #eafaff; background: #53d8f51c; border-color: #6ae2ff80; }
body[data-skin='glassy'][data-presentation][data-variant='glassy'] .genre-menu button:focus-visible { outline: 3px solid var(--glassy-accent,#67defa); outline-offset: 2px; }
.genre-menu-pages { margin-top: 16px; }
.genre-menu-pages:empty { margin: 0; }
.genre-menu-footer { flex: 0 0 auto; margin: 0; padding: 18px 24px 20px; gap: 10px; }
@media (max-width: 600px) {
  body[data-skin='glassy'][data-presentation][data-variant='glassy'] .genre-menu { width: calc(100vw - 24px); max-height: 88vh; max-height: 88dvh; border-radius: 18px; }
  .genre-menu-head { margin: 0 16px; padding: 18px 0 14px; gap: 10px; }
  .genre-menu-head h2 { font-size: 1.5rem; }
  .genre-menu-body { padding: 0 16px; }
  .genre-menu-grid { gap: 8px; }
  .genre-menu-source, .genre-menu-status { font-size: .875rem; }
  body[data-skin='glassy'][data-presentation][data-variant='glassy'] .genre-menu .genre-chip { padding: 10px; gap: 6px; font-size: .82rem; }
  .genre-menu-footer { padding: 16px; }
  .genre-menu-search { flex-wrap: wrap; }
  .genre-menu-search input { width: 100%; }
}
@media (max-width: 360px) {
  .genre-menu-grid { grid-template-columns: 1fr; }
}
/* Both choices remain visible: no tab change is needed to find provider groups. */
body[data-skin='glassy'][data-presentation][data-variant='glassy'] .genre-menu-combined { width: min(1100px, calc(100vw - 32px)); }
.genre-menu-columns { display: grid; gap: 24px; padding: 20px 0 8px; }
.genre-menu-combined .genre-menu-columns { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.genre-menu-section { min-width: 0; padding: 16px; border: 1px solid #d2e7ff26; border-radius: 16px; background: #06142333; }
.genre-menu-section h3 { margin: 0; color: #edf8ff; font-size: 1.05rem; }
.genre-menu-section .genre-menu-status { font-size: .82rem; min-height: 3em; margin: 10px 0 14px; }
.genre-menu-combined .genre-menu-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.genre-menu-section .genre-menu-grid { max-height: 44vh; max-height: 44dvh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #71899b transparent; padding: 3px; }
.genre-menu .genre-name small { display: block; margin-top: 3px; color: #afc3d4; font-size: .7rem; }
.genre-menu .genre-chip:disabled { opacity: 1; cursor: default; color: #bacbdd; }
.genre-menu .genre-chip:disabled:hover { background: #bddeff0c; border-color: #d2e7ff36; }
.genre-menu .genre-chip.genre-empty { border-style: dashed; }
.genre-menu-selection { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.genre-menu-selection:empty { display: none; }
.genre-menu-search { flex-wrap: wrap; }
.genre-menu-search input { flex: 1 1 250px; }
.genre-menu-pages { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 761px) {
  .genre-menu-combined { height: min(86dvh,900px); }
  .genre-menu-combined .genre-menu-body { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
  .genre-menu-combined .genre-menu-source, .genre-menu-combined .genre-menu-search { flex: 0 0 auto; }
  .genre-menu-combined .genre-menu-search { margin-top: 0; }
  .genre-menu-combined .genre-menu-columns { flex: 1; min-height: 0; }
  .genre-menu-combined .genre-menu-section { display: flex; flex-direction: column; min-height: 0; }
  .genre-menu-combined .genre-menu-grid { flex: 1; min-height: 0; max-height: none; align-content: start; }
  .genre-menu-combined .genre-menu-section h3, .genre-menu-combined .genre-menu-status, .genre-menu-combined .genre-menu-pages, .genre-menu-combined .genre-menu-selection { flex: 0 0 auto; }
}
@media (max-width: 760px) {
  .genre-menu-combined .genre-menu-columns { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .genre-menu-section { padding: 12px; }
  .genre-menu-section .genre-menu-grid { max-height: 32vh; max-height: 32dvh; }
  .genre-menu-section .genre-menu-status { min-height: 0; }
}
@media (max-width: 520px) {
  .genre-menu-combined .genre-menu-grid { grid-template-columns: 1fr; }
}