/* Position-flow Leaderboard. lb-* namespace. Dark board like the rest of the site. */
:root {
  --lb-bg: #0b0e14; --lb-panel: #121722; --lb-panel2: #171d2b; --lb-line: #232c3f;
  --lb-txt: #dfe6f2; --lb-dim: #8b97ad; --lb-faint: #5c6880;
  --lb-green: #2fd07e; --lb-red: #ff5d6c; --lb-amber: #ffb84d; --lb-blue: #5aa2ff;
  --lb-chip: #1c2436;
}
body { background: var(--lb-bg); color: var(--lb-txt); margin: 0;
       font: 14px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif; }

.lb-topnav { display: flex; align-items: center; gap: 18px; padding: 10px 20px; background: #0d1119;
             border-bottom: 1px solid var(--lb-line); position: sticky; top: 0; z-index: 5; }
.lb-brand { font-weight: 700; letter-spacing: .12em; font-size: 12px; color: var(--lb-dim); }
.lb-brand b { color: #ff4d5e; }
.lb-nav { font-size: 13px; color: var(--lb-dim); text-decoration: none; padding: 4px 10px; border-radius: 6px; }
.lb-nav-active { color: var(--lb-txt); background: var(--lb-chip); outline: 1px solid var(--lb-line); }
.lb-updated { margin-left: auto; font-size: 12px; color: var(--lb-faint); }

.lb-wrap { max-width: 1180px; margin: 0 auto; padding: 22px 20px 60px; }
.lb-notice { border: 1px solid var(--lb-line); border-left: 3px solid var(--lb-amber);
             background: rgba(255, 184, 77, .06); color: var(--lb-dim);
             border-radius: 0 8px 8px 0; padding: 8px 14px; font-size: 12.5px;
             margin-bottom: 16px; }
.lb-notice a { color: var(--lb-blue); text-decoration: none; }
.lb-wrap h1 { font-size: 20px; font-weight: 650; margin: 0; }
.lb-stamp { color: var(--lb-dim); font-size: 12.5px; margin-top: 2px; }
.lb-stamp b { color: var(--lb-txt); font-weight: 600; }
.lb-sub { color: var(--lb-dim); margin-top: 4px; font-size: 13px; }
.lb-sub a { color: var(--lb-blue); text-decoration: none; }

.lb-strip { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 6px; }
.lb-pattern { background: var(--lb-chip); border: 1px solid var(--lb-line); border-radius: 20px;
              padding: 5px 12px; font-size: 12.5px; display: flex; gap: 7px; align-items: center; }
.lb-ptkr { font-weight: 700; }
.lb-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.lb-dot-up { background: var(--lb-green); }
.lb-dot-down { background: var(--lb-red); }
.lb-dot-mixed { background: var(--lb-amber); }
.lb-pn { color: var(--lb-dim); }
.lb-strip-legend { flex-basis: 100%; color: var(--lb-faint); font-size: 11.5px; margin-top: 2px; }

.lb-boards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; }
@media (max-width: 900px) { .lb-boards { grid-template-columns: 1fr; } }
.lb-board { background: var(--lb-panel); border: 1px solid var(--lb-line); border-radius: 12px; overflow: hidden; }
.lb-board h2 { font-size: 13px; letter-spacing: .08em; padding: 12px 16px; margin: 0;
               border-bottom: 1px solid var(--lb-line); display: flex; align-items: center; gap: 8px; }
.lb-hint { margin-left: auto; font-weight: 400; font-size: 11.5px; color: var(--lb-faint); letter-spacing: 0; }
.lb-build h2 { color: var(--lb-green); }
.lb-unwind h2 { color: var(--lb-red); }

.lb-row { display: grid; grid-template-columns: 34px 74px 1fr auto; gap: 10px; align-items: center;
          padding: 13px 16px; border-bottom: 1px solid #1a2233; cursor: pointer; }
.lb-row:hover { background: var(--lb-panel2); }
.lb-rank { color: var(--lb-faint); font-size: 15px; font-weight: 600; }
.lb-tkr { font-size: 17px; font-weight: 750; letter-spacing: .02em; }
.lb-mid { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lb-flows { display: flex; gap: 6px; flex-wrap: wrap; }
.lb-badge { font-size: 10.5px; font-weight: 650; letter-spacing: .05em; padding: 2px 8px; border-radius: 4px; }
.lb-b-cb { background: rgba(47, 208, 126, .13); color: var(--lb-green); }
.lb-b-cs { background: rgba(90, 162, 255, .13); color: var(--lb-blue); }
.lb-b-pb { background: rgba(255, 93, 108, .13); color: var(--lb-red); }
.lb-b-ps { background: rgba(255, 184, 77, .13); color: var(--lb-amber); }
.lb-b-xx { background: var(--lb-chip); color: var(--lb-dim); }
.lb-meta { font-size: 11.5px; color: var(--lb-dim); display: flex; gap: 12px; }
.lb-opex-hot { color: var(--lb-amber); font-weight: 600; }
.lb-exp { color: var(--lb-blue); }
.lb-prem { text-align: right; }
.lb-usd { font-size: 16px; font-weight: 700; display: block; }
.lb-bar { height: 4px; border-radius: 2px; margin-top: 6px; background: #233049; overflow: hidden; display: block; }
.lb-bar i { display: block; height: 100%; }
.lb-build .lb-bar i { background: var(--lb-green); }
.lb-unwind .lb-bar i { background: var(--lb-red); }

.lb-simple-row { display: grid; grid-template-columns: 34px 88px 1fr auto; gap: 10px; align-items: center;
                 padding: 15px 16px; border-bottom: 1px solid #1a2233; }
.lb-simple-row .lb-tkr { font-size: 19px; }
.lb-simple-mid { color: var(--lb-dim); font-size: 13px; }
.lb-adv-toggle { text-align: center; margin: 14px 0 4px; }
.lb-adv-toggle a { color: var(--lb-faint); font-size: 12.5px; text-decoration: none; }

.lb-expand { background: var(--lb-panel2); border-top: 1px solid var(--lb-line); padding: 10px 14px; font-size: 12.5px; }
.lb-detail { width: 100%; border-collapse: collapse; }
.lb-detail th { text-align: left; color: var(--lb-faint); font-weight: 500; font-size: 11px; padding: 4px 8px; }
.lb-detail td { padding: 4px 8px; border-top: 1px solid #1c2536; color: var(--lb-dim); }
.lb-detail td.lb-c { color: var(--lb-txt); font-weight: 600; }
.lb-nodetail { color: var(--lb-faint); }

.lb-empty, .lb-empty-board { color: var(--lb-dim); padding: 28px 16px; text-align: center; }
.lb-foot { margin-top: 22px; font-size: 12px; color: var(--lb-faint); line-height: 1.6;
           border-top: 1px solid var(--lb-line); padding-top: 14px; }

/* Internal surface: leave room for the nav rail's sticky bar. */
body:not([data-public-surface="true"]) .lb-topnav { top: var(--oc-topnav-h, 0); }