/* ========================================
   FirstBabyLook WIZARD - Premium Flow
   Clean, warm, professional
   ======================================== */

:root {
    /* Color Palette - Cozy Cabin Warm */
    --color-bg: #fdfbf8;
    --color-white: #ffffff;
    --color-navy: #5B3A29;
    --color-navy-light: #7a5240;
    --color-ocean: #A76D5D;
    --color-ocean-light: #b8847a;
    --color-sky: #D1B7A0;
    --color-cloud: #F9E8D2;
    --color-ice: #fdf6ef;
    --color-charcoal: #3d2e28;
    --color-warm-gray: #5a4a42;
    --color-border: #e6ddd6;
    --color-gold: #c9a227;
    --color-gold-light: #fefce8;

    /* Typography */
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "DM Sans", -apple-system, sans-serif;

    /* Effects */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --shadow-soft: 0 2px 8px rgba(91, 58, 41, 0.06);
    --shadow-medium: 0 4px 20px rgba(91, 58, 41, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-charcoal);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ========================================
   WIZARD SHELL
   ======================================== */
.wizard {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* ========================================
   PROGRESS BAR - Clean, minimal
   ======================================== */
.progress-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

.btn-back {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    color: var(--color-navy);
}

.btn-back:hover:not(:disabled) {
    background: var(--color-cloud);
}

.btn-back:disabled {
    opacity: 0.25;
    cursor: default;
}

.btn-back svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.btn-forward {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    color: var(--color-navy);
}

.btn-forward:hover:not(:disabled) {
    background: var(--color-cloud);
}

.btn-forward:disabled {
    opacity: 0.25;
    cursor: default;
}

.btn-forward svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.btn-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    color: var(--color-warm-gray);
    margin-left: 8px;
}

.btn-close:hover {
    background: var(--color-cloud);
    color: var(--color-navy);
}

.btn-close svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.progress-track {
    flex: 1;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--color-ocean) 0%,
        var(--color-sky) 100%
    );
    border-radius: 2px;
    transition: width 0.4s var(--ease-out);
}

.progress-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-warm-gray);
    white-space: nowrap;
    min-width: 40px;
    text-align: right;
}

/* ========================================
   STEPS CONTAINER
   ======================================== */
.steps-container {
    flex: 1;
    position: relative;
}

/* Hide steps while loading draft to prevent flash */
body.loading-draft .steps-container,
body.loading-draft .progress-bar {
    opacity: 0;
}

.steps-container {
    transition: opacity 0.2s ease-out;
}

.step {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 24px 60px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: all 0.3s var(--ease-out);
}

.step.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    position: relative;
}

.step-inner {
    width: 100%;
    max-width: 400px;
}

.step-inner-wide {
    max-width: 900px;
}

.step-inner-extra-wide {
    max-width: 900px;
}

.step-inner-medium {
    max-width: 500px;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
.step-header {
    text-align: center;
    margin-bottom: 36px;
}

.step-title {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 500;
    color: var(--color-navy);
    line-height: 1.25;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.step-desc {
    font-size: 0.9375rem;
    color: var(--color-warm-gray);
    line-height: 1.6;
}

/* ========================================
   FORM SECTIONS
   ======================================== */
.form-group {
    margin-bottom: 28px;
}

.form-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-warm-gray);
    margin-bottom: 12px;
}

/* Option Grid */
.options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.options-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.opt-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 10px;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.opt-btn:hover {
    border-color: var(--color-ocean-light);
    background: var(--color-ice);
}

.opt-btn.selected {
    border-color: var(--color-ocean);
    background: var(--color-ice);
    box-shadow: 0 0 0 3px rgba(167, 109, 93, 0.15);
}

/* Prefilled animation - smooth appearance when restoring saved preferences */
.opt-btn.prefilled,
.gender-btn.prefilled {
    animation: prefillPop 0.3s var(--ease-out) forwards;
}

