/*
  Portfo-Leo visual skin.
  This file is intentionally CSS-only: it must not change app structure,
  routes, workflows or feature behavior from the original GUI.
*/

:root {
  --pm-bg: #030404;
  --pm-surface: #0b0d0d;
  --pm-panel: #101212;
  --pm-panel-2: #151818;
  --pm-border: #242a2a;
  --pm-border-soft: #191d1d;
  --pm-text: #dce2e2;
  --pm-muted: #899292;
  --pm-panel-rgb: 16, 18, 18;
  --pm-panel-2-rgb: 21, 24, 24;
  --pm-cyan: #00d7ff;
  --pm-green: #19e06f;
  --pm-amber: #ffad22;
  --pm-red: #ff3f4e;
  --pm-shadow: 0 28px 90px rgba(0, 0, 0, .58);
  --pl-bg-image: url("/studio-static/img/backgrounds/leo-luxe-gold.jpg");
  --pl-bg-size: 520px 520px;
  --pl-surface-alpha: .86;
  --pl-surface-alpha-strong: .92;
  --pl-surface-alpha-soft: .70;
  --pl-secondary: #f59e0b;
  --pl-secondary-rgb: 245, 158, 11;
}

html,
body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 184, 76, .18), transparent 34%),
    radial-gradient(ellipse at 86% 10%, rgba(0, 215, 255, .08), transparent 28%),
    linear-gradient(90deg, rgba(0, 0, 0, .86), rgba(0, 0, 0, .42) 20%, rgba(0, 0, 0, .44) 74%, rgba(0, 0, 0, .88)),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.48) 280px, rgba(0,0,0,.82)),
    var(--pl-bg-image),
    var(--pm-bg) !important;
  background-size: auto, auto, auto, auto, var(--pl-bg-size), auto !important;
  background-position: center top, right top, center, center, center top, center !important;
  background-attachment: fixed !important;
  color: var(--pm-text) !important;
  letter-spacing: 0 !important;
}

.pl-skin-rail {
  display: none;
}

