/* ==========================================================================
   Linkiir Grid — product UI recreations (HTML/CSS renditions of the console)
   Faithful to the shipped dark console: sidebar, dashboard, workflow builder,
   schema editor, script editor. Rendered in markup so it stays crisp,
   responsive and animatable.
   ========================================================================== */

.gu {
  --gu-bg:      #0a0a0a;
  --gu-panel:   #121212;
  --gu-panel-2: #171717;
  --gu-hover:   #1e1e1e;
  --gu-line:    #262626;
  --gu-line-2:  #1f1f1f;
  --gu-text:    #ededed;
  --gu-dim:     #8f8f8f;
  --gu-dim-2:   #6a6a6a;
  --gu-blue:    #4c8dff;
  --gu-green:   #3ecf8e;
  --gu-purple:  #c4b5fd;
  --gu-teal:    #3ddbc0;
  --gu-amber:   #ffb84d;
  --gu-red:     #e11d48;

  background: var(--gu-bg);
  color: var(--gu-text);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr);
  min-height: 430px;
  container-type: inline-size;
}
.gu * { box-sizing: border-box; }
.gu-mono { font-family: var(--mono); }

/* ---------- sidebar ---------- */
.gu-side { background: var(--gu-panel); border-right: 1px solid var(--gu-line); display: flex; flex-direction: column; padding: 0; }
.gu-brand { display: flex; align-items: center; gap: 8px; padding: 13px 12px; border-bottom: 1px solid var(--gu-line-2); }
.gu-brand svg { flex: none; }
.gu-brand-t { font-size: 12.5px; font-weight: 650; color: var(--gu-text); line-height: 1.15; }
.gu-brand-s { font-size: 10px; color: var(--gu-dim-2); line-height: 1.15; }
.gu-nav { padding: 8px 8px 0; display: flex; flex-direction: column; gap: 1px; flex: 1; }
.gu-nav a, .gu-nav span {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px;
  color: var(--gu-dim); font-size: 12px; text-decoration: none; cursor: default; white-space: nowrap;
}
.gu-nav .gu-ni:hover { background: var(--gu-hover); color: var(--gu-text); }
.gu-nav .gu-ni.on { background: #232323; color: var(--gu-text); font-weight: 550; }
.gu-nav .gu-ni.on::after { content: "›"; margin-left: auto; color: var(--gu-dim-2); }
.gu-nav svg { flex: none; opacity: .85; }
.gu-side-bot { padding: 8px; border-top: 1px solid var(--gu-line-2); display: flex; flex-direction: column; gap: 1px; }
.gu-side-bot .gu-ni { color: var(--gu-dim); }
.gu-ops { display: flex; align-items: center; gap: 7px; padding: 6px 8px; font-size: 10.5px; color: var(--gu-dim); }
.gu-ops .gu-led { width: 6px; height: 6px; border-radius: 50%; background: var(--gu-green); flex: none; box-shadow: 0 0 6px rgba(52,211,153,.7); }

/* ---------- main / topbar ---------- */
.gu-main { display: flex; flex-direction: column; min-width: 0; }
.gu-top {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  border-bottom: 1px solid var(--gu-line-2);
}
.gu-top-t { font-size: 14px; font-weight: 650; color: var(--gu-text); line-height: 1.2; white-space: nowrap; }
.gu-top-s { font-size: 11px; color: var(--gu-dim-2); line-height: 1.2; white-space: nowrap; }
.gu-top-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.gu-btn {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 550;
  padding: 5px 9px; border-radius: 6px; border: 1px solid var(--gu-line); background: var(--gu-panel-2);
  color: var(--gu-text); white-space: nowrap;
}
.gu-btn.gu-btn-g { background: rgba(52,211,153,.14); border-color: rgba(52,211,153,.34); color: var(--gu-green); }
.gu-btn.gu-btn-w { background: #f5f5f5; border-color: #f5f5f5; color: #111; }
.gu-btn.gu-btn-i { padding: 5px 6px; }
.gu-icobtn { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--gu-line); display: grid; place-items: center; color: var(--gu-dim); }
.gu-icobtn.gu-ring { border-color: var(--gu-blue); color: var(--gu-blue); }
.gu-avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--gu-blue); color: #fff;
  display: grid; place-items: center; font-size: 10px; font-weight: 700; font-family: var(--mono); flex: none;
}
.gu-body { padding: 14px 16px; display: grid; gap: 12px; flex: 1; align-content: start; }

