/* =========================================================
   PERPMETRIC
   INSTRUMENT TERMINAL v1
   Canonical production stylesheet
   ========================================================= */

:root {
    color-scheme: dark;

    --bg: #081016;
    --bg-deep: #050b10;

    --surface-1: #0c151c;
    --surface-2: #101b23;
    --surface-3: #13212a;

    --line: #21313a;
    --line-soft: rgba(143, 169, 184, 0.10);

    --text: #eef3f5;
    --text-soft: #aab8c0;
    --text-muted: #7c909b;

    --mint: #37e0b1;
    --mint-soft: rgba(55, 224, 177, 0.08);

    --steel: #8cadbd;
    --steel-soft: rgba(140, 173, 189, 0.08);

    --coral: #ff6275;
    --amber: #dfb154;

    --radius: 7px;

    /* PERPMETRIC_9CD1_FOUNDATION_TOKENS */

    --type-2xs:
        clamp(
            9px,
            0.48vw,
            10px
        );

    --type-xs:
        clamp(
            10px,
            0.54vw,
            11px
        );

    --type-sm:
        clamp(
            11px,
            0.60vw,
            12px
        );

    --type-md:
        clamp(
            12px,
            0.68vw,
            14px
        );

    --type-lg:
        clamp(
            15px,
            0.82vw,
            17px
        );

    --type-xl:
        clamp(
            18px,
            1vw,
            21px
        );

    --shell-max:
        1520px;

    --shell-gutter:
        clamp(
            16px,
            1.8vw,
            30px
        );

    --space-panel:
        clamp(
            18px,
            1.15vw,
            22px
        );

    --mono:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;

    --sans:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* ---------- reset ---------- */

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;

    background: var(--bg-deep);

    scroll-behavior: smooth;
}

body {
    margin: 0;

    min-width: 320px;

    color: var(--text);

    font-family: var(--sans);

    background:
        linear-gradient(
            rgba(140, 173, 189, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(140, 173, 189, 0.014) 1px,
            transparent 1px
        ),
        radial-gradient(
            ellipse at 10% -5%,
            rgba(55, 224, 177, 0.055),
            transparent 32%
        ),
        var(--bg);

    background-size:
        52px 52px,
        52px 52px,
        auto,
        auto;
}

button,
input {
    font: inherit;
}

button {
    color: inherit;
}

a {
    color: inherit;
}


/* ---------- shell ---------- */

.shell {
    width:
        min(
            1420px,
            calc(100% - 42px)
        );

    margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.topbar {
    position: sticky;

    z-index: 100;

    top: 0;

    min-height: 72px;

    display: grid;

    grid-template-columns:
        minmax(250px, 1fr)
        auto
        auto;

    align-items: center;

    column-gap: 18px;

    border-bottom:
        1px solid var(--line-soft);

    background:
        rgba(8, 16, 22, 0.88);

    backdrop-filter:
        blur(17px)
        saturate(120%);

    -webkit-backdrop-filter:
        blur(17px)
        saturate(120%);
}

.topbar::after {
    content: "";

    position: absolute;

    bottom: -1px;
    left: 0;

    width: 190px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--mint),
            rgba(55, 224, 177, 0.30) 42%,
            transparent
        );
}

.brand {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 13px;
}

.brand-mark {
    width: 64px;
    height: 40px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    padding-right: 12px;

    border-right:
        1px solid var(--line-soft);
}

.brand-mark img {
    display: block;

    width: 50px;
    height: auto;
}

.brand-copy {
    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.brand-name {
    color: var(--text);

    font-size: 14px;

    font-weight: 850;

    line-height: 1;

    letter-spacing: 0.16em;
}

.brand-sub {
    margin-top: 4px;

    color: var(--steel);

    font-family: var(--mono);

    font-size: 8px;

    font-weight: 650;

    line-height: 1;

    letter-spacing: 0.17em;
}

.brand-badge {
    width: fit-content;

    margin-top: 6px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    color: var(--mint);

    font-family: var(--mono);

    font-size: 8px;

    font-weight: 750;

    line-height: 1;

    letter-spacing: 0.12em;
}

.brand-badge::before {
    content: "";

    width: 13px;
    height: 1px;

    background: var(--mint);

    opacity: 0.72;
}

.topnav {
    display: flex;

    align-items: center;

    gap: 2px;

    margin: 0;
}

.topnav a {
    position: relative;

    padding: 10px 11px;

    color: #7d909b;

    font-family: var(--mono);

    font-size: 9px;

    font-weight: 650;

    letter-spacing: 0.06em;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 140ms ease;
}

.topnav a:hover {
    color: var(--text);
}

.topnav a::after {
    content: "";

    position: absolute;

    right: 11px;
    bottom: 3px;
    left: 11px;

    height: 1px;

    background: var(--mint);

    opacity: 0;

    transform:
        scaleX(0.45);

    transform-origin: center;

    transition:
        opacity 140ms ease,
        transform 140ms ease;
}

.topnav a:hover::after {
    opacity: 1;

    transform:
        scaleX(1);
}

.system-status {
    min-height: 28px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding-left: 18px;

    border-left:
        1px solid var(--line-soft);

    color: #91a4af;

    font-family: var(--mono);

    font-size: 9px;

    font-weight: 650;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    white-space: nowrap;
}

.status-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--amber);
}

.status-dot.ok {
    background: var(--mint);

    box-shadow:
        0 0 8px
        rgba(55, 224, 177, 0.28);
}

.status-dot.bad {
    background: var(--coral);
}


/* =========================================================
   MAIN / HERO
   ========================================================= */

main {
    padding:
        34px 0 46px;
}

.hero {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(280px, 0.52fr);

    gap: 72px;

    align-items: center;

    padding:
        27px 0 42px;
}

.hero::before {
    content: "";

    position: absolute;

    top: 1px;
    left: -19px;

    width: 1px;
    height: 112px;

    background:
        linear-gradient(
            var(--mint),
            rgba(55, 224, 177, 0.25) 54%,
            transparent
        );
}

.hero-copy {
    min-width: 0;

    max-width: 900px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.eyebrow {
    margin-bottom: 12px;

    color: #88a9b8;

    font-family: var(--mono);

    font-size: 9px;

    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 0.20em;

    text-transform: uppercase;
}

h1,
h2 {
    margin: 0;
}

h1 {
    max-width: 820px;

    color: #f2f5f6;

    font-size:
        clamp(
            46px,
            5vw,
            74px
        );

    font-weight: 720;

    line-height: 0.96;

    letter-spacing: -0.055em;
}

h1 span {
    color: var(--mint);
}

.hero p {
    max-width: 710px;

    margin:
        20px 0 0;

    color: var(--text-soft);

    font-size: 15px;

    line-height: 1.68;
}

.hero-meta {
    min-width: 0;

    display: grid;

    gap: 0;

    align-self: center;

    padding:
        4px 0 4px 22px;

    border-left:
        1px solid
        rgba(140, 173, 189, 0.14);
}

.hero-meta-label {
    margin-bottom: 7px;

    color: #66808d;

    font-family: var(--mono);

    font-size: 9px;

    font-weight: 750;

    line-height: 1.4;

    letter-spacing: 0.17em;
}

.hero-meta > div:not(.hero-meta-label) {
    min-height: 43px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 22px;

    border-bottom:
        1px solid var(--line-soft);
}

.hero-meta > div:last-child {
    border-bottom: 0;
}

.hero-meta span {
    color: var(--text-muted);

    font-family: var(--mono);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.14em;
}

.hero-meta strong {
    min-width: 0;

    color: #dce3e6;

    font-family: var(--mono);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: -0.02em;

    text-align: right;

    overflow-wrap: anywhere;
}

.hero-trust {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap:
        10px 17px;

    margin-top: 23px;
}

.hero-trust span {
    min-height: auto;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 0;

    border: 0;

    border-radius: 0;

    background: none;

    color: #778b96;

    font-family: var(--mono);

    font-size: 8px;

    font-weight: 700;

    line-height: 1.4;

    letter-spacing: 0.10em;
}

.hero-trust span::before {
    content: "";

    width: 4px;
    height: 4px;

    flex: 0 0 auto;

    background: #445963;
}

.hero-trust .trust-primary {
    border: 0;

    background: none;

    color: var(--mint);
}

.hero-trust .trust-primary::before {
    background: var(--mint);

    box-shadow:
        0 0 7px
        rgba(55, 224, 177, 0.25);
}


/* =========================================================
   COMMON PANEL LANGUAGE
   ========================================================= */

.panel,
.market-state,
.kpi {
    border:
        1px solid
        var(--line-soft);

    border-radius: var(--radius);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.012),
            transparent 48%
        ),
        var(--surface-1);

    box-shadow: none;
}

.panel {
    margin-bottom: 9px;

    padding: 19px;
}

.panel-heading {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 18px;

    margin-bottom: 18px;
}

.panel h2 {
    color: var(--text);

    font-size: 18px;

    font-weight: 690;

    letter-spacing: -0.025em;
}

.badge {
    padding: 5px 8px;

    border:
        1px solid var(--line-soft);

    border-radius: 4px;

    color: var(--text-muted);

    font-family: var(--mono);

    font-size: 9px;

    font-weight: 650;
}

.badge.good {
    border-color:
        rgba(55, 224, 177, 0.18);

    background: var(--mint-soft);

    color: var(--mint);
}

.badge.warn {
    border-color:
        rgba(223, 177, 84, 0.18);

    color: var(--amber);
}

.badge.bad {
    border-color:
        rgba(255, 98, 117, 0.18);

    color: var(--coral);
}


/* =========================================================
   MARKET STATE
   ========================================================= */

.market-state {
    margin-bottom: 10px;

    overflow: hidden;

    padding:
        17px 18px 13px;
}

.market-state-heading {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 20px;

    margin-bottom: 14px;
}

.market-state-title {
    color: var(--text);

    font-size: 15px;

    font-weight: 690;

    letter-spacing: -0.018em;
}

.market-state-age {
    padding:
        4px 7px;

    border:
        1px solid var(--line-soft);

    border-radius: 3px;

    background:
        rgba(140, 173, 189, 0.018);

    color: var(--text-muted);

    font-family: var(--mono);

    font-size: 8px;

    letter-spacing: 0.04em;
}

.market-state-grid {
    display: grid;

    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );

    border-top:
        1px solid var(--line-soft);

    border-bottom:
        1px solid var(--line-soft);

    background:
        rgba(5, 11, 16, 0.18);
}

.state-cell {
    position: relative;

    min-width: 0;

    padding:
        14px 15px 13px;

    border-right:
        1px solid var(--line-soft);
}

.state-cell:first-child {
    padding-left: 0;
}

.state-cell:last-child {
    border-right: 0;
}

.state-cell:nth-child(4)::before,
.state-cell:nth-child(6)::before {
    content: "";

    position: absolute;

    top: 8px;
    bottom: 8px;
    left: -1px;

    width: 1px;

    background:
        rgba(140, 173, 189, 0.24);
}

.state-cell span {
    display: block;

    margin-bottom: 6px;

    color: var(--text-muted);

    font-family: var(--mono);

    font-size: 9px;

    font-weight: 700;

    line-height: 1.35;

    text-transform: uppercase;

    letter-spacing: 0.09em;
}

.state-cell strong {
    display: block;

    color: var(--text);

    font-family: var(--mono);

    font-size: 18px;

    font-weight: 720;

    letter-spacing: -0.025em;

    font-variant-numeric:
        tabular-nums;
}

.market-state-note {
    margin-top: 9px;

    color: #536671;

    font-family: var(--mono);

    font-size: 9px;

    line-height: 1.5;
}


/* =========================================================
   KPI STRIP
   ========================================================= */

.kpis {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 1px;

    margin-bottom: 10px;

    padding: 1px;

    overflow: hidden;

    border:
        1px solid var(--line-soft);

    border-radius: var(--radius);

    background: var(--line-soft);
}

.kpi {
    position: relative;

    overflow: hidden;

    padding:
        18px 17px 15px;

    border: 0;

    border-radius: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.010),
            transparent 50%
        ),
        var(--surface-1);
}

.kpi::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 1px;

    background:
        rgba(140, 173, 189, 0.15);
}

.kpi:first-child::before {
    background:
        linear-gradient(
            90deg,
            var(--mint),
            rgba(55, 224, 177, 0.22) 42%,
            transparent 80%
        );
}

.kpi span {
    display: block;

    color: var(--text-muted);

    font-family: var(--mono);

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.11em;
}

.kpi strong {
    display: block;

    margin:
        9px 0 4px;

    color: var(--text);

    font-family: var(--mono);

    font-size:
        clamp(
            27px,
            3vw,
            35px
        );

    font-weight: 720;

    line-height: 1;

    letter-spacing: -0.045em;

    font-variant-numeric:
        tabular-nums;
}

.kpi small {
    color: #667984;

    font-size: 10px;
}


/* =========================================================
   BREADTH
   ========================================================= */

.breadth-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 1px;

    overflow: hidden;

    padding: 1px;

    border:
        1px solid var(--line-soft);

    border-radius: 6px;

    background: var(--line-soft);
}

.breadth-card {
    min-width: 0;

    padding:
        15px 16px 14px;

    border: 0;

    border-radius: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.010),
            transparent 55%
        ),
        var(--surface-2);

    transition:
        background 140ms ease;
}

.breadth-card:hover {
    background:
        linear-gradient(
            180deg,
            rgba(55, 224, 177, 0.018),
            transparent 58%
        ),
        #111d25;
}

.breadth-card .horizon {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 14px;

    color: var(--text);

    font-family: var(--mono);

    font-size: 14px;

    font-weight: 750;

    letter-spacing: -0.02em;
}

.breadth-card .horizon::before {
    content: "";

    width: 5px;
    height: 5px;

    flex: 0 0 auto;

    background:
        rgba(140, 173, 189, 0.55);
}

.breadth-card:last-child .horizon::before {
    background: var(--mint);
}

.breadth-row {
    display: flex;

    justify-content: space-between;

    align-items: baseline;

    gap: 12px;

    margin-top: 7px;

    color: var(--text-muted);

    font-size: 11px;
}

.breadth-row span {
    min-width: 0;
}

.breadth-row strong {
    flex: 0 0 auto;

    color: var(--text);

    font-family: var(--mono);

    font-size: 10px;

    font-weight: 700;

    font-variant-numeric:
        tabular-nums;
}

.breadth-visual {
    margin-top: 14px;

    padding-top: 12px;

    border-top:
        1px solid var(--line-soft);
}

.breadth-bar {
    display: flex;

    width: 100%;
    height: 5px;

    overflow: hidden;

    border-radius: 1px;

    background: #263741;
}

.breadth-segment {
    height: 100%;
}

.breadth-up {
    background: var(--mint);
}

.breadth-down {
    background: var(--coral);
}

.breadth-flat {
    background: #62727e;
}

.breadth-legend {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 5px;

    margin-top: 7px;

    color: var(--text-muted);

    font-family: var(--mono);

    font-size: 9px;

    font-variant-numeric:
        tabular-nums;
}

.breadth-legend div:nth-child(2) {
    text-align: center;
}

.breadth-legend div:nth-child(3) {
    text-align: right;
}

.breadth-oi {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 0;

    margin-top: 10px;

    overflow: hidden;

    border:
        1px solid var(--line-soft);

    border-radius: 3px;
}

.breadth-oi div {
    min-width: 0;

    padding:
        8px 9px;

    border: 0;

    border-radius: 0;

    background:
        rgba(5, 11, 16, 0.16);
}

.breadth-oi div + div {
    border-left:
        1px solid var(--line-soft);
}

.breadth-oi span {
    display: block;

    margin-bottom: 4px;

    color: var(--text-muted);

    font-family: var(--mono);

    font-size: 9px;

    line-height: 1.45;

    text-transform: uppercase;

    letter-spacing: 0.025em;
}

.breadth-oi strong {
    font-family: var(--mono);

    font-size: 11px;

    font-weight: 700;

    font-variant-numeric:
        tabular-nums;
}


/* =========================================================
   SIGNALS / RESEARCH
   ========================================================= */

.split {
    display: grid;

    grid-template-columns:
        1.25fr 0.75fr;

    gap: 9px;
}

.split > .panel {
    min-width: 0;

    padding:
        17px 18px 16px;
}

.split .panel-heading {
    margin-bottom: 14px;
}

.split .panel h2 {
    font-size: 17px;
}

.signal-list {
    display: grid;

    gap: 0;
}

.signal {
    display: grid;

    grid-template-columns:
        90px 1fr auto;

    gap: 14px;

    align-items: center;

    padding:
        11px 0;

    border-bottom:
        1px solid var(--line-soft);
}

.signal:last-child {
    border-bottom: 0;
}

.signal-symbol {
    color: var(--text);

    font-size: 13px;

    font-weight: 760;
}