@keyframes prefillPop {
    0% {
        transform: scale(0.95);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Swatches */
.opt-btn .swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.8);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.15),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* Skin swatches - refined gradients (6 options) */
.swatch.skin-fair {
    background: linear-gradient(145deg, #fff5eb 0%, #ffe8d6 100%);
}

.swatch.skin-light {
    background: linear-gradient(145deg, #ffe8d6 0%, #f5d5c0 100%);
}

.swatch.skin-medium {
    background: linear-gradient(145deg, #d4a574 0%, #c49563 100%);
}

.swatch.skin-olive {
    background: linear-gradient(145deg, #c9a86c 0%, #b8956a 100%);
}

.swatch.skin-tan {
    background: linear-gradient(145deg, #a67c52 0%, #8b6340 100%);
}

.swatch.skin-deep {
    background: linear-gradient(145deg, #6b4f3d 0%, #4a3528 100%);
}

/* Eye swatches - refined radials (7 options) */
.swatch.eye-brown {
    background: #6b4423;
}

.swatch.eye-blue {
    background: #4a90c2;
}

.swatch.eye-green {
    background: #5a8c5a;
}

.swatch.eye-gray {
    background: #7a8b9c;
}

.swatch.eye-amber {
    background: #d4a04a;
}

.swatch.eye-hazel {
    background: #8b7355;
}

.swatch.eye-black {
    background: #2d2926;
}

/* Hair swatches (6 options) */
.swatch.hair-blonde {
    background: linear-gradient(145deg, #f0d78c 0%, #d4b86a 100%);
}

.swatch.hair-sandy {
    background: linear-gradient(145deg, #c9a86c 0%, #a68b52 100%);
}

.swatch.hair-brown {
    background: linear-gradient(145deg, #6b4f3d 0%, #523c2e 100%);
}

.swatch.hair-auburn {
    background: linear-gradient(145deg, #8b4a3d 0%, #6b3a2e 100%);
}

.swatch.hair-black {
    background: linear-gradient(145deg, #2d2926 0%, #1a1614 100%);
}

.swatch.hair-red {
    background: linear-gradient(145deg, #b84a32 0%, #8b3a28 100%);
}

/* Ethnicity swatches (6 options) - using flag-inspired/cultural colors */
.swatch.ethnicity-european {
    background: linear-gradient(145deg, #5b8dd9 0%, #4a7ac2 100%);
}

.swatch.ethnicity-asian {
    background: linear-gradient(145deg, #e8c547 0%, #d4a93a 100%);
}

.swatch.ethnicity-middle-eastern {
    background: linear-gradient(145deg, #8b6b4f 0%, #6b5140 100%);
}

.swatch.ethnicity-african {
    background: linear-gradient(145deg, #2d8c3c 0%, #1f6b2a 100%);
}

.swatch.ethnicity-latin-american {
    background: linear-gradient(145deg, #e87a4a 0%, #d4633a 100%);
}

.swatch.ethnicity-pacific-islander {
    background: linear-gradient(145deg, #3a9ca8 0%, #2a7a86 100%);
}

.opt-btn .opt-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-charcoal);
}

/* ========================================
   V1-A GENETICS: Two Column Cards
   Exact match to temp-layout-variations.html
   ======================================== */
.genetics-container {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.genetics-header {
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid #e6ddd6;
    display: flex;
    align-items: center;
    gap: 12px;
}

.genetics-step {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7a6860;
    background: #f5f0eb;
    padding: 4px 10px;
    border-radius: 4px;
}

.genetics-title {
    font-weight: 600;
    color: #5B3A29;
    font-size: 0.9375rem;
}

.genetics-content {
    padding: 32px 24px;
}

.step-header-left {
    text-align: left;
}

.genetics-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.genetics-column {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e6ddd6;
}

.genetics-column-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: #fdfbf8;
    border-bottom: 1px solid #e6ddd6;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #5B3A29;
}

.genetics-column-header svg {
    width: 18px;
    height: 18px;
    stroke: #7a6860;
}

.genetics-column-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.trait-card {
    background: #ffffff;
    border: 2px solid #e6ddd6;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: border-color 0.2s ease;
}

.trait-card.completed {
    border-color: transparent;
}

/* Shadow colors matching selection - Skin (6 options) */
.trait-card.completed:has(.trait-swatch.skin-fair) {
    box-shadow: 0 0 0 3px rgba(255, 232, 214, 0.5);
}

.trait-card.completed:has(.trait-swatch.skin-light) {
    box-shadow: 0 0 0 3px rgba(245, 213, 192, 0.5);
}

.trait-card.completed:has(.trait-swatch.skin-medium) {
    box-shadow: 0 0 0 3px rgba(196, 149, 99, 0.5);
}

.trait-card.completed:has(.trait-swatch.skin-olive) {
    box-shadow: 0 0 0 3px rgba(184, 149, 106, 0.5);
}

.trait-card.completed:has(.trait-swatch.skin-tan) {
    box-shadow: 0 0 0 3px rgba(139, 99, 64, 0.5);
}

.trait-card.completed:has(.trait-swatch.skin-deep) {
    box-shadow: 0 0 0 3px rgba(74, 53, 40, 0.5);
}

/* Shadow colors - Eyes (7 options) */
.trait-card.completed:has(.trait-swatch.eye-brown) {
    box-shadow: 0 0 0 3px rgba(107, 68, 35, 0.5);
}

.trait-card.completed:has(.trait-swatch.eye-blue) {
    box-shadow: 0 0 0 3px rgba(74, 144, 194, 0.5);
}

.trait-card.completed:has(.trait-swatch.eye-green) {
    box-shadow: 0 0 0 3px rgba(90, 140, 90, 0.5);
}

.trait-card.completed:has(.trait-swatch.eye-gray) {
    box-shadow: 0 0 0 3px rgba(122, 139, 156, 0.5);
}

.trait-card.completed:has(.trait-swatch.eye-amber) {
    box-shadow: 0 0 0 3px rgba(212, 160, 74, 0.5);
}

.trait-card.completed:has(.trait-swatch.eye-hazel) {
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.5);
}

.trait-card.completed:has(.trait-swatch.eye-black) {
    box-shadow: 0 0 0 3px rgba(45, 41, 38, 0.5);
}

/* Shadow colors - Hair (6 options) */
.trait-card.completed:has(.trait-swatch.hair-blonde) {
    box-shadow: 0 0 0 3px rgba(212, 184, 106, 0.5);
}

.trait-card.completed:has(.trait-swatch.hair-sandy) {
    box-shadow: 0 0 0 3px rgba(166, 139, 82, 0.5);
}

.trait-card.completed:has(.trait-swatch.hair-brown) {
    box-shadow: 0 0 0 3px rgba(82, 60, 46, 0.5);
}

.trait-card.completed:has(.trait-swatch.hair-auburn) {
    box-shadow: 0 0 0 3px rgba(107, 58, 46, 0.5);
}

.trait-card.completed:has(.trait-swatch.hair-black) {
    box-shadow: 0 0 0 3px rgba(26, 22, 20, 0.5);
}

.trait-card.completed:has(.trait-swatch.hair-red) {
    box-shadow: 0 0 0 3px rgba(139, 58, 40, 0.5);
}

/* Shadow colors - Ethnicity (6 options) */
.trait-card.completed:has(.trait-swatch.ethnicity-european) {
    box-shadow: 0 0 0 3px rgba(74, 122, 194, 0.5);
}

.trait-card.completed:has(.trait-swatch.ethnicity-asian) {
    box-shadow: 0 0 0 3px rgba(212, 169, 58, 0.5);
}

.trait-card.completed:has(.trait-swatch.ethnicity-middle-eastern) {
    box-shadow: 0 0 0 3px rgba(107, 81, 64, 0.5);
}

.trait-card.completed:has(.trait-swatch.ethnicity-african) {
    box-shadow: 0 0 0 3px rgba(31, 107, 42, 0.5);
}

.trait-card.completed:has(.trait-swatch.ethnicity-latin-american) {
    box-shadow: 0 0 0 3px rgba(212, 99, 58, 0.5);
}

.trait-card.completed:has(.trait-swatch.ethnicity-pacific-islander) {
    box-shadow: 0 0 0 3px rgba(42, 122, 134, 0.5);
}

.trait-swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trait-icon {
    color: #cbd5e0; /* Default gray when not selected */
}

/* Only show color when card is completed */
.trait-card.completed .trait-icon {
    color: inherit;
}

.trait-icon-sm {
    width: 28px;
    height: 28px;
}

.trait-icon-lg {
    width: 34px;
    height: 34px;
}

/* Skin tone icon colors (only when completed) - 6 options */
.trait-card.completed .trait-swatch.skin-fair .trait-icon {
    color: #ffe8d6;
}

.trait-card.completed .trait-swatch.skin-light .trait-icon {
    color: #f5d5c0;
}

.trait-card.completed .trait-swatch.skin-medium .trait-icon {
    color: #c9a07a;
}

.trait-card.completed .trait-swatch.skin-olive .trait-icon {
    color: #b8956a;
}

.trait-card.completed .trait-swatch.skin-tan .trait-icon {
    color: #8b6340;
}

.trait-card.completed .trait-swatch.skin-deep .trait-icon {
    color: #4a3528;
}

/* Eye color icon colors (only when completed) - 7 options */
.trait-card.completed .trait-swatch.eye-brown .trait-icon {
    color: #6b4423;
}

.trait-card.completed .trait-swatch.eye-blue .trait-icon {
    color: #4a90c2;
}

.trait-card.completed .trait-swatch.eye-green .trait-icon {
    color: #5a8c5a;
}

.trait-card.completed .trait-swatch.eye-gray .trait-icon {
    color: #7a8b9c;
}

.trait-card.completed .trait-swatch.eye-amber .trait-icon {
    color: #d4a04a;
}

.trait-card.completed .trait-swatch.eye-hazel .trait-icon {
    color: #8b7355;
}

.trait-card.completed .trait-swatch.eye-black .trait-icon {
    color: #2d2926;
}

/* Hair color icon colors (only when completed) - 6 options */
.trait-card.completed .trait-swatch.hair-blonde .trait-icon {
    color: #d4b86a;
}

.trait-card.completed .trait-swatch.hair-sandy .trait-icon {
    color: #a68b52;
}

.trait-card.completed .trait-swatch.hair-brown .trait-icon {
    color: #523c2e;
}

.trait-card.completed .trait-swatch.hair-auburn .trait-icon {
    color: #6b3a2e;
}

.trait-card.completed .trait-swatch.hair-black .trait-icon {
    color: #1a1614;
}

.trait-card.completed .trait-swatch.hair-red .trait-icon {
    color: #8b3a28;
}

/* Ethnicity icon colors (only when completed) - 6 options */
.trait-card.completed .trait-swatch.ethnicity-european .trait-icon {
    color: #4a7ac2;
}

.trait-card.completed .trait-swatch.ethnicity-asian .trait-icon {
    color: #d4a93a;
}

.trait-card.completed .trait-swatch.ethnicity-middle-eastern .trait-icon {
    color: #6b5140;
}

.trait-card.completed .trait-swatch.ethnicity-african .trait-icon {
    color: #1f6b2a;
}

.trait-card.completed .trait-swatch.ethnicity-latin-american .trait-icon {
    color: #d4633a;
}

.trait-card.completed .trait-swatch.ethnicity-pacific-islander .trait-icon {
    color: #2a7a86;
}

.trait-info {
    flex: 1;
}

.trait-type {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7a6860;
    white-space: nowrap;
}

.trait-value {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #2d3748;
}

/* Color trait-value labels when selected - Skin (6) */
.trait-card.completed:has(.trait-swatch.skin-fair) .trait-value {
    color: #d4b896;
}
.trait-card.completed:has(.trait-swatch.skin-light) .trait-value {
    color: #c9a282;
}
.trait-card.completed:has(.trait-swatch.skin-medium) .trait-value {
    color: #a67c52;
}
.trait-card.completed:has(.trait-swatch.skin-olive) .trait-value {
    color: #8b7340;
}
.trait-card.completed:has(.trait-swatch.skin-tan) .trait-value {
    color: #6b4f30;
}
.trait-card.completed:has(.trait-swatch.skin-deep) .trait-value {
    color: #4a3528;
}
/* Color trait-value labels - Eyes (7) */
.trait-card.completed:has(.trait-swatch.eye-brown) .trait-value {
    color: #8B4513;
}
.trait-card.completed:has(.trait-swatch.eye-blue) .trait-value {
    color: #4A90D9;
}
.trait-card.completed:has(.trait-swatch.eye-green) .trait-value {
    color: #228B22;
}
.trait-card.completed:has(.trait-swatch.eye-gray) .trait-value {
    color: #5a6b7c;
}
.trait-card.completed:has(.trait-swatch.eye-amber) .trait-value {
    color: #b8862a;
}
.trait-card.completed:has(.trait-swatch.eye-hazel) .trait-value {
    color: #8E7618;
}
.trait-card.completed:has(.trait-swatch.eye-black) .trait-value {
    color: #2d2926;
}
/* Color trait-value labels - Hair (6) */
.trait-card.completed:has(.trait-swatch.hair-blonde) .trait-value {
    color: #a89040;
}
.trait-card.completed:has(.trait-swatch.hair-sandy) .trait-value {
    color: #7a6030;
}
.trait-card.completed:has(.trait-swatch.hair-brown) .trait-value {
    color: #523c2e;
}
.trait-card.completed:has(.trait-swatch.hair-auburn) .trait-value {
    color: #6b3a2e;
}
.trait-card.completed:has(.trait-swatch.hair-black) .trait-value {
    color: #1a1614;
}
.trait-card.completed:has(.trait-swatch.hair-red) .trait-value {
    color: #8b3a28;
}
/* Color trait-value labels - Ethnicity (6) */
.trait-card.completed:has(.trait-swatch.ethnicity-european) .trait-value {
    color: #3a5a8c;
}
.trait-card.completed:has(.trait-swatch.ethnicity-asian) .trait-value {
    color: #a68020;
}
.trait-card.completed:has(.trait-swatch.ethnicity-middle-eastern) .trait-value {
    color: #5a4030;
}
.trait-card.completed:has(.trait-swatch.ethnicity-african) .trait-value {
    color: #1f5020;
}
.trait-card.completed:has(.trait-swatch.ethnicity-latin-american) .trait-value {
    color: #a64020;
}
.trait-card.completed:has(.trait-swatch.ethnicity-pacific-islander) .trait-value {
    color: #205a60;
}

.trait-options {
    display: flex;
    gap: 6px;
}

.trait-option {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid #e6ddd6;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    background: transparent;
}

.trait-option.selected {
    border-color: transparent;
}
/* Skin option shadows (6) */
.trait-option.selected.skin-fair {
    box-shadow: 0 0 0 3px rgba(255, 232, 214, 0.5);
}
.trait-option.selected.skin-light {
    box-shadow: 0 0 0 3px rgba(245, 213, 192, 0.5);
}
.trait-option.selected.skin-medium {
    box-shadow: 0 0 0 3px rgba(196, 149, 99, 0.5);
}
.trait-option.selected.skin-olive {
    box-shadow: 0 0 0 3px rgba(184, 149, 106, 0.5);
}
.trait-option.selected.skin-tan {
    box-shadow: 0 0 0 3px rgba(139, 99, 64, 0.5);
}
.trait-option.selected.skin-deep {
    box-shadow: 0 0 0 3px rgba(74, 53, 40, 0.5);
}
/* Eye option shadows (7) */
.trait-option.selected.eye-brown {
    box-shadow: 0 0 0 3px rgba(107, 68, 35, 0.5);
}
.trait-option.selected.eye-blue {
    box-shadow: 0 0 0 3px rgba(74, 144, 194, 0.5);
}
.trait-option.selected.eye-green {
    box-shadow: 0 0 0 3px rgba(90, 140, 90, 0.5);
}
.trait-option.selected.eye-gray {
    box-shadow: 0 0 0 3px rgba(122, 139, 156, 0.5);
}
.trait-option.selected.eye-amber {
    box-shadow: 0 0 0 3px rgba(212, 160, 74, 0.5);
}
.trait-option.selected.eye-hazel {
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.5);
}
.trait-option.selected.eye-black {
    box-shadow: 0 0 0 3px rgba(45, 41, 38, 0.5);
}
/* Hair option shadows (6) */
.trait-option.selected.hair-blonde {
    box-shadow: 0 0 0 3px rgba(212, 184, 106, 0.5);
}
.trait-option.selected.hair-sandy {
    box-shadow: 0 0 0 3px rgba(166, 139, 82, 0.5);
}
.trait-option.selected.hair-brown {
    box-shadow: 0 0 0 3px rgba(82, 60, 46, 0.5);
}
.trait-option.selected.hair-auburn {
    box-shadow: 0 0 0 3px rgba(107, 58, 46, 0.5);
}
.trait-option.selected.hair-black {
    box-shadow: 0 0 0 3px rgba(26, 22, 20, 0.5);
}
.trait-option.selected.hair-red {
    box-shadow: 0 0 0 3px rgba(139, 58, 40, 0.5);
}
/* Ethnicity option shadows (6) */
.trait-option.selected.ethnicity-european {
    box-shadow: 0 0 0 3px rgba(74, 122, 194, 0.5);
}
.trait-option.selected.ethnicity-asian {
    box-shadow: 0 0 0 3px rgba(212, 169, 58, 0.5);
}
.trait-option.selected.ethnicity-middle-eastern {
    box-shadow: 0 0 0 3px rgba(107, 81, 64, 0.5);
}
.trait-option.selected.ethnicity-african {
    box-shadow: 0 0 0 3px rgba(31, 107, 42, 0.5);
}
.trait-option.selected.ethnicity-latin-american {
    box-shadow: 0 0 0 3px rgba(212, 99, 58, 0.5);
}
.trait-option.selected.ethnicity-pacific-islander {
    box-shadow: 0 0 0 3px rgba(42, 122, 134, 0.5);
}

/* Trait option swatches inherit from main swatches */
/* Skin options (6) */
.trait-option.skin-fair {
    background: linear-gradient(145deg, #fff5eb 0%, #ffe8d6 100%);
}

.trait-option.skin-light {
    background: linear-gradient(145deg, #ffe8d6 0%, #f5d5c0 100%);
}

.trait-option.skin-medium {
    background: linear-gradient(145deg, #d4a574 0%, #c49563 100%);
}

.trait-option.skin-olive {
    background: linear-gradient(145deg, #c9a86c 0%, #b8956a 100%);
}

.trait-option.skin-tan {
    background: linear-gradient(145deg, #a67c52 0%, #8b6340 100%);
}

.trait-option.skin-deep {
    background: linear-gradient(145deg, #6b4f3d 0%, #4a3528 100%);
}

/* Eye options (7) */
.trait-option.eye-brown {
    background: #6b4423;
}

.trait-option.eye-blue {
    background: #4a90c2;
}

.trait-option.eye-green {
    background: #5a8c5a;
}

.trait-option.eye-gray {
    background: #7a8b9c;
}

.trait-option.eye-amber {
    background: #d4a04a;
}

.trait-option.eye-hazel {
    background: #8b7355;
}

.trait-option.eye-black {
    background: #2d2926;
}

/* Hair options (6) */
.trait-option.hair-blonde {
    background: linear-gradient(145deg, #f0d78c 0%, #d4b86a 100%);
}

.trait-option.hair-sandy {
    background: linear-gradient(145deg, #c9a86c 0%, #a68b52 100%);
}

.trait-option.hair-brown {
    background: linear-gradient(145deg, #6b4f3d 0%, #523c2e 100%);
}

.trait-option.hair-auburn {
    background: linear-gradient(145deg, #8b4a3d 0%, #6b3a2e 100%);
}

.trait-option.hair-black {
    background: linear-gradient(145deg, #2d2926 0%, #1a1614 100%);
}

.trait-option.hair-red {
    background: linear-gradient(145deg, #b84a32 0%, #8b3a28 100%);
}

/* Ethnicity options (6) */
.trait-option.ethnicity-european {
    background: linear-gradient(145deg, #5b8dd9 0%, #4a7ac2 100%);
}

.trait-option.ethnicity-asian {
    background: linear-gradient(145deg, #e8c547 0%, #d4a93a 100%);
}

.trait-option.ethnicity-middle-eastern {
    background: linear-gradient(145deg, #8b6b4f 0%, #6b5140 100%);
}

.trait-option.ethnicity-african {
    background: linear-gradient(145deg, #2d8c3c 0%, #1f6b2a 100%);
}

.trait-option.ethnicity-latin-american {
    background: linear-gradient(145deg, #e87a4a 0%, #d4633a 100%);
}

.trait-option.ethnicity-pacific-islander {
    background: linear-gradient(145deg, #3a9ca8 0%, #2a7a86 100%);
}

/* Ethnicity dropdown select */
.trait-select {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid #e6ddd6;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: #5a4a42;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a4a42' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.trait-select:hover {
    border-color: #c9b8a8;
}

.trait-select:focus {
    outline: none;
    border-color: #a89080;
    box-shadow: 0 0 0 3px rgba(168, 144, 128, 0.2);
}

.trait-select option {
    padding: 8px;
}

/* Trait swatch colors (larger preview) */

/* Mobile: Stack columns */
@media (max-width: 520px) {
    .genetics-two-col {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .step-inner-wide {
        max-width: 400px;
    }
}

/* ========================================
   V2-A UPLOAD: Simple Card
   ======================================== */
.upload-container {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.upload-header {
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid #e6ddd6;
    display: flex;
    align-items: center;
    gap: 12px;
}

.upload-step {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7a6860;
    background: #f5f0eb;
    padding: 4px 10px;
    border-radius: 4px;
}

.upload-title {
    font-weight: 600;
    color: #5B3A29;
    font-size: 0.9375rem;
}

.upload-content {
    padding: 32px 24px;
}

.upload-card-v2 {
    background: #ffffff;
    border: 1px solid #e6ddd6;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
}

.upload-area-v2 {
    border: 2px dashed #e6ddd6;
    border-radius: 10px;
    padding: 40px 20px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.upload-area-v2:hover {
    border-color: #5B3A29;
    background: #fdfbf8;
}

.upload-area-v2.has-file {
    border-style: solid;
    border-color: #5B3A29;
    padding: 0;
    aspect-ratio: 4/3;
}

.upload-area-v2.has-file .upload-icon-v2,
.upload-area-v2.has-file .upload-text-v2,
.upload-area-v2.has-file .upload-hint-v2 {
    display: none;
}

.upload-icon-v2 {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    color: #5B3A29;
}

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

.upload-text-v2 {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #5B3A29;
    margin-bottom: 4px;
}

.upload-hint-v2 {
    font-size: 0.75rem;
    color: #7a6860;
}

.upload-preview-v2 {
    display: none;
    position: absolute;
    inset: 0;
}

.upload-area-v2.has-file .upload-preview-v2 {
    display: block;
}

.upload-preview-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.upload-change-v2 {
    position: absolute;
    bottom: 14px;
    right: 14px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #5B3A29;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.upload-change-v2:hover {
    background: white;
    transform: translateY(-1px);
}

.upload-tips-v2 {
    display: flex;
    gap: 12px;
    text-align: left;
}

.upload-tip-v2 {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.75rem;
    color: #7a6860;
}

.upload-tip-v2 svg {
    width: 14px;
    height: 14px;
    color: #38a169;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ========================================
   V3-B GENDER: Horizontal Pills
   ======================================== */
.gender-container {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.gender-header {
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid #e6ddd6;
    display: flex;
    align-items: center;
    gap: 12px;
}

.gender-step {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7a6860;
    background: #f5f0eb;
    padding: 4px 10px;
    border-radius: 4px;
}

.gender-title {
    font-weight: 600;
    color: #5B3A29;
    font-size: 0.9375rem;
}

.gender-content {
    padding: 32px 24px;
}

.gender-pills {
    display: flex;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e6ddd6;
    border-radius: 12px;
    padding: 8px;
}

.gender-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent;
    font-family: inherit;
    color: #2d3748;
}

.gender-pill:hover {
    background: #f5f0eb;
}

.gender-pill.selected {
    background: #5B3A29;
    color: white;
}

.gender-pill-icon {
    width: 20px;
    height: 20px;
}

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

.gender-pill-label {
    font-size: 0.875rem;
    font-weight: 500;
}

/* ========================================
   STEP 4: AUTH (V4-A Card with Benefits)
   ======================================== */
.auth-container {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.auth-header {
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid #e6ddd6;
    display: flex;
    align-items: center;
    gap: 12px;
}

.auth-step {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7a6860;
    background: #f5f0eb;
    padding: 4px 10px;
    border-radius: 4px;
}

.auth-title {
    font-weight: 600;
    color: #5B3A29;
    font-size: 0.9375rem;
}

.auth-content {
    padding: 32px 24px;
}

.auth-card {
    background: #ffffff;
    border: 1px solid #e6ddd6;
    border-radius: 12px;
    padding: 28px 24px;
}

.auth-benefits {
    margin-bottom: 24px;
}

.auth-benefit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 0.8125rem;
    color: #2d3748;
}

.auth-benefit svg {
    width: 16px;
    height: 16px;
    color: #48bb78;
    flex-shrink: 0;
}

.auth-divider {
    height: 1px;
    background: #e6ddd6;
    margin: 20px 0;
}

.auth-note {
    text-align: center;
    font-size: 0.75rem;
    color: #7a6860;
    margin-top: 16px;
}

/* ========================================
   STEP 6: PAYMENT (V6-B Split with Preview)
   ======================================== */
.payment-container {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.payment-header {
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid #e6ddd6;
    display: flex;
    align-items: center;
    gap: 12px;
}

.payment-step {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7a6860;
    background: #f5f0eb;
    padding: 4px 10px;
    border-radius: 4px;
}

.payment-title-header {
    font-weight: 600;
    color: #5B3A29;
    font-size: 0.9375rem;
}

.payment-content {
    padding: 32px 24px;
}

.payment-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.payment-preview {
    background: #f5f0eb;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.payment-preview-img {
    width: 160px;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    position: relative;
}

.payment-preview-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(8px);
}

.payment-preview-lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
}

.payment-preview-lock svg {
    width: 32px;
    height: 32px;
    color: #5B3A29;
}

.payment-preview-text {
    font-size: 0.75rem;
    color: #7a6860;
    margin-top: 12px;
    text-align: center;
}

.payment-card {
    background: #ffffff;
    border: 1px solid #e6ddd6;
    border-radius: 12px;
    padding: 24px;
}

.payment-card-header {
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #f5f0eb;
}

.payment-price {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    color: #5B3A29;
}

.payment-label {
    font-size: 0.8125rem;
    color: #7a6860;
}

.payment-features {
    margin-bottom: 20px;
}

.payment-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 0.875rem;
    color: #2d3748;
}

.payment-feature svg {
    width: 18px;
    height: 18px;
    color: #48bb78;
    flex-shrink: 0;
}

.payment-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.6875rem;
    color: #7a6860;
    margin-top: 16px;
}

.payment-secure svg {
    width: 12px;
    height: 12px;
}

@media (max-width: 600px) {
    .payment-split {
        grid-template-columns: 1fr;
    }

    .dream-frame {
        width: 320px;
        height: 320px;
    }

    .dream-image-wrap {
        width: 260px;
        height: 260px;
    }
}

/* ========================================
   PRIMARY BUTTON
   ======================================== */
.btn-primary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    background: linear-gradient(
        135deg,
        var(--color-ocean) 0%,
        var(--color-navy-light) 100%
    );
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-top: 28px;
    box-shadow: 0 2px 8px rgba(167, 109, 93, 0.25);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(167, 109, 93, 0.3);
}

.btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-primary svg {
    width: 18px;
    height: 18px;
}

/* ========================================
   UPLOAD ZONE
   ======================================== */
.upload-zone {
    width: 100%;
    aspect-ratio: 4/3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--color-white);
    border: 2px dashed var(--color-border);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.upload-zone:hover {
    border-color: var(--color-ocean);
    background: var(--color-cloud);
}

.upload-zone.dragover {
    border-color: var(--color-ocean);
    border-style: solid;
    background: var(--color-ice);
    transform: scale(1.01);
}

.upload-zone.has-file {
    border-style: solid;
    border-color: var(--color-ocean);
}

.upload-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        var(--color-ocean) 0%,
        var(--color-navy-light) 100%
    );
    border-radius: 14px;
    color: white;
    box-shadow: 0 4px 12px rgba(167, 109, 93, 0.25);
}

.upload-icon svg {
    width: 26px;
    height: 26px;
}

.upload-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-navy);
}

.upload-hint {
    font-size: 0.8125rem;
    color: var(--color-warm-gray);
}

/* Preview state */
.upload-preview {
    position: absolute;
    inset: 0;
    display: none;
}

.upload-zone.has-file .upload-preview {
    display: block;
}

.upload-zone.has-file .upload-icon,
.upload-zone.has-file .upload-text,
.upload-zone.has-file .upload-hint {
    display: none;
}

.upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-change {
    position: absolute;
    bottom: 14px;
    right: 14px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-navy);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.upload-change:hover {
    background: white;
    transform: translateY(-1px);
}

/* ========================================
   GENDER SELECTION
   ======================================== */
.gender-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.gender-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 16px;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
}

.gender-btn:hover {
    border-color: var(--color-ocean-light);
    background: var(--color-cloud);
    transform: translateY(-2px);
}

.gender-btn.selected {
    border-color: var(--color-ocean);
    background: var(--color-ice);
    box-shadow: 0 0 0 3px rgba(167, 109, 93, 0.15);
}

.gender-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-cloud);
    border-radius: 50%;
    color: var(--color-ocean);
    transition: all 0.25s ease;
}

.gender-btn:hover .gender-icon,
.gender-btn.selected .gender-icon {
    background: var(--color-ocean);
    color: white;
}

.gender-icon svg {
    width: 22px;
    height: 22px;
}

.gender-btn .opt-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-navy);
}

/* ========================================
   AUTH SECTION
   ======================================== */
.auth-box {
    text-align: center;
}

.btn-google {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-charcoal);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-google:hover {
    border-color: var(--color-charcoal);
    background: var(--color-bg);
}

.btn-google svg {
    width: 20px;
    height: 20px;
}

/* ========================================
   ANALYSIS - V19 Focus Breathe Animation
   Clean, focused, professional
   ======================================== */
.analysis-container {
    text-align: center;
}

/* Analysis Card (analyzing state) */
.analysis-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.analysis-card-header {
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid #e6ddd6;
    display: flex;
    align-items: center;
    gap: 12px;
}

.analysis-card-step {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7a6860;
    background: #f5f0eb;
    padding: 4px 10px;
    border-radius: 4px;
}

.analysis-card-title {
    font-weight: 600;
    color: #5B3A29;
    font-size: 0.9375rem;
}

.analysis-card-content {
    padding: 32px 24px;
}

#analyzingUI {
    display: block;
}

.dream-frame {
    position: relative;
    width: 380px;
    height: 380px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dream-image-wrap {
    position: relative;
    width: 330px;
    height: 330px;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(145deg, #fff9f5 0%, #fff0eb 100%);
    animation: focusBreathe 4s ease-in-out infinite;
}

.dream-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: focusBreatheImg 4s ease-in-out infinite;
}

@keyframes focusBreathe {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(91, 58, 41, 0.1);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 8px 35px rgba(91, 58, 41, 0.15);
    }
}

@keyframes focusBreatheImg {
    0%,
    100% {
        filter: blur(2px);
        opacity: 0.85;
    }
    50% {
        filter: blur(0);
        opacity: 1;
    }
}

.dream-status {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-navy);
    margin-bottom: 16px;
    min-height: 32px;
    line-height: 1.4;
    letter-spacing: -0.01em;
    transition: opacity 0.3s ease;
}

.dream-progress {
    position: relative;
    width: 100%;
    max-width: 280px;
    height: 6px;
    margin: 0 auto;
    background: var(--color-border);
    border-radius: 3px;
    overflow: visible;
}

.dream-progress-fill {
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--color-ocean),
        var(--color-ocean-light)
    );
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    width: 0%;
}

/* Results */
.analysis-results {
    display: none;
}

.analysis-results.visible {
    display: block;
    animation: fadeIn 0.4s ease;
}

/* Analysis Results Card (V5-A matching other steps) */
.analysis-results-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.analysis-results-header {
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid #e6ddd6;
    display: flex;
    align-items: center;
    gap: 12px;
}

.analysis-results-step {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7a6860;
    background: #f5f0eb;
    padding: 4px 10px;
    border-radius: 4px;
}

.analysis-results-title {
    font-weight: 600;
    color: #5B3A29;
    font-size: 0.9375rem;
}

.analysis-results-content {
    padding: 32px 24px;
}

/* Analysis sections */
.analysis-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
    align-items: stretch;
}

@media (max-width: 600px) {
    .analysis-split {
        grid-template-columns: 1fr;
    }
}

/* Analysis cards with integrated headers */
.analysis-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--color-border);
}

.analysis-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: #fdfbf8;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-charcoal);
}

.analysis-card-header svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.analysis-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Rarity content centered */
.rarity-content {
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 32px 20px;
}

.rarity-content .rarity-badge {
    margin-bottom: 12px;
    padding: 8px 16px;
    font-size: 0.75rem;
}

.rarity-content .rarity-badge svg {
    width: 14px;
    height: 14px;
}

.rarity-content .rarity-percent {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-charcoal);
    margin-bottom: 8px;
}

.rarity-content .rarity-note {
    font-size: 0.875rem;
    color: var(--color-warm-gray);
    margin: 0;
}

/* Features rows inside card */
.analysis-card-content .feature-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
}

.analysis-card-content .feature-row:last-child {
    border-bottom: none;
}

.analysis-card-content .feature-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-warm-gray);
    flex-shrink: 0;
}

.analysis-card-content .feature-value {
    font-size: 0.8125rem;
    color: var(--color-charcoal);
    text-align: left;
    line-height: 1.3;
    flex: 1;
}

/* Single column features list */
.features-single-column {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}

.features-single-column .feature-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
}

.features-single-column .feature-row:last-child {
    border-bottom: none;
}

.features-single-column .feature-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-warm-gray);
    flex-shrink: 0;
}

.features-single-column .feature-value {
    font-size: 0.8125rem;
    color: var(--color-charcoal);
    text-align: left;
    line-height: 1.3;
    flex: 1;
}

/* 2-column layout for baby features */
.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.features-column {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}

.features-column .feature-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 26px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
}

.features-column .feature-row:last-child {
    border-bottom: none;
}

.features-column .feature-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-warm-gray);
    flex-shrink: 0;
    white-space: nowrap;
}

.features-column .feature-value {
    font-size: 0.8125rem;
    color: var(--color-charcoal);
    text-align: left;
    flex: 1;
    line-height: 1.3;
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Rarity Card */
.rarity-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 20px 32px;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
    max-width: 320px;
}

.rarity-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--color-gold-light);
    border-radius: 20px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-gold);
    margin-bottom: 12px;
}

.rarity-badge svg {
    width: 12px;
    height: 12px;
}

.rarity-percent {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--color-navy);
    line-height: 1;
    margin-bottom: 6px;
}

.rarity-note {
    font-size: 0.8125rem;
    color: var(--color-warm-gray);
    margin: 0;
}

/* Features List */
.features-list {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: 24px;
    overflow: hidden;
}

.feature-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border);
}

