/* One responsive Bonfium header shared by the homepage and every app page. */
.bf-nav-shell{
  --bf-nav-ink:#0f1519;--bf-nav-sub:#66737e;--bf-nav-line:#dfe5e9;
  --bf-nav-soft:#f3f5f6;--bf-nav-gold:#ffc63d;--bf-nav-teal:#008f7c;
  position:sticky;top:14px;z-index:300;margin:14px 0 0;padding:0 clamp(14px,3.2vw,64px);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.bf-nav-shell *{box-sizing:border-box}
.bf-nav{
  position:relative;z-index:2;
  width:min(1560px,100%);min-height:66px;margin:0 auto;padding:8px 10px 8px 24px;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;
  border:1px solid var(--bf-nav-line);border-radius:999px;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.7) blur(18px);backdrop-filter:saturate(1.7) blur(18px);
  box-shadow:0 1px 2px rgba(15,21,25,.04),0 14px 34px -16px rgba(15,21,25,.30);
}
.bf-nav-shell.bf-drawer-open .bf-nav{
  background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 1px 2px rgba(15,21,25,.06),0 18px 40px -18px rgba(15,21,25,.45);
}
.bf-nav-logo{display:inline-flex;align-items:center;flex-shrink:0;text-decoration:none}
.bf-nav-logo svg{display:block;width:140px;height:auto}
.bf-nav-primary{min-width:0;display:flex;align-items:center;justify-content:center;gap:2px;overflow:hidden}
.bf-nav-primary>a{
  color:var(--bf-nav-sub);text-decoration:none;font-size:14px;font-weight:600;line-height:1.2;
  padding:10px 13px;border-radius:999px;white-space:nowrap;transition:background .14s,color .14s;
}
.bf-nav-primary>a:hover,.bf-nav-primary>a.bf-nav-active{color:var(--bf-nav-ink);background:var(--bf-nav-soft)}
.bf-nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;flex:0 1 auto}
.bf-nav-menu{position:relative;display:inline-flex;min-width:0;flex:0 1 auto}
.bf-nav-icon,.bf-account-button,.bf-nav-burger{
  appearance:none;border:1px solid var(--bf-nav-line);background:#fff;color:var(--bf-nav-ink);font:inherit;cursor:pointer;
}
.bf-nav-icon{height:42px;min-width:42px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px}
.bf-nav-icon>span{font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--bf-nav-sub)}
.bf-account-button{
  height:42px;max-width:170px;padding:0 13px 0 15px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:750;white-space:nowrap;
}
.bf-account-button>span{overflow:hidden;text-overflow:ellipsis}
.bf-account-button em,.bf-drawer-identity em{font-style:normal;color:var(--bf-nav-teal);font-weight:850}
.bf-account-button:hover,.bf-nav-icon:hover{background:var(--bf-nav-soft)}
.bf-nav-login{padding:10px 8px;color:var(--bf-nav-ink);font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap}
.bf-nav-cta,.bf-nav-menu>button.bf-nav-cta{
  min-height:42px;padding:0 19px;border:0;border-radius:999px;background:var(--bf-nav-ink);color:#fff;
  box-shadow:0 6px 16px -8px rgba(15,21,25,.5);display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:700 13.5px/1 'Inter',sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;
}
.bf-nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(15,21,25,.55), 0 0 0 3px rgba(255,198,61,.28)}
.bf-nav-popover{
  position:absolute;right:0;top:calc(100% + 10px);z-index:330;display:none;min-width:220px;padding:8px;
  border:1px solid var(--bf-nav-line);border-radius:14px;background:#fff;box-shadow:0 18px 44px -18px rgba(15,21,25,.32);
}
.bf-nav-popover.bf-open{display:block;animation:bf-pop-in .16s cubic-bezier(.2,.7,.3,1) both}
@keyframes bf-pop-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.bf-nav-popover.bf-open{animation:none}}
.bf-nav-popover a,.bf-nav-popover button{
  width:100%;border:0;background:none;color:var(--bf-nav-ink);font:650 13.5px/1.3 'Inter',sans-serif;text-align:left;
  text-decoration:none;padding:10px 11px;border-radius:9px;cursor:pointer;display:block;
}
/* .bf-nav-row: the plain single-line links (Profile, Security, Admin…), which
   carry an icon and so need a horizontal layout. Left as a separate class
   rather than changed on .bf-nav-popover a itself, because the start-trade
   and language rows above are the same element with a stacked <b>+<span>
   title/subtitle instead — those need to stay display:block, or the two
   lines would sit side by side. */
