/* Index Forecast Lab - styles. Loaded globally by Dash from /assets, so every rule is scoped under .ifl-app.
   The page kit of the main app (assets/app_pages/pages_style.css: .pk-scope, .pk-card, .pk-kpis, .pk-pills,
   .pk-chip, .pk-btn) does most of the work; these rules lay out the node, as in the Curve Forecast Lab.
   The kind glyphs of the pipeline strip are the editor's (.agx-kg, assets/algo_graph/agx_style.css).
   Tokens: panels rgba(0,0,0,0.6), chips rgba(255,255,255,0.06), radius 10px, text #e8e8e8, muted #9fb3c8,
   headings #cfefff, accent #f0a030; bad #e66767, good #3fbf7f. */

.ifl-app { color: #e8e8e8; font-size: 13px; }
.ifl-app * { box-sizing: border-box; }

/* ---------- header (leave ~200px on the right for the app toolbar) ---------------------------- */
.ifl-app .ifl-top { display: flex; align-items: flex-end; gap: 18px; padding: 0 200px 8px 0; }
.ifl-app .ifl-brand h3 { margin: 0; font-size: 1.3rem; color: #cfefff; font-weight: 600; letter-spacing: .2px; }
.ifl-app .ifl-brand h3 span { color: #9fb3c8; font-weight: 400; font-size: .95rem; }
.ifl-app .ifl-brand > div { color: #9fb3c8; font-size: .78rem; max-width: 1080px; line-height: 1.45; }

/* ---------- the strip: one card per step of the study = the navigation of the screens ---------- */
.ifl-app .ifl-pipe { display: flex; align-items: stretch; gap: 6px; margin: 2px 0 12px; overflow-x: auto; padding-bottom: 2px; }
.ifl-app .ifl-step { flex: 1 1 0; min-width: 112px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.07);
                     border-radius: 10px; padding: 6px 9px 7px; cursor: pointer; position: relative;
                     transition: border-color .15s, background .15s, box-shadow .15s; }
.ifl-app .ifl-step:hover { border-color: rgba(240,160,48,0.6); background: rgba(240,160,48,0.05); }
.ifl-app .ifl-step.off { opacity: .5; }
.ifl-app .ifl-step.ifl-step-on { border-color: #f0a030; background: rgba(240,160,48,0.13); opacity: 1;
                                 box-shadow: inset 0 -3px 0 #f0a030, 0 0 0 1px rgba(240,160,48,0.25); }
.ifl-app .ifl-step.ifl-step-on .ifl-step-n { color: #ffe3b3; }
.ifl-app .ifl-step.ifl-step-on .ifl-step-s { color: #f5d6a3; }
.ifl-app .ifl-step-k { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.ifl-app .ifl-step-i { color: #6f8295; font-size: .62rem; font-variant-numeric: tabular-nums; }
.ifl-app .ifl-step.ifl-step-on .ifl-step-i { color: #f0a030; }
.ifl-app .ifl-step-a { align-self: center; color: #4d5d6d; font-size: .7rem; flex: 0 0 auto; }
.ifl-app .ifl-kind { display: inline-flex; align-items: center; font-size: .6rem; text-transform: uppercase; letter-spacing: .6px;
                     border: 1px solid; border-radius: 8px; padding: 0 7px; line-height: 1.6; white-space: nowrap; }
.ifl-app .ifl-kind.ifl-kind-g { padding: 0 5px; }
/* the title may take two lines too ("Problema di apprendimento", "Problème d'apprentissage" on a 128 px card) */
.ifl-app .ifl-step-n { color: #cfefff; font-weight: 600; font-size: .84rem; margin-top: 3px; line-height: 1.2;
                       overflow: hidden; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
                       -webkit-box-orient: vertical; overflow-wrap: anywhere; }
/* the headline may take two lines ("Sharpe 0.54 · constant 0.65 · hold 0.66" on a 140 px card), never more */
.ifl-app .ifl-step-s { color: #9fb3c8; font-size: .68rem; line-height: 1.3; overflow: hidden; white-space: normal;
                       display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }

/* ---------- main grid: rail + screens ---------------------------------------------------------- */
.ifl-app .ifl-main { display: grid; grid-template-columns: 318px minmax(0, 1fr); gap: 14px; align-items: start; }
.ifl-app .ifl-rail { display: flex; flex-direction: column; min-width: 0; }
.ifl-app .ifl-rail .pk-card { padding: 9px 11px; margin-bottom: 8px; }
.ifl-app .ifl-rail .pk-card-sub { margin-bottom: 6px; }
.ifl-app .ifl-field { margin-bottom: 8px; min-width: 0; }
.ifl-app .ifl-k { color: #9fb3c8; font-size: .64rem; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 3px; }
.ifl-app .ifl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.ifl-app .ifl-actions { margin: 2px 0 6px; }
.ifl-app .ifl-actions .pk-btn i { margin-right: 3px; color: #f0a030; }
.ifl-app .ifl-train { font-weight: 600; padding: 5px 16px; }
.ifl-app .Select-control { min-height: 30px; }
.ifl-app .Select--single > .Select-control { height: 30px; }
.ifl-app .Select--single > .Select-control .Select-value, .ifl-app .Select-placeholder { line-height: 28px !important; }
.ifl-app .Select-value-label { color: #e8e8e8 !important; }
.ifl-app .Select--multi .Select-value { font-size: .7rem; margin-top: 3px; }
.ifl-app .VirtualizedSelectOption { white-space: normal; line-height: 1.25; }
.ifl-app .Select-menu-outer { z-index: 30; }
/* a dropdown whose value is a sentence (the study shown): two lines instead of a cut one
   (dcc.Dropdown puts its className on the .Select element itself) */
.ifl-app .ifl-dd.two.Select--single > .Select-control { height: 46px; }
.ifl-app .ifl-dd.two.Select--single > .Select-control .Select-value { display: flex; align-items: center; white-space: normal;
                                                                       line-height: 1.3 !important; padding-right: 28px; }
.ifl-app .ifl-dd.two .Select-value-label { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                                           overflow: hidden; white-space: normal; font-size: .76rem; line-height: 1.3; }
.ifl-app .ifl-dd.two .Select-placeholder { line-height: 44px !important; }
.ifl-app .ifl-dd.two .Select-input { height: 44px; }
.ifl-app .ifl-status { font-size: .74rem; line-height: 1.45; margin-bottom: 4px; }
.ifl-app .ifl-ok { color: #bfe8c4; }
.ifl-app .ifl-ok i { color: #3fbf7f; }
.ifl-app .ifl-err { color: #ffd0cb; }
.ifl-app .ifl-err i { color: #e66767; }
.ifl-app .ifl-muted { color: #9fb3c8; }
.ifl-app .ifl-warnline { color: #f5d6a3; margin-top: 3px; }
.ifl-app .ifl-warnline i { color: #f0a030; }
.ifl-app .ifl-note { color: #7f93a6; font-size: .7rem; line-height: 1.45; margin-top: 6px; }
.ifl-app .ifl-rail .ifl-note { margin-top: 4px; }

/* rail: the numbered steps, links, the ensemble line, the end date, the added inputs */
.ifl-app .ifl-rail-n { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
                       border-radius: 50%; border: 1px solid rgba(240,160,48,0.7); color: #f5d6a3; font-size: .66rem;
                       font-weight: 600; margin-right: 7px; vertical-align: 1px; }
.ifl-app .ifl-link { border: none; background: none; color: #f0a030; font-size: .62rem; padding: 0 0 0 8px; cursor: pointer;
                     text-transform: none; letter-spacing: 0; }
.ifl-app .ifl-link:hover { text-decoration: underline; }
.ifl-app .ifl-refresh { font-size: .7rem; padding-left: 6px; }
.ifl-app .ifl-refresh:hover { text-decoration: none; color: #ffd27a; }
.ifl-app .ifl-ensemble { color: #cfdcea; font-size: .74rem; margin: -2px 0 6px; }
.ifl-app .ifl-ensemble i { color: #9fb3c8; margin-right: 2px; }
.ifl-app .ifl-end { margin-bottom: 4px; }
.ifl-app .ifl-date { height: 28px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.16); background: rgba(0,0,0,0.45);
                     color: #e8e8e8; padding: 0 8px; font-size: .78rem; color-scheme: dark; }
.ifl-app .ifl-valforms label { font-size: .72rem !important; }
.ifl-app .ifl-chips { display: flex; flex-direction: column; gap: 5px; }
.ifl-app .ifl-chips-none { margin-top: 0; }
.ifl-app .ifl-chip { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09); border-radius: 9px;
                     padding: 4px 6px 5px 8px; min-width: 0; }
.ifl-app .ifl-chip-h { display: flex; align-items: flex-start; gap: 6px; }
.ifl-app .ifl-chip-t { flex: 1 1 auto; min-width: 0; }
.ifl-app .ifl-chip-l { color: #e8f4ff; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ifl-app .ifl-chip-m { color: #8a9bab; font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ifl-app .ifl-chip-x { border: none; background: none; color: #9fb3c8; cursor: pointer; padding: 0 2px; font-size: .8rem; }
.ifl-app .ifl-chip-x:hover { color: #e66767; }
.ifl-app .ifl-chip-f { margin-top: 3px; font-size: .68rem; }
.ifl-app .ifl-chip-f .Select-control { min-height: 26px; }
.ifl-app .ifl-chip-f .Select--multi .Select-value, .ifl-app .ifl-chip-f .Select-value { font-size: .64rem; margin-top: 2px; }
/* a group heading inside the design dropdown */
.ifl-app .ifl-dd-h { color: #f0a030; font-size: .62rem; text-transform: uppercase; letter-spacing: .6px; }
.ifl-app .VirtualizedSelectOption.VirtualizedSelectDisabledOption { opacity: 1; cursor: default; }
/* the daily card of ifl_daily sits inside the rail's card: no second frame */
.ifl-app .ifl-c-daily .pk-card { background: none; border: none; padding: 0; margin: 0 0 4px; box-shadow: none; }
/* the valuation metrics (eleven pills: a little smaller than the forms), the count of valuation inputs */
.ifl-app .ifl-valmetrics label { font-size: .68rem !important; }
.ifl-app .ifl-valcount:empty { display: none; }
.ifl-app .ifl-valcount { color: #cfdcea; margin: -4px 0 2px; }
.ifl-app #ifl_valforms_wrap { margin-bottom: 8px; }
/* rail cards that open on a click on their head (the less-used tools): closed by default */
.ifl-app .ifl-fold > summary { list-style: none; cursor: pointer; }
.ifl-app .ifl-fold > summary::-webkit-details-marker { display: none; }
.ifl-app .ifl-fold > summary::marker { content: ""; }
.ifl-app .ifl-fold-t { min-width: 0; }
.ifl-app .ifl-fold-i { color: #9fb3c8; font-size: .72rem; margin-top: 3px; transition: transform .15s; }
.ifl-app .ifl-fold:hover .ifl-fold-i { color: #f0a030; }
.ifl-app .ifl-fold[open] .ifl-fold-i { transform: rotate(180deg); }
.ifl-app .ifl-rail .ifl-fold:not([open]) .pk-card-sub { margin-bottom: 0; }
.ifl-app .ifl-fold-b { padding-top: 2px; }

/* progress strips of the two jobs (outside any Loading) */
.ifl-app .ifl-progwrap:empty { display: none; }
.ifl-app .ifl-prog { font-size: .74rem; line-height: 1.45; margin: 2px 0 6px; padding: 6px 8px; border-radius: 8px;
                     background: rgba(255,255,255,0.04); }
.ifl-app .ifl-prog-t { display: flex; align-items: baseline; gap: 5px; color: #f5d6a3; }
.ifl-app .ifl-prog-t i { color: #f0a030; }
.ifl-app .ifl-prog-p { margin-left: auto; font-variant-numeric: tabular-nums; color: #cfefff; }
.ifl-app .ifl-prog-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.09); margin-top: 5px; overflow: hidden; }
.ifl-app .ifl-prog-bar > div { height: 100%; background: #f0a030; border-radius: 2px; transition: width .6s; }

/* screen tabs (the same look as the other idea apps) */
.ifl-app .ifl-tabs { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 8px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.ifl-app .ifl-tabs label { display: inline-flex !important; margin: 0 !important; cursor: pointer; padding: 2px 0 7px;
                           color: #7f93a8; font-size: 1rem; font-weight: 600; border-bottom: 2px solid transparent;
                           transition: color .15s, border-color .15s; }
.ifl-app .ifl-tabs label:hover { color: #cfefff; }
.ifl-app .ifl-tabs label:has(input:checked) { color: #cfefff; border-bottom-color: #f0a030; }
.ifl-app .ifl-tabs input { display: none; }
.ifl-app .ifl-center { min-width: 0; }
.ifl-app .ifl-loadwrap { min-height: 60px; }
.ifl-app .ifl-wait { color: #9fb3c8; padding: 40px 10px; text-align: center; }
.ifl-app .ifl-wait.ifl-err { color: #ffd0cb; }
/* under the screen: the table of a tab is hidden the moment its tab is left (the new one may take a second),
   and dimmed, after a short delay, while it is being drawn again */
.ifl-app .ifl-sub:not(.tab-options) > .for-options, .ifl-app .ifl-sub:not(.tab-trades) > .for-trades { display: none; }
.ifl-app .ifl-sub { transition: opacity .15s; }
.ifl-app .ifl-sub[data-dash-is-loading="true"] { opacity: .5; transition: opacity .2s ease .45s; }

/* the bar of the controls of a step: always in the layout, shown for its step only, hidden when that step has
   no group in it (.ifl-bg.for-<step>) */
.ifl-app .ifl-bar { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: flex-end; margin: 0 0 10px; padding: 7px 10px;
                    background: rgba(255,255,255,0.04); border-radius: 10px; }
.ifl-app .ifl-bar.nostudy, .ifl-app .ifl-bar.nochain.tab-options, .ifl-app .ifl-bar.nochain.tab-trades { display: none; }
.ifl-app .ifl-bar.tab-inputs:not(:has(> .for-inputs)), .ifl-app .ifl-bar.tab-dataset:not(:has(> .for-dataset)),
.ifl-app .ifl-bar.tab-model:not(:has(> .for-model)), .ifl-app .ifl-bar.tab-forecast:not(:has(> .for-forecast)),
.ifl-app .ifl-bar.tab-accuracy:not(:has(> .for-accuracy)), .ifl-app .ifl-bar.tab-backtest:not(:has(> .for-backtest)),
.ifl-app .ifl-bar.tab-inside:not(:has(> .for-inside)), .ifl-app .ifl-bar.tab-options:not(:has(> .for-options)),
.ifl-app .ifl-bar.tab-trades:not(:has(> .for-trades)) { display: none; }
.ifl-app .ifl-bar > .ifl-bg { display: none; min-width: 0; }
.ifl-app .ifl-bar.tab-inputs > .for-inputs, .ifl-app .ifl-bar.tab-dataset > .for-dataset,
.ifl-app .ifl-bar.tab-model > .for-model, .ifl-app .ifl-bar.tab-forecast > .for-forecast,
.ifl-app .ifl-bar.tab-accuracy > .for-accuracy, .ifl-app .ifl-bar.tab-backtest > .for-backtest,
.ifl-app .ifl-bar.tab-inside > .for-inside, .ifl-app .ifl-bar.tab-options > .for-options,
.ifl-app .ifl-bar.tab-trades > .for-trades { display: block; }
.ifl-app .ifl-bar .ifl-k { margin-bottom: 2px; }
.ifl-app .ifl-bar .ifl-dd { min-width: 190px; }
.ifl-app .ifl-bar .ifl-bg.grow { flex: 1 1 260px; max-width: 520px; }
.ifl-app .ifl-bar .ifl-dd.wide { min-width: 240px; }

/* ---------- cards, grids, kpis ------------------------------------------------------------------ */
.ifl-app .ifl-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ifl-app .ifl-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; margin-bottom: 2px; }
.ifl-app .ifl-grid1 { display: grid; grid-template-columns: minmax(0, 1fr); }
.ifl-app .ifl-card { margin-bottom: 10px; min-width: 0; }
.ifl-app .ifl-graph { width: 100%; }
.ifl-app .ifl-kpis { margin: 0 0 10px; }
.ifl-app .ifl-kpis .pk-kpi { flex: 1 1 150px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.07); min-width: 0; }
.ifl-app .ifl-kpis .pk-kpi.ifl-hero { flex: 1.3 1 190px; border-color: rgba(240,160,48,0.45); background: rgba(240,160,48,0.07); }
.ifl-app .ifl-kpis .pk-kv { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ifl-app .ifl-kpis .pk-kpi.ifl-long .pk-kv { font-size: 1rem; line-height: 1.68rem; }
.ifl-app .ifl-kpis .pk-kl { color: #cfdcea; }
.ifl-app .ifl-kpi-s { color: #7f93a6; font-size: .64rem; margin-top: 1px; line-height: 1.35; }

.ifl-app .ifl-say { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; padding: 7px 10px; border-radius: 10px;
                    background: rgba(255,255,255,0.04); color: #dfe7ee; font-size: .78rem; line-height: 1.5; }
.ifl-app .ifl-say i { color: #f0a030; margin-top: 3px; flex: 0 0 auto; }
.ifl-app .ifl-say.warn { background: rgba(230,103,103,0.09); border: 1px solid rgba(230,103,103,0.3); color: #ffe1dd; }
.ifl-app .ifl-say.warn i { color: #e66767; }
.ifl-app ul.ifl-list { margin: 4px 0 0; padding-left: 20px; color: #dfe7ee; font-size: .8rem; line-height: 1.55; }
.ifl-app .ifl-list li { margin-bottom: 6px; }
.ifl-app ul.ifl-list.ifl-small { font-size: .74rem; color: #b9c7d5; }
.ifl-app .ifl-list.ifl-small li { margin-bottom: 3px; }
.ifl-app .ifl-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: baseline; }
.ifl-app .ifl-ic-ok { color: #3fbf7f; }
.ifl-app .ifl-ic-bad { color: #e66767; }

/* the limits of the option table: a note that cannot be missed */
.ifl-app .ifl-limits { border: 1px solid rgba(240,160,48,0.5); border-left: 4px solid #f0a030; background: rgba(240,160,48,0.07);
                       border-radius: 10px; padding: 10px 14px 8px; margin-bottom: 10px; }
.ifl-app .ifl-lim-h { color: #f5d6a3; font-weight: 600; font-size: .88rem; margin-bottom: 4px; }
.ifl-app .ifl-lim-h i { color: #f0a030; margin-right: 4px; }
.ifl-app .ifl-limits ol { margin: 0; padding-left: 20px; color: #e8f0f7; font-size: .8rem; line-height: 1.55; }
.ifl-app .ifl-limits li { margin-bottom: 3px; }
.ifl-app .ifl-limits b { color: #ffe3b3; font-weight: 600; }

/* ---------- tables ------------------------------------------------------------------------------- */
.ifl-app .ifl-scroll { overflow-x: auto; }
.ifl-app .ifl-table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.ifl-app .ifl-table th { color: #9fb3c8; font-weight: 500; font-size: .64rem; text-transform: uppercase; letter-spacing: .4px;
                         text-align: right; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.1); vertical-align: bottom; }
.ifl-app .ifl-table td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); text-align: right;
                         font-variant-numeric: tabular-nums; color: #e8e8e8; white-space: nowrap; }
.ifl-app .ifl-table th:first-child, .ifl-app .ifl-table td:first-child { text-align: left; }
.ifl-app .ifl-table tbody tr:hover td { background: rgba(255,255,255,0.03); }
.ifl-app .ifl-table td.best { color: #ffd27a; font-weight: 600; }
.ifl-app .ifl-table td.good { color: #7fd6a4; }
.ifl-app .ifl-table td.bad { color: #ff9d94; }
.ifl-app .ifl-table td.dim, .ifl-app .ifl-table tr.dim td { color: #7f93a6; }
.ifl-app .ifl-table tr.own td { background: rgba(240,160,48,0.06); }
.ifl-app .ifl-table tr.own td:first-child { color: #ffe3b3; font-weight: 600; }
.ifl-app .ifl-table tr.grp td { color: #9fb3c8; font-size: .66rem; text-transform: uppercase; letter-spacing: .5px; padding-top: 10px;
                                border-bottom: 1px solid rgba(255,255,255,0.12); text-align: left; background: none; }
.ifl-app .ifl-table.txt th, .ifl-app .ifl-table.txt td { text-align: left; white-space: normal; line-height: 1.45; vertical-align: top; }
.ifl-app .ifl-table.txt td:first-child { color: #cfefff; padding-right: 12px; white-space: nowrap; }
.ifl-app .ifl-table tr.warnrow td { color: #ffe1dd; }
/* the blocks: the figures on one line, the name of a block may wrap, the state always has room for its words */
.ifl-app .ifl-table.ifl-blocks th, .ifl-app .ifl-table.ifl-blocks td { white-space: nowrap; }
.ifl-app .ifl-table.ifl-blocks th:first-child, .ifl-app .ifl-table.ifl-blocks td:first-child { white-space: normal; }
.ifl-app .ifl-table.ifl-blocks th:last-child, .ifl-app .ifl-table.ifl-blocks td:last-child { white-space: normal; min-width: 150px; }
.ifl-app .ifl-table td .pk-chip { margin-left: 5px; }
.ifl-app .ifl-table td:first-child .pk-chip { margin-left: 0; }

/* sortable headers of the chain, the pager */
.ifl-app .ifl-th { background: none; border: none; color: #9fb3c8; font: inherit; text-transform: uppercase; letter-spacing: .4px;
                   padding: 0; cursor: pointer; text-align: right; line-height: 1.3; }
.ifl-app .ifl-chain th:first-child .ifl-th { text-align: left; }
.ifl-app .ifl-th:hover { color: #cfefff; }
.ifl-app .ifl-th.on { color: #f5d6a3; }
.ifl-app .ifl-chain td:nth-child(2), .ifl-app .ifl-chain th:nth-child(2) { color: #cfefff; font-weight: 600; }
.ifl-app .pk-chip.ifl-call { border-color: rgba(63,191,127,0.6); color: #bfe8c4; }
.ifl-app .pk-chip.ifl-put { border-color: rgba(230,103,103,0.6); color: #ffd0cb; }
.ifl-app .pk-chip.ifl-tail { font-size: .58rem; line-height: 1.5; padding: 0 5px; }
.ifl-app .ifl-pager { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ifl-app .ifl-pg { padding: 2px 9px; }
.ifl-app .ifl-pg-t { color: #9fb3c8; font-size: .74rem; font-variant-numeric: tabular-nums; }

/* proposals: a row is a button; the payoff next to its key figures */
.ifl-app .ifl-table tr.ifl-click { cursor: pointer; }
.ifl-app .ifl-table tr.ifl-click:hover td { background: rgba(240,160,48,0.07); }
.ifl-app .ifl-table tr.ifl-click.sel td { background: rgba(240,160,48,0.14); box-shadow: inset 0 1px 0 rgba(240,160,48,0.5), inset 0 -1px 0 rgba(240,160,48,0.5); }
.ifl-app .ifl-trades td { vertical-align: top; padding-top: 5px; padding-bottom: 5px; }
.ifl-app .ifl-trades th:nth-child(2), .ifl-app .ifl-trades td:nth-child(2) { text-align: left; white-space: normal; }
.ifl-app .ifl-tr-s { color: #e8f4ff; font-weight: 600; }
.ifl-app .ifl-tr-l { color: #9fb3c8; font-size: .7rem; line-height: 1.35; }
.ifl-app .ifl-tr-r { color: #9fb3c8; font-size: .68rem; line-height: 1.35; }
.ifl-app .ifl-tr-r.neg { color: #ff9d94; }
.ifl-app .ifl-good { color: #7fd6a4; }
.ifl-app .ifl-th2 { color: #7f93a6; text-transform: none; letter-spacing: 0; font-size: .64rem; }
.ifl-app .ifl-pay { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, 1fr); gap: 14px; align-items: start; }
.ifl-app .ifl-pay-g, .ifl-app .ifl-pay-d { min-width: 0; }
.ifl-app .ifl-kv { width: 100%; border-collapse: collapse; font-size: .76rem; }
.ifl-app .ifl-kv td { padding: 4px 4px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; line-height: 1.4; }
.ifl-app .ifl-kv td:first-child { color: #9fb3c8; padding-right: 10px; width: 44%; }
.ifl-app .ifl-kv td:last-child { color: #e8e8e8; font-variant-numeric: tabular-nums; }

/* features */
.ifl-app .ifl-det { border-bottom: 1px solid rgba(255,255,255,0.06); padding: 5px 0; font-size: .78rem; }
.ifl-app .ifl-det summary { cursor: pointer; color: #dfe7ee; }
.ifl-app .ifl-det summary b { color: #cfefff; font-weight: 600; }
.ifl-app .ifl-det[open] summary { margin-bottom: 6px; }
.ifl-app .ifl-feats { display: flex; flex-wrap: wrap; gap: 4px; }
.ifl-app .ifl-feat { font-size: .68rem; color: #cfdcea; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
                     border-radius: 8px; padding: 0 7px; line-height: 1.7; }
.ifl-app .ifl-feat.low { border-color: rgba(240,160,48,0.5); color: #f5d6a3; }

/* inputs, learning problem, model */
.ifl-app .ifl-det table { margin: 2px 0 6px; }
.ifl-app .ifl-table.ifl-inputs td:first-child { white-space: normal; min-width: 180px; }
.ifl-app .ifl-table.ifl-inputs td:nth-child(2) { white-space: normal; color: #b9c7d5; }
.ifl-app .ifl-table tr.added td { background: rgba(63,191,127,0.06); }
/* the added inputs: a long series name wraps, the forms keep room, the headers stay on one line */
.ifl-app .ifl-table.ifl-added-t th { white-space: nowrap; }
.ifl-app .ifl-table.ifl-added-t td:first-child { white-space: normal; min-width: 220px; max-width: 360px; }
.ifl-app .ifl-table.ifl-added-t td:nth-child(4) { white-space: nowrap; }
.ifl-app .ifl-table.ifl-added-t td:nth-child(5) { min-width: 190px; }
.ifl-app .ifl-table.ifl-added-t td:last-child { min-width: 120px; }
.ifl-app .pk-chip.ifl-added { border-color: rgba(63,191,127,0.6); color: #bfe8c4; font-size: .58rem; line-height: 1.5;
                              padding: 0 5px; margin-left: 6px; }
.ifl-app .ifl-table code, .ifl-app .ifl-kv code { color: #cfdcea; background: rgba(255,255,255,0.05); border-radius: 4px;
                                                  padding: 0 4px; font-size: .7rem; }
.ifl-app .ifl-table.ifl-layers td:nth-child(2) { text-align: left; }
.ifl-app .ifl-say.ifl-again { background: rgba(57,135,229,0.08); border: 1px dashed rgba(57,135,229,0.4); }
.ifl-app .ifl-say.ifl-again i { color: #6da7ec; }
.ifl-app .ifl-code { color: #cfdcea; background: rgba(0,0,0,0.45); border-radius: 8px; padding: 8px 10px; font-size: .7rem;
                     line-height: 1.4; max-height: 420px; overflow: auto; white-space: pre; }
.ifl-app .ifl-goto-studio i { color: #f0a030; margin-right: 3px; }
/* Model screen: where the network is changed (the design, in the Deep Learning Studio) */
.ifl-app .ifl-studio { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 9px 12px; border-radius: 10px;
                       background: rgba(240,160,48,0.06); border: 1px solid rgba(240,160,48,0.35); }
.ifl-app .ifl-studio-i { color: #f0a030; font-size: 1.05rem; flex: 0 0 auto; }
.ifl-app .ifl-studio-b { flex: 1 1 auto; min-width: 0; }
.ifl-app .ifl-studio-t { color: #ffe3b3; font-weight: 600; font-size: .84rem; }
.ifl-app .ifl-studio-s { color: #cfdcea; font-size: .74rem; line-height: 1.45; margin-top: 2px; }
.ifl-app .ifl-studio .ifl-goto-studio { flex: 0 0 auto; white-space: nowrap; }
.ifl-app .ifl-design-note { color: #9fb3c8; }

/* ---------- empty states --------------------------------------------------------------------------- */
.ifl-app .ifl-empty { background: rgba(0,0,0,0.6); border: 1px dashed rgba(255,255,255,0.16); border-radius: 12px;
                      padding: 30px 34px 22px; max-width: 900px; margin: 14px auto; }
.ifl-app .ifl-empty-i { color: #f0a030; font-size: 1.6rem; }
.ifl-app .ifl-empty h4 { color: #cfefff; font-weight: 600; font-size: 1.1rem; margin: 10px 0 4px; }
.ifl-app .ifl-empty p { color: #b9c7d5; font-size: .84rem; line-height: 1.5; margin: 0 0 6px; }
.ifl-app .ifl-hows { margin-top: 12px; }
.ifl-app .ifl-how { display: flex; gap: 10px; align-items: flex-start; margin-top: 9px; font-size: .82rem; line-height: 1.55; color: #dfe7ee; }
.ifl-app .ifl-how b { color: #e8f4ff; }
.ifl-app .ifl-how code { color: #f0a030; background: rgba(255,255,255,0.05); border-radius: 5px; padding: 1px 5px; font-size: .74rem;
                         display: inline-block; max-width: 100%; overflow-wrap: anywhere; vertical-align: top; }
.ifl-app .ifl-step-num { flex: 0 0 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(240,160,48,0.6); color: #f5d6a3;
                         display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 600; }

.ifl-app .ifl-foot { color: #6f8295; font-size: .68rem; line-height: 1.45; margin-top: 12px; padding-top: 8px;
                     border-top: 1px solid rgba(255,255,255,0.06); }
.ifl-app .ifl-foot i { color: #9fb3c8; }

/* ---------- narrow screens ----------------------------------------------------------------------- */
@media (max-width: 1320px) {
  .ifl-app .ifl-grid2 { grid-template-columns: minmax(0, 1fr); }
  .ifl-app .ifl-pay { grid-template-columns: minmax(0, 1fr); }
  .ifl-app .ifl-pipe { gap: 5px; }
  .ifl-app .ifl-step { min-width: 0; padding: 5px 7px 6px; }
  .ifl-app .ifl-step-a { display: none; }
  .ifl-app .ifl-step-n { font-size: .78rem; }
  .ifl-app .ifl-kind { font-size: .56rem; padding: 0 5px; }
  .ifl-app .ifl-kpis .pk-kv { font-size: 1rem; }
  .ifl-app .ifl-table th, .ifl-app .ifl-table td { padding-left: 4px; padding-right: 4px; }
}
@media (max-width: 1500px) {
  .ifl-app .ifl-step-a { display: none; }
}
@media (max-width: 900px) {
  .ifl-app .ifl-pipe { flex-wrap: wrap; }
  .ifl-app .ifl-step { flex: 1 1 22%; }
}
@media (max-width: 1000px) {
  .ifl-app .ifl-main { grid-template-columns: minmax(0, 1fr); }
  .ifl-app .ifl-top { padding-right: 120px; }
}
@media (max-width: 640px) {
  .ifl-app .ifl-studio { flex-wrap: wrap; }
  .ifl-app .ifl-studio .ifl-goto-studio { white-space: normal; }
  .ifl-app .ifl-top { padding-right: 0; padding-top: 34px; }
  .ifl-app .ifl-brand > div { display: none; }
  .ifl-app .ifl-tabs { gap: 4px 14px; }
  .ifl-app .ifl-tabs label { font-size: .88rem; }
  .ifl-app .ifl-bar .ifl-dd, .ifl-app .ifl-bar .ifl-dd.wide { min-width: 0; width: 100%; }
  .ifl-app .ifl-bar > .ifl-bg { flex: 1 1 100%; }
  .ifl-app .ifl-kpis .pk-kpi { flex: 1 1 45%; }
  .ifl-app .ifl-step { flex: 1 1 30%; min-width: 0; padding: 4px 6px 5px; }
  .ifl-app .ifl-step-s { font-size: .62rem; }
}