/* ============================================================
   Tungi / kunduzgi rejim — sky-toggle (styled-components’dan
   sof CSS’ga ko'chirilgan, markup bilan 1:1 mos)
   ============================================================ */
.theme-switch{
  --toggle-size:15px;
  --container-width:5.625em; --container-height:2.5em; --container-radius:6.25em;
  --container-light-bg:#3D7EAE; --container-night-bg:#1D1F2C;
  --circle-container-diameter:3.375em; --sun-moon-diameter:2.125em;
  --sun-bg:#ECCA2F; --moon-bg:#C4C9D1; --spot-color:#959DB1;
  --circle-container-offset:calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color:#fff; --clouds-color:#F3FDFF; --back-clouds-color:#AACADF;
  --transition:.5s cubic-bezier(0,-0.02,.4,1.25);
  --circle-transition:.3s cubic-bezier(0,-0.02,.35,1.17);
  display:inline-block;
}
.theme-switch,.theme-switch *,.theme-switch *::before,.theme-switch *::after{
  box-sizing:border-box;margin:0;padding:0;font-size:var(--toggle-size);
}
.theme-switch__container{
  width:var(--container-width);height:var(--container-height);
  background-color:var(--container-light-bg);border-radius:var(--container-radius);
  overflow:hidden;cursor:pointer;
  box-shadow:0em -0.062em 0.062em rgba(0,0,0,.25),0em 0.062em 0.125em rgba(255,255,255,.94);
  transition:var(--transition);position:relative;
}
.theme-switch__container::before{
  content:"";position:absolute;z-index:1;inset:0;
  box-shadow:0em .05em .187em rgba(0,0,0,.25) inset,0em .05em .187em rgba(0,0,0,.25) inset;
  border-radius:var(--container-radius);
}
.theme-switch__checkbox{position:absolute;opacity:0;width:0;height:0}
.theme-switch__circle-container{
  width:var(--circle-container-diameter);height:var(--circle-container-diameter);
  background-color:rgba(255,255,255,.1);position:absolute;
  left:var(--circle-container-offset);top:var(--circle-container-offset);
  border-radius:var(--container-radius);
  box-shadow:inset 0 0 0 3.375em rgba(255,255,255,.1),inset 0 0 0 3.375em rgba(255,255,255,.1),0 0 0 .625em rgba(255,255,255,.1),0 0 0 1.25em rgba(255,255,255,.1);
  display:flex;transition:var(--circle-transition);pointer-events:none;
}
.theme-switch__sun-moon-container{
  pointer-events:auto;position:relative;z-index:2;
  width:var(--sun-moon-diameter);height:var(--sun-moon-diameter);margin:auto;
  border-radius:var(--container-radius);background-color:var(--sun-bg);
  box-shadow:.062em .062em .062em 0em rgba(254,255,239,.61) inset,0em -0.062em .062em 0em #a1872a inset;
  filter:drop-shadow(.062em .125em .125em rgba(0,0,0,.25)) drop-shadow(0em .062em .125em rgba(0,0,0,.25));
  overflow:hidden;transition:var(--transition);
}
.theme-switch__moon{
  transform:translateX(100%);width:100%;height:100%;
  background-color:var(--moon-bg);border-radius:inherit;
  box-shadow:.062em .062em .062em 0em rgba(254,255,239,.61) inset,0em -0.062em .062em 0em #969696 inset;
  transition:var(--transition);position:relative;
}
.theme-switch__spot{
  position:absolute;top:.75em;left:.312em;width:.75em;height:.75em;
  border-radius:var(--container-radius);background-color:var(--spot-color);
  box-shadow:0em .0312em .062em rgba(0,0,0,.25) inset;
}
.theme-switch__spot:nth-of-type(2){width:.375em;height:.375em;top:.937em;left:1.375em}
.theme-switch__spot:nth-last-of-type(3){width:.25em;height:.25em;top:.312em;left:.812em}
.theme-switch__clouds{
  width:1.25em;height:1.25em;background-color:var(--clouds-color);
  border-radius:var(--container-radius);position:absolute;bottom:-0.625em;left:.312em;
  box-shadow:.937em .312em var(--clouds-color),-0.312em -0.312em var(--back-clouds-color),1.437em .375em var(--clouds-color),.5em -0.125em var(--back-clouds-color),2.187em 0 var(--clouds-color),1.25em -0.062em var(--back-clouds-color),2.937em .312em var(--clouds-color),2em -0.312em var(--back-clouds-color),3.625em -0.062em var(--clouds-color),2.625em 0em var(--back-clouds-color),4.5em -0.312em var(--clouds-color),3.375em -0.437em var(--back-clouds-color),4.625em -1.75em 0 .437em var(--clouds-color),4em -0.625em var(--back-clouds-color),4.125em -2.125em 0 .437em var(--back-clouds-color);
  transition:.5s cubic-bezier(0,-0.02,.4,1.25);
}
.theme-switch__stars-container{
  position:absolute;color:var(--stars-color);top:-100%;left:.312em;
  width:2.75em;height:auto;transition:var(--transition);
}
/* actions */
.theme-switch__checkbox:checked + .theme-switch__container{background-color:var(--container-night-bg)}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container{
  left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover{
  left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - .187em);
}
.theme-switch__circle-container:hover{left:calc(var(--circle-container-offset) + .187em)}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon{transform:translate(0)}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds{bottom:-4.062em}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container{
  top:50%;transform:translateY(-50%);
}
.theme-switch__checkbox:focus-visible + .theme-switch__container{outline:3px solid var(--brand);outline-offset:3px}