.bf-nav-popover a.bf-nav-row,.bf-drawer-group a{display:flex;align-items:center;gap:11px}
/* Icons make a settings list read as a menu. Fixed width and a muted tint by
   default so the row's own text still carries the weight; the active/hover
   states below darken it along with the text, in step. */
.bf-nav-ic{flex:0 0 auto;color:var(--bf-nav-sub)}
.bf-nav-popover a:hover .bf-nav-ic,.bf-nav-popover a.bf-nav-active .bf-nav-ic,
.bf-drawer-group a:hover .bf-nav-ic,.bf-drawer-group a.bf-nav-active .bf-nav-ic{color:var(--bf-nav-ink)}
.bf-nav-popover a:hover,.bf-nav-popover button:hover,.bf-nav-popover a.bf-nav-active{background:var(--bf-nav-soft)}
.bf-nav-popover a>b,.bf-nav-popover a>span,.bf-nav-choice-disabled>b,.bf-nav-choice-disabled>span{display:block}
.bf-nav-popover a>span,.bf-nav-choice-disabled>span{margin-top:3px;color:var(--bf-nav-sub);font-size:11.5px;font-weight:500;line-height:1.45}
.bf-nav-choice-disabled{padding:10px 11px;border-radius:9px;color:var(--bf-nav-sub);font-size:13.5px;line-height:1.3;opacity:.62;cursor:not-allowed}
.bf-start-popover{min-width:276px}
.bf-language-popover{min-width:184px}
.bf-language-popover button{display:flex;align-items:center;gap:10px}
.bf-language-popover button b{min-width:22px;color:var(--bf-nav-sub);font-size:10.5px;letter-spacing:.05em}
.bf-language-popover button[aria-current=true]{background:#fff6dc}
.bf-account-heading{padding:7px 11px 10px;border-bottom:1px solid var(--bf-nav-line);margin-bottom:5px}
.bf-account-heading b,.bf-account-heading span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bf-account-heading b{font-size:13.5px}.bf-account-heading span{color:var(--bf-nav-sub);font-size:11px;margin-top:3px}
.bf-nav-popover-separator{height:1px;background:var(--bf-nav-line);margin:5px 2px}
/* Logging out is a POST, so it is a form. It must still read as a menu row. */
.bf-nav-logout,.bf-drawer-logout{margin:0}
.bf-nav-logout button,.bf-drawer-logout button{
  width:100%;border:0;background:none;color:var(--bf-nav-ink);text-align:left;cursor:pointer;
  font:650 13.5px/1.3 'Inter',sans-serif;padding:10px 11px;border-radius:9px;
}
.bf-nav-logout button:hover,.bf-drawer-logout button:hover{background:var(--bf-nav-soft)}
.bf-drawer-logout button{padding:12px 13px;border-radius:10px;font-size:14px}
/* flex-shrink:0 matters at 320px: without it the account button squeezed the
   burger down to 22px wide and the menu became hard to hit. */
.bf-nav-burger{display:none;position:relative;width:42px;height:42px;border-radius:999px;padding:0;flex:0 0 auto}
.bf-nav-burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--bf-nav-ink);border-radius:4px;transition:.18s}
.bf-nav-burger span:nth-child(1){top:14px}.bf-nav-burger span:nth-child(2){top:20px}.bf-nav-burger span:nth-child(3){top:26px}
.bf-nav-burger[aria-expanded=true] span:nth-child(1){top:20px;transform:rotate(45deg)}
.bf-nav-burger[aria-expanded=true] span:nth-child(2){opacity:0}
.bf-nav-burger[aria-expanded=true] span:nth-child(3){top:20px;transform:rotate(-45deg)}

/* ---------------------------------------------------------------- drawer
   The drawer is the pill continued downwards: same translucency, same blur,
   same hairline border and radius. It sits BELOW .bf-nav-shell (z-index 300)
   on purpose, so the pill and its burger stay above it and the burger is a
   real, directly clickable close control rather than something the backdrop
   handler catches by accident.

   One inset governs everything. --bf-drawer-gap is the panel's own padding and
   --bf-drawer-row is the padding inside each row, so every piece of text in
   the panel — the heading, the plain links, the card titles — starts at the
   same distance from the panel edge. They used to start at three different
   ones (52px, 48px and 74px), which is what made it look untidy.            */
