.opl-hero{
  border-color: rgba(var(--accent-1-rgb), .25);
  background:
    radial-gradient(900px 360px at 10% 0%, rgba(var(--accent-1-rgb), .12), transparent 60%),
    var(--card);
}

.mp-opl-season-inline{
  appearance:none;
  border:1px solid var(--line);
  background:var(--card);
  font-size:1.2rem;
  font-weight:700;
  color:var(--ink);
  padding:6px 28px 6px 10px;
  border-radius:8px;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.08);

  background-image:url("data:image/svg+xml;utf8,<svg fill='%230f172a' height='12' viewBox='0 0 20 20' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 8px center;
}

.mp-opl-season-inline:hover{
  border-color:rgba(var(--accent-1-rgb), .5);
}

.mp-opl-season-inline:focus{
  outline:none;
  border-color:rgba(var(--accent-1-rgb), 1);
  box-shadow:0 0 0 2px rgba(var(--accent-1-rgb), .2);
}

.inline-flex{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.ml8{
  margin-left:8px;
}

.mp-opl-player-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.mp-opl-player-switch{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.mp-opl-player-switch-input{
  width:auto;
  min-width:180px;
}

@media (max-width: 720px){
  .mp-opl-player-head{
    flex-direction:column;
    align-items:stretch;
  }

  .mp-opl-player-switch{
    width:100%;
  }

  .mp-opl-player-switch-input{
    width:100%;
    min-width:0;
  }
}

.mp-opl-inline-form{
  display:inline-flex;
  align-items:center;
  gap:0;
  flex-wrap:nowrap;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.mp-opl-inline-form .label{
  display:inline-block;
  margin:0;
  padding:0 10px;
  white-space:nowrap;
  color:var(--muted);
  font-size:.9rem;
}

.mp-opl-inline-form .input{
  width:auto;
  flex:0 0 auto;
  margin:0;
  box-shadow:none;
}

.mp-opl-id-input{
  width:110px;
  min-width:110px;
  max-width:110px;
  padding:6px 8px;
  margin:0 4px;
  border:1px solid #e2e8f0;
  border-radius:8px;
  background:#f8fafc;
  text-align:center;
  font-weight:500;
}

.mp-opl-id-input:focus{
  outline:none;
  border-color:rgba(var(--accent-1-rgb), 1);
  box-shadow:0 0 0 2px rgba(var(--accent-1-rgb), .15);
}

.mp-opl-inline-form .btn-cta,
.mp-opl-inline-form .btn-cta-outline{
  white-space:nowrap;
  border-radius:999px;
  margin:0;
  padding:8px 14px;
}

.mp-opl-player-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.mp-opl-player-switch{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}

.mp-opl-player-switch-input{
  width:110px;
  min-width:110px;
  max-width:110px;
}

@media (max-width: 720px){
  .mp-opl-player-head{
    flex-direction:column;
    align-items:stretch;
  }

  .mp-opl-inline-form{
    display:flex;
    width:100%;
    flex-wrap:wrap;
    border-radius:18px;
  }

  .mp-opl-inline-form .label{
    width:100%;
    padding:6px 10px 0;
  }

  .mp-opl-player-switch{
    width:100%;
    flex-wrap:wrap;
  }

  .mp-opl-player-switch-input{
    width:100%;
    min-width:0;
    max-width:none;
  }
}