/* ============================================================
   MQ-SWITCH — брендовый переключатель настроек (iOS-style)
   + строка настройки (заголовок, подсказка, свитч справа).
   Общий для лобби основного SPA и /professionals.
   Самодостаточен: токены с фолбэками, не требует quiz-lobby-v2.css.
   ============================================================ */

.mq-switchrow{
  display:flex; align-items:center; gap:12px;
  padding:10px 2px;
  cursor:pointer; user-select:none;
  text-align:left;
}
.mq-switchrow__txt{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:2px;
}
.mq-switchrow__t{
  font-size:13.5px; font-weight:800; letter-spacing:-.01em;
  color:var(--mq-gray-800,#1f2937);
}
.mq-switchrow__s{
  font-size:11.5px; font-weight:600; line-height:1.35;
  color:var(--mq-gray-500,#6b7280);
}
.mq-switchrow__div{
  height:1px; margin:0 2px;
  background:var(--mq-gray-100,#f3f4f6);
}

.mq-switch{
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto;
  width:46px; height:27px; margin:0;
  border:0; border-radius:999px;
  background:var(--mq-gray-200,#e5e7eb);
  position:relative; cursor:pointer;
  transition:background .25s ease, box-shadow .25s ease;
}
.mq-switch::after{
  content:"";
  position:absolute; top:3px; left:3px;
  width:21px; height:21px; border-radius:50%;
  background:#fff;
  box-shadow:0 2px 5px rgba(15,23,42,.25), 0 0 0 .5px rgba(15,23,42,.04);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.mq-switch:checked{
  background:var(--mq-grad-main,linear-gradient(135deg,#667eea 0%,#764ba2 100%));
  box-shadow:0 4px 12px rgba(102,126,234,.35);
}
.mq-switch:checked::after{transform:translateX(19px)}
.mq-switch:active::after{transform:scale(.94)}
.mq-switch:checked:active::after{transform:translateX(19px) scale(.94)}
.mq-switch:focus-visible{
  outline:3px solid rgba(102,126,234,.45);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .mq-switch, .mq-switch::after{transition:none}
}