.signal-description {
    color: var(--text-soft);

    font-size: 11px;

    line-height: 1.5;
}

.signal-meta {
    margin-top: 4px;

    color: var(--text-muted);

    font-family: var(--mono);

    font-size: 9px;

    line-height: 1.4;
}

.signal-level {
    font-family: var(--mono);

    font-size: 9px;

    font-weight: 750;

    font-variant-numeric:
        tabular-nums;
}

.signal-context {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 1px;

    margin-top: 10px;

    padding: 1px;

    overflow: hidden;

    border:
        1px solid var(--line-soft);

    border-radius: 4px;

    background: var(--line-soft);
}

.signal-context-item {
    min-width: 0;

    padding:
        9px 10px;

    border: 0;

    border-radius: 0;

    background:
        rgba(16, 27, 35, 0.98);
}

.signal-context-item span {
    display: block;

    margin-bottom: 4px;

    color: var(--text-muted);

    font-family: var(--mono);

    font-size: 9px;

    font-weight: 700;

    line-height: 1.45;

    letter-spacing: 0.025em;

    text-transform: uppercase;
}

.signal-context-item strong {
    color: #a9bac3;

    font-family: var(--mono);

    font-size: 11px;

    font-weight: 700;

    font-variant-numeric:
        tabular-nums;
}

.research-content {
    min-width: 0;
}

.research-state {
    position: relative;

    padding:
        15px 16px 15px 18px;

    border:
        1px solid var(--line-soft);

    border-radius: 4px;

    background:
        rgba(5, 11, 16, 0.15);

    color: #93a4ae;

    font-size: 11px;

    line-height: 1.62;
}

.research-state::before {
    content: "";

    position: absolute;

    top: 14px;
    bottom: 14px;
    left: 0;

    width: 1px;

    background:
        rgba(140, 173, 189, 0.28);
}

.research-state strong {
    display: block;

    margin-bottom: 6px;

    color: var(--text);

    font-size: 11px;

    font-weight: 700;
}


/* =========================================================
   MARKET LEADERS
   ========================================================= */

.compact-heading {
    margin-bottom: 14px;
}

.leaders-caption {
    color: var(--text-muted);

    font-family: var(--mono);

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.06em;
}

.market-leaders {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 1px;

    overflow: hidden;

    padding: 1px;

    border:
        1px solid var(--line-soft);

    border-radius: 5px;

    background: var(--line-soft);
}

.leader-card {
    position: relative;

    min-width: 0;

    padding:
        14px 15px;

    border: 0;

    border-radius: 0;

    background: var(--surface-2);

    transition:
        background 140ms ease;
}

.leader-card::before {
    content: "";

    position: absolute;

    top: 0;
    right: 15px;
    left: 15px;

    height: 1px;

    background:
        rgba(140, 173, 189, 0.14);
}

.leader-card:hover {
    background:
        rgba(17, 31, 39, 0.98);
}

.leader-card:hover::before {
    background:
        rgba(55, 224, 177, 0.42);
}

.leader-card > span {
    display: block;

    margin-bottom: 8px;

    color: var(--text-muted);

    font-family: var(--mono);

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.09em;
}

.leader-symbol {
    display: flex;

    justify-content: space-between;

    align-items: baseline;

    gap: 12px;
}

.leader-symbol strong {
    min-width: 0;

    overflow: hidden;

    color: var(--text);

    font-size: 17px;

    font-weight: 760;

    letter-spacing: -0.025em;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.leader-symbol em {
    flex: 0 0 auto;

    font-family: var(--mono);

    font-size: 12px;

    font-style: normal;

    font-weight: 750;

    font-variant-numeric:
        tabular-nums;
}

.leader-detail {
    margin-top: 6px;

    color: var(--text-muted);

    font-size: 9px;

    line-height: 1.4;
}


/* =========================================================
   MARKET EXPLORER
   ========================================================= */

.markets-panel {
    padding-bottom: 8px;
}

.markets-heading {
    align-items: center;
}

.market-controls {
    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    align-items: center;

    gap: 7px;
}

.market-controls input {
    width: 215px;

    min-height: 34px;

    padding:
        0 11px;

    border:
        1px solid var(--line-soft);

    border-radius: 3px;

    outline: none;

    background: #081219;

    color: var(--text);

    font-family: var(--mono);

    font-size: 10px;

    transition:
        border-color 140ms ease,
        background 140ms ease;
}

.market-controls input::placeholder {
    color: #526670;
}

.market-controls input:hover {
    background: #0a151c;
}

.market-controls input:focus {
    border-color:
        rgba(55, 224, 177, 0.38);

    background: #0a151c;
}

.market-filters {
    display: flex;

    flex-wrap: wrap;

    gap: 0;

    overflow: hidden;

    border:
        1px solid var(--line-soft);

    border-radius: 3px;

    background: #081219;
}

.market-filter {
    min-height: 32px;

    padding:
        0 10px;

    border: 0;

    border-right:
        1px solid var(--line-soft);

    border-radius: 0;

    background: transparent;

    color: var(--text-muted);

    cursor: pointer;

    font-family: var(--mono);

    font-size: 9px;

    font-weight: 650;

    transition:
        color 120ms ease,
        background 120ms ease;
}

.market-filter:last-child {
    border-right: 0;
}

.market-filter:hover {
    background:
        rgba(140, 173, 189, 0.035);

    color: var(--text);
}

.market-filter.active {
    background:
        rgba(55, 224, 177, 0.07);

    color: var(--mint);

    box-shadow:
        inset 0 -1px 0
        rgba(55, 224, 177, 0.65);
}

.market-filter:focus-visible {
    outline:
        1px solid
        rgba(55, 224, 177, 0.48);

    outline-offset: -2px;
}

.explorer-status {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    padding:
        9px 1px 11px;

    color: var(--text-muted);

    font-family: var(--mono);

    font-size: 9px;

    letter-spacing: 0.015em;
}

.explorer-status strong {
    color: #a6b8c1;

    font-weight: 700;
}

.table-wrap {
    overflow-x: auto;
}

.markets-panel .table-wrap {
    max-height: 700px;

    overflow-y: auto;

    border-top:
        1px solid var(--line-soft);

    border-bottom:
        1px solid
        rgba(140, 173, 189, 0.055);

    scrollbar-width: thin;

    scrollbar-color:
        #40515b
        #081016;
}

.markets-panel .table-wrap::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.markets-panel .table-wrap::-webkit-scrollbar-track {
    background: #081016;
}

.markets-panel .table-wrap::-webkit-scrollbar-thumb {
    border:
        2px solid #081016;

    border-radius: 8px;

    background: #40515b;
}

table {
    width: 100%;

    min-width: 960px;

    border-collapse: separate;

    border-spacing: 0;

    font-size: 10px;
}

thead {
    position: sticky;

    z-index: 4;

    top: 0;
}

th {
    padding:
        10px 11px;

    border-bottom:
        1px solid var(--line-soft);

    background: #0a141b;

    color: #728792;

    font-family: var(--mono);

    font-size: 9px;

    font-weight: 700;

    text-align: left;

    text-transform: uppercase;

    letter-spacing: 0.085em;

    white-space: nowrap;
}

td {
    padding:
        10px 11px;

    border-bottom:
        1px solid
        rgba(140, 173, 189, 0.055);

    color: var(--text-soft);

    font-family: var(--mono);

    font-size: 11px;

    line-height: 1.35;

    font-variant-numeric:
        tabular-nums;

    white-space: nowrap;
}

tbody tr {
    cursor: pointer;
}

tbody tr:hover {
    background:
        rgba(55, 224, 177, 0.026);
}

tbody tr:hover td {
    border-bottom-color:
        rgba(55, 224, 177, 0.09);
}

.num {
    text-align: right;

    font-variant-numeric:
        tabular-nums;
}

.symbol {
    color: var(--text);

    font-family: var(--sans);

    font-size: 12px;

    font-weight: 760;

    letter-spacing: -0.01em;
}

th:first-child {
    position: sticky;

    z-index: 6;

    left: 0;

    background: #0a141b;
}

td:first-child {
    position: sticky;

    z-index: 2;

    left: 0;

    background: var(--surface-1);
}

tbody tr:hover td:first-child {
    background: #0d1a21;

    box-shadow:
        inset 2px 0 0
        rgba(55, 224, 177, 0.55);
}

.sort-button {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 0;

    border: 0;

    background: transparent;

    color: inherit;

    cursor: pointer;

    font:
        inherit;

    text-transform: inherit;
}

th.num .sort-button {
    margin-left: auto;
}

.sort-button:hover {
    color: var(--text);
}

.sort-button.active {
    color: var(--mint);
}

.sort-button:focus-visible {
    outline:
        1px solid
        rgba(55, 224, 177, 0.45);

    outline-offset: 3px;
}

.sort-indicator {
    width: 7px;

    color: var(--mint);

    font-size: 7px;
}


/* =========================================================
   MARKET DETAIL
   ========================================================= */

.detail-panel {
    position: relative;
}

.detail-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 7px;
}

.detail-item {
    padding: 13px;

    border:
        1px solid var(--line-soft);

    border-radius: 4px;

    background: var(--surface-2);
}

.detail-item span {
    display: block;

    margin-bottom: 6px;

    color: var(--text-muted);

    font-family: var(--mono);

    font-size: 6px;

    text-transform: uppercase;
}

.detail-item strong {
    color: var(--text);

    font-size: 12px;

    font-variant-numeric:
        tabular-nums;
}

.close-button {
    padding:
        7px 10px;

    border:
        1px solid var(--line-soft);

    border-radius: 4px;

    background: transparent;

    color: var(--text-soft);

    cursor: pointer;

    font-family: var(--mono);

    font-size: 8px;
}

.close-button:hover {
    border-color:
        rgba(55, 224, 177, 0.20);

    color: var(--text);
}


/* =========================================================
   STATES
   ========================================================= */

.positive {
    color: var(--mint) !important;
}

.negative {
    color: var(--coral) !important;
}

.warning {
    color: var(--amber) !important;
}

.loading {
    padding: 18px 0;

    color: var(--text-muted);

    font-size: 10px;
}

.hidden {
    display: none !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-top: 18px;

    padding:
        20px 2px 0;

    border-top:
        1px solid var(--line-soft);

    color: #61747f;

    font-family: var(--mono);

    font-size: 7px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1150px) {

    .market-state-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .state-cell:nth-child(3) {
        border-right: 0;
    }

    .state-cell:nth-child(-n+3) {
        border-bottom:
            1px solid var(--line-soft);
    }

    .market-leaders {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 1000px) {

    .brand {
        min-width: auto;
    }

    .hero {
        grid-template-columns: 1fr;

        gap: 24px;
    }

    .hero-meta {
        width: 100%;

        max-width: 580px;

        padding:
            15px 0 0;

        border-top:
            1px solid var(--line-soft);

        border-left: 0;
    }

    .kpis,
    .breadth-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .split {
        grid-template-columns: 1fr;
    }

    .detail-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .markets-heading {
        align-items: flex-start;

        flex-direction: column;
    }

    .market-controls {
        width: 100%;

        justify-content: flex-start;
    }

}


@media (max-width: 720px) {

    .shell {
        width:
            calc(100% - 24px);
    }

    .topnav {
        display: none;
    }

    .brand-sub,
    .brand-badge {
        display: none;
    }

    .hero::before {
        display: none;
    }

    .hero {
        padding-top: 18px;
    }

    .hero-meta {
        max-width: none;
    }

    .hero-trust {
        gap:
            10px 14px;
    }

    .market-state-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .state-cell {
        border-bottom:
            1px solid var(--line-soft);
    }

    .state-cell:nth-child(2n) {
        border-right: 0;
    }

    .signal-context {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 620px) {

    body {
        background-size:
            34px 34px,
            34px 34px,
            auto,
            auto;
    }

    main {
        padding-top: 26px;
    }

    .topbar {
        min-height: 62px;
    }

    .brand-mark {
        width: 48px;
    }

    .brand-mark img {
        width: 45px;
    }

    h1 {
        font-size:
            clamp(
                36px,
                12vw,
                52px
            );
    }

    .kpis,
    .breadth-grid,
    .detail-grid,
    .market-leaders {
        grid-template-columns: 1fr;
    }

    .market-controls input {
        width: 100%;
    }

    .market-filters {
        width: 100%;
    }

    .market-filter {
        flex:
            1 1 auto;
    }

    .explorer-status,
    footer {
        flex-direction: column;

        align-items: flex-start;
    }

}

/* ==========================================================
   PERPMETRIC_9C_B1_INSTRUMENT_DISCOVERY
   ========================================================== */

.instrument-explorer {
    scroll-margin-top: 96px;
}

.instrument-explorer-heading {
    align-items: flex-start;
    gap: 24px;
}

.instrument-explorer-copy {
    max-width: 760px;
}

.instrument-explorer-copy h2 {
    margin: 4px 0 0;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}

.instrument-explorer-copy p {
    margin: 9px 0 0;
    max-width: 720px;
    color: var(
        --muted,
        rgba(220, 228, 238, 0.62)
    );
    font-size: 0.88rem;
    line-height: 1.6;
}

.instrument-explorer-summary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.instrument-explorer-summary span {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 7px 10px;
    border: 1px solid var(
        --border,
        rgba(255, 255, 255, 0.09)
    );
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
    font-size: 0.72rem;
    color: var(
        --muted,
        rgba(220, 228, 238, 0.62)
    );
}

.instrument-explorer-summary strong {
    color: var(
        --text,
        #eef3f8
    );
    font-variant-numeric: tabular-nums;
}

.instrument-toolbar {
    display: grid;
    grid-template-columns:
        auto
        minmax(220px, 1fr)
        minmax(150px, 190px)
        minmax(140px, 170px);
    gap: 12px;
    align-items: end;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid var(
        --border,
        rgba(255, 255, 255, 0.09)
    );
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.018);
}

.instrument-scope {
    display: flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(
        --border,
        rgba(255, 255, 255, 0.09)
    );
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.14);
}

.instrument-scope-button {
    appearance: none;
    border: 0;
    border-radius: 5px;
    padding: 8px 12px;
    background: transparent;
    color: var(
        --muted,
        rgba(220, 228, 238, 0.64)
    );
    font: inherit;
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.instrument-scope-button:hover {
    color: var(
        --text,
        #eef3f8
    );
    background: rgba(255, 255, 255, 0.04);
}

.instrument-scope-button.active {
    color: var(
        --text,
        #eef3f8
    );
    background: rgba(94, 234, 212, 0.10);
    box-shadow:
        inset 0 0 0 1px
        rgba(94, 234, 212, 0.22);
}

.instrument-control {
    display: grid;
    gap: 6px;
}

.instrument-control > span {
    color: var(
        --muted,
        rgba(220, 228, 238, 0.56)
    );
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.instrument-control input,
.instrument-control select {
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid var(
        --border,
        rgba(255, 255, 255, 0.10)
    );
    border-radius: 6px;
    outline: none;
    background: rgba(0, 0, 0, 0.18);
    color: var(
        --text,
        #eef3f8
    );
    font: inherit;
    font-size: 0.8rem;
}

.instrument-control input:focus,
.instrument-control select:focus {
    border-color: rgba(94, 234, 212, 0.42);
    box-shadow:
        0 0 0 2px
        rgba(94, 234, 212, 0.06);
}

.instrument-control select option {
    background: #11171f;
    color: #eef3f8;
}

.instrument-explorer-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 11px 1px 9px;
    color: var(
        --muted,
        rgba(220, 228, 238, 0.52)
    );
    font-size: 0.69rem;
}

.instrument-table-wrap {
    overflow: auto;
    max-height: 720px;
    border-top: 1px solid var(
        --border,
        rgba(255, 255, 255, 0.07)
    );
    border-bottom: 1px solid var(
        --border,
        rgba(255, 255, 255, 0.07)
    );
}

.instrument-table {
    min-width: 1030px;
}

.instrument-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    backdrop-filter: blur(12px);
}

.instrument-table tbody tr {
    transition:
        background 120ms ease,
        box-shadow 120ms ease;
}

.instrument-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.025);
}

.instrument-link {
    display: grid;
    gap: 3px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.instrument-link:hover .instrument-symbol {
    color: var(
        --accent,
        #6ee7cf
    );
}

.instrument-symbol {
    font-size: 0.84rem;
    font-weight: 750;
    letter-spacing: -0.01em;
}

.instrument-canonical {
    color: var(
        --muted,
        rgba(220, 228, 238, 0.46)
    );
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: 0.65rem;
}

.instrument-venue {
    display: grid;
    gap: 3px;
}

.instrument-venue strong {
    font-size: 0.76rem;
    font-weight: 650;
}

.instrument-venue span {
    color: var(
        --muted,
        rgba(220, 228, 238, 0.46)
    );
    font-size: 0.65rem;
}

.instrument-market-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.045);
    color: var(
        --muted,
        rgba(220, 228, 238, 0.62)
    );
    font-size: 0.59rem;
    font-weight: 750;
    letter-spacing: 0.06em;
}

