:root{
  --bg:#070a12;
  --panel:#0c1020;
  --panel2:#0a0e1a;
  --text:#e6e9f5;
  --muted:#94a3b8;
  --border:rgba(255,255,255,0.10);
  --border2:rgba(255,255,255,0.16);
  --accent:#7c3aed;
  --accent2:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;
  --shadow:0 18px 45px rgba(0,0,0,0.55);
  --leftW:320px;
  --rightW:360px;
  --rightWCollapsed:54px;
}

html{color-scheme:dark}
*{
  scrollbar-width:thin;
  scrollbar-color: rgba(255,255,255,0.22) rgba(0,0,0,0.14);
}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:rgba(0,0,0,0.14); border-radius:999px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.10); border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.22)}
*{box-sizing:border-box}
html,body{height:100%; overflow:hidden}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 700px at 15% 15%, rgba(124,58,237,0.20), transparent 55%),
              radial-gradient(1000px 600px at 85% 80%, rgba(34,197,94,0.14), transparent 55%),
              var(--bg);
  color:var(--text);
}

body, #canvas, #world, .node, .workspace-toolbar, .panel, .tabs, .toolbtn, .pill, .badge { user-select: none; -webkit-user-select: none; }
input, textarea, select, option, [contenteditable="true"] { user-select: text; -webkit-user-select: text; }


body.props-collapsed{--rightW:var(--rightWCollapsed);}
body.left-collapsed{--leftW:56px;}


.app{height:100vh; display:flex; flex-direction:column}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(12,16,32,0.88), rgba(12,16,32,0.70));
  backdrop-filter: blur(10px);
  position:sticky;
  top:0;
  z-index:20;
}
.brand{display:flex; flex-direction:column; gap:2px}
.brand-title{font-weight:800; letter-spacing:0.3px; font-size:18px}
.brand-sub{color:var(--muted); font-size:12px}