/* ---------- generic panel ---------- */
.gu-card {
  background: var(--gu-panel); border: 1px solid var(--gu-line); border-radius: 10px; padding: 12px 14px;
}
.gu-card-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.gu-card-t { font-size: 12.5px; font-weight: 650; color: var(--gu-text); }
.gu-card-n { margin-left: auto; font-size: 10.5px; color: var(--gu-dim-2); }
.gu-klabel { font-size: 11px; color: var(--gu-dim); display: flex; align-items: center; gap: 6px; }
.gu-kval { font-size: 22px; font-weight: 700; color: var(--gu-text); letter-spacing: -.02em; line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.gu-kval.sm { font-size: 18px; }
.gu-kico { margin-left: auto; color: var(--gu-dim-2); }

/* ---------- dashboard layout ---------- */
.gu-dash { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,.86fr); }
.gu-dash .span2 { grid-column: span 2; }
.gu-metric { display: flex; align-items: flex-start; }
.gu-metric > div:first-child { min-width: 0; }

/* sparkline chart */
.gu-chart { position: relative; height: 92px; margin-top: 6px; }
.gu-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.gu-chart .gl { stroke: #1f1f1f; stroke-width: 1; stroke-dasharray: 2 3; }
.gu-chart .ax { font-family: var(--mono); font-size: 6.5px; fill: #565656; }
.gu-chart .ln-in  { fill: none; stroke: var(--gu-blue);  stroke-width: 1.4; }
.gu-chart .ln-out { fill: none; stroke: var(--gu-green); stroke-width: 1.4; }
.gu-chart .ln-in, .gu-chart .ln-out {
  stroke-dasharray: 600; stroke-dashoffset: 600; animation: gu-draw 2.6s ease-out forwards;
}
.gu-chart .ln-out { animation-delay: .35s; }
@keyframes gu-draw { to { stroke-dashoffset: 0 } }
.gu-legend { display: flex; gap: 14px; align-items: center; margin-top: 6px; font-size: 10.5px; color: var(--gu-dim); }
.gu-legend i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.gu-legend .li-in i  { background: var(--gu-blue); }
.gu-legend .li-out i { background: var(--gu-green); }
.gu-legend .gu-last { margin-left: auto; font-family: var(--mono); }

/* ---------- data table ---------- */
.gu-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.gu-tbl th {
  text-align: left; font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gu-dim-2); font-weight: 400; padding: 6px 8px; border-bottom: 1px solid var(--gu-line-2);
  white-space: nowrap;
}
.gu-tbl td { padding: 7px 8px; border-bottom: 1px solid #191919; color: var(--gu-dim); white-space: nowrap; }
.gu-tbl tbody tr:last-child td { border-bottom: 0; }
.gu-tbl tbody tr:hover td { background: #161616; }
.gu-tbl td.nm { font-family: var(--mono); color: var(--gu-text); }
.gu-tbl td.acts { color: var(--gu-dim-2); }
.gu-tbl .acts span { display: inline-flex; margin-right: 7px; opacity: .75; }
.gu-tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10px; padding: 2px 7px;
  border-radius: 5px; background: #262626; color: var(--gu-dim);
}
.gu-tag i { width: 5px; height: 5px; border-radius: 50%; background: var(--gu-dim-2); }
.gu-tag.on { background: rgba(52,211,153,.14); color: var(--gu-green); }
.gu-tag.on i { background: var(--gu-green); }
.gu-tag.err { background: rgba(225,29,72,.14); color: var(--gu-red); }
.gu-tag.err i { background: var(--gu-red); }

/* ---------- system status list ---------- */
.gu-svc { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 11.5px; border-bottom: 1px solid #191919; }
.gu-svc:last-child { border-bottom: 0; }
.gu-svc .gu-led { width: 6px; height: 6px; border-radius: 50%; background: var(--gu-green); flex: none; }
.gu-svc .gu-sn { color: var(--gu-text); }
.gu-svc .gu-ss { margin-left: auto; color: var(--gu-dim-2); font-size: 10.5px; }

/* ==========================================================================
   Workflow Builder
   ========================================================================== */
.gu-wb { grid-template-columns: 132px minmax(0,1fr) 168px; gap: 10px; }
.gu-palette { background: var(--gu-panel); border: 1px solid var(--gu-line); border-radius: 10px; padding: 9px; }
.gu-search {
  display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--gu-dim-2);
  border: 1px solid var(--gu-line); border-radius: 6px; padding: 4px 7px; margin-bottom: 9px;
}
.gu-pgrp { font-size: 10.5px; color: var(--gu-dim); display: flex; align-items: center; gap: 5px; margin: 8px 0 3px; }
.gu-pgrp::before { content: "⌄"; font-size: 9px; color: var(--gu-dim-2); }
.gu-pitem { font-size: 11px; color: var(--gu-dim); padding: 3px 0 3px 14px; position: relative; }
.gu-pitem::before { content: "⠿"; position: absolute; left: 2px; color: #3a3a3a; font-size: 8px; }

.gu-canvas {
  background: var(--gu-panel-2); border: 1px solid var(--gu-line); border-radius: 10px;
  background-image: radial-gradient(circle at 1px 1px, #232323 1px, transparent 0);
  background-size: 14px 14px; position: relative; padding: 30px 12px; min-height: 246px;
  display: flex; align-items: center; justify-content: center;
}
.gu-canvas-t {
  position: absolute; top: 8px; left: 12px; font-size: 10.5px; color: var(--gu-dim);
  display: flex; align-items: center; gap: 5px;
}
.gu-canvas-e { position: absolute; top: 7px; right: 10px; }
.gu-nodes { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; }
.gu-node {
  width: 106px; background: #f7f9ff; border: 1.5px solid var(--gu-blue); border-radius: 8px;
  padding: 7px 8px; box-shadow: 0 3px 12px rgba(0,0,0,.4); position: relative; flex: none;
}
.gu-node .nk { font-size: 9.5px; color: var(--gu-blue); display: flex; align-items: center; gap: 4px; font-weight: 600; }
.gu-node .nt { font-size: 11.5px; font-weight: 700; color: #111827; margin-top: 2px; letter-spacing: -.01em; }
.gu-node .nid {
  font-family: var(--mono); font-size: 8.5px; color: #71717a; background: #e8edf7; border-radius: 4px;
  padding: 1px 4px; margin-top: 4px; display: inline-flex; align-items: center; gap: 3px;
}
.gu-node.n-tx  { border-color: #c4b5fd; background: #fbf8ff; }
.gu-node.n-tx .nk { color: #7c3aed; }
.gu-node.n-tx .nid { background: #f0e9fd; }
.gu-node.n-dst { border-color: var(--gu-teal); background: #f5fffd; }
.gu-node.n-dst .nk { color: #0d9488; }
.gu-node.n-dst .nid { background: #e2f7f4; }
.gu-node::before, .gu-node::after {
  content: ""; position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gu-panel-2); border: 1.5px solid #9aa5b8; transform: translateY(-50%);
}
.gu-node::before { left: -3.5px; } .gu-node::after { right: -3.5px; }
.gu-link { width: 30px; height: 2px; flex: none; position: relative; background: repeating-linear-gradient(90deg, var(--gu-blue) 0 4px, transparent 4px 8px); opacity: .85; }
.gu-link::after {
  content: ""; position: absolute; top: -2.5px; right: -1px; width: 0; height: 0;
  border-left: 6px solid var(--gu-blue); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
}
.gu-link .pk {
  position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px 2px rgba(129,140,248,.85);
  animation: gu-travel 1.9s cubic-bezier(.45,0,.55,1) infinite;
}
.gu-link:nth-of-type(2) .pk { animation-delay: .28s }
.gu-link:nth-of-type(3) .pk { animation-delay: .56s }
@keyframes gu-travel { 0% { left: -4px; opacity: 0 } 12% { opacity: 1 } 88% { opacity: 1 } 100% { left: 26px; opacity: 0 } }

.gu-zoom { position: absolute; left: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 4px; color: var(--gu-dim-2); font-size: 11px; }
.gu-mini {
  position: absolute; right: 10px; bottom: 10px; width: 78px; height: 44px;
  border: 1px solid var(--gu-line); border-radius: 4px; background: #101010;
  display: flex; align-items: center; justify-content: center; gap: 3px;
}
.gu-mini i { width: 11px; height: 5px; border-radius: 1px; background: var(--gu-blue); display: block; }

.gu-params { background: var(--gu-panel); border: 1px solid var(--gu-line); border-radius: 10px; padding: 10px; overflow: hidden; }
.gu-params-hd { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--gu-text); font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--gu-line-2); margin-bottom: 9px; }
.gu-params-hd .gu-x { margin-left: auto; color: var(--gu-dim-2); }
.gu-plabel { font-size: 9.5px; color: var(--gu-dim-2); }
.gu-pname { font-size: 12px; font-weight: 650; color: var(--gu-text); margin-bottom: 9px; }
.gu-field { margin-bottom: 9px; }
.gu-field-l { font-size: 10.5px; color: var(--gu-text); margin-bottom: 3px; font-weight: 550; }
.gu-input {
  font-family: var(--mono); font-size: 10.5px; color: var(--gu-dim); background: var(--gu-panel-2);
  border: 1px solid var(--gu-line); border-radius: 5px; padding: 4px 7px; display: flex; align-items: center;
}
.gu-input.sel::after { content: "⌄"; margin-left: auto; color: var(--gu-dim-2); }
.gu-help { font-size: 9px; color: var(--gu-dim-2); line-height: 1.35; margin-top: 3px; }
.gu-sw { display: flex; align-items: center; gap: 7px; }
.gu-sw .tr { width: 22px; height: 12px; border-radius: 999px; background: #3a3a3a; position: relative; flex: none; }
.gu-sw .tr::after { content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: #8f8f8f; transition: transform .25s ease; }
.gu-sw.on .tr { background: #e8e8e8; }
.gu-sw.on .tr::after { background: #111; transform: translateX(10px); }
.gu-sw .sl { font-size: 10.5px; color: var(--gu-dim); }
.gu-sw.on .sl { color: var(--gu-text); }

/* ==========================================================================
   Schema Editor
   ========================================================================== */
.gu-se { grid-template-columns: 186px minmax(0,1fr); gap: 10px; }
.gu-tree { background: var(--gu-panel); border: 1px solid var(--gu-line); border-radius: 10px; padding: 11px; }
.gu-file { font-family: var(--mono); font-size: 12px; color: var(--gu-text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gu-unsaved { font-family: var(--sans); font-size: 9px; font-weight: 700; color: var(--gu-amber); background: rgba(251,191,36,.14); border: 1px solid rgba(251,191,36,.3); border-radius: 4px; padding: 1px 5px; }
.gu-file-d { font-size: 9.5px; color: var(--gu-dim-2); line-height: 1.4; margin: 5px 0 9px; }
.gu-tgrp { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--gu-text); font-weight: 600; margin: 11px 0 5px; }
.gu-tgrp .n { color: var(--gu-dim-2); font-weight: 400; }
.gu-tgrp .add { margin-left: auto; font-size: 9.5px; color: var(--gu-dim); border: 1px solid var(--gu-line); border-radius: 5px; padding: 1px 5px; font-weight: 400; }
.gu-trow {
  display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 5px; margin-bottom: 1px;
}
.gu-trow.on { background: #232323; }
.gu-trow .sq { width: 15px; height: 15px; border-radius: 4px; display: grid; place-items: center; flex: none;
  background: rgba(52,211,153,.14); color: var(--gu-green); font-size: 8px; }
.gu-trow.cx .sq { background: rgba(196,181,253,.14); color: var(--gu-purple); }
.gu-trow .tn { font-family: var(--mono); font-size: 11px; color: var(--gu-text); line-height: 1.2; }
.gu-trow .td { font-size: 9px; color: var(--gu-dim-2); line-height: 1.2; }
.gu-trow .tc { margin-left: auto; font-family: var(--mono); font-size: 9px; color: var(--gu-dim-2); background: #232323; border-radius: 4px; padding: 0 4px; }

.gu-seg-toggle { display: inline-flex; background: var(--gu-panel-2); border: 1px solid var(--gu-line); border-radius: 6px; padding: 2px; gap: 2px; }
.gu-seg-toggle span { font-size: 10px; padding: 2px 7px; border-radius: 4px; color: var(--gu-dim-2); }
.gu-seg-toggle span.on { background: #f5f5f5; color: #111; font-weight: 600; }
.gu-ok { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--gu-green); border: 1px solid rgba(52,211,153,.3); background: rgba(52,211,153,.1); border-radius: 999px; padding: 2px 8px; }
.gu-statgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin: 10px 0; }
.gu-statbox { background: var(--gu-panel-2); border: 1px solid var(--gu-line); border-radius: 7px; padding: 8px 10px; }
.gu-statbox .l { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gu-dim-2); }
.gu-statbox .v { font-size: 16px; font-weight: 700; color: var(--gu-text); margin-top: 3px; line-height: 1; }
.gu-rules { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--gu-text); font-weight: 600; background: var(--gu-panel-2); border: 1px solid var(--gu-line); border-radius: 7px; padding: 7px 10px; margin-bottom: 10px; }
.gu-rules .add { margin-left: auto; font-size: 9.5px; font-weight: 400; color: var(--gu-dim); border: 1px solid var(--gu-line); border-radius: 5px; padding: 1px 5px; }
.gu-cb { width: 11px; height: 11px; border: 1px solid #4a4a4a; border-radius: 2px; display: inline-grid; place-items: center; }
.gu-cb.on { background: #e8e8e8; border-color: #e8e8e8; color: #111; }
.gu-addrow { display: flex; gap: 6px; margin-top: 9px; }

/* ==========================================================================
   Script editor
   ========================================================================== */
.gu-sc { grid-template-columns: 34px 128px minmax(0,1fr) 148px; gap: 0; padding: 0; }
.gu-railL { border-right: 1px solid var(--gu-line-2); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0; color: var(--gu-dim-2); }
.gu-railL .on { color: var(--gu-text); }
.gu-explorer { border-right: 1px solid var(--gu-line-2); padding: 9px; }
.gu-exp-t { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--gu-dim); display: flex; align-items: center; gap: 5px; margin-bottom: 8px; }
.gu-exp-t .ic { margin-left: auto; display: flex; gap: 5px; color: var(--gu-dim-2); }
.gu-frow { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 5px; font-family: var(--mono); font-size: 10.5px; color: var(--gu-dim); }
.gu-frow.on { background: #232323; color: var(--gu-text); }
.gu-frow .lib { font-family: var(--sans); font-size: 8px; font-weight: 700; color: var(--gu-purple); background: rgba(196,181,253,.16); border-radius: 3px; padding: 0 3px; margin-left: auto; }
.gu-editor { display: flex; flex-direction: column; min-width: 0; }
.gu-tabs { display: flex; align-items: center; border-bottom: 1px solid var(--gu-line-2); padding: 0 8px; }
.gu-tab { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--gu-text); padding: 7px 9px; border-bottom: 1.5px solid var(--gu-blue); }
.gu-tab .x { color: var(--gu-dim-2); }
.gu-code { padding: 8px 0; overflow: hidden; font-family: var(--mono); font-size: 10.5px; line-height: 1.62; flex: 1; }
.gu-code .l { display: block; white-space: pre; color: #d4d4d4; padding-right: 10px; }
.gu-code .l::before {
  content: attr(data-n); display: inline-block; width: 30px; padding-right: 10px;
  text-align: right; color: #4a4a4a;
}
.gu-code .c-kw { color: #c586c0; } .gu-code .c-fn { color: #7dd3fc; }
.gu-code .c-st { color: #ce9178; } .gu-code .c-cm { color: #6a9955; }
.gu-code .c-nu { color: #b5cea8; } .gu-code .c-id { color: #9cdcfe; }
.gu-code .cursor { display: inline-block; width: 6px; height: 1em; background: var(--gu-blue); vertical-align: text-bottom; animation: gu-blink 1.1s step-end infinite; }
@keyframes gu-blink { 50% { opacity: 0 } }
.gu-status { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-top: 1px solid var(--gu-line-2); font-size: 9.5px; color: var(--gu-dim-2); font-family: var(--mono); }
.gu-status .r { margin-left: auto; }
.gu-outpanel { border-left: 1px solid var(--gu-line-2); display: flex; flex-direction: column; }
.gu-outtabs { display: flex; gap: 12px; padding: 8px 10px; border-bottom: 1px solid var(--gu-line-2); font-size: 10.5px; color: var(--gu-dim-2); }
.gu-outtabs .on { color: var(--gu-text); border-bottom: 1.5px solid var(--gu-blue); padding-bottom: 2px; margin-bottom: -3px; }
.gu-outbody { padding: 10px; flex: 1; }
.gu-outhd { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; color: var(--gu-dim); margin-bottom: 10px; }
.gu-empty { display: grid; place-items: center; gap: 5px; padding: 26px 6px; text-align: center; color: var(--gu-dim-2); }
.gu-empty .e1 { font-size: 10.5px; color: var(--gu-dim); }
.gu-empty .e2 { font-size: 9.5px; }

/* ==========================================================================
   Projects
   ========================================================================== */
.gu-projects { grid-template-columns: repeat(3, minmax(0,1fr)); position: relative; }
.gu-pcard { background: var(--gu-panel); border: 1px solid var(--gu-line); border-radius: 10px; padding: 12px; }
.gu-pcard.sel { border-color: var(--gu-blue); box-shadow: 0 0 0 1px rgba(129,140,248,.35); }
.gu-pcard-hd { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; color: var(--gu-dim-2); }
.gu-pcard-hd .gu-open { margin-left: auto; font-size: 10px; color: var(--gu-dim); border: 1px solid var(--gu-line); border-radius: 5px; padding: 1px 6px; }
.gu-pcard-t { font-size: 12.5px; font-weight: 650; color: var(--gu-text); }
.gu-pcard-d { font-size: 10px; color: var(--gu-dim-2); margin-top: 2px; }
.gu-pcard-st { margin: 8px 0 6px; }
.gu-pcard-f { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--gu-dim-2); border-top: 1px solid #1c1c1c; padding-top: 7px; margin-top: 8px; }
.gu-pcard-f .r { margin-left: auto; }
.gu-modal {
  background: var(--gu-panel-2); border: 1px solid #333; border-radius: 12px; padding: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.65); grid-column: 1 / -1;
}
.gu-modal-hd { display: flex; align-items: flex-start; gap: 8px; padding-bottom: 11px; border-bottom: 1px solid var(--gu-line); }
.gu-modal-hd .l { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--gu-dim-2); }
.gu-modal-hd .t { font-size: 15px; font-weight: 650; color: var(--gu-text); }
.gu-modal-hd .r { margin-left: auto; display: flex; gap: 8px; color: var(--gu-dim-2); }
.gu-mstats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-bottom: 1px solid var(--gu-line); }
.gu-mstat { padding: 11px 12px; border-right: 1px solid var(--gu-line); }
.gu-mstat:last-child { border-right: 0; }
.gu-mstat .l { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gu-dim-2); }
.gu-mstat .v { font-size: 19px; font-weight: 700; color: var(--gu-text); margin-top: 3px; line-height: 1; }
.gu-mtabs { display: flex; gap: 14px; padding: 10px 2px; border-bottom: 1px solid var(--gu-line); font-size: 11.5px; color: var(--gu-dim-2); overflow-x: auto; }
.gu-mtabs .on { color: var(--gu-text); font-weight: 600; border-bottom: 1.5px solid var(--gu-text); padding-bottom: 4px; margin-bottom: -11px; }
.gu-mrow { display: flex; align-items: center; gap: 9px; padding: 9px 2px; border-bottom: 1px solid #1c1c1c; }
.gu-mrow:last-child { border-bottom: 0; }
.gu-mrow .bl { width: 6px; height: 6px; border-radius: 50%; background: var(--gu-blue); flex: none; }
.gu-mrow .nm { font-size: 11.5px; font-weight: 600; color: var(--gu-text); }
.gu-mrow .ds { font-size: 10px; color: var(--gu-dim-2); }
.gu-mrow .rt { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* ---------- Monitor / logs stream ---------- */
.gu-stream { font-family: var(--mono); font-size: 10.5px; line-height: 1.9; }
.gu-lrow { display: flex; gap: 10px; white-space: nowrap; overflow: hidden; }
.gu-lrow .lt { color: var(--gu-dim-2); }
.gu-lrow .ll { width: 34px; flex: none; }
.gu-lrow.i .ll { color: var(--gu-blue); } .gu-lrow.o .ll { color: var(--gu-green); }
.gu-lrow.w .ll { color: var(--gu-amber); } .gu-lrow.e .ll { color: var(--gu-red); }
.gu-lrow .lm { color: var(--gu-dim); text-overflow: ellipsis; overflow: hidden; }
.gu-lrow .lm b { color: var(--gu-text); font-weight: 500; }

/* ---------- responsive collapse ---------- */
@container (max-width: 860px) {
  .gu-top-r .gu-hide-md { display: none; }
}
@container (max-width: 760px) {
  .gu-dash { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .gu-dash .span2 { grid-column: span 2; }
  .gu-wb { grid-template-columns: minmax(0,1fr) 152px; }
  .gu-palette { display: none; }
  .gu-se { grid-template-columns: minmax(0,1fr); }
  .gu-tree { display: none; }
  .gu-sc { grid-template-columns: minmax(0,1fr) 140px; }
  .gu-railL, .gu-explorer { display: none; }
  .gu-statgrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@container (max-width: 700px) {
  .gu-projects { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gu-mstats { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@container (max-width: 520px) {
  .gu-projects { grid-template-columns: minmax(0,1fr); }
  .gu-wb { grid-template-columns: minmax(0,1fr); }
  .gu-params { display: none; }
  .gu-sc { grid-template-columns: minmax(0,1fr); }
  .gu-outpanel { display: none; }
  .gu-dash { grid-template-columns: minmax(0,1fr); }
  .gu-dash .span2 { grid-column: span 1; }
}
@media (max-width: 720px) {
  .gu { grid-template-columns: minmax(0,1fr); font-size: 12px; }
  .gu-side { display: none; }
}