/* Platform background and navigation shell. */
body.dashboard-wallpaper {
  --platform-accent: #fbd9b0;
  padding-top: 188px;
  background-color: #08150f;
  background-image: url('/images/brain-mark-background.svg');
  background-size: max(220vw, 180svh);
  background-position: center calc(100svh - max(110vw, 90svh));
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* Shared drawer, including when opened outside the platform screen. */
#sidebar-menu {
  width: min(370px, 100%);
  padding: 28px;
  color: #f4f1eb;
  border: 1px solid #fbd9b04d;
  border-right: 0;
  border-radius: 28px 0 0 28px;
  background: linear-gradient(145deg, #23372bce, #08150fd9 55%, #102319d4);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  box-shadow: inset 1px 1px 0 #fff0dc15, -16px 0 48px #0005;
  scrollbar-width: thin;
  scrollbar-color: #fbd9b050 transparent;
}
#sidebar-menu[open] { gap: 30px; }
#sidebar-menu::backdrop {
  background: #02090680;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
#sidebar-menu .sidebar-heading { align-items: flex-start; }
#sidebar-menu .sidebar-brand img { display: block; width: 150px; height: auto; }
#sidebar-menu .sidebar-heading h2 {
  margin-top: 18px;
  color: #aebbb2;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.2px;
}
#sidebar-menu .menu-toggle {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid #fbd9b04d;
  border-radius: 50%;
  color: #fbd9b0;
  background: #ffffff05;
  box-shadow: inset 0 1px 0 #fff0dc12;
}
#sidebar-menu .menu-toggle:hover { background: #fbd9b014; border-color: #fbd9b0; }
#sidebar-menu .sidebar-link {
  min-height: 54px;
  padding: 15px 16px;
  border: 1px solid #fbd9b01f;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff06, #ffffff02);
  color: #c3ccc6;
  box-shadow: inset 0 1px 0 #ffffff05;
  letter-spacing: 0;
  font-size: 14px;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
