/**
 * AI Content Wizard Styles
 * Dark gradient theme with glassmorphic design
 * Based on approved prototype
 */

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

body {
    font-family: var(--font-primary);
    background: var(--gradient-dark);
    color: var(--color-text-primary);
    min-height: 100vh;
    overflow-x: hidden;
}

/* Progress Bar - Updated for 6 steps */
.progress-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--color-overlay-strong);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--space-md) var(--space-xl);
}

.progress-container {
    max-width: 1200px;
    margin: 0 auto;
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.progress-line {
    position: absolute;
    top: var(--space-lg);
    left: 0;
    right: 0;
    height: var(--radius-sm);
    background: var(--color-glass-light);
    z-index: 0;
}

.progress-line-fill {
    height: 100%;
    background: var(--gradient-primary);
    transition: width 0.5s ease;
    width: 0%;
}

.progress-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--radius-md);
}

.progress-circle {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--color-glass-light);
    border: var(--radius-sm) solid var(--color-border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
    font-size: var(--font-sm);
    transition: all 0.3s;
}

.progress-step.active .progress-circle {
    background: var(--gradient-primary);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow-primary);
    transform: scale(1.1);
}

.progress-step.completed .progress-circle {
    background: var(--color-success-alt);
    border-color: var(--color-success-alt);
}

.progress-step.completed .progress-circle::before {
    content: '✓';
    font-size: var(--font-base);
}

.progress-label {
    font-size: var(--font-xs);
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 80px;
}

.progress-step.active .progress-label {
    color: var(--color-text-primary);
    font-weight: var(--font-semibold);
}

/* Container - Full page for better use of space */
.wizard-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-2xl);
    min-height: calc(100vh - 140px); /* Account for header */
}

.step-section {
    display: none;
    animation: fadeIn 0.5s ease;
}

.step-section.active {
    display: block;
}

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

/* Welcome Screen - Updated with 4 smaller cards */
.welcome-screen {
    text-align: center;
    padding: var(--space-4xl) var(--space-lg);
}

.welcome-hero {
    margin-bottom: var(--space-3xl);
}

.welcome-hero h1 {
    font-size: calc(var(--font-4xl) * 1.556); /* 3.5rem / 56px */
    font-weight: var(--font-bold);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-lg);
}

.welcome-hero p {
    font-size: var(--font-xl);
    color: rgba(255, 255, 255, var(--opacity-solid));
    max-width: 600px;
    margin: 0 auto;
    line-height: var(--leading-normal);
}

.stats-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-3xl);
}

.stat-box {
    background: var(--color-glass-light);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-2xl);
    padding: var(--space-lg);
    transition: all 0.3s;
}

.stat-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 var(--space-sm) var(--space-2xl) var(--shadow-glow-primary);
}

.stat-icon {
    font-size: var(--font-4xl);
    margin-bottom: var(--space-md);
}

.stat-value {
    font-size: var(--font-3xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-sm);
}

/* Different color for each card */
.stat-box:nth-child(1) .stat-value {
    background: var(--gradient-info);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-box:nth-child(2) .stat-value {
    background: var(--gradient-educational);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-box:nth-child(3) .stat-value {
    background: var(--gradient-inspirational);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-box:nth-child(4) .stat-value {
    background: var(--gradient-motivational);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: var(--font-xs);
    color: var(--color-text-tertiary);
}

.integration-logos {
    font-size: var(--font-xs);
    color: rgba(255, 255, 255, var(--opacity-heavy));
    margin-top: var(--space-sm);
}

.how-it-works {
    margin-bottom: var(--space-4xl);
}

.how-it-works h2 {
    font-size: var(--font-4xl);
    margin-bottom: var(--space-2xl);
    color: var(--color-text-primary);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

.step-card {
    background: var(--color-glass-light);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-3xl);
    padding: var(--space-xl);
    position: relative;
    overflow: hidden;
}

.step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--space-sm);
    height: 100%;
    background: var(--gradient-primary);
}

.step-number {
    width: var(--space-3xl);
    height: var(--space-3xl);
    border-radius: var(--radius-full);
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-2xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-lg);
}

.step-card h3 {
    font-size: var(--font-xl);
    margin-bottom: var(--space-sm);
    color: var(--color-text-primary);
}

.step-card p {
    font-size: var(--font-sm);
    color: var(--color-text-tertiary);
    line-height: var(--leading-normal);
}

/* .wizard-btn-primary now uses: .btn .btn-primary .btn-xl from theme.css */

/* Chat Interface - Enhanced with brand analysis */
.chat-screen {
    max-width: 900px;
    margin: 0 auto;
}

.chat-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.chat-header h2 {
    font-size: var(--font-4xl);
    margin-bottom: var(--space-sm);
}

.chat-header p {
    color: var(--color-text-tertiary);
}

.chat-container {
    background: var(--color-glass-light);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-3xl);
    padding: var(--space-xl);
    min-height: calc(100vh - 350px); /* Use viewport height for better fit */
    max-height: calc(100vh - 250px);
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-xl);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    margin-bottom: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    /* No max-height - let it grow to fill available space */
}

.message {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.message.user {
    flex-direction: row-reverse;
}

.message.user .message-content {
    background: var(--gradient-primary);
    border-bottom-right-radius: var(--space-sm);
}

/* MP-07: Warning message style for AI fallback notifications */
.message.warning {
    background: rgba(245, 158, 11, var(--opacity-light));
    border-left: 4px solid var(--color-warning);
    padding: var(--space-md);
    border-radius: var(--radius-md);
}

.avatar {
    width: var(--space-2xl);
    height: var(--space-2xl);
    border-radius: var(--radius-full);
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-2xl);
    flex-shrink: 0;
}

.message-content {
    background: var(--color-glass-light);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-3xl);
    border-bottom-left-radius: var(--space-sm);
    max-width: 70%;
    line-height: var(--leading-normal);
}

/* MP-01: Clean message formatting */
.message-content p {
    margin: 0;
    line-height: 1.6;
    color: var(--color-text-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Chat action buttons container */
.chat-action-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

/* MP-05: AI Generation Loading States */

.message.loading {
    background: rgba(102, 126, 234, var(--opacity-light));
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}

.message.success {
    background: rgba(16, 185, 129, var(--opacity-light));
    border-left: 4px solid var(--color-success);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}

.message.error {
    background: rgba(239, 68, 68, var(--opacity-light));
    border-left: 4px solid var(--color-error);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}

.loading-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

.brand-voice-badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    background: var(--gradient-primary);
    color: white;
    border-radius: var(--radius-md);
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
}

.loading-progress {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-border-light);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}

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

