/* ============================================================
   Murilo Lympius — orquestrador.css
   Orquestrador de pipelines de e-commerce. Reusa os tokens de
   style.css e os componentes de simulador.css (botões, KPIs, código).
   ============================================================ */

:root {
  --ok:      #46C37B;
  --bad:     #FF5A5F;
  --warn:    #F2C94C;
  --run:     #4C8DF2;
  --violet:  #9F8CF6;
  --g-ingest: var(--teal);
  --g-spark:  var(--violet);
  --g-report: var(--accent);
}

.o-hero::before { background: radial-gradient(ellipse 70% 100% at 22% 0%, rgba(76,141,242,0.09), transparent 65%); }
.o-title { max-width: 22ch; }

/* ============================================================
   Sala de controle
   ============================================================ */
.o-room {
  margin-top: 28px;
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: clamp(16px, 2.4vw, 24px);
  display: grid; gap: 20px;
}
.o-roomtop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; }
.o-clockbox, .o-feedbox { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 18px; min-width: 0; }
.o-night { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.o-clockrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 4px; }
.o-clock { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 6vw, 3.6rem); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.o-status {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; border: 1px solid; white-space: nowrap;
}
.o-status.st-running  { color: #8DB6FF; border-color: rgba(76,141,242,0.5); background: rgba(76,141,242,0.1); }
.o-status.st-risk     { color: #F5D575; border-color: rgba(242,201,76,0.55); background: rgba(242,201,76,0.1); animation: o-blink 1.4s ease-in-out infinite; }
.o-status.st-incident { color: #FF9A9E; border-color: rgba(255,90,95,0.55); background: rgba(255,90,95,0.12); animation: o-blink 1.1s ease-in-out infinite; }
.o-status.st-ok       { color: #7FE6A6; border-color: rgba(70,195,123,0.5); background: rgba(70,195,123,0.1); }
.o-status.st-late     { color: #FF9A9E; border-color: rgba(255,90,95,0.5); background: rgba(255,90,95,0.1); }
@keyframes o-blink { 50% { opacity: 0.55; } }
.o-line { color: var(--text-2); font-size: 0.92rem; margin-bottom: 14px; }
.o-sub { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-3); margin-top: 10px; }
.o-next { color: var(--accent); margin-left: 8px; }

/* régua da noite */
.o-meter-track { position: relative; height: 10px; border-radius: 999px; background: var(--surface-2); }
.o-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--run); transition: width 0.25s linear; }
.o-meter-fill.st-ok { background: var(--ok); }
.o-meter-fill.st-risk { background: var(--warn); }
.o-meter-fill.st-late, .o-meter-fill.st-incident { background: var(--bad); }
.o-meter-sla { position: absolute; left: 80%; top: -6px; bottom: -6px; width: 2px; background: var(--bad); }
.o-meter-sla b { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; color: #FF9A9E; }
.o-meter-eta { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ok); transition: left 0.4s var(--ease); }
.o-meter-eta.late { border-color: var(--bad); }
.o-meter-eta::after { content: attr(data-l); position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.58rem; color: var(--text-2); white-space: nowrap; }
.o-meter-axis { display: flex; justify-content: space-between; margin-top: 20px; font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-3); }

/* o que está acontecendo agora */
.o-feedh { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.o-live { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); animation: o-live 1.6s infinite; }
@keyframes o-live { 0% { box-shadow: 0 0 0 0 rgba(255,90,95,0.55); } 70% { box-shadow: 0 0 0 7px rgba(255,90,95,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,95,0); } }
.o-feed, .o-runlog { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.o-feed li, .o-runlog li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: baseline;
  padding: 7px 10px; border-radius: 7px; border-left: 3px solid var(--border-2);
  font-size: 0.82rem; line-height: 1.45; color: var(--text-2);
}
.o-feed li:first-child { background: var(--surface); animation: o-in 0.5s var(--ease); }
@keyframes o-in { from { opacity: 0; transform: translateY(-4px); } }
.o-feed li b, .o-runlog li b { color: var(--text); font-weight: 600; }
.o-feed code, .o-runlog code { font-size: 0.7rem; background: none; border: 0; padding: 0; color: #FF9A9E; }
.lv-ok { border-left-color: var(--ok) !important; }
.lv-warn { border-left-color: var(--warn) !important; }
.lv-err { border-left-color: var(--bad) !important; }
.o-ft { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-3); }

/* controles */
.o-ctlrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.o-speed { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border: 1px solid var(--border); border-radius: 999px; }
.o-speedk { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-3); letter-spacing: 0.06em; margin-right: 4px; }