.instrument-market-badge.hip3 {
    background: rgba(94, 234, 212, 0.075);
    color: var(
        --accent,
        #6ee7cf
    );
}

.instrument-data-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.67rem;
    white-space: nowrap;
}

.instrument-data-state::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    box-shadow:
        0 0 0 3px
        rgba(255, 255, 255, 0.025);
}

.instrument-data-state.fresh {
    color: var(
        --positive,
        #71d6b2
    );
}

.instrument-data-state.degraded {
    color: var(
        --warning,
        #e5bf72
    );
}

.instrument-data-state.stale {
    color: var(
        --negative,
        #e58686
    );
}

.instrument-data-state.unavailable {
    color: var(
        --muted,
        rgba(220, 228, 238, 0.48)
    );
}

.instrument-empty {
    padding: 36px 18px !important;
    text-align: center !important;
    color: var(
        --muted,
        rgba(220, 228, 238, 0.52)
    );
}

.instrument-discovery-detail {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(
        --border,
        rgba(255, 255, 255, 0.09)
    );
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.018);
}

.instrument-detail-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}

.instrument-detail-heading h3 {
    margin: 4px 0 0;
    font-size: 1.25rem;
}

.instrument-detail-identity {
    margin-top: 5px;
    color: var(
        --muted,
        rgba(220, 228, 238, 0.52)
    );
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: 0.7rem;
}

.instrument-detail-mode {
    display: inline-flex;
    margin-top: 12px;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 5px;
    color: var(
        --muted,
        rgba(220, 228, 238, 0.60)
    );
    background: rgba(255, 255, 255, 0.025);
    font-size: 0.67rem;
    font-weight: 650;
    letter-spacing: 0.03em;
}

.instrument-detail-grid {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
    gap: 8px;
    margin-top: 14px;
}

.instrument-detail-cell {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(
        --border,
        rgba(255, 255, 255, 0.07)
    );
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.10);
}

.instrument-detail-cell span {
    display: block;
    margin-bottom: 5px;
    color: var(
        --muted,
        rgba(220, 228, 238, 0.48)
    );
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.instrument-detail-cell strong {
    display: block;
    overflow: hidden;
    color: var(
        --text,
        #eef3f8
    );
    font-size: 0.82rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1050px) {
    .instrument-toolbar {
        grid-template-columns:
            1fr
            1fr;
    }

    .instrument-scope {
        grid-column: 1 / -1;
        width: fit-content;
    }

    .instrument-search {
        grid-column: 1 / -1;
    }

    .instrument-detail-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 680px) {
    .instrument-explorer-heading {
        display: grid;
    }

    .instrument-explorer-summary {
        justify-content: flex-start;
    }

    .instrument-toolbar {
        grid-template-columns: 1fr;
    }

    .instrument-scope,
    .instrument-search {
        grid-column: auto;
    }

    .instrument-scope {
        width: 100%;
    }

    .instrument-scope-button {
        flex: 1;
    }

    .instrument-detail-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   PERPMETRIC_9C_B2_MARKETS_WORKSPACE
   ========================================================== */

.market-workspace {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;

    margin-top: 24px;
    padding: 18px 18px 16px;

    border: 1px solid var(
        --border,
        rgba(255, 255, 255, 0.09)
    );

    border-bottom-color:
        rgba(255, 255, 255, 0.055);

    border-radius:
        10px 10px 0 0;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.024),
            rgba(255, 255, 255, 0.012)
        );

    scroll-margin-top: 94px;
}

.market-workspace-copy {
    min-width: 0;
    max-width: 660px;
}

.market-workspace-copy h2 {
    margin: 4px 0 0;

    color: var(
        --text,
        #eef3f8
    );

    font-size: 1.3rem;
    letter-spacing: -0.025em;
}

.market-workspace-copy p {
    margin: 8px 0 0;
    max-width: 620px;

    color: var(
        --muted,
        rgba(220, 228, 238, 0.58)
    );

    font-size: 0.79rem;
    line-height: 1.55;
}

.market-workspace-tabs {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(170px, 1fr)
        );

    gap: 5px;

    min-width: 390px;
    padding: 4px;

    border: 1px solid var(
        --border,
        rgba(255, 255, 255, 0.085)
    );

    border-radius: 8px;

    background:
        rgba(0, 0, 0, 0.15);
}

.market-workspace-tab {
    appearance: none;

    display: grid;
    gap: 3px;

    min-height: 48px;
    padding: 8px 12px;

    border: 1px solid transparent;
    border-radius: 6px;

    background: transparent;

    color: var(
        --muted,
        rgba(220, 228, 238, 0.57)
    );

    font: inherit;
    text-align: left;

    cursor: pointer;

    transition:
        color 120ms ease,
        background 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease;
}

.market-workspace-tab:hover {
    color: var(
        --text,
        #eef3f8
    );

    background:
        rgba(255, 255, 255, 0.035);
}

.market-workspace-tab.active {
    border-color:
        rgba(94, 234, 212, 0.20);

    background:
        rgba(94, 234, 212, 0.075);

    color: var(
        --text,
        #eef3f8
    );

    box-shadow:
        inset 0 0 0 1px
        rgba(94, 234, 212, 0.035);
}

.market-workspace-tab:focus-visible {
    outline:
        2px solid
        rgba(94, 234, 212, 0.48);

    outline-offset: 2px;
}

.workspace-tab-label {
    font-size: 0.77rem;
    font-weight: 720;
    letter-spacing: -0.01em;
}

.workspace-tab-meta {
    color: var(
        --muted,
        rgba(220, 228, 238, 0.42)
    );

    font-size: 0.61rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}

.market-workspace-tab.active
.workspace-tab-meta {
    color:
        rgba(129, 225, 205, 0.69);
}


/*
 * Only one workspace surface is visible at a time.
 * Instruments are marked active in the HTML so there is
 * no stacked-panel flash during page startup.
 */

[data-market-workspace-panel] {
    display: none;
}

[data-market-workspace-panel]
.workspace-panel-active {
    display: none;
}

[data-market-workspace-panel].workspace-panel-active {
    display: block;
}


/*
 * The controller and selected surface form one visual unit.
 */

main .market-workspace-panel {
    margin-top: 0;

    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.market-workspace-panel
.panel-heading h2 {
    font-size: 1.08rem;
}


/* ---------------- responsive workspace ---------------- */

@media (max-width: 940px) {
    .market-workspace {
        display: grid;
        align-items: stretch;
    }

    .market-workspace-tabs {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 620px) {
    .market-workspace {
        gap: 15px;

        padding:
            15px 14px 13px;
    }

    .market-workspace-tabs {
        grid-template-columns: 1fr;
    }

    .market-workspace-tab {
        min-height: 44px;
    }
}


/* ==========================================================
   PERPMETRIC_9C_B4_WORKSPACE_HARMONIZATION
   ========================================================== */


/* ----------------------------------------------------------
   Shared view header
   ---------------------------------------------------------- */

.workspace-view-heading {
    align-items: flex-start;
    gap: 24px;

    min-height: 88px;

    margin-bottom: 14px;
}

.workspace-view-copy {
    min-width: 0;
    max-width: 720px;
}

.workspace-view-copy h2 {
    margin: 4px 0 0;

    font-size: 1.08rem;
    letter-spacing: -0.02em;
}

.workspace-view-copy p {
    margin: 8px 0 0;

    max-width: 680px;

    color: var(
        --muted,
        rgba(220, 228, 238, 0.58)
    );

    font-size: 0.78rem;
    line-height: 1.55;
}


/* ----------------------------------------------------------
   Shared shown / loaded counters
   ---------------------------------------------------------- */

.workspace-view-summary {
    display: flex;
    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 8px;
}

.workspace-view-summary span {
    display: inline-flex;

    align-items: baseline;

    gap: 5px;

    padding: 7px 10px;

    border:
        1px solid
        var(
            --border,
            rgba(255, 255, 255, 0.09)
        );

    border-radius: 7px;

    background:
        rgba(255, 255, 255, 0.025);

    color: var(
        --muted,
        rgba(220, 228, 238, 0.58)
    );

    font-size: 0.70rem;

    white-space: nowrap;
}

.workspace-view-summary strong {
    color: var(
        --text,
        #eef3f8
    );

    font-weight: 720;

    font-variant-numeric:
        tabular-nums;
}


/* ----------------------------------------------------------
   Shared toolbar shell
   ---------------------------------------------------------- */

.workspace-view-toolbar {
    margin-top: 0;

    min-height: 68px;

    padding: 12px 14px;

    border:
        1px solid
        var(
            --border,
            rgba(255, 255, 255, 0.09)
        );

    border-radius: 8px;

    background:
        rgba(255, 255, 255, 0.018);
}

.workspace-control {
    display: grid;
    gap: 6px;
}

.workspace-control > span,
.workspace-view-toolbar
.instrument-control > span {
    color: var(
        --muted,
        rgba(220, 228, 238, 0.52)
    );

    font-size: 0.64rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* ----------------------------------------------------------
   Instrument controls
   ---------------------------------------------------------- */

.instrument-toolbar.workspace-view-toolbar {
    gap: 12px;

    align-items: end;
}

.instrument-toolbar.workspace-view-toolbar
.instrument-scope {
    position: relative;

    margin-top: 18px;
}

.instrument-toolbar.workspace-view-toolbar
.instrument-scope::before {
    content: "Universe";

    position: absolute;

    top: -18px;
    left: 0;

    color: var(
        --muted,
        rgba(220, 228, 238, 0.52)
    );

    font-size: 0.64rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.instrument-toolbar.workspace-view-toolbar
.instrument-scope-button {
    min-height: 34px;

    padding:
        0 12px;
}

.instrument-toolbar.workspace-view-toolbar
.instrument-control input,
.instrument-toolbar.workspace-view-toolbar
.instrument-control select {
    min-height: 36px;

    border-radius: 6px;
}


/* ----------------------------------------------------------
   Analytics controls
   ---------------------------------------------------------- */

.analytics-toolbar {
    display: grid;

    grid-template-columns:
        minmax(260px, 1fr)
        auto;

    align-items: end;

    gap: 12px;

    justify-content: stretch;
}

.analytics-toolbar
.analytics-search {
    min-width: 0;
}

.analytics-toolbar input {
    width: 100%;

    min-height: 36px;

    padding:
        7px 10px;

    border:
        1px solid
        var(
            --border,
            rgba(255, 255, 255, 0.10)
        );

    border-radius: 6px;

    outline: none;

    background:
        rgba(0, 0, 0, 0.18);

    color: var(
        --text,
        #eef3f8
    );

    font: inherit;
    font-size: 0.8rem;

    transition:
        border-color 140ms ease,
        background 140ms ease,
        box-shadow 140ms ease;
}

.analytics-toolbar input::placeholder {
    color: #526670;
}

.analytics-toolbar input:hover {
    background:
        rgba(0, 0, 0, 0.24);
}

.analytics-toolbar input:focus {
    border-color:
        rgba(94, 234, 212, 0.42);

    background:
        rgba(0, 0, 0, 0.24);

    box-shadow:
        0 0 0 2px
        rgba(94, 234, 212, 0.06);
}

.analytics-toolbar
.market-filters {
    min-height: 36px;

    border-radius: 6px;
}

.analytics-toolbar
.market-filter {
    min-height: 34px;

    padding:
        0 12px;

    font-family: inherit;

    font-size: 0.69rem;

    white-space: nowrap;
}


/* ----------------------------------------------------------
   Shared context / sort row
   ---------------------------------------------------------- */

.workspace-view-meta {
    display: flex;

    justify-content: space-between;
    align-items: center;

    flex-wrap: wrap;

    gap: 16px;

    margin:
        11px 1px 9px;

    padding: 0;

    color: var(
        --muted,
        rgba(220, 228, 238, 0.48)
    );

    font-family: var(--mono);

    font-size: 9px;
    letter-spacing: 0.015em;
}

.instrument-explorer-meta.workspace-view-meta {
    margin:
        11px 1px 9px;

    font-size: 9px;
}


/* ----------------------------------------------------------
   Unified table viewport
   ---------------------------------------------------------- */

.market-workspace-panel
.instrument-table-wrap,
.market-workspace-panel
.table-wrap {
    height:
        min(
            700px,
            62vh
        );

    min-height: 420px;
    max-height: none;

    overflow: auto;

    border-top:
        1px solid
        var(
            --border,
            rgba(255, 255, 255, 0.07)
        );

    border-bottom:
        1px solid
        var(
            --border,
            rgba(255, 255, 255, 0.07)
        );

    scrollbar-width: thin;

    scrollbar-color:
        #40515b
        #081016;
}

.market-workspace-panel
.instrument-table-wrap::-webkit-scrollbar,
.market-workspace-panel
.table-wrap::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.market-workspace-panel
.instrument-table-wrap::-webkit-scrollbar-track,
.market-workspace-panel
.table-wrap::-webkit-scrollbar-track {
    background: #081016;
}

.market-workspace-panel
.instrument-table-wrap::-webkit-scrollbar-thumb,
.market-workspace-panel
.table-wrap::-webkit-scrollbar-thumb {
    border-radius: 8px;

    background: #40515b;
}


/* ----------------------------------------------------------
   Shared terminal density
   ---------------------------------------------------------- */

.market-workspace-panel table {
    min-width: 1000px;
}

.market-workspace-panel th {
    padding:
        9px 11px;
}

.market-workspace-panel td {
    padding:
        9px 11px;
}

.market-workspace-panel
.instrument-link {
    gap: 1px;
}

.market-workspace-panel
.instrument-venue {
    gap: 2px;
}


/* ----------------------------------------------------------
   Keep both modes visually attached to the controller
   ---------------------------------------------------------- */

.market-workspace-panel {
    min-height: 0;
}

.market-workspace-panel
.panel-heading:first-child {
    padding-top: 0;
}


/* ----------------------------------------------------------
   Responsive harmonization
   ---------------------------------------------------------- */

@media (max-width: 1050px) {

    .analytics-toolbar {
        grid-template-columns: 1fr;
    }

    .analytics-toolbar
    .analytics-filter-control {
        min-width: 0;
    }

    .analytics-toolbar
    .market-filters {
        width: fit-content;
        max-width: 100%;
    }
}


@media (max-width: 680px) {

    .workspace-view-heading {
        display: grid;

        min-height: 0;
    }

    .workspace-view-summary {
        justify-content: flex-start;
    }

    .analytics-toolbar
    .market-filters {
        width: 100%;
    }

    .analytics-toolbar
    .market-filter {
        flex:
            1 1 auto;
    }

    .workspace-view-meta {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }

    .market-workspace-panel
    .instrument-table-wrap,
    .market-workspace-panel
    .table-wrap {
        height: 56vh;

        min-height: 340px;
    }
}


/* ==========================================================
   PERPMETRIC_9C_B5B_INSTRUMENT_DETAIL_CHART
   ========================================================== */

.price-history-card {
    margin: 18px 0;
    padding: 16px;

    border:
        1px solid
        var(
            --border,
            rgba(255, 255, 255, 0.09)
        );

    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0.008)
        );

    overflow: hidden;
}


.price-history-heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 12px;
}


.history-eyebrow {
    color:
        var(
            --muted,
            rgba(220, 228, 238, 0.54)
        );

    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.10em;
}


.history-price-line {
    display: flex;

    align-items: baseline;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 5px;
}


.history-price-line strong {
    color:
        var(
            --text,
            #eef3f8
        );

    font-family: var(--mono);

    font-size:
        clamp(
            1.25rem,
            2.1vw,
            1.8rem
        );

    font-weight: 700;

    font-variant-numeric:
        tabular-nums;

    letter-spacing:
        -0.035em;
}


.history-price-change {
    color:
        var(
            --muted,
            rgba(220, 228, 238, 0.56)
        );

    font-family: var(--mono);

    font-size: 0.76rem;
    font-weight: 700;

    font-variant-numeric:
        tabular-nums;
}


.history-window-switch {
    display: inline-flex;

    align-items: center;

    padding: 3px;

    border:
        1px solid
        var(
            --border,
            rgba(255, 255, 255, 0.09)
        );

    border-radius: 7px;

    background:
        rgba(0, 0, 0, 0.16);
}


.history-window-button {
    min-width: 44px;
    min-height: 30px;

    padding: 0 10px;

    border: 0;
    border-radius: 5px;

    background: transparent;

    color:
        var(
            --muted,
            rgba(220, 228, 238, 0.56)
        );

    cursor: pointer;

    font-family: var(--mono);

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.025em;

    transition:
        background 140ms ease,
        color 140ms ease,
        box-shadow 140ms ease;
}


.history-window-button:hover {
    color:
        var(
            --text,
            #eef3f8
        );

    background:
        rgba(255, 255, 255, 0.045);
}


.history-window-button.active {
    color:
        var(
            --mint,
            #5eead4
        );

    background:
        rgba(94, 234, 212, 0.09);

    box-shadow:
        inset 0 0 0 1px
        rgba(94, 234, 212, 0.16);
}


.history-window-button:focus-visible {
    outline:
        2px solid
        rgba(94, 234, 212, 0.42);

    outline-offset: 2px;
}


.history-chart-status {
    min-height: 18px;

    margin-bottom: 6px;

    color:
        var(
            --muted,
            rgba(220, 228, 238, 0.50)
        );

    font-family: var(--mono);
    font-size: 9px;

    letter-spacing: 0.015em;
}


.history-chart-status.partial {
    color:
        var(
            --amber,
            #f5c26b
        );
}


.history-chart-viewport {
    position: relative;

    min-height: 230px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.055);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.055);

    background:
        linear-gradient(
            180deg,
            rgba(7, 15, 20, 0.22),
            rgba(7, 15, 20, 0.04)
        );

    overflow: hidden;
}


