/* ===========================================================================
 * APY · Strata chrome for the Bitrix template — header bar + footer.
 * The header markup + CSS below are ported 1:1 from the landing page
 * (frontend MainV7) so the Bitrix trading-terminal header is pixel-identical.
 * Everything is scoped to #header / .strata-footer so the trading-terminal
 * page BODIES are left untouched. Dropdowns are click-to-open (hidden by default).
 * =========================================================================== */
:root{
  /* landing token names (used by the header rules below) */
  --bg:#050506; --bg-2:#07070a; --surface:#0e0e12; --surface-2:#121218;
  --hair:rgba(255,255,255,0.08); --hair-strong:rgba(255,255,255,0.14);
  --indigo:#5e6ad2; --indigo-2:#818cf8; --teal:#2dd4bf; --gold:#f59e0b; --gold-2:#fbbf24;
  --text:#ededef; --muted:#8a8f98; --muted-2:#5d626b;
  --display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* legacy aliases kept for the footer block further down */
  --apy-bg:#050506; --apy-bg2:#07070A; --apy-surface:#0E0E12; --apy-surface2:#121218;
  --apy-hair:rgba(255,255,255,0.08); --apy-hair2:rgba(255,255,255,0.14);
  --apy-indigo:#5E6AD2; --apy-indigo2:#818CF8; --apy-teal:#2DD4BF; --apy-gold:#F59E0B; --apy-gold2:#FBBF24;
  --apy-text:#EDEDEF; --apy-muted:#8A8F98; --apy-muted2:#5d626b;
  --apy-display:var(--display); --apy-body:var(--body); --apy-mono:var(--mono);
}

/* ============ HEADER (ported from landing .site-header) ============ */
/* #header is the landing's .site-header; .header-inner is the flex row.
   id-level selectors + !important defeat the old apystyles.css/custom.css rules. */
#header.apy-chrome{
  display:block!important;position:relative;z-index:3000;
  background:rgba(5,6,6,0.92)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair)!important;
  padding:0!important;margin:0!important;min-height:0!important;height:auto!important;
  font-family:var(--body);
}
#header.apy-chrome .header-inner{
  display:flex;align-items:center;gap:18px;height:64px;
  max-width:1280px;margin:0 auto;padding:0 24px;
}
#header.apy-chrome .brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.03em;color:var(--text)!important;text-decoration:none}
#header.apy-chrome .brand:hover{color:var(--text)!important}
#header.apy-chrome .brand svg{display:block;height:26px;width:26px}

/* ---- nav ---- */
#header.apy-chrome .nav-main{display:flex;align-items:center;gap:26px;margin-left:8px}
#header.apy-chrome .nav-main .nav-link{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--body);font-size:14px;
  color:var(--muted)!important;background:none!important;border:0;padding:0;cursor:pointer;
  text-decoration:none;transition:color .18s ease;line-height:1.2;
}
#header.apy-chrome .nav-main .nav-link:hover{color:var(--text)!important}
#header.apy-chrome .nav-caret{opacity:.65}
#header.apy-chrome .nav-has-menu{position:relative;display:inline-flex;align-items:center}

/* ---- dropdowns (nav + lang) — hidden by default, .open reveals on click ---- */
#header.apy-chrome .nav-menu,
#header.apy-chrome .lang-menu{
  position:absolute;top:calc(100% + 12px);min-width:200px;
  background:var(--bg-2)!important;border:1px solid var(--hair);border-radius:12px;
  padding:6px;display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  box-shadow:0 14px 38px rgba(0,0,0,.55);z-index:1200;
}
#header.apy-chrome .nav-menu{left:0}
#header.apy-chrome .lang-menu{right:0;min-width:150px}
#header.apy-chrome .nav-has-menu.open .nav-menu,
#header.apy-chrome .lang-select.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
#header.apy-chrome .nav-menu a,
#header.apy-chrome .lang-opt{
  display:block;width:100%;text-align:left;white-space:nowrap;
  padding:9px 12px;border-radius:8px;font-family:var(--body);font-size:14px;
  color:var(--muted)!important;background:none!important;border:0;cursor:pointer;text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
#header.apy-chrome .nav-menu a:hover,
#header.apy-chrome .lang-opt:hover{background:var(--surface)!important;color:var(--text)!important}
#header.apy-chrome .lang-opt[aria-selected="true"]{color:var(--teal)!important}

/* ---- right cluster ---- */
#header.apy-chrome .header-spacer{flex:1}
#header.apy-chrome .header-auth{display:flex;align-items:center;gap:12px}
#header.apy-chrome .auth-block{display:flex;align-items:center}
#header.apy-chrome .auth-guest,
#header.apy-chrome .auth-user{display:flex;align-items:center;gap:12px}
#header.apy-chrome .auth-user .apy-logout-form{display:contents;margin:0}

/* ---- buttons ---- */
#header.apy-chrome .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-weight:500;font-size:14px;line-height:1.2;
  padding:10px 18px;border-radius:10px;cursor:pointer;border:1px solid transparent;
  transition:all .2s ease;white-space:nowrap;text-decoration:none;
}
#header.apy-chrome .btn-sm{padding:8px 14px;font-size:14px}
#header.apy-chrome .btn-primary{background:linear-gradient(135deg,var(--indigo),var(--indigo-2))!important;color:#fff!important;border-color:rgba(129,140,248,.4)!important}
#header.apy-chrome .btn-primary:hover{filter:brightness(1.08);box-shadow:0 6px 24px -6px rgba(94,106,210,.6)}
#header.apy-chrome .btn-ghost{background:transparent!important;color:var(--text)!important;border-color:var(--hair-strong)!important}
#header.apy-chrome .btn-ghost:hover{background:var(--surface)!important;border-color:var(--indigo-2)!important}
#header.apy-chrome .btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-2))!important;color:#1a1206!important;border-color:rgba(251,191,36,.4)!important}
#header.apy-chrome .btn-gold:hover{filter:brightness(1.06);box-shadow:0 6px 24px -6px rgba(245,158,11,.55)}

