/* Светлая тема сайта 30:21 — те же токены, что в приложении.
   Внутренние страницы уже рисуются через var(--bg)/var(--txt)/…,
   поэтому достаточно переопределить переменные. */
:root[data-theme="light"]{
  --bg:#FFFEEC; --bg2:#F5F3E4; --card:#FFFFFF; --card2:#FAF8EE;
  --line:#E3DFCC; --line2:#D3CEB8;
  --red:#2E9CA0; --red-br:#3EB6B4; --red-dk:#1F6F72;
  --gold:#A9862F; --gold-dim:#8A6D22;
  --txt:#171722; --muted:#5B5867; --muted2:#807D8C;
}
/* Липкая шапка и подобные блоки заданы инлайн-стилем — перекрываем. */
:root[data-theme="light"] [style*="rgba(9,8,14"]{
  background:rgba(255,254,236,.82)!important}
:root[data-theme="light"] [style*="#09080E"],
:root[data-theme="light"] [style*="#09080e"]{background:var(--bg)!important}
/* Градиентный текст на тёмном не читается на кремовом. */
:root[data-theme="light"] [style*="-webkit-background-clip:text"],
:root[data-theme="light"] [style*="background-clip:text"]{
  background:linear-gradient(120deg,#0F5F63 15%,#2E9CA0 55%,#3EB6B4)!important;
  -webkit-background-clip:text!important;background-clip:text!important}

/* Плавающая кнопка темы (в шапке её негде закрепить: она из React). */
.theme-fab{position:fixed;right:18px;bottom:18px;z-index:60;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  cursor:pointer;font-size:1.15rem;line-height:1;
  background:var(--card);color:var(--txt);border:1px solid var(--line2);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.5);transition:.2s}
.theme-fab:hover{border-color:var(--red-br);transform:translateY(-2px)}

/* Страницы со своим набором стилей (профиль, оплата) — точечные правки:
   у них карточки и поля залиты литеральными тёмными цветами. */
:root[data-theme="light"] body{
  background:radial-gradient(70% 50% at 50% -5%,rgba(46,156,160,.16),transparent 62%),var(--bg)}
:root[data-theme="light"] .card{
  background:linear-gradient(180deg,#FFFFFF,#FAF8EE)!important;
  box-shadow:0 18px 40px -22px rgba(23,23,34,.25)}
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select{
  background:#FFFFFF!important;color:var(--txt)!important;
  border-color:var(--line2)!important}
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder{color:var(--muted2)}
:root[data-theme="light"] .btn{
  box-shadow:0 10px 26px -8px rgba(46,156,160,.45)}

/* Профиль в светлой теме: внутренние плашки залиты литеральным тёмным
   (#0c0b12, #0f0d16, #16131f…), из-за чего текст был не виден. */
:root[data-theme="light"] .pbox{
  background:#FFFFFF!important;border-color:var(--line)!important}
:root[data-theme="light"] .stat,
:root[data-theme="light"] .a,
:root[data-theme="light"] .refcode,
:root[data-theme="light"] .bar,
:root[data-theme="light"] .empty{
  background:#FAF8EE!important;border-color:var(--line)!important;
  color:var(--txt)!important}
:root[data-theme="light"] .a.on{
  background:rgba(169,134,47,.10)!important;
  border-color:rgba(169,134,47,.45)!important}
:root[data-theme="light"] .foot{color:var(--muted2)!important}
:root[data-theme="light"] .badge.free{
  background:rgba(91,88,103,.10)!important;color:var(--muted)!important}
:root[data-theme="light"] .badge.prem{
  background:rgba(169,134,47,.14)!important;color:var(--gold)!important;
  border-color:rgba(169,134,47,.45)!important}
:root[data-theme="light"] .sync .dot.off{background:var(--muted2)!important}
/* Плашки-достижения: подписи должны читаться и в выключенном состоянии. */
:root[data-theme="light"] .a,
:root[data-theme="light"] .a *{color:var(--muted)!important}
:root[data-theme="light"] .a.on,
:root[data-theme="light"] .a.on *{color:var(--txt)!important}

/* Страница оплаты (/buy, /premium): карточки тарифов залиты #0c0b12,
   выбранная подсвечивалась красным — в светлой теме нужны свои цвета. */
:root[data-theme="light"] .plan{
  background:#FAF8EE!important;border-color:var(--line)!important;
  color:var(--txt)!important}
:root[data-theme="light"] .plan *{color:inherit!important}
:root[data-theme="light"] .plan .pp,
:root[data-theme="light"] .plan .pt{color:var(--muted)!important}
:root[data-theme="light"] .plan:hover{border-color:var(--red-br)!important}
:root[data-theme="light"] .plan.sel{
  border-color:var(--red-br)!important;
  background:linear-gradient(135deg,rgba(46,156,160,.14),rgba(62,182,180,.06))!important}
:root[data-theme="light"] .plan .price{color:var(--txt)!important}
:root[data-theme="light"] .plan .dot{border-color:var(--line2)!important}
:root[data-theme="light"] .plan.sel .dot{border-color:var(--red-br)!important}
:root[data-theme="light"] .badge{color:#241C05!important}
:root[data-theme="light"] .msg.err{
  background:rgba(225,29,42,.10)!important;border-color:rgba(225,29,42,.28)!important;
  color:#9B1B23!important}
:root[data-theme="light"] .field,
:root[data-theme="light"] .feats,
:root[data-theme="light"] .perks{color:var(--txt)!important}
:root[data-theme="light"] .kicker{background:rgba(169,134,47,.08)!important}

/* Липкие шапки внутренних страниц: фон задан правилом в <style>, поэтому
   селектор по инлайн-стилю его не ловил. */
:root[data-theme="light"] nav,
:root[data-theme="light"] header[style*="sticky"]{
  background:rgba(255,254,236,.85)!important;
  border-bottom-color:var(--line)!important}

/* Автозаполнение Chrome заливает поля своим светлым фоном и ломает
   тёмную тему — держим цвета своими в обеих темах. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--txt)!important;
  -webkit-box-shadow:0 0 0 1000px var(--card) inset!important;
  caret-color:var(--txt);
  transition:background-color 9999s ease-out 0s}