.bf-nav-drawer{
  --bf-drawer-gap:12px;--bf-drawer-row:12px;
  position:fixed;inset:0;z-index:1;display:none;
  background:rgba(15,21,25,.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  padding:84px 14px 14px;overflow:auto;
}
.bf-nav-drawer.bf-open{display:block}
.bf-nav-drawer-panel{
  width:min(460px,100%);max-height:calc(100dvh - 98px);margin:0 auto;overflow:auto;
  padding:var(--bf-drawer-gap);
  background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:saturate(1.7) blur(22px);backdrop-filter:saturate(1.7) blur(22px);
  border:1px solid rgba(255,255,255,.65);border-radius:24px;
  box-shadow:0 1px 2px rgba(15,21,25,.04),0 30px 70px -26px rgba(15,21,25,.42);
  animation:bf-drawer-in .18s ease-out both;
}
@keyframes bf-drawer-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Heading text lines up with the row text below it. */
.bf-nav-drawer-top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  /* +1px matches the 1px border on the rows below, so the heading lines up. */
  padding:6px calc(var(--bf-drawer-row) + 1px) 14px;
}
.bf-drawer-identity{min-width:0}
.bf-drawer-identity b,.bf-drawer-identity span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bf-drawer-identity b{font-size:16px;letter-spacing:-.2px}
.bf-drawer-identity span{font-size:12px;color:var(--bf-nav-sub);margin-top:2px}
.bf-nav-drawer-top>b{font-size:16px;letter-spacing:-.2px}

/* Hairlines rather than borders: quieter against a translucent surface. */
.bf-drawer-group{display:grid;gap:2px;padding:8px 0;border-top:1px solid rgba(15,21,25,.09)}
.bf-drawer-group:first-of-type{border-top:0;padding-top:0}
/* Rows arrive one after another rather than as one flat block, so opening the
   drawer reads as a menu unfolding rather than a page loading. Delays are set
   with an inline custom property per row (below) rather than nth-child, so
   the count is never out of step with however many rows a group actually
   renders for this user (fewer for a guest, more for an admin). */
.bf-nav-drawer-panel .bf-drawer-group>a,.bf-nav-drawer-panel .bf-drawer-trades>a,
.bf-nav-drawer-panel .bf-drawer-cta,.bf-nav-drawer-panel .bf-drawer-login,
.bf-nav-drawer-panel .bf-drawer-logout{
  animation:bf-row-in .32s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--row-i,0) * 28ms + 60ms);
}
@keyframes bf-row-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .bf-nav-drawer-panel .bf-drawer-group>a,.bf-nav-drawer-panel .bf-drawer-trades>a,
  .bf-nav-drawer-panel .bf-drawer-cta,.bf-nav-drawer-panel .bf-drawer-login,
  .bf-nav-drawer-panel .bf-drawer-logout{animation:none}
}
.bf-drawer-group a,.bf-drawer-logout button{
  display:flex;align-items:center;min-height:46px;padding:11px var(--bf-drawer-row);
  /* The trade cards below carry a 1px border, which pushed their text one pixel
     further in than these rows. A transparent border here makes the two box
     models identical so every line of text starts on the same pixel. */
  border:1px solid transparent;
  border-radius:12px;color:var(--bf-nav-ink);text-decoration:none;font-size:14.5px;font-weight:650;
  width:100%;background:none;text-align:left;font-family:inherit;cursor:pointer;
}
.bf-drawer-group a:hover,.bf-drawer-group a.bf-nav-active,.bf-drawer-logout button:hover{
  background:rgba(15,21,25,.055);
}
.bf-drawer-group a.bf-nav-active{font-weight:750}