.feature-row:last-child {
    border-bottom: none;
}

.feature-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-warm-gray);
}

.feature-value {
    font-size: 0.8125rem;
    color: var(--color-charcoal);
    text-align: left;
    max-width: 75%;
    flex: 1;
}

/* ========================================
   PAYMENT - Premium feel
   ======================================== */
.payment-box {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    box-shadow: var(--shadow-soft);
}

.payment-price {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 500;
    color: var(--color-navy);
    margin-bottom: 4px;
}

.payment-label {
    font-size: 0.875rem;
    color: var(--color-warm-gray);
    margin-bottom: 28px;
}

.payment-features {
    text-align: left;
    margin-bottom: 28px;
}

.payment-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 0.9375rem;
    color: var(--color-charcoal);
}

.payment-feature svg {
    width: 20px;
    height: 20px;
    color: var(--color-ocean);
    flex-shrink: 0;
}

.btn-pay {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 24px;
    background: linear-gradient(
        135deg,
        var(--color-ocean) 0%,
        var(--color-navy-light) 100%
    );
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(167, 109, 93, 0.25);
}

.btn-pay:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(167, 109, 93, 0.35);
}

.btn-pay:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

.payment-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 0.75rem;
    color: var(--color-warm-gray);
}

.payment-secure svg {
    width: 14px;
    height: 14px;
}