.loading-text {
    font-size: var(--font-sm);
    line-height: 1.6;
    color: var(--color-text-tertiary);
}

/* Fade-in animation for messages */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.file-upload-area {
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
    padding: var(--space-lg);
    border: var(--space-xs) dashed var(--color-border-strong);
    border-radius: var(--radius-2xl);
    background: var(--color-glass-light);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.file-upload-area:hover {
    border-color: var(--color-primary);
    background: rgba(102, 126, 234, var(--opacity-light));
}

.file-upload-btn {
    padding: var(--space-md) var(--space-lg);
    background: rgba(102, 126, 234, var(--opacity-medium));
    border: var(--space-xs) dashed rgba(102, 126, 234, var(--opacity-strong));
    border-radius: var(--radius-2xl);
    display: inline-block;
    transition: all 0.3s;
    font-weight: var(--font-semibold);
}

.file-upload-btn:hover {
    background: rgba(102, 126, 234, var(--opacity-strong));
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.typing-indicator {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm);
}

.typing-dot {
    width: var(--space-sm);
    height: var(--space-sm);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, var(--opacity-heavy));
    animation: typing 1.4s infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-10px); }
}

.chat-input {
    display: flex;
    gap: var(--space-md);
    position: relative;
    z-index: 10;
}


.chat-input input {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-glass-light);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-2xl);
    color: var(--color-text-primary);
    font-size: var(--font-base);
}

.chat-input input::placeholder {
    color: var(--color-text-tertiary);
}

.chat-input input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-glass-medium);
}

.chat-input button {
    padding: var(--space-md) var(--space-xl);
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-2xl);
    color: white;
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all 0.3s;
}

.chat-input button:hover {
    transform: translateY(-2px);
    box-shadow: 0 var(--space-sm) var(--space-lg) var(--shadow-glow-primary);
}

.quick-replies {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-md);
    margin-bottom: var(--space-lg);
}

.quick-reply-btn {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-glass-light);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-3xl);
    color: var(--color-text-secondary);
    font-size: var(--font-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all 0.3s;
}

.quick-reply-btn:hover {
    background: rgba(102, 126, 234, var(--opacity-medium));
    border-color: var(--color-primary);
}

/* Multi-select button states */
.quick-reply-btn.multi-select-btn.selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.quick-reply-btn.submit-multi-select {
    width: 100%;
    font-weight: var(--font-semibold);
}

/* MP-04: Previously selected answer highlight */
.quick-reply-btn.previously-selected {
    background: rgba(103, 126, 234, var(--opacity-light));
    border-color: var(--color-primary);
    font-weight: var(--font-semibold);
}

/* CSV Preview with Editing - Full width for better visibility */
.preview-screen {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.preview-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.preview-header h2 {
    font-size: var(--font-4xl);
    margin-bottom: var(--space-sm);
}

.csv-title-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: var(--space-md);
    gap: var(--space-lg);
}

.csv-title-left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;
    max-width: 60%;
}

.csv-title-field label {
    font-weight: var(--font-semibold);
    font-size: var(--font-base);
    white-space: nowrap;
    color: var(--color-text-primary);
}

.csv-title-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
}

.csv-title-input-wrapper input {
    flex: 1;
    min-width: 200px;
}

.save-title-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--font-2xl);
    padding: var(--space-xs);
    opacity: 0.8;
    transition: opacity 0.2s;
}

.save-title-btn:hover {
    opacity: 1;
}

.preview-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.preview-stat {
    text-align: center;
}

.preview-stat-value {
    font-size: var(--font-4xl);
    font-weight: var(--font-bold);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.preview-stat-label {
    font-size: var(--font-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.csv-table-container {
    background: var(--color-glass-light);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-3xl);
    padding: var(--space-xl);
    overflow-x: auto;
    margin-bottom: var(--space-xl);
}

.csv-table {
    width: 100%;
    border-collapse: collapse;
}

.csv-table th {
    background: rgba(102, 126, 234, var(--opacity-medium));
    padding: var(--space-md);
    text-align: left;
    font-weight: var(--font-semibold);
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    border-bottom: var(--space-xs) solid rgba(102, 126, 234, var(--opacity-strong));
}

.csv-table td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border-light);
    font-size: var(--font-sm);
    vertical-align: middle;
}

.caption-cell {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}

.caption-cell:hover {
    background: rgba(102, 126, 234, var(--opacity-light));
}

.csv-table tbody tr {
    cursor: pointer;
    transition: all 0.3s;
}

.csv-table tbody tr:hover {
    background: rgba(102, 126, 234, var(--opacity-light));
}

.csv-table tbody tr.approved {
    background: var(--color-success-10);
}

.csv-table tbody tr.regenerating {
    opacity: 0.5;
    pointer-events: none;
}

/* Post actions cell */
.post-actions-cell {
    width: 50px;
    text-align: center;
    padding: var(--space-xs);
}

/* Approved cell */
.approved-cell {
    width: 50px;
    text-align: center;
    padding: var(--space-xs);
}

/* Approved toggle button */
.approved-toggle {
    background: none;
    border: none;
    font-size: var(--font-lg);
    cursor: pointer;
    padding: 0;
    color: var(--color-success);
    transition: transform 0.2s ease;
    line-height: 1;
}

.approved-toggle:hover {
    transform: scale(1.2);
}

/* Post regenerate button - hidden by default, shown on hover */
.post-regenerate-btn {
    opacity: 0;
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-glass-light);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1;
}

.csv-table tbody tr:hover .post-regenerate-btn {
    opacity: 1;
}

.post-regenerate-btn:hover {
    background: rgba(102, 126, 234, var(--opacity-medium));
    border-color: var(--color-primary);
    transform: scale(1.1);
}

.post-type-badge {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-2xl);
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
}

.type-trivia { background: rgba(102, 126, 234, var(--opacity-medium)); color: var(--color-primary-light); }
.type-educational { background: rgba(16, 185, 129, var(--opacity-medium)); color: var(--color-success-light); }
.type-motivational { background: var(--color-warning-30); color: var(--color-warning-light); }
.type-salesy { background: rgba(239, 68, 68, var(--opacity-medium)); color: var(--color-error-light); }

