/* Production and user-facing pages. */

:root {
  --accent: #1f2937;       /* neutral dark */
  --bg: #f3f4f6;
  --panel: #ffffff;
  --border: #e5e7eb;
  --muted: #6b7280;
  --radius: 0;
  --shadow: none;
}

body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background: var(--bg);
  color: #111;
}

header {
  background: var(--panel);
  padding: 1rem 2rem;
  box-shadow: none;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  flex-wrap: wrap;
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.top-nav a {
  color: #111;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 0.45rem 0.7rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.top-nav a[aria-current="page"] {
  background: #111;
  border-color: #111;
  color: white;
}

.session-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.session-bar button {
  margin-top: 0;
}

.auth-panel {
  max-width: 420px;
  margin: 8vh auto;
  background: var(--panel);
  padding: 1.8rem;
  border-radius: 0;
  box-shadow: none;
}

.account-wrap {
  padding: 2rem;
}

.account-panel {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--panel);
  border-radius: 0;
  box-shadow: none;
  padding: 1.8rem;
}

.account-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
  margin-bottom: 1.4rem;
}

.account-heading h1 {
  margin: 0;
  font-size: 1.5rem;
}

.account-heading p {
  margin: 0.35rem 0 0;
  color: var(--muted);
}

.route-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.route-card {
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 1rem;
  min-width: 0;
}

.route-card h2 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
}

.copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: start;
  margin-bottom: 1rem;
}

.copy-row button {
  margin-top: 0;
  border-radius: 0;
  white-space: nowrap;
}

.account-meta {
  margin-top: 1rem;
}

.account-section {
  margin-top: 1rem;
}

/* PROCESSING SCHEDULE */
.booking-panel {
  --booking-accent: #2456a6;
  --booking-accent-soft: #edf4ff;
  --booking-success: #3c654c;
  --booking-success-soft: #edf2eb;
}

.booking-heading {
  align-items: center;
}

.compact-button {
  margin-top: 0;
  border-radius: 0;
}

.booking-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(280px, 0.75fr);
  gap: 1.5rem;
  align-items: start;
}

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

.booking-section-heading,
.slot-section-heading,
.upcoming-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.booking-section-heading h2,
.upcoming-heading h2 {
  margin: 0;
  font-size: 1rem;
}

.booking-section-heading p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.timezone-badge,
.count-badge {
  flex: 0 0 auto;
  border-radius: 0;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 0.75rem;
  font-weight: 700;
}

.timezone-badge {
  padding: 0.4rem 0.65rem;
}

.count-badge {
  min-width: 1.7rem;
  padding: 0.3rem;
  text-align: center;
}

.booking-day-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(74px, 1fr);
  gap: 0.4rem;
  margin: 1.25rem 0 1rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

button.booking-day-tab {
  min-width: 70px;
  margin: 0;
  padding: 0.65rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 0;
  background: white;
  color: var(--muted);
  line-height: 1.2;
}

.booking-day-tab span,
.booking-day-tab strong {
  display: block;
}

.booking-day-tab span {
  margin-bottom: 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
}

.booking-day-tab strong {
  color: #111827;
  font-size: 0.88rem;
}

button.booking-day-tab.is-active {
  border-color: var(--booking-accent);
  background: var(--booking-accent);
  box-shadow: none;
}

.booking-day-tab.is-active span,
.booking-day-tab.is-active strong {
  color: white;
}

.booking-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.15rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.booking-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.legend-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 0;
  background: #d1d5db;
}

