/* ============================================================
   PRD Wizard — Design System
   Dark purple + gold/amber mystic aesthetic
   ============================================================ */

/* --- Custom Properties --- */
:root {
  --bg-deep:          #0a0518;
  --bg-card:          #130a28;
  --bg-card-raised:   #1c1038;
  --bg-input:         #0e0820;
  --accent:           #e8b84b;
  --accent-light:     #f5d070;
  --accent-dim:       #a07c25;
  --text-primary:     #f0eaff;
  --text-secondary:   #9b8abf;
  --text-muted:       #8a7aaa;
  --border:           #221648;
  --border-accent:    rgba(232, 184, 75, 0.28);
  --radius:           12px;
  --radius-sm:        8px;
  --radius-lg:        16px;
  --shadow-card:      0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow:      0 0 20px rgba(232, 184, 75, 0.15);
  --transition:       0.18s ease;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(88, 28, 235, 0.09) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(232, 184, 75, 0.06) 0%, transparent 50%);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover {
  color: var(--accent-light);
}

/* --- Star Field --- */
@keyframes star-blink-a {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.1; }
}

@keyframes star-blink-b {
  0%, 100% { opacity: 0.85; }
  50%       { opacity: 0.08; }
}

.star-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Silver/white stars — 2px, slower cycle */
.star-field::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(240, 234, 255, 0.7);
  box-shadow:
    42px  62px rgba(240,234,255,0.5),
    118px 190px rgba(240,234,255,0.6),
    195px  78px rgba(240,234,255,0.4),
     76px 360px rgba(240,234,255,0.5),
    155px 530px rgba(240,234,255,0.6),
     48px 705px rgba(240,234,255,0.4),
    248px 760px rgba(240,234,255,0.5),
    308px 440px rgba(240,234,255,0.3),
    412px  22px rgba(240,234,255,0.4),
    648px  18px rgba(240,234,255,0.5),
    898px  32px rgba(240,234,255,0.4),
   1058px  48px rgba(240,234,255,0.6),
   1185px 158px rgba(240,234,255,0.5),
   1278px 285px rgba(240,234,255,0.4),
   1355px 105px rgba(240,234,255,0.6),
   1412px 458px rgba(240,234,255,0.5),
   1302px 625px rgba(240,234,255,0.4),
   1198px 742px rgba(240,234,255,0.5),
   1098px 825px rgba(240,234,255,0.6),
   1355px 802px rgba(240,234,255,0.4),
     58px 832px rgba(240,234,255,0.5),
    325px 825px rgba(240,234,255,0.4);
  animation: star-blink-a 5s ease-in-out infinite;
}

/* Gold stars — 1px, offset cycle */
.star-field::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  border-radius: 50%;
  background: rgba(232, 184, 75, 0.6);
  box-shadow:
    168px 295px rgba(232,184,75,0.5),
     88px 132px rgba(232,184,75,0.4),
    218px 625px rgba(232,184,75,0.5),
    128px 802px rgba(232,184,75,0.4),
    355px 868px rgba(232,184,75,0.5),
    498px  14px rgba(232,184,75,0.4),
    778px  22px rgba(232,184,75,0.5),
    998px  16px rgba(232,184,75,0.4),
   1128px 322px rgba(232,184,75,0.5),
   1252px 482px rgba(232,184,75,0.4),
   1382px 652px rgba(232,184,75,0.5),
   1462px 205px rgba(232,184,75,0.4),
   1102px 702px rgba(232,184,75,0.5),
    748px 808px rgba(232,184,75,0.4),
    298px 222px rgba(232,184,75,0.5),
   1412px 762px rgba(232,184,75,0.4);
  animation: star-blink-b 5s ease-in-out infinite 2.5s;
}

/* --- App Shell --- */
#app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* --- Header --- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 5, 24, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
}

.header-inner {
  max-width: 900px;
  margin: 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
}

.logo-link {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 8px;
  text-decoration: none;
}