/* Modal for CSV editing */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, var(--opacity-solid));
    backdrop-filter: blur(5px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.modal-overlay.show {
    display: flex;
}

.modal-content {
    background: var(--gradient-dark);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-3xl);
    padding: var(--space-lg);
    max-width: 600px;
    width: 90%;
    max-height: 75vh;
    overflow-y: auto;
}

.modal-header {
    margin-bottom: var(--space-md);
}

.modal-header h3 {
    font-size: var(--font-xl);
    margin-bottom: var(--space-sm);
}

/* Dark glassmorphic form groups for AI chat modals only (scoped to avoid global override) */
.modal-content .form-group {
    margin-bottom: var(--space-sm);
}

.modal-content .form-group label {
    display: block;
    margin-bottom: var(--space-sm);
    color: rgba(255, 255, 255, var(--opacity-solid));
    font-weight: var(--font-semibold);
}

.modal-content .form-group input,
.modal-content .form-group textarea,
.modal-content .form-group select {
    width: 100%;
    padding: var(--space-md) var(--space-md);
    background: var(--color-glass-light);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-xl);
    color: white;
    font-size: var(--font-sm);
}

.modal-content .form-group textarea {
    min-height: 150px;
    resize: vertical;
    font-size: var(--font-base);
    line-height: var(--leading-relaxed);
    font-family: var(--font-system);
}

/* Caption preview styling (like actual social media post) */
#editCaption {
    background: rgba(0, 0, 0, var(--opacity-strong));
    border: 1px solid var(--color-border-strong);
    padding: var(--space-md);
    white-space: pre-wrap;
}

.caption-preview {
    margin-top: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-glass-light);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    font-size: var(--font-sm);
    line-height: var(--leading-normal);
    white-space: pre-wrap;
    color: rgba(255, 255, 255, var(--opacity-near-full));
    min-height: 60px;
}

.caption-preview-label {
    font-size: var(--font-xs);
    color: rgba(255, 255, 255, var(--opacity-heavy));
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.modal-content .form-group input:focus,
.modal-content .form-group textarea:focus,
.modal-content .form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-glass-medium);
}

.modal-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: flex-end;
    margin-top: var(--space-md);
}

/* Icon Selector */
.icon-selector {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
}

.icon-btn {
    padding: var(--space-md);
    background: var(--color-glass-light);
    border: var(--space-xs) solid var(--color-border-medium);
    border-radius: var(--radius-2xl);
    font-size: var(--font-4xl);
    cursor: pointer;
    transition: all 0.3s;
}

.icon-btn:hover {
    background: rgba(102, 126, 234, var(--opacity-medium));
    border-color: var(--color-primary);
    transform: scale(1.05);
}

.icon-btn.selected {
    background: rgba(102, 126, 234, var(--opacity-medium));
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow-primary);
}

/* NEW Step 4: Image Preview Grid - Full page width */
.image-preview-screen {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.image-preview-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.image-preview-header h2 {
    font-size: var(--font-4xl);
    margin-bottom: var(--space-sm);
}

.image-preview-grid {
    /* Masonry.js container - library handles positioning */
    position: relative;
    perspective: 1000px;
    margin: 0 auto var(--space-2xl) auto; /* Center horizontally */
}

.post-preview-card {
    width: 340px; /* Fixed width for Masonry.js - increased from 280px */
    background: var(--color-glass-light);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-3xl);
    overflow: hidden;
    transition: all 0.3s;
    cursor: pointer;
    margin-bottom: var(--space-xl); /* Vertical spacing between cards */
}

.post-preview-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 var(--space-sm) var(--space-2xl) var(--shadow-glow-primary);
    border-color: rgba(102, 126, 234, var(--opacity-strong));
}

.post-preview-image {
    width: 100%;
    aspect-ratio: 1;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--font-4xl) * 1.778); /* 4rem / 64px */
    position: relative;
}

/* Hide template badges and action icons inside preview thumbnails */
.post-preview-image .template-type-badge,
.post-preview-image .template-actions-top,
.post-preview-image .action-icon {
    display: none;
}

.post-preview-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, rgba(0, 0, 0, var(--opacity-solid)), transparent);
}

.post-preview-headline {
    position: absolute;
    bottom: var(--space-md);
    left: var(--space-lg);
    right: var(--space-lg);
    z-index: 1;
    font-size: var(--font-xl);
    font-weight: var(--font-bold);
    color: white;
    text-shadow: 0 var(--space-xs) var(--space-sm) rgba(0, 0, 0, var(--opacity-heavy));
}

.post-preview-content {
    padding: var(--space-lg);
}

.post-preview-date {
    font-size: var(--font-xs);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.post-preview-caption {
    font-size: var(--font-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.post-preview-hashtags {
    font-size: var(--font-xs);
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.post-preview-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-light);
}

.post-preview-edit {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-glass-light);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
    font-size: var(--font-xs);
    cursor: pointer;
    transition: all 0.3s;
}

.post-preview-edit:hover {
    background: rgba(102, 126, 234, var(--opacity-medium));
    border-color: var(--color-primary);
}

/* Image Edit Preview */
.image-edit-preview {
    width: 100%;
    aspect-ratio: 1;
    background: var(--gradient-primary);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--font-4xl) * 1.778); /* 4rem / 64px */
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
    box-shadow: var(--shadow-xl);
}

.image-edit-preview::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, rgba(0, 0, 0, var(--opacity-solid)), transparent);
}

#imageEditIcon {
    font-size: calc(var(--font-4xl) * 1.778); /* 4rem / 64px */
    transition: all 0.3s ease;
}

#imageEditHeadlinePreview {
    position: absolute;
    bottom: var(--space-md);
    left: var(--space-lg);
    right: var(--space-lg);
    z-index: 1;
    font-size: var(--font-xl);
    font-weight: var(--font-bold);
    color: white;
    text-shadow: 0 var(--space-xs) var(--space-sm) rgba(0, 0, 0, var(--opacity-heavy));
    transition: all 0.3s ease;
}

