.wrap{
  max-width:1100px;
}

.genreRow{
  display:flex;
  gap:10px;
  align-items:center;
  flex:0 0 auto;
}

.customSelect{
  position:relative;
  width:180px;
}

.customSelectTrigger{
  width:100%;
  height:44px;
  border-radius:14px;
  border:1px solid var(--controlBorder);
  background-color:var(--fieldBgStrong);
  color:var(--text);
  padding:10px 42px 10px 14px;
  outline:none;
  box-shadow:var(--controlInset);
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
  position:relative;
}

.customSelectTrigger:hover{
  border-color:var(--controlBorderHover);
}

.customSelectTrigger:focus,
.customSelectTrigger:focus-visible,
.customSelect.open .customSelectTrigger{
  border-color:var(--focusBorder);
  outline:2px solid var(--focusOutline);
  outline-offset:0;
  box-shadow:0 0 0 3px var(--focusRing),var(--controlInset);
}

.customSelectTrigger .labelText{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.customSelectTrigger .chev{
  position:absolute;
  right:14px;
  top:50%;
  width:18px;
  height:18px;
  transform:translateY(-50%);
  pointer-events:none;
  transition:transform .12s ease;
}

.customSelect.open .customSelectTrigger .chev{
  transform:translateY(-50%) rotate(180deg);
}

.customSelectMenu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:100%;
  max-height:280px;
  overflow:auto;
  padding:8px;
  border-radius:14px;
  background:var(--fieldBgStrong);
  border:1px solid var(--controlBorder);
  box-shadow:var(--shadow);
  display:none;
  z-index:30;
}

.customSelect.open .customSelectMenu{
  display:block;
}

.customOption{
  width:100%;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  padding:11px 12px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
  font-size:14px;
  box-shadow:none;
}

.customOption:hover{
  background:var(--secondaryBgHover);
  border-color:var(--controlBorderHover);
  color:var(--secondaryHoverText);
}

.customOption.active{
  background:rgba(99,102,241,.18);
  border-color:rgba(99,102,241,.35);
}

.customOption .check{
  opacity:0;
  font-size:12px;
}

.customOption.active .check{
  opacity:1;
}

tbody tr.recommended{
  background:var(--recommendBg) !important;
  box-shadow:inset 0 0 0 1px var(--recommendLine) !important;
}

tbody tr.recommended:hover{
  background:var(--recommendBg) !important;
  box-shadow:inset 0 0 0 1px var(--recommendLine) !important;
}

.genresWrap{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}

.genresWrap.grid2{
  display:grid;
  grid-template-columns:repeat(2,max-content);
  gap:8px;
  justify-content:center;
  align-items:center;
  overflow:visible;
}

#loginBackdrop .modal{
  width:min(420px,92%);
}

@media (max-width:720px){
  .search{
    flex:7 1 0;
    min-width:0;
    width:auto;
  }

  .genreRow{
    flex:3 1 0;
    min-width:0;
    width:auto;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:stretch;
  }

  .customSelect{
    width:100%;
    order:1;
  }

  .customSelectTrigger{
    height:52px;
    padding:12px 48px 12px 16px;
    font-size:18px;
    border-radius:16px;
  }

  .customSelectTrigger .chev{
    right:16px;
    width:20px;
    height:20px;
  }

  .customSelectMenu{
    border-radius:16px;
  }

  .customOption{
    font-size:18px;
    padding:13px 14px;
  }

  tbody tr.recommended{
    background:var(--recommendBg) !important;
    border:1.5px solid var(--recommendLine) !important;
    box-shadow:inset 0 0 0 1px var(--recommendLine),0 10px 28px rgba(0,0,0,.24) !important;
  }

  html[data-theme="light"] tbody tr.recommended{
    box-shadow:inset 0 0 0 1px var(--recommendLine),0 10px 28px rgba(85,120,180,.10) !important;
  }

  tbody tr.recommended:hover{
    background:var(--recommendBg) !important;
    box-shadow:inset 0 0 0 1px var(--recommendLine),0 10px 28px rgba(0,0,0,.26) !important;
  }

  html[data-theme="light"] tbody tr.recommended:hover{
    border-color:var(--recommendLine) !important;
    box-shadow:inset 0 0 0 1px var(--recommendLine),0 10px 28px rgba(85,120,180,.10) !important;
  }

  tbody td:nth-child(2){
    order:1;
    padding-top:14px;
    padding-bottom:10px;
    font-size:22px;
    font-weight:850;
    letter-spacing:-.3px;
    line-height:1.25;
  }

  tbody td:nth-child(2) strong{
    font-weight:850;
    color:inherit;
  }

  tbody td:nth-child(1){
    order:2;
    padding-top:0;
    padding-bottom:10px;
    color:rgba(232,238,249,.84);
    font-size:14px;
    font-weight:650;
  }

  html[data-theme="light"] tbody td:nth-child(1){
    color:rgba(36,68,110,.72);
  }

  tbody td:nth-child(1) strong{
    font-weight:700;
    color:inherit;
  }

  tbody td:nth-child(3){
    order:3;
    padding-top:0;
    padding-bottom:14px;
    color:rgba(159,176,207,.96);
    font-size:14px;
    line-height:1.45;
  }

  html[data-theme="light"] tbody td:nth-child(3){
    color:rgba(95,126,168,.96);
  }

  tbody td:nth-child(4){
    display:none !important;
  }

  .ubiRow3{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:space-between;
  }

  .ubiRow3 .ubiGenre{
    flex:0 0 auto;
    min-width:0;
  }

  .ubiRow3 .ubiDesc{
    flex:1 1 auto;
    min-width:0;
    text-align:right;
    color:rgba(159,176,207,.96);
    font-size:14px;
    line-height:1.45;
    word-break:break-word;
  }

  html[data-theme="light"] .ubiRow3 .ubiDesc{
    color:rgba(95,126,168,.96);
  }

  .genresWrap{
    justify-content:flex-start;
    flex-wrap:wrap;
    overflow:visible;
  }

  .genresWrap.grid2{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
  }
}