/* --- Wizard Hat Logo --- */
@keyframes star-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.2; transform: scale(0.6); }
}

@keyframes hat-wiggle {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-14deg); }
  40%  { transform: rotate(12deg); }
  60%  { transform: rotate(-7deg); }
  80%  { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}

.logo-hat {
  flex-shrink: 0;
  transform-origin: 50% 90%;
}

.logo-link:hover .logo-hat {
  animation: hat-wiggle 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.hat-star { transform-origin: center; }

.hat-star-1 { animation: star-twinkle 2.4s ease-in-out infinite; }
.hat-star-2 { animation: star-twinkle 2.4s ease-in-out infinite 0.8s; }
.hat-star-3 { animation: star-twinkle 2.4s ease-in-out infinite 1.6s; }

.logo-text {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 60%, var(--accent-dim) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Main Content --- */
#main-content {
  flex: 1;
  padding: 32px 20px 64px;
}

/* --- Flash Messages --- */
.flash {
  max-width: 640px;
  margin: 0 auto 24px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
}

.flash--error {
  background: rgba(229, 62, 62, 0.12);
  border: 1px solid rgba(229, 62, 62, 0.3);
  color: #fc8181;
}

.flash--notice {
  background: rgba(232, 184, 75, 0.1);
  border: 1px solid var(--border-accent);
  color: var(--accent-light);
}

/* --- Wizard Container --- */
.wizard-container {
  max-width: 600px;
  margin: 0 auto;
}

.wizard-container--wide {
  max-width: 740px;
}

/* --- Step Indicator --- */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 40px;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  border: 2px solid var(--border);
  color: var(--text-muted);
  background: var(--bg-card);
  transition: all var(--transition);
}

.step-item--active .step-circle {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent-dim), var(--accent));
  color: #1a0c00;
  box-shadow: 0 0 16px rgba(232, 184, 75, 0.35);
}

.step-item--done .step-circle {
  border-color: var(--accent-dim);
  background: rgba(232, 184, 75, 0.15);
  color: var(--accent);
}

.step-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.step-item--active .step-label {
  color: var(--accent);
}

.step-item--done .step-label {
  color: var(--accent-dim);
}

.step-connector {
  width: 64px;
  height: 2px;
  background: var(--border);
  margin: 0;
  margin-bottom: 20px;
  transition: background var(--transition);
}

.step-connector--done {
  background: var(--accent-dim);
}

/* --- Wizard Header --- */
.wizard-header {
  margin-bottom: 32px;
  text-align: center;
}

.wizard-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.wizard-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
}

.step-optional {
  display: inline;
  margin-left: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.skip-link {
  color: var(--accent-dim);
  font-weight: 500;
  transition: color var(--transition);
}
.skip-link:hover {
  color: var(--accent);
}

/* --- Forms --- */
.wizard-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.field-input {
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.field-input::placeholder {
  color: var(--text-muted);
}

.field-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 184, 75, 0.12);
}

/* --- Pill / Radio Selectors --- */
.pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill-option {
  position: relative;
  cursor: pointer;
}

.pill-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.pill-label {
  display: block;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
}

.pill-option:hover .pill-label {
  border-color: var(--accent-dim);
  color: var(--text-primary);
}

.pill-radio:checked + .pill-label {
  background: linear-gradient(135deg, rgba(232, 184, 75, 0.15), rgba(232, 184, 75, 0.08));
  border-color: var(--accent);
  color: var(--accent-light);
  box-shadow: 0 0 12px rgba(232, 184, 75, 0.2);
}

.pill-radio:focus-visible + .pill-label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Feature Checkbox Cards --- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
}

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: all var(--transition);
  user-select: none;
}

.feature-card:hover {
  border-color: var(--accent-dim);
  background: var(--bg-card-raised);
}

.feature-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Checked state via :has() */
.feature-card:has(.feature-checkbox:checked) {
  background: linear-gradient(135deg, rgba(232, 184, 75, 0.12), rgba(232, 184, 75, 0.05));
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(232, 184, 75, 0.18);
}

