.generator-studio { display: grid; gap: var(--s5-space-5); }
.studio-masthead { display: grid; gap: var(--s5-space-6); padding: var(--s5-space-6); border-radius: var(--s5-radius-lg); background: var(--s5-night); color: white; }
.studio-masthead-v2::after { display: none; }
.studio-masthead-copy { max-width: 760px; }
.studio-context-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5-space-2); margin-bottom: var(--s5-space-4); color: oklch(79% 0.03 250); font-size: 0.875rem; }
.studio-context-line strong { color: var(--s5-cyan); overflow-wrap: anywhere; }
.studio-masthead-copy h1 { max-width: 18ch; margin-bottom: var(--s5-space-3); color: white; font-size: 2rem; line-height: 1.15; letter-spacing: -0.03em; }
.studio-masthead-copy > p { max-width: 65ch; margin-bottom: 0; color: oklch(82% 0.025 250); }
.studio-masthead-meta { margin: var(--s5-space-5) 0 0; display: flex; flex-wrap: wrap; gap: var(--s5-space-5); }
.studio-masthead-meta div { min-width: 160px; display: grid; gap: var(--s5-space-1); }
.studio-masthead-meta dt { color: oklch(72% 0.025 250); font-size: 0.75rem; }
.studio-masthead-meta dd { margin: 0; color: white; font-size: 0.875rem; font-weight: 700; overflow-wrap: anywhere; }
.studio-masthead-status { display: grid; gap: var(--s5-space-3); align-content: start; padding: var(--s5-space-4); border-radius: var(--s5-radius); background: oklch(26% 0.055 255); }
.studio-status-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s5-space-3); }
.studio-status-head span { color: oklch(76% 0.025 250); font-size: 0.75rem; font-weight: 700; }
.studio-status-head a { color: white; font-size: 0.75rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.studio-masthead-status .badge { width: fit-content; min-height: 28px; display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: normal; }
.studio-masthead-status .callout { padding: 0; background: transparent; color: oklch(82% 0.025 250); }
.callout, .rail-note { padding: var(--s5-space-4); border-radius: var(--s5-radius); background: var(--s5-cyan-soft); color: var(--s5-cyan-dark); font-size: 0.875rem; line-height: 1.5; }
.generator-studio-grid { display: grid; gap: var(--s5-space-5); align-items: start; }
.studio-brief { padding: var(--s5-space-5); }
.studio-launchpad .helper, .studio-launchpad .subtle { color: var(--s5-muted); }
.studio-launchpad .generator-progress-item { padding: var(--s5-space-4) 0; border: 0; border-bottom: 1px solid var(--s5-line); border-radius: 0; background: transparent; }
.studio-launchpad .rail-note, .studio-launchpad .alert { border: 0; background: var(--s5-cyan-soft); color: var(--s5-cyan-dark); }
.studio-rail-label { display: block; margin-bottom: var(--s5-space-2); color: var(--s5-cyan-dark); font-size: 0.75rem; font-weight: 800; }
.studio-progress-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s5-space-3); }
.studio-brief h2 { margin: 0; font-size: 1.25rem; }
.studio-progress-heading > strong { color: var(--s5-indigo); font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.studio-brief > .helper { margin: var(--s5-space-2) 0 var(--s5-space-4); }
.studio-progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--s5-line); }
.studio-progress-track span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--s5-indigo); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--s5-ease); }
.studio-current-step { margin: var(--s5-space-3) 0 var(--s5-space-4); color: var(--s5-muted); font-size: 0.875rem; }
.studio-current-step strong { color: var(--s5-ink); }
.generator-progress-list { display: grid; border-top: 1px solid var(--s5-line); }
.generator-progress-item { display: grid; grid-template-columns: 34px 1fr; gap: var(--s5-space-3); padding: var(--s5-space-4) 0; border-bottom: 1px solid var(--s5-line); }
.generator-progress-item:last-child { border-bottom: 0; }
.generator-progress-item .progress-count { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--s5-indigo-soft); color: var(--s5-indigo); font-size: 0.75rem; font-weight: 700; }
.generator-progress-item strong, .generator-progress-item .subtle { grid-column: 2; }
.generator-progress-item strong { color: var(--s5-ink); font-size: 0.875rem; }
.generator-progress-item .subtle { margin-top: -8px; }
.generator-shell { min-width: 0; overflow: clip; }
.generator-shell-v2 .generator-form { padding: 0; }
.generator-form { display: grid; }
.generator-wizard-nav { display: flex; gap: var(--s5-space-2); overflow-x: auto; padding: var(--s5-space-3); border-bottom: 1px solid var(--s5-line); background: var(--s5-surface-soft); scrollbar-width: thin; }
.wizard-step-pill { min-width: max-content; min-height: 58px; display: inline-flex; align-items: center; gap: var(--s5-space-2); padding: var(--s5-space-2) var(--s5-space-3); border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--s5-muted); text-align: left; cursor: pointer; }
.wizard-step-pill [data-wizard-step-marker] { width: 28px; height: 28px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--s5-surface); color: var(--s5-muted); font-size: 0.75rem; font-weight: 800; }
.wizard-step-copy { min-width: 0; display: grid; gap: 1px; }
.wizard-step-copy small { color: inherit; font-size: 0.75rem; font-weight: 600; }
.wizard-step-copy strong { overflow: hidden; color: inherit; font-size: 0.875rem; text-overflow: ellipsis; white-space: nowrap; }
.wizard-step-pill:hover { background: var(--s5-surface); color: var(--s5-ink); }
.wizard-step-pill.is-active { border-color: var(--s5-line); background: var(--s5-surface); color: var(--s5-indigo); box-shadow: var(--s5-shadow-sm); }
.wizard-step-pill.is-active [data-wizard-step-marker] { background: var(--s5-indigo); color: white; }
.wizard-step-pill.is-complete:not(.is-active) [data-wizard-step-marker] { background: var(--s5-success-soft); color: var(--s5-success); }
.wizard-step-error-text { display: none; color: var(--s5-danger); font-weight: 800; }
.wizard-step-error-text::before { content: " · "; }
.wizard-step-pill.has-errors { border-color: var(--s5-danger); background: var(--s5-danger-soft); color: var(--s5-danger); }
.wizard-step-pill.has-errors [data-wizard-step-marker] { background: var(--s5-danger); color: white; }
.wizard-step-pill.has-errors .wizard-step-error-text { display: inline; }
.generator-wizard-panel { display: none; margin: 0; border: 0; border-radius: 0; background: var(--s5-surface); }
.generator-section-card { padding: 0; box-shadow: none; }
.generator-section-card::before { display: none; }
.generator-wizard-panel.is-active { display: block; }
.generator-wizard-panel > summary { display: flex; align-items: center; gap: var(--s5-space-3); padding: var(--s5-space-5); border-bottom: 1px solid var(--s5-line); list-style: none; cursor: default; }
.generator-wizard-panel > summary::-webkit-details-marker { display: none; }
.section-index { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--s5-indigo-soft); color: var(--s5-indigo); font-size: 0.75rem; font-weight: 700; }
.section-summary-copy { min-width: 0; display: grid; gap: 2px; }
.section-summary-copy strong { color: var(--s5-ink); font-size: 1.125rem; }
.section-summary-copy small { color: var(--s5-indigo); font-size: 0.75rem; font-weight: 700; }
.section-summary-copy > span { max-width: 60ch; color: var(--s5-muted); font-size: 0.875rem; line-height: 1.45; }
.generator-section-inner { padding: var(--s5-space-5); }
.generator-grid { display: grid; gap: var(--s5-space-4); }
.generator-grid.compact .field { padding: 0; border: 0; border-radius: 0; background: transparent; }
.generator-grid .field { align-content: start; }
.generator-grid .field > label { min-height: 21px; }
.coordinate-fields { grid-column: 1 / -1; min-width: 0; display: grid; gap: var(--s5-space-4); }
.field-required { margin-left: var(--s5-space-1); color: var(--s5-indigo); font-size: 0.75rem; font-weight: 700; }
.generator-grid .field-error { min-height: 18px; color: var(--s5-danger); font-size: 0.75rem; font-weight: 600; }
.generator-grid .field.has-error input, .generator-grid .field.has-error select, .generator-grid .field.has-error textarea { border-color: var(--s5-danger); background: var(--s5-danger-soft); }
.website-settings-groups { display: grid; gap: var(--s5-space-6); }
.website-settings-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.website-settings-group + .website-settings-group { padding-top: var(--s5-space-5); border-top: 1px solid var(--s5-line); }
.website-settings-group legend { width: 100%; margin: 0 0 var(--s5-space-4); padding: 0; display: grid; gap: var(--s5-space-1); color: var(--s5-ink); }
.website-settings-group legend span { font-size: 1rem; font-weight: 800; }
.website-settings-group legend small { max-width: 60ch; color: var(--s5-muted); font-size: 0.8125rem; font-weight: 500; line-height: 1.45; }
.website-settings-fields--address .field { grid-column: 1 / -1; width: min(100%, 640px); }
.additional-doctors-list { display: grid; gap: var(--s5-space-6); }
.additional-doctor-group { container-type: inline-size; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.additional-doctor-group + .additional-doctor-group { padding-top: var(--s5-space-6); border-top: 1px solid var(--s5-line); }
.additional-doctor-group legend { width: 100%; margin: 0 0 var(--s5-space-4); padding: 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s5-space-3); color: var(--s5-ink); font-size: 1rem; font-weight: 800; }
.additional-doctor-group legend small { color: var(--s5-muted); font-size: 0.75rem; font-weight: 600; }
.generator-grid.additional-doctor-fields { grid-template-columns: 1fr; }
.additional-doctor-fields .upload-dropzone { min-height: 128px; }
.generator-step-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s5-space-3); margin-top: var(--s5-space-6); padding-top: var(--s5-space-5); border-top: 1px solid var(--s5-line); }
.generator-step-actions [data-wizard-prev][disabled] { visibility: hidden; }
.generator-step-actions--final { display: grid; justify-items: stretch; }
.publish-deck-state { flex: 0 0 auto; color: var(--s5-muted); font-size: 0.75rem; }
.publish-deck-state strong { color: var(--s5-indigo); font-variant-numeric: tabular-nums; }
.generator-step-actions--final .publish-deck-state { justify-self: end; }
.publish-confirmation { width: min(480px, 100%); justify-self: end; padding: var(--s5-space-4); border-radius: var(--s5-radius); background: var(--s5-surface-soft); }
.generator-final-buttons { display: flex; align-items: center; justify-content: space-between; gap: var(--s5-space-3); }
.checkbox-row { min-height: 44px; display: flex; align-items: flex-start; gap: var(--s5-space-3); color: var(--s5-ink); cursor: pointer; }
.checkbox-row input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--s5-indigo); }
.checkbox-row strong { font-size: 0.875rem; }
.checkbox-row .helper { display: inline-block; margin-top: 3px; }

