/* ---------------------------------------------------------------------------
   Dark surface tokens.
   Same values as build/tailwind.config.js, so panels styled here and panels
   styled with Tailwind utilities land on exactly the same colours.
   --------------------------------------------------------------------------- */
:root{
    /* Derived from the --c-* channels defined in tailwind.css, so the legacy
       stylesheet and every Tailwind utility flip together from one source. */
    --tow-surface:        rgb(var(--c-surface));
    --tow-surface-raised: rgb(var(--c-surface-raised));
    --tow-edge:           rgb(var(--c-edge));
    --tow-edge-strong:    rgb(var(--c-edge-strong));
    --tow-text:           rgb(var(--c-ink-200));
    --tow-text-dim:       rgb(var(--c-ink-400));
    --tow-bull:           rgb(var(--c-bull));
    --tow-bear:           rgb(var(--c-bear));
    --tow-warn:           rgb(var(--c-warn));
    --tow-accent:         rgb(var(--c-accent));
    --tow-bear-tint:      rgb(var(--c-bear) / .14);
    --tow-bear-ink:       rgb(var(--c-bear));
}

body{
    background: rgb(var(--c-shell));

    /* Installed as a PWA this is the whole screen, not a page in a browser
       chrome that already has its own pull-to-refresh - without this, an
       overscroll at the top reveals the OS's rubber-band bounce (or
       triggers a browser refresh) exactly where a native app would just
       stop, which is the single fastest way a screen this close to full
       height reads as "a website" instead of "an app". */
    overscroll-behavior-y: none;

    /* Belt-and-suspenders for the viewport meta's user-scalable=no: some
       WebViews still honor a double-tap or pinch gesture unless the element
       itself opts out of it. */
    touch-action: manipulation;
}

#menuBtn svg{
    fill:white !important;
}


.text-success{
    color:mediumseagreen !important;
}

.text-red{
    color:red !important;
}

.tow-lbl{
    padding: 10px 0 0 0 !important;
    font-size: 20px !important;
    color: white  !important;
}

.disabled-btn{
    pointer-events: none !important;
    opacity: 0.5 !important;
}

.hedge-btn{
    cursor:pointer;
}

#finalize-loading-icon-svg{
    width:5px;
    height:5px;
    text-align: center;
}

.buyer-premium-chart-focus-btn,.seller-premium-chart-focus-btn{
    cursor: pointer;
    width: auto;
    float: left;
    background: var(--tow-surface-raised);
    border: 1px solid var(--tow-edge);
    border-radius: 4px;
    padding: 10px 10px;
    text-align: center;
    font-weight: 600;
    color: var(--tow-text);
    box-sizing: border-box;
}


#pcr-running-val-block{    margin: 0 20px;
    font-size: 18px;
    font-weight: 900;}
#pcr-running-txt{}
#pcr-running-val{}


.pcr-strength-chunk{}
.pcr-curr-none{
    color:white;
}

.pcr-curr-Bearish{
    color:red;
}
.pcr-curr-Mild-Bearish{
    color:red;
}
.pcr-curr-Sideways{
    color:white;
}
.pcr-curr-Mild-Bullish{
    color:mediumseagreen;
}
.pcr-curr-Bullish{
    color:mediumseagreen;
}

.pcr-curr-Volatility{
    color:yellow;
}

.pcr-curr-Bearish-Breakdown{
    color:red;
}

.pcr-curr-Bullish-Breakout{
    color:mediumseagreen;
}

#pm-left-book,#pm-right-book{
    padding:0 5px !important;
}


.chest-cpr-detail-info{    height: 40px;
    background: var(--tow-surface-raised);
    border: 1px solid var(--tow-edge);
    border-radius: 4px;
    color: var(--tow-text);
    margin: 10px 0;
    padding: 5px 5px;}

.chest-buyer-heart-rate-block,.chest-seller-heart-rate-block{    text-align: left;
    box-sizing: content-box;
    padding: 5px 10px;}

.chest-buyer-heart-svg,.chest-seller-heart-svg{width:20px;height:20px;overflow:visible;transform-origin:50% 50%;
    position:relative;
    paddinh:5px 0;
}

.chest-buyer-heart-rate-block,.chest-seller-heart-rate-block{}
.chest-buyer-heart-icon,.chest-seller-heart-icon{}
.chest-buyer-heart-rate,.chest-seller-heart-rate{}

.cpr-wide-narrow-decision{
        float: left;
    width: 50%;
}
#intraday-signal-analysis-tag,#ratio-battle-dom-tag{
        text-align: right;
        float: right;
    width: 50%;
    
}

#oi-money-force-structure-chart{
    height:350px;
    width: 100%;
    padding:20px 0;

}

.oi-dynamics-structure{
    height:200px;
    padding:20px 0;
    width:100%;
}

#oi-dynamics-structure-chart{
    height:200px;
    padding:0px 0;
    width:100%;
}


#oi-intraday-server-time-sync-tick{
        text-transform: capitalize;
    float: right;
    position: relative;
    width: auto;
    color: #000000;
    padding: 5px 20px;
    font-weight: 900;
    border-left: 3px solid #000000;
}

#oi-intraday-stratgy-suggestion{
    text-transform: capitalize;
    float: left;
    position: relative;
    width: auto;
    color: #000;
    padding: 5px 20px;
    font-weight: 900;
        border-left: 3px solid #000000;


}

.signal-analysis-block{
        width: 100%;
    height: auto;
    background: var(--tow-surface-raised);
    border: 1px solid var(--tow-edge);
    border-radius: 6px;
    color: var(--tow-text);
    padding:5px 0;
    margin: 10px 0 0 0;
}

.oi-intraday-strategy-suggestion-none{color:gray !important;}
.oi-intraday-strategy-suggestion-strong_bullish{color:blue !important;}
.oi-intraday-strategy-suggestion-strong_bearish{color:red !important;}
.oi-intraday-strategy-suggestion-bullish{color:green !important;}
.oi-intraday-strategy-suggestion-bearish{color:orange !important;}
.oi-intraday-strategy-suggestion-sideways{color:black !important;}
.oi-intraday-strategy-suggestion-wait_and_watch{color:gray !important;}


#oi-dynamic-pull-status{
    font-weight: 700;
    color: var(--tow-text);
    background: var(--tow-surface-raised);
    border: 1px solid var(--tow-edge);
    border-radius: 4px;
    padding: 5px 25px;
    margin: 0px 0;
    float: left;

}

#oi-net-change-bar .ct-series-a line{stroke:red !important; }
#oi-net-change-bar .ct-series-b line{stroke:#000 !important; }
#oi-net-change-bar .ct-series-c line{stroke:mediumseagreen !important; }



.call-buy-sell-pnl-block{
        width: 100%;
    height: 20px;
    background: var(--tow-surface-raised);
}

#call-sell-pnl-block{}
#call-buy-pnl-block{}
#call-sell-pnl-txt{}
#call-sell-pnl-value{}



.put-buy-sell-pnl-block{
        width: 100%;
    height: 20px;
    background: var(--tow-surface-raised);
}

#put-sell-pnl-block{}
#put-buy-pnl-block{}

#put-sell-pnl-txt{}
#put-sell-pnl-value{}



#oi-dynamic-strength-meter{
    font-weight: 700;
    color: var(--tow-text);
    background: var(--tow-surface-raised);
    border: 1px solid var(--tow-edge);
    border-radius: 4px;
    padding: 0 10px;
}

#oi-dynamic-strength-meter-net{
    
}

#oi-net-change-bar{
    width: 100%;
    height:100px;
    background: var(--tow-surface-raised);
    border: 1px solid var(--tow-edge);
    float: left;
    position: relative;
}

/*Color change for bar call red and put in mediumseagreen*/

#oi-dynamics-structure-chart,#oi-change-bar{

        position: relative !important;
    width: 100%;
    height: 100%;
        min-height: 300px;
    background: var(--tow-surface) !important;
        margin: 10px 0 0 0;
        float:left;
}


/* FIX 3: Container par overflow visible karein */
#oi-chart {
  position: relative; /* Position relative set karna safe hai */
  overflow: visible !important; /* SVG elements ko top padding se bahar jane dega */
}

/* Chartist SVG par bhi overflow set karein */
#oi-chart svg {
  overflow: visible !important;
}

/* Vertical Line Ki Styling */
.ct-spot-line {
  stroke: #d32f2f;          /* Dark red for better contrast */
  stroke-width: 2px;
  stroke-dasharray: 6, 4;
  pointer-events: none;
}

/* Value ke peeche ka Background Box */
.ct-spot-label-bg {
  fill: #d32f2f;            /* Line se match karta color */
  pointer-events: none;
}

/* Value Text Ki Styling */
.ct-spot-text {
  fill: #ffffff !important;
  font-size: 13px;          /* Thoda bada text size */
  font-weight: bold;
  margin:10px 0 0 0;
  font-family: Arial, sans-serif;
  pointer-events: none;
}




.governing-dynamics-block{
        height: 35px;
    background: #0a0a0a;
    color: white;
    padding: 10px 10px;
    font-weight: 900;
    border: 1px solid white;

}

.gd-call-strike-block-value,.gd-put-strike-block-value{
    padding:0 5px;
}
.gd-call-strike-block-delta,.gd-put-strike-block-delta{
    padding:0 5px;
}

.distro-strategy-msg-block{
    text-align: center;
}

/*NG*/

