:root{
  --bg:#090e14;
  --panel:#111820;
  --card:#151e28;
  --line:#26323e;
  --text:#eef4f9;
  --muted:#8ea0b2;
  --accent:#66a7ff;
  --ok:#41d28f;
  --warn:#edc44d;
  --bad:#ff657d;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,Pretendard,"Noto Sans KR",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
header,main{width:100%;max-width:none;margin:0}
header{
  padding:28px 24px 16px;display:flex;justify-content:space-between;
  gap:20px;align-items:flex-end;
}
.eyebrow{font-size:11px;color:var(--accent);letter-spacing:.16em;font-weight:700}
h1{font-size:27px;margin:7px 0}
header p,.muted,.panel p{color:var(--muted);font-size:12px;margin:0}
.head-right{display:flex;gap:12px;align-items:center}
main{padding:0 24px 44px}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}
.card,.panel{border:1px solid var(--line);background:var(--panel);border-radius:13px}
.card{padding:16px}
.card span,.card small{display:block;color:var(--muted);font-size:11px}
.card b{display:block;font-size:22px;margin:8px 0 5px;min-height:28px}
.panel{margin-top:12px;overflow:hidden}
.panel-head{
  padding:15px 18px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:15px
}
.panel h2{margin:0 0 5px;font-size:17px}
.controls{display:flex;gap:8px}
.controls select,.controls button{
  background:#1b2938;color:var(--text);border:1px solid #34506d;
  border-radius:8px;padding:8px 10px
}
.badge,.stage-status{
  display:inline-block;border-radius:999px;padding:5px 9px;font-size:11px;
  border:1px solid var(--line);white-space:nowrap
}
.badge.ok,.stage-status.ok{color:var(--ok);border-color:rgba(65,210,143,.45);background:rgba(65,210,143,.06)}
.badge.warn,.stage-status.warn{color:var(--warn);border-color:rgba(237,196,77,.45);background:rgba(237,196,77,.06)}
.badge.bad,.stage-status.bad{color:var(--bad);border-color:rgba(255,101,125,.45);background:rgba(255,101,125,.06)}
.badge.neutral,.stage-status.neutral{color:var(--muted)}