@media (min-width: 768px) {
  body {
    padding-left: 112px !important;
  }

  body > nav.pm-navbar,
  .navbar.pm-navbar.d-none.d-lg-block,
  .pm-navbar.d-none.d-lg-block,
  #mobTabBar {
    display: none !important;
  }

  .pl-skin-rail {
    position: fixed;
    z-index: 1020;
    inset: 0 auto 0 0;
    width: 112px;
    display: flex;
    flex-direction: column;
    background:
      radial-gradient(18px 12px at 24px 48px, rgba(255, 183, 70, .30) 0 29%, rgba(55, 31, 12, .70) 32% 48%, transparent 51%),
      radial-gradient(14px 10px at 84px 102px, rgba(255, 190, 80, .22) 0 28%, rgba(51, 29, 11, .62) 31% 47%, transparent 50%),
      radial-gradient(16px 11px at 78px 24px, rgba(191, 107, 29, .18) 0 28%, rgba(39, 22, 9, .58) 31% 46%, transparent 50%),
      linear-gradient(180deg, #111313 0%, #070808 54%, #030404 100%);
    background-size: 122px 118px, 122px 118px, 122px 118px, auto;
    border-right: 1px solid rgba(var(--pl-secondary-rgb), .28);
    box-shadow: 16px 0 60px rgba(0, 0, 0, .44);
  }

  .pl-rail-brand {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 12px 8px 10px;
    color: var(--pm-text) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }

  .pl-rail-brand img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255, 173, 34, .52);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .72), 0 0 28px rgba(255, 173, 34, .16);
  }

  .pl-rail-brand span {
    max-width: 94px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1;
  }

  .pl-rail-scroll {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 8px 12px;
  }

  .pl-rail-scroll::-webkit-scrollbar {
    width: 5px;
  }

  .pl-rail-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 215, 255, .26);
    border: 0;
  }

  .pl-rail-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
  }

  .pl-rail-group:last-child {
    border-bottom: 0;
  }

  .pl-rail-item {
    position: relative;
    width: 100%;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 5px;
    border: 0;
    border-radius: 0;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .045), transparent 70%);
    color: #8d9898 !important;
    text-decoration: none !important;
    box-shadow: none;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease;
  }

  .pl-rail-item::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    transition: background-color .14s ease, box-shadow .14s ease, opacity .14s ease;
  }

  .pl-rail-item::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    border: 1px solid transparent;
    pointer-events: none;
    opacity: 0;
    transition: opacity .14s ease;
  }

  button.pl-rail-item {
    font: inherit;
    cursor: pointer;
  }

  .pl-rail-submenu {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .pl-rail-submenu-toggle {
    min-height: 48px;
  }

  .pl-rail-submenu-toggle b {
    position: absolute;
    right: 8px;
    top: 10px;
    width: 6px;
    height: 6px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    opacity: .62;
    transform: rotate(45deg);
    transition: transform .14s ease, opacity .14s ease;
  }

  .pl-rail-submenu.is-collapsed .pl-rail-submenu-toggle b {
    transform: rotate(-45deg);
  }

  .pl-rail-submenu-panel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0 4px 14px;
    border-left: 1px solid rgba(255, 255, 255, .06);
  }

  .pl-rail-submenu.is-collapsed .pl-rail-submenu-panel {
    display: none;
  }

  .pl-rail-subitem {
    position: relative;
    width: 100%;
    min-height: 28px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    padding: 4px 4px 4px 0;
    border: 0;
    background: transparent;
    color: #8f9999 !important;
    font: inherit;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
  }

  .pl-rail-subitem::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 999px;
    background: transparent;
  }

  .pl-rail-subitem i {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 215, 255, .72) !important;
    font-size: .72rem;
    line-height: 1;
  }

  .pl-rail-subitem span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .54rem;
    font-weight: 700;
    line-height: 1;
  }

  .pl-rail-subitem:hover,
  .pl-rail-subitem:focus-visible {
    color: var(--pm-text) !important;
    outline: none;
  }

  .pl-rail-subitem:hover i,
  .pl-rail-subitem:focus-visible i {
    color: #dffbff !important;
  }

  .pl-rail-subitem.is-current,
  .pl-rail-subitem[aria-current="page"] {
    color: #ffffff !important;
  }

  .pl-rail-subitem.is-current::before,
  .pl-rail-subitem[aria-current="page"]::before {
    background: linear-gradient(180deg, var(--pm-cyan), var(--pl-secondary));
    box-shadow: 0 0 12px rgba(0, 215, 255, .45);
  }

  .pl-rail-subitem.is-current i,
  .pl-rail-subitem[aria-current="page"] i {
    color: #ffffff !important;
    filter: drop-shadow(0 0 8px rgba(var(--pl-secondary-rgb), .38));
  }

  .pl-rail-subitem.is-current span,
  .pl-rail-subitem[aria-current="page"] span {
    color: #ffffff !important;
  }

  .pl-rail-item i {
    width: 28px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 215, 255, .86) !important;
    font-size: 1.16rem;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(0, 215, 255, .18));
  }

  .pl-rail-item span {
    max-width: 86px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .62rem;
    line-height: 1.05;
  }

  .pl-rail-item:hover,
  .pl-rail-item:focus-visible {
    color: var(--pm-text) !important;
    background:
      linear-gradient(90deg, rgba(0, 215, 255, .15), transparent 76%);
    transform: translateX(2px);
    outline: none;
  }

  .pl-rail-item:hover i,
  .pl-rail-item:focus-visible i {
    color: #dffbff !important;
    filter: drop-shadow(0 0 12px rgba(0, 215, 255, .42));
  }

  .pl-rail-item.is-current,
  .pl-rail-item[aria-current="page"] {
    color: #f6fbfb !important;
    background:
      radial-gradient(42px 32px at 50% 34%, rgba(var(--pl-secondary-rgb), .20), transparent 72%),
      linear-gradient(90deg, rgba(var(--pl-secondary-rgb), .26), rgba(0, 215, 255, .08) 52%, transparent 86%);
    box-shadow:
      0 0 24px rgba(var(--pl-secondary-rgb), .10),
      0 0 26px rgba(0, 215, 255, .08);
  }

  .pl-rail-item.is-current::before,
  .pl-rail-item[aria-current="page"]::before {
    background: linear-gradient(180deg, var(--pm-cyan), var(--pl-secondary));
    box-shadow: 0 0 18px rgba(0, 215, 255, .58), 0 0 16px rgba(var(--pl-secondary-rgb), .35);
  }

  .pl-rail-item.is-current::after,
  .pl-rail-item[aria-current="page"]::after {
    border-color: transparent;
    opacity: 1;
  }

  .pl-rail-item.is-current i,
  .pl-rail-item[aria-current="page"] i {
    color: #ffffff !important;
    transform: translateY(-1px);
    filter:
      drop-shadow(0 0 12px rgba(0, 215, 255, .50))
      drop-shadow(0 0 10px rgba(var(--pl-secondary-rgb), .34));
  }

  .pl-rail-item.is-current span,
  .pl-rail-item[aria-current="page"] span {
    color: #ffffff !important;
    font-weight: 800;
  }

  .pl-rail-item[href="/logout"] i {
    color: var(--pm-red) !important;
  }

  #posSidebar.d-none {
    display: block !important;
    width: 206px !important;
    top: 14px !important;
    max-height: calc(100vh - 28px) !important;
    border-color: rgba(var(--pl-secondary-rgb), .42) !important;
  }

  .pm-screen-head button[onclick*="openMobileFilter"] {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #posSidebar.d-none {
    width: 188px !important;
    padding: 12px !important;
  }

  .pm-screen-head {
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .pm-screen-head > .d-flex {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }
}

