/* ── Framio theme switch — единый модуль (день / авто / ночь) ──
   Подключение: <link rel="stylesheet" href="/assets/theme.css">
   Размещение:  <div id="themeMount"></div>  (где нужно на странице)
   Логика:      <script src="/assets/theme.js"></script>  перед </body>
   Переменные тем (--bg,--t1,…) задаёт сама страница: :root (light) + [data-theme=dark]. */

.theme-switch{
  isolation:isolate;width:fit-content;
  display:inline-flex;align-items:center;gap:2px;padding:3px;
  border-radius:999px;overflow:hidden;position:relative;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(22px) saturate(190%);
  -webkit-backdrop-filter:blur(22px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 14px 34px rgba(0,0,0,.22);
}
.theme-switch::before{
  content:'';position:absolute;inset:1px;z-index:0;border-radius:inherit;
  background:
    radial-gradient(circle at 16% 0%,rgba(255,255,255,.55),transparent 32%),
    linear-gradient(115deg,rgba(255,255,255,.38),transparent 34%,rgba(255,255,255,.12) 58%,transparent 78%);
  opacity:.75;mix-blend-mode:screen;pointer-events:none;
}
.theme-switch::after{
  content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 -8px 20px rgba(255,255,255,.08);
  pointer-events:none;
}
.ts-pill{
  position:absolute;z-index:1;top:3px;left:3px;
  height:calc(100% - 6px);overflow:hidden;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(255,255,255,.58));
  backdrop-filter:blur(8px) saturate(160%);
  -webkit-backdrop-filter:blur(8px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.35),
    0 10px 22px rgba(0,0,0,.16),
    0 0 24px rgba(255,255,255,.22);
  pointer-events:none;
  transition:transform 460ms cubic-bezier(.2,.8,.2,1),width 460ms cubic-bezier(.2,.8,.2,1);
}
.ts-pill::before{
  content:'';position:absolute;top:0;bottom:0;left:8%;width:45%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.70),transparent);
  opacity:.55;transform:skewX(-18deg);
}
.ts-btn{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:27px;height:27px;padding:0;
  border:none;border-radius:999px;background:transparent;
  color:rgba(0,0,0,.40);
  cursor:pointer;touch-action:manipulation;
  transition:color 200ms ease,transform 200ms ease;
}
[data-theme=dark] .ts-btn{color:rgba(255,255,255,.58);}
.ts-btn.active{color:#171717;}
.ts-btn:active{transform:scale(.96);}
.ts-btn svg{flex-shrink:0;}

/* Light-mode switcher: capsule designed for dark bg, needs explicit light overrides */
:root:not([data-theme=dark]) .theme-switch{
  background:rgba(15,23,42,.07);
  border-color:rgba(15,23,42,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.70),
    0 4px 18px rgba(0,0,0,.10);
}
:root:not([data-theme=dark]) .theme-switch::before{
  opacity:.35;
}
:root:not([data-theme=dark]) .ts-pill{
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.82));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.30),
    0 2px 10px rgba(0,0,0,.16),
    0 0 0 1px rgba(37,99,235,.14);
}
:root:not([data-theme=dark]) .ts-btn.active{color:#1e3a8a;}