* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: -apple-system, system-ui, sans-serif; color: #111; }

#app { display: grid; grid-template-columns: 320px 1fr 360px; height: 100vh; }
#sidebar, #details {
  background: #f7f7f9; padding: 12px; overflow-y: auto; font-size: 13px;
}
#sidebar { border-right: 1px solid #ddd; }
#details { border-left: 1px solid #ddd; }
#cy { width: 100%; height: 100%; background: #fff; }

h1 { font-size: 15px; margin: 0 0 2px; }

#cluster-picker {
  display: block; width: 100%;
  font-size: 16px; font-weight: 600;
  padding: 6px 10px;
  border: 1px solid #c7d2fe; border-radius: 6px;
  background: #eef2ff; color: #1e293b; cursor: pointer;
}
#cluster-picker:hover { background: #c7d2fe; border-color: #6366f1; }
#cluster-picker:focus { outline: 2px solid #6366f1; outline-offset: 1px; }
h2 { font-size: 11px; margin: 16px 0 6px; text-transform: uppercase; color: #666; letter-spacing: .05em; }
h3 { font-size: 13px; margin: 14px 0 4px; }
section { border-top: 1px solid #e5e7eb; padding-top: 8px; }
section:first-of-type { border-top: none; padding-top: 0; }

input[type=search], input[type=text] {
  width: 100%; padding: 6px 8px; font-size: 13px;
  border: 1px solid #ccc; border-radius: 4px;
}
label { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 12px; cursor: pointer; }
label:hover { background: #eef2ff; border-radius: 3px; }
button {
  padding: 4px 10px; font-size: 12px; cursor: pointer;
  border: 1px solid #ccc; background: #fff; border-radius: 4px;
}
button:hover { background: #eef2ff; }
button:active { background: #c7d2fe; }

.row { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.muted { color: #6b7280; }
.small { font-size: 11px; }

.legend-item { font-size: 12px; display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.legend-item svg { flex-shrink: 0; }

.control-row {
  display: flex; gap: 6px; align-items: center;
  border-top: 1px solid #e5e7eb; padding-top: 8px; margin-bottom: 4px;
}
.control-row button { flex: 1; }
.depth-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; margin-top: 6px;
}
.depth-row input[type="range"] { flex: 1; }

.breadcrumb-ellipsis {
  font-size: 10px; padding: 2px 6px; color: #6b7280;
  background: #f3f4f6; border-radius: 8px;
}
#history-bar { display: flex; align-items: center; gap: 6px; margin: 6px 0 10px; flex-wrap: wrap; }
#breadcrumbs { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.breadcrumb {
  font-size: 11px; padding: 2px 7px;
  background: #e0e7ff; color: #3730a3; border-radius: 10px;
  cursor: pointer; border: 1px solid transparent;
}
.breadcrumb.current { background: #1e40af; color: white; }
.breadcrumb:hover { border-color: #3730a3; }

#stats { margin: 6px 0 0; font-size: 11px; line-height: 1.4; }

#ns-list { max-height: 240px; overflow-y: auto; margin-top: 4px; }
.ns-count { color: #888; font-size: 11px; flex-shrink: 0; }
.ns-row .ns-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-only {
  display: none;
  font-size: 10px; padding: 1px 6px; margin-right: 4px;
  border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3;
  border-radius: 3px; cursor: pointer;
}
.ns-row:hover .ns-only { display: inline-flex; }
.ns-only:hover { background: #c7d2fe; border-color: #6366f1; }

table { width: 100%; border-collapse: collapse; margin-top: 6px; }
td { padding: 3px 4px; border-bottom: 1px solid #eee; font-size: 12px; vertical-align: top; }
td.k { color: #6b7280; width: 90px; }

.pill {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  background: #e0e7ff; color: #3730a3; font-size: 11px;
  margin: 2px 3px 0 0; word-break: break-all;
}
.pill.declared { background: #dbeafe; color: #1e40af; }
.pill.permitted { background: #e5e7eb; color: #374151; }
.pill.bucket { background: #fef3c7; color: #92400e; }
.pill.secret { background: #ccfbf1; color: #0f766e; }
.pill.port { background: #fef3c7; color: #92400e; }
.pill.workload { background: #ecfccb; color: #3f6212; }
.pill.ingress { background: #f3e8ff; color: #6b21a8; }
.pill.warning { background: #fee2e2; color: #991b1b; }

.neighbor {
  padding: 6px 8px; margin: 4px 0; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 4px; cursor: pointer;
}
.neighbor:hover { background: #eff6ff; border-color: #93c5fd; }
.neighbor .top { font-weight: 600; }
.neighbor .sub { font-size: 11px; color: #6b7280; }
.neighbor .row { margin-top: 4px; }

details { margin-top: 6px; }
summary { cursor: pointer; font-size: 11px; color: #6b7280; }

.evidence {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10px; background: #f1f5f9; padding: 2px 4px;
  border-radius: 3px; margin: 2px 0; word-break: break-all; display: block;
}

.details-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 4px;
}
.details-header h2 { margin: 0; }
#copy-details {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 24px; padding: 0;
  border: 1px solid #ccc; background: #fff; border-radius: 4px;
  color: #475569; cursor: pointer;
}
#copy-details:hover { background: #eef2ff; color: #1e40af; }
#copy-details .icon-check { display: none; }
#copy-details.copied { background: #dcfce7; border-color: #16a34a; color: #166534; }
#copy-details.copied .icon-copy { display: none; }
#copy-details.copied .icon-check { display: inline; }
#copy-details.failed { background: #fee2e2; border-color: #b91c1c; color: #991b1b; }