.topbar-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.badge{border:1px solid var(--border2); padding:5px 8px; border-radius:999px; font-size:11px; color:var(--muted)}
.badge.pro{border-color:rgba(124,58,237,0.55); color:#c4b5fd; background:rgba(124,58,237,0.10)}
.badge.free{border-color:rgba(34,197,94,0.45); color:#bbf7d0; background:rgba(34,197,94,0.08)}

.btn{
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  color:var(--text);
  padding:8px 10px;
  border-radius:10px;
  font-size:12px;
  cursor:pointer;
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
}
.btn:hover{border-color:rgba(255,255,255,0.22); background:rgba(255,255,255,0.06)}
.btn:active{transform: translateY(1px)}
.btn.primary{background:rgba(124,58,237,0.20); border-color:rgba(124,58,237,0.35)}
.btn.primary:hover{background:rgba(124,58,237,0.26); border-color:rgba(124,58,237,0.55)}
.btn.danger{background:rgba(239,68,68,0.12); border-color:rgba(239,68,68,0.30)}
.btn.danger:hover{border-color:rgba(239,68,68,0.50)}
.btn.small{padding:6px 8px; border-radius:9px; font-size:11px}

.layout{flex:1; display:grid; grid-template-columns: var(--leftW) 1fr var(--rightW); gap:10px; padding:10px; min-height:0; overflow:hidden}

.panel{
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(12,16,32,0.80), rgba(10,14,26,0.62));
  border-radius:14px;
  box-shadow: var(--shadow);
  overflow:hidden;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.panel.left.collapsed .panel-body,
.panel.left.collapsed .panel-footer{display:none;}
.panel.left.collapsed .search{display:none;}
.panel.left.collapsed .panel-headrow{justify-content:center;}
.panel.left.collapsed .panel-title{display:none;}
.panel.left.collapsed #btn-toggle-left{transform: rotate(180deg);}
.panel-header{
  padding:10px 10px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,0.18);
}
.panel-headrow{display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0}
.panel-header-left{display:flex; align-items:center; gap:8px; min-width:0}
.panel-title{font-size:12px; color:var(--muted); font-weight:700; letter-spacing:0.4px; text-transform:uppercase}
.panel-body{padding:10px; overflow:auto; flex:1; min-height:0}

/* Right panel needs a single independent scroll area (properties + alerts),
   keeping header/footer fixed so the user does not lose focus on the canvas. */
.panel-scroll{flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column}
.panel.right .panel-body{flex:0 0 auto; min-height:auto; overflow:visible}
.panel.right .arch-alerts{flex:0 0 auto}

.panel.left.collapsed .panel-body,
.panel.left.collapsed .panel-footer,
.panel.left.collapsed input.search{display:none;}
.panel.left.collapsed .panel-headrow{justify-content:center;}
.panel.left.collapsed .panel-header-left{justify-content:center;}
.panel.left.collapsed .panel-title{display:none;}
.panel.left.collapsed #btn-toggle-left{transform: rotate(180deg);}

.search{
  display:flex; gap:8px;
  padding:10px;
  border-bottom:1px solid var(--border);
}
.search input{
  flex:1;
  background:rgba(0,0,0,0.22);
  border:1px solid var(--border);
  color:var(--text);
  padding:8px 10px;
  border-radius:10px;
  font-size:12px;
  outline:none;
}
.search input:focus{border-color:rgba(124,58,237,0.55)}

.category{border:1px solid rgba(255,255,255,0.06); border-radius:12px; overflow:hidden; margin-bottom:10px}
.category-header{display:flex; align-items:center; justify-content:space-between; padding:10px; cursor:pointer; background:rgba(255,255,255,0.03)}
.category-header:hover{background:rgba(255,255,255,0.05)}
.category-title{font-weight:700; font-size:12px}
.category-count{font-size:11px; color:var(--muted)}
.category-items{padding:8px; display:grid; grid-template-columns:1fr; gap:8px}

.comp{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,0.22);
  cursor:pointer;
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
}
.comp:hover{transform: translateY(-1px); border-color:rgba(255,255,255,0.22); background:rgba(0,0,0,0.28)}
.comp-left{display:flex; align-items:center; gap:10px; min-width:0}
.comp-icon{width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.08); border-radius:12px; background:rgba(255,255,255,0.03); font-size:16px}
.comp-meta{display:flex; flex-direction:column; gap:2px; min-width:0}
.comp-name{font-weight:700; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.comp-desc{color:var(--muted); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.comp-right{display:flex; align-items:center; gap:6px; flex:0 0 auto}
.pill{font-size:10px; padding:3px 6px; border-radius:999px; border:1px solid var(--border2); color:var(--muted)}
.pill.pro{border-color:rgba(124,58,237,0.55); color:#c4b5fd}
.pill.cost{border-color:rgba(34,197,94,0.40); color:#bbf7d0}
.comp.disabled{opacity:0.55; filter:saturate(0.8); cursor:not-allowed}
.comp.disabled:hover{transform:none; border-color:var(--border); background:rgba(0,0,0,0.22)}

.work{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.work-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px;
  border-bottom:1px solid var(--border);
}
.tabs{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.tab{
  display:flex; align-items:center; gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(0,0,0,0.22);
  cursor:pointer;
  font-size:12px;
}
.tab.active{border-color:rgba(124,58,237,0.55); background:rgba(124,58,237,0.12)}
.tab .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.35)}
.tab.active .dot{background:rgba(124,58,237,0.9)}
.tab .name{max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.toolrow{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.toolgroup{display:flex; align-items:center; gap:6px; padding:6px; border:1px solid var(--border); border-radius:14px; background:rgba(0,0,0,0.18)}
.toolbtn{padding:6px 8px; border-radius:10px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); cursor:pointer; color:var(--text); font-size:12px}
.toolbtn.active{border-color:rgba(34,197,94,0.55); background:rgba(34,197,94,0.12)}

.canvas-wrap{flex:1; position:relative; overflow:hidden}

.spawn-ping{
  position:absolute;
  will-change:transform;
  contain: layout paint;
  width:0;
  height:0;
  pointer-events:none;
  z-index:40;
}

.spawn-ping-dot{
  position:absolute;
  left:0;
  top:0;
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(124,58,237,0.95);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 0 0 2px rgba(124,58,237,0.18), 0 14px 24px rgba(0,0,0,0.55);
  transform: translate(-50%,-50%);
}

.spawn-ping-ring{
  position:absolute;
  left:0;
  top:0;
  width:10px;
  height:10px;
  border-radius:999px;
  border:2px solid rgba(124,58,237,0.65);
  transform: translate(-50%,-50%) scale(1);
  animation: spawnRing 1.05s ease-out 0s 1;
}

@keyframes spawnRing{
  0%{opacity:0.95; transform: translate(-50%,-50%) scale(1);}
  100%{opacity:0; transform: translate(-50%,-50%) scale(7);}
}
.canvas{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 24px 24px;
}
.world{position:absolute; inset:0; transform-origin: 0 0; will-change: transform}
.ctx-layer{position:absolute; left:0; top:0; width:12000px; height:12000px; z-index:1}
.edges{position:absolute; left:0; top:0; width:12000px; height:12000px; overflow:visible; z-index:1; pointer-events:none}
.edges.edges-hit{z-index:2}
.layer{position:absolute; inset:0; z-index:3}

.node{
  position:absolute;
  will-change: auto;  /* OTIMIZAÇÃO: deixa auto, só ativa will-change durante arrasto */
  contain: layout paint style;
  min-width:180px;
  min-height:110px;
  border:1px solid var(--border2);
  border-radius:14px;
  background:rgba(10,14,26,0.84);
  box-shadow: 0 18px 35px rgba(0,0,0,0.55);
  overflow:hidden;
  cursor:grab;
  display:flex;
  flex-direction:column;
  user-select:none;
  /* OTIMIZAÇÕES GPU */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
.node.dragging{
  cursor:grabbing;
  will-change: transform;  /* OTIMIZAÇÃO: apenas durante arrasto */
  transform: translateZ(0);  /* Força camada GPU */
  box-shadow: none !important;
  filter: none !important;
  /* Desabilita animações pesadas durante arrasto */
  transition: none !important;
}

.node.flash{
  animation: nodeflash 1.05s ease-in-out 0s 2;
  border-color: rgba(34,197,94,0.65);
  box-shadow: 0 0 0 2px rgba(34,197,94,0.18), 0 18px 35px rgba(0,0,0,0.55);
}

@keyframes nodeflash{
  0%{transform: translateZ(0); filter: brightness(1.0);}
  45%{filter: brightness(1.25);}
  100%{transform: translateZ(0); filter: brightness(1.0);}
}

.node.flash{
  box-shadow: 0 0 0 2px rgba(124,58,237,0.55), 0 0 0 10px rgba(124,58,237,0.10), 0 18px 35px rgba(0,0,0,0.55);
  animation: nodeflash 1.15s ease-out 1;
}

@keyframes nodeflash{
  0%{transform: scale(1.02);}
  55%{transform: scale(1.01);}
  100%{transform: scale(1.0);}
}

.node:active{cursor:grabbing}

.node .resizer{
  position:absolute;
  right:2px;
  bottom:2px;
  width:14px;
  height:14px;
  cursor:nwse-resize;
  opacity:0.65;
  touch-action:none;
}
.node .resizer::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, transparent 0 55%, rgba(255,255,255,0.28) 55% 60%, transparent 60% 70%, rgba(255,255,255,0.18) 70% 75%, transparent 75% 100%);
  border-radius:3px;
}
.node:hover .resizer{opacity:0.95}
.node .port{
  position:absolute;
  width:12px;height:12px;
  border-radius:999px;
  background:rgba(124,58,237,0.95);
  border:1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 18px rgba(0,0,0,0.55);
  cursor:crosshair;
  user-select:none;
  touch-action:none;
}
.node .port::after{
  content:'';
  position:absolute;
  left:-10px;top:-10px;right:-10px;bottom:-10px;
  border-radius:999px;
  background:rgba(124,58,237,0.16);
  opacity:0;
  transition:opacity .15s ease;
}
.node:hover .port::after{opacity:1}
.node .port.out{right:-7px; top:50%; transform:translateY(-50%)}
.node .port.out:active{transform:translateY(-50%) scale(0.95)}

.node.selected{border-color:rgba(124,58,237,0.85); box-shadow:0 0 0 2px rgba(124,58,237,0.25), 0 18px 35px rgba(0,0,0,0.55)}
.node.connect-target{border-color:rgba(34,197,94,0.85); box-shadow:0 0 0 2px rgba(34,197,94,0.22), 0 18px 35px rgba(0,0,0,0.55)}

@keyframes nodePulse{
  0%{box-shadow:0 0 0 0 rgba(124,58,237,0.0), 0 18px 35px rgba(0,0,0,0.55)}
  35%{box-shadow:0 0 0 4px rgba(124,58,237,0.28), 0 18px 35px rgba(0,0,0,0.55)}
  70%{box-shadow:0 0 0 10px rgba(124,58,237,0.10), 0 18px 35px rgba(0,0,0,0.55)}
  100%{box-shadow:0 0 0 0 rgba(124,58,237,0.0), 0 18px 35px rgba(0,0,0,0.55)}
}
.node.flash{border-color:rgba(124,58,237,0.95); animation: nodePulse 1.05s ease-out 0s 1;}

.node.st-creating{border-color: rgba(56,189,248,0.55); box-shadow: 0 18px 35px rgba(56,189,248,0.10), 0 0 0 1px rgba(56,189,248,0.12) inset}
.node.st-running{border-color: rgba(34,197,94,0.65); box-shadow: 0 18px 35px rgba(34,197,94,0.12), 0 0 0 1px rgba(34,197,94,0.14) inset}
.node.st-success{border-color: rgba(124,58,237,0.70); box-shadow: 0 18px 35px rgba(124,58,237,0.12), 0 0 0 1px rgba(124,58,237,0.14) inset}

.node-header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; border-bottom:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03)}
.node-title{display:flex; align-items:center; gap:8px; min-width:0}
.node-icon{width:26px;height:26px;border-radius:10px;border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:center}
.node-name{font-weight:800; font-size:clamp(12px, calc(12px * var(--inv-zoom, 1)), 17px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.node-kind{font-size:clamp(10px, calc(10px * var(--inv-zoom, 1)), 14px);color:var(--muted)}
.node-body{padding:10px; display:flex; flex-direction:column; gap:8px; flex:1; overflow:auto}
.kv{display:flex; justify-content:space-between; gap:10px; font-size:clamp(11px, calc(11px * var(--inv-zoom, 1)), 15px); color:var(--muted)}
.kv span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.kv b{color:var(--text); font-weight:700; max-width:58%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right;}
.node-footer{padding:10px; border-top:1px solid rgba(255,255,255,0.08); display:flex; gap:8px; justify-content:space-between; align-items:center}
.node-footer-right{display:flex; gap:8px; align-items:center}
.costpill{font-size:clamp(11px, calc(11px * var(--inv-zoom, 1)), 14px); font-weight:800; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); background:rgba(124,58,237,0.10); color:rgba(255,255,255,0.92)}
.nodebtn{border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03); color:var(--text); font-size:clamp(11px, calc(11px * var(--inv-zoom, 1)), 14px); padding:6px 8px; border-radius:10px; cursor:pointer}
.nodebtn:hover{border-color:rgba(255,255,255,0.22)}
.nodebtn.danger{border-color:rgba(239,68,68,0.30); background:rgba(239,68,68,0.10)}

.props{display:flex; flex-direction:column; gap:12px}
.section{border:1px solid rgba(255,255,255,0.06); border-radius:14px; overflow:hidden}
.section-h{padding:10px; display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,0.03); border-bottom:1px solid rgba(255,255,255,0.06)}
.section-h .t{font-size:12px;font-weight:800}
.section-b{padding:10px; display:flex; flex-direction:column; gap:10px}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:11px; color:var(--muted)}
.field input,.field select, .field textarea{
  width:100%;
  background:rgba(0,0,0,0.22);
  border:1px solid var(--border);
  color:var(--text);
  padding:8px 10px;
  border-radius:10px;
  font-size:12px;
  outline:none;
}
.field textarea{min-height:72px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(124,58,237,0.55)}
.inline{display:flex; gap:10px}
.inline .field{flex:1}

