/* плавность всего сайта: одна мягкая кривая без «пружины» */
:root{--ease:cubic-bezier(.33,1,.68,1);--ease-io:cubic-bezier(.65,0,.35,1)}
/* Общая шапка сайта - подключается на всех страницах, стили изолированы префиксом .site-top */
.site-top{position:sticky;top:0;z-index:70;flex:none;display:flex;align-items:center;gap:18px;height:56px;padding:0 20px;
  background:rgba(5,7,5,.97);border-bottom:1px solid #1E2A12;
  font:500 13px/1 "JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;color:#E6F2D2;box-sizing:border-box}
.site-top *{box-sizing:border-box}
.site-top a{text-decoration:none;color:inherit}
.site-top .st-logo{display:flex;align-items:center;gap:10px;flex:none}
.site-top .st-logo svg{display:block;filter:drop-shadow(0 0 10px rgba(182,255,0,.35))}
.site-top .st-wm{font:800 17px/1 "Unbounded","Arial Black",system-ui,sans-serif;color:#B6FF00;letter-spacing:-.02em;
  text-shadow:0 0 4px rgba(182,255,0,.9),0 0 14px rgba(182,255,0,.55),0 0 34px rgba(182,255,0,.3)}
.site-top .st-links{display:flex;align-items:center;gap:4px;margin-left:10px}
.site-top .st-links a{display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:7px;color:#8A9878;transition:color .18s ease-out,background .18s ease-out}
.site-top .st-links a:hover{color:#E6F2D2;background:#111809}
.site-top .st-links a.on{color:#B6FF00;background:rgba(182,255,0,.08);box-shadow:inset 0 0 0 1px #33481A;text-shadow:0 0 10px rgba(182,255,0,.5)}
.site-top .st-links a svg{opacity:.55;flex:none}
.site-top .st-user{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
.site-top .st-acc{display:flex;align-items:center;gap:9px;padding:4px 10px 4px 4px;border-radius:9px;border:1px solid transparent;min-width:0}
.site-top .st-acc:hover{border-color:#33481A;background:#111809}
.site-top .st-acc i{width:28px;height:28px;flex:none;border-radius:7px;background:#B6FF00;color:#050705;display:grid;place-items:center;
  font:800 12px/1 "Unbounded",system-ui,sans-serif;font-style:normal;box-shadow:0 0 14px -4px #B6FF00}
.site-top .st-acc span{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-top .st-out,.site-top .st-btn{font:inherit;cursor:pointer;border-radius:7px;padding:9px 14px;white-space:nowrap;line-height:1}
.site-top .st-out{background:transparent;border:1px solid #33481A;color:#8A9878}
.site-top .st-out:hover{color:#FF3B4E;border-color:rgba(255,59,78,.5)}
.site-top .st-btn{background:#B6FF00;color:#050705;font-weight:700;border:1px solid #B6FF00;box-shadow:0 0 18px -6px #B6FF00}
.site-top .st-btn:hover{filter:brightness(1.08)}
.site-top .st-btn.ghost{background:transparent;color:#E6F2D2;border-color:#33481A;box-shadow:none;font-weight:500}
.site-top .st-btn.ghost:hover{border-color:#B6FF00;color:#B6FF00}
.site-top .st-burger{display:none;place-items:center;width:38px;height:38px;flex:none;background:transparent;border:1px solid #33481A;border-radius:8px;color:#E6F2D2;cursor:pointer;padding:0}
.site-top :focus-visible{outline:2px solid #B6FF00;outline-offset:2px}
@media (max-width:1180px){
  .site-top{padding:0 14px;gap:10px}
  .site-top .st-burger{display:grid}
  .site-top .st-links{display:flex;position:absolute;top:56px;left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:2px;
    padding:10px 14px 14px;background:#080B06;border-bottom:1px solid #1E2A12;box-shadow:0 24px 40px -20px #000;
    visibility:hidden;opacity:0;transform:translateY(-10px);pointer-events:none;
    transition:opacity .45s var(--ease),transform .3s var(--ease),visibility 0s .45s var(--ease)}
  .site-top.open .st-links{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:opacity .45s var(--ease),transform .3s var(--ease)}
  .site-top.open .st-links a{animation:fx-item .4s var(--ease) backwards}
  .site-top.open .st-links a:nth-child(2){animation-delay:.03s}.site-top.open .st-links a:nth-child(3){animation-delay:.06s}
  .site-top.open .st-links a:nth-child(4){animation-delay:.09s}.site-top.open .st-links a:nth-child(5){animation-delay:.12s}
  .site-top.open .st-links a:nth-child(6){animation-delay:.15s}.site-top.open .st-links a:nth-child(n+7){animation-delay:.18s}
  .site-top .st-links a{padding:13px 12px}
  .site-top .st-acc span{display:none}
  .site-top .st-acc{padding:4px}
}
@media (max-width:480px){
  .site-top .st-reg{display:none}
  .site-top .st-wm{font-size:15px}
  .site-top .st-out{padding:9px 10px}
}
@media (max-width:360px){.site-top .st-wm{display:none}.site-top{gap:6px}}  /* очень узкие экраны: остаётся только значок логотипа */

/* ---------- тактильный отклик: работает на всех страницах ---------- */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
:where(button,a,[role=button],[role=radio],.nav-i,.chip,.day,.toggle,.item){touch-action:manipulation}
:where(.btn,.st-btn,.st-out,.st-burger,.st-acc,.st-links a,.send,.new,.save,.mini,.l-chip,.chip,.seg button,.tfs button,.brokers button,
  .tabs a,.nav-i,.item,.quick button,.foot button,.arrows button,.dots button,.lnk,.icon-btn,.arw,.eq-tabs button,.gear,.tg-link,.p-links a,[data-press]){
  transition:transform .2s var(--ease),filter .18s ease-out,background-color .18s ease-out,border-color .18s ease-out,color .18s ease-out,box-shadow .18s ease-out}
@media (prefers-reduced-motion:no-preference){
:where(.btn,.st-btn,.st-out,.st-burger,.st-acc,.st-links a,.send,.new,.save,.mini,.l-chip,.chip,.seg button,.tfs button,.brokers button,
  .tabs a,.nav-i,.item,.quick button,.foot button,.arrows button,.dots button,.lnk,.icon-btn,.arw,.eq-tabs button,.gear,.tg-link,.p-links a,[data-press]):active:not(:disabled){
  transform:scale(.97)!important;filter:brightness(1.12)}
:where(.tool,.svc-card,.brk,.day,.toggle):active{transform:scale(.985)!important;transition:transform .22s var(--ease)}
}
.fx-ripple{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);opacity:1;
  background:radial-gradient(circle,rgba(182,255,0,.42) 0%,rgba(182,255,0,.14) 38%,transparent 70%);animation:fx-ripple .85s var(--ease) forwards}
:where(.btn:not(.ghost):not(.danger),.st-btn:not(.ghost),.send,.save,.btn.primary) .fx-ripple{background:radial-gradient(circle,rgba(255,255,255,.6) 0%,rgba(255,255,255,.2) 38%,transparent 70%)}
@keyframes fx-ripple{to{transform:scale(1);opacity:0}}
.tg-link{color:#B6FF00;text-decoration:none;font-weight:600;border-bottom:1px dashed rgba(182,255,0,.5);white-space:nowrap}
.tg-link:hover{border-bottom-style:solid;text-shadow:0 0 10px rgba(182,255,0,.6)}
/* лёгкое появление страницы (backwards - после анимации на main не остаётся transform, модалки и тосты не съезжают) */
@keyframes fx-page{from{opacity:0;transform:translateY(6px)}}
@keyframes fx-item{from{opacity:0;transform:translateX(-8px)}}
body>main,body>.app>.body,.auth-card{animation:fx-page 1.1s var(--ease) backwards}
/* бургер превращается в крестик */
.site-top .st-burger path{transition:d .45s var(--ease)}
.site-top.open .st-burger path{d:path("M6 6L18 18M12 12L12 12M6 18L18 6")}
/* ссылки шапки: мягкий переход подсветки */
.site-top .st-links a{transition:color .18s ease-out,background .18s ease-out,box-shadow .18s ease-out}

/* ---------- плавное появление блоков на всех страницах ----------
   site.js вешает .fx на карточки и панели и включает .fx-on, когда блок попал в экран (с небольшой очередью);
   после появления классы снимаются, чтобы вернуть карточкам их собственные ховеры */
.fx{opacity:0;transform:translateY(10px);transition:opacity 1.3s var(--ease),transform 1.5s var(--ease)!important;transition-delay:var(--fx-d,0ms)!important}
.fx.fx-on{opacity:1;transform:none}
/* заголовки страниц проявляются из размытия - как HESOYAM на главной */
@keyframes fx-title{from{opacity:0;transform:translateY(6px)}}
:where(.a-title,.l-title,.lib-head h1,.tr-head h1,.acc-head h1,.auth-card h1,.auth-side .wm,.cover .word){animation:fx-title 1.6s var(--ease) .1s backwards}
/* вкладки и разделы, которые переключаются без перезагрузки */
@keyframes fx-fade{from{opacity:0;transform:translateY(5px)}}
.fx-view>*{animation:fx-fade 1s var(--ease) backwards;animation-delay:calc(var(--fx-i,0) * 70ms)}

/* ---------- телефоны ---------- */
.site-top{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
@media (max-width:860px){
  input,select,textarea{font-size:16px!important}          /* iPhone не увеличивает страницу при фокусе на поле */
  .site-top{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
}
@media (pointer:coarse){
  .site-top .st-burger{width:44px;height:44px}
  .site-top .st-out,.site-top .st-btn{min-height:42px;display:inline-flex;align-items:center}
  .site-top .st-acc i{width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){
  .fx-ripple{display:none}
  body>main,body>.app>.body,.auth-card,.site-top.open .st-links a,.fx-view>*{animation:none}
  :where(.a-title,.l-title,.lib-head h1,.tr-head h1,.acc-head h1,.auth-card h1,.auth-side .wm,.cover .word){animation:none}
  .fx{opacity:1;transform:none}
  .site-top .st-links{transition:none}
}

/* ---------- плавный переход между страницами ----------
   браузер сам перетекает со старой страницы на новую (Safari 18.2+, Chrome 126+), шапка при этом стоит на месте.
   Там, где это работает, свои эффекты появления страницы и заголовка не включаем - иначе они накладываются и переход рвётся */
@view-transition{navigation:auto}
.site-top{view-transition-name:site-top}
/* старая страница остаётся под новой целиком, а новая проявляется поверх: промежуточного полупрозрачного «пустого» кадра нет */
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:vt-in .3s var(--ease) both}
@keyframes vt-in{from{opacity:0}}
::view-transition-group(site-top){animation-duration:.3s}
@supports (view-transition-name:none){
  body>main,body>.app>.body,.auth-card{animation:none}
  :where(.a-title,.l-title,.lib-head h1,.tr-head h1,.acc-head h1,.auth-card h1,.auth-side .wm,.cover .word){animation:none}
}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}