/* Batch Processing (Step 5) */
.processing-screen {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.processing-header {
    margin-bottom: var(--space-4xl);
}

.processing-header h2 {
    font-size: var(--font-4xl);
    margin-bottom: var(--space-sm);
}

.processing-animation {
    width: 200px;
    height: 200px;
    margin: 0 auto var(--space-2xl);
    position: relative;
}

.processing-circle {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    border: var(--space-sm) solid var(--color-border-light);
    border-top-color: var(--color-primary);
    animation: spin 1s linear infinite;
}

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

.processing-icon {
    position: absolute;
    top: var(--radius-full);
    left: var(--radius-full);
    transform: translate(-50%, -50%);
    font-size: calc(var(--font-4xl) * 2.222); /* 5rem / 80px */
}

.progress-bars {
    background: var(--color-glass-light);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-3xl);
    padding: var(--space-2xl);
    margin-bottom: var(--space-xl);
}

.progress-item {
    margin-bottom: var(--space-xl);
}

.progress-item:last-child {
    margin-bottom: 0;
}

.progress-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.progress-item-label {
    font-weight: var(--font-semibold);
    font-size: var(--font-base);
    color: var(--color-text-primary);
}

.progress-item-count {
    font-size: var(--font-sm);
    color: var(--color-text-tertiary);
}

.progress-bar {
    width: 100%;
    height: var(--space-md);
    background: var(--color-glass-light);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
    transition: width 0.5s ease;
    box-shadow: var(--shadow-glow-primary);
}

/* Success Screen (Step 6) */
.success-screen {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.success-animation {
    width: 150px;
    height: 150px;
    margin: 0 auto var(--space-xl);
    background: var(--gradient-success);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--font-4xl) * 2.222); /* 5rem / 80px */
    box-shadow: 0 var(--space-sm) var(--space-2xl) var(--shadow-glow-success);
    animation: successPop 0.5s ease;
}

@keyframes successPop {
    0% { transform: scale(0); }
    var(--radius-full) { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.success-header h2 {
    font-size: calc(var(--font-4xl) * 1.167); /* 2.625rem / 42px */
    margin-bottom: var(--space-md);
}

.success-header p {
    font-size: var(--font-lg);
    color: rgba(255, 255, 255, var(--opacity-solid));
    margin-bottom: var(--space-3xl);
}

.success-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-3xl);
}

.success-stat-card {
    background: var(--color-glass-light);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-2xl);
    padding: var(--space-lg);
}

.success-stat-icon {
    font-size: var(--space-2xl);
    margin-bottom: var(--space-md);
}

.success-stat-value {
    font-size: var(--font-4xl);
    font-weight: var(--font-bold);
    background: var(--gradient-success);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-sm);
}

.success-stat-label {
    font-size: var(--font-sm);
    color: var(--color-text-tertiary);
}

.success-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* .btn-success now uses: .btn .btn-success .btn-lg from theme.css */

/* Navigation Buttons */
.navigation-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border-light);
}

/* Navigation button - Alias for semantic naming */
/* TODO: Update wizard JS to use .btn .btn-glass .btn-md instead */
.btn-nav {
    /* Extends .btn .btn-glass .btn-md from theme.css */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-xl);
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--color-glass-light);
    backdrop-filter: blur(10px);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-medium);
    box-shadow: var(--shadow-sm);
}

.btn-nav:hover {
    background: var(--color-glass-medium);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-nav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Toast Notification */
.toast {
    position: fixed;
    top: var(--space-xl);
    right: var(--space-xl);
    padding: var(--space-lg) var(--space-xl);
    background: var(--color-success-95);
    border: 1px solid var(--color-success-50);
    border-radius: var(--radius-2xl);
    color: white;
    font-weight: var(--font-semibold);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(20px);
    z-index: 3000;
    animation: toastSlide 0.3s ease;
    display: none;
}

@keyframes toastSlide {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast.show {
    display: block;
}

/* ============================================
   CSV Upload Modal Enhancements
   ============================================ */

/* Chat footer options - "Skip AI Generation" link */
.chat-footer-options {
    text-align: center;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-light);
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: var(--font-sm);
    cursor: pointer;
    text-decoration: underline;
    transition: var(--transition-base);
    padding: var(--space-sm);
}

.btn-link:hover {
    color: var(--color-primary-300);
    text-decoration: none;
}

/* CSV Upload Modal specific */
.modal-medium {
    max-width: 600px;
}

.modal-med-large {
    max-width: 850px;
}

.csv-requirements {
    background: var(--color-glass-subtle);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin: 0 0 var(--space-md) 0;
}

.csv-requirements h4 {
    margin-top: 0;
    margin-bottom: var(--space-sm);
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.csv-requirements ul {
    margin: 0;
    padding-left: var(--space-md);
    list-style-type: disc;
}

.csv-requirements li {
    margin-bottom: var(--space-xs);
    font-size: var(--font-xs);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
}

.csv-requirements li strong {
    color: var(--color-primary-300);
    font-weight: var(--font-semibold);
}

.csv-actions {
    text-align: center;
    margin: 0 0 var(--space-md) 0;
}

.file-upload-section {
    margin-top: 0;
}

.file-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    border: 2px dashed var(--color-primary-400);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, rgba(99, 102, 241, var(--opacity-subtle)), rgba(139, 92, 246, var(--opacity-subtle)));
    cursor: pointer;
    transition: all 0.3s ease;
}

.file-upload-area:hover {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, rgba(99, 102, 241, var(--opacity-light)), rgba(139, 92, 246, var(--opacity-light)));
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.upload-icon {
    font-size: calc(var(--font-5xl) * 1.17); /* 56px equivalent */
    margin-bottom: var(--space-md);
    opacity: 0.8;
}

.upload-text {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-base);
}

.upload-text strong {
    color: var(--color-text-primary);
    font-weight: var(--font-semibold);
}

.selected-file-name {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: linear-gradient(135deg, rgba(16, 185, 129, var(--opacity-light)), rgba(5, 150, 105, var(--opacity-light)));
    border: 1px solid var(--color-success-400);
    border-radius: var(--radius-lg);
    color: var(--color-success-300);
    font-size: var(--font-base);
    font-weight: var(--font-medium);
    text-align: center;
}

.modal-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: none;
    border: none;
    font-size: calc(var(--font-2xl) * 1.17); /* 28px equivalent */
    cursor: pointer;
    color: var(--color-text-secondary);
    line-height: 1;
    transition: var(--transition-base);
}

.modal-close:hover {
    color: var(--color-text-primary);
}

/* ============================================
   Template Selector in Edit Modal (Split Layout)
   ============================================ */