.kpis{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.kpi{border:1px solid rgba(255,255,255,0.06); border-radius:14px; background:rgba(0,0,0,0.22); padding:10px; display:flex; flex-direction:column; gap:4px}
.kpi .label{font-size:11px;color:var(--muted)}
.kpi .value{font-size:16px;font-weight:900}
.kpi .hint{font-size:11px;color:var(--muted)}

.alerts{display:flex; flex-direction:column; gap:8px}
.alert{border:1px solid rgba(255,255,255,0.06); border-radius:14px; background:rgba(0,0,0,0.22); padding:10px; display:flex; flex-direction:column; gap:5px}
.alert .h{display:flex; align-items:center; justify-content:space-between; gap:8px}
.alert .sev{font-size:10px; padding:3px 6px; border-radius:999px; border:1px solid rgba(255,255,255,0.12)}
.alert .sev.high{border-color:rgba(239,68,68,0.55); color:#fecaca; background:rgba(239,68,68,0.10)}
.alert .sev.med{border-color:rgba(245,158,11,0.55); color:#fde68a; background:rgba(245,158,11,0.10)}
.alert .sev.low{border-color:rgba(34,197,94,0.45); color:#bbf7d0; background:rgba(34,197,94,0.08)}
.alert .title{font-size:12px;font-weight:800}
.alert .msg{font-size:11px;color:var(--muted); line-height:1.25}

.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,0.62); display:none; align-items:center; justify-content:center; padding:16px; z-index:50}
.modal{width:min(1040px, 96vw); height:min(720px, 92vh); border-radius:16px; border:1px solid var(--border2); background:linear-gradient(180deg, rgba(12,16,32,0.92), rgba(10,14,26,0.82)); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column}
.modal-top{padding:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--border)}
.modal-title{font-size:13px;font-weight:900}
.modal-body{padding:12px; overflow:auto; display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.chart{border:1px solid rgba(255,255,255,0.06); border-radius:14px; background:rgba(0,0,0,0.20); padding:10px}
.chart .ct{font-size:11px;color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:0.4px; margin-bottom:6px}
.chart canvas{width:100%; height:220px; border-radius:12px; background:rgba(0,0,0,0.12)}

.toast{position:fixed; right:16px; bottom:16px; display:none; flex-direction:column; gap:8px; z-index:60}
.toast .item{border:1px solid rgba(255,255,255,0.10); background:rgba(10,14,26,0.88); padding:10px 12px; border-radius:14px; max-width:380px; box-shadow:var(--shadow)}
.toast .item .t{font-size:12px;font-weight:900; margin-bottom:2px}
.toast .item .m{font-size:11px;color:var(--muted)}

@media (max-width: 1180px){
  .layout{grid-template-columns: var(--leftW) 1fr; grid-template-rows: 1fr 360px}
  .panel.right{grid-column: 1 / -1}
}
@media (max-width: 820px){
  .layout{grid-template-columns: 1fr; grid-template-rows: 380px 1fr 420px}
}

line.edge, path.edge{stroke:rgba(255,255,255,0.22);stroke-width:2; fill:none; pointer-events:none;
  /* OTIMIZAÇÃO: Renderização GPU para edges */
  will-change: auto;  /* Não força will-change sempre */
  transform: translateZ(0);
}
.edge-hit{fill:none; stroke:rgba(255,255,255,0.001); stroke-width: 34; stroke-linecap:round; stroke-linejoin:round; pointer-events:stroke}
.edge.edge-selected{filter: drop-shadow(0 0 10px rgba(124,58,237,0.75)); stroke-width:3.2}

line.edge.hot, path.edge.hot{stroke:rgba(34,197,94,0.85);stroke-width:2.5}
line.edge.sel, path.edge.sel{stroke:rgba(124,58,237,0.95);stroke-width:2.5}
path.edge.flow{stroke-dasharray:8 8; animation: infralabs_dash 2.2s linear infinite;}
@keyframes infralabs_dash{to{stroke-dashoffset:-32}}
/* OTIMIZAÇÃO: Desabilita animação de edges quando estiver arrastando */
body.is-dragging path.edge.flow{animation: none; stroke-dasharray: none; stroke-dashoffset: 0;}
circle.flow-dot{fill:rgba(124,58,237,0.95); filter: drop-shadow(0 0 6px rgba(124,58,237,0.55)); pointer-events:none;}
/* OTIMIZAÇÃO: Oculta flow-dots durante arrasto */
body.is-dragging circle.flow-dot{display: none;}

.layer{position:absolute; inset:0; z-index:3}

.section-header{padding:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:14px; cursor:pointer}
.section-body{padding:10px; display:flex; flex-direction:column; gap:10px}
.section-title{font-size:12px; font-weight:800; display:flex; align-items:center; gap:8px; color:var(--text)}
.section.collapsed .section-body{display:none}

.palette-item{width:100%; text-align:left; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); color:var(--text); border-radius:14px; padding:10px; cursor:pointer}
.palette-item:hover{border-color:rgba(255,255,255,0.18); background:rgba(255,255,255,0.03)}
.palette-item.disabled{opacity:0.45; cursor:not-allowed}
.palette-item-row{display:flex; align-items:center; gap:8px}
.palette-ico{width:24px; height:24px; border-radius:10px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03)}
.palette-label{font-weight:800; font-size:12px; flex:1}
.palette-desc{margin-top:6px; font-size:11px; color:var(--muted); line-height:1.3}
.pro-pill{font-size:10px; font-weight:900; padding:2px 8px; border-radius:999px; border:1px solid rgba(124,58,237,0.45); background:rgba(124,58,237,0.14)}

