/* سويتش الوضع — منصة الرياضيات */

.theme-switch--pro,
.acc-theme.theme-switch--pro{
  --ts-w:88px;
  --ts-h:44px;
  --ts-pad:4px;
  --ts-ease:cubic-bezier(0.4, 0, 0.2, 1);
  --ts-dur:0.26s;

  position:relative;
  display:inline-block;
  width:var(--ts-w);
  height:var(--ts-h);
  min-width:var(--ts-w);
  min-height:var(--ts-h);
  padding:var(--ts-pad);
  border-radius:999px;
  flex:0 0 auto;
  box-sizing:border-box;
  cursor:pointer;
  vertical-align:middle;
  background:var(--surface-soft);
  border:1.5px solid var(--border-strong);
  box-shadow:inset 0 1px 3px rgba(15,23,42,.06);
}

html[data-theme="dark"] .theme-switch--pro,
html[data-theme="dark"] .acc-theme.theme-switch--pro{
  background:rgba(30,41,59,.8);
  border-color:rgba(96,165,250,.25);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.25);
}

.theme-switch--pro .theme-switch__btn,
.acc-theme.theme-switch--pro .acc-theme__btn{
  position:absolute;
  top:0;
  z-index:2;
  width:50%;
  height:100%;
  min-height:44px;
  padding:0;
  margin:0;
  border:0;
  background:transparent !important;
  box-shadow:none !important;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.theme-switch--pro .theme-switch__btn[data-theme="light"],
.acc-theme.theme-switch--pro .acc-theme__btn[data-theme="light"]{left:0;right:50%;}
.theme-switch--pro .theme-switch__btn[data-theme="dark"],
.acc-theme.theme-switch--pro .acc-theme__btn[data-theme="dark"]{left:50%;right:0;}

.theme-switch--pro .theme-switch__knob,
.acc-theme.theme-switch--pro .acc-theme__knob,
.acc-theme.theme-switch--pro .theme-switch__knob{
  position:absolute;
  top:var(--ts-pad);
  left:var(--ts-pad);
  z-index:1;
  width:calc(50% - var(--ts-pad));
  height:calc(100% - var(--ts-pad) * 2);
  border-radius:999px;
  display:grid;
  place-items:center;
  pointer-events:none;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 2px 8px rgba(15,23,42,.1);
  transform:translate3d(0,0,0);
  transition:transform var(--ts-dur) var(--ts-ease);
}

html[data-theme="dark"] .theme-switch--pro .theme-switch__knob,
html[data-theme="dark"] .acc-theme.theme-switch--pro .acc-theme__knob,
html[data-theme="dark"] .acc-theme.theme-switch--pro .theme-switch__knob{
  transform:translate3d(100%,0,0);
  background:linear-gradient(180deg, #334155, #1e293b);
  border-color:rgba(96,165,250,.3);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}

.theme-switch--pro .theme-switch__knob-ico,
.acc-theme.theme-switch--pro .theme-switch__knob-ico{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  transition:opacity .22s ease;
}
.theme-switch--pro .theme-switch__knob-ico svg,
.acc-theme.theme-switch--pro .theme-switch__knob-ico svg{
  width:20px;
  height:20px;
}
.theme-switch--pro .theme-switch__knob-ico--light svg{color:#d97706;}
.theme-switch--pro .theme-switch__knob-ico--dark svg{color:#93c5fd;}

html[data-theme="light"] .theme-switch--pro .theme-switch__knob-ico--light,
html[data-theme="light"] .acc-theme.theme-switch--pro .theme-switch__knob-ico--light{opacity:1;}
html[data-theme="dark"] .theme-switch--pro .theme-switch__knob-ico--dark,
html[data-theme="dark"] .acc-theme.theme-switch--pro .theme-switch__knob-ico--dark{opacity:1;}

.theme-switch--pro:focus-within,
.acc-theme.theme-switch--pro:focus-within{
  outline:2px solid rgba(37,99,235,.35);
  outline-offset:2px;
}

.site-header .theme-switch--pro{
  --ts-w:92px;
  --ts-h:46px;
}

@media (max-width:900px){
  .site-header .theme-switch--pro,
  .acc-theme.theme-switch--pro{
    --ts-w:76px;
    --ts-h:38px;
    --ts-pad:3px;
  }

  .site-header .header-theme{
    flex-shrink:0;
    margin-inline-start:8px;
  }

  .acc-topbar__right .acc-theme{
    flex-shrink:0;
    margin-inline-start:10px;
  }
}

@media (max-width:480px){
  .site-header .theme-switch--pro,
  .acc-theme.theme-switch--pro{
    --ts-w:68px;
    --ts-h:34px;
  }
}

@media (prefers-reduced-motion:reduce){
  .theme-switch--pro .theme-switch__knob,
  .acc-theme.theme-switch--pro .acc-theme__knob{transition:none;}
}