#sidebar-menu .sidebar-link svg { color: #fbd9b0; }
#sidebar-menu .sidebar-link:hover {
  color: #fff3e3;
  border-color: #fbd9b080;
  background: #fbd9b00e;
  transform: translateX(-3px);
}
#sidebar-menu .sidebar-link.active {
  color: #152017;
  border-color: #ffe5c4b3;
  background: linear-gradient(120deg, #ffe5c4e0, #f4cea0d6);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 #fff4e299;
}
#sidebar-menu .sidebar-link.active svg { color: #152017; }
#sidebar-menu .sidebar-extra { margin-top: 0; }
#sidebar-menu .sidebar-group-label { color: #aebbb2; padding-left: 0; font-weight: 400; }
#sidebar-menu .sidebar-tools {
  padding: 6px 0;
  border: 1px solid #fbd9b02e;
  border-radius: 24px;
  background: #ffffff03;
  box-shadow: inset 0 1px 0 #ffffff08;
}
#sidebar-menu .sidebar-tools .sidebar-link { padding-inline: 15px; border-color: transparent; background: transparent; box-shadow: none; }
#sidebar-menu .sidebar-tools .sidebar-link:hover { border-color: #fbd9b080; background: #fbd9b00e; transform: scale(.98); }
#sidebar-menu .sidebar-tools .sidebar-link.active {
  border-color: #ffe5c4b3;
  background: linear-gradient(120deg, #ffe5c4e0, #f4cea0d6);
  box-shadow: inset 0 1px 0 #fff4e299;
}
#sidebar-menu :is(a, button):focus-visible { outline: 2px solid #fbd9b0; outline-offset: 3px; }
@media (max-width: 420px) { #sidebar-menu { padding: 24px 20px; } }
@media (prefers-reduced-motion: reduce) { #sidebar-menu .sidebar-link, #sidebar-menu .sidebar-tools .sidebar-link:hover { transition: none; transform: none; } }
body.dashboard-wallpaper .platform-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 70px 62px;
  gap: 18px;
  height: 188px;
  padding: 22px max(40px, calc((100vw - 1184px) / 2)) 16px;
  align-items: center;
  overflow: visible;
  background: linear-gradient(#08150fe6, #08150f6e);
  border: none;
  box-shadow: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.dashboard-wallpaper .platform-header::before,
body.dashboard-wallpaper .platform-header::after { display: none; }
body.dashboard-wallpaper .platform-header .header-logo { justify-self: start; }
body.dashboard-wallpaper .platform-header .header-logo img { width: 210px; height: auto; filter: none; }
body.dashboard-wallpaper .platform-header > .menu-toggle {
  width: 54px;
  height: 54px;
  padding: 14px;
  color: #e9e6df;
  border: 1px solid #fbd9b066;
  border-radius: 50%;
  background: linear-gradient(135deg, #c0d7c610, #07140d80);
  box-shadow: inset 0 1px 0 #fff0dc19, 0 5px 20px #0002;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  transition: border-color .2s ease, background .2s ease;
}
body.dashboard-wallpaper .platform-header > .menu-toggle svg { width: 26px; height: 26px; }
body.dashboard-wallpaper .platform-header > .menu-toggle:hover { border-color: var(--platform-accent); background: #fbd9b014; }
body.dashboard-wallpaper .platform-header nav {
  grid-column: 1 / -1;
  width: min(600px, 100%);
  justify-self: end;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 7px;
  border: 1px solid #fbd9b07a;
  border-radius: 26px;
  background: linear-gradient(135deg, #c3d9c610, #06150f80 50%, #b6c9b90c);
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  box-shadow: inset 0 1px 0 #fff0dc26, inset 0 -1px 0 #fbd9b00d, 0 8px 30px #0003;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #fbd9b066 transparent;
}
body.dashboard-wallpaper .platform-header nav .nav-btn {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: 100px;
  color: #b9bec1;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.2px;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
body.dashboard-wallpaper .platform-header nav .nav-btn:hover { color: #fff1dd; background: #fbd9b012; box-shadow: inset 0 0 0 1px #fbd9b026; }
body.dashboard-wallpaper .platform-header nav .nav-btn.active {
  background: linear-gradient(120deg, #ffe5c4, #f4cea0);
  color: #101710;
  font-weight: 550;
  box-shadow: inset 0 1px 0 #fff4e299, 0 3px 14px #fbd9b017;
}
body.dashboard-wallpaper .platform-header :is(a, button):focus-visible { outline: 2px solid var(--platform-accent); outline-offset: 2px; }
/* Headings outside retained light panels need contrast against the new background. */
body.dashboard-wallpaper .content-section > h2,
body.dashboard-wallpaper :is(.api-page-heading, .backtest-heading) > h2 { color: #f3e1c6; }
@media (max-width: 768px) {
  body.dashboard-wallpaper { padding-top: 152px; }
  body.dashboard-wallpaper .platform-header {
    height: 152px;
    padding: 16px 20px 12px;
    grid-template-rows: 52px 56px;
    gap: 16px;
  }
  body.dashboard-wallpaper .platform-header .header-logo img { width: 166px; height: auto; }
  body.dashboard-wallpaper .platform-header > .menu-toggle { width: 46px; height: 46px; padding: 11px; }
  body.dashboard-wallpaper .platform-header nav { border-radius: 22px; padding: 5px; gap: 4px; }
  body.dashboard-wallpaper .platform-header nav .nav-btn { min-height: 42px; font-size: 13px; padding: 10px 16px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  body.tradingeye-expanded .platform-header {
    display: flex; height: 64px; padding-block: 8px; gap: 12px;
  }
  body.tradingeye-expanded .platform-header .header-logo img { width: 110px; }
  body.tradingeye-expanded .platform-header > .menu-toggle { width: 38px; height: 38px; padding: 8px; }
  body.tradingeye-expanded .platform-header nav { width: auto; flex: 1; }
  body.tradingeye-expanded .platform-header nav .nav-btn { min-height: 32px; padding: 7px 10px; font-size: 11px; }
}

/* Use one row when the logo, existing tabs and menu comfortably fit. */
@media (min-width: 960px) {
  body.dashboard-wallpaper { padding-top: 108px; }
  body.dashboard-wallpaper .platform-header {
    grid-template-columns: 190px minmax(0, 1fr) 54px;
    grid-template-rows: 62px;
    height: 108px;
    column-gap: 12px;
    padding-block: 22px 24px;
  }
  body.dashboard-wallpaper .platform-header .header-logo { grid-column: 1; grid-row: 1; }
  body.dashboard-wallpaper .platform-header .header-logo img { width: 190px; }
  body.dashboard-wallpaper .platform-header nav { grid-column: 2; grid-row: 1; justify-self: end; }
  body.dashboard-wallpaper .platform-header > .menu-toggle { grid-column: 3; grid-row: 1; }
  body.dashboard-wallpaper .platform-header nav .nav-btn { padding-inline: 16px; font-size: 14px; }
}
body.dashboard-wallpaper .glass-date > .glass-date-trigger {
  color: #e3e8e2; background: #10251bd0; border-color: #a7bfad40; box-shadow: inset 0 1px 0 #fff0dc12;
}
body.dashboard-wallpaper .glass-date > .glass-date-trigger:hover:not(:disabled) { color: #fbd9b0; background: #1b3024d9; }
body.dashboard-wallpaper .glass-date-trigger:focus-visible { outline-color: #fbd9b0; }

/* A diffuse reflection brightens the original mark as it moves inward. */
@property --brain-glint-radius {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 96%;
}
.brain-logo-shimmer { position: relative; display: inline-block; vertical-align: middle; line-height: 0; max-width: 100%; isolation: isolate; }
.brain-logo-shimmer::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url('/images/brain-logo.png') center / 100% 100% no-repeat;
  mask: url('/images/brain-logo.png') center / 100% 100% no-repeat;
  clip-path: inset(15% 68% 16% 4%);
  mix-blend-mode: screen;
  background: radial-gradient(ellipse 13% 33% at 17.7% 49.5%,
    transparent calc(var(--brain-glint-radius) - 36%),
    #fff0d930 calc(var(--brain-glint-radius) - 22%),
    #fff8edb3 var(--brain-glint-radius),
    #fff0d940 calc(var(--brain-glint-radius) + 20%),
    transparent calc(var(--brain-glint-radius) + 36%));
  opacity: 0;
}
.brain-logo-shimmer.is-shimmering::after {
  animation: brain-mark-glint 1.2s ease-in-out both;
}
@keyframes brain-mark-glint {
  0% { --brain-glint-radius: 103%; opacity: 0; }
  18% { opacity: .665; }
  70% { opacity: .595; }
  100% { --brain-glint-radius: 0%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .brain-logo-shimmer.is-shimmering::after { animation: none; opacity: 0; }
}