/**
 * Premium Fixes CSS
 * Fixes for integration issues
 * 
 * @package SENNA_Launcher
 * @since 4.0.0
 */

/* ===========================================
   QUERY PANEL FIXES - WORKING VERSION
   =========================================== */

.query-panel {
    display: block !important;
    background: linear-gradient(135deg, 
        var(--premium-ivory, #FFFEF9) 0%, 
        rgba(251, 247, 240, 0.7) 100%) !important;
    padding: 32px !important;
    border-radius: 16px !important;
    margin: 40px auto !important;
    max-width: 900px !important;
    border: 1px solid rgba(113, 142, 104, 0.08) !important;
    box-shadow: 
        0 4px 12px rgba(13, 53, 62, 0.04),
        0 8px 24px rgba(13, 53, 62, 0.02) !important;
    position: relative !important;
    overflow: visible !important;
}

.query-panel-header {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
}

.query-label {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 1.25rem !important;
    color: var(--premium-espresso, #0D353E) !important;
    font-weight: 600 !important;
}

.query-badge {
    background: var(--premium-sage, #718E68) !important;
    color: var(--premium-cream, #FBF7F0) !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.query-input-wrapper {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

.query-input {
    flex: 1 !important;
    padding: 14px 20px !important;
    background: var(--premium-cream, #FBF7F0) !important;
    border: 2px solid transparent !important;
    border-radius: 8px !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 1rem !important;
    color: var(--premium-espresso, #0D353E) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.query-input:focus {
    outline: none !important;
    border-color: var(--premium-sage, #718E68) !important;
    background: white !important;
    box-shadow: 0 0 0 3px rgba(113, 142, 104, 0.1) !important;
}

.query-submit {
    padding: 14px 28px !important;
    background: linear-gradient(135deg, var(--premium-sage, #718E68) 0%, var(--premium-muted-sage, #8FA688) 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.query-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(113, 142, 104, 0.3) !important;
}

.quick-questions {
    display: flex !important;
    gap: 12px !important;
    margin-top: 20px !important;
    flex-wrap: wrap !important;
}

.quick-question {
    padding: 10px 16px !important;
    background: var(--premium-cream, #FBF7F0) !important;
    border: 1px solid rgba(113, 142, 104, 0.2) !important;
    border-radius: 6px !important;
    font-size: 0.9rem !important;
    color: var(--premium-charcoal, #3A3633) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.quick-question:hover {
    background: var(--premium-sage, #718E68) !important;
    color: white !important;
    border-color: var(--premium-sage, #718E68) !important;
}

/* ===========================================
   FULL PAGE VIEWPORT CONTAINER
   =========================================== */

/* Full viewport container */
.skillfarm-launcher-container,
.opportunities-launcher-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: linear-gradient(180deg, 
        var(--premium-ivory, #FFFEF9) 0%, 
        var(--premium-cream, #FBF7F0) 100%) !important;
    overflow: hidden !important;
    z-index: 999999 !important;
}

.main-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: white !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: none !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ===========================================
   COMPACT 2x2 PREMIUM VISUAL CARDS
   =========================================== */

.visual-cards-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    margin: 24px auto !important;
    max-width: 600px !important;
    padding: 0 20px !important;
}

.visual-card {
    background: white !important;
    border: 1px solid rgba(13, 53, 62, 0.06) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 140px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.visual-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, 
        var(--premium-sage, #718E68) 0%, 
        var(--premium-muted-sage, #8FA688) 100%) !important;
    transform: translateY(-100%) !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.visual-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 
        0 12px 40px rgba(13, 53, 62, 0.08),
        0 20px 60px rgba(13, 53, 62, 0.04) !important;
    border-color: var(--premium-sage, #718E68) !important;
}

.visual-card:hover::before {
    transform: translateY(0) !important;
}

.visual-card.selected {
    background: linear-gradient(135deg, 
        white 0%, 
        rgba(113, 142, 104, 0.03) 100%) !important;
    border-color: var(--premium-sage, #718E68) !important;
    border-width: 2px !important;
}

.visual-card.selected::before {
    transform: translateY(0) !important;
}

.visual-card-icon {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto 12px !important;
    background: linear-gradient(135deg, 
        rgba(13, 53, 62, 0.04) 0%, 
        rgba(13, 53, 62, 0.02) 100%) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    color: var(--premium-sage, #718E68) !important;
    transition: all 0.3s ease !important;
}

.visual-card:hover .visual-card-icon {
    transform: scale(1.1) rotate(5deg) !important;
    background: linear-gradient(135deg, 
        var(--premium-sage, #718E68) 0%, 
        var(--premium-muted-sage, #8FA688) 100%) !important;
    color: white !important;
}

.visual-card-title {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: var(--premium-espresso, #0D353E) !important;
    margin-bottom: 6px !important;
    letter-spacing: -0.2px !important;
    line-height: 1.2 !important;
}

.visual-card-description {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 0.875rem !important;
    color: var(--premium-charcoal, #3A3633) !important;
    line-height: 1.3 !important;
    opacity: 0.7 !important;
}

/* ===========================================
   NUMBERED DOTS PREMIUM HEADER
   =========================================== */

.header-container {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    padding: 6px 20px !important;
    border-bottom: 1px solid rgba(13, 53, 62, 0.03) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    flex-shrink: 0 !important;
    height: 44px !important;
    max-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.header-content {
    max-width: 1400px !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.logo-section {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    cursor: pointer !important;
}

.leaf-icon {
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--premium-espresso, #0D353E) !important;
    border-radius: 3px !important;
    color: white !important;
    font-size: 12px !important;
}

.logo-text {
    display: inline-block !important; /* Show Skill Farm branding */
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--premium-espresso, #0D353E) !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-left: 8px !important;
}

.user-welcome {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

.welcome-text {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 0.9rem !important;
    color: var(--premium-charcoal, #3A3633) !important;
    opacity: 0.8 !important;
}

/* ===========================================
   PREMIUM WELCOME PAGE & ONBOARDING
   =========================================== */

.content-area {
    flex: 1 !important;
    overflow-y: auto !important;
    background: linear-gradient(180deg, 
        white 0%, 
        var(--premium-ivory, #FFFEF9) 100%) !important;
    padding-top: 20px !important;
}

.onboarding-step {
    display: none; /* Removed !important to allow preloader to work */
    padding: 40px 40px 60px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.focus-content {
    padding-top: 0 !important;
    margin-top: -10px !important;
}

.onboarding-step.active {
    display: block !important;
    animation: elegantFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Fix for preloader display */
.premium-preloader,
.dynamic-preloader-overlay {
    display: flex !important;
    opacity: 1 !important;
    z-index: 10000000 !important;
}

/* Welcome Step Premium Styling */
.onboarding-step:first-child.active {
    padding: 80px 40px !important;
}

.focus-content {
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto 60px !important;
}

.senna-avatar {
    width: 120px !important;
    height: 120px !important;
    margin: 0 auto 30px !important;
    background: linear-gradient(135deg, 
        var(--premium-sage, #718E68) 0%, 
        var(--premium-muted-sage, #8FA688) 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 
        0 10px 40px rgba(113, 142, 104, 0.2),
        0 20px 60px rgba(113, 142, 104, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.senna-avatar::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(255, 255, 255, 0.3) 50%, 
        transparent 70%) !important;
    animation: shimmer 3s infinite !important;
}

.senna-avatar img,
.senna-avatar svg {
    width: 60px !important;
    height: 60px !important;
    position: relative !important;
    z-index: 1 !important;
    filter: brightness(0) invert(1) !important;
}

@keyframes shimmer {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

/* ===========================================
   PREMIUM MESSAGE CONTENT - MATCHED SIZING
   =========================================== */

.message-content {
    font-family: 'Playfair Display', 'Didot', 'Bodoni MT', Georgia, serif !important;
    font-size: 1.875rem !important;
    line-height: 1.5 !important;
    color: var(--premium-espresso, #0D353E) !important;
    padding: 0 !important;
    background: transparent !important;
    margin: 0 0 35px !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    position: relative !important;
    text-align: center !important;
}

.welcome-message {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 2.5rem !important;
    line-height: 1.3 !important;
    color: var(--premium-espresso, #0D353E) !important;
    font-weight: 400 !important;
    margin-bottom: 20px !important;
    letter-spacing: -1px !important;
}

.welcome-message strong {
    font-weight: 600 !important;
    background: linear-gradient(135deg, 
        var(--premium-sage, #718E68) 0%, 
        var(--premium-muted-sage, #8FA688) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.senna-intro {
    font-size: 1.25rem !important;
    line-height: 1.7 !important;
    color: var(--premium-charcoal, #3A3633) !important;
    opacity: 0.9 !important;
    font-weight: 300 !important;
}

.main-question {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 2rem !important;
    font-weight: 500 !important;
    color: var(--premium-espresso, #0D353E) !important;
    margin: 30px 0 30px !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

.message-content.main-question {
    font-size: 2rem !important;
}

/* ===========================================
   NUMBERED DOTS PROGRESS INDICATOR
   =========================================== */

.journey-progress {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important;
    position: relative !important;
    padding: 0 !important;
    flex: 1 !important;
    max-width: 280px !important;
    margin: 0 auto !important;
}

/* Connecting line between dots */
.journey-progress::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 28px !important;
    right: 28px !important;
    height: 1px !important;
    background: rgba(13, 53, 62, 0.08) !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
}

.journey-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
    z-index: 2 !important;
    flex: 1 !important;
    cursor: default !important; /* Remove pointer cursor */
    pointer-events: none !important; /* Disable clicking */
    opacity: 0.5 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Only active and completed steps are clickable */
.journey-step.active,
.journey-step.completed {
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 1 !important;
}

.journey-step.active {
    transform: scale(1.1) !important;
}

.journey-step.completed {
    opacity: 0.8 !important;
}

/* Numbered dot indicators */
.step-circle {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: white !important;
    border: 1.5px solid rgba(13, 53, 62, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--premium-warm-gray, #8B8680) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Active dot - larger and prominent */
.journey-step.active .step-circle {
    width: 32px !important;
    height: 32px !important;
    background: var(--premium-espresso, #0D353E) !important;
    color: white !important;
    border: none !important;
    box-shadow: 
        0 0 0 6px rgba(13, 53, 62, 0.08),
        0 3px 8px rgba(13, 53, 62, 0.15) !important;
    font-size: 0.875rem !important;
}

/* Completed step - checkmark */
.journey-step.completed .step-circle {
    background: var(--premium-light-sage, #E8F0E3) !important;
    color: var(--premium-sage, #718E68) !important;
    border-color: var(--premium-sage, #718E68) !important;
}

.journey-step.completed .step-circle::after {
    content: '✓' !important;
    position: absolute !important;
    font-size: 1.5rem !important;
    color: var(--premium-sage, #718E68) !important;
}

/* Stage indicator text */
.stage-indicator {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
}

.stage-text {
    display: none !important; /* Hide text for cleaner elevator look */
}

.journey-step.active .stage-text {
    color: var(--premium-sage, #718E68) !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

.journey-step.completed .stage-text {
    color: var(--premium-sage, #718E68) !important;
    opacity: 0.9 !important;
}

/* Pulse animation for active step */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 
            0 0 0 4px rgba(113, 142, 104, 0.1),
            0 4px 12px rgba(113, 142, 104, 0.3),
            0 8px 24px rgba(113, 142, 104, 0.15);
    }
    50% {
        box-shadow: 
            0 0 0 8px rgba(113, 142, 104, 0.1),
            0 4px 16px rgba(113, 142, 104, 0.4),
            0 12px 32px rgba(113, 142, 104, 0.2);
    }
}

/* ===========================================
   BUTTON STYLE FIXES - ALL #0D353E
   =========================================== */

/* All submit buttons should use espresso color */
button,
.btn,
.action-btn,
.apply-btn,
.query-submit,
input[type="submit"],
button[type="submit"],
.button-primary {
    background: var(--premium-espresso, #0D353E) !important;
    color: white !important;
    border: none !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
}

button:hover,
.btn:hover,
.action-btn:hover,
.apply-btn:hover,
.query-submit:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.button-primary:hover {
    background: linear-gradient(135deg, 
        var(--premium-espresso, #0D353E) 0%, 
        var(--premium-deep-teal, #2C5F5D) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 
        0 4px 12px rgba(13, 53, 62, 0.2),
        0 8px 24px rgba(13, 53, 62, 0.1) !important;
}

button:active,
.btn:active,
.action-btn:active,
.apply-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(13, 53, 62, 0.2) !important;
}

/* Premium Continue/Submit buttons */
#generate-plan-btn,
button[onclick*="submitNameAndEmail"],
button[onclick*="nextStep"],
button[onclick*="continue"],
.generate-plan-btn,
.continue-btn {
    background: linear-gradient(135deg, 
        var(--premium-espresso, #0D353E) 0%, 
        #154249 100%) !important;
    color: white !important;
    min-width: 220px !important;
    padding: 18px 48px !important;
    font-size: 1.125rem !important;
    margin: 40px auto 20px !important;
    display: block !important;
    border-radius: 50px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    overflow: hidden !important;
}

#generate-plan-btn::before,
button[onclick*="submitNameAndEmail"]::before,
button[onclick*="nextStep"]::before,
.continue-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translate(-50%, -50%) !important;
    transition: width 0.6s, height 0.6s !important;
}

#generate-plan-btn:hover::before,
button[onclick*="submitNameAndEmail"]:hover::before,
button[onclick*="nextStep"]:hover::before,
.continue-btn:hover::before {
    width: 300px !important;
    height: 300px !important;
}

#generate-plan-btn:hover,
button[onclick*="submitNameAndEmail"]:hover,
button[onclick*="nextStep"]:hover,
.continue-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 
        0 10px 30px rgba(13, 53, 62, 0.3),
        0 15px 40px rgba(13, 53, 62, 0.15) !important;
}

/* Secondary buttons */
.btn-secondary,
.button-secondary {
    background: transparent !important;
    color: var(--premium-espresso, #0D353E) !important;
    border: 2px solid var(--premium-espresso, #0D353E) !important;
}

.btn-secondary:hover,
.button-secondary:hover {
    background: var(--premium-espresso, #0D353E) !important;
    color: white !important;
}

/* Disabled state */
button:disabled,
.btn:disabled,
button[disabled] {
    background: var(--premium-warm-gray, #8B8680) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    transform: none !important;
}

button:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Loading state */
.loading-spinner {
    border-color: rgba(255, 255, 255, 0.3) !important;
    border-top-color: white !important;
}

/* ===========================================
   FORM INPUT FIXES
   =========================================== */

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    padding: 14px 18px !important;
    background: var(--premium-ivory, #FFFEF9) !important;
    border: 2px solid var(--premium-cream, #FBF7F0) !important;
    border-radius: 8px !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 1rem !important;
    color: var(--premium-espresso, #0D353E) !important;
    transition: all 0.3s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--premium-sage, #718E68) !important;
    background: white !important;
    box-shadow: 0 0 0 4px rgba(113, 142, 104, 0.1) !important;
}

/* Labels */
label {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--premium-charcoal, #3A3633) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* ===========================================
   EXCLUSIVE PREMIUM PLAN CARD
   =========================================== */

.report-section {
    display: block !important;
    background: white !important;
    border-radius: 20px !important;
    padding: 40px !important;
    margin-bottom: 32px !important;
    border: 1px solid rgba(13, 53, 62, 0.06) !important;
    box-shadow: 
        0 4px 20px rgba(13, 53, 62, 0.03),
        0 8px 40px rgba(13, 53, 62, 0.02) !important;
}

.report-section.premium-plan-card {
    background: linear-gradient(135deg, 
        #FFFFFF 0%, 
        #FAFBFC 50%,
        var(--premium-ivory, #FFFEF9) 100%) !important;
    border: none !important;
    position: relative !important;
    overflow: visible !important;
    min-height: 400px !important;
    box-shadow: 
        0 10px 40px rgba(13, 53, 62, 0.08),
        0 20px 80px rgba(13, 53, 62, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.report-section.premium-plan-card::before {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: 20% !important;
    right: 20% !important;
    height: 2px !important;
    background: linear-gradient(90deg, 
        transparent 0%,
        var(--premium-soft-gold, #D4AF37) 20%,
        var(--premium-soft-gold, #D4AF37) 80%,
        transparent 100%) !important;
    opacity: 0.6 !important;
}

.section-title {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 1.75rem !important;
    font-weight: 600 !important;
    color: var(--premium-espresso, #0D353E) !important;
    margin-bottom: 24px !important;
    letter-spacing: -0.5px !important;
}

/* Premium Plan Card Header */
.premium-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 30px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid rgba(113, 142, 104, 0.1) !important;
}

.premium-header-content {
    flex: 1 !important;
}

.premium-title {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 2rem !important;
    font-weight: 600 !important;
    color: var(--premium-espresso, #0D353E) !important;
    margin-bottom: 8px !important;
}

.expiry-text {
    font-size: 0.9rem !important;
    color: var(--premium-warm-gray, #8B8680) !important;
    opacity: 0.8 !important;
}

.unlock-premium-btn {
    background: linear-gradient(135deg, 
        var(--premium-sage, #718E68) 0%, 
        var(--premium-muted-sage, #8FA688) 100%) !important;
    color: white !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
}

.unlock-premium-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(113, 142, 104, 0.3) !important;
}

/* ===========================================
   SENNA MESSAGE LINE - PERSONALIZED
   =========================================== */

.senna-message-line {
    display: block !important;
    text-align: center !important;
    margin: 30px auto !important;
    padding: 20px !important;
    max-width: 800px !important;
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 1.5rem !important;
    line-height: 1.6 !important;
    color: var(--premium-espresso, #0D353E) !important;
    font-style: italic !important;
    position: relative !important;
}

.senna-message-line::before,
.senna-message-line::after {
    content: '"' !important;
    font-size: 2rem !important;
    color: var(--premium-sage, #718E68) !important;
    opacity: 0.3 !important;
    position: absolute !important;
}

.senna-message-line::before {
    top: 10px !important;
    left: -10px !important;
}

.senna-message-line::after {
    bottom: 10px !important;
    right: -10px !important;
}

.typing-cursor {
    display: inline-block !important;
    width: 2px !important;
    height: 1.2em !important;
    background: var(--premium-sage, #718E68) !important;
    margin-left: 2px !important;
    animation: blink 1s infinite !important;
    vertical-align: text-bottom !important;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ===========================================
   PREMIUM PHASE CARDS & OPPORTUNITIES
   =========================================== */

.roadmap-phases {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 24px !important;
    margin: 40px 0 !important;
}

.phase-card.premium-phase {
    background: white !important;
    border: 1px solid rgba(13, 53, 62, 0.06) !important;
    border-radius: 16px !important;
    padding: 28px !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

.phase-card.premium-phase:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(13, 53, 62, 0.08) !important;
}

.phase-number {
    display: inline-block !important;
    background: var(--premium-espresso, #0D353E) !important;
    color: white !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 16px !important;
}

.phase-content h4 {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 1.25rem !important;
    color: var(--premium-espresso, #0D353E) !important;
    margin-bottom: 12px !important;
}

.phase-content ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.phase-content li {
    position: relative !important;
    padding-left: 20px !important;
    margin-bottom: 8px !important;
    color: var(--premium-charcoal, #3A3633) !important;
    font-size: 0.95rem !important;
}

.phase-content li::before {
    content: '✓' !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--premium-sage, #718E68) !important;
    font-weight: bold !important;
}

.immediate-actions {
    background: linear-gradient(135deg, 
        var(--premium-ivory, #FFFEF9) 0%, 
        white 100%) !important;
    padding: 32px !important;
    border-radius: 16px !important;
    margin: 32px 0 !important;
}

.immediate-actions h3 {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 1.5rem !important;
    color: var(--premium-espresso, #0D353E) !important;
    margin-bottom: 24px !important;
}

.action-item.premium-action {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px !important;
    background: white !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    border: 1px solid rgba(13, 53, 62, 0.06) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.action-item.premium-action:hover {
    background: var(--premium-ivory, #FFFEF9) !important;
    transform: translateX(4px) !important;
}

.action-icon {
    font-size: 1.5rem !important;
}

.opportunities-preview {
    margin-top: 32px !important;
}

.opportunities-preview h3 {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 1.5rem !important;
    color: var(--premium-espresso, #0D353E) !important;
    margin-bottom: 24px !important;
}

.opportunity-card.premium-opportunity {
    background: white !important;
    border-left: 4px solid var(--premium-soft-gold, #D4AF37) !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(13, 53, 62, 0.04) !important;
}

.opportunity-card h4 {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 1.125rem !important;
    color: var(--premium-espresso, #0D353E) !important;
    margin-bottom: 8px !important;
}

.opportunity-card p {
    color: var(--premium-charcoal, #3A3633) !important;
    font-size: 0.9rem !important;
    margin-bottom: 8px !important;
}

.deadline {
    display: inline-block !important;
    background: rgba(212, 175, 55, 0.1) !important;
    color: var(--premium-soft-gold, #D4AF37) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}

.unlock-prompt {
    text-align: center !important;
    padding: 24px !important;
    background: linear-gradient(135deg, 
        rgba(212, 175, 55, 0.05) 0%, 
        rgba(212, 175, 55, 0.02) 100%) !important;
    border-radius: 12px !important;
    margin-top: 24px !important;
}

.unlock-prompt p {
    color: var(--premium-charcoal, #3A3633) !important;
    margin-bottom: 16px !important;
}

/* ===========================================
   PREMIUM Q&A STEP DESIGN
   =========================================== */

.onboarding-step.qa-step {
    background: linear-gradient(180deg, 
        white 0%, 
        var(--premium-ivory, #FFFEF9) 100%) !important;
    min-height: calc(100vh - 100px) !important;
}

.qa-step .focus-content {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 40px !important;
}

/* Premium Q&A Header */
.qa-header {
    text-align: center !important;
    margin-bottom: 40px !important;
    position: relative !important;
}

.qa-header::after {
    content: '' !important;
    position: absolute !important;
    bottom: -20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80px !important;
    height: 2px !important;
    background: linear-gradient(90deg, 
        transparent 0%,
        var(--premium-soft-gold, #D4AF37) 50%,
        transparent 100%) !important;
}

.qa-question-title {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 2.5rem !important;
    font-weight: 400 !important;
    color: var(--premium-espresso, #0D353E) !important;
    line-height: 1.3 !important;
    margin-bottom: 16px !important;
    letter-spacing: -0.5px !important;
}

.qa-timestamp {
    font-size: 0.875rem !important;
    color: var(--premium-warm-gray, #8B8680) !important;
    opacity: 0.7 !important;
    font-style: italic !important;
}

/* Premium Response Container */
.qa-response-container {
    background: white !important;
    border-radius: 24px !important;
    padding: 48px !important;
    margin: 40px 0 !important;
    box-shadow: 
        0 10px 40px rgba(13, 53, 62, 0.06),
        0 20px 80px rgba(13, 53, 62, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    position: relative !important;
    overflow: hidden !important;
}

.qa-response-container::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, 
        var(--premium-sage, #718E68) 0%,
        var(--premium-soft-gold, #D4AF37) 50%,
        var(--premium-sage, #718E68) 100%) !important;
}

/* SENNA Avatar in Q&A */
.qa-senna-avatar {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 24px !important;
    background: linear-gradient(135deg, 
        var(--premium-sage, #718E68) 0%, 
        var(--premium-muted-sage, #8FA688) 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 
        0 8px 32px rgba(113, 142, 104, 0.15),
        0 16px 48px rgba(113, 142, 104, 0.1) !important;
    position: relative !important;
}

.qa-senna-avatar img {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    filter: brightness(1.1) !important;
}

/* Premium Response Text */
.qa-response-text {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 1.25rem !important;
    line-height: 1.8 !important;
    color: var(--premium-charcoal, #3A3633) !important;
    margin-bottom: 32px !important;
}

.qa-response-text p {
    margin-bottom: 20px !important;
}

.qa-response-text p:first-child {
    font-size: 1.375rem !important;
    font-weight: 500 !important;
    color: var(--premium-espresso, #0D353E) !important;
}

/* Premium Insight Cards */
.qa-insights {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 20px !important;
    margin: 32px 0 !important;
}

.insight-card {
    background: linear-gradient(135deg, 
        var(--premium-ivory, #FFFEF9) 0%, 
        white 100%) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    border: 1px solid rgba(113, 142, 104, 0.08) !important;
    transition: all 0.3s ease !important;
}

.insight-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(13, 53, 62, 0.08) !important;
}

.insight-icon {
    width: 40px !important;
    height: 40px !important;
    background: var(--premium-sage, #718E68) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 1.25rem !important;
    margin-bottom: 16px !important;
}

.insight-title {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 1.125rem !important;
    color: var(--premium-espresso, #0D353E) !important;
    margin-bottom: 8px !important;
}

.insight-text {
    font-size: 0.95rem !important;
    color: var(--premium-charcoal, #3A3633) !important;
    line-height: 1.5 !important;
}

/* Premium Action Buttons in Q&A */
.qa-actions {
    display: flex !important;
    gap: 16px !important;
    justify-content: center !important;
    margin-top: 40px !important;
}

.qa-action-btn {
    padding: 16px 40px !important;
    background: var(--premium-espresso, #0D353E) !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.qa-action-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translate(-50%, -50%) !important;
    transition: width 0.6s, height 0.6s !important;
}

.qa-action-btn:hover::before {
    width: 300px !important;
    height: 300px !important;
}

.qa-action-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 
        0 8px 24px rgba(13, 53, 62, 0.2),
        0 12px 32px rgba(13, 53, 62, 0.1) !important;
}

.qa-action-btn.secondary {
    background: transparent !important;
    color: var(--premium-espresso, #0D353E) !important;
    border: 2px solid var(--premium-espresso, #0D353E) !important;
}

.qa-action-btn.secondary:hover {
    background: var(--premium-espresso, #0D353E) !important;
    color: white !important;
}

/* Premium Related Questions */
.qa-related {
    margin-top: 48px !important;
    padding-top: 48px !important;
    border-top: 1px solid rgba(13, 53, 62, 0.06) !important;
}

.qa-related-title {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 1.5rem !important;
    color: var(--premium-espresso, #0D353E) !important;
    text-align: center !important;
    margin-bottom: 32px !important;
}

.related-questions-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 16px !important;
}

.related-question-card {
    background: white !important;
    border: 1px solid rgba(13, 53, 62, 0.06) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    padding-left: 40px !important;
}

.related-question-card::before {
    content: '→' !important;
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--premium-sage, #718E68) !important;
    font-size: 1.25rem !important;
    transition: all 0.3s ease !important;
}

.related-question-card:hover {
    background: var(--premium-ivory, #FFFEF9) !important;
    transform: translateX(8px) !important;
    box-shadow: 0 4px 16px rgba(13, 53, 62, 0.08) !important;
}

.related-question-card:hover::before {
    transform: translateY(-50%) translateX(4px) !important;
}

.related-question-text {
    font-size: 1rem !important;
    color: var(--premium-charcoal, #3A3633) !important;
    line-height: 1.5 !important;
}

/* Premium Loading State for Q&A */
.qa-loading {
    text-align: center !important;
    padding: 80px 40px !important;
}

.qa-loading-spinner {
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto 24px !important;
    border: 3px solid var(--premium-cream, #FBF7F0) !important;
    border-top-color: var(--premium-sage, #718E68) !important;
    border-radius: 50% !important;
    animation: premium-spin 1s linear infinite !important;
}

.qa-loading-text {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 1.25rem !important;
    color: var(--premium-espresso, #0D353E) !important;
    font-style: italic !important;
}

/* Premium Reply Box */
.qa-reply-box {
    background: linear-gradient(135deg, 
        var(--premium-ivory, #FFFEF9) 0%, 
        white 100%) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    margin-top: 32px !important;
    border: 1px solid rgba(113, 142, 104, 0.08) !important;
}

.qa-reply-input {
    width: 100% !important;
    padding: 16px 20px !important;
    background: white !important;
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 1.125rem !important;
    color: var(--premium-espresso, #0D353E) !important;
    transition: all 0.3s ease !important;
    resize: vertical !important;
    min-height: 120px !important;
}

.qa-reply-input:focus {
    outline: none !important;
    border-color: var(--premium-sage, #718E68) !important;
    box-shadow: 0 0 0 4px rgba(113, 142, 104, 0.1) !important;
}

.qa-reply-input::placeholder {
    color: var(--premium-warm-gray, #8B8680) !important;
    opacity: 0.6 !important;
    font-style: italic !important;
}

/* Premium Q&A Step Default Styling */
.qa-step h2,
.qa-step h3 {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    color: var(--premium-espresso, #0D353E) !important;
}

.qa-step p {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 1.125rem !important;
    line-height: 1.7 !important;
    color: var(--premium-charcoal, #3A3633) !important;
}

.qa-step .senna-response,
.qa-step .user-question {
    background: white !important;
    border-radius: 16px !important;
    padding: 32px !important;
    margin: 24px 0 !important;
    box-shadow: 0 4px 20px rgba(13, 53, 62, 0.04) !important;
}

.qa-step .senna-response {
    border-left: 3px solid var(--premium-sage, #718E68) !important;
}

.qa-step .user-question {
    border-left: 3px solid var(--premium-soft-gold, #D4AF37) !important;
    background: linear-gradient(135deg, 
        white 0%, 
        var(--premium-ivory, #FFFEF9) 100%) !important;
}

/* Premium conversation thread */
.qa-conversation {
    max-width: 800px !important;
    margin: 0 auto !important;
}

.qa-message {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 32px !important;
    animation: fadeInUp 0.5s ease !important;
}

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

.qa-message-avatar {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.qa-message.senna .qa-message-avatar {
    background: linear-gradient(135deg, 
        var(--premium-sage, #718E68) 0%, 
        var(--premium-muted-sage, #8FA688) 100%) !important;
    color: white !important;
}

.qa-message.user .qa-message-avatar {
    background: var(--premium-espresso, #0D353E) !important;
    color: white !important;
}

.qa-message-content {
    flex: 1 !important;
    background: white !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 2px 12px rgba(13, 53, 62, 0.04) !important;
}

.qa-message.senna .qa-message-content {
    border-top: 2px solid var(--premium-sage, #718E68) !important;
}

.qa-message.user .qa-message-content {
    background: linear-gradient(135deg, 
        var(--premium-ivory, #FFFEF9) 0%, 
        white 100%) !important;
}

/* Premium typing indicator */
.qa-typing {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 16px !important;
    color: var(--premium-warm-gray, #8B8680) !important;
    font-style: italic !important;
}

.qa-typing-dots {
    display: flex !important;
    gap: 4px !important;
}

.qa-typing-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--premium-sage, #718E68) !important;
    animation: typing-bounce 1.4s infinite !important;
}

.qa-typing-dot:nth-child(2) {
    animation-delay: 0.2s !important;
}

.qa-typing-dot:nth-child(3) {
    animation-delay: 0.4s !important;
}

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

/* ===========================================
   PREMIUM LAUNCHER OVERLAY
   =========================================== */

.launcher-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(251, 247, 240, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 999998 !important;
    display: none !important;
}

.launcher-overlay.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.premium-loader {
    text-align: center !important;
}

.premium-loader-icon {
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto 20px !important;
    border: 3px solid var(--premium-cream, #FBF7F0) !important;
    border-top-color: var(--premium-sage, #718E68) !important;
    border-radius: 50% !important;
    animation: premium-spin 1s linear infinite !important;
}

@keyframes premium-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.premium-loader-text {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 0.9rem !important;
    color: var(--premium-charcoal, #3A3633) !important;
    opacity: 0.7 !important;
    letter-spacing: 0.5px !important;
}

/* ===========================================
   MOBILE RESPONSIVE PREMIUM DESIGN
   =========================================== */

/* Tablet view (768px - 1024px) */
@media screen and (max-width: 1024px) {
    .visual-cards-container {
        max-width: 500px !important;
        gap: 14px !important;
    }
    
    .visual-card {
        padding: 18px !important;
        min-height: 130px !important;
    }
}

/* Mobile view (max-width: 767px) */
@media screen and (max-width: 767px) {
    /* Header adjustments */
    .header-container {
        padding: 6px 12px !important;
        height: 42px !important;
    }
    
    .journey-progress {
        gap: 16px !important;
        max-width: 240px !important;
    }
    
    .journey-progress::before {
        left: 24px !important;
        right: 24px !important;
    }
    
    .step-circle {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.7rem !important;
    }
    
    .journey-step.active .step-circle {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
    }
    
    .user-welcome {
        display: flex !important; /* Show login button on mobile */
        padding: 8px 12px !important;
        font-size: 14px !important;
    }
    
    .user-welcome .login-link {
        padding: 8px 16px !important;
        background: var(--premium-soft-gold, #D4AF37) !important;
        color: var(--premium-espresso, #0D353E) !important;
        border-radius: 20px !important;
        text-decoration: none !important;
        font-weight: 600 !important;
    }
    
    /* Visual cards mobile layout */
    .visual-cards-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 12px !important;
        max-width: 100% !important;
        margin: 20px auto !important;
    }
    
    .visual-card {
        padding: 20px 16px !important; /* Increased padding for better touch targets */
        min-height: 150px !important; /* Increased minimum height */
        border-radius: 12px !important; /* Slightly larger radius */
    }
    
    .visual-card-icon {
        width: 48px !important; /* Increased icon size */
        height: 48px !important;
        margin-bottom: 12px !important;
        font-size: 1.5rem !important; /* Larger icon */
    }
    
    .visual-card-title {
        font-size: 1.1rem !important; /* Slightly larger text */
        margin-bottom: 6px !important;
        font-weight: 600 !important;
    }
    
    .visual-card-description {
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
    }
    
    /* Ensure cards don't get too small on very small screens */
    @media screen and (max-width: 360px) {
        .visual-card-title {
            font-size: 0.95rem !important;
        }
        
        .visual-card-description {
            font-size: 0.75rem !important;
        }
    }
    
    /* Content area adjustments */
    .onboarding-step {
        padding: 20px 16px 40px !important;
    }
    
    .focus-content {
        margin-top: 0 !important;
    }
    
    .message-content {
        font-size: 1.25rem !important;
        margin-bottom: 20px !important;
    }
    
    .main-question {
        font-size: 1.5rem !important;
        margin: 20px 0 !important;
    }
    
    /* Query panel mobile */
    .query-panel {
        padding: 20px !important;
        margin: 20px 0 !important;
    }
    
    .query-label {
        font-size: 1rem !important;
    }
    
    .query-input {
        font-size: 0.95rem !important;
        padding: 12px 16px !important;
    }
    
    .query-submit {
        padding: 12px 20px !important;
        font-size: 0.95rem !important;
    }
    
    .quick-questions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .quick-question {
        width: 100% !important;
        padding: 10px 14px !important;
        font-size: 0.875rem !important;
    }
}

/* Small mobile (max-width: 374px) - iPhone SE, etc */
@media screen and (max-width: 374px) {
    .visual-cards-container {
        gap: 10px !important;
        padding: 0 10px !important;
    }
    
    .visual-card {
        padding: 14px 10px !important;
        min-height: 110px !important;
    }
    
    .visual-card-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.125rem !important;
    }
}

/* Premium touch for mobile - maintain quality */
@media (hover: none) and (pointer: coarse) {
    /* Touch-friendly sizes */
    .visual-card {
        min-height: 130px !important;
    }
    
    .query-submit,
    .qa-action-btn,
    button {
        min-height: 44px !important; /* Apple's recommended touch target */
    }
    
    /* Remove hover effects on touch devices */
    .visual-card:hover {
        transform: none !important;
    }
    
    /* Add touch feedback */
    .visual-card:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s !important;
    }
}

/* Landscape mobile adjustments */
@media screen and (max-width: 767px) and (orientation: landscape) {
    .header-container {
        height: 40px !important;
    }
    
    .visual-cards-container {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px !important;
        margin: 16px auto !important;
    }
    
    .visual-card {
        min-height: 100px !important;
        padding: 12px !important;
    }
    
    .visual-card-icon {
        width: 32px !important;
        height: 32px !important;
        margin-bottom: 6px !important;
    }
    
    .visual-card-title {
        font-size: 0.875rem !important;
    }
    
    .visual-card-description {
        display: none !important; /* Hide description in landscape */
    }
}

/* ===========================================
   PREMIUM COLORS FALLBACK
   =========================================== */

:root {
    /* Premium Color System */
    --premium-cream: #FBF7F0;
    --premium-ivory: #FFFEF9;
    --premium-espresso: #0D353E;
    --premium-charcoal: #3A3633;
    --premium-sage: #718E68;
    --premium-muted-sage: #8FA688;
    --premium-soft-gold: #D4AF37;
    --premium-champagne: #F7E7CE;
    --premium-warm-gray: #8B8680;
    --premium-dusty-rose: #C4A69F;
    --premium-deep-teal: #2C5F5D;
    --premium-light-sage: #E8F0E3;
    
    /* Font Stacks */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}