.feature-icon {
  width: 24px;
  height: 24px;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: color var(--transition);
}

.feature-icon svg {
  width: 100%;
  height: 100%;
}

.feature-card:has(.feature-checkbox:checked) .feature-icon {
  color: var(--accent);
}

.feature-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.3;
}

.feature-card:has(.feature-checkbox:checked) .feature-name {
  color: var(--accent-light);
}

.feature-card:has(.feature-checkbox:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Vibe Selector Cards --- */
.vibe-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 480px) {
  .vibe-grid {
    grid-template-columns: 1fr;
  }
}

.vibe-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
}

.vibe-card:hover {
  border-color: var(--accent-dim);
  background: var(--bg-card-raised);
}

.vibe-card:has(.vibe-radio:checked) {
  background: linear-gradient(135deg, rgba(232, 184, 75, 0.12), rgba(232, 184, 75, 0.04));
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(232, 184, 75, 0.18);
}

.vibe-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.vibe-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.vibe-desc {
  font-size: 13px;
  color: var(--text-muted);
}

.vibe-card:has(.vibe-radio:checked) .vibe-label {
  color: var(--accent-light);
}

.vibe-card:has(.vibe-radio:checked) .vibe-desc {
  color: var(--text-secondary);
}

.vibe-card:has(.vibe-radio:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Color Swatches --- */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(6, 32px);
  gap: 10px;
}

.swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  position: relative;
}

/* Extend tap area to 44×44px minimum without changing visual size */
.swatch::before {
  content: '';
  position: absolute;
  inset: -6px;
}

.swatch:hover {
  transform: scale(1.15);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.swatch--selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 184, 75, 0.35);
  transform: scale(1.12);
}

/* --- Font Selector Cards --- */
.font-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.font-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
}

.font-card:hover {
  border-color: var(--accent-dim);
  background: var(--bg-card-raised);
}

.font-card:has(.font-radio:checked) {
  background: linear-gradient(135deg, rgba(232, 184, 75, 0.12), rgba(232, 184, 75, 0.04));
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(232, 184, 75, 0.15);
}

.font-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.font-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 180px;
}

.font-card:has(.font-radio:checked) .font-name {
  color: var(--accent-light);
}

.font-card:has(.font-radio:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.font-desc {
  font-size: 13px;
  color: var(--text-muted);
}

/* --- Wizard Actions --- */
.wizard-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
}

.wizard-actions--split {
  justify-content: space-between;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 11px 24px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn--primary {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 50%, var(--accent-dim) 100%);
  color: #1a0c00;
  box-shadow: 0 2px 16px rgba(232, 184, 75, 0.3);
}

.btn--primary:hover {
  background: linear-gradient(135deg, #f9e08a 0%, var(--accent-light) 50%, var(--accent) 100%);
  box-shadow: 0 4px 24px rgba(232, 184, 75, 0.45);
  transform: translateY(-1px);
  color: #1a0c00;
}

.btn--primary:active {
  transform: translateY(0);
}

.btn--full {
  width: 100%;
}

.btn--secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1.5px solid var(--border);
}

.btn--secondary:hover {
  border-color: var(--accent-dim);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
}

.btn--ghost:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
  background: rgba(232, 184, 75, 0.06);
}

.btn--sm {
  padding: 7px 14px;
  font-size: 12px;
}

/* --- PRD View --- */
.prd-container {
  max-width: 800px;
  margin: 0 auto;
}

.prd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.prd-meta {
  flex: 1;
}

.prd-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.prd-tagline {
  font-size: 16px;
  color: var(--text-secondary);
  font-style: italic;
}

.prd-actions {
  flex-shrink: 0;
  padding-top: 6px;
}

.prd-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- PRD Section Cards --- */
.prd-section-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.prd-section-card:hover {
  border-color: var(--accent-dim);
  box-shadow: var(--shadow-glow);
}

.prd-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.prd-section-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-transform: uppercase;
}

.regen-btn {
  flex-shrink: 0;
}