.flow-legend{display:flex;gap:12px;color:var(--muted);font-size:11px;flex-wrap:wrap}
.flow-legend span{display:flex;align-items:center;gap:5px}
.dot,.status-lamp{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--muted)}
.dot.ok,.status-lamp.ok{background:var(--ok)}
.dot.warn,.status-lamp.warn{background:var(--warn)}
.dot.bad,.status-lamp.bad{background:var(--bad)}
.flow-board{
  padding:22px 18px 17px;
  display:grid;
  grid-template-columns:minmax(180px,1fr) 72px minmax(200px,1fr) 72px minmax(190px,1fr) 72px minmax(200px,1fr) 72px minmax(190px,1fr);
  align-items:stretch;
}
.flow-stage{
  position:relative;border:1px solid var(--line);background:var(--card);
  border-radius:12px;padding:15px 13px 13px;min-width:0;
  display:grid;grid-template-columns:38px 1fr;gap:10px;
  transition:border-color .25s ease,background-color .25s ease,transform .25s ease
}
.flow-stage:hover{transform:translateY(-2px);border-color:#3a4c60}
.stage-index{
  position:absolute;left:8px;top:7px;font-size:9px;color:var(--muted)
}
.stage-icon{
  width:38px;height:38px;border:1px solid #314153;border-radius:10px;
  display:flex;align-items:center;justify-content:center;color:var(--accent);
  font-size:9px;font-weight:700;margin-top:10px
}
.stage-body{min-width:0;padding-top:6px}
.stage-body strong{display:block;font-size:13px;margin-bottom:5px}
.stage-body span{display:block;color:var(--text);font-size:11px;line-height:1.45}
.stage-body small{display:block;color:var(--muted);font-size:10px;line-height:1.45;margin-top:6px;min-height:28px}
.stage-status{grid-column:1/-1;justify-self:start;margin-top:8px}
.flow-link{position:relative;min-width:60px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.flow-link::after{
  content:"";position:absolute;left:8px;right:8px;top:50%;
  height:1px;background:linear-gradient(90deg,var(--line),#3f5c7c,var(--line))
}
.flow-link small{
  position:absolute;top:calc(50% + 11px);font-size:9px;color:var(--muted);z-index:2;white-space:nowrap
}
.packet{
  position:absolute;top:calc(50% - 3px);left:5px;width:6px;height:6px;
  border-radius:50%;background:var(--accent);z-index:3;
  box-shadow:0 0 7px rgba(102,167,255,.5);
  animation:packetMove 1.65s linear infinite
}
.packet.p2{animation-delay:-.55s}.packet.p3{animation-delay:-1.1s}
@keyframes packetMove{
  0%{transform:translateX(0);opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{transform:translateX(60px);opacity:0}
}
.fallback-flow{
  margin:0 18px 18px;padding:11px 14px;border:1px dashed #344354;border-radius:10px;
  color:var(--muted);font-size:11px;display:flex;align-items:center;justify-content:center;
  gap:9px;flex-wrap:wrap;background:#0c1218
}
.fallback-chip{color:var(--warn)}
.fallback-flow b{color:var(--text);font-size:11px;font-weight:600;margin-left:6px}

.diag-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.diag-item{padding:14px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:92px}
.diag-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.diag-top span{color:var(--muted);font-size:11px}
.diag-item b{display:block;font-size:13px;margin:7px 0 5px}
.diag-item small{display:block;color:var(--muted);font-size:10px;line-height:1.45}

.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:15px}
.chart{border:1px solid var(--line);background:#0c1218;border-radius:10px;padding:11px;min-width:0}
.chart h3{font-size:12px;color:var(--text);margin:0 0 4px;font-weight:600}
.chart canvas{display:block;width:100%;height:240px}

.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:1150px}
th,td{padding:10px 11px;border-bottom:1px solid var(--line);text-align:left;font-size:11px;vertical-align:top}
th{background:#0e151d;color:var(--muted);position:sticky;top:0;z-index:2}
tbody tr{transition:background-color .16s ease}
tbody tr:hover{background:#141e28}
code.query{display:block;max-width:650px;white-space:pre-wrap;word-break:break-all;color:#c7ddf8}
.empty{padding:22px 18px;color:var(--muted);font-size:12px}.good{color:var(--ok)}
.alert{padding:13px 18px;border-bottom:1px solid var(--line);display:flex;gap:12px}
.alert b{min-width:48px}.alert.warn b{color:var(--warn)}.alert.bad b{color:var(--bad)}
.subhead{padding:14px 18px 7px;color:var(--muted);font-size:11px;font-weight:700}
pre{margin:8px 18px;padding:11px;background:#080d12;border:1px solid var(--line);border-radius:8px;white-space:pre-wrap;word-break:break-all;font-size:11px;color:#d6e1ea}

@media(max-width:1380px){
  .flow-board{grid-template-columns:1fr 55px 1fr 55px 1fr;row-gap:14px}
  .flow-stage:nth-of-type(7),.flow-stage:nth-of-type(9){grid-column:auto}
  .flow-link:nth-of-type(6){display:none}
}
@media(max-width:1120px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .diag-grid{grid-template-columns:repeat(2,1fr)}
  .flow-board{display:flex;flex-direction:column;gap:8px}
  .flow-link{height:34px}
  .flow-link::after{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto}
  .flow-link .packet{left:calc(50% - 3px);top:1px;animation:packetDown 1.5s linear infinite}
  .flow-link small{top:10px;left:calc(50% + 12px)}
  @keyframes packetDown{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(30px);opacity:0}}
}
@media(max-width:760px){
  header{flex-direction:column;align-items:flex-start}
  .kpis,.charts{grid-template-columns:1fr}
  .panel-head{align-items:flex-start;flex-direction:column}
}
@media(max-width:480px){
  .diag-grid{grid-template-columns:1fr}
}


/* v1.3.2 장치별 신호등 / 모니터링 스위치 */
.signal-wrap{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:11px
}
.signal-light{
  width:12px;height:12px;border-radius:50%;display:inline-block;
  border:1px solid rgba(255,255,255,.16);background:#65717e
}
.signal-light.green{
  background:var(--ok);
  box-shadow:0 0 0 3px rgba(65,210,143,.10),0 0 8px rgba(65,210,143,.35)
}
.signal-light.yellow{
  background:var(--warn);
  box-shadow:0 0 0 3px rgba(237,196,77,.10),0 0 8px rgba(237,196,77,.30)
}
.signal-light.red{
  background:var(--bad);
  box-shadow:0 0 0 3px rgba(255,101,125,.10),0 0 8px rgba(255,101,125,.35)
}
.signal-light.gray{background:#687481}
.signal-light.off{background:#323c46;box-shadow:none}
.monitor-switch{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none;white-space:nowrap
}
.monitor-switch input{position:absolute;opacity:0;pointer-events:none}
.switch-track{
  width:36px;height:20px;border-radius:999px;background:#384553;border:1px solid #4b5b6c;
  padding:2px;display:inline-flex;align-items:center;
  transition:background .18s ease,border-color .18s ease
}
.switch-knob{
  width:14px;height:14px;border-radius:50%;background:#9ba8b4;display:block;
  transform:translateX(0);transition:transform .18s ease,background .18s ease
}
.monitor-switch input:checked + .switch-track{
  background:rgba(65,210,143,.20);border-color:rgba(65,210,143,.55)
}
.monitor-switch input:checked + .switch-track .switch-knob{
  transform:translateX(16px);background:var(--ok)
}
.monitor-switch input:disabled + .switch-track{opacity:.45}
.switch-text{color:var(--muted);font-size:10px}
.monitor-switch input:checked ~ .switch-text{color:var(--ok)}


/* v1.3.3 ASOS baseline */
.asos-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.asos-status-box,
.asos-item{
  padding:15px 17px;
  min-height:100px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.asos-status-box>span,
.asos-item>span{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-bottom:7px;
}
.asos-item b{
  display:block;
  font-size:13px;
  margin-bottom:6px;
}
.asos-item small,
.asos-status-box small{
  color:var(--muted);
  font-size:10px;
  line-height:1.45;
}
.asos-status-main{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
}
.asos-status-main b{
  font-size:15px;
}
.asos-explain{
  padding:12px 17px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:var(--muted);
  font-size:11px;
  background:#0c1218;
}
.asos-explain b{
  color:var(--text);
  white-space:nowrap;
}
.asos-explain strong{
  color:var(--text);
}
.asos-flow .fallback-chip{
  color:var(--warn);
}
@media(max-width:1100px){
  .asos-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .asos-summary{grid-template-columns:1fr}
}


/* v1.3.4 asos_baseline 실제 데이터 모니터링 */
.asos-detail-kpis{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  border-bottom:1px solid var(--line);
}
.asos-kpi{
  padding:14px 16px;
  border-right:1px solid var(--line);
}
.asos-kpi span{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-bottom:7px;
}
.asos-kpi b{
  display:block;
  font-size:16px;
  margin-bottom:5px;
}
.asos-kpi small{
  color:var(--muted);
  font-size:10px;
}
.asos-detail-charts{
  border-bottom:1px solid var(--line);
}
.asos-table-title{
  padding:13px 17px;
  border-bottom:1px solid var(--line);
  background:#0d141c;
}
.asos-table-title b{
  display:block;
  font-size:12px;
  margin-bottom:4px;
}
.asos-table-title span{
  color:var(--muted);
  font-size:10px;
}
@media(max-width:1100px){
  .asos-detail-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:720px){
  .asos-detail-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:480px){
  .asos-detail-kpis{
    grid-template-columns:1fr;
  }
}


/* v1.3.5 TELEMETRY + ASOS 동시 표시 */
.dual-kpis{
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.telemetry-card{
  box-shadow:inset 0 2px 0 rgba(102,167,255,.28);
}
.asos-card{
  box-shadow:inset 0 2px 0 rgba(237,196,77,.30);
}
.dual-source-bar{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  align-items:center;
  border:1px solid var(--line);
  background:#0d141c;
  border-radius:12px;
  overflow:hidden;
}
.dual-source-item{
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}
.dual-source-item>div{
  display:flex;
  align-items:baseline;
  gap:9px;
}
.dual-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--accent);
}
.dual-source-item:last-child .dual-label{
  color:var(--warn);
}
.dual-source-item b{
  font-size:12px;
}
.dual-divider{
  align-self:stretch;
  background:var(--line);
}
.source-section-head{
  margin-top:18px;
  padding:17px 18px;
  border:1px solid var(--line);
  border-radius:13px;
  background:linear-gradient(90deg,#111922,#0d141b);
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
}
.source-section-head.telemetry-head{
  border-left:3px solid var(--accent);
}
.source-section-head.asos-head{
  border-left:3px solid var(--warn);
}
.source-number{
  width:36px;height:36px;
  border:1px solid var(--line);
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--muted);
}
.source-kicker{
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--accent);
  margin-bottom:4px;
}
.asos-head .source-kicker{
  color:var(--warn);
}
.source-section-head h2{
  margin:0 0 4px;
  font-size:18px;
}
.source-section-head p{
  margin:0;
  color:var(--muted);
  font-size:11px;
}
.source-tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.source-tags span{
  padding:5px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-size:9px;
  background:#0b1117;
}
.text-ok{color:var(--ok)}
.text-bad{color:var(--bad)}
@media(max-width:1300px){
  .dual-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:850px){
  .source-section-head{
    grid-template-columns:42px 1fr;
  }
  .source-tags{
    grid-column:1/-1;
    justify-content:flex-start;
  }
  .dual-source-bar{
    grid-template-columns:1fr;
  }
  .dual-divider{height:1px;width:100%}
}
@media(max-width:650px){
  .dual-kpis{grid-template-columns:1fr}
}


/* ==========================================================
   v1.3.6 자유 레이아웃 / 전체화면 반응형
   ========================================================== */
html,body{
  width:100%;
  min-width:0;
}
header,main{
  width:100%;
  max-width:none !important;
  margin:0 !important;
}
header{
  padding-left:clamp(16px,1.5vw,30px);
  padding-right:clamp(16px,1.5vw,30px);
}
main{
  padding-left:clamp(12px,1.25vw,26px);
  padding-right:clamp(12px,1.25vw,26px);
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:12px;
  align-items:start;
}
main > .layout-block{
  grid-column:span 12;
  min-width:0;
  margin-top:0;
  position:relative;
}
main > .layout-block + .layout-block{
  margin-top:0;
}

/* 원래 section 내부의 반응형 레이아웃은 그대로 유지 */
.layout-controls{
  display:flex;
  gap:7px;
}
.layout-btn{
  background:#1a2735;
  color:var(--text);
  border:1px solid #344b64;
  border-radius:8px;
  padding:7px 10px;
  font-size:11px;
  cursor:pointer;
}
.layout-btn:hover{
  border-color:#527399;
}
.layout-btn.secondary{
  color:var(--muted);
  background:#10171f;
}

.block-layout-toolbar{
  display:none;
}
.layout-edit-mode .block-layout-toolbar{
  display:flex;
  height:34px;
  align-items:center;
  gap:9px;
  padding:5px 8px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,#0b1219,#111b25);
  position:relative;
  z-index:20;
}
.layout-edit-mode .source-section-head > .block-layout-toolbar,
.layout-edit-mode .kpis > .block-layout-toolbar,
.layout-edit-mode .dual-source-bar > .block-layout-toolbar{
  grid-column:1/-1;
}
.layout-edit-mode .layout-block{
  outline:1px dashed rgba(102,167,255,.35);
  outline-offset:2px;
}
.layout-edit-mode .layout-block.dragging{
  opacity:.48;
  transform:scale(.995);
  outline:2px solid var(--accent);
}
.drag-handle{
  display:inline-flex;
  width:24px;
  height:22px;
  align-items:center;
  justify-content:center;
  cursor:grab;
  color:var(--accent);
  font-size:15px;
  letter-spacing:-4px;
  padding-right:4px;
}
.drag-handle:active{
  cursor:grabbing;
}
.block-layout-name{
  color:var(--muted);
  font-size:10px;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.block-size-buttons{
  display:flex;
  gap:4px;
}
.block-size-buttons button{
  border:1px solid #34485e;
  background:#111a23;
  color:var(--muted);
  padding:3px 7px;
  border-radius:6px;
  font-size:9px;
  cursor:pointer;
}
.block-size-buttons button.active{
  color:var(--accent);
  border-color:rgba(102,167,255,.65);
  background:rgba(102,167,255,.08);
}

/* 절반/2/3 폭에서도 내부 카드가 자동 재배치 */
.layout-block[data-span="8"] .kpis,
.layout-block[data-span="6"] .kpis,
.layout-block[data-span="8"] .diag-grid,
.layout-block[data-span="6"] .diag-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.layout-block[data-span="8"] .charts,
.layout-block[data-span="6"] .charts{
  grid-template-columns:1fr;
}
.layout-block[data-span="8"] .asos-summary,
.layout-block[data-span="6"] .asos-summary,
.layout-block[data-span="8"] .asos-detail-kpis,
.layout-block[data-span="6"] .asos-detail-kpis{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.layout-block[data-span="6"] .source-section-head,
.layout-block[data-span="8"] .source-section-head{
  grid-template-columns:42px 1fr;
}
.layout-block[data-span="6"] .source-tags,
.layout-block[data-span="8"] .source-tags{
  grid-column:1/-1;
  justify-content:flex-start;
}

/* 전체 폭에서 테이블은 뷰포트 사용 */
.table-wrap{
  width:100%;
  max-width:100%;
  overflow:auto;
}
table{
  width:max(100%,1150px);
}

/* 넓은 모니터에서 차트 공간 적극 사용 */
@media(min-width:1800px){
  .charts{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .chart canvas{
    height:280px;
  }
  .diag-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* 사용자 지정 span보다 모바일 반응형이 우선 */
@media(max-width:1050px){
  main{
    grid-template-columns:1fr;
  }
  main > .layout-block{
    grid-column:1/-1 !important;
  }
  .layout-edit-mode .block-size-buttons{
    display:none;
  }
}
@media(max-width:760px){
  header{
    padding-left:14px;
    padding-right:14px;
  }
  main{
    padding-left:10px;
    padding-right:10px;
  }
  .layout-controls{
    width:100%;
  }
  .layout-btn{
    flex:1;
  }
}


/* ==========================================================
   v1.3.7 실제 소스 기준 1A / 1B 병렬 데이터 흐름
   ========================================================== */
.parallel-flow{
  padding:18px;
}
.flow-root-label{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:0 2px 12px;
}
.flow-root-label>span{
  font-size:12px;
  font-weight:700;
  color:var(--text);
}
.flow-root-label small{
  color:var(--muted);
  font-size:10px;
}
.flow-lanes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.flow-lane{
  min-width:0;
  border:1px solid var(--line);
  border-radius:13px;
  overflow:hidden;
  background:#0c1218;
}
.telemetry-lane{
  border-top:2px solid var(--accent);
}
.asos-lane{
  border-top:2px solid var(--warn);
}
.lane-head{
  min-height:62px;
  padding:12px 14px;
  display:flex;
  gap:10px;
  align-items:center;
  border-bottom:1px solid var(--line);
  background:#101821;
}
.lane-no{
  flex:0 0 auto;
  width:35px;height:35px;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;
  border:1px solid rgba(102,167,255,.45);
  color:var(--accent);
  font-size:11px;
  font-weight:800;
}
.asos-lane .lane-no{
  border-color:rgba(237,196,77,.45);
  color:var(--warn);
}
.lane-head strong{
  display:block;
  font-size:13px;
  margin-bottom:4px;
}
.lane-head small{
  display:block;
  color:var(--muted);
  font-size:10px;
}
.lane-steps{
  padding:13px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.lane-steps .flow-stage{
  min-height:118px;
}
.lane-arrow{
  height:34px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.lane-arrow::before{
  content:"";
  position:absolute;
  left:50%;
  top:1px;
  bottom:1px;
  width:1px;
  background:linear-gradient(var(--line),#466481,var(--line));
}
.asos-lane .lane-arrow::before{
  background:linear-gradient(var(--line),#76672f,var(--line));
}
.lane-arrow .packet{
  left:calc(50% - 3px);
  top:1px;
  animation:parallelPacketDown 1.5s linear infinite;
}
.lane-arrow .packet.p2{animation-delay:-.5s}
.lane-arrow .packet.p3{animation-delay:-1s}
.lane-arrow small{
  position:absolute;
  left:calc(50% + 13px);
  top:9px;
  color:var(--muted);
  font-size:9px;
  white-space:nowrap;
}
@keyframes parallelPacketDown{
  0%{transform:translateY(0);opacity:0}
  15%{opacity:1}
  85%{opacity:1}
  100%{transform:translateY(30px);opacity:0}
}
.lane-result{
  padding:10px 12px;
  border-radius:9px;
  border:1px dashed #344454;
  background:#0a1016;
}
.lane-result span,
.lane-result small{
  display:block;
  color:var(--muted);
  font-size:9px;
}
.lane-result b{
  display:block;
  margin:4px 0;
  font-size:10px;
  word-break:break-all;
}
.live-result b{color:var(--accent)}
.generated-result b{color:var(--warn)}

.flow-merge{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.merge-lines{
  position:relative;
  width:min(70%,900px);
  height:42px;
}
.merge-line{
  position:absolute;
  top:0;
  width:50%;
  height:42px;
  border-bottom:1px solid #3e5368;
}
.merge-line.left{
  left:0;
  border-right:1px solid #3e5368;
  border-bottom-right-radius:10px;
}
.merge-line.right{
  right:0;
  border-left:1px solid #665c35;
  border-bottom-left-radius:10px;
}
.merge-dot{
  position:absolute;
  left:50%;
  bottom:-4px;
  width:8px;height:8px;
  transform:translateX(-50%);
  border-radius:50%;
  background:var(--text);
}
.merge-stage,
.output-stage{
  width:min(760px,100%);
}
.vertical-flow-arrow{
  height:52px;
  width:min(760px,100%);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.vertical-flow-arrow::before{
  content:"";
  position:absolute;
  left:50%;
  top:2px;
  bottom:2px;
  width:1px;
  background:linear-gradient(var(--line),#4d6782,var(--line));
}
.vertical-flow-arrow .packet{
  left:calc(50% - 3px);
  top:2px;
  animation:parallelPacketDown 1.6s linear infinite;
}
.vertical-flow-arrow .packet.p2{animation-delay:-.8s}
.vertical-flow-arrow small{
  margin-left:160px;
  color:var(--muted);
  font-size:9px;
}
.observer-panel{
  margin-top:16px;
  padding:12px 14px;
  border:1px dashed rgba(102,167,255,.45);
  border-radius:11px;
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:12px;
  align-items:center;
  background:rgba(102,167,255,.035);
}
.observer-icon{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(102,167,255,.35);
  border-radius:9px;
  color:var(--accent);
  font-size:9px;
  font-weight:800;
}
.observer-copy strong{
  display:block;
  font-size:12px;
  margin-bottom:3px;
}
.observer-copy span{
  display:block;
  font-size:10px;
  color:var(--text);
  margin-bottom:3px;
}
.observer-copy small{
  color:var(--muted);
  font-size:9px;
}
.exception-path{
  margin-top:9px;
  padding:9px 12px;
  border-radius:9px;
  background:#0b1117;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:9px;
}
.exception-label{
  color:var(--warn);
  font-weight:700;
}
.exception-path b{
  color:var(--text);
  font-size:9px;
  margin-left:auto;
}

@media(max-width:1000px){
  .flow-lanes{
    grid-template-columns:1fr;
  }
  .merge-lines{
    width:75%;
  }
}
@media(max-width:640px){
  .parallel-flow{padding:12px}
  .flow-root-label{
    flex-direction:column;
    gap:3px;
  }
  .observer-panel{
    grid-template-columns:38px 1fr;
  }
  .observer-panel .stage-status{
    grid-column:1/-1;
    justify-self:start;
  }
  .vertical-flow-arrow small{
    margin-left:130px;
  }
}