.history-chart-empty {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 230px;

    padding: 30px;

    color:
        var(
            --muted,
            rgba(220, 228, 238, 0.42)
        );

    font-family: var(--mono);
    font-size: 10px;

    text-align: center;
}


.history-chart-svg {
    display: block;

    width: 100%;
    height: auto;
}


.history-grid-line {
    stroke:
        rgba(255, 255, 255, 0.055);

    stroke-width: 1;

    vector-effect:
        non-scaling-stroke;
}


.history-axis-label {
    fill:
        rgba(207, 219, 229, 0.42);

    font-family: var(--mono);

    font-size: 10px;

    font-variant-numeric:
        tabular-nums;
}


.history-line {
    fill: none;

    stroke:
        var(
            --mint,
            #5eead4
        );

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;

    vector-effect:
        non-scaling-stroke;
}


.history-last-point-halo {
    fill:
        rgba(94, 234, 212, 0.14);
}


.history-last-point {
    fill:
        var(
            --mint,
            #5eead4
        );

    stroke: #081116;
    stroke-width: 2;

    vector-effect:
        non-scaling-stroke;
}


.history-chart-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 9px;

    color:
        var(
            --muted,
            rgba(220, 228, 238, 0.43)
        );

    font-family: var(--mono);
    font-size: 9px;

    letter-spacing: 0.02em;
}


@media (max-width: 680px) {

    .price-history-card {
        padding: 12px;
    }

    .price-history-heading {
        display: grid;

        gap: 12px;
    }

    .history-window-switch {
        width: 100%;
    }

    .history-window-button {
        flex: 1 1 25%;

        min-width: 0;
    }

    .history-chart-viewport,
    .history-chart-empty {
        min-height: 180px;
    }

    .history-axis-label {
        font-size: 9px;
    }
}

/* =========================================================
   PERPMETRIC_9CD2_SIGNAL_INTELLIGENCE_CANONICAL

   Canonical Signal Intelligence presentation.
   Replaces historical 9C-C5/C6/C7/C8 style layers.

   Behaviour remains in app.js:
   - Top 5 markets by default
   - EXTREME > TAIL > |robust z|
   - expandable detail rows
   ========================================================= */


/* ---------------------------------------------------------
   Layout
   --------------------------------------------------------- */

.signal-intelligence-layout {
    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(280px, 0.6fr);

    align-items: start;
}


.signal-intelligence-layout.research-collapsed {
    grid-template-columns:
        minmax(0, 1fr);
}


.signal-intelligence-layout.research-collapsed
.research-panel {
    display: none;
}


.signal-intelligence-panel {
    min-width: 0;
}


.signal-intelligence-heading {
    align-items: flex-start;
}


.signal-intelligence-heading h2 {
    font-size:
        clamp(
            18px,
            1vw,
            21px
        );

    line-height: 1.25;
}


.signal-intelligence-subtitle {
    max-width: 760px;

    margin:
        8px 0 0;

    color:
        rgba(
            220,
            228,
            238,
            0.66
        );

    font-size:
        var(--type-sm);

    line-height: 1.6;
}


#signalBadge {
    padding:
        6px 9px;

    font-size:
        var(--type-xs);
}


/* ---------------------------------------------------------
   Overview strip
   --------------------------------------------------------- */

.signal-summary {
    margin-bottom: 10px;
}


.signal-overview-strip {
    display: flex;

    align-items: stretch;

    overflow: hidden;

    min-height: 60px;

    border:
        1px solid
        var(--line-soft);

    border-radius: 4px;

    background:
        #09131a;
}


.signal-overview-stat {
    display: flex;

    align-items: baseline;

    gap: 11px;

    min-width: 138px;

    padding:
        15px 17px;

    border-right:
        1px solid
        var(--line-soft);
}


.signal-overview-stat span {
    color:
        rgba(
            220,
            228,
            238,
            0.56
        );

    font-family:
        var(--mono);

    font-size:
        var(--type-xs);

    font-weight: 700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.signal-overview-stat strong {
    color:
        var(--text);

    font-family:
        var(--mono);

    font-size:
        clamp(
            17px,
            0.95vw,
            20px
        );

    font-weight: 760;

    font-variant-numeric:
        tabular-nums;
}


.signal-overview-extreme strong {
    color: var(--coral);
}


.signal-overview-tail strong {
    color: var(--amber);
}


.signal-overview-note {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex:
        1 1 auto;

    padding:
        0 18px;

    color:
        rgba(
            220,
            228,
            238,
            0.58
        );

    font-family:
        var(--mono);

    font-size:
        var(--type-xs);

    text-align: right;
}


/* ---------------------------------------------------------
   Signal terminal
   --------------------------------------------------------- */

.signal-terminal {
    overflow: hidden;

    border:
        1px solid
        var(--line-soft);

    border-radius: 4px;

    background:
        #09131a;
}


.signal-terminal-head,
.signal-terminal-summary {
    display: grid;

    grid-template-columns:
        104px
        100px
        minmax(290px, 1fr)
        118px
        100px
        68px
        26px;

    column-gap: 16px;

    align-items: center;
}


.signal-terminal-head {
    min-height: 38px;

    padding:
        0 16px;

    border-bottom:
        1px solid
        var(--line-soft);

    background:
        #081118;

    color:
        rgba(
            184,
            202,
            212,
            0.62
        );

    font-family:
        var(--mono);

    font-size:
        var(--type-xs);

    font-weight: 700;

    letter-spacing:
        0.075em;

    text-transform:
        uppercase;
}


.signal-terminal-head span:nth-child(4),
.signal-terminal-head span:nth-child(5),
.signal-terminal-head span:nth-child(6) {
    text-align: right;
}


/* ---------------------------------------------------------
   Market row
   --------------------------------------------------------- */

.signal-terminal-row {
    position: relative;

    display: block;

    border-bottom:
        1px solid
        rgba(
            140,
            173,
            189,
            0.06
        );

    background:
        #0a141b;
}


.signal-terminal-row:last-of-type {
    border-bottom: 0;
}


.signal-terminal-row::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 2px;

    background:
        rgba(
            223,
            177,
            84,
            0.52
        );
}


.signal-terminal-row--extreme::before {
    background:
        rgba(
            255,
            98,
            117,
            0.78
        );
}


.signal-terminal-summary {
    min-height: 72px;

    padding:
        0 16px;

    cursor: pointer;

    list-style: none;

    transition:
        background
        120ms
        ease;
}


.signal-terminal-summary::-webkit-details-marker {
    display: none;
}


.signal-terminal-summary:hover {
    background:
        rgba(
            55,
            224,
            177,
            0.018
        );
}


.signal-terminal-row[open]
.signal-terminal-summary {
    background:
        #0b171e;
}


.signal-terminal-market {
    color:
        var(--text);

    font-family:
        var(--sans);

    font-size:
        clamp(
            15px,
            0.82vw,
            17px
        );

    font-weight: 780;

    letter-spacing:
        -0.015em;
}


.signal-terminal-severity {
    display: inline-flex;

    align-items: center;

    padding:
        5px 8px;

    border:
        1px solid
        transparent;

    border-radius: 3px;

    font-family:
        var(--mono);

    font-size:
        var(--type-2xs);

    font-weight: 760;

    letter-spacing:
        0.045em;
}


.signal-terminal-severity--extreme {
    border-color:
        rgba(
            255,
            98,
            117,
            0.23
        );

    background:
        rgba(
            255,
            98,
            117,
            0.055
        );

    color:
        var(--coral);
}


.signal-terminal-severity--tail {
    border-color:
        rgba(
            223,
            177,
            84,
            0.19
        );

    background:
        rgba(
            223,
            177,
            84,
            0.05
        );

    color:
        var(--amber);
}


.signal-terminal-primary {
    overflow: hidden;

    min-width: 0;
}


