/* ==========================================================
   11SECTORS — STRATEGY REAL MARKET PANEL
   ========================================================== */

.strategy-real-market {

    position:relative;

    width:100%;

    margin:
        14px 0 18px;

    border:
        1px solid
        rgba(0,229,255,.28);

    background:
        linear-gradient(
            135deg,
            #02080b 0%,
            #031217 55%,
            #05170f 100%
        );

    overflow:hidden;

    box-sizing:border-box;
}


.strategy-real-market::before {

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 83% 22%,
            rgba(153,255,0,.10),
            transparent 28%
        );
}


.strategy-market-head {

    position:relative;

    z-index:2;

    display:grid;

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

    gap:14px;

    align-items:end;

    padding:
        12px 14px;

    border-bottom:
        1px solid
        rgba(0,229,255,.20);
}


.strategy-market-kicker {

    display:block;

    margin-bottom:4px;

    color:#00e5ff;

    font-size:9px;

    font-weight:900;

    letter-spacing:.12em;

    text-transform:uppercase;
}


.strategy-market-company {

    color:#f4f7f8;

    font-size:20px;

    font-weight:900;

    line-height:1.05;
}


.strategy-market-source {

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:8px;

    color:#81949d;

    font-size:9px;

    font-weight:800;

    letter-spacing:.06em;
}


.strategy-market-live-dot {

    width:7px;
    height:7px;

    border-radius:50%;

    background:#99ff00;

    box-shadow:
        0 0 10px
        rgba(153,255,0,.8);

    animation:
        strategyPulse 1.25s
        ease-in-out infinite;
}


@keyframes strategyPulse {

    0%,
    100% {
        opacity:.35;
        transform:scale(.82);
    }

    50% {
        opacity:1;
        transform:scale(1.18);
    }
}


.strategy-market-controls {

    position:relative;

    z-index:2;

    display:grid;

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

    gap:8px;

    align-items:center;

    padding:
        9px 14px;

    border-bottom:
        1px solid
        rgba(0,229,255,.16);
}


.strategy-market-button {

    appearance:none;

    border:
        1px solid
        rgba(0,229,255,.34);

    background:#031016;

    color:#dce6e9;

    height:34px;

    padding:
        0 13px;

    font-size:9px;

    font-weight:900;

    letter-spacing:.04em;

    cursor:pointer;
}


.strategy-market-button.active {

    border-color:#00e5ff;

    color:#00e5ff;

    box-shadow:
        inset 0 -2px 0 #00e5ff;
}


.strategy-market-select {

    width:100%;
    height:34px;

    border:
        1px solid
        rgba(0,229,255,.30);

    outline:none;

    background:#02090d;

    color:#ffffff;

    padding:
        0 10px;

    font-size:10px;

    font-weight:700;
}


.strategy-market-updated {

    white-space:nowrap;

    color:#9cadb4;

    font-size:8px;

    font-weight:800;

    letter-spacing:.04em;
}


.strategy-market-stage {

    position:relative;

    z-index:1;

    width:100%;

    height:255px;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 49px,
            rgba(0,229,255,.075) 50px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 89px,
            rgba(0,229,255,.065) 90px
        ),
        #02090c;

    overflow:hidden;
}


.strategy-market-stage canvas {

    display:block;

    width:100%;
    height:100%;
}


.strategy-market-scan {

    position:absolute;

    top:0;
    bottom:0;

    width:1px;

    background:
        linear-gradient(
            transparent,
            #00e5ff,
            transparent
        );

    box-shadow:
        0 0 12px
        rgba(0,229,255,.65);

    opacity:.35;

    animation:
        marketScan 4.8s
        linear infinite;

    pointer-events:none;
}


@keyframes marketScan {

    from {
        left:0%;
    }

    to {
        left:100%;
    }
}


.strategy-market-foot {

    position:relative;

    z-index:2;

    display:grid;

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

    border-top:
        1px solid
        rgba(0,229,255,.15);
}


.strategy-market-stat {

    padding:
        8px 12px;

    border-right:
        1px solid
        rgba(0,229,255,.12);
}


.strategy-market-stat:last-child {

    border-right:none;
}


.strategy-market-stat span {

    display:block;

    color:#718891;

    font-size:7px;

    font-weight:900;

    letter-spacing:.08em;

    text-transform:uppercase;
}


.strategy-market-stat strong {

    display:block;

    margin-top:3px;

    color:#ffffff;

    font-size:12px;

    font-weight:900;

    font-variant-numeric:
        tabular-nums;
}


.strategy-market-stat strong.up {

    color:#99ff00;
}


.strategy-market-stat strong.down {

    color:#ff4057;
}


.strategy-market-error {

    position:absolute;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:
        rgba(2,9,12,.92);

    color:#ff4057;

    font-size:11px;

    font-weight:900;

    letter-spacing:.07em;

    text-align:center;
}


.strategy-market-error.show {

    display:flex;
}


/* ==========================================================
   CELLPHONE
   ========================================================== */

@media(max-width:700px) {

    .strategy-market-head {

        grid-template-columns:
            1fr;
    }


    .strategy-market-source {

        justify-content:flex-start;
    }


    .strategy-market-controls {

        grid-template-columns:
            1fr 1fr;
    }


    .strategy-market-select {

        grid-column:
            1 / -1;
    }


    .strategy-market-updated {

        grid-column:
            1 / -1;
    }


    .strategy-market-stage {

        height:205px;
    }


    .strategy-market-foot {

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


    .strategy-market-stat {

        border-bottom:
            1px solid
            rgba(0,229,255,.12);
    }
}