.badge{font-size:10px; font-weight:900; padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04)}

.chart-card{border:1px solid rgba(255,255,255,0.06); border-radius:16px; background:rgba(0,0,0,0.20); padding:12px; display:flex; flex-direction:column; gap:10px}
.chart-title{font-size:11px; font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px}
canvas.chart{width:100%; height:240px; border-radius:14px; background:rgba(0,0,0,0.14); border:1px solid rgba(255,255,255,0.05); padding:0; display:block}

.muted{color:var(--muted); font-size:12px; line-height:1.35}
.card{border:1px solid rgba(255,255,255,0.06); border-radius:14px; background:rgba(0,0,0,0.18); padding:10px}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 900px){
  .grid{grid-template-columns:1fr}
}

.alert.info{border-color:rgba(59,130,246,0.25)}
.alert.warn{border-color:rgba(245,158,11,0.35)}
.alert.danger{border-color:rgba(239,68,68,0.40)}
.alert .t{font-weight:900; font-size:12px}
.alert .msg{font-size:11px; color:var(--muted); line-height:1.25}

/* ---------------------------------------------------------------------
   HTML class mapping fixes
   The InfraLabs HTML uses newer class names; the original CSS used older
   names. The rules below ensure everything is styled and the canvas
   has a visible, correctly sized drawing area.
--------------------------------------------------------------------- */

/* topbar actions */
.top-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}

/* tabs bar */
.tabsbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px;
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,0.10);
}
.tabs-actions{display:flex; align-items:center; gap:10px}

/* panels */
.panel.left .panel-header, .panel.right .panel-header{gap:10px}
.panel-header .search{
  width:100%;
  background:rgba(0,0,0,0.22);
  border:1px solid var(--border);
  color:var(--text);
  padding:8px 10px;
  border-radius:10px;
  font-size:12px;
  outline:none;
}
.panel-header .search:focus{border-color:rgba(124,58,237,0.55)}
.panel-footer{
  padding:10px;
  border-top:1px solid var(--border);
  background:rgba(0,0,0,0.12);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.panel-footer .hint{font-size:11px; color:var(--muted)}

/* workspace (center) should look like a panel too */
.workspace{
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(12,16,32,0.80), rgba(10,14,26,0.62));
  border-radius:14px;
  box-shadow: var(--shadow);
  overflow:hidden;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.workspace-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  padding:10px;
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,0.12);
}

