/* Общая оболочка сайта: сетка, шапка, кнопки, полосы и переключатели.
   Подключается лендингами, инструкцией и страницей программы. Кабинет и админка
   берут только tokens.css — у них своя вёрстка. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{background:var(--color-bg);color:var(--color-text);font-family:var(--font);
  font-size:15px;line-height:1.55;font-weight:400;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font);font-weight:800;line-height:1.12;letter-spacing:-0.015em;margin:0}
a{color:var(--color-accent);text-underline-offset:3px}
a:hover{color:var(--color-accent-600)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--color-accent) 30%,transparent)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;text-decoration:none;
  font-family:var(--font);font-weight:800;font-size:14px;line-height:1.2;color:var(--color-text);
  background:transparent;border:1px solid transparent;padding:8px 14px;border-radius:var(--radius)}
.btn-primary{background:var(--color-accent);color:var(--color-on-accent)}
.btn-primary:hover{background:var(--color-accent-600);color:var(--color-on-accent)}
.btn-primary:active{background:var(--color-accent-700)}
.btn-secondary{border-color:var(--color-divider)}
.btn-secondary:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent);color:var(--color-text)}
.btn-secondary:active{background:color-mix(in srgb,var(--color-text) 14%,transparent)}

.nav{display:flex;align-items:center;gap:24px;padding:12px 72px;border-bottom:2px solid var(--color-divider)}
.nav-brand{font-family:var(--font);font-weight:800;font-size:18px;margin-right:auto;display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:inherit}
.nav a{color:inherit;text-decoration:none;font-size:14px}
.nav a:hover{color:var(--color-accent)}
.nav a[aria-current="page"]{color:var(--color-accent)}
/* Шестой пункт меню («Рефералка») перестаёт помещаться раньше мобильного брейкпоинта:
   на узком десктопе ужимаем отступы, иначе подпись кнопки кабинета рвётся на две строки. */
.nav a,.nav .btn{white-space:nowrap}
@media (max-width:1180px){.nav{gap:16px;padding:12px 32px}}

.language-menu{position:relative;display:inline-flex;flex:none;text-transform:lowercase}
.language-trigger{width:40px;height:34px;padding:0;border:1px solid var(--color-divider);background:transparent;color:var(--color-text);font-family:var(--font);font-size:12px;font-weight:800;letter-spacing:.06em;cursor:pointer}
.language-trigger:hover,.language-menu.open .language-trigger{border-color:var(--color-accent);color:var(--color-accent)}
.language-options{position:absolute;right:0;top:calc(100% + 5px);z-index:100;width:40px;border:1px solid var(--color-divider);background:var(--color-bg);box-shadow:var(--shadow-md)}
.language-options[hidden]{display:none}
.language-option{display:block;width:100%;height:32px;padding:0;border:0;background:transparent;color:var(--color-text);font-family:var(--font);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:lowercase;cursor:pointer}
.language-option:hover,.language-option:focus-visible,.language-option[aria-selected="true"]{background:var(--color-accent);color:var(--color-on-accent);outline:none}

.theme-toggle{width:40px;height:34px;flex:none;padding:0;cursor:pointer;
  border:1px solid var(--color-divider);background:transparent;color:var(--color-text);
  font-family:var(--font);font-size:15px;line-height:1}
.theme-toggle:hover{border-color:var(--color-accent);color:var(--color-accent)}

.brand-mark{width:26px;height:26px;background:#ec3013;display:inline-flex;align-items:flex-end;justify-content:center;padding-bottom:4px;flex:none}
@keyframes brandHop{0%{transform:translateY(0) scale(1,1)}20%{transform:translateY(0) scale(1.06,.84)}45%{transform:translateY(-5px) scale(.97,1.06)}65%{transform:translateY(0) scale(1,1)}100%{transform:translateY(0) scale(1,1)}}
[data-frog-icon]:hover svg{animation:brandHop .9s ease-in-out infinite;transform-origin:50% 100%}

.wrap{max-width:1200px;margin:0 auto;padding:0 72px}
.rule{height:2px;border:0;margin:0;background:var(--color-divider)}
.kicker{display:block;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-figure-muted);margin-bottom:14px}

