/* =========================================================
   Переключатель темы + светлая тема.
   Подключается ПОСЛЕДНИМ, после flux.css и kit.css.
   Светлая включается атрибутом html[data-theme="light"] (ставит theme.js).
   ========================================================= */

/* кнопка в шапке */
.theme-tg{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--ink);background:rgba(19,18,28,.7);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);margin-left:auto;transition:transform .3s var(--ease)}
.theme-tg:hover{transform:rotate(-20deg) scale(1.06)}
.theme-tg svg{grid-area:1/1}
.theme-tg .tg-sun,.theme-tg .tg-moon{transition:opacity .35s,transform .5s var(--ease);transform-origin:12px 12px}
[data-theme="dark"] .theme-tg .tg-moon{opacity:0;transform:rotate(-90deg) scale(.4)}
[data-theme="light"] .theme-tg .tg-sun{opacity:0;transform:rotate(90deg) scale(.4)}
.top .nav{margin:0 auto}
@media(max-width:900px){.theme-tg{width:42px;height:42px}}

/* плавная смена цветов при переключении */
.theme-anim,.theme-anim *,.theme-anim *:before,.theme-anim *:after{
  transition:background-color .5s ease,color .5s ease,border-color .5s ease,box-shadow .5s ease!important}

/* ---------------- СВЕТЛАЯ ТЕМА ---------------- */
[data-theme="light"]{
  --bg:#f7f6f2; --bg2:#efede7; --card:#ffffff; --ink:#15131c; --muted:#62606e; --line:#e2e0e8;
  --lime:#4f9a00;
  color-scheme:light;
}
[data-theme="light"] body{background:var(--bg);color:var(--ink)}
[data-theme="light"] ::selection{color:#fff}
[data-theme="light"] .grain{opacity:.035}

/* второстепенный текст */
[data-theme="light"] :is(.hero__bottom p,.tile .tags span,.fcard .m,.plan li,.auc ul,.scard__does,.scard__how,
  .explain__text p,.yesno ul,.auc .quote,.hub__card p,.hub__card li){color:#48455a}
[data-theme="light"] :is(.auc .cnt,.apps .cnt){color:#5d5a6c}

/* кнопки: зелёные с белым текстом, при наведении — чёрные */
[data-theme="light"] .btn{color:#fff}
[data-theme="light"] .btn:after{background:var(--ink)}
[data-theme="light"] .btn--ghost{color:var(--ink)}
[data-theme="light"] .btn--ghost:hover{color:#fff}
[data-theme="light"] :is(.mnav .btn,.nav a.on,.tab.on,.fchip.on,.pill--l,.pill--l .ic,.variant a.on,.step3:before,
  .auc:hover .auc__btn .from,.ladder__s.is-done i,.faq details[open] summary i){color:#fff}
[data-theme="light"] .fcard--end .btn{background:var(--ink);color:#fff}

/* шапка и плавающие плашки */
[data-theme="light"] :is(.nav,.burger,.variant,.stage-chip,.theme-tg){background:rgba(255,255,255,.78);border-color:rgba(20,18,30,.08);box-shadow:0 6px 24px -12px rgba(20,18,30,.18)}
[data-theme="light"] .nav a:hover{background:rgba(20,18,30,.05)}
[data-theme="light"] .mnav{background:rgba(247,246,242,.97)}
[data-theme="light"] .stage-chip i{background:#e2e0e8}

/* карточки: белые с мягкой тенью */
[data-theme="light"] :is(.tile,.fcard,.auc,.scard,.work,.plan,.bigbtn,.apps__grid div,.incl>div,.scene,.step3,.faq details,.vs,.cmp>div,.hub__card){
  box-shadow:0 1px 2px rgba(20,18,30,.04),0 14px 34px -22px rgba(20,18,30,.22)}
[data-theme="light"] :is(.tile>.ico,.stage .eyebrow){background:rgba(20,18,30,.03)}
[data-theme="light"] :is(.t2,.t2 .tags span,.t2 .from,.t2>.ico){color:#fff}
[data-theme="light"] :is(.t2 p,.t2 .tile__n){color:rgba(255,255,255,.82)}
[data-theme="light"] .t2 .tags span{border-color:rgba(255,255,255,.35)}
[data-theme="light"] .t2>.ico{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)}

/* секции */
[data-theme="light"] .stage--alt{background:
  radial-gradient(900px 420px at 85% 0%,rgba(139,92,255,.08),transparent 60%),
  radial-gradient(700px 380px at 0% 100%,rgba(79,154,0,.06),transparent 60%),#efede7;background-color:#efede7!important}
[data-theme="light"] .stage--final{background:radial-gradient(900px 500px at 50% 0%,rgba(79,154,0,.08),transparent 60%),#efede7}
[data-theme="light"] .stage--after{background:#f2f0eb}
[data-theme="light"] :is(.stage--alt,.stage--final){box-shadow:inset 0 1px 0 rgba(20,18,30,.05)}
[data-theme="light"] .stage:before{background:linear-gradient(90deg,transparent,rgba(20,18,30,.08) 15%,rgba(79,154,0,.6) 50%,rgba(20,18,30,.08) 85%,transparent)}
[data-theme="light"] .stage:after{background:radial-gradient(50% 100% at 50% 0%,rgba(79,154,0,.08),transparent 70%)}
[data-theme="light"] .hero:after{background:linear-gradient(180deg,transparent 55%,var(--bg))}
[data-theme="light"] .phero:before{opacity:.16}
[data-theme="light"] .rail a i{border-color:#c9c6d3}
[data-theme="light"] .rail a.done i{background:#c9c6d3}
[data-theme="light"] :is(.opts label:hover,.fchip:hover){border-color:#c9c6d3}
[data-theme="light"] .why:before{opacity:.08}

/* переписки: светлые пузыри как в мессенджерах */
[data-theme="light"] .msg--in{background:#eeecf4;color:#15131c}
[data-theme="light"] .msg--out{background:#dff3c6;color:#1d3600}
[data-theme="light"] .scene__lost{color:#c01f8f}
/* тёмные «экраны» (Telegram, телефон, подсказки) — текст внутри светлый */
[data-theme="light"] :is(.chatbox,.aph,.q__tip,.ks){color:#eef0f5}
[data-theme="light"] .chatbox .msg--in{background:#182533;color:#eef0f5}
[data-theme="light"] .q__tip{background:#1b1a27}
[data-theme="light"] .chatbox .msg--out{background:#2b5278;color:#fff}

/* без огромного круга у курсора при наведении */
.cursor.is-big{width:14px;height:14px;margin:-7px 0 0 -7px}
.cursor span{display:none}
[data-theme="light"] .browser{box-shadow:0 30px 70px -40px rgba(20,18,30,.35)}
[data-theme="light"] .browser__bar i{background:rgba(20,18,30,.14)}
[data-theme="light"] .sc-info li{color:#48455a}
[data-theme="light"] .sc-tab:hover{border-color:#c9c6d3}
[data-theme="light"] .sc-tab.on,[data-theme="light"] .sc-tab.on .ic{color:#fff}

/* поверх фото и в телефонах текст остаётся светлым */
[data-theme="light"] .work__tag{color:#fff}
[data-theme="light"] .facts span{background:rgba(255,255,255,.8);border-color:rgba(20,18,30,.08);color:#15131c}
[data-theme="light"] .aph{box-shadow:0 40px 80px -30px rgba(139,92,255,.35)}