/* canvas must occupy the main area */
.canvas-wrap{flex:1; position:relative; min-height:320px}
.canvas{border-bottom:1px solid rgba(255,255,255,0.06)}

/* consequences area */
.consequences{display:none;
  padding:10px;
  border-top:1px solid var(--border);
  background:rgba(0,0,0,0.12);
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
}
.consequences .kpi{padding:12px}
.kpi-label{font-size:11px; color:var(--muted); font-weight:700; letter-spacing:0.4px; text-transform:uppercase}
.kpi-value{font-size:16px; font-weight:900}
.kpi-sub{font-size:11px; color:var(--muted)}
.consequences .alerts{grid-column:1 / -1}

/* file input button */
.file-btn{position:relative; overflow:hidden}
.file-btn input[type="file"]{position:absolute; inset:0; opacity:0; cursor:pointer}

/* small responsive tweak */
@media (max-width: 1100px){
  .layout{grid-template-columns: 1fr;}
  .panel.left, .panel.right{min-height:280px}
  .consequences{display:none;grid-template-columns:repeat(2, minmax(0, 1fr));}
}

.modal{position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center}
.modal[aria-hidden="true"]{display:none}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,0.62)}
.modal-card{position:relative; width:min(1040px, 96vw); height:min(720px, 92vh); border-radius:16px; border:1px solid var(--border2); background:linear-gradient(180deg, rgba(12,16,32,0.92), rgba(10,14,26,0.82)); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column}
.modal-header{padding:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--border)}
.modal-title{font-size:13px; font-weight:900}
.modal-sub{font-size:11px; color:var(--muted)}
.modal-body{padding:12px; overflow:auto; display:grid; grid-template-columns:1fr 1fr; gap:12px}

/* ---------------------------------------------------------------------
   UI Enhancements (v4): floating + resizable dashboard, better canvas
   pan/zoom, collapsible panels, consistent scrollbars
--------------------------------------------------------------------- */

.panel-header-left{display:flex; align-items:center; gap:10px; min-width:0}
.iconbtn{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  color:var(--text);
  width:28px;
  height:28px;
  border-radius:10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.iconbtn:hover{border-color:rgba(255,255,255,0.22); background:rgba(255,255,255,0.06)}

.iconbtn-big{width:34px; height:34px; border-radius:12px; font-weight:800}

/* Collapsible properties panel */
.panel.right{position:relative;}
.panel.right.collapsed .panel-body,
.panel.right.collapsed .panel-footer,
.panel.right.collapsed #selected-pill{display:none !important;}
.panel.right.collapsed .arch-alerts{display:none !important;}
.panel.right.collapsed .panel-headrow{justify-content:center;}
.panel.right.collapsed .panel-title{display:none;}
.panel.right.collapsed #btn-toggle-props{transform: rotate(180deg);}
/* Better scrollbar */
.panel-body, .dash-body{scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) rgba(0,0,0,0.20)}
.panel-body::-webkit-scrollbar, .dash-body::-webkit-scrollbar{width:10px;height:10px}
.panel-body::-webkit-scrollbar-thumb, .dash-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.16); border-radius:999px; border:2px solid rgba(0,0,0,0.30)}
.panel-body::-webkit-scrollbar-track, .dash-body::-webkit-scrollbar-track{background:rgba(0,0,0,0.18)}

/* Canvas interaction improvements */
.canvas, .world, .layer, .edges, .node{touch-action:none; user-select:none;}
.canvas{cursor:grab;}
.canvas.panning{cursor:grabbing;}
.canvas.connecting{cursor:crosshair;}

/* Palette sections collapsed by default */
.section.collapsed .section-body{display:none;}
.section-header::after{
  content:'▾';
  color:rgba(255,255,255,0.55);
  font-size:12px;
  margin-left:10px;
  transition: transform .12s ease;
}
.section.collapsed .section-header::after{transform: rotate(-90deg)}

/* Floating dashboard window */

/* KPI modal (floating, draggable, resizable) */
.kpi-modal{position:fixed; inset:0; z-index:85; pointer-events:none;}
.kpi-modal[aria-hidden="true"]{display:none;}
.kpi-card{
  pointer-events:auto;
  position:absolute;
  left:120px;
  top:96px;
  width:560px;
  height:260px;
  min-width:420px;
  min-height:220px;
  border-radius:16px;
  border:1px solid var(--border2);
  background:linear-gradient(180deg, rgba(12,16,32,0.94), rgba(10,14,26,0.84));
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  resize: both;
}
.kpi-header{padding:12px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); cursor:move; user-select:none;}
.kpi-body{padding:12px; overflow:auto;}
.kpi-grid{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px;}
.kpi-hint{margin-top:10px; font-size:12px; color:var(--muted);}
.dash{position:fixed; inset:0; z-index:80; pointer-events:none;}
.dash[aria-hidden="true"]{display:none;}
.dash-card{
  pointer-events:auto;
  position:absolute;
  left:60px;
  top:80px;
  width:min(1180px, calc(100vw - 120px));
  height:min(720px, calc(100vh - 160px));
  min-width:640px;
  min-height:420px;
  border-radius:16px;
  border:1px solid var(--border2);
  background:linear-gradient(180deg, rgba(12,16,32,0.94), rgba(10,14,26,0.84));
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  resize: both;
}
.dash-header{padding:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--border); cursor:grab;}
.dash-header:active{cursor:grabbing;}
.dash-actions{display:flex; gap:8px; align-items:center}
.dash-body{padding:12px; overflow:auto; flex:1; min-height:0}
.dash-footer{padding:10px 12px; border-top:1px solid var(--border); background:rgba(0,0,0,0.10)}

/* Charts: more readable */
canvas.chart{
  width:100%;
  height:260px;
  border-radius:14px;
  background:rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.07);
}