/* cenários */
.o-scenh { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.o-scens { display: grid; gap: 10px; }
.o-opt { align-items: center; padding: 14px 16px; }
.o-opt .o-sct { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 14px; }
.o-opt .o-sct b { font-size: 0.95rem; }
.o-scen-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.o-scen, .o-opt {
  display: flex; align-items: flex-start; gap: 10px; text-align: left; cursor: pointer; font: inherit; color: var(--text-2);
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease);
}
.o-scen:hover, .o-opt:hover { border-color: var(--border-2); transform: translateY(-1px); }
.o-sct { display: grid; gap: 3px; min-width: 0; }
.o-sct b { font-size: 0.86rem; color: var(--text); font-weight: 600; line-height: 1.25; }
.o-sct small { font-size: 0.72rem; color: var(--text-3); line-height: 1.35; }
.o-sw { flex: none; width: 30px; height: 18px; border-radius: 999px; background: var(--surface-3); position: relative; margin-top: 1px; transition: background 0.2s; }
.o-sw i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-3); transition: transform 0.2s var(--ease), background 0.2s; }
.o-scen[aria-pressed="true"] { border-color: rgba(242,201,76,0.6); background: rgba(242,201,76,0.07); }
.o-scen[aria-pressed="true"] .o-sw { background: rgba(242,201,76,0.35); }
.o-scen[aria-pressed="true"] .o-sw i { transform: translateX(12px); background: var(--warn); }
.o-opt { border-color: var(--accent-line); background: var(--accent-soft); }
.o-opt[aria-pressed="true"] { border-color: var(--ok); background: rgba(70,195,123,0.1); }
.o-opt[aria-pressed="true"] .o-sw { background: rgba(70,195,123,0.4); }
.o-opt[aria-pressed="true"] .o-sw i { transform: translateX(12px); background: var(--ok); }
.o-opt b { color: var(--accent-2); }
.o-opt[aria-pressed="true"] b { color: #7FE6A6; }

.o-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-warn { border-color: rgba(255,90,95,0.45); }
.kpi-warn .kpi-v { color: #FF9A9E; }

/* ============================================================
   DAG
   ============================================================ */
.o-dagcard { background: #0B1219; border: 1px solid var(--border); border-radius: var(--r); padding: 16px; }
.o-legend { display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; margin-bottom: 12px; font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-3); }
.o-lgs, .o-lss { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.o-lg, .o-ls { display: inline-flex; align-items: center; gap: 6px; }
.o-lg i { width: 10px; height: 3px; border-radius: 2px; background: var(--g-ingest); }
.o-lg.g-spark i { background: var(--g-spark); }
.o-lg.g-report i { background: var(--g-report); }
.o-ls i { width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--border-2); }
.o-ls.s-waiting i { border-style: dashed; border-color: var(--teal); }
.o-ls.s-queued i { border-color: var(--text-3); }
.o-ls.s-running i { border-color: var(--run); background: rgba(76,141,242,0.3); }
.o-ls.s-up_for_retry i { border-color: var(--warn); background: rgba(242,201,76,0.25); }
.o-ls.s-success i { border-color: var(--ok); background: rgba(70,195,123,0.3); }
.o-ls.s-failed i { border-color: var(--bad); background: rgba(255,90,95,0.3); }
.o-ls.s-upstream_failed i { border-color: #F2803C; }

.o-dagscroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
.o-dag { display: block; width: 100%; min-width: 880px; height: auto; }
.o-edge { fill: none; stroke: #2A3A4D; stroke-width: 1.6; transition: stroke 0.3s; }
.o-edge.done { stroke: rgba(70,195,123,0.45); }
.o-edge.bad { stroke: rgba(255,90,95,0.5); stroke-dasharray: 4 4; }
.o-edge.flow { stroke: var(--run); stroke-width: 2; stroke-dasharray: 7 7; animation: o-flow 0.7s linear infinite; }
@keyframes o-flow { to { stroke-dashoffset: -14; } }

.o-node { cursor: pointer; outline: none; }
.o-nbg { fill: #121B25; stroke: #2A3A4D; stroke-width: 1.4; transition: fill 0.25s, stroke 0.25s; }
.o-strip { fill: var(--g-ingest); }
.o-node.g-spark .o-strip { fill: var(--g-spark); }
.o-node.g-report .o-strip { fill: var(--g-report); }
.o-nname { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; fill: var(--text); }
.o-nsub { font-family: var(--font-mono); font-size: 9.5px; fill: var(--text-3); }
.o-nst { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; fill: var(--text-3); }
.o-pbg { fill: #1C2937; }
.o-pbar { fill: var(--run); transition: width 0.25s linear; }
.o-badge circle { fill: var(--warn); }
.o-badge text { font-family: var(--font-mono); font-size: 10px; font-weight: 700; fill: #0A0E14; }
.o-slatag rect { fill: #2A1517; stroke: rgba(255,90,95,0.6); }
.o-slatag text { font-family: var(--font-mono); font-size: 9px; font-weight: 600; fill: #FF9A9E; }
.o-node:hover .o-nbg, .o-node:focus-visible .o-nbg { stroke: var(--text-3); fill: #16212D; }
.o-node.sel .o-nbg { stroke: var(--accent); stroke-width: 2; }

.o-node.s-waiting .o-nbg { stroke: var(--teal); stroke-dasharray: 5 4; }
.o-node.s-waiting .o-nst { fill: var(--teal); }
.o-node.s-queued .o-nbg { stroke: #4A6075; }
.o-node.s-queued .o-nst { fill: var(--text-2); }
.o-node.s-running .o-nbg { stroke: var(--run); fill: #122136; }
.o-node.s-running .o-nst { fill: #8DB6FF; }
.o-node.s-running { filter: drop-shadow(0 0 10px rgba(76,141,242,0.35)); }
.o-node.s-up_for_retry .o-nbg { stroke: var(--warn); fill: #221F12; }
.o-node.s-up_for_retry .o-nst { fill: var(--warn); }
.o-node.s-success .o-nbg { stroke: rgba(70,195,123,0.65); fill: #10201A; }
.o-node.s-success .o-nst { fill: #7FE6A6; }
.o-node.s-success .o-pbar { fill: var(--ok); }
.o-node.s-failed .o-nbg { stroke: var(--bad); fill: #2A1517; }
.o-node.s-failed .o-nst { fill: #FF9A9E; }
.o-node.s-failed { filter: drop-shadow(0 0 12px rgba(255,90,95,0.4)); }
.o-node.s-upstream_failed .o-nbg { stroke: rgba(242,128,60,0.6); stroke-dasharray: 3 3; }
.o-node.s-upstream_failed .o-nst { fill: #F7A06A; }
.o-node.s-skipped { opacity: 0.55; }
.o-node.s-none .o-nname, .o-node.s-skipped .o-nname { fill: var(--text-2); }

/* ============================================================
   Linha do tempo
   ============================================================ */
.o-tlgrid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.o-gantt, .o-logbox, .o-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 16px; min-width: 0; }
.o-gantt { --lab: 150px; }
.o-gaxis, .o-grow { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); align-items: center; }
.o-gticks { position: relative; height: 18px; }
.o-gticks span { position: absolute; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-3); }
.o-gticks span:first-child { transform: none; }
.o-gbody { position: relative; }
.o-grow { height: 26px; cursor: pointer; border-radius: 5px; }
.o-grow:hover { background: rgba(255,255,255,0.03); }
.o-glab { display: flex; align-items: center; gap: 7px; font-size: 0.74rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.o-gtrack { position: relative; height: 14px; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255,255,255,0.04) calc(10% - 1px) 10%); border-radius: 3px; }
.o-b { position: absolute; top: 0; bottom: 0; border-radius: 3px; min-width: 2px; }
.o-b.wait { background: repeating-linear-gradient(45deg, rgba(79,209,197,0.35) 0 4px, transparent 4px 8px); border: 1px solid rgba(79,209,197,0.4); }
.o-b.run { background: var(--run); box-shadow: 0 0 10px rgba(76,141,242,0.5); }
.o-b.ok { background: var(--ok); opacity: 0.85; }
.o-b.fail { background: var(--bad); }
.o-b.retry { top: 6px; bottom: 6px; border-top: 2px dashed var(--warn); border-radius: 0; background: none; }
.o-glines { position: absolute; left: var(--lab); right: 0; top: 0; bottom: 0; pointer-events: none; }
.o-gsla { position: absolute; top: -6px; bottom: -4px; width: 2px; background: var(--bad); opacity: 0.85; }
.o-gsla b { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.58rem; color: #FF9A9E; white-space: nowrap; }
.o-gnow { position: absolute; top: -6px; bottom: -4px; width: 1px; background: var(--text); opacity: 0.6; }
.o-glegend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 26px; font-family: var(--font-mono); font-size: 0.64rem; color: var(--text-3); }
.o-glegend span { display: inline-flex; align-items: center; gap: 6px; }
.o-glegend .o-b { position: static; display: inline-block; width: 18px; height: 10px; }
.o-glegend .o-b.retry { height: 0; }
.o-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--surface-3); }
.o-dot.s-waiting { background: none; border: 1.5px dashed var(--teal); }
.o-dot.s-queued { background: var(--text-3); }
.o-dot.s-running { background: var(--run); box-shadow: 0 0 6px var(--run); }
.o-dot.s-up_for_retry { background: var(--warn); }
.o-dot.s-success { background: var(--ok); }
.o-dot.s-failed { background: var(--bad); }
.o-dot.s-upstream_failed { background: #F2803C; }

.o-logbox h3, .o-panel h3 { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.o-runlog { max-height: 440px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
.o-runlog li { font-size: 0.78rem; }
.o-runlog li[data-task] { cursor: pointer; }
.o-runlog li[data-task]:hover { background: var(--surface-2); }

/* ============================================================
   Qualidade
   ============================================================ */
.o-qgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.o-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.o-chk {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 2px 12px; align-items: baseline;
  padding: 10px 12px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--border); border-left-width: 3px;
}
.o-chk b { font-size: 0.86rem; color: var(--text); font-weight: 600; }
.o-chk small { grid-column: 2; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-3); }
.o-cst { grid-row: span 2; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.c-pass { border-left-color: var(--ok); } .c-pass .o-cst { color: #7FE6A6; }
.c-warn { border-left-color: var(--warn); } .c-warn .o-cst { color: #F5D575; }
.c-fail { border-left-color: var(--bad); background: rgba(255,90,95,0.07); } .c-fail .o-cst { color: #FF9A9E; }
.c-pending { opacity: 0.6; } .c-pending .o-cst { color: var(--text-3); }

.o-ctab { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.76rem; }
.o-ctab th { text-align: left; font-weight: 500; color: var(--text-3); padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }
.o-ctab td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text-2); }
.o-ctab td.ok { color: #7FE6A6; }
.o-ctab td.bad { color: #FF9A9E; background: rgba(255,90,95,0.08); }
.o-ctab td.fixed { color: #F5D575; }
.o-ctab small { font-size: 0.62rem; opacity: 0.85; }
.o-cnote { margin-top: 10px; font-family: var(--font-mono); font-size: 0.72rem; }
.o-cnote.ok { color: #F5D575; }
.o-cnote.bad { color: #FF9A9E; }

/* ============================================================
   Painel das 08:00
   ============================================================ */
.o-bi { position: relative; background: #F4F6F9; color: #18212B; border-radius: var(--r); padding: clamp(16px, 2.6vw, 26px); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
.o-bihead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.o-bihead h3 { font-family: var(--font-display); font-size: 1.15rem; color: #18212B; }
.o-bist { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; }
.o-bist.ok { background: #DDF5E7; color: #1C7A45; }
.o-bist.late { background: #FDE2E3; color: #B42328; }
.o-bist.wait { background: #E7ECF3; color: #4A5A6C; }
.o-bitiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.o-bitile { background: #fff; border: 1px solid #E2E7EE; border-radius: 10px; padding: 12px 14px; display: grid; gap: 4px; min-width: 0; }
.o-bitile span { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6A7A8C; }
.o-bitile b { font-family: var(--font-display); font-size: clamp(1rem, 1.7vw, 1.3rem); color: #18212B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-bicharts { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.o-bichart { background: #fff; border: 1px solid #E2E7EE; border-radius: 10px; padding: 14px; }
.o-bichart h4 { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6A7A8C; margin-bottom: 10px; font-weight: 500; }
.o-bibar { display: grid; grid-template-columns: 92px minmax(0, 1fr) 100px; gap: 10px; align-items: center; padding: 4px 0; font-size: 0.8rem; color: #33414F; }
.o-bitrack { height: 12px; background: #EEF2F6; border-radius: 3px; overflow: hidden; }
.o-bitrack i { display: block; height: 100%; background: #2F6FDF; border-radius: 3px; transition: width 0.5s var(--ease); }
.o-bibar b { font-family: var(--font-mono); font-size: 0.72rem; text-align: right; color: #18212B; }
.o-bistack { display: flex; height: 18px; border-radius: 5px; overflow: hidden; }
.o-bistack i, .o-bikeys i { display: block; height: 100%; }
.ch-site { background: #2F6FDF; } .ch-app { background: #F2A33C; } .ch-mkt { background: #2BB3A6; }
.o-bikeys { display: grid; gap: 6px; margin-top: 12px; font-size: 0.8rem; color: #33414F; }
.o-bikeys span { display: flex; align-items: center; gap: 8px; }
.o-bikeys i { width: 10px; height: 10px; border-radius: 3px; }
.o-bi.pending .o-bitiles, .o-bi.pending .o-bicharts { filter: blur(5px) grayscale(0.6); opacity: 0.55; pointer-events: none; }
.o-biwait { position: absolute; inset: 60px 0 0; display: grid; place-content: center; text-align: center; gap: 6px; }
.o-biwait b { font-family: var(--font-display); font-size: 1.3rem; color: #18212B; }
.o-biwait span { font-family: var(--font-mono); font-size: 0.78rem; color: #4A5A6C; }

/* ============================================================
   Histórico
   ============================================================ */
.o-hhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; max-width: none; }
.o-hhead > div { max-width: 720px; }
.o-grid {
  --hb: 70px;
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 16px;
}
.o-hlabels, .o-col { display: grid; grid-template-rows: var(--hb) 20px 18px repeat(14, 18px); gap: 4px; }
.o-hlab { font-size: 0.72rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: center; padding-right: 8px; }
.o-gcols { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; padding-bottom: 4px; }
.o-col { flex: 0 0 34px; justify-items: center; border-radius: 6px; padding: 0 2px; }
.o-col.live { background: rgba(76,141,242,0.08); box-shadow: inset 0 0 0 1px rgba(76,141,242,0.3); }
.o-col.bfa { background: rgba(159,140,246,0.1); }
.o-hbar { position: relative; width: 100%; height: var(--hb); display: flex; align-items: flex-end; justify-content: center; }
.o-hbar i { width: 16px; border-radius: 3px 3px 0 0; background: var(--ok); opacity: 0.85; transition: height 0.4s var(--ease); }
.o-hbar i.late { background: var(--bad); }
.o-hbar i.live { background: var(--run); }
.o-hbar s { position: absolute; left: -3px; right: -3px; height: 0; border-top: 1px dashed rgba(255,90,95,0.7); }
.o-hbarl span { position: absolute; right: 8px; transform: translateY(50%); font-family: var(--font-mono); font-size: 0.6rem; color: #FF9A9E; }
.o-hdate { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-3); align-self: center; white-space: nowrap; }
.o-hdate b { color: #8DB6FF; font-weight: 600; }
.o-hflags { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.o-hflags em { font-style: normal; font-family: var(--font-mono); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.04em; padding: 0 3px; border-radius: 3px; color: #0A0E14; background: var(--warn); line-height: 1.5; }
.o-hflags em.fl-opt { background: var(--ok); }
.o-hflags em.fl-bfd { background: var(--violet); }
.o-hflags em.fl-schema { background: var(--bad); }
.o-cell { width: 18px; height: 18px; border-radius: 4px; border: 0; padding: 0; cursor: pointer; background: var(--surface-3); position: relative; transition: transform 0.15s; }
.o-cell:hover { transform: scale(1.2); z-index: 1; }
.o-cell.s-success { background: var(--ok); }
.o-cell.s-failed { background: var(--bad); }
.o-cell.s-running { background: var(--run); animation: o-blink 1s ease-in-out infinite; }
.o-cell.s-queued { background: #4A6075; }
.o-cell.s-waiting { background: none; box-shadow: inset 0 0 0 1.5px var(--teal); }
.o-cell.s-up_for_retry { background: var(--warn); }
.o-cell.s-upstream_failed { background: #F2803C; opacity: 0.7; }
.o-cell.s-skipped { background: #4A6075; opacity: 0.6; }
.o-cell.rt::after { content: ""; position: absolute; right: -2px; top: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 1.5px var(--surface); }

/* ============================================================
   Modelo
   ============================================================ */
.o-star {
  display: grid; gap: 16px 28px; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas: "l1 c r1" "l2 c r2";
}
.p-l1 { grid-area: l1; } .p-l2 { grid-area: l2; } .p-c { grid-area: c; } .p-r1 { grid-area: r1; } .p-r2 { grid-area: r2; }
.o-tbl { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); }
.o-tbl.o-fact { border-color: var(--accent-line); box-shadow: 0 0 0 4px rgba(242,163,60,0.05); }
.o-tbl.o-dim::after { content: ""; position: absolute; top: 50%; width: 28px; border-top: 1px dashed var(--border-2); }
.p-l1::after, .p-l2::after { left: 100%; }
.p-r1::after, .p-r2::after { right: 100%; }
.o-th { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.o-th b { font-family: var(--font-mono); font-size: 0.86rem; color: var(--text); }
.o-tag { font-family: var(--font-mono); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 4px; background: var(--surface-3); color: var(--text-3); }
.o-fact .o-tag { background: var(--accent-soft); color: var(--accent); }
.o-tag.scd { background: rgba(159,140,246,0.15); color: var(--violet); }
.o-tmeta { padding: 8px 14px 0; font-family: var(--font-mono); font-size: 0.66rem; color: var(--accent-2); line-height: 1.6; }
.o-tbl ul { list-style: none; margin: 0; padding: 8px 14px 12px; display: grid; gap: 3px; }
.o-tbl li { display: flex; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-2); }
.o-tbl li em { font-style: normal; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.06em; padding: 1px 5px; border-radius: 3px; align-self: center; }
.o-tbl li.pk em { background: var(--accent-soft); color: var(--accent); }
.o-tbl li.fk em { background: var(--teal-soft); color: var(--teal); }
.o-tbl li.hash em { background: rgba(159,140,246,0.15); color: var(--violet); }
.o-tbl li.pk span { color: var(--text); }
.o-mnotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.o-mnote { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px 16px; }
.o-mnote h4 { font-size: 0.92rem; margin-bottom: 6px; }
.o-mnote p { font-size: 0.84rem; color: var(--text-2); line-height: 1.55; }
.o-mnote code { font-size: 0.74rem; }

/* ============================================================
   Escopo sênior
   ============================================================ */
.o-scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.o-sc {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px;
  transition: border-color 0.2s, transform 0.2s var(--ease);
}
.o-sc:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.o-scn { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--accent); letter-spacing: -0.02em; }
.o-sc h3 { font-size: 1rem; }
.o-sc p { font-size: 0.86rem; color: var(--text-2); line-height: 1.55; flex: 1; }
.o-scl { font-family: var(--font-mono); font-size: 0.7rem; color: var(--teal); text-decoration: none; }
.o-scl:hover { color: var(--text); }

/* ============================================================
   Gaveta da tarefa
   ============================================================ */
body.dr-open { overflow: hidden; }
.scrim { position: fixed; inset: 0; z-index: 399; background: rgba(2,5,9,0.6); opacity: 0; transition: opacity 0.25s var(--ease); }
.scrim.open { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 400;
  width: min(600px, 100%); display: flex; flex-direction: column;
  background: var(--bg-2); border-left: 1px solid var(--border-2); box-shadow: -24px 0 60px rgba(0,0,0,0.45);
  transform: translateX(100%); transition: transform 0.25s var(--ease);
}
.drawer.open { transform: none; }
.drawer[hidden], .scrim[hidden] { display: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 22px 14px; border-bottom: 1px solid var(--border); }
.drawer-head h2 { font-size: 1.4rem; letter-spacing: -0.02em; }
.dr-kicker { color: var(--accent); font-size: 0.66rem; margin-bottom: 4px; }
.drawer-body { flex: 1; overflow: auto; padding: 16px 22px 28px; display: grid; gap: 12px; align-content: start; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
.o-dsec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px; min-width: 0; }
.o-dsec h3 { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.o-dsec h3.mt { margin-top: 14px; }
.o-dsec p { font-size: 0.88rem; color: var(--text-2); line-height: 1.6; }
.o-op { font-size: 0.66rem; text-transform: none; letter-spacing: 0; color: var(--violet); background: rgba(159,140,246,0.1); border: 0; }
.o-pill { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }
.o-pill.s-success { background: rgba(70,195,123,0.18); color: #7FE6A6; }
.o-pill.s-running { background: rgba(76,141,242,0.2); color: #8DB6FF; }
.o-pill.s-failed { background: rgba(255,90,95,0.2); color: #FF9A9E; }
.o-pill.s-up_for_retry { background: rgba(242,201,76,0.2); color: #F5D575; }
.o-pill.s-waiting { background: var(--teal-soft); color: var(--teal); }
.o-pill.s-upstream_failed { background: rgba(242,128,60,0.18); color: #F7A06A; }
.o-log {
  margin: 0; padding: 12px; background: #05090D; border: 1px solid var(--border); border-radius: 8px;
  font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.7; color: var(--text-2);
  white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow: auto;
}
.lg-t { color: var(--text-3); }
.lg-info { color: var(--teal); }
.lg-warning { color: var(--warn); }
.lg-error { color: var(--bad); }
.drawer-body .code-box { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.drawer-body .code-box pre { font-size: 0.72rem; }

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width: 1100px) {
  .o-scen-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .o-bitiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .o-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-star { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "c c" "l1 r1" "l2 r2"; }
  .o-tbl.o-dim::after { display: none; }
}

@media (max-width: 860px) {
  .o-roomtop, .o-tlgrid, .o-qgrid, .o-bicharts { grid-template-columns: 1fr; }
  .o-mnotes { grid-template-columns: 1fr; }
  .o-scen-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .o-kpis { grid-template-columns: 1fr 1fr; }
  .o-scen-list { grid-template-columns: 1fr; }
  .o-opt .o-sct { grid-template-columns: 1fr; }
  .o-bitiles { grid-template-columns: 1fr 1fr; }
  .o-bibar { grid-template-columns: 78px minmax(0, 1fr) 86px; }
  .o-scope { grid-template-columns: 1fr; }
  .o-star { grid-template-columns: 1fr; grid-template-areas: "c" "l1" "r1" "l2" "r2"; }
  .o-gantt { --lab: 108px; }
  .o-grid { grid-template-columns: 112px minmax(0, 1fr); padding: 12px 10px; }
  .o-ctlrow .btn { flex: 1 1 auto; justify-content: center; }
  .drawer-head { padding: 16px 16px 12px; }
  .drawer-body { padding: 12px 16px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .o-edge.flow, .o-live, .o-status, .o-cell.s-running { animation: none; }
  .drawer, .scrim { transition: none; }
}