/* Modal sizing - Flexbox column structure */
.modal-large {
    max-width: 1100px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
}

/* Override header for large modals */
.modal-large .modal-header {
    flex-shrink: 0;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border-primary);
}

/* Split layout - grows to fill available space */
.modal-body-split {
    flex: 1;
    min-height: 0; /* Critical for flex child scrolling */
    overflow: hidden; /* No scroll on container */
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-md);
    padding: 0;
}

/* Left panel - independent scroll */
.edit-form-panel {
    min-width: 0; /* Prevents grid overflow */
    overflow-y: auto; /* Only this panel scrolls */
    padding: var(--space-md);
    padding-right: var(--space-sm);
}

/* Custom scrollbar for left panel */
.edit-form-panel::-webkit-scrollbar {
    width: 6px;
}

.edit-form-panel::-webkit-scrollbar-track {
    background: var(--color-glass-light);
    border-radius: var(--radius-full);
}

.edit-form-panel::-webkit-scrollbar-thumb {
    background: var(--color-primary-400);
    border-radius: var(--radius-full);
}

.edit-form-panel::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* Right panel - fixed, no scroll */
.template-selector-panel {
    overflow: hidden; /* Never scrolls */
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--color-border-primary);
    padding: var(--space-md);
    background: rgba(99, 102, 241, var(--opacity-subtle));
}

/* Footer - always visible */
.modal-large .modal-actions {
    flex-shrink: 0;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-primary);
}

.template-selector-panel h4 {
    margin-top: 0;
    margin-bottom: var(--space-sm);
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    color: var(--color-primary-400);
}

/* Template preview card */
.template-preview-card {
    margin-bottom: var(--space-md);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(99, 102, 241, var(--opacity-light)), rgba(139, 92, 246, var(--opacity-subtle)));
    padding: var(--space-sm);
    transition: all 0.3s ease;
    overflow: hidden;
}

.template-preview-card:hover {
    border-color: var(--color-primary-400);
    box-shadow: 0 var(--space-sm) var(--space-lg) var(--shadow-glow-primary);
    transform: translateY(-1px);
}

.template-thumbnail-large {
    width: 100%;
    height: auto;
    min-height: 180px;
    max-height: 360px;
    background: var(--color-background-tertiary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-sm);
    border: 2px solid var(--color-border-secondary);
    overflow: hidden;
    position: relative; /* For absolute positioning of template elements */
}

.template-name {
    text-align: center;
    font-weight: var(--font-semibold);
    font-size: var(--font-sm);
    color: var(--color-text-primary);
    padding: var(--space-sm);
    background: rgba(99, 102, 241, var(--opacity-light));
    border-radius: var(--radius-sm);
}

/* Responsive for split modal */
@media (max-width: 768px) {
    .modal-body-split {
        grid-template-columns: 1fr;
    }

    .template-selector-panel {
        border-left: none;
        border-top: 1px solid var(--color-border-secondary);
        padding-left: 0;
        padding-top: var(--space-lg);
    }
}

/* Responsive */

/* Responsive */
@media (max-width: 768px) {
    .wizard-container {
        padding: var(--space-lg);
    }

    .welcome-hero h1 {
        font-size: var(--font-4xl);
    }

    .stats-preview {
        grid-template-columns: repeat(2, 1fr);
    }

    .progress-steps {
        font-size: var(--font-xs);
    }

    .progress-label {
        font-size: calc(var(--font-xs) * 0.75); /* 0.5625rem / 9px */
    }
}

/* ============================================
   JS-GENERATED CONTENT UTILITIES
   Classes for dynamic content to avoid inline styles
   ============================================ */

/* Properties Panel */
.properties-panel-scroll {
    flex: 1;
    overflow-y: auto;
    padding-bottom: var(--space-lg);
}

.property-label-required::after {
    content: '*';
    color: var(--color-error-400);
    margin-left: var(--space-xs);
}

.property-label-hint {
    font-size: var(--font-xs);
    opacity: 0.6;
}

.property-section-disabled {
    opacity: 0.5;
}

.image-thumb-preview {
    width: 100%;
    border-radius: var(--radius-lg);
}

.variable-badge-container {
    display: none;
    margin-bottom: var(--space-md);
}

.animation-properties {
    margin-top: var(--space-sm);
    display: none;
}

.animation-label-small {
    font-size: var(--font-xs);
    margin-top: var(--space-sm);
}

.flex-gap-2 {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

/* File Upload */
.file-upload-hidden {
    display: none;
}

.file-upload-label {
    cursor: pointer;
    padding: var(--space-md) var(--space-lg);
    background: rgba(102, 126, 234, var(--opacity-medium));
    border: 2px dashed rgba(102, 126, 234, var(--opacity-strong));
    border-radius: var(--space-md);
    display: inline-block;
    transition: var(--transition-base);
}

.file-hint-text {
    margin-top: var(--space-sm);
    font-size: var(--font-xs);
    color: var(--color-text-tertiary);
}

/* Empty States */
.empty-state-message {
    text-align: center;
    color: var(--color-text-secondary);
    padding: var(--space-2xl);
}

.empty-state-grid {
    grid-column: 1/-1;
    text-align: center;
    padding: var(--space-2xl);
    color: var(--color-text-secondary);
}

/* Error Container */
.error-container {
    padding: var(--space-2xl);
    text-align: center;
    font-family: system-ui;
}

.error-title {
    color: var(--color-error);
}

.error-description {
    color: var(--color-text-tertiary);
    margin: var(--space-lg) 0;
}

.error-reload-btn {
    padding: var(--space-sm) var(--space-lg);
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}

/* Posting Step */
.posting-progress-bar {
    width: 0%;
}

.posting-status-text {
    color: var(--color-text-tertiary);
    margin-top: var(--space-lg);
}

/* Success Step */
.success-completion-box {
    margin-top: var(--space-3xl);
    padding: var(--space-xl);
    background: rgba(102, 126, 234, var(--opacity-light));
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(102, 126, 234, var(--opacity-medium));
}

.success-completion-title {
    margin-bottom: var(--space-md);
    font-size: var(--font-xl);
}

.success-completion-list {
    text-align: left;
    color: var(--color-text-secondary);
    line-height: 2;
    padding-left: var(--space-lg);
}

/* Preview Containers */
.preview-no-template {
    color: var(--color-text-tertiary);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.preview-error {
    color: var(--color-text-tertiary);
    text-align: center;
    padding: var(--space-md);
}

/* Dynamic Gradients - These remain as inline styles with CSS variables */
.dynamic-gradient-bg {
    /* Applied via JS with: style="background: linear-gradient(...)" */
    /* Uses CSS variables so it responds to theme changes */
}

/* Additional Utility Classes for Inline Style Replacement */

/* Spacing utilities */
.mt-2-5 {
    margin-top: var(--space-sm);
}

.mt-3-75 {
    margin-top: var(--space-md);
}

.mt-5 {
    margin-top: var(--space-lg);
}

.mb-3 {
    margin-bottom: var(--space-md);
}

.mb-3-75 {
    margin-bottom: var(--space-md);
}

.mb-5 {
    margin-bottom: var(--space-lg);
}

.mb-7-5 {
    margin-bottom: var(--space-xl);
}

/* PropertiesPanel specific utilities */
.properties-panel-scroll {
    flex: 1;
    overflow-y: auto;
    padding-bottom: var(--space-lg);
}

.variable-badge-container {
    display: inline-block;
    background: var(--gradient-primary);
    color: white;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--space-lg);
    font-size: var(--font-xs);
    font-weight: var(--font-semibold);
    letter-spacing: 0.5px;
    font-family: 'Monaco', monospace;
}

.image-fit-controls {
    display: flex;
    gap: var(--radius-md);
    margin-bottom: var(--space-md);
}

/* Categories page utilities */
.categories-page-container {
    max-width: 1200px;
    margin: 0 auto;
}

.categories-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xl);
}