@media (max-width: 900px){
  .dash-card{min-width: 92vw; left:4vw; width:92vw;}
}
/* Pipeline runner (floating) */
.pipe-run{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:70;
  display:none;
}
.pipe-run[aria-hidden="false"]{display:block}
.pipe-card{
  position:absolute;
  left:80px;
  top:120px;
  width:520px;
  height:380px;
  min-width:360px;
  min-height:240px;
  resize:both;
  overflow:hidden;
  pointer-events:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(6,9,18,0.88);
  box-shadow:0 30px 70px rgba(0,0,0,0.60);
  backdrop-filter: blur(10px);
}
.pipe-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  cursor:move;
  user-select:none;
  touch-action:none;
}
.pipe-title{font-weight:800; letter-spacing:0.2px}
.pipe-sub{font-size:12px; color:rgba(255,255,255,0.60); margin-top:2px}
.pipe-body{
  height:calc(100% - 52px);
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:12px;
  padding:12px;
}
.pipe-steps, .pipe-logs{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  background:rgba(255,255,255,0.02);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.pipe-section-title{
  padding:10px 12px;
  font-size:12px;
  font-weight:800;
  letter-spacing:0.12em;
  color:rgba(255,255,255,0.70);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.pipe-steps-list{
  overflow:auto;
  padding:10px 10px 12px 10px;
  min-height:0;
}
.pipe-step{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:10px 10px;
  background:rgba(0,0,0,0.12);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.pipe-step:last-child{margin-bottom:0}
.pipe-step-name{font-weight:800; font-size:13px}
.pipe-step-meta{font-size:12px; color:rgba(255,255,255,0.60); margin-top:2px}
.pipe-badge{
  font-size:11px;
  font-weight:900;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.85);
  background:rgba(255,255,255,0.04);
  white-space:nowrap;
}
.pipe-badge.running{border-color:rgba(34,197,94,0.40); background:rgba(34,197,94,0.10)}
.pipe-badge.creating{border-color:rgba(124,58,237,0.45); background:rgba(124,58,237,0.12)}
.pipe-badge.success{border-color:rgba(34,197,94,0.55); background:rgba(34,197,94,0.16)}
.pipe-badge.fail{border-color:rgba(239,68,68,0.50); background:rgba(239,68,68,0.16)}
.pipe-logs-area{
  overflow:auto;
  padding:10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  color:rgba(255,255,255,0.78);
  white-space:pre-wrap;
  line-height:1.35;
  min-height:0;
}
.edge.flow.active{stroke: rgba(34,197,94,0.95); stroke-width:3.2;}
.flow-dot{fill: rgba(124,58,237,0.92)}
.edge.flow.active + .flow-dot{fill: rgba(34,197,94,0.95)}

/* Top KPIs (header) */
.top-kpis{display:flex; align-items:flex-end; gap:10px; padding:6px 10px; border:1px solid var(--border); border-radius:14px; background:rgba(0,0,0,0.18); backdrop-filter: blur(8px)}
.top-kpi{display:flex; flex-direction:column; gap:2px; min-width:70px}
.top-kpi-label{font-size:10px; color:var(--muted); font-weight:700; letter-spacing:0.2px; text-transform:uppercase}
.top-kpi-value{font-size:13px; font-weight:800}
.top-kpi-sub{font-size:10px; color:rgba(255,255,255,0.65); max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width: 1100px){.top-kpis{display:none}}


/* Left collapsed handle */
.canvas-wrap{position:relative}
.left-handle{position:absolute; left:10px; top:10px; z-index:25; width:40px; height:40px; border-radius:14px; border:1px solid var(--border); background:rgba(0,0,0,0.35); color:var(--text); display:none; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,0.35)}
.left-handle:hover{filter:brightness(1.12)}

.right-handle{position:absolute; right:10px; top:10px; z-index:25; width:40px; height:40px; border-radius:14px; border:1px solid var(--border); background:rgba(0,0,0,0.35); color:var(--text); display:none; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,0.35)}
.right-handle:hover{filter:brightness(1.12)}
body.left-collapsed .left-handle{display:flex}
body.props-collapsed .right-handle{display:flex}


/* Architecture alerts (right panel) */
.arch-alerts{padding:10px; border-top:1px solid var(--border); background:rgba(0,0,0,0.12)}
.arch-alerts-title{font-size:11px; color:var(--muted); font-weight:800; letter-spacing:0.25px; text-transform:uppercase; margin-bottom:8px}
.arch-alerts-body{display:flex; flex-direction:column; gap:8px; max-height:260px; overflow:auto}

#btn-toggle-left{width:30px; height:30px; border-radius:10px}
#btn-toggle-left-toolbar{font-size:14px}

/* Select (cloud) */
.select{
  height:34px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(0,0,0,0.25);
  color:var(--text);
  padding:0 10px;
  font-weight:700;
  font-size:12px;
  outline:none;
}
.select:focus{box-shadow:0 0 0 3px rgba(99,102,241,0.25)}

/* Drive menu */
.drive-menu{
  position:fixed;
  top:64px;
  right:16px;
  width:320px;
  background:rgba(10,10,12,0.92);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,0.45);
  z-index:9999;
  padding:14px;
  backdrop-filter: blur(10px);
}
.drive-menu.hidden{display:none}
.drive-menu-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.drive-menu-title{font-weight:900; font-size:13px; letter-spacing:0.2px}
.drive-menu-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.drive-status{margin-top:10px; font-size:12px; color:var(--muted); min-height:18px}

