:root{
  --bg:#070a0f;
  --panel:#0b1118;
  --panel2:#0e1620;
  --line:#1a2633;
  --text:#c9d4df;
  --muted:#7f93a7;
  --neg:#ff2a2a;
  --pos:#2db7ff;
  --neu:#9aa6b2;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  padding:14px;
}

.page-shell{
  width:100%;
}

.wrap{
  max-width:1200px;
  margin:0 auto;
}

.layout-toolbar{
  margin-bottom:14px;
}

.panel{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  box-shadow:var(--shadow);
  margin-bottom:14px;
}

.title{
  margin:0;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.sub{
  margin:6px 0 0 0;
  font-size:12px;
  color:var(--muted);
  line-height:1.35;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.btn{
  display:inline-block;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:var(--text);
  text-decoration:none;
  font-size:12px;
}

.btn:hover{
  background:rgba(255,255,255,.09);
}

.grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(2,minmax(240px,1fr));
  gap:10px;
}

.card{
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:12px;
  padding:8px;
}

.card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}

.time{
  font-size:11px;
  color:var(--muted);
}

.nums{
  font-size:12px;
  text-align:right;
}

.gauge{
  margin-top:4px;
  text-align:center;
}

.gauge svg{
  height:82px !important;
}

.gauge-value{
  font-size:17px;
  font-weight:800;
  margin-top:-2px;
}

.gauge-label{
  font-size:11px;
  color:var(--muted);
  margin-top:2px;
}

.bar{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  overflow:hidden;
  position:relative;
  margin-top:8px;
}

.fill{
  height:100%;
  width:0%;
  position:absolute;
  left:0;
  top:0;
  border-radius:999px;
  transition:width 220ms ease;
}

.barlist{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.barrow{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.07);
}

.barrow-left{
  min-width:155px;
  font-size:12px;
}

.barrow-mid{
  flex:1;
}

.barrow-right{
  min-width:86px;
  text-align:right;
  font-size:12px;
  font-weight:800;
}

.flowgrid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:12px;
}

.flowcard{
  background:rgba(0,0,0,0.16);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  padding:12px;
}

.flowhdr{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.flowttl{
  font-size:14px;
  color:#dfe8f2;
  line-height:1.25;
}

.flowlast{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}

.flowlegend{
  font-size:12px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
}

.dot-blue{ background:#2db7ff; }
.dot-orange{ background:#d6821f; }

.flowcanvas{
  width:100%;
  height:230px;
  border-radius:10px;
  background:rgba(0,0,0,0.14);
  border:1px solid rgba(255,255,255,0.06);
}

.p11canvas{
  width:100%;
  height:205px;
  border-radius:10px;
  background:rgba(0,0,0,0.14);
  border:1px solid rgba(255,255,255,0.06);
}

.panel7-box{
  margin-top:14px;
  padding:14px;
  background:#111;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
}

.p7-row{
  display:flex;
  justify-content:space-between;
  margin-bottom:6px;
}

.me-signal{
  margin-top:10px;
  padding:10px;
  background:rgba(0,180,255,0.08);
  border:1px solid rgba(0,180,255,0.3);
  text-align:center;
  font-weight:600;
}

.panel89zoom{
  min-height:390px;
}

.panel89full{
  min-height:250px;
  margin-top:12px;
}

.panel10full{
  min-height:260px;
  margin-top:12px;
}

.panel-note{
  margin-top:12px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04);
  color:var(--muted);
  font-size:12px;
}

#layoutControls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

#layoutControls button{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(10,18,30,.88);
  color:rgba(255,255,255,.92);
  cursor:pointer;
  font-size:12px;
}

#layoutControls button:hover{
  background:rgba(18,28,44,.96);
}

[data-layout-root]{
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-auto-rows:min-content;
  gap:14px;
  align-items:start;
}

[data-layout-root] > .panel{
  margin-bottom:0;
  min-width:0;
}