/* Template selection */
.template-picker { display: grid; gap: var(--s5-space-4); }
.template-picker-head { display: flex; flex-direction: column; gap: var(--s5-space-1); }
.template-picker-head > span { color: var(--s5-ink); font-weight: 700; }
.template-picker-head small { color: var(--s5-muted); font-size: 0.875rem; }
.template-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5-space-3); }
.template-card { min-width: 0; padding: var(--s5-space-2); display: grid; gap: var(--s5-space-2); border: 1px solid var(--s5-line); border-radius: var(--s5-radius); background: var(--s5-surface); color: var(--s5-ink); text-align: left; cursor: pointer; transition: border-color 180ms var(--s5-ease), background-color 180ms var(--s5-ease), transform 150ms var(--s5-ease); }
.template-card:hover { border-color: var(--s5-muted); transform: translateY(-1px); }
.template-card.is-selected { border-color: var(--s5-indigo); background: var(--s5-indigo-soft); }
.template-thumb { position: relative; aspect-ratio: 16 / 10; display: block; overflow: hidden; border-radius: 7px; background: var(--s5-surface-soft); }
.template-thumb.has-image { background-position: center; background-size: cover; }
.template-thumb.has-image > * { display: none; }
.template-browser-bar { display: block; height: 14%; background: oklch(92% 0.015 250); }
.template-hero { display: block; width: 70%; height: 35%; margin: 8% auto 5%; border-radius: 3px; background: var(--s5-indigo-soft); }
.template-line { display: block; width: 48%; height: 4px; margin: 4px auto; border-radius: 4px; background: var(--s5-line-strong); }
.template-line-long { width: 64%; }
.template-mini-grid { width: 72%; margin: 7% auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.template-mini-grid i { aspect-ratio: 1.3; border-radius: 2px; background: var(--s5-line); }
.template-thumb-coral .template-hero, .template-thumb-rose .template-hero { background: var(--s5-danger-soft); }
.template-thumb-amber .template-hero, .template-thumb-sand .template-hero { background: var(--s5-warning-soft); }
.template-thumb-aqua .template-hero, .template-thumb-mint .template-hero { background: var(--s5-cyan-soft); }
.template-thumb-sage .template-hero, .template-thumb-olive .template-hero { background: var(--s5-success-soft); }
.template-thumb-ink .template-hero, .template-thumb-steel .template-hero { background: var(--s5-line-strong); }
.template-meta { min-width: 0; display: block; padding: 0 var(--s5-space-1) var(--s5-space-1); }
.template-meta strong { overflow: hidden; color: var(--s5-ink); font-size: 0.875rem; text-overflow: ellipsis; white-space: nowrap; }

/* Uploads */
.upload-dropzone { position: relative; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s5-space-3); padding: var(--s5-space-4); overflow: hidden; border: 1px dashed var(--s5-line-strong); border-radius: var(--s5-radius); background: var(--s5-surface-soft); color: var(--s5-ink); text-align: center; cursor: pointer; transition: border-color 180ms var(--s5-ease), background-color 180ms var(--s5-ease); }
.upload-dropzone:hover, .upload-dropzone.is-dragging { border-color: var(--s5-cyan); background: var(--s5-cyan-soft); }
.upload-dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--s5-surface); color: var(--s5-indigo); }
.upload-icon svg { width: 22px; height: 22px; fill: currentColor; }
.upload-copy { max-width: 26ch; display: grid; gap: var(--s5-space-1); }
.upload-copy strong { color: var(--s5-ink); font-size: 0.875rem; }
.upload-copy small { color: var(--s5-muted); font-size: 0.75rem; line-height: 1.4; }
.upload-remove-btn { position: absolute; top: var(--s5-space-2); right: var(--s5-space-2); z-index: 2; width: 36px; height: 36px; display: none; align-items: center; justify-content: center; border: 1px solid var(--s5-line); border-radius: 9px; background: var(--s5-surface); color: var(--s5-danger); font-size: 1.25rem; cursor: pointer; }
.upload-dropzone.has-upload-preview .upload-remove-btn { display: inline-flex; }
.upload-dropzone.has-upload-preview .upload-icon, .upload-dropzone.has-upload-preview .upload-copy { opacity: 0; }
.upload-dropzone [data-upload-preview] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Schedule */
.schedule-builder { container-type: inline-size; display: grid; gap: var(--s5-space-5); padding: 0; background: transparent; }
.schedule-days { display: flex; flex-wrap: wrap; gap: var(--s5-space-2); }
.day-chip { position: relative; display: inline-flex; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.day-chip input { position: absolute; opacity: 0; pointer-events: none; }
.day-chip span { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--s5-line-strong); border-radius: 9px; background: var(--s5-surface); color: var(--s5-muted); font-size: 0.875rem; font-weight: 700; }
.day-chip input:checked + span { border-color: var(--s5-indigo); background: var(--s5-indigo); color: white; }
.day-chip input:focus-visible + span { outline: 3px solid var(--s5-cyan); outline-offset: 3px; }
.time-grid { display: grid; gap: var(--s5-space-4); }
.time-box { padding: var(--s5-space-4); border: 1px solid var(--s5-line); border-radius: var(--s5-radius); }
.time-box > strong { display: block; margin-bottom: var(--s5-space-3); color: var(--s5-ink); font-size: 0.875rem; }
.time-box .field-row { grid-template-columns: 1fr; }
.time-box input[type="time"] { width: 100%; min-width: 0; }

