/* _content/AinnaProduct/Components/AinnaIdeaDynamicViewer.razor.rz.scp.css */
/* AinnaIdeaFrame.razor.css - Scoped Styles */

/* Ainna Minimal Design System - Matching Document Generator */
.ainna-ifc-component[b-zj7ch2rccq] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #202124;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    width: 100%;
    /*min-height: 100vh;*/
    padding: 40px 24px;
    box-sizing: border-box;
    background: transparent;
    --ainna-primary: #f00c71;
    --ainna-primary-dark: #d00560;
    --ainna-primary-light: #ff4d9a;
    --ainna-success: #10b981;
    --ainna-warning: #f59e0b;
    --ainna-danger: #ef4444;
    --ainna-text-primary: #111827;
    --ainna-text-secondary: #6b7280;
    --ainna-text-tertiary: #9ca3af;
    --ainna-border: #e5e7eb;
    --ainna-bg-subtle: #fafafa;
    --ainna-bg-gray: #f8f9fa;
    --ainna-radius: 12px;
}

    .ainna-ifc-component *[b-zj7ch2rccq] {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

/* Main Content - With Elegant Dotted Border (MATCHING STYLE) */
.ainna-ifc-main-content[b-zj7ch2rccq] {
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px;
    border: 1px dotted rgba(240, 12, 113, 0.15);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    animation: fadeIn-b-zj7ch2rccq 0.6s ease-out;
}

@keyframes fadeIn-b-zj7ch2rccq {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Step Header - Bold and Minimal (MATCHING STYLE) */
.ainna-step-header[b-zj7ch2rccq] {
    display: flex;
    align-items: center;
    gap: 32px;
    /*margin-bottom: 60px;*/
    position: relative;
    /*padding-bottom: 24px;*/
    /*border-bottom: 1px dotted rgba(240, 12, 113, 0.1);*/
}

.ainna-step-indicator[b-zj7ch2rccq] {
    position: relative;
    display: flex;
    align-items: center;
}

.ainna-step-number[b-zj7ch2rccq] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ainna-primary) 0%, var(--ainna-primary-dark) 100%);
    color: white;
    font-size: 24px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 20px rgba(240, 12, 113, 0.25);
}

.ainna-step-content[b-zj7ch2rccq] {
    flex: 1;
}

.ainna-step-title[b-zj7ch2rccq] {
    font-size: 23px;
    font-weight: 500;
    color: #6d7689;
    letter-spacing: -0.03em;
    margin-bottom: 4px;
}

.ainna-step-subtitle[b-zj7ch2rccq] {
    font-size: 15px;
    color: var(--ainna-text-secondary);
    font-weight: 500;
}

/* Status Badge (MATCHING STYLE) */
.ainna-status-badge[b-zj7ch2rccq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--ainna-bg-subtle);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s;
}

.ainna-status-dot[b-zj7ch2rccq] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ainna-text-tertiary);
    transition: all 0.3s;
}

.ainna-status-badge.in-progress .ainna-status-dot[b-zj7ch2rccq] {
    background: var(--ainna-warning);
    animation: blink-b-zj7ch2rccq 1s infinite;
}

.ainna-status-badge.complete .ainna-status-dot[b-zj7ch2rccq] {
    background: var(--ainna-success);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

@keyframes blink-b-zj7ch2rccq {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.ainna-status-text[b-zj7ch2rccq] {
    color: var(--ainna-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Preview Section */
.ainna-ifc-preview-section[b-zj7ch2rccq] {
    min-height: 500px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

    .ainna-ifc-preview-section.ainna-ifc-edit-mode[b-zj7ch2rccq] {
        background: rgba(240, 12, 113, 0.02);
        border-radius: var(--ainna-radius);
    }

    .ainna-ifc-preview-section.ainna-ifc-updating[b-zj7ch2rccq] {
        opacity: 0.7;
        pointer-events: none;
    }

/* Preview Header - Simplified */
.ainna-ifc-preview-header[b-zj7ch2rccq] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 32px;
}

/* Version Navigator - On the right */
.ainna-ifc-version-navigator[b-zj7ch2rccq] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--ainna-bg-gray);
    padding: 4px;
    border-radius: 20px;
    border: 1px solid var(--ainna-border);
    height: 32px;
}

.ainna-ifc-version-nav-btn[b-zj7ch2rccq] {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--ainna-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    font-size: 12px;
}

    .ainna-ifc-version-nav-btn:hover:not(:disabled)[b-zj7ch2rccq] {
        background: var(--ainna-primary);
        color: white;
    }

    .ainna-ifc-version-nav-btn:disabled[b-zj7ch2rccq] {
        opacity: 0.3;
        cursor: not-allowed;
    }

.ainna-ifc-version-label[b-zj7ch2rccq] {
    font-size: 12px;
    font-weight: 600;
    color: var(--ainna-text-primary);
    padding: 0 8px;
    user-select: none;
}

/* Empty State - Enhanced with EXACT animations from original CSS */
.preview-empty[b-zj7ch2rccq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--ainna-text-tertiary);
    padding: 60px 40px;
    animation: fadeIn-b-zj7ch2rccq 0.8s ease-out;
    min-height: 400px;
}

.preview-empty-icon[b-zj7ch2rccq] {
    font-size: 64px;
    margin-bottom: 32px;
    background: linear-gradient(135deg, var(--ainna-primary) 0%, var(--ainna-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.3;
    animation: float-b-zj7ch2rccq 3s ease-in-out infinite;
}

@keyframes float-b-zj7ch2rccq {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Dynamic headline - CSS Grid approach for perfect alignment */
.preview-empty-headline[b-zj7ch2rccq] {
    font-size: 28px;
    font-weight: 700;
    color: var(--ainna-text-primary);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.preview-empty-dynamic[b-zj7ch2rccq] {
    display: inline-grid;
    min-width: 130px;
    text-align: left;
}

.preview-empty-dynamic-word[b-zj7ch2rccq] {
    grid-area: 1 / 1;
    text-align: left;
    background: linear-gradient(135deg, var(--ainna-primary) 0%, var(--ainna-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    opacity: 0;
    animation: wordRotate-b-zj7ch2rccq 12s infinite;
}

    .preview-empty-dynamic-word:nth-child(1)[b-zj7ch2rccq] {
        animation-delay: 0s;
    }

    .preview-empty-dynamic-word:nth-child(2)[b-zj7ch2rccq] {
        animation-delay: 2s;
    }

    .preview-empty-dynamic-word:nth-child(3)[b-zj7ch2rccq] {
        animation-delay: 4s;
    }

    .preview-empty-dynamic-word:nth-child(4)[b-zj7ch2rccq] {
        animation-delay: 6s;
    }

    .preview-empty-dynamic-word:nth-child(5)[b-zj7ch2rccq] {
        animation-delay: 8s;
    }

    .preview-empty-dynamic-word:nth-child(6)[b-zj7ch2rccq] {
        animation-delay: 10s;
    }

@keyframes wordRotate-b-zj7ch2rccq {
    0%, 16.66% {
        opacity: 1;
    }

    20%, 100% {
        opacity: 0;
    }
}

.preview-empty-text[b-zj7ch2rccq] {
    font-size: 16px;
    line-height: 1.8;
    font-weight: 500;
    color: var(--ainna-text-secondary);
    max-width: 400px;
}

.preview-empty-subtitle[b-zj7ch2rccq] {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ainna-text-tertiary);
    margin-top: 12px;
    font-weight: 400;
}

/* Preview Content */
.ainna-ifc-preview-content[b-zj7ch2rccq] {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
    background: transparent;
    min-height: 300px;
    height: auto;
}

    /* Scrollbar styling */
    .ainna-ifc-preview-content[b-zj7ch2rccq]::-webkit-scrollbar {
        width: 6px;
    }

    .ainna-ifc-preview-content[b-zj7ch2rccq]::-webkit-scrollbar-track {
        background: transparent;
    }

    .ainna-ifc-preview-content[b-zj7ch2rccq]::-webkit-scrollbar-thumb {
        background: #e5e7eb;
        border-radius: 3px;
    }

        .ainna-ifc-preview-content[b-zj7ch2rccq]::-webkit-scrollbar-thumb:hover {
            background: #cbd5e0;
        }

/* Interactive Fields */
.ainna-interactive-field[b-zj7ch2rccq] {
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.ainna-field-label[b-zj7ch2rccq] {
    font-size: 12px;
    font-weight: 600;
    color: var(--ainna-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.ainna-field-value[b-zj7ch2rccq] {
    position: relative;
    padding: 12px 16px;
    background: white;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s;
    cursor: text;
    outline: none;
}

    .ainna-field-value[contenteditable="false"][b-zj7ch2rccq] {
        cursor: default;
    }

    .ainna-field-value:hover[b-zj7ch2rccq] {
        border-color: var(--ainna-border);
        background: var(--ainna-bg-subtle);
    }

    .ainna-field-value.h1[b-zj7ch2rccq] {
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -0.02em;
        padding: 16px 20px;
    }

    .ainna-field-value.h2[b-zj7ch2rccq] {
        font-size: 20px;
        font-weight: 600;
        padding: 14px 18px;
    }

    .ainna-field-value.h3[b-zj7ch2rccq] {
        font-size: 16px;
        font-weight: 500;
        padding: 12px 16px;
    }

    .ainna-field-value.editing[b-zj7ch2rccq] {
        border-color: var(--ainna-primary);
        box-shadow: 0 0 0 3px rgba(240, 12, 113, 0.1);
    }

    .ainna-field-value.animate-change[b-zj7ch2rccq] {
        animation: field-update-b-zj7ch2rccq 0.6s ease;
    }

@keyframes field-update-b-zj7ch2rccq {
    0% {
        background: rgba(240, 12, 113, 0.1);
    }

    100% {
        background: white;
    }
}

/* Preview Footer */
.ainna-ifc-preview-footer[b-zj7ch2rccq] {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px dotted var(--ainna-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ainna-ifc-footer-update-info[b-zj7ch2rccq] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ainna-text-tertiary);
    font-weight: 500;
}

    .ainna-ifc-footer-update-info i[b-zj7ch2rccq] {
        font-size: 11px;
        color: var(--ainna-text-tertiary);
    }

.ainna-ifc-footer-name[b-zj7ch2rccq] {
    color: var(--ainna-text-secondary);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .ainna-ifc-component[b-zj7ch2rccq] {
        padding: 24px 16px;
    }

    .ainna-ifc-main-content[b-zj7ch2rccq] {
        padding: 24px;
    }

    .ainna-step-title[b-zj7ch2rccq] {
        font-size: 24px;
    }

    .ainna-step-number[b-zj7ch2rccq] {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .ainna-step-header[b-zj7ch2rccq] {
        flex-wrap: wrap;
        gap: 16px;
    }

    .ainna-status-badge[b-zj7ch2rccq] {
        width: 100%;
        justify-content: center;
    }

    .preview-empty-headline[b-zj7ch2rccq] {
        font-size: 24px;
    }

    .preview-empty-text[b-zj7ch2rccq] {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .ainna-ifc-main-content[b-zj7ch2rccq] {
        padding: 16px;
        border-style: dashed;
    }

    .ainna-step-title[b-zj7ch2rccq] {
        font-size: 20px;
    }

    .ainna-step-number[b-zj7ch2rccq] {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .preview-empty[b-zj7ch2rccq] {
        padding: 40px 20px;
    }

    .preview-empty-headline[b-zj7ch2rccq] {
        font-size: 20px;
    }

    .ainna-field-value.h1[b-zj7ch2rccq] {
        font-size: 22px;
    }

    .ainna-field-value.h2[b-zj7ch2rccq] {
        font-size: 18px;
    }

    .ainna-field-value.h3[b-zj7ch2rccq] {
        font-size: 14px;
    }
}
/* _content/AinnaProduct/Components/AinnaInteractiveField.razor.rz.scp.css */
.smart-field[b-0gymm9m30b] {
    width: calc(100% - 32px);
    margin: 0 16px 12px 16px;
    transition: all 0.2s ease;
    position: relative;
}

.smart-field-label[b-0gymm9m30b] {
    font-size: 10px;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: block;
    transition: color 0.15s ease;
    opacity: 0.8;
}

.required-indicator[b-0gymm9m30b] {
    color: #ef4444;
    margin-left: 2px;
    font-weight: 400;
}

.field-value[b-0gymm9m30b] {
    font-size: 14px;
    color: #111827;
    line-height: 1.5;
    padding: 8px 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    position: relative;
    transition: all 0.15s ease;
    min-height: 36px;
    display: flex;
    align-items: center;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
}

/* Adjust alignment for multiline fields */
.smart-field.multiline .field-value[b-0gymm9m30b] {
    align-items: flex-start;
    min-height: auto;
    padding: 10px 12px;
}

.field-text[b-0gymm9m30b] {
    transition: opacity 0.15s ease;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Preserve line breaks in multiline fields */
.smart-field.multiline .field-text[b-0gymm9m30b] {
    white-space: pre-wrap;
}

.field-input[b-0gymm9m30b],
.field-textarea[b-0gymm9m30b] {
    width: 100%;
    border: none;
    outline: none;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    background: transparent;
    padding: 0;
    line-height: inherit;
}

.field-textarea[b-0gymm9m30b] {
    resize: vertical;
    overflow-y: auto;
    min-height: 60px;
}

/* Empty State */
.empty-state[b-0gymm9m30b] {
    color: #9ca3af;
    font-style: normal;
    font-size: 13px;
}

.placeholder-text[b-0gymm9m30b] {
    opacity: 0.5;
}

/* Field Styles - More Compact */
.smart-field.style-h1 .field-value[b-0gymm9m30b] {
    border: none;
    background: transparent;
    padding: 0 0 4px 0;
    min-height: auto;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.smart-field.style-h1 .field-text[b-0gymm9m30b],
.smart-field.style-h1 .field-input[b-0gymm9m30b],
.smart-field.style-h1 .field-textarea[b-0gymm9m30b] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    color: #111827;
    letter-spacing: -0.03em;
}

.smart-field.style-h1 .smart-field-label[b-0gymm9m30b] {
    display: none;
}

.smart-field.style-h2 .field-value[b-0gymm9m30b] {
    background: #fafbfc;
    border: 1px solid #d1d5db;
    padding: 10px 14px;
}

.smart-field.style-h2 .field-text[b-0gymm9m30b],
.smart-field.style-h2 .field-input[b-0gymm9m30b],
.smart-field.style-h2 .field-textarea[b-0gymm9m30b] {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #111827;
    letter-spacing: -0.01em;
}

.smart-field.style-h2 .smart-field-label[b-0gymm9m30b] {
    font-size: 9px;
    color: #6366f1;
    opacity: 0.9;
    font-weight: 500;
}

/* For H3 style (default) */
.smart-field.style-h3 .field-textarea[b-0gymm9m30b] {
    font-size: 14px;
    line-height: 1.5;
}

/* Field States - Subtler */
.smart-field.state-focus .field-value[b-0gymm9m30b] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.05);
    background: #fafaff;
}

.smart-field.state-focus .smart-field-label[b-0gymm9m30b] {
    color: #6366f1;
    opacity: 1;
}

.smart-field.state-error .field-value[b-0gymm9m30b] {
    border-color: #ef4444;
    background: #fef2f2;
}

.smart-field.state-error .smart-field-label[b-0gymm9m30b] {
    color: #ef4444;
}

.smart-field.state-success .field-value[b-0gymm9m30b] {
    border-color: #10b981;
    background: #f0fdf4;
}

.smart-field.state-disabled[b-0gymm9m30b] {
    opacity: 0.5;
    pointer-events: none;
}

.smart-field.state-thinking .field-text[b-0gymm9m30b] {
    opacity: 0;
    visibility: hidden;
}

.smart-field.state-thinking .field-value[b-0gymm9m30b] {
    background: #f9fafb;
    border-color: #6366f1;
}

/* Just Updated State Animation - Subtler */
.smart-field.state-just-updated .field-value[b-0gymm9m30b] {
    animation: subtleHighlight-b-0gymm9m30b 1.5s ease-out forwards;
}

@keyframes subtleHighlight-b-0gymm9m30b {
    0% {
        background: white;
    }

    20% {
        background: #fef3c7;
        border-color: #fbbf24;
    }

    100% {
        background: white;
        border-color: #e5e7eb;
    }
}

/* Thinking Animation - Smaller, Elegant */
.thinking-dots[b-0gymm9m30b] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    align-items: center;
    gap: 4px;
    z-index: 10;
}

    .thinking-dots.active[b-0gymm9m30b] {
        display: flex;
    }

.thinking-dot[b-0gymm9m30b] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6366f1;
    animation: dotFade-b-0gymm9m30b 1.2s infinite ease-in-out;
}

    .thinking-dot:nth-child(1)[b-0gymm9m30b] {
        animation-delay: 0s;
    }

    .thinking-dot:nth-child(2)[b-0gymm9m30b] {
        animation-delay: 0.2s;
    }

    .thinking-dot:nth-child(3)[b-0gymm9m30b] {
        animation-delay: 0.4s;
    }

@keyframes dotFade-b-0gymm9m30b {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    40% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Action Buttons - Smaller, More Subtle */
.field-actions[b-0gymm9m30b] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.smart-field:hover .field-actions[b-0gymm9m30b],
.smart-field.state-focus .field-actions[b-0gymm9m30b] {
    opacity: 1;
}

.action-btn[b-0gymm9m30b] {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

    .action-btn:hover[b-0gymm9m30b] {
        background: rgba(99, 102, 241, 0.08);
        color: #6366f1;
    }

    .action-btn.ai-btn:hover[b-0gymm9m30b] {
        background: rgba(99, 102, 241, 0.1);
        color: #6366f1;
    }

/* Status Indicator - Smaller */
.status-indicator[b-0gymm9m30b] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    top: 6px;
    right: 6px;
    transition: all 0.2s ease;
}

    .status-indicator.status-saved[b-0gymm9m30b] {
        background: #10b981;
    }

    .status-indicator.status-pending[b-0gymm9m30b] {
        background: #f59e0b;
        animation: pulse-b-0gymm9m30b 2s infinite;
    }

    .status-indicator.status-error[b-0gymm9m30b] {
        background: #ef4444;
    }

@keyframes pulse-b-0gymm9m30b {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(0.9);
    }
}

/* Helper Text - Compact */
.field-helper[b-0gymm9m30b] {
    font-size: 11px;
    color: #6b7280;
    margin-top: 4px;
    transition: color 0.15s ease;
    line-height: 1.3;
}

    .field-helper.error[b-0gymm9m30b] {
        color: #ef4444;
    }

.edit-hint[b-0gymm9m30b] {
    color: #6366f1;
    font-style: normal;
    font-size: 11px;
    opacity: 0.8;
}

/* Hover State for Better Interaction */
.smart-field:hover .field-value:not(.state-focus)[b-0gymm9m30b] {
    border-color: #d1d5db;
    background: #fafbfc;
}

/* Smooth transitions for edit mode */
.field-value:has(.field-input:focus)[b-0gymm9m30b],
.field-value:has(.field-textarea:focus)[b-0gymm9m30b] {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.05);
    background: #fafaff;
}

/*.smart-field {
    width: calc(100% - 48px);
    margin: 0 24px 24px 24px;
    transition: all 0.3s ease;
    position: relative;
}

.smart-field-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #5f6368;
    font-weight: 700;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
    display: block;
    transition: color 0.2s ease;
}

.required-indicator {
    color: #ea4335;
    margin-left: 2px;
}

.field-value {
    font-size: 15px;
    color: #202124;
    line-height: 1.6;
    padding: 12px 16px;
    background: white;
    border: 1px solid #dadce0;
    border-radius: 8px;
    position: relative;
    transition: all 0.3s ease;
    min-height: 54px;
    display: flex;
    align-items: center;
    width: 100%;
}*/

/* Adjust alignment for multiline fields */
/*.smart-field.multiline .field-value {
    align-items: flex-start;
    min-height: auto;
}

.field-text {
    transition: opacity 0.2s ease;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}*/

/* Preserve line breaks in multiline fields */
/*.smart-field.multiline .field-text {
    white-space: pre-wrap;
}

.field-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    background: transparent;
    padding: 0;
}

.field-textarea {
    width: 100%;
    border: none;
    outline: none;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    color: inherit;
    background: transparent;
    padding: 0;
    resize: vertical;
    overflow-y: auto;
}*/

/* Empty State */
/*.empty-state {
    color: #9aa0a6;
    font-style: italic;
}

.placeholder-text {
    opacity: 0.6;
}*/

/* Field Styles */
/*.smart-field.style-h1 .field-value {
    border: none;
    background: transparent;
    padding: 0;
    min-height: auto;
}

.smart-field.style-h1 .field-text,
.smart-field.style-h1 .field-input,
.smart-field.style-h1 .field-textarea {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    color: #202124;
    letter-spacing: -0.5px;
}

.smart-field.style-h1 .smart-field-label {
    display: none;
}

.smart-field.style-h2 .field-value {
    background: rgba(66, 133, 244, 0.04);
    border: 2px solid rgba(66, 133, 244, 0.15);
    padding: 16px 20px;
}

.smart-field.style-h2 .field-text,
.smart-field.style-h2 .field-input,
.smart-field.style-h2 .field-textarea {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #202124;
}

.smart-field.style-h2 .smart-field-label {
    font-size: 10px;
    color: #4285f4;
    opacity: 0.8;
}*/

/* For H3 style (default), keep normal text size for textarea */
/*.smart-field.style-h3 .field-textarea {
    font-size: 15px;
    line-height: 1.6;
}*/

/* Field States */
/*.smart-field.state-focus .field-value {
    border-color: #1a73e8;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

.smart-field.state-focus .smart-field-label {
    color: #1a73e8;
}

.smart-field.state-error .field-value {
    border-color: #ea4335;
    background: rgba(234, 67, 53, 0.02);
}

.smart-field.state-error .smart-field-label {
    color: #ea4335;
}

.smart-field.state-success .field-value {
    border-color: #34a853;
    background: rgba(52, 168, 83, 0.02);
}

.smart-field.state-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.smart-field.state-thinking .field-text {
    opacity: 0;
    visibility: hidden;
}

.smart-field.state-thinking .field-value {
    background: #f8f9fa;
    border-color: #1a73e8;
}*/

/* Just Updated State Animation */
/*.smart-field.state-just-updated .field-value {
    animation: highlightUpdate 2s ease-out forwards;
}

@keyframes highlightUpdate {
    0% {
        background: white;
        transform: scale(1);
    }

    15% {
        background: rgba(255, 251, 179, 0.3);
        transform: scale(1.01);
    }

    30% {
        background: rgba(220, 255, 102, 0.4);
        box-shadow: 0 0 30px rgba(179, 255, 102, 0.3);
    }

    50% {
        background: rgba(220, 255, 102, 0.25);
    }

    100% {
        background: rgba(220, 255, 102, 0.1);
        box-shadow: none;
    }
}*/

/* Thinking Animation */
/*.thinking-dots {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

    .thinking-dots.active {
        display: flex;
    }

.thinking-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1a73e8;
    animation: dotPulse 1.4s infinite ease-in-out;
}

    .thinking-dot:nth-child(1) {
        animation-delay: 0s;
    }

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

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

@keyframes dotPulse {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.3;
        background: #5f6368;
    }

    40% {
        transform: scale(1.3);
        opacity: 1;
        background: #1a73e8;
    }
}*/

/* Action Buttons */
/*.field-actions {
    position: absolute;
    right: 12px;
    top: 12px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.smart-field:hover .field-actions {
    opacity: 1;
}

.action-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: rgba(95, 99, 104, 0.08);
    color: #5f6368;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

    .action-btn:hover {
        background: rgba(95, 99, 104, 0.16);
        color: #202124;
    }

    .action-btn.ai-btn:hover {
        background: rgba(26, 115, 232, 0.12);
        color: #1a73e8;
    }*/

/* Status Indicator */
/*.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    top: 8px;
    right: 8px;
    transition: all 0.3s ease;
}

    .status-indicator.status-saved {
        background: #34a853;
    }

    .status-indicator.status-pending {
        background: #fbbc04;
        animation: pulse 2s infinite;
    }

    .status-indicator.status-error {
        background: #ea4335;
    }

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}*/

/* Helper Text */
/*.field-helper {
    font-size: 12px;
    color: #5f6368;
    margin-top: 6px;
    transition: color 0.2s ease;
}

    .field-helper.error {
        color: #ea4335;
    }

.edit-hint {
    color: #1a73e8;
    font-style: italic;
}*/
/* _content/AinnaProduct/Components/AinnaLoadingState.razor.rz.scp.css */
/* Loading Container */
.ainna-loading-container[b-yrvfvunuap] {
    width: 100%;
    min-height: 100vh; /* Use viewport height as minimum */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
     
    background: radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 119, 168, 0.1) 0%, transparent 50%), radial-gradient(circle at 40% 20%, rgba(120, 200, 255, 0.1) 0%, transparent 50%), linear-gradient(135deg, rgb(253, 252, 251) 0%, rgb(249, 248, 255) 20%, rgb(255, 249, 252) 40%, rgb(252, 249, 255) 60%, rgb(255, 251, 254) 80%, rgb(251, 250, 255) 100%);
    z-index: 9999;
    animation: fadeIn-b-yrvfvunuap 0.3s ease-out;
}

/* Logo Section */
.ainna-loading-logo[b-yrvfvunuap] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 120px; /* 3x vertical space */
    animation: logoFadeIn-b-yrvfvunuap 0.6s ease-out;
}

    .ainna-loading-logo img[b-yrvfvunuap] {
        height: 48px;
        width: auto;
        object-fit: contain;
    }

@keyframes logoFadeIn-b-yrvfvunuap {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Content */
.ainna-loading-content[b-yrvfvunuap] {
    text-align: center;
    max-width: 600px; /* Increased width */
    padding: 40px;
}

/* Message Display */
.ainna-message-display[b-yrvfvunuap] {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 32px;
    min-width: 500px; /* Ensure minimum width */
}

/* Messages */
.ainna-message[b-yrvfvunuap] {
    position: absolute;
    width: 100%;
    font-size: 24px;
    font-weight: 500;
    color: #111827;
    opacity: 0;
    animation: messageSlide-b-yrvfvunuap 12s infinite;
    white-space: nowrap; /* Force single line */
}

    .ainna-message:nth-child(1)[b-yrvfvunuap] {
        animation-delay: 0s;
    }

    .ainna-message:nth-child(2)[b-yrvfvunuap] {
        animation-delay: 3s;
    }

    .ainna-message:nth-child(3)[b-yrvfvunuap] {
        animation-delay: 6s;
    }

    .ainna-message:nth-child(4)[b-yrvfvunuap] {
        animation-delay: 9s;
    }

@keyframes messageSlide-b-yrvfvunuap {
    0%, 25% {
        opacity: 0;
        transform: translateY(10px);
    }

    2%, 23% {
        opacity: 1;
        transform: translateY(0);
    }

    25%, 100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Progress Bar Container */
.ainna-progress-container[b-yrvfvunuap] {
    width: 200px;
    margin: 0 auto;
    position: relative;
}

/* Progress Line */
.ainna-progress-line[b-yrvfvunuap] {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #e5e7eb;
    transform: translateY(-50%);
    z-index: 1;
}

.ainna-progress-fill[b-yrvfvunuap] {
    height: 100%;
    background: linear-gradient(90deg, #f00c71 0%, #d00560 100%);
    width: 0;
    animation: progressGrow-b-yrvfvunuap 12s infinite;
    transition: width 0.3s ease;
}

/* Progress Dots */
.ainna-progress-dots[b-yrvfvunuap] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.ainna-progress-dot[b-yrvfvunuap] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5e7eb;
    transition: all 0.3s ease;
}

/* Progress Animations */
@keyframes progressGrow-b-yrvfvunuap {
    0% {
        width: 0;
    }

    25% {
        width: 33.33%;
    }

    50% {
        width: 66.66%;
    }

    75% {
        width: 100%;
    }

    100% {
        width: 100%;
    }
}

/* Dot Animations */
.ainna-progress-dot:nth-child(1)[b-yrvfvunuap] {
    animation: dotPulse1-b-yrvfvunuap 12s infinite;
}

.ainna-progress-dot:nth-child(2)[b-yrvfvunuap] {
    animation: dotPulse2-b-yrvfvunuap 12s infinite;
}

.ainna-progress-dot:nth-child(3)[b-yrvfvunuap] {
    animation: dotPulse3-b-yrvfvunuap 12s infinite;
}

.ainna-progress-dot:nth-child(4)[b-yrvfvunuap] {
    animation: dotPulse4-b-yrvfvunuap 12s infinite;
}

@keyframes dotPulse1-b-yrvfvunuap {
    0%, 2% {
        width: 12px;
        height: 12px;
        background: linear-gradient(135deg, #f00c71 0%, #d00560 100%);
        box-shadow: 0 0 12px rgba(240, 12, 113, 0.4);
    }

    25%, 100% {
        width: 8px;
        height: 8px;
        background: #e5e7eb;
        box-shadow: none;
    }
}

@keyframes dotPulse2-b-yrvfvunuap {
    0%, 24% {
        width: 8px;
        height: 8px;
        background: #e5e7eb;
        box-shadow: none;
    }

    25%, 27% {
        width: 12px;
        height: 12px;
        background: linear-gradient(135deg, #f00c71 0%, #d00560 100%);
        box-shadow: 0 0 12px rgba(240, 12, 113, 0.4);
    }

    50%, 100% {
        width: 8px;
        height: 8px;
        background: #e5e7eb;
        box-shadow: none;
    }
}

@keyframes dotPulse3-b-yrvfvunuap {
    0%, 49% {
        width: 8px;
        height: 8px;
        background: #e5e7eb;
        box-shadow: none;
    }

    50%, 52% {
        width: 12px;
        height: 12px;
        background: linear-gradient(135deg, #f00c71 0%, #d00560 100%);
        box-shadow: 0 0 12px rgba(240, 12, 113, 0.4);
    }

    75%, 100% {
        width: 8px;
        height: 8px;
        background: #e5e7eb;
        box-shadow: none;
    }
}

@keyframes dotPulse4-b-yrvfvunuap {
    0%, 74% {
        width: 8px;
        height: 8px;
        background: #e5e7eb;
        box-shadow: none;
    }

    75%, 100% {
        width: 12px;
        height: 12px;
        background: linear-gradient(135deg, #f00c71 0%, #d00560 100%);
        box-shadow: 0 0 12px rgba(240, 12, 113, 0.4);
    }
}

/* General Animations */
@keyframes fadeIn-b-yrvfvunuap {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut-b-yrvfvunuap {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* Hide Animation */
.ainna-loading-container.hide[b-yrvfvunuap] {
    animation: fadeOut-b-yrvfvunuap 0.3s ease-out forwards;
}
/* _content/AinnaProduct/Components/AinnaPages/AinnaLandingPageNewWithExperimentation.razor.rz.scp.css */

/* ===========================
   AINNA LANDING PAGE COMPONENT STYLES
   Themes are defined in app.css
   =========================== */

/* Control Panel */
.control-panel[b-4e0eznbcvo] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--background-primary);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    z-index: 10001;
    min-width: 280px;
    border: 1px solid var(--border-color);
}

    .control-panel h4[b-4e0eznbcvo] {
        margin: 0 0 16px 0;
        font-size: 14px;
        font-weight: 700;
        color: var(--text-heading);
    }

.control-section[b-4e0eznbcvo] {
    margin-bottom: 16px;
}

.control-group[b-4e0eznbcvo] {
    margin-bottom: 12px;
}

.control-label[b-4e0eznbcvo] {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.theme-buttons[b-4e0eznbcvo] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.mode-buttons[b-4e0eznbcvo] {
    display: flex;
    gap: 8px;
}

.control-panel button[b-4e0eznbcvo] {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background: var(--background-primary);
    color: var(--text-secondary);
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

    .control-panel button.active[b-4e0eznbcvo] {
        background: var(--color-accent-1);
        color: white;
        border-color: var(--color-accent-1);
    }

.control-footer[b-4e0eznbcvo] {
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-size: 11px;
    color: var(--text-tertiary);
}

    .control-footer code[b-4e0eznbcvo] {
        display: block;
        margin-top: 4px;
        padding: 4px 8px;
        background: var(--background-secondary);
        border-radius: 4px;
        color: var(--text-secondary);
    }

.close-btn[b-4e0eznbcvo] {
    position: absolute !important;
    top: 8px;
    right: 8px;
    background: none !important;
    border: none !important;
    color: var(--text-tertiary) !important;
    cursor: pointer;
    font-size: 18px;
    padding: 0 !important;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Preview Banner */
.preview-banner[b-4e0eznbcvo] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--gradient-primary);
    color: white;
    padding: 8px;
    text-align: center;
    z-index: 10000;
    font-size: 14px;
    font-weight: 600;
}

/* Navigation - Enhanced Responsiveness */
.navbar[b-4e0eznbcvo] {
    position: fixed;
    top: 0;
    width: 100%;
    background: var(--background-primary);
    background: rgba(var(--bg-rgb, 255, 255, 255), 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    padding: 16px 0;
    transition: all 0.3s ease;
    opacity: 0;
    animation: fadeIn-b-4e0eznbcvo 0.8s ease 2s forwards;
}

    .navbar.scrolled[b-4e0eznbcvo] {
        padding: 12px 0;
        box-shadow: 0 2px 20px var(--shadow-color-light);
    }

.nav-container[b-4e0eznbcvo] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand[b-4e0eznbcvo] {
    display: flex;
    align-items: center;
    gap: 40px;
}

.logo[b-4e0eznbcvo] {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    text-decoration: none;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    transition: transform 0.2s;
}

    /* Fix for navbar logo height */
    .logo img[b-4e0eznbcvo] {
        height: 40px;
        width: auto;
    }

.logo-text[b-4e0eznbcvo] {
    font-size: 32px;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-tagline[b-4e0eznbcvo] {
    font-size: 10px !important;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 4px 10px;
    background: var(--card-bg-subtle);
    border-radius: 20px;
    border: 1px solid var(--color-accent-1);
    opacity: 0.3;
    white-space: nowrap;
    line-height: 1.2;
    display: inline-block;
    margin-bottom: 8px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-menu[b-4e0eznbcvo] {
    display: flex;
    list-style: none;
    gap: 36px;
    margin: 0;
    padding: 0;
}

    .nav-menu a[b-4e0eznbcvo] {
        color: var(--text-secondary);
        text-decoration: none;
        font-weight: 500;
        font-size: 15px;
        position: relative;
        transition: color 0.2s;
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .nav-menu a .nav-icon[b-4e0eznbcvo] {
            display: none;
            font-size: 18px;
        }

        .nav-menu a .nav-text[b-4e0eznbcvo] {
            display: inline;
        }

        .nav-menu a[b-4e0eznbcvo]::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--color-accent-1);
            transition: width 0.3s;
        }

        .nav-menu a:hover[b-4e0eznbcvo] {
            color: var(--text-primary);
        }

            .nav-menu a:hover[b-4e0eznbcvo]::after {
                width: 100%;
            }

/* Responsive Navigation - Progressive Enhancement */
@media (max-width: 1200px) {
    .logo-tagline[b-4e0eznbcvo] {
        display: none;
    }
}

@media (max-width: 1024px) {
    .nav-menu[b-4e0eznbcvo] {
        gap: 24px;
    }

        .nav-menu a .nav-icon[b-4e0eznbcvo] {
            display: inline;
        }

        .nav-menu a .nav-text[b-4e0eznbcvo] {
            display: none;
        }

    .nav-container[b-4e0eznbcvo] {
        padding: 0 24px;
    }
}

@media (max-width: 768px) {
    .nav-menu[b-4e0eznbcvo] {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--background-primary);
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 4px 20px var(--shadow-color-light);
        border-radius: 0 0 12px 12px;
        border: 1px solid var(--border-color);
    }

        .nav-menu.show[b-4e0eznbcvo] {
            display: flex;
        }

        .nav-menu a .nav-text[b-4e0eznbcvo] {
            display: inline;
        }

    .mobile-menu-btn[b-4e0eznbcvo] {
        display: block;
    }
}

.nav-actions[b-4e0eznbcvo] {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-left: 40px;
}

.mobile-menu-btn[b-4e0eznbcvo] {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-primary);
    cursor: pointer;
}

/* Hero Section - WITH SPACING FIXES */
.ainna-landing .hero[b-4e0eznbcvo] {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    background: linear-gradient(180deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
    padding: 160px 0 80px !important; /* FIXED: Increased from 120px for better spacing */
    padding-top: max(160px, env(safe-area-inset-top) + 140px) !important; /* iOS safe area support */
    overflow: hidden !important;
}

/* When preview banner is shown */
.preview-banner ~ .ainna-landing .hero[b-4e0eznbcvo] {
    padding-top: 200px !important; /* Extra space for preview banner */
}

.ainna-landing .hero[b-4e0eznbcvo]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 20% 80%, var(--shadow-color-light) 0%, transparent 50%), radial-gradient(circle at 80% 20%, var(--shadow-color-light) 0%, transparent 50%), radial-gradient(circle at 40% 40%, var(--shadow-color-light) 0%, transparent 50%);
    animation: gradientShift-b-4e0eznbcvo 20s ease infinite;
    z-index: 0;
}

.ainna-landing .hero-container[b-4e0eznbcvo] {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
    position: relative !important;
    z-index: 1 !important;
}

.ainna-landing .hero-content[b-4e0eznbcvo] {
    max-width: 1200px !important;
    text-align: center !important;
    margin: 0 auto !important;
    margin-top: 40px !important; /* FIXED: Extra breathing room from navbar */
}

/* FIXED TYPOGRAPHY - Better line heights for descenders */
.ainna-landing .hero-title[b-4e0eznbcvo] {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(64px, 10vw, 140px) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important; /* FIXED: Changed from 0.95 for descenders */
    letter-spacing: -0.05em !important;
    margin-bottom: 36px !important;
    color: var(--text-heading) !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

    .ainna-landing .hero-title:focus[b-4e0eznbcvo],
    .ainna-landing .hero-title:focus-visible[b-4e0eznbcvo],
    .ainna-landing .hero-title:focus-within[b-4e0eznbcvo] {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }

.ainna-landing #typedMessage[b-4e0eznbcvo] {
    display: block !important;
    font-size: 0.4em !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    margin-top: 20px !important; /* FIXED: Added top margin for spacing */
    margin-bottom: 60px !important;
    color: var(--text-secondary) !important;
    min-height: 1.2em !important;
    outline: none !important;
    border: none !important;
}

.ainna-landing .hero-title-line2[b-4e0eznbcvo],
.ainna-landing .hero-title-line3[b-4e0eznbcvo] {
    display: block !important;
    opacity: 0;
    transform: translateY(20px);
    color: var(--text-heading) !important;
    padding: 0 20px !important;
    line-height: 1.15 !important; /* FIXED: Changed from 1 to prevent truncation */
    outline: none !important;
    border: none !important;
}

/* Kill any possible blue border on all hero title elements */
.ainna-landing .hero-title *[b-4e0eznbcvo],
.ainna-landing .hero-title span[b-4e0eznbcvo] {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.ainna-landing .hero-title-line2[b-4e0eznbcvo] {
    margin-bottom: 20px !important; /* FIXED: Increased from 16px */
    font-size: 0.95em !important;
}

.ainna-landing .hero-title-line3[b-4e0eznbcvo] {
    background: var(--gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: gradientAnimation-b-4e0eznbcvo 8s ease infinite;
    display: inline-block !important;
    font-size: 1.05em !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
    padding-bottom: 0.1em !important; /* FIXED: Added padding for descenders */
}

.ainna-landing .hero-subtitle[b-4e0eznbcvo] {
    font-size: clamp(20px, 2.5vw, 28px) !important;
    font-weight: 400 !important;
    color: var(--text-secondary) !important;
    line-height: 1.4 !important;
    max-width: 900px !important;
    margin: 0 auto 56px !important;
    letter-spacing: -0.02em !important;
    opacity: 0;
    transform: translateY(20px);
}

.ainna-landing .hero-actions[b-4e0eznbcvo] {
    display: flex !important;
    gap: 20px !important;
    justify-content: center !important;
    margin-bottom: 80px !important;
    opacity: 0;
    transform: translateY(20px);
}

.ainna-landing .btn-hero[b-4e0eznbcvo] {
    padding: 18px 40px !important;
    font-size: 16px !important;
    border-radius: 60px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.ainna-landing .btn-hero-primary[b-4e0eznbcvo] {
    background: var(--gradient-button) !important;
    color: white !important;
    box-shadow: 0 8px 32px var(--shadow-color) !important;
}

    .ainna-landing .btn-hero-primary:hover[b-4e0eznbcvo] {
        transform: translateY(-3px);
        box-shadow: 0 12px 40px var(--shadow-color) !important;
    }

.ainna-landing .btn-hero-secondary[b-4e0eznbcvo] {
    background: var(--background-primary) !important;
    color: var(--text-heading) !important;
    border: 2px solid var(--border-color) !important;
    box-shadow: 0 4px 16px var(--shadow-color-light) !important;
}

    .ainna-landing .btn-hero-secondary:hover[b-4e0eznbcvo] {
        transform: translateY(-3px);
        border-color: var(--color-accent-1) !important;
        background: var(--background-secondary) !important;
        box-shadow: 0 8px 24px var(--shadow-color-light) !important;
    }

.ainna-landing .hero-stats[b-4e0eznbcvo] {
    display: flex !important;
    justify-content: center !important;
    gap: 80px !important;
    opacity: 0;
    transform: translateY(20px);
}

.ainna-landing .stat-item[b-4e0eznbcvo] {
    text-align: center !important;
}

.ainna-landing .stat-value[b-4e0eznbcvo] {
    font-size: 48px !important;
    font-weight: 800 !important;
    background: var(--gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: block !important;
    margin-bottom: 8px !important;
}

.ainna-landing .stat-label[b-4e0eznbcvo] {
    font-size: 14px !important;
    color: var(--text-tertiary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
}

/* Fade-in animations */
.fade-in[b-4e0eznbcvo] {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

    .fade-in.visible[b-4e0eznbcvo] {
        opacity: 1;
        transform: translateY(0);
    }

/* Comparison Section */
.comparison[b-4e0eznbcvo] {
    padding: 100px 0;
    background: var(--background-primary);
    border-top: 2px solid var(--border-strong);
    position: relative;
}

.comparison-wrapper[b-4e0eznbcvo] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 32px;
}

.section-header[b-4e0eznbcvo] {
    text-align: center;
    margin-bottom: 64px;
}

.section-title[b-4e0eznbcvo] {
    font-family: 'Inter', sans-serif;
    font-size: clamp(32px, 3.5vw, 42px);
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 20px;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.section-desc[b-4e0eznbcvo] {
    font-size: clamp(15px, 1.3vw, 17px);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    font-weight: 400;
}

.evolution-timeline[b-4e0eznbcvo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 72px 0 64px;
    position: relative;
}

    .evolution-timeline[b-4e0eznbcvo]::before {
        content: '';
        position: absolute;
        top: 60px;
        left: 15%;
        right: 15%;
        height: 2px;
        background: linear-gradient(90deg, var(--primary-red) 0%, #f59e0b 50%, var(--color-accent-2) 100%);
        opacity: 0.2;
        z-index: 0;
    }

.evolution-stage[b-4e0eznbcvo] {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
}

.stage-circle[b-4e0eznbcvo] {
    width: 120px;
    height: 120px;
    margin: 0 auto 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .stage-circle:hover[b-4e0eznbcvo] {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

.stage-manual .stage-circle[b-4e0eznbcvo] {
    background: linear-gradient(135deg, #ea4335 0%, #d33b2c 100%);
}

.stage-ai .stage-circle[b-4e0eznbcvo] {
    background: linear-gradient(135deg, #fbbc04 0%, #f59e0b 100%);
}

.stage-ainna .stage-circle[b-4e0eznbcvo] {
    background: var(--gradient-primary);
}

.stage-icon[b-4e0eznbcvo] {
    font-size: 48px;
    color: white;
}

.stage-label[b-4e0eznbcvo] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.stage-time[b-4e0eznbcvo] {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.stage-manual .stage-time[b-4e0eznbcvo] {
    color: var(--primary-red);
}

.stage-ai .stage-time[b-4e0eznbcvo] {
    color: #f59e0b;
}

.stage-ainna .stage-time[b-4e0eznbcvo] {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.evolution-message[b-4e0eznbcvo] {
    max-width: 800px;
    margin: 64px auto 0;
    text-align: center;
    padding: 40px 48px;
    background: var(--card-bg-subtle);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.message-main[b-4e0eznbcvo] {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-heading);
    margin-bottom: 12px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp-b-4e0eznbcvo 0.8s ease forwards;
}

.message-sub[b-4e0eznbcvo] {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-secondary);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp-b-4e0eznbcvo 0.8s ease 0.3s forwards;
}

.highlight-time[b-4e0eznbcvo] {
    color: var(--color-accent-1);
    font-weight: 800;
}

.highlight-cost[b-4e0eznbcvo] {
    color: var(--color-accent-2);
    font-weight: 800;
}

.comparison-narrative[b-4e0eznbcvo] {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 0 24px;
}

    .comparison-narrative p[b-4e0eznbcvo] {
        font-size: 17px;
        line-height: 1.7;
        color: var(--text-secondary);
        margin: 0;
    }

    .comparison-narrative strong[b-4e0eznbcvo] {
        color: var(--text-heading);
        font-weight: 600;
    }

/* Process Section */
.process[b-4e0eznbcvo] {
    padding: 120px 0;
    background: var(--section-bg-1);
    border-top: 2px solid var(--border-strong);
}

.process-timeline[b-4e0eznbcvo] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 56px;
    position: relative;
    z-index: 1;
}

    .process-timeline[b-4e0eznbcvo]::before {
        content: '';
        position: absolute;
        top: 50px;
        left: 120px;
        right: 120px;
        height: 1px;
        background: var(--gradient-primary);
        z-index: 0;
    }

.process-step[b-4e0eznbcvo] {
    text-align: center;
    position: relative;
    z-index: 1;
}

.step-icon[b-4e0eznbcvo] {
    width: 100px;
    height: 100px;
    background: var(--background-primary);
    border: 2px solid var(--color-accent-1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--color-accent-1);
    margin: 0 auto 20px;
    box-shadow: 0 4px 16px var(--shadow-color-light);
    transition: all 0.3s;
}

.process-step:hover .step-icon[b-4e0eznbcvo] {
    background: var(--gradient-primary);
    color: white;
    transform: scale(1.08);
}

.step-title[b-4e0eznbcvo] {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-heading);
}

.step-desc[b-4e0eznbcvo] {
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
    font-size: 14px;
}

.step-time[b-4e0eznbcvo] {
    display: inline-block;
    padding: 4px 12px;
    background: var(--card-bg-subtle);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent-1);
}

/* Methodology Output Section */
.methodology-output[b-4e0eznbcvo] {
    padding: 120px 0;
    background: var(--background-primary);
    border-top: 2px solid var(--border-strong);
}

.methodology-intro[b-4e0eznbcvo] {
    max-width: 800px;
    margin: 0 auto 64px;
    text-align: center;
}

.framework-preview[b-4e0eznbcvo] {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.framework-item[b-4e0eznbcvo] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-primary);
}

    .framework-item i[b-4e0eznbcvo] {
        color: var(--color-accent-2);
        font-size: 16px;
    }

.output-showcase[b-4e0eznbcvo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
    margin-top: 48px;
}

.output-showcase-card[b-4e0eznbcvo] {
    background: var(--background-secondary);
    padding: 36px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

    .output-showcase-card[b-4e0eznbcvo]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: var(--gradient-primary);
    }

    .output-showcase-card:hover[b-4e0eznbcvo] {
        transform: translateY(-6px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    }

.output-showcase-icon[b-4e0eznbcvo] {
    font-size: 40px;
    color: var(--color-accent-1);
    margin-bottom: 20px;
}

.output-showcase-title[b-4e0eznbcvo] {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-heading);
}

.output-showcase-specs[b-4e0eznbcvo] {
    font-size: 14px;
    color: var(--color-accent-2);
    font-weight: 600;
    margin-bottom: 16px;
}

.output-showcase-desc[b-4e0eznbcvo] {
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 14px;
    margin-bottom: 20px;
}

.output-showcase-features[b-4e0eznbcvo] {
    list-style: none;
    text-align: left;
    font-size: 13px;
    color: var(--text-primary);
    margin: 0;
    padding: 0;
}

    .output-showcase-features li[b-4e0eznbcvo] {
        padding: 6px 0;
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .output-showcase-features i[b-4e0eznbcvo] {
        color: var(--color-accent-2);
        font-size: 12px;
        margin-top: 2px;
    }

/* Pricing Section */
.pricing[b-4e0eznbcvo] {
    padding: 120px 0;
    background: var(--section-bg-2);
    border-top: 2px solid var(--border-strong);
}

.pricing-wrapper[b-4e0eznbcvo] {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.pricing-cards[b-4e0eznbcvo] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 56px;
}

.pricing-card[b-4e0eznbcvo] {
    background: var(--background-primary);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 4px 16px var(--shadow-color-light);
    position: relative;
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}

    .pricing-card.featured[b-4e0eznbcvo] {
        border-color: var(--color-accent-1);
        transform: scale(1.04);
        box-shadow: 0 8px 32px var(--shadow-color-light);
    }

        .pricing-card.featured[b-4e0eznbcvo]::before {
            content: 'MOST POPULAR';
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--color-accent-1);
            color: white;
            padding: 3px 14px;
            border-radius: 16px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

    .pricing-card:hover[b-4e0eznbcvo] {
        transform: translateY(-6px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    }

    .pricing-card.featured:hover[b-4e0eznbcvo] {
        transform: scale(1.04) translateY(-6px);
    }

.pricing-title[b-4e0eznbcvo] {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-heading);
}

.pricing-price[b-4e0eznbcvo] {
    font-size: 42px;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 4px;
}

    .pricing-price span[b-4e0eznbcvo] {
        font-size: 16px;
        color: var(--text-secondary);
        font-weight: 400;
    }

.pricing-desc[b-4e0eznbcvo] {
    color: var(--text-secondary);
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

.pricing-features[b-4e0eznbcvo] {
    list-style: none;
    margin: 0 0 32px 0;
    padding: 0;
    text-align: left;
}

    .pricing-features li[b-4e0eznbcvo] {
        padding: 10px 0;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
    }

    .pricing-features i[b-4e0eznbcvo] {
        color: var(--color-accent-2);
        font-size: 14px;
    }

.pricing-btn[b-4e0eznbcvo] {
    width: 100%;
    padding: 14px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

    .pricing-btn.primary[b-4e0eznbcvo] {
        background: var(--gradient-primary);
        color: white;
        box-shadow: 0 3px 10px var(--shadow-color-light);
    }

        .pricing-btn.primary:hover[b-4e0eznbcvo] {
            transform: translateY(-2px);
            box-shadow: 0 5px 16px var(--shadow-color);
        }

    .pricing-btn.secondary[b-4e0eznbcvo] {
        background: var(--background-secondary);
        color: var(--text-primary);
        border: 2px solid var(--border-color);
    }

        .pricing-btn.secondary:hover[b-4e0eznbcvo] {
            border-color: var(--color-accent-1);
            background: var(--background-primary);
        }

.pricing-note[b-4e0eznbcvo] {
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.enterprise-cta[b-4e0eznbcvo] {
    text-align: center;
    margin-top: 48px;
}

    .enterprise-cta p[b-4e0eznbcvo] {
        font-size: 16px;
        color: var(--text-secondary);
        margin-bottom: 24px;
    }

/* Flexible Pricing Styles */
.pricing-simple[b-4e0eznbcvo] {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.pricing-message[b-4e0eznbcvo] {
    margin-bottom: 56px;
}

.price-headline[b-4e0eznbcvo] {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 16px;
    line-height: 1.3;
}

.price-line1[b-4e0eznbcvo] {
    display: block;
    font-size: 24px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.price-highlight[b-4e0eznbcvo] {
    font-size: 72px;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    margin: 16px 0;
}

.price-subtext[b-4e0eznbcvo] {
    font-size: 18px;
    color: var(--text-secondary);
    margin: 0;
}

.pricing-options-simple[b-4e0eznbcvo] {
    display: flex;
    gap: 24px;
    margin: 0 auto 48px;
    justify-content: center;
}

.option-simple[b-4e0eznbcvo] {
    flex: 1;
    max-width: 320px;
    padding: 24px;
    background: var(--background-primary);
    border-radius: 16px;
    border: 2px solid var(--border-color);
    text-align: center;
    font-size: 15px;
    color: var(--text-secondary);
    transition: all 0.2s;
}

    .option-simple:hover[b-4e0eznbcvo] {
        border-color: var(--color-accent-1);
        transform: translateY(-4px);
        box-shadow: 0 8px 24px var(--shadow-color-light);
    }

    .option-simple.featured[b-4e0eznbcvo] {
        border-color: var(--color-accent-1);
        background: var(--card-bg-subtle);
        transform: scale(1.05);
    }

        .option-simple.featured:hover[b-4e0eznbcvo] {
            transform: scale(1.05) translateY(-4px);
        }

    .option-simple strong[b-4e0eznbcvo] {
        display: block;
        color: var(--text-heading);
        font-weight: 700;
        font-size: 18px;
        margin-bottom: 12px;
    }

.pricing-bottom-message[b-4e0eznbcvo] {
    text-align: center;
}

    .pricing-bottom-message p[b-4e0eznbcvo] {
        font-size: 20px;
        line-height: 1.6;
        color: var(--text-secondary);
        margin-bottom: 32px;
    }

    .pricing-bottom-message strong[b-4e0eznbcvo] {
        color: var(--text-heading);
    }

.pricing-actions[b-4e0eznbcvo] {
    display: flex;
    gap: 16px;
    justify-content: center;
}

/* Email Signup Section */
.email-signup-section[b-4e0eznbcvo] {
    padding: 120px 0;
    background: var(--section-bg-1);
    text-align: center;
}

.email-signup-container[b-4e0eznbcvo] {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 32px;
}

.signup-header[b-4e0eznbcvo] {
    margin-bottom: 40px;
}

.signup-title[b-4e0eznbcvo] {
    font-size: 36px;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 16px;
}

.signup-subtitle[b-4e0eznbcvo] {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.email-form[b-4e0eznbcvo] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.email-input[b-4e0eznbcvo] {
    flex: 1;
    padding: 16px 20px;
    border: 2px solid var(--border-color);
    border-radius: 50px;
    font-size: 16px;
    outline: none;
    transition: all 0.3s;
    background: var(--background-primary);
    color: var(--text-primary);
}

    .email-input:focus[b-4e0eznbcvo] {
        border-color: var(--color-accent-1);
        box-shadow: 0 0 0 3px var(--shadow-color-light);
    }

.email-submit[b-4e0eznbcvo] {
    padding: 16px 32px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

    .email-submit:hover[b-4e0eznbcvo] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px var(--shadow-color);
    }

    .email-submit.loading[b-4e0eznbcvo] {
        pointer-events: none;
        opacity: 0.8;
    }

.email-privacy[b-4e0eznbcvo] {
    font-size: 13px;
    color: var(--text-tertiary);
}

.success-message[b-4e0eznbcvo], .error-message[b-4e0eznbcvo] {
    display: none;
    padding: 24px;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    font-size: 16px;
    max-width: 500px;
    margin: 24px auto 0;
}

.success-message[b-4e0eznbcvo] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    box-shadow: 0 8px 32px rgba(40, 167, 69, 0.3);
}

.error-message[b-4e0eznbcvo] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    box-shadow: 0 8px 32px rgba(220, 53, 69, 0.3);
}

    .success-message.show[b-4e0eznbcvo], .error-message.show[b-4e0eznbcvo] {
        display: block;
        animation: slideUpBounce-b-4e0eznbcvo 0.6s ease;
    }

/* Testimonials */
.testimonials[b-4e0eznbcvo] {
    padding: 120px 0;
    background: var(--background-primary);
    border-top: 2px solid var(--border-strong);
}

.testimonials-grid[b-4e0eznbcvo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
    margin-top: 56px;
}

.testimonial-card[b-4e0eznbcvo] {
    background: var(--background-secondary);
    padding: 32px;
    border-radius: 16px;
    position: relative;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

    .testimonial-card:hover[b-4e0eznbcvo] {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    }

.testimonial-quote[b-4e0eznbcvo] {
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 24px;
    font-style: italic;
    flex: 1;
}

.testimonial-author[b-4e0eznbcvo] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.author-avatar[b-4e0eznbcvo] {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    flex-shrink: 0;
    font-size: 14px;
}

.author-info[b-4e0eznbcvo] {
    flex: 1;
}

.author-name[b-4e0eznbcvo] {
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 2px;
    font-size: 14px;
}

.author-role[b-4e0eznbcvo] {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* CTA Section - Enhanced contrast with always-white text */
.cta-section[b-4e0eznbcvo] {
    padding: 80px 0;
    background: var(--gradient-primary);
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

    .cta-section[b-4e0eznbcvo]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.25) 100%);
        z-index: 0;
    }

    .cta-section > *[b-4e0eznbcvo] {
        position: relative;
        z-index: 1;
    }

.cta-title[b-4e0eznbcvo] {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.1;
    color: white !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
    letter-spacing: -0.02em;
}

.cta-subtitle[b-4e0eznbcvo] {
    font-size: 18px;
    margin-bottom: 32px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons[b-4e0eznbcvo] {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.cta-section .btn[b-4e0eznbcvo] {
    padding: 16px 36px;
    font-size: 15px;
    font-weight: 600;
}
/* Replace the existing dark mode CTA button fix with this stronger version */

/* Base btn-white should always have dark text */
.btn-white[b-4e0eznbcvo] {
    background: white !important;
    color: #1a1f2e !important; /* Ensure dark text */
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    border: 2px solid rgba(255, 255, 255, 0.9);
}

    .btn-white:hover[b-4e0eznbcvo] {
        background: rgba(255, 255, 255, 0.95) !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(0,0,0,0.35);
        color: #1a1f2e !important; /* Keep dark text on hover */
    }

/* Extra specificity for dark theme to ensure it works */
body.dark-theme .btn-white[b-4e0eznbcvo],
body.dark-theme .cta-section .btn-white[b-4e0eznbcvo],
body.dark-theme .cta-buttons .btn-white[b-4e0eznbcvo] {
    background: white !important;
    color: #1a1f2e !important; /* Force dark text */
    border-color: white !important;
}

    body.dark-theme .btn-white:hover[b-4e0eznbcvo],
    body.dark-theme .cta-section .btn-white:hover[b-4e0eznbcvo],
    body.dark-theme .cta-buttons .btn-white:hover[b-4e0eznbcvo] {
        background: rgba(255, 255, 255, 0.95) !important;
        color: #1a1f2e !important; /* Keep dark text on hover */
    }

/* Nuclear option - if still not working, add this */
body.dark-theme * .btn-white[b-4e0eznbcvo] {
    color: #1a1f2e !important;
}
/*.btn-white {
    background: white;
    color: #1a1f2e !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    border: 2px solid rgba(255, 255, 255, 0.9);
}

    .btn-white:hover {
        background: rgba(255, 255, 255, 0.95);
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(0,0,0,0.35);
        color: #1a1f2e !important;
    }*/

/* FIXED: Dark mode CTA button visibility */
/*body.dark-theme .cta-section .btn-white {
    background: white !important;
    color: #1a1f2e !important;
    border-color: white !important;
}

    body.dark-theme .cta-section .btn-white:hover {
        background: rgba(255, 255, 255, 0.95) !important;
        color: #1a1f2e !important;
    }*/

.cta-note[b-4e0eznbcvo] {
    font-size: 14px;
    margin-top: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Footer */
footer[b-4e0eznbcvo] {
    padding: 6rem 0 3rem;
    background: #1a1a1a;
    color: white;
    position: relative;
}

    footer[b-4e0eznbcvo]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--color-accent-1) 0%, var(--color-accent-2) 25%, var(--color-accent-3) 50%, var(--primary-red) 75%, var(--color-accent-1) 100%);
    }

.footer-logo-section[b-4e0eznbcvo] {
    text-align: center;
    padding-bottom: 4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 4rem;
}

    /* FIXED: Footer logo centering */
    .footer-logo-section img[b-4e0eznbcvo] {
        display: inline-block !important;
        height: 50px;
        width: auto;
        margin: 0 auto;
    }

.logo-footer[b-4e0eznbcvo] {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #fff 0%, #9ca3af 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.logo-footer-subtitle[b-4e0eznbcvo] {
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.45em;
    color: #9ca3af;
    text-transform: uppercase;
    opacity: 0.8;
    margin-top: 25px;
    background: linear-gradient(135deg, #d1d5db 0%, #6b7280 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-content[b-4e0eznbcvo] {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
    align-items: start;
}

.footer-primary[b-4e0eznbcvo] {
    padding-right: 3rem;
}

    .footer-primary p[b-4e0eznbcvo] {
        font-size: 18px;
        line-height: 1.8;
        color: #d1d5db;
        margin: 0 0 1.5rem 0;
        font-weight: 300;
        letter-spacing: 0.01em;
    }

        .footer-primary p:first-child[b-4e0eznbcvo] {
            font-size: 20px;
            color: #e5e7eb;
            font-weight: 400;
        }

.footer-social[b-4e0eznbcvo] {
    display: flex;
    gap: 0.8rem;
    margin-top: 2rem;
}

.social-link[b-4e0eznbcvo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #9ca3af;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

    .social-link:hover[b-4e0eznbcvo] {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.2);
        color: white;
        transform: translateY(-2px);
    }

.footer-section[b-4e0eznbcvo] {
    padding-top: 0;
}

    .footer-section h4[b-4e0eznbcvo] {
        font-size: 11px;
        font-weight: 700;
        margin-bottom: 1.2rem;
        margin-top: 0;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1.8;
        height: 32px;
        display: flex;
        align-items: center;
    }

    .footer-section p[b-4e0eznbcvo] {
        color: #9ca3af;
        line-height: 1.7;
        font-size: 14px;
        margin: 0;
        font-weight: 300;
    }

.footer-bottom[b-4e0eznbcvo] {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

    .footer-bottom p[b-4e0eznbcvo] {
        color: #6b7280;
        font-size: 0.875rem;
        margin: 0;
    }

.footer-links[b-4e0eznbcvo] {
    display: flex;
    gap: 2rem;
}

    .footer-links a[b-4e0eznbcvo] {
        color: #6b7280;
        text-decoration: none;
        font-size: 0.875rem;
        transition: color 0.3s ease;
    }

        .footer-links a:hover[b-4e0eznbcvo] {
            color: #9ca3af;
        }

/* Animations */
@keyframes fadeIn-b-4e0eznbcvo {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInUp-b-4e0eznbcvo {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradientShift-b-4e0eznbcvo {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(-20px, -20px) rotate(120deg);
    }

    66% {
        transform: translate(20px, -20px) rotate(240deg);
    }
}

@keyframes gradientAnimation-b-4e0eznbcvo {
    0%, 100% {
        filter: hue-rotate(0deg);
    }

    50% {
        filter: hue-rotate(30deg);
    }
}

@keyframes slideUpBounce-b-4e0eznbcvo {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }

    60% {
        transform: translateY(-5px);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Safari-specific fixes for spacing */
@supports (-webkit-touch-callout: none) {
    .ainna-landing .hero[b-4e0eznbcvo] {
        padding-top: 180px !important;
    }

    .navbar[b-4e0eznbcvo] {
        -webkit-backface-visibility: hidden;
        -webkit-transform: translate3d(0, 0, 0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .control-panel[b-4e0eznbcvo] {
        display: none !important;
    }

    .nav-menu[b-4e0eznbcvo] {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--background-primary);
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 4px 20px var(--shadow-color-light);
        border-radius: 0 0 12px 12px;
        border: 1px solid var(--border-color);
    }

        .nav-menu.show[b-4e0eznbcvo] {
            display: flex;
        }

    .mobile-menu-btn[b-4e0eznbcvo] {
        display: block;
    }

    .hero-title[b-4e0eznbcvo] {
        font-size: clamp(48px, 12vw, 80px);
    }

    .hero-subtitle[b-4e0eznbcvo] {
        font-size: 18px;
    }

    .hero-actions[b-4e0eznbcvo] {
        flex-direction: column;
        align-items: center;
    }

    .btn-hero[b-4e0eznbcvo] {
        width: 100%;
        max-width: 300px;
    }

    .hero-stats[b-4e0eznbcvo] {
        flex-direction: column;
        gap: 32px;
    }

    .evolution-timeline[b-4e0eznbcvo] {
        flex-direction: column;
        gap: 48px;
        align-items: center;
    }

        .evolution-timeline[b-4e0eznbcvo]::before {
            top: 0;
            bottom: 0;
            left: 50%;
            right: auto;
            width: 2px;
            height: calc(100% - 120px);
            background: linear-gradient(180deg, var(--primary-red) 0%, #f59e0b 50%, var(--color-accent-2) 100%);
        }

    .evolution-stage[b-4e0eznbcvo] {
        width: 100%;
        max-width: 300px;
    }

    .framework-preview[b-4e0eznbcvo] {
        flex-direction: column;
        align-items: center;
    }

    .process-timeline[b-4e0eznbcvo] {
        grid-template-columns: 1fr;
    }

        .process-timeline[b-4e0eznbcvo]::before {
            display: none;
        }

    .output-showcase[b-4e0eznbcvo],
    .testimonials-grid[b-4e0eznbcvo] {
        grid-template-columns: 1fr;
    }

    .pricing-cards[b-4e0eznbcvo] {
        grid-template-columns: 1fr;
    }

    .pricing-options-simple[b-4e0eznbcvo] {
        flex-direction: column;
    }

    .option-simple[b-4e0eznbcvo] {
        max-width: none;
    }

        .option-simple.featured[b-4e0eznbcvo] {
            transform: scale(1);
        }

            .option-simple.featured:hover[b-4e0eznbcvo] {
                transform: translateY(-4px);
            }

    .footer-content[b-4e0eznbcvo] {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .footer-primary[b-4e0eznbcvo] {
        padding-right: 0;
        text-align: center;
    }

    .footer-social[b-4e0eznbcvo] {
        justify-content: center;
    }

    .footer-section[b-4e0eznbcvo] {
        text-align: center;
    }

        .footer-section h4[b-4e0eznbcvo] {
            height: auto;
            justify-content: center;
            margin-bottom: 1rem;
        }

        .footer-section p[b-4e0eznbcvo] {
            max-width: 400px;
            margin: 0 auto;
        }

    .footer-bottom[b-4e0eznbcvo] {
        flex-direction: column;
        text-align: center;
    }

    .footer-links[b-4e0eznbcvo] {
        justify-content: center;
    }

    .cta-buttons[b-4e0eznbcvo] {
        flex-direction: column;
        align-items: center;
    }

    .pricing-card.featured[b-4e0eznbcvo] {
        transform: scale(1);
    }

    .email-form[b-4e0eznbcvo] {
        flex-direction: column;
    }

    .pricing-actions[b-4e0eznbcvo] {
        flex-direction: column;
    }

    .preview-banner[b-4e0eznbcvo] {
        font-size: 11px;
        font-weight: 500;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .footer-content[b-4e0eznbcvo] {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 3rem;
    }

    .footer-primary[b-4e0eznbcvo] {
        grid-column: 1 / -1;
        padding-right: 0;
        margin-bottom: 2rem;
    }

    .footer-section:last-child[b-4e0eznbcvo] {
        grid-column: 2 / 3;
    }
}

@media (min-width: 1025px) and (max-width: 1200px) {
    .footer-content[b-4e0eznbcvo] {
        grid-template-columns: 2fr 1fr 1fr;
        gap: 3rem;
    }
}

/* ===========================
   ADDITIONAL MISSING STYLES
   Added carefully to avoid breaking existing functionality
   =========================== */

/* Missing .container class */
.container[b-4e0eznbcvo] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Missing spinner animation */
.spinner[b-4e0eznbcvo] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-4e0eznbcvo 0.8s linear infinite;
}

@keyframes spin-b-4e0eznbcvo {
    to {
        transform: rotate(360deg);
    }
}

/* Generic button classes if not in app.css */
.btn[b-4e0eznbcvo] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 15px;
    border: none;
    background: var(--background-secondary);
    color: var(--text-primary);
}

.btn-primary[b-4e0eznbcvo] {
    background: var(--gradient-button, var(--gradient-primary));
    color: white;
    border: none;
    box-shadow: 0 4px 16px var(--shadow-color-light);
}

    .btn-primary:hover[b-4e0eznbcvo] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px var(--shadow-color);
    }

.btn-secondary[b-4e0eznbcvo] {
    background: var(--background-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

    .btn-secondary:hover[b-4e0eznbcvo] {
        border-color: var(--color-accent-1);
        background: var(--background-primary);
    }

.btn-ghost[b-4e0eznbcvo] {
    background: transparent;
    color: var(--text-secondary);
    border: 2px solid transparent;
}

    .btn-ghost:hover[b-4e0eznbcvo] {
        border-color: var(--border-color);
        background: var(--background-secondary);
    }

/* Fix control panel label targeting */
.control-section label[b-4e0eznbcvo] {
    display: block;
    margin-bottom: 12px;
}

    .control-section label span[b-4e0eznbcvo] {
        display: block;
        font-size: 13px;
        color: var(--text-secondary);
        margin-bottom: 8px;
        font-weight: 500;
    }

/* Focus-visible styles for accessibility */
.btn:focus-visible[b-4e0eznbcvo],
.email-input:focus-visible[b-4e0eznbcvo],
button:focus-visible[b-4e0eznbcvo],
a:focus-visible[b-4e0eznbcvo] {
    outline: 2px solid var(--color-accent-1);
    outline-offset: 2px;
}

/* Performance optimization for animations */
.stage-circle[b-4e0eznbcvo],
.output-showcase-card[b-4e0eznbcvo],
.testimonial-card[b-4e0eznbcvo],
.pricing-card[b-4e0eznbcvo] {
    will-change: transform;
}

/* Ensure control panel stays above everything */
.control-panel[b-4e0eznbcvo] {
    z-index: 10001;
}

/* Smooth scrolling behavior */
html[b-4e0eznbcvo] {
    scroll-behavior: smooth;
}

/* Ensure images are responsive but respect height attributes */
img[b-4e0eznbcvo] {
    max-width: 100%;
    display: block;
}

/* ===========================
   AINNA LANDING PAGE COMPONENT STYLES
   Themes are defined in app.css
   =========================== */

/* Control Panel */
/*.control-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--background-primary);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    z-index: 10001;
    min-width: 280px;
    border: 1px solid var(--border-color);
}

    .control-panel h4 {
        margin: 0 0 16px 0;
        font-size: 14px;
        font-weight: 700;
        color: var(--text-heading);
    }

.control-section {
    margin-bottom: 16px;
}

.control-group {
    margin-bottom: 12px;
}

.control-label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.theme-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.mode-buttons {
    display: flex;
    gap: 8px;
}

.control-panel button {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background: var(--background-primary);
    color: var(--text-secondary);
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

    .control-panel button.active {
        background: var(--color-accent-1);
        color: white;
        border-color: var(--color-accent-1);
    }

.control-footer {
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-size: 11px;
    color: var(--text-tertiary);
}

    .control-footer code {
        display: block;
        margin-top: 4px;
        padding: 4px 8px;
        background: var(--background-secondary);
        border-radius: 4px;
        color: var(--text-secondary);
    }

.close-btn {
    position: absolute !important;
    top: 8px;
    right: 8px;
    background: none !important;
    border: none !important;
    color: var(--text-tertiary) !important;
    cursor: pointer;
    font-size: 18px;
    padding: 0 !important;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}*/

/* Preview Banner */
/*.preview-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--gradient-primary);
    color: white;
    padding: 8px;
    text-align: center;
    z-index: 10000;
    font-size: 14px;
    font-weight: 600;
}*/

/* Navigation - Enhanced Responsiveness */
/*.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: var(--background-primary);
    background: rgba(var(--bg-rgb, 255, 255, 255), 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    padding: 16px 0;
    transition: all 0.3s ease;
    opacity: 0;
    animation: fadeIn 0.8s ease 2s forwards;
}

    .navbar.scrolled {
        padding: 12px 0;
        box-shadow: 0 2px 20px var(--shadow-color-light);
    }

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 40px;
}

.logo {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    text-decoration: none;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    transition: transform 0.2s;
}

.logo-text {
    font-size: 32px;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-tagline {
    font-size: 10px !important;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 4px 10px;
    background: var(--card-bg-subtle);
    border-radius: 20px;
    border: 1px solid var(--color-accent-1);
    opacity: 0.3;
    white-space: nowrap;
    line-height: 1.2;
    display: inline-block;
    margin-bottom: 8px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 36px;
    margin: 0;
    padding: 0;
}

    .nav-menu a {
        color: var(--text-secondary);
        text-decoration: none;
        font-weight: 500;
        font-size: 15px;
        position: relative;
        transition: color 0.2s;
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .nav-menu a .nav-icon {
            display: none;
            font-size: 18px;
        }

        .nav-menu a .nav-text {
            display: inline;
        }

        .nav-menu a::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--color-accent-1);
            transition: width 0.3s;
        }

        .nav-menu a:hover {
            color: var(--text-primary);
        }

            .nav-menu a:hover::after {
                width: 100%;
            }*/

/* Responsive Navigation - Progressive Enhancement */
/*@media (max-width: 1200px) {
    .logo-tagline {
        display: none;
    }
}

@media (max-width: 1024px) {
    .nav-menu {
        gap: 24px;
    }

        .nav-menu a .nav-icon {
            display: inline;
        }

        .nav-menu a .nav-text {
            display: none;
        }

    .nav-container {
        padding: 0 24px;
    }
}

@media (max-width: 768px) {
    .nav-menu {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--background-primary);
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 4px 20px var(--shadow-color-light);
        border-radius: 0 0 12px 12px;
        border: 1px solid var(--border-color);
    }

        .nav-menu.show {
            display: flex;
        }

        .nav-menu a .nav-text {
            display: inline;
        }

    .mobile-menu-btn {
        display: block;
    }
}

.nav-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-left: 40px;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-primary);
    cursor: pointer;
}*/

/* Hero Section */
/*.ainna-landing .hero {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    background: linear-gradient(180deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
    padding: 120px 0 80px !important;
    overflow: hidden !important;
}

    .ainna-landing .hero::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle at 20% 80%, var(--shadow-color-light) 0%, transparent 50%), radial-gradient(circle at 80% 20%, var(--shadow-color-light) 0%, transparent 50%), radial-gradient(circle at 40% 40%, var(--shadow-color-light) 0%, transparent 50%);
        animation: gradientShift 20s ease infinite;
        z-index: 0;
    }

.ainna-landing .hero-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
    position: relative !important;
    z-index: 1 !important;
}

.ainna-landing .hero-content {
    max-width: 1200px !important;
    text-align: center !important;
    margin: 0 auto !important;
}

.ainna-landing .hero-title {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(64px, 10vw, 140px) !important;
    font-weight: 900 !important;
    line-height: 0.95 !important;
    letter-spacing: -0.05em !important;
    margin-bottom: 36px !important;
    color: var(--text-heading) !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

    .ainna-landing .hero-title:focus,
    .ainna-landing .hero-title:focus-visible,
    .ainna-landing .hero-title:focus-within {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }

.ainna-landing #typedMessage {
    display: block !important;
    font-size: 0.4em !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 60px !important;
    color: var(--text-secondary) !important;
    min-height: 1.2em !important;
    outline: none !important;
    border: none !important;
}

.ainna-landing .hero-title-line2,
.ainna-landing .hero-title-line3 {
    display: block !important;
    opacity: 0;
    transform: translateY(20px);
    color: var(--text-heading) !important;
    padding: 0 20px !important;
    line-height: 1 !important;
    outline: none !important;
    border: none !important;
}*/

/* Kill any possible blue border on all hero title elements */
/*.ainna-landing .hero-title *,
.ainna-landing .hero-title span {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.ainna-landing .hero-title-line2 {
    margin-bottom: 16px !important;
    font-size: 0.95em !important;
}

.ainna-landing .hero-title-line3 {
    background: var(--gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: gradientAnimation 8s ease infinite;
    display: inline-block !important;
    font-size: 1.05em !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
}

.ainna-landing .hero-subtitle {
    font-size: clamp(20px, 2.5vw, 28px) !important;
    font-weight: 400 !important;
    color: var(--text-secondary) !important;
    line-height: 1.4 !important;
    max-width: 900px !important;
    margin: 0 auto 56px !important;
    letter-spacing: -0.02em !important;
    opacity: 0;
    transform: translateY(20px);
}

.ainna-landing .hero-actions {
    display: flex !important;
    gap: 20px !important;
    justify-content: center !important;
    margin-bottom: 80px !important;
    opacity: 0;
    transform: translateY(20px);
}

.ainna-landing .btn-hero {
    padding: 18px 40px !important;
    font-size: 16px !important;
    border-radius: 60px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.ainna-landing .btn-hero-primary {
    background: var(--gradient-button) !important;
    color: white !important;
    box-shadow: 0 8px 32px var(--shadow-color) !important;
}

    .ainna-landing .btn-hero-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 40px var(--shadow-color) !important;
    }

.ainna-landing .btn-hero-secondary {
    background: var(--background-primary) !important;
    color: var(--text-heading) !important;
    border: 2px solid var(--border-color) !important;
    box-shadow: 0 4px 16px var(--shadow-color-light) !important;
}

    .ainna-landing .btn-hero-secondary:hover {
        transform: translateY(-3px);
        border-color: var(--color-accent-1) !important;
        background: var(--background-secondary) !important;
        box-shadow: 0 8px 24px var(--shadow-color-light) !important;
    }

.ainna-landing .hero-stats {
    display: flex !important;
    justify-content: center !important;
    gap: 80px !important;
    opacity: 0;
    transform: translateY(20px);
}

.ainna-landing .stat-item {
    text-align: center !important;
}

.ainna-landing .stat-value {
    font-size: 48px !important;
    font-weight: 800 !important;
    background: var(--gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: block !important;
    margin-bottom: 8px !important;
}

.ainna-landing .stat-label {
    font-size: 14px !important;
    color: var(--text-tertiary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
}*/

/* Fade-in animations */
/*.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

    .fade-in.visible {
        opacity: 1;
        transform: translateY(0);
    }*/

/* Comparison Section */
/*.comparison {
    padding: 100px 0;
    background: var(--background-primary);
    border-top: 2px solid var(--border-strong);
    position: relative;
}

.comparison-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 32px;
}

.section-header {
    text-align: center;
    margin-bottom: 64px;
}

.section-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(32px, 3.5vw, 42px);
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 20px;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.section-desc {
    font-size: clamp(15px, 1.3vw, 17px);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    font-weight: 400;
}

.evolution-timeline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 72px 0 64px;
    position: relative;
}

    .evolution-timeline::before {
        content: '';
        position: absolute;
        top: 60px;
        left: 15%;
        right: 15%;
        height: 2px;
        background: linear-gradient(90deg, var(--primary-red) 0%, #f59e0b 50%, var(--color-accent-2) 100%);
        opacity: 0.2;
        z-index: 0;
    }

.evolution-stage {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
}

.stage-circle {
    width: 120px;
    height: 120px;
    margin: 0 auto 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .stage-circle:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

.stage-manual .stage-circle {
    background: linear-gradient(135deg, #ea4335 0%, #d33b2c 100%);
}

.stage-ai .stage-circle {
    background: linear-gradient(135deg, #fbbc04 0%, #f59e0b 100%);
}

.stage-ainna .stage-circle {
    background: var(--gradient-primary);
}

.stage-icon {
    font-size: 48px;
    color: white;
}

.stage-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.stage-time {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.stage-manual .stage-time {
    color: var(--primary-red);
}

.stage-ai .stage-time {
    color: #f59e0b;
}

.stage-ainna .stage-time {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.evolution-message {
    max-width: 800px;
    margin: 64px auto 0;
    text-align: center;
    padding: 40px 48px;
    background: var(--card-bg-subtle);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.message-main {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-heading);
    margin-bottom: 12px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
}

.message-sub {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-secondary);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease 0.3s forwards;
}

.highlight-time {
    color: var(--color-accent-1);
    font-weight: 800;
}

.highlight-cost {
    color: var(--color-accent-2);
    font-weight: 800;
}

.comparison-narrative {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 0 24px;
}

    .comparison-narrative p {
        font-size: 17px;
        line-height: 1.7;
        color: var(--text-secondary);
        margin: 0;
    }

    .comparison-narrative strong {
        color: var(--text-heading);
        font-weight: 600;
    }*/

/* Process Section */
/*.process {
    padding: 120px 0;
    background: var(--section-bg-1);
    border-top: 2px solid var(--border-strong);
}

.process-timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 56px;
    position: relative;
    z-index: 1;
}

    .process-timeline::before {
        content: '';
        position: absolute;
        top: 50px;
        left: 120px;
        right: 120px;
        height: 1px;
        background: var(--gradient-primary);
        z-index: 0;
    }

.process-step {
    text-align: center;
    position: relative;
    z-index: 1;
}

.step-icon {
    width: 100px;
    height: 100px;
    background: var(--background-primary);
    border: 2px solid var(--color-accent-1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--color-accent-1);
    margin: 0 auto 20px;
    box-shadow: 0 4px 16px var(--shadow-color-light);
    transition: all 0.3s;
}

.process-step:hover .step-icon {
    background: var(--gradient-primary);
    color: white;
    transform: scale(1.08);
}

.step-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-heading);
}

.step-desc {
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
    font-size: 14px;
}

.step-time {
    display: inline-block;
    padding: 4px 12px;
    background: var(--card-bg-subtle);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent-1);
}*/

/* Methodology Output Section */
/*.methodology-output {
    padding: 120px 0;
    background: var(--background-primary);
    border-top: 2px solid var(--border-strong);
}

.methodology-intro {
    max-width: 800px;
    margin: 0 auto 64px;
    text-align: center;
}

.framework-preview {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.framework-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-primary);
}

    .framework-item i {
        color: var(--color-accent-2);
        font-size: 16px;
    }

.output-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
    margin-top: 48px;
}

.output-showcase-card {
    background: var(--background-secondary);
    padding: 36px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

    .output-showcase-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: var(--gradient-primary);
    }

    .output-showcase-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    }

.output-showcase-icon {
    font-size: 40px;
    color: var(--color-accent-1);
    margin-bottom: 20px;
}

.output-showcase-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-heading);
}

.output-showcase-specs {
    font-size: 14px;
    color: var(--color-accent-2);
    font-weight: 600;
    margin-bottom: 16px;
}

.output-showcase-desc {
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 14px;
    margin-bottom: 20px;
}

.output-showcase-features {
    list-style: none;
    text-align: left;
    font-size: 13px;
    color: var(--text-primary);
    margin: 0;
    padding: 0;
}

    .output-showcase-features li {
        padding: 6px 0;
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .output-showcase-features i {
        color: var(--color-accent-2);
        font-size: 12px;
        margin-top: 2px;
    }*/

/* Pricing Section */
/*.pricing {
    padding: 120px 0;
    background: var(--section-bg-2);
    border-top: 2px solid var(--border-strong);
}

.pricing-wrapper {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 56px;
}

.pricing-card {
    background: var(--background-primary);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 4px 16px var(--shadow-color-light);
    position: relative;
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}

    .pricing-card.featured {
        border-color: var(--color-accent-1);
        transform: scale(1.04);
        box-shadow: 0 8px 32px var(--shadow-color-light);
    }

        .pricing-card.featured::before {
            content: 'MOST POPULAR';
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--color-accent-1);
            color: white;
            padding: 3px 14px;
            border-radius: 16px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

    .pricing-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    }

    .pricing-card.featured:hover {
        transform: scale(1.04) translateY(-6px);
    }

.pricing-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-heading);
}

.pricing-price {
    font-size: 42px;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 4px;
}

    .pricing-price span {
        font-size: 16px;
        color: var(--text-secondary);
        font-weight: 400;
    }

.pricing-desc {
    color: var(--text-secondary);
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

.pricing-features {
    list-style: none;
    margin: 0 0 32px 0;
    padding: 0;
    text-align: left;
}

    .pricing-features li {
        padding: 10px 0;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
    }

    .pricing-features i {
        color: var(--color-accent-2);
        font-size: 14px;
    }

.pricing-btn {
    width: 100%;
    padding: 14px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

    .pricing-btn.primary {
        background: var(--gradient-primary);
        color: white;
        box-shadow: 0 3px 10px var(--shadow-color-light);
    }

        .pricing-btn.primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 16px var(--shadow-color);
        }

    .pricing-btn.secondary {
        background: var(--background-secondary);
        color: var(--text-primary);
        border: 2px solid var(--border-color);
    }

        .pricing-btn.secondary:hover {
            border-color: var(--color-accent-1);
            background: var(--background-primary);
        }

.pricing-note {
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.enterprise-cta {
    text-align: center;
    margin-top: 48px;
}

    .enterprise-cta p {
        font-size: 16px;
        color: var(--text-secondary);
        margin-bottom: 24px;
    }*/

/* Flexible Pricing Styles */
/*.pricing-simple {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.pricing-message {
    margin-bottom: 56px;
}

.price-headline {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 16px;
    line-height: 1.3;
}

.price-line1 {
    display: block;
    font-size: 24px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.price-highlight {
    font-size: 72px;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    margin: 16px 0;
}

.price-subtext {
    font-size: 18px;
    color: var(--text-secondary);
    margin: 0;
}

.pricing-options-simple {
    display: flex;
    gap: 24px;
    margin: 0 auto 48px;
    justify-content: center;
}

.option-simple {
    flex: 1;
    max-width: 320px;
    padding: 24px;
    background: var(--background-primary);
    border-radius: 16px;
    border: 2px solid var(--border-color);
    text-align: center;
    font-size: 15px;
    color: var(--text-secondary);
    transition: all 0.2s;
}

    .option-simple:hover {
        border-color: var(--color-accent-1);
        transform: translateY(-4px);
        box-shadow: 0 8px 24px var(--shadow-color-light);
    }

    .option-simple.featured {
        border-color: var(--color-accent-1);
        background: var(--card-bg-subtle);
        transform: scale(1.05);
    }

        .option-simple.featured:hover {
            transform: scale(1.05) translateY(-4px);
        }

    .option-simple strong {
        display: block;
        color: var(--text-heading);
        font-weight: 700;
        font-size: 18px;
        margin-bottom: 12px;
    }

.pricing-bottom-message {
    text-align: center;
}

    .pricing-bottom-message p {
        font-size: 20px;
        line-height: 1.6;
        color: var(--text-secondary);
        margin-bottom: 32px;
    }

    .pricing-bottom-message strong {
        color: var(--text-heading);
    }

.pricing-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}*/

/* Email Signup Section */
/*.email-signup-section {
    padding: 120px 0;
    background: var(--section-bg-1);
    text-align: center;
}

.email-signup-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 32px;
}

.signup-header {
    margin-bottom: 40px;
}

.signup-title {
    font-size: 36px;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 16px;
}

.signup-subtitle {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.email-form {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.email-input {
    flex: 1;
    padding: 16px 20px;
    border: 2px solid var(--border-color);
    border-radius: 50px;
    font-size: 16px;
    outline: none;
    transition: all 0.3s;
    background: var(--background-primary);
    color: var(--text-primary);
}

    .email-input:focus {
        border-color: var(--color-accent-1);
        box-shadow: 0 0 0 3px var(--shadow-color-light);
    }

.email-submit {
    padding: 16px 32px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

    .email-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px var(--shadow-color);
    }

    .email-submit.loading {
        pointer-events: none;
        opacity: 0.8;
    }

.email-privacy {
    font-size: 13px;
    color: var(--text-tertiary);
}

.success-message, .error-message {
    display: none;
    padding: 24px;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    font-size: 16px;
    max-width: 500px;
    margin: 24px auto 0;
}

.success-message {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    box-shadow: 0 8px 32px rgba(40, 167, 69, 0.3);
}

.error-message {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    box-shadow: 0 8px 32px rgba(220, 53, 69, 0.3);
}

    .success-message.show, .error-message.show {
        display: block;
        animation: slideUpBounce 0.6s ease;
    }*/

/* Testimonials */
/*.testimonials {
    padding: 120px 0;
    background: var(--background-primary);
    border-top: 2px solid var(--border-strong);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
    margin-top: 56px;
}

.testimonial-card {
    background: var(--background-secondary);
    padding: 32px;
    border-radius: 16px;
    position: relative;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

    .testimonial-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    }

.testimonial-quote {
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 24px;
    font-style: italic;
    flex: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.author-avatar {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    flex-shrink: 0;
    font-size: 14px;
}

.author-info {
    flex: 1;
}

.author-name {
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 2px;
    font-size: 14px;
}

.author-role {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.3;
}*/

/* CTA Section - Enhanced contrast with always-white text */
/*.cta-section {
    padding: 80px 0;
    background: var(--gradient-primary);
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

    .cta-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.25) 100%);
        z-index: 0;
    }

    .cta-section > * {
        position: relative;
        z-index: 1;
    }

.cta-title {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.1;
    color: white !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
    letter-spacing: -0.02em;
}

.cta-subtitle {
    font-size: 18px;
    margin-bottom: 32px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.cta-section .btn {
    padding: 16px 36px;
    font-size: 15px;
    font-weight: 600;
}

.btn-white {
    background: white;
    color: #1a1f2e !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    border: 2px solid rgba(255, 255, 255, 0.9);
}

    .btn-white:hover {
        background: rgba(255, 255, 255, 0.95);
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(0,0,0,0.35);
        color: #1a1f2e !important;
    }

.cta-note {
    font-size: 14px;
    margin-top: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}*/

/* Footer */
/*footer {
    padding: 6rem 0 3rem;
    background: #1a1a1a;
    color: white;
    position: relative;
}

    footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--color-accent-1) 0%, var(--color-accent-2) 25%, var(--color-accent-3) 50%, var(--primary-red) 75%, var(--color-accent-1) 100%);
    }

.footer-logo-section {
    text-align: center;
    padding-bottom: 4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 4rem;
}
.footer-logo-section {
    text-align: center;
    padding-bottom: 4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 4rem;
}

    .footer-logo-section img {
        display: inline-block !important;*/ /* Force it with !important */
        /*height: 50px;
        width: auto;
        margin: 0 auto;*/ /* Belt and suspenders approach */
    /*}
.logo-footer {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #fff 0%, #9ca3af 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.logo-footer-subtitle {
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.45em;
    color: #9ca3af;
    text-transform: uppercase;
    opacity: 0.8;
    margin-top: 25px;
    background: linear-gradient(135deg, #d1d5db 0%, #6b7280 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-content {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
    align-items: start;
}

.footer-primary {
    padding-right: 3rem;
}

    .footer-primary p {
        font-size: 18px;
        line-height: 1.8;
        color: #d1d5db;
        margin: 0 0 1.5rem 0;
        font-weight: 300;
        letter-spacing: 0.01em;
    }

        .footer-primary p:first-child {
            font-size: 20px;
            color: #e5e7eb;
            font-weight: 400;
        }

.footer-social {
    display: flex;
    gap: 0.8rem;
    margin-top: 2rem;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #9ca3af;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

    .social-link:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.2);
        color: white;
        transform: translateY(-2px);
    }

.footer-section {
    padding-top: 0;
}

    .footer-section h4 {
        font-size: 11px;
        font-weight: 700;
        margin-bottom: 1.2rem;
        margin-top: 0;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1.8;
        height: 32px;
        display: flex;
        align-items: center;
    }

    .footer-section p {
        color: #9ca3af;
        line-height: 1.7;
        font-size: 14px;
        margin: 0;
        font-weight: 300;
    }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

    .footer-bottom p {
        color: #6b7280;
        font-size: 0.875rem;
        margin: 0;
    }

.footer-links {
    display: flex;
    gap: 2rem;
}

    .footer-links a {
        color: #6b7280;
        text-decoration: none;
        font-size: 0.875rem;
        transition: color 0.3s ease;
    }

        .footer-links a:hover {
            color: #9ca3af;
        }*/

/* Animations */
/*@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradientShift {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(-20px, -20px) rotate(120deg);
    }

    66% {
        transform: translate(20px, -20px) rotate(240deg);
    }
}

@keyframes gradientAnimation {
    0%, 100% {
        filter: hue-rotate(0deg);
    }

    50% {
        filter: hue-rotate(30deg);
    }
}

@keyframes slideUpBounce {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }

    60% {
        transform: translateY(-5px);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}*/

/* Responsive Design */
/*@media (max-width: 768px) {
    .control-panel {
        display: none !important;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--background-primary);
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 4px 20px var(--shadow-color-light);
        border-radius: 0 0 12px 12px;
        border: 1px solid var(--border-color);
    }

        .nav-menu.show {
            display: flex;
        }

    .mobile-menu-btn {
        display: block;
    }

    .hero-title {
        font-size: clamp(48px, 12vw, 80px);
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .btn-hero {
        width: 100%;
        max-width: 300px;
    }

    .hero-stats {
        flex-direction: column;
        gap: 32px;
    }

    .evolution-timeline {
        flex-direction: column;
        gap: 48px;
        align-items: center;
    }

        .evolution-timeline::before {
            top: 0;
            bottom: 0;
            left: 50%;
            right: auto;
            width: 2px;
            height: calc(100% - 120px);
            background: linear-gradient(180deg, var(--primary-red) 0%, #f59e0b 50%, var(--color-accent-2) 100%);
        }

    .evolution-stage {
        width: 100%;
        max-width: 300px;
    }

    .framework-preview {
        flex-direction: column;
        align-items: center;
    }

    .process-timeline {
        grid-template-columns: 1fr;
    }

        .process-timeline::before {
            display: none;
        }

    .output-showcase,
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .pricing-cards {
        grid-template-columns: 1fr;
    }

    .pricing-options-simple {
        flex-direction: column;
    }

    .option-simple {
        max-width: none;
    }

        .option-simple.featured {
            transform: scale(1);
        }

            .option-simple.featured:hover {
                transform: translateY(-4px);
            }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .footer-primary {
        padding-right: 0;
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-section {
        text-align: center;
    }

        .footer-section h4 {
            height: auto;
            justify-content: center;
            margin-bottom: 1rem;
        }

        .footer-section p {
            max-width: 400px;
            margin: 0 auto;
        }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-links {
        justify-content: center;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .pricing-card.featured {
        transform: scale(1);
    }

    .email-form {
        flex-direction: column;
    }

    .pricing-actions {
        flex-direction: column;
    }

    .preview-banner {
        font-size: 11px;
        font-weight: 500;
    }
    .btn.btn-primary 
    {
        font-size:11px;
        font-weight:500;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .footer-content {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 3rem;
    }

    .footer-primary {
        grid-column: 1 / -1;
        padding-right: 0;
        margin-bottom: 2rem;
    }

    .footer-section:last-child {
        grid-column: 2 / 3;
    }
}

@media (min-width: 1025px) and (max-width: 1200px) {
    .footer-content {
        grid-template-columns: 2fr 1fr 1fr;
        gap: 3rem;
    }
}*/

/* ===========================
   ADDITIONAL MISSING STYLES
   Added carefully to avoid breaking existing functionality
   =========================== */

/* Missing .container class */
/*.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
}*/

/* Missing spinner animation */
/*.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Generic button classes if not in app.css */
/*.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 15px;
    border: none;
    background: var(--background-secondary);
    color: var(--text-primary);
}

.btn-primary {
    background: var(--gradient-button, var(--gradient-primary));
    color: white;
    border: none;
    box-shadow: 0 4px 16px var(--shadow-color-light);
}

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px var(--shadow-color);
    }

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

    .btn-secondary:hover {
        border-color: var(--color-accent-1);
        background: var(--background-primary);
    }

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

    .btn-ghost:hover {
        border-color: var(--border-color);
        background: var(--background-secondary);
    }*/

/* Fix control panel label targeting */
/*.control-section label {
    display: block;
    margin-bottom: 12px;
}

    .control-section label span {
        display: block;
        font-size: 13px;
        color: var(--text-secondary);
        margin-bottom: 8px;
        font-weight: 500;
    }*/

/* Focus-visible styles for accessibility */
/*.btn:focus-visible,
.email-input:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-accent-1);
    outline-offset: 2px;
}*/

/* Performance optimization for animations */
/*.stage-circle,
.output-showcase-card,
.testimonial-card,
.pricing-card {
    will-change: transform;
}*/

/* Ensure control panel stays above everything */
/*.control-panel {
    z-index: 10001;
}*/

/* Smooth scrolling behavior */
/*html {
    scroll-behavior: smooth;
}*/

/* Ensure images are responsive */
/*img {
    max-width: 100%;*/
    /*height: auto;*/
    /*display: block;
}*/




/* ===========================
   AINNA LANDING PAGE COMPONENT STYLES
   Themes are defined in app.css
   =========================== */

 
/* Control Panel */
/*.control-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--background-primary);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    z-index: 10001;
    min-width: 280px;
    border: 1px solid var(--border-color);
}

    .control-panel h4 {
        margin: 0 0 16px 0;
        font-size: 14px;
        font-weight: 700;
        color: var(--text-heading);
    }

.control-section {
    margin-bottom: 16px;
}

.control-group {
    margin-bottom: 12px;
}

.control-label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.theme-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.mode-buttons {
    display: flex;
    gap: 8px;
}

.control-panel button {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background: var(--background-primary);
    color: var(--text-secondary);
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

    .control-panel button.active {
        background: var(--color-accent-1);
        color: white;
        border-color: var(--color-accent-1);
    }

.control-footer {
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-size: 11px;
    color: var(--text-tertiary);
}

    .control-footer code {
        display: block;
        margin-top: 4px;
        padding: 4px 8px;
        background: var(--background-secondary);
        border-radius: 4px;
        color: var(--text-secondary);
    }

.close-btn {
    position: absolute !important;
    top: 8px;
    right: 8px;
    background: none !important;
    border: none !important;
    color: var(--text-tertiary) !important;
    cursor: pointer;
    font-size: 18px;
    padding: 0 !important;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}*/

/* Preview Banner */
/*.preview-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--gradient-primary);
    color: white;
    padding: 8px;
    text-align: center;
    z-index: 10000;
    font-size: 14px;
    font-weight: 600;
}*/

/* Navigation - Enhanced Responsiveness */
/*.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: var(--background-primary);
    background: rgba(var(--bg-rgb, 255, 255, 255), 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    padding: 16px 0;
    transition: all 0.3s ease;
    opacity: 0;
    animation: fadeIn 0.8s ease 2s forwards;
}

    .navbar.scrolled {
        padding: 12px 0;
        box-shadow: 0 2px 20px var(--shadow-color-light);
    }

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 40px;
}

.logo {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    text-decoration: none;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    transition: transform 0.2s;
}

.logo-text {
    font-size: 32px;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-tagline {
    font-size: 10px !important;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 4px 10px;
    background: var(--card-bg-subtle);
    border-radius: 20px;
    border: 1px solid var(--color-accent-1);
    opacity: 0.3;
    white-space: nowrap;
    line-height: 1.2;
    display: inline-block;
    margin-bottom: 8px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 36px;
    margin: 0;
    padding: 0;
}

    .nav-menu a {
        color: var(--text-secondary);
        text-decoration: none;
        font-weight: 500;
        font-size: 15px;
        position: relative;
        transition: color 0.2s;
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .nav-menu a .nav-icon {
            display: none;
            font-size: 18px;
        }

        .nav-menu a .nav-text {
            display: inline;
        }

        .nav-menu a::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--color-accent-1);
            transition: width 0.3s;
        }

        .nav-menu a:hover {
            color: var(--text-primary);
        }

            .nav-menu a:hover::after {
                width: 100%;
            }*/

/* Responsive Navigation - Progressive Enhancement */
/*@media (max-width: 1200px) {
    .logo-tagline {
        display: none;
    }
}

@media (max-width: 1024px) {
    .nav-menu {
        gap: 24px;
    }

        .nav-menu a .nav-icon {
            display: inline;
        }

        .nav-menu a .nav-text {
            display: none;
        }

    .nav-container {
        padding: 0 24px;
    }
}

@media (max-width: 768px) {
    .nav-menu {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--background-primary);
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 4px 20px var(--shadow-color-light);
        border-radius: 0 0 12px 12px;
        border: 1px solid var(--border-color);
    }

        .nav-menu.show {
            display: flex;
        }

        .nav-menu a .nav-text {
            display: inline;
        }

    .mobile-menu-btn {
        display: block;
    }
}

.nav-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-left:40px;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-primary);
    cursor: pointer;
}*/

/* Hero Section */
/*.ainna-landing .hero {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    background: linear-gradient(180deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
    padding: 120px 0 80px !important;
    overflow: hidden !important;
}

    .ainna-landing .hero::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle at 20% 80%, var(--shadow-color-light) 0%, transparent 50%), radial-gradient(circle at 80% 20%, var(--shadow-color-light) 0%, transparent 50%), radial-gradient(circle at 40% 40%, var(--shadow-color-light) 0%, transparent 50%);
        animation: gradientShift 20s ease infinite;
        z-index: 0;
    }

.ainna-landing .hero-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
    position: relative !important;
    z-index: 1 !important;
}

.ainna-landing .hero-content {
    max-width: 1200px !important;
    text-align: center !important;
    margin: 0 auto !important;
}

.ainna-landing .hero-title {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(64px, 10vw, 140px) !important;
    font-weight: 900 !important;
    line-height: 0.95 !important;*/ /* Slightly more breathing room */
    /*letter-spacing: -0.05em !important;
    margin-bottom: 36px !important;
    color: var(--text-heading) !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

    .ainna-landing .hero-title:focus,
    .ainna-landing .hero-title:focus-visible,
    .ainna-landing .hero-title:focus-within {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }

.ainna-landing #typedMessage {
    display: block !important;
    font-size: 0.4em !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 60px !important;*/ /* More space after typed message */
    /*color: var(--text-secondary) !important;
    min-height: 1.2em !important;
    outline: none !important;
    border: none !important;
}

.ainna-landing .hero-title-line2,
.ainna-landing .hero-title-line3 {
    display: block !important;
    opacity: 0;
    transform: translateY(20px);
    color: var(--text-heading) !important;
    padding: 0 20px !important;
    line-height: 1 !important;*/ /* Tighter line height for these specific lines */
    /*outline: none !important;
    border: none !important;
}*/

/* Kill any possible blue border on all hero title elements */
/*.ainna-landing .hero-title *,
.ainna-landing .hero-title span {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.ainna-landing .hero-title-line2 {
    margin-bottom: 16px !important;*/ /* Increased from 8px to prevent overlap */
    /*font-size: 0.95em !important;*/ /* Slightly smaller for hierarchy */
/*}

.ainna-landing .hero-title-line3 {
    background: var(--gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: gradientAnimation 8s ease infinite;
    display: inline-block !important;
    font-size: 1.05em !important;*/ /* Slightly larger for emphasis */
    /*font-weight: 900 !important;
    letter-spacing: -0.03em !important;
}

.ainna-landing .hero-subtitle {
    font-size: clamp(20px, 2.5vw, 28px) !important;
    font-weight: 400 !important;
    color: var(--text-secondary) !important;
    line-height: 1.4 !important;
    max-width: 900px !important;
    margin: 0 auto 56px !important;
    letter-spacing: -0.02em !important;
    opacity: 0;
    transform: translateY(20px);
}

.ainna-landing .hero-actions {
    display: flex !important;
    gap: 20px !important;
    justify-content: center !important;
    margin-bottom: 80px !important;
    opacity: 0;
    transform: translateY(20px);
}

.ainna-landing .btn-hero {
    padding: 18px 40px !important;
    font-size: 16px !important;
    border-radius: 60px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.ainna-landing .btn-hero-primary {
    background: var(--gradient-button) !important;
    color: white !important;
    box-shadow: 0 8px 32px var(--shadow-color) !important;
}

    .ainna-landing .btn-hero-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 40px var(--shadow-color) !important;
    }

.ainna-landing .btn-hero-secondary {
    background: var(--background-primary) !important;
    color: var(--text-heading) !important;
    border: 2px solid var(--border-color) !important;
    box-shadow: 0 4px 16px var(--shadow-color-light) !important;
}

    .ainna-landing .btn-hero-secondary:hover {
        transform: translateY(-3px);
        border-color: var(--color-accent-1) !important;
        background: var(--background-secondary) !important;
        box-shadow: 0 8px 24px var(--shadow-color-light) !important;
    }

.ainna-landing .hero-stats {
    display: flex !important;
    justify-content: center !important;
    gap: 80px !important;
    opacity: 0;
    transform: translateY(20px);
}

.ainna-landing .stat-item {
    text-align: center !important;
}

.ainna-landing .stat-value {
    font-size: 48px !important;
    font-weight: 800 !important;
    background: var(--gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: block !important;
    margin-bottom: 8px !important;
}

.ainna-landing .stat-label {
    font-size: 14px !important;
    color: var(--text-tertiary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
}*/

/* Fade-in animations */
/*.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

    .fade-in.visible {
        opacity: 1;
        transform: translateY(0);
    }*/

/* Comparison Section */
/*.comparison {
    padding: 100px 0;
    background: var(--background-primary);
    border-top: 2px solid var(--border-strong);
    position: relative;
}

.comparison-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 32px;
}

.section-header {
    text-align: center;
    margin-bottom: 64px;
}

.section-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(32px, 3.5vw, 42px);
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 20px;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.section-desc {
    font-size: clamp(15px, 1.3vw, 17px);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    font-weight: 400;
}

.evolution-timeline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 72px 0 64px;
    position: relative;
}

    .evolution-timeline::before {
        content: '';
        position: absolute;
        top: 60px;
        left: 15%;
        right: 15%;
        height: 2px;
        background: linear-gradient(90deg, var(--primary-red) 0%, #f59e0b 50%, var(--color-accent-2) 100%);
        opacity: 0.2;
        z-index: 0;
    }

.evolution-stage {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
}

.stage-circle {
    width: 120px;
    height: 120px;
    margin: 0 auto 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .stage-circle:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

.stage-manual .stage-circle {
    background: linear-gradient(135deg, #ea4335 0%, #d33b2c 100%);
}

.stage-ai .stage-circle {
    background: linear-gradient(135deg, #fbbc04 0%, #f59e0b 100%);
}

.stage-ainna .stage-circle {
    background: var(--gradient-primary);
}

.stage-icon {
    font-size: 48px;
    color: white;
}

.stage-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.stage-time {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.stage-manual .stage-time {
    color: var(--primary-red);
}

.stage-ai .stage-time {
    color: #f59e0b;
}

.stage-ainna .stage-time {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.evolution-message {
    max-width: 800px;
    margin: 64px auto 0;
    text-align: center;
    padding: 40px 48px;
    background: var(--card-bg-subtle);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.message-main {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-heading);
    margin-bottom: 12px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
}

.message-sub {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-secondary);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease 0.3s forwards;
}

.highlight-time {
    color: var(--color-accent-1);
    font-weight: 800;
}

.highlight-cost {
    color: var(--color-accent-2);
    font-weight: 800;
}

.comparison-narrative {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 0 24px;
}

    .comparison-narrative p {
        font-size: 17px;
        line-height: 1.7;
        color: var(--text-secondary);
        margin: 0;
    }

    .comparison-narrative strong {
        color: var(--text-heading);
        font-weight: 600;
    }*/

/* Process Section */
/*.process {
    padding: 120px 0;
    background: var(--section-bg-1);
    border-top: 2px solid var(--border-strong);
}

.process-timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 56px;
    position: relative;
    z-index: 1;
}

    .process-timeline::before {
        content: '';
        position: absolute;
        top: 50px;
        left: 120px;
        right: 120px;
        height: 1px;
        background: var(--gradient-primary);
        z-index: 0;
    }

.process-step {
    text-align: center;
    position: relative;
    z-index: 1;
}

.step-icon {
    width: 100px;
    height: 100px;
    background: var(--background-primary);
    border: 2px solid var(--color-accent-1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--color-accent-1);
    margin: 0 auto 20px;
    box-shadow: 0 4px 16px var(--shadow-color-light);
    transition: all 0.3s;
}

.process-step:hover .step-icon {
    background: var(--gradient-primary);
    color: white;
    transform: scale(1.08);
}

.step-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-heading);
}

.step-desc {
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
    font-size: 14px;
}

.step-time {
    display: inline-block;
    padding: 4px 12px;
    background: var(--card-bg-subtle);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-accent-1);
}*/

/* Methodology Output Section */
/*.methodology-output {
    padding: 120px 0;
    background: var(--background-primary);
    border-top: 2px solid var(--border-strong);
}

.methodology-intro {
    max-width: 800px;
    margin: 0 auto 64px;
    text-align: center;
}

.framework-preview {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.framework-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-primary);
}

    .framework-item i {
        color: var(--color-accent-2);
        font-size: 16px;
    }

.output-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
    margin-top: 48px;
}

.output-showcase-card {
    background: var(--background-secondary);
    padding: 36px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

    .output-showcase-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: var(--gradient-primary);
    }

    .output-showcase-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    }

.output-showcase-icon {
    font-size: 40px;
    color: var(--color-accent-1);
    margin-bottom: 20px;
}

.output-showcase-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-heading);
}

.output-showcase-specs {
    font-size: 14px;
    color: var(--color-accent-2);
    font-weight: 600;
    margin-bottom: 16px;
}

.output-showcase-desc {
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 14px;
    margin-bottom: 20px;
}

.output-showcase-features {
    list-style: none;
    text-align: left;
    font-size: 13px;
    color: var(--text-primary);
    margin: 0;
    padding: 0;
}

    .output-showcase-features li {
        padding: 6px 0;
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .output-showcase-features i {
        color: var(--color-accent-2);
        font-size: 12px;
        margin-top: 2px;
    }*/

/* Pricing Section */
/*.pricing {
    padding: 120px 0;
    background: var(--section-bg-2);
    border-top: 2px solid var(--border-strong);
}

.pricing-wrapper {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 56px;
}

.pricing-card {
    background: var(--background-primary);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 4px 16px var(--shadow-color-light);
    position: relative;
    border: 1px solid var(--border-color);
    transition: all 0.3s;
}

    .pricing-card.featured {
        border-color: var(--color-accent-1);
        transform: scale(1.04);
        box-shadow: 0 8px 32px var(--shadow-color-light);
    }

        .pricing-card.featured::before {
            content: 'MOST POPULAR';
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--color-accent-1);
            color: white;
            padding: 3px 14px;
            border-radius: 16px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

    .pricing-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    }

    .pricing-card.featured:hover {
        transform: scale(1.04) translateY(-6px);
    }

.pricing-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-heading);
}

.pricing-price {
    font-size: 42px;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 4px;
}

    .pricing-price span {
        font-size: 16px;
        color: var(--text-secondary);
        font-weight: 400;
    }

.pricing-desc {
    color: var(--text-secondary);
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

.pricing-features {
    list-style: none;
    margin: 0 0 32px 0;
    padding: 0;
    text-align: left;
}

    .pricing-features li {
        padding: 10px 0;
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
    }

    .pricing-features i {
        color: var(--color-accent-2);
        font-size: 14px;
    }

.pricing-btn {
    width: 100%;
    padding: 14px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

    .pricing-btn.primary {
        background: var(--gradient-primary);
        color: white;
        box-shadow: 0 3px 10px var(--shadow-color-light);
    }

        .pricing-btn.primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 16px var(--shadow-color);
        }

    .pricing-btn.secondary {
        background: var(--background-secondary);
        color: var(--text-primary);
        border: 2px solid var(--border-color);
    }

        .pricing-btn.secondary:hover {
            border-color: var(--color-accent-1);
            background: var(--background-primary);
        }

.pricing-note {
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.enterprise-cta {
    text-align: center;
    margin-top: 48px;
}

    .enterprise-cta p {
        font-size: 16px;
        color: var(--text-secondary);
        margin-bottom: 24px;
    }*/

/* Flexible Pricing Styles */
/*.pricing-simple {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.pricing-message {
    margin-bottom: 56px;
}

.price-headline {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 16px;
    line-height: 1.3;
}

.price-line1 {
    display: block;
    font-size: 24px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.price-highlight {
    font-size: 72px;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    margin: 16px 0;
}

.price-subtext {
    font-size: 18px;
    color: var(--text-secondary);
    margin: 0;
}

.pricing-options-simple {
    display: flex;
    gap: 24px;
    margin: 0 auto 48px;
    justify-content: center;
}

.option-simple {
    flex: 1;
    max-width: 320px;
    padding: 24px;
    background: var(--background-primary);
    border-radius: 16px;
    border: 2px solid var(--border-color);
    text-align: center;
    font-size: 15px;
    color: var(--text-secondary);
    transition: all 0.2s;
}

    .option-simple:hover {
        border-color: var(--color-accent-1);
        transform: translateY(-4px);
        box-shadow: 0 8px 24px var(--shadow-color-light);
    }

    .option-simple.featured {
        border-color: var(--color-accent-1);
        background: var(--card-bg-subtle);
        transform: scale(1.05);
    }

        .option-simple.featured:hover {
            transform: scale(1.05) translateY(-4px);
        }

    .option-simple strong {
        display: block;
        color: var(--text-heading);
        font-weight: 700;
        font-size: 18px;
        margin-bottom: 12px;
    }

.pricing-bottom-message {
    text-align: center;
}

    .pricing-bottom-message p {
        font-size: 20px;
        line-height: 1.6;
        color: var(--text-secondary);
        margin-bottom: 32px;
    }

    .pricing-bottom-message strong {
        color: var(--text-heading);
    }

.pricing-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}*/

/* Email Signup Section */
/*.email-signup-section {
    padding: 120px 0;
    background: var(--section-bg-1);
    text-align: center;
}

.email-signup-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 32px;
}

.signup-header {
    margin-bottom: 40px;
}

.signup-title {
    font-size: 36px;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 16px;
}

.signup-subtitle {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.email-form {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.email-input {
    flex: 1;
    padding: 16px 20px;
    border: 2px solid var(--border-color);
    border-radius: 50px;
    font-size: 16px;
    outline: none;
    transition: all 0.3s;
    background: var(--background-primary);
    color: var(--text-primary);
}

    .email-input:focus {
        border-color: var(--color-accent-1);
        box-shadow: 0 0 0 3px var(--shadow-color-light);
    }

.email-submit {
    padding: 16px 32px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

    .email-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px var(--shadow-color);
    }

    .email-submit.loading {
        pointer-events: none;
        opacity: 0.8;
    }

.email-privacy {
    font-size: 13px;
    color: var(--text-tertiary);
}

.success-message, .error-message {
    display: none;
    padding: 24px;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    font-size: 16px;
    max-width: 500px;
    margin: 24px auto 0;
}

.success-message {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    box-shadow: 0 8px 32px rgba(40, 167, 69, 0.3);
}

.error-message {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    box-shadow: 0 8px 32px rgba(220, 53, 69, 0.3);
}

    .success-message.show, .error-message.show {
        display: block;
        animation: slideUpBounce 0.6s ease;
    }*/

/* Testimonials */
/*.testimonials {
    padding: 120px 0;
    background: var(--background-primary);
    border-top: 2px solid var(--border-strong);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
    margin-top: 56px;
}

.testimonial-card {
    background: var(--background-secondary);
    padding: 32px;
    border-radius: 16px;
    position: relative;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

    .testimonial-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    }

.testimonial-quote {
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 24px;
    font-style: italic;
    flex: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.author-avatar {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    flex-shrink: 0;
    font-size: 14px;
}

.author-info {
    flex: 1;
}

.author-name {
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 2px;
    font-size: 14px;
}

.author-role {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.3;
}*/

/* CTA Section - Enhanced contrast with always-white text */
/*.cta-section {
    padding: 80px 0;
    background: var(--gradient-primary);
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}*/

    /* Dark overlay for better text contrast */
    /*.cta-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.25) 100%);
        z-index: 0;
    }

    .cta-section > * {
        position: relative;
        z-index: 1;
    }

.cta-title {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.1;
    color: white !important;*/ /* Force white */
    /*text-shadow: 0 2px 12px rgba(0,0,0,0.4);
    letter-spacing: -0.02em;
}

.cta-subtitle {
    font-size: 18px;
    margin-bottom: 32px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95) !important;*/ /* Nearly white */
    /*text-shadow: 0 1px 6px rgba(0,0,0,0.4);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.cta-section .btn {
    padding: 16px 36px;
    font-size: 15px;
    font-weight: 600;
}

.btn-white {
    background: white;
    color: #1a1f2e !important;*/ /* Dark text for contrast */
    /*backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    border: 2px solid rgba(255, 255, 255, 0.9);
}

    .btn-white:hover {
        background: rgba(255, 255, 255, 0.95);
        transform: translateY(-2px);
        box-shadow: 0 8px 32px rgba(0,0,0,0.35);
        color: #1a1f2e !important;
    }

.cta-note {
    font-size: 14px;
    margin-top: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9) !important;*/ /* Nearly white */
    /*text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}*/

/* Footer */
/*footer {
    padding: 6rem 0 3rem;
    background: #1a1a1a;
    color: white;
    position: relative;
}

    footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--color-accent-1) 0%, var(--color-accent-2) 25%, var(--color-accent-3) 50%, var(--primary-red) 75%, var(--color-accent-1) 100%);
    }

.footer-logo-section {
    text-align: center;
    padding-bottom: 4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 4rem;
}

.logo-footer {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #fff 0%, #9ca3af 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.logo-footer-subtitle {
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.45em;
    color: #9ca3af;
    text-transform: uppercase;
    opacity: 0.8;
    margin-top: 25px;
    background: linear-gradient(135deg, #d1d5db 0%, #6b7280 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-content {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
    align-items: start;
}

.footer-primary {
    padding-right: 3rem;
}

    .footer-primary p {
        font-size: 18px;
        line-height: 1.8;
        color: #d1d5db;
        margin: 0 0 1.5rem 0;
        font-weight: 300;
        letter-spacing: 0.01em;
    }

        .footer-primary p:first-child {
            font-size: 20px;
            color: #e5e7eb;
            font-weight: 400;
        }

.footer-social {
    display: flex;
    gap: 0.8rem;
    margin-top: 2rem;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #9ca3af;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

    .social-link:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.2);
        color: white;
        transform: translateY(-2px);
    }

.footer-section {
    padding-top: 0;
}

    .footer-section h4 {
        font-size: 11px;
        font-weight: 700;
        margin-bottom: 1.2rem;
        margin-top: 0;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1.8;
        height: 32px;
        display: flex;
        align-items: center;
    }

    .footer-section p {
        color: #9ca3af;
        line-height: 1.7;
        font-size: 14px;
        margin: 0;
        font-weight: 300;
    }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

    .footer-bottom p {
        color: #6b7280;
        font-size: 0.875rem;
        margin: 0;
    }

.footer-links {
    display: flex;
    gap: 2rem;
}

    .footer-links a {
        color: #6b7280;
        text-decoration: none;
        font-size: 0.875rem;
        transition: color 0.3s ease;
    }

        .footer-links a:hover {
            color: #9ca3af;
        }*/

/* Animations */
/*@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradientShift {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(-20px, -20px) rotate(120deg);
    }

    66% {
        transform: translate(20px, -20px) rotate(240deg);
    }
}

@keyframes gradientAnimation {
    0%, 100% {
        filter: hue-rotate(0deg);
    }

    50% {
        filter: hue-rotate(30deg);
    }
}

@keyframes slideUpBounce {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }

    60% {
        transform: translateY(-5px);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}*/

/* Responsive Design */
/*@media (max-width: 768px) {
    .nav-menu {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--background-primary);
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 4px 20px var(--shadow-color-light);
        border-radius: 0 0 12px 12px;
        border: 1px solid var(--border-color);
    }

        .nav-menu.show {
            display: flex;
        }

    .mobile-menu-btn {
        display: block;
    }

    .hero-title {
        font-size: clamp(48px, 12vw, 80px);
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .btn-hero {
        width: 100%;
        max-width: 300px;
    }

    .hero-stats {
        flex-direction: column;
        gap: 32px;
    }

    .evolution-timeline {
        flex-direction: column;
        gap: 48px;
        align-items: center;
    }

        .evolution-timeline::before {
            top: 0;
            bottom: 0;
            left: 50%;
            right: auto;
            width: 2px;
            height: calc(100% - 120px);
            background: linear-gradient(180deg, var(--primary-red) 0%, #f59e0b 50%, var(--color-accent-2) 100%);
        }

    .evolution-stage {
        width: 100%;
        max-width: 300px;
    }

    .framework-preview {
        flex-direction: column;
        align-items: center;
    }

    .process-timeline {
        grid-template-columns: 1fr;
    }

        .process-timeline::before {
            display: none;
        }

    .output-showcase,
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .pricing-cards {
        grid-template-columns: 1fr;
    }

    .pricing-options-simple {
        flex-direction: column;
    }

    .option-simple {
        max-width: none;
    }

        .option-simple.featured {
            transform: scale(1);
        }

            .option-simple.featured:hover {
                transform: translateY(-4px);
            }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .footer-primary {
        padding-right: 0;
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-section {
        text-align: center;
    }

        .footer-section h4 {
            height: auto;
            justify-content: center;
            margin-bottom: 1rem;
        }

        .footer-section p {
            max-width: 400px;
            margin: 0 auto;
        }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-links {
        justify-content: center;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .pricing-card.featured {
        transform: scale(1);
    }

    .email-form {
        flex-direction: column;
    }

    .pricing-actions {
        flex-direction: column;
    }
    .preview-banner {
    font-size:11px;
    font-weight:500;
    }
    
}

@media (min-width: 769px) and (max-width: 1024px) {
    .footer-content {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 3rem;
    }

    .footer-primary {
        grid-column: 1 / -1;
        padding-right: 0;
        margin-bottom: 2rem;
    }

    .footer-section:last-child {
        grid-column: 2 / 3;
    }
}*/
/* _content/AinnaProduct/Components/AinnaPages/AinnaNotFound.razor.rz.scp.css */
.error-page[b-etnvh2ro8w] {
    position: fixed;
    inset: 0;
    background-color: rgb(15, 23, 42);
    display: flex;
    flex-direction: column;
    padding: 2rem;
}

.logo[b-etnvh2ro8w] {
    position: absolute;
    height: 45px;
    margin-top:20px;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%); /* Centers the logo horizontally */

}

.logo-primary[b-etnvh2ro8w] {
    height: 100%;
    width: auto;
}

.content-container[b-etnvh2ro8w] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stars[b-etnvh2ro8w] {
    position: absolute;
    inset: 0;
}

.star[b-etnvh2ro8w] {
    position: absolute;
    color: rgba(255, 255, 255, 0.4); /* Increased base opacity */
    animation: twinkle-b-etnvh2ro8w 3s ease-in-out infinite;

}

    .star:nth-child(3n)[b-etnvh2ro8w] {
        animation-delay: 0.5s;
    }

    .star:nth-child(3n+1)[b-etnvh2ro8w] {
        animation-delay: 1s;
    }

    .star:nth-child(3n+2)[b-etnvh2ro8w] {
        animation-delay: 1.5s;
    }

.main-content[b-etnvh2ro8w] {
    position: relative;
    max-width: 32rem;
    width: 100%;
    text-align: center;
}

.animated-container[b-etnvh2ro8w] {
    position: relative;
    height: 20rem;
}

.animated-content[b-etnvh2ro8w] {
    position: absolute;
    width: 100%;
    animation: float-b-etnvh2ro8w 3s ease-in-out infinite;
}

.rocket[b-etnvh2ro8w] {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 2rem;
    color: white;
    transform: rotate(-45deg);
}

h1[b-etnvh2ro8w] {
    font-size: 6rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
    font-family: ui-monospace, monospace;
}

.subtitle[b-etnvh2ro8w] {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.5rem;
    font-weight: 300;
}

.message[b-etnvh2ro8w] {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 2rem;
}

.home-button[b-etnvh2ro8w] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .home-button:hover[b-etnvh2ro8w] {
        background-color: rgba(255, 255, 255, 0.2);
    }

    .home-button svg[b-etnvh2ro8w] {
        width: 1.25rem;
        height: 1.25rem;
        transition: transform 0.3s ease;
    }

    .home-button:hover svg[b-etnvh2ro8w] {
        transform: rotate(12deg);
    }

@keyframes float-b-etnvh2ro8w {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(5px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes twinkle-b-etnvh2ro8w {
    0%, 100% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.5;
    }
}



@keyframes float-b-etnvh2ro8w {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(15px); /* Increased from 5px to 15px */
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes twinkle-b-etnvh2ro8w {
    0%, 100% {
        opacity: 0.4; /* Brighter base state */
    }

    50% {
        opacity: 0.8; /* Brighter peak state */
    }
}
/* _content/AinnaProduct/Components/AinnaPages/Error.razor.rz.scp.css */
.error-page[b-q2nwe8sv7r] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: #f5f5f5;
}

.error-container[b-q2nwe8sv7r] {
    width: 100%;
    max-width: 600px;
    text-align: center;
}

.logo-section[b-q2nwe8sv7r] {
    margin-bottom: 40px;
}

.company-logo[b-q2nwe8sv7r] {
    height: 64px;
    width: auto;
}

.error-card[b-q2nwe8sv7r] {
    background: white;
    border-radius: 8px;
    padding: 32px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
}

.error-header[b-q2nwe8sv7r] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
    text-align: left;
}

.error-icon[b-q2nwe8sv7r] {
    color: #dc2626;
    flex-shrink: 0;
}

.error-titles[b-q2nwe8sv7r] {
    flex: 1;
}

.error-title[b-q2nwe8sv7r] {
    font-size: 24px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 12px 0;
}

.error-message[b-q2nwe8sv7r] {
    font-size: 16px;
    color: #4b5563;
    margin: 0;
    line-height: 1.5;
}

.error-actions[b-q2nwe8sv7r] {
    display: flex;
    gap: 12px;
    flex-direction: column;
}

@media (min-width: 640px) {
    .error-actions[b-q2nwe8sv7r] {
        flex-direction: row;
    }
}

.button[b-q2nwe8sv7r] {
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    flex: 1;
    transition: background-color 0.2s;
}

.button-primary[b-q2nwe8sv7r] {
    background-color: #2563eb;
    color: white;
}

    .button-primary:hover[b-q2nwe8sv7r] {
        background-color: #1d4ed8;
    }

.button-secondary[b-q2nwe8sv7r] {
    background-color: white;
    color: #4b5563;
    border: 1px solid #d1d5db;
}

    .button-secondary:hover[b-q2nwe8sv7r] {
        background-color: #f9fafb;
    }

.support-text[b-q2nwe8sv7r] {
    color: #4b5563;
    font-size: 16px;
}

.support-link[b-q2nwe8sv7r] {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

    .support-link:hover[b-q2nwe8sv7r] {
        text-decoration: underline;
    }
     
/* _content/AinnaProduct/Components/AinnaPages/Newuitest2.razor.rz.scp.css */


.ainna-page-container[b-shqlk5j1z2] {
    width: 100%;
    height: 100vh;
    
    background: radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 119, 168, 0.1) 0%, transparent 50%), radial-gradient(circle at 40% 20%, rgba(120, 200, 255, 0.1) 0%, transparent 50%), linear-gradient(135deg, rgb(253, 252, 251) 0%, rgb(249, 248, 255) 20%, rgb(255, 249, 252) 40%, rgb(252, 249, 255) 60%, rgb(255, 251, 254) 80%, rgb(251, 250, 255) 100%);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative; /* For decorative elements */

}

    /* Decorative Elements for main container */
    .ainna-page-container .decorative-elements[b-shqlk5j1z2] {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        z-index: 0;
    }

    .ainna-page-container .decorative-circle[b-shqlk5j1z2] {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        animation: float-b-shqlk5j1z2 12s ease-in-out infinite;
        opacity: 0.6;
    }

    .ainna-page-container .circle-1[b-shqlk5j1z2] {
        top: -150px;
        right: -150px;
        width: 400px;
        height: 400px;
        background: linear-gradient(135deg, rgba(240, 12, 113, 0.15), rgba(243, 22, 112, 0.1), transparent);
        animation-duration: 15s;
    }

    .ainna-page-container .circle-2[b-shqlk5j1z2] {
        bottom: -200px;
        left: -200px;
        width: 500px;
        height: 500px;
        background: linear-gradient(45deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.1), transparent);
        animation-duration: 18s;
        animation-delay: -5s;
    }

    .ainna-page-container .circle-3[b-shqlk5j1z2] {
        top: 40%;
        left: 30%;
        width: 300px;
        height: 300px;
        background: linear-gradient(225deg, rgba(139, 92, 246, 0.12), rgba(168, 85, 247, 0.08), transparent);
        animation-duration: 20s;
        animation-delay: -10s;
    }

    .ainna-page-container .circle-4[b-shqlk5j1z2] {
        bottom: 30%;
        right: 20%;
        width: 250px;
        height: 250px;
        background: linear-gradient(90deg, rgba(236, 72, 153, 0.1), rgba(255, 119, 168, 0.08), transparent);
        animation-duration: 16s;
        animation-delay: -3s;
    }

@keyframes float-b-shqlk5j1z2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }

    25% {
        transform: translate(-30px, -50px) scale(1.1);
        opacity: 0.5;
    }

    50% {
        transform: translate(50px, -30px) scale(0.95);
        opacity: 0.7;
    }

    75% {
        transform: translate(-20px, 40px) scale(1.05);
        opacity: 0.5;
    }
}

.ainna-page-container .ainna-toolbar[b-shqlk5j1z2] {
    position: relative;
    height: 64px;
    z-index: 100;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.ainna-page-container .ainna-toolbar-content[b-shqlk5j1z2] {
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.ainna-page-container .ainna-brand[b-shqlk5j1z2] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
}

.ainna-page-container .ainna-brand-icon[b-shqlk5j1z2] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #f00c71 0%, #f31670c4 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 12px rgba(240, 12, 113, 0.3);
}

.ainna-page-container .ainna-brand-text[b-shqlk5j1z2] {
    background: linear-gradient(135deg, #f00c71 0%, #f31670 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Split-screen layout */
.ainna-page-container .ainna-split-view[b-shqlk5j1z2] {
    flex: 1;
    display: flex;
    overflow: hidden;
    width: 100%;
    /*max-width: 1840px;*/
    margin: 0 auto;
    min-height: 0;
    position: relative;
    z-index: 10;
}

/* LEFT PANEL - Fixed, non-scrolling with glass effect */
.ainna-page-container .ainna-left-panel[b-shqlk5j1z2] {
    width: 45%;
    min-width: 520px;
    max-width: 1060px;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, #fff5f5 0%, #fff 60%);
    /*background: rgba(255, 255, 255, 0.4);*/
    padding-left: 100px;
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(218, 220, 224, 0.3);
    display: flex;
    flex-direction: column;
    position: relative;
    /*padding-left:120px;*/
}

    /* Add subtle gradient overlay to left panel */
    .ainna-page-container .ainna-left-panel[b-shqlk5j1z2]::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(240, 12, 113, 0.02) 100%);
        pointer-events: none;
        z-index: 0;
    }

.ainna-page-container .ainna-left-content[b-shqlk5j1z2] {
    flex: 1;
    padding: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    z-index: 1;
}

    .ainna-page-container .ainna-left-content > *[b-shqlk5j1z2] {
        flex: 1;
        min-height: 0;
        width: 100%;
        height: 100%;
    }

/* RIGHT PANEL - Scrollable with subtle effects */
.ainna-page-container .ainna-right-panel[b-shqlk5j1z2] {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
    /*background: rgba(248, 249, 250, 0.3);*/
    background: radial-gradient(circle at 10% 20%, rgba(240, 12, 113, 0.02) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(240, 12, 113, 0.02) 0%, transparent 50%), #fafafa;
    backdrop-filter: blur(5px);
    position: relative;
}

    /* Decorative gradient for right panel */
    .ainna-page-container .ainna-right-panel[b-shqlk5j1z2]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 200px;
        /*background-color: white;*/
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
        pointer-events: none;
        z-index: 0;
    }

.ainna-page-container .ainna-right-content[b-shqlk5j1z2] {
    padding: 44px;
    position: relative;
    max-width: 1600px;
    z-index: 1;
    margin: auto;
}

.ainna-page-container .ainna-component-stack[b-shqlk5j1z2] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Enhanced resize handle */
.ainna-page-container .ainna-resize-handle[b-shqlk5j1z2] {
    width: 4px;
    cursor: col-resize;
    position: relative;
    background: linear-gradient(180deg, transparent 0%, rgba(240, 12, 113, 0.1) 50%, transparent 100%);
    transition: all 0.3s ease;
}

    .ainna-page-container .ainna-resize-handle:hover[b-shqlk5j1z2] {
        background: linear-gradient(180deg, transparent 0%, rgba(240, 12, 113, 0.5) 50%, transparent 100%);
        width: 6px;
        margin: 0 -1px;
    }

/* Scrollbar styling for right panel */
.ainna-page-container .ainna-right-panel[b-shqlk5j1z2]::-webkit-scrollbar {
    width: 8px;
}

.ainna-page-container .ainna-right-panel[b-shqlk5j1z2]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
}

.ainna-page-container .ainna-right-panel[b-shqlk5j1z2]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f00c71, #f31670);
    border-radius: 4px;
    opacity: 0.3;
}

    .ainna-page-container .ainna-right-panel[b-shqlk5j1z2]::-webkit-scrollbar-thumb:hover {
        opacity: 0.5;
    }

/* Mobile responsive - Chat-first experience */
@media (max-width: 768px) {
    .ainna-page-container .ainna-toolbar[b-shqlk5j1z2] {
        height: 48px;
        padding: 0 12px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(240, 12, 113, 0.1);
    }

    .ainna-page-container .ainna-toolbar-content[b-shqlk5j1z2] {
        padding: 0;
    }

    .ainna-page-container .ainna-brand[b-shqlk5j1z2] {
        font-size: 18px;
        gap: 8px;
    }

    .ainna-page-container .ainna-brand-icon[b-shqlk5j1z2] {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    /* Hide brand text on very small screens to save space */
    @media (max-width: 360px) {
        .ainna-page-container .ainna-brand-text[b-shqlk5j1z2] {
            display: none;
        }
    }

    .ainna-page-container .ainna-split-view[b-shqlk5j1z2] {
        flex-direction: row;
        position: relative;
    }

    /* LEFT PANEL - Full screen chat experience on mobile */
    .ainna-page-container .ainna-left-panel[b-shqlk5j1z2] {
        width: 100%;
        min-width: unset;
        max-width: none;
        height: 100%;
        padding-left: 0;
        border-right: none;
        border-bottom: none;
        background: white;
        backdrop-filter: none;
    }

        .ainna-page-container .ainna-left-panel[b-shqlk5j1z2]::before {
            display: none;
        }

    .ainna-page-container .ainna-left-content[b-shqlk5j1z2] {
        padding: 12px;
        padding-bottom: env(safe-area-inset-bottom, 12px);
    }

    /* RIGHT PANEL - Completely hidden on mobile */
    .ainna-page-container .ainna-right-panel[b-shqlk5j1z2] {
        display: none;
    }

    .ainna-page-container .ainna-resize-handle[b-shqlk5j1z2] {
        display: none;
    }

    /* Minimize decorative elements on mobile for performance */
    .ainna-page-container .decorative-circle[b-shqlk5j1z2] {
        display: none;
    }

    /* Simplify background on mobile */
    .ainna-page-container[b-shqlk5j1z2] {
        background: linear-gradient(180deg, #fff5f9 0%, #ffffff 100%);
    }

        /* Mobile-specific button to toggle right panel (if needed in future) */
        .ainna-page-container .mobile-toggle-panel[b-shqlk5j1z2] {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, #f00c71 0%, #f31670 100%);
            color: white;
            border: none;
            box-shadow: 0 4px 12px rgba(240, 12, 113, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

            .ainna-page-container .mobile-toggle-panel:active[b-shqlk5j1z2] {
                transform: scale(0.95);
            }

        /* Optional: Slide-in right panel for mobile (hidden by default) */
        .ainna-page-container .ainna-right-panel.mobile-show[b-shqlk5j1z2] {
            display: block;
            position: fixed;
            top: 48px;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: calc(100% - 48px);
            z-index: 999;
            animation: slideInFromRight-b-shqlk5j1z2 0.3s ease;
        }

    @keyframes slideInFromRight-b-shqlk5j1z2 {
        from {
            transform: translateX(100%);
        }

        to {
            transform: translateX(0);
        }
    }

    .ainna-page-container .ainna-right-content[b-shqlk5j1z2] {
        padding: 16px;
    }

    .ainna-page-container .ainna-component-stack[b-shqlk5j1z2] {
        gap: 12px;
    }
}

/* Small tablets - still show split but adjusted */
@media (min-width: 769px) and (max-width: 1024px) {
    .ainna-page-container .ainna-toolbar[b-shqlk5j1z2] {
        height: 56px;
        padding: 0 20px;
    }

    .ainna-page-container .ainna-left-panel[b-shqlk5j1z2] {
        width: 40%;
        min-width: 320px;
        padding-left: 40px;
    }

    .ainna-page-container .ainna-left-content[b-shqlk5j1z2] {
        padding: 20px;
    }

    .ainna-page-container .ainna-right-content[b-shqlk5j1z2] {
        padding: 24px;
    }

    /* Reduce decorative circles on tablets */
    .ainna-page-container .circle-3[b-shqlk5j1z2],
    .ainna-page-container .circle-4[b-shqlk5j1z2] {
        width: 200px;
        height: 200px;
        filter: blur(60px);
    }
}

/* Large tablets / small desktops */
@media (min-width: 1025px) and (max-width: 1440px) {
    .ainna-page-container .ainna-left-panel[b-shqlk5j1z2] {
        padding-left: 60px;
    }
}

/* Handle safe areas on modern phones */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .ainna-page-container .ainna-toolbar[b-shqlk5j1z2] {
            padding-top: env(safe-area-inset-top);
            height: calc(48px + env(safe-area-inset-top));
        }

        .ainna-page-container .ainna-left-content[b-shqlk5j1z2] {
            padding-left: max(12px, env(safe-area-inset-left));
            padding-right: max(12px, env(safe-area-inset-right));
            padding-bottom: max(12px, env(safe-area-inset-bottom));
        }
    }
}

/* Ensure proper height calculation */
.ainna-page-container *[b-shqlk5j1z2] {
    box-sizing: border-box;
}


/*.ainna-page-container {
    width: 100%;
    height: 100vh;
    background: radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 119, 168, 0.1) 0%, transparent 50%), radial-gradient(circle at 40% 20%, rgba(120, 200, 255, 0.1) 0%, transparent 50%), linear-gradient(135deg, rgb(253, 252, 251) 0%, rgb(249, 248, 255) 20%, rgb(255, 249, 252) 40%, rgb(252, 249, 255) 60%, rgb(255, 251, 254) 80%, rgb(251, 250, 255) 100%);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;*/ /* For decorative elements */
/*}*/

    /* Decorative Elements for main container */
    /*.ainna-page-container .decorative-elements {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        z-index: 0;
    }

    .ainna-page-container .decorative-circle {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        animation: float 12s ease-in-out infinite;
        opacity: 0.6;
    }

    .ainna-page-container .circle-1 {
        top: -150px;
        right: -150px;
        width: 400px;
        height: 400px;
        background: linear-gradient(135deg, rgba(240, 12, 113, 0.15), rgba(243, 22, 112, 0.1), transparent);
        animation-duration: 15s;
    }

    .ainna-page-container .circle-2 {
        bottom: -200px;
        left: -200px;
        width: 500px;
        height: 500px;
        background: linear-gradient(45deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.1), transparent);
        animation-duration: 18s;
        animation-delay: -5s;
    }

    .ainna-page-container .circle-3 {
        top: 40%;
        left: 30%;
        width: 300px;
        height: 300px;
        background: linear-gradient(225deg, rgba(139, 92, 246, 0.12), rgba(168, 85, 247, 0.08), transparent);
        animation-duration: 20s;
        animation-delay: -10s;
    }

    .ainna-page-container .circle-4 {
        bottom: 30%;
        right: 20%;
        width: 250px;
        height: 250px;
        background: linear-gradient(90deg, rgba(236, 72, 153, 0.1), rgba(255, 119, 168, 0.08), transparent);
        animation-duration: 16s;
        animation-delay: -3s;
    }

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }

    25% {
        transform: translate(-30px, -50px) scale(1.1);
        opacity: 0.5;
    }

    50% {
        transform: translate(50px, -30px) scale(0.95);
        opacity: 0.7;
    }

    75% {
        transform: translate(-20px, 40px) scale(1.05);
        opacity: 0.5;
    }
}

.ainna-page-container .ainna-toolbar {
    position: relative;
    height: 64px;
    z-index: 100;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.ainna-page-container .ainna-toolbar-content {
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.ainna-page-container .ainna-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
}

.ainna-page-container .ainna-brand-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #f00c71 0%, #f31670c4 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 12px rgba(240, 12, 113, 0.3);
}

.ainna-page-container .ainna-brand-text {
    background: linear-gradient(135deg, #f00c71 0%, #f31670 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}*/

/* Split-screen layout */
/*.ainna-page-container .ainna-split-view {
    flex: 1;
    display: flex;
    overflow: hidden;
    width: 100%;*/
    /*max-width: 1840px;*/
    /*margin: 0 auto;
    min-height: 0;
    position: relative;
    z-index: 10;
}*/

/* LEFT PANEL - Fixed, non-scrolling with glass effect */
/*.ainna-page-container .ainna-left-panel {
    width: 45%;
    min-width: 520px;
    max-width: 1060px;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, #fff5f5 0%, #fff 60%);*/
    /*background: rgba(255, 255, 255, 0.4);*/
    /*padding-left: 100px;
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(218, 220, 224, 0.3);
    display: flex;
    flex-direction: column;
    position: relative;*/
    /*padding-left:120px;*/
/*}*/

    /* Add subtle gradient overlay to left panel */
    /*.ainna-page-container .ainna-left-panel::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(240, 12, 113, 0.02) 100%);
        pointer-events: none;
        z-index: 0;
    }

.ainna-page-container .ainna-left-content {
    flex: 1;
    padding: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    z-index: 1;
}

    .ainna-page-container .ainna-left-content > * {
        flex: 1;
        min-height: 0;
        width: 100%;
        height: 100%;
    }*/

/* RIGHT PANEL - Scrollable with subtle effects */
/*.ainna-page-container .ainna-right-panel {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background-color:white;*/
    
    /*background: rgba(248, 249, 250, 0.3);*/
    /*background: radial-gradient(circle at 10% 20%, rgba(240, 12, 113, 0.02) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(240, 12, 113, 0.02) 0%, transparent 50%), #fafafa;
    backdrop-filter: blur(5px);
    position: relative;
}*/

    /* Decorative gradient for right panel */
    /*.ainna-page-container .ainna-right-panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 200px;*/
        /*background-color: white;*/
        /*background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
        pointer-events: none;
        z-index: 0;
    }

.ainna-page-container .ainna-right-content {
    padding: 44px;
    position: relative;
    max-width:1600px;
    z-index: 1;
    margin:auto;
}

.ainna-page-container .ainna-component-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}*/

/* Enhanced resize handle */
/*.ainna-page-container .ainna-resize-handle {
    width: 4px;
    cursor: col-resize;
    position: relative;
    background: linear-gradient(180deg, transparent 0%, rgba(240, 12, 113, 0.1) 50%, transparent 100%);
    transition: all 0.3s ease;
}

    .ainna-page-container .ainna-resize-handle:hover {
        background: linear-gradient(180deg, transparent 0%, rgba(240, 12, 113, 0.5) 50%, transparent 100%);
        width: 6px;
        margin: 0 -1px;
    }*/

/* Scrollbar styling for right panel */
/*.ainna-page-container .ainna-right-panel::-webkit-scrollbar {
    width: 8px;
}

.ainna-page-container .ainna-right-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
}

.ainna-page-container .ainna-right-panel::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f00c71, #f31670);
    border-radius: 4px;
    opacity: 0.3;
}

    .ainna-page-container .ainna-right-panel::-webkit-scrollbar-thumb:hover {
        opacity: 0.5;
    }*/

/* Mobile responsive */
/*@media (max-width: 768px) {
    .ainna-page-container .ainna-toolbar {
        height: 56px;
        padding: 0 16px;
    }

    .ainna-page-container .ainna-split-view {
        flex-direction: column;
    }

    .ainna-page-container .ainna-left-panel {
        width: 100%;
        max-width: none;
        height: 50vh;
        
        border-right: none;
        border-bottom: 1px solid rgba(218, 220, 224, 0.3);
        overflow: hidden;
    }

    .ainna-page-container .ainna-right-panel {
        height: auto;
        flex: 1;
        min-height: 0;
    }

    .ainna-page-container .ainna-left-content,
    .ainna-page-container .ainna-right-content {
        padding: 16px;
    }

    .ainna-page-container .ainna-component-stack {
        gap: 16px;
    }

    .ainna-page-container .ainna-resize-handle {
        display: none;
    }*/

    /* Reduce decorative circles on mobile */
    /*.ainna-page-container .circle-3,
    .ainna-page-container .circle-4 {
        display: none;
    }
}*/

/* Tablet/medium screens */
/*@media (min-width: 769px) and (max-width: 1024px) {
    .ainna-page-container .ainna-left-panel {
        width: 35%;
        min-width: 280px;
    }
}*/

/* Ensure proper height calculation */
/*.ainna-page-container * {
    box-sizing: border-box;
}*/
/* _content/AinnaProduct/Components/AinnaPages/Onboarding.razor.rz.scp.css */
/* AinnaOnboarding.razor.css - Scoped Component Styles */

/* CSS Variables - Scoped to component */
.ainna-onboarding-container[b-7bplzavwyy] {
    --ainna-primary-blue: #1a73e8;
    --ainna-primary-green: #34a853;
    --ainna-primary-yellow: #fbbc04;
    --ainna-primary-red: #ea4335;
    --ainna-text-primary: #1a1f2e;
    --ainna-text-secondary: #5f6368;
    --ainna-text-tertiary: #9aa0a6;
    --ainna-text-heading: #2c3e50;
    --ainna-background-primary: #ffffff;
    --ainna-background-secondary: #f8f9fa;
    --ainna-background-tertiary: #f1f3f4;
    --ainna-border-color: #e8eaed;
    --ainna-border-strong: #d0d5dd;
}

    /* Reset and Container */
    .ainna-onboarding-container *[b-7bplzavwyy] {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
/*
.ainna-onboarding-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #f7f8fa;
    color: var(--ainna-text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    letter-spacing: -0.01em;
    display: flex;
    flex-direction: column;
    padding-top: 92px;
    position: relative;
}*/
/* Update the main container */
.ainna-onboarding-container[b-7bplzavwyy] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #f7f8fa;
    color: var(--ainna-text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: calc(100vh - 92px); /* Account for fixed header */
    letter-spacing: -0.01em;
    display: flex;
    flex-direction: column;
    padding-top: 92px;
    position: relative;
    overflow-y: auto; /* Enable scrolling */
    overflow-x: hidden;
}

/* Ensure the footer stays at bottom */
.ainna-footer[b-7bplzavwyy] {
    background: white;
    border-top: 1px solid var(--ainna-border-color);
    padding: 20px 0;
    margin-top: auto;
    position: relative; /* Change from potential fixed/absolute */
}
/* Header */
.ainna-header[b-7bplzavwyy] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 20px 0;
    background: white;
    border-bottom: 1px solid var(--ainna-border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ainna-header-content[b-7bplzavwyy] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ainna-header-right[b-7bplzavwyy] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.ainna-logo[b-7bplzavwyy] {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ainna-text-primary);
    text-decoration: none;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    transition: transform 0.2s;
    cursor: pointer;
}

.ainna-logo-tagline[b-7bplzavwyy] {
    font-size: 10px !important;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ainna-text-secondary);
    padding: 4px 10px;
    background: rgba(26, 115, 232, 0.08);
    border-radius: 20px;
    border: 1px solid rgba(26, 115, 232, 0.15);
    white-space: nowrap;
    line-height: 1.2;
    display: inline-block;
    margin-bottom: 8px;
}

.ainna-logo-icon[b-7bplzavwyy] {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--ainna-primary-blue) 0%, var(--ainna-primary-green) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    margin-bottom: 8px;
}

.ainna-demo-toggle[b-7bplzavwyy] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ainna-text-secondary);
    padding: 6px 12px;
    background: rgba(26, 115, 232, 0.04);
    border-radius: 20px;
    border: 1px solid rgba(26, 115, 232, 0.1);
}

.ainna-toggle-switch[b-7bplzavwyy] {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

    .ainna-toggle-switch input[b-7bplzavwyy] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.ainna-toggle-slider[b-7bplzavwyy] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--ainna-text-tertiary);
    transition: .3s;
    border-radius: 20px;
}

    .ainna-toggle-slider[b-7bplzavwyy]:before {
        position: absolute;
        content: "";
        height: 14px;
        width: 14px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .3s;
        border-radius: 50%;
    }

.ainna-toggle-switch input:checked + .ainna-toggle-slider[b-7bplzavwyy] {
    background-color: var(--ainna-primary-green);
}

    .ainna-toggle-switch input:checked + .ainna-toggle-slider[b-7bplzavwyy]:before {
        transform: translateX(16px);
    }

.ainna-referral-indicator[b-7bplzavwyy] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--ainna-primary-green);
    background: rgba(52, 168, 83, 0.08);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(52, 168, 83, 0.15);
}

    .ainna-referral-indicator i[b-7bplzavwyy] {
        font-size: 10px;
    }


/* Verifying State */
.ainna-verification-section.ainna-verifying[b-7bplzavwyy] {
    border-color: rgba(26, 115, 232, 0.5);
    background: linear-gradient(135deg, rgba(26, 115, 232, 0.02) 0%, rgba(52, 168, 83, 0.02) 100%);
}

/* Verifying Container */
.ainna-verifying-container[b-7bplzavwyy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    animation: ainnaFadeIn-b-7bplzavwyy 0.3s ease;
}

@keyframes ainnaFadeIn-b-7bplzavwyy {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Verification Spinner */
.ainna-verification-spinner[b-7bplzavwyy] {
    width: 80px;
    height: 80px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ainna-spinner-ring[b-7bplzavwyy] {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-radius: 50%;
}

    .ainna-spinner-ring:nth-child(1)[b-7bplzavwyy] {
        border-top-color: var(--ainna-primary-blue);
        animation: ainnaRotate1-b-7bplzavwyy 2s linear infinite;
    }

    .ainna-spinner-ring:nth-child(2)[b-7bplzavwyy] {
        border-right-color: var(--ainna-primary-green);
        animation: ainnaRotate2-b-7bplzavwyy 2s linear infinite;
    }

    .ainna-spinner-ring:nth-child(3)[b-7bplzavwyy] {
        border-bottom-color: rgba(26, 115, 232, 0.3);
        animation: ainnaRotate3-b-7bplzavwyy 2s linear infinite;
    }

.ainna-verification-spinner i[b-7bplzavwyy] {
    font-size: 24px;
    color: var(--ainna-primary-blue);
    opacity: 0;
    animation: ainnaCheckAppear-b-7bplzavwyy 0.5s ease forwards;
    animation-delay: 1.5s;
}

@keyframes ainnaRotate1-b-7bplzavwyy {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes ainnaRotate2-b-7bplzavwyy {
    0% {
        transform: rotate(120deg);
    }

    100% {
        transform: rotate(480deg);
    }
}

@keyframes ainnaRotate3-b-7bplzavwyy {
    0% {
        transform: rotate(240deg);
    }

    100% {
        transform: rotate(600deg);
    }
}

@keyframes ainnaCheckAppear-b-7bplzavwyy {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Verifying Text */
.ainna-verifying-text[b-7bplzavwyy] {
    text-align: center;
}

.ainna-verifying-title[b-7bplzavwyy] {
    font-size: 16px;
    font-weight: 600;
    color: var(--ainna-text-primary);
    margin-bottom: 4px;
}

.ainna-verifying-subtitle[b-7bplzavwyy] {
    font-size: 13px;
    color: var(--ainna-text-secondary);
    opacity: 0.8;
    animation: ainnaPulseFade-b-7bplzavwyy 2s ease-in-out infinite;
}

@keyframes ainnaPulseFade-b-7bplzavwyy {
    0%, 100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}

/* Main Layout */
.ainna-main-container[b-7bplzavwyy] {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding: 60px 40px;
    position: relative;
}

/* Welcome Section - Full width above columns */
.ainna-welcome-section[b-7bplzavwyy] {
    width: 100%;
    margin-bottom: 40px;
}

.ainna-welcome-message[b-7bplzavwyy] {
    max-width: 780px; /* Match left column width */
}

/* Two Column Wrapper */
.ainna-columns-wrapper[b-7bplzavwyy] {
    display: flex;
    gap: 60px;
    width: 100%;
}

/* Left Column */
.ainna-left-column[b-7bplzavwyy] {
    flex: 0 0 70%;
    max-width: 780px;
}

.ainna-welcome-title[b-7bplzavwyy] {
    font-size: 36px;
    font-weight: 700;
    color: var(--ainna-text-heading);
    margin-bottom: 12px;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.ainna-welcome-subtitle[b-7bplzavwyy] {
    font-size: 16px;
    color: var(--ainna-text-secondary);
    line-height: 1.5;
}

.ainna-referral-banner[b-7bplzavwyy] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(26, 115, 232, 0.08) 0%, rgba(52, 168, 83, 0.08) 100%);
    border: 1px solid rgba(26, 115, 232, 0.2);
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 20px;
    font-size: 14px;
    color: var(--ainna-text-primary);
    animation: ainnaSubtleGlow-b-7bplzavwyy 3s ease-in-out infinite;
}

@keyframes ainnaSubtleGlow-b-7bplzavwyy {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(52, 168, 83, 0.1);
    }

    50% {
        box-shadow: 0 4px 12px rgba(52, 168, 83, 0.2);
    }
}

.ainna-referral-banner i[b-7bplzavwyy] {
    color: var(--ainna-primary-green);
    font-size: 18px;
}

.ainna-referral-banner strong[b-7bplzavwyy] {
    color: var(--ainna-primary-green);
}

/* Form Card */
.ainna-form-card[b-7bplzavwyy] {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1.5px solid rgba(26, 115, 232, 0.25);
    margin-bottom: 24px;
    transition: border-color 0.3s ease;
}

    .ainna-form-card:hover[b-7bplzavwyy] {
        border-color: rgba(26, 115, 232, 0.35);
    }

    .ainna-form-card.ainna-completed[b-7bplzavwyy] {
        border-color: rgba(52, 168, 83, 0.3);
    }

.ainna-card-header[b-7bplzavwyy] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ainna-primary-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.ainna-form-grid[b-7bplzavwyy] {
    display: grid;
    gap: 16px;
}

.ainna-form-row[b-7bplzavwyy] {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    align-items: center;
}

    .ainna-form-row.ainna-textarea-row[b-7bplzavwyy] {
        align-items: start;
    }

    .ainna-form-row.ainna-with-helper[b-7bplzavwyy] {
        align-items: start;
    }

.ainna-form-input-group[b-7bplzavwyy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ainna-form-row.ainna-plan-row[b-7bplzavwyy] {
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--ainna-border-color);
}

.ainna-form-label[b-7bplzavwyy] {
    font-size: 14px;
    color: var(--ainna-text-secondary);
    font-weight: 500;
}

.ainna-form-value[b-7bplzavwyy] {
    font-size: 15px;
    color: var(--ainna-text-primary);
    font-weight: 600;
    padding: 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ainna-verified-badge[b-7bplzavwyy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--ainna-primary-green);
    background: rgba(52, 168, 83, 0.08);
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid rgba(52, 168, 83, 0.15);
}

    .ainna-verified-badge i[b-7bplzavwyy] {
        font-size: 10px;
    }

.ainna-credit-badge[b-7bplzavwyy] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ainna-primary-green);
    background: rgba(52, 168, 83, 0.08);
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid rgba(52, 168, 83, 0.15);
    margin-left: 8px;
}

    .ainna-credit-badge i[b-7bplzavwyy] {
        font-size: 10px;
    }

.ainna-helper-text[b-7bplzavwyy] {
    font-size: 11px;
    color: var(--ainna-text-tertiary);
    font-weight: 400;
    margin-top: 2px;
}

.ainna-form-input[b-7bplzavwyy] {
    padding: 10px 14px;
    border: 2px solid var(--ainna-border-color);
    border-radius: 8px;
    font-size: 14px;
    color: var(--ainna-text-primary);
    background: white;
    transition: all 0.2s ease;
    width: 100%;
    font-family: inherit;
}

    .ainna-form-input[b-7bplzavwyy]::placeholder {
        color: var(--ainna-text-secondary);
        opacity: 0.8;
    }

    .ainna-form-input:hover[b-7bplzavwyy] {
        border-color: var(--ainna-border-strong);
    }

    .ainna-form-input:focus[b-7bplzavwyy] {
        outline: none;
        border-color: var(--ainna-primary-blue);
        box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
        background: white;
    }

    .ainna-form-input.ainna-filled[b-7bplzavwyy] {
        border-color: var(--ainna-primary-green);
    }

textarea.ainna-form-input[b-7bplzavwyy] {
    min-height: 120px;
    max-height: 120px;
    line-height: 1.5;
    resize: none;
}

.ainna-optional-tag[b-7bplzavwyy] {
    font-size: 11px;
    color: var(--ainna-text-tertiary);
    font-weight: 400;
}

/* Coupon Section */
.ainna-coupon-section[b-7bplzavwyy] {
    background: white;
    border-radius: 16px;
    padding: 24px 32px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1.5px solid rgba(26, 115, 232, 0.25);
    margin-bottom: 24px;
    margin-top: 20px;
    position: relative;
    transition: border-color 0.3s ease;
}

    .ainna-coupon-section:hover:not(.ainna-applied)[b-7bplzavwyy] {
        border-color: rgba(26, 115, 232, 0.35);
    }

    .ainna-coupon-section.ainna-applied[b-7bplzavwyy] {
        background: white;
        border-color: rgba(52, 168, 83, 0.3);
    }

.ainna-coupon-header[b-7bplzavwyy] {
    margin-bottom: 16px;
}

.ainna-coupon-title[b-7bplzavwyy] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ainna-primary-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    text-align: left;
}

.ainna-coupon-subtitle[b-7bplzavwyy] {
    font-size: 13px;
    color: var(--ainna-text-secondary);
    text-align: left;
}

.ainna-coupon-input-wrapper[b-7bplzavwyy] {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.ainna-coupon-input-container[b-7bplzavwyy] {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.ainna-coupon-char-input[b-7bplzavwyy] {
    width: 40px;
    height: 48px;
    border: 2px solid var(--ainna-border-color);
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--ainna-text-primary);
    transition: all 0.2s ease;
    background: white;
    text-transform: uppercase;
}

    .ainna-coupon-char-input:focus[b-7bplzavwyy] {
        outline: none;
        border-color: var(--ainna-primary-blue);
        box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
    }

    .ainna-coupon-char-input.ainna-filled[b-7bplzavwyy] {
        background: white;
        border-color: var(--ainna-primary-green);
    }

    .ainna-coupon-char-input.ainna-error[b-7bplzavwyy] {
        border-color: var(--ainna-primary-red);
    }

    .ainna-coupon-char-input.ainna-validating[b-7bplzavwyy] {
        border-color: var(--ainna-primary-blue);
        background: rgba(26, 115, 232, 0.02);
    }

.ainna-coupon-separator[b-7bplzavwyy] {
    font-size: 20px;
    font-weight: 300;
    color: var(--ainna-text-tertiary);
    margin: 0 2px;
}

.ainna-coupon-status[b-7bplzavwyy] {
    text-align: center;
    font-size: 12px;
    min-height: 18px;
    color: var(--ainna-text-secondary);
    margin-bottom: 8px;
}

    .ainna-coupon-status.ainna-hint[b-7bplzavwyy] {
        color: var(--ainna-text-tertiary);
    }

    .ainna-coupon-status.ainna-success[b-7bplzavwyy] {
        color: var(--ainna-primary-green);
        font-weight: 600;
    }

    .ainna-coupon-status.ainna-error[b-7bplzavwyy] {
        color: var(--ainna-primary-red);
    }

    .ainna-coupon-status.ainna-validating[b-7bplzavwyy] {
        color: var(--ainna-primary-blue);
    }

.ainna-coupon-skip[b-7bplzavwyy] {
    text-align: center;
    font-size: 11px;
    color: var(--ainna-text-tertiary);
    font-style: italic;
}
/* Coupon validation in progress state */
.ainna-coupon-section.ainna-validating .ainna-coupon-char-input[b-7bplzavwyy] {
    background: #f8f9fa;
    border-color: rgba(26, 115, 232, 0.5);
    cursor: not-allowed;
    opacity: 0.7;
}

.ainna-coupon-section.ainna-validating .ainna-coupon-separator[b-7bplzavwyy] {
    opacity: 0.5;
}

/* Coupon validation progress container */
.ainna-coupon-progress[b-7bplzavwyy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    margin-bottom: 8px;
    min-height: 18px;
    animation: ainnaFadeInSmall-b-7bplzavwyy 0.3s ease;
}

/* Coupon progress text */
.ainna-coupon-progress-text[b-7bplzavwyy] {
    font-size: 12px;
    color: var(--ainna-primary-blue);
    font-weight: 500;
    letter-spacing: 0.5px;
    animation: ainnaPulseText-b-7bplzavwyy 1.5s ease-in-out infinite;
}

/* Optional: Add a subtle glow effect to the coupon section during validation */
.ainna-coupon-section.ainna-validating[b-7bplzavwyy] {
    box-shadow: 0 2px 16px rgba(26, 115, 232, 0.08);
    transition: box-shadow 0.3s ease;
}

/* Success state enhancement */
.ainna-coupon-status.ainna-success[b-7bplzavwyy] {
    animation: ainnaSuccessPop-b-7bplzavwyy 0.4s ease;
}

@keyframes ainnaSuccessPop-b-7bplzavwyy {
    0% {
        transform: scale(0.95);
        opacity: 0;
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Error state enhancement */
.ainna-coupon-status.ainna-error[b-7bplzavwyy] {
    animation: ainnaErrorShake-b-7bplzavwyy 0.4s ease;
}

@keyframes ainnaErrorShake-b-7bplzavwyy {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}
/* Verification Section */
.ainna-verification-section[b-7bplzavwyy] {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1.5px solid rgba(26, 115, 232, 0.25);
    margin-bottom: 24px;
    position: relative;
    transition: border-color 0.3s ease;
    height: 230px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /*.ainna-verification-section:hover:not(.ainna-verified) {
        border-color: rgba(26, 115, 232, 0.35);
    }*/
        .ainna-verification-section:hover:not(.ainna-verified):not(.ainna-verifying)[b-7bplzavwyy] {
            border-color: rgba(26, 115, 232, 0.35);
        }

    .ainna-verification-section.ainna-verified[b-7bplzavwyy] {
        background: white;
        border-color: rgba(52, 168, 83, 0.3);
    }

.ainna-verification-header[b-7bplzavwyy] {
    margin-bottom: 24px;
    flex-shrink: 0;
}

.ainna-verification-title[b-7bplzavwyy] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ainna-primary-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    text-align: left;
}

.ainna-email-display[b-7bplzavwyy] {
    font-size: 14px;
    color: var(--ainna-text-secondary);
    text-align: left;
}

    .ainna-email-display strong[b-7bplzavwyy] {
        color: var(--ainna-text-primary);
        font-weight: 600;
    }

.ainna-code-input-container[b-7bplzavwyy] {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    justify-content: center;
    height: 56px;
}

.ainna-code-input[b-7bplzavwyy] {
    width: 52px;
    height: 56px;
    border: 2px solid var(--ainna-border-color);
    border-radius: 12px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--ainna-text-primary);
    transition: all 0.2s ease;
    background: white;
}

    .ainna-code-input:focus[b-7bplzavwyy] {
        outline: none;
        border-color: var(--ainna-primary-blue);
        box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
    }

    .ainna-code-input.ainna-filled[b-7bplzavwyy] {
        background: white;
        border-color: var(--ainna-primary-green);
    }

    .ainna-code-input:disabled[b-7bplzavwyy] {
        background: #f0f9ff;
        border-color: var(--ainna-primary-green);
    }

.ainna-verification-status[b-7bplzavwyy] {
    text-align: center;
    color: var(--ainna-primary-green);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100px;
    flex-direction: row;
}

    .ainna-verification-status i[b-7bplzavwyy] {
        font-size: 24px;
    }

.ainna-resend-link[b-7bplzavwyy] {
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
    color: var(--ainna-text-secondary);
    min-height: 20px;
    height: 20px;
}

    .ainna-resend-link a[b-7bplzavwyy] {
        color: var(--ainna-primary-blue);
        text-decoration: none;
        font-weight: 600;
        cursor: pointer;
    }

        .ainna-resend-link a:hover[b-7bplzavwyy] {
            text-decoration: underline;
        }

    .ainna-resend-link.ainna-sending[b-7bplzavwyy] {
        color: var(--ainna-text-tertiary);
    }

    .ainna-resend-link.ainna-sent[b-7bplzavwyy] {
        color: var(--ainna-primary-green);
        font-weight: 500;
    }

.ainna-resend-countdown[b-7bplzavwyy] {
    color: var(--ainna-text-tertiary);
    font-size: 12px;
}



/* Verification in progress state - Add after line 676 */
.ainna-verification-section.ainna-verifying .ainna-code-input[b-7bplzavwyy] {
    background: #f8f9fa;
    border-color: rgba(26, 115, 232, 0.5);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Verification progress container */
.ainna-verification-progress[b-7bplzavwyy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    min-height: 20px;
    animation: ainnaFadeInSmall-b-7bplzavwyy 0.3s ease;
}

@keyframes ainnaFadeInSmall-b-7bplzavwyy {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mini spinner */
.ainna-mini-spinner[b-7bplzavwyy] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(26, 115, 232, 0.2);
    border-top-color: var(--ainna-primary-blue);
    border-radius: 50%;
    animation: ainnaSpinSmooth-b-7bplzavwyy 1s linear infinite;
}

@keyframes ainnaSpinSmooth-b-7bplzavwyy {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Verification progress text */
.ainna-verification-progress-text[b-7bplzavwyy] {
    font-size: 13px;
    color: var(--ainna-primary-blue);
    font-weight: 500;
    letter-spacing: 0.5px;
    animation: ainnaPulseText-b-7bplzavwyy 1.5s ease-in-out infinite;
}

@keyframes ainnaPulseText-b-7bplzavwyy {
    0%, 100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

/* Optional: Add a subtle glow effect to the verification section during validation */
.ainna-verification-section.ainna-verifying[b-7bplzavwyy] {
    box-shadow: 0 2px 20px rgba(26, 115, 232, 0.1);
    transition: box-shadow 0.3s ease;
}

/* Agreement Section */
.ainna-agreement-section[b-7bplzavwyy] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1.5px solid rgba(26, 115, 232, 0.25);
    margin-bottom: 32px;
    transition: border-color 0.3s ease;
}

    .ainna-agreement-section:hover[b-7bplzavwyy] {
        border-color: rgba(26, 115, 232, 0.35);
    }

    .ainna-agreement-section.ainna-checked[b-7bplzavwyy] {
        border-color: rgba(52, 168, 83, 0.3);
    }

.ainna-checkbox-container[b-7bplzavwyy] {
    display: flex;
    align-items: start;
    gap: 12px;
}

.ainna-checkbox-input[b-7bplzavwyy] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--ainna-primary-blue);
}

.ainna-checkbox-label[b-7bplzavwyy] {
    font-size: 13px;
    color: var(--ainna-text-secondary);
    line-height: 1.6;
}

    .ainna-checkbox-label a[b-7bplzavwyy] {
        color: var(--ainna-primary-blue);
        text-decoration: none;
        font-weight: 600;
    }

        .ainna-checkbox-label a:hover[b-7bplzavwyy] {
            text-decoration: underline;
        }

/* Buttons */
.ainna-btn[b-7bplzavwyy] {
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ainna-btn-proceed[b-7bplzavwyy] {
    background: linear-gradient(135deg, var(--ainna-primary-blue) 0%, var(--ainna-primary-green) 100%);
    color: white;
    width: 100%;
    max-width: 360px;
    padding: 16px 32px;
    font-size: 15px;
    box-shadow: 0 4px 16px rgba(26, 115, 232, 0.2);
    display: flex;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

    .ainna-btn-proceed:hover:not(:disabled):not(.ainna-processing)[b-7bplzavwyy] {
        transform: translateY(-2px);
        box-shadow: 0 6px 24px rgba(26, 115, 232, 0.3);
    }

    .ainna-btn-proceed:disabled[b-7bplzavwyy] {
        opacity: 0.4;
        cursor: not-allowed;
        background: var(--ainna-text-tertiary);
    }

    .ainna-btn-proceed.ainna-processing[b-7bplzavwyy] {
        cursor: wait;
        animation: ainnaPulse-b-7bplzavwyy 1.5s ease-in-out infinite;
    }

@keyframes ainnaPulse-b-7bplzavwyy {
    0%, 100% {
        box-shadow: 0 4px 16px rgba(26, 115, 232, 0.2);
    }

    50% {
        box-shadow: 0 4px 24px rgba(26, 115, 232, 0.4);
    }
}

.ainna-btn-proceed .ainna-spinner[b-7bplzavwyy] {
    display: inline-block;
    animation: ainnaSpin-b-7bplzavwyy 1s linear infinite;
    margin-right: 8px;
}

@keyframes ainnaSpin-b-7bplzavwyy {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Processing Overlay */
.ainna-processing-overlay[b-7bplzavwyy] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
}

    .ainna-processing-overlay.ainna-active[b-7bplzavwyy] {
        display: flex;
    }

.ainna-processing-message[b-7bplzavwyy] {
    background: white;
    padding: 32px 48px;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 400px;
}

.ainna-processing-icon[b-7bplzavwyy] {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    position: relative;
}

    .ainna-processing-icon .ainna-circle[b-7bplzavwyy] {
        width: 100%;
        height: 100%;
        border: 4px solid var(--ainna-background-tertiary);
        border-top: 4px solid var(--ainna-primary-blue);
        border-radius: 50%;
        animation: ainnaSpin-b-7bplzavwyy 1s linear infinite;
    }

.ainna-processing-title[b-7bplzavwyy] {
    font-size: 18px;
    font-weight: 600;
    color: var(--ainna-text-heading);
    margin-bottom: 8px;
}

.ainna-processing-subtitle[b-7bplzavwyy] {
    font-size: 14px;
    color: var(--ainna-text-secondary);
    margin-bottom: 20px;
}

.ainna-processing-steps[b-7bplzavwyy] {
    text-align: left;
    font-size: 13px;
    color: var(--ainna-text-secondary);
}

.ainna-processing-step[b-7bplzavwyy] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

    .ainna-processing-step.ainna-active[b-7bplzavwyy] {
        opacity: 1;
    }

    .ainna-processing-step.ainna-complete[b-7bplzavwyy] {
        opacity: 1;
        color: var(--ainna-primary-green);
    }

    .ainna-processing-step i[b-7bplzavwyy] {
        font-size: 12px;
        width: 16px;
    }

/* Right Column */
.ainna-right-column[b-7bplzavwyy] {
    flex: 0 0 30%;
    text-align: left;
}

.ainna-info-panel[b-7bplzavwyy] {
    background: #f0f7f3;
    border: none;
    border-radius: 16px;
    padding: 32px 28px;
    height: fit-content;
    min-height: calc(100vh - 380px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.ainna-support-section[b-7bplzavwyy] {
    margin-bottom: 32px;
    text-align: left;
}

    .ainna-support-section:last-child[b-7bplzavwyy] {
        margin-bottom: 0;
    }

.ainna-support-title[b-7bplzavwyy] {
    font-size: 13px;
    font-weight: 700;
    color: var(--ainna-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.ainna-support-text[b-7bplzavwyy] {
    font-size: 13px;
    color: var(--ainna-text-secondary);
    line-height: 1.6;
    margin-bottom: 12px;
    text-align: left;
}

.ainna-usage-insight[b-7bplzavwyy] {
    font-size: 13px;
    color: var(--ainna-text-secondary);
    line-height: 1.6;
    margin-bottom: 8px;
    padding-left: 14px;
    position: relative;
    text-align: left;
}

    .ainna-usage-insight[b-7bplzavwyy]::before {
        content: '•';
        position: absolute;
        left: 0;
        color: var(--ainna-text-tertiary);
    }

    .ainna-usage-insight strong[b-7bplzavwyy] {
        color: var(--ainna-text-primary);
        font-weight: 600;
    }

.ainna-privacy-point[b-7bplzavwyy] {
    font-size: 13px;
    color: var(--ainna-text-secondary);
    line-height: 1.6;
    margin-bottom: 8px;
    padding-left: 14px;
    position: relative;
    text-align: left;
}

    .ainna-privacy-point[b-7bplzavwyy]::before {
        content: '•';
        position: absolute;
        left: 0;
        color: var(--ainna-text-tertiary);
    }

.ainna-referral-benefit[b-7bplzavwyy] {
    background: rgba(26, 115, 232, 0.04);
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0;
    font-size: 13px;
}

.ainna-benefit-label[b-7bplzavwyy] {
    font-size: 11px;
    color: var(--ainna-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.ainna-benefit-value[b-7bplzavwyy] {
    color: var(--ainna-text-secondary);
    margin-bottom: 4px;
}

    .ainna-benefit-value strong[b-7bplzavwyy] {
        color: var(--ainna-primary-green);
        font-weight: 600;
    }

.ainna-benefit-note[b-7bplzavwyy] {
    font-size: 11px;
    color: var(--ainna-text-tertiary);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(26, 115, 232, 0.1);
}

.ainna-referral-steps[b-7bplzavwyy] {
    margin-top: 12px;
}

.ainna-referral-step[b-7bplzavwyy] {
    font-size: 12px;
    color: var(--ainna-text-secondary);
    padding-left: 0;
    position: relative;
    margin-bottom: 6px;
    line-height: 1.4;
}

/* Footer */
/*.ainna-footer {
    background: white;
    border-top: 1px solid var(--ainna-border-color);
    padding: 20px 0;
    margin-top: auto;
}*/

.ainna-footer-content[b-7bplzavwyy] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 12px;
    color: var(--ainna-text-tertiary);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .ainna-main-container[b-7bplzavwyy] {
        padding: 40px 20px;
    }

    .ainna-columns-wrapper[b-7bplzavwyy] {
        flex-direction: column;
        gap: 40px;
    }

    .ainna-left-column[b-7bplzavwyy],
    .ainna-right-column[b-7bplzavwyy] {
        flex: 1;
        max-width: 100%;
    }

    .ainna-right-column[b-7bplzavwyy] {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .ainna-main-container[b-7bplzavwyy] {
        padding: 40px 20px;
    }

    .ainna-form-row[b-7bplzavwyy] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

        .ainna-form-row.ainna-with-helper[b-7bplzavwyy] {
            gap: 8px;
        }

    .ainna-form-label[b-7bplzavwyy] {
        padding-top: 0 !important;
    }

    .ainna-verified-badge[b-7bplzavwyy] {
        margin-left: 0;
    }

    .ainna-code-input[b-7bplzavwyy] {
        width: 45px;
        height: 50px;
        font-size: 20px;
    }

    .ainna-coupon-char-input[b-7bplzavwyy] {
        width: 36px;
        height: 44px;
        font-size: 18px;
    }

    .ainna-coupon-separator[b-7bplzavwyy] {
        font-size: 18px;
        margin: 0 1px;
    }

    .ainna-verification-section[b-7bplzavwyy],
    .ainna-coupon-section[b-7bplzavwyy] {
        height: auto;
        min-height: 200px;
        padding: 20px 24px;
    }

    .ainna-header-content[b-7bplzavwyy] {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        align-items: center;
    }

    .ainna-header-right[b-7bplzavwyy] {
        align-items: center;
        width: 100%;
    }

    .ainna-logo[b-7bplzavwyy] {
        margin-top: 0;
    }

    .ainna-demo-toggle[b-7bplzavwyy] {
        order: -1;
        margin-bottom: 8px;
    }

    .ainna-referral-indicator[b-7bplzavwyy] {
        margin-bottom: 8px;
    }

    .ainna-footer-content[b-7bplzavwyy] {
        text-align: center;
        justify-content: center;
    }

    .ainna-referral-banner[b-7bplzavwyy] {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 10px 12px;
    }

    .ainna-credit-badge[b-7bplzavwyy] {
        display: block;
        margin-left: 0;
        margin-top: 4px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .ainna-logo .ainna-logo-tagline[b-7bplzavwyy] {
        display: none;
    }

    .ainna-demo-toggle[b-7bplzavwyy] {
        display: none;
    }

    .ainna-referral-indicator[b-7bplzavwyy] {
        display: none !important;
    }
}
/* _content/AinnaProduct/Components/AinnaSmartAccountManager.razor.rz.scp.css */
/* Import theme variables from app.css - these are already defined */

*[b-xr0tyxur5m] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html[b-xr0tyxur5m] {
    scroll-behavior: smooth;
}

body[b-xr0tyxur5m] {
    overflow-x: hidden;
}

.profile-container[b-xr0tyxur5m] {
    min-height: 100vh;
    background: var(--page-background, linear-gradient(180deg, #f0f7ff 0%, #f8fbff 100%));
    position: relative;
    overflow-x: hidden;
}

/* Main Content */
.profile-wrapper[b-xr0tyxur5m] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 40px 80px; /* Added more bottom padding */
    min-height: 100vh;
}

.page-header[b-xr0tyxur5m] {
    margin-bottom: 48px;
}

.page-title[b-xr0tyxur5m] {
    font-size: 40px;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 12px;
}

.page-subtitle[b-xr0tyxur5m] {
    font-size: 18px;
    color: var(--text-secondary);
}

/* Profile Layout - Natural Scrolling */
.profile-layout[b-xr0tyxur5m] {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 32px;
    position: relative;
    align-items: start;
}

/* Left Column with Sticky Behavior */
.left-column[b-xr0tyxur5m] {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    align-self: start;
    height: auto;
    z-index: 10;
}

.sticky-content[b-xr0tyxur5m] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Photo Card */
.photo-card[b-xr0tyxur5m] {
    background: var(--background-primary);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    padding: 24px;
    text-align: center;
}

.photo-card-title[b-xr0tyxur5m] {
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.photo-container[b-xr0tyxur5m] {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 20px;
}

.photo-frame[b-xr0tyxur5m] {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 3px solid var(--border-color);
    overflow: hidden;
    position: relative;
    background: var(--background-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .photo-frame:hover:not(.uploading)[b-xr0tyxur5m] {
        border-color: var(--color-accent-1);
        transform: scale(1.02);
    }

    .photo-frame.has-photo[b-xr0tyxur5m] {
        cursor: move;
    }

    .photo-frame.uploading[b-xr0tyxur5m] {
        cursor: not-allowed;
        opacity: 0.7;
    }

.upload-overlay[b-xr0tyxur5m] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.upload-text[b-xr0tyxur5m] {
    margin-top: 12px;
    font-size: 14px;
    color: var(--text-secondary);
}

.spinner[b-xr0tyxur5m] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--color-accent-1);
    border-radius: 50%;
    animation: spin-b-xr0tyxur5m 1s linear infinite;
}

.spinner-small[b-xr0tyxur5m] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-xr0tyxur5m 0.8s linear infinite;
    margin-right: 8px;
}

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

.photo-placeholder[b-xr0tyxur5m] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
}

    .photo-placeholder i[b-xr0tyxur5m] {
        font-size: 48px;
        margin-bottom: 12px;
        opacity: 0.5;
    }

.photo-image[b-xr0tyxur5m] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    display: none;
}

    .photo-image.active[b-xr0tyxur5m] {
        display: block;
    }

.photo-status[b-xr0tyxur5m] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: var(--background-primary);
    border: 3px solid var(--background-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px var(--shadow-color-light);
}

    .photo-status i[b-xr0tyxur5m] {
        color: var(--color-accent-1);
        font-size: 16px;
    }

.photo-controls[b-xr0tyxur5m] {
    display: none;
    flex-direction: column;
    gap: 12px;
}

    .photo-controls.active[b-xr0tyxur5m] {
        display: flex;
    }

.zoom-control[b-xr0tyxur5m] {
    padding: 12px;
    background: var(--background-secondary);
    border-radius: 10px;
}

.zoom-slider[b-xr0tyxur5m] {
    width: 100%;
    height: 4px;
    background: var(--border-color);
    outline: none;
    -webkit-appearance: none;
    border-radius: 2px;
    margin: 8px 0;
}

    .zoom-slider[b-xr0tyxur5m]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--color-accent-1);
        cursor: pointer;
    }

.zoom-label[b-xr0tyxur5m] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-tertiary);
}

.btn-photo[b-xr0tyxur5m] {
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--background-primary);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn-photo:hover:not(:disabled)[b-xr0tyxur5m] {
        background: var(--background-secondary);
    }

    .btn-photo:disabled[b-xr0tyxur5m] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .btn-photo.danger[b-xr0tyxur5m] {
        color: var(--primary-red);
    }

.photo-save-section[b-xr0tyxur5m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.btn-save-photo[b-xr0tyxur5m], .btn-cancel-photo[b-xr0tyxur5m] {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-save-photo[b-xr0tyxur5m] {
    background: var(--gradient-button);
    color: white;
    border: none;
}

.btn-cancel-photo[b-xr0tyxur5m] {
    background: var(--background-primary);
    color: var(--text-secondary);
}

/* Quick Stats */
.stats-card[b-xr0tyxur5m] {
    background: var(--background-primary);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    padding: 24px;
    position: relative;
}

.stats-title[b-xr0tyxur5m] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: transparent;
}

.stat-item[b-xr0tyxur5m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

    .stat-item:last-child[b-xr0tyxur5m] {
        border-bottom: none;
    }

.stat-label[b-xr0tyxur5m] {
    font-size: 14px;
    color: var(--text-secondary);
}

.stat-value[b-xr0tyxur5m] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Privacy Card */
.privacy-card[b-xr0tyxur5m] {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 24px;
    position: relative;
    overflow: hidden;
}

    .privacy-card[b-xr0tyxur5m]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gradient-primary);
        opacity: 0.6;
    }

body.pink-theme .privacy-card[b-xr0tyxur5m]::before {
    background: linear-gradient(135deg, #f00c71 0%, #ff4d94 100%);
}

body.dark-theme .privacy-card[b-xr0tyxur5m]::before {
    background: linear-gradient(135deg, #00d4ff 0%, #00ff88 100%);
}

body.sunset-theme .privacy-card[b-xr0tyxur5m]::before {
    background: linear-gradient(135deg, #ff6b6b 0%, #9c88ff 100%);
}

.privacy-notice-title[b-xr0tyxur5m] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

    .privacy-notice-title i[b-xr0tyxur5m] {
        color: var(--color-accent-1);
        font-size: 18px;
    }

.privacy-notice-text[b-xr0tyxur5m] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 16px;
}

.privacy-link[b-xr0tyxur5m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-accent-1);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .privacy-link:hover[b-xr0tyxur5m] {
        text-decoration: underline;
    }

    .privacy-link i[b-xr0tyxur5m] {
        font-size: 11px;
    }

/* Info Section - Natural Flow */
.info-section[b-xr0tyxur5m] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.section-card[b-xr0tyxur5m] {
    background: var(--background-primary);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    padding: 32px;
}

.visual-preferences-card[b-xr0tyxur5m] {
    padding: 28px;
}

    .visual-preferences-card .card-header[b-xr0tyxur5m] {
        margin-bottom: 24px;
    }

.card-header[b-xr0tyxur5m] {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    background: transparent; /* Transparent header */
}

.card-title[b-xr0tyxur5m] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 4px;
}

.card-description[b-xr0tyxur5m] {
    font-size: 14px;
    color: var(--text-tertiary);
}

/* Forms */
.form-grid[b-xr0tyxur5m] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.form-group[b-xr0tyxur5m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group.full-width[b-xr0tyxur5m] {
        grid-column: 1 / -1;
    }

.form-label[b-xr0tyxur5m] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.required[b-xr0tyxur5m] {
    color: var(--primary-red);
    font-weight: normal;
}

.form-input[b-xr0tyxur5m],
.form-select[b-xr0tyxur5m],
.form-textarea[b-xr0tyxur5m] {
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    background: var(--background-secondary);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

    .form-input[readonly][b-xr0tyxur5m] {
        background: var(--background-tertiary);
        color: var(--text-tertiary);
        cursor: not-allowed;
    }

    /* Blazor's automatic validation classes */
    .form-input.invalid[b-xr0tyxur5m],
    .form-textarea.invalid[b-xr0tyxur5m] {
        border-color: var(--primary-red) !important;
        background: rgba(234, 67, 53, 0.05);
    }

    .form-input.valid.modified[b-xr0tyxur5m],
    .form-textarea.valid.modified[b-xr0tyxur5m] {
        border-color: var(--primary-green);
    }

.form-textarea[b-xr0tyxur5m] {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

    .form-input:focus:not([readonly])[b-xr0tyxur5m],
    .form-select:focus[b-xr0tyxur5m],
    .form-textarea:focus[b-xr0tyxur5m] {
        outline: none;
        border-color: var(--color-accent-1);
        background: var(--background-primary);
    }

/* Validation Messages */
.field-validation-error[b-xr0tyxur5m] {
    color: var(--primary-red);
    font-size: 12px;
    margin-top: 6px;
    padding: 6px 10px;
    background: linear-gradient(135deg, rgba(234, 67, 53, 0.08) 0%, rgba(234, 67, 53, 0.04) 100%);
    border-left: 3px solid var(--primary-red);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: slideDown-b-xr0tyxur5m 0.2s ease-out;
}

    .field-validation-error[b-xr0tyxur5m]::before {
        content: '\f071';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 12px;
        opacity: 0.8;
    }

@keyframes slideDown-b-xr0tyxur5m {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.field-validation-valid[b-xr0tyxur5m] {
    display: none;
}

.validation-summary-errors[b-xr0tyxur5m] {
    color: var(--primary-red);
    background: rgba(234, 67, 53, 0.1);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
}

    .validation-summary-errors ul[b-xr0tyxur5m] {
        margin: 0;
        padding-left: 20px;
    }

.char-counter[b-xr0tyxur5m] {
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: right;
    margin-top: 4px;
}

    .char-counter.warning[b-xr0tyxur5m] {
        color: var(--primary-yellow);
        font-weight: 500;
    }

.error-message[b-xr0tyxur5m] {
    background: rgba(234, 67, 53, 0.1);
    color: var(--primary-red);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Compact Preferences Styles */
.preferences-grid[b-xr0tyxur5m] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pref-row[b-xr0tyxur5m] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 36px;
}

.pref-label[b-xr0tyxur5m] {
    min-width: 140px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Compact Theme Selector */
.compact-theme-selector[b-xr0tyxur5m] {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}

.theme-option-compact[b-xr0tyxur5m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid transparent;
    background: var(--background-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    font-size: 13px;
}

    .theme-option-compact:hover[b-xr0tyxur5m] {
        background: var(--background-tertiary);
        transform: translateY(-1px);
        box-shadow: 0 2px 6px var(--shadow-color-light);
    }

    .theme-option-compact.selected[b-xr0tyxur5m] {
        background: linear-gradient(135deg, rgba(26, 115, 232, 0.12) 0%, rgba(26, 115, 232, 0.08) 100%);
        border-color: rgba(26, 115, 232, 0.2);
    }

body.pink-theme .theme-option-compact.selected[b-xr0tyxur5m] {
    background: linear-gradient(135deg, rgba(240, 12, 113, 0.12) 0%, rgba(240, 12, 113, 0.08) 100%);
    border-color: rgba(240, 12, 113, 0.2);
}

body.dark-theme .theme-option-compact.selected[b-xr0tyxur5m] {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 212, 255, 0.1) 100%);
    border-color: rgba(0, 212, 255, 0.25);
}

body.sunset-theme .theme-option-compact.selected[b-xr0tyxur5m] {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.12) 0%, rgba(255, 107, 107, 0.08) 100%);
    border-color: rgba(255, 107, 107, 0.2);
}

.theme-swatch[b-xr0tyxur5m] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.theme-option-compact span[b-xr0tyxur5m] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.theme-option-compact i[b-xr0tyxur5m] {
    margin-left: 4px;
    color: var(--color-accent-1);
    font-size: 10px;
    display: none;
}

.theme-option-compact.selected i[b-xr0tyxur5m] {
    display: inline;
}

/* Compact View Selector */
.compact-view-selector[b-xr0tyxur5m] {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}

.view-option-compact[b-xr0tyxur5m] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid transparent;
    background: var(--background-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
}

    .view-option-compact:hover[b-xr0tyxur5m] {
        background: var(--background-tertiary);
        transform: translateY(-1px);
        box-shadow: 0 2px 6px var(--shadow-color-light);
    }

    .view-option-compact.selected[b-xr0tyxur5m] {
        background: linear-gradient(135deg, rgba(26, 115, 232, 0.12) 0%, rgba(26, 115, 232, 0.08) 100%);
        border-color: rgba(26, 115, 232, 0.2);
    }

body.pink-theme .view-option-compact.selected[b-xr0tyxur5m] {
    background: linear-gradient(135deg, rgba(240, 12, 113, 0.12) 0%, rgba(240, 12, 113, 0.08) 100%);
    border-color: rgba(240, 12, 113, 0.2);
}

body.dark-theme .view-option-compact.selected[b-xr0tyxur5m] {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 212, 255, 0.1) 100%);
    border-color: rgba(0, 212, 255, 0.25);
}

body.sunset-theme .view-option-compact.selected[b-xr0tyxur5m] {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.12) 0%, rgba(255, 107, 107, 0.08) 100%);
    border-color: rgba(255, 107, 107, 0.2);
}

.view-option-compact i[b-xr0tyxur5m] {
    font-size: 14px;
    color: var(--text-tertiary);
    transition: color 0.2s ease;
}

.view-option-compact.selected i[b-xr0tyxur5m] {
    color: var(--color-accent-1);
}

.view-option-compact span[b-xr0tyxur5m] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Compact Communication Preferences */
.compact-checkbox-grid[b-xr0tyxur5m] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: linear-gradient(135deg, rgba(26, 115, 232, 0.03) 0%, rgba(52, 168, 83, 0.02) 100%);
    border-radius: 12px;
    padding: 4px;
}

body.pink-theme .compact-checkbox-grid[b-xr0tyxur5m] {
    background: linear-gradient(135deg, rgba(240, 12, 113, 0.03) 0%, rgba(255, 77, 148, 0.02) 100%);
}

body.dark-theme .compact-checkbox-grid[b-xr0tyxur5m] {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.05) 0%, rgba(0, 255, 136, 0.03) 100%);
}

body.sunset-theme .compact-checkbox-grid[b-xr0tyxur5m] {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.03) 0%, rgba(156, 136, 255, 0.02) 100%);
}

.checkbox-row[b-xr0tyxur5m] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--background-primary);
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .checkbox-row:hover[b-xr0tyxur5m] {
        background: linear-gradient(90deg, var(--background-primary) 0%, var(--background-secondary) 100%);
        transform: translateX(2px);
    }

/* Shared Checkbox Styles */
.checkbox-wrapper[b-xr0tyxur5m],
.checkbox-wrapper-inline[b-xr0tyxur5m] {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.checkbox-wrapper[b-xr0tyxur5m] {
    margin-top: 2px;
}

.checkbox-input[b-xr0tyxur5m] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

.checkbox-custom[b-xr0tyxur5m] {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: var(--background-primary);
    border: 2px solid var(--border-color);
    border-radius: 4px;
    transition: all 0.3s ease;
}

.checkbox-input:checked ~ .checkbox-custom[b-xr0tyxur5m] {
    background: var(--color-accent-1);
    border-color: var(--color-accent-1);
}

.checkbox-custom[b-xr0tyxur5m]::after {
    content: '';
    position: absolute;
    display: none;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-input:checked ~ .checkbox-custom[b-xr0tyxur5m]::after {
    display: block;
}

.checkbox-content[b-xr0tyxur5m] {
    flex: 1;
}

.checkbox-title[b-xr0tyxur5m] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.checkbox-desc[b-xr0tyxur5m] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.checkbox-content-inline[b-xr0tyxur5m] {
    flex: 1;
    min-width: 0;
}

    .checkbox-content-inline .checkbox-title[b-xr0tyxur5m] {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 2px;
    }

    .checkbox-content-inline .checkbox-desc[b-xr0tyxur5m] {
        font-size: 12px;
        color: var(--text-tertiary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.checkbox-frequency[b-xr0tyxur5m] {
    flex-shrink: 0;
}

.frequency-select[b-xr0tyxur5m] {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--background-secondary);
    color: var(--text-primary);
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .frequency-select:hover:not(:disabled)[b-xr0tyxur5m] {
        border-color: var(--color-accent-1);
    }

    .frequency-select:focus[b-xr0tyxur5m] {
        outline: none;
        border-color: var(--color-accent-1);
        box-shadow: 0 0 0 3px var(--shadow-color-light);
    }

    .frequency-select:disabled[b-xr0tyxur5m] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.comm-footer[b-xr0tyxur5m] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.unsubscribe-option[b-xr0tyxur5m] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.unsubscribe-link[b-xr0tyxur5m] {
    color: var(--text-tertiary);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.3s ease;
}

    .unsubscribe-link:hover[b-xr0tyxur5m] {
        color: var(--color-accent-1);
        text-decoration: underline;
    }

.footer-note[b-xr0tyxur5m] {
    font-size: 12px;
    color: var(--text-tertiary);
    font-style: italic;
}

.save-section[b-xr0tyxur5m] {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
}

.btn-save[b-xr0tyxur5m] {
    padding: 14px 32px;
    background: var(--gradient-button);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-save:hover:not(:disabled)[b-xr0tyxur5m] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px var(--shadow-color);
    }

    .btn-save:disabled[b-xr0tyxur5m] {
        opacity: 0.7;
        cursor: not-allowed;
    }

/* Notification */
.notification[b-xr0tyxur5m] {
    position: fixed;
    top: 40px;
    right: 20px;
    padding: 16px 24px;
    background: var(--background-primary);
    border-radius: 12px;
    box-shadow: 0 4px 16px var(--shadow-color);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1000;
    transform: translateX(400px);
    transition: transform 0.3s ease;
}

    .notification.show[b-xr0tyxur5m] {
        transform: translateX(0);
    }

    .notification.success i[b-xr0tyxur5m] {
        color: var(--primary-green);
        font-size: 20px;
    }

    .notification.error i[b-xr0tyxur5m] {
        color: var(--primary-red);
        font-size: 20px;
    }

/* ========================================
   RESPONSIVE DESIGN - ENHANCED VERSION
   ======================================== */

/* Large Screens - Optimal Layout */
@media (min-width: 1400px) {
    .profile-layout[b-xr0tyxur5m] {
        grid-template-columns: 360px 1fr;
    }
}

/* Medium-Large Screens */
@media (max-width: 1200px) {
    .profile-wrapper[b-xr0tyxur5m] {
        padding: 35px 35px 70px;
    }

    .profile-layout[b-xr0tyxur5m] {
        grid-template-columns: 320px 1fr;
        gap: 28px;
    }

    /* Forms remain in 2 columns for better tablet usage */
    .form-grid[b-xr0tyxur5m] {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

/* Tablets - Portrait */
@media (max-width: 1024px) {
    .profile-wrapper[b-xr0tyxur5m] {
        padding: 30px 30px 60px;
    }

    .profile-layout[b-xr0tyxur5m] {
        grid-template-columns: 280px 1fr;
        gap: 24px;
    }

    /* Single column forms for better readability */
    .form-grid[b-xr0tyxur5m] {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .form-group.full-width[b-xr0tyxur5m] {
        grid-column: 1;
    }
}

/* Small Tablets / Large Phones - Transition Point */
@media (max-width: 768px) {
    .profile-wrapper[b-xr0tyxur5m] {
        padding: 24px 20px 60px;
        max-width: 100%;
    }

    /* Stack layout vertically */
    .profile-layout[b-xr0tyxur5m] {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Remove sticky behavior on mobile */
    .left-column[b-xr0tyxur5m] {
        position: static;
        width: 100%;
        top: auto;
    }

    .sticky-content[b-xr0tyxur5m] {
        gap: 20px;
    }

    /* Adjust photo container */
    .photo-container[b-xr0tyxur5m] {
        width: 150px;
        height: 150px;
    }

    .photo-frame[b-xr0tyxur5m] {
        width: 150px;
        height: 150px;
    }

    /* Adjust page header */
    .page-header[b-xr0tyxur5m] {
        margin-bottom: 32px;
    }

    .page-title[b-xr0tyxur5m] {
        font-size: 32px;
    }

    .page-subtitle[b-xr0tyxur5m] {
        font-size: 16px;
    }

    /* Card adjustments */
    .section-card[b-xr0tyxur5m] {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .visual-preferences-card[b-xr0tyxur5m] {
        padding: 20px;
    }

    /* Forms definitely single column */
    .form-grid[b-xr0tyxur5m] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Preferences rows stack */
    .pref-row[b-xr0tyxur5m] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .pref-label[b-xr0tyxur5m] {
        min-width: auto;
        margin-bottom: 4px;
    }

    /* Theme and view selectors responsive */
    .compact-theme-selector[b-xr0tyxur5m],
    .compact-view-selector[b-xr0tyxur5m] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }

    .theme-option-compact[b-xr0tyxur5m],
    .view-option-compact[b-xr0tyxur5m] {
        flex: 1 1 calc(50% - 4px);
        min-width: 120px;
    }

    /* Checkbox adjustments */
    .checkbox-content-inline .checkbox-desc[b-xr0tyxur5m] {
        white-space: normal;
        overflow: visible;
        text-overflow: initial;
    }

    .checkbox-frequency[b-xr0tyxur5m] {
        margin-left: auto;
    }

    /* Save buttons full width */
    .save-section[b-xr0tyxur5m] {
        margin-top: 20px;
    }

    .btn-save[b-xr0tyxur5m] {
        width: 100%;
        justify-content: center;
    }

    .btn-save-photo[b-xr0tyxur5m],
    .btn-cancel-photo[b-xr0tyxur5m] {
        width: 100%;
    }
}

/* Mobile Phones */
@media (max-width: 480px) {
    .profile-wrapper[b-xr0tyxur5m] {
        padding: 20px 16px 50px;
    }

    /* Further reduce header sizes */
    .page-header[b-xr0tyxur5m] {
        margin-bottom: 28px;
    }

    .page-title[b-xr0tyxur5m] {
        font-size: 28px;
        margin-bottom: 8px;
    }

    .page-subtitle[b-xr0tyxur5m] {
        font-size: 14px;
    }

    /* More compact cards */
    .section-card[b-xr0tyxur5m] {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .card-header[b-xr0tyxur5m] {
        margin-bottom: 20px;
        padding-bottom: 16px;
    }

    .card-title[b-xr0tyxur5m] {
        font-size: 18px;
    }

    .card-description[b-xr0tyxur5m] {
        font-size: 13px;
    }

    /* Form adjustments */
    .form-group[b-xr0tyxur5m] {
        gap: 6px;
    }

    .form-label[b-xr0tyxur5m] {
        font-size: 12px;
    }

    .form-input[b-xr0tyxur5m],
    .form-select[b-xr0tyxur5m],
    .form-textarea[b-xr0tyxur5m] {
        padding: 10px 14px;
        font-size: 14px;
    }

    .form-textarea[b-xr0tyxur5m] {
        min-height: 100px;
    }

    /* Photo controls more compact */
    .photo-controls .btn-photo[b-xr0tyxur5m] {
        font-size: 12px;
        padding: 8px;
    }

    /* Stats card compact */
    .stat-item[b-xr0tyxur5m] {
        padding: 10px 0;
    }

    .stat-label[b-xr0tyxur5m],
    .stat-value[b-xr0tyxur5m] {
        font-size: 13px;
    }

    /* Privacy card compact */
    .privacy-notice-text[b-xr0tyxur5m] {
        font-size: 12px;
    }

    /* Single column for theme/view options */
    .theme-option-compact[b-xr0tyxur5m],
    .view-option-compact[b-xr0tyxur5m] {
        flex: 1 1 100%;
    }

    /* Checkbox rows compact */
    .checkbox-row[b-xr0tyxur5m] {
        padding: 10px 12px;
        gap: 12px;
    }

    .checkbox-content-inline .checkbox-title[b-xr0tyxur5m] {
        font-size: 13px;
    }

    .checkbox-content-inline .checkbox-desc[b-xr0tyxur5m] {
        font-size: 11px;
    }

    /* Hide frequency selector on mobile - can show in modal */
    .checkbox-frequency[b-xr0tyxur5m] {
        display: none;
    }

    /* Notification responsive */
    .notification[b-xr0tyxur5m] {
        right: 10px;
        left: 10px;
        width: auto;
        padding: 12px 16px;
        font-size: 14px;
    }
}

/* Very Small Mobile */
@media (max-width: 380px) {
    .profile-wrapper[b-xr0tyxur5m] {
        padding: 16px 12px 40px;
    }

    .page-title[b-xr0tyxur5m] {
        font-size: 24px;
    }

    /* Even smaller photo */
    .photo-container[b-xr0tyxur5m],
    .photo-frame[b-xr0tyxur5m] {
        width: 120px;
        height: 120px;
    }

    /* Smaller form elements */
    .form-input[b-xr0tyxur5m],
    .form-select[b-xr0tyxur5m],
    .form-textarea[b-xr0tyxur5m] {
        padding: 8px 12px;
        font-size: 13px;
    }

    .btn-save[b-xr0tyxur5m] {
        padding: 12px 24px;
        font-size: 14px;
    }

    /* Adjust photo status icon */
    .photo-status[b-xr0tyxur5m] {
        width: 35px;
        height: 35px;
    }

        .photo-status i[b-xr0tyxur5m] {
            font-size: 14px;
        }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .profile-wrapper[b-xr0tyxur5m] {
        padding: 20px;
    }

    .page-header[b-xr0tyxur5m] {
        margin-bottom: 24px;
    }

    .page-title[b-xr0tyxur5m] {
        font-size: 28px;
    }

    /* Keep 2-column form in landscape if space allows */
    @media (min-width: 640px) {
        .form-grid[b-xr0tyxur5m] {
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .form-group.full-width[b-xr0tyxur5m] {
            grid-column: 1 / -1;
        }
    }
}

/* Print Styles */
@media print {
    .photo-controls[b-xr0tyxur5m],
    .btn-save[b-xr0tyxur5m],
    .save-section[b-xr0tyxur5m],
    .notification[b-xr0tyxur5m],
    .btn-save-photo[b-xr0tyxur5m],
    .btn-cancel-photo[b-xr0tyxur5m],
    .photo-save-section[b-xr0tyxur5m] {
        display: none !important;
    }

    .profile-layout[b-xr0tyxur5m] {
        grid-template-columns: 1fr;
    }

    .left-column[b-xr0tyxur5m] {
        position: static;
    }

    .section-card[b-xr0tyxur5m] {
        page-break-inside: avoid;
        border: 1px solid #ddd;
        margin-bottom: 20px;
    }

    .profile-wrapper[b-xr0tyxur5m] {
        padding: 20px;
    }
}
/* _content/AinnaProduct/Components/AinnaSmartBillingAndPurchaseHistory.razor.rz.scp.css */
/* Import theme variables from app.css - these are already defined */

*[b-qswhspyqk9] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html[b-qswhspyqk9] {
    scroll-behavior: smooth;
}

body[b-qswhspyqk9] {
    overflow-x: hidden;
}

.billing-container[b-qswhspyqk9] {
    min-height: 100vh;
    background: linear-gradient(180deg, #f0f7ff 0%, #f8fbff 100%);
    position: relative;
    overflow-x: hidden;
}

/* Main Content */
.billing-wrapper[b-qswhspyqk9] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 40px 80px;
    min-height: 100vh;
}

.page-header[b-qswhspyqk9] {
    margin-bottom: 48px;
}

.page-title[b-qswhspyqk9] {
    font-size: 40px;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 12px;
}

.page-subtitle[b-qswhspyqk9] {
    font-size: 18px;
    color: var(--text-secondary);
}

/* Billing Layout - matching profile layout */
.billing-layout[b-qswhspyqk9] {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 32px;
    position: relative;
    align-items: start;
}

/* Left Column with Sticky Behavior */
.left-column[b-qswhspyqk9] {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    align-self: start;
    height: auto;
    z-index: 10;
}

.sticky-content[b-qswhspyqk9] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Plan Overview Card */
.plan-card[b-qswhspyqk9] {
    background: var(--gradient-primary);
    border-radius: 20px;
    padding: 24px;
    color: white;
    position: relative;
    overflow: hidden;
}

    .plan-card[b-qswhspyqk9]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        animation: rotate-b-qswhspyqk9 30s linear infinite;
    }

@keyframes rotate-b-qswhspyqk9 {
    to {
        transform: rotate(360deg);
    }
}

.plan-content[b-qswhspyqk9] {
    position: relative;
    z-index: 1;
}

.plan-badge[b-qswhspyqk9] {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255,255,255,0.2);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.plan-name[b-qswhspyqk9] {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
}

.plan-price[b-qswhspyqk9] {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 4px;
}

    .plan-price span[b-qswhspyqk9] {
        font-size: 16px;
        font-weight: 400;
        opacity: 0.9;
    }

.plan-renewal[b-qswhspyqk9] {
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 20px;
}

.plan-actions[b-qswhspyqk9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-plan[b-qswhspyqk9] {
    padding: 10px 16px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none;
}

    .btn-plan:hover[b-qswhspyqk9] {
        background: rgba(255,255,255,0.3);
    }

    .btn-plan.primary[b-qswhspyqk9] {
        background: white;
        color: var(--primary-blue);
        border: none;
    }

        .btn-plan.primary:hover[b-qswhspyqk9] {
            background: rgba(255,255,255,0.95);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

/* Usage Stats Card */
.usage-card[b-qswhspyqk9] {
    background: var(--background-primary);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    padding: 24px;
}

.usage-title[b-qswhspyqk9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: transparent;
}

.usage-item[b-qswhspyqk9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

    .usage-item:last-child[b-qswhspyqk9] {
        border-bottom: none;
    }

.usage-label[b-qswhspyqk9] {
    font-size: 14px;
    color: var(--text-secondary);
}

.usage-value[b-qswhspyqk9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.usage-progress[b-qswhspyqk9] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-bar[b-qswhspyqk9] {
    width: 60px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill[b-qswhspyqk9] {
    height: 100%;
    background: var(--primary-green);
    transition: width 0.3s ease;
}

/* Support Card */
.support-card[b-qswhspyqk9] {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 24px;
    position: relative;
    overflow: hidden;
}

    .support-card[b-qswhspyqk9]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gradient-primary);
        opacity: 0.6;
    }

.support-title[b-qswhspyqk9] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

    .support-title i[b-qswhspyqk9] {
        color: var(--color-accent-1);
        font-size: 18px;
    }

.support-text[b-qswhspyqk9] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 16px;
}

.support-links[b-qswhspyqk9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.support-link[b-qswhspyqk9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-accent-1);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .support-link:hover[b-qswhspyqk9] {
        text-decoration: underline;
    }

    .support-link i[b-qswhspyqk9] {
        font-size: 11px;
    }

/* Right Column: Info Section */
.info-section[b-qswhspyqk9] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.section-card[b-qswhspyqk9] {
    background: var(--background-primary);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    padding: 32px;
}

.card-header[b-qswhspyqk9] {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
}

.card-title[b-qswhspyqk9] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 4px;
}

.card-description[b-qswhspyqk9] {
    font-size: 14px;
    color: var(--text-tertiary);
}

/* Payment Notice */
.payment-notice[b-qswhspyqk9] {
    padding: 24px;
    background: linear-gradient(135deg, rgba(26, 115, 232, 0.05) 0%, rgba(52, 168, 83, 0.03) 100%);
    border-radius: 12px;
    border-left: 4px solid var(--color-accent-1);
}

body.theme-pink .payment-notice[b-qswhspyqk9] {
    background: linear-gradient(135deg, rgba(240, 12, 113, 0.05) 0%, rgba(255, 77, 148, 0.03) 100%);
}

body.theme-dark .payment-notice[b-qswhspyqk9] {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(0, 255, 136, 0.05) 100%);
}

body.theme-sunset .payment-notice[b-qswhspyqk9] {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.05) 0%, rgba(156, 136, 255, 0.03) 100%);
}

.payment-notice-icon[b-qswhspyqk9] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

    .payment-notice-icon i[b-qswhspyqk9] {
        color: var(--primary-green);
        font-size: 24px;
        margin-top: 4px;
    }

.payment-notice-content h3[b-qswhspyqk9] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.payment-notice-content p[b-qswhspyqk9] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.stripe-badge[b-qswhspyqk9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 8px 16px;
    background: white;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #635BFF;
}

body.theme-dark .stripe-badge[b-qswhspyqk9] {
    background: var(--background-secondary);
}

/* Subscription Details */
.subscription-details[b-qswhspyqk9] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.detail-row[b-qswhspyqk9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-color);
}

    .detail-row:last-child[b-qswhspyqk9] {
        border-bottom: none;
    }

.detail-label[b-qswhspyqk9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value[b-qswhspyqk9] {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
    max-width: 60%;
}

.subscription-info[b-qswhspyqk9] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(26, 115, 232, 0.05) 0%, rgba(52, 168, 83, 0.03) 100%);
    border-radius: 12px;
    margin-bottom: 24px;
}

body.theme-pink .subscription-info[b-qswhspyqk9] {
    background: linear-gradient(135deg, rgba(240, 12, 113, 0.05) 0%, rgba(255, 77, 148, 0.03) 100%);
}

body.theme-dark .subscription-info[b-qswhspyqk9] {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(0, 255, 136, 0.05) 100%);
}

body.theme-sunset .subscription-info[b-qswhspyqk9] {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.05) 0%, rgba(156, 136, 255, 0.03) 100%);
}

.subscription-info i[b-qswhspyqk9] {
    color: var(--color-accent-1);
    font-size: 16px;
    margin-top: 2px;
}

.subscription-info p[b-qswhspyqk9] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Forms */
.form-grid[b-qswhspyqk9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.form-group[b-qswhspyqk9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group.full-width[b-qswhspyqk9] {
        grid-column: 1 / -1;
    }

.form-label[b-qswhspyqk9] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.required[b-qswhspyqk9] {
    color: var(--primary-red);
    font-weight: normal;
}

.form-input[b-qswhspyqk9],
.form-select[b-qswhspyqk9] {
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    background: var(--background-secondary);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

    .form-input:focus[b-qswhspyqk9],
    .form-select:focus[b-qswhspyqk9] {
        outline: none;
        border-color: var(--color-accent-1);
        background: var(--background-primary);
    }

/* Validation */
.field-validation-error[b-qswhspyqk9] {
    color: var(--primary-red);
    font-size: 12px;
    margin-top: 6px;
}

/* History Table */
.history-wrapper[b-qswhspyqk9] {
    overflow-x: auto;
}

.history-table[b-qswhspyqk9] {
    width: 100%;
    border-collapse: collapse;
}

    .history-table th[b-qswhspyqk9] {
        text-align: left;
        padding: 16px;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid var(--border-color);
        white-space: nowrap;
    }

    .history-table td[b-qswhspyqk9] {
        padding: 20px 16px;
        font-size: 14px;
        color: var(--text-secondary);
        border-bottom: 1px solid var(--border-color);
    }

    .history-table tr:hover[b-qswhspyqk9] {
        background: var(--background-secondary);
    }

.invoice-id[b-qswhspyqk9] {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    transition: color 0.3s ease;
}

    .invoice-id:hover[b-qswhspyqk9] {
        color: var(--color-accent-1);
        text-decoration: underline;
    }

.status-badge[b-qswhspyqk9] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-paid[b-qswhspyqk9] {
    background: rgba(52, 168, 83, 0.1);
    color: var(--primary-green);
}

.status-pending[b-qswhspyqk9] {
    background: rgba(251, 188, 4, 0.1);
    color: var(--primary-yellow);
}

.status-failed[b-qswhspyqk9] {
    background: rgba(234, 67, 53, 0.1);
    color: var(--primary-red);
}

.amount[b-qswhspyqk9] {
    font-weight: 600;
    color: var(--text-primary);
}

/* Save Section */
.save-section[b-qswhspyqk9] {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-save[b-qswhspyqk9] {
    padding: 14px 32px;
    background: var(--gradient-button);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-save:hover:not(:disabled)[b-qswhspyqk9] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px var(--shadow-color);
    }

    .btn-save:disabled[b-qswhspyqk9] {
        opacity: 0.7;
        cursor: not-allowed;
    }

.btn-cancel[b-qswhspyqk9] {
    padding: 14px 32px;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn-cancel:hover[b-qswhspyqk9] {
        background: var(--background-secondary);
    }

.btn-danger[b-qswhspyqk9] {
    color: var(--primary-red);
    border-color: rgba(234, 67, 53, 0.3);
}

    .btn-danger:hover[b-qswhspyqk9] {
        background: rgba(234, 67, 53, 0.05);
        border-color: var(--primary-red);
    }

/* Load More */
.load-more[b-qswhspyqk9] {
    margin-top: 24px;
    text-align: center;
}

.btn-load[b-qswhspyqk9] {
    padding: 12px 24px;
    background: transparent;
    color: var(--color-accent-1);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn-load:hover:not(:disabled)[b-qswhspyqk9] {
        background: var(--background-secondary);
        border-color: var(--color-accent-1);
    }

    .btn-load:disabled[b-qswhspyqk9] {
        opacity: 0.7;
        cursor: not-allowed;
    }

/* Notification */
.notification[b-qswhspyqk9] {
    position: fixed;
    top: 40px;
    right: 20px;
    padding: 16px 24px;
    background: var(--background-primary);
    border-radius: 12px;
    box-shadow: 0 4px 16px var(--shadow-color);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1000;
    transform: translateX(400px);
    transition: transform 0.3s ease;
}

    .notification.show[b-qswhspyqk9] {
        transform: translateX(0);
    }

    .notification.success i[b-qswhspyqk9] {
        color: var(--primary-green);
        font-size: 20px;
    }

    .notification.error i[b-qswhspyqk9] {
        color: var(--primary-red);
        font-size: 20px;
    }

/* Spinner */
.spinner-small[b-qswhspyqk9] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-qswhspyqk9 0.8s linear infinite;
    margin-right: 8px;
}

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

/* Responsive */
@media (max-width: 1200px) {
    .billing-wrapper[b-qswhspyqk9] {
        padding: 30px;
    }

    .billing-layout[b-qswhspyqk9] {
        grid-template-columns: 300px 1fr;
    }
}

@media (max-width: 968px) {
    .billing-layout[b-qswhspyqk9] {
        grid-template-columns: 1fr;
    }

    .left-column[b-qswhspyqk9] {
        position: static;
    }

    .form-grid[b-qswhspyqk9] {
        grid-template-columns: 1fr;
    }

    .history-wrapper[b-qswhspyqk9] {
        margin: 0 -16px;
        padding: 0 16px;
    }
}

@media (max-width: 640px) {
    .billing-wrapper[b-qswhspyqk9] {
        padding: 20px;
    }

    .page-title[b-qswhspyqk9] {
        font-size: 32px;
    }

    .section-card[b-qswhspyqk9] {
        padding: 24px 20px;
    }

    .save-section[b-qswhspyqk9] {
        flex-direction: column;
    }

    .btn-save[b-qswhspyqk9],
    .btn-cancel[b-qswhspyqk9] {
        width: 100%;
    }
}
/* _content/AinnaProduct/Components/AinnaSmartChatControl2.razor.rz.scp.css */
/* Ainna Chat Component - Scoped CSS */

*[b-w3fp000udr] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Chat Section */
.chat-section[b-w3fp000udr] {
    width: 100%;
    min-width: 300px;
    /*max-width: 600px;*/

    height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    /*background: radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 119, 168, 0.1) 0%, transparent 50%), radial-gradient(circle at 40% 20%, rgba(120, 200, 255, 0.1) 0%, transparent 50%), linear-gradient(135deg, #fdfcfb 0%, #f9f8ff 20%, #fff9fc 40%, #fcf9ff 60%, #fffbfe 80%, #fbfaff 100%);*/
}

/* Decorative elements */
.decoration-1[b-w3fp000udr] {
    position: absolute;
    top: -128px;
    right: -128px;
    width: 384px;
    height: 384px;
    /*background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(236, 72, 153, 0.15) 50%, transparent 100%);*/
    border-radius: 50%;
    filter: blur(48px);
    animation: pulse-b-w3fp000udr 8s infinite;
    pointer-events: none;
}

.decoration-2[b-w3fp000udr] {
    position: absolute;
    bottom: -192px;
    left: -192px;
    width: 500px;
    height: 500px;
    /*background: linear-gradient(45deg, rgba(59, 130, 246, 0.2) 0%, rgba(99, 102, 241, 0.15) 50%, transparent 100%);*/
    border-radius: 50%;
    filter: blur(48px);
    animation: pulse-b-w3fp000udr 10s infinite;
    pointer-events: none;
}

.decoration-3[b-w3fp000udr] {
    position: absolute;
    top: 50%;
    right: 25%;
    width: 256px;
    height: 256px;
    /*background: linear-gradient(225deg, rgba(139, 92, 246, 0.15) 0%, rgba(168, 85, 247, 0.1) 50%, transparent 100%);*/
    border-radius: 50%;
    filter: blur(32px);
    animation: pulse-b-w3fp000udr 6s infinite;
    pointer-events: none;
}

@keyframes pulse-b-w3fp000udr {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* Large Greeting Section (Shows for messages 0-2) */
.greeting-section-large[b-w3fp000udr] {
    padding: 40px;
    position: relative;
    z-index: 10;
    border-bottom: 1px solid rgba(229, 231, 235, 0.3);
    overflow: hidden;
    animation: fadeIn-b-w3fp000udr 0.5s ease-out;
}
.greeting-title-large[b-w3fp000udr] {
    font-size: 72px;
    font-weight: bold;
    color: #111827;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

    /* Add this to ensure both spans have the same vertical alignment */
    .greeting-title-large span[b-w3fp000udr] {
        vertical-align: baseline;
        line-height: inherit;
    }
.greeting-name-large[b-w3fp000udr] {
    display: inline;
    font-weight: bold;
    background: linear-gradient(90deg, #f00c71 0%, #ff0080 50%, #f00c71 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #f00c71;
    font-size: 72px;
    /* Remove padding-bottom or make it symmetrical */
    /* padding-bottom: 10px; - Remove this */
    vertical-align: baseline; /* Add this to ensure proper alignment */
    line-height: inherit; /* Inherit the parent's line-height */
}

.greeting-emoji-large[b-w3fp000udr] {
    display: inline-block;
    margin-left: 12px;
    font-size: 72px;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease-out;
}

    .greeting-emoji-large.show[b-w3fp000udr] {
        opacity: 1;
        transform: scale(1);
    }

.greeting-subtitle-large[b-w3fp000udr] {
    margin-top:20px;
    color: #4b5563;
    font-size: 18px;
    font-weight: 500;
}

/* Small Greeting Section (Shows from message 3+) */
.greeting-section-small[b-w3fp000udr] {
    padding: 20px 40px;
    position: relative;
    z-index: 10;
    border-bottom: 1px solid rgba(229, 231, 235, 0.3);
    overflow: hidden;
    animation: slideInFromTop-b-w3fp000udr 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.greeting-title-small[b-w3fp000udr] {
    font-size: 32px;
    font-weight: bold;
    color: #111827;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.greeting-name-small[b-w3fp000udr] {
    display: inline;
    margin-left: 8px;
    font-weight: bold;
    background: linear-gradient(90deg, #f00c71 0%, #ff0080 50%, #f00c71 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #f00c71;
    font-size: 32px;
}

.greeting-emoji-small[b-w3fp000udr] {
    display: inline-block;
    margin-left: 8px;
    font-size: 32px;
    animation: bounceIn-b-w3fp000udr 0.5s ease-out 0.3s both;
}

.greeting-subtitle-small[b-w3fp000udr] {
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;
    opacity: 0.8;
}

/* Animations for greeting transitions */
@keyframes fadeIn-b-w3fp000udr {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInFromTop-b-w3fp000udr {
    from {
        opacity: 0;
        transform: translateY(-40px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes bounceIn-b-w3fp000udr {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}
/* Chat Container */
.chat-container[b-w3fp000udr] {
    flex: 1;
    padding: 24px 40px;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

.chat-wrapper[b-w3fp000udr] {
    height: 100%;
    /*background: rgba(255, 255, 255, 0.5);*/
    background-color:white;
    backdrop-filter: blur(24px);
    /* border-radius: 24px;
    border: 1px solid rgba(229, 231, 235, 0.25);*/
    overflow: hidden;
    position: relative;
    border-style: solid;
    border-width: 2px;
    border-color: #e3e5e8;
    border-radius: 24px;
    /*padding:94px;*/
    /*box-shadow: 0 20px 60px -10px rgba(120, 130, 150, 0.12), inset 0 2px 12px rgba(255, 255, 255, 0.8);*/
}

.messages-container[b-w3fp000udr] {
    height: 100%;
    overflow-y: auto;
    padding: 40px;
    scroll-behavior: smooth;
    position: relative;
    background-color: white;
   /* border-style: solid;
    border-width: 2px;
    border-color: chocolate;
    border-radius: 24px;*/
}

.top-fade[b-w3fp000udr] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 96px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    pointer-events: none;
    z-index: 10;
}

/* Message Cards */
.message-card[b-w3fp000udr] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(229, 231, 235, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    width: 100%;
    margin-bottom: 12px;
    transition: all 0.2s;
    animation: fadeInUp-b-w3fp000udr 0.4s ease-out;
}

    .message-card.last-user[b-w3fp000udr] {
        margin-bottom: 24px;
    }

    .message-card:hover[b-w3fp000udr] {
        transform: translateX(4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.08);
        background: rgba(255, 255, 255, 1);
    }

.message-avatar[b-w3fp000udr] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    background: #f3f4f6;
    
}

    .message-avatar img[b-w3fp000udr] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .message-avatar.ai[b-w3fp000udr] {
        background: linear-gradient(135deg, #f00c71 0%, #f31670c4 100%);
    }

    .message-avatar.user[b-w3fp000udr] {
        background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    }

.message-text-user[b-w3fp000udr] {
    flex: 1;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 650;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.message-text-ainna[b-w3fp000udr] {
    flex: 1;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 450;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* AI Response Card */
.ai-response-card[b-w3fp000udr] {
    padding-bottom: 24px;
    padding-top: 8px;
    animation: fadeInUp-b-w3fp000udr 0.5s ease-out;
}

.ai-card[b-w3fp000udr] {
    background: white;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border: 2px solid #f3f4f6;
    border-radius: 16px;
    position: relative;
    overflow: visible;
    transition: all 0.5s;
    width: 100%;
    min-height: 140px;
}

    .ai-card.thinking[b-w3fp000udr] {
        transform: scale(0.98);
        /*  background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
        border-color: #fbbf24;*/
        /*   background: linear-gradient(135deg, #fef7fb 0%, #fffbfe 100%);
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(240, 12, 113, 0.08);
        padding: 20px;
        color: black;*/
       /* background: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 100%);
        border-radius: 16px;*/
        box-shadow: 0 1px 3px rgba(240, 12, 113, 0.08);
        padding: 20px;
        /*color: #000000;*/
        border-radius: 16px;
        background: linear-gradient(90deg, #f00c71 0%, #ff0080 50%, #f00c71 100%);
        padding: 2px;
        border-radius: 16px;
        color: white;
    }

    .ai-card.special[b-w3fp000udr] {
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        min-height: 240px;
    }

    /* Special card backgrounds */
    .ai-card.special-hint[b-w3fp000udr],
    .ai-card.special-recommendation[b-w3fp000udr],
    .ai-card.special-question[b-w3fp000udr],
    .ai-card.special-insight[b-w3fp000udr] {
        /*background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);*/
        /*background: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 100%);
        border: 2px solid linear-gradient(90deg, #f00c71 0%, #ff0080 50%, #f00c71 100%) 1;
        background-clip: padding-box;*/
        /*border-image: linear-gradient(90deg, #f00c71 0%, #ff0080 50%, #f00c71 100%) 1;*/
        border-radius: 16px;
        background: linear-gradient(90deg, #f00c71 0%, #ff0080 50%, #f00c71 100%);
        padding: 2px;
        border-radius: 16px;
        color: white;
    }

    .ai-card.special-welcome[b-w3fp000udr] {
        background: linear-gradient(135deg, #fce7f3 0%, #ffe4e6 100%);
        border-color: #ec4899;
    }

/* Welcome Badge */
.welcome-badge[b-w3fp000udr] {
    position: absolute;
    top: -12px;
    left: 24px;
    padding: 6px 12px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #fbcfe8;
    color: #db2777;
}

/* Embedded Avatar */
.ai-avatar-embedded[b-w3fp000udr] {
    position: absolute;
    left: -16px;
    top: 20px;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    border: 2px solid #f3f4f6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f00c71 0%, #f31670c4 100%);
    color: white;
    font-size: 28px;
}

    .ai-avatar-embedded.with-badge[b-w3fp000udr] {
        top: 32px;
    }

    .ai-avatar-embedded.thinking[b-w3fp000udr] {
        animation: pulse-b-w3fp000udr 1.5s infinite;
    }

/* AI Content */
.ai-content[b-w3fp000udr] {
    padding-left: 56px;
    padding-right: 28px;
    padding-top: 24px;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: inherit;
}

    .ai-content.with-badge[b-w3fp000udr] {
        padding-top: 40px;
    }

/* Thinking Dots */
.thinking-dots[b-w3fp000udr] {
    display: flex;
    align-items: center;
    gap: 12px;
    color:yellow;
}

.dot-container[b-w3fp000udr] {
    display: flex;
    gap: 8px;
}

.thinking-dot[b-w3fp000udr] {
    width: 12px;
    height: 12px;
    /*background: #3b82f6;*/
    background-color:white;
    border-radius: 50%;
    animation: bounce-b-w3fp000udr 1.4s infinite;
}

    .thinking-dot:nth-child(1)[b-w3fp000udr] {
        animation-delay: 0ms;
    }

    .thinking-dot:nth-child(2)[b-w3fp000udr] {
        animation-delay: 150ms;
    }

    .thinking-dot:nth-child(3)[b-w3fp000udr] {
        animation-delay: 300ms;
    }

@keyframes bounce-b-w3fp000udr {
    0%, 60%, 100% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-10px);
    }
}

.thinking-text[b-w3fp000udr] {
    font-size: 16px;
    /*color: #6b7280;*/
    color:white;
    font-weight: 500;
}

/* AI Text */
.ai-text[b-w3fp000udr] {
    /*color: #111827;*/
    /*color:white;*/
    font-size: 16px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: 0.0em;
}

.typing-cursor[b-w3fp000udr] {
    display: inline-block;
    width: 2px;
    height: 24px;
    background: currentColor;
    margin-left: 4px;
    animation: blink-b-w3fp000udr 1s infinite;
    vertical-align: middle;
}

@keyframes blink-b-w3fp000udr {
    0%, 50% {
        opacity: 1;
    }

    51%, 100% {
        opacity: 0;
    }
}

/* Special Content Box */
@keyframes fadeInSmooth-b-w3fp000udr {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.special-content[b-w3fp000udr] {
    margin-top: 20px;
    margin-left: -8px;
    /*padding: 14px 16px;*/
    border-radius: 12px;
    /*background: rgb(255 251 221);*/
    border: solid;
    border-width: 1px;
    border-color: rgba(180, 180, 180,.2);
    opacity: 0;
    transform: translateY(8px);
    background: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 100%);
    border-radius: 14px;
    padding: 20px;
}

    .special-content.show[b-w3fp000udr] {
        animation: fadeInSmooth-b-w3fp000udr 0.3s ease-out forwards;
    }

.special-content-inner[b-w3fp000udr] {
    display: flex;
    align-items: flex-start;
    gap: 10px;



}

.special-icon[b-w3fp000udr] {
    font-size: 20px;
    flex-shrink: 0;
    opacity: 0.9;
}

.special-content-text[b-w3fp000udr] {
    flex: 1;
}

.special-highlight[b-w3fp000udr] {
    color: rgb(15, 14, 14);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.25;
    /*opacity: 0.95;*/
}

/* Input Area */
.input-area[b-w3fp000udr] {
    padding: 12px 40px 40px;
    position: relative;
    z-index: 10;
}

.input-wrapper[b-w3fp000udr] {
    position: relative;
}

.input-gradient[b-w3fp000udr] {
    position: absolute;
    inset: 0;
    /*background: linear-gradient(90deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 50%, rgba(236, 72, 153, 0.1) 100%);*/
    border-radius: 24px;
    filter: blur(48px);
}

.input-container[b-w3fp000udr] {
    position: relative;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(32px);
    border-radius: 16px;
    border: 1px solid rgba(229, 231, 235, 0.3);
    box-shadow: 0 12px 48px rgba(120, 130, 150, 0.12);
    transition: all 0.3s;
}

    .input-container:hover[b-w3fp000udr] {
        box-shadow: 0 16px 56px rgba(120, 130, 150, 0.18);
    }

    .input-container:focus-within[b-w3fp000udr] {
        box-shadow: 0 16px 64px rgba(59, 130, 246, 0.25);
        border-color: rgba(59, 130, 246, 0.3);
    }

.input-row[b-w3fp000udr] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 24px;
}

.message-input[b-w3fp000udr] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #374151;
    font-size: 18px;
    font-weight: 450;
    letter-spacing: -0.02em;
    line-height: 1.6;
    margin-top: 12px;
    min-height: 36px;
    max-height: 120px;
    resize: none;
    font-family: inherit;
    padding-right: 12px;
}

    .message-input[b-w3fp000udr]::placeholder {
        color: #9ca3af;
    }

    .message-input:disabled[b-w3fp000udr] {
        opacity: 0.5;
    }
    .message-input:focus[b-w3fp000udr] {
        border: none;
        outline: none;
        box-shadow: none;
    }

.input-divider[b-w3fp000udr] {
    width: 1px;
    height: 40px;
    background: #e5e7eb;
}

.send-btn[b-w3fp000udr] {
    padding: 12px 16px;
    border-radius: 12px;
    /*background: linear-gradient(90deg, #6366f1 0%, #3b82f6 50%, #2563eb 100%);*/
    background: linear-gradient(90deg, #f00c71 0%, #ff0080 50%, #f00c71 100%);
    color: white;
    font-weight: 600;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
}

    .send-btn:not(:disabled):hover[b-w3fp000udr] {
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
        transform: scale(1.03);
    }

    .send-btn:not(:disabled):active[b-w3fp000udr] {
        transform: scale(0.97);
    }

    .send-btn:disabled[b-w3fp000udr] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.input-footer[b-w3fp000udr] {
    padding: 0 24px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.input-hint[b-w3fp000udr],
.char-count[b-w3fp000udr] {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
}

/* Animations */
@keyframes fadeInUp-b-w3fp000udr {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin-b-w3fp000udr {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-spin[b-w3fp000udr] {
    animation: spin-b-w3fp000udr 1s linear infinite;
}

/* Scrollbar */
.messages-container[b-w3fp000udr]::-webkit-scrollbar {
    width: 6px;
}

.messages-container[b-w3fp000udr]::-webkit-scrollbar-track {
    background: transparent;
}

.messages-container[b-w3fp000udr]::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 3px;
}

    .messages-container[b-w3fp000udr]::-webkit-scrollbar-thumb:hover {
        background: #d1d5db;
    }
/* _content/AinnaProduct/Components/AinnaSmartToolbar.razor.rz.scp.css */
/* AinnaToolbar.razor.css - Scoped styles for AinnaToolbar component */

/* Backdrop for click-outside detection - CRITICAL for closing dropdowns */
.backdrop[b-3vnjiqk8ve] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999; /* Must be BELOW dropdowns (1000) but ABOVE everything else */
    background: rgba(0, 0, 0, 0.01); /* Barely visible - change to transparent after testing */
    cursor: default;
}
.nav-container[b-3vnjiqk8ve] {
    /*max-width: 2140px;*/
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 100px;
    box-sizing: border-box;
}

/* Ensure nav-left items are aligned left */
.nav-left[b-3vnjiqk8ve] {
    display: flex;
    align-items: center;
    gap: 16px; /* space between logo, project selector, and new project button */
}

/* Ensure nav-right items are aligned right */
.nav-right[b-3vnjiqk8ve] {
    display: flex;
    align-items: center;
    gap: 12px; /* space between referral badge and user profile */
}
/* Navigation Toolbar */
.nav-toolbar[b-3vnjiqk8ve] {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #dadce0;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px 0 rgba(60,64,67,0.07);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
    position: relative;
}

.nav-left[b-3vnjiqk8ve] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Logo */
.logo-section[b-3vnjiqk8ve] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 20px;
    border-right: 1px solid #dadce0;
}

.logo[b-3vnjiqk8ve] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}

    .logo:hover[b-3vnjiqk8ve] {
        transform: translateX(2px);
    }

.logo-icon[b-3vnjiqk8ve] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #f00c71 0%, #f31670c4 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    box-shadow: 0 2px 6px rgba(240, 12, 113, 0.2);
}

.logo-text[b-3vnjiqk8ve] {
    font-size: 22px;
    font-weight: 700;
    color: #202124;
    letter-spacing: -0.02em;
}

/* Project Selector */
.project-selector[b-3vnjiqk8ve] {
    min-width:400px;
    position: relative;
}

.project-button[b-3vnjiqk8ve] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #f8f9fa;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    font-size: 14px;
    color: #202124;
    min-width: 380px;
    width:100%;
}

    .project-button:hover[b-3vnjiqk8ve] {
        background: #f1f3f4;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .project-button.active[b-3vnjiqk8ve] {
        background: #f1f3f4;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

.project-icon[b-3vnjiqk8ve] {
    font-size: 16px;
    color: #5f6368;
}

.project-name[b-3vnjiqk8ve] {
    flex: 1;
    font-weight: 500;
    text-align: left;
    color: #202124;
}

.chevron[b-3vnjiqk8ve] {
    font-size: 10px;
    color: #5f6368;
    transition: transform 0.2s;
}

    .chevron.rotated[b-3vnjiqk8ve] {
        transform: rotate(180deg);
    }

/* Dropdown - CRITICAL z-index must be 1000 or higher */
.dropdown[b-3vnjiqk8ve] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 400px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(60,64,67,0.3), 0 4px 8px 3px rgba(60,64,67,0.15);
    border: 1px solid #dadce0;
    z-index: 1000; /* MUST be higher than backdrop (999) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

    .dropdown.show[b-3vnjiqk8ve] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.dropdown-search[b-3vnjiqk8ve] {
    padding: 12px;
    border-bottom: 1px solid #f3f4f6;
}

.search-box[b-3vnjiqk8ve] {
    position: relative;
}

.search-icon[b-3vnjiqk8ve] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 14px;
}

.search-input[b-3vnjiqk8ve] {
    width: 100%;
    padding: 8px 12px 8px 36px;
    background: #f8f9fa;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
    font-family: inherit;
}

    .search-input:focus[b-3vnjiqk8ve] {
        background: white;
        border-color: #f00c71;
        box-shadow: 0 0 0 3px rgba(240, 12, 113, 0.1);
    }

.dropdown-content[b-3vnjiqk8ve] {
    max-height: 320px;
    overflow-y: auto;
    padding: 8px;
}

.project-section[b-3vnjiqk8ve] {
    margin-bottom: 8px;
}

.section-title[b-3vnjiqk8ve] {
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    color: #5f6368;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.project-item[b-3vnjiqk8ve] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

    .project-item:hover[b-3vnjiqk8ve] {
        background: #f8f9fa;
    }

    .project-item.selected[b-3vnjiqk8ve] {
        background: rgba(240, 12, 113, 0.05);
        color: #f00c71;
    }

.project-item-icon[b-3vnjiqk8ve] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: #f3f4f6;
}

.project-item.selected .project-item-icon[b-3vnjiqk8ve] {
    background: rgba(240, 12, 113, 0.1);
}

.project-info[b-3vnjiqk8ve] {
    flex: 1;
}

.project-info-name[b-3vnjiqk8ve] {
    font-size: 14px;
    font-weight: 500;
    color: #202124;
    margin-bottom: 2px;
}

.project-info-time[b-3vnjiqk8ve] {
    font-size: 12px;
    color: #5f6368;
}

/* Create Button */
.create-btn[b-3vnjiqk8ve] {
    padding: 8px 16px;
    background: linear-gradient(135deg, #f00c71 0%, #f31670c4 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(240, 12, 113, 0.2);
}

    .create-btn:hover[b-3vnjiqk8ve] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(240, 12, 113, 0.3);
    }

    .create-btn:active[b-3vnjiqk8ve] {
        transform: translateY(0);
    }
    .create-btn:disabled[b-3vnjiqk8ve] {
        background-color:gray;
        
    }

.create-btn-text[b-3vnjiqk8ve] {
    display: inline;
}

/* Right Section */
.nav-right[b-3vnjiqk8ve] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Referral Badge */
.referral-badge[b-3vnjiqk8ve] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(52, 168, 83, 0.1) 0%, rgba(251, 188, 4, 0.1) 100%);
    border: 1px solid rgba(52, 168, 83, 0.2);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    font-weight: 500;
    color: #202124;
    font-family: inherit;
}

    .referral-badge:hover[b-3vnjiqk8ve] {
        background: linear-gradient(135deg, rgba(52, 168, 83, 0.15) 0%, rgba(251, 188, 4, 0.15) 100%);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(52, 168, 83, 0.2);
    }

.referral-icon[b-3vnjiqk8ve] {
    color: #f01976;
    font-size: 16px;
}

/* User Section */
.user-profile-container[b-3vnjiqk8ve] {
    position: relative;
}

.user-profile[b-3vnjiqk8ve] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 16px;
    background: #f8f9fa;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.2s;
}

    .user-profile:hover[b-3vnjiqk8ve] {
        background: #f1f3f4;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .user-profile.active[b-3vnjiqk8ve] {
        background: #f1f3f4;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

.user-name[b-3vnjiqk8ve] {
    font-size: 14px;
    font-weight: 500;
    color: #202124;
}
.user-avatar[b-3vnjiqk8ve] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f00c71 0%, #f31670c4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden; /* Clip content that exceeds the circle */
}

    .user-avatar img[b-3vnjiqk8ve] {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Maintains aspect ratio and fills the container */
        border-radius: 50%; /* Make the image circular */
    }
/*.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f00c71 0%, #f31670c4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
}*/

.chevron-icon[b-3vnjiqk8ve] {
    font-size: 10px;
    color: #5f6368;
    transition: transform 0.2s;
}

.user-profile.active .chevron-icon[b-3vnjiqk8ve] {
    transform: rotate(180deg);
}

/* User Dropdown Menu - CRITICAL z-index must be 1000 or higher */
.user-dropdown[b-3vnjiqk8ve] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px 0 rgba(60,64,67,0.3), 0 4px 8px 3px rgba(60,64,67,0.15);
    border: 1px solid #dadce0;
    min-width: 260px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000; /* MUST be higher than backdrop (999) */
}

    .user-dropdown.show[b-3vnjiqk8ve] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.dropdown-header[b-3vnjiqk8ve] {
    padding: 12px 16px 8px;
    border-bottom: 1px solid #dadce0;
    margin-bottom: 4px;
}

.dropdown-user-info[b-3vnjiqk8ve] {
    display: flex;
    align-items: center;
    gap: 12px;
}
.dropdown-avatar[b-3vnjiqk8ve] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f00c71 0%, #f31670c4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    font-weight: 600;
    overflow: hidden; /* Added: Clip content that exceeds the circle */
}

    .dropdown-avatar img[b-3vnjiqk8ve] {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Maintains aspect ratio and fills the container */
        border-radius: 50%; /* Make the image circular */
    }
/*.dropdown-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f00c71 0%, #f31670c4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    font-weight: 600;
}*/

.dropdown-user-details[b-3vnjiqk8ve] {
    flex: 1;
}

.dropdown-user-name[b-3vnjiqk8ve] {
    font-size: 14px;
    font-weight: 600;
    color: #202124;
    margin-bottom: 2px;
}

.dropdown-user-email[b-3vnjiqk8ve] {
    font-size: 12px;
    color: #5f6368;
}

.dropdown-menu-item[b-3vnjiqk8ve] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: #202124;
    text-decoration: none;
    transition: background 0.2s;
    cursor: pointer;
    font-size: 14px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    font-family: inherit;
}

    .dropdown-menu-item:hover[b-3vnjiqk8ve] {
        background: #f8f9fa;
    }

    .dropdown-menu-item i[b-3vnjiqk8ve] {
        width: 20px;
        color: #5f6368;
        font-size: 16px;
        text-align: center;
    }

    .dropdown-menu-item .plan-badge[b-3vnjiqk8ve] {
        margin-left: auto;
        font-size: 10px;
        padding: 2px 8px;
        background: rgba(52, 168, 83, 0.1);
        color: #34a853;
        border: 1px solid rgba(52, 168, 83, 0.2);
        border-radius: 10px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.dropdown-divider[b-3vnjiqk8ve] {
    height: 1px;
    background: #dadce0;
    margin: 4px 0;
}

.dropdown-menu-item.danger[b-3vnjiqk8ve] {
    color: #ea4335;
}

    .dropdown-menu-item.danger i[b-3vnjiqk8ve] {
        color: #ea4335;
    }

/* Scrollbar */
.dropdown-content[b-3vnjiqk8ve]::-webkit-scrollbar {
    width: 6px;
}

.dropdown-content[b-3vnjiqk8ve]::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown-content[b-3vnjiqk8ve]::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 3px;
}

    .dropdown-content[b-3vnjiqk8ve]::-webkit-scrollbar-thumb:hover {
        background: #cbd5e0;
    }

/* ========== RESPONSIVE STYLES ========== */

/* Tablet - 768px */
@media (max-width: 768px) {
    .nav-toolbar[b-3vnjiqk8ve] {
        padding: 12px 16px;
    }

    /* Hide referral badge */
    .referral-badge[b-3vnjiqk8ve] {
        display: none !important;
    }

    /* Icon-only create button */
    .create-btn-text[b-3vnjiqk8ve] {
        display: none !important;
    }

    .create-btn[b-3vnjiqk8ve] {
        padding: 8px 12px;
        min-width: auto;
    }

    /* Smaller project selector */
    .project-button[b-3vnjiqk8ve] {
        min-width: 180px;
    }

    .nav-left[b-3vnjiqk8ve] {
        gap: 12px;
    }
}

/* Mobile - 640px */
@media (max-width: 640px) {
    .nav-toolbar[b-3vnjiqk8ve] {
        padding: 12px;
    }

    /* Hide username */
    .user-name[b-3vnjiqk8ve] {
        display: none !important;
    }

    .user-profile[b-3vnjiqk8ve] {
        padding: 6px;
    }

    /* Smaller logo */
    .logo-icon[b-3vnjiqk8ve] {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .logo-text[b-3vnjiqk8ve] {
        font-size: 18px;
    }

    .logo-section[b-3vnjiqk8ve] {
        padding-right: 12px;
        gap: 12px;
    }

    /* Smaller project button */
    .project-button[b-3vnjiqk8ve] {
        min-width: 150px;
        padding: 6px 10px;
        font-size: 13px;
    }

    .nav-right[b-3vnjiqk8ve] {
        gap: 8px;
    }
}

/* Small Mobile - 480px - VERTICAL STACK */
@media (max-width: 480px) {
    .nav-toolbar[b-3vnjiqk8ve] {
        flex-direction: column;
        gap: 12px;
        padding: 12px;
        align-items: stretch;
    }

    /* First row: Logo and New Project */
    .nav-left[b-3vnjiqk8ve] {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 12px;
    }

    .logo-section[b-3vnjiqk8ve] {
        border-right: none;
        padding-right: 0;
        flex: 0 0 auto;
    }

    /* Project selector on its own row */
    .project-selector[b-3vnjiqk8ve] {
        order: 3;
        width: 100%;
        flex: 0 0 100%;
    }

    .project-button[b-3vnjiqk8ve] {
        width: 100%;
        min-width: unset;
        justify-content: space-between;
    }

    /* New project button stays with logo */
    .create-btn[b-3vnjiqk8ve] {
        order: 2;
        flex: 0 0 auto;
    }

    /* User profile on its own row */
    .nav-right[b-3vnjiqk8ve] {
        width: 100%;
        justify-content: flex-end;
        order: 4;
    }

    /* Full width dropdowns */
    .dropdown[b-3vnjiqk8ve] {
        width: calc(100vw - 24px);
        max-width: 400px;
        left: 50%;
        transform: translateX(-50%) translateY(-10px);
    }

        .dropdown.show[b-3vnjiqk8ve] {
            transform: translateX(-50%) translateY(0);
        }

    .user-dropdown[b-3vnjiqk8ve] {
        position: fixed;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* Very Small Mobile - 360px */
@media (max-width: 360px) {
    .nav-toolbar[b-3vnjiqk8ve] {
        padding: 10px 8px;
    }

    .logo-icon[b-3vnjiqk8ve] {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    .logo-text[b-3vnjiqk8ve] {
        font-size: 16px;
    }

    .project-button[b-3vnjiqk8ve] {
        padding: 6px 8px;
        font-size: 12px;
    }

    .user-avatar[b-3vnjiqk8ve] {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .create-btn[b-3vnjiqk8ve] {
        padding: 6px 10px;
        font-size: 16px;
    }
}
/* _content/AinnaProduct/Components/AnimatedPreviewLandingPage.razor.rz.scp.css */
/* Container */
.landing-container[b-drmw5bjbgb] {
    min-height: 100vh;
    background: var(--background-primary);
    background-image: var(--section-bg-1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow: hidden;
}

/* Header */
.header[b-drmw5bjbgb] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 10;
}

.brand[b-drmw5bjbgb] {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-heading);
    margin: 0;
}

/* Main Content */
.main-content[b-drmw5bjbgb] {
    width: 100%;
    max-width: 96rem;
    position: relative;
}

/* Phase Containers */
.phase-container[b-drmw5bjbgb] {
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

    .phase-container.visible[b-drmw5bjbgb] {
        opacity: 1;
        transform: scale(1);
    }

    .phase-container.hidden[b-drmw5bjbgb] {
        opacity: 0;
        transform: scale(0.95);
        pointer-events: none;
    }

.phase-overlay[b-drmw5bjbgb] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

    .phase-overlay.visible[b-drmw5bjbgb] {
        opacity: 1;
    }

    .phase-overlay.hidden[b-drmw5bjbgb] {
        opacity: 0;
        pointer-events: none;
    }

/* Input Phase */
.text-center[b-drmw5bjbgb] {
    text-align: center;
}

.mb-8[b-drmw5bjbgb] {
    margin-bottom: 1.5rem;
}

.mb-12[b-drmw5bjbgb] {
    margin-bottom: 2rem;
}

.main-heading[b-drmw5bjbgb] {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-heading);
    margin-bottom: 0.75rem;
    line-height: 1.2;
    padding: 0 1rem;
}

.sub-heading[b-drmw5bjbgb] {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
    padding: 0 1rem;
}

.input-wrapper[b-drmw5bjbgb] {
    position: relative;
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 0.5rem;
}

.input-box[b-drmw5bjbgb] {
    background: var(--card-bg-subtle);
    backdrop-filter: blur(24px);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px -5px var(--shadow-color-light);
    padding: 1rem;
    transition: all 0.3s ease;
}

    .input-box:hover[b-drmw5bjbgb] {
        box-shadow: 0 15px 40px -5px var(--shadow-color);
    }

.input-content[b-drmw5bjbgb] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}

.flex-1[b-drmw5bjbgb] {
    flex: 1;
}

.input-textarea[b-drmw5bjbgb] {
    width: 100%;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    resize: none;
    border: none;
    min-height: 60px;
}

    .input-textarea[b-drmw5bjbgb]::placeholder {
        color: var(--text-tertiary);
    }

.create-button[b-drmw5bjbgb] {
    background: var(--gradient-button);
    color: var(--background-primary);
    padding: 0.65rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.95rem;
    width: 100%;
}

    .create-button:hover[b-drmw5bjbgb] {
        box-shadow: 0 8px 12px -3px var(--shadow-color);
        transform: translateY(-2px) scale(1.02);
    }

.typing-indicator[b-drmw5bjbgb] {
    position: absolute;
    bottom: -0.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.65rem;
    height: 0.65rem;
    background: var(--color-accent-1);
    border-radius: 50%;
    animation: pulse-b-drmw5bjbgb 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Thinking Phase */
.thinking-animation[b-drmw5bjbgb] {
    position: relative;
    width: 6rem;
    height: 6rem;
    margin: 0 auto 1.5rem;
}

.orbit[b-drmw5bjbgb] {
    position: absolute;
    inset: 0;
}

.orbit-0[b-drmw5bjbgb] {
    animation: spin-b-drmw5bjbgb 2s linear infinite;
}

.orbit-1[b-drmw5bjbgb] {
    animation: spin-b-drmw5bjbgb 2.5s linear infinite;
    animation-delay: 0.2s;
}

.orbit-2[b-drmw5bjbgb] {
    animation: spin-b-drmw5bjbgb 3s linear infinite;
    animation-delay: 0.4s;
}

.particle[b-drmw5bjbgb] {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 20px currentColor;
}

.particle-0[b-drmw5bjbgb] {
    background: var(--color-accent-1);
}

.particle-1[b-drmw5bjbgb] {
    background: var(--color-accent-2);
}

.particle-2[b-drmw5bjbgb] {
    background: var(--color-accent-3);
}

.center-glow[b-drmw5bjbgb] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .center-glow[b-drmw5bjbgb]::after {
        content: '';
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        background: var(--gradient-button);
        animation: pulse-b-drmw5bjbgb 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        box-shadow: 0 0 40px var(--shadow-color);
    }

.thinking-text[b-drmw5bjbgb] {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-heading);
    margin-bottom: 1rem;
    padding: 0 1rem;
}

.progress-bar[b-drmw5bjbgb] {
    width: 12rem;
    height: 0.4rem;
    background: var(--border-color);
    border-radius: 9999px;
    margin: 0 auto;
    overflow: hidden;
}

.progress-fill[b-drmw5bjbgb] {
    height: 100%;
    background: var(--gradient-button);
    transition: width 0.1s ease;
    box-shadow: 0 0 10px var(--color-accent-1);
}

/* Showing Phase */
.result-heading[b-drmw5bjbgb] {
    font-size: 1.75rem;
    font-weight: bold;
    color: var(--text-heading);
    margin-bottom: 0.5rem;
    padding: 0 1rem;
}

.preview-wrapper[b-drmw5bjbgb] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    position: relative;
    perspective: 1000px;
}

.preview-image[b-drmw5bjbgb] {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 20px 60px -10px var(--shadow-color);
}

/* Main slide image with smooth transitions between changes */
.preview-slide-img[b-drmw5bjbgb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: slideImageIn-b-drmw5bjbgb 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.preview-gradient[b-drmw5bjbgb] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Use theme gradients for previews */
.gradient-0[b-drmw5bjbgb] {
    background: var(--gradient-primary);
}

.gradient-1[b-drmw5bjbgb] {
    background: var(--section-bg-2);
}

.gradient-2[b-drmw5bjbgb] {
    background: var(--section-bg-3);
}

.gradient-3[b-drmw5bjbgb] {
    background: var(--gradient-hero);
}

.gradient-4[b-drmw5bjbgb] {
    background: var(--gradient-button);
}

.preview-number[b-drmw5bjbgb] {
    color: var(--text-primary);
    font-size: 3rem;
    font-weight: bold;
    opacity: 0.2;
}

.flash-overlay[b-drmw5bjbgb] {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9), transparent 70%);
    pointer-events: none;
    animation: flashBurst-b-drmw5bjbgb 0.7s ease-out;
}

.loading-indicator[b-drmw5bjbgb] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 0.65rem;
    height: 0.65rem;
    background: var(--color-accent-1);
    border-radius: 50%;
    animation: pulse-b-drmw5bjbgb 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    box-shadow: 0 0 10px var(--color-accent-1);
    z-index: 10;
}

/* Final Grid */
.final-grid[b-drmw5bjbgb] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 0.5rem;
}

.grid-item[b-drmw5bjbgb] {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 15px 40px -10px var(--shadow-color);
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-fill-mode: backwards;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .grid-item:hover[b-drmw5bjbgb] {
        transform: scale(1.02);
        box-shadow: 0 20px 50px -10px var(--shadow-color);
    }

    /* Clean images in grid */
    .grid-item img[b-drmw5bjbgb] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.slide-left[b-drmw5bjbgb] {
    animation-name: slideFromLeftModern-b-drmw5bjbgb;
}

.slide-right[b-drmw5bjbgb] {
    animation-name: slideFromRightModern-b-drmw5bjbgb;
}

.slide-up[b-drmw5bjbgb] {
    animation-name: slideFromUpModern-b-drmw5bjbgb;
}

.slide-down[b-drmw5bjbgb] {
    animation-name: slideFromDownModern-b-drmw5bjbgb;
}

.grid-gradient[b-drmw5bjbgb] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Use theme accent colors for final grid */
.gradient-final-0[b-drmw5bjbgb] {
    background: var(--gradient-primary);
}

.gradient-final-1[b-drmw5bjbgb] {
    background: var(--gradient-hero);
}

.gradient-final-2[b-drmw5bjbgb] {
    background: linear-gradient(135deg, var(--color-accent-2) 0%, var(--color-accent-3) 100%);
}

.gradient-final-3[b-drmw5bjbgb] {
    background: linear-gradient(135deg, var(--color-accent-1) 0%, var(--color-accent-2) 100%);
}

.completion-badge[b-drmw5bjbgb] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    animation: badgeFadeIn-b-drmw5bjbgb 0.5s ease-out 0.3s backwards;
}

.badge-content[b-drmw5bjbgb] {
    text-align: center;
    animation: badgeScale-b-drmw5bjbgb 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s backwards;
}

.badge-emoji[b-drmw5bjbgb] {
    font-size: 2.5rem;
    margin-bottom: 0.25rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.badge-text[b-drmw5bjbgb] {
    font-size: 1rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* CTA Phase */
.cta-container[b-drmw5bjbgb] {
    max-width: 56rem;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
    animation: ctaFadeIn-b-drmw5bjbgb 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-badge[b-drmw5bjbgb] {
    display: inline-block;
    background: var(--gradient-button);
    color: var(--background-primary);
    padding: 0.5rem 1.25rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    animation: ctaBadgeSlide-b-drmw5bjbgb 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards;
    box-shadow: 0 4px 12px var(--shadow-color);
}

.cta-badge-text[b-drmw5bjbgb] {
    display: block;
}

.cta-heading[b-drmw5bjbgb] {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--text-heading);
    margin-bottom: 1rem;
    line-height: 1.2;
    animation: ctaHeadingSlide-b-drmw5bjbgb 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s backwards;
}

.cta-subheading[b-drmw5bjbgb] {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    animation: ctaHeadingSlide-b-drmw5bjbgb 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s backwards;
}

.cta-features[b-drmw5bjbgb] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    text-align: left;
}

.cta-feature[b-drmw5bjbgb] {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--card-bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    animation: ctaFeatureSlide-b-drmw5bjbgb 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

    .cta-feature:nth-child(1)[b-drmw5bjbgb] {
        animation-delay: 0.5s;
    }

    .cta-feature:nth-child(2)[b-drmw5bjbgb] {
        animation-delay: 0.6s;
    }

    .cta-feature:nth-child(3)[b-drmw5bjbgb] {
        animation-delay: 0.7s;
    }

    .cta-feature:nth-child(4)[b-drmw5bjbgb] {
        animation-delay: 0.8s;
    }

    .cta-feature:hover[b-drmw5bjbgb] {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px var(--shadow-color-light);
        border-color: var(--color-accent-1);
    }

.cta-feature-icon[b-drmw5bjbgb] {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.cta-feature-text[b-drmw5bjbgb] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .cta-feature-text strong[b-drmw5bjbgb] {
        color: var(--text-heading);
        font-size: 1rem;
        font-weight: 600;
    }

    .cta-feature-text span[b-drmw5bjbgb] {
        color: var(--text-secondary);
        font-size: 0.875rem;
        line-height: 1.4;
    }

.cta-button[b-drmw5bjbgb] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--gradient-button);
    color: var(--background-primary);
    padding: 1rem 2.5rem;
    border-radius: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px var(--shadow-color);
    animation: ctaButtonPop-b-drmw5bjbgb 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1s backwards;
}

    .cta-button:hover[b-drmw5bjbgb] {
        transform: translateY(-4px) scale(1.05);
        box-shadow: 0 15px 40px var(--shadow-color);
    }

.cta-button-arrow[b-drmw5bjbgb] {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.cta-button:hover .cta-button-arrow[b-drmw5bjbgb] {
    transform: translateX(4px);
}

.cta-footer[b-drmw5bjbgb] {
    margin-top: 1.5rem;
    color: var(--text-tertiary);
    font-size: 0.95rem;
    animation: ctaFooterFade-b-drmw5bjbgb 0.6s ease 1.2s backwards;
}

/* ===========================
   ANIMATIONS
   =========================== */

/* Base Animations */
@keyframes spin-b-drmw5bjbgb {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse-b-drmw5bjbgb {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

/* Preview Slide Transitions */
@keyframes slideImageIn-b-drmw5bjbgb {
    0% {
        transform: translateX(-100%) scale(0.8) rotateY(-45deg);
        opacity: 0;
        filter: brightness(1.5) blur(15px);
    }

    40% {
        transform: translateX(-20%) scale(0.95) rotateY(-10deg);
        filter: brightness(1.2) blur(5px);
    }

    70% {
        transform: translateX(5%) scale(1.05) rotateY(5deg);
        filter: brightness(1.1) blur(0);
    }

    100% {
        transform: translateX(0) scale(1) rotateY(0);
        opacity: 1;
        filter: brightness(1) blur(0);
    }
}

@keyframes flashBurst-b-drmw5bjbgb {
    0% {
        opacity: 1;
        transform: scale(0.5);
        background: radial-gradient(circle at center, rgba(255, 255, 255, 1), transparent 50%);
    }

    30% {
        opacity: 0.7;
        transform: scale(1);
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.8), transparent 60%);
    }

    60% {
        opacity: 0.3;
        transform: scale(1.3);
    }

    100% {
        opacity: 0;
        transform: scale(2);
        background: radial-gradient(circle at center, rgba(255, 255, 255, 0), transparent 80%);
    }
}

/* Grid Slide Animations */
@keyframes slideFromLeftModern-b-drmw5bjbgb {
    0% {
        transform: translateX(-120%) rotate(-8deg) scale(0.8);
        opacity: 0;
        filter: blur(8px);
    }

    60% {
        transform: translateX(5%) rotate(2deg) scale(1.05);
        filter: blur(0);
    }

    100% {
        transform: translateX(0) rotate(0) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes slideFromRightModern-b-drmw5bjbgb {
    0% {
        transform: translateX(120%) rotate(8deg) scale(0.8);
        opacity: 0;
        filter: blur(8px);
    }

    60% {
        transform: translateX(-5%) rotate(-2deg) scale(1.05);
        filter: blur(0);
    }

    100% {
        transform: translateX(0) rotate(0) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes slideFromUpModern-b-drmw5bjbgb {
    0% {
        transform: translateY(-120%) rotate(-4deg) scale(0.8);
        opacity: 0;
        filter: blur(8px);
    }

    60% {
        transform: translateY(5%) rotate(1deg) scale(1.05);
        filter: blur(0);
    }

    100% {
        transform: translateY(0) rotate(0) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes slideFromDownModern-b-drmw5bjbgb {
    0% {
        transform: translateY(120%) rotate(4deg) scale(0.8);
        opacity: 0;
        filter: blur(8px);
    }

    60% {
        transform: translateY(-5%) rotate(-1deg) scale(1.05);
        filter: blur(0);
    }

    100% {
        transform: translateY(0) rotate(0) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

/* Badge Animations */
@keyframes badgeFadeIn-b-drmw5bjbgb {
    from {
        opacity: 0;
        backdrop-filter: blur(0);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(10px);
    }
}

@keyframes badgeScale-b-drmw5bjbgb {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    70% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* CTA Animations */
@keyframes ctaFadeIn-b-drmw5bjbgb {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ctaBadgeSlide-b-drmw5bjbgb {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ctaHeadingSlide-b-drmw5bjbgb {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ctaFeatureSlide-b-drmw5bjbgb {
    from {
        opacity: 0;
        transform: translateX(-30px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes ctaButtonPop-b-drmw5bjbgb {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ctaFooterFade-b-drmw5bjbgb {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ===========================
   RESPONSIVE BREAKPOINTS
   =========================== */

/* Small Mobile: 320px - 480px */
@media (max-width: 480px) {
    .landing-container[b-drmw5bjbgb] {
        padding: 0.5rem;
    }

    .header[b-drmw5bjbgb] {
        top: 0.75rem;
        left: 0.75rem;
    }

    .brand[b-drmw5bjbgb] {
        font-size: 1.1rem;
    }

    .main-heading[b-drmw5bjbgb] {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .sub-heading[b-drmw5bjbgb] {
        font-size: 0.875rem;
    }

    .mb-8[b-drmw5bjbgb] {
        margin-bottom: 1rem;
    }

    .mb-12[b-drmw5bjbgb] {
        margin-bottom: 1.5rem;
    }

    .input-box[b-drmw5bjbgb] {
        padding: 0.75rem;
        border-radius: 0.5rem;
    }

    .input-textarea[b-drmw5bjbgb] {
        font-size: 0.875rem;
        min-height: 50px;
    }

    .create-button[b-drmw5bjbgb] {
        padding: 0.6rem 1rem;
        font-size: 0.875rem;
    }

    .thinking-animation[b-drmw5bjbgb] {
        width: 5rem;
        height: 5rem;
    }

    .particle[b-drmw5bjbgb] {
        width: 0.6rem;
        height: 0.6rem;
    }

    .center-glow[b-drmw5bjbgb]::after {
        width: 2.5rem;
        height: 2.5rem;
    }

    .thinking-text[b-drmw5bjbgb] {
        font-size: 1.25rem;
    }

    .progress-bar[b-drmw5bjbgb] {
        width: 10rem;
        height: 0.35rem;
    }

    .result-heading[b-drmw5bjbgb] {
        font-size: 1.35rem;
    }

    .preview-number[b-drmw5bjbgb] {
        font-size: 2.5rem;
    }

    .preview-image[b-drmw5bjbgb] {
        border-radius: 0.75rem;
    }

    .loading-indicator[b-drmw5bjbgb] {
        top: 0.75rem;
        right: 0.75rem;
        width: 0.5rem;
        height: 0.5rem;
    }

    .grid-item[b-drmw5bjbgb] {
        border-radius: 0.5rem;
    }

    .badge-emoji[b-drmw5bjbgb] {
        font-size: 2rem;
    }

    .badge-text[b-drmw5bjbgb] {
        font-size: 0.875rem;
    }

    /* CTA Mobile */
    .cta-container[b-drmw5bjbgb] {
        padding: 1.5rem 1rem;
    }

    .cta-heading[b-drmw5bjbgb] {
        font-size: 1.75rem;
    }

    .cta-subheading[b-drmw5bjbgb] {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .cta-features[b-drmw5bjbgb] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .cta-feature[b-drmw5bjbgb] {
        padding: 1rem;
    }

    .cta-feature-icon[b-drmw5bjbgb] {
        font-size: 1.75rem;
    }

    .cta-button[b-drmw5bjbgb] {
        padding: 0.875rem 2rem;
        font-size: 1rem;
        width: 100%;
        justify-content: center;
    }
}

/* Mobile: 481px - 768px */
@media (min-width: 481px) and (max-width: 768px) {
    .landing-container[b-drmw5bjbgb] {
        padding: 1rem;
    }

    .main-heading[b-drmw5bjbgb] {
        font-size: 1.75rem;
    }

    .sub-heading[b-drmw5bjbgb] {
        font-size: 0.95rem;
    }

    .thinking-animation[b-drmw5bjbgb] {
        width: 6.5rem;
        height: 6.5rem;
    }

    .center-glow[b-drmw5bjbgb]::after {
        width: 3.25rem;
        height: 3.25rem;
    }

    .thinking-text[b-drmw5bjbgb] {
        font-size: 1.4rem;
    }

    .progress-bar[b-drmw5bjbgb] {
        width: 14rem;
    }

    .result-heading[b-drmw5bjbgb] {
        font-size: 1.6rem;
    }

    .preview-number[b-drmw5bjbgb] {
        font-size: 3.5rem;
    }

    .final-grid[b-drmw5bjbgb] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .badge-emoji[b-drmw5bjbgb] {
        font-size: 2.75rem;
    }

    /* CTA Mobile */
    .cta-features[b-drmw5bjbgb] {
        grid-template-columns: 1fr;
    }

    .cta-button[b-drmw5bjbgb] {
        width: 100%;
        justify-content: center;
    }
}

/* Tablet: 769px - 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .landing-container[b-drmw5bjbgb] {
        padding: 1.5rem;
    }

    .brand[b-drmw5bjbgb] {
        font-size: 1.35rem;
    }

    .main-heading[b-drmw5bjbgb] {
        font-size: 2.5rem;
    }

    .sub-heading[b-drmw5bjbgb] {
        font-size: 1.1rem;
    }

    .input-content[b-drmw5bjbgb] {
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
    }

    .create-button[b-drmw5bjbgb] {
        width: auto;
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }

    .thinking-animation[b-drmw5bjbgb] {
        width: 7rem;
        height: 7rem;
    }

    .particle[b-drmw5bjbgb] {
        width: 0.875rem;
        height: 0.875rem;
    }

    .center-glow[b-drmw5bjbgb]::after {
        width: 3.5rem;
        height: 3.5rem;
    }

    .thinking-text[b-drmw5bjbgb] {
        font-size: 1.65rem;
    }

    .progress-bar[b-drmw5bjbgb] {
        width: 15rem;
    }

    .result-heading[b-drmw5bjbgb] {
        font-size: 2rem;
    }

    .preview-number[b-drmw5bjbgb] {
        font-size: 4.5rem;
    }

    .final-grid[b-drmw5bjbgb] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .badge-emoji[b-drmw5bjbgb] {
        font-size: 3rem;
    }

    .badge-text[b-drmw5bjbgb] {
        font-size: 1.1rem;
    }

    /* CTA Tablet */
    .cta-heading[b-drmw5bjbgb] {
        font-size: 2.25rem;
    }

    .cta-subheading[b-drmw5bjbgb] {
        font-size: 1.125rem;
    }
}

/* Desktop: 1025px and up */
@media (min-width: 1025px) {
    .landing-container[b-drmw5bjbgb] {
        padding: 2rem;
    }

    .header[b-drmw5bjbgb] {
        top: 2rem;
        left: 2rem;
    }

    .brand[b-drmw5bjbgb] {
        font-size: 1.5rem;
    }

    .main-heading[b-drmw5bjbgb] {
        font-size: 3rem;
    }

    .sub-heading[b-drmw5bjbgb] {
        font-size: 1.25rem;
    }

    .mb-8[b-drmw5bjbgb] {
        margin-bottom: 2rem;
    }

    .mb-12[b-drmw5bjbgb] {
        margin-bottom: 3rem;
    }

    .input-content[b-drmw5bjbgb] {
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
    }

    .input-box[b-drmw5bjbgb] {
        padding: 1.5rem;
        border-radius: 1rem;
    }

    .input-textarea[b-drmw5bjbgb] {
        font-size: 1.125rem;
        min-height: 70px;
    }

    .create-button[b-drmw5bjbgb] {
        width: auto;
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }

    .typing-indicator[b-drmw5bjbgb] {
        width: 0.75rem;
        height: 0.75rem;
    }

    .thinking-animation[b-drmw5bjbgb] {
        width: 8rem;
        height: 8rem;
        margin-bottom: 2rem;
    }

    .particle[b-drmw5bjbgb] {
        width: 1rem;
        height: 1rem;
    }

    .center-glow[b-drmw5bjbgb]::after {
        width: 4rem;
        height: 4rem;
        box-shadow: 0 0 60px var(--shadow-color);
    }

    .thinking-text[b-drmw5bjbgb] {
        font-size: 1.875rem;
    }

    .progress-bar[b-drmw5bjbgb] {
        width: 16rem;
        height: 0.5rem;
    }

    .result-heading[b-drmw5bjbgb] {
        font-size: 2.25rem;
    }

    .preview-image[b-drmw5bjbgb] {
        max-width: 80rem;
        border-radius: 1.5rem;
        box-shadow: 0 25px 50px -12px var(--shadow-color);
    }

    .preview-number[b-drmw5bjbgb] {
        font-size: 6rem;
    }

    .loading-indicator[b-drmw5bjbgb] {
        top: 1.5rem;
        right: 1.5rem;
        width: 0.75rem;
        height: 0.75rem;
    }

    .final-grid[b-drmw5bjbgb] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        max-width: 72rem;
    }

    .grid-item[b-drmw5bjbgb] {
        border-radius: 1rem;
        box-shadow: 0 25px 50px -12px var(--shadow-color);
    }

    .badge-emoji[b-drmw5bjbgb] {
        font-size: 3.75rem;
        margin-bottom: 0.5rem;
    }

    .badge-text[b-drmw5bjbgb] {
        font-size: 1.25rem;
    }
}

/* Large Desktop: 1440px and up */
@media (min-width: 1440px) {
    .preview-wrapper[b-drmw5bjbgb] {
        padding: 0 1rem;
    }

    .final-grid[b-drmw5bjbgb] {
        max-width: 80rem;
        gap: 2rem;
    }
}
/* _content/AinnaProduct/Components/Layout/MainLayout.razor.rz.scp.css */
/* Full viewport */
html[b-oibdebzfhm], body[b-oibdebzfhm], #app[b-oibdebzfhm] {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #ffffff; /* white background */
    color: #000000; /* default text color */
    font-family: Arial, sans-serif;
}

/* App container takes full height */
.app-container[b-oibdebzfhm] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header */
.app-header[b-oibdebzfhm] {
    background-color: #f5f5f5;
    padding: 1rem 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Main content grows */
.app-main[b-oibdebzfhm] {
    flex: 1;
    /*padding: 2rem;*/
    background-color: #ffffff; /* ensures content background is white */
}

/* Footer */
.app-footer[b-oibdebzfhm] {
    background-color: #f5f5f5;
    padding: 1rem 2rem;
    text-align: center;
    font-size: 0.9rem;
    color: #555555;
}
/* _content/AinnaProduct/Components/PaymentForm.razor.rz.scp.css */
/* PaymentModal.razor.css - Scoped Styles */

/* Enhanced Color Variables */
[b-5u41zk90xq] * {
    --primary: #f00c71;
    --primary-dark: #d4095f;
    --primary-light: #ff3389;
    --primary-gradient: linear-gradient(135deg, #f00c71 0%, #ff3389 100%);
    --primary-gradient-soft: linear-gradient(135deg, rgba(240, 12, 113, 0.08) 0%, rgba(255, 51, 137, 0.04) 100%);
    --accent: #7C3AED;
    --accent-light: #A78BFA;
    --accent-gradient: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
    --yellow: #FCD34D;
    --yellow-amber: #FBBF24;
    --yellow-orange: #F59E0B;
    --yellow-gradient: linear-gradient(135deg, rgba(252, 211, 77, 0.15) 0%, rgba(251, 191, 36, 0.08) 50%, rgba(245, 158, 11, 0.05) 100%);
    --success: #10B981;
    --success-light: #34D399;
    --warning: #F59E0B;
    --error: #EF4444;
    --error-light: #FCA5A5;
    --background: #FFFFFF;
    --surface-light: #FAFBFC;
    --surface-gradient: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    --border: #E5E7EB;
    --border-light: #F3F4F6;
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --text-tertiary: #9CA3AF;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-colored: 0 20px 40px -10px rgba(240, 12, 113, 0.25);
}

/* Container */
.modal-container[b-5u41zk90xq] {
    position: fixed;
    inset: 0;
    z-index: 10000 !important;
    animation: fadeIn-b-5u41zk90xq 0.2s ease-out;
}

@keyframes fadeIn-b-5u41zk90xq {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Enhanced Backdrop with Warm Gradient */
.modal-backdrop[b-5u41zk90xq] {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, rgba(252, 211, 77, 0.08) 0%, rgba(251, 191, 36, 0.06) 30%, rgba(0, 0, 0, 0.5) 100%) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 9999 !important;
}

/* Modal - Desktop Only */
.modal[b-5u41zk90xq] {
    position: fixed;
    inset: 0;
    z-index: 10001 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

    .modal.show[b-5u41zk90xq] {
        display: flex !important;
    }

.modal-wrapper[b-5u41zk90xq] {
    position: relative;
    width: 100%;
    max-width: 1180px;
    height: 88vh;
    max-height: 860px;
    animation: slideUp-b-5u41zk90xq 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideUp-b-5u41zk90xq {
    from {
        transform: translateY(30px) scale(0.95);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Enhanced Modal Content with Gradient Border */
.modal-content[b-5u41zk90xq] {
    position: relative;
    background: #FFFFFF !important;
    border-radius: 24px;
    box-shadow: var(--shadow-2xl), 0 0 0 1px rgba(240, 12, 113, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .modal-content[b-5u41zk90xq]::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 24px;
        padding: 1px;
        background: linear-gradient(135deg, var(--primary), var(--yellow-amber));
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0.1;
        pointer-events: none;
    }

/* Enhanced Header with Subtle Yellow Accent */
.modal-header[b-5u41zk90xq] {
    padding: 1.5rem 1.875rem;
    background: linear-gradient(to right, rgba(252, 211, 77, 0.04) 0%, rgba(251, 191, 36, 0.02) 50%, rgba(245, 158, 11, 0.01) 100%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
    position: relative;
}

    .modal-header[b-5u41zk90xq]::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.3), rgba(252, 211, 77, 0.2), transparent);
    }

.header-container[b-5u41zk90xq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header-left[b-5u41zk90xq] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.header-logo[b-5u41zk90xq] {
    height: 32px;
}

.header-title[b-5u41zk90xq] {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

.header-right[b-5u41zk90xq] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-shrink: 0;
}

.stripe-logo[b-5u41zk90xq] {
    height: 24px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

    .stripe-logo:hover[b-5u41zk90xq] {
        opacity: 1;
    }

/* Enhanced Close Button */
.close-button[b-5u41zk90xq] {
    background: linear-gradient(135deg, rgba(240, 12, 113, 0.05) 0%, rgba(124, 58, 237, 0.02) 100%);
    border: 1px solid rgba(240, 12, 113, 0.15);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--primary) !important;
}

    .close-button:hover[b-5u41zk90xq] {
        background: var(--primary-gradient);
        border-color: var(--primary);
        transform: rotate(90deg);
    }

    .close-button svg[b-5u41zk90xq] {
        color: var(--primary) !important;
        transition: color 0.2s ease;
    }

    .close-button:hover svg[b-5u41zk90xq] {
        color: #FFFFFF !important;
    }

/* Main Body */
.modal-body[b-5u41zk90xq] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    background: var(--surface-gradient) !important;
}

/* Desktop Column Split 40:60 */
.content-columns[b-5u41zk90xq] {
    display: grid;
    grid-template-columns: minmax(380px, 40%) minmax(400px, 60%);
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* Customer Panel with Subtle Yellow Background */
.customer-panel[b-5u41zk90xq] {
    background: linear-gradient(180deg, rgba(252, 211, 77, 0.02) 0%, rgba(251, 191, 36, 0.01) 100%) !important;
    border-right: 1px solid var(--border);
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 1.875rem;
    min-height: 0;
    max-height: 100%;
    scrollbar-width: thin;
    scrollbar-color: #D1D5DB #F3F4F6;
}

/* Enhanced Customer Card */
.customer-card[b-5u41zk90xq] {
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(251, 191, 36, 0.08);
}

.card-header[b-5u41zk90xq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 1.375rem;
    background: linear-gradient(135deg, rgba(252, 211, 77, 0.15) 0%, /* Cool yellow */
    rgba(251, 191, 36, 0.08) 50%, /* Amber yellow */
    rgba(245, 158, 11, 0.05) 100%); /* Light orange-yellow */
    border-bottom: 1px solid rgba(251, 191, 36, 0.15);
}

.card-icon[b-5u41zk90xq] {
    color: #F59E0B;
    flex-shrink: 0;
}

.card-title[b-5u41zk90xq] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary) !important;
    margin: 0;
    letter-spacing: -0.01em;
}

.card-body[b-5u41zk90xq] {
    padding: 1.5rem 1.375rem;
}

/* Enhanced Form Controls */
.form-group-elegant[b-5u41zk90xq] {
    margin-bottom: 1.375rem;
    position: relative;
}

.form-label-elegant[b-5u41zk90xq] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary) !important;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

    .form-label-elegant .required[b-5u41zk90xq] {
        color: var(--primary);
        margin-left: 2px;
    }

.input-wrapper[b-5u41zk90xq] {
    position: relative;
}

.form-control-elegant[b-5u41zk90xq] {
    width: 100%;
    padding: 0.75rem 0.9375rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text-primary) !important;
    background: #FFFFFF !important;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    transition: all 0.2s ease;
    outline: none;
}

    .form-control-elegant:hover[b-5u41zk90xq] {
        border-color: var(--accent-light);
        background: #FFFFFF !important;
    }

    /* Better Focus State without Double Line */
    .form-control-elegant:focus[b-5u41zk90xq] {
        border-color: var(--primary);
        background: linear-gradient(to right, rgba(240, 12, 113, 0.02) 0%, rgba(124, 58, 237, 0.01) 100%) !important;
        box-shadow: 0 0 0 4px rgba(240, 12, 113, 0.1);
    }

    .form-control-elegant[b-5u41zk90xq]::placeholder {
        color: var(--text-tertiary) !important;
        font-size: 0.8125rem;
    }

    /* Validation Error State */
    .form-control-elegant.error[b-5u41zk90xq] {
        border-color: var(--error);
        background: linear-gradient(to right, rgba(254, 242, 242, 1), rgba(255, 255, 255, 1)) !important;
        border-width: 2px;
    }

        .form-control-elegant.error:focus[b-5u41zk90xq] {
            border-color: var(--error);
            box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
        }

/* Validation Message */
.validation-message[b-5u41zk90xq] {
    display: none;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    padding: 0.375rem 0.625rem;
    border-radius: 6px;
    align-items: center;
    gap: 0.375rem;
    animation: slideDown-b-5u41zk90xq 0.2s ease-out;
}

@keyframes slideDown-b-5u41zk90xq {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.validation-message.error[b-5u41zk90xq] {
    display: flex;
    color: var(--error);
    background: linear-gradient(to right, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
    border-left: 3px solid var(--error);
}

.validation-message svg[b-5u41zk90xq] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Enhanced Security Note with Green Trust Colors */
.security-note[b-5u41zk90xq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, /* Green-500 */
    rgba(16, 185, 129, 0.05) 100%); /* Emerald-500 */
    border-radius: 12px;
    border: 1px solid rgba(34, 197, 94, 0.15);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.08);
}

.note-icon[b-5u41zk90xq] {
    color: #16A34A; /* Green-600 */
    flex-shrink: 0;
}

.note-content[b-5u41zk90xq] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.note-title[b-5u41zk90xq] {
    font-size: 0.8125rem;
    color: #15803D; /* Green-700 */
    font-weight: 700;
    letter-spacing: -0.01em;
}

.note-text[b-5u41zk90xq] {
    font-size: 0.6875rem;
    color: #16A34A; /* Green-600 */
    opacity: 0.9;
}

/* Payment Panel */
.payment-panel[b-5u41zk90xq] {
    background: #FFFFFF !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    min-height: 0;
    max-height: 100%;
    scrollbar-width: thin;
    scrollbar-color: #D1D5DB #F3F4F6;
}

.payment-container[b-5u41zk90xq] {
    padding: 1.875rem 2.125rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Enhanced Order Summary with Cool Yellow Gradient */
.order-summary-compact[b-5u41zk90xq] {
    background: linear-gradient(135deg, rgba(252, 211, 77, 0.12) 0%, /* Cool yellow */
    rgba(251, 191, 36, 0.06) 50%, /* Amber yellow */
    rgba(245, 158, 11, 0.03) 100%); /* Light orange-yellow */
    border-radius: 16px;
    border: 1px solid rgba(251, 191, 36, 0.12);
    padding: 1.5rem;
    margin-bottom: 1.75rem;
    min-height: 140px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

    .order-summary-compact[b-5u41zk90xq]::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 120px;
        height: 120px;
        background: linear-gradient(135deg, rgba(252, 211, 77, 0.2) 0%, rgba(251, 191, 36, 0.1) 100%);
        border-radius: 50%;
        transform: translate(20px, -20px);
    }

.order-inner[b-5u41zk90xq] {
    display: flex;
    align-items: flex-start;
    gap: 1.125rem;
    position: relative;
}

.order-icon-wrapper[b-5u41zk90xq] {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #FCD34D 0%, #FBBF24 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 10px 25px -5px rgba(251, 191, 36, 0.25);
}

.order-icon[b-5u41zk90xq] {
    color: #FFFFFF;
    width: 22px;
    height: 22px;
}

.order-details[b-5u41zk90xq] {
    flex: 1;
    min-height: 100px;
}

.order-product[b-5u41zk90xq] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-primary) !important;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.01em;
}

.order-description[b-5u41zk90xq] {
    font-size: 0.8125rem;
    color: var(--text-secondary) !important;
    margin: 0;
    line-height: 1.5;
}

.order-price[b-5u41zk90xq] {
    text-align: right;
    flex-shrink: 0;
    padding-left: 1rem;
}

.price-label[b-5u41zk90xq] {
    display: block;
    font-size: 0.6875rem;
    color: var(--text-tertiary) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.price-amount[b-5u41zk90xq] {
    display: block;
    font-size: 1.625rem;
    font-weight: 800;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

/* Enhanced Payment Section */
.payment-section-elegant[b-5u41zk90xq] {
    background: linear-gradient(180deg, rgba(252, 211, 77, 0.03) 0%, #FFFFFF 100%) !important;
    border: 1px solid rgba(251, 191, 36, 0.08);
    border-radius: 16px;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-md);
}

.payment-header-elegant[b-5u41zk90xq] {
    padding: 1.375rem 1.625rem;
    background: rgba(252, 211, 77, 0.05) !important;
    border-bottom: 1px solid rgba(251, 191, 36, 0.08);
}

.payment-title-wrapper[b-5u41zk90xq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.payment-title[b-5u41zk90xq] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary) !important;
    margin: 0;
    letter-spacing: -0.01em;
}

.payment-icon[b-5u41zk90xq] {
    color: #FBBF24;
}

/* Stripe Element */
.stripe-element-elegant[b-5u41zk90xq] {
    padding: 2rem 1.875rem;
    min-height: 260px;
    background: #FFFFFF !important;
    position: relative;
    flex: 1;
}

/* Loading State */
.loading-overlay[b-5u41zk90xq] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    background: rgba(255, 255, 255, 0.95) !important;
    z-index: 10;
}

.loading-spinner[b-5u41zk90xq] {
    width: 36px;
    height: 36px;
    border: 3px solid #F0F1F3;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-5u41zk90xq 0.8s linear infinite;
}

@keyframes spin-b-5u41zk90xq {
    to {
        transform: rotate(360deg);
    }
}

.loading-text[b-5u41zk90xq] {
    font-size: 0.875rem;
    color: var(--text-secondary) !important;
    font-weight: 500;
}

/* Alerts */
.alert[b-5u41zk90xq] {
    margin: 1rem 1.5rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.8125rem;
}

.alert-error[b-5u41zk90xq] {
    background: #FEF2F2 !important;
    border: 1px solid #FEE2E2 !important;
    color: #DC2626 !important;
}

.alert-icon[b-5u41zk90xq] {
    flex-shrink: 0;
}

/* Enhanced Payment Button */
.btn-payment-elegant[b-5u41zk90xq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 280px;
    margin: 0 auto 1.75rem;
    padding: 1rem 1.75rem;
    background: var(--primary-gradient) !important;
    color: white !important;
    /*#FFFFFF !important;*/
    border: none;
    border-radius: 14px;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-colored);
    position: relative;
    overflow: hidden;
}

    .btn-payment-elegant[b-5u41zk90xq]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .btn-payment-elegant:hover:not(:disabled)[b-5u41zk90xq] {
        transform: translateY(-2px);
        box-shadow: 0 20px 40px -10px rgba(240, 12, 113, 0.4);
    }

        .btn-payment-elegant:hover:not(:disabled)[b-5u41zk90xq]::before {
            width: 400px;
            height: 400px;
        }

    .btn-payment-elegant:active:not(:disabled)[b-5u41zk90xq] {
        transform: translateY(0);
    }

    .btn-payment-elegant:disabled[b-5u41zk90xq] {
        opacity: 0.5;
        cursor: not-allowed;
        box-shadow: none;
    }

.btn-icon[b-5u41zk90xq] {
    flex-shrink: 0;
    color:white;
    /*#FFFFFF !important;*/
    position: relative;
    z-index: 1;
}

.btn-payment-elegant span[b-5u41zk90xq] {
    position: relative;
    z-index: 1;
    color:white;
}

.payment-button-container[b-5u41zk90xq] {
    display: flex;
    justify-content: center;
    padding: 1rem 1.875rem 1.75rem;
}

.btn-processing[b-5u41zk90xq] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    position: relative;
    z-index: 1;
}

.btn-spinner[b-5u41zk90xq] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-5u41zk90xq 0.8s linear infinite;
}

/* Empty State */
.empty-state[b-5u41zk90xq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    color: var(--text-tertiary) !important;
}

.empty-state-icon[b-5u41zk90xq] {
    color: #E5E7EB;
    margin-bottom: 1rem;
}

.empty-state-text[b-5u41zk90xq] {
    font-size: 0.875rem;
    margin: 0;
    color: var(--text-tertiary) !important;
}

/* Scrollbar Styling - Neutral */
.customer-panel[b-5u41zk90xq]::-webkit-scrollbar,
.payment-panel[b-5u41zk90xq]::-webkit-scrollbar {
    width: 6px;
}

.customer-panel[b-5u41zk90xq]::-webkit-scrollbar-track,
.payment-panel[b-5u41zk90xq]::-webkit-scrollbar-track {
    background: #F3F4F6;
    border-radius: 6px;
}

.customer-panel[b-5u41zk90xq]::-webkit-scrollbar-thumb,
.payment-panel[b-5u41zk90xq]::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 6px;
}

    .customer-panel[b-5u41zk90xq]::-webkit-scrollbar-thumb:hover,
    .payment-panel[b-5u41zk90xq]::-webkit-scrollbar-thumb:hover {
        background: #9CA3AF;
    }

/* Ensure all text is visible */
.modal-content *[b-5u41zk90xq] {
    color: var(--text-primary);
}

.modal-content h1[b-5u41zk90xq],
.modal-content h2[b-5u41zk90xq],
.modal-content h3[b-5u41zk90xq],
.modal-content h4[b-5u41zk90xq],
.modal-content h5[b-5u41zk90xq],
.modal-content h6[b-5u41zk90xq] {
    color: var(--text-primary) !important;
}

/* RESPONSIVE DESIGN - ALL SMALL SCREENS GET MOBILE EXPERIENCE */

/* Everything 1024px and below gets full-screen mobile experience */
@media (max-width: 1024px) {
    .modal[b-5u41zk90xq] {
        padding: 0;
        align-items: stretch;
    }

    .modal-wrapper[b-5u41zk90xq] {
        width: 100%;
        height: 100vh;
        max-width: none;
        max-height: none;
    }

    .modal-content[b-5u41zk90xq] {
        border-radius: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

        .modal-content[b-5u41zk90xq]::before {
            display: none;
        }

    .modal-header[b-5u41zk90xq] {
        padding: 1.25rem 1.5rem;
        flex-shrink: 0;
    }

    /* CRITICAL: Make body scrollable for all small screens */
    .modal-body[b-5u41zk90xq] {
        flex: 1;
        overflow-y: auto !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    .content-columns[b-5u41zk90xq] {
        display: block;
        height: auto;
        min-height: 100%;
    }

    .customer-panel[b-5u41zk90xq],
    .payment-panel[b-5u41zk90xq] {
        max-height: none;
        height: auto;
        overflow: visible;
        padding: 1.5rem;
        border: none;
    }

    .customer-panel[b-5u41zk90xq] {
        border-bottom: 1px solid var(--border);
        border-right: none;
    }

    .payment-container[b-5u41zk90xq] {
        padding: 1.5rem;
        min-height: auto;
        padding-bottom: 2.5rem;
    }

    .form-control-elegant[b-5u41zk90xq] {
        font-size: 16px;
        padding: 0.875rem 1rem;
        min-height: 44px;
    }

    .stripe-element-elegant[b-5u41zk90xq] {
        min-height: 220px;
        padding: 1.75rem;
    }

    .btn-payment-elegant[b-5u41zk90xq] {
        max-width: 100%;
        width: calc(100% - 2rem);
        margin: 1rem;
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }

    .payment-button-container[b-5u41zk90xq] {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .order-summary-compact[b-5u41zk90xq] {
        min-height: 130px;
    }
}

/* Mobile-specific refinements */
@media (max-width: 640px) {
    .modal-header[b-5u41zk90xq] {
        padding: 1rem 1.25rem;
    }

    .header-title[b-5u41zk90xq] {
        font-size: 1.125rem;
    }

    .stripe-logo[b-5u41zk90xq] {
        display: none;
    }

    .close-button[b-5u41zk90xq] {
        width: 36px;
        height: 36px;
    }

    .customer-panel[b-5u41zk90xq],
    .payment-panel[b-5u41zk90xq] {
        padding: 1.25rem;
    }

    .payment-container[b-5u41zk90xq] {
        padding: 1.25rem;
    }

    .stripe-element-elegant[b-5u41zk90xq] {
        min-height: 200px;
        padding: 1.5rem;
    }

    .order-inner[b-5u41zk90xq] {
        flex-direction: column;
        text-align: center;
    }

    .order-price[b-5u41zk90xq] {
        text-align: center;
        padding: 0;
        margin-top: 1rem;
    }

    .validation-message[b-5u41zk90xq] {
        font-size: 0.6875rem;
    }
}

/* Very small screens */
@media (max-width: 375px) {
    .header-title[b-5u41zk90xq] {
        font-size: 1rem;
    }

    .modal-header[b-5u41zk90xq] {
        padding: 0.875rem 1rem;
    }

    .customer-panel[b-5u41zk90xq],
    .payment-panel[b-5u41zk90xq] {
        padding: 1rem;
    }

    .order-summary-compact[b-5u41zk90xq] {
        padding: 1.25rem 1rem;
    }
}

/* Landscape orientation on smaller devices */
@media (max-height: 600px) and (max-width: 1024px) {
    .modal-header[b-5u41zk90xq] {
        padding: 0.875rem 1.25rem;
    }

    .customer-panel[b-5u41zk90xq],
    .payment-panel[b-5u41zk90xq] {
        padding: 1rem;
    }

    .stripe-element-elegant[b-5u41zk90xq] {
        min-height: 180px;
    }
}

/* Improved focus states for accessibility */
*:focus-visible[b-5u41zk90xq] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.form-control-elegant:focus-visible[b-5u41zk90xq] {
    outline: none; /* Using custom focus style */
}

.close-button:focus-visible[b-5u41zk90xq],
.btn-payment-elegant:focus-visible[b-5u41zk90xq] {
    outline-offset: 4px;
}

/* Print Styles */
@media print {
    .modal-backdrop[b-5u41zk90xq] {
        display: none;
    }

    .modal[b-5u41zk90xq] {
        position: static;
    }

    .modal-content[b-5u41zk90xq] {
        box-shadow: none;
        border: 1px solid #000;
    }

    .close-button[b-5u41zk90xq],
    .btn-payment-elegant[b-5u41zk90xq] {
        display: none;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *[b-5u41zk90xq],
    *[b-5u41zk90xq]::before,
    *[b-5u41zk90xq]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* _content/AinnaProduct/Components/ProdComponents/AinnaBringFriendPromo.razor.rz.scp.css */
/* PromoCodePanel.razor.css - Scoped CSS for Blazor Component */

/* Promo Banner */
.promo-banner[b-u94lkfnrwz] {
    --ainna-primary: #f00c71;
    --ainna-primary-dark: #d00560;
    --ainna-primary-light: #ff4d9a;
    --ainna-success: #10b981;
    --ainna-text-primary: #111827;
    --ainna-text-secondary: #6b7280;
    --ainna-text-tertiary: #9ca3af;
    --ainna-border: #e5e7eb;
    --ainna-radius: 12px;
    --purple-primary: #6366f1;
    --purple-dark: #5558e3;
    --purple-light: #818cf8;
    --purple-subtle: rgba(99, 102, 241, 0.08);
    --purple-border: rgba(99, 102, 241, 0.2);
    --golden-primary: #f59e0b;
    --golden-light: #fbbf24;
    --golden-dark: #d97706;
    --golden-text: #92400e;
    background: linear-gradient(135deg, white 0%, #fafafa 100%);
    border: 1px solid #e5e7eb;
    border-radius: var(--ainna-radius);
    padding: 24px 28px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    animation: slideInFromTop-b-u94lkfnrwz 0.8s ease-out;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    width: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Container for centered content */
.promo-content-wrapper[b-u94lkfnrwz] {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

/* Main section with badge and code */
.promo-code-section[b-u94lkfnrwz] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-direction: column;
    align-items: center;
}

/* Golden Promo Badge - Eye-catching */
.promo-badge[b-u94lkfnrwz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--golden-text);
    background: linear-gradient(135deg, var(--golden-light) 0%, var(--golden-primary) 100%);
    padding: 6px 14px;
    border-radius: 100px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
    margin-bottom: 12px;
    position: relative;
    animation: gentlePulse-b-u94lkfnrwz 2.5s ease-in-out infinite;
}

    .promo-badge[b-u94lkfnrwz]::before {
        content: '🎁';
        font-size: 14px;
    }

/* Promo Code Box with subtle border - increased height */
.promo-code-box[b-u94lkfnrwz] {
    display: flex;
    align-items: center;
    background: white;
    border: 2px dashed var(--ainna-border);
    border-radius: 8px;
    padding: 16px 12px;
    gap: 8px;
    width: 100%;
    max-width: 450px;
    position: relative;
    min-height: 64px;
}

/* Promo Code Display - Golden, attention-grabbing, larger font */
.promo-code-display[b-u94lkfnrwz] {
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--golden-primary) 0%, var(--golden-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.12em;
    padding: 0 12px;
    flex: 1;
    text-align: center;
    position: relative;
}

/* Button Container */
.button-group[b-u94lkfnrwz] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Primary Button with accent color */
.copy-btn-compact[b-u94lkfnrwz] {
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--ainna-primary) 0%, var(--ainna-primary-dark) 100%);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    position: relative;
    font-family: inherit;
}

    .copy-btn-compact:hover[b-u94lkfnrwz] {
        background: linear-gradient(135deg, var(--ainna-primary-dark) 0%, #b00550 100%);
        transform: translateY(-1px);
    }

    .copy-btn-compact.copied[b-u94lkfnrwz] {
        background: var(--ainna-success);
    }

/* Secondary Button with accent border */
.copy-btn-outline[b-u94lkfnrwz] {
    padding: 8px 16px;
    background: white;
    border: 1.5px solid var(--ainna-primary);
    border-radius: 6px;
    color: var(--ainna-primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    position: relative;
    font-family: inherit;
}

    .copy-btn-outline:hover[b-u94lkfnrwz] {
        background: rgba(240, 12, 113, 0.05);
        border-color: var(--ainna-primary-dark);
        transform: translateY(-1px);
    }

    .copy-btn-outline.copied[b-u94lkfnrwz] {
        background: rgba(16, 185, 129, 0.08);
        border-color: var(--ainna-success);
        color: var(--ainna-success);
    }

/* Explanatory text */
.promo-main-text[b-u94lkfnrwz] {
    margin-top: 20px;
}

    .promo-main-text p[b-u94lkfnrwz] {
        font-size: 14px;
        color: var(--ainna-text-secondary);
        font-weight: 450;
        margin: 18px auto 10px;
        padding: 0 20px;
        text-align: center;
        line-height: 1.5;
    }

/* Animations */
@keyframes slideInFromTop-b-u94lkfnrwz {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Single animation for the golden badge */
@keyframes gentlePulse-b-u94lkfnrwz {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
    }
}

/* Responsive */
@media (max-width: 480px) {
    .button-group[b-u94lkfnrwz] {
        flex-direction: column;
        width: 100%;
    }

    .copy-btn-compact[b-u94lkfnrwz],
    .copy-btn-outline[b-u94lkfnrwz] {
        width: 100%;
        justify-content: center;
    }

    .promo-code-display[b-u94lkfnrwz] {
        font-size: 18px;
    }
}
/* _content/AinnaProduct/Components/ProdComponents/AinnaDocGeneratorPreviewer.razor.rz.scp.css */
/* Ainna Minimal Design System */
.ainna-doc-component[b-38a1kdeywd] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: white;
    border-radius: 20px;
    padding: 16px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    align-items: center;
    /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 2px solid #e6e8eb;*/
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-light);
    position: relative;
    max-width: 1360px;
    color: #202124;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    margin: auto;
    margin-top:50px;
    
    --ainna-primary: #f00c71;
    --ainna-primary-dark: #d00560;
    --ainna-primary-light: #ff4d9a;
    --ainna-success: #10b981;
    --ainna-warning: #f59e0b;
    --ainna-danger: #ef4444;
    --ainna-text-primary: #111827;
    --ainna-text-secondary: #6b7280;
    --ainna-text-tertiary: #9ca3af;
    --ainna-border: #e5e7eb;
    --ainna-bg-subtle: #fafafa;
    --ainna-radius: 12px;
}

    .ainna-doc-component *[b-38a1kdeywd] {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        
    }


/* Header */
.header[b-38a1kdeywd] {
    text-align: center;
    margin-bottom: 0px;
    animation: fadeIn 0.6s ease;
    width:100%;
    padding-top:50px;
}

    .header h1[b-38a1kdeywd] {
        font-size: clamp(26px, 4vw, 38px);
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 12px;
        letter-spacing: -0.03em;
    }

    .header p[b-38a1kdeywd] {
        font-size: clamp(15px, 2vw, 17px);
        color: var(--text-secondary);
        max-width: 600px;
        margin: 0 auto;
    }

.idea-name[b-38a1kdeywd] {
    background: linear-gradient(135deg, #f00c71 0%, #d00560 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}


/* Main Content - With Elegant Dotted Border */
.ainna-doc-main-content[b-38a1kdeywd] {
    
    
    
    max-width: 1300px;
    margin: 0 auto;
  /*  padding: 40px;
    border: 1px dotted rgba(240, 12, 113, 0.15);
    border-radius: 20px;*/
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    min-height: 600px; /* Add this */
    /*display: flex;*/ /* Add this */
}


/* Step Header - Bold and Minimal (NO STEP LINE) */
.ainna-doc-step-header[b-38a1kdeywd] {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 40px;
    position: relative;
    /*padding-bottom: 24px;*/
    /*border-bottom: 1px dotted rgba(240, 12, 113, 0.1);*/
}

.ainna-doc-step-indicator[b-38a1kdeywd] {
    position: relative;
    display: flex;
    align-items: center;
}

.ainna-doc-step-number[b-38a1kdeywd] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ainna-primary) 0%, var(--ainna-primary-dark) 100%);
    color: white;
    font-size: 24px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 20px rgba(240, 12, 113, 0.25);
}

.ainna-doc-step-content[b-38a1kdeywd] {
    flex: 1;
}

.ainna-doc-step-title[b-38a1kdeywd] {
    font-size: 23px;
    font-weight: 500;
    color: #6d7689;
    /*var(--ainna-text-primary);*/
    letter-spacing: -0.03em;
    margin-bottom: 4px;
}

.ainna-doc-step-subtitle[b-38a1kdeywd] {
    font-size: 15px;
    color: var(--ainna-text-secondary);
    font-weight: 500;
}

/* Status Badge */
.ainna-doc-status-badge[b-38a1kdeywd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--ainna-bg-subtle);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s;
}

.ainna-doc-status-dot[b-38a1kdeywd] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ainna-text-tertiary);
    transition: all 0.3s;
}

.ainna-doc-status-badge.ready .ainna-doc-status-dot[b-38a1kdeywd] {
    background: var(--ainna-success);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.ainna-doc-status-badge.generating .ainna-doc-status-dot[b-38a1kdeywd] {
    background: var(--ainna-warning);
    animation: blink-b-38a1kdeywd 1s infinite;
}

.ainna-doc-status-badge.success .ainna-doc-status-dot[b-38a1kdeywd] {
    background: var(--ainna-success);
}

.ainna-doc-status-badge.error .ainna-doc-status-dot[b-38a1kdeywd] {
    background: var(--ainna-danger);
}

@keyframes blink-b-38a1kdeywd {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.ainna-doc-status-text[b-38a1kdeywd] {
    color: var(--ainna-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Content Area */
.ainna-doc-content-area[b-38a1kdeywd] {
    min-height: 500px;
}

/* Action Area */
.ainna-doc-action-area[b-38a1kdeywd] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 60px 0;
    width:100%;
}


.ainna-doc-empty-container[b-38a1kdeywd] {
    width: 100%;
    min-height: 500px; /* Use fixed height instead of percentage */
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* Centering */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.ainna-doc-empty-title[b-38a1kdeywd] {
    font-size: 16px;
    line-height: 1.8;
    font-weight: 500;
    color: var(--ainna-text-primary);
    max-width: 400px;
    text-align:center;
}

/* Download subtitle for additional context */
.ainna-doc-empty-subtitle[b-38a1kdeywd] {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ainna-text-tertiary);
    margin-top: 12px;
    font-weight: 400;
    text-align:center;
}


/* Generate Prompt */
.ainna-doc-generate-prompt[b-38a1kdeywd] {
    text-align: center;
    /*max-width: 500px;*/
}

.ainna-doc-prompt-icon[b-38a1kdeywd] {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Enhanced Icon Ring - MORE VISIBLE */
.ainna-doc-icon-ring-static[b-38a1kdeywd] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px dotted var(--ainna-primary);
    opacity: 0.6;
    /*animation: ring-pulse 2.5s infinite ease-in-out;*/
    box-shadow: 0 0 20px rgba(240, 12, 113, 0.3), inset 0 0 20px rgba(240, 12, 113, 0.15);
}

    .ainna-doc-icon-ring-static.secondary[b-38a1kdeywd] {
        width: 115%;
        height: 115%;
        top: -7.5%;
        left: -7.5%;
        border-width: 1px;
       /* animation-delay: 0.5s;
        animation-duration: 3s;*/
        opacity: 0.4;
        box-shadow: 0 0 15px rgba(240, 12, 113, 0.2);
    }

.ainna-doc-icon-ring[b-38a1kdeywd] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px dotted var(--ainna-primary);
    opacity: 0.6;
    animation: ring-pulse-b-38a1kdeywd 2.5s infinite ease-in-out;
    box-shadow: 0 0 20px rgba(240, 12, 113, 0.3), inset 0 0 20px rgba(240, 12, 113, 0.15);
}

    .ainna-doc-icon-ring.secondary[b-38a1kdeywd] {
        width: 115%;
        height: 115%;
        top: -7.5%;
        left: -7.5%;
        border-width: 1px;
        animation-delay: 0.5s;
        animation-duration: 3s;
        opacity: 0.4;
        box-shadow: 0 0 15px rgba(240, 12, 113, 0.2);
    }

@keyframes ring-pulse-b-38a1kdeywd {
    0% {
        transform: scale(0.95) rotate(0deg);
        opacity: 0.7;
        border-color: var(--ainna-primary);
    }

    50% {
        transform: scale(1.15) rotate(180deg);
        opacity: 0.3;
        border-color: var(--ainna-primary-light);
    }

    100% {
        transform: scale(0.95) rotate(360deg);
        opacity: 0.7;
        border-color: var(--ainna-primary);
    }
}

/* UPDATED: Slide Inner - Maximized for images */
.ainna-doc-slide-inner[b-38a1kdeywd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0; /* CHANGED: Removed padding */
    background: transparent; /* CHANGED: Removed background */
}

    /* UPDATED: Image styling for proper aspect ratio */
    .ainna-doc-slide-inner img[b-38a1kdeywd] {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        border-radius: 8px;
    }

.ainna-doc-prompt-icon i[b-38a1kdeywd] {
    font-size: 36px;
    background: linear-gradient(135deg, var(--ainna-primary) 0%, var(--ainna-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 10px rgba(240, 12, 113, 0.4));
}

.ainna-doc-prompt-title[b-38a1kdeywd] {
    font-size: 28px;
    font-weight: 700;
    color: var(--ainna-text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.ainna-doc-prompt-text[b-38a1kdeywd] {
    font-size: 15px;
    color: var(--ainna-text-secondary);
    margin-bottom: 32px;
    line-height: 1.6;
    max-width:600px;
    
}

/* Generate Button - Fixed with More Space */
.ainna-doc-generate-button[b-38a1kdeywd] {
    position: relative;
    padding: 16px 48px;
    min-width: 260px;
    max-width:300px;
    border: none;
    border-radius: 100px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    transition: transform 0.3s;
    display: inline-block;
}

.ainna-doc-button-bg[b-38a1kdeywd] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--ainna-primary) 0%, var(--ainna-primary-dark) 100%);
    border-radius: 100px;
    transition: all 0.3s;
    transform-origin: center;
}

.ainna-doc-generate-button.ready .ainna-doc-button-bg[b-38a1kdeywd] {
    opacity: 1;
}

.ainna-doc-generate-button.locked .ainna-doc-button-bg[b-38a1kdeywd] {
    background: var(--ainna-bg-subtle);
    border: 1px solid var(--ainna-border);
}

.ainna-doc-button-content[b-38a1kdeywd] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white;
    transition: all 0.3s;
    white-space: nowrap;
    z-index: 2;
}

.ainna-doc-generate-button.locked .ainna-doc-button-content[b-38a1kdeywd] {
    color: var(--ainna-text-tertiary);
}

.ainna-doc-generate-button.ready:hover[b-38a1kdeywd] {
    transform: translateY(-1px);
}

    .ainna-doc-generate-button.ready:hover .ainna-doc-button-bg[b-38a1kdeywd] {
        box-shadow: 0 10px 25px rgba(240, 12, 113, 0.25);
    }

.ainna-doc-generate-button.ready:active[b-38a1kdeywd] {
    transform: translateY(0);
}

    .ainna-doc-generate-button.ready:active .ainna-doc-button-bg[b-38a1kdeywd] {
        transform: scale(0.98);
    }

.ainna-doc-generate-button:disabled[b-38a1kdeywd] {
    cursor: not-allowed;
}

/* Generating View */
.ainna-doc-generating-view[b-38a1kdeywd] {
    text-align: center;
    max-width: 400px;
}

.ainna-doc-generating-animation[b-38a1kdeywd] {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ainna-doc-spinner-ring[b-38a1kdeywd] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--ainna-primary);
    border-style: dotted;
    animation: spin-b-38a1kdeywd 1.2s linear infinite;
}

    .ainna-doc-spinner-ring.delay[b-38a1kdeywd] {
        width: 70%;
        height: 70%;
        border-top-color: var(--ainna-primary-light);
        animation-duration: 1.8s;
        animation-direction: reverse;
        border-style: solid;
        border-width: 1px;
    }

@keyframes spin-b-38a1kdeywd {
    to {
        transform: rotate(360deg);
    }
}

.ainna-doc-generating-animation i[b-38a1kdeywd] {
    font-size: 24px;
    color: var(--ainna-primary);
    animation: pulse-b-38a1kdeywd 2s infinite;
}

@keyframes pulse-b-38a1kdeywd {
    0%, 100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

.ainna-doc-generating-title[b-38a1kdeywd] {
    font-size: 24px;
    font-weight: 700;
    color: var(--ainna-text-primary);
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

.ainna-doc-progress-steps[b-38a1kdeywd] {
    display: inline-flex;
    gap: 24px;
}

.ainna-doc-progress-step[b-38a1kdeywd] {
    position: relative;
    font-size: 13px;
    color: var(--ainna-text-tertiary);
    font-weight: 500;
    transition: all 0.3s;
}

    .ainna-doc-progress-step.complete[b-38a1kdeywd] {
        color: var(--ainna-text-primary);
    }

.ainna-doc-progress-line[b-38a1kdeywd] {
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--ainna-border);
    transition: all 0.3s;
}

.ainna-doc-progress-step.complete .ainna-doc-progress-line[b-38a1kdeywd] {
    background: var(--ainna-primary);
}

/* Error View */
.ainna-doc-error-view[b-38a1kdeywd] {
    text-align: center;
    max-width: 400px;
}

.ainna-doc-error-icon[b-38a1kdeywd] {
    width: 96px;
    height: 96px;
    margin: 0 auto 24px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px dotted rgba(239, 68, 68, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ainna-doc-error-icon i[b-38a1kdeywd] {
        font-size: 32px;
        color: var(--ainna-danger);
    }

.ainna-doc-error-title[b-38a1kdeywd] {
    font-size: 24px;
    font-weight: 700;
    color: var(--ainna-text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.ainna-doc-error-text[b-38a1kdeywd] {
    font-size: 15px;
    color: var(--ainna-text-secondary);
    margin-bottom: 32px;
}

/* UPDATED: Preview Area - Maximized */
.ainna-doc-preview-area[b-38a1kdeywd] {
    animation: fadeInUp-b-38a1kdeywd 0.6s ease-out;
    /*border: 1px solid var(--ainna-border);*/
    border-radius: var(--ainna-radius);
    padding: 12px; /* CHANGED: Reduced padding */
    background: white;
    /*height: calc(100vh - 250px);*/ /* CHANGED: Dynamic height */
    display: flex;
    flex-direction: column;
}

@keyframes fadeInUp-b-38a1kdeywd {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* UPDATED: Preview Controls - More compact */
.ainna-doc-preview-controls[b-38a1kdeywd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px; /* CHANGED: Reduced gap */
    margin-bottom: 12px; /* CHANGED: Reduced margin */
    padding: 8px 0; /* ADDED: Compact padding */
}

/* UPDATED: Nav Button - Smaller */
.ainna-doc-nav-button[b-38a1kdeywd] {
    width: 40px; /* CHANGED: Smaller */
    height: 40px; /* CHANGED: Smaller */
    border-radius: 50%;
    border: 1px dotted var(--ainna-border);
    background: rgba(255, 255, 255, 0.8);
    color: var(--ainna-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 14px; /* CHANGED: Smaller */
}

    .ainna-doc-nav-button:hover:not(:disabled)[b-38a1kdeywd] {
        border-color: var(--ainna-primary);
        border-style: solid;
        color: var(--ainna-primary);
        transform: scale(1.1);
        background: white;
        box-shadow: 0 4px 12px rgba(240, 12, 113, 0.15);
    }

    .ainna-doc-nav-button:disabled[b-38a1kdeywd] {
        opacity: 0.3;
        cursor: not-allowed;
    }

/* UPDATED: Slide Indicator - Compact */
.ainna-doc-slide-indicator[b-38a1kdeywd] {
    display: flex;
    align-items: baseline;
    gap: 6px; /* CHANGED: Reduced gap */
    font-weight: 500;
    user-select: none;
}

.ainna-doc-current-slide[b-38a1kdeywd] {
    font-size: 24px; /* CHANGED: Smaller */
    font-weight: 700;
    color: var(--ainna-text-primary);
}

.ainna-doc-slide-separator[b-38a1kdeywd] {
    font-size: 18px; /* CHANGED: Smaller */
    color: var(--ainna-text-tertiary);
}

.ainna-doc-total-slides[b-38a1kdeywd] {
    font-size: 18px; /* CHANGED: Smaller */
    color: var(--ainna-text-secondary);
}

/* UPDATED: Slide Viewport - Maximized */
.ainna-doc-slide-viewport[b-38a1kdeywd] {
    position: relative;
    flex: 1; /* CHANGED: Takes all available space */
    /*background: #fafbfc;
    border: 1px solid var(--ainna-border);
    border-radius: var(--ainna-radius);*/
    overflow: hidden;
    margin-bottom: 12px; /* CHANGED: Reduced margin */
    /*box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04);*/
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0; /* ADDED: Important for flex shrinking */
}

/* UPDATED: Slide - Full size container */
.ainna-doc-slide[b-38a1kdeywd] {
    position: absolute;
    /*inset: 8px;*/ /* CHANGED: Minimal inset */
    display: flex !important; /* CHANGED: Always flex */
    align-items: center;
    justify-content: center;
    padding: 0; /* CHANGED: No padding */
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
    background: transparent; /* CHANGED: Transparent */
    /*border-radius: 8px;*/
    border: 2px solid var(--ainna-border);
    border-radius: var(--ainna-radius);
    
    /*box-shadow: none;*/ /* CHANGED: No shadow */
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04);
}

    .ainna-doc-slide.active[b-38a1kdeywd] {
        opacity: 1;
        transform: scale(1);
        position: relative; /* ADDED: For proper stacking */
    }

.ainna-doc-slide-heading[b-38a1kdeywd] {
    font-size: 36px;
    font-weight: 700;
    color: var(--ainna-text-primary);
    margin-bottom: 16px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.ainna-doc-slide-subheading[b-38a1kdeywd] {
    font-size: 18px;
    color: var(--ainna-text-secondary);
    line-height: 1.5;
    margin-bottom: 32px;
}

.ainna-doc-slide-list[b-38a1kdeywd] {
    list-style: none;
    text-align: left;
    max-width: 600px;
    margin: 0 auto;
}

    .ainna-doc-slide-list li[b-38a1kdeywd] {
        position: relative;
        padding-left: 28px;
        margin-bottom: 16px;
        font-size: 16px;
        color: var(--ainna-text-primary);
        line-height: 1.6;
    }

        .ainna-doc-slide-list li[b-38a1kdeywd]::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--ainna-primary);
            box-shadow: 0 0 0 3px rgba(240, 12, 113, 0.1);
        }

.ainna-doc-slide-visual[b-38a1kdeywd] {
    width: 100%;
    height: 240px;
    background: radial-gradient(circle at 20% 50%, rgba(240, 12, 113, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 50%, rgba(240, 12, 113, 0.03) 0%, transparent 50%), linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
    border: 1px solid var(--ainna-border);
    border-radius: var(--ainna-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
}

    .ainna-doc-slide-visual i[b-38a1kdeywd] {
        font-size: 48px;
        color: var(--ainna-primary);
        opacity: 0.3;
    }

/* UPDATED: Download Hint - More compact */
.ainna-doc-download-hint[b-38a1kdeywd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px; /* CHANGED: Reduced gap */
    padding: 8px 0; /* CHANGED: Reduced padding */
    margin-top: 20px; /* CHANGED: No margin */
    opacity: 0.6;
    transition: opacity 0.3s;
}

    .ainna-doc-download-hint:hover[b-38a1kdeywd] {
        opacity: 1;
    }

.ainna-doc-hint-line[b-38a1kdeywd] {
    flex: 1;
    max-width: 80px; /* CHANGED: Shorter lines */
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ainna-border), transparent);
}

.ainna-doc-hint-text[b-38a1kdeywd] {
    font-size: 12px; /* CHANGED: Smaller */
    color: var(--ainna-text-tertiary);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px; /* CHANGED: Reduced gap */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

    .ainna-doc-hint-text i[b-38a1kdeywd] {
        font-size: 11px; /* CHANGED: Smaller */
        animation: bounce-b-38a1kdeywd 2s infinite;
    }

@keyframes bounce-b-38a1kdeywd {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(3px);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .ainna-doc-component[b-38a1kdeywd] {
        padding: 24px 16px;
    }

    .ainna-doc-main-content[b-38a1kdeywd] {
        padding: 24px;
    }

    .ainna-doc-step-title[b-38a1kdeywd] {
        font-size: 24px;
    }

    .ainna-doc-step-number[b-38a1kdeywd] {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .ainna-doc-step-header[b-38a1kdeywd] {
        flex-wrap: wrap;
        gap: 16px;
    }

    .ainna-doc-status-badge[b-38a1kdeywd] {
        width: 100%;
        justify-content: center;
    }

    .ainna-doc-slide-heading[b-38a1kdeywd] {
        font-size: 28px;
    }

    /* UPDATED: Mobile viewport height */
    .ainna-doc-slide-viewport[b-38a1kdeywd] {
        height: 400px; /* CHANGED: Fixed height on mobile */
    }

    .ainna-doc-preview-area[b-38a1kdeywd] {
        height: auto; /* CHANGED: Auto height on mobile */
    }

    .ainna-doc-slide[b-38a1kdeywd] {
        inset: 8px; /* CHANGED: Keep minimal inset */
    }
}

@media (max-width: 480px) {
    .ainna-doc-main-content[b-38a1kdeywd] {
        padding: 16px;
        border-style: dashed;
    }

    .ainna-doc-step-title[b-38a1kdeywd] {
        font-size: 20px;
    }

    .ainna-doc-step-number[b-38a1kdeywd] {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .ainna-doc-slide-heading[b-38a1kdeywd] {
        font-size: 22px;
    }

    .ainna-doc-slide-subheading[b-38a1kdeywd] {
        font-size: 14px;
    }

    .ainna-doc-slide-list li[b-38a1kdeywd] {
        font-size: 14px;
    }

    .ainna-doc-slide[b-38a1kdeywd] {
        inset: 6px; /* CHANGED: Even smaller on mobile */
    }

    /* UPDATED: Mobile viewport */
    .ainna-doc-slide-viewport[b-38a1kdeywd] {
        height: 350px; /* CHANGED: Smaller on mobile */
    }
}
/* _content/AinnaProduct/Components/ProdComponents/AinnaDownloadController.razor.rz.scp.css */
/* DownloadPackage.razor.css - Scoped Styles for Blazor Component */

/* Reset for component scope */
[b-3v3epe9lcb] * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Main Component Container */
.ainna-doc-component[b-3v3epe9lcb] {
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: transparent;
    color: #111827;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 40px 24px;
    font-size: 16px;
}

/* CSS Variables */
.ainna-doc-component[b-3v3epe9lcb] {
    --ainna-primary: #f00c71;
    --ainna-primary-dark: #d00560;
    --ainna-primary-light: #ff4d9a;
    --ainna-success: #10b981;
    --ainna-warning: #f59e0b;
    --ainna-danger: #ef4444;
    --ainna-text-primary: #111827;
    --ainna-text-secondary: #6b7280;
    --ainna-text-tertiary: #9ca3af;
    --ainna-border: #e5e7eb;
    --ainna-bg-subtle: #fafafa;
    --ainna-radius: 12px;
}

/* Main Content with Dotted Border */
.ainna-doc-main-content[b-3v3epe9lcb] {
    max-width: 1300px;
    margin: 0 auto;
    padding: 40px;
    border: 1px dotted rgba(240, 12, 113, 0.15);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    animation: fadeIn-b-3v3epe9lcb 0.5s ease-out;
}

@keyframes fadeIn-b-3v3epe9lcb {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Step Header */
.ainna-doc-step-header[b-3v3epe9lcb] {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 40px;
    position: relative;
    /*border-bottom: 1px dotted rgba(240, 12, 113, 0.1);*/
    padding-bottom: 24px;
}

.ainna-doc-step-indicator[b-3v3epe9lcb] {
    position: relative;
    display: flex;
    align-items: center;
}

.ainna-doc-step-number[b-3v3epe9lcb] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ainna-primary) 0%, var(--ainna-primary-dark) 100%);
    color: white;
    font-size: 24px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    animation: popIn-b-3v3epe9lcb 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

    .ainna-doc-step-number.success-check[b-3v3epe9lcb] {
        background: linear-gradient(135deg, var(--ainna-success) 0%, #059669 100%);
    }

@keyframes popIn-b-3v3epe9lcb {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.ainna-doc-step-content[b-3v3epe9lcb] {
    flex: 1;
}

.ainna-doc-step-title[b-3v3epe9lcb] {
    font-size: 32px;
    font-weight: 500;
    color: var(--ainna-text-primary);
    letter-spacing: -0.03em;
    margin-bottom: 4px;
}

.ainna-doc-step-subtitle[b-3v3epe9lcb] {
    font-size: 15px;
    color: var(--ainna-text-secondary);
    font-weight: 500;
}

/* Status Badge */
.ainna-doc-status-badge[b-3v3epe9lcb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--ainna-bg-subtle);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
}

    .ainna-doc-status-badge.success .ainna-doc-status-dot[b-3v3epe9lcb] {
        background: var(--ainna-success);
    }

.ainna-doc-status-dot[b-3v3epe9lcb] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ainna-success);
    animation: pulse-b-3v3epe9lcb 2s infinite;
}

@keyframes pulse-b-3v3epe9lcb {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

.ainna-doc-status-text[b-3v3epe9lcb] {
    color: var(--ainna-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Download History Banner */
.download-history-banner[b-3v3epe9lcb] {
    background: linear-gradient(135deg, rgba(240, 12, 113, 0.05) 0%, rgba(255, 0, 128, 0.03) 100%);
    border: 1px solid rgba(240, 12, 113, 0.2);
    border-radius: var(--ainna-radius);
    padding: 16px 20px;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    animation: slideInFromTop-b-3v3epe9lcb 0.8s ease-out;
}

@keyframes slideInFromTop-b-3v3epe9lcb {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.download-history-icon[b-3v3epe9lcb] {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ainna-primary);
    font-size: 18px;
}

.download-history-content[b-3v3epe9lcb] {
    flex: 1;
}

.download-history-text[b-3v3epe9lcb] {
    font-size: 14px;
    color: var(--ainna-text-primary);
    font-weight: 500;
    margin-bottom: 4px;
}

.download-history-date[b-3v3epe9lcb] {
    font-size: 12px;
    color: var(--ainna-text-secondary);
}

/* Content Area */
.ainna-doc-content-area[b-3v3epe9lcb] {
    min-height: 500px;
}

/* Download Content Grid */
.download-content-grid[b-3v3epe9lcb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

/* Package Items Column */
.package-items-column[b-3v3epe9lcb] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Package Item */
.package-item[b-3v3epe9lcb] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: white;
    border: 1px solid var(--ainna-border);
    border-radius: var(--ainna-radius);
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    animation: fadeInLeft-b-3v3epe9lcb 0.5s ease-out both;
}

    .package-item:nth-child(1)[b-3v3epe9lcb] {
        animation-delay: 0s;
    }

    .package-item:nth-child(2)[b-3v3epe9lcb] {
        animation-delay: 0.1s;
    }

    .package-item:nth-child(3)[b-3v3epe9lcb] {
        animation-delay: 0.2s;
    }

    .package-item:nth-child(4)[b-3v3epe9lcb] {
        animation-delay: 0.3s;
    }

@keyframes fadeInLeft-b-3v3epe9lcb {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.package-item.selected[b-3v3epe9lcb] {
    background: rgba(240, 12, 113, 0.03);
    border-color: var(--ainna-primary);
    transform: translateX(4px);
}

.package-checkmark[b-3v3epe9lcb] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ainna-primary) 0%, var(--ainna-primary-dark) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    animation: checkmarkPop-b-3v3epe9lcb 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes checkmarkPop-b-3v3epe9lcb {
    from {
        opacity: 0;
        transform: scale(0);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Package Item Icon */
.package-item-icon[b-3v3epe9lcb] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--ainna-primary) 0%, var(--ainna-primary-dark) 100%);
    border-radius: var(--ainna-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    flex-shrink: 0;
}

/* Package Item Info */
.package-item-info[b-3v3epe9lcb] {
    flex: 1;
}

.package-item-title[b-3v3epe9lcb] {
    font-size: 13px;
    font-weight: 600;
    color: var(--ainna-text-primary);
    margin-bottom: 2px;
    letter-spacing: -0.01em;
}

.package-item-description[b-3v3epe9lcb] {
    font-size: 12px;
    color: var(--ainna-text-secondary);
    line-height: 1.3;
    font-weight: 450;
}

/* Download Options Column */
.download-options-column[b-3v3epe9lcb] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Download Info Box */
.download-info-box[b-3v3epe9lcb] {
    background: white;
    border: 2px solid #f3f4f6;
    border-radius: var(--ainna-radius);
    padding: 24px;
    position: relative;
    animation: fadeInRight-b-3v3epe9lcb 0.5s ease-out;
}

@keyframes fadeInRight-b-3v3epe9lcb {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.download-info-icon[b-3v3epe9lcb] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--ainna-primary) 0%, var(--ainna-primary-dark) 100%);
    border-radius: var(--ainna-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    margin-bottom: 16px;
}

.download-info-content h3[b-3v3epe9lcb] {
    font-size: 18px;
    font-weight: 600;
    color: var(--ainna-text-primary);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.download-info-content p[b-3v3epe9lcb] {
    font-size: 14px;
    color: var(--ainna-text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
    font-weight: 450;
}

/* Download Features */
.download-features[b-3v3epe9lcb] {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .download-features li[b-3v3epe9lcb] {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        color: var(--ainna-text-primary);
        margin-bottom: 8px;
        font-weight: 450;
        animation: fadeIn-b-3v3epe9lcb 0.5s ease forwards;
        opacity: 0;
    }

        .download-features li:nth-child(1)[b-3v3epe9lcb] {
            animation-delay: 0.1s;
        }

        .download-features li:nth-child(2)[b-3v3epe9lcb] {
            animation-delay: 0.2s;
        }

        .download-features li:nth-child(3)[b-3v3epe9lcb] {
            animation-delay: 0.3s;
        }

        .download-features li:nth-child(4)[b-3v3epe9lcb] {
            animation-delay: 0.4s;
        }

        .download-features li i[b-3v3epe9lcb] {
            color: var(--ainna-primary);
            font-size: 12px;
        }

/* Deletion Options */
.deletion-options[b-3v3epe9lcb] {
    background: rgb(255, 251, 221);
    border: 1px solid rgba(180, 180, 180, 0.2);
    border-radius: var(--ainna-radius);
    padding: 14px 16px;
    animation: fadeInRight-b-3v3epe9lcb 0.5s ease-out 0.2s both;
}

.deletion-options-title[b-3v3epe9lcb] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ainna-text-primary);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}

.deletion-options-subtitle[b-3v3epe9lcb] {
    font-size: 12px;
    color: var(--ainna-text-secondary);
    margin-bottom: 16px;
    font-weight: 450;
}

/* Radio Group */
.deletion-radio-group[b-3v3epe9lcb] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.deletion-radio-option[b-3v3epe9lcb] {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 2px solid var(--ainna-border);
    border-radius: var(--ainna-radius);
    cursor: pointer;
    background: white;
    transition: border-color 0.2s, background 0.2s;
    gap: 12px;
}

    .deletion-radio-option.selected[b-3v3epe9lcb] {
        background: rgba(240, 12, 113, 0.03);
        border-color: var(--ainna-primary);
    }

.deletion-radio-dot[b-3v3epe9lcb] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--ainna-border);
    background: white;
    position: relative;
    flex-shrink: 0;
}

    .deletion-radio-dot.checked[b-3v3epe9lcb]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--ainna-primary);
    }

.deletion-radio-content[b-3v3epe9lcb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.deletion-radio-label[b-3v3epe9lcb] {
    font-size: 13px;
    color: var(--ainna-text-primary);
    font-weight: 450;
}

.deletion-radio-description[b-3v3epe9lcb] {
    font-size: 11px;
    color: var(--ainna-text-tertiary);
}

/* Download Button */
.ainna-doc-generate-button[b-3v3epe9lcb] {
    position: relative;
    padding: 16px 48px;
    min-width: 260px;
    border: none;
    border-radius: 100px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    transition: transform 0.3s;
    width: 100%;
    animation: fadeInRight-b-3v3epe9lcb 0.5s ease-out 0.4s both;
}

.ainna-doc-button-bg[b-3v3epe9lcb] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--ainna-primary) 0%, var(--ainna-primary-dark) 100%);
    border-radius: 100px;
    transition: all 0.3s;
}

.ainna-doc-generate-button:hover[b-3v3epe9lcb] {
    transform: translateY(-1px);
}

.ainna-doc-generate-button:active[b-3v3epe9lcb] {
    transform: translateY(0);
}

.ainna-doc-button-content[b-3v3epe9lcb] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white;
    z-index: 2;
}

/* Upgrade Prompt */
.upgrade-prompt[b-3v3epe9lcb] {
    background: rgb(255, 251, 221);
    border: 1px solid rgba(180, 180, 180, 0.2);
    border-radius: var(--ainna-radius);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    animation: fadeInUp-b-3v3epe9lcb 0.8s ease-out 0.3s both;
}

@keyframes fadeInUp-b-3v3epe9lcb {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.upgrade-icon[b-3v3epe9lcb] {
    font-size: 24px;
    color: var(--ainna-warning);
}

.upgrade-content[b-3v3epe9lcb] {
    flex: 1;
}

.upgrade-title[b-3v3epe9lcb] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ainna-text-primary);
    margin-bottom: 4px;
}

.upgrade-text[b-3v3epe9lcb] {
    font-size: 12px;
    color: var(--ainna-text-secondary);
    line-height: 1.5;
}

.upgrade-link[b-3v3epe9lcb] {
    color: var(--ainna-primary);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s;
}

    .upgrade-link:hover[b-3v3epe9lcb] {
        opacity: 0.8;
    }

/* Downloading State */
.downloading-state[b-3v3epe9lcb] {
    animation: fadeIn-b-3v3epe9lcb 0.5s ease-out;
}

.downloading-progress[b-3v3epe9lcb] {
    text-align: center;
    padding: 60px 0;
}

.downloading-icon-wrapper[b-3v3epe9lcb] {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 32px;
}

.downloading-ring[b-3v3epe9lcb] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px dotted var(--ainna-primary);
    opacity: 0.2;
}

.downloading-ring-animated[b-3v3epe9lcb] {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--ainna-primary);
    animation: spin-b-3v3epe9lcb 1.5s linear infinite;
}

@keyframes spin-b-3v3epe9lcb {
    to {
        transform: rotate(360deg);
    }
}

.downloading-icon[b-3v3epe9lcb] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: var(--ainna-primary);
    animation: pulseIcon-b-3v3epe9lcb 2s ease-in-out infinite;
}

@keyframes pulseIcon-b-3v3epe9lcb {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.downloading-title[b-3v3epe9lcb] {
    font-size: 24px;
    font-weight: 600;
    color: var(--ainna-text-primary);
    margin-bottom: 8px;
}

.downloading-subtitle[b-3v3epe9lcb] {
    font-size: 14px;
    color: var(--ainna-text-secondary);
    margin-bottom: 32px;
}

.progress-bar[b-3v3epe9lcb] {
    width: 300px;
    height: 4px;
    background: var(--ainna-border);
    border-radius: 2px;
    margin: 0 auto 16px;
    overflow: hidden;
}

.progress-fill[b-3v3epe9lcb] {
    height: 100%;
    background: linear-gradient(90deg, var(--ainna-primary) 0%, var(--ainna-primary-light) 100%);
    border-radius: 2px;
    transition: width 0.3s ease-out;
}

.progress-percentage[b-3v3epe9lcb] {
    font-size: 13px;
    color: var(--ainna-text-tertiary);
    font-weight: 500;
}

/* Success View */
.success-view[b-3v3epe9lcb] {
    animation: fadeIn-b-3v3epe9lcb 0.5s ease-out;
}

.success-message[b-3v3epe9lcb] {
    text-align: center;
    padding: 48px;
}

.success-icon[b-3v3epe9lcb] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--ainna-success) 0%, #059669 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin: 0 auto 24px;
    animation: successBounce-b-3v3epe9lcb 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes successBounce-b-3v3epe9lcb {
    0% {
        transform: scale(0) rotate(-180deg);
    }

    50% {
        transform: scale(1.2) rotate(10deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

.success-title[b-3v3epe9lcb] {
    font-size: 24px;
    font-weight: 500;
    color: var(--ainna-text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.success-subtitle[b-3v3epe9lcb] {
    font-size: 14px;
    color: var(--ainna-text-secondary);
    margin-bottom: 32px;
    font-weight: 450;
}

/* Download Grid */
.download-grid[b-3v3epe9lcb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 400px;
    margin: 0 auto;
}

.download-option[b-3v3epe9lcb] {
    padding: 16px;
    background: white;
    border: 1px solid var(--ainna-border);
    border-radius: var(--ainna-radius);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color 0.2s, background 0.2s;
}

    .download-option:hover[b-3v3epe9lcb] {
        border-color: var(--ainna-primary);
        background: rgba(240, 12, 113, 0.03);
    }

.download-option-icon[b-3v3epe9lcb] {
    font-size: 24px;
    color: var(--ainna-primary);
    margin-bottom: 8px;
}

.download-option-label[b-3v3epe9lcb] {
    font-size: 11px;
    color: var(--ainna-text-secondary);
    font-weight: 450;
}

/* Responsive */
@media (max-width: 768px) {
    .ainna-doc-component[b-3v3epe9lcb] {
        padding: 24px 16px;
    }

    .ainna-doc-main-content[b-3v3epe9lcb] {
        padding: 24px;
    }

    .ainna-doc-step-title[b-3v3epe9lcb] {
        font-size: 24px;
    }

    .ainna-doc-step-number[b-3v3epe9lcb] {
        width: 56px;
        height: 56px;
        font-size: 22px;
    }

    .ainna-doc-step-header[b-3v3epe9lcb] {
        flex-wrap: wrap;
        gap: 16px;
    }

    .ainna-doc-status-badge[b-3v3epe9lcb] {
        width: 100%;
        justify-content: center;
    }

    .download-content-grid[b-3v3epe9lcb] {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .download-grid[b-3v3epe9lcb] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ainna-doc-main-content[b-3v3epe9lcb] {
        padding: 16px;
        border-style: dashed;
    }

    .ainna-doc-step-title[b-3v3epe9lcb] {
        font-size: 20px;
    }

    .ainna-doc-step-number[b-3v3epe9lcb] {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
}
/* _content/AinnaProduct/Components/ProdComponents/AinnaNewIdeaViewer2.razor.rz.scp.css */
*[b-c7hqw2qriv] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root[b-c7hqw2qriv] {
    --max-width: 1400px;
    --gap: 20px;
    --padding: clamp(16px, 2vw, 24px);
    --header-size: clamp(32px, 4.5vw, 48px);
    --text-size: clamp(14px, 1.4vw, 16px);
    --small-text: 12px;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-heavy: 800;
    --font-black: 900;
    /* Google Colors Theme */
    --google-blue: #1a73e8;
    --google-green: #34a853;
    --google-yellow: #fbbc04;
    --google-red: #ea4335;
}

/* Add Font Import */
@@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

body[b-c7hqw2qriv] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #fafbfc;
    padding: var(--padding);
    color: #0d1117;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.container[b-c7hqw2qriv] {
    max-width:1280px;
    /*var(--max-width);*/
    margin: 0 auto;
}

/* Header */
.header[b-c7hqw2qriv] {
    margin-bottom: 36px;
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.project-code[b-c7hqw2qriv] {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    font-weight: var(--font-bold);
    color: var(--google-blue);
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(26, 115, 232, 0.1);
    border: none;
    outline: none;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-block;
    width: fit-content;
    flex: 0 0 auto;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

    .project-code:focus[b-c7hqw2qriv] {
        background: rgba(26, 115, 232, 0.18);
        box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
    }

.product-name[b-c7hqw2qriv] {
    font-size: var(--header-size);
    font-weight: var(--font-black);
    color: #0d1117;
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    text-align: center;
    margin-bottom: 6px;
    padding: 0 20px;
    transition: all 0.3s ease;
    resize: none;
    line-height: 1.15;
    overflow: hidden;
    min-height: 48px;
    font-family: inherit;
    display: block;
    letter-spacing: -0.03em;
}

    .product-name[b-c7hqw2qriv]::placeholder {
        color: #8b949e;
        opacity: 0.4;
        font-weight: var(--font-medium);
    }

    .product-name:focus[b-c7hqw2qriv] {
        color: var(--google-blue);
    }

.header-subtitle[b-c7hqw2qriv] {
    color: #57606a;
    font-size: 15px;
    font-weight: var(--font-regular);
    letter-spacing: 0.01em;
}

/* Main Grid */
.main-grid[b-c7hqw2qriv] {
    margin-bottom: 36px;
}

/* Executive Summary - Hero Card */
.hero-card[b-c7hqw2qriv] {
    background: linear-gradient(135deg, #e8f3ff 0%, #e6f2e6 100%);
    border-radius: 18px;
    padding: 32px 36px;
    margin-bottom: calc(var(--gap) + 8px);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid rgba(26, 115, 232, 0.15);
    min-height: 220px;
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.08);
}

    .hero-card:hover:not(.loading):not(.updating)[b-c7hqw2qriv] {
        transform: translateY(-3px);
        box-shadow: 0 14px 28px rgba(26, 115, 232, 0.16);
        border-color: rgba(26, 115, 232, 0.25);
    }

    .hero-card.editing[b-c7hqw2qriv] {
        box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.25);
        border-color: var(--google-blue);
        transform: translateY(-1px);
    }

.hero-icon[b-c7hqw2qriv] {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 120px;
    opacity: 0.1;
    color: var(--google-blue);
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-card:hover:not(.loading):not(.updating) .hero-icon[b-c7hqw2qriv] {
    transform: translateY(-50%) rotate(10deg) scale(1.1);
    opacity: 0.15;
}

.hero-card.editing .hero-icon[b-c7hqw2qriv] {
    animation: heroIconPulse 2s ease-in-out infinite;
}

@@keyframes heroIconPulse {
    0%[b-c7hqw2qriv], 100%[b-c7hqw2qriv] {
        transform: translateY(-50%) rotate(10deg) scale(1.1);
        opacity: 0.15;
    }

    50%[b-c7hqw2qriv] {
        transform: translateY(-50%) rotate(10deg) scale(1.2);
        opacity: 0.2;
    }
}

.hero-title[b-c7hqw2qriv] {
    font-size: 15px;
    font-weight: var(--font-heavy);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--google-blue);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .hero-title[b-c7hqw2qriv]::before {
        content: '';
        width: 8px;
        height: 8px;
        background: linear-gradient(135deg, var(--google-blue) 0%, var(--google-green) 100%);
        border-radius: 50%;
        opacity: 0.7;
        animation: dotPulse 3s ease-in-out infinite;
        box-shadow: 0 2px 4px rgba(26, 115, 232, 0.2);
    }

@@keyframes dotPulse {
    0%[b-c7hqw2qriv], 100%[b-c7hqw2qriv] {
        opacity: 0.7;
        transform: scale(1);
    }

    50%[b-c7hqw2qriv] {
        opacity: 1;
        transform: scale(1.15);
    }
}

.hero-card:hover:not(.loading):not(.updating) .hero-title[b-c7hqw2qriv]::before {
    animation-play-state: paused;
    transform: scale(1.3);
    opacity: 1;
}

.hero-text[b-c7hqw2qriv] {
    font-size: clamp(18px, 2vw, 22px);
    font-weight: var(--font-regular);
    line-height: 1.5;
    background: transparent;
    border: none;
    color: #0d1117;
    outline: none;
    width: 100%;
    resize: none;
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 100px;
    letter-spacing: 0.01em;
}

/* Update Dots Animation */
.update-dots[b-c7hqw2qriv] {
    display: inline-flex;
    gap: 4px;
    padding: 8px;
}

    .update-dots span[b-c7hqw2qriv] {
        width: 8px;
        height: 8px;
        background: var(--accent-color, var(--google-blue));
        border-radius: 50%;
        opacity: 0.3;
        animation: dotWave 1.4s ease-in-out infinite;
    }

        .update-dots span:nth-child(1)[b-c7hqw2qriv] {
            animation-delay: 0s;
        }

        .update-dots span:nth-child(2)[b-c7hqw2qriv] {
            animation-delay: 0.2s;
        }

        .update-dots span:nth-child(3)[b-c7hqw2qriv] {
            animation-delay: 0.4s;
        }

@@keyframes dotWave {
    0%[b-c7hqw2qriv], 60%[b-c7hqw2qriv], 100%[b-c7hqw2qriv] {
        transform: translateY(0);
        opacity: 0.3;
    }

    30%[b-c7hqw2qriv] {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* New Badge */
.new-badge[b-c7hqw2qriv] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, var(--google-green), var(--google-blue));
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    opacity: 0;
    transform: scale(0.8) translateY(-5px);
    animation: newBadgeIn 0.4s ease-out forwards;
    box-shadow: 0 4px 12px rgba(52, 168, 83, 0.3);
}

@@keyframes newBadgeIn {
    to[b-c7hqw2qriv] {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.new-badge.fade-out[b-c7hqw2qriv] {
    animation: newBadgeFadeOut 0.4s ease-out forwards;
}

@@keyframes newBadgeFadeOut {
    to[b-c7hqw2qriv] {
        opacity: 0;
        transform: scale(0.8) translateY(-5px);
    }
}

/* Empty State Styles */
.empty-state[b-c7hqw2qriv] {
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: fadeIn 0.6s ease-out forwards;
    animation-delay: 0.2s;
}

@@keyframes fadeIn {
    to[b-c7hqw2qriv] {
        opacity: 1;
    }
}

.empty-state-icon[b-c7hqw2qriv] {
    font-size: 36px;
    color: var(--accent-color, var(--google-blue));
    margin-bottom: 14px;
    opacity: 0.2;
}

.empty-state-title[b-c7hqw2qriv] {
    font-size: 18px;
    font-weight: var(--font-bold);
    color: #24292f;
    margin-bottom: 10px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.empty-state-message[b-c7hqw2qriv] {
    font-size: 14px;
    color: #57606a;
    line-height: 1.6;
    font-weight: var(--font-regular);
}

.empty-state-hint[b-c7hqw2qriv] {
    font-size: 12px;
    color: #8b949e;
    margin-top: 14px;
    font-style: italic;
    font-weight: var(--font-regular);
}

/* Global textarea styles */
textarea[b-c7hqw2qriv] {
    overflow: hidden !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    textarea[b-c7hqw2qriv]::-webkit-scrollbar {
        display: none;
    }

/* Masonry Grid */
.masonry-grid[b-c7hqw2qriv] {
    column-count: 3;
    column-gap: var(--gap);
}

/* Regular Cards */
.card[b-c7hqw2qriv] {
    background: white;
    border-radius: 14px;
    padding: 24px;
    margin-bottom: var(--gap);
    break-inside: avoid;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 2px solid #e6e8eb;
    display: inline-block;
    width: 100%;
    cursor: pointer;
    min-height: 200px;
}

    .card:hover:not(.loading):not(.updating)[b-c7hqw2qriv] {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        border-color: var(--accent-color);
    }

    .card.editing[b-c7hqw2qriv] {
        box-shadow: 0 0 0 2px var(--accent-color);
        border-color: var(--accent-color);
        transform: translateY(-1px);
    }

    .card.loading[b-c7hqw2qriv], .card.updating[b-c7hqw2qriv] {
        cursor: wait;
    }

/* CTA Card - Special */
.card-cta[b-c7hqw2qriv] {
    background: linear-gradient(135deg, var(--google-blue) 0%, var(--google-green) 100%);
    border: none;
    color: white;
    display: none;
    box-shadow: 0 8px 24px rgba(26, 115, 232, 0.3);
    position: relative;
    min-height: 320px;
    padding: 32px 24px 24px 24px;
}

    .card-cta.visible[b-c7hqw2qriv] {
        display: inline-block;
        animation: fadeInUp 0.5s ease-out, ctaPulse 4s ease-in-out infinite;
    }

@@keyframes ctaPulse {
    0%[b-c7hqw2qriv], 100%[b-c7hqw2qriv] {
        box-shadow: 0 8px 24px rgba(26, 115, 232, 0.3);
        transform: translateY(0);
    }

    50%[b-c7hqw2qriv] {
        box-shadow: 0 12px 32px rgba(52, 168, 83, 0.4);
        transform: translateY(-2px);
    }
}

.card-cta .card-icon-bg[b-c7hqw2qriv] {
    color: white;
    opacity: 0.1;
    font-size: 100px;
}

.card-cta:hover[b-c7hqw2qriv] {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(26, 115, 232, 0.45) !important;
    background: linear-gradient(135deg, #1557b0 0%, #2e8b4e 100%);
}

.cta-content[b-c7hqw2qriv] {
    position: relative;
    z-index: 2;
}

.cta-title[b-c7hqw2qriv] {
    font-size: 22px;
    font-weight: var(--font-black);
    margin-bottom: 10px;
    margin-top: 24px;
    letter-spacing: -0.02em;
    color: white;
}

.cta-subtitle[b-c7hqw2qriv] {
    font-size: 15px;
    font-weight: var(--font-regular);
    margin-bottom: 18px;
    opacity: 0.95;
    line-height: 1.5;
    color: white;
}

.cta-features[b-c7hqw2qriv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.cta-feature[b-c7hqw2qriv] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: white;
    opacity: 0.9;
}

    .cta-feature i[b-c7hqw2qriv] {
        font-size: 10px;
        width: 18px;
        height: 18px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

.cta-button[b-c7hqw2qriv] {
    background: white;
    color: var(--google-blue);
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: var(--font-bold);
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: buttonPulse 2s ease-in-out infinite;
}

@@keyframes buttonPulse {
    0%[b-c7hqw2qriv], 100%[b-c7hqw2qriv] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    50%[b-c7hqw2qriv] {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }
}

.cta-button:hover[b-c7hqw2qriv] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    background: #f9fafb;
    animation: none;
}

.cta-button i[b-c7hqw2qriv] {
    font-size: 16px;
}

.cta-badge[b-c7hqw2qriv] {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.25);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}

/* Progress indicator */
.progress-indicator[b-c7hqw2qriv] {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border: 2px solid #e6e8eb;
    z-index: 100;
    min-width: 180px;
    display: none;
    animation: slideInRight 0.4s ease-out;
}

    .progress-indicator.visible[b-c7hqw2qriv] {
        display: block;
    }

@@keyframes slideInRight {
    from[b-c7hqw2qriv] {
        transform: translateX(100%);
        opacity: 0;
    }

    to[b-c7hqw2qriv] {
        transform: translateX(0);
        opacity: 1;
    }
}

.progress-title[b-c7hqw2qriv] {
    font-size: 11px;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8b949e;
    margin-bottom: 6px;
}

.progress-value[b-c7hqw2qriv] {
    font-size: 22px;
    font-weight: var(--font-black);
    color: #24292f;
    margin-bottom: 8px;
}

.progress-bar[b-c7hqw2qriv] {
    height: 5px;
    background: #e6e8eb;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar-fill[b-c7hqw2qriv] {
    height: 100%;
    /*background: linear-gradient(90deg, var(--google-green), var(--google-blue));*/
    background: linear-gradient(90deg, #f00c71 0%, #ff0080 50%, #f00c71 100%);
    border-radius: 5px;
    transition: width 0.3s ease;
}

.progress-message[b-c7hqw2qriv] {
    font-size: 12px;
    color: #57606a;
}

/* Background Watermark Icons */
.card-icon-bg[b-c7hqw2qriv] {
    position: absolute;
    right: -15px;
    bottom: -15px;
    font-size: 80px;
    color: var(--accent-color);
    opacity: 0.08;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: floatIcon 6s ease-in-out infinite;
}

@@keyframes floatIcon {
    0%[b-c7hqw2qriv], 100%[b-c7hqw2qriv] {
        transform: translateY(0) rotate(0deg);
    }

    33%[b-c7hqw2qriv] {
        transform: translateY(-5px) rotate(3deg);
    }

    66%[b-c7hqw2qriv] {
        transform: translateY(3px) rotate(-3deg);
    }
}

.card:hover:not(.loading):not(.updating) .card-icon-bg[b-c7hqw2qriv] {
    transform: rotate(-15deg) scale(1.15) translateX(-10px);
    opacity: 0.12;
    animation: none;
}

.card.editing .card-icon-bg[b-c7hqw2qriv] {
    animation: iconPulse 2s ease-in-out infinite;
}

@@keyframes iconPulse {
    0%[b-c7hqw2qriv], 100%[b-c7hqw2qriv] {
        transform: rotate(-15deg) scale(1.15) translateX(-10px);
        opacity: 0.12;
    }

    50%[b-c7hqw2qriv] {
        transform: rotate(-15deg) scale(1.25) translateX(-10px);
        opacity: 0.18;
    }
}

/* Card Header with DOT */
.card-title[b-c7hqw2qriv] {
    font-size: 15px;
    font-weight: var(--font-heavy);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--accent-color, #24292f);
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s ease;
}

    .card-title[b-c7hqw2qriv]::before {
        content: '';
        width: 8px;
        height: 8px;
        background: var(--accent-color);
        border-radius: 50%;
        opacity: 0.8;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        flex-shrink: 0;
    }

/* Stagger dot animations */
.card:nth-child(2) .card-title[b-c7hqw2qriv]::before {
    animation: dotPulse 3s ease-in-out infinite 0.2s;
}

.card:nth-child(3) .card-title[b-c7hqw2qriv]::before {
    animation: dotPulse 3s ease-in-out infinite 0.4s;
}

.card:nth-child(4) .card-title[b-c7hqw2qriv]::before {
    animation: dotPulse 3s ease-in-out infinite 0.6s;
}

.card:nth-child(5) .card-title[b-c7hqw2qriv]::before {
    animation: dotPulse 3s ease-in-out infinite 0.8s;
}

.card:nth-child(6) .card-title[b-c7hqw2qriv]::before {
    animation: dotPulse 3s ease-in-out infinite 1s;
}

.card:nth-child(7) .card-title[b-c7hqw2qriv]::before {
    animation: dotPulse 3s ease-in-out infinite 1.2s;
}

.card:nth-child(8) .card-title[b-c7hqw2qriv]::before {
    animation: dotPulse 3s ease-in-out infinite 1.4s;
}

.card:nth-child(9) .card-title[b-c7hqw2qriv]::before {
    animation: dotPulse 3s ease-in-out infinite 1.6s;
}

.card:nth-child(10) .card-title[b-c7hqw2qriv]::before {
    animation: dotPulse 3s ease-in-out infinite 1.8s;
}

.card:hover:not(.loading):not(.updating) .card-title[b-c7hqw2qriv] {
    transform: translateX(2px);
}

    .card:hover:not(.loading):not(.updating) .card-title[b-c7hqw2qriv]::before {
        animation-play-state: paused;
        transform: scale(1.3);
        opacity: 1;
    }

/* Card Content */
.card-content[b-c7hqw2qriv] {
    position: relative;
    z-index: 1;
}

.card-text[b-c7hqw2qriv] {
    font-size: var(--text-size);
    color: #24292f;
    outline: none;
    border: none;
    width: 100%;
    resize: none;
    background: transparent;
    font-family: inherit;
    line-height: 1.65;
    font-weight: var(--font-regular);
    overflow: hidden;
    min-height: 80px;
    letter-spacing: 0.01em;
}

    .card-text:focus[b-c7hqw2qriv] {
        outline: none;
    }

    .card-text[b-c7hqw2qriv]::placeholder {
        color: #d0d7de;
        font-weight: var(--font-regular);
    }

/* Market value highlight */
.highlight-number[b-c7hqw2qriv] {
    font-size: 36px;
    font-weight: var(--font-black);
    color: var(--accent-color);
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    letter-spacing: -0.03em;
}

/* Card color themes - Using Google's colors */
.card-problem[b-c7hqw2qriv] {
    --accent-color: var(--google-red);
    background: linear-gradient(135deg, #fff5f5 0%, #fff 60%);
    border-color: rgba(234, 67, 53, 0.2);
}

.card-solution[b-c7hqw2qriv] {
    --accent-color: var(--google-green);
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 60%);
    border-color: rgba(52, 168, 83, 0.2);
}

.card-market[b-c7hqw2qriv] {
    --accent-color: var(--google-yellow);
    background: linear-gradient(135deg, #fffbeb 0%, #fff 60%);
    border-color: rgba(251, 188, 4, 0.2);
}

.card-business[b-c7hqw2qriv] {
    --accent-color: var(--google-blue);
    background: linear-gradient(135deg, #e8f3ff 0%, #fff 60%);
    border-color: rgba(26, 115, 232, 0.2);
}

.card-forms[b-c7hqw2qriv] {
    --accent-color: var(--google-green);
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 60%);
    border-color: rgba(52, 168, 83, 0.2);
}

.card-personas[b-c7hqw2qriv] {
    --accent-color: var(--google-blue);
    background: linear-gradient(135deg, #e8f3ff 0%, #fff 60%);
    border-color: rgba(26, 115, 232, 0.2);
}

.card-customers[b-c7hqw2qriv] {
    --accent-color: var(--google-yellow);
    background: linear-gradient(135deg, #fffbeb 0%, #fff 60%);
    border-color: rgba(251, 188, 4, 0.2);
}

.card-competitors[b-c7hqw2qriv] {
    --accent-color: var(--google-red);
    background: linear-gradient(135deg, #fff5f5 0%, #fff 60%);
    border-color: rgba(234, 67, 53, 0.2);
}

.card-risks[b-c7hqw2qriv] {
    --accent-color: var(--google-red);
    background: linear-gradient(135deg, #fef2f2 0%, #fff 60%);
    border-color: rgba(234, 67, 53, 0.2);
}

/* Status Bar */
.status-bar[b-c7hqw2qriv] {
    background: white;
    border-radius: 12px;
    padding: 16px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 2px solid #e6e8eb;
    position: relative;
}

.status-left[b-c7hqw2qriv] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.status-text[b-c7hqw2qriv] {
    color: #57606a;
    font-size: 14px;
    font-weight: var(--font-semibold);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.01em;
}

.status-dot[b-c7hqw2qriv] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--google-green);
    animation: blink 2s ease-in-out infinite;
}

@@keyframes blink {
    0%[b-c7hqw2qriv], 100%[b-c7hqw2qriv] {
        opacity: 1;
    }

    50%[b-c7hqw2qriv] {
        opacity: 0.3;
    }
}

/* Read-only Toggle */
.readonly-toggle[b-c7hqw2qriv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(26, 115, 232, 0.08), rgba(52, 168, 83, 0.08));
    border-radius: 20px;
}

.readonly-label[b-c7hqw2qriv] {
    font-size: 12px;
    font-weight: var(--font-bold);
    color: #57606a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.toggle-switch[b-c7hqw2qriv] {
    position: relative;
    width: 44px;
    height: 24px;
    background: #d0d7de;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .toggle-switch.active[b-c7hqw2qriv] {
        background: linear-gradient(135deg, var(--google-blue) 0%, var(--google-green) 100%);
    }

.toggle-slider[b-c7hqw2qriv] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch.active .toggle-slider[b-c7hqw2qriv] {
    transform: translateX(20px);
}

.toggle-icon[b-c7hqw2qriv] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: white;
    opacity: 0;
    transition: opacity 0.2s ease;
}

    .toggle-icon.lock-icon[b-c7hqw2qriv] {
        right: 6px;
    }

    .toggle-icon.edit-icon[b-c7hqw2qriv] {
        left: 6px;
    }

.toggle-switch.active .lock-icon[b-c7hqw2qriv] {
    opacity: 0.8;
}

.toggle-switch:not(.active) .edit-icon[b-c7hqw2qriv] {
    opacity: 0.8;
}

/* Read-only indicator */
.readonly-indicator[b-c7hqw2qriv] {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--google-blue) 0%, var(--google-green) 100%);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 101;
    animation: slideDown 0.3s ease-out;
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
}

@@keyframes slideDown {
    from[b-c7hqw2qriv] {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }

    to[b-c7hqw2qriv] {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

.actions[b-c7hqw2qriv] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.action-btn[b-c7hqw2qriv] {
    padding: 9px 18px;
    background: white;
    border: 2px solid #d0d7de;
    border-radius: 9px;
    font-size: 14px;
    font-weight: var(--font-semibold);
    color: #24292f;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 7px;
    letter-spacing: 0.01em;
}

    .action-btn:hover:not(:disabled)[b-c7hqw2qriv] {
        background: #f6f8fa;
        border-color: #8b949e;
        transform: translateY(-1px);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    }

    .action-btn:disabled[b-c7hqw2qriv] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .action-btn.primary[b-c7hqw2qriv] {
        background: linear-gradient(135deg, var(--google-blue), var(--google-green));
        color: white;
        border: none;
        font-weight: var(--font-bold);
    }

        .action-btn.primary:hover:not(:disabled)[b-c7hqw2qriv] {
            box-shadow: 0 6px 16px rgba(26, 115, 232, 0.35);
            transform: translateY(-2px);
            background: linear-gradient(135deg, #1557b0, #2e8b4e);
        }

/* Responsive Design */
@@media (max-width: 1024px) {
    .masonry-grid[b-c7hqw2qriv] {
        column-count: 2;
    }

    .hero-icon[b-c7hqw2qriv] {
        font-size: 100px;
    }

    .progress-indicator[b-c7hqw2qriv] {
        top: 10px;
        right: 10px;
    }
}

@@media (max-width: 768px) {
    :root[b-c7hqw2qriv] {
        --gap: 16px;
    }

    .masonry-grid[b-c7hqw2qriv] {
        column-count: 1;
    }

    .hero-card[b-c7hqw2qriv] {
        padding: 24px;
        min-height: 180px;
    }

    .card[b-c7hqw2qriv] {
        padding: 20px;
        min-height: 160px;
    }

    .card-title[b-c7hqw2qriv] {
        font-size: 14px;
    }

    .hero-title[b-c7hqw2qriv] {
        font-size: 14px;
    }

    .hero-icon[b-c7hqw2qriv] {
        font-size: 80px;
        right: -10px;
    }

    .card-icon-bg[b-c7hqw2qriv] {
        font-size: 60px;
    }

    .progress-indicator[b-c7hqw2qriv] {
        position: static;
        margin: 0 0 20px 0;
        width: 100%;
        animation: none;
    }

    .cta-title[b-c7hqw2qriv] {
        font-size: 20px;
        margin-top: 10px;
    }

    .cta-badge[b-c7hqw2qriv] {
        position: static;
        display: inline-block;
        margin-bottom: 10px;
    }

    .cta-button[b-c7hqw2qriv] {
        width: 100%;
        justify-content: center;
    }

    .status-bar[b-c7hqw2qriv] {
        padding: 14px 18px;
    }

    .status-left[b-c7hqw2qriv] {
        width: 100%;
        justify-content: space-between;
    }

    .readonly-toggle[b-c7hqw2qriv] {
        padding: 4px 8px;
    }

    .readonly-label[b-c7hqw2qriv] {
        font-size: 11px;
    }

    .actions[b-c7hqw2qriv] {
        width: 100%;
    }

    .action-btn[b-c7hqw2qriv] {
        flex: 1;
        justify-content: center;
        padding: 10px 12px;
        font-size: 13px;
    }

    .readonly-indicator[b-c7hqw2qriv] {
        top: 10px;
        font-size: 10px;
        padding: 4px 12px;
    }
}

@@media (max-width: 480px) {
    .header-subtitle[b-c7hqw2qriv] {
        font-size: 14px;
    }

    .empty-state-title[b-c7hqw2qriv] {
        font-size: 16px;
    }

    .empty-state-message[b-c7hqw2qriv] {
        font-size: 13px;
    }

    .highlight-number[b-c7hqw2qriv] {
        font-size: 32px;
    }
}

/* Animations */
.hero-card[b-c7hqw2qriv], .card[b-c7hqw2qriv] {
    animation: fadeInUp 0.5s ease-out backwards;
}

    .card:nth-child(1)[b-c7hqw2qriv] {
        animation-delay: 0s;
    }

    .card:nth-child(2)[b-c7hqw2qriv] {
        animation-delay: 0.05s;
    }

    .card:nth-child(3)[b-c7hqw2qriv] {
        animation-delay: 0.1s;
    }

    .card:nth-child(4)[b-c7hqw2qriv] {
        animation-delay: 0.15s;
    }

    .card:nth-child(5)[b-c7hqw2qriv] {
        animation-delay: 0.2s;
    }

    .card:nth-child(6)[b-c7hqw2qriv] {
        animation-delay: 0.25s;
    }

    .card:nth-child(7)[b-c7hqw2qriv] {
        animation-delay: 0.3s;
    }

    .card:nth-child(8)[b-c7hqw2qriv] {
        animation-delay: 0.35s;
    }

    .card:nth-child(9)[b-c7hqw2qriv] {
        animation-delay: 0.4s;
    }

    .card:nth-child(10)[b-c7hqw2qriv] {
        animation-delay: 0.45s;
    }

@@keyframes fadeInUp {
    from[b-c7hqw2qriv] {
        opacity: 0;
        transform: translateY(20px);
    }

    to[b-c7hqw2qriv] {
        opacity: 1;
        transform: translateY(0);
    }
}
/* _content/AinnaProduct/Components/ProdComponents/AinnaPricingAndPostPayment.razor.rz.scp.css */
/* CSS Variables - Applied to container */
/*.container {
    --primary: #f00c71;
    --primary-dark: #d00560;
    --primary-light: #ff4d9a;
    --primary-ultra-light: rgba(240, 12, 113, 0.06);
    --success: #10b981;
    --warning: #f59e0b;
    --highlight-bg: rgb(255, 251, 221);
    --highlight-border: rgba(180, 180, 180, 0.2);
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --border: #e5e7eb;
    --border-light: #f3f4f6;
    --bg-subtle: #fafafa;
    --radius: 16px;
    --radius-sm: 10px;
    --radius-xs: 6px;
}*/

    /* Reset for all child elements */
    /*.container ::deep * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }*/

/* Container */
/*.container {
    max-width: 1360px;
    margin: 0 auto;
    margin-top: 100px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding: 0px;
}*/
    /* State-based Container Backgrounds */
    /*.container.state-default {
        background: #ffffff;
    }

    .container.state-generating {
        background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);*/
        /* Very light blue */
    /*}

    .container.state-ready-download {
        background: linear-gradient(135deg, #f0fdf4 0%, #f7fee7 100%);*/
        /* Very light green/yellow */
    /*}

    .container.state-error {
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);*/
        /* Very light yellow/amber */
    /*}*/

    /* Optional: Add a subtle border to reinforce the state */
    /*.container.state-generating {
        border: 1px solid rgba(59, 130, 246, 0.1);
    }

    .container.state-ready-download {
        border: 1px solid rgba(34, 197, 94, 0.1);
    }

    .container.state-error {
        border: 1px solid rgba(245, 158, 11, 0.15);
    }*/
/* Container with all base styles and variables */
.container[b-3es3b82tbe] {
    /* CSS Variables */
    --primary: #f00c71;
    --primary-dark: #d00560;
    --primary-light: #ff4d9a;
    --primary-ultra-light: rgba(240, 12, 113, 0.06);
    --success: #10b981;
    --warning: #f59e0b;
    --highlight-bg: rgb(255, 251, 221);
    --highlight-border: rgba(180, 180, 180, 0.2);
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --border: #e5e7eb;
    --border-light: #f3f4f6;
    --bg-subtle: #fafafa;
    --radius: 16px;
    --radius-sm: 10px;
    --radius-xs: 6px;
    /* Base Styles */
    max-width: 1360px;
    margin: 0 auto;
    margin-top: 100px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding: 0px;
    /* Smooth state transitions */
    transition: background 0.4s ease, border 0.4s ease;
}

    /* Reset for all child elements */
    .container[b-3es3b82tbe]  * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* State-based Container Backgrounds */
    .container.state-default[b-3es3b82tbe] {
        background: #ffffff;
        border-radius: 20px;
    }

    .container.state-generating[b-3es3b82tbe] {
        background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
        border: 1px solid rgba(59, 130, 246, 0.1);
        border-radius: 20px;
        /*padding: 32px;*/
    }

    .container.state-ready-download[b-3es3b82tbe] {
        background: linear-gradient(135deg, #f0fdf4 0%, #f7fee7 100%);
        border: 1px solid rgba(34, 197, 94, 0.1);
        border-radius: 20px;
        /*padding: 32px;*/
    }

    .container.state-error[b-3es3b82tbe] {
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
        border: 1px solid rgba(245, 158, 11, 0.15);
        border-radius: 20px;
        /*padding: 32px;*/
    }
    .container.state-ready-download .download-panel[b-3es3b82tbe] {
        background: linear-gradient(135deg, #dcfce7 0%, #ecfccb 100%);
        border: 1px solid rgba(34, 197, 94, 0.15);
    }

/* Header */
.header[b-3es3b82tbe] {
    text-align: center;
    margin-bottom: 48px;
    animation: fadeIn-b-3es3b82tbe 0.6s ease;
}

    .header h1[b-3es3b82tbe] {
        font-size: clamp(26px, 4vw, 38px);
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 12px;
        letter-spacing: -0.03em;
    }

    .header p[b-3es3b82tbe] {
        font-size: clamp(15px, 2vw, 17px);
        color: var(--text-secondary);
        max-width: 600px;
        margin: 0 auto;
    }

.idea-name[b-3es3b82tbe] {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

/* State Badge */
.state-indicator[b-3es3b82tbe] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-subtle);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

    .state-indicator.purchased[b-3es3b82tbe] {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
        color: var(--success);
    }

/* Promo Panel */
.promo-panel[b-3es3b82tbe] {
    background: var(--highlight-bg);
    border: 1px solid var(--highlight-border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    /*display: none;*/
    animation: slideDown-b-3es3b82tbe 0.5s ease;
}

    .promo-panel.active[b-3es3b82tbe] {
        display: flex;
        align-items: center;
        gap: 20px;
    }

.promo-icon[b-3es3b82tbe] {
    width: 44px;
    height: 44px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.promo-content[b-3es3b82tbe] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20px;
}

.promo-text-section[b-3es3b82tbe] {
    flex: 1;
}

.promo-title[b-3es3b82tbe] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.promo-text[b-3es3b82tbe] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.promo-code-section[b-3es3b82tbe] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.promo-code-box[b-3es3b82tbe] {
    display: flex;
    align-items: center;
    background: white;
    border: 2px dashed var(--primary);
    border-radius: 8px;
    padding: 10px 16px;
    gap: 8px;
    height: 40px;
}

.promo-code-display[b-3es3b82tbe] {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.05em;
}

.copy-btn[b-3es3b82tbe] {
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    height: 40px;
}

    .copy-btn:hover[b-3es3b82tbe] {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(240, 12, 113, 0.3);
    }

    .copy-btn.copied[b-3es3b82tbe] {
        background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
    }

.promo-close[b-3es3b82tbe] {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .promo-close:hover[b-3es3b82tbe] {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text-secondary);
    }

/* Compact Pricing Cards */
.pricing-section[b-3es3b82tbe] {
    background: white;
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-light);
}

.pricing-cards[b-3es3b82tbe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.pricing-card[b-3es3b82tbe] {
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
    position: relative;
    overflow: hidden;
}

    .pricing-card[b-3es3b82tbe]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
        transform: translateY(-100%);
        transition: transform 0.25s ease;
    }

    .pricing-card:hover[b-3es3b82tbe]::before,
    .pricing-card.selected[b-3es3b82tbe]::before {
        transform: translateY(0);
    }

    .pricing-card:hover[b-3es3b82tbe] {
        border-color: var(--primary);
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(240, 12, 113, 0.12);
    }

    .pricing-card.selected[b-3es3b82tbe] {
        border-color: var(--primary);
        background: linear-gradient(135deg, rgba(240, 12, 113, 0.02) 0%, transparent 100%);
    }

.recommended-badge[b-3es3b82tbe] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--primary);
    color: white;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.card-header[b-3es3b82tbe] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.package-icon[b-3es3b82tbe] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    flex-shrink: 0;
}

.package-name[b-3es3b82tbe] {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
}

.package-price[b-3es3b82tbe] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

    .package-price span[b-3es3b82tbe] {
        font-size: 13px;
        color: var(--text-tertiary);
        font-weight: 400;
    }

.package-tagline[b-3es3b82tbe] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Package Contents */
.package-contents[b-3es3b82tbe] {
    /*background: white;*/
    border-radius: 20px;
    overflow: hidden;
    /*min-height:1000px;*/
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-light);
}

    .package-contents.active[b-3es3b82tbe] {
        opacity: 1;
        max-height: 4000px;
        margin-top: 32px;
    }

        .package-contents.active.purchased-view[b-3es3b82tbe] {
            margin-top: 0;
        }

.contents-wrapper[b-3es3b82tbe] {
    padding: 40px;
}

.contents-layout[b-3es3b82tbe] {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 48px;
}

/* Left Column */
.contents-left[b-3es3b82tbe] {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Loading Spinner - Add this section to your original CSS */
.loading-container[b-3es3b82tbe] {
    padding: 60px;
    text-align: center;
    animation: fadeIn-b-3es3b82tbe 0.3s ease-out;
}

.loading-spinner[b-3es3b82tbe] {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-3es3b82tbe 0.8s linear infinite;
    margin-bottom: 16px;
}

.loading-text[b-3es3b82tbe] {
    display: block;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
    animation: pulse-b-3es3b82tbe 1.5s ease-in-out infinite;
}

@keyframes pulse-b-3es3b82tbe {
    0%, 100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* Optional: Add fade-in to contents-wrapper when it appears */
.contents-wrapper[b-3es3b82tbe] {
    animation: fadeIn-b-3es3b82tbe 0.4s ease-out;
}


.package-info[b-3es3b82tbe] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.package-badge[b-3es3b82tbe] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--primary-ultra-light);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    width: fit-content;
}

.package-title[b-3es3b82tbe] {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.package-moto[b-3es3b82tbe] {
    font-size: 18px;
    font-weight: 600;
    color: rgb(36, 32, 32);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.package-description[b-3es3b82tbe] {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Highlights Section */
.highlights-section[b-3es3b82tbe] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-label[b-3es3b82tbe] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.highlights-list[b-3es3b82tbe] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.highlight-item[b-3es3b82tbe] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.5;
}

    .highlight-item i[b-3es3b82tbe] {
        color: var(--primary);
        font-size: 10px;
        margin-top: 5px;
        flex-shrink: 0;
    }

/* Features Section */
.features-section[b-3es3b82tbe] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: var(--bg-subtle);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
}

.features-list[b-3es3b82tbe] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feature-item[b-3es3b82tbe] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-primary);
}

    .feature-item i[b-3es3b82tbe] {
        color: var(--success);
        font-size: 11px;
        flex-shrink: 0;
    }

/* Right Column - Documents */
.contents-right[b-3es3b82tbe] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.documents-header[b-3es3b82tbe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.documents-title[b-3es3b82tbe] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.documents-count[b-3es3b82tbe] {
    padding: 4px 12px;
    background: var(--primary-ultra-light);
    border-radius: 100px;
    font-size: 12px;
    color: var(--primary);
    font-weight: 600;
}

/* Documents Grid */
.documents-container[b-3es3b82tbe] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.documents-grid[b-3es3b82tbe] {
    display: grid;
    gap: 12px;
}

    .documents-grid.many-docs[b-3es3b82tbe] {
        grid-template-columns: repeat(2, 1fr);
    }

.document-item[b-3es3b82tbe] {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

    .document-item:hover[b-3es3b82tbe] {
        border-color: var(--primary);
        background: var(--primary-ultra-light);
        transform: translateX(4px);
    }

.doc-icon[b-3es3b82tbe] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 16px;
    flex-shrink: 0;
}

.doc-info[b-3es3b82tbe] {
    flex: 1;
    min-width: 0;
}

.doc-name[b-3es3b82tbe] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.doc-description[b-3es3b82tbe] {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Action Section */
.action-section[b-3es3b82tbe] {
    grid-column: span 2;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--border-light);
}

/* Pre-Purchase Action Panel */
.action-panel[b-3es3b82tbe] {
    background: var(--highlight-bg);
    border: 1px solid var(--highlight-border);
    border-radius: var(--radius);
    padding: 24px;
    text-align: center;
}

.action-title[b-3es3b82tbe] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.action-subtitle[b-3es3b82tbe] {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

/* Retention Options - Standard Radio Style */
.retention-options[b-3es3b82tbe] {
    display: flex;
    flex-direction: row;
    gap: 24px;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.retention-option[b-3es3b82tbe] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px;
    transition: all 0.2s;
}

    .retention-option:hover[b-3es3b82tbe] {
        transform: translateX(4px);
    }

.retention-radio[b-3es3b82tbe] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: 50%;
    background: white;
    position: relative;
    transition: all 0.2s;
    flex-shrink: 0;
}

.retention-option.selected .retention-radio[b-3es3b82tbe] {
    border-color: var(--primary);
}

    .retention-option.selected .retention-radio[b-3es3b82tbe]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--primary);
    }

.retention-option input[type="radio"][b-3es3b82tbe] {
    display: none;
}

.retention-text[b-3es3b82tbe] {
    font-size: 14px;
    color: var(--text-primary);
}

.retention-label[b-3es3b82tbe] {
    font-weight: 500;
}

.retention-desc[b-3es3b82tbe] {
    color: var(--text-secondary);
    margin-left: 4px;
}

/* Action Button */
.action-button[b-3es3b82tbe] {
    padding: 16px 48px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(240, 12, 113, 0.2);
}

    .action-button:hover[b-3es3b82tbe] {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(240, 12, 113, 0.3);
    }

    .action-button.download[b-3es3b82tbe] {
        background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
        box-shadow: 0 4px 16px rgba(16, 185, 129, 0.2);
    }
    .action-button.regenerate[b-3es3b82tbe] {
        background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
        box-shadow: 0 4px 16px rgba(16, 185, 129, 0.2);
    }

        .action-button.download:hover[b-3es3b82tbe] {
            box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
        }

.action-note[b-3es3b82tbe] {
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Post-Purchase Download Panel */
.download-panel[b-3es3b82tbe] {
    background: var(--highlight-bg);
    border: 1px solid var(--highlight-border);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.download-info[b-3es3b82tbe] {
    flex: 1;
}

.download-title[b-3es3b82tbe] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.download-details[b-3es3b82tbe] {
    font-size: 13px;
    color: var(--text-secondary);
}

.retention-display[b-3es3b82tbe] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: white;
    border-radius: 100px;
    font-size: 12px;
    color: var(--text-primary);
    margin-left: 8px;
}

    .retention-display i[b-3es3b82tbe] {
        color: var(--warning);
        font-size: 11px;
    }

/* Modal Styles */
.modal-overlay[b-3es3b82tbe] {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

    .modal-overlay.active[b-3es3b82tbe] {
        display: flex !important;
        align-items: center;
        justify-content: center;
        animation: fadeIn-b-3es3b82tbe 0.3s ease;
    }

.modal[b-3es3b82tbe] {
    background: white;
    border-radius: 20px;
    padding: 32px;
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-3es3b82tbe 0.3s ease;
}

.modal-header[b-3es3b82tbe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.modal-title[b-3es3b82tbe] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-close[b-3es3b82tbe] {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

    .modal-close:hover[b-3es3b82tbe] {
        background: var(--bg-subtle);
        color: var(--text-secondary);
    }

.modal-body[b-3es3b82tbe] {
    margin-bottom: 24px;
}

.payment-form[b-3es3b82tbe] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group[b-3es3b82tbe] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-3es3b82tbe] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.form-input[b-3es3b82tbe] {
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s;
}

    .form-input:focus[b-3es3b82tbe] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(240, 12, 113, 0.1);
    }

.modal-footer[b-3es3b82tbe] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.modal-button[b-3es3b82tbe] {
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

    .modal-button.secondary[b-3es3b82tbe] {
        background: var(--bg-subtle);
        color: var(--text-primary);
    }

    .modal-button.primary[b-3es3b82tbe] {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        color: white;
    }

    .modal-button:hover[b-3es3b82tbe] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

/* Generation State */
.generation-overlay[b-3es3b82tbe] {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: 999;
}

    .generation-overlay.active[b-3es3b82tbe] {
        display: flex !important;
        align-items: center;
        justify-content: center;
        animation: fadeIn-b-3es3b82tbe 0.3s ease;
    }

.generation-content[b-3es3b82tbe] {
    text-align: center;
    max-width: 400px;
    padding: 40px;
}

.generation-icon[b-3es3b82tbe] {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    position: relative;
}

.generation-spinner[b-3es3b82tbe] {
    width: 100%;
    height: 100%;
    border: 4px solid var(--border-light);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-3es3b82tbe 1s linear infinite;
}

.generation-title[b-3es3b82tbe] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.generation-subtitle[b-3es3b82tbe] {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.generation-progress[b-3es3b82tbe] {
    background: var(--border-light);
    border-radius: 100px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}

.generation-progress-bar[b-3es3b82tbe] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: 100px;
    transition: width 0.5s ease;
}

.generation-status[b-3es3b82tbe] {
    font-size: 13px;
    color: var(--text-tertiary);
}

/* Animations */
@keyframes fadeIn-b-3es3b82tbe {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn-b-3es3b82tbe {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideDown-b-3es3b82tbe {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp-b-3es3b82tbe {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin-b-3es3b82tbe {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .contents-layout[b-3es3b82tbe] {
        grid-template-columns: 320px 1fr;
        gap: 32px;
    }

    .documents-grid.many-docs[b-3es3b82tbe] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 868px) {
    .contents-layout[b-3es3b82tbe] {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .action-section[b-3es3b82tbe] {
        grid-column: span 1;
    }

    .download-panel[b-3es3b82tbe] {
        flex-direction: column;
        text-align: center;
    }

    .promo-content[b-3es3b82tbe] {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .promo-code-section[b-3es3b82tbe] {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .pricing-section[b-3es3b82tbe] {
        padding: 24px;
        border-radius: 16px;
    }

    .pricing-cards[b-3es3b82tbe] {
        grid-template-columns: 1fr;
    }

    .contents-wrapper[b-3es3b82tbe] {
        padding: 24px;
    }

    .retention-options[b-3es3b82tbe] {
        gap: 8px;
    }

    .retention-option[b-3es3b82tbe] {
        width: 100%;
        justify-content: center;
    }

    .action-button[b-3es3b82tbe] {
        width: 100%;
        justify-content: center;
    }

    .promo-panel[b-3es3b82tbe] {
        padding: 16px;
    }

        .promo-panel.active[b-3es3b82tbe] {
            flex-direction: column;
            text-align: center;
            gap: 12px;
        }

    .promo-icon[b-3es3b82tbe] {
        margin: 0 auto;
    }

    .promo-content[b-3es3b82tbe] {
        width: 100%;
    }

    .promo-close[b-3es3b82tbe] {
        position: absolute;
        top: 8px;
        right: 8px;
    }
}
/* _content/AinnaProduct/Components/ProdComponents/AinnaSimpleSpinner.razor.rz.scp.css */
/* Base Spinner */
.inline-spinner[b-lz7ml38m2t] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: currentColor;
}

.spinner-icon[b-lz7ml38m2t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.spinner-svg[b-lz7ml38m2t] {
    animation: rotate-b-lz7ml38m2t 1.4s linear infinite;
    transform-origin: center;
}

.spinner-circle[b-lz7ml38m2t] {
    stroke: currentColor;
    stroke-linecap: round;
    animation: dash-b-lz7ml38m2t 1.4s ease-in-out infinite;
    stroke-dasharray: 80, 200;
    stroke-dashoffset: 0;
}

.spinner-message[b-lz7ml38m2t] {
    font-size: inherit;
    font-weight: 500;
    color: #334155;
    white-space: nowrap;
    letter-spacing: -0.01em;
    line-height: 1.5;
}

.spinner-dots[b-lz7ml38m2t] {
    display: inline-block;
    margin-left: 2px;
}

    .spinner-dots .dot[b-lz7ml38m2t] {
        display: inline-block;
        width: 4px;
        height: 4px;
        margin: 0 1px;
        background: currentColor;
        border-radius: 50%;
        animation: dotBounce-b-lz7ml38m2t 1.4s infinite ease-in-out;
    }

        .spinner-dots .dot:nth-child(1)[b-lz7ml38m2t] {
            animation-delay: -0.32s;
        }

        .spinner-dots .dot:nth-child(2)[b-lz7ml38m2t] {
            animation-delay: -0.16s;
        }

/* Sizes */
.inline-spinner.size-small[b-lz7ml38m2t] {
    gap: 8px;
    font-size: 13px;
    letter-spacing: -0.005em;
}

    .inline-spinner.size-small .spinner-svg[b-lz7ml38m2t] {
        width: 16px;
        height: 16px;
    }

    .inline-spinner.size-small .spinner-dots .dot[b-lz7ml38m2t] {
        width: 3px;
        height: 3px;
    }

.inline-spinner.size-medium[b-lz7ml38m2t] {
    gap: 12px;
    font-size: 15px;
    letter-spacing: -0.01em;
}

    .inline-spinner.size-medium .spinner-svg[b-lz7ml38m2t] {
        width: 20px;
        height: 20px;
    }

.inline-spinner.size-large[b-lz7ml38m2t] {
    gap: 16px;
    font-size: 17px;
    letter-spacing: -0.015em;
}

    .inline-spinner.size-large .spinner-svg[b-lz7ml38m2t] {
        width: 28px;
        height: 28px;
    }

    .inline-spinner.size-large .spinner-dots .dot[b-lz7ml38m2t] {
        width: 5px;
        height: 5px;
    }

/* Animations */
@keyframes rotate-b-lz7ml38m2t {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash-b-lz7ml38m2t {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -125px;
    }
}

@keyframes dotBounce-b-lz7ml38m2t {
    0%, 80%, 100% {
        opacity: 0;
        transform: scale(0);
    }

    40% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Theme Support (inherits color from parent) */
.dark-theme .spinner-message[b-lz7ml38m2t] {
    color: #e5e7eb;
}
/* _content/AinnaProduct/Components/ProdComponents/AinnaSmartBrandingEditor.razor.rz.scp.css */
/* All CSS styles exactly as in the HTML version */
:root[b-xdjlib4pb3] {
    --primary-blue: #1a73e8;
    --primary-green: #34a853;
    --primary-yellow: #fbbc04;
    --primary-red: #ea4335;
    --text-primary: #1a1f2e;
    --text-secondary: #5f6368;
    --text-tertiary: #9aa0a6;
    --text-heading: #2c3e50;
    --background-primary: #ffffff;
    --background-secondary: #f8f9fa;
    --background-tertiary: #f1f3f4;
    --border-color: #e8eaed;
    --gradient-primary: linear-gradient(135deg, #1a73e8 0%, #34a853 100%);
    --gradient-button: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
    --color-accent-1: #1a73e8;
    --shadow-color: rgba(26, 115, 232, 0.15);
    --shadow-color-light: rgba(26, 115, 232, 0.08);
    --page-background: linear-gradient(180deg, #f0f7ff 0%, #f8fbff 100%);
}

*[b-xdjlib4pb3] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html[b-xdjlib4pb3] {
    scroll-behavior: smooth;
}

body[b-xdjlib4pb3] {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

.branding-container[b-xdjlib4pb3] {
    min-height: 100vh;
    background: var(--page-background);
    position: relative;
    overflow-x: hidden;
}

.branding-wrapper[b-xdjlib4pb3] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 40px 80px;
    min-height: 100vh;
}

.page-header[b-xdjlib4pb3] {
    margin-bottom: 48px;
}

.page-title[b-xdjlib4pb3] {
    font-size: 40px;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 12px;
}

.page-subtitle[b-xdjlib4pb3] {
    font-size: 18px;
    color: var(--text-secondary);
}

.branding-layout[b-xdjlib4pb3] {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 32px;
    position: relative;
    align-items: start;
}

.left-column[b-xdjlib4pb3] {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    align-self: start;
    height: auto;
    z-index: 10;
    padding-top: 10px;
}

.sticky-content[b-xdjlib4pb3] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.process-card[b-xdjlib4pb3] {
    background: var(--background-primary);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    padding: 24px;
}

.process-title[b-xdjlib4pb3] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.process-steps[b-xdjlib4pb3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.process-step[b-xdjlib4pb3] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.step-number[b-xdjlib4pb3] {
    width: 24px;
    height: 24px;
    background: var(--gradient-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

    .step-number.inactive[b-xdjlib4pb3] {
        background: var(--background-secondary);
        color: var(--text-tertiary);
    }

.step-content[b-xdjlib4pb3] {
    flex: 1;
}

.step-title[b-xdjlib4pb3] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.step-desc[b-xdjlib4pb3] {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

.tips-card[b-xdjlib4pb3] {
    background: rgba(26, 115, 232, 0.03);
    border: none;
    border-radius: 20px;
    padding: 24px;
    position: relative;
}

.tips-title[b-xdjlib4pb3] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent-1);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .tips-title i[b-xdjlib4pb3] {
        color: var(--color-accent-1);
        font-size: 16px;
    }

.tips-list[b-xdjlib4pb3] {
    list-style: none;
    padding: 0;
}

    .tips-list li[b-xdjlib4pb3] {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.6;
        margin-bottom: 10px;
    }

        .tips-list li:last-child[b-xdjlib4pb3] {
            margin-bottom: 0;
        }

    .tips-list i[b-xdjlib4pb3] {
        color: var(--color-accent-1);
        font-size: 12px;
        margin-top: 3px;
        flex-shrink: 0;
    }

.data-usage-card[b-xdjlib4pb3] {
    background: var(--background-primary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 24px;
    position: relative;
}

.data-usage-title[b-xdjlib4pb3] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .data-usage-title i[b-xdjlib4pb3] {
        color: var(--primary-green);
        font-size: 16px;
    }

.data-usage-content[b-xdjlib4pb3] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

    .data-usage-content p[b-xdjlib4pb3] {
        margin-bottom: 12px;
    }

.data-usage-list[b-xdjlib4pb3] {
    list-style: none;
    padding: 0;
    margin: 12px 0;
}

    .data-usage-list li[b-xdjlib4pb3] {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 10px;
    }

        .data-usage-list li i[b-xdjlib4pb3] {
            color: var(--color-accent-1);
            font-size: 14px;
            margin-top: 2px;
            flex-shrink: 0;
        }

        .data-usage-list li span[b-xdjlib4pb3] {
            flex: 1;
            font-size: 12px;
        }

.data-usage-note[b-xdjlib4pb3] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

    .data-usage-note i[b-xdjlib4pb3] {
        color: var(--primary-green);
        font-size: 14px;
        margin-top: 1px;
        flex-shrink: 0;
    }

.info-section[b-xdjlib4pb3] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.section-card[b-xdjlib4pb3] {
    background: var(--background-primary);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    padding: 32px;
}

.card-header[b-xdjlib4pb3] {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.card-title[b-xdjlib4pb3] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 4px;
}

.card-description[b-xdjlib4pb3] {
    font-size: 14px;
    color: var(--text-tertiary);
}

.logo-cropper-container[b-xdjlib4pb3] {
    background: var(--background-secondary);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 32px;
    position: relative;
}

.upload-area[b-xdjlib4pb3] {
    border: 2px dashed var(--border-color);
    border-radius: 16px;
    padding: 48px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    margin: 32px;
}

    .upload-area:hover[b-xdjlib4pb3] {
        border-color: var(--color-accent-1);
        background: var(--background-secondary);
    }

    .upload-area.dragging[b-xdjlib4pb3] {
        border-color: var(--primary-green);
        background: rgba(52, 168, 83, 0.05);
    }

.upload-icon[b-xdjlib4pb3] {
    font-size: 64px;
    color: var(--text-tertiary);
    opacity: 0.3;
    margin-bottom: 16px;
}

.upload-title[b-xdjlib4pb3] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.upload-subtitle[b-xdjlib4pb3] {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.upload-button[b-xdjlib4pb3] {
    display: inline-block;
    padding: 12px 32px;
    background: var(--gradient-button);
    color: white;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .upload-button:hover[b-xdjlib4pb3] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px var(--shadow-color);
    }

.upload-formats[b-xdjlib4pb3] {
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.cropper-interface[b-xdjlib4pb3] {
    display: none;
    position: relative;
    background: #1a1f2e;
    overflow: hidden;
}

    .cropper-interface.active[b-xdjlib4pb3] {
        display: block;
    }

.cropper-canvas[b-xdjlib4pb3] {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
    background: #1a1f2e;
    user-select: none;
}

.cropper-container[b-xdjlib4pb3] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
}

.cropper-image[b-xdjlib4pb3] {
    display: block;
    max-width: none;
    pointer-events: none;
    opacity: 0.4;
}

.crop-box[b-xdjlib4pb3] {
    position: absolute;
    border: 2px solid #fff;
    cursor: move;
    z-index: 100;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
}

    .crop-box[b-xdjlib4pb3]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 1px dashed rgba(255, 255, 255, 0.5);
    }

    .crop-box[b-xdjlib4pb3]::after {
        content: '';
        position: absolute;
        top: 33.33%;
        left: 0;
        right: 0;
        bottom: 33.33%;
        border-left: 1px dashed rgba(255, 255, 255, 0.3);
        border-right: 1px dashed rgba(255, 255, 255, 0.3);
    }

.resize-handle[b-xdjlib4pb3] {
    position: absolute;
    width: 12px;
    height: 12px;
    background: white;
    border: 2px solid var(--color-accent-1);
    border-radius: 50%;
    z-index: 101;
}

    .resize-handle.nw[b-xdjlib4pb3] {
        top: -6px;
        left: -6px;
        cursor: nw-resize;
    }

    .resize-handle.ne[b-xdjlib4pb3] {
        top: -6px;
        right: -6px;
        cursor: ne-resize;
    }

    .resize-handle.sw[b-xdjlib4pb3] {
        bottom: -6px;
        left: -6px;
        cursor: sw-resize;
    }

    .resize-handle.se[b-xdjlib4pb3] {
        bottom: -6px;
        right: -6px;
        cursor: se-resize;
    }

    .resize-handle.n[b-xdjlib4pb3] {
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
        cursor: n-resize;
    }

    .resize-handle.s[b-xdjlib4pb3] {
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        cursor: s-resize;
    }

    .resize-handle.w[b-xdjlib4pb3] {
        left: -6px;
        top: 50%;
        transform: translateY(-50%);
        cursor: w-resize;
    }

    .resize-handle.e[b-xdjlib4pb3] {
        right: -6px;
        top: 50%;
        transform: translateY(-50%);
        cursor: e-resize;
    }

.cropper-footer[b-xdjlib4pb3] {
    background: white;
    border-top: 1px solid var(--border-color);
}

.cropper-controls[b-xdjlib4pb3] {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.zoom-control[b-xdjlib4pb3] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    max-width: 300px;
}

.zoom-label[b-xdjlib4pb3] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.zoom-slider[b-xdjlib4pb3] {
    flex: 1;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
}

    .zoom-slider[b-xdjlib4pb3]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--color-accent-1);
        cursor: pointer;
    }

.zoom-value[b-xdjlib4pb3] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 45px;
    text-align: right;
}

.crop-actions[b-xdjlib4pb3] {
    display: flex;
    gap: 12px;
}

.btn-crop[b-xdjlib4pb3] {
    padding: 10px 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: white;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn-crop:hover[b-xdjlib4pb3] {
        background: var(--background-secondary);
    }

    .btn-crop.primary[b-xdjlib4pb3] {
        background: var(--gradient-button);
        color: white;
        border: none;
    }

        .btn-crop.primary:hover[b-xdjlib4pb3] {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px var(--shadow-color);
        }

.logo-specs[b-xdjlib4pb3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(26, 115, 232, 0.05) 0%, rgba(52, 168, 83, 0.03) 100%);
    border-radius: 12px;
}

.spec-item[b-xdjlib4pb3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.spec-icon[b-xdjlib4pb3] {
    width: 36px;
    height: 36px;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-1);
}

.spec-content[b-xdjlib4pb3] {
    flex: 1;
}

.spec-title[b-xdjlib4pb3] {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-bottom: 2px;
}

.spec-value[b-xdjlib4pb3] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.form-grid[b-xdjlib4pb3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.form-group[b-xdjlib4pb3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

    .form-group.full-width[b-xdjlib4pb3] {
        grid-column: 1 / -1;
    }

.form-label[b-xdjlib4pb3] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.required[b-xdjlib4pb3] {
    color: var(--primary-red);
    font-weight: normal;
}

.form-input[b-xdjlib4pb3],
.form-select[b-xdjlib4pb3],
.form-textarea[b-xdjlib4pb3] {
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    background: var(--background-secondary);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.form-textarea[b-xdjlib4pb3] {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
}

    .form-input:focus[b-xdjlib4pb3],
    .form-select:focus[b-xdjlib4pb3],
    .form-textarea:focus[b-xdjlib4pb3] {
        outline: none;
        border-color: var(--color-accent-1);
        background: var(--background-primary);
    }

    .form-input.error[b-xdjlib4pb3],
    .form-select.error[b-xdjlib4pb3],
    .form-textarea.error[b-xdjlib4pb3] {
        border-color: var(--primary-red);
    }

.validation-message[b-xdjlib4pb3] {
    position: absolute;
    bottom: -20px;
    left: 0;
    font-size: 12px;
    color: var(--primary-red);
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .validation-message.show[b-xdjlib4pb3] {
        opacity: 1;
    }

.info-banner[b-xdjlib4pb3] {
    padding: 16px 20px;
    background: rgba(26, 115, 232, 0.04);
    border-radius: 12px;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

    .info-banner i[b-xdjlib4pb3] {
        color: var(--color-accent-1);
        margin-top: 2px;
        flex-shrink: 0;
        opacity: 0.7;
    }

.signing-section[b-xdjlib4pb3] {
    margin-bottom: 32px;
}

.section-subtitle[b-xdjlib4pb3] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .section-subtitle i[b-xdjlib4pb3] {
        color: var(--color-accent-1);
    }

.char-counter[b-xdjlib4pb3] {
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: right;
    margin-top: 4px;
}

    .char-counter.warning[b-xdjlib4pb3] {
        color: var(--primary-yellow);
        font-weight: 500;
    }

.save-section[b-xdjlib4pb3] {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
}

.btn-save[b-xdjlib4pb3] {
    padding: 14px 32px;
    background: var(--gradient-button);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn-save:hover:not(:disabled)[b-xdjlib4pb3] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px var(--shadow-color);
    }

    .btn-save:disabled[b-xdjlib4pb3] {
        opacity: 0.5;
        cursor: not-allowed;
        background: var(--text-tertiary);
    }

.notification[b-xdjlib4pb3] {
    position: fixed;
    top: 40px;
    right: 20px;
    padding: 16px 24px;
    background: var(--background-primary);
    border-radius: 12px;
    box-shadow: 0 4px 16px var(--shadow-color);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1000;
    transform: translateX(400px);
    transition: transform 0.3s ease;
}

    .notification.show[b-xdjlib4pb3] {
        transform: translateX(0);
    }

    .notification.error[b-xdjlib4pb3] {
        border-left: 4px solid var(--primary-red);
    }

    .notification.success[b-xdjlib4pb3] {
        border-left: 4px solid var(--primary-green);
    }

.spinner[b-xdjlib4pb3] {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 2px solid white;
    width: 16px;
    height: 16px;
    animation: spin-b-xdjlib4pb3 1s linear infinite;
    display: inline-block;
}

@keyframes spin-b-xdjlib4pb3 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 1200px) {
    .branding-wrapper[b-xdjlib4pb3] {
        padding: 30px;
    }

    .branding-layout[b-xdjlib4pb3] {
        grid-template-columns: 300px 1fr;
    }
}

@media (max-width: 968px) {
    .branding-layout[b-xdjlib4pb3] {
        grid-template-columns: 1fr;
    }

    .left-column[b-xdjlib4pb3] {
        position: static;
    }

    .form-grid[b-xdjlib4pb3] {
        grid-template-columns: 1fr;
    }

    .logo-specs[b-xdjlib4pb3] {
        grid-template-columns: 1fr;
    }

    .zoom-control[b-xdjlib4pb3] {
        margin: 0;
    }
}
/* _content/AinnaProduct/Components/ProdComponents/AinnaSmartFeedbackForm.razor.rz.scp.css */

/* ========================================
           FEEDBACK PAGE STYLES
           Uses CSS variables from app.css
           ======================================== */

/* Page-specific backgrounds */
:root[b-dy35yjfzzt] {
    --page-background: linear-gradient(180deg, #f0f7ff 0%, #f8fbff 100%);
}

body.pink-theme[b-dy35yjfzzt] {
    --page-background: linear-gradient(180deg, #fff5fa 0%, #fffcfe 100%);
}

body.dark-theme[b-dy35yjfzzt] {
    --page-background: linear-gradient(180deg, #050811 0%, #0a0f1c 100%);
}

body.sunset-theme[b-dy35yjfzzt] {
    --page-background: linear-gradient(180deg, #fff7f0 0%, #fffdf9 100%);
}

/* Base Container */
.feedback-container[b-dy35yjfzzt] {
    min-height: 100vh;
    background: var(--page-background);
    position: relative;
    overflow-x: hidden;
}

/* Background Pattern */
.bg-pattern[b-dy35yjfzzt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.4;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
}

body.dark-theme .bg-pattern[b-dy35yjfzzt] {
    opacity: 0.2;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* Main Wrapper */
.feedback-wrapper[b-dy35yjfzzt] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 40px 80px;
    min-height: 100vh;
}

/* Page Header */
.page-header[b-dy35yjfzzt] {
    margin-bottom: 48px;
}

.page-title[b-dy35yjfzzt] {
    font-size: 40px;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 12px;
}

.page-subtitle[b-dy35yjfzzt] {
    font-size: 18px;
    color: var(--text-secondary);
}

/* Layout Grid */
.feedback-layout[b-dy35yjfzzt] {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 32px;
    position: relative;
    align-items: start;
}

/* Left Column */
.left-column[b-dy35yjfzzt] {
    position: -webkit-sticky;
    position: sticky;
    top: 20px;
    align-self: start;
    height: auto;
    z-index: 10;
}

.sticky-content[b-dy35yjfzzt] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* All Cards - Using CSS Variables */
.impact-card[b-dy35yjfzzt], .stats-card[b-dy35yjfzzt], .process-card[b-dy35yjfzzt], .section-card[b-dy35yjfzzt] {
    background: var(--background-primary);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    padding: 24px;
}

/* Impact Card Specific */
.impact-card[b-dy35yjfzzt] {
    text-align: center;
}

.impact-title[b-dy35yjfzzt], .stats-title[b-dy35yjfzzt] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.impact-stat[b-dy35yjfzzt] {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

    .impact-stat:last-of-type[b-dy35yjfzzt] {
        border-bottom: none;
        margin-bottom: 16px;
    }

    .impact-stat .stat-value[b-dy35yjfzzt] {
        display: block;
        font-size: 24px;
        font-weight: 700;
        color: var(--color-accent-1);
        margin-bottom: 4px;
    }

    .impact-stat .stat-label[b-dy35yjfzzt] {
        font-size: 12px;
        color: var(--text-tertiary);
    }

.impact-message[b-dy35yjfzzt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--gradient-primary);
    border-radius: 12px;
    color: white;
    font-size: 13px;
    font-weight: 500;
}

/* Stats Card */
.stat-item[b-dy35yjfzzt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

    .stat-item:last-child[b-dy35yjfzzt] {
        border-bottom: none;
    }

.stat-label[b-dy35yjfzzt] {
    font-size: 14px;
    color: var(--text-secondary);
}

.stat-value[b-dy35yjfzzt] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Process Card */
.process-title[b-dy35yjfzzt] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
}

    .process-title i[b-dy35yjfzzt] {
        color: var(--color-accent-1);
    }

.process-steps[b-dy35yjfzzt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.process-step[b-dy35yjfzzt] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.step-number[b-dy35yjfzzt] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.step-text[b-dy35yjfzzt] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Right Column - Feedback Section */
.feedback-section[b-dy35yjfzzt] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Progress Bar */
.progress-bar[b-dy35yjfzzt] {
    height: 4px;
    background: var(--border-color);
    border-radius: 4px;
    margin-bottom: 24px;
    overflow: hidden;
}

.progress-fill[b-dy35yjfzzt] {
    height: 100%;
    background: var(--gradient-button);
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Section Card */
.section-card[b-dy35yjfzzt] {
    padding: 32px;
}

.card-header[b-dy35yjfzzt] {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.card-title[b-dy35yjfzzt] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 4px;
}

.card-description[b-dy35yjfzzt] {
    font-size: 14px;
    color: var(--text-tertiary);
}

/* Form Sections */
.feedback-form-section[b-dy35yjfzzt] {
    margin-bottom: 32px;
}

    .feedback-form-section:last-of-type[b-dy35yjfzzt] {
        margin-bottom: 0;
    }

/* Form Elements */
.form-label[b-dy35yjfzzt] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block;
}

.form-textarea[b-dy35yjfzzt], .textarea-wrapper textarea[b-dy35yjfzzt] {
    width: 100%;
    min-height: 120px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    background: var(--background-secondary);
    color: var(--text-primary);
    resize: vertical;
    transition: all 0.3s ease;
    line-height: 1.6;
}

    .form-textarea:focus[b-dy35yjfzzt] {
        outline: none;
        border-color: var(--color-accent-1);
        background: var(--background-primary);
        box-shadow: 0 0 0 4px var(--shadow-color-light);
    }

    .form-textarea[b-dy35yjfzzt]::placeholder {
        color: var(--text-tertiary);
    }

.textarea-wrapper[b-dy35yjfzzt] {
    position: relative;
}

.char-counter[b-dy35yjfzzt] {
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: right;
    margin-top: 4px;
}

    .char-counter.warning[b-dy35yjfzzt] {
        color: var(--primary-yellow);
        font-weight: 500;
    }

/* Emoji Rating */
.emoji-container[b-dy35yjfzzt] {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
}

.emoji-option[b-dy35yjfzzt] {
    width: 90px;
    padding: 20px 10px;
    border: 2px solid var(--border-color);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
    background: var(--background-secondary);
}

    .emoji-option:hover[b-dy35yjfzzt] {
        transform: translateY(-6px) scale(1.05);
        box-shadow: 0 12px 24px var(--shadow-color-light);
        border-color: var(--color-accent-1);
    }

    .emoji-option.selected[b-dy35yjfzzt] {
        background: var(--gradient-primary);
        border-color: transparent;
        transform: scale(1.08);
        box-shadow: 0 10px 24px var(--shadow-color);
    }

    .emoji-option .emoji[b-dy35yjfzzt] {
        font-size: 36px;
        display: block;
        margin-bottom: 8px;
    }

    .emoji-option .label[b-dy35yjfzzt] {
        font-size: 11px;
        color: var(--text-tertiary);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .emoji-option.selected .label[b-dy35yjfzzt] {
        color: white;
    }

/* Category Pills */
.category-pills[b-dy35yjfzzt] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.pill[b-dy35yjfzzt] {
    padding: 12px 20px;
    border-radius: 24px;
    border: 2px solid var(--border-color);
    background: var(--background-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-size: 14px;
    font-weight: 600;
}

    .pill:hover[b-dy35yjfzzt] {
        border-color: var(--color-accent-1);
        transform: translateY(-2px);
        box-shadow: 0 6px 12px var(--shadow-color-light);
    }

    .pill.selected[b-dy35yjfzzt] {
        background: var(--gradient-button);
        color: white;
        border-color: transparent;
        transform: scale(1.05);
    }

/* Testimonial Section */
.testimonial-section[b-dy35yjfzzt] {
    margin-top: 24px;
    border-radius: 16px;
    overflow: hidden;
    display: none;
    animation: fadeIn-b-dy35yjfzzt 0.5s ease;
    background: linear-gradient(135deg, rgba(26, 115, 232, 0.03) 0%, rgba(52, 168, 83, 0.02) 100%);
    border: 1px solid var(--border-color);
    padding: 28px;
}

body.pink-theme .testimonial-section[b-dy35yjfzzt] {
    background: linear-gradient(135deg, rgba(240, 12, 113, 0.03) 0%, rgba(255, 77, 148, 0.02) 100%);
}

body.dark-theme .testimonial-section[b-dy35yjfzzt] {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.05) 0%, rgba(0, 255, 136, 0.03) 100%);
}

body.sunset-theme .testimonial-section[b-dy35yjfzzt] {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.03) 0%, rgba(156, 136, 255, 0.02) 100%);
}

.testimonial-section.show[b-dy35yjfzzt] {
    display: block;
}

@keyframes fadeIn-b-dy35yjfzzt {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.testimonial-content[b-dy35yjfzzt] {
    position: relative;
}

.testimonial-header[b-dy35yjfzzt] {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.testimonial-icon[b-dy35yjfzzt] {
    font-size: 32px;
    line-height: 1;
}

.testimonial-title[b-dy35yjfzzt] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 4px;
}

.testimonial-subtitle[b-dy35yjfzzt] {
    font-size: 14px;
    color: var(--text-secondary);
}

.testimonial-samples[b-dy35yjfzzt] {
    margin-bottom: 20px;
    padding: 16px;
    background: var(--background-secondary);
    border-radius: 12px;
    position: relative;
    min-height: 80px;
    border: 1px solid var(--border-color);
}

.testimonial-quote[b-dy35yjfzzt] {
    color: var(--text-secondary);
    font-size: 14px;
    font-style: italic;
    line-height: 1.6;
    text-align: center;
    opacity: 1;
    transition: opacity 0.5s ease;
}

    .testimonial-quote i[b-dy35yjfzzt] {
        color: var(--color-accent-1);
        opacity: 0.3;
        margin-right: 8px;
    }

    .testimonial-quote .author[b-dy35yjfzzt] {
        font-size: 12px;
        font-style: normal;
        margin-top: 12px;
        color: var(--text-tertiary);
    }

.testimonial-dots[b-dy35yjfzzt] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.dot[b-dy35yjfzzt] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
    transition: all 0.3s ease;
}

    .dot.active[b-dy35yjfzzt] {
        width: 24px;
        border-radius: 4px;
        background: var(--color-accent-1);
    }

.testimonial-textarea[b-dy35yjfzzt] {
    background: var(--background-primary) !important;
    border: 1px solid var(--border-color) !important;
    min-height: 80px;
}

    .testimonial-textarea:focus[b-dy35yjfzzt] {
        border-color: var(--color-accent-1) !important;
        box-shadow: 0 0 0 4px var(--shadow-color-light);
    }

/* Consent Section */
.testimonial-consent[b-dy35yjfzzt] {
    margin-top: 20px;
    padding: 20px;
    background: var(--background-primary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.consent-header[b-dy35yjfzzt] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

    .consent-header i[b-dy35yjfzzt] {
        color: var(--color-accent-1);
    }

.consent-text[b-dy35yjfzzt] {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
}

    .consent-text ul[b-dy35yjfzzt] {
        margin-top: 8px;
        margin-left: 20px;
    }

    .consent-text li[b-dy35yjfzzt] {
        margin-bottom: 4px;
    }

.consent-checkbox[b-dy35yjfzzt] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    padding: 12px;
    background: var(--background-secondary);
    border-radius: 8px;
    transition: background 0.2s ease;
}

    .consent-checkbox:hover[b-dy35yjfzzt] {
        background: linear-gradient(90deg, var(--background-secondary) 0%, var(--background-tertiary) 100%);
    }

    .consent-checkbox input[type="checkbox"][b-dy35yjfzzt] {
        position: absolute;
        opacity: 0;
    }

    .consent-checkbox .checkbox-custom[b-dy35yjfzzt] {
        width: 20px;
        height: 20px;
        border: 2px solid var(--border-color);
        border-radius: 4px;
        background: var(--background-primary);
        transition: all 0.3s ease;
        flex-shrink: 0;
        margin-top: 2px;
        position: relative;
    }

    .consent-checkbox input:checked ~ .checkbox-custom[b-dy35yjfzzt] {
        background: var(--color-accent-1);
        border-color: var(--color-accent-1);
    }

    .consent-checkbox .checkbox-custom[b-dy35yjfzzt]::after {
        content: '';
        position: absolute;
        display: none;
        left: 5px;
        top: 2px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .consent-checkbox input:checked ~ .checkbox-custom[b-dy35yjfzzt]::after {
        display: block;
    }

    .consent-checkbox .checkbox-label[b-dy35yjfzzt] {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
        line-height: 1.5;
    }

/* Submit Section */
.submit-section[b-dy35yjfzzt] {
    display: flex;
    gap: 16px;
    padding-top: 24px;
    margin-top: 32px;
    border-top: 1px solid var(--border-color);
}

.btn-primary[b-dy35yjfzzt], .btn-secondary[b-dy35yjfzzt] {
    flex: 1;
    padding: 16px 32px;
    border-radius: 12px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
}

.btn-primary[b-dy35yjfzzt] {
    background: var(--gradient-button);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-dy35yjfzzt] {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px var(--shadow-color);
    }

    .btn-primary:disabled[b-dy35yjfzzt] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-primary.loading[b-dy35yjfzzt] {
        opacity: 0.8;
    }

.btn-secondary[b-dy35yjfzzt] {
    background: transparent;
    color: var(--text-secondary);
    border: 2px solid var(--border-color);
}

    .btn-secondary:hover[b-dy35yjfzzt] {
        background: var(--background-secondary);
        border-color: var(--border-strong);
    }

/* Success State */
.success-card[b-dy35yjfzzt] {
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-content[b-dy35yjfzzt] {
    text-align: center;
    padding: 40px;
}

.success-animation[b-dy35yjfzzt] {
    width: 120px;
    height: 120px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 32px;
    animation: pulse-b-dy35yjfzzt 2s infinite;
}

@keyframes pulse-b-dy35yjfzzt {
    0% {
        box-shadow: 0 0 0 0 var(--shadow-color);
    }

    70% {
        box-shadow: 0 0 0 30px transparent;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

.success-animation i[b-dy35yjfzzt] {
    color: white;
    font-size: 56px;
}

.success-title[b-dy35yjfzzt] {
    font-size: 36px;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 16px;
}

.success-message[b-dy35yjfzzt] {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 32px;
    font-size: 16px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.success-stats[b-dy35yjfzzt] {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
}

.success-stat[b-dy35yjfzzt] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

    .success-stat i[b-dy35yjfzzt] {
        color: var(--color-accent-1);
    }

/* Spinner */
.spinner-small[b-dy35yjfzzt] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-dy35yjfzzt 0.8s linear infinite;
    margin-right: 8px;
}

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

/* Notification Toast */
.notification[b-dy35yjfzzt] {
    position: fixed;
    top: 40px;
    right: 20px;
    padding: 16px 24px;
    background: var(--background-primary);
    border-radius: 12px;
    box-shadow: 0 4px 16px var(--shadow-color);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1000;
    transform: translateX(400px);
    transition: transform 0.3s ease;
}

    .notification.show[b-dy35yjfzzt] {
        transform: translateX(0);
    }

    .notification.success i[b-dy35yjfzzt] {
        color: var(--primary-green);
        font-size: 20px;
    }

    .notification.error i[b-dy35yjfzzt] {
        color: var(--primary-red);
        font-size: 20px;
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .feedback-wrapper[b-dy35yjfzzt] {
        padding: 30px;
    }

    .feedback-layout[b-dy35yjfzzt] {
        grid-template-columns: 300px 1fr;
    }
}

@media (max-width: 968px) {
    .feedback-layout[b-dy35yjfzzt] {
        grid-template-columns: 1fr;
    }

    .left-column[b-dy35yjfzzt] {
        position: static;
    }

    .emoji-container[b-dy35yjfzzt] {
        gap: 8px;
    }

    .emoji-option[b-dy35yjfzzt] {
        width: 75px;
        padding: 16px 8px;
    }

        .emoji-option .emoji[b-dy35yjfzzt] {
            font-size: 28px;
        }
}

@media (max-width: 480px) {
    .feedback-wrapper[b-dy35yjfzzt] {
        padding: 24px;
    }

    .section-card[b-dy35yjfzzt] {
        padding: 24px;
        border-radius: 16px;
    }

    .page-title[b-dy35yjfzzt] {
        font-size: 28px;
    }

    .page-subtitle[b-dy35yjfzzt] {
        font-size: 15px;
    }

    .submit-section[b-dy35yjfzzt] {
        flex-direction: column;
    }

    .category-pills[b-dy35yjfzzt] {
        gap: 6px;
    }

    .pill[b-dy35yjfzzt] {
        padding: 10px 16px;
        font-size: 13px;
    }
}
/* _content/AinnaProduct/Components/ProdComponents/AinnaSmartLoadingAnimation.razor.rz.scp.css */
/* ===== Wrapper Styles ===== */
.ainna-loader-wrapper[b-98de4dbd8n] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    /* Use absolute positioning to fill parent container */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

    /* For containers with min-height and padding - stretches to fill */
    .ainna-loader-wrapper.fill-container[b-98de4dbd8n] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    /* Alternative: fills container accounting for padding */
    .ainna-loader-wrapper.fill-padded[b-98de4dbd8n] {
        min-height: calc(100vh - 80px); /* Viewport minus container padding */
        margin: 0;
        width: 100%;
        height: 100%;
    }

    /* Force fill parent container with flexbox */
    .ainna-loader-wrapper.fill-flex[b-98de4dbd8n] {
        flex: 1 1 100%;
        min-height: 0; /* Allow shrinking below min-height if needed */
    }

    /* Fill viewport height */
    .ainna-loader-wrapper.fill-viewport[b-98de4dbd8n] {
        min-height: 100vh;
        height: auto;
    }

    /* Absolute positioning to fill parent */
    .ainna-loader-wrapper.fill-absolute[b-98de4dbd8n] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        min-height: 0;
        width: auto;
        height: auto;
    }

    /* Fixed positioning to fill parent (relative to nearest positioned ancestor) */
    .ainna-loader-wrapper.fill-fixed[b-98de4dbd8n] {
        position: fixed;
        inset: 0;
        min-height: 0;
        width: auto;
        height: auto;
    }

    .ainna-loader-wrapper.inline[b-98de4dbd8n] {
        padding: 0;
        gap: 10px;
        display: inline-flex;
        width: auto;
        height: auto;
        min-height: unset;
        flex: none;
    }

    .ainna-loader-wrapper.overlay[b-98de4dbd8n] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.95);
        z-index: 9999;
        width: 100vw;
        height: 100vh;
        min-height: 0;
    }

    .ainna-loader-wrapper.fullscreen[b-98de4dbd8n] {
        position: fixed;
        inset: 0;
        background: rgba(255, 255, 255, 0.98);
        z-index: 10000;
        width: 100vw;
        height: 100vh;
        min-height: 0;
    }

    .ainna-loader-wrapper.blur[b-98de4dbd8n] {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    .ainna-loader-wrapper.centered[b-98de4dbd8n] {
        align-items: center;
        justify-content: center;
    }

/* Ensure parent containers work properly */
.ainna-loader-container[b-98de4dbd8n] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
}

.loader-content[b-98de4dbd8n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    /* Prevent shrinking */
    flex: 0 0 auto;
    /* Center itself if wrapper fails */
    margin: auto;
}

.close-overlay[b-98de4dbd8n] {
    position: absolute;
    top: 30px;
    right: 30px;
    background: #ef4444;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.2s;
    z-index: 10001;
}

    .close-overlay:hover[b-98de4dbd8n] {
        transform: rotate(90deg);
    }

/* ===== Messages ===== */
.loading-message[b-98de4dbd8n] {
    font-size: 20px;
    color: #374151;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
}

.loading-submessage[b-98de4dbd8n] {
    font-size: 14px;
    color: #6b7280;
    text-align: center;
    margin-top: -10px;
}

.custom-content[b-98de4dbd8n] {
    margin-top: 10px;
}

/* ===== Generation Spinner ===== */
.ainna-loader[b-98de4dbd8n] {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 120px;
    /* Prevent shrinking */
    flex-shrink: 0;
}

    .ainna-loader.small[b-98de4dbd8n] {
        width: 60px;
        height: 60px;
    }

    .ainna-loader.large[b-98de4dbd8n] {
        width: 180px;
        height: 180px;
    }

    .ainna-loader .spinner-ring[b-98de4dbd8n] {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #667eea;
        animation: spin-b-98de4dbd8n 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
    }

        .ainna-loader .spinner-ring:nth-child(2)[b-98de4dbd8n] {
            width: 80%;
            height: 80%;
            top: 10%;
            left: 10%;
            border-top-color: #764ba2;
            animation-delay: 0.2s;
            animation-duration: 1.3s;
        }

        .ainna-loader .spinner-ring:nth-child(3)[b-98de4dbd8n] {
            width: 60%;
            height: 60%;
            top: 20%;
            left: 20%;
            border-top-color: #f59e0b;
            animation-delay: 0.4s;
            animation-duration: 1.1s;
        }

    .ainna-loader .center-icon[b-98de4dbd8n] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 33%;
        height: 33%;
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: pulse-b-98de4dbd8n 2s ease-in-out infinite;
    }

        .ainna-loader .center-icon[b-98de4dbd8n]::after {
            content: 'AI';
            color: white;
            font-weight: 700;
            font-size: 16px;
        }

    .ainna-loader.small .center-icon[b-98de4dbd8n]::after {
        font-size: 10px;
    }

    .ainna-loader.large .center-icon[b-98de4dbd8n]::after {
        font-size: 24px;
    }

/* ===== Processing Dots ===== */
.processing-loader[b-98de4dbd8n] {
    display: inline-flex;
    gap: 8px;
}

    .processing-loader .dot[b-98de4dbd8n] {
        width: 16px;
        height: 16px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 50%;
        animation: processingDot-b-98de4dbd8n 1.4s ease-in-out infinite;
    }

        .processing-loader .dot:nth-child(2)[b-98de4dbd8n] {
            animation-delay: 0.2s;
        }

        .processing-loader .dot:nth-child(3)[b-98de4dbd8n] {
            animation-delay: 0.4s;
        }

        .processing-loader .dot:nth-child(4)[b-98de4dbd8n] {
            animation-delay: 0.6s;
        }

/* ===== Document Stack ===== */
.doc-stack-loader[b-98de4dbd8n] {
    position: relative;
    width: 80px;
    height: 100px;
}

    .doc-stack-loader.small[b-98de4dbd8n] {
        width: 50px;
        height: 60px;
    }

    .doc-stack-loader.large[b-98de4dbd8n] {
        width: 120px;
        height: 150px;
    }

    .doc-stack-loader .doc[b-98de4dbd8n] {
        position: absolute;
        width: 75%;
        height: 80%;
        background: white;
        border: 2px solid #667eea;
        border-radius: 4px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        animation: stackFloat-b-98de4dbd8n 3s ease-in-out infinite;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

        .doc-stack-loader .doc[b-98de4dbd8n]::before {
            content: '';
            position: absolute;
            top: 12%;
            left: 15%;
            right: 15%;
            height: 4%;
            background: #e5e7eb;
            border-radius: 2px;
        }

        .doc-stack-loader .doc[b-98de4dbd8n]::after {
            content: '';
            position: absolute;
            top: 25%;
            left: 15%;
            right: 25%;
            height: 4%;
            background: #e5e7eb;
            border-radius: 2px;
        }

        .doc-stack-loader .doc:nth-child(2)[b-98de4dbd8n] {
            transform: translate(-50%, -50%) rotate(-5deg);
            animation-delay: 0.3s;
            border-color: #764ba2;
        }

        .doc-stack-loader .doc:nth-child(3)[b-98de4dbd8n] {
            transform: translate(-50%, -50%) rotate(5deg);
            animation-delay: 0.6s;
            border-color: #f59e0b;
        }

/* ===== Progress Bar ===== */
.progress-loader[b-98de4dbd8n] {
    width: 300px;
    max-width: 90vw;
}

.progress-bar[b-98de4dbd8n] {
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.progress-fill[b-98de4dbd8n] {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text[b-98de4dbd8n] {
    margin-top: 15px;
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
    text-align: center;
}

/* ===== Button Content ===== */
.button-content[b-98de4dbd8n] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
}

.mini-spinner[b-98de4dbd8n] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-98de4dbd8n 0.8s linear infinite;
}

/* ===== AI Working ===== */
.ai-working[b-98de4dbd8n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.ai-badge[b-98de4dbd8n] {
    background: white;
    padding: 10px 20px;
    border-radius: 30px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: float-b-98de4dbd8n 3s ease-in-out infinite;
}

.badge-dot[b-98de4dbd8n] {
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse-b-98de4dbd8n 1.5s ease-in-out infinite;
}

.badge-text[b-98de4dbd8n] {
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.generation-steps[b-98de4dbd8n] {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

    .generation-steps.vertical[b-98de4dbd8n] {
        flex-direction: column;
        gap: 20px;
    }

.step[b-98de4dbd8n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.3;
    transition: all 0.3s ease;
    position: relative;
}

.generation-steps.vertical .step[b-98de4dbd8n] {
    flex-direction: row;
    gap: 15px;
}

.step.active[b-98de4dbd8n] {
    opacity: 1;
    transform: scale(1.05);
}

.step.complete[b-98de4dbd8n] {
    opacity: 0.7;
}

    .step.complete i[b-98de4dbd8n] {
        color: #10b981 !important;
    }

.step i[b-98de4dbd8n] {
    font-size: 24px;
    color: #667eea;
    transition: color 0.3s ease;
}

.step span[b-98de4dbd8n] {
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
    white-space: nowrap;
}

/* ===== Animations ===== */
@keyframes spin-b-98de4dbd8n {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse-b-98de4dbd8n {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

@keyframes processingDot-b-98de4dbd8n {
    0%, 60%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    30% {
        transform: scale(1.4);
        opacity: 0.7;
    }
}

@keyframes stackFloat-b-98de4dbd8n {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(0deg) translateY(0);
    }

    25% {
        transform: translate(-50%, -50%) rotate(3deg) translateY(-8px);
    }

    75% {
        transform: translate(-50%, -50%) rotate(-3deg) translateY(-8px);
    }
}

@keyframes float-b-98de4dbd8n {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

/* ===== Utility Classes for Different Scenarios ===== */

/* Grid container support */
.ainna-loader-wrapper.fill-grid[b-98de4dbd8n] {
    justify-self: stretch;
    align-self: stretch;
}

/* CSS Grid area support */
.ainna-loader-wrapper.grid-area[b-98de4dbd8n] {
    grid-area: 1 / 1 / -1 / -1;
}

/* Table cell support */
.ainna-loader-wrapper.fill-cell[b-98de4dbd8n] {
    display: table;
    width: 100%;
    height: 100%;
}

    .ainna-loader-wrapper.fill-cell .loader-content[b-98de4dbd8n] {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

/* ===== Theme Variations ===== */
/* These use CSS custom properties that should be defined in your app.css */

/* Default Blue Theme - uses default styles above */

/* Pink Theme */
.pink-theme .ainna-loader .spinner-ring:nth-child(1)[b-98de4dbd8n],
.theme-pink .ainna-loader .spinner-ring:nth-child(1)[b-98de4dbd8n] {
    border-top-color: var(--primary-color, #ec4899);
}

.pink-theme .ainna-loader .spinner-ring:nth-child(2)[b-98de4dbd8n],
.theme-pink .ainna-loader .spinner-ring:nth-child(2)[b-98de4dbd8n] {
    border-top-color: var(--secondary-color, #f472b6);
}

.pink-theme .ainna-loader .center-icon[b-98de4dbd8n],
.theme-pink .ainna-loader .center-icon[b-98de4dbd8n] {
    background: var(--gradient-primary, linear-gradient(135deg, #ec4899, #f472b6));
}

.pink-theme .processing-loader .dot[b-98de4dbd8n],
.theme-pink .processing-loader .dot[b-98de4dbd8n] {
    background: var(--gradient-primary, linear-gradient(135deg, #ec4899, #f472b6));
}

.pink-theme .doc-stack-loader .doc:nth-child(1)[b-98de4dbd8n],
.theme-pink .doc-stack-loader .doc:nth-child(1)[b-98de4dbd8n] {
    border-color: var(--primary-color, #ec4899);
}

.pink-theme .progress-fill[b-98de4dbd8n],
.theme-pink .progress-fill[b-98de4dbd8n] {
    background: var(--gradient-primary, linear-gradient(90deg, #ec4899, #f472b6));
}

.pink-theme .button-content[b-98de4dbd8n],
.theme-pink .button-content[b-98de4dbd8n] {
    background: var(--gradient-primary, linear-gradient(135deg, #ec4899, #f472b6));
}

.pink-theme .badge-text[b-98de4dbd8n],
.theme-pink .badge-text[b-98de4dbd8n] {
    background: var(--gradient-primary, linear-gradient(135deg, #ec4899, #f472b6));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pink-theme .step.active i[b-98de4dbd8n],
.theme-pink .step.active i[b-98de4dbd8n] {
    color: var(--primary-color, #ec4899);
}

/* Dark Theme */
.dark-theme .ainna-loader-wrapper.overlay[b-98de4dbd8n],
.theme-dark .ainna-loader-wrapper.overlay[b-98de4dbd8n] {
    background: var(--overlay-bg, rgba(31, 41, 55, 0.95));
}

.dark-theme .ainna-loader-wrapper.fullscreen[b-98de4dbd8n],
.theme-dark .ainna-loader-wrapper.fullscreen[b-98de4dbd8n] {
    background: var(--fullscreen-bg, rgba(31, 41, 55, 0.98));
}

.dark-theme .loading-message[b-98de4dbd8n],
.theme-dark .loading-message[b-98de4dbd8n] {
    color: var(--text-primary, #e5e7eb);
}

.dark-theme .loading-submessage[b-98de4dbd8n],
.theme-dark .loading-submessage[b-98de4dbd8n] {
    color: var(--text-secondary, #9ca3af);
}

.dark-theme .doc-stack-loader .doc[b-98de4dbd8n],
.theme-dark .doc-stack-loader .doc[b-98de4dbd8n] {
    background: var(--card-bg, #374151);
}

.dark-theme .ai-badge[b-98de4dbd8n],
.theme-dark .ai-badge[b-98de4dbd8n] {
    background: var(--card-bg, #374151);
}

.dark-theme .step span[b-98de4dbd8n],
.theme-dark .step span[b-98de4dbd8n] {
    color: var(--text-secondary, #9ca3af);
}

/* Sunset Theme */
.sunset-theme .ainna-loader .spinner-ring:nth-child(1)[b-98de4dbd8n],
.theme-sunset .ainna-loader .spinner-ring:nth-child(1)[b-98de4dbd8n] {
    border-top-color: var(--primary-color, #f59e0b);
}

.sunset-theme .ainna-loader .spinner-ring:nth-child(2)[b-98de4dbd8n],
.theme-sunset .ainna-loader .spinner-ring:nth-child(2)[b-98de4dbd8n] {
    border-top-color: var(--secondary-color, #ef4444);
}

.sunset-theme .ainna-loader .center-icon[b-98de4dbd8n],
.theme-sunset .ainna-loader .center-icon[b-98de4dbd8n] {
    background: var(--gradient-primary, linear-gradient(135deg, #f59e0b, #ef4444));
}

.sunset-theme .processing-loader .dot[b-98de4dbd8n],
.theme-sunset .processing-loader .dot[b-98de4dbd8n] {
    background: var(--gradient-primary, linear-gradient(135deg, #f59e0b, #ef4444));
}

.sunset-theme .doc-stack-loader .doc:nth-child(1)[b-98de4dbd8n],
.theme-sunset .doc-stack-loader .doc:nth-child(1)[b-98de4dbd8n] {
    border-color: var(--primary-color, #f59e0b);
}

.sunset-theme .progress-fill[b-98de4dbd8n],
.theme-sunset .progress-fill[b-98de4dbd8n] {
    background: var(--gradient-primary, linear-gradient(90deg, #f59e0b, #ef4444));
}

.sunset-theme .button-content[b-98de4dbd8n],
.theme-sunset .button-content[b-98de4dbd8n] {
    background: var(--gradient-primary, linear-gradient(135deg, #f59e0b, #ef4444));
}

.sunset-theme .badge-text[b-98de4dbd8n],
.theme-sunset .badge-text[b-98de4dbd8n] {
    background: var(--gradient-primary, linear-gradient(135deg, #f59e0b, #ef4444));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sunset-theme .step.active i[b-98de4dbd8n],
.theme-sunset .step.active i[b-98de4dbd8n] {
    color: var(--primary-color, #f59e0b);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .generation-steps:not(.vertical)[b-98de4dbd8n] {
        flex-direction: column;
        gap: 15px;
    }

    .loading-message[b-98de4dbd8n] {
        font-size: 18px;
    }

    .progress-loader[b-98de4dbd8n] {
        width: 250px;
    }
}
/* _content/AinnaProduct/Components/ProdComponents/AinnaSmartPricingOptions.razor.rz.scp.css */
/* Page-specific backgrounds using theme variables */
.pricing-page[b-gvhu48j4k4] {
    --page-background: linear-gradient(180deg, #f0f7ff 0%, #f8fbff 100%);
    min-height: 100vh;
    background: var(--page-background);
    position: relative;
    overflow-x: hidden;
}

.theme-pink .pricing-page[b-gvhu48j4k4] {
    --page-background: linear-gradient(180deg, #fff5fa 0%, #fffcfe 100%);
}

.theme-dark .pricing-page[b-gvhu48j4k4] {
    --page-background: linear-gradient(180deg, #050811 0%, #0a0f1c 100%);
}

.theme-sunset .pricing-page[b-gvhu48j4k4] {
    --page-background: linear-gradient(180deg, #fff7f0 0%, #fffdf9 100%);
}

/* Subtle background pattern - dots */
.bg-pattern[b-gvhu48j4k4] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.4;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
}

.theme-dark .bg-pattern[b-gvhu48j4k4] {
    opacity: 0.2;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* Top navigation bar */
.nav-bar[b-gvhu48j4k4] {
    background: var(--background-primary);
    border-bottom: 1px solid var(--border-color);
    padding: 20px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.nav-container[b-gvhu48j4k4] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo[b-gvhu48j4k4] {
    font-size: 28px;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -1px;
}

.nav-back[b-gvhu48j4k4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

    .nav-back:hover[b-gvhu48j4k4] {
        background: var(--background-secondary);
        border-color: var(--border-strong);
        transform: translateX(-2px);
    }

.nav-back-text[b-gvhu48j4k4] {
    display: inline;
}

/* Main wrapper */
.pricing-wrapper[b-gvhu48j4k4] {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 60px 40px;
}

/* Hero section */
.pricing-hero[b-gvhu48j4k4] {
    text-align: center;
    margin-bottom: 80px;
    animation: fadeIn 0.6s ease;
}

.pricing-title[b-gvhu48j4k4] {
    font-size: 48px;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 20px;
    letter-spacing: -1.5px;
}

.pricing-subtitle[b-gvhu48j4k4] {
    font-size: 20px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto 32px;
}

/* Pricing toggle */
.billing-toggle[b-gvhu48j4k4] {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: var(--background-secondary);
    padding: 8px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
}

.toggle-option[b-gvhu48j4k4] {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

    .toggle-option.active[b-gvhu48j4k4] {
        background: var(--background-primary);
        color: var(--text-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

.toggle-badge[b-gvhu48j4k4] {
    background: var(--gradient-primary);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-left: 8px;
}

/* Pricing cards container */
.pricing-cards[b-gvhu48j4k4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    margin-bottom: 80px;
}

/* Individual pricing card */
.pricing-card[b-gvhu48j4k4] {
    background: var(--background-primary);
    border-radius: 24px;
    border: 1px solid var(--border-color);
    padding: 40px;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

    .pricing-card:hover[b-gvhu48j4k4] {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px var(--shadow-color-light);
    }

    .pricing-card.featured[b-gvhu48j4k4] {
        border: 2px solid var(--color-accent-1);
        transform: scale(1.05);
        box-shadow: 0 20px 40px var(--shadow-color-light);
    }

        .pricing-card.featured:hover[b-gvhu48j4k4] {
            transform: scale(1.05) translateY(-4px);
        }

.theme-dark .pricing-card[b-gvhu48j4k4] {
    border-color: var(--border-strong);
}

/* Popular badge */
.popular-badge[b-gvhu48j4k4] {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-button);
    color: white;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Card header */
.card-header[b-gvhu48j4k4] {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border-color);
}

.plan-name[b-gvhu48j4k4] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 8px;
}

.plan-description[b-gvhu48j4k4] {
    font-size: 14px;
    color: var(--text-tertiary);
    margin-bottom: 24px;
}

/* Pricing display */
.price-container[b-gvhu48j4k4] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.currency[b-gvhu48j4k4] {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-secondary);
}

.price[b-gvhu48j4k4] {
    font-size: 48px;
    font-weight: 800;
    color: var(--text-heading);
    letter-spacing: -2px;
}

.period[b-gvhu48j4k4] {
    font-size: 18px;
    color: var(--text-secondary);
}

.price-note[b-gvhu48j4k4] {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 8px;
}

/* Features list */
.features-list[b-gvhu48j4k4] {
    list-style: none;
    margin-bottom: 32px;
    flex-grow: 1;
    padding: 0;
}

.feature-item[b-gvhu48j4k4] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--text-secondary);
}

.feature-icon[b-gvhu48j4k4] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg-subtle);
    border-radius: 50%;
    color: var(--color-accent-1);
}

    .feature-icon i[b-gvhu48j4k4] {
        font-size: 10px;
    }

.feature-text[b-gvhu48j4k4] {
    line-height: 1.5;
}

.feature-highlight[b-gvhu48j4k4] {
    font-weight: 600;
    color: var(--text-primary);
}

/* CTA button */
.card-cta[b-gvhu48j4k4] {
    width: 100%;
    padding: 16px 24px;
    border-radius: 12px;
    border: none;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.btn-primary[b-gvhu48j4k4] {
    background: var(--gradient-button);
    color: white;
}

    .btn-primary:hover[b-gvhu48j4k4] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px var(--shadow-color);
    }

.btn-secondary[b-gvhu48j4k4] {
    background: transparent;
    border: 2px solid var(--border-strong);
    color: var(--text-primary);
}

    .btn-secondary:hover[b-gvhu48j4k4] {
        background: var(--background-secondary);
        transform: translateY(-2px);
    }

/* Enterprise section */
.enterprise-section[b-gvhu48j4k4] {
    background: var(--section-bg-1);
    border-radius: 32px;
    padding: 60px;
    text-align: center;
    margin-bottom: 80px;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.theme-dark .enterprise-section[b-gvhu48j4k4] {
    background: var(--background-secondary);
}

.enterprise-title[b-gvhu48j4k4] {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 16px;
}

.enterprise-subtitle[b-gvhu48j4k4] {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 32px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.enterprise-features[b-gvhu48j4k4] {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.enterprise-feature[b-gvhu48j4k4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

    .enterprise-feature i[b-gvhu48j4k4] {
        color: var(--color-accent-1);
    }

.enterprise-cta[b-gvhu48j4k4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 18px 40px;
    background: var(--gradient-button);
    color: white;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .enterprise-cta:hover[b-gvhu48j4k4] {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px var(--shadow-color);
    }

/* Enterprise form */
.enterprise-form-container[b-gvhu48j4k4] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-top: 0;
}

    .enterprise-form-container.expanded[b-gvhu48j4k4] {
        max-height: 1200px;
        margin-top: 48px;
    }

.enterprise-form[b-gvhu48j4k4] {
    background: var(--background-primary);
    border-radius: 24px;
    padding: 56px 64px;
    text-align: left;
    border: 1px solid var(--border-color);
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0 4px 24px var(--shadow-color-light);
}

.form-header[b-gvhu48j4k4] {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border-color);
}

.form-title[b-gvhu48j4k4] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 10px;
}

.form-subtitle[b-gvhu48j4k4] {
    font-size: 15px;
    color: var(--text-tertiary);
}

.form-grid[b-gvhu48j4k4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.form-group[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group.full-width[b-gvhu48j4k4] {
        grid-column: 1 / -1;
    }

.form-label[b-gvhu48j4k4] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-input[b-gvhu48j4k4],
.form-select[b-gvhu48j4k4],
.form-textarea[b-gvhu48j4k4] {
    padding: 14px 18px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    background: var(--background-secondary);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

    .form-input:focus[b-gvhu48j4k4],
    .form-select:focus[b-gvhu48j4k4],
    .form-textarea:focus[b-gvhu48j4k4] {
        outline: none;
        border-color: var(--color-accent-1);
        background: var(--background-primary);
        box-shadow: 0 0 0 4px var(--shadow-color-light);
    }

.form-textarea[b-gvhu48j4k4] {
    min-height: 100px;
    resize: vertical;
}

.form-footer[b-gvhu48j4k4] {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.form-btn[b-gvhu48j4k4] {
    padding: 16px 32px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.form-btn-primary[b-gvhu48j4k4] {
    background: var(--gradient-button);
    color: white;
    width: 100%;
    max-width: 400px;
}

    .form-btn-primary:hover[b-gvhu48j4k4] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px var(--shadow-color);
    }

.form-success[b-gvhu48j4k4] {
    text-align: center;
    padding: 40px;
}

    .form-success.show[b-gvhu48j4k4] {
        display: block;
    }

.success-icon[b-gvhu48j4k4] {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

    .success-icon i[b-gvhu48j4k4] {
        color: white;
        font-size: 28px;
    }

.success-title[b-gvhu48j4k4] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 8px;
}

.success-message[b-gvhu48j4k4] {
    color: var(--text-secondary);
    font-size: 15px;
}

/* Simple FAQ section - Journalistic style */
.faq-section[b-gvhu48j4k4] {
    max-width: 1200px;
    margin: 0 auto 100px;
    padding: 0 40px;
}

.faq-header[b-gvhu48j4k4] {
    margin-bottom: 64px;
    text-align: center;
}

.faq-title[b-gvhu48j4k4] {
    font-size: 40px;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 16px;
    letter-spacing: -1px;
}

.faq-subtitle[b-gvhu48j4k4] {
    font-size: 18px;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.faq-grid[b-gvhu48j4k4] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 80px;
}

.faq-item[b-gvhu48j4k4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-q[b-gvhu48j4k4] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-heading);
    line-height: 1.3;
    letter-spacing: -0.5px;
    position: relative;
    padding-left: 32px;
}

    .faq-q[b-gvhu48j4k4]::before {
        content: "Q";
        position: absolute;
        left: 0;
        top: 0;
        font-size: 20px;
        font-weight: 800;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.faq-a[b-gvhu48j4k4] {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.8;
    padding-left: 32px;
    font-weight: 400;
}

    .faq-a strong[b-gvhu48j4k4] {
        color: var(--text-primary);
        font-weight: 600;
    }

.faq-highlight[b-gvhu48j4k4] {
    background: linear-gradient(to bottom, transparent 50%, var(--card-bg-subtle) 50%);
    padding: 2px 0;
    font-weight: 600;
    color: var(--text-primary);
}

.faq-stat[b-gvhu48j4k4] {
    color: var(--color-accent-1);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.3px;
}

@@keyframes fadeIn {
    from[b-gvhu48j4k4] {
        opacity: 0;
        transform: translateY(20px);
    }

    to[b-gvhu48j4k4] {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@@media (max-width: 968px) {
    .faq-grid[b-gvhu48j4k4] {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

@@media (max-width: 768px) {
    .nav-container[b-gvhu48j4k4] {
        padding: 0 24px;
    }

    .nav-logo[b-gvhu48j4k4] {
        font-size: 24px;
    }

    .nav-back-text[b-gvhu48j4k4] {
        display: none;
    }

    .pricing-wrapper[b-gvhu48j4k4] {
        padding: 40px 24px;
    }

    .pricing-title[b-gvhu48j4k4] {
        font-size: 32px;
    }

    .pricing-subtitle[b-gvhu48j4k4] {
        font-size: 18px;
    }

    .pricing-cards[b-gvhu48j4k4] {
        grid-template-columns: 1fr;
    }

    .pricing-card.featured[b-gvhu48j4k4] {
        transform: scale(1);
    }

    .enterprise-section[b-gvhu48j4k4] {
        padding: 40px 24px;
    }

    .enterprise-features[b-gvhu48j4k4] {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }

    .enterprise-form[b-gvhu48j4k4] {
        padding: 32px 24px;
    }

    .form-grid[b-gvhu48j4k4] {
        grid-template-columns: 1fr;
    }

    .faq-section[b-gvhu48j4k4] {
        padding: 0 24px;
    }

    .faq-title[b-gvhu48j4k4] {
        font-size: 32px;
    }

    .faq-subtitle[b-gvhu48j4k4] {
        font-size: 16px;
    }

    .faq-grid[b-gvhu48j4k4] {
        gap: 40px;
    }

    .faq-q[b-gvhu48j4k4] {
        font-size: 20px;
        padding-left: 28px;
    }

        .faq-q[b-gvhu48j4k4]::before {
            font-size: 18px;
        }

    .faq-a[b-gvhu48j4k4] {
        font-size: 14px;
        padding-left: 28px;
    }
}
/* _content/AinnaProduct/Components/ProdComponents/ConfirmationBox.razor.rz.scp.css */
/* Variables */
.modal-dark[b-6mxdhndyso] {
    --modal-bg: linear-gradient(to bottom, #0f172a, #1e1921);
    --modal-text: #dccdd9;
    --modal-text-secondary: #cbd5e1;
    --modal-border: rgb(86, 55, 88, 0.12);
    --modal-shadow: rgba(0, 0, 0, 0.45);
    --modal-button-cancel: rgba(148, 163, 184, 0.1);
    --modal-button-cancel-hover: rgba(148, 163, 184, 0.2);
    --modal-button-confirm-delete: rgba( 103, 26, 26 ,.8);
    --modal-button-confirm-hover-delete: rgba( 103, 26, 26,.95 );
    --modal-button-confirm-general: rgba(149, 38, 138,0.85);
    --modal-button-confirm-hover-general: rgba(149, 38, 138,0.95);
    --modal-overlay: rgba(0, 0, 0, 0.8);
}

/* Modal structure */
.modal[b-6mxdhndyso] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 1050;
}

    .modal.show[b-6mxdhndyso] {
        display: block;
    }

.modal-dialog[b-6mxdhndyso] {
    position: relative;
    width: auto;
    margin: 1.75rem auto;
    max-width: 500px;
    min-height: calc(100% - 3.5rem);
    display: flex;
    align-items: center;
}

    .modal-dialog.centered[b-6mxdhndyso] {
        align-items: center;
    }

.modal-dark .modal-content[b-6mxdhndyso] {
    position: relative;
    width: 100%;
    pointer-events: auto;
    background: var(--modal-bg);
    border: 2px solid var(--modal-border);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 20px 25px -5px var(--modal-shadow), 0 8px 10px -6px var(--modal-shadow);
    border-radius: 1rem;
    backdrop-filter: blur(8px);
}

.modal-dark .modal-header[b-6mxdhndyso] {
    border-bottom: 1px solid var(--modal-border);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-dark .modal-title[b-6mxdhndyso] {
    font-family: var(--font-family-display);
    color: var(--modal-text);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.5;
    margin: 0;
}

.modal-dark .close[b-6mxdhndyso] {
    background: none;
    border: none;
    color: var(--modal-text-secondary);
    cursor: pointer;
    padding: 0.5rem;
}

.modal-dark .modal-body[b-6mxdhndyso] {
    font-family: var(--font-family-display);
    padding: 1.5rem;
    color: var(--modal-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

.modal-dark .modal-footer[b-6mxdhndyso] {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--modal-border);
    padding: 1rem 1.5rem;
    gap: 0.75rem;
}

/* Buttons */
.modal-dark .button[b-6mxdhndyso] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: 0.5rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    outline: none;
}

    .modal-dark .button.cancel[b-6mxdhndyso] {
        background-color: var(--modal-button-cancel);
        color: var(--modal-text-secondary);
    }

        .modal-dark .button.cancel:hover[b-6mxdhndyso] {
            background-color: var(--modal-button-cancel-hover);
            color: var(--modal-text);
        }

    .modal-dark .button.confirm-delete[b-6mxdhndyso] {
        background-color: var(--modal-button-confirm-delete);
        color: var(--modal-text);
    }

        .modal-dark .button.confirm-delete:hover[b-6mxdhndyso] {
            background-color: var(--modal-button-confirm-hover-delete);
            transform: translateY(-1px);
        }

    .modal-dark .button.confirm-general[b-6mxdhndyso] {
        background-color: var(--modal-button-confirm-general);
        color: var(--modal-text);
    }

        .modal-dark .button.confirm-general:hover[b-6mxdhndyso] {
            background-color: var(--modal-button-confirm-hover-general);
            transform: translateY(-1px);
        }

/* Icons */
.modal-dark .icon-warning[b-6mxdhndyso] {
    color: var(--modal-button-confirm-delete);
    font-size: 1.25rem;
    margin-right: 1rem;
}

.modal-dark .icon-information[b-6mxdhndyso] {
    color: var(--modal-button-confirm-general);
    font-size: 1.25rem;
    margin-right: 1rem;
}

.modal-dark .message-container[b-6mxdhndyso] {
    display: flex;
    align-items: flex-start;
}

/* Backdrop */
.modal-backdrop[b-6mxdhndyso] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.15s linear;
}

.modal-dark .modal-backdrop.show[b-6mxdhndyso] {
    background-color: var(--modal-overlay);
    backdrop-filter: blur(4px);
    opacity: 1;
}
.modal-dark .close[b-6mxdhndyso] {
    background: none;
    border: none;
    color: var(--modal-text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1.25rem;
    line-height: 1;
    transition: color 0.2s ease;
}

    .modal-dark .close:hover[b-6mxdhndyso] {
        color: var(--modal-text);
    }
/* _content/AinnaProduct/Components/ProdComponents/NewAinnaSmartIdeaViewer.razor.rz.scp.css */
/* Global CSS Variables */
[b-6g4n0qxqta] * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

[b-6g4n0qxqta] :root {
    --max-width: 1280px;
    --gap: 20px;
    --padding: clamp(16px, 2vw, 24px);
    --header-size: clamp(32px, 4.5vw, 48px);
    --text-size: clamp(14px, 1.4vw, 16px);
    --small-text: 12px;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-heavy: 800;
    --font-black: 900;
    /* Google Colors Theme */
    --google-blue: #1a73e8;
    --google-green: #34a853;
    --google-yellow: #fbbc04;
    --google-red: #ea4335;
}

[b-6g4n0qxqta] body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #fafbfc;
    padding: var(--padding);
    color: #0d1117;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

[b-6g4n0qxqta] textarea {
    overflow: hidden !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    [b-6g4n0qxqta] textarea::-webkit-scrollbar {
        display: none;
    }

.container[b-6g4n0qxqta] {
    position: relative; /* Add this */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    max-width: 1360px;
    background-color: white;
    padding: 40px;
    min-height: 100vh;
    /*var(--max-width);*/
    margin: 0 auto;
}

/* Header */
.header[b-6g4n0qxqta] {
    margin-bottom: 36px;
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.project-code[b-6g4n0qxqta] {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--google-blue);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    background: rgba(26, 115, 232, 0.1);
    border: none;
    outline: none;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-block;
    width: fit-content;
    flex: 0 0 auto;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

    .project-code:focus[b-6g4n0qxqta] {
        background: rgba(26, 115, 232, 0.18);
        box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
    }

.product-name[b-6g4n0qxqta] {
    font-family: var(--font-family-display);
    font-size: 40px;
    /*var(--header-size);*/
    font-weight: 650;
    /*var(--font-black);*/
    color: #0d1117;
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    text-align: center;
    margin-bottom: 6px;
    padding: 0 20px;
    transition: all 0.3s ease;
    resize: none;
    line-height: 1.15;
    overflow: hidden;
    min-height: 48px;
    font-family: inherit;
    display: block;
    letter-spacing: -0.03em;
}

    .product-name[b-6g4n0qxqta]::placeholder {
        color: #8b949e;
        opacity: 0.4;
        font-weight: var(--font-medium);
    }

    .product-name:focus[b-6g4n0qxqta] {
        color: var(--google-blue);
    }

.header-subtitle[b-6g4n0qxqta] {
    color: #57606a;
    font-size: 15px;
    font-weight: var(--font-regular);
    letter-spacing: 0.01em;
}

/* Main Grid */
.main-grid[b-6g4n0qxqta] {
    margin-bottom: 36px;
}

/* Masonry Grid */
.masonry-grid[b-6g4n0qxqta] {
    column-count: 3;
    column-gap: var(--gap);
}

/* CTA Card */
.card-cta[b-6g4n0qxqta] {
    /*background: linear-gradient(135deg, var(--google-blue) 0%, var(--google-green) 100%);*/
    background: linear-gradient(135deg, #1a73e8 0%, #34a853 100%);
    border: none;
    color: white;
    display: none;
    box-shadow: 0 8px 24px rgba(26, 115, 232, 0.3);
    position: relative;
    min-height: 320px;
    padding: 32px 24px 24px 24px;
    border-radius: 14px;
    margin-bottom: var(--gap);
    break-inside: avoid;
    width: 100%;
    margin-bottom: 20px;
}

    .card-cta.visible[b-6g4n0qxqta] {
        display: inline-block;
        animation: fadeInUp-b-6g4n0qxqta 0.5s ease-out, ctaPulse-b-6g4n0qxqta 4s ease-in-out infinite;
    }

@keyframes ctaPulse-b-6g4n0qxqta {
    0%, 100% {
        box-shadow: 0 8px 24px rgba(26, 115, 232, 0.3);
        transform: translateY(0);
    }

    50% {
        box-shadow: 0 12px 32px rgba(52, 168, 83, 0.4);
        transform: translateY(-2px);
    }
}

.card-cta .card-icon-bg[b-6g4n0qxqta] {
    position: absolute;
    right: -15px;
    bottom: -15px;
    font-size: 100px;
    color: white;
    opacity: 0.1;
    pointer-events: none;
}

.card-cta:hover[b-6g4n0qxqta] {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(26, 115, 232, 0.45) !important;
    background: linear-gradient(135deg, #1557b0 0%, #2e8b4e 100%);
}

.cta-content[b-6g4n0qxqta] {
    position: relative;
    z-index: 2;
}

.cta-title[b-6g4n0qxqta] {
    font-size: 22px;
    font-weight: var(--font-black);
    margin-bottom: 10px;
    margin-top: 24px;
    letter-spacing: -0.02em;
    color: white;
}

.cta-subtitle[b-6g4n0qxqta] {
    font-size: 15px;
    font-weight: var(--font-regular);
    margin-bottom: 18px;
    opacity: 0.95;
    line-height: 1.5;
    color: white;
}

.cta-features[b-6g4n0qxqta] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.cta-feature[b-6g4n0qxqta] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: white;
    opacity: 0.9;
}

    .cta-feature i[b-6g4n0qxqta] {
        font-size: 10px;
        width: 18px;
        height: 18px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

.cta-button[b-6g4n0qxqta] {
    background: white;
    color: #1a73e8;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: buttonPulse-b-6g4n0qxqta 2s ease-in-out infinite;
}

@keyframes buttonPulse-b-6g4n0qxqta {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    50% {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }
}

.cta-button:hover[b-6g4n0qxqta] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    background: #f9fafb;
    animation: none;
}

.cta-button i[b-6g4n0qxqta] {
    font-size: 16px;
}

.cta-badge[b-6g4n0qxqta] {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.25);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
}

/* Progress Indicator */
.progress-indicator[b-6g4n0qxqta] {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border: 2px solid #e6e8eb;
    z-index: 100;
    min-width: 180px;
    display: none;
    animation: slideInRight-b-6g4n0qxqta 0.4s ease-out;
}

    .progress-indicator.visible[b-6g4n0qxqta] {
        display: block;
    }

@keyframes slideInRight-b-6g4n0qxqta {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.progress-title[b-6g4n0qxqta] {
    font-size: 11px;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8b949e;
    margin-bottom: 6px;
}

.progress-value[b-6g4n0qxqta] {
    font-size: 22px;
    font-weight: var(--font-black);
    color: #24292f;
    margin-bottom: 8px;
}

.progress-bar[b-6g4n0qxqta] {
    height: 5px;
    background: #e6e8eb;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar-fill[b-6g4n0qxqta] {
    height: 100%;
    background: linear-gradient(90deg, var(--google-green), var(--google-blue));
    border-radius: 5px;
    transition: width 0.3s ease;
}

.progress-message[b-6g4n0qxqta] {
    font-size: 12px;
    color: #57606a;
}

/* Status Bar */
.status-bar[b-6g4n0qxqta] {
    background: white;
    border-radius: 12px;
    padding: 16px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 2px solid #e6e8eb;
    position: relative;
}

.status-left[b-6g4n0qxqta] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.status-text[b-6g4n0qxqta] {
    color: #57606a;
    font-size: 14px;
    font-weight: var(--font-semibold);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.01em;
}

.status-dot[b-6g4n0qxqta] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--google-green);
    animation: blink-b-6g4n0qxqta 2s ease-in-out infinite;
}

@keyframes blink-b-6g4n0qxqta {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* Read-only Toggle */
.readonly-toggle[b-6g4n0qxqta] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(26, 115, 232, 0.08), rgba(52, 168, 83, 0.08));
    border-radius: 20px;
}

.readonly-label[b-6g4n0qxqta] {
    font-size: 12px;
    font-weight: var(--font-bold);
    color: #57606a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.toggle-switch[b-6g4n0qxqta] {
    position: relative;
    width: 44px;
    height: 24px;
    background: #d0d7de;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .toggle-switch.active[b-6g4n0qxqta] {
        background: linear-gradient(135deg, var(--google-blue) 0%, var(--google-green) 100%);
    }

.toggle-slider[b-6g4n0qxqta] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch.active .toggle-slider[b-6g4n0qxqta] {
    transform: translateX(20px);
}

.toggle-icon[b-6g4n0qxqta] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: white;
    opacity: 0;
    transition: opacity 0.2s ease;
}

    .toggle-icon.lock-icon[b-6g4n0qxqta] {
        right: 6px;
    }

    .toggle-icon.edit-icon[b-6g4n0qxqta] {
        left: 6px;
    }

.toggle-switch.active .lock-icon[b-6g4n0qxqta] {
    opacity: 0.8;
}

.toggle-switch:not(.active) .edit-icon[b-6g4n0qxqta] {
    opacity: 0.8;
}

/* Read-only mode styles */
[b-6g4n0qxqta] body.readonly-mode {
    background: #f3f4f6;
}

    [b-6g4n0qxqta] body.readonly-mode .card,
    [b-6g4n0qxqta] body.readonly-mode .hero-card {
        cursor: default;
        opacity: 0.95;
    }

        [b-6g4n0qxqta] body.readonly-mode .card:hover,
        [b-6g4n0qxqta] body.readonly-mode .hero-card:hover {
            transform: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            border-color: #e6e8eb;
        }

    [b-6g4n0qxqta] body.readonly-mode textarea,
    [b-6g4n0qxqta] body.readonly-mode input {
        pointer-events: none;
        cursor: default;
        background: transparent;
    }

    [b-6g4n0qxqta] body.readonly-mode .action-btn:not(.readonly-exempt) {
        opacity: 0.5;
        pointer-events: none;
        cursor: not-allowed;
    }

    [b-6g4n0qxqta] body.readonly-mode .status-bar {
        background: linear-gradient(135deg, #fff 0%, #f9fafb 100%);
        border-color: rgba(26, 115, 232, 0.3);
    }

.readonly-indicator[b-6g4n0qxqta] {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #1a73e8 0%, #34a853 100%); /* Direct hex values */
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: none;
    align-items: center;
    gap: 6px;
    z-index: 101;
    animation: slideDown-b-6g4n0qxqta 0.3s ease-out;
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
}

@keyframes slideDown-b-6g4n0qxqta {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* Actions */
.actions[b-6g4n0qxqta] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.action-btn[b-6g4n0qxqta] {
    padding: 9px 18px;
    background: white;
    border: 2px solid #d0d7de;
    border-radius: 9px;
    font-size: 14px;
    font-weight: var(--font-semibold);
    color: #24292f;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 7px;
    letter-spacing: 0.01em;
}

    .action-btn:hover[b-6g4n0qxqta] {
        background: #f6f8fa;
        border-color: #8b949e;
        transform: translateY(-1px);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    }

    .action-btn.primary[b-6g4n0qxqta] {
        /*background: linear-gradient(135deg, var(--google-blue), var(--google-green));*/
        background: linear-gradient(135deg, #1a73e8, #34a853);
        color: white;
        border: none;
        font-weight: var(--font-bold);
    }

        .action-btn.primary:hover[b-6g4n0qxqta] {
            box-shadow: 0 6px 16px rgba(26, 115, 232, 0.35);
            transform: translateY(-2px);
            background: linear-gradient(135deg, #1557b0, #2e8b4e);
        }

/* Animations */
@keyframes fadeInUp-b-6g4n0qxqta {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design - Enhanced Breakpoints */

/* Large screens - Switch to 2 columns earlier for better readability */
@media (max-width: 1440px) {
    .masonry-grid[b-6g4n0qxqta] {
        column-count: 2;
        column-gap: calc(var(--gap) * 1.2); /* Slightly larger gap for 2 columns */
    }

    .container[b-6g4n0qxqta] {
        max-width: 1140px; /* Adjust container width */
        padding: 32px; /* Slightly reduce padding */
    }
}

/* Medium-Large screens - Maintain 2 columns with optimizations */
@media (max-width: 1280px) {
    .masonry-grid[b-6g4n0qxqta] {
        column-count: 2;
    }

    .card-cta[b-6g4n0qxqta] {
        min-height: 300px; /* Slightly reduce CTA height */
    }
}

/* Tablets and smaller laptops */
@media (max-width: 1024px) {
    [b-6g4n0qxqta] :root {
        --gap: 18px; /* Slightly reduce gap */
    }

    .masonry-grid[b-6g4n0qxqta] {
        column-count: 2;
    }

    .progress-indicator[b-6g4n0qxqta] {
        top: 10px;
        right: 10px;
    }

    .container[b-6g4n0qxqta] {
        padding: 28px;
    }
}

/* Small tablets - Still 2 columns but tighter */
@media (max-width: 900px) {
    .masonry-grid[b-6g4n0qxqta] {
        column-count: 2;
        column-gap: 16px;
    }

    .container[b-6g4n0qxqta] {
        padding: 24px;
    }

    .header[b-6g4n0qxqta] {
        margin-bottom: 28px;
    }
}

/* Mobile devices - Switch to single column */
@media (max-width: 768px) {
    [b-6g4n0qxqta] :root {
        --gap: 16px;
    }

    .masonry-grid[b-6g4n0qxqta] {
        column-count: 1;
    }

    .container[b-6g4n0qxqta] {
        padding: 20px;
        border-radius: 16px; /* Slightly smaller radius on mobile */
    }

    .progress-indicator[b-6g4n0qxqta] {
        position: static;
        margin: 0 0 20px 0;
        width: 100%;
        animation: none;
    }

    .cta-title[b-6g4n0qxqta] {
        font-size: 20px;
        margin-top: 10px;
    }

    .cta-badge[b-6g4n0qxqta] {
        position: static;
        display: inline-block;
        margin-bottom: 10px;
    }

    .cta-button[b-6g4n0qxqta] {
        width: 100%;
        justify-content: center;
    }

    .status-bar[b-6g4n0qxqta] {
        padding: 14px 18px;
    }

    .status-left[b-6g4n0qxqta] {
        width: 100%;
        justify-content: space-between;
    }

    .readonly-toggle[b-6g4n0qxqta] {
        padding: 4px 8px;
    }

    .readonly-label[b-6g4n0qxqta] {
        font-size: 11px;
    }

    .actions[b-6g4n0qxqta] {
        width: 100%;
    }

    .action-btn[b-6g4n0qxqta] {
        flex: 1;
        justify-content: center;
        padding: 10px 12px;
        font-size: 13px;
    }

    .readonly-indicator[b-6g4n0qxqta] {
        top: 10px;
        font-size: 10px;
        padding: 4px 12px;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    [b-6g4n0qxqta] :root {
        --padding: 16px;
    }

    .container[b-6g4n0qxqta] {
        padding: 16px;
        border-radius: 12px;
    }

    .header[b-6g4n0qxqta] {
        margin-bottom: 24px;
    }

    .product-name[b-6g4n0qxqta] {
        font-size: 32px;
        padding: 0 10px;
    }

    .header-subtitle[b-6g4n0qxqta] {
        font-size: 14px;
    }

    .card-cta[b-6g4n0qxqta] {
        min-height: 280px;
        padding: 24px 20px;
    }
}
/* _content/AinnaProduct/Components/ProdComponents/NewAinnaSmartIdeaViewerElement.razor.rz.scp.css */
/* Regular Cards */
.card[b-kax600c0yl] {
    font-family: var(--font-family-special);
    background: white;
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 20px;
    break-inside: avoid;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 2px solid #e6e8eb;
    display: inline-block;
    width: 100%;
    cursor: pointer;
    min-height: 250px;
}

    .card:hover:not(.loading):not(.updating)[b-kax600c0yl] {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        border-color: var(--accent-color);
    }

    .card.editing[b-kax600c0yl] {
        box-shadow: 0 0 0 2px var(--accent-color);
        border-color: var(--accent-color);
        transform: translateY(-1px);
    }

    .card.loading[b-kax600c0yl], .card.updating[b-kax600c0yl] {
        cursor: wait;
    }

/* Hero Card */
.hero-card[b-kax600c0yl] {
    font-family: var(--font-family-special);
    background: linear-gradient(135deg, #e8f3ff 0%, #e6f2e6 100%);
    border-radius: 18px;
    padding: 32px 36px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid rgba(26, 115, 232, 0.15);
    min-height: 220px;
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.08);
}

    .hero-card:hover:not(.loading):not(.updating)[b-kax600c0yl] {
        transform: translateY(-3px);
        box-shadow: 0 14px 28px rgba(26, 115, 232, 0.16);
        border-color: rgba(26, 115, 232, 0.25);
    }

    .hero-card.editing[b-kax600c0yl] {
        box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.25);
        border-color: #1a73e8;
        transform: translateY(-1px);
    }

.hero-icon[b-kax600c0yl] {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 120px;
    opacity: 0.1;
    color: #1a73e8;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-card:hover:not(.loading):not(.updating) .hero-icon[b-kax600c0yl] {
    transform: translateY(-50%) rotate(10deg) scale(1.1);
    opacity: 0.15;
}

.hero-card.editing .hero-icon[b-kax600c0yl] {
    animation: heroIconPulse-b-kax600c0yl 2s ease-in-out infinite;
}

@keyframes heroIconPulse-b-kax600c0yl {
    0%, 100% {
        transform: translateY(-50%) rotate(10deg) scale(1.1);
        opacity: 0.15;
    }

    50% {
        transform: translateY(-50%) rotate(10deg) scale(1.2);
        opacity: 0.2;
    }
}

.hero-title[b-kax600c0yl] {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #1a73e8;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .hero-title[b-kax600c0yl]::before {
        content: '';
        width: 8px;
        height: 8px;
        background: linear-gradient(135deg, #1a73e8 0%, #34a853 100%);
        border-radius: 50%;
        opacity: 0.7;
        animation: dotPulse-b-kax600c0yl 3s ease-in-out infinite;
        box-shadow: 0 2px 4px rgba(26, 115, 232, 0.2);
    }

.hero-text[b-kax600c0yl] {
    font-family: var(--font-family-content);
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 600;
    line-height: 1.3;
    background: transparent;
    border: none;
    color: #0d1117;
    outline: none;
    width: 100%;
    resize: none;
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 100px;
    letter-spacing: 0.01em;
}

/* Card Title */
.card-title[b-kax600c0yl] {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--accent-color, #24292f);
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s ease;
}

    .card-title[b-kax600c0yl]::before {
        content: '';
        width: 8px;
        height: 8px;
        background: var(--accent-color);
        border-radius: 50%;
        opacity: 0.8;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        flex-shrink: 0;
    }

.card:hover:not(.loading):not(.updating) .card-title[b-kax600c0yl] {
    transform: translateX(2px);
}

    .card:hover:not(.loading):not(.updating) .card-title[b-kax600c0yl]::before {
        animation-play-state: paused;
        transform: scale(1.3);
        opacity: 1;
    }

.hero-card:hover:not(.loading):not(.updating) .hero-title[b-kax600c0yl]::before {
    animation-play-state: paused;
    transform: scale(1.3);
    opacity: 1;
}

@keyframes dotPulse-b-kax600c0yl {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

/* Card Content */
.card-content[b-kax600c0yl] {
    position: relative;
    z-index: 1;
}

.card-text[b-kax600c0yl] {
    font-size: clamp(14px, 1.4vw, 16px);
    color: #24292f;
    outline: none;
    border: none;
    width: 100%;
    resize: none;
    background: transparent;
    font-family: inherit;
    line-height: 1.25;
    font-weight: 300;
    overflow: hidden;
    min-height: 80px;
    letter-spacing: 0.01em;
}

    .card-text:focus[b-kax600c0yl], .hero-text:focus[b-kax600c0yl] {
        outline: none;
    }

    .card-text[b-kax600c0yl]::placeholder, .hero-text[b-kax600c0yl]::placeholder {
        color: #d0d7de;
        font-weight: 400;
    }

/* Background Watermark Icons */
.card-icon-bg[b-kax600c0yl] {
    position: absolute;
    right: -15px;
    bottom: -15px;
    font-size: 80px;
    color: var(--accent-color);
    opacity: 0.08;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: floatIcon-b-kax600c0yl 6s ease-in-out infinite;
}

@keyframes floatIcon-b-kax600c0yl {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    33% {
        transform: translateY(-5px) rotate(3deg);
    }

    66% {
        transform: translateY(3px) rotate(-3deg);
    }
}

.card:hover:not(.loading):not(.updating) .card-icon-bg[b-kax600c0yl] {
    transform: rotate(-15deg) scale(1.15) translateX(-10px);
    opacity: 0.12;
    animation: none;
}

.card.editing .card-icon-bg[b-kax600c0yl] {
    animation: iconPulse-b-kax600c0yl 2s ease-in-out infinite;
}

@keyframes iconPulse-b-kax600c0yl {
    0%, 100% {
        transform: rotate(-15deg) scale(1.15) translateX(-10px);
        opacity: 0.12;
    }

    50% {
        transform: rotate(-15deg) scale(1.25) translateX(-10px);
        opacity: 0.18;
    }
}

/* Market value highlight */
.highlight-number[b-kax600c0yl] {
    font-size: 36px;
    font-weight: 900;
    color: var(--accent-color);
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    letter-spacing: -0.03em;
}

/* Card color themes */
.card-problem[b-kax600c0yl] {
    --accent-color: #ea4335;
    background: linear-gradient(135deg, #fff5f5 0%, #fff 60%);
    border-color: rgba(234, 67, 53, 0.2);
}

.card-solution[b-kax600c0yl] {
    --accent-color: #34a853;
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 60%);
    border-color: rgba(52, 168, 83, 0.2);
}

.card-market[b-kax600c0yl] {
    --accent-color: #fbbc04;
    background: linear-gradient(135deg, #fffbeb 0%, #fff 60%);
    border-color: rgba(251, 188, 4, 0.2);
}

.card-business[b-kax600c0yl] {
    --accent-color: #1a73e8;
    background: linear-gradient(135deg, #e8f3ff 0%, #fff 60%);
    border-color: rgba(26, 115, 232, 0.2);
}

.card-forms[b-kax600c0yl] {
    --accent-color: #34a853;
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 60%);
    border-color: rgba(52, 168, 83, 0.2);
}

.card-personas[b-kax600c0yl] {
    --accent-color: #1a73e8;
    background: linear-gradient(135deg, #e8f3ff 0%, #fff 60%);
    border-color: rgba(26, 115, 232, 0.2);
}

.card-customers[b-kax600c0yl] {
    --accent-color: #fbbc04;
    background: linear-gradient(135deg, #fffbeb 0%, #fff 60%);
    border-color: rgba(251, 188, 4, 0.2);
}

.card-competitors[b-kax600c0yl] {
    --accent-color: #ea4335;
    background: linear-gradient(135deg, #fff5f5 0%, #fff 60%);
    border-color: rgba(234, 67, 53, 0.2);
}

.card-risks[b-kax600c0yl] {
    --accent-color: #ea4335;
    background: linear-gradient(135deg, #fef2f2 0%, #fff 60%);
    border-color: rgba(234, 67, 53, 0.2);
}

/* Empty State */
.empty-state[b-kax600c0yl] {
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: fadeIn-b-kax600c0yl 0.6s ease-out forwards;
    animation-delay: 0.2s;
}

@keyframes fadeIn-b-kax600c0yl {
    to {
        opacity: 1;
    }
}

.empty-state-icon[b-kax600c0yl] {
    font-size: 36px;
    color: var(--accent-color, #1a73e8);
    margin-bottom: 14px;
    opacity: 0.2;
}

.empty-state-title[b-kax600c0yl] {
    font-size: 18px;
    font-weight: 700;
    color: #24292f;
    margin-bottom: 10px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.empty-state-message[b-kax600c0yl] {
    font-size: 14px;
    color: #57606a;
    line-height: 1.6;
    font-weight: 400;
}

.empty-state-hint[b-kax600c0yl] {
    font-size: 12px;
    color: #8b949e;
    margin-top: 14px;
    font-style: italic;
    font-weight: 400;
}

/* Loading State */
.loading-overlay[b-kax600c0yl] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    animation: fadeIn-b-kax600c0yl 0.3s ease-out forwards;
}

.loading-spinner[b-kax600c0yl] {
    width: 40px;
    height: 40px;
    position: relative;
    margin-bottom: 14px;
}

    .loading-spinner[b-kax600c0yl]::before,
    .loading-spinner[b-kax600c0yl]::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 3px solid transparent;
    }

    .loading-spinner[b-kax600c0yl]::before {
        border-top-color: var(--accent-color, #1a73e8);
        animation: spin-b-kax600c0yl 1.2s linear infinite;
    }

    .loading-spinner[b-kax600c0yl]::after {
        border-bottom-color: var(--accent-color, #1a73e8);
        animation: spin-b-kax600c0yl 1.2s linear infinite reverse;
        opacity: 0.5;
    }

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

.loading-text[b-kax600c0yl] {
    font-size: 13px;
    font-weight: 600;
    color: #57606a;
    text-align: center;
    animation: loadingPulse-b-kax600c0yl 1.5s ease-in-out infinite;
    letter-spacing: 0.02em;
}

@keyframes loadingPulse-b-kax600c0yl {
    0%, 100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

.loading-progress[b-kax600c0yl] {
    width: 60px;
    height: 2px;
    background: #e6e8eb;
    border-radius: 2px;
    margin-top: 10px;
    overflow: hidden;
}

.loading-progress-bar[b-kax600c0yl] {
    height: 100%;
    background: var(--accent-color, #1a73e8);
    border-radius: 2px;
    animation: loadingProgress-b-kax600c0yl 2s ease-in-out infinite;
}

@keyframes loadingProgress-b-kax600c0yl {
    0% {
        width: 0;
        transform: translateX(0);
    }

    50% {
        width: 100%;
        transform: translateX(0);
    }

    100% {
        width: 100%;
        transform: translateX(100%);
    }
}

/* Update Dots Animation */
.update-dots[b-kax600c0yl] {
    display: inline-flex;
    gap: 4px;
    padding: 8px;
}

    .update-dots span[b-kax600c0yl] {
        width: 8px;
        height: 8px;
        background: var(--accent-color, #1a73e8);
        border-radius: 50%;
        opacity: 0.3;
        animation: dotWave-b-kax600c0yl 1.4s ease-in-out infinite;
    }

        .update-dots span:nth-child(1)[b-kax600c0yl] {
            animation-delay: 0s;
        }

        .update-dots span:nth-child(2)[b-kax600c0yl] {
            animation-delay: 0.2s;
        }

        .update-dots span:nth-child(3)[b-kax600c0yl] {
            animation-delay: 0.4s;
        }

@keyframes dotWave-b-kax600c0yl {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.3;
    }

    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* New Badge */
.new-badge[b-kax600c0yl] {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #34a853, #1a73e8);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    opacity: 0;
    transform: scale(0.8) translateY(-5px);
    animation: newBadgeIn-b-kax600c0yl 0.4s ease-out forwards;
    box-shadow: 0 4px 12px rgba(52, 168, 83, 0.3);
}

@keyframes newBadgeIn-b-kax600c0yl {
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.new-badge.fade-out[b-kax600c0yl] {
    animation: newBadgeFadeOut-b-kax600c0yl 0.4s ease-out forwards;
}

@keyframes newBadgeFadeOut-b-kax600c0yl {
    to {
        opacity: 0;
        transform: scale(0.8) translateY(-5px);
    }
}

/* Animations */
.hero-card[b-kax600c0yl], .card[b-kax600c0yl] {
    animation: fadeInUp-b-kax600c0yl 0.5s ease-out backwards;
}

@keyframes fadeInUp-b-kax600c0yl {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-card[b-kax600c0yl] {
        padding: 24px;
        min-height: 180px;
    }

    .card[b-kax600c0yl] {
        padding: 20px;
        min-height: 160px;
    }

    .card-title[b-kax600c0yl] {
        font-size: 14px;
    }

    .hero-title[b-kax600c0yl] {
        font-size: 14px;
    }

    .hero-icon[b-kax600c0yl] {
        font-size: 80px;
        right: -10px;
    }

    .card-icon-bg[b-kax600c0yl] {
        font-size: 60px;
    }
}

@media (max-width: 480px) {
    .empty-state-title[b-kax600c0yl] {
        font-size: 16px;
    }

    .empty-state-message[b-kax600c0yl] {
        font-size: 13px;
    }

    .highlight-number[b-kax600c0yl] {
        font-size: 32px;
    }
}