.legend-dot.available { background: #799bc8; }
.legend-dot.mine { background: #63866e; }
.legend-dot.unavailable { background: #d1d5db; }

.slot-section-heading {
  margin-bottom: 0.65rem;
}

.slot-section-heading h3 {
  margin: 0;
  font-size: 0.9rem;
}

.slot-section-heading span,
.off-hours-range {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.booking-slot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

button.booking-slot {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0.62rem 0.7rem;
  border: 1px solid #dbe3ef;
  border-radius: 0;
  background: white;
  color: #111827;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

button.booking-slot-available:hover {
  border-color: var(--booking-accent);
  background: var(--booking-accent-soft);
  opacity: 1;
  transform: none;
}

.booking-slot-time {
  font-size: 0.9rem;
  font-weight: 750;
}

.booking-slot-state {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
}

button.booking-slot-mine,
button.booking-slot-mine:disabled {
  border-color: #bfd0bf;
  background: var(--booking-success-soft);
  color: #065f46;
  opacity: 1;
}

.booking-slot-mine .booking-slot-state { color: var(--booking-success); }

button.booking-slot-unavailable,
button.booking-slot-unavailable:disabled {
  border-color: #eef0f3;
  background: #f6f7f9;
  color: #9ca3af;
  opacity: 1;
}

.booking-slot-unavailable .booking-slot-state { color: #9ca3af; }

button.booking-slot.is-selected {
  border-color: var(--booking-accent);
  background: var(--booking-accent);
  color: white;
  box-shadow: none;
}

.booking-slot.is-selected .booking-slot-state { color: #eef2ef; }

.off-hours {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 0;
}

.off-hours summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0.9rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
}

.off-hours .booking-slot-grid {
  padding: 0 0.75rem 0.75rem;
}

.booking-sidebar {
  display: grid;
  gap: 1rem;
}

.booking-composer,
.upcoming-bookings {
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: 0;
  background: #fafbfc;
}

.booking-composer h2 {
  margin: 0.3rem 0;
  font-size: 1.1rem;
}

.booking-selection-hint {
  min-height: 2.5rem;
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.booking-selection-details {
  margin-bottom: 1rem;
  padding: 0.8rem;
  border: 1px solid #bdcde3;
  border-radius: 0;
  background: var(--booking-accent-soft);
}

.booking-selection-details div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.2rem 0;
}

.booking-selection-details span {
  color: #64748b;
  font-size: 0.78rem;
}

.booking-selection-details strong {
  color: #244e88;
  font-size: 0.8rem;
  text-align: right;
}

.booking-composer select,
.booking-composer button {
  box-sizing: border-box;
  width: 100%;
}

.booking-composer button[type="submit"] {
  margin-top: 0.75rem;
  border-radius: 0;
  background: var(--booking-accent);
}

button.text-button {
  margin-top: 0.35rem;
  padding: 0.45rem;
  background: transparent;
  color: #4b5563;
  font-size: 0.78rem;
}

.booking-message {
  min-height: 1.1rem;
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.booking-message.is-success { color: var(--booking-success); }
.booking-message.is-error { color: #b91c1c; }

.upcoming-heading {
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
}

.booking-list-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.booking-list-item:last-child { border-bottom: 0; }

.booking-list-date {
  max-width: 4.6rem;
  color: #4b5563;
  font-size: 0.73rem;
  font-weight: 650;
}

.booking-list-item > div:nth-child(2) {
  display: grid;
  gap: 0.12rem;
}

.booking-list-item strong { font-size: 0.82rem; }
.booking-list-item span { color: var(--muted); font-size: 0.7rem; }

button.booking-cancel {
  margin: 0;
  padding: 0.4rem 0.5rem;
  border: 1px solid #fecaca;
  border-radius: 0;
  background: #fff;
  color: #b91c1c;
  font-size: 0.7rem;
}

.booking-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1rem;
  border: 1px dashed var(--border);
  border-radius: 0;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.booking-empty.compact {
  margin-top: 0.75rem;
  padding: 0.7rem;
}

.credential-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 0.6rem;
  align-items: end;
}

.credential-form label {
  grid-row: 1;
}

.credential-form input,
.credential-form select,
.credential-form button {
  grid-row: 2;
  margin-top: 0;
}

.credential-form .status {
  grid-column: 1 / -1;
}

.credential-secret {
  margin-top: 1.4rem;
  padding: 1rem;
  border: 1px solid #f59e0b;
  border-radius: 0;
  background: #fffbeb;
}

.credential-secret h2,
.credential-secret p {
  margin-top: 0;
}

.credential-list,
.user-role-manager {
  margin-top: 1.4rem;
}

.credential-row,
.user-role-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border);
}

.credential-row div {
  display: grid;
  gap: 0.25rem;
}

.credential-row span {
  color: var(--muted);
  font-size: 0.85rem;
}

.credential-row button,
.user-role-row button {
  margin-top: 0;
}

.user-role-row {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 180px) auto;
}

.user-role-actions {
  display: flex;
  gap: 0.5rem;
}

.user-role-actions button {
  margin-top: 0;
}

.danger-button {
  background: #b91c1c;
}

.danger-button:hover {
  background: #991b1b;
}

.api-docs-wrap {
  width: min(1200px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0 3rem;
}

.api-docs-hero,
.api-docs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--panel);
  box-shadow: none;
}

.api-docs-hero h1 {
  margin: 1rem 0 0.65rem;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.api-docs-hero {
  display: block;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border-radius: 12px;
}

.api-docs-meta,
.api-docs-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.api-docs-meta {
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.8rem;
}

.api-version {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #f8fafc;
}

.api-docs-actions {
  margin-top: 1.5rem;
}

.api-docs-hero p {
  max-width: 760px;
  margin: 0.3rem 0;
  line-height: 1.65;
}

.api-docs-hero .api-docs-note {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.schema-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid #111;
  border-radius: 6px;
  background: #111;
  color: white;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
}

.schema-link-secondary {
  background: white;
  color: #111;
  border-color: var(--border);
}

.schema-link:hover {
  background: #374151;
  color: white;
}

.schema-link:focus-visible,
.api-operation summary:focus-visible {
  outline: 3px solid #2456a6;
  outline-offset: 3px;
}

.api-docs-toolbar {
  margin: 1rem 0;
  box-shadow: none;
}

.api-docs-toolbar label {
  font-weight: 600;
}

.api-docs-toolbar input {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.api-operation-list {
  display: grid;
  gap: 0.75rem;
}

.api-operation {
  overflow: hidden;
  border: 1px solid var(--border);
  border-left: 5px solid #4b5563;
  border-radius: 8px;
  background: var(--panel);
}

.api-operation summary {
  display: grid;
  grid-template-columns: 76px minmax(220px, 1fr) minmax(180px, 1fr);
  gap: 0.8rem;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
  list-style: none;
}

.api-operation summary::-webkit-details-marker {
  display: none;
}

.api-method {
  padding: 0.35rem 0.45rem;
  border-radius: 0;
  background: #374151;
  color: white;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

.api-method-get { border-left-color: #2456a6; }
.api-method-post { border-left-color: #15803d; }
.api-method-put,
.api-method-patch { border-left-color: #b45309; }
.api-method-delete { border-left-color: #b91c1c; }

.api-method-get .api-method { background: #eaf1ff; color: #2456a6; }
.api-method-post .api-method { background: #e8f5ed; color: #166534; }
.api-method-put .api-method,
.api-method-patch .api-method { background: #fff4de; color: #92400e; }
.api-method-delete .api-method { background: #fef2f2; color: #b91c1c; }

.api-operation summary:hover { background: #f8fafc; }

.api-path {
  overflow-wrap: anywhere;
  font-size: 0.9rem;
  font-weight: 700;
}

.api-summary {
  color: var(--muted);
  font-size: 0.9rem;
}

.api-operation-body {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--border);
}

.api-operation-body h3 {
  margin: 1rem 0 0.5rem;
  font-size: 0.95rem;
}

.api-auth {
  color: #244e88;
  font-weight: 600;
}

.api-parameter-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.api-parameter-table th,
.api-parameter-table td {
  padding: 0.55rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.api-schema-row,
.api-response-row {
  display: grid;
  grid-template-columns: minmax(80px, auto) 1fr;
  gap: 0.75rem;
  padding: 0.45rem 0;
}

.api-schema-row code,
.api-response-row code {
  font-weight: 700;
}

.api-docs-status,
.api-docs-error {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--panel);
}

.api-docs-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

@media (max-width: 700px) {
  .credential-form,
  .user-role-row {
    grid-template-columns: 1fr;
  }

  .credential-form label,
  .credential-form input,
  .credential-form select,
  .credential-form button {
    grid-row: auto;
  }

  .api-docs-hero,
  .api-docs-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .api-operation summary {
    grid-template-columns: 68px 1fr;
  }

  .api-summary {
    grid-column: 1 / -1;
  }

  .api-docs-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

.wrap {
  width: min(1600px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 2rem 0 3rem;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.85fr);
  gap: 1.25rem;
  align-items: start;
}

.media-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

/* VIDEO */
.camera-panel,
.preview-panel {
  min-width: 0;
  padding: 1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}

.preview-panel {
  display: flex;
  flex-direction: column;
}

.panel-heading {
  min-height: 3rem;
  margin-bottom: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.panel-heading h2 {
  margin: 0.1rem 0 0;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
}

.eyebrow {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.status-pill {
  max-width: 52%;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 0;
  background: #f9fafb;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.2;
  text-align: right;
}

.output-status {
  color: #244e88;
  border-color: #bdcde3;
  background: #edf4ff;
}

.video-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: clamp(260px, 28vw, 420px);
  min-height: 180px;
  max-height: 75vh;
  resize: vertical;
  border-radius: 0;
  background: #0b0c0e;
}

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

.preview-status {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  right: 1rem;
  color: white;
  font-size: 0.9rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  pointer-events: none;
}

.video-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.3rem 0.5rem;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.58);
  color: white;
  font-size: 0.72rem;
  font-weight: 600;
  backdrop-filter: blur(8px);
}

/* SOURCE PANEL UNDER VIDEO */
.source-panel {
  background: var(--panel);
  padding: 1.2rem;
  border-radius: 0;
  box-shadow: none;
}

.source-preview {
  margin-top: 0.5rem;
  height: 160px;
  background: #111;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border);
}

.source-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.drop-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  color: white;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.source-preview.dragging .drop-overlay {
  opacity: 1;
}

/* CONFIG */
.config-panel {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--panel);
  padding: 1.8rem;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.config-panel::-webkit-scrollbar {
  width: 8px;
}

.config-panel::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 0;
}

/* FORM */
.config-item {
  margin-bottom: 1.4rem;
}

label {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  display: block;
}

textarea,
input[type="number"],
input[type="text"],
input[type="password"],
input[readonly],
select {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border-radius: 0;
  border: 1px solid var(--border);
  background: #fafafa;
  font-size: 0.95rem;
  transition: border 0.2s ease;
}

input[readonly] {
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
}

textarea:focus,
input:focus,
select:focus {
  outline: none;
  border-color: #9ca3af;
}

textarea[data-key="prompt"] {
  resize: vertical;
}

.locked-config-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
}

.locked-config-control button {
  margin-top: 0;
  white-space: nowrap;
}

.locked-config-control input:disabled {
  color: #111;
  background: var(--panel);
  opacity: 0.75;
}

/* SLIDERS */
input[type="range"] {
  width: 100%;
  appearance: none;
  height: 5px;
  border-radius: 0;
  background: #e5e7eb;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: #374151;
  cursor: pointer;
}

.value {
  font-weight: 600;
  color: #374151;
}

/* BUTTON */
button {
  margin-top: 1rem;
  padding: 0.7rem 1.2rem;
  background: #111;
  color: white;
  border: none;
  border-radius: 0;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

button:hover {
  opacity: 0.85;
}

.button-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.button-row button {
  margin-top: 0.4rem;
}

.preset-tools {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
  margin-bottom: 1.4rem;
}

.inline-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.status {
  color: var(--muted);
}

.config-row {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.camera-panel {
  display: flex;
  flex-direction: column;
}

.camera-selectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.camera-selectors label {
  display: grid;
  gap: 0.35rem;
}

.local-preview {
  background: #111;
}

.camera-actions {
  margin-top: 0.4rem;
}

.microphone-toggle {
  align-self: flex-start;
  margin-top: 0.6rem;
}

.secondary-button {
  background: #e5e7eb;
  color: #111827;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.config-row.two-cols {
  grid-template-columns: 1fr 1fr;
}

.config-row.three-cols {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Make sliders tighter inside rows */
.config-row .config-item {
  margin-bottom: 0;
}

/* Toggle row */
.toggle-row {
  align-items: stretch;
}

.toggle-btn {
  display: flex;
}

.toggle-btn span {
  width: 100%;
  padding: 0.8rem;
  text-align: center;
  border-radius: 0;
  border: 1px solid #ddd;
  background: #f9f9f9;
  transition: all 0.2s ease;
  cursor: pointer;
}

.toggle-btn input {
  display: none;
}

.toggle-btn input:checked + span {
  background: #111;
  color: white;
  border-color: #111;
}

.toggle-btn.danger input:checked + span {
  background: #000;
}

/* Responsive fallback */
@media (max-width: 900px) {
  .config-row.two-cols,
  .config-row.three-cols,
  .route-grid {
    grid-template-columns: 1fr;
  }

  .copy-row {
    grid-template-columns: 1fr;
  }

  .camera-selectors {
    grid-template-columns: 1fr;
  }

  .booking-workspace {
    grid-template-columns: 1fr;
  }

  .booking-sidebar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
/* RESPONSIVE */
@media (max-width: 1024px) {
  .wrap {
    width: min(100% - 2rem, 900px);
    grid-template-columns: minmax(0, 1fr);
  }

  .media-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  header {
    padding: 0.85rem 1rem;
  }

  .wrap {
    width: calc(100% - 1rem);
    padding-top: 0.75rem;
  }

  .camera-panel,
  .preview-panel,
  .config-panel {
    padding: 0.8rem;
  }

  .panel-heading {
    align-items: flex-start;
  }

  .status-pill {
    max-width: 58%;
  }

  .video-frame {
    height: 240px;
    min-height: 160px;
  }

  .account-wrap {
    padding: 0.6rem;
  }

  .account-panel {
    padding: 1rem;
  }

  .booking-heading,
  .booking-section-heading {
    align-items: flex-start;
  }

  .booking-day-tabs { grid-auto-columns: 74px; }

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

  .booking-sidebar {
    grid-template-columns: 1fr;
  }

  .timezone-badge {
    display: none;
  }
}

/* PAIC: a white working surface, blue actions, and rules between tasks. */
:root {
  --accent: #2456a6;
  --bg: #fff;
  --panel: #fff;
  --border: #cbd3df;
  --muted: #526073;
  --radius: 0;
  --shadow: none;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  color: #202b3a;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.5;
}
h1, h2, h3 { color: #202b3a; letter-spacing: normal; line-height: 1.25; }
h1 { font-size: 32px; }
h2 { font-size: 23px; }
h3 { font-size: 19px; }
header { padding: 16px 24px; gap: 24px; border-bottom: 2px solid #202b3a; box-shadow: none; }
.brand { display: flex; align-items: baseline; gap: 14px; }
.title { font-size: 25px; font-weight: 700; letter-spacing: -0.5px; }
.subtitle, .session-bar { color: var(--muted); font-size: 16px; }
.session-bar { flex-wrap: wrap; overflow-wrap: anywhere; }
.top-nav { gap: 16px; flex-wrap: wrap; }
.top-nav a { border: 0; border-bottom: 2px solid transparent; padding: 9px 0; color: #202b3a; font-size: 17px; font-weight: 400; }
.top-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.top-nav a[aria-current="page"] { color: var(--accent); background: transparent; border-color: var(--accent); font-weight: 700; }
a { color: var(--accent); text-underline-offset: 4px; }
button { min-height: 46px; padding: 10px 16px; border: 1px solid transparent; font: inherit; font-size: 17px; font-weight: 700; background: var(--accent); transition: none; }
button:hover { opacity: 1; background: #193f7d; }
button:disabled { opacity: 1; color: #677386; background: #edf1f7; border-color: #d4deec; }
.secondary-button, .session-bar button, .compact-button, .account-heading > button,
#loadPresetBtn, #savePresetBtn, #toggleStepsLock { background: white; color: #244e88; border-color: #a7bbd5; }
.secondary-button:hover, .session-bar button:hover, .compact-button:hover,
.account-heading > button:hover, #loadPresetBtn:hover, #savePresetBtn:hover, #toggleStepsLock:hover { background: #edf3fc; }
.danger-button { color: #9b2831; background: white; border-color: #cf9ea4; }
.danger-button:hover { color: #792028; background: #fff2f2; }
:is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
input, select, textarea { font: inherit; accent-color: var(--accent); min-width: 0; }
textarea, select, input[type="number"], input[type="text"], input[type="password"], input[readonly] {
  min-height: 46px;
  padding: 9px 11px;
  background: white;
  border: 1px solid #9aa9be;
  color: #202b3a;
  font-size: 18px;
  transition: none;
}
input[readonly], input:disabled { background: #f5f8fc; }
label { font-size: 17px; font-weight: 700; color: #202b3a; }
.small, .status, .control-help, .section-description { font-size: 16px; }
.status { overflow-wrap: anywhere; }
.status:not(:empty) { display: block; margin-top: 8px; }
.eyebrow { font-size: 16px; font-weight: 400; text-transform: none; letter-spacing: normal; }
.section-description { color: var(--muted); margin: 8px 0 18px; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 20; padding: 12px; background: white; }
.skip-link:focus { top: 8px; }
.wrap {
  width: calc(100% - 48px);
  max-width: 1840px;
  padding: 24px 0 40px;
  grid-template-columns: minmax(0, 1fr) 390px;
  column-gap: 28px;
  row-gap: 26px;
}
.workspace-heading { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.workspace-heading h1 { margin: 0 0 6px; font-size: 30px; font-weight: 700; }
.workspace-heading p { margin: 0; color: var(--muted); font-size: 18px; }
.workspace-link { font-size: 17px; }
.workspace-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.workspace-actions button { min-height: 38px; padding: 7px 12px; font-size: 15px; white-space: nowrap; }
.media-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 24px; align-items: start; }
.camera-panel, .preview-panel, .source-panel, .config-panel { border: 0; box-shadow: none; padding: 0; }
.camera-panel, .preview-panel { display: flex; flex-direction: column; }
.panel-heading { min-height: 0; display: block; margin: 0 0 14px; padding-top: 12px; border-top: 2px solid #202b3a; }
.panel-heading h2 { margin: 0; font-size: 23px; letter-spacing: normal; }
.video-frame { height: clamp(220px, 23vw, 440px); min-height: 0; max-height: none; resize: none; background: #1b2738; }
.local-preview { background: #1b2738; }
.preview-status:not(:empty) { padding: 8px 10px; background: #1b2738; font-size: 16px; text-shadow: none; }
.camera-selectors { grid-template-columns: minmax(0, 1fr); margin: 18px 0 0; gap: 10px; }
.camera-actions { margin-top: 12px; }
.camera-actions button { flex: 1; margin: 0; }
.microphone-toggle { margin-top: 10px; }
.camera-message, .feed-message { font-size: 17px; margin: 14px 0 0; overflow-wrap: anywhere; }
.feed-message:empty { display: none; }
.feed-caption { color: var(--muted); font-size: 15px; margin: 8px 0 0; }
.source-panel { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 42%); gap: 24px; align-items: start; border-top: 1px solid var(--border); padding-top: 24px; }
.source-controls { min-width: 0; }
.source-panel h2 { font-size: 23px; margin: 0; }
.source-preview { margin: 0; height: 180px; background: #f5f8fc; border: 1px solid var(--border); }
input[type="file"] { max-width: 100%; font-size: 16px; }
input[type="file"]::file-selector-button { min-height: 46px; padding: 9px 12px; margin-right: 8px; color: #244e88; background: white; border: 1px solid #a7bbd5; font: inherit; cursor: pointer; }
.config-panel { border-left: 1px solid var(--border); padding-left: 24px; }
.config-panel .panel-heading { margin-bottom: 24px; }
.config-item { margin-bottom: 24px; }
.config-row { gap: 20px; margin-bottom: 24px; }
.config-panel .config-row.two-cols { grid-template-columns: minmax(0, 1fr); }
.control-section-heading { margin: 28px 0 18px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 19px; }
.control-help { color: var(--muted); margin: 8px 0 0; }
.slider-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.slider-heading label { margin: 0; }
.slider-heading .value { font-size: 20px; color: #202b3a; font-weight: 700; font-variant-numeric: tabular-nums; }
input[type="range"] { display: block; height: 46px; margin: 4px 0; padding: 0; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; background: #cedcf0; border: 1px solid #96afd1; }
input[type="range"]::-webkit-slider-thumb { width: 26px; height: 32px; margin-top: -13px; border: 2px solid white; outline: 1px solid var(--accent); background: var(--accent); }
input[type="range"]::-moz-range-track { height: 6px; background: #cedcf0; border: 1px solid #96afd1; }
input[type="range"]::-moz-range-thumb { width: 22px; height: 28px; border: 2px solid white; outline: 1px solid var(--accent); background: var(--accent); border-radius: 0; }
.slider-limits { display: flex; justify-content: space-between; color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.toggle-btn { display: flex; align-items: center; gap: 12px; min-height: 46px; margin: 0; cursor: pointer; }
.toggle-btn input { display: block; position: static; width: 22px; height: 22px; margin: 0; }
.toggle-btn span, .toggle-btn input:checked + span { width: auto; padding: 0; border: 0; background: transparent; color: #202b3a; font-size: 17px; text-align: left; transition: none; }
.inline-check { min-height: 46px; gap: 12px; cursor: pointer; }
.inline-check input { width: 22px; height: 22px; }
.preset-tools, :is(.advanced-settings, .lora-settings) { padding: 0; margin-bottom: 24px; border: 0; border-block: 1px solid var(--border); background: white; }
.preset-tools[open], :is(.advanced-settings, .lora-settings)[open] { padding-bottom: 16px; }
.preset-tools summary, :is(.advanced-settings, .lora-settings) summary { min-height: 48px; padding: 12px 0; font-size: 18px; font-weight: 700; cursor: pointer; }
.preset-tools label { margin-top: 12px; }
.preset-tools .button-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.preset-tools .button-row button { margin: 0; }
.preset-tools .danger-button { grid-column: 1 / -1; }
textarea[data-key="prompt"] { min-height: 140px; resize: vertical; line-height: 1.5; }
.save-controls { margin: 0; border-top: 2px solid #202b3a; padding-top: 18px; }
.save-controls h3 { margin: 0 0 18px; }
#saveBtn { width: 100%; min-height: 50px; margin-top: 12px; font-size: 18px; }
.account-wrap { max-width: 1300px; padding: 28px 24px; margin: auto; }
.account-panel { max-width: none; padding: 24px 0; border: 0; border-top: 2px solid #202b3a; box-shadow: none; }
.account-heading h1 { font-size: 26px; }
.account-section { margin-top: 28px; }
.route-card { padding: 0 20px 0 0; border: 0; border-right: 1px solid var(--border); }
.route-card:last-child { border-right: 0; }
.route-card h2 { font-size: 20px; }
.auth-panel { width: min(500px, calc(100% - 48px)); padding: 24px 0; margin: 7vh auto; border-top: 2px solid #202b3a; box-shadow: none; }
.auth-panel h1 { margin: 0 0 16px; font-size: 30px; }
.auth-panel input { margin-bottom: 18px; }
.auth-panel button[type="submit"] { width: 100%; }
.auth-panel details { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.auth-panel summary { cursor: pointer; }
@media (max-width: 1250px) {
  .wrap { grid-template-columns: minmax(0, 1fr); }
  .config-panel { padding: 24px 0 0; border-left: 0; }
  .video-frame { height: clamp(220px, 33vw, 400px); }
}
@media (max-width: 700px) {
  header { padding: 16px; gap: 16px; }
  .brand { flex-wrap: wrap; gap: 4px 12px; }
  .top-nav { order: 3; width: 100%; }
  .session-bar { font-size: 15px; }
  .wrap { width: calc(100% - 32px); padding-top: 20px; }
  .workspace-heading { flex-direction: column; gap: 12px; }
  .workspace-actions { justify-content: space-between; flex-wrap: wrap; }
  .media-grid { grid-template-columns: minmax(0, 1fr); }
  .video-frame { height: auto; aspect-ratio: 16 / 9; }
  .source-panel { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .camera-actions { flex-wrap: wrap; }
  .account-heading { flex-wrap: wrap; }
  .account-wrap { padding: 20px 16px; }
  .route-card { border-right: 0; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Desktop workbench: the inspector scrolls without moving the video workspace. */
.reference-filename { margin: 8px 0 12px; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.reference-picker { position: relative; display: inline-flex; align-items: center; min-height: 46px; padding: 9px 14px; border: 1px solid #a7bbd5; background: white; color: #244e88; cursor: pointer; font-size: 16px; }
.reference-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.reference-picker:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
.reference-picker:hover { background: #edf3fc; }
.reference-clear { min-height: 46px; margin-left: 8px; }
.reference-hint { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.inspector-scroll { min-width: 0; }
.save-options { font-size: 14px; }
.save-options summary { cursor: pointer; min-height: 32px; padding: 4px 0; color: var(--muted); }
.save-options label { margin-top: 8px; }
.config-panel #saveBtn { background: white; border: 1px solid #a7bbd5; color: #244e88; min-height: 44px; font-size: 16px; }
.config-panel #saveBtn:hover { background: #edf3fc; }
@media (min-width: 1100px) and (min-height: 650px) {
  .studio-page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  .studio-page > header { flex: 0 0 auto; padding: 10px 24px; border-bottom: 1px solid var(--border); }
  .studio-page .wrap {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
    grid-template-columns: minmax(0, 1fr) 370px;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    background: #f3f4f5;
  }
  .studio-page .workspace-heading { grid-column: 1; grid-row: 1; padding: 18px 28px; align-items: center; }
  .studio-page .workspace-heading h1 { font-size: 25px; margin: 0; }
  .studio-page .workspace-heading p { display: none; }
  .studio-page .workspace-link { font-size: 16px; }
  .studio-page .media-grid {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    padding: 0 28px 28px;
    overflow-y: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 22px;
    scrollbar-gutter: stable;
  }
  .studio-page .camera-panel, .studio-page .preview-panel, .studio-page .source-panel { background: transparent; }
  .studio-page .panel-heading { padding-top: 0; border: 0; margin-bottom: 12px; }
  .studio-page .panel-heading h2 { font-size: 20px; }
  .studio-page .video-frame { height: clamp(300px, 47dvh, 720px); background: #161a20; }
  .studio-page .local-preview { background: #161a20; }
  .studio-page .camera-selectors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
  .studio-page .camera-selectors label { font-size: 15px; }
  .studio-page .camera-selectors select { font-size: 16px; min-height: 44px; }
  .studio-page .camera-actions button { flex: 0 1 auto; min-width: 140px; font-size: 16px; }
  .studio-page .camera-message, .studio-page .feed-message { font-size: 16px; }
  .studio-page .source-panel { grid-template-columns: clamp(280px, 28vw, 480px) minmax(0, 1fr); gap: 20px; padding-top: 18px; }
  .studio-page .source-controls { grid-column: 2; grid-row: 1; }
  .studio-page .source-preview { grid-column: 1; grid-row: 1; height: 180px; background: white; }
  .studio-page .source-panel h2 { font-size: 20px; }
  .studio-page .source-panel .section-description { margin: 6px 0 8px; font-size: 16px; }
  .studio-page .config-panel {
    grid-column: 2;
    grid-row: 1 / -1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    border-left: 1px solid var(--border);
    background: white;
  }
  .studio-page .config-panel > .panel-heading { flex: 0 0 auto; padding: 20px; margin: 0; border-bottom: 1px solid var(--border); }
  .studio-page .inspector-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding: 0 20px 16px; scroll-padding-block: 12px; }
  .studio-page .config-panel label, .studio-page .toggle-btn span { font-size: 16px; }
  .studio-page .config-panel :is(select, textarea, input[type="number"], input[type="text"]) { font-size: 16px; min-height: 44px; }
  .studio-page .config-panel textarea { min-height: 112px; }
  .studio-page .config-panel .status, .studio-page .config-panel .control-help { font-size: 14px; }
  .studio-page .config-item { margin-bottom: 18px; }
  .studio-page .config-row { gap: 16px; margin-bottom: 18px; }
  .studio-page .control-section-heading { font-size: 17px; margin: 22px 0 12px; padding-top: 16px; }
  .studio-page .preset-tools, .studio-page :is(.advanced-settings, .lora-settings) { margin-bottom: 18px; }
  .studio-page .preset-tools { border-top: 0; }
  .studio-page .preset-tools summary, .studio-page :is(.advanced-settings, .lora-settings) summary { font-size: 16px; }
  .studio-page .preset-tools button { font-size: 15px; padding: 8px; }
  .studio-page .save-controls { flex: 0 0 auto; margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--border); background: white; }
  .studio-page .save-controls .inline-check { margin: 0; min-height: 36px; }
  .studio-page .save-controls #saveBtn { margin-top: 8px; }
  .studio-page .save-controls .status { max-height: 72px; overflow-y: auto; }
}

/* One header geometry on Control, Account, and OpenAPI. */
html { scrollbar-gutter: stable; }
body > header.public-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 72px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  background: white;
  flex-shrink: 0;
}
.public-header .brand { justify-self: start; min-width: 0; }
.public-header .title { color: #202b3a; text-decoration: none; }
.public-header .top-nav { justify-self: center; order: initial; width: auto; }
.public-header .session-bar { justify-self: end; justify-content: flex-end; min-width: 0; }
@media (max-width: 900px) {
  .public-header .brand { display: block; }
}
@media (max-width: 700px) {
  body > header.public-header { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px 16px; gap: 12px; }
  .public-header .session-bar { grid-column: 2; grid-row: 1; }
  .public-header .top-nav { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}

/* LoRA already supplies the divider above the reference settings. */
.config-panel .lora-settings + .control-section-heading {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

/* Fit portrait and landscape references without cropping, including small uploads. */
.source-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Keep mode and help alongside the camera controls on a 1080p workbench. */
.camera-actions { flex-wrap: wrap; align-items: center; }
.camera-actions #studioHelpBtn { margin-left: auto; min-width: auto; flex: 0 0 auto; }
#videoControls { margin-top: 12px; }
#videoControls .button-row { flex-wrap: wrap; align-items: center; }
#videoProgress { width: 100%; margin-top: 12px; }
#videoStatus { margin: 8px 0 0; font-size: 16px; }
.preset-use-row { display: flex; align-items: center; gap: 8px; }
.preset-use-row #presetSelect { flex: 1; min-width: 0; margin: 0; }
.preset-use-row #applyPresetBtn { flex: 0 0 auto; margin: 0; padding: 8px; white-space: nowrap; }
.preset-save-tools { margin: 8px 0; }
.preset-save-tools > summary { cursor: pointer; margin-bottom: 8px; min-height: 0; padding: 6px 0; }
.studio-page .preset-save-tools > summary { font-size: 14px; }
.preset-save-tools #savePresetBtn, .preset-save-tools #deletePresetBtn { display: inline-block; width: auto; margin: 8px 4px 0 0; }
#studioHelp { width: min(620px, calc(100% - 32px)); max-height: 85dvh; overflow: auto; padding: 24px; border: 1px solid var(--border); }
#studioHelp::backdrop { background: rgb(0 0 0 / 40%); }
@media (min-width: 1100px) and (min-height: 650px) {
  .studio-page .camera-actions button { min-width: auto; padding-inline: 12px; }
  .studio-page .video-frame { height: clamp(250px, 40dvh, 540px); }
}

/* A guided studio: essentials first, optional tools on demand. */
.studio-page .workspace-heading p { display: block; margin-top: 6px; font-size: 16px; }
.studio-page .panel-heading .section-description { margin: 6px 0 0; font-size: 15px; line-height: 1.5; }
.studio-page .optional-settings { border-block: 1px solid var(--border); margin-top: 18px; }
.studio-page .optional-settings > summary { padding: 14px 0; font-size: 16px; font-weight: 700; cursor: pointer; }
.studio-page .audio-settings[open] { padding-bottom: 16px; }
.studio-page .audio-settings select { width: 100%; margin-top: 8px; }
.studio-page .source-panel { display: block; padding-top: 0; }
.studio-page .source-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 8px 0 20px; }
.studio-page .source-controls, .studio-page .source-preview { grid-column: auto; grid-row: auto; }
.studio-page .source-preview { height: 180px; }
.studio-page .reference-settings { margin: 0 0 18px; }
.studio-page .reference-settings[open] { padding-bottom: 8px; }
.studio-page .reference-settings .config-row { margin-bottom: 0; }
.studio-page .config-panel #saveBtn { background: var(--accent); color: white; border-color: var(--accent); min-height: 48px; }
.studio-page .config-panel #saveBtn:hover { background: #193f7d; }
.studio-page .config-panel > .panel-heading { margin-bottom: 16px; }
.studio-page .camera-actions #startCameraBtn { flex: 1; }
.studio-page #liveReconnectHint { font-size: 14px; }
@media (max-width: 700px) {
  .studio-page .source-body { grid-template-columns: minmax(0, 1fr); }
  .studio-page .workspace-actions { gap: 12px; }
}
.studio-page .camera-selectors { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) and (min-height: 650px) {
  .studio-page .workspace-heading { flex-wrap: wrap; gap: 12px 20px; }
}

/* Compact input modes share one workspace. */
.studio-page .input-modes { display: flex; gap: 6px; margin-bottom: 12px; }
.studio-page .input-modes button { min-height: 38px; padding: 6px 14px; font-size: 16px; background: transparent; color: var(--muted); border: 1px solid var(--border); }
.studio-page .input-modes button[aria-pressed="true"] { background: var(--accent); color: white; border-color: var(--accent); }
.studio-page .input-modes #studioHelpBtn { margin-left: auto; }
.studio-page .optional-settings { margin-top: 10px; }
.studio-page .optional-settings > summary { padding: 10px 0; }
.studio-page .config-item, .studio-page .preset-tools, .studio-page .lora-settings, .studio-page .advanced-settings { margin-bottom: 12px; }
.studio-page .camera-selectors { margin-top: 10px; }
.studio-page .camera-actions { margin-top: 8px; }
.studio-page .workspace-heading { padding-block: 12px; }
.studio-page .config-panel > .panel-heading { padding-block: 14px; margin-bottom: 10px; }
.studio-page .reference-settings { margin-bottom: 12px; }
.studio-page .recordings-link { display: inline-block; margin-top: 12px; }
.studio-page #cameraControls[hidden], .studio-page #cameraOutput[hidden], .studio-page #videoControls[hidden] { display: none; }

/* One toolbar and one preview baseline across the studio workspace. */
.studio-page .media-grid { gap: 16px 20px; }
.studio-page .media-grid > .input-modes {
  grid-column: 1 / -1;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.studio-page .media-grid > :is(.camera-panel, .preview-panel) > .panel-heading {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0;
  margin: 0 0 10px;
  border: 0;
}
.studio-page .media-grid .panel-heading h2 { font-size: 16px; font-weight: 600; }
.studio-page .media-grid .video-frame { height: auto; min-height: 0; aspect-ratio: 16 / 9; background: #1c2026; }
.studio-page .media-grid .preview { display: block; background: #1c2026; }
.studio-page .camera-controls-row { display: flex; align-items: flex-end; gap: 12px; margin-top: 12px; }
.studio-page .camera-controls-row .camera-selectors { flex: 1; min-width: 0; margin: 0; }
.studio-page .camera-controls-row .camera-actions { flex: 0 0 auto; margin: 0; }
.studio-page .camera-controls-row #startCameraBtn { margin: 0; min-height: 44px; }
.studio-page .camera-controls-row select { min-height: 44px; }
.studio-page .camera-message, .studio-page .feed-message { margin-top: 12px; }
.studio-page .config-panel > .panel-heading { height: 56px; box-sizing: border-box; display: flex; align-items: center; padding: 0 20px; margin: 0; }
.studio-page .inspector-scroll { padding: 16px 20px; }
.studio-page .config-panel :is(.preset-tools, .lora-settings, .reference-settings, .advanced-settings) { margin: 0; border-top: 0; border-bottom: 1px solid var(--border); }
.studio-page .config-panel :is(.preset-tools, .lora-settings, .reference-settings, .advanced-settings) > summary { min-height: 44px; box-sizing: border-box; padding: 12px 0; line-height: 20px; }
.studio-page .config-panel :is(.preset-tools, .lora-settings, .reference-settings, .advanced-settings)[open] { padding-bottom: 12px; }
.studio-page .config-panel .source-body { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px 0 0; }
.studio-page .config-panel .source-preview { grid-row: 1; height: 140px; }
.studio-page .config-panel .reference-filename { margin: 0 0 8px; font-size: 14px; }
.studio-page .config-panel :is(.reference-picker, .reference-clear) { min-height: 38px; padding: 6px 10px; font-size: 14px; }
.studio-page .config-panel .reference-clear { margin-left: 4px; }
@media (min-width: 1100px) and (min-height: 650px) {
  .studio-page .media-grid { grid-template-rows: auto minmax(0, 1fr); align-content: start; }
}
@media (max-width: 700px) {
  .studio-page .camera-controls-row { flex-wrap: wrap; }
  .studio-page .camera-controls-row .camera-selectors { flex-basis: 100%; }
  .studio-page .inspector-scroll { padding-inline: 0; }
  .studio-page .config-panel > .panel-heading { padding-inline: 0; }
}
.studio-page .inspector-scroll > .save-controls { padding: 16px 0 0; margin-top: 16px; border-top: 0; }

#videoFrameProgress {
  width: 100%;
  height: 8px;
  accent-color: var(--accent);
}