.categories-page-title {
    margin: 0 0 var(--space-sm) 0;
}

.categories-page-subtitle {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
}

.categories-empty {
    text-align: center;
    color: var(--color-text-secondary);
    padding: var(--space-2xl);
}

.category-type-badges {
    margin-top: var(--space-sm);
}

.modal-content-medium {
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content-large {
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
}

/* ImageEditModal utilities */
.image-edit-subtitle {
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
}

.image-edit-preview-container {
    margin-bottom: var(--space-lg);
}

.image-edit-preview-wrapper {
    width: 100%;
    aspect-ratio: 1;
    background: var(--gradient-primary);
    border-radius: var(--radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-6xl);
    position: relative;
    overflow: hidden;
}

.image-edit-preview-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, rgba(0, 0, 0, var(--opacity-solid)), transparent);
}

.image-edit-preview-headline {
    position: absolute;
    bottom: var(--space-md);
    left: var(--space-lg);
    right: var(--space-lg);
    z-index: 1;
    font-size: var(--font-xl);
    font-weight: var(--font-bold);
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, var(--opacity-heavy));
}

.regenerate-btn-container {
    margin-top: var(--space-sm);
    width: 100%;
}

/* ChatController utilities */
.file-upload-instructions {
    margin-top: var(--space-sm);
    font-size: var(--font-xs);
    color: var(--color-text-tertiary);
}

/* App.js utilities */
.fatal-error-container {
    padding: var(--space-2xl);
    text-align: center;
    font-family: system-ui;
}

.fatal-error-title {
    color: var(--color-error);
}

.fatal-error-message {
    color: var(--color-text-tertiary);
    margin: var(--space-lg) 0;
}

.fatal-error-reload-btn {
    padding: var(--space-sm) var(--space-lg);
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}

/* ProfileView utilities */
.profile-no-image-text {
    color: var(--color-text-tertiary);
    font-size: var(--font-sm);
}

/* Spacing utilities for mb-4 */
.mb-4 {
    margin-bottom: var(--space-md);
}

.mb-8 {
    margin-bottom: var(--space-xl);
}

.mr-4 {
    margin-right: var(--space-md);
}

/* Templates.js utilities */
.templates-empty-state {
    grid-column: 1/-1;
    text-align: center;
    padding: var(--space-2xl);
    color: var(--color-text-secondary);
}

.templates-loading {
    grid-column: 1/-1;
    text-align: center;
    padding: var(--space-2xl);
}

.template-share-header {
    text-align: center;
}

.template-share-title {
    margin-bottom: var(--space-lg);
    font-size: var(--font-4xl);
}

.template-share-description {
    font-size: var(--font-lg);
    line-height: var(--leading-relaxed);
}

/* Wizard step utilities */
.wizard-center-controls {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.wizard-center-preview {
    text-align: center;
    margin-top: var(--space-3xl);
    margin-bottom: var(--space-xl);
    padding: var(--space-lg);
}

/* Template Editor utilities */
.toolbar-divider {
    width: 1px;
    height: 30px;
    background: var(--color-glass-medium);
}

.template-canvas-default {
    width: 500px;
    height: 500px;
    background: var(--gradient-primary);
    position: relative;
    overflow: hidden;
}

/* TemplateRenderer utilities */
.template-renderer-empty {
    color: var(--color-text-tertiary);
    text-align: center;
}

/* EditPostModal utilities */
.caption-counter {
    float: right;
    font-size: var(--font-xs);
    color: var(--color-text-secondary);
    font-weight: var(--font-normal);
}

.caption-preview-label {
    margin-top: var(--radius-md);
}

/* Content Type Description */
.form-hint {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--font-xs);
    color: rgba(255, 255, 255, var(--opacity-heavy));
    font-style: italic;
}

/* Length Guidance Banner */
.length-guidance {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--color-glass-light);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-lg);
    display: none;
}