/* ========================================
   REVEAL - V2 Clean Split
   Two columns, no emojis, simple cards
   ======================================== */
.reveal-step {
    padding: 24px 16px 40px;
}

.reveal-container {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.reveal-header {
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid #e6ddd6;
    display: flex;
    align-items: center;
    gap: 12px;
}

.reveal-step-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7a6860;
    background: #f5f0eb;
    padding: 4px 10px;
    border-radius: 4px;
}

.reveal-title-header {
    font-weight: 600;
    color: #5B3A29;
    font-size: 0.9375rem;
}

.reveal-content {
    padding: 32px;
    background: linear-gradient(180deg, #faf8f6 0%, #fdfbf8 100%);
}

/* V2 Layout */
.v2-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.v2-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.v2-section-title {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-warm-gray);
    margin-bottom: 12px;
}

.v2-genetics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.v2-genetics-block {
    background: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.v2-genetics-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: #fdfbf8;
    border-bottom: 1px solid #e6ddd6;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #5B3A29;
}

.v2-genetics-traits {
    display: flex;
    flex-direction: column;
}

.v2-genetics-trait {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
}

.v2-genetics-trait:last-child {
    border-bottom: none;
}

.v2-genetics-trait-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-warm-gray);
    flex-shrink: 0;
    width: 70px;
    min-width: 70px;
}

