:root{color-scheme:dark;--bg:#151719;--panel:#202326;--panel2:#292c30;--line:#3e4248;--text:#f4f5f7;--muted:#9ba1a9;--green:#32d13b;--red:#ff3131;--cyan:#48e9f0;--blue:#5a8cbe;--purple:#8269af;--orange:#d5a341}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:12px "Segoe UI",Arial,sans-serif}.app-shell{max-width:1920px;margin:auto;padding:10px 14px 18px}.topbar{display:flex;align-items:center;gap:18px;min-height:43px;padding:0 10px;background:var(--panel);border:1px solid var(--line)}.brand{display:flex;gap:8px;align-items:center;letter-spacing:.3px}.brand-mark{display:grid;place-items:center;width:22px;height:22px;background:#e94a27;color:#fff;font-weight:800}.brand small{display:block;color:var(--muted);font-size:9px}.connection{display:flex;align-items:center;gap:7px;color:var(--muted);margin-left:auto}.connection i{width:7px;height:7px;border-radius:50%;background:#e3a22c}.connection.online i{background:var(--green)}.connection.offline i{background:var(--red)}time{font-variant-numeric:tabular-nums;color:var(--text);font-weight:700}button{border:1px solid #4e535a;background:#30343a;color:var(--text);padding:6px 10px;font:inherit;font-weight:700;cursor:pointer}button:hover{background:#40464d}.flow-strip{display:grid;grid-template-columns:minmax(230px,1fr) minmax(230px,1fr) auto;gap:8px;margin:9px 0}.flow-card{background:var(--panel);border:1px solid var(--line);padding:7px 10px}.flow-card>div:first-child{display:flex;justify-content:space-between;align-items:baseline}.flow-card span{font-size:10px;font-weight:800;color:var(--muted)}.flow-card strong{font-size:17px}.flow-card p{margin:3px 0 6px;font-size:10px;color:var(--muted)}.flow-range,.range-line{position:relative;height:5px;background:#777b81}.flow-range i{position:absolute;top:-3px;bottom:-3px;left:50%;width:1px;background:#aaa}.flow-range b{position:absolute;top:-3px;height:11px;background:var(--green);left:50%;width:0}.flow-range b.negative,.range-line b.negative{background:var(--red);right:50%;left:auto}.flow-note{display:grid;place-items:center;color:var(--muted);font-size:10px;padding:0 12px}.tools{display:flex;align-items:center;gap:7px;padding:7px 0}.search{display:flex;align-items:center;gap:6px;min-width:230px;padding:5px 8px;background:var(--panel);border:1px solid var(--line);color:var(--muted)}.search input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--text);font:inherit}.menu-anchor{position:relative}.popover{position:absolute;z-index:50;right:0;top:calc(100% + 4px);min-width:220px;padding:6px;background:#25282c;border:1px solid #59616b;box-shadow:0 8px 25px #000a}.popover button{display:block;width:100%;border:0;background:transparent;text-align:left;font-size:11px}.popover button:hover{background:#464b52}.dashboard{--masonry-row:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:var(--masonry-row);grid-auto-flow:row dense;gap:10px;align-items:start}.market-panel{min-width:0;overflow:hidden;align-self:start;border:1px solid #53687f;border-radius:4px;background:#181a1c}.market-panel.wide{grid-column:span 2}.panel-header{display:flex;align-items:center;height:29px;padding:0 7px;background:#303338;border-bottom:1px solid #42464d;cursor:grab;user-select:none}.panel-header:active{cursor:grabbing}.drag-handle{color:#99a2ad;font-size:15px;letter-spacing:-4px;margin-right:8px}.panel-header h2{margin:0;font-size:10px;letter-spacing:.2px}.panel-actions{display:flex;gap:3px;margin-left:auto}.panel-actions button{width:22px;height:21px;padding:0;border:0;background:transparent;color:#c8cdd2;font-size:14px}.panel-actions button:hover{background:#464b52}.panel-actions .panel-options{font-size:17px}.panel-content{overflow:auto}.grid-head,.asset-row{display:grid;min-width:max-content;align-items:center}.grid-head{height:25px;background:var(--panel2);font-size:9px;font-weight:800;white-space:nowrap}.column-header{position:relative;height:25px;padding:7px 8px 0;overflow:hidden;text-overflow:ellipsis;cursor:grab;user-select:none;border-right:1px solid #3a3e43}.column-header:active{cursor:grabbing}.column-header.column-dragging{opacity:.45}.column-header.column-drop-target{box-shadow:inset 3px 0 #6d9ed0}.resize-handle{position:absolute;z-index:2;top:0;right:-3px;width:7px;height:100%;cursor:col-resize}.resize-handle:hover{background:#6d9ed0}.asset-row{height:24px;background:#1c1e20;border-top:1px solid #2d3034;font-variant-numeric:tabular-nums}.asset-row:nth-child(even){background:#232527}.cell{min-width:0;padding:0 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:right}.cell.symbol{display:flex;gap:6px;align-items:center;text-align:left;font-weight:400}.stripe{width:3px;align-self:stretch;background:#53606d;margin-left:-8px}.asset-row.leader .stripe{background:var(--blue)}.asset-row.semi .stripe{background:var(--purple)}.asset-row.sector .stripe{background:var(--orange)}.positive{color:var(--green);font-weight:800}.negative{color:var(--red);font-weight:800}.cell.range{display:flex;gap:7px;align-items:center;text-align:left}.range-line{flex:1;height:3px;background:#83878d}.range-line b{position:absolute;top:-3px;height:9px;background:var(--green);left:50%;width:0}.range-line i{position:absolute;top:-3px;width:2px;height:9px;background:var(--cyan);z-index:2}.range-line .open-mark{background:#d4d445}.range span{font-size:10px;color:var(--muted);width:28px;text-align:right}.cell.description{text-align:left;color:#e4e6e8}.market-panel.collapsed .panel-content{display:none}.market-panel.dragging{opacity:.45}.market-panel.drop-target{outline:2px solid #6d9ed0;outline-offset:2px}.panel-menu{top:25px;right:0}.column-options{display:grid;gap:3px;margin-bottom:5px;padding:3px 4px 6px;border-bottom:1px solid #474c52}.column-options strong{font-size:10px;color:var(--muted);margin-bottom:2px}.column-options label{cursor:pointer;font-size:11px;white-space:nowrap}.loading,.empty{padding:28px;text-align:center;color:var(--muted)}
@media(max-width:1100px){.dashboard{grid-template-columns:1fr}.market-panel.wide{grid-column:span 1}}
@media(max-width:760px){body{font-size:13px}.app-shell{padding:0}.topbar{min-height:52px;border-left:0;border-right:0;padding:0 12px}.brand small,.connection span,.flow-note{display:none}.connection{margin-left:auto}.flow-strip{grid-template-columns:1fr 1fr;gap:5px;margin:5px 7px}.flow-card{padding:7px}.flow-card strong{font-size:15px}.tools{padding:5px 7px;gap:5px;align-items:stretch;flex-wrap:wrap}.search{width:100%;min-height:34px}.tools button{min-height:32px}.dashboard{gap:6px}.market-panel{border-left:0;border-right:0;border-radius:0}.panel-header{height:32px}.asset-row{height:38px}.grid-head{height:28px}.column-header{height:28px;padding-top:8px}.popover{position:fixed;left:7px;right:7px;top:132px;max-height:70vh;overflow:auto}.panel-menu{position:absolute;left:auto;right:0;top:27px;min-width:205px}.cell.range{padding-right:5px}.cell.description{white-space:normal}.range span{display:none}}

/* Resize manual: os handles só ficam perceptíveis ao apontar para o quadro. */
.tools{padding:7px 0 4px}.flow-strip{margin:0 0 8px}
.freeze-status{padding:3px 6px;border:1px solid #6d5d2b;background:#3a3321;color:#f0d77a;font-size:10px;font-weight:800;font-variant-numeric:tabular-nums}
.session-controls{display:flex;align-items:center;gap:3px;white-space:nowrap}.session-icon{width:25px;height:25px;padding:0;border-color:#4e535a;font-size:13px;line-height:1}.session-icon.active{color:#ff7777;background:#492b2b;border-color:#a55353}.session-menu{width:300px;padding:9px}.session-menu label{display:grid;gap:3px;margin-bottom:8px;color:var(--muted);font-size:10px}.session-menu input{width:100%;padding:5px;border:1px solid #51565d;background:#191b1d;color:var(--text);font:inherit}.session-menu .session-details{margin-top:7px;color:var(--muted);font-size:10px;line-height:1.5;word-break:break-word}.session-menu .session-actions{display:flex;justify-content:flex-end;gap:5px}@media(max-width:760px){.session-controls{gap:2px}.session-icon{width:23px;height:23px}}
.session-icon.bridge-toggle{color:#8f98a3}.session-icon.bridge-toggle.active{color:#5be46a;background:#203d27;border-color:#4d9859}.session-icon.bridge-toggle.fallback{color:#f0d77a;background:#3a3321;border-color:#8b7735}.session-icon.bridge-toggle:disabled{opacity:.5;cursor:wait}
.context-note{align-self:center;color:var(--muted);font-size:10px;white-space:nowrap}.flow-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.flow-card{min-width:0}@media(max-width:760px){.context-note{white-space:normal;flex-basis:100%}.flow-strip{grid-template-columns:1fr;gap:5px;margin:0 7px 6px}}
.market-panel{position:relative}.market-panel.has-manual-height .panel-content{height:calc(100% - 29px);overflow:auto}.panel-resize{position:absolute;z-index:6;opacity:0;transition:opacity .12s}.market-panel:hover .panel-resize,.market-panel.resizing .panel-resize{opacity:1}.panel-resize-e{top:29px;right:0;bottom:13px;width:7px;cursor:ew-resize}.panel-resize-s{left:0;right:13px;bottom:0;height:7px;cursor:ns-resize}.panel-resize-se{right:1px;bottom:1px;width:12px;height:12px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 48%,#89919a 49%,#89919a 57%,transparent 58%)}.market-panel.resizing{user-select:none}.market-panel.resizing .panel-header{cursor:default}@media(max-width:760px){.market-panel{width:100%!important}.panel-resize{display:none}.market-panel.has-manual-height .panel-content{height:calc(100% - 32px)}}

/* Uma única medida alinha o divisor dos flows ao divisor do dashboard. */
:root{--dashboard-gap:10px}.dashboard{gap:var(--dashboard-gap)}.flow-strip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:var(--dashboard-gap)}.flow-card{position:relative;min-width:250px;min-height:58px;overflow:hidden}.flow-resize{position:absolute;z-index:6;opacity:0;transition:opacity .12s}.flow-card:hover .flow-resize,.flow-card.resizing .flow-resize{opacity:1}.flow-resize-e{top:0;right:0;bottom:13px;width:7px;cursor:ew-resize}.flow-resize-s{left:0;right:13px;bottom:0;height:7px;cursor:ns-resize}.flow-resize-se{right:1px;bottom:1px;width:12px;height:12px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 48%,#89919a 49%,#89919a 57%,transparent 58%)}.flow-card.resizing{user-select:none}@media(max-width:760px){.flow-strip,.dashboard{display:grid;grid-template-columns:1fr!important}.flow-card{width:100%!important}.flow-resize{display:none}}

/* Controles integram o cabeçalho e não ocupam mais uma faixa própria. */
.topbar{gap:10px}.topbar .tools{flex:1 1 auto;min-width:0;padding:0;display:flex;align-items:center;gap:6px;flex-wrap:nowrap}.topbar .search{min-width:180px;width:210px}.topbar .context-note{overflow:hidden;text-overflow:ellipsis}.topbar .connection{margin-left:auto;white-space:nowrap}@media(max-width:1100px){.topbar{flex-wrap:wrap;padding:5px 10px}.topbar .tools{order:4;flex-basis:100%}.topbar .context-note{flex:1 1 auto}}@media(max-width:760px){.topbar .tools{padding:0;align-items:center}.topbar .search{width:100%;min-height:32px}.topbar .context-note{display:none}}

/* Respiro entre cabeçalho e flows; menu de quadro não é cortado pelo container. */
.flow-strip{margin:8px 0}.market-panel.menu-open{overflow:visible;z-index:20}

/* Range compartilhado: a trilha nunca depende da largura de cada quadro. */
:root{--range-track-width:440px;--range-percent-width:28px}
.cell.range{gap:7px}.cell.range .range-line{flex:0 0 var(--range-track-width);width:var(--range-track-width)}
.range span{width:var(--range-percent-width)}
.panel-header h2,.grid-head,.macro-section,.flow-card span,.flow-card p,button,.context-note{text-transform:uppercase}
.cell.description{text-transform:uppercase}
.macro-section{display:grid;min-width:max-content;height:22px;align-items:center;background:#303338;border-top:1px solid #4a4f56;border-bottom:1px solid #383c42;color:#c9d0d8;font-size:10px;font-weight:800}
.macro-section strong{grid-column:1/-1;padding:0 8px}
@media(max-width:760px){:root{--range-track-width:300px}}

/* Um único espaçamento vertical e horizontal para todas as faixas do dashboard. */
:root{--panorama-gap:8px;--dashboard-gap:var(--panorama-gap)}
.flow-strip{margin:var(--panorama-gap) 0;gap:var(--panorama-gap)}
.dashboard{gap:var(--panorama-gap)}
.cell.symbol,.cell.description{text-transform:uppercase}

/* Malha única: o gap externo vem apenas do container principal. */
.app-shell{display:flex;flex-direction:column;gap:var(--panorama-gap)}
.flow-strip{margin:0}
.dashboard{--masonry-row:1px;column-gap:var(--panorama-gap);row-gap:var(--panorama-gap)}

/* O seletor dos botões do cabeçalho não pode comprimir os comandos do popover. */
.panel-menu{min-width:260px;max-height:min(70vh,520px);overflow-y:auto}
.panel-menu:not([hidden]){display:flex;flex-direction:column}
.panel-actions .panel-menu button{display:block;flex:0 0 auto;width:100%;height:auto;min-height:26px;padding:6px 8px;line-height:1.25;white-space:normal;text-align:left;font-size:11px}
.panel-menu .column-options{display:flex;flex-direction:column;gap:4px;margin:0 0 5px;padding:4px 5px 7px;line-height:1.3}
.panel-menu .column-options label{display:block;min-height:18px;line-height:18px;white-space:normal}

/* Modo congelado: dados e cálculos idênticos; somente a apresentação fica densa. */
:root{--frozen-snapshot-range-track-width:79px;--frozen-current-range-track-width:189px;--frozen-cell-padding-x:4px}
.market-panel.frozen-mode .cell{padding-left:var(--frozen-cell-padding-x);padding-right:var(--frozen-cell-padding-x)}
.market-panel.frozen-mode .cell.snapshotPrice,.market-panel.frozen-mode .cell.price,.market-panel.frozen-mode .cell.snapshotChange,.market-panel.frozen-mode .cell.change{font-size:11px;text-overflow:clip}
.market-panel.frozen-mode .column-header{padding-left:var(--frozen-cell-padding-x);padding-right:var(--frozen-cell-padding-x)}
.market-panel.frozen-mode .stripe{margin-left:calc(-1 * var(--frozen-cell-padding-x))}
/* No congelamento o trilho ocupa todo o espaço que sobra após seta e percentual.
   Assim, o resize manual da coluna redimensiona a barra e os marcadores continuam
   percentuais dentro dela, sem usar uma largura fixa em pixels. */
.market-panel.frozen-mode .cell.range .range-line{flex:1 1 auto;width:auto;min-width:0}

/* Layout padrão: duas pilhas autônomas e um único espaçamento externo. */
:root{--dashboard-gap:8px}
.dashboard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"left right" "asia asia";grid-auto-flow:row;grid-auto-rows:auto;gap:var(--dashboard-gap);align-items:start}
.dashboard-column{display:flex;min-width:0;flex-direction:column;gap:var(--dashboard-gap);align-items:stretch}
.dashboard-column[data-column="left"]{grid-area:left}.dashboard-column[data-column="right"]{grid-area:right}.market-panel[data-id="asia"]{grid-area:asia;grid-column:1/-1;position:relative;width:100%}
.dashboard-column>.market-panel{width:100%;margin:0;grid-column:auto;grid-row:auto}
.dashboard-column>.market-panel.wide{grid-column:auto}
@media(max-width:1100px){.dashboard{grid-template-columns:1fr;grid-template-areas:"left" "right" "asia"}.dashboard-column{gap:var(--dashboard-gap)}}

/* Janela de eventos e direção calculada exclusivamente pela API. */
#events-window{height:28px;border:1px solid #4e535a;background:#30343a;color:var(--text);padding:3px 7px;font:inherit;font-weight:700;text-transform:uppercase}
.context-arrow{width:11px;font-style:normal;font-size:10px;font-weight:900;text-align:center}.context-arrow.up{color:var(--green)}.context-arrow.down{color:var(--red)}.context-arrow.neutral{color:var(--muted)}.context-arrow.warming{color:var(--muted)}

/* Hierarquia comum dos quadros: somente apresentação, sem alterar o grid. */
:root{--panel-header-height:34px;--panel-header-bg:#2a3037;--panel-header-border:#657384;--panel-frame:#617286;--panel-title:#f5f7fa}
.market-panel{border-color:var(--panel-frame)}
.panel-header{height:var(--panel-header-height);padding:0 9px;background:var(--panel-header-bg);border-bottom:1px solid var(--panel-header-border);box-shadow:inset 4px 0 var(--panel-accent,#6e91b5)}
.panel-header h2{font-size:12px;font-weight:800;letter-spacing:.35px;color:var(--panel-title)}
.drag-handle{margin-right:9px;color:#b5c0cc;font-size:16px}
.market-panel.drop-target{outline:1px solid #6d9ed0;outline-offset:2px}
.market-panel.drop-before{box-shadow:0 -4px 0 #71b6ef}
.market-panel.drop-after{box-shadow:0 4px 0 #71b6ef}
.panel-actions{gap:4px;align-items:center}
.panel-actions button{width:24px;height:24px;border:1px solid transparent;border-radius:2px;color:#d9e0e8;line-height:1}
.panel-actions button:hover{background:#414a54;border-color:#647184;color:#fff}
.market-panel[data-id="leaders"]{--panel-accent:#55a4df}
.market-panel[data-id="semis"]{--panel-accent:#a077d1}
.market-panel[data-id="sectors"]{--panel-accent:#d1a354}
.market-panel[data-id="america"],.market-panel[data-id="europe"],.market-panel[data-id="asia"]{--panel-accent:#739cc3}
.market-panel[data-id="macro"]{--panel-accent:#ca8a55}
.macro-section{height:21px;background:#303840;border-top-color:#596675;border-bottom-color:#46515e;box-shadow:inset 3px 0 #ca8a55;color:#e1e7ed;font-size:10px;font-weight:800;letter-spacing:.22px}
.macro-section strong{grid-column:1/-1;grid-row:1;padding-left:30px;pointer-events:none}
.macro-section-toggle{grid-column:1;grid-row:1;z-index:1;justify-self:start;width:19px;height:18px;margin-left:5px;padding:0;border:0;background:transparent;color:#d8e1ea;font:inherit;font-size:14px;font-weight:800;line-height:16px;text-align:center}
.macro-section-toggle:hover{background:#46515e;color:#fff}
.macro-section-toggle:focus-visible,.macro-toggle-all:focus-visible{outline:1px solid #88bce9;outline-offset:1px}
.macro-row-toggle{flex:0 0 16px;width:16px;height:16px;margin-left:-2px;padding:0;border:0;background:transparent;color:#cbd5df;font:inherit;font-size:14px;font-weight:800;line-height:14px;text-align:center}
.macro-row-toggle:hover{background:#39424c;color:#fff}.macro-row-toggle:focus-visible{outline:1px solid #88bce9;outline-offset:1px}
.macro-panel-actions{display:flex;flex-direction:column;margin:0 0 5px;padding:3px 4px 6px;border-bottom:1px solid #474c52}
.market-panel[data-id="macro"]:not(.has-manual-height) .panel-content{overflow:auto}
.market-panel[data-id="macro"] .panel-resize-s,.market-panel[data-id="macro"] .panel-resize-se{display:none}
.market-panel.has-manual-height .panel-content{height:calc(100% - var(--panel-header-height))}
.panel-resize-e{top:var(--panel-header-height)}
@media(max-width:760px){:root{--panel-header-height:34px}.market-panel.has-manual-height .panel-content{height:calc(100% - var(--panel-header-height))}}

/* Flow unificado: AGORA é a microtendência; DIA é o estado acumulado. */
.flow-card{min-height:82px;padding:6px 10px}
.flow-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.flow-title span{font-size:10px;font-weight:800;color:var(--muted)}
.flow-reading{display:grid;grid-template-columns:38px 58px 14px minmax(0,1fr);gap:5px;align-items:center}
.flow-reading>span{font-size:9px;font-weight:800;color:var(--muted)}
.flow-reading strong{font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.flow-reading .flow-range{grid-column:4;height:4px}
.flow-reading.now .flow-range b{top:-3px;height:10px}
.flow-reading.day{grid-template-columns:38px 58px minmax(0,1fr);margin-top:2px;opacity:.72}
.flow-reading.day .flow-range{grid-column:3;height:3px}
.flow-reading.day .flow-range b{top:-2px;height:7px}
.flow-card p{margin:0 0 1px 38px;font-size:9px;line-height:1.1}
.flow-arrow{font-style:normal;font-size:11px;font-weight:900;text-align:center}
.flow-arrow.up{color:var(--green)}.flow-arrow.down{color:var(--red)}.flow-arrow.neutral{color:var(--muted)}
@media(max-width:760px){.flow-card{min-height:86px}.flow-reading{grid-template-columns:34px 54px 14px minmax(0,1fr)}}

/* Cartões de Flow: leitura AGORA prioritária e DIA secundário, sem texto de warm-up. */
.flow-card{min-height:68px;padding:4px 9px}
.flow-title{display:none}
.flow-card[data-flow="nq"] .flow-reading.now>span,.flow-card[data-flow="sm"] .flow-reading.now>span{font-size:0}
.flow-card[data-flow="nq"] .flow-reading.now>span::after,.flow-card[data-flow="sm"] .flow-reading.now>span::after{font-size:9px}
.flow-card[data-flow="nq"] .flow-reading.now>span::after{content:"NQ Flow"}
.flow-card[data-flow="sm"] .flow-reading.now>span::after{content:"SM Flow"}
.flow-reading.day>span{font-size:0}
.flow-reading.day>span::after{content:"Contexto";font-size:9px}
.flow-reading{grid-template-columns:34px 62px 12px minmax(0,1fr);gap:4px}
.flow-reading>span{text-transform:none;font-size:9px;font-weight:700}
.flow-reading strong{font-size:13px;justify-self:end}
.flow-reading.now .flow-range{height:4px}
.flow-reading.now .flow-range b{height:10px}
.flow-reading.day{grid-template-columns:34px 62px minmax(0,1fr);margin-top:1px;opacity:.72}
.flow-reading.day .flow-range{height:2px}
.flow-reading.day .flow-range b{height:6px}
.flow-card p[hidden]{display:none}
.flow-arrow{font-size:10px}.flow-arrow.warming{color:var(--muted)}
@media(max-width:760px){.flow-card{min-height:68px;padding:4px 7px}.flow-reading{grid-template-columns:32px 58px 12px minmax(0,1fr)}}

/* Estrutura final: duas linhas iguais, indicador do Flow no fim da trilha. */
.flow-card{min-height:58px;padding:3px 9px}
.flow-reading,.flow-reading.day{grid-template-columns:66px 62px minmax(0,1fr) 12px;gap:5px;margin-top:0;min-height:23px;opacity:1}
.flow-reading>span,.flow-reading.day>span{grid-column:1;font-size:9px;font-weight:700}
.flow-reading strong{grid-column:2;font-size:13px}
.flow-reading .flow-range,.flow-reading.day .flow-range{grid-column:3;height:4px}
.flow-reading.now .flow-range b,.flow-reading.day .flow-range b{top:-3px;height:10px}
.flow-reading.now .flow-arrow{grid-column:4;grid-row:1;justify-self:center}
.flow-reading.day::after{content:"";grid-column:4;grid-row:1}
.flow-arrow{font-size:10px;line-height:1}.flow-arrow.warming{visibility:hidden}
@media(max-width:760px){.flow-card{min-height:58px;padding:3px 7px}.flow-reading,.flow-reading.day{grid-template-columns:62px 58px minmax(0,1fr) 12px;gap:4px}}

/* Ordem idêntica à coluna de range dos grids: barra, indicador, percentual. */
.flow-reading,.flow-reading.day{grid-template-columns:66px minmax(0,1fr) 12px 62px}
.flow-reading>span,.flow-reading.day>span{font-size:9px}
.flow-card[data-flow] .flow-reading.now>span,.flow-reading.day>span{font-size:9px}
.flow-card[data-flow] .flow-reading.now>span::after,.flow-reading.day>span::after{content:none}
.flow-reading .flow-range,.flow-reading.day .flow-range{grid-column:2}
.flow-reading.now .flow-arrow{grid-column:3;grid-row:1}
.flow-reading strong{grid-column:4;justify-self:end}
.flow-reading.day::after{grid-column:3;grid-row:1}
@media(max-width:760px){.flow-reading,.flow-reading.day{grid-template-columns:62px minmax(0,1fr) 12px 58px}}

/* Flow and Context share the same signed track and fill geometry. */
.flow-reading.now .flow-range,.flow-reading.day .flow-range{position:relative;height:4px;background:#777b81}
.flow-reading.now .flow-range i,.flow-reading.day .flow-range i{position:absolute;top:-3px;bottom:-3px;left:50%;width:1px;background:#aaa}
.flow-reading.now .flow-range b,.flow-reading.day .flow-range b{position:absolute;top:-3px;height:10px;background:var(--green);left:50%;width:0}
.flow-reading.now .flow-range b.negative,.flow-reading.day .flow-range b.negative{background:var(--red);right:50%;left:auto}
/* A primeira linha é o primeiro div do card após o título ser removido no JS.
   Reafirma grid para impedir que a regra legada do card a transforme em flex. */
.flow-card>.flow-reading.now{display:grid}

/* Horário individual da última atualização informada pelo provedor. */
.cell.updated{text-align:center;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}
.cell.updated.stale{color:var(--orange)}

/* Flash direcional no fundo da cotacao a cada mudanca real de preco. */
@keyframes price-flash-up{0%,50%{background:#187a35;color:#fff}100%{background:transparent;color:#fff}}
@keyframes price-flash-down{0%,50%{background:#9a2020;color:#fff}100%{background:transparent;color:#fff}}
.cell.price.price-flash-up{animation:price-flash-up 1s linear}
.cell.price.price-flash-down{animation:price-flash-down 1s linear}
@media(prefers-reduced-motion:reduce){.cell.price.price-flash-up,.cell.price.price-flash-down{animation-duration:1s}}
/* Variation values keep their direction colors without bold weight. */
.asset-row .cell.change,.asset-row .cell.snapshotChange{font-family:"Segoe UI",Arial,sans-serif;font-style:normal;font-weight:400!important;line-height:normal;letter-spacing:normal}
/* Estado de transporte: discreto, sem influenciar leituras financeiras. */
.connection.connecting i{background:#e3a22c}.connection.degraded i{background:#d5a341}.connection.resyncing i{background:#48e9f0}.connection.stale i{background:#d5a341}.connection.offline i{background:#ff3131}.connection.degraded,.connection.resyncing,.connection.stale{color:#d6dbe0}

/* Camada responsiva 2026: preserva a densidade no desktop e reorganiza a
   leitura para tablet e celular sem criar rolagem horizontal na pagina. */
:root{--bg:#0d1117;--panel:#151b23;--panel2:#1c2530;--line:#314052;--text:#f5f7fa;--muted:#96a2b1;--green:#39d353;--red:#ff4d57;--cyan:#55dce7}
html{background:var(--bg);scrollbar-gutter:stable}body{min-width:0;overflow-x:hidden;background:radial-gradient(circle at 50% -20%,#1b2838 0,#0d1117 42%,#0d1117 100%)}
.app-shell{width:100%;max-width:1800px;padding:12px 16px 24px}
.topbar{position:sticky;top:0;z-index:40;min-width:0;border-color:#35465a;border-radius:8px;background:rgba(21,27,35,.96);box-shadow:0 8px 28px #0005;backdrop-filter:blur(14px)}
.brand-mark{border-radius:5px;box-shadow:0 0 0 1px #ff795c55}.connection i{box-shadow:0 0 0 3px #ffffff0b}
button,#events-window,.search{border-radius:6px;transition:border-color .15s ease,background .15s ease,transform .15s ease}button:hover{border-color:#718398}button:active{transform:translateY(1px)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #62b5f5;outline-offset:2px}
.flow-card,.market-panel{border-color:#3b4c60;border-radius:8px;box-shadow:0 8px 24px #0003}
.flow-card{background:linear-gradient(180deg,#18202a,#131920)}
.panel-header{background:linear-gradient(180deg,#263342,#202a36);border-bottom-color:#44566b}
.panel-content{max-width:100%;overscroll-behavior-inline:contain;contain:paint;isolation:isolate}
.asset-row:nth-child(odd){background:#121820}.asset-row:nth-child(even){background:#18202a}.asset-row:hover{background:#202b38}
.grid-head{background:#202a36}.popover{border-radius:8px;background:#1b242f;border-color:#4b6078}

@media(max-width:1100px){
  .app-shell{max-width:100%;padding:10px}
  .topbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"brand connection sessions refresh" "tools tools tools tools";gap:8px 10px;padding:8px 10px}
  .brand{grid-area:brand}.connection{grid-area:connection;justify-self:end;margin-left:0}.session-controls{grid-area:sessions}.topbar>#refresh-button{grid-area:refresh}
  .topbar .tools{grid-area:tools;order:initial;width:100%;padding:0;display:flex;flex-wrap:nowrap}
  .topbar .search{width:auto;min-width:220px;flex:1 1 360px}
  .topbar .context-note{flex:0 1 auto}
  .dashboard{grid-template-columns:1fr!important;grid-template-areas:"left" "right" "asia"!important}
  .dashboard-column,.dashboard-column>.market-panel,.market-panel[data-id="asia"]{width:100%!important;max-width:100%;min-width:0}
  .market-panel:not(.frozen-mode) .grid-head,.market-panel:not(.frozen-mode) .asset-row{width:100%;min-width:0}
  .market-panel:not(.frozen-mode) .resize-handle,.panel-resize,.flow-resize{display:none}
  .panel-wide{display:none}
}

@media(max-width:760px){
  html{scrollbar-gutter:auto}body{font-size:12px;background:#0d1117}
  .app-shell{gap:7px;padding:0 6px 16px;padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right))}
  .topbar{position:relative;top:auto;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand connection" "sessions refresh" "tools tools";gap:7px 8px;margin:0 -6px;padding:8px max(8px,env(safe-area-inset-right)) 9px max(8px,env(safe-area-inset-left));border-top:0;border-left:0;border-right:0;border-radius:0;box-shadow:0 5px 18px #0005;backdrop-filter:none}
  .brand{min-width:0}.brand strong{font-size:12px}.brand small{display:none}.brand-mark{width:28px;height:28px}
  .connection{min-width:0}.connection span{display:none}.connection time{font-size:11px}
  .session-controls{gap:6px}.session-icon{width:40px;height:40px;font-size:16px;border-radius:7px}
  .topbar>#refresh-button{min-width:94px;min-height:40px;padding:8px 12px}
  .topbar .tools{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap}
  .topbar .search{order:-1;flex:1 0 100%;width:100%;min-width:0;min-height:42px;padding:8px 10px}
  .topbar .tools>select{flex:1 1 104px;min-width:100px;height:40px}
  .topbar .tools>button,.topbar .tools>.menu-anchor>button{min-height:40px;padding:8px 10px}
  .topbar .tools>.menu-anchor{flex:0 0 auto}.topbar .context-note{display:none}
  .flow-strip{gap:7px!important;margin:0}.flow-card{width:100%!important;min-width:0;min-height:66px;padding:6px 9px;border-radius:7px}
  .flow-reading,.flow-reading.day{grid-template-columns:60px minmax(0,1fr) 12px 58px;min-height:25px}
  .dashboard,.dashboard-column{gap:7px}
  .market-panel{width:100%!important;max-width:100%;border-left:1px solid #3b4c60;border-right:1px solid #3b4c60;border-radius:7px}
  .panel-header{height:44px;padding:0 7px}.panel-header h2{font-size:11px}.drag-handle{display:none}.panel-actions{gap:2px}.panel-actions button{width:40px;height:40px;font-size:16px}
  .market-panel.has-manual-height .panel-content{height:calc(100% - 44px)}
  .grid-head{height:34px;font-size:8px}.column-header{height:34px;padding:11px 5px 0}.asset-row{height:42px;font-size:11px}.cell{padding:0 6px}.stripe{margin-left:-6px}
  .cell.range{gap:4px;padding-right:6px}.range span{display:none}.context-arrow{width:10px}
  .popover,.panel-menu,.session-menu{position:fixed;z-index:100;left:8px;right:8px;top:auto;bottom:max(8px,env(safe-area-inset-bottom));width:auto;min-width:0;max-height:72dvh;padding:10px;overflow:auto;border-radius:12px;box-shadow:0 16px 50px #000c}
  .popover button,.panel-actions .panel-menu button{min-height:44px;padding:10px 12px;font-size:12px}
  .column-options label{min-height:36px;display:flex;align-items:center;gap:8px}.column-options input{width:18px;height:18px}
}

@media(max-width:420px){
  .app-shell{padding-left:4px;padding-right:4px}.topbar{margin-left:-4px;margin-right:-4px}
  .session-controls{gap:4px}.session-icon{width:38px;height:38px}.topbar>#refresh-button{min-width:88px;height:38px}
  .topbar .tools>button,.topbar .tools>.menu-anchor>button{padding-left:8px;padding-right:8px}
  .flow-reading,.flow-reading.day{grid-template-columns:56px minmax(0,1fr) 10px 54px;gap:4px}
  .panel-header h2{max-width:calc(100% - 88px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* Tablets menores mantêm as quatro informações prioritárias na mesma linha,
   com a mesma densidade vertical adotada no restante do modo tablet. */
@media(min-width:521px) and (max-width:760px){
  .market-panel .panel-header{height:38px;min-height:38px}
  .market-panel .panel-actions button{width:34px;height:34px}
  .market-panel.has-manual-height .panel-content{height:calc(100% - 38px)}
  .market-panel .grid-head{height:24px}
  .market-panel .column-header{height:24px;padding-top:6px}
  .market-panel .asset-row{height:28px}
}

/* No celular, os três números ficam na primeira linha e o Range Atual ganha
   uma segunda linha inteira. Assim nenhuma informação prioritária é cortada. */
@media(max-width:520px){
  .market-panel .grid-head,.market-panel .asset-row{width:100%;min-width:0;grid-template-columns:minmax(0,1fr) 82px 72px!important;grid-template-areas:"symbol price change" "range range range"}
  .market-panel .panel-header{height:38px;min-height:38px}
  .market-panel .panel-actions button{width:34px;height:34px}
  .market-panel.has-manual-height .panel-content{height:calc(100% - 38px)}
  .market-panel .grid-head{height:40px;grid-template-rows:21px 19px}
  .market-panel .asset-row{height:42px;grid-template-rows:20px 22px}
  .market-panel [data-column="symbol"]{grid-area:symbol}.market-panel [data-column="price"]{grid-area:price}.market-panel [data-column="change"]{grid-area:change}.market-panel [data-column="range"]{grid-area:range}
  .market-panel .column-header{height:21px;padding:5px 5px 0;font-size:8px}
  .market-panel .column-header[data-column="range"]{height:19px;padding-top:4px;border-top:1px solid #35465a;border-right:0;color:#b7c6d8}
  .market-panel .cell{padding-left:6px;padding-right:6px;font-size:11px}
  .market-panel .cell.range{min-width:0;padding:0 7px;border-top:1px solid #273544;background:#0f151d}
  .market-panel .cell.range .range-line{min-width:0}
  .market-panel .cell.range span{display:block;width:30px;font-size:9px}
}