@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
:root {
    --primary-orange: #E36166;     
    --primary-purple: #795DB4;     
    --light-purple: #d0c1fa;       
    --glass-bg: rgba(0, 0, 0, 0.65);        
    --glass-border: rgba(255, 255, 255, 0.2); 
    --glass-shadow: rgba(0, 0, 0, 0.1);      
}
body {
    background: rgba(50, 50, 50, 1);  
    min-height: 100vh;                
    font-family: 'Nunito', sans-serif; 
}
.app-container {
    min-height: 100vh;     
    display: flex;         
    flex-direction: column; 
}
.text-white {
    color: rgba(255, 255, 255, 1) !important;  
    font-size: 1.0rem; 
    font-weight: 500;
    line-height: 1.25;
}
.text-orange {
    color:  #E36166;  
    font-size: 1.0rem; 
    font-weight: 500;
    line-height: 1.25;
}
.text-purple {
    color: #d0c1fa;
    font-size: 1.0rem; 
    font-weight: 500;
    line-height: 1.25;
}
.text-light-gray {
    color: #969696 !important;  
    font-size: 1.0rem; 
    font-weight: 500;
    line-height: 1.25;
    font-style: italic;
}
.icon {
    width: 24px;
    height: 24px;
    align-content: center;
    vertical-align: top;
}
.icon-black-wntd {
    width: 16px;
    height: 16px;
    margin-left: 0px;
    margin-right: 0px;
    align-content: center;
    vertical-align: top;
}
.section-header-orange {
    color: #E36166 !important;
    font-size: 1.25rem;
    align-content: left;
    vertical-align: middle;
    font-weight: 700;      
}
.section-header-purple {
    color: #9982c9 !important;
    font-size: 1.25rem;
    align-content: left;
    vertical-align: middle;
    font-weight: 700;      
}
.theme {
    background-color: #795DB4; 
    color: white; 
    border-radius: 15px; 
    font-weight: 600; 
    font-size: 1.25rem;
    margin-bottom: 0px;    
    margin-top: 0;           
    padding: 0px;
    line-height: 1.25;
    word-wrap: break-word; 
    white-space: normal;
    display: inline-flex;  
    width: auto;           
    max-width: 100%;       
}

.badge {
    border-radius: 12px;  
    font-weight: 600;    
    background-color: #d0c1fa; 
    color: #000; 
    font-size: 1.0rem; 
    text-wrap: wrap;
    text-align: left;
    line-height: 1.25;
    word-wrap: break-word; 
    white-space: normal;
}

.badge.badge-liked {
    background-color: #F4FF9B;
}

.badge-session-number {
    background-color: #E36166;
    color: white;
    font-weight: bold;
    font-size: 1.0rem;
    padding: 3px 6px 3px 6px;   /* Top Right Bottom Left */
    border-radius: 12px;
    text-align: center;
    vertical-align: middle;
    margin-right: 4px;
}

.badge-session-number-compile {
    background-color:#FD0066;
    color: white;
    font-weight: bold;
    font-size: 1.0rem;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    margin-right: 4px;
}

.badge-session-number-fg {
    background-color: #1BBB60;
    color: white;
    font-weight: bold;
    font-size: 1.0rem;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    margin-right: 4px;
}

.badge-session-completed {
    background-color: #D0C1FA;
    color: black;
    font-weight: bold;
    font-size: 1.0rem;
    padding: 3px 6px 3px 6px;   /* Top Right Bottom Left */
    border-radius: 12px;
    text-align: center;
    vertical-align: middle;
    margin-right: 4px;
}

.badge-session-draft {
    background-color: #969696;
    color: black;
    font-weight: bold;
    font-size: 1.0rem;
    padding: 3px 6px 3px 6px;   /* Top Right Bottom Left */
    border-radius: 12px;
    text-align: center;
    vertical-align: middle;
    margin-right: 4px;
}

.badge-theme-letter {
    background-color: #4A4A4A;
    color: #E4E4E4;
    font-weight: bold;
    font-size: 1.0rem;
    padding: 3px 6px 3px 6px;   /* Top Right Bottom Left */
    border-radius: 6px;
    min-width: 24px;
    text-align: center;
    vertical-align: middle;
}

