body {
  min-height: 100vh;
}

.auth-card {
  width: min(100%, 30rem);
}

.navbar-brand-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: var(--bs-primary);
  color: white;
  line-height: 1;
}

.navbar-brand-video {
  font-size: 0.95rem;
  transform: translateX(-0.08rem);
}

.navbar-brand-signal {
  position: absolute;
  top: -0.16rem;
  right: -0.16rem;
  display: grid;
  place-items: center;
  width: 0.86rem;
  height: 0.86rem;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 0 0.1rem var(--bs-body-bg);
  color: var(--bs-primary);
  font-size: 0.46rem;
}

.ui-heading-icon {
  width: 1.25em;
  flex-shrink: 0;
  color: var(--bs-secondary-color);
  text-align: center;
}

.ui-action-icon {
  width: 1.15em;
  margin-right: 0.35rem;
  text-align: center;
}

.status-dot {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: var(--bs-secondary);
}

.obs-workspace {
  display: grid;
  grid-template-areas:
    "preview sources"
    "mixer sources"
    "scenes sources";
  grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
  gap: 1rem;
  align-items: start;
}

.obs-preview-panel {
  grid-area: preview;
}

.obs-scenes-panel {
  grid-area: scenes;
}

.obs-mixer-panel {
  grid-area: mixer;
}

.obs-sources-panel {
  grid-area: sources;
  max-height: calc(100vh - 9rem);
  overflow: auto;
  position: sticky;
  top: 1rem;
}

.obs-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.obs-preview-grid.is-studio {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.obs-preview-frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--bs-border-radius);
  background:
    linear-gradient(
        45deg,
        rgba(var(--bs-secondary-rgb), 0.12) 25%,
        transparent 25%
      )
      0 0 / 1rem 1rem,
    linear-gradient(
        45deg,
        transparent 75%,
        rgba(var(--bs-secondary-rgb), 0.12) 75%
      )
      0 0 / 1rem 1rem,
    var(--bs-dark);
  color: var(--bs-light);
}

.obs-preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.obs-preview-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.875rem;
}

.obs-output-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1.1rem;
  font-size: 0.825rem;
  font-variant-numeric: tabular-nums;
}

.obs-output-state,
.obs-status-metric {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: max-content;
}

.obs-status-metric {
  padding-left: 1.1rem;
  border-left: 1px solid var(--bs-border-color);
}

.obs-output-indicator {
  width: 0.62rem;
  height: 0.62rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bs-secondary);
  box-shadow: 0 0 0 0.13rem rgba(var(--bs-secondary-rgb), 0.18);
}

.obs-output-indicator.is-live {
  background: var(--bs-success);
  box-shadow: 0 0 0 0.13rem rgba(var(--bs-success-rgb), 0.2);
}

.obs-output-indicator.is-recording {
  background: var(--bs-danger);
  box-shadow: 0 0 0 0.13rem rgba(var(--bs-danger-rgb), 0.2);
}

.obs-output-indicator.is-warning {
  background: var(--bs-warning);
  box-shadow: 0 0 0 0.13rem rgba(var(--bs-warning-rgb), 0.22);
}

.obs-status-label {
  color: var(--bs-secondary-color);
}

.obs-status-value {
  white-space: nowrap;
}

.obs-scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.65rem;
}

.obs-collapse-chevron {
  display: inline-block;
  transition: transform 150ms ease;
}

#mixer-collapse-button[aria-expanded="false"] .obs-collapse-chevron {
  transform: rotate(-90deg);
}

.obs-mixer-row {
  display: grid;
  grid-template-columns: minmax(8rem, 0.7fr) minmax(9rem, 1.3fr);
  gap: 0.65rem 1rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.obs-mixer-row:last-child {
  border-bottom: 0;
}

.obs-mixer-name {
  overflow: hidden;
  align-self: center;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obs-meter {
  display: grid;
  gap: 0.18rem;
  align-self: center;
}

.obs-meter-level {
  display: block;
  width: 100%;
  height: 0.42rem;
  appearance: none;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--bs-secondary-bg);
  box-shadow: inset 0 0 0 1px rgba(var(--bs-secondary-rgb), 0.18);
}

.obs-meter-level::-webkit-progress-bar {
  background: var(--bs-secondary-bg);
}

.obs-meter-level::-webkit-progress-value {
  background: var(--bs-success);
  transition: width 180ms linear;
}

.obs-meter-level::-moz-progress-bar {
  background: var(--bs-success);
  transition: width 180ms linear;
}

.obs-meter-level.is-warning::-webkit-progress-value {
  background: var(--bs-warning);
}

.obs-meter-level.is-warning::-moz-progress-bar {
  background: var(--bs-warning);
}

.obs-meter-level.is-danger::-webkit-progress-value {
  background: var(--bs-danger);
}

.obs-meter-level.is-danger::-moz-progress-bar {
  background: var(--bs-danger);
}

.obs-mixer-row.is-muted .obs-meter-level {
  opacity: 0.35;
  filter: grayscale(0.7);
}

.obs-mixer-controls {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(9rem, 1fr) minmax(10rem, auto) auto;
  gap: 0.65rem;
  align-items: center;
}

.obs-volume-exact {
  width: 14rem;
}

.obs-mute-button {
  min-width: 5.25rem;
}

.obs-scene-button {
  display: flex;
  min-height: 4.25rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  border: 2px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  text-align: left;
}

.obs-scene-button:hover {
  border-color: var(--bs-primary);
  background: var(--bs-secondary-bg);
}

.obs-scene-button.is-program {
  border-color: var(--bs-danger);
  box-shadow: inset 0 0 0 1px var(--bs-danger);
}

.obs-scene-button.is-preview:not(.is-program) {
  border-color: var(--bs-success);
  box-shadow: inset 0 0 0 1px var(--bs-success);
}

.obs-scene-name {
  width: 100%;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obs-scene-state {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}

.obs-take-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.obs-source-row {
  display: flex;
  min-height: 3rem;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.obs-source-row.is-parent-hidden {
  opacity: 0.62;
}

.obs-source-children {
  border-left: 3px solid var(--bs-border-color);
  margin-left: 1.1rem;
}

.obs-group-toggle {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  color: inherit;
  text-align: left;
}

.obs-group-chevron {
  width: 0.75rem;
  flex-shrink: 0;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
}

.obs-group-folder {
  width: 1.25rem;
  flex-shrink: 0;
  color: var(--bs-warning-text-emphasis);
  text-align: center;
}

.obs-source-spacer {
  display: inline-block;
  width: 3rem;
  flex-shrink: 0;
}

.min-width-0 {
  min-width: 0;
}

@media (max-width: 991.98px) {
  .obs-workspace {
    grid-template-areas:
      "preview"
      "mixer"
      "scenes"
      "sources";
    grid-template-columns: minmax(0, 1fr);
  }

  .obs-sources-panel {
    max-height: none;
    position: static;
  }
}

@media (max-width: 575.98px) {
  .obs-preview-grid.is-studio {
    grid-template-columns: minmax(0, 1fr);
  }

  .obs-scene-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .obs-mixer-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .obs-mixer-controls {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .obs-volume-slider {
    grid-column: 1 / -1;
  }

  .obs-volume-exact {
    width: min(12rem, 100%);
  }

  .obs-output-status {
    gap: 0.55rem 0.9rem;
  }

  .obs-status-metric {
    padding-left: 0;
    border-left: 0;
  }
}