.pm-navbar,
.navbar.pm-navbar {
  background: linear-gradient(180deg, #111414, #070808) !important;
  border-bottom: 1px solid var(--pm-border) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.38) !important;
}

.navbar-brand {
  color: var(--pm-text) !important;
}

.pm-leopard-logo {
  width: 30px !important;
  height: 30px !important;
  border: 1px solid rgba(255,173,34,.42) !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  background: #050606 !important;
  box-shadow: 0 0 20px rgba(255,173,34,.10) !important;
}

.pm-leopard-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.nav-link,
.dropdown-item,
.btn,
.btn-pm,
.mob-menu-link,
.mob-tab {
  letter-spacing: 0 !important;
}

.navbar .nav-link {
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  color: #98a2a2 !important;
}

.navbar .nav-link:hover,
.navbar .nav-link.active,
.navbar .dropdown-toggle.show {
  color: var(--pm-text) !important;
  border-color: rgba(0,215,255,.34) !important;
  background: linear-gradient(180deg, #102027, #071114) !important;
}

.text-accent,
.text-info,
.nav-link i,
.dropdown-item i {
  color: var(--pm-cyan) !important;
}

.pm-card,
.card,
.modal-content,
.dropdown-menu,
.grid-stack-item-content {
  background:
    linear-gradient(180deg, rgba(255,255,255,.040), transparent 34px),
    linear-gradient(135deg, rgba(255, 177, 65, .035), rgba(0,0,0,.04) 42%, rgba(0, 215, 255, .025)),
    rgba(var(--pm-panel-rgb), var(--pl-surface-alpha)) !important;
  background-size: auto, auto, auto !important;
  border: 1px solid rgba(var(--pl-secondary-rgb), .18) !important;
  border-radius: 4px !important;
  box-shadow: var(--pm-shadow) !important;
}

.pm-card-header,
.card-header {
  color: #9ca6a6 !important;
  text-transform: uppercase !important;
  font-size: .68rem !important;
  letter-spacing: .10em !important;
}

.pm-screen-head,
.screen-header {
  border-bottom-color: var(--pm-border-soft) !important;
}

.kpi-value,
.mega-value,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--pm-text) !important;
}

.text-green,
.positive,
.bg-green-subtle .kpi-value,
.bg-green-subtle .kpi-sub {
  color: var(--pl-secondary) !important;
}

.text-red,
.negative,
.bg-red-subtle .kpi-value,
.bg-red-subtle .kpi-sub {
  color: var(--pm-red) !important;
}

.btn,
.btn-pm,
.btn-outline-secondary,
.form-control,
.form-select {
  background-color: rgba(8, 9, 9, var(--pl-surface-alpha-strong)) !important;
  border-color: var(--pm-border) !important;
  color: var(--pm-text) !important;
  border-radius: 4px !important;
}

.btn:hover,
.btn-pm:hover,
.btn-outline-secondary:hover {
  border-color: rgba(0,215,255,.45) !important;
  color: var(--pm-cyan) !important;
  background: #0d171a !important;
}

table,
.table {
  --bs-table-bg: #090a0a !important;
  --bs-table-color: var(--pm-text) !important;
  --bs-table-border-color: #181d1d !important;
}

thead,
.table thead th {
  color: #768080 !important;
  background: rgba(7, 8, 8, var(--pl-surface-alpha-strong)) !important;
  text-transform: uppercase !important;
  font-size: .68rem !important;
  letter-spacing: .10em !important;
}

tbody tr:hover,
.table-hover tbody tr:hover {
  background-color: rgba(0,215,255,.045) !important;
}

