.conceptual-model {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.conceptual-model-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(170px, 240px) minmax(170px, 240px) auto;
  gap: 8px;
  align-items: end;
}

.conceptual-model-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: #52657e;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.conceptual-model-field input,
.conceptual-model-field select,
.conceptual-model-reset {
  height: 34px;
  padding: 6px 9px;
  color: #26364d;
  background: #ffffff;
  border: 1px solid #c7d4e3;
  border-radius: 6px;
  font: 500 0.74rem/1.2 "Inter", sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.conceptual-model-field input:focus,
.conceptual-model-field select:focus,
.conceptual-model-reset:focus-visible {
  border-color: #0d8f5f;
  box-shadow: 0 0 0 2px rgba(13, 143, 95, 0.12);
  outline: none;
}

.conceptual-model-reset {
  color: #1557a3;
  font-weight: 650;
  cursor: pointer;
}

.conceptual-model-reset:hover { color: #0a744d; border-color: #0d8f5f; }

.conceptual-model-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  min-height: 25px;
  color: #52657e;
  font-size: 0.7rem;
}

.conceptual-model-count { color: #26364d; font-weight: 700; }

.conceptual-model-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.conceptual-model-legend span { display: inline-flex; align-items: center; gap: 5px; }
.conceptual-model-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.conceptual-model-legend .legend-root { background: #172033; }
.conceptual-model-legend .legend-package { background: #2867be; }
.conceptual-model-legend .legend-public { background: #168554; }
.conceptual-model-legend .legend-private { background: #c34a59; }
.conceptual-model-legend .legend-mixed { background: #a8650a; }

.conceptual-model-stage {
  position: relative;
  min-height: 680px;
  overflow: hidden;
  background: #fbfcfe;
  border: 1px solid #d9e2ee;
  border-radius: 10px;
}

.conceptual-model-canvas {
  display: block;
  width: 100%;
  height: 680px;
  cursor: grab;
}

.conceptual-model-canvas:active { cursor: grabbing; }

.conceptual-model-detail {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: min(360px, calc(100% - 24px));
  padding: 11px 13px;
  color: #42526b;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #cfd9e6;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(24, 47, 78, 0.14);
  pointer-events: none;
}

.conceptual-model-detail strong,
.conceptual-model-detail span { display: block; }
.conceptual-model-detail strong { color: #172033; font-size: 0.82rem; }
.conceptual-model-detail span { margin-top: 3px; font-size: 0.68rem; line-height: 1.4; }
.conceptual-model-detail .detail-meta { color: #2867be; font-weight: 650; }

@media (max-width: 900px) {
  .conceptual-model-controls { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .conceptual-model-controls { grid-template-columns: 1fr; }
  .conceptual-model-stage { min-height: 560px; }
  .conceptual-model-canvas { height: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  .conceptual-model-stage * { scroll-behavior: auto !important; }
}

/* Dark telemetry conceptual model. */
.conceptual-model-field,
.conceptual-model-status { color: #96a0ac; }
.conceptual-model-field input,
.conceptual-model-field select,
.conceptual-model-reset { color: #d1d8e0; background: #171b22; border-color: #343b46; }
.conceptual-model-reset { color: #58eb89; }
.conceptual-model-reset:hover { color: #67ff9b; border-color: #20df68; }
.conceptual-model-count { color: #e4e9ee; }
.conceptual-model-legend .legend-root { background: #e0e6ec; }
.conceptual-model-legend .legend-package { background: #3d8de5; }
.conceptual-model-legend .legend-public { background: #20df68; }
.conceptual-model-stage {
  background:
    linear-gradient(rgba(32, 223, 104, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 223, 104, 0.025) 1px, transparent 1px),
    #090a0d;
  background-size: 28px 28px;
  border-color: #2f3641;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.32);
}
.conceptual-model-detail { color: #b6c0ca; background: rgba(12, 14, 18, 0.96); border-color: #3b444f; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); }
.conceptual-model-detail strong { color: #f4f6f8; }
.conceptual-model-detail .detail-meta { color: #58eb89; }