@container (min-width: 360px) {
  .time-box .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 680px) {
  .time-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 560px) {
  .generator-grid.additional-doctor-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 900px) {
  .generator-grid.additional-doctor-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Submission result feedback */
.result-pulse-success { animation: generator-success 650ms var(--s5-ease); }
.result-pulse-warning { animation: generator-warning 650ms var(--s5-ease); }
.result-pulse-danger { animation: generator-danger 650ms var(--s5-ease); }
@keyframes generator-success { 50% { box-shadow: 0 0 0 6px var(--s5-success-soft); } }
@keyframes generator-warning { 50% { box-shadow: 0 0 0 6px var(--s5-warning-soft); } }
@keyframes generator-danger { 50% { box-shadow: 0 0 0 6px var(--s5-danger-soft); } }

@media (min-width: 640px) {
  .studio-masthead { grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); align-items: start; }
  .generator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coordinate-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-span-2, .field-span-3 { grid-column: 1 / -1; }
  .template-preview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .generator-studio-grid { grid-template-columns: 280px minmax(0, 1fr); }
  .studio-brief { position: sticky; top: var(--s5-space-5); }
  .generator-wizard-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); overflow: visible; }
  .wizard-step-pill { min-width: 0; }
}

@media (min-width: 1180px) {
  .generator-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .field-span-2 { grid-column: span 2; }
  .field-span-3 { grid-column: 1 / -1; }
  .template-preview-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .studio-masthead, .studio-brief, .generator-section-inner { padding: var(--s5-space-4); }
  .studio-masthead { gap: var(--s5-space-5); }
  .studio-masthead-copy h1 { font-size: 1.75rem; }
  .generator-wizard-panel > summary { padding: var(--s5-space-4); }
  .generator-step-actions { position: sticky; bottom: 69px; z-index: calc(var(--s5-z-sticky) - 1); margin-inline: calc(var(--s5-space-4) * -1); padding: var(--s5-space-3) var(--s5-space-4); background: var(--s5-surface); }
  .generator-step-actions--final { position: static; margin-inline: 0; padding-inline: 0; }
  .generator-step-actions .btn { flex: 1; }
  .generator-step-actions--final .publish-deck-state { justify-self: start; }
  .publish-confirmation { justify-self: stretch; }
  .generator-final-buttons { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-progress-track span { transition: none; }
  .result-pulse-success, .result-pulse-warning, .result-pulse-danger { animation: none; }
}