.asset-logo-wrap,
.asset-logo,
.asset-logo-img {
  background: #dbe3e3 !important;
  border-radius: 50% !important;
}

.asset-logo-img {
  object-fit: contain !important;
  padding: 2px !important;
}

.asset-logo-letter {
  display: none !important;
}

.badge,
.metric-pill,
.sidebar-filter-btn,
.sidebar-tag-btn {
  border-radius: 4px !important;
}

.sidebar-filter-btn.active,
.sidebar-tag-btn.active,
.settings-nav.active {
  color: var(--pl-secondary) !important;
  border-color: rgba(var(--pl-secondary-rgb), .55) !important;
  background: rgba(var(--pl-secondary-rgb), .12) !important;
}

#portfolioFilters .sidebar-filter-btn.active i,
#sidebarTypeFilters .sidebar-filter-btn.active i {
  color: var(--pl-secondary) !important;
}

.alert {
  border-radius: 4px !important;
  border-color: rgba(0,215,255,.20) !important;
  background: rgba(0,215,255,.055) !important;
}

.pl-skin-settings {
  padding: 14px !important;
}

.pl-bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
  max-width: 760px;
}

.pl-bg-choice {
  min-height: 112px;
  display: grid;
  grid-template-rows: minmax(72px, 1fr) auto;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 6px;
  background: rgba(5, 7, 7, .70);
  color: var(--pm-text);
  cursor: pointer;
  text-align: left;
}

.pl-bg-choice:hover,
.pl-bg-choice.is-active {
  border-color: rgba(var(--pl-secondary-rgb), .68);
  background: rgba(var(--pl-secondary-rgb), .085);
}

.pl-bg-choice.is-active {
  box-shadow: 0 0 0 1px rgba(var(--pl-secondary-rgb), .34), 0 16px 34px rgba(0, 0, 0, .28);
}

.pl-bg-swatch {
  display: block;
  min-height: 72px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, .46);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .38)),
    var(--pl-choice-img);
  background-size: cover;
  background-position: center;
}

.pl-bg-label {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  color: #cfd7d7;
}

.pl-alpha-control {
  max-width: 520px;
}

.pl-matrix-control {
  max-width: 680px;
  padding: 12px;
  border: 1px solid rgba(var(--pl-secondary-rgb), .24);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(var(--pl-secondary-rgb), .11), transparent 76%),
    rgba(5, 7, 7, .50);
}

.pl-matrix-control .form-check-input:checked {
  background-color: var(--pl-secondary);
  border-color: rgba(var(--pl-secondary-rgb), .76);
}

.pl-alpha-control .badge {
  color: var(--pm-cyan);
  border-color: rgba(0, 215, 255, .28) !important;
  background: rgba(0, 215, 255, .08);
}

.pl-secondary-control {
  max-width: 680px;
}

.pl-secondary-control input[type="color"] {
  width: 42px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 5px;
  padding: 2px;
  background: rgba(5, 7, 7, .8);
  cursor: pointer;
}

.pl-secondary-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(var(--pl-secondary-rgb), .30);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(var(--pl-secondary-rgb), .14), transparent 74%),
    rgba(5, 7, 7, .55);
}

.pl-secondary-preview span,
.pl-secondary-preview button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: .74rem;
  font-weight: 800;
}

.pl-secondary-preview span:first-child {
  color: var(--pm-text);
  border: 1px solid rgba(var(--pl-secondary-rgb), .56);
  background: rgba(var(--pl-secondary-rgb), .18);
}

.pl-secondary-preview span:nth-child(2) {
  color: var(--pm-muted);
  border-left: 3px solid var(--pl-secondary);
  background: rgba(255, 255, 255, .045);
}

.pl-secondary-preview button {
  border: 1px solid rgba(var(--pl-secondary-rgb), .58);
  background: linear-gradient(180deg, rgba(var(--pl-secondary-rgb), .22), rgba(var(--pl-secondary-rgb), .10));
  color: var(--pm-text);
}

.pl-secondary-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pl-secondary-choice {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 5px;
  background: rgba(5, 7, 7, .72);
  color: #cfd7d7;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
}

.pl-secondary-choice span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--pl-secondary-choice);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .54), 0 0 14px color-mix(in srgb, var(--pl-secondary-choice) 48%, transparent);
}

.pl-secondary-choice:hover,
.pl-secondary-choice.is-active {
  border-color: rgba(var(--pl-secondary-rgb), .62);
  background: rgba(var(--pl-secondary-rgb), .10);
  color: var(--pm-text);
}