/* Trace modal */
.trace-modal{
  position:fixed;
  inset:0;
  z-index:85;
  pointer-events:none;
}
.trace-modal.hidden{display:none}
.trace-card{
  pointer-events:auto;
  position:absolute;
  left:calc(100vw - 560px);
  top:96px;
  width:520px;
  height:620px;
  min-width:360px;
  min-height:260px;
  background:rgba(10,10,12,0.92);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,0.55);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  resize: both;
}
.trace-header{display:flex; justify-content:space-between; align-items:center; padding:14px 14px 12px; border-bottom:1px solid var(--border); cursor:move; user-select:none; touch-action:none}
.trace-body{flex:1; min-height:0; padding:14px; overflow:hidden}
.trace-cols{display:grid; grid-template-columns:320px 1fr; gap:12px; height:100%; min-height:0}
@media (max-width: 640px){
  .trace-cols{grid-template-columns:1fr}
}
.trace-col{background:rgba(0,0,0,0.22); border:1px solid var(--border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; min-height:0}
.trace-col-title{font-size:11px; font-weight:900; letter-spacing:0.25px; text-transform:uppercase; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--border)}
.trace-list{flex:1; overflow:auto; padding:10px}
.trace-item{width:100%; text-align:left; padding:10px 10px; border-radius:12px; border:1px solid transparent; background:rgba(0,0,0,0.2); color:var(--text); cursor:pointer; margin-bottom:10px}
.trace-item:hover{border-color:rgba(99,102,241,0.55); filter:brightness(1.06)}
.trace-item.active{border-color:rgba(99,102,241,0.9); box-shadow:0 0 0 3px rgba(99,102,241,0.18)}
.trace-item-title{font-weight:900; font-size:12px}
.trace-item-sub{font-size:11px; color:var(--muted); margin-top:3px}
.trace-log{flex:1; overflow:auto; padding:10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; font-size:12px; line-height:1.45}
.trace-line{padding:6px 0; border-bottom:1px dashed rgba(255,255,255,0.07)}
.trace-line:last-child{border-bottom:none}

/* KPI breakdown */
.kpi-extra{margin-top:12px; border-top:1px solid var(--border); padding-top:12px}
.kpi-extra-row{display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border:1px solid var(--border); border-radius:14px; background:rgba(0,0,0,0.18)}
.kpi-extra-label{font-size:11px; font-weight:900; letter-spacing:0.25px; text-transform:uppercase; color:var(--muted)}
.kpi-extra-value{font-weight:900}
.kpi-breakdown{margin-top:10px}
.kpi-breakdown-list{display:flex; flex-direction:column; gap:8px; max-height:180px; overflow:auto}
.kpi-breakdown-item{display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border:1px solid var(--border); border-radius:14px; background:rgba(0,0,0,0.16)}
.kpi-breakdown-item .k{font-size:12px; font-weight:800}
.kpi-breakdown-item .v{font-size:12px; color:var(--muted); font-weight:800}

/* Trace highlight on canvas */
.node.trace-hot{outline:3px solid rgba(250,204,21,0.9); box-shadow:0 0 0 5px rgba(250,204,21,0.15)}
.edge.trace-hot{stroke:rgba(250,204,21,0.95) !important; stroke-width:3.2 !important}

.dialog-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.62);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:10000;
}
.dialog-overlay.hidden{display:none}
.dialog-card{
  width:min(520px, calc(100vw - 32px));
  border-radius:18px;
  border:1px solid var(--border2);
  background:linear-gradient(180deg, rgba(12,16,32,0.96), rgba(10,14,26,0.86));
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.dialog-header{
  padding:12px 12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid var(--border);
}
.dialog-title{font-size:13px;font-weight:950;letter-spacing:0.2px}
.dialog-sub{font-size:11px;color:rgba(255,255,255,0.56);margin-top:2px}
.dialog-body{padding:12px; display:block}
.dialog-msg{font-size:12px; color:rgba(255,255,255,0.88); line-height:1.45}
.dialog-footer{
  padding:12px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  border-top:1px solid var(--border);
  background:rgba(0,0,0,0.14);
}
.btn.primary{
  background:linear-gradient(180deg, rgba(124,58,237,0.95), rgba(92,29,207,0.92));
  border:1px solid rgba(255,255,255,0.10);
}
.btn.danger{
  background:linear-gradient(180deg, rgba(239,68,68,0.92), rgba(185,28,28,0.88));
  border:1px solid rgba(255,255,255,0.10);
}

.toast-wrap{
  position:fixed;
  right:16px;
  bottom:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:10001;
  pointer-events:none;
}
.toast{
  pointer-events:none;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.68);
  color:rgba(255,255,255,0.92);
  font-size:12px;
  font-weight:700;
  box-shadow:0 18px 45px rgba(0,0,0,0.55);
  transform:translateY(0);
  opacity:1;
  transition:opacity .22s ease, transform .22s ease;
}
.toast.hide{opacity:0; transform:translateY(8px)}
.toast.ok{border-color:rgba(34,197,94,0.25)}
.toast.warn{border-color:rgba(245,158,11,0.25)}
.toast.err{border-color:rgba(239,68,68,0.25)}

/* K8s Steps Tree (hierarchical editor) */
.steps-tree{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.step-tree-item{
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.22);
  border-radius:16px;
  padding:10px 10px 10px 10px;
}
.step-tree-item .step-top{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.step-tree-item .step-top input{
  flex:1;
  min-width:160px;
}
.step-tree-item textarea{
  width:100%;
  margin-top:8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.18);
  color:rgba(255,255,255,0.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  padding:10px;
}
.step-tree-item textarea.error{
  border-color:rgba(239,68,68,0.55);
}

.ctx-menu{position:fixed; z-index:9999; min-width:220px; background:rgba(10,14,26,0.98); border:1px solid rgba(255,255,255,0.16); border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,0.60); padding:6px; backdrop-filter: blur(10px)}
.ctx-menu.hidden{display:none}
.ctx-title{padding:8px 10px; font-size:12px; font-weight:800; color:rgba(230,233,245,0.86)}
.ctx-item{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 10px; border-radius:12px; cursor:pointer; font-size:13px; color:rgba(255,255,255,0.90)}
.ctx-item:hover{background:rgba(255,255,255,0.06)}
.ctx-item .left{display:flex; align-items:center; gap:10px}
.ctx-sep{height:1px; background:rgba(255,255,255,0.10); margin:6px 4px; border-radius:999px}
.ctx-kbd{font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.70)}
.ctx-check{font-weight:900; color:rgba(34,197,94,0.95)}
.divider{margin:12px 0 6px;padding-top:10px;border-top:1px solid var(--border);font-weight:800;font-size:12px;letter-spacing:0.04em;text-transform:uppercase;color:rgba(230,233,245,0.9)}

.lasso{position:absolute; z-index:30; pointer-events:none; border:2px dashed rgba(124,58,237,0.85); background:rgba(124,58,237,0.10); border-radius:12px; box-shadow:0 0 0 2px rgba(124,58,237,0.10) inset}
.lasso.hidden{display:none}

