/* SAIFAN uses the light cyan/teal research palette, scoped to this page. */
:root{color-scheme:light;--bg:#effafc;--panel:#fff;--border:#cce8ee;--text:#163e52;--muted:#6c8798;--cyan:#079c8a;--amber:#a37514;--red:#d7546b}
body{background:linear-gradient(180deg,#f6fcfd,#edf9fb);color:var(--text);font-family:"Segoe UI",Arial,sans-serif}
main{padding:13px 20px 18px}
.breadcrumb{font-size:10px;margin-bottom:8px;color:#7a949f}
.breadcrumb a{text-decoration:none;color:#458195}
.heading{padding:4px 0 13px;margin-bottom:0;gap:16px}
.heading .sf-eyebrow{color:#7895a1;font-size:9px;letter-spacing:1.1px}
.heading .sf-eyebrow span{color:#21adbb}
.heading h1{font-size:26px;letter-spacing:-.4px;display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin:4px 0}
.heading h1 b{color:#0b9faf;font-weight:600}
.heading p{font-size:11px;color:#78909c;margin-top:5px}
.instrument-pair{display:inline-flex!important;gap:8px;align-items:center;border-right:1px solid #bedde5;padding-right:13px;font-size:15px;letter-spacing:.2px!important;color:#235e72;font-weight:500}
.instrument-pair i{font-style:normal;color:#89aeb8;font-size:12px}
.actions{gap:7px}.actions button,button{background:#fff;border-color:#c4e2e9;color:#276678;box-shadow:none}
button:hover{background:#e9f8fa;border-color:#6bc9d5;color:#125d70}
.actions button{font-size:11px;border-radius:6px;padding:7px 12px}
.actions #demo{background:#fff;border-color:#c4e2e9;color:#3f7889}
.actions #resume-feed{background:#ddf7f2;border-color:#9eddd2;color:#087f70}
.badge{background:#f6fbfc;border-color:#d3e8ed;color:#78939f;font-size:10px;border-radius:5px;padding:5px 8px}
.feed-strip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 12px;background:#e7f5f8;border:1px solid #cce8ee;border-radius:7px;margin-bottom:13px;min-height:37px}
.feed-status{display:inline-flex;align-items:center;gap:6px;color:#526f7e;margin:0;min-height:0;white-space:nowrap;font-size:11px;font-weight:600}
.feed-status:before{content:"";height:6px;width:6px;border-radius:50%;background:#92afbb}
.feed-status[data-state="ready"]{color:#078c7b}.feed-status[data-state="ready"]:before{background:#08aa93}
.feed-status[data-state="loading"]:before{background:#18b9cc;box-shadow:0 0 0 3px #18b9cc18}
.feed-status[data-state="demo"]{color:#9b751a}.feed-status[data-state="demo"]:before{background:#c49b40}
.feed-detail{color:#6c8995;font-size:10px}
#feed-login{font-size:11px;padding:4px 10px;border-radius:5px;background:#fff;border-color:#b8dce5}
.metrics{gap:11px;margin-bottom:13px}
.metrics article{background:#fff;border:1px solid #c8e6ed;padding:13px 17px;border-radius:9px;box-shadow:0 2px 7px #0b6c7903}
.metrics label,.regime-card-heading{color:#6e8e9e;font-size:11px}
.metrics strong{font-size:29px;font-weight:600;color:#18485e;margin:7px 0 5px}
.metrics article:first-child{border-top:2px solid #0fae9b}
.metrics article:first-child strong{color:#079b87;font-size:25px}
.metrics #vwap{color:#0a9dab}.metrics small{color:#819ba7;font-size:10px}
.workspace{gap:12px}
.workspace .panel,.panel{background:#fff;border-color:#c5e5ee;border-radius:9px;box-shadow:none}
.workspace .panel{padding:15px}
.panel h2{font-size:14px;font-weight:600;color:#234f64}
.panel .sf-eyebrow{color:#8ba6b1;letter-spacing:.7px;font-size:8px}
.panel-title{margin-bottom:7px}
.legend{color:#73919e;font-size:10px}
.segmented{background:#f1f9fb;border:1px solid #d9edf2;padding:2px;border-radius:6px}
.segmented button{color:#628492;font-size:10px;padding:5px 11px;border-radius:4px}
.segmented .selected{background:#19b9cd;color:#fff;box-shadow:0 1px 4px #119eb51a}
.chart.big{height:clamp(275px,34vh,385px)}
.chart{color:#819ba7}
.chart-tooltip{background:#fffefbfa;border:1px solid #c6e3eb;color:#1d5b6f;box-shadow:0 2px 8px #14516b0a}
.chart-foot{border-color:#e2eff3;color:#89a0ac;padding-top:8px}
.session-regime{border-color:#e0eff3;margin-top:8px;padding-top:10px}
.session-regime h2{font-size:11px;color:#5a7d8c}
.session-regime .regime-cursor{color:#668a98;font-size:10px}
.session-regime .timeline{height:22px}
.session-regime .timeline svg{height:22px}
.session-regime .timeline-empty{background:#eff8fa;color:#88a3ae}
.session-regime .legend{font-size:9px;gap:8px}
.profile{min-height:190px}
.profile-row span:first-child{color:#7e9ba7}
.profile-row b{background:#e5f7f3;color:#159888;border-radius:2px;padding:1px 4px}
.profile-row.poc b{background:#fff2d4;color:#a47a19}
.levels>div{border-color:#e4f0f3;color:#78929f}
.levels b{color:#285a6d;font-weight:500}
.signal{border-top-color:#0da897!important}
.signal h2{color:#7d701e;font-size:20px}
.signal p{color:#8197a2}
.signal .check{border-color:#e3eff2;font-size:11px;color:#567786;padding:8px 0}
.signal .wide{background:#f3fafb;border-color:#d2e9ee;color:#4f7e8e}
.signal small,.profile-panel small,.panel small{color:#8a9fa9}
.daily-panel .levels>div{font-size:11px;padding:13px 0}
.settings,.help{background:#f9fdfe;border-color:#d5eaef}
.settings summary,.help summary{color:#688c9a;font-size:11px}
.settings input{background:#fff;color:#1b576c;border-color:#cee5ec}
.settings p,.help p{color:#718e9b}
footer{color:#90a9b3;font-size:10px}
.regime-help-button{width:21px;height:21px;min-width:21px;border-color:#b7dce4;color:#3c8699;font-size:11px}
.regime-help-button:hover{background:#e4f8f5;border-color:#48bbaa;color:#079b87}
.regime-help-dialog{background:#fff;color:#244d60;border-color:#b9dce7;box-shadow:0 22px 90px #163e522b}
.regime-help-dialog::backdrop{background:#1a526b40;backdrop-filter:blur(3px)}
.regime-help-heading h2{color:#234e63}
.regime-help-close{color:#4d7f91;border-color:#c8e2e9}
.regime-help-dialog p,.regime-help-table td+td{color:#638493}
.regime-help-table th{color:#7d9ca9;border-color:#cde5eb}
.regime-help-table td{border-color:#e3eff3}
.regime-help-label.balanced{color:#089c85}
.regime-help-label.up{color:#2563eb}
.regime-help-label.down{color:#d75b72}.regime-help-label.transition{color:#aa7a19}.regime-help-label.waiting{color:#8aa5b0}
.regime-help-dialog .regime-help-note{background:#effaf7;border-color:#0fae97;color:#4c7b84}
.regime-help-dialog .regime-help-footnote{color:#87a1ad}
@media(max-width:650px){main{padding:12px}.heading h1{font-size:23px;gap:9px}.instrument-pair{font-size:12px;padding-right:9px}.heading{gap:10px}.heading p{font-size:10px}.actions{width:100%}.feed-strip{gap:6px 12px;padding:9px 10px}.feed-detail{font-size:9px}.metrics strong{font-size:26px}.metrics article{padding:11px 13px}.chart.big{height:280px}.workspace .panel{padding:13px}.session-regime .legend{line-height:1.7}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Price, TPO profile and regime strip share one SVG geometry. */
.spy-panel{grid-column:1 / 10}
.spy-panel .chart{display:block;position:relative;min-width:0}
.spy-panel .chart.big{height:clamp(300px,37vh,420px)}
.spy-panel .chart>svg{display:block;width:100%;height:100%;overflow:hidden}
.tpo-selected rect{fill:#b5e7df;stroke:#119b88;stroke-width:1}
.profile-summary{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;padding-top:7px;border-top:1px solid #e3eff3;color:#7b96a1;font-size:10px}
.profile-summary .profile-caption{color:#527e8e}
.profile-summary .levels{display:flex;gap:15px}
.profile-summary .levels>div{display:flex;gap:7px;align-items:center;border:0;padding:0;font-size:10px}
.profile-summary .levels b{font-variant-numeric:tabular-nums}
.profile-summary>output{margin-inline-start:auto;font-size:10px}
.session-regime{margin-top:8px}
.profile-legend{color:#5d98a3}
@media(min-width:1200px){.signal{grid-column:10 / 13}}
@media(max-width:1199px) and (min-width:901px){.spy-panel{grid-column:1 / 10}.signal{grid-column:10 / 13;grid-row:1}.vix-daily-panel{grid-column:1 / 5;grid-row:2}.vix-intraday-panel{grid-column:5 / 9;grid-row:2}.daily-panel{grid-column:9 / 13;grid-row:2}.daily-panel .levels{display:block}}
@media(max-width:900px){.spy-panel{grid-column:1 / -1;grid-row:1}.signal{grid-column:1 / -1;grid-row:3}.vix-daily-panel{grid-column:1 / 7;grid-row:2}.vix-intraday-panel{grid-column:7 / 13;grid-row:2}.daily-panel{grid-column:1 / -1;grid-row:4}.signal .checks{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}.profile-summary>output{width:100%;margin:0}}
@media(max-width:600px){.spy-panel .chart.big{height:320px}.profile-summary{gap:6px;font-size:9px}.profile-summary .levels{gap:12px}.profile-summary>output{font-size:9px}.profile-legend{font-size:9px}}

/* A compact chart frame: explanations live behind the help button. */
.spy-panel .panel-title{margin-bottom:2px}
.chart-heading{display:flex;align-items:center;gap:10px}
.spy-panel .chart-heading h2{font-size:18px;font-weight:650;margin:0;direction:ltr;color:#174e64}
.chart-subtitle{font-size:11px;color:#7c98a4;font-weight:400}
.chart-heading .regime-help-button{width:19px;height:19px;min-width:19px;font-size:11px}
.spy-panel .plot-legend{margin:3px 0 6px;font-size:10px;gap:12px}
.spy-panel .chart.big{height:clamp(325px,40vh,455px)}
.spy-panel .profile-summary{justify-content:flex-end;border:0;padding:4px 0 7px;min-height:25px}
.profile-summary .levels{gap:8px}
.profile-summary .levels>div{background:#f3fafb;border:1px solid #e3eff2;padding:3px 7px;border-radius:4px;font-size:10px}
.profile-summary .levels>div:first-child{background:#fffaf0;border-color:#f0e6c8}
.profile-summary .levels>div:first-child b{color:#a78126}
.spy-panel .session-regime{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;align-items:center;padding-top:8px;margin-top:0}
.spy-panel .session-regime .panel-title{grid-column:1;grid-row:1;margin:0}
.spy-panel .session-regime h2{font-size:10px;font-weight:500;white-space:nowrap;margin:0;color:#7596a3}
.spy-panel .session-regime .legend{grid-column:2;grid-row:1;justify-content:flex-start;gap:11px;margin:0;font-size:9px}
.spy-panel .session-regime .timeline{grid-column:1 / -1;grid-row:2;margin:1px 0 0;height:19px}
.spy-panel .session-regime .timeline svg{height:19px}
.spy-panel .chart-foot{border:0;padding-top:5px;margin-top:3px;font-size:9px;color:#91a9b4}
.chart-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.chart-help-definitions{margin:16px 0}
.chart-help-definitions>div{padding:11px 0;border-bottom:1px solid #e4eff3}
.chart-help-definitions dt{font-size:13px;font-weight:600;color:#286174}
.chart-help-definitions dd{margin:4px 0 0;color:#6d8997;font-size:13px;line-height:1.8}
@media(max-width:600px){.spy-panel .chart.big{height:325px}.chart-heading{gap:7px}.chart-subtitle{font-size:10px}.spy-panel .session-regime .legend{gap:7px;font-size:8px}.spy-panel .profile-summary .levels{gap:5px}.profile-summary .levels>div{font-size:9px;padding:3px 6px}}

/* Price labels live outside the candles; TPO starts immediately after them. */
.spy-panel .chart-tooltip{left:6.3%;font-size:10px}
.spy-panel .tpo-bin text{paint-order:stroke;stroke:#ffffff60;stroke-width:.15px}
.spy-panel .tpo-selected rect{fill:#bce8dc;stroke:#179781;stroke-width:1.2}
.spy-panel .profile-level-line[data-level="POC"]{stroke-opacity:.8}
@media(min-width:1600px){.spy-panel .chart.big{height:clamp(350px,42vh,480px)}}

/* Regime cells are drawn in the candle SVG directly above its time labels. */
.spy-panel .session-regime{padding-top:5px;border-top:0;gap:0 12px}
.spy-panel #timeline:focus-visible{outline:none}
.spy-panel #timeline:focus-visible rect{stroke:#1b7b8e;stroke-width:.6}
.spy-panel .chart-foot{margin-top:2px}

/* Cursor details: a compact floating information card. */
.chart .chart-tooltip{direction:rtl;text-align:right;top:10px;left:8px;width:258px;max-width:calc(100% - 16px);padding:0;border:1px solid #c6e4e9;border-radius:11px;background:#fffffffa;color:#204f63;box-shadow:0 8px 28px #123f5518,0 2px 5px #123f5508;overflow:hidden;z-index:5;font-family:"Segoe UI",Arial,sans-serif;backdrop-filter:blur(8px)}
.spy-panel.chart .chart-tooltip,.spy-panel .chart-tooltip{left:6.3%}
.cursor-tip-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px;border-bottom:1px solid #e6f1f4;background:#f3fafb;font-size:12px}
.cursor-tip-time{display:inline-flex;align-items:baseline;gap:5px;font-size:15px;font-weight:650;letter-spacing:.2px}
.cursor-tip-time small{display:inline;color:#86a1ad;font-size:9px;font-weight:400}
.cursor-tip-date{color:#7c98a5;font-size:10px}
.cursor-tip-main{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px}
.cursor-tip-main>span>small{display:block;color:#8ba3ae;font-size:10px;margin-bottom:2px}
.cursor-tip-main strong{display:block;font-size:25px;line-height:1.2;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.tip-up{color:#079881}.tip-down{color:#d05a70}
.cursor-tip-regime{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:4px 8px;font-size:10px;background:#eff6f8;color:#648794;white-space:nowrap}
.cursor-tip-regime:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.cursor-tip-regime.tip-balanced{background:#e8f7f1;color:#108e78}
.cursor-tip-regime.tip-transition{background:#fff6df;color:#a77c1b}
.cursor-tip-regime.tip-trending{background:#fceef1;color:#c75b70}
.cursor-tip-prices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid #edf3f5;padding:9px 5px 11px}
.cursor-tip-prices>span{display:flex;flex-direction:column;align-items:center;gap:3px;border-inline-start:1px solid #eaf2f5}
.cursor-tip-prices>span:first-child{border-inline-start:0}
.cursor-tip-prices small{font-size:9px;color:#8ca3ae}
.cursor-tip-prices b{font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.cursor-tip-main .tip-range{font-size:18px;color:#257b8c;letter-spacing:0}
.cursor-tip-count{text-align:center;color:#168e7d;font-weight:600;font-size:21px}
.cursor-tip-main .cursor-tip-count small{font-size:9px;font-weight:400;margin:0}
.cursor-tip-letters{display:block;padding:8px 13px 11px;border-top:1px solid #e6f1f4;color:#337c76;letter-spacing:2px;font:12px/1.5 Consolas,monospace;overflow-wrap:anywhere}
@media(max-width:600px){.chart .chart-tooltip{width:230px}.cursor-tip-main strong{font-size:22px}.cursor-tip-prices b{font-size:10px}}

.volatility-heading{display:flex;align-items:center;gap:8px}.volatility-heading .regime-help-button{width:19px;height:19px;min-width:19px;font-size:11px;flex-shrink:0}

/* Center the close icon independently of font baseline and RTL direction. */
.regime-help-dialog .regime-help-close{display:inline-grid;place-items:center;box-sizing:border-box;width:30px;height:30px;min-width:30px;padding:0;margin:0;font-size:0;line-height:1}
.regime-help-dialog .regime-help-close::before{content:"";display:block;width:12px;height:12px;background:linear-gradient(45deg,transparent calc(50% - .9px),currentColor calc(50% - .9px),currentColor calc(50% + .9px),transparent calc(50% + .9px)),linear-gradient(-45deg,transparent calc(50% - .9px),currentColor calc(50% - .9px),currentColor calc(50% + .9px),transparent calc(50% + .9px));pointer-events:none}