canvas,
.tv-lightweight-charts,
#chart,
#positionChart {
  border-radius: 4px !important;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #050606;
}

::-webkit-scrollbar-thumb {
  background: #252b2b;
  border: 2px solid #050606;
}

::-webkit-scrollbar-thumb:hover {
  background: #334040;
}

/* 2026-05-15: Port 7868 is the active skinned UI. Keep the real app menu
   horizontal and style it as a professional studio strip. */
@media (min-width: 768px) {
  body {
    padding-left: 0 !important;
  }

  .pl-skin-rail {
    display: none !important;
  }

  body > nav.pm-navbar,
  .navbar.pm-navbar,
  .navbar.pm-navbar.d-none.d-lg-block,
  .pm-navbar.d-none.d-lg-block,
  .pm-main-menu,
  .pm-main-menu.d-none {
    position: sticky !important;
    top: 0 !important;
    z-index: 1040 !important;
    min-height: 78px !important;
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
    background:
      radial-gradient(420px 90px at 11% 0%, rgba(var(--pl-secondary-rgb), .18), transparent 72%),
      radial-gradient(360px 80px at 82% 0%, rgba(0, 215, 255, .10), transparent 70%),
      linear-gradient(180deg, rgba(15, 18, 18, .98), rgba(3, 5, 5, .98)) !important;
    border-bottom: 1px solid rgba(var(--pl-secondary-rgb), .24) !important;
    box-shadow: 0 20px 58px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(0, 215, 255, .10) !important;
    backdrop-filter: blur(18px) saturate(1.15) !important;
  }

  .pm-mobile-topbar,
  nav.pm-navbar.d-lg-none,
  nav.pm-navbar.d-flex.d-lg-none,
  #mobTabBar,
  .mob-tabbar,
  .bottom-tabbar {
    display: none !important;
  }

  .pm-navbar .navbar-toggler,
  .pm-main-menu .navbar-toggler {
    display: none !important;
  }

  .pm-navbar .container-fluid,
  .pm-main-menu .container-fluid {
    min-height: 78px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
    max-width: none !important;
    padding: 0 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
  }

  .pm-navbar .navbar-collapse,
  .pm-navbar .navbar-collapse.collapse,
  .pm-navbar .navbar-collapse.collapse:not(.show),
  .pm-main-menu .navbar-collapse,
  .pm-main-menu .navbar-collapse.collapse,
  .pm-main-menu .navbar-collapse.collapse:not(.show) {
    display: flex !important;
    flex-basis: auto !important;
    flex-grow: 1 !important;
    align-items: stretch !important;
    min-width: max-content !important;
  }

  .pm-navbar .navbar-nav,
  .pm-main-menu .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    min-width: max-content !important;
  }

  .pm-navbar .navbar-brand,
  .pm-main-menu .navbar-brand {
    flex: 0 0 auto !important;
    min-width: 126px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 10px 0 0 !important;
    padding: 0 !important;
    color: var(--pm-text) !important;
    font-size: .84rem !important;
    font-weight: 800 !important;
  }

  .pm-navbar .pm-logo,
  .pm-main-menu .pm-logo {
    width: 32px !important;
    height: 32px !important;
  }

  .pm-navbar .nav-item,
  .pm-main-menu .nav-item {
    display: flex !important;
    align-items: stretch !important;
  }

  .pm-navbar .nav-link,
  .pm-main-menu .nav-link {
    position: relative !important;
    min-width: 96px !important;
    min-height: 72px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 9px 12px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #849090 !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  .pm-navbar .nav-link i,
  .pm-main-menu .nav-link i {
    width: 26px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(0, 215, 255, .78) !important;
    font-size: 1.15rem !important;
    line-height: 1 !important;
    filter: drop-shadow(0 0 8px rgba(0, 215, 255, .18)) !important;
  }

  .pm-navbar .nav-link::after,
  .pm-main-menu .nav-link::after {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 0 !important;
    height: 2px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
  }

  .pm-navbar .nav-link:hover,
  .pm-navbar .nav-link:focus-visible,
  .pm-main-menu .nav-link:hover,
  .pm-main-menu .nav-link:focus-visible {
    color: #dfe8e8 !important;
    background:
      radial-gradient(70px 40px at 50% 30%, rgba(0, 215, 255, .15), transparent 72%),
      linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)) !important;
    outline: none !important;
  }

  .pm-navbar .nav-link:hover i,
  .pm-navbar .nav-link:focus-visible i,
  .pm-main-menu .nav-link:hover i,
  .pm-main-menu .nav-link:focus-visible i {
    color: #e6fdff !important;
    filter: drop-shadow(0 0 12px rgba(0, 215, 255, .42)) !important;
  }

  .pm-navbar .nav-link.active,
  .pm-navbar .nav-link[aria-current="page"],
  .pm-navbar .dropdown-toggle.show,
  .pm-main-menu .nav-link.active,
  .pm-main-menu .nav-link[aria-current="page"],
  .pm-main-menu .dropdown-toggle.show {
    color: #ffffff !important;
    background:
      radial-gradient(82px 46px at 50% 25%, rgba(var(--pl-secondary-rgb), .20), transparent 72%),
      linear-gradient(180deg, rgba(21, 40, 48, .92), rgba(7, 15, 17, .96)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(0, 215, 255, .24),
      inset 0 0 0 2px rgba(var(--pl-secondary-rgb), .10),
      0 0 32px rgba(0, 215, 255, .10),
      0 0 30px rgba(var(--pl-secondary-rgb), .08) !important;
  }

  .pm-navbar .nav-link.active::after,
  .pm-navbar .nav-link[aria-current="page"]::after,
  .pm-navbar .dropdown-toggle.show::after,
  .pm-main-menu .nav-link.active::after,
  .pm-main-menu .nav-link[aria-current="page"]::after,
  .pm-main-menu .dropdown-toggle.show::after {
    background: linear-gradient(90deg, var(--pm-cyan), var(--pl-secondary)) !important;
    box-shadow: 0 0 14px rgba(0, 215, 255, .50), 0 0 18px rgba(var(--pl-secondary-rgb), .34) !important;
  }

  .pm-navbar .nav-link.active i,
  .pm-navbar .nav-link[aria-current="page"] i,
  .pm-navbar .dropdown-toggle.show i,
  .pm-main-menu .nav-link.active i,
  .pm-main-menu .nav-link[aria-current="page"] i,
  .pm-main-menu .dropdown-toggle.show i {
    color: #ffffff !important;
    filter:
      drop-shadow(0 0 12px rgba(0, 215, 255, .50))
      drop-shadow(0 0 10px rgba(var(--pl-secondary-rgb), .34)) !important;
  }

  .pm-navbar .dropdown-toggle::before,
  .pm-main-menu .dropdown-toggle::before {
    display: none !important;
  }

  .pm-navbar .dropdown-toggle::after,
  .pm-main-menu .dropdown-toggle::after {
    margin: 0 !important;
  }

  .pm-navbar .btn.btn-sm,
  .pm-main-menu .btn.btn-sm {
    align-self: center !important;
    min-width: 42px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
    border-color: rgba(255, 255, 255, .12) !important;
    background: rgba(8, 10, 10, .70) !important;
    color: #aab4b4 !important;
  }

  .pm-navbar .btn.btn-sm:hover,
  .pm-main-menu .btn.btn-sm:hover {
    border-color: rgba(0, 215, 255, .36) !important;
    color: #ffffff !important;
    background: rgba(0, 215, 255, .10) !important;
  }
}