.minimap{position:fixed; right:14px; bottom:14px; z-index:80; width:240px; border-radius:16px; border:1px solid rgba(255,255,255,0.12); background:rgba(0,0,0,0.22); box-shadow:0 18px 45px rgba(0,0,0,0.45); overflow:hidden; backdrop-filter: blur(10px)}
.minimap-head{display:flex; cursor:move; user-select:none; touch-action:none; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-bottom:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.03)}
.minimap-title{font-size:12px; font-weight:900; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.82)}
.minimap-btn{border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.90); border-radius:12px; width:32px; height:28px; cursor:pointer; font-weight:900}
.minimap-btn:hover{border-color:rgba(255,255,255,0.22)}
.minimap canvas{display:block; width:100%; height:170px}

.cmdk{position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center}
.cmdk.hidden{display:none}
.cmdk-backdrop{position:absolute; inset:0; background:rgba(0,0,0,0.62)}
.cmdk-card{position:relative; width:min(720px, calc(100vw - 36px)); max-height:min(560px, calc(100vh - 40px)); background:rgba(10,14,26,0.98); border:1px solid rgba(255,255,255,0.14); border-radius:18px; box-shadow:0 22px 70px rgba(0,0,0,0.72); overflow:hidden; display:flex; flex-direction:column}
.cmdk-top{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,0.10)}
.cmdk-title{font-weight:900; letter-spacing:0.06em; text-transform:uppercase; font-size:12px; color:rgba(255,255,255,0.88)}
.cmdk-hints{font-size:12px; font-weight:800; color:rgba(255,255,255,0.55)}
.cmdk-input{width:100%; padding:14px 14px; font-size:14px; font-weight:700; border:none; outline:none; color:rgba(255,255,255,0.92); background:rgba(0,0,0,0.18); border-bottom:1px solid rgba(255,255,255,0.10)}
.cmdk-list{overflow:auto; padding:8px}
.cmdk-item{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:12px 12px; border-radius:14px; cursor:pointer}
.cmdk-item:hover{background:rgba(255,255,255,0.06)}
.cmdk-item.active{background:rgba(124,58,237,0.16); box-shadow:0 0 0 1px rgba(124,58,237,0.24) inset}
.cmdk-left{min-width:0}
.cmdk-main{font-weight:900; font-size:13px; color:rgba(255,255,255,0.92)}
.cmdk-sub{margin-top:2px; font-size:12px; color:rgba(255,255,255,0.58)}
.cmdk-tag{font-size:11px; font-weight:900; padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.70); white-space:nowrap}
.cmdk-footer{padding:10px 14px; border-top:1px solid rgba(255,255,255,0.10); font-size:12px; font-weight:800; color:rgba(255,255,255,0.56)}

.hand-cursor{
  position:absolute;
  left:0;
  top:0;
  width:18px;
  height:18px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,0.78);
  background: rgba(124,58,237,0.35);
  box-shadow: 0 0 0 4px rgba(124,58,237,0.18), 0 18px 30px rgba(0,0,0,0.55);
  transform: translate(-50%,-50%);
  pointer-events:none;
  z-index:9998;
  opacity:0;
  transition: opacity .12s ease, transform .06s linear;
}

.hand-cursor.down{
  background: rgba(34,197,94,0.32);
  box-shadow: 0 0 0 4px rgba(34,197,94,0.16), 0 18px 30px rgba(0,0,0,0.55);
}

.hand-hud{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:9997;
  border:1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(12,16,32,0.86), rgba(10,14,26,0.72));
  border-radius:14px;
  box-shadow: var(--shadow);
  padding:10px 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width: 210px;
  opacity:0;
  transform: translateY(6px);
  transition: opacity .14s ease, transform .14s ease;
}

.hand-hud.on{
  opacity:1;
  transform: translateY(0px);
}

.hand-hud-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
}

.hand-hud-title{
  font-weight:800;
  letter-spacing:0.2px;
}

.hand-hud-status{
  font-weight:800;
  color:#bbf7d0;
  border:1px solid rgba(34,197,94,0.42);
  background: rgba(34,197,94,0.10);
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
}

.hand-hud-status.off{
  color:#cbd5e1;
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
}

.hand-hud-kbd{
  color:var(--muted);
  font-size:11px;
}

.hand-preview{
  width:210px;
  height:140px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
}

.hand-preview video{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scaleX(-1);
}

.hand-toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform: translateX(-50%);
  z-index:9999;
  border:1px solid rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.14);
  color: #fecaca;
  padding:10px 12px;
  border-radius:12px;
  font-size:12px;
  max-width: 780px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.55);
  opacity:0;
  pointer-events:none;
  transition: opacity .14s ease;
}

.hand-toast.on{opacity:1;}
.hand-hud-row2{display:flex; align-items:center; justify-content:flex-start; font-size:11px}
.hand-hud-mode{font-weight:900; color:rgba(255,255,255,0.78)}

.hand-cursor.mode-pan{border-color:rgba(56,189,248,0.85); box-shadow:0 0 0 4px rgba(56,189,248,0.16), 0 18px 30px rgba(0,0,0,0.55)}
.hand-cursor.mode-select{border-color:rgba(250,204,21,0.90); box-shadow:0 0 0 4px rgba(250,204,21,0.16), 0 18px 30px rgba(0,0,0,0.55)}
.hand-cursor.mode-zoom{border-color:rgba(167,139,250,0.90); box-shadow:0 0 0 4px rgba(167,139,250,0.16), 0 18px 30px rgba(0,0,0,0.55)}

.hand-cursor.resize{
  background: rgba(249,115,22,0.30);
  box-shadow: 0 0 0 4px rgba(249,115,22,0.16), 0 18px 30px rgba(0,0,0,0.55);
}

.hand-cursor.mode-select{
  border-color: rgba(34,197,94,0.85);
}

.hand-cursor.mode-pan{
  border-color: rgba(59,130,246,0.85);
}

.hand-cursor.mode-pointer{
  border-color: rgba(255,255,255,0.78);
}