.ng-quant-strike{
    cursor: pointer;
 background:#000;   
 color:white;
 padding:5px 10px;
 font-weight: 900;

}
.pnl-strip-block,.co-pnl-strip-block{ height: 30px; background: #636363; float: left; position: relative; text-align: center; padding: 10px 0;}
.ng-long-spread-pnl,.co-long-spread-pnl{color: white;padding: 0 10px;font-weight: 900;}
.ng-straddle-pnl,.co-straddle-pnl{color: white;padding: 0 10px;font-weight: 900;}
.ng-short-spread-pnl,.co-short-spread-pnl{color: white;padding: 0 10px;font-weight: 900;}

.ng-pnl-green,.co-pnl-green{color:mediumseagreen;}
.ng-pnl-red,.co-pnl-red{color:red;}
.ng-pnl-black,.co-pnl-black{color:#000;}


#ng-buy-seller-net-qty{
        padding: 10px;
    text-align: center;
    font-weight: 900;
    font-size:18px;
}

.buyer-holder-status{color:mediumseagreen;}
.seller-holder-status{color:red;}
.no-holder-status{color:#000;}

.ng-spread-collect,.co-spread-collect{
    position: relative;
}

#ng-spread-collect-msg,#ng-spread-collect-msg,#co-spread-collect-msg{
    text-align: center;
    width: 100%;
    float: left;
    font-size: 50px;
    text-transform: capitalize;
    color: white;
    margin: 0px auto;
    margin: 30% 0;
}

/* 2. TradingView ke table cells ke extra spaces ko kill karein */

.tv-lightweight-charts{
    /*padding:5px 0;*/
}
.tv-lightweight-charts table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.tv-lightweight-charts td {
    padding: 0px !important;
    margin: 0px !important;
    border: none !important;
}

/* 3. Empty elements agar space le rahe hain toh unhe bilkul zero karein */
.tv-lightweight-charts td:empty {
    width: 0px !important;
    min-width: 0px !important;
    display: none !important; /* Agar left/right scale use nahi kar rahe toh usey hide kar do */
}

#ng-long-spread,#chest-seller-spread,#chest-buyer-spread,#co-long-spread,#co-short-spread,#co-straddle-spread{
    width:100%;
    height:500px;
}

#ng-long-spread .tv-lightweight-charts,#chest-seller-spread .tv-lightweight-charts,#co-long-spread .tv-lightweight-charts{
    width:100%;
}

#ng-short-spread .tv-lightweight-charts,#chest-buyer-spread .tv-lightweight-charts,#co-short-spread .tv-lightweight-charts{
    width:100%;
}

#ng-short-spread,#chest-seller-spread,#co-short-spread,#co-straddle-spread{
    width:100%;
    height:500px;
}
#ng-straddle-spread,#chest-hedge-spread{
    width:100%;
    height:400px;
}


.chest-in-progress-msg{
        text-align: center;
    font-size: 19px;
    color: white;
    width: 100%;
}



/*NG*/


.gd-call-strike-block{}
.gd-put-strike-block{
    padding:0 10px;
}

.gd-net-strike-block{
    float:right;
}

#strategy-pnl-force{
    width:100%;
    height:100px;
}

#strategy-pnl-force svg{
    position: relative !important;
}


#strategy-pnl-chart{
    width:100%;
    height:500px;
}

#strategy-btn{    width: 100%;
    border: #000;
    background: #000;
    height: 50px;
    padding: 10px 0;
    margin: 0px auto;
    cursor: pointer;
    text-align: center;
    position: relative;
}

#change-atm-strike-for-realtime-track-btn{
     padding: 5px 5px;
    text-align: center;
    color: #000;
    cursor: pointer;
    width: auto;
    height: auto;
    position: relative;
    background: #e80000;
    margin: 0 10px;
    color: white;
    font-weight: 900;
}

#straddle-sell-btn{    padding: 5px 5px;
    text-align: center;
    color: #000;
    cursor: pointer;
    width: auto;
    height: auto;
    position: relative;
    background: var(--tow-surface-raised);
    color: var(--tow-text);
    border: 1px solid var(--tow-edge);
    border-radius: 4px;
    margin: 0 10px;
    float: right;
    }
#strangle-sell-btn{padding: 5px 5px;
    text-align: center;
    color: #000;
    cursor: pointer;
    width: auto;
    height: auto;
    position: relative;
    background: var(--tow-surface-raised);
    color: var(--tow-text);
    border: 1px solid var(--tow-edge);
    border-radius: 4px;
    margin: 0 10px;
    float: left;}

#strategy-pnl-chart svg{
    position: relative !important;
}

#strategy-pnl-chart  g.ct-labels {
    text-align: center;
}

.strategy-bar .ct-bar {
  stroke-width:10px !important; 
  stroke: #2196f3 !important; /* Blue color testing ke liye */
}




#heart_beat_block{    position: fixed;
    z-index: -1;
    width: 0px;
    height: 0px;
    left: -10px;
    opacity: 0;
    top: -10px;}
#heart_beat_block video{
    width:100%;
    height: 100%;
    position: relative;
}

/* ---------------------------------------------------------------------------
   The instrument-sync countdown.

   It was one of four cells in a status strip under the instrument picker.
   The picker went, then the strip went, and this is what was worth keeping:
   every symbol on the page is resolved against the instrument dump, so how
   long that dump has left is the one line that explains an empty portfolio.

   Small and bold, under the instrument names. Styled by id because it always
   was - a class in tow-polish.css cannot outrank this selector, and having
   the two argue is worse than having one place.
   --------------------------------------------------------------------------- */
#smart-api-instrument-dump-days-left{
    margin: 9px 0 0;
    text-align: right;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .01em;
    color: rgb(var(--c-ink-400));
}

/* The countdown was painted red permanently, which trains you to ignore it.
   Colour tracks the state instead, and the state is set by whichever renderer
   wrote the line - see render_instrument_sync / render_instrument_progress.

     ok    the dump is current and the next sync is more than a day off
     warn  inside the last day, or a sync is running
     due   overdue, or the sync failed */
#smart-api-instrument-dump-days-left[data-urgency='ok']{
    color: var(--tow-bull);
}
#smart-api-instrument-dump-days-left[data-urgency='warn']{
    color: var(--tow-warn);
}
#smart-api-instrument-dump-days-left[data-urgency='due']{
    color: var(--tow-bear-ink);
}

/* tug-of-war.js toggles .text-fail on a failed remote-village ping and on a
   missing TODAY object, but the class was never defined - a failure rendered
   identically to a success. */
.text-fail{
    color: var(--tow-bear-ink) !important;
}


#spread-in-progress-four-horseman-txt{
    /* Messages are written with textContent from ~15 call sites and contain
       tokens like "Candle Fail,Retry" - capitalize mangled them, and 900 weight
       on pure white bloomed badly on black. */
    color: var(--tow-text);
    text-transform:capitalize;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    word-break: break-word;
}

/* State is derived from the message text by a MutationObserver in index.html. */
.four-horseman-progress[data-state='fail'] #spread-in-progress-four-horseman-txt{
    color: var(--tow-bear-ink);
}
.four-horseman-progress[data-state='ok'] #spread-in-progress-four-horseman-txt{
    color: var(--tow-bull);
}







#spot-simulator-override{
        width: 100%;
    height: 100%;
        position: fixed;
        background: #000;

    /*position: fixed;*/
}



        
        #status { 
            padding-top: 15px;
            font-size: 12px; 
            color: #94a3b8; 
            font-weight: 600; 
            text-align: center;
            z-index: 10;
            
        }

        #canvas {
            width: 100%;
            height: 100%;
            display: block;
            position: fixed;
        }



        #controls { 
            background: rgba(15, 23, 42, 0.95); 
            padding: 15px; 
            border-top: 1px solid #1e293b; 
            display: grid; 
            grid-template-columns: repeat(2, 1fr); 
            gap: 10px; 
            z-index: 100;
            padding-bottom: env(safe-area-inset-bottom); /* iOS support */
        position: fixed;
    bottom: 0;
    width: 100%;

        
        }

        .btn-group { display: flex; flex-direction: column; gap: 4px; }

        button { 
            padding: 12px 8px; /* Bigger touch target */
            cursor: pointer; 
            border: 1px solid #38bdf8; 
            background: transparent; 
            color: #38bdf8; 
            border-radius: 8px; 
            font-weight: bold; 
            font-size: 11px; 
            text-transform: uppercase; 
            transition: 0.2s;
            -webkit-tap-highlight-color: transparent;
        }

        button:active { background: #38bdf8; color: #020617; }

        .back-btn { border-color: #64748b; color: #94a3b8; font-size: 9px; padding: 6px; }
        
        #auto-wrap { 
            grid-column: span 2; 
            display: flex; 
            gap: 10px; 
            margin-bottom: 5px;
        }

        #autoBtn.active { background: #f43f5e; border-color: #f43f5e; color: white; }

        .cluster-ring { transition: all 0.4s ease; stroke-width: 1; opacity: 0.2; }
        .prog-green { transition: all 0.4s ease; stroke-width: 1; opacity: 0.2; }
        .prog-red { transition: all 0.4s ease; stroke-width: 1; opacity: 0.2; }

        .winner-glow { stroke-width: 4; filter: drop-shadow(0 0 12px currentcolor); opacity: 1 !important; }
        .count-tag { font-size: 16px; font-weight: 900;opacity: 0; pointer-events: none; }
        .label-tag { font-size: 10px; font-weight: bold; opacity: 0.8; pointer-events: none; }

/* Glow Effect for the Connector Line */
.line-glow {
    stroke-width: 3;
    opacity: 1 !important;
    filter: drop-shadow(0 0 5px currentcolor);
    stroke-dasharray: none; /* Glow ke waqt line solid dikhegi */
    transition: all 0.4s ease;
}

.connector-line {
    stroke-width: 1;
    opacity: 0.2;
    stroke-dasharray: 4, 4;
}

.spot-price-main{
    color: white;
}

/* .pick-btn is a behaviour hook only - $(document).on("click",".pick-btn") reads
   its tag attribute. All of its appearance lives in index.html as utilities, so
   the old float/width/pill rules were removed rather than fought with. */


.chest-buyer-hedge-sell-btn,.co-buyer-hedge-sell-btn,.ng-buyer-hedge-sell-btn{
    cursor: pointer;
    width: auto;
    float: left;
    background: red;
    padding: 10px 10px;
    cursor: pointer;
    text-align: center;
    font-weight: 900;
    color: white;
    box-sizing: border-box;

}
.chest-buyer-hedge-exit-btn,.co-buyer-hedge-exit-btn,.ng-buyer-hedge-exit-btn{
    cursor: pointer;
    width: auto;
    float: left;
    background: var(--tow-bear-tint);
    padding: 10px 10px;
    text-align: center;
    font-weight: 700;
    color: var(--tow-bear-ink);
    border: 1px solid var(--tow-bear);
    border-radius: 4px;
    box-sizing: border-box;
}

.chest-seller-hedge-buy-btn,.co-seller-hedge-buy-btn,.ng-seller-hedge-buy-btn{  
    cursor: pointer;
    width: auto;
    float: left;
    background: blue;
    padding: 10px 10px;
    text-align: center;
    font-weight: 900;
    color: white;
    box-sizing: border-box;
}
.chest-seller-hedge-sell-btn,.co-seller-hedge-sell-btn,.ng-seller-hedge-sell-btn{
    cursor: pointer;
    width: auto;
    float: left;
    background: red;
    padding: 10px 10px;
    text-align: center;
    font-weight: 900;
    color: white;
    box-sizing: border-box;
}
.chest-seller-hedge-exit-btn,.co-seller-hedge-exit-btn,.ng-seller-hedge-exit-btn{
    cursor: pointer;
    width: auto;
    float: left;
    background: var(--tow-bear-tint);
    padding: 10px 10px;
    text-align: center;
    font-weight: 700;
    color: var(--tow-bear-ink);
    border: 1px solid var(--tow-bear);
    border-radius: 4px;
    box-sizing: border-box;}

.chest-buyer-hedge-buy-btn,.co-buyer-hedge-buy-btn,.ng-buyer-hedge-buy-btn{
    cursor: pointer;
        width: auto;
    float: left;
    background: blue;
    padding: 10px 10px;
    text-align: center;
    font-weight: 900;
    color: white;
    box-sizing: border-box;

}


.spot-based-atm-naked-buy-btn{cursor: pointer;
        width: auto;
    float: left;
    background: mediumseagreen;
    padding: 10px 10px;
    text-align: center;
    font-weight: 900;
    color: white;}
.spot-based-atm-naked-sell-btn{cursor: pointer;
        width: auto;
    float: left;
    background: red;
    padding: 10px 10px;
    text-align: center;
    font-weight: 900;
    color: white;}

.chest-straddle-hedge-buy-btn,.co-straddle-hedge-buy-btn,.ng-straddle-hedge-buy-btn{
    cursor: pointer;
      width: auto;
    float: left;
    background: blue;
    padding: 10px 10px;
    text-align: center;
    font-weight: 900;
    color: white;
    box-sizing: border-box;

}

.chest-straddle-hedge-sell-btn,.co-straddle-hedge-sell-btn,.ng-straddle-hedge-sell-btn{
    float: left;
    background: red;
    padding: 10px 10px;
    text-align: center;
    font-weight: 900;
    color: white;
    box-sizing: border-box;

}

.chest-straddle-hedge-exit-btn,.co-straddle-hedge-exit-btn,.ng-straddle-hedge-exit-btn{
    float: left;
    background: var(--tow-bear-tint);
    padding: 10px 10px;
    text-align: center;
    font-weight: 700;
    color: var(--tow-bear-ink);
    border: 1px solid var(--tow-bear);
    border-radius: 4px;
    box-sizing: border-box;
}


.chest-buyer-hedge-strike-selection,.ng-buyer-hedge-strike-selection,.co-buyer-hedge-strike-selection{
        background: var(--tow-surface-raised);
    height: auto;
    width: 100%;
    color: var(--tow-text);
    padding: 5px 5px;
    border: 1px solid var(--tow-edge);
    border-radius: 4px;
}


.chest-seller-hedge-strike-selection,.ng-seller-hedge-strike-selection,.co-seller-hedge-strike-selection{
    background: var(--tow-surface-raised);
    height: auto;
    width: 100%;
    color: var(--tow-text);
    padding: 5px 5px;
    border: 1px solid var(--tow-edge);
    border-radius: 4px;
}

#light-spot-p{
    color:white;
}