.position-note-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  color: var(--pl-secondary) !important;
  cursor: help !important;
  line-height: 1 !important;
  filter: drop-shadow(0 0 7px rgba(var(--pl-secondary-rgb), .28)) !important;
}

.position-note-icon i {
  font-size: .78rem !important;
  line-height: 1 !important;
}

.ticker-copy-btn {
  display: none !important;
}

.pm-main-menu .dropdown-menu.show {
  display: block !important;
  position: fixed !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100vh - 92px) !important;
  overflow-y: auto !important;
  z-index: 3000 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), transparent 42px),
    rgba(6, 8, 8, .96) !important;
  border: 1px solid rgba(var(--pl-secondary-rgb), .34) !important;
  border-radius: 8px !important;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, .62),
    0 0 28px rgba(0, 215, 255, .08) !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
}

.pm-main-menu .dropdown-menu .dropdown-item {
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #d9e3e3 !important;
  font-size: .82rem !important;
  font-weight: 750 !important;
}

.pm-main-menu .dropdown-menu .dropdown-item:hover,
.pm-main-menu .dropdown-menu .dropdown-item:focus,
.pm-main-menu .dropdown-menu .dropdown-item.active {
  color: #ffffff !important;
  background: rgba(var(--pl-secondary-rgb), .16) !important;
}