.live-import-modal[hidden] { display: none; }

.live-import-modal {
  position: fixed;
  inset: 0;
  z-index: 72;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}

.live-import-panel {
  position: relative;
  width: min(760px, calc(100vw - 2 * var(--space-4)));
  max-height: min(86vh, 720px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-stage);
}

.live-import-head,
.live-import-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
}

.live-import-head {
  border-bottom: 1px solid var(--color-border);
}

.live-import-head h2,
.live-import-body h3 {
  margin: 0;
  color: var(--color-heading);
  letter-spacing: 0;
}

.live-import-head h2 {
  font-size: 1rem;
}

.live-import-body h3 {
  font-size: 0.94rem;
  margin-bottom: var(--space-2);
}

.live-import-steps {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-soft);
  overflow-x: auto;
}

.live-import-steps span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 2px;
  padding: 0 var(--space-2);
  color: var(--color-muted);
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
}

.live-import-steps span.is-active {
  background: var(--color-brand-soft);
  color: var(--color-brand);
}

.live-import-body {
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4);
}

.live-import-body > section {
  display: grid;
  gap: var(--space-3);
}

.live-import-body > section[hidden] {
  display: none;
}

.live-import-photographer-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.live-import-photographer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  min-height: 58px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface-soft);
  padding: var(--space-2) var(--space-3);
  color: var(--color-heading);
  text-align: left;
  cursor: pointer;
  transition: var(--transition-control);
}

.live-import-photographer:hover,
.live-import-photographer.is-selected {
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  box-shadow: none;
}

.live-import-photographer.is-selected {
  border-color: var(--color-brand);
}

.live-import-photographer strong,
.live-import-photographer small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-import-photographer strong {
  font-size: 0.84rem;
}

.live-import-photographer small {
  margin-top: 2px;
  color: var(--color-muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.live-import-file-actions,
.live-import-actions {
  flex-wrap: wrap;
}

.live-import-file-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.live-import-summary-grid,
.live-import-result {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.live-import-summary-grid span,
.live-import-result span {
  display: grid;
  gap: 2px;
  min-height: 54px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface-soft);
  padding: var(--space-2);
}

.live-import-summary-grid strong,
.live-import-result strong {
  color: var(--color-heading);
  font-size: 1rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-import-summary-grid small,
.live-import-result small {
  color: var(--color-muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.live-import-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--color-border);
}

.live-import-modal .live-upload-progress {
  margin-top: var(--space-3);
}

.live-import-photographer:focus-visible,
.live-import-modal .live-action:focus-visible,
.live-import-modal .live-icon-button:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

@media (max-width: 820px) {
  .live-import-modal { padding: var(--space-2); }
  .live-import-panel {
    width: calc(100vw - 2 * var(--space-2));
    max-height: calc(100vh - 2 * var(--space-2));
  }
  .live-import-photographer-list,
  .live-import-summary-grid,
  .live-import-result {
    grid-template-columns: 1fr;
  }
  .live-import-body,
  .live-import-head,
  .live-import-actions,
  .live-import-steps {
    padding-inline: var(--space-3);
  }
}

@media (max-width: 560px) {
  .live-import-modal { padding: 0; }
  .live-import-panel {
    width: 100vw;
    max-height: 100vh;
    min-height: 100vh;
    border-radius: 0;
    border: 0;
  }
  .live-import-actions .live-action {
    flex: 1 1 auto;
  }
}