#light-spot-focus{

}

#tug-of-war-tag{cursor: pointer;}
#tug-of-war-tag:hover{color:blue;}

.spread-chart-four-horseman{    height: auto;}



#spread-bull-put-chart{    height: 300px;
    width: 100%;
    background:transparent;}
#spread-bull-call-chart{    height: 300px;
    width: 100%;
    background:transparent;}

#spread-bear-call-chart{    height: 300px;
    width: 100%;
    background:transparent;
}
#spread-bear-put-chart{    height: 300px;
    width: 100%;
    background:transparent;}


.spread-strike-pick-block{
    width: 100%;
    height: auto;
    background: var(--tow-surface-raised);
    border-bottom: 1px solid var(--tow-edge);
    padding: 9px 12px;
    /* Strike codes are data, not prose - the mono face keeps 24100CE / 24000PE
       aligned between the two panels instead of drifting apart. */
    font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.4;
    color: var(--tow-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Side identification. Both spreads read as "... Buy(Debit)" in the header, so
   the only fast way to tell the bullish panel from the bearish one is colour. */
#bull-call-spread-strike,
#bull-hedge-spread-strike{
    border-left: 3px solid var(--tow-bull);
}

#bear-put-spread-strike,
#bear-hedge-spread-strike{
    border-left: 3px solid var(--tow-bear);
}


.spread-chart-individual-grid{
    /* The header strip and the chart plate are one card. Border and radius live
       here so the two children can butt together without a doubled hairline. */
    padding: 0;
    margin: 0 0 10px 0;
    background: var(--tow-surface);
    border: 1px solid var(--tow-edge);
    border-radius: 8px;
    overflow: hidden;
}

.spread-chart-box{
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: transparent;
    /* Border moved to .spread-chart-individual-grid. box-sizing was content-box,
       so width:100% plus the 2px border overflowed the column by 4px. */
    border: 0;
    box-sizing: border-box;
}


#natural-gas-focus{
         background: #1cb18c !important;
    width: 100px !important;
    font-weight: 900;
}

#crude-oil-focus{
         background: #b8860b !important;
         color:#fff3d6 !important;
    width: 100px !important;
    font-weight: 900;
}

/* The seven instrument tiles used to be solid pills in unrelated colours
   (indigo / amber / black / red) stacked one per row. Each instrument keeps its
   identity colour, but now as a small dot on a uniform tile - see the --tile
   custom property on each button in index.html. */

    #chest-dynamic-focus{
        background:red;
        min-width: 80px;
        font-weight: 900;
        color: white;
    }

    #chest-quick-dynamic-focus{
        background:orange;
        min-width: 80px;
        font-weight: 900;
        color: white;
    }

    #market-dynamic-focus{
            background: red;
    font-weight: 900;
    color: white;
    }

    .card {
      background: #141417;
      border-radius: 12px;
      padding: 1rem;
      border: 1px solid #2a2a2e;
    }

    #tv-attr-logo{
      display: none !important;
    }

    .chart-box {
      
      border-radius: 8px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .tv-lightweight-charts{
      pointer-events: auto !important;
      border: 1px solid #000;
    }


  .tv-lightweight-charts canvas {
    pointer-events: auto !important;
    cursor: crosshair;
        padding-left: 5px;
  }

    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem;
      max-width: 1200px;
      margin: auto;
    }

    

    .toast-block{
            position: fixed;
    right: 0;
    bottom: 0;
    width: auto;
    z-index: 12;
    }

    .toast-chunk{}
    .toast-detail{}
    .toast-title{
        min-height:15px;
    }
    .toast-subtitle{}

    .toast-close-btn{
            font-size: 20px;
                font-weight: 100;
    position: relative;
    color: white;
    }

    .container {
      max-width: 1200px;
      margin: auto;
      /*padding: 1rem;*/
      padding: 0rem 1rem;
    }

    .grid {
      display: grid;
      gap: 1rem;
    }

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

    .charts {
      height: 60vh;
    }

    .menu {
      position: absolute;
      right: 0;
      top: 100%;
      background: #141417;
      border: 1px solid #2a2a2e;
      /*border-radius: 12px;*/
      width: 180px;
      display: none;
      z-index: 10;
    }

    .menu button {
      width: 100%;
      padding: 0.6rem 1rem;
      background: none;
      border: none;
      color: #fff;
      text-align: left;
      cursor: pointer;
    }

    .menu button:hover {
      background: #2a2a2e;
    }

    .hide{
      display:none !important;
    }




/* Document Animation */