.signal-terminal-primary strong {
    display: block;

    overflow: hidden;

    color:
        rgba(
            236,
            242,
            247,
            0.90
        );

    font-size:
        clamp(
            12px,
            0.68vw,
            14px
        );

    font-weight: 680;

    line-height: 1.35;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.signal-terminal-primary span {
    display: block;

    overflow: hidden;

    margin-top: 5px;

    color:
        rgba(
            200,
            214,
            223,
            0.62
        );

    font-family:
        var(--mono);

    font-size:
        var(--type-sm);

    line-height: 1.45;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.signal-terminal-number {
    color:
        var(--text);

    font-family:
        var(--mono);

    font-size:
        clamp(
            11px,
            0.62vw,
            13px
        );

    font-weight: 720;

    text-align: right;

    font-variant-numeric:
        tabular-nums;
}


.signal-terminal-z {
    color:
        rgba(
            197,
            213,
            221,
            0.72
        );
}


.signal-terminal-count {
    color:
        var(--text-soft);

    font-family:
        var(--mono);

    font-size:
        var(--type-sm);

    font-weight: 700;

    text-align: right;
}


.signal-terminal-chevron {
    color:
        rgba(
            169,
            193,
            204,
            0.75
        );

    font-size: 20px;

    text-align: center;

    transition:
        transform
        120ms
        ease;
}


.signal-terminal-row[open]
.signal-terminal-chevron {
    transform:
        rotate(90deg);
}


/* ---------------------------------------------------------
   Expanded detail
   --------------------------------------------------------- */

.signal-detail {
    padding:
        0
        16px
        12px
        236px;

    border-top:
        1px solid
        rgba(
            140,
            173,
            189,
            0.055
        );

    background:
        #081219;
}


.signal-detail-head,
.signal-detail-row {
    display: grid;

    grid-template-columns:
        minmax(175px, 1.05fr)
        minmax(260px, 1.35fr)
        110px
        92px;

    column-gap: 18px;

    align-items: center;
}


.signal-detail-head {
    min-height: 34px;

    color:
        rgba(
            184,
            202,
            212,
            0.58
        );

    font-family:
        var(--mono);

    font-size:
        var(--type-2xs);

    font-weight: 700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.signal-detail-head span:nth-child(3),
.signal-detail-head span:nth-child(4) {
    text-align: right;
}


.signal-detail-row {
    min-height: 48px;

    border-top:
        1px solid
        rgba(
            140,
            173,
            189,
            0.05
        );
}


.signal-detail-metric {
    display: flex;

    align-items: center;

    gap: 7px;

    min-width: 0;
}


.signal-detail-metric > span {
    overflow: hidden;

    color:
        rgba(
            232,
            239,
            244,
            0.86
        );

    font-size:
        var(--type-sm);

    font-weight: 650;

    line-height: 1.35;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.signal-mini-level {
    flex:
        0 0 auto;

    padding:
        3px 5px;

    border-radius: 2px;

    font-family:
        var(--mono);

    font-size:
        var(--type-2xs);

    font-weight: 760;
}


.signal-mini-level--extreme {
    border:
        1px solid
        rgba(
            255,
            98,
            117,
            0.20
        );

    color:
        var(--coral);
}


.signal-mini-level--tail {
    border:
        1px solid
        rgba(
            223,
            177,
            84,
            0.18
        );

    color:
        var(--amber);
}


.signal-detail-position {
    overflow: hidden;

    color:
        rgba(
            198,
            213,
            222,
            0.62
        );

    font-family:
        var(--mono);

    font-size:
        var(--type-xs);

    line-height: 1.45;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.signal-detail-number {
    color:
        var(--text-soft);

    font-family:
        var(--mono);

    font-size:
        var(--type-xs);

    font-weight: 700;

    text-align: right;

    font-variant-numeric:
        tabular-nums;
}


.signal-detail-z {
    color:
        #80949e;
}


/* ---------------------------------------------------------
   Empty state
   --------------------------------------------------------- */

.signal-empty-state {
    display: grid;

    gap: 5px;

    padding: 18px;

    border:
        1px solid
        var(--line-soft);

    border-radius: 4px;

    background:
        #09131a;
}


.signal-empty-state strong {
    color:
        var(--text);

    font-size:
        var(--type-sm);
}


.signal-empty-state span {
    color:
        var(--text-muted);

    font-size:
        var(--type-xs);
}


/* ---------------------------------------------------------
   Footer / disclosure
   --------------------------------------------------------- */

.signal-terminal-footer {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 18px;

    min-height: 54px;

    padding:
        10px 2px 0;
}


.signal-terminal-footer > span {
    color:
        rgba(
            203,
            216,
            224,
            0.58
        );

    font-family:
        var(--mono);

    font-size:
        var(--type-xs);
}


.signal-show-all-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 39px;

    padding:
        0 16px;

    border:
        1px solid
        rgba(
            86,
            208,
            181,
            0.22
        );

    border-radius: 4px;

    background:
        rgba(
            86,
            208,
            181,
            0.045
        );

    color:
        var(--text-soft);

    font-family:
        var(--mono);

    font-size:
        var(--type-xs);

    font-weight: 700;

    letter-spacing:
        0.025em;

    cursor: pointer;

    transition:
        border-color 120ms ease,
        background 120ms ease,
        color 120ms ease;
}


.signal-show-all-button:hover {
    border-color:
        rgba(
            86,
            208,
            181,
            0.42
        );

    background:
        rgba(
            86,
            208,
            181,
            0.08
        );

    color:
        var(--text);
}


.signal-show-all-button span {
    color:
        var(--mint);
}


/* ---------------------------------------------------------
   Research status
   --------------------------------------------------------- */

.research-inline-status {
    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 20px;

    min-height: 38px;

    margin-top: 9px;

    padding:
        9px 12px;

    border:
        1px solid
        var(--line-soft);

    border-radius: 3px;

    background:
        rgba(
            5,
            11,
            16,
            0.10
        );
}


.research-inline-status:empty {
    display: none;
}


.research-inline-copy {
    display: flex;

    align-items: baseline;

    gap: 8px;
}


.research-inline-copy span,
.research-inline-note {
    color:
        var(--text-muted);

    font-family:
        var(--mono);

    font-size:
        var(--type-2xs);
}


.research-inline-copy span {
    font-weight: 700;

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.research-inline-copy strong {
    color:
        var(--text-soft);

    font-size:
        var(--type-xs);

    font-weight: 650;
}


/* ---------------------------------------------------------
   Standard / compact desktop
   --------------------------------------------------------- */

@media (max-width: 1399px) and (min-width: 1000px) {

    .signal-terminal-head,
    .signal-terminal-summary {
        grid-template-columns:
            88px
            92px
            minmax(250px, 1fr)
            108px
            90px
            54px
            22px;

        column-gap: 12px;
    }


    .signal-detail {
        padding-left: 204px;
    }


    .signal-detail-head,
    .signal-detail-row {
        grid-template-columns:
            minmax(170px, 1fr)
            minmax(230px, 1.25fr)
            104px
            90px;
    }

}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 999px) {

    .signal-intelligence-layout,
    .signal-intelligence-layout.research-collapsed {
        grid-template-columns:
            minmax(0, 1fr);
    }


    .signal-overview-strip {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .signal-overview-stat {
        min-width: 0;

        border-bottom:
            1px solid
            var(--line-soft);
    }


    .signal-overview-note {
        grid-column:
            1 / -1;

        justify-content:
            flex-start;

        min-height: 38px;
    }


    .signal-terminal-head {
        display: none;
    }


    .signal-terminal-summary {
        grid-template-columns:
            88px
            82px
            minmax(0, 1fr)
            26px;

        gap: 10px;

        min-height: 74px;

        padding:
            10px 12px;
    }


    .signal-terminal-number,
    .signal-terminal-count {
        display: none;
    }


    .signal-detail {
        padding:
            0 12px 11px;
    }


    .signal-detail-head {
        display: none;
    }


    .signal-detail-row {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap:
            7px 14px;

        padding:
            8px 0;
    }


    .signal-detail-position {
        grid-column: 1;
    }


    .signal-detail-number {
        grid-column: 2;

        grid-row: 1;

        text-align: right;
    }


    .signal-detail-z {
        grid-row: 2;
    }

}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 699px) {

    .signal-terminal-summary {
        grid-template-columns:
            76px
            74px
            minmax(0, 1fr)
            22px;

        min-height: 66px;

        padding:
            9px 11px;
    }


    .signal-terminal-market {
        font-size: 14px;
    }


    .signal-terminal-primary strong {
        font-size: 11px;
    }


    .signal-terminal-primary span {
        font-size: 9px;
    }


    .signal-terminal-footer {
        align-items: stretch;

        flex-direction: column;
    }


    .signal-show-all-button {
        width: 100%;
    }


    .research-inline-status,
    .research-inline-copy {
        align-items: flex-start;

        flex-direction: column;

        gap: 4px;
    }

}


/* =========================================================
   PERPMETRIC_9CD1_GLOBAL_RESPONSIVE_FOUNDATION

   Central desktop-responsive typography and density layer.
   Replaces the need for component-by-component readability
   fixes going forward.
   ========================================================= */


/* ---------------------------------------------------------
   Shell
   --------------------------------------------------------- */

.shell {
    width:
        min(
            var(--shell-max),
            calc(
                100%
                - (
                    var(--shell-gutter)
                    * 2
                )
            )
        );
}


/* ---------------------------------------------------------
   Global information hierarchy
   --------------------------------------------------------- */

.eyebrow {
    font-size:
        var(--type-xs);

    line-height:
        1.45;
}


.badge {
    font-size:
        var(--type-xs);
}


.topnav a,
.system-status {
    font-size:
        var(--type-xs);
}


.brand-sub,
.brand-badge {
    font-size:
        var(--type-2xs);
}


/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.hero-copy {
    max-width:
        960px;
}


.hero p {
    max-width:
        760px;

    margin-top:
        18px;

    font-size:
        clamp(
            15px,
            0.80vw,
            17px
        );

    line-height:
        1.62;
}


.hero-trust span {
    font-size:
        var(--type-2xs);
}


.hero-meta-label,
.hero-meta span {
    font-size:
        var(--type-xs);
}


.hero-meta strong {
    font-size:
        var(--type-sm);
}


/* ---------------------------------------------------------
   Shared panels
   --------------------------------------------------------- */

.panel {
    padding:
        var(--space-panel);
}


.panel h2 {
    font-size:
        var(--type-xl);

    line-height:
        1.25;
}


/* ---------------------------------------------------------
   Market state
   --------------------------------------------------------- */

.market-state-title {
    font-size:
        var(--type-lg);
}


.market-state-age {
    font-size:
        var(--type-2xs);
}


.state-cell span {
    font-size:
        var(--type-xs);
}


.state-cell strong {
    font-size:
        clamp(
            18px,
            0.95vw,
            21px
        );
}


.market-state-note {
    font-size:
        var(--type-xs);

    line-height:
        1.55;
}


/* ---------------------------------------------------------
   KPI strip
   --------------------------------------------------------- */

.kpi span {
    font-size:
        var(--type-xs);
}


.kpi small {
    font-size:
        var(--type-sm);
}


/* ---------------------------------------------------------
   Breadth / positioning
   --------------------------------------------------------- */

.breadth-card .horizon {
    font-size:
        var(--type-md);
}


.breadth-row {
    font-size:
        var(--type-sm);
}


.breadth-row strong {
    font-size:
        var(--type-sm);
}


.breadth-legend,
.breadth-oi span {
    font-size:
        var(--type-xs);
}


.breadth-oi strong {
    font-size:
        var(--type-sm);
}


/* ---------------------------------------------------------
   Signal Intelligence
   Preserve approved structure while standardising type sizes.
   --------------------------------------------------------- */

.signal-intelligence-subtitle {
    font-size:
        var(--type-sm);
}


.signal-overview-stat span,
.signal-overview-note,
.signal-terminal-head,
.signal-terminal-footer > span,
.signal-show-all-button {
    font-size:
        var(--type-xs);
}


.signal-terminal-primary span,
.signal-detail-position {
    font-size:
        var(--type-sm);
}


.signal-detail-head,
.signal-mini-level {
    font-size:
        var(--type-2xs);
}


.research-inline-copy span,
.research-inline-note {
    font-size:
        var(--type-2xs);
}


.research-inline-copy strong {
    font-size:
        var(--type-xs);
}


/* ---------------------------------------------------------
   Market leaders
   --------------------------------------------------------- */

.leader-card > span,
.leader-detail,
.leaders-caption {
    font-size:
        var(--type-xs);
}


/* ---------------------------------------------------------
   Market Workspace
   --------------------------------------------------------- */

.market-workspace-copy p {
    font-size:
        var(--type-sm);

    line-height:
        1.58;
}


.workspace-tab-label {
    font-size:
        var(--type-md);
}


.workspace-tab-meta,
.workspace-view-meta,
.instrument-explorer-meta.workspace-view-meta,
.market-filter,
.explorer-status {
    font-size:
        var(--type-xs);
}


/* ---------------------------------------------------------
   Tables
   Keep data readable instead of shrinking it to fit.
   Horizontal overflow remains available on narrow screens.
   --------------------------------------------------------- */

table {
    min-width:
        1040px;

    font-size:
        var(--type-sm);
}


th {
    font-size:
        var(--type-xs);

    line-height:
        1.35;
}


.sort-indicator {
    font-size:
        var(--type-xs);
}


.market-controls input {
    font-size:
        var(--type-sm);
}


/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

footer {
    font-size:
        var(--type-xs);
}


/* ---------------------------------------------------------
   Large desktop / 4K
   --------------------------------------------------------- */

@media (min-width: 2400px) {

    :root {
        --shell-max:
            1720px;

        --shell-gutter:
            34px;
    }

}


/* ---------------------------------------------------------
   Standard desktop
   Main target: 1920×1080 through 2560-class screens.
   --------------------------------------------------------- */

@media (min-width: 1400px) and (max-width: 2399px) {

    :root {
        --shell-max:
            1520px;
    }

}


/* ---------------------------------------------------------
   Compact desktop / laptop
   --------------------------------------------------------- */

@media (min-width: 1000px) and (max-width: 1399px) {

    :root {
        --shell-max:
            1320px;

        --shell-gutter:
            16px;
    }


    .hero {
        gap:
            42px;
    }


    .panel {
        padding:
            18px;
    }

}


/* ---------------------------------------------------------
   Tablet
   Existing structural collapse remains intact; this layer
   provides consistent spacing and type floors.
   --------------------------------------------------------- */

@media (min-width: 700px) and (max-width: 999px) {

    :root {
        --shell-gutter:
            14px;
    }


    .shell {
        width:
            calc(
                100%
                - 28px
            );
    }


    .panel {
        padding:
            17px;
    }

}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 699px) {

    :root {
        --shell-gutter:
            12px;

        --space-panel:
            15px;
    }


    .shell {
        width:
            calc(
                100%
                - 24px
            );
    }


    .hero p {
        font-size:
            14px;

        line-height:
            1.58;
    }

}

/* =========================================================
   PERPMETRIC_9CD11_HEADER_NAVIGATION
   Desktop navigation readability
   ========================================================= */


/* Better spacing at every desktop resolution. */

.topnav {
    gap:
        clamp(
            22px,
            1.45vw,
            34px
        );
}


.topnav a {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        38px;

    padding:
        4px 2px;

    font-size:
        clamp(
            11px,
            0.62vw,
            13px
        );

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        0.08em;
}


.system-status {
    min-height:
        38px;

    font-size:
        clamp(
            10px,
            0.58vw,
            12px
        );

    letter-spacing:
        0.07em;
}


/* Main target: Full-HD and 1440p desktop. */

@media (min-width: 1200px) and (max-width: 2399px) {

    .topnav {
        gap:
            clamp(
                25px,
                1.55vw,
                32px
            );
    }


    .topnav a {
        min-height:
            42px;

        font-size:
            12px;
    }


    .system-status {
        min-height:
            42px;

        font-size:
            11px;
    }

}


/* Preserve compact behaviour when the viewport becomes tight. */

@media (max-width: 1199px) and (min-width: 700px) {

    .topnav {
        gap:
            18px;
    }


    .topnav a {
        min-height:
            38px;

        font-size:
            11px;
    }


    .system-status {
        min-height:
            38px;

        font-size:
            10px;
    }

}

/* =========================================================
   PERPMETRIC_9CD21_HEADER_INTEGRATION
   Softer brand integration and less isolated black header block
   ========================================================= */

.topbar {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(5, 11, 16, 0.92) 0%,
            rgba(5, 11, 16, 0.74) 62%,
            rgba(5, 11, 16, 0.52) 100%
        );

    border-bottom:
        1px solid rgba(86, 208, 181, 0.10);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.14);
}

.topbar::before {
    content: "";

    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(55, 224, 177, 0.08) 0%,
            rgba(55, 224, 177, 0.045) 14%,
            rgba(55, 224, 177, 0.015) 24%,
            rgba(55, 224, 177, 0) 38%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.02) 0%,
            rgba(255, 255, 255, 0.00) 100%
        );

    opacity: 0.95;
}

.topbar > * {
    position: relative;
    z-index: 1;
}

.brand {
    position: relative;

    padding:
        8px 16px 8px 0;

    border-radius: 8px;

    background:
        linear-gradient(
            90deg,
            rgba(10, 23, 31, 0.42) 0%,
            rgba(10, 23, 31, 0.22) 62%,
            rgba(10, 23, 31, 0.00) 100%
        );
}

.brand::after {
    content: "";

    position: absolute;
    inset: -2px -8px -2px -10px;
    pointer-events: none;

    border-radius: 10px;

    background:
        radial-gradient(
            ellipse at left center,
            rgba(55, 224, 177, 0.06),
            transparent 62%
        );

    opacity: 0.85;
}

.brand-mark {
    min-width: 72px;

    padding-left: 6px;
    padding-right: 14px;

    border-right:
        1px solid rgba(86, 208, 181, 0.18);
}

.brand-mark img {
    display: block;

    filter:
        drop-shadow(0 0 10px rgba(55, 224, 177, 0.05));
}

.brand-name {
    letter-spacing: 0.15em;
}

.brand-sub {
    color:
        rgba(193, 208, 219, 0.78);
}

.brand-badge::before {
    opacity: 0.88;
}


/* Desktop refinement */
@media (min-width: 1200px) {

    .topbar {
        backdrop-filter: blur(8px);
    }

}


/* Keep it subtle on narrower layouts */
@media (max-width: 1199px) {

    .brand {
        padding-right: 10px;
    }

    .brand-mark {
        min-width: 68px;
        padding-left: 4px;
        padding-right: 12px;
    }

}

/* =========================================================
   PERPMETRIC_9CD22_STICKY_HEADER_RESTORE
   Restore sticky navigation after D2.1 integration polish
   ========================================================= */

.topbar {
    position: sticky;

    top: 0;

    z-index: 100;

    /*
     * D2.1 visual integration is preserved.
     * A slightly more opaque surface is needed while the
     * header floats over live page content.
     */
    background:
        linear-gradient(
            180deg,
            rgba(5, 11, 16, 0.97) 0%,
            rgba(5, 11, 16, 0.92) 68%,
            rgba(5, 11, 16, 0.86) 100%
        );

    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, 0.18);
}


/*
 * Preserve room for anchor navigation beneath the sticky
 * header when Overview / Signals / Markets are selected.
 */

#overview,
#signals,
#marketWorkspace,
#markets,
#instruments {
    scroll-margin-top:
        96px;
}


/*
 * Slightly smaller sticky offset for compact screens.
 */

@media (max-width: 999px) {

    #overview,
    #signals,
    #marketWorkspace,
    #markets,
    #instruments {
        scroll-margin-top:
            82px;
    }

}

/* =========================================================
   PERPMETRIC_9CE1_THEME_FOUNDATION
   Brand mark + Midnight / Light theme engine
   ========================================================= */


/* ---------------------------------------------------------
   Midnight canonical values
   --------------------------------------------------------- */

:root,
:root[data-theme="midnight"] {
    color-scheme: dark;

    --theme-page: #081016;
    --theme-page-deep: #050b10;

    --theme-panel: #0c151c;
    --theme-panel-2: #101b23;
    --theme-panel-3: #13212a;

    --theme-line: #21313a;
    --theme-line-soft:
        rgba(
            143,
            169,
            184,
            0.10
        );

    --theme-text: #eef3f5;
    --theme-text-soft: #aab8c0;
    --theme-text-muted: #7c909b;

    --theme-hover:
        rgba(
            55,
            224,
            177,
            0.026
        );

    --theme-header:
        rgba(
            5,
            11,
            16,
            0.94
        );

    --theme-grid:
        rgba(
            140,
            173,
            189,
            0.016
        );

    --theme-brand-mark:
        #eef3f5;
}


/* ---------------------------------------------------------
   Light foundation
   Full component coverage follows in 9C-E2.
   --------------------------------------------------------- */

:root[data-theme="light"] {
    color-scheme: light;

    --theme-page: #f3f6f7;
    --theme-page-deep: #e9eef0;

    --theme-panel: #ffffff;
    --theme-panel-2: #edf2f4;
    --theme-panel-3: #e6edef;

    --theme-line: #cbd6db;
    --theme-line-soft:
        rgba(
            45,
            69,
            81,
            0.12
        );

    --theme-text: #111b21;
    --theme-text-soft: #51656f;
    --theme-text-muted: #748891;

    --theme-hover:
        rgba(
            16,
            121,
            94,
            0.055
        );

    --theme-header:
        rgba(
            248,
            250,
            251,
            0.94
        );

    --theme-grid:
        rgba(
            55,
            78,
            89,
            0.035
        );

    --theme-brand-mark:
        #111b21;

    /*
     * Keep semantic meaning while increasing
     * contrast against bright surfaces.
     */

    --mint: #0c9273;
    --mint-soft:
        rgba(
            12,
            146,
            115,
            0.09
        );

    --steel: #587784;
    --steel-soft:
        rgba(
            88,
            119,
            132,
            0.09
        );

    --coral: #d84255;
    --amber: #a87315;
}


/* ---------------------------------------------------------
   Map legacy global tokens onto theme foundation
   --------------------------------------------------------- */

:root[data-theme="midnight"],
:root[data-theme="light"] {
    --bg:
        var(--theme-page);

    --bg-deep:
        var(--theme-page-deep);

    --surface-1:
        var(--theme-panel);

    --surface-2:
        var(--theme-panel-2);

    --surface-3:
        var(--theme-panel-3);

    --line:
        var(--theme-line);

    --line-soft:
        var(--theme-line-soft);

    --text:
        var(--theme-text);

    --text-soft:
        var(--theme-text-soft);

    --text-muted:
        var(--theme-text-muted);
}


/* ---------------------------------------------------------
   Brand mark
   --------------------------------------------------------- */

.brand-mark {
    color:
        var(--theme-brand-mark);
}


.brand-mark img {
    width: 48px;

    color:
        inherit;
}


/*
 * External SVG images do not inherit currentColor from
 * the parent document, therefore the source mark itself
 * is white. Light mode uses a safe monochrome filter.
 */

:root[data-theme="light"]
.brand-mark img {
    filter:
        brightness(0)
        saturate(100%)
        invert(9%)
        sepia(10%)
        saturate(1150%)
        hue-rotate(155deg)
        brightness(94%)
        contrast(94%);
}


/* ---------------------------------------------------------
   Theme control
   --------------------------------------------------------- */

.theme-control {
    position: relative;

    display: inline-grid;

    grid-template-columns:
        repeat(
            2,
            auto
        );

    align-items: center;

    gap: 2px;

    padding: 3px;

    border:
        1px solid
        var(--line-soft);

    border-radius: 5px;

    background:
        color-mix(
            in srgb,
            var(--surface-2) 74%,
            transparent
        );
}


.theme-option {
    appearance: none;

    min-height: 31px;

    padding:
        0 10px;

    border: 0;
    border-radius: 3px;

    background: transparent;

    color:
        var(--text-muted);

    font-family:
        var(--mono);

    font-size:
        var(--type-2xs);

    font-weight: 700;

    letter-spacing:
        0.055em;

    text-transform:
        uppercase;

    cursor: pointer;

    transition:
        background 130ms ease,
        color 130ms ease,
        box-shadow 130ms ease;
}


.theme-option:hover {
    color:
        var(--text);
}


.theme-option.is-active {
    background:
        var(--surface-3);

    color:
        var(--text);

    box-shadow:
        inset 0 0 0 1px
        var(--line-soft);
}


:root[data-theme="midnight"]
.theme-option.is-active {
    color:
        #eaf3f0;
}