.badge-idea-number {
    background-color: #4A4A4A;
    color: #E4E4E4;
    font-weight: bold;
    font-size: 1.0rem;
    padding: 3px 6px 3px 6px;   /* Top Right Bottom Left */
    border-radius: 6px;
    min-width: 24px;
    text-align: center;
    vertical-align: middle;
}
.persona-name {
    color: #E36166;  
    font-weight: 700;
}

.session-name {
    color: #E36166;  
    font-weight: 800;
    font-size: 1.1rem;
    margin-top: 10px;
    margin-bottom: 10px;
}

.pain-point {
    margin-bottom: 10px;
}

.magic-loading {
    background: transparent !important;     
    border: none !important;               
    position: relative;                    
    overflow: visible !important;          
    width: auto !important;                
    min-height: auto !important;           
    white-space: nowrap;                   
    display: flex !important;              
    flex-direction: column !important;     
    align-items: center !important;        
    justify-content: center !important;    
    color: white !important;               
    text-align: center !important;         
    margin: 0 auto !important;             
    box-shadow: none !important;           
    gap: 0.5rem !important;                
}
.brainstorm-gif {
    display: inline-block;           
    height: 5rem;                   
    width: auto;                    
    vertical-align: middle;         
    mix-blend-mode: multiply; 
}
.spinner-border-sm {
    width: 1rem;   
    height: 1rem;
}
.timer-combined {
    font-size: 1.3rem;        
    font-weight: bold;        
    color: white !important;  
    vertical-align: middle;   
    display: inline-flex;     
    align-items: center;      
    font-family: 'Nunito', sans-serif; 
}
.glass-card {
    background: var(--glass-bg);           
    backdrop-filter: blur(20px);           
    border: 1px solid var(--glass-border); 
    border-radius: 20px;                   
    box-shadow: 0 8px 32px var(--glass-shadow); 
}
.glass-card-light {
    background: rgba(255, 255, 255, 0.05);  
    backdrop-filter: blur(10px);            
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 15px;                    
}
.problem-preview-card .card {
    background: #E36166;      
    border: 0px solid white;  
}
.problem-preview-card {
    position: static;  
    top: 20px;        
    z-index: 10;      
}
.problem-preview-text {
    color: white;        
    font-weight: normal;   
    font-size: 1.1rem;   
    line-height: 1.25;    
}
.problem-connector {
    color: rgba(255, 245, 230, 0.65) !important; 
    font-weight: normal !important;              
}
#idea_types, 
.criteria-item textarea[name="criteria"] {
    background: white !important;       
    border: 0px solid rgba(255, 255, 255, 0.2) !important; 
    color: black !important;            
}
.step-indicator {
    width: 32px;                    
    height: 32px;
    border-radius: 50%;             
    background: var(--primary-purple); 
    color: white;                   
    display: flex;                  
    align-items: center;            
    justify-content: center;        
    font-weight: bold;              
    font-size: 1rem;               
}
.user-input {
    color: white !important;         
    font-weight: bold !important;    
    font-size: 1.25rem;   
}
.glass-input {
    background: white;                      
    border: 0px solid rgba(255, 255, 255, 0.2); 
    border-radius: 12px;                    
    color: black;                          
    backdrop-filter: blur(10px);           
    transition: all 0.3s ease;             
}
.glass-input:focus {
    background: white;                           
    border-color: var(--secondary-purple);      
    box-shadow: 0 0 0 0.25rem rgba(139, 90, 150, 0.25); 
    color: black;                               
}
.glass-input::placeholder {
    color: rgba(0, 0, 0, 0.6);  
    font-size: 0.875rem;       
}
.form-section {
    padding: 1.5rem;                           
    border-radius: 15px;                       
    background: rgba(255, 255, 255, 0.05);     
    border: 0px solid white;                   
    margin-bottom: 1.5rem;                     
}
.step-indicator.active {
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--secondary-purple) 100%); 
    animation: pulse 2s infinite;  
}
@keyframes pulse {
    0% { box-shadow: 0 4px 12px rgba(139, 90, 150, 0.3); }   
    50% { box-shadow: 0 4px 20px rgba(139, 90, 150, 0.5); }  
    100% { box-shadow: 0 4px 12px rgba(139, 90, 150, 0.3); } 
}
.btn-primary {
    background: #d0c1fa;  
    color: black;
    border: none;                                   
    border-radius: 12px;                           
    padding: 12px 24px;                            
    font-weight: 600;                              
    transition: all 0.3s ease;                     
    box-shadow: 0 4px 15px rgba(139, 90, 150, 0.3); 
}
.btn-primary:hover {
    color: white; 
    transform: translateY(-2px);                                                              
    box-shadow: 0 6px 20px rgba(139, 90, 150, 0.4);                                         
    background: #795DB4; 
}
.btn-primary:active {
    background: #6b4d94 !important;
    color: white !important;
    transform: translateY(0px);
    box-shadow: 0 2px 10px rgba(139, 90, 150, 0.5) !important;
}
.btn-primary:focus {
    background: #d0c1fa !important;
    color: black !important;
    box-shadow: 0 0 0 0.25rem rgba(121, 93, 180, 0.5) !important;
    outline: none !important;
}
.btn-primary:disabled {
    background: #b8a8e8 !important;
    color: rgba(0, 0, 0, 0.6) !important;
    cursor: not-allowed;
    box-shadow: none !important;
}
.btn-primary.magic-loading:disabled {
    background: transparent !important;
    color: white !important;
    cursor: wait;
}
.btn-outline-light {
    border: 2px solid rgba(255, 255, 255, 0.3); 
    border-radius: 12px;                        
    backdrop-filter: blur(10px);                
    transition: all 0.3s ease;                  
}
.btn-outline-light:hover {
    background: #795DB4; 
    border-color: rgba(255, 255, 255, 0.5); 
    color: white; 
    transform: translateY(-2px);           
}
.btn-outline-light:active {
    background: #6b4d94 !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: white !important;
    transform: translateY(0px);
}
.btn-outline-light:focus {
    background: rgba(121, 93, 180, 0.2) !important;
    border-color: #795DB4 !important;
    color: white !important;
    box-shadow: 0 0 0 0.25rem rgba(121, 93, 180, 0.5) !important;
    outline: none !important;
}
.btn-secondary {
    background: rgba(150, 150, 150, 0.3) !important;
    border: 1px solid rgba(150, 150, 150, 0.5) !important;
    color: #d0d0d0 !important;
    border-radius: 12px;
    transition: all 0.3s ease;
}
.btn-secondary:hover {
    background: rgba(150, 150, 150, 0.5) !important;
    border-color: rgba(150, 150, 150, 0.7) !important;
    color: white !important;
}
.btn-secondary:active {
    background: rgba(100, 100, 100, 0.6) !important;
    border-color: rgba(100, 100, 100, 0.8) !important;
    color: white !important;
}
.btn-secondary:focus {
    background: rgba(150, 150, 150, 0.4) !important;
    border-color: rgba(150, 150, 150, 0.6) !important;
    color: white !important;
    box-shadow: 0 0 0 0.25rem rgba(150, 150, 150, 0.3) !important;
    outline: none !important;
}
.btn-group {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    overflow: hidden;
}
.model-selector-group {
    max-width: 500px;  
    margin: 0 auto;    
    display: flex;
    margin-top: 20px;
}
.btn-model-toggle {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    padding: 0.25rem !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    flex: 1;
    opacity: 1 !important; 
}
.btn-model-toggle:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    color: black !important;
    opacity: 1 !important; 
    transform: translateY(-1px);
}
.btn-model-toggle:active {
    background: rgba(255, 255, 255, 0.95) !important;
    color: black !important;
    transform: translateY(0px);
}
.btn-check:checked + .btn-model-toggle {
    background: #795DB4 !important;
    border-color: #795DB4 !important;
    color: white !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}