/* ---- language pill ---- */
#header.apy-chrome .lang-select{position:relative;display:inline-flex}
#header.apy-chrome .lang-btn{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  background:var(--surface)!important;border:1px solid var(--hair-strong)!important;color:var(--text)!important;
  border-radius:999px;padding:7px 11px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  transition:border-color .18s ease,background .18s ease;
}
#header.apy-chrome .lang-btn:hover{border-color:var(--indigo-2)!important;background:var(--bg-2)!important}
#header.apy-chrome .lang-btn svg{display:block}

/* ---- account / avatar icon ---- */
#header.apy-chrome .acct-icon{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;
  border-radius:999px;background:var(--surface)!important;border:1px solid var(--hair-strong)!important;color:var(--text)!important;
  cursor:pointer;text-decoration:none;transition:border-color .18s ease,background .18s ease;
}
#header.apy-chrome .acct-icon:hover{border-color:var(--teal)!important;background:var(--bg-2)!important}

/* ---- mobile hamburger ---- */
#header.apy-chrome .nav-toggle{display:none;background:var(--surface)!important;border:1px solid var(--hair-strong)!important;color:var(--text)!important;border-radius:10px;padding:9px 12px;cursor:pointer}

@media (max-width:860px){
  #header.apy-chrome .nav-main{display:none}
  #header.apy-chrome .nav-main.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:var(--bg-2)!important;border-bottom:1px solid var(--hair);padding:8px 24px 16px;z-index:1100}
  #header.apy-chrome .nav-main.open .nav-link{padding:12px 0;border-bottom:1px solid var(--hair);width:100%}
  #header.apy-chrome .nav-main.open .nav-has-menu{display:flex;flex-direction:column;align-items:flex-start;width:100%}
  #header.apy-chrome .nav-main.open .nav-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 8px 12px;background:transparent!important}
  #header.apy-chrome .nav-toggle{display:inline-flex}
}
@media (max-width:560px){
  #header.apy-chrome .auth-user .apy-logout-form .btn-ghost,
  #header.apy-chrome .auth-guest .btn-ghost{display:none}
}

/* ============ FOOTER (Strata) ============ */
.strata-footer{
  background:var(--apy-bg2);border-top:1px solid var(--apy-hair);
  padding:56px 0 40px;margin-top:40px;color:var(--apy-text);font-family:var(--apy-body);
}
.strata-footer *{box-sizing:border-box}
.strata-footer .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.strata-footer .foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px}
.strata-footer .foot-brand .brand{display:flex;align-items:center;gap:10px;font-family:var(--apy-display);font-weight:700;font-size:20px;letter-spacing:-0.03em;color:var(--apy-text);text-decoration:none;margin-bottom:14px}
.strata-footer .foot-brand .brand svg{display:block}
.strata-footer .foot-brand p{color:var(--apy-muted);font-size:14px;line-height:1.6;max-width:38ch;margin:0 0 14px}
.strata-footer .foot-brand a.site{color:var(--apy-indigo2);text-decoration:none;font-size:14px}
.strata-footer .foot-brand a.site:hover{text-decoration:underline}
.strata-footer .foot-col h4{font-family:var(--apy-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--apy-muted);font-weight:500;margin:0 0 16px}
.strata-footer .foot-col ul{list-style:none;margin:0;padding:0}
.strata-footer .foot-col li{margin:0}
.strata-footer .foot-col a{display:block;color:var(--apy-muted);font-size:14px;padding:5px 0;text-decoration:none;transition:color .15s ease}
.strata-footer .foot-col a:hover{color:var(--apy-text)}
.strata-footer .foot-social{display:flex;gap:10px;margin-top:18px}
.strata-footer .foot-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:var(--apy-surface);border:1px solid var(--apy-hair2);color:var(--apy-muted);transition:color .18s,border-color .18s,background .18s}
.strata-footer .foot-social a:hover{color:var(--apy-text);border-color:var(--apy-indigo2);background:var(--apy-bg)}
.strata-footer .foot-social svg{width:18px;height:18px;display:block}
.strata-footer .foot-bottom{margin-top:48px;padding-top:28px;border-top:1px solid var(--apy-hair);display:flex;flex-direction:column;gap:14px}
.strata-footer .foot-bottom .disc{font-size:12.5px;color:var(--apy-muted2);line-height:1.7;max-width:95ch}
.strata-footer .foot-bottom .meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--apy-mono);font-size:12px;color:var(--apy-muted)}
.strata-footer .foot-bottom .meta a{color:var(--apy-muted);text-decoration:none}
.strata-footer .foot-bottom .meta a:hover{color:var(--apy-text)}

/* hide the legacy footer remnants if any slip through */
#footer .instr_module,#footer .info{display:none!important}

@media (max-width:980px){
  .strata-footer .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  #header{flex-wrap:wrap;gap:10px;padding:8px 16px}
  #header .header-center{order:3;flex-basis:100%}
  #header .header-center ul{gap:16px;flex-wrap:wrap}
}
@media (max-width:560px){
  .strata-footer .foot-grid{grid-template-columns:1fr}
}