:root[data-theme="light"]
.theme-option.is-active {
    background:
        #ffffff;

    color:
        #16242a;

    box-shadow:
        0 1px 4px
        rgba(
            22,
            36,
            42,
            0.08
        );
}


/* ---------------------------------------------------------
   Foundation page surfaces
   --------------------------------------------------------- */

html {
    background:
        var(--bg-deep);
}


body {
    color:
        var(--text);

    background:
        linear-gradient(
            var(--theme-grid) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--theme-grid) 1px,
            transparent 1px
        ),
        radial-gradient(
            ellipse at 10% -5%,
            var(--mint-soft),
            transparent 32%
        ),
        var(--bg);
}


/* ---------------------------------------------------------
   Light-mode foundation surfaces
   --------------------------------------------------------- */

:root[data-theme="light"]
.topbar {
    border-bottom-color:
        rgba(
            53,
            83,
            96,
            0.13
        );

    background:
        linear-gradient(
            180deg,
            rgba(
                248,
                250,
                251,
                0.98
            ) 0%,
            rgba(
                248,
                250,
                251,
                0.94
            ) 68%,
            rgba(
                248,
                250,
                251,
                0.90
            ) 100%
        );

    box-shadow:
        0 8px 24px
        rgba(
            24,
            45,
            55,
            0.08
        );
}


:root[data-theme="light"]
.topbar::before {
    background:
        linear-gradient(
            90deg,
            rgba(
                12,
                146,
                115,
                0.07
            ) 0%,
            rgba(
                12,
                146,
                115,
                0.025
            ) 22%,
            transparent 40%
        );
}


:root[data-theme="light"]
.brand {
    background:
        linear-gradient(
            90deg,
            rgba(
                255,
                255,
                255,
                0.52
            ) 0%,
            rgba(
                255,
                255,
                255,
                0.22
            ) 64%,
            transparent 100%
        );
}


:root[data-theme="light"]
.panel,
:root[data-theme="light"]
.market-state,
:root[data-theme="light"]
.kpi {
    background:
        linear-gradient(
            180deg,
            rgba(
                255,
                255,
                255,
                0.95
            ),
            rgba(
                255,
                255,
                255,
                0.76
            )
        ),
        var(--surface-1);
}


/* ---------------------------------------------------------
   Responsive theme control
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .theme-option {
        padding:
            0 8px;
    }

}


@media (max-width: 760px) {

    .theme-control {
        grid-template-columns:
            1fr;

        gap: 1px;
    }


    .theme-option {
        min-height: 25px;

        padding:
            0 6px;

        font-size: 8px;
    }

}

/* =========================================================
   PERPMETRIC_9CE2_FULL_LIGHT_THEME

   Complete professional light presentation.
   Design direction:
   - cool paper background
   - white information surfaces
   - subtle blue/green-gray structure
   - no large mid-gray slabs
   - semantic mint/coral/amber preserved
   ========================================================= */


/* =========================================================
   1. THEME TOKENS
   ========================================================= */

:root[data-theme="light"] {
    --theme-page:
        #f3f6f7;

    --theme-page-deep:
        #eaf0f2;

    --theme-panel:
        #ffffff;

    --theme-panel-2:
        #f7f9fa;

    --theme-panel-3:
        #eef3f5;

    --theme-line:
        #cbd6db;

    --theme-line-soft:
        rgba(
            38,
            63,
            75,
            0.105
        );

    --theme-text:
        #121d23;

    --theme-text-soft:
        #52666f;

    --theme-text-muted:
        #778a93;

    --theme-brand-mark:
        #111d23;

    --theme-paper:
        #ffffff;

    --theme-paper-soft:
        #f8fafb;

    --theme-paper-muted:
        #f1f5f6;

    --theme-row-hover:
        #edf7f4;

    --theme-shadow:
        rgba(
            38,
            62,
            73,
            0.07
        );

    --mint:
        #078b6d;

    --mint-soft:
        rgba(
            7,
            139,
            109,
            0.075
        );

    --steel:
        #5d7884;

    --steel-soft:
        rgba(
            93,
            120,
            132,
            0.08
        );

    --coral:
        #d83f54;

    --amber:
        #a56f13;
}


/* =========================================================
   2. HEADER STRUCTURE
   Fix fourth header item introduced by theme control.
   ========================================================= */

.topbar {
    grid-template-columns:
        minmax(
            250px,
            1fr
        )
        auto
        auto
        auto;
}


.theme-control {
    align-self:
        center;
}


@media (max-width: 1199px) {

    .topbar {
        grid-template-columns:
            minmax(
                210px,
                1fr
            )
            auto
            auto;
    }


    .brand {
        grid-column: 1;
    }


    .theme-control {
        grid-column: 2;
    }


    .system-status {
        grid-column: 3;
    }

}


/* =========================================================
   3. BRAND MARK
   ========================================================= */

:root[data-theme="midnight"]
.brand-mark img {
    filter:
        drop-shadow(
            0 0 10px
            rgba(
                55,
                224,
                177,
                0.05
            )
        );
}


:root[data-theme="light"]
.brand-mark img {
    filter:
        brightness(0)
        saturate(100%)
        invert(8%)
        sepia(10%)
        saturate(1100%)
        hue-rotate(155deg)
        brightness(94%)
        contrast(95%);
}


/* =========================================================
   4. PAGE / HERO
   ========================================================= */

:root[data-theme="light"]
html {
    background:
        var(--theme-page-deep);
}


:root[data-theme="light"]
body {
    color:
        var(--text);

    background:
        linear-gradient(
            rgba(
                48,
                76,
                89,
                0.024
            )
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(
                48,
                76,
                89,
                0.022
            )
            1px,
            transparent 1px
        ),
        radial-gradient(
            ellipse at 9% -6%,
            rgba(
                33,
                175,
                139,
                0.08
            ),
            transparent 31%
        ),
        #f3f6f7;
}


:root[data-theme="light"]
.hero h1 {
    color:
        #152229;
}


:root[data-theme="light"]
.hero h1 span {
    color:
        var(--mint);
}


:root[data-theme="light"]
.hero p {
    color:
        #536973;
}


:root[data-theme="light"]
.hero-trust span,
:root[data-theme="light"]
.hero-meta-label,
:root[data-theme="light"]
.hero-meta span {
    color:
        #68808b;
}


:root[data-theme="light"]
.hero-meta strong {
    color:
        #1a2a31;
}


/* =========================================================
   5. HEADER LIGHT THEME
   ========================================================= */

:root[data-theme="light"]
.topbar {
    border-bottom:
        1px solid
        rgba(
            50,
            77,
            89,
            0.11
        );

    background:
        linear-gradient(
            180deg,
            rgba(
                251,
                252,
                252,
                0.985
            ) 0%,
            rgba(
                247,
                250,
                250,
                0.97
            ) 70%,
            rgba(
                244,
                248,
                248,
                0.94
            ) 100%
        );

    box-shadow:
        0 8px 24px
        rgba(
            30,
            57,
            68,
            0.065
        );
}


:root[data-theme="light"]
.topbar::before {
    background:
        linear-gradient(
            90deg,
            rgba(
                19,
                159,
                125,
                0.07
            ) 0%,
            rgba(
                19,
                159,
                125,
                0.025
            ) 18%,
            transparent 36%
        );
}


:root[data-theme="light"]
.brand {
    background:
        transparent;
}


:root[data-theme="light"]
.brand::after {
    background:
        radial-gradient(
            ellipse at left center,
            rgba(
                16,
                147,
                115,
                0.045
            ),
            transparent 64%
        );
}


:root[data-theme="light"]
.brand-name {
    color:
        #122027;
}


:root[data-theme="light"]
.brand-sub {
    color:
        #617985;
}


:root[data-theme="light"]
.topnav a {
    color:
        #677d87;
}


:root[data-theme="light"]
.topnav a:hover {
    color:
        #14232a;
}


:root[data-theme="light"]
.system-status {
    color:
        #607680;
}


/* =========================================================
   6. COMMON PANEL LANGUAGE
   ========================================================= */

:root[data-theme="light"]
.panel,
:root[data-theme="light"]
.market-state,
:root[data-theme="light"]
.kpi {
    border-color:
        rgba(
            41,
            67,
            78,
            0.115
        );

    background:
        #ffffff;

    box-shadow:
        0 1px 2px
        rgba(
            27,
            48,
            57,
            0.025
        );
}


:root[data-theme="light"]
.panel h2 {
    color:
        #142128;
}


:root[data-theme="light"]
.eyebrow {
    color:
        #62808d;
}


/* =========================================================
   7. MARKET STATE
   Remove the current large gray strip.
   ========================================================= */

:root[data-theme="light"]
.market-state {
    background:
        #ffffff;
}


:root[data-theme="light"]
.market-state-grid,
:root[data-theme="light"]
.state-grid,
:root[data-theme="light"]
.market-state-values {
    border-color:
        var(--line-soft);

    background:
        #f8fafb;
}


:root[data-theme="light"]
.state-cell {
    background:
        transparent;

    border-color:
        rgba(
            47,
            75,
            87,
            0.10
        );
}


:root[data-theme="light"]
.state-cell span,
:root[data-theme="light"]
.market-state-note,
:root[data-theme="light"]
.market-state-age {
    color:
        #71868f;
}


:root[data-theme="light"]
.state-cell strong {
    color:
        #17252c;
}


/* Fallback for state implementations without named cell class. */

:root[data-theme="light"]
.market-state > div:not(.panel-heading) {
    border-color:
        var(--line-soft);
}


/* =========================================================
   8. KPI STRIP
   ========================================================= */

:root[data-theme="light"]
.kpis {
    border-color:
        #d2dce0;

    background:
        #d7e0e4;
}


:root[data-theme="light"]
.kpi {
    background:
        #ffffff;
}


:root[data-theme="light"]
.kpi::before {
    background:
        rgba(
            63,
            91,
            103,
            0.13
        );
}


:root[data-theme="light"]
.kpi span,
:root[data-theme="light"]
.kpi small {
    color:
        #71858e;
}


:root[data-theme="light"]
.kpi strong {
    color:
        #152229;
}


/* =========================================================
   9. MARKET BREADTH
   Remove gray breadth cells and OI blocks.
   ========================================================= */

:root[data-theme="light"]
.breadth-grid {
    border-color:
        #d2dce0;

    background:
        #ffffff;
}


:root[data-theme="light"]
.breadth-card {
    border-color:
        rgba(
            44,
            72,
            83,
            0.10
        );

    background:
        #f8fafb;
}


:root[data-theme="light"]
.breadth-card .horizon {
    color:
        #17262d;
}


:root[data-theme="light"]
.breadth-row {
    color:
        #60757f;
}


:root[data-theme="light"]
.breadth-row strong {
    color:
        #17262d;
}


:root[data-theme="light"]
.breadth-oi {
    border-color:
        rgba(
            44,
            72,
            83,
            0.09
        );

    background:
        transparent;
}


:root[data-theme="light"]
.breadth-oi > div {
    background:
        #eef3f5;

    border-color:
        rgba(
            44,
            72,
            83,
            0.08
        );
}


:root[data-theme="light"]
.breadth-oi span {
    color:
        #738791;
}


:root[data-theme="light"]
.breadth-legend {
    color:
        #71858f;
}


/* =========================================================
   10. SIGNAL INTELLIGENCE
   No dark terminal slab inside Light mode.
   ========================================================= */

:root[data-theme="light"]
.signal-overview-strip {
    border-color:
        #d3dde1;

    background:
        #f8fafb;
}


:root[data-theme="light"]
.signal-overview-stat {
    border-color:
        #d9e2e5;
}


:root[data-theme="light"]
.signal-overview-stat span,
:root[data-theme="light"]
.signal-overview-note {
    color:
        #71858e;
}


:root[data-theme="light"]
.signal-overview-stat strong {
    color:
        #16242b;
}


:root[data-theme="light"]
.signal-terminal {
    border-color:
        #d3dde1;

    background:
        #ffffff;
}


:root[data-theme="light"]
.signal-terminal-head {
    border-bottom-color:
        #d6e0e4;

    background:
        #f3f7f8;

    color:
        #71868f;
}


:root[data-theme="light"]
.signal-terminal-row {
    border-bottom-color:
        rgba(
            49,
            77,
            89,
            0.075
        );

    background:
        #ffffff;
}


:root[data-theme="light"]
.signal-terminal-summary:hover {
    background:
        #f2f8f6;
}


:root[data-theme="light"]
.signal-terminal-row[open]
.signal-terminal-summary {
    background:
        #f4f8f9;
}


:root[data-theme="light"]
.signal-terminal-market,
:root[data-theme="light"]
.signal-terminal-number,
:root[data-theme="light"]
.signal-terminal-count {
    color:
        #17252c;
}


:root[data-theme="light"]
.signal-terminal-primary strong {
    color:
        #24343c;
}


:root[data-theme="light"]
.signal-terminal-primary span,
:root[data-theme="light"]
.signal-terminal-z,
:root[data-theme="light"]
.signal-terminal-footer > span {
    color:
        #70848e;
}


:root[data-theme="light"]
.signal-detail {
    border-top-color:
        rgba(
            49,
            77,
            89,
            0.08
        );

    background:
        #f8fafb;
}


:root[data-theme="light"]
.signal-detail-row {
    border-top-color:
        rgba(
            49,
            77,
            89,
            0.07
        );
}


:root[data-theme="light"]
.signal-detail-metric > span {
    color:
        #283942;
}


:root[data-theme="light"]
.signal-detail-position,
:root[data-theme="light"]
.signal-detail-number,
:root[data-theme="light"]
.signal-detail-z {
    color:
        #6c818b;
}


:root[data-theme="light"]
.signal-empty-state,
:root[data-theme="light"]
.research-inline-status {
    border-color:
        #d5dfe3;

    background:
        #f8fafb;
}


/* =========================================================
   11. MARKET LEADERS
   ========================================================= */

:root[data-theme="light"]
.market-leaders {
    border-color:
        #d4dee2;

    background:
        #ffffff;
}


:root[data-theme="light"]
.leader-card {
    border-color:
        rgba(
            46,
            74,
            85,
            0.09
        );

    background:
        #f8fafb;
}


:root[data-theme="light"]
.leader-card strong {
    color:
        #18262d;
}


:root[data-theme="light"]
.leader-card > span,
:root[data-theme="light"]
.leader-detail,
:root[data-theme="light"]
.leaders-caption {
    color:
        #71858e;
}


/* =========================================================
   12. WORKSPACE / FILTERS / TABS
   ========================================================= */

:root[data-theme="light"]
.market-workspace-panel {
    background:
        #ffffff;
}


:root[data-theme="light"]
.workspace-tabs,
:root[data-theme="light"]
.market-controls,
:root[data-theme="light"]
.instrument-explorer-controls,
:root[data-theme="light"]
.instrument-filter-bar {
    border-color:
        #d5dfe3;

    background:
        #f6f9fa;
}


:root[data-theme="light"]
.workspace-tab {
    border-color:
        transparent;

    background:
        transparent;

    color:
        #657a84;
}


:root[data-theme="light"]
.workspace-tab.is-active {
    border-color:
        rgba(
            7,
            139,
            109,
            0.22
        );

    background:
        rgba(
            7,
            139,
            109,
            0.07
        );

    color:
        #10251f;
}


:root[data-theme="light"]
.workspace-tab-meta,
:root[data-theme="light"]
.workspace-view-meta,
:root[data-theme="light"]
.explorer-status {
    color:
        #72858e;
}


/* =========================================================
   13. INPUTS / SELECTS / BUTTONS
   ========================================================= */

:root[data-theme="light"]
input,
:root[data-theme="light"]
select,
:root[data-theme="light"]
textarea {
    border-color:
        #cad6db;

    background:
        #ffffff;

    color:
        #17252c;
}


:root[data-theme="light"]
input::placeholder,
:root[data-theme="light"]
textarea::placeholder {
    color:
        #8799a1;
}


:root[data-theme="light"]
select option {
    background:
        #ffffff;

    color:
        #17252c;
}


:root[data-theme="light"]
button {
    color:
        inherit;
}


/* =========================================================
   14. TABLE SYSTEM
   ========================================================= */

:root[data-theme="light"]
.table-wrap,
:root[data-theme="light"]
.table-shell {
    border-color:
        #d4dee2;

    background:
        #ffffff;
}


:root[data-theme="light"]
table {
    color:
        #1d2c33;

    background:
        #ffffff;
}


:root[data-theme="light"]
thead,
:root[data-theme="light"]
thead tr,
:root[data-theme="light"]
thead th {
    background:
        #f2f6f7;

    color:
        #697e88;
}


:root[data-theme="light"]
th,
:root[data-theme="light"]
td {
    border-color:
        rgba(
            48,
            76,
            88,
            0.09
        );
}