.model-subtitle {
    opacity: 0.9 !important; 
    font-size: 0.75rem;
    font-weight: 400;
}
.btn-check:checked + .btn-model-toggle .model-subtitle {
    opacity: 1 !important;
    font-weight: 500;
}
.btn-model-toggle:hover .model-subtitle {
    opacity: 1 !important;
}
.navbar-brand img {
    filter: brightness(1.2); 
}
.nav-link {
    border-radius: 8px;         
    transition: all 0.3s ease;  
    margin: 0 5px;              
}
.nav-link:hover {
    background: rgba(255, 255, 255, 0.1); 
    transform: translateY(-1px);          
}
.form-check-input:checked {
    background-color: var(--primary-purple); 
    border-color: var(--primary-purple);     
}
.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(139, 90, 150, 0.25); 
}
.idea-card {
    background: rgba(255, 255, 255, 0.1);  
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 12px;                   
    padding: 1rem;                        
    height: 100%;                         
    transition: all 0.3s ease;            
}
.idea-card:hover {
    background: rgba(255, 255, 255, 0.15);  
    transform: translateY(-2px);            
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
}
.score-badge {
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--secondary-purple) 100%); 
    color: white;                          
    padding: 4px 8px;                     
    border-radius: 20px;                  
    font-size: 0.75rem;                   
    font-weight: 600;                     
}
.pdf-viewer {
    background: rgba(255, 255, 255, 0.05); 
    border-radius: 12px;                   
    padding: 2rem;                         
    max-height: 600px;                     
    overflow-y: auto;                      
}
.pdf-page {
    border-radius: 8px;                      
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
    background: white;                       
}
.alert {
    border: none;                
    border-radius: 12px;         
    backdrop-filter: blur(10px); 
}
.alert-success {
    background: rgba(40, 167, 69, 0.2);     
    color: #d4edda;                         
    border: 1px solid rgba(40, 167, 69, 0.3); 
}
.alert-danger {
    background: rgba(220, 53, 69, 0.2);     
    color: #f8d7da;                         
    border: 1px solid rgba(220, 53, 69, 0.3); 
}
@media (max-width: 768px) {
    .form-section {
        padding: 1rem;  
    }
    .step-indicator {
        width: 40px;     
        height: 40px;
        font-size: 1rem; 
    }
    .display-4 {
        font-size: 2rem; 
    }
    .pdf-viewer {
        padding: 1rem;   
    }
}
.pdf-viewer::-webkit-scrollbar {
    width: 8px; 
}
.pdf-viewer::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1); 
    border-radius: 4px;                   
}
.pdf-viewer::-webkit-scrollbar-thumb {
    background: var(--primary-purple); 
    border-radius: 4px;                
}
.pdf-viewer::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-purple); 
}
@keyframes fadeInUp {
    from {
        opacity: 0;                
        transform: translateY(30px); 
    }
    to {
        opacity: 1;                
        transform: translateY(0);   
    }
}
.card {
    animation: fadeInUp 0.6s ease-out; 
}
.bg-secondary {
    background-color: rgba(108, 117, 125, 0.8) !important; 
}
.bg-primary {
    background: linear-gradient(135deg, var(--primary-purple) 0%, var(--secondary-purple) 100%) !important; 
}
.bg-success {
    background-color: rgba(40, 167, 69, 0.8) !important; 
}
.criteria-item .input-group {
    border-radius: 12px; 
    overflow: hidden;    
}
.criteria-item .input-group .glass-input {
    border-top-right-radius: 0;    
    border-bottom-right-radius: 0;
    border-right: none;             
}
.criteria-item .remove-criteria {
    background: rgba(220, 53, 69, 0.2);     
    border: 1px solid rgba(220, 53, 69, 0.3); 
    border-left: none;                      
    color: #dc3545;                         
    border-top-left-radius: 0;             
    border-bottom-left-radius: 0;
    padding: 0.75rem 1rem;                 
    transition: all 0.3s ease;             
}
.criteria-item .remove-criteria:hover {
    background: rgba(220, 53, 69, 0.3);     
    border-color: rgba(220, 53, 69, 0.5);   
}
.insight-item .input-group {
    border-radius: 12px; 
    overflow: hidden;    
}
.insight-item .input-group .glass-input {
    border-top-right-radius: 0;    
    border-bottom-right-radius: 0;
    border-right: none;             
}
.insight-item .remove-insight {
    background: rgba(220, 53, 69, 0.2);     
    border: 1px solid rgba(220, 53, 69, 0.3); 
    border-left: none;                      
    color: #dc3545;                         
    border-top-left-radius: 0;             
    border-bottom-left-radius: 0;
    padding: 0.75rem 1rem;                 
    transition: all 0.3s ease;             
}
.insight-item .remove-insight:hover {
    background: rgba(220, 53, 69, 0.3);     
    border-color: rgba(220, 53, 69, 0.5);   
}

.navbar .dropdown-menu {
    background: #2a2a2a;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.navbar .dropdown-menu .dropdown-item {
    color: #ffffff;
    font-size: 0.9rem;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.navbar .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.15);
}