.bf-drawer-trades{display:grid;grid-template-columns:1fr;gap:7px;padding:8px 0;border-top:1px solid rgba(15,21,25,.09)}
.bf-drawer-trades a,.bf-drawer-choice-disabled{
  padding:12px var(--bf-drawer-row);border:1px solid rgba(15,21,25,.10);border-radius:14px;
  background:rgba(255,255,255,.55);color:var(--bf-nav-ink);text-decoration:none;
  transition:background .14s,border-color .14s;
}
.bf-drawer-trades a:hover{background:#fff;border-color:var(--bf-nav-ink)}
.bf-drawer-trades b,.bf-drawer-trades span,
.bf-drawer-choice-disabled b,.bf-drawer-choice-disabled span{display:block}
.bf-drawer-trades b,.bf-drawer-choice-disabled b{font-size:14.5px}
.bf-drawer-trades span,.bf-drawer-choice-disabled span{
  font-size:12px;color:var(--bf-nav-sub);line-height:1.4;margin-top:2px;
}
/* Unavailable, and it should look it: no white surface, no hover, no pointer. */
.bf-drawer-choice-disabled{
  background:rgba(15,21,25,.04);border-style:dashed;cursor:not-allowed;
}
.bf-drawer-choice-disabled b{color:var(--bf-nav-sub)}

.bf-drawer-cta,.bf-drawer-login{
  display:flex;align-items:center;justify-content:center;min-height:48px;
  padding:12px 16px;border-radius:14px;text-decoration:none;font-size:14.5px;
}
.bf-drawer-cta{margin:10px 0 6px;background:var(--bf-nav-ink);color:#fff;font-weight:750;
  box-shadow:0 6px 16px -8px rgba(15,21,25,.5)}
.bf-drawer-login{color:var(--bf-nav-ink);font-weight:650;border:1px solid rgba(15,21,25,.12);
  background:rgba(255,255,255,.55)}
.bf-drawer-login:hover{background:#fff;border-color:var(--bf-nav-ink)}

.bf-drawer-languages{
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
  margin-top:8px;padding-top:12px;border-top:1px solid rgba(15,21,25,.09);
}
.bf-drawer-languages button{
  min-height:40px;border:1px solid rgba(15,21,25,.10);background:rgba(255,255,255,.55);
  border-radius:12px;font:750 12px 'Inter',sans-serif;color:var(--bf-nav-sub);cursor:pointer;
}
.bf-drawer-languages button:hover{background:#fff;color:var(--bf-nav-ink)}
.bf-drawer-languages button[aria-current=true]{background:#fff6dc;border-color:#efc75e;color:var(--bf-nav-ink)}

@media(max-width:1180px){
  .bf-nav-primary{display:none}.bf-nav-burger{display:block}
}
@media(max-width:860px){
  .bf-nav-shell{top:8px;margin-top:8px;padding:0 10px}.bf-nav{min-height:60px;padding:7px 8px 7px 17px;gap:8px}
  .bf-nav-logo svg{width:122px}.bf-nav-actions{gap:6px}
  /* The base rule below uses .bf-nav-menu>button.bf-nav-cta, which outranks a
     plain .bf-nav-cta selector no matter which media query it sits in — so the
     CTA stayed visible on phones and crowded the burger. Match that weight. */
  .bf-nav-cta,.bf-nav-menu>button.bf-nav-cta{display:none}
}
@media(max-width:620px){
  .bf-nav{grid-template-columns:auto 1fr}.bf-nav-language,.bf-nav-login{display:none}
  .bf-account-button{height:40px;max-width:126px;padding:0 10px 0 12px;font-size:12.5px}
  .bf-nav-burger{width:40px;height:40px}
  /* Keep a real backdrop strip on either side so it is obvious the panel is a
     layer over the page, and so there is somewhere to tap that is not a link. */
  .bf-nav-drawer{padding:72px 12px 12px}
  .bf-nav-drawer-panel{max-height:calc(100dvh - 84px);width:100%;border-radius:20px}
}
@media(max-width:360px){
  .bf-nav-drawer{--bf-drawer-gap:10px;--bf-drawer-row:11px;padding:68px 8px 8px}
  .bf-drawer-languages{gap:4px}
  .bf-drawer-languages button{font-size:11px;min-height:38px}
}
/* The panel animates in; honour a request for less motion. */
@media(prefers-reduced-motion:reduce){.bf-nav-drawer-panel{animation:none}}
@media(max-width:390px){
  .bf-nav-logo svg{width:108px}.bf-account-button{max-width:112px}.bf-drawer-trades{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.bf-nav-shell *{scroll-behavior:auto!important;transition:none!important}}