:root{
  color-scheme:dark;
  --bg:#060810;
  --panel:rgba(11,15,28,.84);
  --panel2:rgba(18,24,42,.82);
  --line:rgba(155,180,255,.18);
  --text:#eef2ff;
  --muted:#9aa6c4;
  --ok:#55d890;
  --bad:#ff6d7a;
  --wait:#f4c95d;
}
*{box-sizing:border-box}
html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 18% 12%,rgba(86,65,170,.16),transparent 29%),
    radial-gradient(circle at 76% 72%,rgba(37,114,162,.13),transparent 30%),
    var(--bg);
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.34;
  background-image:
    radial-gradient(#fff .6px,transparent .8px),
    radial-gradient(#8cb9ff .5px,transparent .8px);
  background-size:52px 52px,83px 83px;
  background-position:0 0,21px 31px;
}

#app{position:relative;width:100vw;height:100vh;overflow:hidden}
.graph-wrap{position:absolute;inset:0;z-index:1;width:100vw;height:100vh;overflow:hidden}
#graph{display:block;width:100vw;height:100vh}

.sidebar{
  position:absolute;
  z-index:20;
  left:16px;
  top:16px;
  bottom:16px;
  width:280px;
  padding:20px 18px;
  overflow-y:auto;
  overflow-x:hidden;
  background:var(--panel);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.28);
}
.brand{display:flex;gap:11px;align-items:center;margin-bottom:22px}
.brand-mark{font-size:26px;color:#c9b8ff;text-shadow:0 0 22px #9c7cff}
.brand h1{font-size:20px;line-height:1.15;margin:0}
.brand p{font-size:12px;line-height:1.35;color:var(--muted);margin:4px 0 0}
.search span,.legend h2{display:block;margin-bottom:8px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.11em}
.search input{width:100%;min-width:0;border:1px solid var(--line);background:#0b1020;color:var(--text);border-radius:10px;padding:10px 12px;outline:none}
.search input:focus{border-color:#7664c7;box-shadow:0 0 0 3px rgba(156,124,255,.12)}
.filters{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0 16px}
.filter,.toolbar button{border:1px solid var(--line);background:#0c1120;color:var(--muted);border-radius:999px;padding:7px 10px;cursor:pointer}
.filter:hover,.filter.active,.toolbar button:hover{color:var(--text);border-color:#7867bd;background:#17172a}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}
.stat{border:1px solid var(--line);background:var(--panel2);border-radius:11px;padding:9px 10px}
.stat b{display:block;font-size:18px}.stat span{font-size:10px;color:var(--muted)}
.legend{border-top:1px solid var(--line);padding-top:16px}
.legend h2{margin-top:0}
.legend div{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:13px;color:#c3cae0}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;box-shadow:0 0 11px currentColor;flex:0 0 auto}
.type-case{background:#b7c2ff}.type-host{background:#64a8ff}.type-software{background:#8ee3b4}.type-protocol{background:#d89bff}
.type-recipe{background:#ffd36b}.type-profile{background:#8ae0e7}.type-issue{background:#ff7f8b}
.hint{font-size:11px;line-height:1.45;color:#73809f;margin-top:17px}

.toolbar{
  position:absolute;
  z-index:10;
  top:18px;
  left:314px;
  right:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  pointer-events:none;
}
.toolbar>*{pointer-events:auto}
#updatedAt{
  max-width:60%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  color:#8590ae;
  background:rgba(6,8,16,.72);
  border:1px solid rgba(155,180,255,.09);
  border-radius:999px;
  padding:7px 10px;
}

.node circle{stroke:rgba(255,255,255,.34);stroke-width:1.1;cursor:pointer}
.node text{
  fill:#e8edff;
  font-size:11px;
  pointer-events:none;
  paint-order:stroke;
  stroke:#060810;
  stroke-width:3.5px;
  stroke-linejoin:round;
}
.node.dim{opacity:.10}
.node.selected circle{stroke:#fff;stroke-width:2.3px}

.trunk-link{
  fill:none;
  stroke:#7885b8;
  stroke-opacity:.34;
  stroke-width:1.8px;
}
.trunk-link.dim{opacity:.06}
.branch-link{
  fill:none;
  stroke-linecap:round;
}
.branch-link.primary{
  stroke:#8290c9;
  stroke-opacity:.72;
  stroke-width:1.8px;
}
.branch-link.secondary{
  stroke:#62709f;
  stroke-opacity:.40;
  stroke-width:1.2px;
  stroke-dasharray:5 5;
}
.case-cluster{transition:opacity .18s ease}
.case-cluster.cluster-dim{opacity:.11}
.case-cluster.dragging{cursor:grabbing}
.cluster-card{
  fill:rgba(10,14,27,.52);
  stroke-width:1.2px;
  stroke-opacity:.20;
  stroke-dasharray:7 8;
  pointer-events:none;
}
.cluster-caption{
  fill:#8f9bbb;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  pointer-events:none;
}
.case-node{cursor:grab}
.case-node circle:first-of-type{stroke-width:1.8px}
.case-node text{font-weight:800;font-size:12px}
.root-node{pointer-events:auto}
.root-label{font-weight:800;font-size:13px!important}
.misc-node{opacity:.9}

.tooltip{
  position:absolute;
  z-index:40;
  display:none;
  pointer-events:none;
  max-width:260px;
  background:#0c1120;
  border:1px solid var(--line);
  border-radius:9px;
  padding:8px 10px;
  box-shadow:0 10px 30px rgba(0,0,0,.38);
  font-size:12px;
}
.tooltip b{display:block;margin-bottom:3px}.tooltip span{color:var(--muted)}

.detail-panel{
  position:absolute;
  z-index:30;
  top:16px;
  right:16px;
  bottom:16px;
  width:380px;
  padding:24px 20px;
  overflow-y:auto;
  overflow-x:hidden;
  background:rgba(11,15,28,.94);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.34);
  transform:translateX(calc(100% + 32px));
  opacity:0;
  pointer-events:none;
  transition:transform .22s ease,opacity .22s ease;
}
#app.panel-open .detail-panel{transform:translateX(0);opacity:1;pointer-events:auto}
.close{position:absolute;top:10px;right:12px;border:0;background:transparent;color:#8f9ab7;font-size:28px;line-height:1;cursor:pointer}
.detail-panel h2{font-size:20px;line-height:1.25;margin:8px 34px 4px 0;overflow-wrap:anywhere}
.kind{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.11em}
.badge{display:inline-flex;border:1px solid;border-radius:999px;padding:5px 9px;font-size:11px;margin:9px 0 14px}
.badge.verified{color:var(--ok)}.badge.failed{color:var(--bad)}.badge.pending{color:var(--wait)}
.detail-section{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.detail-section h3{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#9da9c8;margin:0 0 8px}
.detail-section p,.detail-section li{font-size:13px;line-height:1.5;color:#d5dbef;overflow-wrap:anywhere}
.detail-section ul{padding-left:17px}
code{font-family:Consolas,monospace;background:#0a0e1a;border:1px solid var(--line);border-radius:5px;padding:2px 5px;color:#c8d5ff;overflow-wrap:anywhere;word-break:break-word}
.empty-state{text-align:center;color:var(--muted);margin-top:36vh;transform:translateY(-50%)}
.empty-icon{font-size:42px;color:#9c7cff;text-shadow:0 0 26px #795cff}
.empty-state h2{color:var(--text);margin:10px 0 7px}

@media(max-width:900px){
  .sidebar{width:240px;left:10px;top:10px;bottom:10px}
  .toolbar{left:262px;top:12px;right:12px}
  .detail-panel{top:10px;right:10px;bottom:10px;width:min(370px,calc(100vw - 24px))}
}
@media(max-width:650px){
  .sidebar{width:min(88vw,300px);transform:translateX(calc(-100% - 20px));transition:transform .2s ease}
  .toolbar{left:12px}
}


/* Visual clarity pass: stronger case boundaries and relations */
.trunk-link{
  stroke:#93a4e2 !important;
  stroke-opacity:.72 !important;
  stroke-width:2.2px !important;
  filter:drop-shadow(0 0 2px rgba(147,164,226,.20));
}
.branch-link.primary{
  stroke:#9eafea !important;
  stroke-opacity:.86 !important;
  stroke-width:1.9px !important;
  filter:drop-shadow(0 0 1px rgba(158,175,234,.22));
}
.branch-link.secondary{
  stroke:#8294d3 !important;
  stroke-opacity:.68 !important;
  stroke-width:1.45px !important;
  stroke-dasharray:5 4 !important;
}
.cluster-card{
  fill:rgba(10,14,27,.76) !important;
  stroke-width:1.9px !important;
  stroke-opacity:.76 !important;
  stroke-dasharray:9 6 !important;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 8px rgba(109,130,204,.14));
}
.cluster-caption{
  fill:#d4dcf6 !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  letter-spacing:.10em !important;
  paint-order:stroke;
  stroke:#070b16;
  stroke-width:3px;
  stroke-linejoin:round;
}
.branch-nodes .node circle:first-of-type{
  stroke:rgba(255,255,255,.62) !important;
  stroke-width:1.45px !important;
}
.branch-nodes .node text{
  fill:#f4f7ff !important;
  font-weight:600;
}
.status-ring{
  opacity:.98;
}