:root {
  --nmx-card-bg: rgba(20, 24, 32, .82);
  --nmx-card-border: rgba(255,255,255,.09);
  --nmx-soft-bg: rgba(255,255,255,.035);
  --nmx-sub-bg: rgba(0,0,0,.14);
}

body {
  min-height: 100vh;
  background: radial-gradient(circle at top left, #283143 0, #11151d 45%, #0c0f14 100%);
}

button.nav-link { color: var(--bs-nav-link-color); }
button.nav-link.active { color: var(--bs-info); font-weight: 700; }

.glass {
  background: var(--nmx-card-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--nmx-card-border);
}

.workflow-card {
  height: 100%;
  background: var(--nmx-soft-bg);
  border: 1px solid var(--nmx-card-border);
  border-radius: 1rem;
  padding: 1rem;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.workflow-card:hover { transform: translateY(-1px); border-color: rgba(109, 161, 255, .55); background: rgba(255,255,255,.055); }
.workflow-icon { width: 2.35rem; height: 2.35rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .75rem; background: rgba(13,110,253,.18); color: #9ec5fe; font-weight: 700; }
.workflow-title { letter-spacing: .02em; text-transform: uppercase; font-size: .75rem; color: var(--bs-info-text-emphasis); font-weight: 700; }

.setup-card {
  background: var(--nmx-soft-bg);
  border: 1px solid var(--nmx-card-border);
  border-radius: .9rem;
  padding: 1rem;
}
.setup-subcard {
  background: var(--nmx-sub-bg);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: .75rem;
  padding: .75rem;
}
.setup-subcard + .setup-subcard { margin-top: .75rem; }
.setup-section-title { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: .5rem; font-weight: 700; }
.sticky-col { position: sticky; top: 5.25rem; }

.codebox {
  min-height: 420px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .82rem;
  white-space: pre;
}
.small-code, .path-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .82em;
}
.path-pill { background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.08); border-radius: .4rem; padding: .1rem .35rem; }
.textarea-json { min-height: 130px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .8rem; }

.component-search-list { max-height: 50vh; overflow:auto; }
.component-row { cursor: pointer; }
.component-row:hover { background: rgba(255,255,255,.04); }
.component-help-card {
  background: rgba(13, 110, 253, .08);
  border: 1px solid rgba(109, 161, 255, .22);
  border-radius: .65rem;
  padding: .65rem .75rem;
}
.component-help-card.compact { background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.08); padding: .5rem .65rem; }
.component-help-card summary { cursor: pointer; color: var(--bs-info-text-emphasis); }
.component-help-label { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); font-weight: 700; margin-bottom: .08rem; }
.component-field-help { background: rgba(255,255,255,.025); border-left: 3px solid rgba(109, 161, 255, .45); border-radius: .4rem; padding: .45rem .6rem; }
.component-field-help + .component-field-help { margin-top: .45rem; }

.skin-preview {
  width: 72px; height: 72px; border-radius: .5rem; border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.skin-preview img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.skin-preview-empty { font-size: .7rem; color: var(--bs-secondary-color); text-align:center; padding:.25rem; }

.library-table { max-height: 52vh; overflow: auto; }
.drag-handle { cursor: grab; }
.output-panel .nav-link { font-size: .86rem; }
.toast-container { z-index: 1080; }

@media (max-width: 992px) {
  .sticky-col { position: static; }
}

.setup-switch-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem .75rem;
}
.setup-switch-grid .form-check { margin: 0; padding-left: 2.5rem; }
.setup-advanced > summary { cursor: pointer; }
.skin-slot-card { background: rgba(0,0,0,.16); }
.component-search-list .badge { max-width: 100%; }
.modal-content { background: #161b24; }
@media (max-width: 768px) {
  .setup-switch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}