.v2-genetics-trait-value {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-charcoal);
    text-align: left;
    flex: 1;
}

@media (max-width: 400px) {
    .v2-genetics-grid {
        grid-template-columns: 1fr;
    }
}

.v2-rarity {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-radius: 10px;
}

.v2-rarity-num {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: #b45309;
}

.v2-rarity-text {
    font-size: 0.8125rem;
    color: #92400e;
}

.v2-features {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}

.v2-features-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: #fdfbf8;
    border-bottom: 1px solid #e6ddd6;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #5B3A29;
}

.v2-feature {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
}

.v2-feature:last-child {
    border-bottom: none;
}

.v2-feature-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-warm-gray);
    flex-shrink: 0;
    width: 60px;
    min-width: 60px;
}

.v2-feature-value {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-charcoal);
    text-align: left;
    flex: 1;
}

/* V2 Baby Photo */
.v2-baby {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.baby-photo {
    border-radius: 20px;
    overflow: hidden;
    background: #f0ebe6;
    box-shadow: 0 12px 40px rgba(91, 58, 41, 0.12);
}

.baby-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.v2-photo {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1/1;
}

.v2-actions {
    display: flex;
    gap: 12px;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

.v2-actions.hidden {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--color-navy);
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-download:hover {
    background: var(--color-navy-light);
    transform: translateY(-1px);
}

.btn-download svg {
    width: 16px;
    height: 16px;
}

.btn-secondary {
    padding: 12px 24px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-ocean);
    text-decoration: none;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: white;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: var(--color-ice);
    border-color: var(--color-ocean-light);
}

.v2-disclaimer {
    font-size: 0.6875rem;
    color: var(--color-warm-gray);
    text-align: center;
}

/* Generation loading overlay */
.generation-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: linear-gradient(135deg, #F9E8D2 0%, #fdf6ef 100%);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.generation-overlay.active {
    opacity: 1;
    visibility: visible;
}

.generation-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid var(--color-ice);
    border-top-color: var(--color-ocean);
    border-radius: 50%;
    animation: revealSpin 1s linear infinite;
}

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