/* Кнопка «наверх»: страницы длинные, а меню не липкое — без неё выход из конца страницы
   это долгий скролл. Держим в DOM всегда, показываем классом (opacity анимируется, hidden нет). */
.to-top{position:fixed;right:24px;bottom:24px;z-index:200;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  border:2px solid var(--color-divider);background:var(--color-bg);color:var(--color-text);
  font-family:var(--font);font-size:20px;font-weight:800;line-height:1;
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease}
.to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.to-top:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}
@media (max-width:900px){.to-top{right:14px;bottom:14px;width:42px;height:42px}}
@media print{.to-top{display:none}}

/* Смена темы должна переезжать, а не мигать. */
html,body,.nav,.rule,.btn,.dl-btn,.announce,.note,.path,.to-top,.theme-toggle,
.language-trigger,.language-options,section,details.faq,figure.shot img,code,.os-tag{
  transition:background-color .28s ease,color .28s ease,border-color .28s ease,
    fill .28s ease,stroke .28s ease}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* Полосы во всю ширину: в светлой теме — фирменная заливка, в тёмной она бы слепила,
   поэтому там остаётся поверхность, а красным светится только кнопка. */
.cta{background:var(--color-accent);color:var(--color-on-accent)}
.cta .btn{color:var(--color-on-accent);border:1px solid var(--color-on-accent)}
:root[data-theme="dark"] .cta{background:var(--color-surface);color:var(--color-text);
  border-top:2px solid var(--color-divider);border-bottom:2px solid var(--color-divider)}
:root[data-theme="dark"] .cta .btn{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}

/* Полоса-объявление над навигацией: единственное место, где о новой фиче говорят до скролла. */
.announce{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  background:var(--color-accent);color:var(--color-on-accent);padding:9px 20px;font-size:13.5px;line-height:20px;text-align:center}
.announce a{color:var(--color-on-accent);font-weight:800;text-decoration:underline}
.announce a:hover{color:var(--color-on-accent);opacity:.85}
.announce .tag{font-size:11px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;
  border:1px solid color-mix(in srgb,#f3f2f2 70%,transparent);padding:1px 7px}

.announce{position:relative;padding-right:48px}
.announce-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;
  border:1px solid color-mix(in srgb,#f3f2f2 55%,transparent);background:transparent;color:var(--color-on-accent);
  font-family:var(--font);font-size:15px;font-weight:800;line-height:1}
.announce-x:hover{background:color-mix(in srgb,#f3f2f2 22%,transparent)}

:root[data-theme="dark"] .announce{background:var(--color-surface);color:var(--color-text);
  border-bottom:2px solid var(--color-divider)}
:root[data-theme="dark"] .announce a{color:var(--color-accent)}
:root[data-theme="dark"] .announce .tag{color:var(--color-accent);border-color:var(--color-accent)}
:root[data-theme="dark"] .announce-x{color:var(--color-text);border-color:var(--color-divider)}
:root[data-theme="dark"] .announce-x:hover{background:color-mix(in srgb,var(--color-text) 12%,transparent)}

details.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-family:var(--font);font-weight:800;font-size:20px;color:var(--color-accent)}
details.faq[open] summary::after{content:"–"}
details.faq{padding:20px 0;border-top:2px solid var(--color-divider)}
details.faq:last-child{border-bottom:2px solid var(--color-divider)}
details.faq summary{font-family:var(--font);font-weight:800;font-size:18px}
details.faq p{font-size:15px;line-height:26px;color:color-mix(in srgb,var(--color-text) 78%,transparent);margin:12px 0 0;max-width:62ch}