/* GEX tools share the options-flow page shell and semantic surface tokens. */
#gex-delayed-preview, .gxp-directory {
  --surface-1: #0f0f0f;
  --surface-2: #171717;
  --surface-3: #1e1e1e;
  --surface-4: #252525;
  --surface-5: #2c2c2c;
  --surface-6: #333333;
  --surface-7: #3a3a3a;
  --dashboard-text-primary: #f4f4f5;
  --dashboard-text-secondary: #d4d4d8;
  --dashboard-text-muted: #a1a1aa;
  --dashboard-text-faint: #71717a;
  --dashboard-text-inverse: #18181b;
  --dashboard-positive: #34d399;
  --dashboard-positive-background: rgba(52, 211, 153, .1);
  --dashboard-positive-border: rgba(52, 211, 153, .32);
  --dashboard-negative: #fb7185;
  --dashboard-negative-background: rgba(251, 113, 133, .1);
  --dashboard-negative-border: rgba(251, 113, 133, .3);
  --dashboard-technical: #38bdf8;
  --dashboard-technical-background: rgba(56, 189, 248, .1);
  --dashboard-technical-border: rgba(56, 189, 248, .3);
  --dashboard-warning: #fbbf24;
  --dashboard-warning-background: rgba(251, 191, 36, .1);
  --dashboard-warning-border: rgba(251, 191, 36, .3);
  --dashboard-chart-background: #171717;
  --dashboard-chart-grid: #2c2c2c;
  --dashboard-chart-axis: #71717a;
  --dashboard-tooltip-background: #252525;
  --dashboard-tooltip-foreground: #f4f4f5;
  --dashboard-tooltip-muted: #a1a1aa;
  --dashboard-flyout-shadow: 0 18px 42px rgba(0, 0, 0, .42);
  color-scheme: dark;
}
.gdp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.gdp-delay-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--dashboard-text-muted); }
.gdp-delay-badge { padding: 2px 7px; border: 1px solid var(--dashboard-technical-border); border-radius: 5px; color: var(--dashboard-technical); background: var(--dashboard-technical-background); }
.gdp-exposure-strip { margin-top: 20px; }
.gdp-net-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 12px; font-size: 12px; color: var(--dashboard-text-muted); }
.gdp-net-line strong { font-size: 20px; font-weight: 600; margin-left: auto; }
.gdp .gdp-split-bar { background: var(--surface-4); }
.gdp .gdp-split-bar > span { flex: none; }
.gdp-heatmap-section { margin-top: 24px; scroll-margin-top: 24px; }
.gdp-heatmap-panel { overflow: hidden; }
.gdp-tool-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--surface-5); background: var(--surface-3); }
.gdp-tool-header h2 { font-size: 14px; font-weight: 600; line-height: 1.5; }
.gdp-legend { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.gdp-legend-scale { display: block; width: 84px; height: 6px; border-radius: 2px; background: linear-gradient(90deg, var(--dashboard-negative), var(--surface-3) 50%, var(--dashboard-positive)); }
.gdp-heatmap-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--surface-6) transparent; }
.gdp-heatmap { width: 100%; border-collapse: separate; border-spacing: 3px; padding: 8px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
.gdp-heatmap th { padding: 6px 8px; color: var(--dashboard-text-muted); font-size: 10px; font-weight: 500; }
.gdp-heatmap thead th { padding-bottom: 9px; }
.gdp-heatmap th:first-child { position: sticky; left: 0; z-index: 1; text-align: right; background: var(--surface-2); }
.gdp-heatmap tbody th { color: var(--dashboard-text-secondary); font-size: 11px; min-width: 72px; }
.gdp-heatmap-cell { min-width: 74px; height: 27px; padding: 4px 6px; border-radius: 3px; font-size: 10px; color: var(--dashboard-text-primary); }
.gdp-cell-positive { background: var(--dashboard-positive-background); background: color-mix(in srgb, var(--dashboard-positive) var(--gdp-cell-strength), var(--surface-2)); }
.gdp-cell-negative { background: var(--dashboard-negative-background); background: color-mix(in srgb, var(--dashboard-negative) var(--gdp-cell-strength), var(--surface-2)); }
.gdp-cell-neutral { background: var(--surface-3); color: var(--dashboard-text-muted); }
.gdp-nearest-strike th { box-shadow: inset 2px 0 var(--dashboard-technical); color: var(--dashboard-technical) !important; }
.gdp-nearest-label { display: block; font-size: 8px; font-family: Inter, sans-serif; line-height: 1; }
.gdp-tool-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--surface-5); color: var(--dashboard-text-muted); font-size: 11px; }
.gdp-level-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gdp-level { padding: 20px; }
.gdp-level h3 { font-size: 13px; font-weight: 500; color: var(--dashboard-text-muted); }
.gdp-level strong { display: block; margin-top: 12px; font-size: 28px; font-weight: 600; line-height: 1.3; }
.gdp-level > p { margin-top: 8px; font-size: 13px; color: var(--dashboard-text-secondary); }
.gdp-level .gdp-level-distance { font-size: 12px; color: var(--dashboard-text-muted); }
.gdp-bars { padding: 16px 20px; }
.gdp-bar-axis { position: relative; display: flex; justify-content: space-between; margin: 0 98px 8px 134px; color: var(--dashboard-text-muted); font-size: 10px; }
.gdp-bar-axis > :nth-child(2) { position: absolute; left: 50%; transform: translateX(-50%); }
.gdp-bar-row { display: grid; grid-template-columns: 122px minmax(40px, 1fr) 86px; gap: 12px; align-items: center; min-height: 31px; font-size: 12px; }
.gdp-bar-label { color: var(--dashboard-text-secondary); }
.gdp-bar-value { text-align: right; }
.gdp-bar-track { position: relative; display: block; height: 22px; background: linear-gradient(90deg, transparent calc(50% - .5px), var(--surface-6) calc(50% - .5px), var(--surface-6) calc(50% + .5px), transparent calc(50% + .5px)); }
.gdp-bar-track > span { position: absolute; display: block; top: 4px; bottom: 4px; min-width: 0; border-radius: 2px; }
.gdp-bar-positive { left: 50%; background: var(--dashboard-positive); }
.gdp-bar-negative { right: 50%; background: var(--dashboard-negative); }
.gdp .ofp-side-related-row { min-height: 28px; }
.gdp .ofp-related-meta time { font-size: 10px; }
#gex-delayed-preview .ofp-state { padding: 48px 24px; }
#gex-delayed-preview .ofp-state > * { max-width: 900px; margin: 0 auto 16px; }
.gxp-directory > main { max-width: 1100px; margin: 0 auto; padding: 40px 24px; }
.gxp-directory h1 { font-size: 32px; font-weight: 700; line-height: 1.25; margin: 24px 0 16px; }
.gxp-directory p { color: var(--dashboard-text-muted); margin-bottom: 20px; }
.gxp-directory nav { display: flex; flex-wrap: wrap; gap: 16px; }
.gxp-directory nav a, .gxp-directory-list a { color: var(--dashboard-technical); }
.gxp-directory nav a:hover, .gxp-directory-list a:hover { text-decoration: underline; }
.gxp-directory main > section { margin-top: 32px; }
.gxp-directory main > section > h2 { font-size: 18px; font-weight: 600; }
.gxp-directory .gxp-directory-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 12px; padding: 0; margin-top: 24px; list-style: none; }
.gxp-directory-list li { padding: 16px; border: 1px solid var(--surface-5); border-radius: 8px; background: var(--surface-2); }
.gxp-directory-list a { display: block; }
.gxp-directory-list time { display: block; margin-top: 8px; color: var(--dashboard-text-muted); font-size: 11px; font-family: ui-monospace, monospace; }
@media (max-width: 639px) {
  .gdp-delay-line { gap: 6px; }
  .gdp-net-line strong { font-size: 18px; }
  .gdp-net-line > :last-child { width: 100%; text-align: right; margin-top: -8px; }
  .gdp-tool-header { padding: 12px; }
  .gdp-heatmap { padding: 5px; }
  .gdp-level { padding: 16px; }
  .gdp-level strong { font-size: 25px; }
  .gdp-bars { padding: 12px; }
  .gdp-bar-row { grid-template-columns: 102px minmax(30px, 1fr) 66px; gap: 8px; font-size: 10px; }
  .gdp-bar-axis { margin-left: 110px; margin-right: 74px; font-size: 9px; }
  .gdp-tool-caption { padding: 10px 12px; }
}
@media (max-width: 359px) {
  .gdp-level-grid { grid-template-columns: minmax(0, 1fr); }
  .gdp .ofp-related-grid { grid-template-columns: minmax(0, 1fr); }
}