.length-guidance-content {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.length-guidance-icon {
    font-size: var(--font-xl);
    flex-shrink: 0;
}

.length-guidance-text {
    font-size: var(--font-sm);
    color: rgba(255, 255, 255, var(--opacity-solid));
    line-height: var(--leading-normal);
}

.length-guidance-bar {
    width: 100%;
    height: var(--space-sm);
    background: var(--color-glass-light);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.length-guidance-progress {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease, background-color 0.3s ease;
    border-radius: var(--radius-full);
}

/* ImageEditModal utilities */
.image-edit-icon-large {
    font-size: var(--font-6xl);
}

/* CSVUploadModal utilities */
.upload-hint-text {
    font-size: var(--font-sm);
}

/* Theme Selector Grid */
.theme-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}

.theme-card {
    background: var(--color-glass-light);
    backdrop-filter: blur(20px);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-2xl);
    padding: var(--space-lg);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-card:hover {
    background: rgba(102, 126, 234, var(--opacity-medium));
    border-color: var(--color-primary);
    transform: translateY(-5px);
    box-shadow: 0 var(--space-sm) var(--space-2xl) var(--shadow-glow-primary);
}

.theme-card-icon {
    font-size: var(--font-4xl);
    margin-bottom: var(--space-md);
}

.theme-card-label {
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    color: white;
    margin-bottom: var(--space-sm);
}

.theme-card-variables {
    font-size: var(--font-xs);
    color: rgba(255, 255, 255, var(--opacity-heavy));
}

.theme-selector-fallback {
    padding: var(--space-lg);
    text-align: center;
    background: rgba(255, 68, 68, var(--opacity-light));
    border: 1px solid rgba(255, 68, 68, var(--opacity-medium));
    border-radius: var(--radius-2xl);
    margin: var(--space-lg) 0;
}

/* ============================================
   Phase 3: Dynamic Form Sections
   ============================================ */

/* Form Section Header for Theme Variables */
.form-section-header {
    font-size: var(--font-sm);
    font-weight: var(--font-semibold);
    color: var(--color-primary-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-light);
}

/* Highlight variable fields */
[data-variable] {
    border-left: 3px solid var(--color-primary);
}

[data-variable]:focus {
    border-left-color: var(--color-success);
}

/* Form Row for consistent spacing */
.form-row {
    margin-bottom: var(--space-md);
}

/* Modal form rows - vertical layout (label above field) in single column */
.modal-content .form-row {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-md);
}

.form-label {
    display: block;
    margin-bottom: var(--space-sm);
    color: rgba(255, 255, 255, var(--opacity-solid));
    font-weight: var(--font-semibold);
    font-size: var(--font-sm);
}

.form-label .required {
    color: var(--color-error);
    margin-left: var(--space-xs);
}

.form-input,
.form-textarea {
    width: 100%;
    padding: var(--space-md);
    background: var(--color-glass-light);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-xl);
    color: white;
    font-size: var(--font-sm);
}

.form-textarea {
    resize: vertical;
    font-family: var(--font-system);
    line-height: var(--leading-normal);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-glass-medium);
}

.form-input[readonly] {
    opacity: 0.7;
    cursor: not-allowed;
    background: var(--color-glass-subtle);
}

/* ============================================
   STEP 4 SPECIFIC: Fixed Navigation Buttons
   Scoped to #step4 to prevent affecting other steps
   ============================================ */

/* Step 4 only - Add padding for fixed buttons */
#step4 .image-preview-screen {
    padding-bottom: 120px;
}

/* Step 4 only - Button footer fixed to bottom with grid layout */
#step4 .wizard-center-preview {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: var(--space-xl) var(--space-lg);
    background: linear-gradient(to top, rgba(17, 24, 39, 0.98) 0%, rgba(17, 24, 39, 0.95) 80%, transparent 100%);
    backdrop-filter: blur(20px);
    z-index: 1000;
    box-shadow: 0 calc(-1 * var(--space-sm)) var(--space-3xl) rgba(0, 0, 0, 0.5);
    border-top: 1px solid var(--color-border-light);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-lg);
}

/* ============================================
   MP-03: CSV Upload Modal Tabs & History
   ============================================ */

/* CSV Upload Modal Tabs */
.csv-modal-tabs {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid rgba(255, 255, 255, var(--opacity-light));
}

.csv-tab-btn {
  background: transparent;
  border: none;
  padding: var(--space-md) var(--space-lg);
  font-size: var(--font-base);
  font-weight: var(--font-medium);
  color: rgba(255, 255, 255, var(--opacity-medium));
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
}

.csv-tab-btn:hover {
  color: rgba(255, 255, 255, var(--opacity-solid));
  border-bottom-color: rgba(255, 255, 255, var(--opacity-light));
}

.csv-tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Tab Content */
.csv-tab-content {
  display: none;
}

.csv-tab-content.active {
  display: block;
}

/* CSV History List */
.csv-history-list {
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.csv-history-item {
  background: var(--color-glass-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--space-md);
  align-items: start;
  transition: all 0.3s ease;
}

/* 4-Column Grid: Checkbox | Content | Date/Icons | Badge/Button */
.csv-history-item > .csv-checkbox {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  margin-top: var(--space-xs);
}

.csv-history-item > .csv-history-item-content {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.csv-history-item > .csv-history-item-date-actions {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: flex-end;
}

.csv-history-item > .csv-history-item-controls {
  grid-column: 4;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-end;
}

.csv-history-item:hover {
  background: var(--color-glass-light);
  transform: translateY(-2px);
}

.csv-history-item-content h4 {
  font-size: var(--font-base);
  font-weight: var(--font-semibold);
  margin: 0;
  color: var(--color-text-primary);
}

.csv-row-count {
  font-size: var(--font-sm);
  color: var(--color-text-tertiary);
}

.csv-created-date {
  font-size: var(--font-sm);
  color: var(--color-text-tertiary);
}

.csv-updated-label {
  font-size: var(--font-sm);
  color: var(--color-text-tertiary);
  font-weight: var(--font-medium);
}

.csv-date {
  font-size: var(--font-sm);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.csv-item-icons {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.csv-status-badge {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
}

.csv-status-badge.draft {
  background: rgba(255, 193, 7, var(--opacity-medium));
  color: #fff;
}

.csv-status-badge.approved {
  background: rgba(76, 175, 80, var(--opacity-medium));
  color: #fff;
}

.csv-status-badge.posted {
  background: rgba(33, 150, 243, var(--opacity-medium));
  color: #fff;
}

.csv-history-empty {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--color-text-tertiary);
}

.csv-history-empty p {
  margin: var(--space-sm) 0;
}

/* Feature 1: Action icons - hidden by default, show on hover */
.csv-action-icon {
  opacity: 0;
  padding: var(--space-xs);
  background: transparent;
  border: none;
  font-size: var(--font-lg);
  cursor: pointer;
  transition: opacity 0.3s, transform 0.2s;
}

.csv-history-item:hover .csv-action-icon {
  opacity: 1;
}

.csv-action-icon:hover {
  transform: scale(1.2);
}

.csv-action-icon.delete-icon:hover {
  filter: brightness(1.3);
}

/* Feature 2: Status Filters */
/* Unified Toolbar: Select All (left) | Filters (center) | Download (right) */
.csv-history-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  background: var(--color-glass-subtle);
  border-radius: var(--radius-lg);
  min-height: 68px; /* 36px content + padding */
}

.csv-status-filters {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  /* No padding/margin/background - inside toolbar now */
}

.wizard-filter-label {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Feature 2: Emoji Pills (Status Filters) */
.emoji-pill {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-glass-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-lg);
  cursor: pointer;
  transition: all 0.3s;
}

.emoji-pill:hover {
  background: var(--color-glass-medium);
  transform: scale(1.1);
}

.emoji-pill.active {
  background: var(--gradient-primary);
  box-shadow: var(--shadow-outline-white);
}

.emoji-pill .tooltip {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 1000;
}

.emoji-pill:hover .tooltip {
  opacity: 1;
}

/* Download Icon Button */
.csv-download-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: auto;
  min-width: 60px;
  height: 36px;
  padding: 0 var(--space-md);
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-glass-light);
  color: var(--color-text-secondary);
  font-size: var(--font-lg);
  cursor: pointer;
  transition: all 0.3s;
}