@keyframes pulse {
  0%, 100% { transform: translateY(0); border-color: #0f62fe; }
  50% { transform: translateY(-5px); border-color: #4589ff; }
}

/* Progress Bar */

/* Log Lines (The "Code" feeling) */


.diagonal-cell {
  position: relative;
  width: 80px; height: 50px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  /* diagonal background */
  background: linear-gradient(
    135deg,
    rgba(0, 83, 156, 0.3) 50%, /* top-left = institute */
    rgba(76, 175, 80, 0.3) 50% /* bottom-right = retail */
  );
}

.diagonal-cell .institute,
.diagonal-cell .retail {
  position: absolute;
  font-weight: bold;
}

.diagonal-cell .institute {
  top: 5px;
  left: 5px;
  color: #00539c; /* blue */
}

.diagonal-cell .retail {
  bottom: 5px;
  right: 5px;
  color: #4caf50; /* green */
}


tbody td{
	max-width:50px;
}



.table-td-0{width:50% !important;position:relative;}
.table-td-1{width:50% !important;position:relative;}

.retail-pnl-block{}
.institute-pnl-block{}

.profit-pnl{}
.loss-pnl{}
.zero-pnl{
  color:'blue';
}
.none{}

.pnl-separator{
  color: #000;
}

.naked-pnl.zero-pnl{
  color:#000 !important;
}
.naked-pnl.profit-pnl{
  color:mediumseagreen; !important;
}
.naked-pnl.loss-pnl{
  color:red; !important;
}

.conjuction-pnl.zero-pnl{
  /*background:red;*/
}

.conjuction-pnl.profit-pnl{
  background:#000000  !important;
}



.conjuction-pnl.loss-pnl{
  /*background:red;*/
}


.conjuction-pnl.profit-pnl > .naked-pnl.zero-pnl{
  color:white !important;
}

.conjuction-pnl.profit-pnl > .pnl-separator{
  color: white !important;
}

/*
.conjuction-pnl.profit-pnl > .naked-pnl.profit-pnl{
  color:white !important;
}

.conjuction-pnl.profit-pnl > .naked-pnl.loss-pnl{
  color:white !important;
}
*/



.retail-ce-buy-institute-ce-buy-conjuction{}
.retail-ce-buy-pnl{}
.institute-ce-buy-pnl{}

.retail-ce-buy-institute-pe-sell-conjuction{opacity:0;}
.retail-ce-buy-pnl{}
.institute-pe-sell-pnl{}

.retail-ce-buy-institute-ce-sell-conjuction{opacity:0;}
.retail-ce-buy-pnl{}
.institute-ce-sell-pnl{}

.retail-ce-buy-institute-pe-buy-conjuction{opacity:0;}
.retail-ce-buy-pnl{}
.institute-pe-buy-pnl{}

.retail-pe-sell-institute-ce-buy-conjuction{opacity:0;}
.retail-pe-sell-pnl{}
.institute-ce-buy-pnl{}

.retail-pe-sell-institute-pe-sell-conjuction{}
.retail-pe-sell-pnl{}
.institute-pe-sell-pnl{}

.retail-pe-sell-institute-ce-sell-conjuction{opacity:0;}
.retail-pe-sell-pnl{}
.institute-ce-sell-pnl{}

.retail-pe-sell-institute-pe-buy-conjuction{opacity:0;}
.retail-pe-sell-pnl{}
.institute-pe-buy-pnl{}

.retail-ce-sell-institute-ce-buy-conjuction{opacity:0;}
.retail-ce-sell-pnl{}
.institute-ce-buy-pnl{}

.retail-ce-sell-institute-pe-sell-conjuction{opacity:0;}
.retail-ce-sell-pnl{}
.institute-pe-sell-pnl{}

.retail-ce-sell-institute-ce-sell-conjuction{}
.retail-ce-sell-pnl{}
.institute-ce-sell-pnl{}

.retail-ce-sell-institute-pe-buy-conjuction{opacity:0;}
.retail-ce-sell-pnl{}
.institute-pe-buy-pnl{}

.retail-pe-buy-institute-ce-buy-conjuction{opacity:0;}
.retail-pe-buy-pnl{}
.institute-ce-buy-pnl{}

.retail-pe-buy-institute-pe-sell-conjuction{opacity:0;}
.retail-pe-buy-pnl{}
.institute-pe-sell-pnl{}

.retail-pe-buy-institute-ce-sell-conjuction{opacity:0;}
.retail-pe-buy-pnl{}
.institute-ce-sell-pnl{}

.retail-pe-buy-institute-ce-buy-conjuction{opacity:0;}
.retail-pe-buy-pnl{}
.institute-pe-buy-pnl{}

.chest-buyer-premium-none,.chest-seller-premium-none{color:#000 !important;}
.chest-buyer-premium-positive,.chest-seller-premium-positive{color:mediumseagreen !important;}
.chest-buyer-premium-negative,.chest-seller-premium-negative{color:red !important;}

.green-execute-btn{background:mediumseagreen;}
.red-execute-btn{background:red;}
.black-execute-btn{background:#000;}

.ref-stack-long-dom,.ref-stack-short-dom{    font-weight: 900;
    border-style: groove;
    border: 2px solid #00}
.ref-stack-chunk{
        font-weight: 900;
    border: 2px solid #000;
    border-style: double;
}

.ref-stack-negative{background:red !important;color:white !important;}
.ref-stack-positive{background:mediumseagreen !important;color:white !important;}
.ref-stack-none{background:white !important;color:black !important;}

#exit-running-position-btn{    background: red;
    padding: 5px 10px;
    font-weight: 900;
    display: none;
    color: white !important;
    cursor: pointer;}



.spot-based-long-view-btn,.co-spot-based-long-view-btn,.ng-spot-based-long-view-btn{    background: mediumseagreen;
    padding: 5px 10px;
    color: white;
    cursor: pointer;
    font-weight: 900;
    height: auto;
    font-size: 16px;
    /* width: 50%; */
    /* float: left; */
    text-align: center;}
.spot-based-short-view-btn,.co-spot-based-short-view-btn,.ng-spot-based-short-view-btn{    background: red;
    padding: 5px 10px;
    cursor: pointer;
    color: white;
    font-weight: 900;
    height: auto;
    font-size: 16px;
    /* width: 50%; */
    /* float: left; */
    text-align: center;}

.chest-distance-none{
    color:#000;
}
.chest-distance-positive{
    color:mediumseagreen !important;
}
.chest-distance-negative{
    color:red !important;
}

/*strategy-suggestion*/


.strategy--{
    background:transparent;
    color:#000;
}

.strategy-Bull_Put{
    background:mediumseagreen !important;
    color:white  !important;
    font-weight: 900  !important;
}
.strategy-Bear_Call{
    background:red  !important;
    color:white  !important;
    font-weight: 900  !important;
}
.strategy-Iron_Condor{
    background:white  !important;
    color:#000  !important;
    font-weight: 900  !important;
}
.strategy-Short_Straddle{
    background:#000  !important;
    color: white  !important;
    font-weight: 900  !important;
}
.strategy-Long_Straddle{
    background:blue  !important;
    color: white  !important;
    font-weight: 900  !important;
}


/*strategy-suggestion*/



/*Spot-SImulator*/

/*Spot-SImulator*/




/*Data-accumulation-progress*/
 :root {
            --bg: #010204;
            --pipe: #0b1120;
            --cyan: #00f2ff;
            --green: #00ff88;
            --in-speed: 0.6s;
            --out-speed: 2.5s;
        }

        .pipeline {
            position: relative;
            width: 100%;
            overflow: hidden;
            height: 60px;
            background: var(--pipe);
            border: 2px solid #1e293b;
            box-shadow: inset 0 0 30px #000;
        }

        /* Filter Box with Impulse Effect */
        .filter-box {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            transform: translateX(-50%);
            width: 40px; 
            background: #000; 
            border-left: 3px solid var(--cyan);
            border-right: 3px solid var(--cyan);
            z-index: 100;
            animation: core-impulse 0.1s infinite alternate ease-in-out;
        }

        @keyframes core-impulse {
            0% { box-shadow: 0 0 10px var(--cyan); transform: translateX(-50%) scale(1); }
            100% { box-shadow: 0 0 35px var(--cyan); transform: translateX(-50%) scale(1.05); }
        }

        /* INPUT: FAST & SOLID (NO FADE) */
        .input-bit {
            position: absolute;
            font-size: 10px;
            left: -5%;
            top: 50%;
            opacity: 1;
            animation: input-flow var(--in-speed) infinite linear;
        }

        @keyframes input-flow {
            0% { left: -5%; opacity: 1; transform: translateY(var(--y)); }
            98% { opacity: 1; }
            100% { left: 50%; opacity: 0; transform: translateY(var(--y)); }
        }

        /* OUTPUT: FAST, SQUEEZED & STABLE */
        .output-bit {
            position: absolute;
            font-size: 12px;
            font-weight: bold;
            left: 50%;
            top: 50%;
            margin-top: -6px;
            color: var(--green);
            opacity: 0;
            animation: output-flow var(--out-speed) infinite linear;
        }

        @keyframes output-flow {
            0% { left: 50%; opacity: 0; }
            2% { opacity: 1; }
            100% { left: 105%; opacity: 1; }
        }

        /* Input High Freq (Flood) */
        .in1  { --y: -15px; animation-delay: 0.00s; color: #ff4d4d; }
        .in2  { --y: 12px;  animation-delay: 0.05s; color: #fbbf24; }
        .in3  { --y: -5px;  animation-delay: 0.10s; color: #a855f7; }
        .in4  { --y: 18px;  animation-delay: 0.15s; color: #ec4899; }
        .in5  { --y: -20px; animation-delay: 0.20s; color: #3b82f6; }
        .in6  { --y: 5px;   animation-delay: 0.25s; color: #f97316; }
        .in7  { --y: -12px; animation-delay: 0.30s; color: #ffffff; }
        .in8  { --y: 15px;  animation-delay: 0.35s; color: #6366f1; }
        .in9  { --y: -8px;  animation-delay: 0.40s; color: #00f2ff; }
        .in10 { --y: 10px;  animation-delay: 0.45s; color: #fbbf24; }
        .in11 { --y: -18px; animation-delay: 0.50s; color: #ff4d4d; }
        .in12 { --y: 6px;   animation-delay: 0.55s; color: #a855f7; }

        /* Output Squeezed (0.25s Spacing) */
        .out1  { animation-delay: 0.00s; }
        .out2  { animation-delay: 0.25s; }
        .out3  { animation-delay: 0.50s; }
        .out4  { animation-delay: 0.75s; }
        .out5  { animation-delay: 1.00s; }
        .out6  { animation-delay: 1.25s; }
        .out7  { animation-delay: 1.50s; }
        .out8  { animation-delay: 1.75s; }
        .out9  { animation-delay: 2.00s; }
        .out10 { animation-delay: 2.25s; }
/*Data accumulation-progress*/


/*nash-node-chunk*/

.strike-tag{
  color:white;
}

:root { 
            --green: #00c853; --red: #ff3d00; --bg: #000; //f8f9fa
            --neutral: white; --text: #1c1c1e; --border-light: #e0e0e0;
        }
      

        .main-dashboard { 
            /*background:#000;*/
                border-radius: 5px;
                background: #2a2a2a;
            display: flex; flex-direction: row; width: 100%; 
                padding: 10px;
                border-radius: 5px;
    border: 1px solid var(--tow-edge);
    border-style: solid;
            justify-content: space-around; align-items: center; ;
        }

        .module { display: flex; flex-direction: column; align-items: center; flex: 0 1 auto; transition: 0.3s; width: 50%;
    float: left;}

        @media (max-width: 600px) { .module { transform: scale(0.9); } .main-dashboard{display:flow-root;} .main-dashboard #call-mod{width:100%;margin: 0 0 10px 0; border-bottom: 1px solid white;padding: 0 0 5px 0;  margin: 0 0 10px 0;} .main-dashboard #put-mod{width:100%;}  }
        @media (max-width: 400px) { .module { transform: scale(0.8); } .main-dashboard{display:flow-root;} .main-dashboard #call-mod{width:100%;margin: 0 0 10px 0; border-bottom: 1px solid white;padding: 0 0 5px 0;  margin: 0 0 10px 0;} .main-dashboard #put-mod{width:100%;}  }

        /* CIRCLE DYNAMIC COLOR & GLOW */
        .canvas-container {
            width: 140px; height: 140px; border-radius: 50%; 
            border: 2px solid var(--border-light); background: transparent;
            position: relative; overflow: hidden; margin:5px 0;
            transition: all 0.4s ease; /* Smooth color transition */
        }
        
        /* Glow Classes */


        .border-green,.buyer-in-control{ 
            border-color: var(--green) !important; 
            box-shadow: 0 0 15px rgba(0, 200, 83, 0.2); 
        }
        .border-red,.seller-in-control{ 
            border-color: var(--red) !important; 
            box-shadow: 0 0 15px rgba(255, 61, 0, 0.2); 
        }


        .canvas-container.buyer-in-control{
            border-color: var(--green) !important; 
            box-shadow: 0 0 15px rgba(0, 200, 83, 0.2); 
        }

        .canvas-container.seller-in-control{
            border-color: var(--red) !important; 
            box-shadow: 0 0 15px rgba(255, 61, 0, 0.2); 
        }


        .canvas-container.neutral-in-control{
            border-color: var(--border-light) !important; 
        }


        .power-text.buyer-in-control,#call-strike-fair-string.buyer-in-control,#put-strike-fair-string.buyer-in-control{
            color: var(--green) !important; 
            box-shadow: none !important;
        }


        .power-text.seller-in-control,#call-strike-fair-string.seller-in-control,#put-strike-fair-string.seller-in-control{
            color: var(--red) !important; 
            box-shadow: none !important;
        }

        .power-text.neutral-in-control,#call-strike-fair-string.neutral-in-control,#put-strike-fair-string.neutral-in-control{
            color: var(--border-light) !important; 
            box-shadow: none !important;
        }


        .node-pnl-text.buyer-in-control{
            color: var(--green) !important; 
            box-shadow: none !important;
        }

        .node-pnl-text.seller-in-control{
            color: var(--red) !important; 
            box-shadow: none !important;
        }

        .node-pnl-text.neutral-in-control{
            color: var(--border-light) !important; 
            box-shadow: none !important;

        }

        .node-pnl-text{
          text-align: center;
        }



        
        .node-strength-text.buyer-in-control{
            color: var(--green) !important; 
            box-shadow: none !important;
        }

        .node-strength-text.seller-in-control{
            color: var(--red) !important; 
            box-shadow: none !important;
        }

        .node-strength-text.neutral-in-control{
            color: var(--border-light) !important; 
            box-shadow: none !important;

        }

        .node-strength-text{
          text-align: center;
        }




        canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
        svg { position: absolute; width: 100%; height: 100%; pointer-events: none; z-index: 10; top:0; left:0; }
        .tension-path { fill: none; stroke-width: 2.2; stroke-linecap: round; transition: stroke 0.4s; }

        .power-text { 
            font-size: 12px; font-weight: 900; letter-spacing: 1.5px; 
            color: var(--neutral); min-height: 18px; transition: color 0.4s ease;
            text-align: center;
        }
        .stats-row { margin-top: 5px; text-align: center; display: none;}

        .controls {display: inline-block;  gap: 10px; margin-top: 15px; padding: 10px 0;}

        button { 
            padding: 8px; border-radius: 8px; font-size: 11px; font-weight: 700; 
            min-width: 60px; cursor: pointer; border: 1px solid #ddd; 
            background: #fff; transition: 0.1s; box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        button:active { transform: scale(0.92); }
        .btn-green { color: var(--green) !important; border-color: var(--green) !important; }
        .btn-red { color: var(--red) !important; border-color: var(--red) !important; }
        
        @keyframes pulse { 0% { r: 1.8; opacity: 0.8; } 50% { r: 2.2; opacity: 1; } 100% { r: 1.8; opacity: 0.8; } }
        .pulse-node { animation: pulse 2.5s infinite ease-in-out; }


.buyer-in-control{}
.seller-in-control{}
.neutral-power{}


/*
.call-grid-block{    border: 1px solid #cbcbcb;
    box-sizing: border-box;}


.call-option-strength{
    
}
.call-option-strength .grid{
      gap: 0rem !important;
}

.call-option-strength .first-chunk {
            margin: 0px auto;
    text-align: left;
    float: left;
    width: auto;
}

.call-option-strength .second-chunk {
        margin: 0px auto;
    text-align: right;
    margin: 0px auto;
    text-align: right;
    height: auto;
    width: auto;
    float: right;
    margin-top: 25px;
}



.call-equilibrium-node-block{       float: left;
      background: var(--bg);
    width: 100%;
    padding: 0 25px;
    }
.call-equilibrium-pnl-block{      float: left;
    width: 100%;
    height: 30px;
    background: #efefef;
    font-size: 15px;
    }

.call-pnl-list{    line-height: 25px;
    padding: 0px 5px;}    

.call-pnl-strike{
      float: left;
}

.call-equilibrium-node-pnl{  float: right;
    font-weight: 900;}






.put-grid-block{    border: 1px solid #cbcbcb;
    box-sizing: border-box;}


.put-option-strength{
    
}
.put-option-strength .grid{
      gap: 0rem !important;
}

.put-option-strength .first-chunk {
            margin: 0px auto;
    text-align: left;
    float: left;
    width: auto;
}

.put-option-strength .second-chunk {
        margin: 0px auto;
    text-align: right;
    margin: 0px auto;
    text-align: right;
    height: auto;
    width: auto;
    float: right;
    margin-top: 25px;
}



.put-equilibrium-node-block{       float: left;
  background: var(--bg);
    width: 100%;
    padding: 0 25px;
    }
.put-equilibrium-pnl-block{      float: left;
    width: 100%;
    height: 30px;
    background: #efefef;
    font-size: 15px;
    }

.put-pnl-list{    line-height: 25px;
    padding: 0px 5px;}    

.put-pnl-strike{
      float: left;
}

.put-equilibrium-node-pnl{  float: right;
    font-weight: 900;}

#call-tussle-market-status-box{
            margin-top: 25px; padding: 15px; border-radius: 12px; 
            min-width: 300px; background: rgba(255,255,255,0.03); border: 1px solid #222;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .bg-green { border-color: var(--green) !important; background: rgba(0, 255, 136, 0.05) !important; }
        .bg-red { border-color: var(--red) !important; background: rgba(255, 65, 65, 0.05) !important; }

        #call-power-text { font-size: 14px; font-weight: 900; text-align: center; margin-bottom: 12px; font-variant-numeric: tabular-nums; }

        .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
        .value { font-size: 16px; font-family: 'Courier New', monospace; font-weight: bold; }

        .controls-group { display: flex; flex-direction: column; gap: 10px; margin-top: 25px; }
        .row { display: flex; gap: 12px; justify-content: center; }
        button { 
            padding: 12px 20px; border-radius: 8px; font-size: 12px; font-weight: 900; 
            min-width: 100px; touch-action: none; cursor: pointer; transition: all 0.1s;
            border: 1px solid #333; background: #1a1a1a; color: #fff;
        }
        button:active { transform: scale(0.9); filter: brightness(1.5); }
        .btn-green { background: var(--green); color: #000; border: none; box-shadow: 0 4px 0 #009955; }
        .btn-red { background: var(--red); color: #fff; border: none; box-shadow: 0 4px 0 #aa2222; }
*/

.node-spot-time-block{    text-align: center;padding:0 0 10px 0;}
.node-spot-time-dot{}
#node-spot-spot-price{ text-align: center;font-weight: 900;}

.node-spot-time-dot{padding:0 5px;}
/*nash-node-chunk*/

/*Eqilibirum Table*/
#eqilibrium-spot-trend-status{
  text-align: center;font-weight: 900;}
/*Eqilibirum Table*/




#nash-equilibrium-history-strip-container{  
    height: 50px;
    margin: 0px auto;
    width: 100%;
    text-align: center;
    display: inline-flex;}

.nash-equilibrium-history-strip{    margin: 0px auto;
    padding: 10px 0;}

.equilibrum-stip-pnl{
        width: 15px;
    height: 10px;
    display: inline-block;
    border-radius: 45px;
    margin:5px 0 0 5px;
    float: left;
    /*border: 1px solid #000000;*/
  }

.bullish-pnl{background: mediumseagreen;}
.bullish-mild-pnl{
  background: linear-gradient(to right, #30363d 50%, #30363d 50%);
}

.bearish-mild-pnl{
  background: linear-gradient(to right, #30363d 50%, #7a3b39 50%);
}
.bearish-pnl{background: red;}

.chop-pnl{
  background:#30363d;
}


/*
.bullish-strong-pnl{background: mediumseagreen;}
.bullish-mild-pnl{
  background:#098e45;
}
.bearish-strong-pnl{background: red;}
.bearish-mild-pnl{
}*/

/*Technical Pause*/


/*strength-signal*/
.signal-green{background:mediumseagreen  !important;}
.signal-red{background:red  !important;}
.signal-blue{background:blue !important;}
.signal-none{background:#3f3a3a  !important;}

.strength-signal{background:#898383;
    width: 5px;
    height: 5px;
    margin: 0px auto;
    border-radius: 45px;
    float: left;
    margin: 5px 5px;}

.call-strength-signal-block{  
    height: 15px;
    margin: 0px auto;
    text-align: center;
    margin: 5px 0 0 0;}

.call-strength-debit-spread-avg{}
.call-strength-spot-fair{}
.call-strength-itm-probability{}



.put-strength-signal-block{height: 15px;
    margin: 0px auto;
    text-align: center;
    margin: 5px 0 0 0;}
.put-strength-debit-spread-avg{}
.put-strength-spot-fair{}
.put-strength-itm-probability{}

/*strength-signal*/


#distribution-force-fut-chart,#process-chart{

        border: 1px solid white;
    border-radius: 0px;

        width: 100%;
    min-width: 500px;
    max-height: 100%;
    min-height: 500px;
}

.distro-strategy-sepration{
        padding: 0 10px;
    color: white;
    font-weight: 900;
}

#exit-open-position-btn{
            background: red;
    color: white;
    font-weight: 900;
    padding: 8px 23px;
    font-size: 16px;
    float: right;
    margin: 1px 0px;
}

.chart-switcher-block{     width: 100%;
    background: #000;
    height:35px;
    border:1px solid white;
    padding:8px 0;
    text-align: center;}

.chart-switcher-tag{
       text-align: center;
    color: white;
    padding: 5px 10px;
    margin: 0 10px;
    background: #0a0a0a;
    color: white;
    cursor: pointer;
}

.distro-delta-neutral-strategy{}
.call-side-neutral-strike{}
.put-side-neutral-strike{}

.algo-msg-log{}
.algo-msg-stamp{}


.bias-view-strangle-block{    width: 100%; height: auto; padding: 5px; margin: 10px 0px;}
.bias-view-strangle{        padding: 5px;
    cursor: pointer;
    background: #000;
    color: white;
    margin: 0 5px;}

.bias-view-strangle:first-child{
    margin:0px;
}    

.bias-view-strangle[tag='system']{
    background: blue !important;
}

.bias-view-strangle[tag='upside-bias']{
    background: mediumseagreen !important;
}
.bias-view-strangle[tag='downside-bias']{
    background: red !important;
}
.bias-view-strangle[tag='sideways-bias']{
    background: #000 !important;
}


.distro-strategy-button-block{
    height:35px;
    background: #000;
        border: 1px solid white;
    background: #0a0a0a;
}

.distro-strategy-btn{
    background: #000 !important;
    color: white;
    font-weight: 900;}

.distro-strategy-btn,.distro-strategy-exit-position-btn{
    background: var(--tow-surface-raised);
    color: var(--tow-text);
    border: 1px solid var(--tow-edge);
    border-radius: 4px;
    padding: 0px 5px;
    margin: 0px 0px;
    display: inline-block;
    cursor: pointer;
}

.distro-strategy-curve-block{
    width:100%;
    height:230px;
}
.distro-strategy-algo-block{
    width:100%;
    height:230px;
}

.price-distribution-box-container{
    width:100%; 
}

.price-in-distribution-block{    height: auto;
    background:#000;
    float: left;
    width: 100%;}

.price-distribution-box-status-bar{    display: flex;
    justify-content: space-between;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    margin-bottom: 15px;
    color: #888;
    padding: 0 5px;
    background: #000;
    padding: 10px 10px;
    height: auto;
            }
#price-distribution-box-spot{}
#price-distribution-box-valSig{}

.price-distribution-box-canvas-wrapper{    position: relative;
    height:50px;
    /* margin-bottom: 40px; */
    margin: 0px;
    float: left;
    width: 100%;}

.price-distribution-box-canvas-wrapper canvas { 
                background: #000;
    border: 1px solid #333;
    display: block;
    border-radius: 4px;
        }


#price-distribution-box-painter{}
.price-distribution-box-sigma-labels{    position: absolute;
    width: 100%;
    top: 78px;
    display: flex;
    pointer-events: none;
    height: 50px;
    background: #000;}
.price-distribution-box-sigma-tag{font-weight: 900; 
            font-size: 15px; 
            color: #ffffff; 
            width: 40px; 
            text-align: center; 
            position: absolute; }

.price-distribution-box-highlight{
    color: #ffeb3b; font-weight: bold; 
}            

.strategy-box{}
.strangle-chunk{}
.strategy-bull-put-block{}
.strategy-bull-put-txt{}
                            
.strategy-strangle-block{}
.strategy-strangle-txt{}

.strategy-straddle-block{}
.strategy-straddle-txt{}



/*Delta Bar*/

/* log panel */
.log-wrap{margin-top:12px;background:#0a0e16;border:1px solid #1a2030;border-radius:9px;padding:10px 14px;max-height:130px;overflow-y:auto}
.log-wrap::-webkit-scrollbar{width:4px}
.log-wrap::-webkit-scrollbar-thumb{background:#1e2a38;border-radius:2px}
.log-title{font-size:9px;color:#3a4455;letter-spacing:.07em;margin-bottom:6px}
.log-line .ts{color:#21262d;margin-right:6px}
.log-line .ev-hedge{color:#f85149}
.log-line .ev-book{color:#58a6ff}
.log-line .ev-hold{color:#3fb950}
.log-line .ev-warn{color:#d29922}
.log-line .ev-call{color:#a371f7}

/* legend */
.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;padding:8px 12px;background:#0a0e16;border-radius:7px;border:1px solid #1a2030}
.leg{display:flex;align-items:center;gap:5px;font-size:15px;color:white;}
.leg-sq{width:7px;height:7px;border-radius:1px}


.governing-dynamics-pair{
    cursor: pointer;
}

.governing-dynamic-delta-flow{
    width: 100%;
    float:left;
}

.panel {
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;
  }

  /* Top readout */
  .readout {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom:15px;
    gap: 0px;

  }

  .zone-label {
    font-family: 'Orbitron', monospace;
    font-size: 10px;
    letter-spacing: 4px;
    color: var(--clr, #00e676);
    text-transform: uppercase;
    opacity: 0.8;
    transition: color 0.3s;
  }

  #pointer-label {
    font-family: 'Orbitron', monospace;
    font-size:19px;
    font-weight: 700;
    color: var(--clr, #00e676);
    letter-spacing: 3px;
    text-shadow: 0 0 20px var(--clr-glow, #00e67688), 0 0 40px var(--clr-glow2, #00e67633);
    transition: color 0.3s, text-shadow 0.3s;
    line-height: 1;
  }

  /* Arrow */
  #pointer-arrow {
    width: 0; height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 14px solid var(--clr, #00e676);
    filter: drop-shadow(0 0 6px var(--clr, #00e676));
    transition: border-top-color 0.3s, filter 0.3s;
    margin-top:-18px;
    z-index: 10;
    position: relative;
  }

  /* Meter shell */
  #meter-box {
    pointer-events: none;
    position: relative;
    width: 100%;
    height: 46px;
    background: #0a0a0c;
    border: 1px solid var(--clr-border, #00e67633);
    border-radius: 4px;
    cursor: ew-resize;
    overflow: visible;
    transition: border-color 0.4s, box-shadow 0.4s;
    box-shadow: 0 0 30px var(--clr-shadow, #00e67622), inset 0 0 20px #00000066;
  }

  /* Corner accents */
  #meter-box::before, #meter-box::after {
    content: '';
    position: absolute;
    width: 10px; height: 10px;
    border-color: var(--clr, #00e676);
    border-style: solid;
    opacity: 0.6;
    transition: border-color 0.3s;
  }
  #meter-box::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
  #meter-box::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

  /* Fill */
  #track-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    border-radius: 4px 0 0 4px;
    pointer-events: none;
    transition: background 0.4s;
    opacity: 0.35;
  }

  /* Scanline overlay */
  #meter-box .scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 3px, #00000022 3px, #00000022 4px);
    pointer-events: none;
    border-radius: 4px;
    z-index: 2;
  }

  /* Ticks */
  #ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
  }

  .tick {
    position: absolute;
    top: 5px;
    width: 1px;
    height: 40%;
    background: #2a2a2a;
    transform: translateX(-50%);
    transition: background 0.3s, box-shadow 0.3s;
  }
  .tick.hl07 {
    background: #ffd600;
    height: 65%;
    width: 2px;
    box-shadow: 0 0 8px #ffd600bb, 0 0 16px #ffd60044;
    top: 3px;
  }
  .tick-label {
    position: absolute;
    top: 55%;
    transform: translateX(-50%);
    font-size: 9px;
    color: #333;
    white-space: nowrap;
    transition: color 0.3s;
    letter-spacing: 0.5px;
  }
  .tick-label.hl07 { color: #ffd600; font-weight: bold; text-shadow: 0 0 6px #ffd60077; }

  /* Pointer line */
  #ptr-line {
    position: absolute;
    top: 0; bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 6;
    transition: background 0.3s, box-shadow 0.3s;
  }
  #ptr-line::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    filter: blur(4px);
    opacity: 0.6;
  }

  /* Bottom bar with zone markers */
  .zone-bar {
    /*width: 520px;*/
    width: 100%;
    height: 4px;
    margin-top: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg,
      #2979ff 0%,
      #2979ff 26%,
      #00e676 26%,
      #00e676 62%,
      #ffd600 62%,
      #ffd600 66%,
      #ff1744 66%,
      #ff1744 100%
    );
    opacity: 0.4;
    position: relative;
  }

  /* Active zone indicator dot */
  #zone-dot {
    position: absolute;
    top: -3px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--clr, #00e676);
    box-shadow: 0 0 8px var(--clr, #00e676);
    transform: translateX(-50%);
    transition: left 0.15s, background 0.3s, box-shadow 0.3s;
  }

  /* Side labels */
  .side-info {
    display: flex;
    justify-content: space-between;
    /*width: 520px;*/
    width: 100%;
    margin-top: 6px;
    font-size: 9px;
    color: #333;
    letter-spacing: 1px;
    padding: 0 2px;
  }
  .side-info span { color: #444; }

/*Delta Bar*/

.tbl-wrap{overflow-x:auto;border-radius:9px;border:1px solid #1a2030;background:#0a0e16}
table{width:100%;border-collapse:collapse;table-layout:fixed;min-width:900px}
thead tr{background:#0d1117}
thead th{font-size:9px;font-weight:500;letter-spacing:.07em;color:#3a4455;padding:8px 8px;text-align:center;border-bottom:1px solid #1a2030;white-space:nowrap}
tbody tr{border-bottom:1px solid #141c28;transition:background .1s}
tbody tr:hover{background:#0f1520}
tbody td{font-size:11px;padding:8px 8px;text-align:center;transition:color .3s}

.highlight-blink{
        background-color: #f0f0f0 !important;
    color: #FF5722;
    transition: background-color 0.1s ease;
}

.highlight-box.flash {
  background-color: #ffeb3b; /* Your highlight color (e.g., yellow) */
}

.put-iv{color:#f85149;font-weight:600}
.call-iv{color:#3fb950;font-weight:600}
.strike-c{color:#484f58;font-size:10px}
.atm-pill{font-size:9px;font-weight:700;color:#d29922;background:#1c1600;padding:2px 7px;border-radius:4px;border:1px solid #3d2f0a}
.sk-pos{color:#58a6ff;font-weight:600}
.sk-neg{color:#a371f7;font-weight:600}
.sk-zero{color:#484f58}
.prob-hi{color:#3fb950;font-weight:600}
.prob-md{color:#d29922;font-weight:600}
.prob-lo{color:#f85149;font-weight:600}

.badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.05em;padding:3px 9px;border-radius:4px;border:1px solid;white-space:nowrap;transition:all .3s}
.b-hold   {background:#0d2a14 !important;color:#3fb950 !important;border-color:#1d5c2a !important}
.b-book   {background:#0c1f3d !important;color:#58a6ff !important;border-color:#1a4a8a !important}
.b-caution{background:#000 !important;color:white !important;border-color:#5a3e0f !important}
.b-hedge  {background:mediumseagreen !important;color:white !important;border-color:#5a1d1d !important}
.b-callhdg{background:red !important;color:white !important;border-color:#3d2270 !important}
.b-none{background:#000 !important;color:white !important;border-color:#5a3e0f !important}

.governing-dynamics-decision{
    font-weight: 900;
}

/* delta cells flash */
.flash-up{color:#3fb950!important;transition:color 0s}
.flash-dn{color:#f85149!important;transition:color 0s}

/* iv sparkline mini chart per row */
.spark{display:inline-block;vertical-align:middle}

/* probability change arrow */
.arr-up{color:#3fb950;font-size:10px}
.arr-dn{color:#f85149;font-size:10px}



#current-ms-num{
        background: var(--tow-surface-raised);
    color: var(--tow-text);
    border: 1px solid var(--tow-edge);
    border-radius: 4px;
    padding: 5px;
}

.potential-highlight-status{

        
    /* border-radius: 8px; */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;

  border: 2px dashed #000000;
  border-bottom: 5px solid #ffffff;
  /*border-radius: 8px;*/
  animation: pulse-effect 0.5s infinite;
}

@keyframes pulse-effect {
  0% {
    box-shadow: 0 0 0 0px rgba(255,193,7, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 255, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0px rgba(0, 255, 0, 0);
  }
}


.bullish-strategy-btn{
        background: mediumseagreen;
    color: white;
    font-weight: 900;
}
.bearish-strategy-btn{background:red;
    color: white;
    font-weight: 900;}
.sideways-strategy-btn{background:#000;
    color: white;
    font-weight: 900;}

.distro-strategy-btn:first-child {
    margin: 10px 5px;
}


/*candle-chart*/
.spread-live-btn{border-radius: 45px;
    padding: 10px;
    cursor: pointer;
    margin: 5px 0;
    display: inline-flex;
    font-weight: 900;
    color: white;
    height: auto;}

.long-spread-live-btn-block{    position: fixed;
    left: 0;
    width: 100px;
    padding: 0 10px;
    margin: 80px 0 0 0;}

.call-debit-spread{      position: relative;
    width: auto;
    height: 100%;
    float: left;
    min-height: 300px;}
.long-call-debit-buy-call-btn{background: mediumseagreen;}
.long-call-debit-sell-call-btn{background: red;}
.long-put-debit-buy-put-btn{background: red;}
.long-put-debit-sell-put-btn{background: mediumseagreen;}

.put-credit-spread{       position: relative;
    width: auto;
    height: 100%;
    float: left;
    min-height: 300px;}
.long-put-credit-put-buy-btn{background: red;}
.long-put-credit-put-sell-btn{background: mediumseagreen;}

.short-put-credit-put-buy-btn{background: red;}
.short-put-credit-put-sell-btn{background: mediumseagreen;}


.short-spread-live-btn-block{    position: fixed;
    left: 0;
    width: 100px;
    height: 100%;
    padding: 0 10px;
    margin: 80px 0 0 0;}
.put-debit-spread{ position: relative;
    width: auto;
    height: 50%;
    float: left;}
.short-put-debit-buy-put-btn{background:red;}
.short-put-debit-sell-put-btn{background: mediumseagreen;}
.call-credit-spread{ position: relative;
    width: auto;
    height: 40%;
    float: left;}
.short-call-credit-buy-call-btn{background: mediumseagreen;}
.short-call-credit-sell-call-btn{background: red;}

#confirm-place-order-btn{
    margin:0 0 0 10px;
    background: #000;
    color: white;
    font-weight: 900;
}

#hedge-confirm-place-order-btn{
        margin: 0 10px 0 10px;
    background:blue;
    color: white;
    font-weight: 900;
}

#bear-call-confirm-place-order-btn{
    background: red;
    color: white;
    font-weight: 900;
}

#bull-put-confirm-place-order-btn{
        background: mediumseagreen;
    color: white;
    font-weight: 900;
}

.naked-live-btn-block{    position: fixed;
    left: 0;
    width: 100px;
    height: 100%;
    padding: 0 10px;
    margin: 80px 0 0 0;}

 .naked-call-block{    position: relative;
    width: auto;
    height: 100%;
    float: left;
    padding: 0 0 50px 0;
        text-align: center;
    left: 0;
    width: 100%}
 .naked-put-block{position: relative;
    width: auto;
        text-align: center;
    height: auto;
    right: 0;
    float: right;
    padding: 0 0 50px 0;
    width: 100%}

 .naked-live-btn,.naked-live-btn-dummy{
    border-radius: 45px;

    padding: 10px;
    cursor: pointer;
    margin: 5px 0;
    display: inline-flex;
    font-weight: 900;
    color: white;
    height: auto;
 }

 .naked-live-btn-dummy{
    color: #000000 !important;
    min-width: 50px !important;
 }

 .naked-call-fair-point,.naked-put-fair-point{
    color:#000;
    font-weight: 900;
 }

.naked-call-buy-btn{background: mediumseagreen;}
.naked-put-buy-btn{background:red;}

.naked-call-sell-btn{background: red;}
.naked-put-sell-btn{background:mediumseagreen;}




.seller-naked-live-btn-block{ position: fixed;
    left: 0;
    width: 100px;
    height: 100%;
    padding: 0 10px;
    margin: 80px 0 0 0;}

.seller-naked-call-block{position: relative;
    width: auto;
    height: auto;
    float: left;}

.seller-naked-live-btn{border-radius: 45px;
    padding: 10px;
    cursor: pointer;
    margin: 5px 0;
    display: inline-flex;
    font-weight: 900;
    color: white;
    height: auto;}

.seller-naked-call-buy-btn{background:mediumseagreen;}

.seller-naked-put-block{position: relative;
    width: auto;
    height: 40%;
    float: left;}
.seller-naked-put-buy-btn{background:red;}


.reset-all-trade-btn-block{   position: fixed;
        z-index: 10;
    position: fixed;
    right: 0;
    width: 100px;
    padding: 0 10px;
    margin: 80px 0 0 0;
    bottom: 0;
    }
.reset-btn{
    background:#000;
    font-weight: 900;
    cursor: pointer;
        z-index: 11;

    border-radius: 45px;
    padding: 10px;
    cursor: pointer;
    margin: 5px 0;
    display: inline-flex;
    font-weight: 900;
    color: white;
    height: auto;
}


.exit-all-trade-btn-block{    position: fixed;
        z-index: 1000;
    position: fixed;
    left: 0;
    width: 100px;
    padding: 0 10px;
    margin: 80px 0 0 0;
    bottom: 0;
    left: 0;}

.exit-btn{    background:#000;
    font-weight: 900;
    cursor: pointer;
        z-index: 1000;

    border-radius: 45px;
    padding: 10px;
    cursor: pointer;
    margin: 5px 0;
    display: inline-flex;
    font-weight: 900;
    color: white;
    height: auto;

}

.candle-chart{}

.spread-btn-block{width:100%;}

.credit-spread-btn{width: auto;
    padding: 5px 5px;
    cursor: pointer;
    background: var(--tow-surface-raised);
    color: var(--tow-text);
    border: 1px solid var(--tow-edge);
    float: left;
    border-radius: 5px;
    font-weight: 600;}
.debit-spread-btn{    width: auto;
    cursor: pointer;
    padding: 5px 5px;
    background: var(--tow-surface-raised);
    color: var(--tow-text);
    border: 1px solid var(--tow-edge);
    float: left;
    border-radius: 5px;
    font-weight: 600;
    margin: 0 10px;}

.naked-spread-btn{    width: auto;
    padding: 5px 5px;
    cursor: pointer;
    background: var(--tow-surface-raised);
    color: var(--tow-text);
    border: 1px solid var(--tow-edge);
    float: left;
    border-radius: 5px;
    font-weight: 600;
    margin:px;}

.price-visibility-btn{
    width: auto;
    padding: 5px 5px;
    cursor: pointer;
    background: var(--tow-surface-raised);
    color: var(--tow-text);
    border: 1px solid var(--tow-edge);
    float: left;
    border-radius: 5px;
    font-weight: 600;
    margin:px;
    

}
.fair-visibility-btn{
     width: auto;
    padding: 5px 5px;
    cursor: pointer;
    background: var(--tow-surface-raised);
    color: var(--tow-text);
    border: 1px solid var(--tow-edge);
    float: left;
    border-radius: 5px;
    font-weight: 600;
    margin:0px 5px;

}    

#node-stability-txt{
    text-transform: uppercase;
        font-weight: 900;
}

.bearish_bias-status{
    color:red;
}
.bullish_bias-status{
    color:mediumseagreen;
}
.sideways-status{
    color:#000;
}

.pnl-synth-block{font-weight: 900;}

.synth-pnl-positive{color:mediumseagreen !important;}
.synth-pnl-negative{color:red  !important;}
.synth-pnl-none{color:#000  !important;}


.stability-visibility-btn{
    width: auto;
    padding: 5px 5px;
    cursor: pointer;
    background: var(--tow-surface-raised);
    color: var(--tow-text);
    border: 1px solid var(--tow-edge);
    float: left;
    border-radius: 5px;
    font-weight: 600;
    margin:0px 5px;
}


.active-spread-btn{
    background:#000 !important;
    color: white !important;
}    

/*seller-chart*/

/*market-force-chart*/
#market-force-chart {
    min-height:400px;
    height:400px;
    background: var(--tow-surface);
    border: 1px solid var(--tow-edge);
    border-radius: 6px;
}

.market-force-chart-filter-btn-block{    width: 100%;
    height: auto;
        text-align: center;
    /* background: #000000; */
    padding: 10px 10px;}

.market-force-chart-filter{width: auto;
    display: inline;
    /*background: #000000;*/
        cursor: pointer;
    height: 50px;
    padding: 5px 10px;
    border-radius: 45px;
    color: white;
    margin:0 5px;
    font-weight: 900;}

.non-active-market-force-chart-filter{
    background: var(--tow-surface-raised) !important;
    color: var(--tow-text-dim) !important;
}


.market-force-chart-filter[tag='spot']{
    background-color:#000;
    border:1px solid var(--tow-edge-strong);
}

.market-force-chart-filter[tag='straddle']{
    /* The base rule sets color:white; on cyan that is roughly 1.3:1. Every chip
       below keeps its identifying hue, but light hues take dark ink. */
    background-color:#00d4d4;
    color:#00201f;
}

.market-force-chart-filter[tag='call']{
    background-color:mediumseagreen;
    color:#04240f;
}


.market-force-chart-filter[tag='put']{
    background-color:red;
}

.market-force-chart-filter[tag='other_call']{
    background-color:blue;
}

.market-force-chart-filter[tag='other_put']{
    background-color:orange;
    color:#2b1700;
}


/*market-force-chart*/


/*spread-chart*/
/* A chart canvas is wide content; without min-width:0 the grid/flex items
   refuse to shrink below it at any width, so the card clips instead of the
   column governing. Applies at every breakpoint, not just mobile. */
.spread-chart-pair,
.spread-chart-pair > .spread-chart-individual-grid,
.spread-chart-pair .spread-chart-box{
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   Spread chart pair - responsive stacking.

   .grid-2 is a hard `repeat(2, 1fr)` with no breakpoint, so on a phone the two
   panels became ~170px columns: the charts were unreadable and the right-hand
   one ran off the edge. Under 768px they stack, upside above downside, and the
   page scrolls.

   Scoped to this container rather than patching .grid-2 globally - that class is
   used in ~46 other places, some of which are genuine side-by-side comparisons.
   --------------------------------------------------------------------------- */
@media (max-width: 767px){

    .spread-chart-pair{
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /*
        Grid and flex items default to min-width:auto, so a child never shrinks
        below its own content. The chart canvas kept .spread-chart-box 586px wide
        inside a 343px column - the card's overflow:hidden then clipped the right
        price scale, which is the "chart runs off the edge" symptom. min-width:0
        lets the column actually govern the width.
    */
    .spread-chart-pair,
    .spread-chart-pair > .spread-chart-individual-grid,
    .spread-chart-pair .spread-chart-box{
        min-width: 0 !important;
    }

    /* Fixed 500px each meant two charts plus headers barely fitting in one long
       scroll with no relationship to the screen. Height now tracks the viewport
       so one chart fills most of the screen and the second is a short scroll
       away, with a floor so it stays usable in landscape. */
    .spread-chart-pair .spread-chart-box{
        min-height: min(58vh, 420px) !important;
        height: min(58vh, 420px) !important;
        /* No horizontal padding: every pixel goes to the chart, otherwise the
           right price scale's last digit is clipped by the card's overflow. */
        padding: 8px 0 6px !important;
    }

    /* The strike header is monospace and long ("Fut Sell && 8150PE Sell"); let it
       wrap on a narrow screen instead of being clipped mid-word. */
    .spread-chart-pair .spread-strike-pick-block{
        white-space: normal;
        font-size: 11px;
        padding: 8px 10px;
    }
}

/* Sizing for .spread-chart-box. Kept separate from the block above only because
   that is where it has always lived; these are the values that actually apply. */
.spread-chart-box{
    width: 100%;
    /* No horizontal padding. lightweight-charts sizes itself to the container's
       clientWidth, which includes padding, so any left/right padding makes the
       chart overflow its own box - and the card's overflow:hidden then clips the
       right price scale's last digit. */
    padding: 12px 0 10px;
    height: auto;
    min-height: 500px;
}
.credit-spread-btn{}
.debit-spread-btn{}
#call-spread-chart{    width: 100%;
    background: var(--tow-surface);
    display: inline-block;
    height: auto;
    min-height:400px;}
#put-spread-chart{    width: 100%;
    background: var(--tow-surface);
    display: inline-block;
    height: auto;
    min-height: 400px;}
/*spread-chart*/


.call-focus {
  background: mediumseagreen  !important;
  color:white !important;
}
.put-focus {
    background: #a54e4e  !important;
    color:white !important;
}


/*#call-grid-chart{
        width: 100%;
    height: 100%;
    background: #ddd;
    min-height: 400px;
}
#put-grid-chart{
    width: 100%;
    height: 100%;
    background: #ddd;
    min-height: 400px;
}*/

.seller-chart-focus{    width: 100%;
    margin: 0px auto;
    text-align: center;}
.call-chart-focus-btn{
    padding: 5px 10px;
    
    color: #000;
    border-radius: 5px;
    cursor: pointer;
}

.put-chart-focus-btn{
    padding: 5px 10px;
    color: #000;
    border-radius: 5px;
    cursor: pointer;
}
/*seller-chart*/

#spot-trend-status{
  text-align: center;
  font-size: 16px;
}

#spot-candle-chart,#seller-candle-chart{    max-height: 300px;
      min-height: 300px;
    height: 310px;}
#call-candle-chart{    max-height: 300px;
      min-height: 300px;
    height: 310px;
  }
#put-candle-chart{    max-height: 300px;
  min-height: 300px;
    height: 310px;
  }
/*candle-chart*/

/*History-Strip*/

/* General Styling for the indicator/strip */
.status-strip {
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s ease;
}

/* CHOP - Black */
.status-chop {
      border: 1px solid #000;
    /*background-color:#ededed;*/
    /*background-color:#909090;*/
}

/*BULLISH*/

.status-bullish-mild{ background: #E8F5E9;}
.status-bullish-strong-v0{ background-color: #81C784; color: #1B5E20; } /* 0-5 */
.status-bullish-strong-v1{ background-color: #4CAF50; color: #1B5E20; } /* 0-5 */
.status-bullish-strong-v2{ background-color: #2E7D32; color: #000000; } /* 5-15 */
.status-bullish-strong-v3{ background-color: #00C853; color: #ffffff; } /* 15-20 */
.status-bullish-strong-v4{ background-color: #9bc59e; color: #56d75f; } /* 20+ */
.status-bullish-strong-v5{ background-color: mediumseagreen; color: #56d75f; } /* 20+ */

/*BEARISH*/

.status-bearish-mild{ background: #FFEBEE;}
.status-bearish-strong-v0{ background-color: #FF8A80; color: #B71C1C; } /* 0-5 */
.status-bearish-strong-v1{ background-color: #FF5252; color: #B71C1C; } /* 0-5 */
.status-bearish-strong-v2{ background-color: #FF1744; color: #000000; } /* 5-15 */
.status-bearish-strong-v3{ background-color: #F80101; color: #ffffff; } /* 15-20 */
.status-bearish-strong-v4{ background-color: #a16060; color: red; } /* 20+ */
.status-bearish-strong-v5{ background-color: #fa0000; color: red; } /* 20+ */

/* Neutral/Default */
.status-neutral {
    background-color: #21262d;
    color: var(--tow-text-dim);
}

/*History-Strip*/


/*Signal-system*/
.summary-box { border-radius: 6px; border: 1px solid #1e2d3d; padding: 20px 16px; text-align: center; transition: all 0.4s; background: #0d1117; height:100%;}
.summary-box.bull { background: #001a08; border-color: #00e676; }
.summary-box.bear { background: #1a0008; border-color: #ff1744; }
.summary-box.side { background: #0d1117; border-color: #607d8b; }
.summary-box.fluct { background: #0a0a00; border-color: #e0b020; }

.sig-main { font-size: 3.2rem; font-weight: 900; letter-spacing: 5px; line-height: 1; transition: all 0.3s; color: #37474f; }
.bull-signal .sig-main { color: #00e676; }
.bear-signal .sig-main { color: #ff1744; }
.side-signal .sig-main { color: #607d8b; font-size: 2rem; }
.fluct-signal .sig-main { color: #e0b020; font-size: 2rem; }

.fluct-signal .sig-main { color: #e0b020; font-size: 2rem; }

#sigSub1 {
    font-weight: 900;
}

.sig-sub { font-size: 0.7rem; letter-spacing: 3px; margin-top: 5px; opacity: 0.6; min-height: 16px; }
.bull-signal .sig-sub { color: #00e676; }
.bear-signal .sig-sub { color: #ff1744; }
.side-signal .sig-sub { color: #607d8b; }
.fluct-signal .sig-sub { color: #e0b020; }


.bull-signal .sig-sub1 { color: #00e676; }
.bear-signal .sig-sub1 { color: #ff1744; }
.side-signal .sig-sub1 { color: #607d8b; }
.fluct-signal .sig-sub1 { color: #e0b020; }

.score-bar-wrap { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin: 12px 0 4px; background: #1e2d3d; }
.score-bar-bull { background: #00e676; height: 100%; transition: width 0.5s; }
.score-bar-bear { background: #ff1744; height: 100%; transition: width 0.5s; }

.score-nums { font-size: 0.65rem; letter-spacing: 2px; color: #546e7a; margin-bottom: 12px; }

.momentum-row { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.mtag { font-size: 0.6rem; letter-spacing: 1px; padding: 3px 8px; border-radius: 2px; border: 1px solid #1e2d3d; color: #37474f; background: #0d1117; transition: all 0.3s; }
.mtag.on { border-color: #4fc3f7; color: #4fc3f7; background: #001a2a; }

.tags-row { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 0.6rem; letter-spacing: 1px; padding: 3px 8px; border-radius: 2px; }

.candle-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 6px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #37474f; }
.dot.active { background: #4fc3f7; animation: blink 1s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/*Signal-system*/

#margin-parameter-lbl{
    font-weight: 900;
    color:red;
    font-size: 18px;
}


/*Bell Curve*/
#bellCanvas{width:100%;border:1px solid var(--border);border-radius:3px;background:#030810;display:block;flex-shrink:0;position: relative;}
/*Bell Curve*/

.governing-structure-bias,.governing-structure-state,.governing-structure-strength{
    font-weight: 900 !important;
}

.governing-dynamics-structure{
    margin:30px 0;
}

.bias-BEARISH{
    background:red !important;
    color:white !important;
}
.bias-BULLISH{
    background:mediumseagreen !important;
    color:white !important;
}
.bias-NONE{
    background:#000 !important;
    color:white !important;
}


.state-SHORT{
    color:red !important;
}
.state-LONG{
    color:mediumseagreen !important;
}
.state-SIDEWAYS{
    color:#000 !important;
}

.strength-STRONG{}
.strength-MODERATE{}
.strength-WEAK{}
.strength-DEAD{}


/**/
.ct-series-a line{
    stroke:#d70206 !important;
}

.ct-series-b line{
    stroke:mediumseagreen !important;
}


/*.ct-grids{
    display: none !important;
}*/