/* ============================================================
   TUNGI REJIM palitrasi
   ============================================================ */
html[data-theme="dark"]{
  --ink:#EEF1F7; --ink-2:#B4BDCE; --ink-3:#8A94A6;
  --line:#232A3A; --bg:#0B0F1A; --bg-soft:#111726;
  --brand:#5B82FF; --brand-ink:#A9BEFF; --brand-soft:#18213B;
  --shadow-s:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --shadow-m:0 2px 6px rgba(0,0,0,.45),0 18px 48px rgba(0,0,0,.5);
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .top{background:rgba(11,15,26,.82)}
html[data-theme="dark"] .card,
html[data-theme="dark"] .qcard,
html[data-theme="dark"] .ccard,
html[data-theme="dark"] .stepcard,
html[data-theme="dark"] .opt,
html[data-theme="dark"] .btn-ghost{background:var(--bg-soft);border-color:var(--line)}
html[data-theme="dark"] .opt:hover,
html[data-theme="dark"] .btn-ghost:hover{background:#182033;border-color:#33405B}
html[data-theme="dark"] .opt[aria-checked="true"]{background:var(--brand-soft);border-color:var(--brand)}
html[data-theme="dark"] .chip{background:#151C2D;border-color:var(--line)}
html[data-theme="dark"] .bar{background:#212840}
html[data-theme="dark"] .hero:before{background:radial-gradient(closest-side,rgba(91,130,255,.16),transparent)}
html[data-theme="dark"] .hero:after{background:radial-gradient(closest-side,rgba(150,110,255,.14),transparent)}
html[data-theme="dark"] .logo-img{box-shadow:0 0 0 1px var(--line)}

/* Pullik / bepul belgisi — tungi rejim */
html[data-theme="dark"] .price--free{color:#7BE3C1;background:#0F2A22;border-color:#1E4A3B}
html[data-theme="dark"] .price--paid{color:#C7B0FF;background:#1E1638;border-color:#372A5E}
html[data-theme="dark"] .ccard--paid{border-color:#372A5E}
html[data-theme="dark"] .tariffs{background:linear-gradient(135deg,#1A1330,#141B33);border-color:#372A5E;color:var(--ink)}
html[data-theme="dark"] .tariffs:hover{border-color:#5B47A0}
html[data-theme="dark"] .tariffs i{color:#C7B0FF}

html[data-theme="dark"] .cover .price{background:rgba(17,23,38,.92)}
html[data-theme="dark"] .social a{border-color:var(--line);background:var(--bg-soft)}
html[data-theme="dark"] .social a:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink)}

/* 3 qadamli bo'lim — tungi rejim */
html[data-theme="dark"] .stepcard{background:#0F1524;border-color:var(--line)}
html[data-theme="dark"] .stepcard:hover{background:var(--bg-soft);border-color:rgba(91,130,255,.5)}
html[data-theme="dark"] .stepnum{box-shadow:0 0 0 5px var(--bg-soft)}
html[data-theme="dark"] .stepline__bar{background:var(--line)}

/* Hero marquee — tungi rejim */
html[data-theme="dark"] .mq__stage{opacity:.22}
html[data-theme="dark"] .mq__card{box-shadow:0 18px 40px rgba(0,0,0,.5)}
html[data-theme="dark"] .mq__fade--top{background:linear-gradient(to bottom,var(--bg) 10%,rgba(11,15,26,0))}
html[data-theme="dark"] .mq__fade--bottom{background:linear-gradient(to top,var(--bg) 10%,rgba(11,15,26,0))}