/* ============================================================
   ТУМБЛЕР ДЕНЬ/НОЧЬ
   Внутри — небо: ночью звёзды и месяц, днём солнце с лучами.
   Месяц получается не картинкой, а кругом цвета неба, смещённым поверх
   светила: уезжает в сторону — и месяц становится полным солнцем.
   ============================================================ */
.tsw{
  --tsw-sky:#12100F;          /* цвет «выемки» месяца = цвет неба */
  position:relative;flex:0 0 auto;width:64px;height:32px;padding:0;
  border:1px solid var(--line);border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,#15120F,#0C0A09);
  overflow:hidden;-webkit-tap-highlight-color:transparent;
  transition:border-color .45s var(--ease),background .6s var(--ease),transform .25s var(--ease);
}
.tsw:hover{border-color:rgba(var(--red-rgb),.55)}
.tsw:active{transform:scale(.94)}
.tsw:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- небо и звёзды ---------- */
.tsw__sky{position:absolute;inset:0}
.tsw__star{
  position:absolute;width:2px;height:2px;border-radius:50%;background:#F2EBE1;
  opacity:.85;transition:opacity .45s var(--ease),transform .45s var(--ease);
  animation:tswTwinkle 3.2s ease-in-out infinite;
}
.tsw__star--1{top:8px;right:10px;animation-delay:0s}
.tsw__star--2{top:17px;right:19px;width:1.5px;height:1.5px;animation-delay:.7s}
.tsw__star--3{top:23px;right:8px;width:1.5px;height:1.5px;animation-delay:1.4s}
.tsw__star--4{top:6px;right:24px;width:1.5px;height:1.5px;animation-delay:2.1s}
@keyframes tswTwinkle{0%,100%{opacity:.85}50%{opacity:.25}}

/* ---------- светило ---------- */
.tsw__orb{
  position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;
  background:#F2EBE1;
  box-shadow:0 0 0 0 rgba(242,235,225,.35),0 2px 6px rgba(0,0,0,.45);
  transition:transform .62s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease);
}
.tsw:hover .tsw__orb{box-shadow:0 0 0 5px rgba(242,235,225,.12),0 2px 8px rgba(0,0,0,.5)}
.tsw__shade{
  position:absolute;inset:0;border-radius:50%;background:var(--tsw-sky);
  transform:translate(7px,-6px);
  transition:transform .62s var(--ease),opacity .4s var(--ease);
}
.tsw__rays{
  position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;
  border-radius:50%;color:#F6A93B;opacity:0;
  transform:scale(.2) rotate(-70deg);
  transition:transform .62s var(--ease),opacity .4s var(--ease);
  box-shadow:
    0 -12px 0 -.6px currentColor, 0 12px 0 -.6px currentColor,
    -12px 0 0 -.6px currentColor, 12px 0 0 -.6px currentColor,
    8.5px -8.5px 0 -1.1px currentColor, -8.5px 8.5px 0 -1.1px currentColor,
    8.5px 8.5px 0 -1.1px currentColor, -8.5px -8.5px 0 -1.1px currentColor;
}

/* ---------- день ---------- */
:root[data-theme="light"] .tsw{
  --tsw-sky:#FBEFD9;
  background:linear-gradient(180deg,#FDF6E9,#F4E5CC);
  border-color:rgba(29,29,27,.16);
}
:root[data-theme="light"] .tsw__star{opacity:0;transform:scale(.4)}
:root[data-theme="light"] .tsw__orb{
  transform:translateX(32px);
  background:radial-gradient(circle at 35% 32%,#FFCE7A,var(--red) 78%);
  box-shadow:0 0 0 0 rgba(226,31,33,.3),0 2px 8px rgba(120,60,20,.28);
}
:root[data-theme="light"] .tsw:hover .tsw__orb{box-shadow:0 0 0 5px rgba(226,31,33,.14),0 3px 10px rgba(120,60,20,.32)}
:root[data-theme="light"] .tsw__shade{transform:translate(22px,-20px);opacity:0}
:root[data-theme="light"] .tsw__rays{opacity:1;transform:scale(1) rotate(0deg)}

/* Тем, кто просил меньше движения, оставляем мгновенное переключение. */
@media (prefers-reduced-motion:reduce){
  .tsw,.tsw__orb,.tsw__shade,.tsw__rays,.tsw__star{transition-duration:.01ms;animation:none}
}