.csv-download-icon:hover:not(:disabled) {
  background: var(--color-glass-medium);
  transform: scale(1.05);
}

.csv-download-icon:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.csv-download-icon #selectedCount {
  font-size: var(--font-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

/* Select All Checkbox Label */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: 36px; /* Match toolbar element height */
  cursor: pointer;
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
}

.checkbox-label:hover {
  color: var(--color-text-primary);
}

/* Feature 3: CSV Checkbox */
.csv-checkbox {
  margin-right: var(--space-md);
  cursor: pointer;
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}

/* ==============================================
   MP-04: Brand Voice Indicator
   ============================================== */

.brand-voice-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  background: linear-gradient(
    135deg,
    rgba(103, 126, 234, var(--opacity-light)),
    rgba(124, 58, 237, var(--opacity-light))
  );
  border: 1px solid rgba(103, 126, 234, var(--opacity-medium));
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  animation: brandVoiceSlideIn 0.5s ease-out;
}

@keyframes brandVoiceSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.brand-voice-icon {
  font-size: var(--font-2xl);
  flex-shrink: 0;
  animation: brandVoicePulse 2s ease-in-out infinite;
}

@keyframes brandVoicePulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.brand-voice-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.brand-voice-text strong {
  font-size: var(--font-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}

.brand-voice-text span {
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
}

/* ==============================================
   BUG-05: Brand Voice Warning Banner
   Shown when user has not set up Custom Voice
   ============================================== */

.brand-voice-warning {
  max-width: 800px;
  margin: var(--space-3xl) auto;
  padding: var(--space-3xl);
  background: linear-gradient(
    135deg,
    rgba(255, 165, 0, var(--opacity-light)),
    rgba(255, 140, 0, var(--opacity-light))
  );
  border: 2px solid rgba(255, 165, 0, var(--opacity-medium));
  border-radius: var(--radius-2xl);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-glow-warning);
  animation: brandWarningFadeIn 0.5s ease-out;
}

@keyframes brandWarningFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.brand-voice-warning .warning-icon {
  font-size: var(--font-6xl);
  text-align: center;
  margin-bottom: var(--space-lg);
  animation: brandWarningBounce 2s ease-in-out infinite;
}

@keyframes brandWarningBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.brand-voice-warning .warning-content {
  text-align: center;
}

.brand-voice-warning .warning-content h2 {
  font-size: var(--font-3xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-lg);
  color: var(--color-text-primary);
}

.brand-voice-warning .warning-content p {
  font-size: var(--font-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
}

.brand-voice-warning .warning-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.brand-voice-warning .warning-actions .btn {
  font-size: var(--font-lg);
  padding: var(--space-md) var(--space-2xl);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all 0.3s ease;
}

.brand-voice-warning .warning-actions .btn-primary {
  background: linear-gradient(135deg, var(--color-primary), rgba(124, 58, 237, 1));
  border: none;
  color: white;
  box-shadow: 0 var(--space-sm) var(--space-lg) var(--shadow-glow-primary);
}

.brand-voice-warning .warning-actions .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 var(--space-md) var(--space-xl) var(--shadow-glow-primary);
}

.brand-voice-warning .warning-explanation {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-light);
}

.brand-voice-warning .warning-explanation p {
  font-size: var(--font-sm);
  margin-bottom: 0;
}

.brand-voice-warning .warning-explanation strong {
  color: var(--color-text-primary);
  font-weight: var(--font-semibold);
}

/* ==============================================
   MP-04: Get Started Dropdown (Conversation Caching)
   ============================================== */

.get-started-dropdown {
  position: relative;
  display: inline-block;
}

.get-started-dropdown .dropdown-arrow {
  font-size: var(--font-xs);
  margin-left: var(--space-xs);
  opacity: var(--opacity-heavy);
}

.get-started-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-md);
  background: rgba(255, 255, 255, var(--opacity-near-full));
  border: 1px solid rgba(255, 255, 255, var(--opacity-light));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(20px);
  z-index: 1000;
  min-width: 320px;
  overflow: hidden;
}

.get-started-option {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(255, 255, 255, var(--opacity-light));
}

.get-started-option:last-child {
  border-bottom: none;
}

.get-started-option:hover {
  background: rgba(102, 126, 234, var(--opacity-light));
}

.get-started-option:active {
  background: rgba(102, 126, 234, var(--opacity-medium));
}

.get-started-option .option-icon {
  font-size: var(--font-2xl);
  flex-shrink: 0;
}

.get-started-option .option-content {
  flex: 1;
}

.get-started-option .option-title {
  font-size: var(--font-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.get-started-option .option-subtitle {
  font-size: var(--font-sm);
  color: var(--color-text-tertiary);
}

/* ==============================================
   MP-04A: Context Loaded Indicator
   ============================================== */

.context-loaded-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: rgba(102, 126, 234, var(--opacity-light));
  border-radius: var(--radius-md);
  margin: var(--space-md) 0;
  font-size: var(--font-sm);
  color: var(--color-text-secondary);
}

.context-loaded-indicator .indicator-icon {
  font-size: var(--font-lg);
}

.context-loaded-indicator .indicator-text {
  flex: 1;
  font-weight: var(--font-medium);
}

.context-loaded-indicator .indicator-date {
  font-size: var(--font-xs);
  opacity: var(--opacity-medium);
}