/* ============================================================
   LAYOUT DO GRID (atualizado)
   Linha 1: [ Painel Region      ] [ Painel 2          ]
   Linha 2: [ Painel 4           ] [ Painel 5          ]
   Linha 3: ========= ESPAÇO EM BRANCO (linha inteira) =========
   Linha 4: [ Painel 1           ] [ Painel 8/9 Zoom   ]
   Linha 5: [ Painel 1.1 Region  ] [ VAZIO             ]
   Linha 6: [ Painel 6           ] [ Painel 7          ]
   Linha 7: Painel 8 (full)
   Linha 8: Painel 9 (full)
   Linha 9: Painel 10 (full)
   Linha10: Painel Top (full)
   ============================================================ */
[data-layout-root]{
  grid-template-rows:
    auto   /* 1 */
    auto   /* 2 */
    28px   /* 3 - respiro em branco */
    auto   /* 4 */
    auto   /* 5 */
    auto   /* 6 */
    auto   /* 7 */
    auto   /* 8 */
    auto   /* 9 */
    auto;  /* 10 */
}

.p-region-flow{ grid-column:1; grid-row:1; order:1; }
.p-q2{ grid-column:2; grid-row:1; order:2; }

.p-flow4{ grid-column:1; grid-row:2; order:3; }
.p-flow5{ grid-column:2; grid-row:2; order:4; }

/* linha 3 fica inteira em branco (respiro horizontal) */

.p-q1{ grid-column:1; grid-row:4; order:5; }
.p-hist{ grid-column:2; grid-row:4; order:6; }

.p-q11{ grid-column:1; grid-row:5; order:7; }
/* linha 5 direita fica vazia (reservada) */

.p-flow6{ grid-column:1; grid-row:6; order:8; }
.p-flow7{ grid-column:2; grid-row:6; order:9; }

.p-flow8{ grid-column:1 / -1; grid-row:7; order:10; }
.p-flow9{ grid-column:1 / -1; grid-row:8; order:11; }
.p-flow10{ grid-column:1 / -1; grid-row:9; order:12; }
.p-top{ grid-column:1 / -1; grid-row:10; order:13; }

.p-q1,
.p-q2{
  min-height:248px;
}

.p-q2 .barTop,
.p-q2 .barlist{
  margin-top:10px;
}

.p-flow7 .panel7-box{
  min-height:260px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

html[data-layout-mode="edit"] [data-layout-root] > .panel{
  user-select:none;
}

html[data-layout-mode="edit"] [data-layout-root] > .panel .layout-drag-handle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

html[data-layout-mode="edit"] [data-layout-root] > .panel .layout-resize-handle{
  display:block;
}

@media (max-width:1100px){
  [data-layout-root]{
    grid-template-columns:1fr;
    /* reset do template-rows: em uma coluna não há linha de respiro,
       todas as linhas devem se adaptar ao conteúdo */
    grid-template-rows:none;
    grid-auto-rows:auto;
  }

  [data-layout-root] > .panel{
    grid-column:1 !important;
    grid-row:auto !important;
  }

  /* Em uma coluna, Painel 2 (Probabilidade Direcional) vem PRIMEIRO,
     depois o Painel - Region. Em duas colunas a ordem original é mantida. */
  .p-q2{ order:0 !important; }
  .p-region-flow{ order:1 !important; }

  .p-q1,
  .p-q2{
    min-height:unset;
  }

  .topbar{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ======================================================================
   ✅ Barra de 3 níveis do Painel 4 (level-bar)
   ====================================================================== */
.level-bar{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:3px;
  width:140px;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:transparent;
  align-self:center;
  flex:0 0 auto;
}

.level-bar-seg{
  height:100%;
  background:var(--bg);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:999px;
  transition:background 220ms ease, border-color 220ms ease;
}

.level-bar-seg.is-on{
  background:#FFFFFF;
  border-color:#FFFFFF;
}