.prd-section-content {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
}

.prd-section-content p {
  margin-bottom: 10px;
}

.prd-section-content p:last-child {
  margin-bottom: 0;
}

.prd-section-content strong {
  color: var(--text-primary);
  font-weight: 600;
}

.prd-section-content ul,
.prd-section-content ol {
  padding-left: 20px;
  margin-bottom: 10px;
}

.prd-section-content li {
  margin-bottom: 4px;
}

.text-muted {
  color: var(--text-muted);
  font-style: italic;
}

/* --- Loading State --- */
.section-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(19, 10, 40, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  color: var(--accent);
  border-radius: var(--radius);
  backdrop-filter: blur(2px);
  z-index: 10;
}

.prd-section-card.is-loading .section-loading-overlay {
  display: flex;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(232, 184, 75, 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- Empty State --- */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.empty-state p {
  margin-bottom: 20px;
  font-size: 16px;
}

.empty-state__detail {
  font-size: 13px !important;
  color: var(--text-muted);
  max-width: 380px;
  margin: -8px auto 24px !important;
  line-height: 1.6;
}

.empty-state__detail code {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 4px;
  border-radius: 3px;
}

/* --- Generation Loading Overlay --- */
.generation-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 5, 24, 0.92);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
}

.generation-overlay.is-visible {
  display: flex;
}

.generation-overlay__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 20px;
}

.spinner--lg {
  width: 40px;
  height: 40px;
  border-width: 3px;
}

.generation-overlay__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
  margin: 0;
}

.generation-overlay__hint {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

/* --- Markdown Content --- */
.prd-section-content h1,
.prd-section-content h2,
.prd-section-content h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 16px 0 6px;
}

.prd-section-content h1:first-child,
.prd-section-content h2:first-child,
.prd-section-content h3:first-child {
  margin-top: 0;
}

.prd-section-content p {
  margin: 0 0 10px;
  line-height: 1.65;
}

.prd-section-content p:last-child {
  margin-bottom: 0;
}

.prd-section-content ul,
.prd-section-content ol {
  margin: 0 0 10px 20px;
  padding: 0;
}

.prd-section-content li {
  margin-bottom: 4px;
  line-height: 1.6;
}

.prd-section-content strong {
  color: var(--text-primary);
  font-weight: 600;
}

.prd-section-content code {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.07);
  padding: 1px 5px;
  border-radius: 3px;
}

.prd-section-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  font-size: 13px;
}

.prd-section-content th,
.prd-section-content td {
  text-align: left;
  padding: 6px 10px;
  border: 1px solid var(--border);
}

.prd-section-content th {
  background: rgba(255, 255, 255, 0.05);
  font-weight: 600;
}

/* --- Regenerate Error --- */
.regen-error {
  padding: 12px 16px;
  background: rgba(229, 62, 62, 0.1);
  border: 1px solid rgba(229, 62, 62, 0.25);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #fc8181;
}

.regen-error p {
  margin: 0 0 4px;
}

.regen-error p:last-child {
  margin: 0;
  color: var(--text-muted);
}

/* --- Utility --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* --- Responsive --- */
@media (max-width: 640px) {
  .wizard-title {
    font-size: 22px;
  }

  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .prd-header {
    flex-direction: column;
    gap: 12px;
  }

  .prd-title {
    font-size: 24px;
  }

  .swatch-grid {
    grid-template-columns: repeat(6, 28px);
    gap: 8px;
  }

  .swatch {
    width: 28px;
    height: 28px;
  }

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

@media (max-width: 400px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* --- Spinner small --- */
.spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
  flex-shrink: 0;
}

/* --- Generating banner (show page, sections arriving via cable) --- */
.generating-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius);
  margin-bottom: 24px;
  color: var(--text-secondary);
  font-size: 0.875rem;
}

/* --- Section fade-in when appended via Turbo Stream --- */
@keyframes sectionFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.prd-section-card--animate {
  animation: sectionFadeUp 0.35s ease both;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}