:root[data-theme="light"]
tbody tr {
    background:
        #ffffff;
}


:root[data-theme="light"]
tbody tr:hover,
:root[data-theme="light"]
.instrument-table tbody tr:hover {
    background:
        #edf7f4;
}


:root[data-theme="light"]
tbody tr:hover td {
    border-bottom-color:
        rgba(
            7,
            139,
            109,
            0.16
        );
}


:root[data-theme="light"]
tbody tr:hover td:first-child {
    background:
        #edf7f4;

    box-shadow:
        inset 2px 0 0
        rgba(
            7,
            139,
            109,
            0.50
        );
}


:root[data-theme="light"]
.sort-button {
    color:
        #607680;
}


:root[data-theme="light"]
.sort-button:hover,
:root[data-theme="light"]
.sort-button.is-active {
    color:
        #17252c;
}


/* =========================================================
   15. INSTRUMENT EXPLORER / DETAIL
   ========================================================= */

:root[data-theme="light"]
.instrument-explorer,
:root[data-theme="light"]
.instrument-detail,
:root[data-theme="light"]
.detail-panel,
:root[data-theme="light"]
.detail-card,
:root[data-theme="light"]
.instrument-chart-panel {
    border-color:
        #d4dee2;

    background:
        #ffffff;
}


:root[data-theme="light"]
.detail-grid > *,
:root[data-theme="light"]
.instrument-detail-grid > * {
    border-color:
        rgba(
            48,
            76,
            88,
            0.09
        );

    background:
        #f8fafb;
}


:root[data-theme="light"]
.chart-shell,
:root[data-theme="light"]
.chart-stage,
:root[data-theme="light"]
.price-chart-shell {
    border-color:
        #d4dee2;

    background:
        #f8fafb;
}


/* SVG-based chart surfaces */

:root[data-theme="light"]
.chart-shell svg,
:root[data-theme="light"]
.chart-stage svg,
:root[data-theme="light"]
.price-chart-shell svg {
    background:
        #f8fafb;
}


/* =========================================================
   16. BADGES / STATUS
   ========================================================= */

:root[data-theme="light"]
.badge {
    border-color:
        rgba(
            48,
            76,
            88,
            0.12
        );

    background:
        #f5f8f9;

    color:
        #627883;
}


:root[data-theme="light"]
.badge.ok {
    border-color:
        rgba(
            7,
            139,
            109,
            0.23
        );

    background:
        rgba(
            7,
            139,
            109,
            0.07
        );

    color:
        #08775f;
}


:root[data-theme="light"]
.badge.warn {
    border-color:
        rgba(
            165,
            111,
            19,
            0.22
        );

    background:
        rgba(
            165,
            111,
            19,
            0.07
        );

    color:
        #8a5c0b;
}


/* =========================================================
   17. THEME SWITCH
   ========================================================= */

:root[data-theme="light"]
.theme-control {
    border-color:
        #d4dde1;

    background:
        #eef3f5;
}


:root[data-theme="light"]
.theme-option {
    color:
        #6c818b;
}


:root[data-theme="light"]
.theme-option:hover {
    color:
        #17252c;
}


:root[data-theme="light"]
.theme-option.is-active {
    background:
        #ffffff;

    color:
        #17252c;

    box-shadow:
        0 1px 4px
        rgba(
            30,
            52,
            62,
            0.09
        );
}


/* =========================================================
   18. SCROLLBARS
   ========================================================= */

:root[data-theme="light"] {
    scrollbar-color:
        #b8c6cc
        #eef3f5;
}


:root[data-theme="light"]
*::-webkit-scrollbar-track {
    background:
        #eef3f5;
}


:root[data-theme="light"]
*::-webkit-scrollbar-thumb {
    background:
        #b8c6cc;
}


/* =========================================================
   19. GENERIC DARK-SURFACE ESCAPE HATCHES
   Known dark-mode components that must never remain
   navy/charcoal inside the light theme.
   ========================================================= */

:root[data-theme="light"]
.signal-terminal,
:root[data-theme="light"]
.signal-terminal-row,
:root[data-theme="light"]
.signal-detail,
:root[data-theme="light"]
.signal-overview-strip,
:root[data-theme="light"]
.instrument-table,
:root[data-theme="light"]
.instrument-explorer,
:root[data-theme="light"]
.market-workspace-panel {
    box-shadow:
        none;
}


/* =========================================================
   20. MOBILE HEADER
   ========================================================= */

@media (max-width: 760px) {

    .topbar {
        column-gap:
            8px;
    }


    .theme-control {
        grid-template-columns:
            1fr;
    }


    .system-status {
        padding-left:
            10px;
    }

}

/* =========================================================
   PERPMETRIC_9CE21_LIGHT_FINAL_POLISH

   Exact-selector corrections after E2 preflight:
   - signal context strip
   - market workspace controller
   - workspace typography
   - instrument controls
   - analytics controls
   - component-specific scrollbars

   Midnight remains untouched.
   ========================================================= */


/* =========================================================
   1. SIGNAL CONTEXT
   Removes final dark slab from Light mode.
   ========================================================= */

:root[data-theme="light"]
.signal-context {
    border-color:
        #d5dfe3;

    background:
        #dbe4e7;
}


:root[data-theme="light"]
.signal-context-item {
    background:
        #f8fafb;
}


:root[data-theme="light"]
.signal-context-item span {
    color:
        #71858e;
}


:root[data-theme="light"]
.signal-context-item strong {
    color:
        #203139;
}


/* =========================================================
   2. MARKET WORKSPACE CONTROLLER

   E2 used .workspace-tabs/.workspace-tab.
   Production actually uses:
   .market-workspace-tabs/.market-workspace-tab
   ========================================================= */

:root[data-theme="light"]
.market-workspace-tabs {
    border-color:
        #d3dde1;

    background:
        #f7f9fa;

    box-shadow:
        none;
}


:root[data-theme="light"]
.market-workspace-tab {
    border-color:
        transparent;

    background:
        transparent;

    color:
        #637983;

    box-shadow:
        none;
}


:root[data-theme="light"]
.market-workspace-tab:hover {
    border-color:
        rgba(
            42,
            70,
            82,
            0.10
        );

    background:
        #ffffff;

    color:
        #17262d;
}


:root[data-theme="light"]
.market-workspace-tab.active {
    border-color:
        rgba(
            7,
            139,
            109,
            0.23
        );

    background:
        #edf8f5;

    color:
        #14272a;

    box-shadow:
        inset 0 0 0 1px
        rgba(
            7,
            139,
            109,
            0.025
        );
}


:root[data-theme="light"]
.market-workspace-tab:focus-visible {
    outline:
        2px solid
        rgba(
            7,
            139,
            109,
            0.35
        );

    outline-offset:
        2px;
}


:root[data-theme="light"]
.workspace-tab-meta {
    color:
        #72858e;
}


:root[data-theme="light"]
.market-workspace-tab.active
.workspace-tab-meta {
    color:
        #4b786c;
}


/* =========================================================
   3. WORKSPACE COPY
   Fix washed-out descriptive text.
   ========================================================= */

:root[data-theme="light"]
.market-workspace-copy p,
:root[data-theme="light"]
.workspace-view-copy p,
:root[data-theme="light"]
.instrument-explorer-copy p {
    color:
        #5e737d;
}


:root[data-theme="light"]
.workspace-view-summary span,
:root[data-theme="light"]
.instrument-explorer-summary span {
    border-color:
        #d5dfe3;

    background:
        #f8fafb;

    color:
        #6d828b;
}


:root[data-theme="light"]
.workspace-view-summary strong,
:root[data-theme="light"]
.instrument-explorer-summary strong {
    color:
        #18272e;
}


:root[data-theme="light"]
.workspace-view-meta,
:root[data-theme="light"]
.instrument-explorer-meta.workspace-view-meta,
:root[data-theme="light"]
.explorer-status {
    color:
        #6d828c;
}


/* =========================================================
   4. SHARED WORKSPACE TOOLBAR
   ========================================================= */

:root[data-theme="light"]
.workspace-view-toolbar,
:root[data-theme="light"]
.instrument-toolbar.workspace-view-toolbar,
:root[data-theme="light"]
.market-controls.workspace-view-toolbar,
:root[data-theme="light"]
.analytics-toolbar {
    border-color:
        #d5dfe3;

    background:
        #f8fafb;
}


:root[data-theme="light"]
.workspace-control > span,
:root[data-theme="light"]
.workspace-view-toolbar
.instrument-control > span,
:root[data-theme="light"]
.instrument-control > span,
:root[data-theme="light"]
.instrument-toolbar.workspace-view-toolbar
.instrument-scope::before {
    color:
        #738791;
}


/* =========================================================
   5. INSTRUMENT SCOPE
   Removes the dark/gray segmented-control slab.
   ========================================================= */

:root[data-theme="light"]
.instrument-scope {
    border-color:
        #d2dde1;

    background:
        #f2f6f7;
}


:root[data-theme="light"]
.instrument-scope-button {
    background:
        transparent;

    color:
        #617781;
}


:root[data-theme="light"]
.instrument-scope-button:hover {
    background:
        #ffffff;

    color:
        #17262d;
}


:root[data-theme="light"]
.instrument-scope-button.active {
    background:
        #e5f4ef;

    color:
        #17332c;

    box-shadow:
        inset 0 0 0 1px
        rgba(
            7,
            139,
            109,
            0.22
        );
}


/* =========================================================
   6. INSTRUMENT INPUTS / SELECTS
   ========================================================= */

:root[data-theme="light"]
.instrument-control input,
:root[data-theme="light"]
.instrument-control select {
    border-color:
        #cbd7dc;

    background:
        #ffffff;

    color:
        #1b2b32;
}


:root[data-theme="light"]
.instrument-control input:hover,
:root[data-theme="light"]
.instrument-control select:hover {
    border-color:
        #b9c9cf;

    background:
        #ffffff;
}


:root[data-theme="light"]
.instrument-control input:focus,
:root[data-theme="light"]
.instrument-control select:focus {
    border-color:
        rgba(
            7,
            139,
            109,
            0.40
        );

    background:
        #ffffff;

    box-shadow:
        0 0 0 2px
        rgba(
            7,
            139,
            109,
            0.07
        );
}


:root[data-theme="light"]
.instrument-control select option {
    background:
        #ffffff;

    color:
        #1b2b32;
}


/* =========================================================
   7. CORE ANALYTICS INPUT / FILTER CONTROLS
   ========================================================= */

:root[data-theme="light"]
.market-controls input,
:root[data-theme="light"]
.analytics-toolbar input {
    border-color:
        #cbd7dc;

    background:
        #ffffff;

    color:
        #1b2b32;
}


:root[data-theme="light"]
.market-controls input::placeholder,
:root[data-theme="light"]
.analytics-toolbar input::placeholder {
    color:
        #8799a1;
}


:root[data-theme="light"]
.market-controls input:hover,
:root[data-theme="light"]
.market-controls input:focus,
:root[data-theme="light"]
.analytics-toolbar input:hover,
:root[data-theme="light"]
.analytics-toolbar input:focus {
    background:
        #ffffff;
}


:root[data-theme="light"]
.market-controls input:focus,
:root[data-theme="light"]
.analytics-toolbar input:focus {
    border-color:
        rgba(
            7,
            139,
            109,
            0.40
        );

    box-shadow:
        0 0 0 2px
        rgba(
            7,
            139,
            109,
            0.07
        );
}


:root[data-theme="light"]
.market-filters {
    border-color:
        #d2dde1;

    background:
        #f2f6f7;
}


:root[data-theme="light"]
.market-filter {
    background:
        transparent;

    color:
        #657a84;
}


:root[data-theme="light"]
.market-filter:hover {
    background:
        #ffffff;

    color:
        #17262d;
}


:root[data-theme="light"]
.market-filter.active {
    background:
        #e5f4ef;

    color:
        #17332c;
}


/* =========================================================
   8. WORKSPACE TABLE SCROLLBARS

   These selectors intentionally match/exceed the specificity
   of the old dark component scrollbar rules.
   ========================================================= */

:root[data-theme="light"]
.market-workspace-panel
.instrument-table-wrap,

:root[data-theme="light"]
.market-workspace-panel
.table-wrap,

:root[data-theme="light"]
.markets-panel
.table-wrap {
    scrollbar-color:
        #aebfc6
        #f1f5f6;
}


:root[data-theme="light"]
.market-workspace-panel
.instrument-table-wrap::-webkit-scrollbar-track,

:root[data-theme="light"]
.market-workspace-panel
.table-wrap::-webkit-scrollbar-track,

:root[data-theme="light"]
.markets-panel
.table-wrap::-webkit-scrollbar-track {
    background:
        #f1f5f6;
}


:root[data-theme="light"]
.market-workspace-panel
.instrument-table-wrap::-webkit-scrollbar-thumb,

:root[data-theme="light"]
.market-workspace-panel
.table-wrap::-webkit-scrollbar-thumb,

:root[data-theme="light"]
.markets-panel
.table-wrap::-webkit-scrollbar-thumb {
    border:
        2px solid
        #f1f5f6;

    border-radius:
        8px;

    background:
        #aebfc6;
}


:root[data-theme="light"]
.market-workspace-panel
.instrument-table-wrap::-webkit-scrollbar-thumb:hover,

:root[data-theme="light"]
.market-workspace-panel
.table-wrap::-webkit-scrollbar-thumb:hover,

:root[data-theme="light"]
.markets-panel
.table-wrap::-webkit-scrollbar-thumb:hover {
    background:
        #92a8b1;
}


/* =========================================================
   9. FINAL LIGHT SURFACE HARMONIZATION
   ========================================================= */

:root[data-theme="light"]
.instrument-toolbar,
:root[data-theme="light"]
.market-controls {
    box-shadow:
        none;
}


:root[data-theme="light"]
.instrument-table-wrap,
:root[data-theme="light"]
.market-workspace-panel
.table-wrap {
    background:
        #ffffff;
}

/* =========================================================
   PERPMETRIC_9CE22_LIGHT_DETAIL_POLISH

   Final targeted Light-mode corrections:
   - Core / HIP-3 market badges
   - instrument metadata contrast
   - price history surface
   - chart grid + axes
   - timeframe switch
   - detail metric readability

   Midnight remains untouched.
   ========================================================= */


/* =========================================================
   1. INSTRUMENT MARKET LABELS
   ========================================================= */

:root[data-theme="light"]
.instrument-venue span {
    color:
        #778b94;
}


:root[data-theme="light"]
.instrument-venue
.instrument-market-badge {
    border:
        1px solid
        #dde5e8;

    background:
        #f0f4f5;

    color:
        #607781;

    box-shadow:
        none;
}


:root[data-theme="light"]
.instrument-venue
.instrument-market-badge.hip3 {
    border-color:
        rgba(
            7,
            139,
            109,
            0.14
        );

    background:
        #e9f7f3;

    color:
        #07856a;
}


:root[data-theme="light"]
.instrument-canonical {
    color:
        #91a1a8;
}


/* =========================================================
   2. DETAIL METRIC CARDS
   ========================================================= */

:root[data-theme="light"]
.instrument-detail-cell {
    border-color:
        #d8e1e5;

    background:
        #f8fafb;
}


:root[data-theme="light"]
.instrument-detail-cell span {
    color:
        #70858f;
}


:root[data-theme="light"]
.instrument-detail-cell strong {
    color:
        #17252c;
}


/*
 * Core detail grid uses a separate renderer.
 * Keep its metric cards aligned with HIP-3 detail.
 */

:root[data-theme="light"]
.detail-panel
.detail-grid > * {
    border-color:
        #d8e1e5;

    background:
        #f8fafb;
}


:root[data-theme="light"]
.detail-panel
.detail-grid > *
span {
    color:
        #70858f;
}


:root[data-theme="light"]
.detail-panel
.detail-grid > *
strong {
    color:
        #17252c;
}


/* =========================================================
   3. PRICE HISTORY CARD
   ========================================================= */

:root[data-theme="light"]
.price-history-card {
    border-color:
        #d6e0e4;

    background:
        #ffffff;

    box-shadow:
        none;
}


:root[data-theme="light"]
.history-eyebrow {
    color:
        #6e838d;
}


:root[data-theme="light"]
.history-price-line strong {
    color:
        #16242b;
}


:root[data-theme="light"]
.history-price-change {
    color:
        #6c818b;
}


:root[data-theme="light"]
.history-chart-status {
    color:
        #718690;
}


:root[data-theme="light"]
.history-chart-status.partial {
    color:
        #986711;
}


:root[data-theme="light"]
.history-chart-footer {
    color:
        #758a94;
}


/* =========================================================
   4. HISTORY TIMEFRAME SWITCH
   ========================================================= */

:root[data-theme="light"]
.history-window-switch {
    border-color:
        #d4dee2;

    background:
        #f1f5f6;

    box-shadow:
        none;
}