.generation-text {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-navy);
    text-align: center;
    animation: pulse-text 2s ease-in-out infinite;
}

@keyframes pulse-text {
    0%,
    100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

/* V2 Mobile */
@media (max-width: 768px) {
    .reveal-content {
        padding: 24px 16px;
    }

    .v2-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Reorder: Baby first on mobile */
    .v2-baby {
        order: -1;
    }

    .v2-photo {
        max-width: 100%;
    }

    .v2-actions {
        width: 100%;
        justify-content: center;
    }

    .btn-download {
        flex: 1;
        justify-content: center;
    }
}

/* ========================================
   UTILITIES
   ======================================== */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

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

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 480px) {
    .progress-bar {
        padding: 14px 16px;
        gap: 12px;
    }

    .btn-back {
        width: 36px;
        height: 36px;
    }

    .step {
        padding: 28px 16px 48px;
    }

    .step-title {
        font-size: 1.375rem;
    }

    .options-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .opt-btn {
        padding: 14px 8px;
    }

    .gender-btn {
        padding: 20px 12px;
    }

    .gender-icon {
        width: 40px;
        height: 40px;
    }

    .dream-frame {
        width: 240px;
        height: 240px;
    }

    .dream-image-wrap {
        width: 180px;
        height: 180px;
        border-radius: 16px;
    }

    .dream-status {
        font-size: 1rem;
    }

    .analysis-card-content {
        padding: 24px 16px;
    }

    .dream-progress {
        max-width: 240px;
    }

    .rarity-percent {
        font-size: 2rem;
    }

    .payment-box {
        padding: 24px 20px;
    }

    .payment-price {
        font-size: 2.25rem;
    }
}