:root[data-theme="light"]
.history-window-button {
    background:
        transparent;

    color:
        #607680;
}


:root[data-theme="light"]
.history-window-button:hover {
    background:
        #ffffff;

    color:
        #17262d;
}


:root[data-theme="light"]
.history-window-button.active {
    background:
        #e4f4ef;

    color:
        #08735b;

    box-shadow:
        inset 0 0 0 1px
        rgba(
            7,
            139,
            109,
            0.20
        );
}


:root[data-theme="light"]
.history-window-button:focus-visible {
    outline:
        2px solid
        rgba(
            7,
            139,
            109,
            0.32
        );

    outline-offset:
        2px;
}


/* =========================================================
   5. HISTORY CHART SURFACE

   Removes the residual gray / disabled-looking chart.
   ========================================================= */

:root[data-theme="light"]
.history-chart-viewport {
    border-top-color:
        #dce5e8;

    border-bottom-color:
        #dce5e8;

    background:
        linear-gradient(
            180deg,
            #fbfcfc 0%,
            #f7faf9 100%
        );
}


:root[data-theme="light"]
.history-chart-svg {
    background:
        transparent;
}


:root[data-theme="light"]
.history-chart-empty {
    color:
        #748993;

    background:
        #f8fafb;
}


/* =========================================================
   6. CHART GRID + AXES
   ========================================================= */

:root[data-theme="light"]
.history-grid-line {
    stroke:
        rgba(
            71,
            97,
            109,
            0.13
        );
}


:root[data-theme="light"]
.history-axis-label {
    fill:
        #718690;
}


/* =========================================================
   7. PRICE SERIES
   ========================================================= */

:root[data-theme="light"]
.history-line {
    stroke:
        #078b6d;
}


:root[data-theme="light"]
.history-last-point-halo {
    fill:
        rgba(
            7,
            139,
            109,
            0.14
        );
}


:root[data-theme="light"]
.history-last-point {
    fill:
        #078b6d;

    stroke:
        #ffffff;

    stroke-width:
        2;
}


/* =========================================================
   8. DETAIL IDENTITY / MODE COPY
   ========================================================= */

:root[data-theme="light"]
.instrument-detail-identity,
:root[data-theme="light"]
.instrument-detail-mode {
    color:
        #6f848e;
}


/* =========================================================
   9. CLOSE BUTTON
   ========================================================= */

:root[data-theme="light"]
.close-button {
    border-color:
        #d5dfe3;

    background:
        #ffffff;

    color:
        #607680;
}


:root[data-theme="light"]
.close-button:hover {
    border-color:
        #c4d1d6;

    background:
        #f6f9fa;

    color:
        #17262d;
}

/* =========================================================
   PERPMETRIC_9CF1_FUNCTIONAL_PARITY
   ========================================================= */


/* =========================================================
   ALL INSTRUMENTS SORTING
   ========================================================= */

.instrument-sort-status {
    display: flex;
    justify-content: flex-end;

    min-height: 16px;

    margin:
        0 0 7px;

    color:
        var(--text-muted);

    font-family:
        var(--mono);

    font-size:
        var(--type-2xs);

    line-height:
        1.4;
}


.instrument-sort-button {
    appearance: none;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    width: 100%;

    margin: 0;
    padding: 0;

    border: 0;

    background:
        transparent;

    color:
        inherit;

    font: inherit;

    letter-spacing:
        inherit;

    text-align:
        left;

    text-transform:
        inherit;

    cursor:
        pointer;
}


th.num
.instrument-sort-button {
    justify-content:
        flex-end;

    text-align:
        right;
}


.instrument-sort-button:hover {
    color:
        var(--text);
}


.instrument-sort-button.active {
    color:
        var(--mint);
}


.instrument-sort-button:focus-visible {
    outline:
        2px solid
        rgba(
            55,
            224,
            177,
            0.32
        );

    outline-offset:
        4px;

    border-radius:
        2px;
}


.instrument-sort-button
.sort-indicator {
    flex:
        0 0 auto;

    min-width:
        8px;

    font-weight:
        800;
}


/* =========================================================
   HISTORY LOCAL / UTC
   ========================================================= */

.history-time-control {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        3px;

    min-width:
        0;
}


.history-time-mode-button {
    appearance:
        none;

    min-height:
        24px;

    padding:
        0 7px;

    border:
        1px solid
        transparent;

    border-radius:
        4px;

    background:
        transparent;

    color:
        var(--text-muted);

    font-family:
        var(--mono);

    font-size:
        var(--type-2xs);

    font-weight:
        700;

    letter-spacing:
        0.035em;

    text-transform:
        uppercase;

    cursor:
        pointer;
}


.history-time-mode-button:hover {
    color:
        var(--text);

    background:
        var(--steel-soft);
}


.history-time-mode-button.active {
    border-color:
        rgba(
            55,
            224,
            177,
            0.20
        );

    background:
        var(--mint-soft);

    color:
        var(--mint);
}


.history-time-zone-label {
    min-width:
        0;

    margin-left:
        5px;

    overflow:
        hidden;

    color:
        var(--text-muted);

    font-family:
        var(--mono);

    font-size:
        var(--type-2xs);

    line-height:
        1.3;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =========================================================
   LIGHT THEME
   ========================================================= */

:root[data-theme="light"]
.instrument-sort-status {
    color:
        #71858e;
}


:root[data-theme="light"]
.instrument-sort-button {
    color:
        #627883;
}


:root[data-theme="light"]
.instrument-sort-button:hover {
    color:
        #17262d;
}


:root[data-theme="light"]
.instrument-sort-button.active {
    color:
        #08775f;
}


:root[data-theme="light"]
.history-time-mode-button {
    color:
        #697e88;
}


:root[data-theme="light"]
.history-time-mode-button:hover {
    background:
        #f1f5f6;

    color:
        #17262d;
}


:root[data-theme="light"]
.history-time-mode-button.active {
    border-color:
        rgba(
            7,
            139,
            109,
            0.20
        );

    background:
        #e6f5f1;

    color:
        #08775f;
}


:root[data-theme="light"]
.history-time-zone-label {
    color:
        #71858e;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .history-time-zone-label {
        max-width:
            180px;
    }

}


@media (max-width: 620px) {

    .instrument-sort-status {
        justify-content:
            flex-start;
    }


    .history-time-control {
        justify-content:
            flex-start;

        flex-wrap:
            wrap;
    }


    .history-time-zone-label {
        flex-basis:
            100%;

        margin:
            3px 0 0;
    }

}

/* =========================================================
   PERPMETRIC_9CE3_DEFINITIVE_BRAND_MARK

   Permanent PM brand treatment:
   - self-contained navy + mint + off-white mark
   - square intrinsic geometry
   - no glow
   - no theme recoloring/filtering
   ========================================================= */

.brand-mark {
    height: 42px;
}


.brand-mark img {
    width: 42px;
    height: 42px;

    object-fit: contain;

    /*
     * The definitive SVG contains its own permanent
     * PerpMetric brand colors. Do not recolor it.
     */
    filter: none;
}


:root[data-theme="midnight"]
.brand-mark img,
:root[data-theme="light"]
.brand-mark img {
    filter: none;
}


@media (max-width: 620px) {

    .brand-mark {
        height: 38px;
    }


    .brand-mark img {
        width: 38px;
        height: 38px;
    }

}

/* =========================================================
   PERPMETRIC_9CE31_WORDMARK_FIRST_IDENTITY

   FINAL APPROVED BRAND DIRECTION

   Header:
   - wordmark only
   - no app icon
   - subtitle separated by restrained vertical rule

   App / favicon:
   - PM only
   ========================================================= */


/* ---------------------------------------------------------
   Header brand structure
   --------------------------------------------------------- */

.brand {
    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    min-width:
        0;
}


.brand-wordmark {
    display:
        flex;

    align-items:
        center;

    flex:
        0 0 auto;
}


.brand-wordmark img {
    display:
        block;

    width:
        224px;

    height:
        auto;

    filter:
        none;
}


.brand-copy {
    min-width:
        0;

    padding-left:
        16px;

    border-left:
        1px solid
        rgba(
            140,
            173,
            189,
            0.22
        );

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}


.brand-sub {
    margin-top:
        0;

    white-space:
        nowrap;
}


.brand-badge {
    margin-top:
        5px;
}


/* ---------------------------------------------------------
   Wordmark theme treatment

   SVG itself is permanent off-white.
   Light mode converts only the monochrome wordmark.
   --------------------------------------------------------- */

:root[data-theme="midnight"]
.brand-wordmark img {
    filter:
        none;
}


:root[data-theme="light"]
.brand-wordmark img {
    filter:
        brightness(0)
        saturate(100%)
        invert(9%)
        sepia(10%)
        saturate(950%)
        hue-rotate(155deg)
        brightness(92%)
        contrast(96%);
}


:root[data-theme="light"]
.brand-copy {
    border-left-color:
        rgba(
            37,
            67,
            79,
            0.17
        );
}


/* ---------------------------------------------------------
   Disable legacy brand-mark rules.
   Element is removed from HTML; this protects future edits.
   --------------------------------------------------------- */

.brand-mark {
    display:
        none;
}


/* ---------------------------------------------------------
   Responsive brand sizing
   --------------------------------------------------------- */

@media (max-width: 1199px) {

    .brand {
        gap:
            12px;

        padding-right:
            8px;
    }


    .brand-wordmark img {
        width:
            190px;
    }


    .brand-copy {
        padding-left:
            12px;
    }

}


@media (max-width: 980px) {

    .brand-wordmark img {
        width:
            170px;
    }


    .brand {
        gap:
            10px;
    }


    .brand-copy {
        padding-left:
            10px;
    }

}


@media (max-width: 760px) {

    .brand-wordmark img {
        width:
            150px;
    }


    /*
     * Existing responsive system already hides
     * .brand-sub / .brand-badge at compact sizes.
     * Remove the otherwise-empty divider too.
     */
    .brand-copy {
        display:
            none;
    }

}

/* =========================================================
   PERPMETRIC_9CE32_PROFESSIONAL_WORDMARK

   Same approved identity.
   Refinement only:
   - filled wordmark geometry
   - stronger scale
   - calmer spacing
   - more deliberate secondary lockup
   ========================================================= */


/* ---------------------------------------------------------
   Desktop brand scale
   --------------------------------------------------------- */

.brand {
    gap:
        18px;
}


.brand-wordmark img {
    width:
        252px;

    height:
        auto;
}


/* ---------------------------------------------------------
   Secondary lockup

   Give the context enough visual weight to feel deliberate,
   but never let it compete with PERPMETRIC.
   --------------------------------------------------------- */

.brand-copy {
    min-height:
        36px;

    padding-left:
        18px;

    justify-content:
        center;

    border-left:
        1px solid
        rgba(
            140,
            173,
            189,
            0.24
        );
}


.brand-sub {
    margin:
        0;

    color:
        rgba(
            193,
            208,
            219,
            0.78
        );

    font-family:
        var(--mono);

    font-size:
        9px;

    font-weight:
        650;

    line-height:
        1.15;

    letter-spacing:
        0.145em;

    white-space:
        nowrap;
}


.brand-badge {
    margin-top:
        6px;

    font-size:
        8.5px;

    line-height:
        1;

    letter-spacing:
        0.14em;
}


/* Slightly more restrained separator accent. */

.brand-badge::before {
    width:
        12px;

    opacity:
        0.78;
}


/* ---------------------------------------------------------
   Light mode
   --------------------------------------------------------- */

:root[data-theme="light"]
.brand-copy {
    border-left-color:
        rgba(
            37,
            67,
            79,
            0.18
        );
}


:root[data-theme="light"]
.brand-sub {
    color:
        #607782;
}


/* ---------------------------------------------------------
   Responsive balance
   --------------------------------------------------------- */

@media (max-width: 1199px) {

    .brand {
        gap:
            14px;
    }


    .brand-wordmark img {
        width:
            220px;
    }


    .brand-copy {
        min-height:
            34px;

        padding-left:
            14px;
    }


    .brand-sub {
        font-size:
            8.5px;
    }


    .brand-badge {
        font-size:
            8px;
    }

}


@media (max-width: 980px) {

    .brand-wordmark img {
        width:
            190px;
    }


    .brand {
        gap:
            11px;
    }


    .brand-copy {
        padding-left:
            11px;
    }


    .brand-sub {
        font-size:
            8px;

        letter-spacing:
            0.12em;
    }

}


@media (max-width: 760px) {

    .brand-wordmark img {
        width:
            160px;
    }


    .brand-copy {
        display:
            none;
    }

}

/* =========================================================
   PERPMETRIC_9CE33_HEADER_HERO_ALIGNMENT

   Header / hero refinement:
   - remove redundant hero scope eyebrow in HTML
   - preserve the shared shell/grid
   - apply only a small optical correction to the signature-P
   - no wordmark geometry changes
   ========================================================= */

/*
 * The brand and hero already share the same structural left edge.
 * The custom open P creates a slightly left-heavy optical reading.
 *
 * Keep the grid untouched and compensate visually on layouts where
 * the complete desktop/tablet wordmark is shown.
 */
@media (min-width: 761px) {
    .brand-wordmark {
        margin-left:
            6px;
    }
}


/*
 * Compact layouts keep the original shell edge because horizontal
 * space is more valuable and the secondary brand copy is hidden.
 */
@media (max-width: 760px) {
    .brand-wordmark {
        margin-left:
            0;
    }
}

/* E7C-R global PerpMetric navigation / venue switcher */
.pm-global-nav {
    position: relative;
    z-index: 120;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 20px;
    border-bottom: 1px solid rgba(151,166,187,0.16);
    background: rgba(8,11,16,0.96);
}
.pm-global-nav-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.pm-global-nav a, .pm-venue-switcher summary {
    border-radius: 8px;
    color: var(--muted, #9aa7b7);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-decoration: none;
}
.pm-global-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 10px;
}
.pm-global-nav a:hover, .pm-global-nav a:focus-visible,
.pm-global-nav a[aria-current="page"],
.pm-venue-switcher summary:hover, .pm-venue-switcher summary:focus-visible {
    color: var(--text, #f2f5f8);
    background: rgba(255,255,255,0.055);
    outline: none;
}
.pm-venue-switcher { position: relative; }
.pm-venue-switcher summary {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 10px;
    cursor: pointer;
    list-style: none;
}
.pm-venue-switcher summary::-webkit-details-marker { display: none; }
.pm-venue-switcher summary span {
    color: var(--muted, #9aa7b7);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
}
.pm-venue-switcher summary strong {
    color: var(--text, #f2f5f8);
    font-size: 0.76rem;
}
.pm-venue-switcher-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    padding: 6px;
    border: 1px solid rgba(151,166,187,0.22);
    border-radius: 10px;
    background: #10151d;
    box-shadow: 0 18px 48px rgba(0,0,0,0.35);
}
.pm-venue-switcher-menu a { display: flex; width: 100%; }

:root[data-theme="light"] .pm-global-nav {
    border-bottom-color: rgba(55, 224, 177, 0.24);
    background: #10161c;
}

:root[data-theme="light"] .pm-global-nav-links > a,
:root[data-theme="light"] .pm-venue-switcher summary span {
    color: #aebdc4;
}

:root[data-theme="light"] .pm-venue-switcher summary {
    border: 1px solid rgba(55, 224, 177, 0.28);
    background: rgba(55, 224, 177, 0.07);
}

:root[data-theme="light"] .pm-venue-switcher summary strong {
    color: #37e0b1;
}

:root[data-theme="light"] .pm-global-nav-links > a:hover,
:root[data-theme="light"] .pm-global-nav-links > a:focus-visible,
:root[data-theme="light"] .pm-venue-switcher summary:hover,
:root[data-theme="light"] .pm-venue-switcher summary:focus-visible {
    color: #f2f5f7;
    background: rgba(55, 224, 177, 0.11);
}

:root[data-theme="light"] .pm-venue-switcher-menu {
    border-color: rgba(12, 146, 115, 0.28);
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(20, 31, 38, 0.16);
}

:root[data-theme="light"] .pm-venue-switcher-menu a {
    color: #526771;
}

:root[data-theme="light"] .pm-venue-switcher-menu a:hover,
:root[data-theme="light"] .pm-venue-switcher-menu a:focus-visible,
:root[data-theme="light"] .pm-venue-switcher-menu a[aria-current="page"] {
    color: var(--mint);
    background: var(--mint-soft);
}

@media (max-width: 640px) {
    .pm-global-nav {
        align-items: flex-start;
        flex-direction: column;
        padding: 8px 12px;
    }
    .pm-venue-switcher { width: 100%; }
    .pm-venue-switcher summary {
        width: 100%;
        justify-content: space-between;
    }
    .pm-venue-switcher-menu { left: 0; right: auto; }
}