/* ═════════════════════════════════════════════════════════════════════════════
   COMFYAI CLOUD v48 — PERFORMANCE OPTIMIZED LIQUID GLASS EDITION
   ✅ Google Lighthouse standards: reduced TBT, faster LCP, better CLS
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Critical: font-display swap prevents invisible text during load ── */
@font-face {
    font-family: 'Inter';
    font-display: swap;
}

/* ── Critical: contain layout for main sections to reduce reflow cost ── */
.view-section {
    contain: layout style;
}

/* ── Critical: LCP element hint — hero h1 should paint first ── */
h1.text-gradient-hero,
#view-home h1 {
    contain: content;
}



/* ═════════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — v27 LIQUID GLASS PALETTE
   ═════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Animation speed multiplier */
    --ca-spd: 1;
    
    /* Apple-grade easing curves */
    --ca-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ca-ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
    --ca-ease-apple: cubic-bezier(0.42, 0, 0.58, 1);
    --ca-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Core backgrounds — pure white canvas */
    --bg: #faf8f4; /* v50 warm white */
    --bg-2: #f5f3ef;
    --bg-3: #f1f5f9;
    --bg-4: #e2e8f0;
    
    /* v27 Accent Palette */
    --indigo: #6366f1;
    --indigo-light: #818cf8;
    --indigo-dark: #4f46e5;
    --indigo-bg: rgba(99, 102, 241, 0.08);
    --indigo-border: rgba(99, 102, 241, 0.25);
    
    --teal: #14b8a6;
    --teal-light: #2dd4bf;
    --teal-dark: #0d9488;
    --teal-bg: rgba(20, 184, 166, 0.08);
    --teal-border: rgba(20, 184, 166, 0.25);
    
    --orange: #f59e0b;
    --orange-light: #fbbf24;
    --orange-dark: #d97706;
    --orange-bg: rgba(245, 158, 11, 0.08);
    --orange-border: rgba(245, 158, 11, 0.25);
    
    --purple: #a855f7;
    --purple-light: #c084fc;
    --purple-dark: #9333ea;
    --purple-bg: rgba(168, 85, 247, 0.08);
    --purple-border: rgba(168, 85, 247, 0.25);
    
    /* Legacy Apple colors (for compatibility) */
    --blue: #007AFF;
    --blue-light: #409cff;
    --green: #34C759;
    --pink: #FF2D55;
    
    /* Text colors — deep slate */
    --text-1: #1c1917;
    --text-2: #1c1917;
    --text-3: #44403c;
    --text-4: #78716c;
    --text-5: #a8a29e;
    
    /* Universal border — thin black elegance */
    --border: rgba(0, 0, 0, 0.09);
    --border-md: rgba(0, 0, 0, 0.12);
    --border-strong: rgba(0, 0, 0, 0.18);
    
    /* Liquid Glass Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.09), 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.11), 0 8px 20px rgba(0, 0, 0, 0.06);
    
    /* Liquid Glass Core */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-bg-strong: rgba(255, 255, 255, 0.88);
    --glass-border: rgba(0, 0, 0, 0.09);
    --glass-blur: blur(40px) saturate(1.8);
    --glass-blur-strong: blur(40px) saturate(1.8);
    --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    --glass-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    
    /* Inner glow for glass depth */
    --glass-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(0, 0, 0, 0.02);
}

/* ═════════════════════════════════════════════════════════════════════════════
   2. RESET + BASE STYLES
   ═════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

#wpadminbar, #adminbar, body.admin-bar #wpadminbar {
    display: none !important; 
    height: 0 !important; 
    min-height: 0 !important;
}

html { 
    margin-top: 0 !important; 
    scroll-behavior: smooth; 
    height: 100%; 
    overflow: hidden; 
    background: var(--bg);
    /* Prevent input zoom on iPhone */
    -webkit-text-size-adjust: 100%;
}

body.admin-bar { 
    margin-top: 0 !important; 
    padding-top: 0 !important; 
}

body, .ca-body {
    font-family: -apple-system, "SF Pro Display", "SF Pro Text", BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text-1);
    height: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior: none;
    letter-spacing: -0.011em;
    /* Prevent input zoom on mobile */
    font-size: 16px;
    -webkit-text-size-adjust: none;
    touch-action: manipulation;
}

/* ═════════════════════════════════════════════════════════════════════════════
   2B. APPLE-GRADE SCROLL FOUNDATION
   Butter-smooth momentum scrolling on every scroll container.
   Uses native iOS/WebKit physics — no JS, no libraries.
   ═════════════════════════════════════════════════════════════════════════════ */

/*
 * Rule 1: All overflow scroll containers get iOS momentum scrolling,
 * GPU compositing, and contained overscroll (no chain-bounce bleeding).
 */
.view-section,
#single-result-container,
#history-list,
#history-list-mobile,
.support-chat-messages,
.ca-support-page-messages,
.modal-sheet,
.custom-scrollbar,
.rep-card-prompt-box {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

/*
 * Rule 2: Promote key scroll containers to their own compositor layer.
 * This tells the GPU to handle the scroll repaint independently,
 * eliminating jank caused by main-thread style/layout work.
 */
.view-section,
#single-result-container {
    will-change: scroll-position;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/*
 * Rule 3: Remove scrollbars on WebKit for cleaner feel.
 * Scrollbar presence creates visual noise and on iOS they are
 * invisible anyway — explicitly hiding removes any flicker.
 */
.view-section::-webkit-scrollbar,
#single-result-container::-webkit-scrollbar,
#history-list::-webkit-scrollbar,
#history-list-mobile::-webkit-scrollbar,
.support-chat-messages::-webkit-scrollbar {
    display: none;
}
.view-section,
#single-result-container,
#history-list,
#history-list-mobile,
.support-chat-messages {
    scrollbar-width: none;
}

/*
 * Rule 4: touch-action on scroll containers.
 * pan-y allows native vertical momentum; manipulation removes
 * 300ms tap delay without breaking scroll.
 */
.view-section {
    touch-action: pan-y;
}


   ═════════════════════════════════════════════════════════════════════════════ */
.ambient-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    background: var(--bg);
    contain: strict;
}

.ambient-orb {
    position: absolute;
    border-radius: 50%;
    /* Reduced blur for better GPU performance - blur is expensive */
    filter: blur(60px);
    animation: orbFloat 32s infinite ease-in-out alternate;
    will-change: transform;
    /* Use opacity instead of rgba alpha for GPU compositing */
    opacity: 0.4;
}

.orb-1 {
    top: -10%;
    left: -5%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.5) 0%, transparent 70%);
}

.orb-2 {
    bottom: -15%;
    right: -5%;
    width: 55vw;
    height: 55vw;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.45) 0%, transparent 70%);
    opacity: 0.30;
    animation-delay: -12s;
}

.orb-3 {
    top: 30%;
    left: 38%;
    width: 38vw;
    height: 38vw;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.40) 0%, transparent 70%);
    opacity: 0.22;
    animation-delay: -20s;
}

@keyframes orbFloat {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(2%, 4%) scale(1.03); }
}

/* Reduce motion: disable orb animation for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .ambient-orb { animation: none; }
}

/* Mobile: smaller orbs = faster paint */
@media (max-width: 768px) {
    .ambient-orb { filter: blur(60px); }
    .orb-1 { width: 70vw; height: 70vw; }
    .orb-2 { width: 75vw; height: 75vw; }
    .orb-3 { display: none; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   4. COSMIC PARTICLE CANVAS
   ═════════════════════════════════════════════════════════════════════════════ */
#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    contain: strict;
    opacity: 1;
    transition: opacity 0.6s ease;
}
/* Canvas fades out when home/plans not active — JS clears it, CSS fades the element */
body:not(.home-active):not(.plans-active) #particle-canvas {
    opacity: 0;
}

/* Generate page gets enhanced particles */
#gen-particle-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.8;
}

/* ═════════════════════════════════════════════════════════════════════════════
   5. LIQUID GLASS COMPONENTS
   ═════════════════════════════════════════════════════════════════════════════ */

/* Base glass panel */
.glass-panel {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-inner-glow);
    border-radius: 1.5rem;
}

/* Navigation glass */
.glass-nav {
    /* Own these from Tailwind: flex items-center rounded-full pointer-events-auto */
    display: flex !important;
    align-items: center !important;
    border-radius: 9999px !important;
    pointer-events: auto !important;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(32px) saturate(1.8);
    -webkit-backdrop-filter: blur(32px) saturate(1.8);
    border: 1px solid var(--border-md);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.96);
    transform: translateZ(0);
    will-change: auto;
}

/* Mobile: reduce backdrop blur further — expensive on low-end devices */
@media (max-width: 767px) {
    .glass-nav {
        backdrop-filter: blur(24px) saturate(1.6);
        -webkit-backdrop-filter: blur(24px) saturate(1.6);
    }
}

/* Liquid glass pill button */
.glass-pill {
    background: var(--glass-bg);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    border-radius: 9999px;
    transition: all 0.28s var(--ca-ease-spring);
}

.glass-pill:hover {
    background: var(--glass-bg-strong);
    border-color: var(--border-md);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transform: scale(1.03) translateZ(0);
}

.glass-pill:active {
    transform: scale(0.96) translateZ(0);
}

/* Accent glass pills */
.glass-pill-indigo {
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.06));
    border-color: var(--indigo-border);
    color: var(--indigo-dark);
}

.glass-pill-indigo:hover {
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.18), rgba(99, 102, 241, 0.10));
}

.glass-pill-teal {
    background: linear-gradient(145deg, rgba(20, 184, 166, 0.12), rgba(20, 184, 166, 0.06));
    border-color: var(--teal-border);
    color: var(--teal-dark);
}

.glass-pill-orange {
    background: linear-gradient(145deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.06));
    border-color: var(--orange-border);
    color: var(--orange-dark);
}

.glass-pill-purple {
    background: linear-gradient(145deg, rgba(168, 85, 247, 0.12), rgba(168, 85, 247, 0.06));
    border-color: var(--purple-border);
    color: var(--purple-dark);
}

/* ═════════════════════════════════════════════════════════════════════════════
   6. SCROLLBAR STYLING
   ═════════════════════════════════════════════════════════════════════════════ */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* ═════════════════════════════════════════════════════════════════════════════
   7. SPA VIEW SECTIONS
   ═════════════════════════════════════════════════════════════════════════════ */
.view-section {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    /*
     * BUG 1 FIX: visibility:hidden ensures the element and ALL its descendants
     * (including the gen-sidebar with backdrop-filter) stop painting entirely.
     * opacity:0 alone does not prevent backdrop-filter compositing from bleeding
     * through on WebKit/Blink. The visibility transition is delayed by 0.5s
     * (matching the opacity duration) so the fade-out completes before the element
     * is fully removed from the paint tree.
     */
    visibility: hidden;
    transition: opacity 0.5s var(--ca-ease-smooth),
                transform 0.5s var(--ca-ease-smooth),
                visibility 0s linear 0.5s;
    transform: translateY(16px) scale(0.99);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    contain: layout style;
    background: var(--bg);
}

.view-section.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    /*
     * BUG 1 FIX (cont.): visibility:visible is applied immediately (0s delay)
     * when the view becomes active so it's visible during its fade-in.
     */
    visibility: visible;
    transition: opacity 0.5s var(--ca-ease-smooth),
                transform 0.5s var(--ca-ease-smooth),
                visibility 0s linear 0s;
}

#view-generate {
    overflow: hidden;
    background: var(--bg);
}

/* ═════════════════════════════════════════════════════════════════════════════
   8. BUTTONS & INTERACTIONS
   ═════════════════════════════════════════════════════════════════════════════ */
.btn-spring {
    transition: transform 0.38s var(--ca-ease-spring), 
                background-color 0.2s var(--ca-ease-apple), 
                opacity 0.2s, 
                box-shadow 0.3s var(--ca-ease-apple), 
                border-color 0.2s;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    contain: layout;
}

.btn-spring:active {
    transform: scale(0.94) !important;
    transition-duration: 0.08s !important;
}

@media (hover: hover) {
    .btn-spring:hover {
        transform: scale(1.025);
    }
}

button, [role="button"] {
    min-height: 40px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   9. ANIMATIONS
   ═════════════════════════════════════════════════════════════════════════════ */
@keyframes scaleIn {
    0% { 
        opacity: 0; 
        transform: scale(0.96) translateY(12px); 
        filter: blur(4px);
    }
    60% { 
        opacity: 1; 
        filter: blur(0);
    }
    100% { 
        opacity: 1; 
        transform: scale(1) translateY(0);
    }
}

.animate-scale-in {
    animation: scaleIn 0.6s var(--ca-ease-smooth) forwards;
}

@keyframes blob {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(24px, -36px) scale(1.08); }
    66% { transform: translate(-16px, 18px) scale(0.94); }
    100% { transform: translate(0, 0) scale(1); }
}

.animate-blob {
    animation: blob 8s infinite ease-in-out;
}

.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

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

.animate-spin-slow {
    animation: spin 6s linear infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

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

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

.animate-float {
    animation: float 4s ease-in-out infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.animate-shimmer {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 2.5s ease-in-out infinite;
}

/* ═════════════════════════════════════════════════════════════════════════════
   10. NAVIGATION — v49: Tailwind-independent positioning
   ═════════════════════════════════════════════════════════════════════════════ */
.ca-nav-desktop {
    display: none !important;
    /* Own these from Tailwind: fixed top-0 left-0 right-0 z-50 justify-center */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    justify-content: center;
    pointer-events: none;
    contain: layout style;
}

.ca-nav-mobile {
    display: flex !important;
    /* Own these from Tailwind: fixed top-0 left-0 right-0 z-[60] */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 60 !important;
    contain: layout style;
}

@media (min-width: 768px) {
    .ca-nav-desktop {
        display: flex !important;
    }
    .ca-nav-mobile {
        display: none !important;
    }
}

.nav-link {
    transition: color 0.22s var(--ca-ease-apple), background 0.22s var(--ca-ease-apple);
    -webkit-tap-highlight-color: transparent;
    color: var(--text-2);
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.nav-link:hover {
    color: var(--text-1);
    background: rgba(0, 0, 0, 0.04);
}

.nav-link.active {
    background: var(--indigo-bg);
    color: var(--indigo);
    box-shadow: inset 0 0 0 1px var(--indigo-border);
}

.mobile-nav-icon {
    color: var(--text-3);
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.35rem 0.5rem;
    border-radius: 9999px;
}

.mobile-nav-icon.active {
    color: var(--indigo);
    background: var(--indigo-bg);
}

/* Brand name styling */
.ca-brand-name {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    background: linear-gradient(125deg, var(--indigo) 0%, var(--purple) 50%, var(--teal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ═════════════════════════════════════════════════════════════════════════════
   11. TOAST NOTIFICATIONS
   ═════════════════════════════════════════════════════════════════════════════ */
.ca-toast {
    position: fixed;
    top: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.65rem 1.25rem;
    border-radius: 9999px;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--indigo);
    border: 1px solid var(--indigo-border);
    z-index: 300;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.5) inset;
    white-space: nowrap;
    pointer-events: none;
    max-width: calc(100vw - 2rem);
    animation: scaleIn 0.38s var(--ca-ease-spring) forwards;
}

.ca-toast.error {
    color: var(--pink);
    border-color: rgba(255, 45, 85, 0.25);
}

.ca-toast.prompt-rejected {
    color: #059669;
    border-color: rgba(5, 150, 105, 0.30);
    background: rgba(236, 253, 245, 0.92);
    white-space: normal;
    text-align: center;
    max-width: min(340px, calc(100vw - 2rem));
    line-height: 1.5;
    padding: 0.75rem 1.4rem;
    border-radius: 1.25rem;
}
.ca-toast.prompt-rejected .ca-toast-line1 {
    display: block;
    font-weight: 700;
    font-size: 0.8rem;
}
.ca-toast.prompt-rejected .ca-toast-line2 {
    display: block;
    font-weight: 500;
    font-size: 0.74rem;
    opacity: 0.8;
    margin-top: 0.18rem;
}


.ca-toast.success {
    color: var(--teal);
    border-color: var(--teal-border);
}

.ca-toast.gift {
    color: var(--purple);
    border-color: var(--purple-border);
}

@keyframes creditPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.credit-pop {
    animation: creditPop 0.32s var(--ca-ease-spring);
}

/* ═════════════════════════════════════════════════════════════════════════════
   12. MODALS
   ═════════════════════════════════════════════════════════════════════════════ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

@media (min-width: 640px) {
    .modal-backdrop {
        align-items: center;
    }
}

.modal-backdrop.open {
    opacity: 1;
}

.modal-sheet {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border: 1px solid var(--border-md);
    width: 100%;
    max-width: 440px;
    border-radius: 2rem 2rem 0 0;
    padding: 1.5rem;
    transform: translateY(100%);
    transition: transform 0.5s var(--ca-ease-spring);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    max-height: 90vh;
    overflow-y: auto;
    color: var(--text-1);
}

@media (min-width: 640px) {
    .modal-sheet {
        border-radius: 2rem;
        transform: scale(0.92) translateY(10px);
    }
}

.modal-backdrop.open .modal-sheet {
    transform: translateY(0);
}

@media (min-width: 640px) {
    .modal-backdrop.open .modal-sheet {
        transform: scale(1) translateY(0);
    }
}

.modal-drag-handle {
    width: 2.75rem;
    height: 0.25rem;
    background: var(--bg-4);
    border-radius: 9999px;
    margin: 0 auto 1.5rem;
}

/* ═════════════════════════════════════════════════════════════════════════════
   13. HOME PAGE STYLES — v29 Bolt/Claude style prompt UI
   ═════════════════════════════════════════════════════════════════════════════ */
.home-prompt-wrap {
    position: relative;
}

/* Animated gradient border wrapper — optimized for performance */
.home-prompt-gradient-border {
    position: relative;
    border-radius: 1.75rem;
    padding: 1.5px;
    background: linear-gradient(135deg,
        rgba(124,58,237,0.9) 0%,
        rgba(6,182,212,0.8) 30%,
        rgba(236,72,153,0.85) 65%,
        rgba(124,58,237,0.9) 100%);
    background-size: 200% 200%;
    animation: promptBorderFlow 8s ease infinite;
    box-shadow:
        0 0 24px rgba(124,58,237,0.18),
        0 8px 32px rgba(0,0,0,0.07);
    transition: box-shadow 0.3s ease;
    will-change: background-position;
}

.home-prompt-gradient-border:focus-within {
    animation-duration: 4s;
    box-shadow:
        0 0 36px rgba(124,58,237,0.28),
        0 12px 48px rgba(0,0,0,0.09);
}

@keyframes promptBorderFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .home-prompt-gradient-border { animation: none; }
}

.home-prompt-box {
    background: rgba(255, 252, 250, 0.97) !important;
    border-radius: calc(1.75rem - 1.5px);
    border: none;
    box-shadow: none;
    overflow: hidden;
    transition: background 0.3s ease;
}

.home-prompt-box textarea {
    font-size: 1rem;
    line-height: 1.6;
    caret-color: var(--indigo);
    color: var(--text-1);
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    width: 100%;
    padding: 1.25rem 1.375rem;
    font-weight: 450;
}

.home-prompt-box textarea::placeholder {
    color: rgba(124,58,237,0.55);
    font-weight: 400;
}

/* Tool + Attach pill buttons inside prompt box */
.home-tool-pill, .home-attach-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 650;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(248,248,252,0.95);
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.22s var(--ca-ease-spring);
    min-height: 32px;
    letter-spacing: -0.01em;
}

.home-tool-pill:hover, .home-attach-pill:hover {
    background: rgba(124,58,237,0.07);
    border-color: rgba(124,58,237,0.25);
    color: rgba(124,58,237,0.9);
    transform: scale(1.03);
}

/* The circular arrow-up submit button */
.home-submit-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%);
    background-size: 200% 200%;
    animation: arrowBtnGlow 3s ease infinite;
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(124,58,237,0.45), 0 1px 0 rgba(255,255,255,0.2) inset;
    transition: transform 0.3s var(--ca-ease-spring), box-shadow 0.3s ease, filter 0.2s;
    flex-shrink: 0;
}

.home-submit-arrow:hover {
    transform: scale(1.1) translateY(-1px);
    box-shadow: 0 8px 28px rgba(124,58,237,0.60);
    filter: brightness(1.1);
}

.home-submit-arrow:active {
    transform: scale(0.94);
}

@keyframes arrowBtnGlow {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
}

/* Options row below prompt box: Screen / Fidelity dropdowns */
.home-option-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 0 2px;
}

.home-option-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.home-option-select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 9999px;
    padding: 7px 32px 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    backdrop-filter: blur(20px);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.9);
    transition: all 0.22s var(--ca-ease-spring);
    min-height: 34px;
}

.home-option-select:hover {
    border-color: rgba(124,58,237,0.25);
    background: rgba(255,255,255,0.95);
}

.home-option-select:focus {
    outline: none;
    border-color: rgba(124,58,237,0.4);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.08);
}

.home-option-chevron {
    position: absolute;
    right: 10px;
    pointer-events: none;
    color: var(--text-4);
    width: 12px;
    height: 12px;
}

.home-nav-pill {
    background: var(--glass-bg);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    border-radius: 9999px;
    color: var(--text-3);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.625rem 1rem;
    transition: all 0.28s var(--ca-ease-spring);
}

.home-nav-pill:hover {
    background: var(--glass-bg-strong);
    border-color: var(--border-md);
    color: var(--text-1);
    transform: scale(1.03) translateZ(0);
}

.home-nav-pill:active {
    transform: scale(0.96) translateZ(0);
}

/* Home cards — v29: gradient color borders, bigger text */
.ca-card-generate,
.ca-card-replicate {
    position: relative;
    height: 16rem;
    border-radius: 1.75rem;
    overflow: hidden;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px) saturate(1.95) brightness(1.02);
    -webkit-backdrop-filter: blur(40px) saturate(1.95) brightness(1.02);
    border: 1px solid rgba(0, 0, 0, 0.09);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05), 
                0 1px 3px rgba(0, 0, 0, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transition: all 0.4s var(--ca-ease-spring);
    cursor: pointer;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    transform: translateZ(0);
}

/* Gradient border wrapper for cards — performance optimized */
.ca-card-gen-border {
    padding: 1.5px;
    border-radius: calc(1.75rem + 1.5px);
    background: linear-gradient(135deg,
        rgba(0,122,255,0.7) 0%,
        rgba(52,211,153,0.6) 40%,
        rgba(0,122,255,0.7) 100%);
    background-size: 200% 200%;
    animation: cardGenBorder 8s ease infinite;
    box-shadow: 0 0 18px rgba(0,122,255,0.12), 0 4px 20px rgba(0,0,0,0.06);
    will-change: background-position;
}

.ca-card-rep-border {
    padding: 1.5px;
    border-radius: calc(1.75rem + 1.5px);
    background: linear-gradient(135deg,
        rgba(124,58,237,0.7) 0%,
        rgba(236,72,153,0.6) 40%,
        rgba(6,182,212,0.65) 100%);
    background-size: 200% 200%;
    animation: cardRepBorder 8s ease infinite;
    box-shadow: 0 0 18px rgba(124,58,237,0.12), 0 4px 20px rgba(0,0,0,0.06);
    will-change: background-position;
}

@keyframes cardGenBorder {
    0%,100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes cardRepBorder {
    0%,100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.ca-card-generate:hover,
.ca-card-replicate:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 
                0 4px 12px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.98);
    transform: translateY(-4px) translateZ(0);
    border-color: rgba(0, 0, 0, 0.14);
}

.ca-card-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.ca-card-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 1.75rem;
}

/* Card icon badges */
.ca-card-icon {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.ca-card-generate .ca-card-icon {
    background: var(--indigo-bg);
    border: 1px solid var(--indigo-border);
}

.ca-card-replicate .ca-card-icon {
    background: var(--purple-bg);
    border: 1px solid var(--purple-border);
}

.ca-card-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.03em;
    margin-bottom: 0.375rem;
    line-height: 1.2;
}

.ca-card-desc {
    font-size: 0.9375rem;
    color: var(--text-2);
    font-weight: 550;
    line-height: 1.55;
    letter-spacing: -0.01em;
}

/* Status badge */
.ca-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ca-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 8px var(--teal);
    animation: pulse 2s infinite;
}

/* ═════════════════════════════════════════════════════════════════════════════
   14. GENERATE PAGE STYLES
   ═════════════════════════════════════════════════════════════════════════════ */
#view-generate {
    background: var(--bg);
}

.gen-sidebar {
    width: 0;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition: width 0.38s var(--ca-ease-spring), 
                opacity 0.28s ease, 
                min-width 0.38s var(--ca-ease-spring);
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    height: 100%;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-right: 1px solid var(--border);
}

.gen-sidebar.open {
    width: 260px;
    min-width: 260px;
    opacity: 1;
    pointer-events: auto;
}

.gen-sidebar .sidebar-text {
    opacity: 0;
    transition: opacity 0.2s ease 0.1s;
}

.gen-sidebar.open .sidebar-text {
    opacity: 1;
}

.gen-sidebar-header {
    flex-shrink: 0;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
}

.gen-sidebar-nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.875rem;
    color: var(--text-3);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all 0.2s ease;
    text-align: left;
    min-height: 2.25rem;
}

.gen-sidebar-nav-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-1);
}

/* Prompt bar */
.ca-prompt-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    padding: 0 0.5rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--bg) 60%, transparent);
}

.gen-prompt-card {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-inner-glow);
    border-radius: 1.5rem;
    transition: all 0.3s var(--ca-ease-smooth);
}

.gen-prompt-card:focus-within {
    border-color: var(--indigo-border);
    box-shadow: 0 0 0 4px var(--indigo-bg), var(--shadow-lg), var(--glass-inner-glow);
}

#gen-prompt {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    color: var(--text-1);
    caret-color: var(--indigo);
    font-size: 0.9375rem;
    line-height: 1.6;
    padding: 1rem 1.25rem;
    max-height: 6rem;
}

#gen-prompt::placeholder {
    color: var(--text-5);
}

/* Model tabs */
/* ═══ MODEL/ASPECT/RES SELECTOR — v44 ═══ */
.sidebar-model-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 868px !important;       /* ← matches prompt box max-width + 8px padding */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 8px !important;
    padding: 0 8px !important;
}

.gen-model-tabs {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 4px !important;
    background: rgba(255,252,248,0.97) !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    /* Auto width — not full width */
    width: auto !important;
    max-width: none !important;
}

.gen-model-tab,
.gen-aspect-tab,
.gen-res-tab {
    padding: 6px 12px !important;
    border-radius: 11px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: var(--text-3, #636366) !important;
    transition: all 0.18s ease !important;
    white-space: nowrap !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    line-height: 1 !important;
}

.gen-model-tab.active,
.gen-aspect-tab.active,
.gen-res-tab.active {
    background: #ffffff !important;
    color: var(--text-1, #1c1c1e) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,1) !important;
    border: 1px solid rgba(0,0,0,0.07) !important;
}

.gen-model-tab:hover:not(.active),
.gen-aspect-tab:hover:not(.active),
.gen-res-tab:hover:not(.active) {
    background: rgba(0,0,0,0.04) !important;
    color: var(--text-2, #3a3a3c) !important;
}

.gen-tab-cost {
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    font-family: 'SF Mono', 'Fira Code', monospace !important;
    color: var(--text-4, #8e8e93) !important;
    background: rgba(0,0,0,0.06) !important;
    padding: 1px 5px !important;
    border-radius: 5px !important;
    letter-spacing: -0.01em !important;
}

.gen-model-tab.active .gen-tab-cost,
.gen-res-tab.active .gen-tab-cost {
    background: rgba(0,0,0,0.07) !important;
}

.gen-tab-divider {
    width: 1px !important;
    height: 18px !important;
    background: rgba(0,0,0,0.09) !important;
    flex-shrink: 0 !important;
    margin: 0 2px !important;
}

/* ── Mobile: scroll horizontally, same pill look ── */
@media (max-width: 767px) {
    .sidebar-model-row {
        overflow-x: auto !important;
        overflow-y: visible !important;
        justify-content: flex-start !important;
        padding: 0 6px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        margin-bottom: 6px !important;
    }
    .sidebar-model-row::-webkit-scrollbar { display: none !important; }
    .gen-model-tabs {
        /* v54: no pill styling here — outer .sidebar-model-row is the pill */
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 4px 1rem !important;
        flex-shrink: 0 !important;
        gap: 2px !important;
    }
    .gen-tab-divider {
        margin: 0 1px !important;
        height: 16px !important;
    }
}

/* Generate submit button */
#gen-submit-btn {
    background: linear-gradient(145deg, var(--indigo) 0%, var(--purple) 100%);
    border: none;
    border-radius: 1rem;
    color: white;
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.625rem 1.25rem;
    box-shadow: 0 3px 16px rgba(99, 102, 241, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.3s var(--ca-ease-spring);
}

#gen-submit-btn:hover {
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scale(1.03) translateZ(0);
}

#gen-submit-btn:active {
    transform: scale(0.96) translateZ(0);
}

/* Result container */
#single-result-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 12rem;
    padding-top: 1.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* ── Mobile result container: top-aligned so 9:16 images + buttons both fit ── */
@media (max-width: 767px) {
    #single-result-container {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding-top: 1rem !important;
        padding-bottom: 14rem !important;
    }
    #single-result-container:has(.ca-rejected-wrap) {
        align-items: center !important;
        justify-content: center !important;
    }
    .ca-rejected-wrap {
        max-width: 100%;
        padding: 2rem 1.5rem !important;
        box-sizing: border-box;
    }
}

/* Generated image result with floating actions */
.gen-result-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 1.5rem;
    overflow: visible;
    gap: 0.75rem;
}

.gen-atomic-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    width: 100%;
}

/* ── ACTION BUTTONS: separate glass pills below the image ── */
.gen-floating-actions {
    display: flex;
    gap: 0.625rem;
    z-index: 20;
    flex-wrap: nowrap;
    justify-content: center;
}

/* ── DESKTOP: 9:16 ── */
@media (min-width: 768px) {
    #single-result-container:has(.gen-result-wrapper[data-aspect="9:16"]) {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 2rem !important;
        padding-bottom: 15rem !important;
    }
    .gen-result-wrapper[data-aspect="9:16"] {
        max-width: 260px !important;
        width: 260px !important;
        overflow: visible !important;
    }
    .gen-result-wrapper[data-aspect="9:16"] .gen-atomic-wrap {
        width: 100% !important;
        aspect-ratio: unset !important;
        max-height: none !important;
        overflow: hidden !important;
        line-height: 0 !important;
    }
    .gen-result-wrapper[data-aspect="9:16"] img.gen-result-image {
        width: 100% !important;
        height: auto !important;
        max-height: calc(100svh - 380px) !important;
        object-fit: contain !important;
        object-position: center center !important;
        display: block !important;
        border-radius: 1rem !important;
    }

    /* ── DESKTOP: 1:1 — constrain height so buttons are never pushed off-screen on short desktops ── */
    #single-result-container:has(.gen-result-wrapper[data-aspect="1:1"]) {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 2rem !important;
        padding-bottom: 15rem !important;
    }
    .gen-result-wrapper[data-aspect="1:1"] {
        max-width: 480px !important;
        width: min(480px, 90vw) !important;
    }
    .gen-result-wrapper[data-aspect="1:1"] img.gen-result-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
    .gen-result-wrapper[data-aspect="1:1"] .gen-atomic-wrap {
        width: 100% !important;
        max-width: calc(100svh - 460px) !important;
        aspect-ratio: 1/1 !important;
    }

    /* ── DESKTOP: 3:4 ── */
    #single-result-container:has(.gen-result-wrapper[data-aspect="3:4"]) {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 2rem !important;
        padding-bottom: 15rem !important;
    }
    .gen-result-wrapper[data-aspect="3:4"] {
        max-width: 360px !important;
        width: 360px !important;
    }
    .gen-result-wrapper[data-aspect="3:4"] .gen-atomic-wrap {
        aspect-ratio: 3/4 !important;
        max-height: calc(100svh - 460px) !important;
    }
    .gen-result-wrapper[data-aspect="3:4"] img.gen-result-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* ── DESKTOP: 4:3 ── */
    #single-result-container:has(.gen-result-wrapper[data-aspect="4:3"]) {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 2rem !important;
        padding-bottom: 15rem !important;
    }
    .gen-result-wrapper[data-aspect="4:3"] {
        max-width: 640px !important;
        width: min(640px, 90vw) !important;
    }
    .gen-result-wrapper[data-aspect="4:3"] .gen-atomic-wrap {
        aspect-ratio: 4/3 !important;
        max-height: calc(100svh - 460px) !important;
    }
    .gen-result-wrapper[data-aspect="4:3"] img.gen-result-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* ── DESKTOP: 2:3 ── */
    #single-result-container:has(.gen-result-wrapper[data-aspect="2:3"]) {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 2rem !important;
        padding-bottom: 15rem !important;
    }
    .gen-result-wrapper[data-aspect="2:3"] {
        max-width: 320px !important;
        width: 320px !important;
    }
    .gen-result-wrapper[data-aspect="2:3"] .gen-atomic-wrap {
        aspect-ratio: 2/3 !important;
        max-height: calc(100svh - 460px) !important;
    }
    .gen-result-wrapper[data-aspect="2:3"] img.gen-result-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* ── DESKTOP: 3:2 ── */
    #single-result-container:has(.gen-result-wrapper[data-aspect="3:2"]) {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 2rem !important;
        padding-bottom: 15rem !important;
    }
    .gen-result-wrapper[data-aspect="3:2"] {
        max-width: 600px !important;
        width: min(600px, 90vw) !important;
    }
    .gen-result-wrapper[data-aspect="3:2"] .gen-atomic-wrap {
        aspect-ratio: 3/2 !important;
        max-height: calc(100svh - 460px) !important;
    }
    .gen-result-wrapper[data-aspect="3:2"] img.gen-result-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* ── DESKTOP: 9:19.5 (iPhone) ── */
    #single-result-container:has(.gen-result-wrapper[data-aspect="9:19.5"]) {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 2rem !important;
        padding-bottom: 15rem !important;
    }
    .gen-result-wrapper[data-aspect="9:19.5"] {
        max-width: 280px !important;
        width: 280px !important;
    }
    .gen-result-wrapper[data-aspect="9:19.5"] .gen-atomic-wrap {
        aspect-ratio: 9/19.5 !important;
        max-height: calc(100svh - 460px) !important;
    }
    .gen-result-wrapper[data-aspect="9:19.5"] img.gen-result-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* ── DESKTOP: 19.5:9 (Cinema) ── */
    #single-result-container:has(.gen-result-wrapper[data-aspect="19.5:9"]) {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 2rem !important;
        padding-bottom: 15rem !important;
    }
    .gen-result-wrapper[data-aspect="19.5:9"] {
        max-width: 800px !important;
        width: min(800px, 95vw) !important;
    }
    .gen-result-wrapper[data-aspect="19.5:9"] .gen-atomic-wrap {
        aspect-ratio: 19.5/9 !important;
        max-height: calc(100svh - 460px) !important;
    }
    .gen-result-wrapper[data-aspect="19.5:9"] img.gen-result-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* ── DESKTOP: 9:20 (Story) ── */
    #single-result-container:has(.gen-result-wrapper[data-aspect="9:20"]) {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 2rem !important;
        padding-bottom: 15rem !important;
    }
    .gen-result-wrapper[data-aspect="9:20"] {
        max-width: 270px !important;
        width: 270px !important;
    }
    .gen-result-wrapper[data-aspect="9:20"] .gen-atomic-wrap {
        aspect-ratio: 9/20 !important;
        max-height: calc(100svh - 460px) !important;
    }
    .gen-result-wrapper[data-aspect="9:20"] img.gen-result-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* ── DESKTOP: 20:9 (Ultrawide) ── */
    #single-result-container:has(.gen-result-wrapper[data-aspect="20:9"]) {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 2rem !important;
        padding-bottom: 15rem !important;
    }
    .gen-result-wrapper[data-aspect="20:9"] {
        max-width: 840px !important;
        width: min(840px, 95vw) !important;
    }
    .gen-result-wrapper[data-aspect="20:9"] .gen-atomic-wrap {
        aspect-ratio: 20/9 !important;
        max-height: calc(100svh - 460px) !important;
    }
    .gen-result-wrapper[data-aspect="20:9"] img.gen-result-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* ── DESKTOP: 1:2 (Vertical) ── */
    #single-result-container:has(.gen-result-wrapper[data-aspect="1:2"]) {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 2rem !important;
        padding-bottom: 15rem !important;
    }
    .gen-result-wrapper[data-aspect="1:2"] {
        max-width: 300px !important;
        width: 300px !important;
    }
    .gen-result-wrapper[data-aspect="1:2"] .gen-atomic-wrap {
        aspect-ratio: 1/2 !important;
        max-height: calc(100svh - 460px) !important;
    }
    .gen-result-wrapper[data-aspect="1:2"] img.gen-result-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* ── DESKTOP: 2:1 (Panorama) ── */
    #single-result-container:has(.gen-result-wrapper[data-aspect="2:1"]) {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 2rem !important;
        padding-bottom: 15rem !important;
    }
    .gen-result-wrapper[data-aspect="2:1"] {
        max-width: 720px !important;
        width: min(720px, 95vw) !important;
    }
    .gen-result-wrapper[data-aspect="2:1"] .gen-atomic-wrap {
        aspect-ratio: 2/1 !important;
        max-height: calc(100svh - 460px) !important;
    }
    .gen-result-wrapper[data-aspect="2:1"] img.gen-result-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* ── DESKTOP: auto ── */
    #single-result-container:has(.gen-result-wrapper[data-aspect="auto"]) {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 2rem !important;
        padding-bottom: 15rem !important;
    }
    .gen-result-wrapper[data-aspect="auto"] {
        max-width: 480px !important;
        width: min(480px, 90vw) !important;
    }
    .gen-result-wrapper[data-aspect="auto"] .gen-atomic-wrap {
        aspect-ratio: auto !important;
        max-height: calc(100svh - 460px) !important;
    }
    .gen-result-wrapper[data-aspect="auto"] img.gen-result-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* ── DESKTOP: 16:9 ── */
    #single-result-container:has(.gen-result-wrapper[data-aspect="16:9"]) {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 2rem !important;
        padding-bottom: 15rem !important;
    }
    .gen-result-wrapper[data-aspect="16:9"] {
        max-width: 760px !important;
        width: min(760px, 90vw) !important;
    }
    .gen-result-wrapper[data-aspect="16:9"] .gen-atomic-wrap {
        aspect-ratio: 16/9 !important;
        max-height: calc(100svh - 460px) !important;
    }
    .gen-result-wrapper[data-aspect="16:9"] img.gen-result-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
}

/* ── MOBILE ── */
@media (max-width: 767px) {
    .gen-result-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        gap: 0.625rem !important;
    }
    .gen-result-wrapper .gen-atomic-wrap {
        width: 100% !important;
        display: block !important;
        overflow: hidden !important;
    }
    .gen-result-wrapper .gen-atomic-wrap,
    .gen-result-wrapper .gen-result-image {
        max-height: 55svh !important;
        max-width: 100% !important;
        object-fit: cover !important;
        border-radius: 1.25rem !important;
    }
    .gen-result-wrapper .gen-result-image {
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Mobile: Portrait aspect ratios - constrain height */
    .gen-result-wrapper[data-aspect="9:16"] .gen-atomic-wrap,
    .gen-result-wrapper[data-aspect="9:16"] img.gen-result-image,
    .gen-result-wrapper[data-aspect="3:4"] .gen-atomic-wrap,
    .gen-result-wrapper[data-aspect="3:4"] img.gen-result-image,
    .gen-result-wrapper[data-aspect="2:3"] .gen-atomic-wrap,
    .gen-result-wrapper[data-aspect="2:3"] img.gen-result-image,
    .gen-result-wrapper[data-aspect="9:19.5"] .gen-atomic-wrap,
    .gen-result-wrapper[data-aspect="9:19.5"] img.gen-result-image,
    .gen-result-wrapper[data-aspect="9:20"] .gen-atomic-wrap,
    .gen-result-wrapper[data-aspect="9:20"] img.gen-result-image,
    .gen-result-wrapper[data-aspect="1:2"] .gen-atomic-wrap,
    .gen-result-wrapper[data-aspect="1:2"] img.gen-result-image {
        max-height: calc(100svh - 310px) !important;
    }
    
    /* Mobile: Landscape aspect ratios - use standard height */
    .gen-result-wrapper[data-aspect="16:9"] .gen-atomic-wrap,
    .gen-result-wrapper[data-aspect="16:9"] img.gen-result-image,
    .gen-result-wrapper[data-aspect="4:3"] .gen-atomic-wrap,
    .gen-result-wrapper[data-aspect="4:3"] img.gen-result-image,
    .gen-result-wrapper[data-aspect="3:2"] .gen-atomic-wrap,
    .gen-result-wrapper[data-aspect="3:2"] img.gen-result-image,
    .gen-result-wrapper[data-aspect="19.5:9"] .gen-atomic-wrap,
    .gen-result-wrapper[data-aspect="19.5:9"] img.gen-result-image,
    .gen-result-wrapper[data-aspect="20:9"] .gen-atomic-wrap,
    .gen-result-wrapper[data-aspect="20:9"] img.gen-result-image,
    .gen-result-wrapper[data-aspect="2:1"] .gen-atomic-wrap,
    .gen-result-wrapper[data-aspect="2:1"] img.gen-result-image,
    .gen-result-wrapper[data-aspect="1:1"] .gen-atomic-wrap,
    .gen-result-wrapper[data-aspect="1:1"] img.gen-result-image,
    .gen-result-wrapper[data-aspect="auto"] .gen-atomic-wrap,
    .gen-result-wrapper[data-aspect="auto"] img.gen-result-image {
        max-height: 50svh !important;
    }

    /* Mobile: aspect-ratio on atomic-wrap for proper cover crop */
    /* 9:16 uses unset — image defines its own height, no white strip */
    .gen-result-wrapper[data-aspect="9:16"] .gen-atomic-wrap { aspect-ratio: unset !important; line-height: 0 !important; }
    .gen-result-wrapper[data-aspect="9:16"] img.gen-result-image { height: auto !important; object-fit: contain !important; }
    .gen-result-wrapper[data-aspect="3:4"] .gen-atomic-wrap { aspect-ratio: 3/4 !important; }
    .gen-result-wrapper[data-aspect="2:3"] .gen-atomic-wrap { aspect-ratio: 2/3 !important; }
    .gen-result-wrapper[data-aspect="9:19.5"] .gen-atomic-wrap { aspect-ratio: 9/19.5 !important; }
    .gen-result-wrapper[data-aspect="9:20"] .gen-atomic-wrap { aspect-ratio: 9/20 !important; }
    .gen-result-wrapper[data-aspect="1:2"] .gen-atomic-wrap { aspect-ratio: 1/2 !important; }
    .gen-result-wrapper[data-aspect="16:9"] .gen-atomic-wrap { aspect-ratio: 16/9 !important; }
    .gen-result-wrapper[data-aspect="4:3"] .gen-atomic-wrap { aspect-ratio: 4/3 !important; }
    .gen-result-wrapper[data-aspect="3:2"] .gen-atomic-wrap { aspect-ratio: 3/2 !important; }
    .gen-result-wrapper[data-aspect="19.5:9"] .gen-atomic-wrap { aspect-ratio: 19.5/9 !important; }
    .gen-result-wrapper[data-aspect="20:9"] .gen-atomic-wrap { aspect-ratio: 20/9 !important; }
    .gen-result-wrapper[data-aspect="2:1"] .gen-atomic-wrap { aspect-ratio: 2/1 !important; }
    .gen-result-wrapper[data-aspect="1:1"] .gen-atomic-wrap { aspect-ratio: 1/1 !important; }

    .gen-floating-actions {
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .gen-float-btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.625rem !important;
        gap: 0.35rem !important;
    }
    .gen-float-btn span {
        display: inline !important;
    }
}

.gen-result-image {
    border-radius: 1.25rem;
    transition: transform 0.4s var(--ca-ease-smooth);
}

.gen-result-image:hover {
    transform: scale(1.01);
}

.gen-float-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    transition: all 0.3s var(--ca-ease-spring);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    white-space: nowrap;
    background: var(--glass-bg-strong);
    color: var(--text-1);
}

.gen-float-btn:hover {
    transform: translateY(-2px) scale(1.05);
}

/* Green glow hover effect for all action buttons */
.gen-float-btn-download:hover,
.gen-float-btn-share:hover,
.gen-float-btn-expand:hover,
.gen-float-btn-edit:hover {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #059669 !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35), 0 0 20px rgba(16, 185, 129, 0.2) !important;
}

/* Empty state */
#generate-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 300px;
}

/* ═════════════════════════════════════════════════════════════════════════════
   15. REPLICATE PAGE STYLES
   ═════════════════════════════════════════════════════════════════════════════ */
#view-replicate {
    background: var(--bg);
}

/* Header section */
.rep-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .rep-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
}

.rep-title-section {
    max-width: 400px;
}

.rep-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.03em;
    margin-bottom: 0.25rem;
}

.rep-subtitle {
    font-size: 0.8125rem;
    color: var(--text-3);
    line-height: 1.5;
}

/* Controls row — centered below header */
.rep-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.75rem;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
}

.rep-control-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-2);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.rep-control-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--border-md);
}

.rep-control-btn-primary {
    background: linear-gradient(145deg, var(--teal) 0%, var(--indigo) 100%);
    color: white;
    border: none;
    box-shadow: 0 2px 12px rgba(20, 184, 166, 0.35);
}

.rep-control-btn-primary:hover {
    box-shadow: 0 4px 16px rgba(20, 184, 166, 0.45);
    transform: translateY(-1px);
}

/* Mode toggle */
.rep-mode-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border);
    border-radius: 9999px;
    cursor: pointer;
}

.rep-toggle-label {
    font-size: 0.6875rem;
    font-weight: 700;
    transition: color 0.2s ease;
}

.rep-toggle-label.active {
    color: var(--teal);
}

.rep-toggle-switch {
    position: relative;
    width: 2.5rem;
    height: 1.25rem;
    background: var(--bg-4);
    border-radius: 9999px;
    transition: background 0.3s ease;
}

.rep-toggle-switch.active {
    background: var(--teal);
}

.rep-toggle-knob {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1rem;
    height: 1rem;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s var(--ca-ease-spring);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.rep-toggle-switch.active .rep-toggle-knob {
    transform: translateX(1.25rem);
}

/* Replicate grid */
#rep-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    padding-bottom: 2rem;
}

@media (min-width: 640px) {
    #rep-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    #rep-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    #rep-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Replicate cards — true liquid glass */
.rep-card {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px) saturate(1.95);
    -webkit-backdrop-filter: blur(40px) saturate(1.95);
    border: 1px solid rgba(0, 0, 0, 0.09);
    box-shadow: var(--glass-shadow), var(--glass-inner-glow);
    border-radius: 1.5rem;
    overflow: hidden;
    transition: all 0.4s var(--ca-ease-spring);
}

.rep-card:hover {
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: var(--glass-shadow-lg);
    transform: translateY(-3px);
}

.rep-card-image-wrap {
    position: relative;
    aspect-ratio: 1;
    background: var(--bg-2);
    overflow: hidden;
}

.rep-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.rep-card:hover .rep-card-image {
    transform: scale(1.03);
}

.rep-card-content {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.5);
}

.rep-card-prompt {
    font-size: 0.6875rem;
    line-height: 1.6;
    color: var(--text-2);
    max-height: 6rem;
    overflow-y: auto;
    font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
}

.rep-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.rep-card-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem;
    border-radius: 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.rep-card-btn-copy {
    background: var(--indigo-bg);
    color: var(--indigo);
    border: 1px solid var(--indigo-border);
}

.rep-card-btn-copy:hover {
    background: var(--indigo);
    color: white;
}

.rep-card-btn-use {
    background: var(--teal-bg);
    color: var(--teal-dark);
    border: 1px solid var(--teal-border);
}

.rep-card-btn-use:hover {
    background: var(--teal);
    color: white;
}

/* Rep card status badge */
.rep-card-status-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
}

/* Rep card remove button — perfect circle */
.rep-card-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    /* Force exact equal dimensions for perfect circle */
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    border-radius: 50% !important;
    background: rgba(239, 68, 68, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.60);
    box-shadow:
        0 2px 10px rgba(239, 68, 68, 0.35),
        0 0 0 1px rgba(239, 68, 68, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.22s var(--ca-ease-spring), box-shadow 0.22s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}
.rep-card:hover .rep-card-remove {
    opacity: 1;
}
/* On mobile, always show the delete button */
@media (max-width: 767px) {
    .rep-card-remove {
        opacity: 0.85;
    }
}
.rep-card-remove:hover {
    transform: scale(1.15) rotate(90deg);
    background: #ef4444;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.55), 0 0 0 2px rgba(239, 68, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.rep-card-remove svg,
.rep-card-remove i {
    width: 11px !important;
    height: 11px !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
}

/* Rep card prompt section */
.rep-card-prompt-section {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Prompt text box — scrollable, selectable */
.rep-card-prompt-box {
    width: 100%;
    height: 6rem;
    background: rgba(0,0,0,0.04);
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.625rem;
    line-height: 1.65;
    color: var(--text-2);
    font-family: "SF Mono", Monaco, "Cascadia Code", monospace;
    resize: none;
    overflow-y: auto;
    cursor: text;
}
.rep-card-prompt-box:focus { outline: none; border-color: rgba(16,185,129,0.4); }

/* Placeholder when no prompt yet */
.rep-card-placeholder {
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

/* Empty state — fully hidden */
#rep-empty { display: none !important; }

.drag-over {
    border-color: var(--indigo) !important;
    background: var(--indigo-bg) !important;
    transform: scale(1.01) !important;
}

/* ═════════════════════════════════════════════════════════════════════════════
   16. PRICING PAGE STYLES
   ═════════════════════════════════════════════════════════════════════════════ */
#view-plans {
    background: var(--bg);
}

.pricing-header {
    text-align: center;
    margin-bottom: 3rem;
}

.pricing-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background: var(--orange-bg);
    border: 1px solid var(--orange-border);
    color: var(--orange-dark);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}

.pricing-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.03em;
    margin-bottom: 0.75rem;
}

.pricing-subtitle {
    font-size: 1rem;
    color: var(--text-3);
    max-width: 24rem;
    margin: 0 auto;
}

/* Cost table */
.cost-table {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid var(--glass-border);
    border-radius: 1.5rem;
    overflow: hidden;
    margin-bottom: 3rem;
    box-shadow: var(--glass-shadow);
}

.cost-table-header {
    padding: 1rem 1.5rem;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
}

.cost-table-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .cost-table-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.cost-table-cell {
    padding: 1.5rem 1rem;
    text-align: center;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.cost-table-cell:nth-child(2n) {
    border-right: none;
}

@media (min-width: 768px) {
    .cost-table-cell:nth-child(2n) {
        border-right: 1px solid var(--border);
    }
    .cost-table-cell:nth-child(4n) {
        border-right: none;
    }
}

.cost-table-cell:last-child {
    border-right: none;
}

.cost-label {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.cost-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-1);
}

/* Pricing cards */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
    max-width: 72rem;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .pricing-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.pricing-card {
    background: #ffffff;
    border: 1.5px solid #e5e2dd;
    border-radius: 1.25rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.4s var(--ca-ease-spring);
}

.pricing-card:hover {
    transform: translateY(-4px);
}

@keyframes popularBadgeFlow {
    0%,100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.pricing-card-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.06);
}

.pricing-card-icon.starter    { background: linear-gradient(135deg, rgba(120,113,108,0.18) 0%, rgba(168,162,158,0.22) 100%); color: var(--text-3); }
.pricing-card-icon.creator    { background: linear-gradient(135deg, rgba(217,119,6,0.18) 0%, rgba(245,158,11,0.22) 100%); color: var(--orange); }
.pricing-card-icon.studio     { background: linear-gradient(135deg, rgba(124,58,237,0.18) 0%, rgba(167,139,250,0.22) 100%); color: var(--purple); }
.pricing-card-icon.enterprise { background: linear-gradient(135deg, rgba(234,179,8,0.18) 0%, rgba(250,204,21,0.22) 100%); color: #ca8a04; }

/* Plan name — per-card color matching reference image */
/* Plan name — animated gradient matching "Power Your Creativity" hero — old theme */
.pricing-plan-name {
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin-bottom: 0.25rem;
    background: linear-gradient(120deg,#7C3AED 0%,#06B6D4 40%,#EC4899 80%,#7C3AED 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: promptBorderFlow 6s ease infinite;
    line-height: 1.15;
}
/* Remove per-plan static overrides — gradient handles all plans */
.pricing-plan-name--starter,
.pricing-plan-name--creator,
.pricing-plan-name--studio,
.pricing-plan-name--enterprise { color: transparent !important; }

.pricing-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 0.25rem;
}

.pricing-card-desc {
    font-size: 0.75rem;
    color: var(--text-4);
    margin-bottom: 1rem;
}

.pricing-card-price {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.pricing-card-price .amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-1);
    line-height: 1;
}

.pricing-card-price .period {
    font-size: 0.875rem;
    color: var(--text-4);
    margin-bottom: 0.375rem;
}

.pricing-card-credits {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--bg-2);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: 1.25rem;
}

.pricing-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    width: 100%;
}

.pricing-card-features li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.75rem;
    color: var(--text-3);
}

.pricing-card-features li svg {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--teal);
}

.ca-paypal-btn {
    width: 100%;
    min-height: 2.75rem;
}

/* ═════════════════════════════════════════════════════════════════════════════
   17. ACCOUNT PAGE STYLES
   ═════════════════════════════════════════════════════════════════════════════ */
#view-account {
    background: var(--bg);
}

.account-header {
    text-align: center;
    margin-bottom: 2rem;
}

.account-avatar-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
}

.account-avatar {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--bg);
    box-shadow: var(--shadow-lg);
}

.account-avatar-status {
    position: absolute;
    bottom: 0.25rem;
    right: 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--teal);
    border: 3px solid var(--bg);
    border-radius: 50%;
}

.account-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 0.25rem;
}

.account-email {
    font-size: 0.875rem;
    color: var(--text-4);
    margin-bottom: 1rem;
}

.account-credits {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    background: var(--orange-bg);
    border: 1px solid var(--orange-border);
    border-radius: 1rem;
}

.account-credits-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--orange);
}

.account-credits-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-1);
}

.account-credits-label {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--text-4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Account grid */
.account-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .account-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.account-card {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid var(--glass-border);
    border-radius: 1.5rem;
    padding: 1.25rem;
    box-shadow: var(--glass-shadow);
}

.account-card-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.account-action-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-2);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--border);
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.account-action-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--border-md);
    color: var(--text-1);
}

.account-action-btn.credits {
    background: var(--orange-bg);
    border-color: var(--orange-border);
    color: var(--orange-dark);
}

.account-action-btn.support {
    background: var(--indigo-bg);
    border-color: var(--indigo-border);
    color: var(--indigo);
}

.account-action-btn.logout {
    color: var(--text-4);
}

.account-action-btn.logout:hover {
    background: rgba(255, 45, 85, 0.08);
    border-color: rgba(255, 45, 85, 0.2);
    color: var(--pink);
}

/* Activity log */
.activity-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-action {
    font-size: 0.75rem;
    color: var(--text-3);
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-amount {
    font-size: 0.75rem;
    font-weight: 700;
    font-family: "SF Mono", monospace;
}

.activity-amount.positive {
    color: var(--teal);
}

.activity-amount.negative {
    color: var(--pink);
}

/* ═════════════════════════════════════════════════════════════════════════════
   18. SUPPORT CHAT — Apple Messages Style
   ═════════════════════════════════════════════════════════════════════════════ */

/* Floating support button */
#ca-support-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 200;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--indigo) 0%, var(--purple) 100%);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4), var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: all 0.32s var(--ca-ease-spring);
    animation: supportPulse 3s ease infinite;
}

#ca-support-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.5), 0 0 0 6px rgba(99, 102, 241, 0.1);
}

@keyframes supportPulse {
    0%, 100% { 
        box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4), 0 0 0 0 rgba(99, 102, 241, 0.25);
    }
    50% { 
        box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4), 0 0 0 10px rgba(99, 102, 241, 0);
    }
}

#ca-support-btn .unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--pink);
    color: white;
    border-radius: 50%;
    font-size: 0.625rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg);
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s var(--ca-ease-spring);
}

#ca-support-btn .unread-badge.visible {
    opacity: 1;
    transform: scale(1);
}

/* Desktop chat box */
#ca-support-chat {
    position: fixed;
    bottom: 6rem;
    right: 1.5rem;
    z-index: 201;
    width: min(400px, calc(100vw - 2rem));
    height: min(540px, 72vh);
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 1.5rem;
    box-shadow: 0 25px 60px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s var(--ca-ease-spring);
    overflow: hidden;
}

#ca-support-chat.open {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.support-chat-header {
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.support-chat-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    border: 2px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.support-chat-avatar::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.625rem;
    height: 0.625rem;
    background: #10b981;
    border-radius: 50%;
    border: 2px solid #fff;
}

.support-chat-info {
    flex: 1;
    min-width: 0;
}

.support-chat-name {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-1);
}

.support-chat-status {
    font-size: 0.6875rem;
    color: var(--teal);
}

.support-chat-close {
    background: none;
    border: none;
    color: var(--text-4);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    min-height: auto;
}

.support-chat-close:hover {
    color: var(--text-1);
    background: rgba(0, 0, 0, 0.05);
}

.support-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    background: #fafafa;
}

.support-chat-messages::-webkit-scrollbar {
    width: 4px;
}

.support-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 10px;
}

.chat-msg {
    max-width: 85%;
    padding: 0.625rem 0.875rem;
    border-radius: 1.125rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    word-break: break-word;
    animation: chatMsgIn 0.35s var(--ca-ease-spring) both;
}

@keyframes chatMsgIn {
    0% { opacity: 0; transform: translateY(8px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-msg.admin {
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-1);
    border-bottom-left-radius: 0.25rem;
    align-self: flex-start;
}

.chat-msg.user {
    background: linear-gradient(145deg, var(--indigo) 0%, var(--purple) 100%);
    color: white;
    border-bottom-right-radius: 0.25rem;
    align-self: flex-end;
}

.chat-typing-dots {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 0.5rem 0;
}

.chat-typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--indigo);
    animation: typingDot 1.2s infinite ease-in-out;
}

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

@keyframes typingDot {
    0%, 60%, 100% { transform: scale(0.7); opacity: 0.4; }
    30% { transform: scale(1); opacity: 1; }
}

.support-chat-input-row {
    padding: 0.75rem;
    border-top: 1px solid rgba(0,0,0,0.06);
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    flex-shrink: 0;
    background: #ffffff;
}

.support-chat-input-row textarea {
    flex: 1;
    background: #f4f4f5;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 1.125rem;
    color: #111;
    font-size: 0.8125rem;
    line-height: 1.5;
    padding: 0.625rem 0.875rem;
    resize: none;
    outline: none;
    font-family: inherit;
    max-height: 6rem;
    transition: border-color 0.2s;
    -webkit-appearance: none;
}

.support-chat-input-row textarea:focus {
    border-color: #6366f1;
    background: #fff;
}

.support-chat-send {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(145deg, var(--indigo) 0%, var(--purple) 100%);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s var(--ca-ease-spring);
    color: white;
    min-height: auto;
}

.support-chat-send:hover {
    transform: scale(1.1);
}

.support-chat-send:active {
    transform: scale(0.92);
}

@media (max-width: 767px) {
    #ca-support-btn,
    #ca-support-chat {
        display: none !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   19. MOBILE SUPPORT PAGE
   ═════════════════════════════════════════════════════════════════════════════ */
#view-support {
    display: none;
    flex-direction: column;
    background: var(--bg);
    overflow: hidden;
    color: var(--text-1);
}

#view-support.active {
    display: flex;
}

.ca-support-page-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(0.75rem, env(safe-area-inset-top)) 1rem 0.75rem;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.ca-support-back-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--indigo);
    font-size: 0.9375rem;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 0.625rem;
    min-height: auto;
    transition: opacity 0.2s;
}

.ca-support-back-btn:active {
    opacity: 0.6;
}

.ca-support-page-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.ca-support-page-avatar {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ca-support-page-avatar::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.5rem;
    height: 0.5rem;
    background: #10b981;
    border-radius: 50%;
    border: 2px solid #fff;
}

.ca-support-page-info {
    line-height: 1.2;
}

.ca-support-page-name {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-1);
}

.ca-support-page-status {
    font-size: 0.6875rem;
    color: var(--teal);
}

.ca-support-page-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    scroll-behavior: smooth;
}

.ca-support-chips-row {
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(0,0,0,0.06);
    background: #fff;
    transition: opacity 0.4s ease, max-height 0.5s ease;
    max-height: 200px;
    overflow: hidden;
}

.ca-support-chips-row.hidden-chips {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    border: none;
    padding: 0;
}

.ca-support-chips-label {
    font-size: 0.625rem;
    font-weight: 700;
    color: #a1a1aa;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

.ca-support-chips-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.ca-chip-btn {
    padding: 0.5rem 0.875rem;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    color: #374151;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    min-height: auto;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.ca-chip-btn:hover {
    border-color: #6366f1;
    color: #6366f1;
    background: rgba(99,102,241,0.04);
}

.ca-chip-btn:active {
    transform: scale(0.96);
    background: rgba(99,102,241,0.08);
}

/* Auto-response bot message — animated typewriter style */
.ca-auto-response {
    font-style: italic;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.ca-support-page-input-bar {
    flex-shrink: 0;
    padding: 0.625rem 0.875rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px);
    border-top: 1px solid var(--border);
}

.ca-support-page-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.ca-support-page-input-wrap textarea {
    flex: 1;
    background: var(--bg-2);
    border: 1px solid var(--border-md);
    border-radius: 1.25rem;
    color: var(--text-1);
    font-size: 0.9375rem;
    line-height: 1.5;
    padding: 0.625rem 1rem;
    resize: none;
    outline: none;
    font-family: inherit;
    max-height: 6rem;
    -webkit-appearance: none;
    transition: border-color 0.2s;
}

.ca-support-page-input-wrap textarea:focus {
    border-color: var(--indigo-border);
}

.ca-support-page-send {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(145deg, var(--indigo) 0%, var(--purple) 100%);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 900;
    transition: transform 0.15s, background 0.2s;
    min-height: auto;
}

.ca-support-page-send:active {
    transform: scale(0.9);
}

.ca-support-page-disclaimer {
    margin: 0.375rem 0 0;
    font-size: 0.625rem;
    color: var(--text-5);
    text-align: center;
}

@media (min-width: 768px) {
    #view-support {
        display: none !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   20. HISTORY COMPONENTS
   ═════════════════════════════════════════════════════════════════════════════ */
.history-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.history-sheet-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.history-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 91;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid var(--border-md);
    border-radius: 1.5rem 1.5rem 0 0;
    transform: translateY(100%);
    transition: transform 0.5s var(--ca-ease-spring);
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
}

.history-sheet.open {
    transform: translateY(0);
}

.history-sheet-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

.history-sheet-handle {
    width: 2.5rem;
    height: 0.25rem;
    background: var(--bg-4);
    border-radius: 9999px;
    position: absolute;
    top: 0.625rem;
    left: 50%;
    transform: translateX(-50%);
}

.history-sheet-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.history-sheet-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.history-sheet-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-4);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: auto;
}

.history-sheet-btn:hover {
    background: var(--bg-3);
    color: var(--text-1);
}

#history-list,
#history-list-mobile {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

.hist-date-label {
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-5);
    padding: 0.5rem 0.5rem 0.25rem;
    margin-top: 0.5rem;
}

.hist-item {
    padding: 0.625rem 0.75rem;
    border-radius: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    margin-bottom: 0.25rem;
}

.hist-item:hover {
    background: var(--bg-2);
    border-color: var(--border);
}

.hist-item-text {
    font-size: 0.75rem;
    color: var(--text-2);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 500;
}

.hist-item-time {
    font-size: 0.625rem;
    color: var(--text-5);
    margin-top: 0.25rem;
    font-weight: 600;
}

/* ═════════════════════════════════════════════════════════════════════════════
   21. FOOTER
   ═════════════════════════════════════════════════════════════════════════════ */
.ca-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    font-size: 0.6875rem;
    color: var(--text-5);
    flex-wrap: wrap;
}

.ca-footer-link {
    color: var(--text-5);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.6875rem;
    font-family: inherit;
    transition: color 0.2s;
    padding: 0;
    min-height: auto;
}

.ca-footer-link:hover {
    color: var(--text-2);
}

/* ═════════════════════════════════════════════════════════════════════════════
   22. MOBILE RESPONSIVE
   ═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    html, body {
        font-size: 15px;
    }
    
    .ambient-orb {
        opacity: 0.28;
        filter: blur(60px);
    }
    
    .ca-nav-mobile {
        z-index: 60;
    }
    
    .ca-nav-mobile nav {
        border-radius: 9999px !important;
    }
    
    #view-home > div:first-child {
        padding-top: max(5rem, calc(4rem + env(safe-area-inset-top))) !important;
        min-height: 100svh;
    }
    
    #view-home h1 {
        font-size: 2.25rem !important;
        line-height: 1.05 !important;
    }
    
    /* FIX: Do NOT apply padding-top to the flex wrapper on mobile.
     * Nav clearance is handled by #single-result-container padding-top instead.
     * Padding here steals height from flex children and pushes the prompt bar off-screen. */
    #view-generate > div.relative {
        padding-top: 0 !important;
    }
    
    .ca-prompt-bar {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
    
    .gen-prompt-card {
        border-radius: 1.25rem !important;
    }
    
    #single-result-container {
        padding-bottom: 13rem !important;
    }
    
    #view-replicate > div:first-child {
        padding-top: max(5rem, calc(4rem + env(safe-area-inset-top))) !important;
    }
    
    #view-plans > div:first-child {
        padding-top: max(5rem, calc(4rem + env(safe-area-inset-top))) !important;
    }
    
    #view-account > div:first-child {
        padding-top: max(5rem, calc(4rem + env(safe-area-inset-top))) !important;
    }
    
    /* Mobile generate layout */
    .gen-sidebar,
    #gen-sidebar {
        display: none !important;
    }

    /* Hide duplicate inline footer row inside prompt bar (using ca-gen-mobile-footer instead) */
    .ca-prompt-bar .flex.justify-center.gap-4.pt-2.pb-1 {
        display: none !important;
    }

    /* ────────────────────────────────────────────────────────
       MOBILE GENERATE — BULLETPROOF FLEX COLUMN LAYOUT
       The entire generate view is a strict flex column so the
       prompt bar is ALWAYS pinned to the bottom without using
       position:absolute (which can be clipped by overflow:hidden
       parent containers on WebKit).
    ──────────────────────────────────────────────────────── */

    /* 1. Root view: full height flex column, no overflow.
     *    --ca-viewport-height = visualViewport.height (set by JS on every
     *    keyboard open/close). Using it here means the entire flex column
     *    instantly shrinks when the iOS keyboard appears, which snaps the
     *    prompt bar flush above the keyboard with zero animation and zero gap. */
    #view-generate {
        display: flex !important;
        flex-direction: column !important;
        height: var(--ca-viewport-height, 100svh) !important;
        max-height: var(--ca-viewport-height, 100svh) !important;
        overflow: hidden !important;
        transition: none !important;
        animation: none !important;
    }

    /* 2. Inner flex wrapper: fill remaining space, column */
    #view-generate > .relative.z-10 {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding-top: 0 !important;
    }

    /* 3. Main area: fill the wrapper, column */
    #view-generate main {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding-top: 0 !important;
    }

    /* 4. Result container: scrollable flex-grow region
     *    flex: 1 1 0 (NOT auto!) is critical — "0" lets it shrink
     *    below its content size so the prompt bar is never pushed out.
     *    padding-top clears the fixed nav bar + safe-area notch. */
    #single-result-container {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        /* Top clearance: nav pill (~58px) + safe-area + breathing room */
        padding-top: max(4.5rem, calc(3.5rem + env(safe-area-inset-top))) !important;
        padding-bottom: 1.5rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        align-items: flex-start !important;
        justify-content: center !important;
        /* GPU compositing for silky scroll */
        will-change: scroll-position;
        transform: translateZ(0);
    }

    /* 5. Prompt bar: always visible flex footer, never absolute on mobile.
     *    Clearing left/right/bottom ensures no absolute-position ghost values
     *    bleed through from the base rule. */
    .ca-prompt-bar {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        background: var(--bg) !important;
        padding-top: 0.5rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-bottom: max(0.625rem, env(safe-area-inset-bottom)) !important;
        z-index: 30;
        /* Subtle top shadow to visually separate from results */
        box-shadow: 0 -1px 0 var(--border);
    }
    
    .sidebar-model-row {
        /* Fixed pill outer container — like iOS camera options */
        /* Use clip-path instead of overflow:hidden so touch events propagate */
        display: block !important;
        overflow: visible !important;
        border-radius: 9999px !important;
        background: rgba(255, 252, 248, 0.96) !important;
        border: 1px solid rgba(0, 0, 0, 0.09) !important;
        box-shadow: 0 2px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.95) !important;
        backdrop-filter: blur(24px) saturate(1.8) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
        max-width: calc(100% - 2rem) !important;
        margin: 0 auto 0.5rem !important;
        padding: 0 !important;
        position: relative !important;
        /* Clip visually without clipping scroll events */
        clip-path: inset(0 round 9999px) !important;
        -webkit-clip-path: inset(0 round 9999px) !important;
    }
    
    /* Fade-out masks on both edges to hint scrollability */
    .sidebar-model-row::before,
    .sidebar-model-row::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1.25rem;
        z-index: 5;
        pointer-events: none;
    }
    .sidebar-model-row::before {
        left: 0;
        background: linear-gradient(to right, rgba(255,252,248,0.90), transparent);
        border-radius: 9999px 0 0 9999px;
    }
    .sidebar-model-row::after {
        right: 0;
        background: linear-gradient(to left, rgba(255,252,248,0.90), transparent);
        border-radius: 0 9999px 9999px 0;
    }
    
    .sidebar-model-row .gen-model-tabs {
        /* iOS-style smooth momentum scroll inside the pill */
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.25rem !important;
        padding: 0.25rem 1rem !important;
        width: 100% !important;
        min-width: 0 !important;
        /* Allow native touch-scroll without conflicts */
        touch-action: pan-x !important;
        overscroll-behavior-x: contain !important;
        /* Clear inherited glass styling */
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        cursor: grab !important;
    }
    
    .sidebar-model-row .gen-model-tabs:active {
        cursor: grabbing !important;
    }
    
    .sidebar-model-row .gen-model-tabs::-webkit-scrollbar {
        display: none !important;
    }
    
    .sidebar-model-row::-webkit-scrollbar {
        display: none;
    }
    
    .gen-model-tab,
    .gen-aspect-tab,
    .gen-res-tab {
        padding: 0.375rem 0.625rem !important;
        font-size: 0.625rem !important;
    }
    
    #gen-prompt {
        height: 2.5rem !important;
        min-height: 2.5rem !important;
        max-height: 4rem !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 0.45rem 0.875rem !important; /* vertically centers one line of text */
        overflow-y: hidden !important;
    }
    
    #gen-submit-btn {
        padding: 0.5rem 0.875rem !important;
        font-size: 0.6875rem !important;
        min-height: 2.25rem !important;
    }
    
    .ca-gen-mobile-footer {
        display: flex !important;
        justify-content: center;
        gap: 0.75rem;
        padding: 0.35rem 0 0.1rem;
        font-size: 0.625rem;
        color: var(--text-5);
    }
    
    .ca-gen-mobile-footer button {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 0.625rem;
        color: var(--text-5);
        font-family: inherit;
        min-height: auto;
        padding: 0;
        transition: color 0.2s;
    }
    
    .ca-gen-mobile-footer button:hover {
        color: var(--text-2);
    }
    
    /* ── Result image styling now handled in unified block above ── */
}

@media (min-width: 768px) {
    .ca-gen-mobile-footer {
        display: none !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   23. DRAG & DROP
   ═════════════════════════════════════════════════════════════════════════════ */
.drag-over {
    border-color: var(--indigo) !important;
    background: var(--indigo-bg) !important;
    transform: scale(1.02) !important;
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.2) !important;
}

/* ═════════════════════════════════════════════════════════════════════════════
   24. PAYPAL BUTTONS
   ═════════════════════════════════════════════════════════════════════════════ */
.ca-paypal-btn iframe {
    border-radius: 0.875rem !important;
    overflow: hidden;
}

.paypal-login-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border-radius: 0.875rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--text-4);
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 2.75rem;
}

.paypal-login-prompt:hover {
    background: var(--bg-3);
    color: var(--text-1);
}

/* ═════════════════════════════════════════════════════════════════════════════
   25. SELECTION STYLES
   ═════════════════════════════════════════════════════════════════════════════ */
::selection {
    background: rgba(99, 102, 241, 0.2);
    color: var(--text-1);
}

::-moz-selection {
    background: rgba(99, 102, 241, 0.2);
    color: var(--text-1);
}

/* ═════════════════════════════════════════════════════════════════════════════
   26. REDUCED MOTION
   ═════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .ambient-orb {
        animation: none;
    }
    
    #ca-support-btn {
        animation: none;
    }
}

/* ═════════════════════════════════════════════════════════════════════════════
   27. PERFORMANCE OPTIMIZATIONS
   ═════════════════════════════════════════════════════════════════════════════ */
.ambient-bg {
    contain: strict;
    will-change: auto;
}

.ambient-orb {
    will-change: transform;
}

.view-section {
    contain: layout style;
}

.glass-panel,
.glass-nav {
    will-change: backdrop-filter;
}

.ca-nav-desktop,
.ca-nav-mobile {
    contain: layout;
}

.btn-spring {
    contain: layout;
}

.modal-sheet {
    contain: layout style;
}

/* ─── MOBILE NAV PILL FIX — credits pill + avatar ─── */
/* Ensure the pill stays contained and avatar fits properly */
@media (max-width: 767px) {
    .ca-nav-mobile nav {
        overflow: visible !important;
        gap: 2px !important;
    }
    /* Credits pill: constrain properly */
    #mob-credit-pill {
        display: none; /* shown by JS */
        align-items: center !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
        padding: 4px 9px 4px 7px !important;
        border-radius: 9999px !important;
        background: rgba(201,106,0,0.12) !important;
        border: 1px solid rgba(201,106,0,0.28) !important;
        min-height: 28px !important;
        max-height: 32px !important;
        text-decoration: none !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
        max-width: 80px !important;
        overflow: hidden !important;
        vertical-align: middle !important;
    }
    #mob-credit-pill .credit-dot {
        width: 6px !important;
        height: 6px !important;
        min-width: 6px !important;
        flex-shrink: 0 !important;
    }
    #mob-credit-text {
        font-size: 9px !important;
        font-weight: 800 !important;
        color: #c96a00 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 52px !important;
        display: inline-block !important;
        vertical-align: middle !important;
        line-height: 1.2 !important;
    }
    /* Avatar button: proper sizing inside pill */
    #nav-profile-btn-m {
        display: none; /* shown by JS */
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        position: relative !important;
    }
    #nav-profile-btn-m > div {
        width: 28px !important;
        height: 28px !important;
        position: relative !important;
    }
}

/* ══ 1. DESIGN TOKEN OVERRIDES — Apple System Palette ══ */
:root {
    --bg:            #ffffff;
    --bg-2:          #f2f2f7;
    --bg-3:          #e5e5ea;
    --bg-4:          #d1d1d6;
    --surface:       rgba(255,255,255,0.92);
    --surface-2:     rgba(242,242,247,0.88);

    --blue:          #007AFF;
    --blue-lt:       #409cff;
    --blue-dk:       #0062cc;
    --blue-bg:       rgba(0,122,255,0.08);
    --blue-border:   rgba(0,122,255,0.22);

    --indigo:        #5856D6;
    --indigo-light:  #7674de;
    --indigo-dark:   #4644b8;
    --indigo-bg:     rgba(88,86,214,0.08);
    --indigo-border: rgba(88,86,214,0.22);

    --teal:          #32ADE6;
    --teal-light:    #5bbef0;
    --teal-dark:     #1a93cc;
    --teal-bg:       rgba(50,173,230,0.08);
    --teal-border:   rgba(50,173,230,0.22);

    --purple:        #AF52DE;
    --purple-light:  #c57ef0;
    --purple-dark:   #9036c4;
    --purple-bg:     rgba(175,82,222,0.08);
    --purple-border: rgba(175,82,222,0.22);

    --green:         #34C759;
    --green-lt:      #5dd27b;
    --green-bg:      rgba(52,199,89,0.08);
    --green-border:  rgba(52,199,89,0.22);

    --pink:          #FF2D55;
    --pink-bg:       rgba(255,45,85,0.08);
    --pink-border:   rgba(255,45,85,0.22);

    --orange:        #FF9500;
    --orange-light:  #ffaa33;
    --orange-dark:   #d97706;
    --orange-bg:     rgba(255,149,0,0.08);
    --orange-border: rgba(255,149,0,0.22);

    --text-1:        #1c1c1e;
    --text-2:        #3a3a3c;
    --text-3:        #636366;
    --text-4:        #8e8e93;
    --text-5:        #aeaeb2;

    --border:        rgba(60,60,67,0.08);
    --border-md:     rgba(60,60,67,0.13);
    --border-strong: rgba(60,60,67,0.22);

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.04);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.09), 0 4px 12px rgba(0,0,0,0.05);
    --shadow-xl: 0 24px 64px rgba(0,0,0,0.11), 0 8px 20px rgba(0,0,0,0.06);
    --shadow-blue: 0 4px 24px rgba(0,122,255,0.22), 0 1px 4px rgba(0,122,255,0.14);

    --glass-bg:          rgba(255,255,255,0.72);
    --glass-bg-strong:   rgba(255,255,255,0.92);
    --glass-border:      rgba(60,60,67,0.08);
    --glass-shadow:      0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.92);
    --glass-inner-glow:  inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(0,0,0,0.02);
}

/* ══ 2. BODY / PAGE BACKGROUNDS ══ */
html { background:var(--bg-2) !important; }
body, .ca-body { background:var(--bg-2) !important; color:var(--text-1) !important; }
.view-section { background:var(--bg-2) !important; }
#view-home { background:transparent !important; }
#view-generate { background:#ffffff !important; }
#view-replicate { background:var(--bg-2) !important; }
#view-plans { background:var(--bg-2) !important; }
#view-account { background:var(--bg-2) !important; }

/* ══ 3. AMBIENT ORBS — Apple blue/indigo/teal (not new-code purple/violet) ══ */
.ambient-bg { background:var(--bg) !important; }
.orb-1 { background:radial-gradient(circle,rgba(100,180,255,0.55) 0%,rgba(0,122,255,0.18) 55%,transparent 100%) !important; opacity:0.38 !important; }
.orb-2 { background:radial-gradient(circle,rgba(200,190,255,0.50) 0%,rgba(88,86,214,0.14) 55%,transparent 100%) !important; opacity:0.28 !important; }
.orb-3 { background:radial-gradient(circle,rgba(160,235,255,0.40) 0%,rgba(50,173,230,0.10) 55%,transparent 100%) !important; opacity:0.20 !important; }

/* ══ 4. HEADER — thin black border ══ */
header, .glass-nav, nav.glass-nav {
    background:rgba(255,255,255,0.92) !important;
    border-bottom:1px solid rgba(0,0,0,0.10) !important;
    backdrop-filter:blur(60px) saturate(2.0) brightness(1.01) !important;
    -webkit-backdrop-filter:blur(60px) saturate(2.0) brightness(1.01) !important;
    box-shadow:0 1px 0 rgba(0,0,0,0.05), var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.96) !important;
}
/* Nav active link — Apple blue */
.nav-link.active { background:var(--blue-bg) !important; color:var(--blue) !important; box-shadow:inset 0 0 0 1px var(--blue-border) !important; }
/* Brand gradient — blue to indigo */
.ca-brand-name {
    background:linear-gradient(135deg,#007AFF 0%,#5856D6 50%,#007AFF 100%) !important;
    -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important;
}

/* ══ 5. HOME PAGE H1 — dark gradient text (not white) ══ */
#view-home h1,
#view-home h1.bg-clip-text,
h1.bg-gradient-to-b {
    background:linear-gradient(150deg,#1c1c1e 0%,#636366 100%) !important;
    -webkit-background-clip:text !important; background-clip:text !important;
    color:transparent !important;
}
/* Home greeting text */
#home-greeting, #home-greeting-text { color:var(--text-3) !important; }
/* Status badge */
.ca-status-badge { background:var(--bg-2) !important; border-color:var(--border) !important; color:var(--text-3) !important; }

/* ══ 6. HOME PROMPT BOX — border + Apple colors ══ */
.home-prompt-box {
    background:rgba(255,255,255,0.96) !important;
    border:1.5px solid rgba(0,0,0,0.12) !important;
    border-radius:1.75rem !important;
}
.home-prompt-box:focus-within {
    border-color:rgba(0,122,255,0.30) !important;
    box-shadow:0 0 0 4px var(--blue-bg), var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.95) !important;
}
.home-prompt-box textarea { color:var(--text-1) !important; }
/* Home nav pills */
.home-nav-pill { color:var(--text-3) !important; border-color:var(--border) !important; background:var(--glass-bg) !important; }
.home-nav-pill:hover { color:var(--text-1) !important; border-color:var(--border-md) !important; background:var(--glass-bg-strong) !important; }
/* Home submit button */
/* home-submit-btn is always green */
/* Home model select */
#home-model { background:var(--bg-2) !important; border-color:var(--border-md) !important; color:var(--text-2) !important; }

/* ══ 7. HOME CARDS — Apple glass, old icon badge colors ══ */
.ca-card-generate, .ca-card-replicate {
    background:rgba(255,255,255,0.90) !important;
    backdrop-filter:blur(40px) saturate(1.95) brightness(1.02) !important;
    -webkit-backdrop-filter:blur(40px) saturate(1.95) brightness(1.02) !important;
    border:1px solid rgba(0,0,0,0.10) !important;
    border-radius:1.75rem !important;
    box-shadow:0 2px 12px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.95) !important;
    -webkit-mask-image:-webkit-radial-gradient(white, black);
    transform:translateZ(0);
}
.ca-card-generate:hover, .ca-card-replicate:hover {
    box-shadow:0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.98) !important;
    transform:translateY(-2px) translateZ(0) !important;
    border-color:rgba(0,0,0,0.14) !important;
}
/* Remove gradient overlays on cards */
.ca-card-generate .absolute.inset-0.bg-gradient-to-t,
.ca-card-replicate .absolute.inset-0.bg-gradient-to-t { opacity:0 !important; background:none !important; }
/* Icon badges — blue for gen, indigo for rep */
.ca-card-generate .w-10.h-10 { background:var(--blue-bg) !important; border:1px solid var(--blue-border) !important; box-shadow:0 0 14px rgba(0,122,255,0.14) !important; }
.ca-card-replicate .w-10.h-10 { background:var(--indigo-bg) !important; border:1px solid var(--indigo-border) !important; box-shadow:0 0 14px rgba(88,86,214,0.12) !important; }
.ca-card-canvas { background:transparent !important; }
.ca-card-title { color:var(--text-1) !important; text-shadow:none !important; }
.ca-card-desc { color:var(--text-3) !important; text-shadow:none !important; }

/* ══ 8. GENERATE PAGE — sidebar + bg + prompt box ══ */
#view-generate { background:#ffffff !important; overflow:hidden; }
/* Sidebar — override inline styles */
#gen-sidebar,
.gen-sidebar {
    background:rgba(255,255,255,0.97) !important;
    border-right:1px solid rgba(0,0,0,0.08) !important;
    backdrop-filter:blur(40px) saturate(1.9) !important;
    -webkit-backdrop-filter:blur(40px) saturate(1.9) !important;
}
/* Sidebar header — enough top padding so search isn't under nav bar */
.gen-sidebar-header {
    padding-top:max(5.2rem, calc(4.4rem + env(safe-area-inset-top))) !important;
    border-bottom:1px solid var(--border) !important;
}
/* Search input — light Apple style */
#hist-search {
    background:var(--bg-2) !important;
    border-color:var(--border-md) !important;
    color:var(--text-2) !important;
}
#hist-search:focus { border-color:var(--blue-border) !important; }
.gen-sidebar-nav-btn { color:var(--text-3) !important; }
.gen-sidebar-nav-btn:hover { background:rgba(0,0,0,0.04) !important; color:var(--text-1) !important; }
/* Generate prompt card border */
.gen-prompt-card {
    background:rgba(255,255,255,0.97) !important;
    border:1.5px solid rgba(0,0,0,0.11) !important;
    border-radius:1.5rem !important;
}
.gen-prompt-card:focus-within {
    border-color:rgba(0,122,255,0.28) !important;
    box-shadow:0 0 0 4px var(--blue-bg), var(--shadow-lg), var(--glass-inner-glow) !important;
}
/* Generate submit button — blue-to-indigo gradient */
#gen-submit-btn {
    background:linear-gradient(135deg,#007AFF,#5856D6) !important;
    border:none !important;
    color:white !important;
    box-shadow:0 3px 16px rgba(0,122,255,0.38) !important;
}
#gen-submit-btn:hover { background:linear-gradient(135deg,#0062cc,#4644b8) !important; box-shadow:0 6px 24px rgba(0,122,255,0.50) !important; }
/* Generate page tabs — desktop only (mobile: outer row is the pill) */
@media (min-width: 768px) {
  .gen-model-tabs { background:rgba(255,255,255,0.97) !important; border:1px solid var(--border) !important; }
}
.gen-model-tab.active,.gen-aspect-tab.active,.gen-res-tab.active { background:rgba(0,0,0,0.06) !important; color:var(--text-1) !important; }

/* ══ 9. REPLICATE PAGE — card style, buttons, atomic dots ══ */
#view-replicate { background:var(--bg-2) !important; }
/* White glass cards */
.rep-card {
    background:rgba(255,255,255,0.92) !important;
    border:1px solid var(--border) !important;
    box-shadow:var(--shadow-md) !important;
}
.rep-card:hover { border-color:var(--border-md) !important; box-shadow:var(--shadow-xl) !important; }
/* Image wrap with dots canvas overlay */
.rep-card-image-wrap { position:relative; aspect-ratio:1; background:var(--bg-2); overflow:hidden; }
.atomic-dots-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:10; pointer-events:none; }
.atomic-reveal-img { width:100%; height:100%; object-fit:cover; }
/* Copy button — Apple blue */
.rep-card-btn-copy { background:var(--blue-bg) !important; color:var(--blue) !important; border:1px solid var(--blue-border) !important; }
.rep-card-btn-copy:hover { background:var(--blue) !important; color:white !important; }
/* Use button — Apple teal */
.rep-card-btn-use { background:var(--teal-bg) !important; color:var(--teal-dark) !important; border:1px solid var(--teal-border) !important; }
.rep-card-btn-use:hover { background:var(--teal) !important; color:white !important; }
/* Drop zone — only visible when empty */
#rep-empty { display:none !important; }
/* Deconstruct All button */
#rep-decon-btn, [onclick*="deconstructAll"], [onclick*="processReplicate"] {
    background:linear-gradient(135deg,var(--blue),var(--indigo)) !important;
    color:white !important; border:none !important;
}

/* ══ 10. CREDITS / PRICING PAGE ══ */
#view-plans { background: var(--bg-2) !important; }

/* Plans page particle canvas (same canvas, shown on plans too) */
body.plans-active #particle-canvas {
    opacity: 0.7 !important;
    transition: opacity 0.5s ease;
}

/* Pricing card — clean white card matching reference */
/* ── Pricing cards — glass bg, old-theme hover & animation ── */
.pricing-card {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px) saturate(1.9);
    -webkit-backdrop-filter: blur(40px) saturate(1.9);
    border: 1.5px solid rgba(99,102,241,0.30);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.06), var(--glass-shadow), var(--glass-inner-glow);
    border-radius: 1.5rem;
    transition: all 0.4s var(--ca-ease-spring);
    overflow: visible;
    position: relative;
}

.pricing-card:hover {
    transform: translateY(-4px);
}

/* Creator (popular) card — keep indigo base, emerald on hover */
.pricing-card--creator {
    border-color: rgba(99,102,241,0.38) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.08), var(--glass-shadow-lg) !important;
    padding-top: 2rem !important;
}

/* ── Per-plan vivid colored border + glow on hover (screenshot style) ── */
.pricing-card--starter:hover {
    border-color: rgba(217,119,6,0.65) !important;
    box-shadow:
        0 0 0 1px rgba(217,119,6,0.35),
        0 0 24px rgba(217,119,6,0.18),
        var(--glass-shadow-lg) !important;
    outline: 1.5px solid rgba(217,119,6,0.22);
    outline-offset: 2px;
}
.pricing-card--creator:hover {
    border-color: rgba(16,185,129,0.65) !important;
    box-shadow:
        0 0 0 1px rgba(16,185,129,0.35),
        0 0 24px rgba(16,185,129,0.18),
        var(--glass-shadow-lg) !important;
    outline: 1.5px solid rgba(16,185,129,0.22);
    outline-offset: 2px;
}
.pricing-card--studio:hover {
    border-color: rgba(168,85,247,0.65) !important;
    box-shadow:
        0 0 0 1px rgba(168,85,247,0.35),
        0 0 24px rgba(168,85,247,0.18),
        var(--glass-shadow-lg) !important;
    outline: 1.5px solid rgba(168,85,247,0.22);
    outline-offset: 2px;
}
.pricing-card--enterprise:hover {
    border-color: rgba(234,179,8,0.65) !important;
    box-shadow:
        0 0 0 1px rgba(234,179,8,0.35),
        0 0 24px rgba(234,179,8,0.18),
        var(--glass-shadow-lg) !important;
    outline: 1.5px solid rgba(234,179,8,0.22);
    outline-offset: 2px;
}

.pricing-badge { background: var(--orange-bg) !important; border-color: var(--orange-border) !important; color: var(--orange-dark) !important; }

/* ── Credit Pill Badge — bigger, wider, more readable on all screens ── */
.ca-credit-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 20px;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 700;
    border: 1px solid #d1d5db;
    background: rgba(245,245,244,0.5);
    white-space: nowrap;
    min-width: 200px;
    justify-content: center;
}
@media (max-width: 640px) {
    .ca-credit-pill {
        font-size: 0.9375rem;
        padding: 9px 22px;
        min-width: 180px;
        gap: 8px;
    }
}
.ca-credit-pill svg { opacity: 1; }
.ca-pill-credits {
    font-weight: 700;
}
.ca-pill-bonus {
    font-weight: 500;
    margin-left: 2px;
}

/* Starter pill — amber/emerald (from old theme) */
.ca-credit-pill.starter-pill { border-color: rgba(217,119,6,0.20); background: rgba(217,119,6,0.10); }
.ca-credit-pill.starter-pill, .ca-credit-pill.starter-pill svg { color: #b45309; }
.ca-credit-pill.starter-pill .ca-pill-credits { color: #b45309; }
.ca-credit-pill.starter-pill .ca-pill-bonus { color: #059669; }

/* Creator pill — amber/emerald (from old theme) */
.ca-credit-pill.creator-pill { border-color: rgba(16,185,129,0.30); background: rgba(217,119,6,0.15); }
.ca-credit-pill.creator-pill, .ca-credit-pill.creator-pill svg { color: #b45309; }
.ca-credit-pill.creator-pill .ca-pill-credits { color: #b45309; }
.ca-credit-pill.creator-pill .ca-pill-bonus { color: #059669; }

/* Studio pill — purple (from old theme) */
.ca-credit-pill.studio-pill { border-color: rgba(168,85,247,0.20); background: rgba(168,85,247,0.10); }
.ca-credit-pill.studio-pill, .ca-credit-pill.studio-pill svg { color: #c084fc; }
.ca-credit-pill.studio-pill .ca-pill-credits { color: #c084fc; }
.ca-credit-pill.studio-pill .ca-pill-bonus { color: #9333ea; }

/* Max pill — yellow (from old theme) */
.ca-credit-pill.enterprise-pill { border-color: rgba(234,179,8,0.20); background: rgba(234,179,8,0.10); }
.ca-credit-pill.enterprise-pill, .ca-credit-pill.enterprise-pill svg { color: #facc15; }
.ca-credit-pill.enterprise-pill .ca-pill-credits { color: #facc15; }
.ca-credit-pill.enterprise-pill .ca-pill-bonus { color: #ca8a04; }

/* ── Feature list — left-aligned like reference ── */
.ca-feat-list {
    width: 100%;
    text-align: left;
    padding-left: 0.5rem;
}

/* ── Check icon colors per plan ── */
.ca-check--starter  { color: #b45309 !important; }
.ca-check--creator  { color: #b45309 !important; }
.ca-check--studio   { color: #c084fc !important; }
.ca-check--enterprise { color: #facc15 !important; }

/* Plans feature items */
.plans-feat-item {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #57534e !important;
    letter-spacing: -0.01em;
}

/* Custom PayPal button wrapper */
.ca-paypal-btn {
    width: 100%;
    margin-top: 4px;
}

/* Wrap the PayPal iframe to match our design */
.ca-paypal-btn > div,
.ca-paypal-btn iframe,
.ca-paypal-btn [data-paypal-button] {
    border-radius: 14px !important;
    overflow: hidden !important;
}

/* Custom PayPal button styling overlay */
.ca-paypal-btn-custom {
    position: relative;
    width: 100%;
    height: 48px;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.01em;
    border: 1px solid rgba(255,255,255,0.25);
    background: linear-gradient(135deg,
        rgba(16,185,129,0.9) 0%,
        rgba(6,182,212,0.85) 50%,
        rgba(124,58,237,0.8) 100%);
    background-size: 200% 200%;
    animation: paypalBtnFlow 4s ease infinite;
    box-shadow: 0 4px 20px rgba(16,185,129,0.30), 0 1px 0 rgba(255,255,255,0.15) inset;
    transition: transform 0.3s var(--ca-ease-spring), filter 0.2s, box-shadow 0.3s;
    min-height: 48px;
}

.ca-paypal-btn-custom:hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.08);
    box-shadow: 0 8px 30px rgba(16,185,129,0.40);
}

.ca-paypal-btn-custom:active { transform: scale(0.97); }

@keyframes paypalBtnFlow {
    0%,100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.ca-paypal-btn-custom svg {
    width: 18px;
    height: 18px;
    opacity: 0.92;
}

/* ══ 11. TOAST — Apple blue ══ */
.ca-toast { background:rgba(255,255,255,0.97) !important; color:var(--blue) !important; border-color:var(--blue-border) !important; }
.ca-toast.error { color:var(--pink) !important; border-color:var(--pink-border) !important; }
.ca-toast.success { color:var(--green) !important; border-color:var(--green-border) !important; }

/* ══ 12. SUPPORT CHAT — Apple blue ══ */
#ca-support-btn { background:linear-gradient(135deg,#007AFF,#5856D6) !important; }
.support-chat-send { background:linear-gradient(135deg,#007AFF,#5856D6) !important; }
.chat-msg.admin { background:var(--blue-bg) !important; border-color:var(--blue-border) !important; }
.support-chat-avatar, .ca-support-page-avatar {
    background:linear-gradient(135deg,#007AFF,#5856D6) !important;
}

/* ══ 13. MOBILE NAV ══ */
.ca-nav-mobile nav {
    background:rgba(255,255,255,0.92) !important;
    border:1px solid rgba(0,0,0,0.08) !important;
    backdrop-filter:blur(40px) saturate(1.8) !important;
    -webkit-backdrop-filter:blur(40px) saturate(1.8) !important;
    box-shadow:0 2px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.95) !important;
}
.mobile-nav-icon.active { color:var(--blue) !important; background:var(--blue-bg) !important; }

/* ══ MOBILE SELECTOR SWIPE FIX — iOS & Android horizontal scroll ══ */
@media (max-width: 767px) {
    .sidebar-model-row {
        /* Horizontal scroll is handled by the inner .gen-model-tabs.
           The outer row just needs to be the clipped pill container.
           Do NOT set overflow-x here — it conflicts with clip-path. */
        scrollbar-width: none !important;
        touch-action: pan-x !important;
    }
    .sidebar-model-row::-webkit-scrollbar {
        display: none !important;
        height: 0 !important;
    }
    .gen-model-tabs {
        /* Ensure tabs don't wrap — make the row scrollable */
        width: max-content !important;
        min-width: 100% !important;
        touch-action: pan-x !important;
        display: inline-flex !important;
    }
    /* Ensure each tab button is tappable and not truncated */
    .gen-model-tab, .gen-aspect-tab, .gen-res-tab {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        touch-action: manipulation !important;
    }
}

/* ══ 14. ADMIN ANIMATION CLASSES (dot color tokens) ══ */
:root {
    --ca-dot-r: 255; --ca-dot-g: 255; --ca-dot-b: 255;
}
body.ca-dots-green   { --ca-dot-r:16;  --ca-dot-g:185; --ca-dot-b:129; }
body.ca-dots-cyan    { --ca-dot-r:6;   --ca-dot-g:182; --ca-dot-b:212; }
body.ca-dots-purple  { --ca-dot-r:168; --ca-dot-g:85;  --ca-dot-b:247; }
body.ca-dots-glass   { --ca-dot-r:200; --ca-dot-g:220; --ca-dot-b:255; }

/* ══ 15. TAILWIND OVERRIDES — Apple palette mapping ══ */
.text-indigo-400,.text-indigo-500,.text-indigo-600 { color:var(--indigo) !important; }
.text-blue-400,.text-blue-500,.text-blue-600 { color:var(--blue) !important; }
.text-teal-400,.text-teal-500,.text-teal-600 { color:var(--teal) !important; }
.text-emerald-400,.text-emerald-500,.text-emerald-600 { color:var(--green) !important; }
.bg-indigo-500\/10,.bg-indigo-500\/20 { background:var(--indigo-bg) !important; }
.border-indigo-500\/20,.border-indigo-500\/30 { border-color:var(--indigo-border) !important; }
/* Scrollbar */
* { scrollbar-width:thin; scrollbar-color:rgba(60,60,67,0.18) transparent; }
*::-webkit-scrollbar { width:5px; height:5px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:rgba(60,60,67,0.18); border-radius:10px; }

/* ══════════════════════════════════════════════════════════════════════
   NEW FEATURES v28 — Download / Share / Expand / Glass Generate Btn
   ══════════════════════════════════════════════════════════════════════ */

/* ── Expand button (third floating action) ── */
.gen-float-btn-expand {
    background: var(--glass-bg-strong);
    color: var(--text-1);
}
.gen-float-btn-expand:hover {
    background: var(--green);
    color: white;
    transform: translateY(-2px) scale(1.05);
}

/* ── Glass Morphic Generate / Create button ── */
.gen-submit-glass {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.375rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.01em;
    border: 1px solid rgba(255,255,255,0.28);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    background: linear-gradient(135deg,
        rgba(201,106,0,0.85) 0%,
        rgba(16,185,129,0.75) 50%,
        rgba(99,102,241,0.70) 100%);
    background-size: 200% 200%;
    animation: genBtnGradient 4s ease infinite;
    box-shadow:
        0 4px 20px rgba(201,106,0,0.30),
        0 1px 0 rgba(255,255,255,0.18) inset,
        0 -1px 0 rgba(0,0,0,0.12) inset;
    transition: transform 0.25s var(--ca-ease-spring), box-shadow 0.25s ease, filter 0.2s;
    min-height: 44px;
    cursor: pointer;
}
.gen-submit-glass:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow:
        0 8px 30px rgba(201,106,0,0.40),
        0 2px 0 rgba(255,255,255,0.22) inset;
    filter: brightness(1.08);
}
.gen-submit-glass:active {
    transform: scale(0.97);
    filter: brightness(0.95);
}
.gen-submit-glass:disabled {
    opacity: 0.55;
    animation: none;
    background: rgba(100,100,100,0.35);
    cursor: not-allowed;
}
.gen-submit-glass-shine {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: linear-gradient(105deg, rgba(255,255,255,0.22) 0%, transparent 60%);
    pointer-events: none;
}
@keyframes genBtnGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Cost badge inside generate button */
.gen-btn-cost-badge {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 1px 7px;
    border-radius: 6px;
    font-family: var(--font-mono, monospace);
    letter-spacing: 0.03em;
}

/* ── Home submit button — REPLACED by .home-submit-arrow above ── */
.home-submit-btn {
    display: none; /* Superseded by .home-submit-arrow */
}

/* ── Rep upload animation — smooth spread, NO repeat, position fixed ── */
@keyframes repCardSpread {
    from { opacity: 0; transform: scale(0.88) translateY(12px); filter: blur(4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

.rep-card {
    animation: repCardSpread 0.48s var(--ca-ease-spring) both;
    animation-fill-mode: forwards;
    animation-iteration-count: 1 !important; /* NEVER REPEAT */
}

/* Static positioning after animation — NO movement ever */
.rep-card.spread-done {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* Stagger delays for initial batch */
.rep-card[data-idx="0"] { animation-delay: 0.00s; }
.rep-card[data-idx="1"] { animation-delay: 0.06s; }
.rep-card[data-idx="2"] { animation-delay: 0.12s; }
.rep-card[data-idx="3"] { animation-delay: 0.18s; }
.rep-card[data-idx="4"] { animation-delay: 0.22s; }
.rep-card[data-idx="5"] { animation-delay: 0.26s; }
.rep-card[data-idx="6"] { animation-delay: 0.29s; }
.rep-card[data-idx="7"] { animation-delay: 0.32s; }

/* ── Support chat header text fix — always readable ── */
.support-chat-header .font-bold { color: #111 !important; }

/* ── Share modal hover polish ── */
.ca-share-btn:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* ── Gen atomic wrap (contains canvas + img) ── */
.gen-atomic-wrap {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    display: block;
    width: 100%;
}

/* ══ COSMIC HOME BG — z-layer management ══ */
#view-home {
    isolation: isolate;
}
#view-home > * {
    position: relative;
    z-index: 1;
}
/* Make canvas visible only when home or plans is active (JS also clears canvas for other views) */
body.home-active #particle-canvas {
    opacity: 1;
    transition: opacity 0.5s ease;
}
body.plans-active #particle-canvas {
    opacity: 0.65;
    transition: opacity 0.5s ease;
}
body:not(.home-active):not(.plans-active) #particle-canvas {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* ═════════════════════════════════════════════════════════════════════════════
   COMFYAI CLOUD v32 — APPLE-GRADE MOBILE SCROLL POLISH
   Appended last so these rules win specificity over everything above.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL MOMENTUM SCROLL ENGINE ── */
/* Every interactive scroll surface gets feather-touch physics.
   On modern iOS this pairs with the native deceleration curve (default ~0.998)
   which gives the characteristic "butter" feel of native Apple apps. */
html {
    scroll-behavior: smooth;
    /* Disable elastic bounce at the document level — we handle it per-container */
    overscroll-behavior: none;
}

/* ── 2. ALL VIEW SECTIONS ── */
/* Base smooth scroll is set globally, but we reinforce it here with
   explicit -webkit-overflow-scrolling for older WebKit versions. */
.view-section {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* Feather deceleration: no added friction beyond native */
    scroll-behavior: smooth;
}

/* ── 3. SCROLLBAR HIDE — all platforms ── */
/* Hidden scrollbars remove visual noise on touch devices and match
   the iOS native app aesthetic where scrollbars are invisible. */
.view-section,
#single-result-container,
#history-list,
#history-list-mobile,
.support-chat-messages,
.ca-support-page-messages,
.gen-model-tabs,
.sidebar-model-row {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.view-section::-webkit-scrollbar,
#single-result-container::-webkit-scrollbar,
#history-list::-webkit-scrollbar,
#history-list-mobile::-webkit-scrollbar,
.support-chat-messages::-webkit-scrollbar,
.ca-support-page-messages::-webkit-scrollbar,
.gen-model-tabs::-webkit-scrollbar,
.sidebar-model-row::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ── 4. GPU LAYER PROMOTION ── */
/* Promoting scroll containers to their own compositor layers lets
   the GPU handle repaints during scroll independently from the
   main thread. This is the single biggest source of scroll jank
   on complex pages — eliminating it gives the "glass" smoothness. */
.view-section,
#single-result-container,
.support-chat-messages,
.ca-support-page-messages,
#history-list,
#history-list-mobile {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: scroll-position;
}

/* ── 5. TOUCH-ACTION WHITELIST ── */
/* Explicitly allow pan-y on vertical scrollers — this tells the
   browser not to wait for JS gesture handlers before initiating
   scroll. pan-x for horizontal pill row. */
.view-section {
    touch-action: pan-y !important;
}
.sidebar-model-row,
.sidebar-model-row .gen-model-tabs {
    touch-action: pan-x !important;
}

/* ── 6. OVERSCROLL BOUNDARY ── */
/* contain stops bounce from propagating out of a scroll container
   to its parent (the classic "page jiggles when inner list hits end"
   bug on iOS). */
.view-section,
#single-result-container,
#history-list,
#history-list-mobile,
.support-chat-messages,
.ca-support-page-messages {
    overscroll-behavior: contain;
    overscroll-behavior-y: contain;
}

/* ── 7. MODAL SMOOTH SCROLL ── */
.modal-sheet {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.modal-sheet::-webkit-scrollbar { display: none; }

/* ── 8. MOBILE-SPECIFIC SCROLL ENHANCEMENTS ── */
@media (max-width: 767px) {
    /* Extra padding so content isn't flush against nav/safe-area */
    .view-section:not(#view-generate) {
        padding-bottom: max(5rem, calc(4rem + env(safe-area-inset-bottom)));
    }

    /* Support page messages: full-height momentum scroll */
    .ca-support-page-messages {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        scroll-behavior: smooth;
    }

    /* History bottom sheet: momentum scroll */
    .history-sheet {
        -webkit-overflow-scrolling: touch;
    }
    #history-list-mobile {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    /* Sidebar model tabs: horizontal momentum scroll */
    .sidebar-model-row .gen-model-tabs {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: none; /* no snap — free momentum */
    }
}

/* ── 9. GENERATE SIDEBAR SCROLL ── */
/* Desktop sidebar history list — smooth, no scrollbar */
#history-list {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
#history-list::-webkit-scrollbar { display: none; }

/* ── 10. RESULT CONTAINER DESKTOP ── */
/* Critical: flex:1 without min-height:0 expands to fit content and
   NEVER scrolls. Adding min-height:0 + flex basis 0 enables proper
   overflow-y:auto scrolling on desktop, same as the mobile fix. */
@media (min-width: 768px) {
    #single-result-container {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        scroll-behavior: smooth;
    }
}

/* ═══════════════════════════════════════════════════════════════
   v41 GENERATE PAGE MOBILE — DEFINITIVE FIX
   Goal: prompt textarea always visible, never pushed off-screen.
   Strategy: flex column, main area fills viewport, prompt bar is
   flex footer (position:relative, NOT absolute/fixed).
   The inline padding-top on <main> is countered here with !important.
═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* 0. Force safe-area / overflow on the view itself */
  #view-generate {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* 1. Inner z-10 wrapper: stretch to fill */
  #view-generate > .flex.h-full {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* 2. Actual <main> — zero top padding so it doesn't overflow */
  #gen-main,
  #view-generate main {
    padding-top: 0 !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* 3. Result scroll region — clears nav pill via padding-top */
  #single-result-container {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding-top: max(4.5rem, calc(3.5rem + env(safe-area-inset-top))) !important;
    padding-bottom: 3rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* 4. Prompt bar: always a static flex footer, never absolute */
  .ca-prompt-bar {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    background: var(--bg, #faf8f4) !important;
    padding-top: 0.375rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -1px 0 rgba(0,0,0,0.07) !important;
    z-index: 40 !important;
  }

  /* 5. Textarea: fixed height, no vertical resize */
  #gen-prompt {
    height: 2.5rem !important;
    min-height: 2.5rem !important;
    max-height: 3.5rem !important;
    font-size: 16px !important;
    padding: 0.5625rem 0.875rem !important; /* vertically centers one line of text */
    line-height: 1.4 !important;
    overflow-y: hidden !important;
  }

  /* 6. Model selector row — ALWAYS visible on mobile, compact */
  .sidebar-model-row {
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 0.375rem !important;
    /* Do NOT set overflow:hidden — it conflicts with clip-path pill border */
  }
  
  /* v54: inner tabs transparent — outer .sidebar-model-row is the pill */
  .sidebar-model-row .gen-model-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 4px 1rem !important;
    gap: 2px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    width: 100% !important;
  }
  .sidebar-model-row .gen-model-tabs::-webkit-scrollbar { display: none !important; }

  /* Keep each tab button readable — match desktop sizes */
  .gen-model-tab, .gen-aspect-tab, .gen-res-tab {
    font-size: 0.72rem !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    border-radius: 11px !important;
  }

  /* 7. Remove any dead space below prompt bar */
  .ca-gen-mobile-footer {
    display: none !important;
  }
  /* NOTE: Do NOT hide .flex.justify-center in prompt bar — that hides the model selector row! */
}

/* ══════════════════════════════════════════════════
   v51 FINAL OVERRIDE — Model/Aspect/Res selector
   MUST be visible on ALL screen sizes
══════════════════════════════════════════════════ */
.sidebar-model-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  visibility: visible !important;
}
@media (max-width: 767px) {
  .ca-prompt-bar .sidebar-model-row {
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 4px !important;
    /* Pill border is set in the earlier block — don't override it here */
  }
  /* v54: inner tabs transparent — outer row is the pill */
  .ca-prompt-bar .sidebar-model-row .gen-model-tabs {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 4px 1rem !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .ca-prompt-bar .sidebar-model-row .gen-model-tabs::-webkit-scrollbar {
    display: none !important;
  }
  .gen-model-tab, .gen-aspect-tab, .gen-res-tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    font-size: 0.72rem !important;
    padding: 6px 12px !important;
    border-radius: 11px !important;
  }
}

/* ══ v43 FINAL: Mobile model/AR/res selector — guaranteed visible ══ */
@media (max-width: 767px) {
  /* Visibility only — pill styling is defined in the main block above */
  .sidebar-model-row,
  .ca-prompt-bar .sidebar-model-row,
  #view-generate .sidebar-model-row {
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 5px !important;
  }
  /* v54: inner tabs transparent — outer row is the pill */
  .sidebar-model-row .gen-model-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 2px !important;
    padding: 4px 1rem !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .sidebar-model-row .gen-model-tabs::-webkit-scrollbar { display: none !important; }
}

/* ══ v43 FINAL: Mobile nav pill — avatar properly contained ══ */
@media (max-width: 767px) {
  .ca-nav-mobile nav {
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }
  #nav-profile-btn-m[style*="display:flex"],
  #nav-profile-btn-m[style*="display: flex"] {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    flex-shrink: 0 !important;
  }
  #nav-profile-btn-m > div {
    width: 28px !important;
    height: 28px !important;
  }
  #mob-credit-pill[style*="display:flex"],
  #mob-credit-pill[style*="display: flex"] {
    align-items: center !important;
    justify-content: flex-start !important;
    max-width: 78px !important;
    min-height: 26px !important;
    max-height: 30px !important;
    overflow: hidden !important;
  }
}

/* ════════════════════════════════════════
   v44 FINAL OVERRIDES
════════════════════════════════════════ */

/* ── Mobile nav links — compact, all fit inside pill ── */
.mob-nav-lnk {
    padding: 4px 6px !important;
    border-radius: 9999px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    min-height: 26px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    letter-spacing: -0.01em !important;
}

/* Avatar button — always flex, always clipped inside pill */
#nav-profile-btn-m {
    display: none;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* Credits pill — neat, no overflow */
#mob-credit-pill {
    max-width: 80px !important;
    height: 26px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

/* ── Desktop model selector — centered auto-width pill, aligned to prompt card ── */
.ca-prompt-bar .sidebar-model-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    max-width: 868px !important;
    width: calc(100% - 8px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 0 8px 0 !important;
}

.ca-prompt-bar .gen-model-tabs {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    overflow-x: visible !important;
}

/* ── Mobile model selector — match desktop pill exactly ── */
@media (max-width: 767px) {
    .ca-prompt-bar .sidebar-model-row {
        justify-content: center !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        padding: 0 6px 6px 6px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .ca-prompt-bar .sidebar-model-row::-webkit-scrollbar { display: none !important; }
    /* v54: inner tabs transparent — outer row is the pill */
    .ca-prompt-bar .gen-model-tabs {
        border-radius: 0 !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 4px 1rem !important;
        gap: 2px !important;
    }
    .gen-model-tab,
    .gen-aspect-tab,
    .gen-res-tab {
        border-radius: 11px !important;
        font-size: 0.72rem !important;
        padding: 6px 12px !important;
    }
    .gen-model-tab.active,
    .gen-aspect-tab.active,
    .gen-res-tab.active {
        border-radius: 11px !important;
    }
}

/* ── Remove ALL emoji from nav badges ── */
.sb-btn .sb-icon { /* keep icons, they're fine */ }

/* ═════════════════════════════════════════════════════════════════════════════
   v50 TAILWIND REPLACEMENT UTILITIES
   Tailwind CDN removed — all utility classes used in index.php defined here.
   Served from same origin, cached, zero forced reflow, saves ~800ms TBT.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Display ── */
.flex{display:flex!important}
.inline-flex{display:inline-flex!important}
.block{display:block!important}
.inline-block{display:inline-block!important}
.inline{display:inline!important}
.grid{display:grid!important}
.hidden{display:none!important}
.contents{display:contents!important}

/* ── Position ── */
.relative{position:relative!important}
.absolute{position:absolute!important}
.fixed{position:fixed!important}
.sticky{position:sticky!important}

/* ── Inset ── */
.inset-0{inset:0!important}
.inset-auto{inset:auto!important}
.top-0{top:0!important}
.top-2{top:.5rem!important}
.top-2\.5{top:.625rem!important}
.top-4{top:1rem!important}
.bottom-0{bottom:0!important}
.left-0{left:0!important}
.left-1\/2{left:50%!important}
.right-0{right:0!important}
.right-4{right:1rem!important}

/* ── Z-index ── */
.z-0{z-index:0!important}
.z-10{z-index:10!important}
.z-20{z-index:20!important}
.z-50{z-index:50!important}
.z-80{z-index:80!important}

/* ── Flex ── */
.flex-col{flex-direction:column!important}
.flex-row{flex-direction:row!important}
.flex-wrap{flex-wrap:wrap!important}
.flex-nowrap{flex-wrap:nowrap!important}
.flex-1{flex:1 1 0%!important}
.flex-none{flex:none!important}
.flex-shrink-0,.shrink-0{flex-shrink:0!important}
.flex-grow,.grow{flex-grow:1!important}
.items-start{align-items:flex-start!important}
.items-center{align-items:center!important}
.items-end{align-items:flex-end!important}
.justify-start{justify-content:flex-start!important}
.justify-center{justify-content:center!important}
.justify-between{justify-content:space-between!important}
.justify-end{justify-content:flex-end!important}
.min-w-0{min-width:0!important}
.w-full{width:100%!important}
.h-full{height:100%!important}

/* ── Grid ── */
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))!important}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media(min-width:640px){
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .sm\:hidden{display:none!important}
  .sm\:inline{display:inline!important}
  .sm\:inline-flex{display:inline-flex!important}
  .sm\:flex{display:flex!important}
}
@media(min-width:768px){
  .md\:flex{display:flex!important}
  .md\:hidden{display:none!important}
  .md\:block{display:block!important}
  .md\:inline-flex{display:inline-flex!important}
  .md\:flex-row{flex-direction:row!important}
  .md\:flex-col{flex-direction:column!important}
  .md\:items-center{align-items:center!important}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .md\:divide-y-0>*+*{border-top-width:0!important}
  .md\:divide-x>*+*{border-left-width:1px!important;border-top-width:0!important}
  .md\:px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}
  .md\:px-5{padding-left:1.25rem!important;padding-right:1.25rem!important}
  .md\:py-4{padding-top:1rem!important;padding-bottom:1rem!important}
  .md\:py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}
  .md\:pt-6{padding-top:1.5rem!important}
  .md\:pb-5{padding-bottom:1.25rem!important}
  .md\:p-7{padding:1.75rem!important}
  .md\:p-5{padding:1.25rem!important}
  .md\:p-4{padding:1rem!important}
  .md\:text-sm{font-size:.875rem;line-height:1.25rem!important}
  .md\:text-base{font-size:1rem;line-height:1.5rem!important}
  .md\:text-lg{font-size:1.125rem;line-height:1.75rem!important}
  .md\:text-xl{font-size:1.25rem;line-height:1.75rem!important}
  .md\:text-2xl{font-size:1.5rem;line-height:2rem!important}
  .md\:text-3xl{font-size:1.875rem;line-height:2.25rem!important}
  .md\:text-4xl{font-size:2.25rem;line-height:2.5rem!important}
  .md\:text-5xl{font-size:3rem;line-height:1!important}
  .md\:rounded-3xl{border-radius:1.5rem!important}
  .md\:w-auto{width:auto!important}
  .md\:mb-10{margin-bottom:2.5rem!important}
  .md\:mb-12{margin-bottom:3rem!important}
  .md\:mt-12{margin-top:3rem!important}
  .md\:gap-5{gap:1.25rem!important}
  .md\:gap-6{gap:1.5rem!important}
  .md\:gap-7{gap:1.75rem!important}
}
@media(min-width:1024px){
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .lg\:-translate-y-4{transform:translateY(-1rem)!important}
}
@media(min-width:1280px){
  .xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}

/* ── Gap ── */
.gap-0{gap:0!important}
.gap-1{gap:.25rem!important}
.gap-1\.5{gap:.375rem!important}
.gap-2{gap:.5rem!important}
.gap-2\.5{gap:.625rem!important}
.gap-3{gap:.75rem!important}
.gap-4{gap:1rem!important}
.gap-5{gap:1.25rem!important}
.gap-6{gap:1.5rem!important}
.gap-7{gap:1.75rem!important}
.gap-8{gap:2rem!important}
.gap-10{gap:2.5rem!important}

/* ── Padding ── */
.p-0{padding:0!important}
.p-1{padding:.25rem!important}
.p-2{padding:.5rem!important}
.p-3{padding:.75rem!important}
.p-4{padding:1rem!important}
.p-5{padding:1.25rem!important}
.p-6{padding:1.5rem!important}
.p-7{padding:1.75rem!important}
.px-1{padding-left:.25rem!important;padding-right:.25rem!important}
.px-1\.5{padding-left:.375rem!important;padding-right:.375rem!important}
.px-2{padding-left:.5rem!important;padding-right:.5rem!important}
.px-3{padding-left:.75rem!important;padding-right:.75rem!important}
.px-3\.5{padding-left:.875rem!important;padding-right:.875rem!important}
.px-4{padding-left:1rem!important;padding-right:1rem!important}
.px-5{padding-left:1.25rem!important;padding-right:1.25rem!important}
.px-6{padding-left:1.5rem!important;padding-right:1.5rem!important}
.py-0{padding-top:0!important;padding-bottom:0!important}
.py-0\.5{padding-top:.125rem!important;padding-bottom:.125rem!important}
.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}
.py-1\.5{padding-top:.375rem!important;padding-bottom:.375rem!important}
.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}
.py-2\.5{padding-top:.625rem!important;padding-bottom:.625rem!important}
.py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}
.py-3\.5{padding-top:.875rem!important;padding-bottom:.875rem!important}
.py-4{padding-top:1rem!important;padding-bottom:1rem!important}
.py-5{padding-top:1.25rem!important;padding-bottom:1.25rem!important}
.py-6{padding-top:1.5rem!important;padding-bottom:1.5rem!important}
.pt-1{padding-top:.25rem!important}
.pt-2{padding-top:.5rem!important}
.pt-3{padding-top:.75rem!important}
.pt-4{padding-top:1rem!important}
.pt-5{padding-top:1.25rem!important}
.pt-6{padding-top:1.5rem!important}
.pb-1{padding-bottom:.25rem!important}
.pb-2{padding-bottom:.5rem!important}
.pb-3{padding-bottom:.75rem!important}
.pb-4{padding-bottom:1rem!important}
.pb-5{padding-bottom:1.25rem!important}
.pb-6{padding-bottom:1.5rem!important}
.pb-8{padding-bottom:2rem!important}
.pb-16{padding-bottom:4rem!important}
.pl-2{padding-left:.5rem!important}
.pl-4{padding-left:1rem!important}
.pl-8{padding-left:2rem!important}
.pr-3{padding-right:.75rem!important}
.pr-4{padding-right:1rem!important}

/* ── Margin ── */
.m-0{margin:0!important}
.mx-auto{margin-left:auto!important;margin-right:auto!important}
.mx-3{margin-left:.75rem!important;margin-right:.75rem!important}
.my-0{margin-top:0!important;margin-bottom:0!important}
.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}
.mt-0{margin-top:0!important}
.mt-1{margin-top:.25rem!important}
.mt-2{margin-top:.5rem!important}
.mt-3{margin-top:.75rem!important}
.mt-4{margin-top:1rem!important}
.mt-5{margin-top:1.25rem!important}
.mt-6{margin-top:1.5rem!important}
.mt-8{margin-top:2rem!important}
.mt-10{margin-top:2.5rem!important}
.mb-0{margin-bottom:0!important}
.mb-0\.5{margin-bottom:.125rem!important}
.mb-1{margin-bottom:.25rem!important}
.mb-2{margin-bottom:.5rem!important}
.mb-3{margin-bottom:.75rem!important}
.mb-4{margin-bottom:1rem!important}
.mb-5{margin-bottom:1.25rem!important}
.mb-6{margin-bottom:1.5rem!important}
.mb-8{margin-bottom:2rem!important}
.mb-10{margin-bottom:2.5rem!important}
.ml-1{margin-left:.25rem!important}
.ml-2{margin-left:.5rem!important}
.ml-3{margin-left:.75rem!important}
.ml-auto{margin-left:auto!important}
.mr-1{margin-right:.25rem!important}
.mr-2{margin-right:.5rem!important}
.mr-3{margin-right:.75rem!important}

/* ── Sizing ── */
.w-2{width:.5rem!important}
.w-3{width:.75rem!important}
.w-3\.5{width:.875rem!important}
.w-4{width:1rem!important}
.w-5{width:1.25rem!important}
.w-6{width:1.5rem!important}
.w-7{width:1.75rem!important}
.w-8{width:2rem!important}
.w-10{width:2.5rem!important}
.w-12{width:3rem!important}
.w-14{width:3.5rem!important}
.w-16{width:4rem!important}
.w-20{width:5rem!important}
.w-24{width:6rem!important}
.w-auto{width:auto!important}
.h-1{height:.25rem!important}
.h-2{height:.5rem!important}
.h-3{height:.75rem!important}
.h-3\.5{height:.875rem!important}
.h-4{height:1rem!important}
.h-5{height:1.25rem!important}
.h-6{height:1.5rem!important}
.h-7{height:1.75rem!important}
.h-8{height:2rem!important}
.h-10{height:2.5rem!important}
.h-12{height:3rem!important}
.h-14{height:3.5rem!important}
.h-20{height:5rem!important}
.h-24{height:6rem!important}
.h-auto{height:auto!important}
.min-h-\[40px\]{min-height:40px!important}
.min-h-\[44px\]{min-height:44px!important}
.min-h-\[46px\]{min-height:46px!important}
.min-h-\[48px\]{min-height:48px!important}
.min-h-\[52px\]{min-height:52px!important}
.max-w-xl{max-width:36rem!important}
.max-w-2xl{max-width:42rem!important}
.max-w-3xl{max-width:48rem!important}
.max-w-4xl{max-width:56rem!important}
.max-w-5xl{max-width:64rem!important}
.max-w-7xl{max-width:80rem!important}
.max-h-\[50vh\]{max-height:50vh!important}
.max-h-\[12rem\]{max-height:12rem!important}
.min-h-screen{min-height:100vh!important}

/* ── Typography ── */
.text-\[9px\]{font-size:9px!important}
.text-\[9\.5px\]{font-size:9.5px!important}
.text-\[10px\]{font-size:10px!important}
.text-\[11px\]{font-size:11px!important}
.text-\[13px\]{font-size:13px!important}
.text-xs{font-size:.75rem;line-height:1rem!important}
.text-sm{font-size:.875rem;line-height:1.25rem!important}
.text-base{font-size:1rem;line-height:1.5rem!important}
.text-lg{font-size:1.125rem;line-height:1.75rem!important}
.text-xl{font-size:1.25rem;line-height:1.75rem!important}
.text-2xl{font-size:1.5rem;line-height:2rem!important}
.text-3xl{font-size:1.875rem;line-height:2.25rem!important}
.text-4xl{font-size:2.25rem;line-height:2.5rem!important}
.text-5xl{font-size:3rem;line-height:1!important}
.font-normal{font-weight:400!important}
.font-medium{font-weight:500!important}
.font-semibold{font-weight:600!important}
.font-bold{font-weight:700!important}
.font-black{font-weight:900!important}
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace!important}
.tracking-tight{letter-spacing:-.025em!important}
.tracking-tighter{letter-spacing:-.05em!important}
.tracking-widest{letter-spacing:.1em!important}
.tracking-wide{letter-spacing:.025em!important}
.leading-none{line-height:1!important}
.leading-tight{line-height:1.25!important}
.leading-snug{line-height:1.375!important}
.leading-normal{line-height:1.5!important}
.leading-relaxed{line-height:1.625!important}
.text-left{text-align:left!important}
.text-center{text-align:center!important}
.text-right{text-align:right!important}
.uppercase{text-transform:uppercase!important}
.lowercase{text-transform:lowercase!important}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap!important}
.whitespace-nowrap{white-space:nowrap!important}
.whitespace-pre-wrap{white-space:pre-wrap!important}
.break-words{word-break:break-word!important}
.underline{text-decoration:underline!important}
.no-underline{text-decoration:none!important}
.italic{font-style:italic!important}
.line-through{text-decoration:line-through!important}
.select-none{user-select:none!important;-webkit-user-select:none!important}

/* ── Text colors ── */
.text-white{color:#fff!important}
.text-black{color:#000!important}
.text-transparent{color:transparent!important}
.text-stone-300{color:#d6d3d1!important}
.text-stone-400{color:#a8a29e!important}
.text-stone-500{color:#78716c!important}
.text-stone-600{color:#57534e!important}
.text-stone-700{color:#44403c!important}
.text-stone-800{color:#292524!important}
.text-stone-900{color:#1c1917!important}
.text-zinc-300{color:#d4d4d8!important}
.text-zinc-400{color:#a1a1aa!important}
.text-zinc-500{color:#71717a!important}
.text-zinc-600{color:#52525b!important}
.text-zinc-700{color:#3f3f46!important}
.text-zinc-800{color:#27272a!important}
.text-zinc-900{color:#18181b!important}
.text-amber-600{color:#d97706!important}
.text-amber-700{color:#b45309!important}
.text-amber-800{color:#92400e!important}
.text-cyan-400{color:#22d3ee!important}
.text-cyan-500{color:#06b6d4!important}
.text-purple-400{color:#c084fc!important}
.text-purple-500{color:#a855f7!important}
.text-indigo-400{color:#818cf8!important}
.text-indigo-500{color:#6366f1!important}
.text-indigo-700{color:#4338ca!important}
.text-emerald-400{color:#34d399!important}
.text-emerald-600{color:#059669!important}
.text-red-400{color:#f87171!important}
.text-red-500{color:#ef4444!important}
.text-yellow-400{color:#facc15!important}
.text-blue-500{color:#3b82f6!important}
.text-teal-400{color:#2dd4bf!important}
.text-green-400{color:#4ade80!important}
.text-pink-400{color:#f472b6!important}

/* ── Background colors ── */
.bg-white{background-color:#fff!important}
.bg-black{background-color:#000!important}
.bg-transparent{background-color:transparent!important}
.bg-stone-100{background-color:#f5f5f4!important}
.bg-stone-200{background-color:#e7e5e4!important}
.bg-stone-800{background-color:#292524!important}
.bg-stone-800\/90{background-color:rgba(41,37,36,.9)!important}
.bg-zinc-700{background-color:#3f3f46!important}
.bg-zinc-800{background-color:#27272a!important}
.bg-zinc-900{background-color:#18181b!important}
.bg-amber-600{background-color:#d97706!important}
.bg-amber-600\/10{background-color:rgba(217,119,6,.1)!important}
.bg-amber-600\/15{background-color:rgba(217,119,6,.15)!important}
.bg-amber-600\/20{background-color:rgba(217,119,6,.2)!important}
.bg-white\/5{background-color:rgba(255,255,255,.05)!important}
.bg-white\/10{background-color:rgba(255,255,255,.1)!important}
.bg-stone-100\/80{background-color:rgba(245,245,244,.8)!important}
.bg-stone-200\/60{background-color:rgba(231,229,228,.6)!important}

/* Hover backgrounds */
.hover\:bg-white{&:hover{background-color:#fff!important}}
.hover\:bg-zinc-100:hover{background-color:#f4f4f5!important}
.hover\:bg-zinc-200:hover{background-color:#e4e4e7!important}
.hover\:bg-white\/5:hover{background-color:rgba(255,255,255,.05)!important}
.hover\:bg-white\/10:hover{background-color:rgba(255,255,255,.1)!important}
.hover\:bg-red-500\/10:hover{background-color:rgba(239,68,68,.1)!important}
.hover\:bg-amber-600\/15:hover{background-color:rgba(217,119,6,.15)!important}
.hover\:bg-emerald-400:hover{background-color:#34d399!important}
.hover\:bg-stone-100:hover{background-color:#f5f5f4!important}

/* ── Borders ── */
.border{border-width:1px;border-style:solid!important}
.border-0{border-width:0!important}
.border-none{border:none!important}
.border-l{border-left-width:1px;border-left-style:solid!important}
.border-r{border-right-width:1px;border-right-style:solid!important}
.border-t{border-top-width:1px;border-top-style:solid!important}
.border-b{border-bottom-width:1px;border-bottom-style:solid!important}
.divide-y>*+*{border-top-width:1px;border-top-style:solid}
.divide-x>*+*{border-left-width:1px;border-left-style:solid}
.divide-white\/10>*+*{border-color:rgba(255,255,255,.1)}
.border-white\/5{border-color:rgba(255,255,255,.05)!important}
.border-white\/7{border-color:rgba(255,255,255,.07)!important}
.border-white\/10{border-color:rgba(255,255,255,.1)!important}
.border-white\/15{border-color:rgba(255,255,255,.15)!important}
.border-amber-600\/20{border-color:rgba(217,119,6,.2)!important}
.border-amber-600\/25{border-color:rgba(217,119,6,.25)!important}
.border-amber-600\/28{border-color:rgba(217,119,6,.28)!important}
.border-amber-600\/30{border-color:rgba(217,119,6,.3)!important}
.border-amber-600\/35{border-color:rgba(217,119,6,.35)!important}
.border-amber-600\/40{border-color:rgba(217,119,6,.4)!important}
.border-cyan-500\/20{border-color:rgba(6,182,212,.2)!important}
.border-cyan-500\/30{border-color:rgba(6,182,212,.3)!important}
.border-cyan-500\/40{border-color:rgba(6,182,212,.4)!important}
.border-purple-500\/20{border-color:rgba(168,85,247,.2)!important}
.border-purple-500\/25{border-color:rgba(168,85,247,.25)!important}
.border-purple-500\/30{border-color:rgba(168,85,247,.3)!important}
.border-indigo-500\/25{border-color:rgba(99,102,241,.25)!important}
.border-indigo-500\/30{border-color:rgba(99,102,241,.3)!important}
.border-red-500\/30{border-color:rgba(239,68,68,.3)!important}
.border-emerald-500\/30{border-color:rgba(16,185,129,.3)!important}
.border-yellow-500\/20{border-color:rgba(234,179,8,.2)!important}
.border-yellow-500\/25{border-color:rgba(234,179,8,.25)!important}
.border-yellow-500\/30{border-color:rgba(234,179,8,.3)!important}
.border-stone-200{border-color:#e7e5e4!important}
.border-stone-300{border-color:#d6d3d1!important}
.hover\:border-amber-600\/35:hover{border-color:rgba(217,119,6,.35)!important}
.hover\:border-cyan-500\/40:hover{border-color:rgba(6,182,212,.4)!important}
.hover\:border-purple-500\/40:hover{border-color:rgba(168,85,247,.4)!important}
.hover\:border-yellow-500\/40:hover{border-color:rgba(234,179,8,.4)!important}
.hover\:border-red-500\/30:hover{border-color:rgba(239,68,68,.3)!important}
.hover\:border-white\/15:hover{border-color:rgba(255,255,255,.15)!important}
.focus\:border-amber-600\/35:focus{border-color:rgba(217,119,6,.35)!important}

/* ── Border radius ── */
.rounded{border-radius:.25rem!important}
.rounded-sm{border-radius:.125rem!important}
.rounded-md{border-radius:.375rem!important}
.rounded-lg{border-radius:.5rem!important}
.rounded-xl{border-radius:.75rem!important}
.rounded-2xl{border-radius:1rem!important}
.rounded-3xl{border-radius:1.5rem!important}
.rounded-full{border-radius:9999px!important}

/* ── Shadows ── */
.shadow{box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06)!important}
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.05)!important}
.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)!important}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)!important}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)!important}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)!important}

/* ── Overflow ── */
.overflow-hidden{overflow:hidden!important}
.overflow-auto{overflow:auto!important}
.overflow-visible{overflow:visible!important}
.overflow-y-auto{overflow-y:auto!important}
.overflow-x-auto{overflow-x:auto!important}
.overflow-x-hidden{overflow-x:hidden!important}

/* ── Pointer events ── */
.pointer-events-none{pointer-events:none!important}
.pointer-events-auto{pointer-events:auto!important}

/* ── Cursor ── */
.cursor-pointer{cursor:pointer!important}
.cursor-default{cursor:default!important}

/* ── Interactivity ── */
.resize-none{resize:none!important}
.focus\:outline-none:focus{outline:none!important}
.focus\:ring-0:focus{box-shadow:none!important}

/* ── Opacity ── */
.opacity-0{opacity:0!important}
.opacity-50{opacity:.5!important}
.opacity-60{opacity:.6!important}
.opacity-80{opacity:.8!important}
.opacity-100{opacity:1!important}
.group:hover .group-hover\:opacity-100{opacity:1!important}
.group-hover\:opacity-100{opacity:0}

/* ── Transform ── */
.-translate-x-1\/2{transform:translateX(-50%)!important}
.-translate-y-1\/2{transform:translateY(-50%)!important}
.translate-x-1\/2{transform:translateX(50%)!important}
.translate-x-5{transform:translateX(1.25rem)!important}
.hover\:-translate-y-1:hover{transform:translateY(-.25rem)!important}
.hover\:-translate-y-5:hover{transform:translateY(-1.25rem)!important}
.lg\:-translate-y-4{transform:translateY(-1rem)}

/* ── Toggle knob transition (rep-pro-toggle) ── */
#rep-pro-toggle { transition: background-color 0.3s ease !important; }
#rep-pro-knob   { transition: transform 0.3s cubic-bezier(.4,0,.2,1) !important; }

/* ── Transition ── */
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s!important}
.transition-colors{transition-property:color,background-color,border-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s!important}
.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s!important}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s!important}
.duration-200{transition-duration:.2s!important}
.duration-300{transition-duration:.3s!important}

/* ── Object fit ── */
.object-cover{object-fit:cover!important}
.object-contain{object-fit:contain!important}

/* ── Space-y / Space-x ── */
.space-y-2>*+*{margin-top:.5rem!important}
.space-y-2\.5>*+*{margin-top:.625rem!important}
.space-y-3>*+*{margin-top:.75rem!important}
.space-y-4>*+*{margin-top:1rem!important}
.space-y-5>*+*{margin-top:1.25rem!important}
.space-y-6>*+*{margin-top:1.5rem!important}
.space-x-2>*+*{margin-left:.5rem!important}

/* ── Text gradient utility ── */
.bg-clip-text{-webkit-background-clip:text!important;background-clip:text!important}
.text-transparent{color:transparent!important}
.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops,#fff,rgba(255,255,255,.5)))!important}
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops,#fff,rgba(255,255,255,.5)))!important}
.from-white{--tw-gradient-from:#fff;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(255,255,255,0))}
.to-white\/50{--tw-gradient-to:rgba(255,255,255,.5)}

/* ── Misc visual ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0!important}
.not-sr-only{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal!important}
.aspect-square{aspect-ratio:1/1!important}
.filter{filter:var(--tw-filter)}

/* ── Text hover colors ── */
.hover\:text-stone-800:hover{color:#292524!important}
.hover\:text-red-400:hover{color:#f87171!important}
.hover\:text-indigo-700:hover{color:#4338ca!important}
.hover\:text-zinc-500:hover{color:#71717a!important}
.hover\:text-zinc-600:hover{color:#52525b!important}
.hover\:text-amber-700:hover{color:#b45309!important}

/* ── Group ── */
.group{}
.group:hover .group-hover\:opacity-100{opacity:1}

/* ── Prefers reduced motion ── */
@media(prefers-reduced-motion:reduce){
  .ambient-orb,.ca-card-gen-border,.ca-card-rep-border{animation:none!important}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ── Card border animations (performance: 8s+ duration) ── */
@keyframes cardBorderFlow{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}
.ca-card-gen-border{
  background:linear-gradient(90deg,#007AFF,#34D399,#007AFF);
  background-size:200% 100%;
  animation:cardBorderFlow 8s ease infinite;
  will-change:background-position;
  border-radius:1.75rem;padding:1.5px;
}
.ca-card-rep-border{
  background:linear-gradient(90deg,#7C3AED,#EC4899,#7C3AED);
  background-size:200% 100%;
  animation:cardBorderFlow 10s ease infinite;
  will-change:background-position;
  border-radius:1.75rem;padding:1.5px;
}

/* END v50 TAILWIND REPLACEMENT UTILITIES */

/* ═══════════════════════════════════════════════════
   v52 — Drop Zone / Toggle / Deconstruct Button
═══════════════════════════════════════════════════ */

/* ── Glowing green upload drop zone ── */
@keyframes dropZonePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,0), 0 0 18px 2px rgba(16,185,129,0.18), inset 0 0 40px rgba(16,185,129,0.04); border-color: rgba(16,185,129,0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(16,185,129,0.06), 0 0 32px 8px rgba(16,185,129,0.28), inset 0 0 60px rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.75); }
}
@keyframes dropZoneIconFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.rep-drop-zone {
  position: relative;
  width: 100%;
  min-height: 200px;
  border: 2px dashed rgba(16,185,129,0.45);
  border-radius: 1.5rem;
  background: linear-gradient(135deg, rgba(16,185,129,0.04) 0%, rgba(52,211,153,0.03) 50%, rgba(6,182,212,0.03) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 1.5rem;
  animation: dropZonePulse 2.8s ease-in-out infinite;
  transition: opacity 0.5s ease, max-height 0.5s cubic-bezier(.4,0,.2,1), margin 0.5s ease, padding 0.5s ease, transform 0.3s ease;
  overflow: hidden;
  max-height: 260px;
  will-change: opacity, max-height;
}

.rep-drop-zone:hover,
.rep-drop-zone.drag-over {
  background: linear-gradient(135deg, rgba(16,185,129,0.09) 0%, rgba(52,211,153,0.07) 50%, rgba(6,182,212,0.06) 100%);
  border-style: solid;
  border-color: rgba(16,185,129,0.8) !important;
  transform: scale(1.005);
}

.rep-drop-zone.drag-over {
  box-shadow: 0 0 0 4px rgba(16,185,129,0.15), 0 0 40px 10px rgba(16,185,129,0.22), inset 0 0 60px rgba(16,185,129,0.1) !important;
}

/* Hidden state — smooth collapse */
.rep-drop-zone.rep-dz-hidden {
  opacity: 0;
  max-height: 0 !important;
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
  pointer-events: none;
}

.rep-drop-zone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 2.5rem 1.5rem;
  pointer-events: none;
}

.rep-drop-zone-icon {
  width: 56px;
  height: 56px;
  border-radius: 1rem;
  background: rgba(16,185,129,0.10);
  border: 1px solid rgba(16,185,129,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #10b981;
  margin-bottom: 4px;
  animation: dropZoneIconFloat 2.8s ease-in-out infinite;
  box-shadow: 0 0 18px rgba(16,185,129,0.18);
}

.rep-drop-zone-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1c1917;
  margin: 0;
}

.rep-drop-zone-sub {
  font-size: 0.78rem;
  color: #78716c;
  margin: 0;
}

.rep-drop-zone-link {
  color: #10b981;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rep-drop-zone-types {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(16,185,129,0.55);
  margin-top: 4px;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

/* ── Deconstruct All — light indigo/blue gradient ── */
.rep-deconstruct-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #6366f1 0%, #38bdf8 100%);
  border: none;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(99,102,241,0.28), 0 2px 8px rgba(56,189,248,0.18), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: all 0.2s ease;
}
.rep-deconstruct-btn:hover {
  background: linear-gradient(135deg, #818cf8 0%, #67e8f9 100%);
  box-shadow: 0 0 24px rgba(99,102,241,0.38), 0 4px 14px rgba(56,189,248,0.25);
  transform: translateY(-1px);
}
.rep-deconstruct-btn:active { transform: translateY(0); }

/* ── Toggle track — light blue/indigo (not dark) ── */
#rep-pro-toggle {
  background: linear-gradient(135deg,#38bdf8,#818cf8) !important;
  border: none !important;
  outline: none !important;
}
#rep-pro-knob {
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.22) !important;
}

/* ── Pricing — popular card level, not elevated ── */
.pricing-card.popular {
  /* Remove any inherited transform — sits level with siblings */
  transform: none !important;
}
.pricing-card.popular:hover {
  transform: translateY(-4px) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   ACCOUNT PAGE — Wide Layout + Tabbed History Panel
   ═════════════════════════════════════════════════════════════════════════════ */

/* Account grid: left (activity) wider, right (quick actions) narrower */
.ca-account-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .ca-account-grid {
        grid-template-columns: 1fr 320px;
        gap: 1.5rem;
        align-items: start;
    }
}

/* ── Tab Navigation ── */
.ca-acct-tab-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 12px 0;
    border-bottom: 1px solid rgba(28,25,23,0.07);
    flex-wrap: wrap;
}

.ca-acct-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px 10px;
    border-radius: 12px 12px 0 0;
    font-size: 12px;
    font-weight: 700;
    color: #78716c;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.18s ease;
    position: relative;
    bottom: -1px;
    white-space: nowrap;
    min-height: 40px;
}

.ca-acct-tab:hover {
    color: #292524;
    background: rgba(0,0,0,0.03);
}

.ca-acct-tab.active {
    color: #c96a00;
    border-bottom-color: #c96a00;
    background: rgba(201,106,0,0.04);
}

.ca-acct-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    background: rgba(201,106,0,0.15);
    color: #c96a00;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

/* Clear All button inside tab nav */
.ca-acct-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    color: #a1a1aa;
    background: transparent;
    border: 1px solid rgba(239,68,68,0.2);
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}
.ca-acct-clear-btn:hover {
    color: #ef4444;
    background: rgba(239,68,68,0.07);
    border-color: rgba(239,68,68,0.4);
}

/* ── Tab Panels ── */
.ca-acct-tab-panel {
    min-height: 0;
}

/* ── Account History Items ── */
.acct-hist-date-label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #a8a29e;
    padding: 12px 6px 4px;
}

.acct-hist-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    border-radius: 12px;
    transition: background 0.15s ease;
    padding: 3px 2px;
}
.acct-hist-item:hover {
    background: rgba(201,106,0,0.04);
}

.acct-hist-item-body {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}
.acct-hist-item-body:hover {
    background: rgba(201,106,0,0.06);
    border-color: rgba(201,106,0,0.2);
}

.acct-hist-item-text {
    font-size: 12px;
    font-weight: 500;
    color: #292524;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    margin-bottom: 5px;
}

.acct-hist-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.acct-hist-item-date {
    font-size: 10px;
    color: #a8a29e;
    font-weight: 500;
}

.acct-hist-item-model {
    font-size: 9px;
    font-weight: 700;
    font-family: "SF Mono", "JetBrains Mono", monospace;
    color: #c96a00;
    background: rgba(201,106,0,0.10);
    border: 1px solid rgba(201,106,0,0.18);
    padding: 1px 6px;
    border-radius: 99px;
}

.acct-hist-delete-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #d4d4d4;
    transition: all 0.15s ease;
    margin-top: 8px;
}
.acct-hist-delete-btn:hover {
    background: rgba(239,68,68,0.10);
    color: #ef4444;
}

/* Credit activity items (updated) */
.activity-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(28,25,23,0.07);
    gap: 1rem;
}
.activity-item:last-child { border-bottom: none; }
.activity-action {
    font-size: 0.75rem;
    color: #78716c;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* v56: Home cards removed — suppress any residual card styles */
.ca-card-generate,.ca-card-replicate,.ca-card-gen-border,.ca-card-rep-border{display:none!important}

/* ══════════════════════════════════════
   IMG-TO-IMG ATTACHMENT STYLES
══════════════════════════════════════ */

/* Image strip inside prompt card */
#gen-img-strip {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 12px 6px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.12) transparent;
}
#gen-img-strip::-webkit-scrollbar { height: 4px; }
#gen-img-strip::-webkit-scrollbar-track { background: transparent; }
#gen-img-strip::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }

/* Upload button in the prompt bar (now a <label> for native file-picker triggering) */
#gen-img-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
#gen-img-upload-btn:hover {
    background: rgba(99,102,241,0.15) !important;
    border-color: rgba(99,102,241,0.4) !important;
}
#gen-img-upload-btn:active {
    transform: scale(0.96);
    background: rgba(99,102,241,0.2) !important;
}

/* Edit mode badge */
#gen-edit-mode-badge {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    background: linear-gradient(90deg,#6366f1,#8b5cf6);
    color: #fff;
    animation: ca-badge-pulse 2.4s ease-in-out infinite;
}
@keyframes ca-badge-pulse {
    0%,100% { opacity: 1; }
    50% { opacity: 0.75; }
}

/* "Edit this" floating action button */
.gen-float-btn[onclick*="useResultAsReference"] {
    background: rgba(99,102,241,0.12);
    border-color: rgba(99,102,241,0.3);
    color: #6366f1;
}
.gen-float-btn[onclick*="useResultAsReference"]:hover {
    background: rgba(99,102,241,0.25);
    color: #4f46e5;
    transform: translateY(-2px) scale(1.05);
}

/* ── Drag-over visual state for prompt card ── */
#gen-prompt.ca-drag-active,
#gen-prompt[style*="box-shadow: 0 0 0 3px"] {
    background: rgba(99,102,241,0.03);
}

/* ── Image strip alignment ── */
#gen-img-strip {
    align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════
   ACCOUNT PAGE v2 — Full redesign with all improvements
   ═══════════════════════════════════════════════════════════════════ */

/* Page wrapper */
.ca-acct-page-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding-top: max(6rem, calc(5rem + env(safe-area-inset-top)));
}

/* ── Hero card — matches "Asif Official 350 CREDITS" style ── */
.ca-acct-hero-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border: 1px solid rgba(28,25,23,0.08);
    border-radius: 20px;
    padding: 18px 24px;
    margin-bottom: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.ca-acct-hero-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}
.ca-acct-avatar-ring {
    position: relative;
    flex-shrink: 0;
}
.ca-acct-avatar-img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(201,106,0,0.25);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.ca-acct-avatar-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 13px;
    height: 13px;
    background: #f59e0b;
    border: 2px solid #fff;
    border-radius: 50%;
}
.ca-acct-hero-info {
    min-width: 0;
}
.ca-acct-hero-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1c1917;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.ca-acct-hero-email {
    font-size: 0.78rem;
    color: #78716c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ca-acct-hero-credits {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 1px;
}
.ca-acct-cred-num {
    font-size: 1.8rem;
    font-weight: 900;
    color: #c96a00;
    line-height: 1;
}
.ca-acct-cred-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #a8a29e;
    text-align: right;
}

/* ── Sparkline row ── */
.ca-acct-sparkline-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    background: rgba(201,106,0,0.04);
    border: 1px solid rgba(201,106,0,0.12);
    border-radius: 14px;
    margin-bottom: 16px;
    min-width: 0;
    overflow: hidden;
}
.ca-acct-sparkline-label {
    font-size: 11px;
    font-weight: 600;
    color: #a8a29e;
    white-space: nowrap;
    flex-shrink: 0;
}
.ca-acct-sparkline-stats {
    font-size: 11px;
    color: #c96a00;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
/* Hide "X this week" text on mobile — keep only label + bars */
@media (max-width: 767px) {
    .ca-acct-sparkline-stats {
        display: none !important;
    }
    .ca-acct-sparkline-row {
        padding: 8px 12px;
        gap: 8px;
    }
    #acct-sparkline {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ── Main layout ── */
.ca-acct-layout {
    grid-template-columns: 1fr 300px;
    gap: 16px;
    align-items: start;
}
@media (max-width: 768px) {
    .ca-acct-layout { grid-template-columns: 1fr; }
    .ca-acct-hero-card { padding: 14px 16px; gap: 12px; }
    .ca-acct-cred-num { font-size: 1.4rem; }
}

/* ── Sticky sidebar ── */
.ca-acct-sidebar {
    position: sticky;
    top: 5.5rem;
}
.ca-acct-sidebar-inner {
    background: #fff !important;
}

/* Sidebar action buttons */
.ca-acct-action-btn {
    width: 100%;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(0,0,0,0.02);
    border: 1px solid rgba(28,25,23,0.07);
    color: #292524;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 48px;
    text-decoration: none;
}
.ca-acct-action-btn:hover {
    background: rgba(0,0,0,0.04);
    border-color: rgba(28,25,23,0.15);
    transform: translateX(2px);
}
.ca-acct-btn-amber  { background: rgba(201,106,0,0.06); border-color: rgba(201,106,0,0.2); color: #c96a00; }
.ca-acct-btn-indigo { background: rgba(99,102,241,0.06); border-color: rgba(99,102,241,0.2); color: #6366f1; }
.ca-acct-btn-green  { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.2); color: #059669; }
.ca-acct-btn-cyan   { background: rgba(6,182,212,0.06); border-color: rgba(6,182,212,0.2); color: #0891b2; }
.ca-acct-btn-danger { background: transparent; border-color: transparent; color: #a1a1aa; }
.ca-acct-btn-danger:hover { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.2); color: #ef4444; }
.ca-acct-btn-primary {
    background: linear-gradient(135deg,#2563eb,#1d4ed8);
    color: #fff; border-color: rgba(37,99,235,0.3);
    font-weight: 700;
}
.ca-acct-btn-primary:hover { opacity: 0.93; }

.ca-acct-beta-badge {
    margin-left: auto;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 99px;
    background: rgba(16,185,129,0.15);
    color: #059669;
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* Dividers inside sidebar */
.ca-acct-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0;
}
.ca-acct-divider::before,
.ca-acct-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(28,25,23,0.07);
}
.ca-acct-divider span {
    font-size: 9px;
    font-weight: 700;
    color: #a8a29e;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Tab enhancements ── */
.ca-acct-tab-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 10px;
}
.ca-acct-sort-sel {
    font-size: 11px;
    padding: 4px 8px;
    border: 1px solid rgba(28,25,23,0.12);
    border-radius: 8px;
    background: #fff;
    color: #78716c;
    cursor: pointer;
    outline: none;
}
.ca-acct-batch-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(28,25,23,0.12);
    color: #a1a1aa;
    cursor: pointer;
    transition: all 0.15s;
}
.ca-acct-batch-btn:hover { color: #6366f1; border-color: #6366f1; }
.ca-acct-batch-btn.active { background: rgba(99,102,241,0.1); color: #6366f1; border-color: #6366f1; }

/* Batch action bar */
.ca-acct-batch-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(99,102,241,0.05);
    border-bottom: 1px solid rgba(99,102,241,0.15);
}
.ca-acct-batch-count {
    font-size: 11px;
    font-weight: 600;
    color: #6366f1;
    flex: 1;
}
.ca-acct-batch-del-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 7px;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.25);
    color: #ef4444;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.ca-acct-batch-del-btn:hover { background: rgba(239,68,68,0.18); }
.ca-acct-batch-cancel-btn {
    padding: 4px 10px;
    border-radius: 7px;
    background: transparent;
    border: 1px solid rgba(28,25,23,0.1);
    color: #a1a1aa;
    font-size: 11px;
    cursor: pointer;
}

/* ── Skeleton loaders ── */
@keyframes caSkelShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.ca-skel {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.06) 75%);
    background-size: 200% 100%;
    animation: caSkelShimmer 1.4s ease infinite;
}
.ca-skel-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
}
.ca-skeleton-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 0;
}
.ca-skeleton-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
}
.ca-skel-prompt {
    min-height: 52px;
    padding: 10px 6px;
    border-bottom: 1px solid rgba(28,25,23,0.05);
}

/* ── History items with model badge ── */
.acct-hist-item-batch-check {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid rgba(28,25,23,0.2);
    cursor: pointer;
    flex-shrink: 0;
    appearance: none;
    background: #fff;
    transition: all 0.12s;
    margin-top: 2px;
}
.acct-hist-item-batch-check:checked {
    background: #6366f1;
    border-color: #6366f1;
}

/* ── Empty state ── */
.ca-acct-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    flex: 1;
}
.ca-acct-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: rgba(28,25,23,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.ca-acct-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: #57534e;
    margin-bottom: 4px;
}
.ca-acct-empty-sub {
    font-size: 12px;
    color: #a8a29e;
    margin-bottom: 16px;
}
.ca-acct-empty-cta {
    padding: 8px 20px;
    border-radius: 20px;
    background: rgba(201,106,0,0.1);
    border: 1px solid rgba(201,106,0,0.25);
    color: #c96a00;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
}
.ca-acct-empty-cta:hover { background: rgba(201,106,0,0.18); }

/* ── Keyboard shortcut badge ── */
.ca-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 4px;
    background: rgba(28,25,23,0.07);
    border: 1px solid rgba(28,25,23,0.12);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #78716c;
    font-family: monospace;
}

/* ════════════════════════════════════════
   PROFILE POPUP v2 — scale+fade + Google pic
   ════════════════════════════════════════ */

/* Scale+fade open animation */
.modal-backdrop .modal-sheet {
    transform: scale(0.95) translateY(8px);
    opacity: 0;
    transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1),
                opacity 0.18s ease;
}
.modal-backdrop.open .modal-sheet {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Profile popup specific sheet sizing */
.ca-profile-popup-sheet {
    max-width: 340px !important;
    padding: 24px 20px 20px !important;
}

/* Close button */
.ca-popup-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(28,25,23,0.06);
    border: 1.5px solid rgba(28,25,23,0.12);
    color: #78716c;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
}
.ca-popup-close-btn:hover { background: rgba(28,25,23,0.12); color: #292524; transform: scale(1.05); }

/* Identity block */
.ca-popup-identity {
    text-align: center;
    margin-bottom: 18px;
    padding-top: 4px;
}
.ca-popup-avatar-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}
.ca-popup-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(201,106,0,0.2);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.ca-popup-avatar-dot {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 14px;
    height: 14px;
    background: #f59e0b;
    border: 2.5px solid #fff;
    border-radius: 50%;
}
.ca-popup-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1c1917;
    margin-bottom: 2px;
}
.ca-popup-email {
    font-size: 0.78rem;
    color: #78716c;
    margin-bottom: 8px;
}
.ca-popup-balance {
    font-size: 0.82rem;
    color: #a1a1aa;
}
.ca-popup-credits {
    font-size: 1rem;
    font-weight: 900;
    color: #c96a00;
}

.ca-popup-divider {
    height: 1px;
    background: rgba(28,25,23,0.07);
    margin: 0 -4px 14px;
}

/* Navigation links */
.ca-popup-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.ca-popup-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 13px;
    background: rgba(28,25,23,0.02);
    border: 1px solid rgba(28,25,23,0.06);
    color: #292524;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.12s;
    min-height: 46px;
}
.ca-popup-link:hover {
    background: rgba(28,25,23,0.05);
    border-color: rgba(28,25,23,0.12);
}
.ca-popup-chevron {
    width: 14px;
    height: 14px;
    margin-left: auto;
    color: #d4cdc7;
}
.ca-popup-link-green  { background: rgba(16,185,129,0.05); border-color: rgba(16,185,129,0.18); color: #059669; }
.ca-popup-link-amber  { background: rgba(201,106,0,0.06); border-color: rgba(201,106,0,0.2);   color: #c96a00; }
.ca-popup-link-indigo { background: rgba(99,102,241,0.06); border-color: rgba(99,102,241,0.2); color: #6366f1; }
.ca-popup-badge-ea {
    margin-left: auto;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 99px;
    background: rgba(16,185,129,0.15);
    color: #059669;
    font-weight: 800;
    letter-spacing: 0.04em;
}

/* Buy credits CTA */
.ca-popup-buy-btn {
    width: 100%;
    padding: 13px;
    border-radius: 14px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    border: 1px solid rgba(37,99,235,0.35);
    transition: opacity 0.15s;
    margin-bottom: 8px;
    min-height: 48px;
}
.ca-popup-buy-btn:hover { opacity: 0.92; }

/* Sign out */
.ca-popup-signout-btn {
    width: 100%;
    padding: 11px;
    border-radius: 12px;
    background: transparent;
    border: none;
    color: #a8a29e;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: color 0.12s;
}
.ca-popup-signout-btn:hover { color: #ef4444; }

/* ══ Light/dark mode — account page ══ */
[data-mode="dark"] .ca-acct-hero-card,
.dark .ca-acct-hero-card {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}
[data-mode="dark"] .ca-acct-sidebar-inner,
.dark .ca-acct-sidebar-inner {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   ACCOUNT PAGE — Credit Activity States
   ═══════════════════════════════════════════════════════════════════ */

/* No activity at all */
.ca-acct-no-activity {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}
.ca-acct-no-act-icon { font-size: 2.5rem; margin-bottom: 12px; }
.ca-acct-no-act-title {
    font-size: 14px;
    font-weight: 700;
    color: #57534e;
    margin-bottom: 4px;
}
.ca-acct-no-act-sub {
    font-size: 12px;
    color: #a8a29e;
    margin-bottom: 16px;
}
.ca-acct-no-act-btn {
    padding: 8px 20px;
    border-radius: 20px;
    background: rgba(201,106,0,0.1);
    border: 1px solid rgba(201,106,0,0.25);
    color: #c96a00;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.15s;
}
.ca-acct-no-act-btn:hover { background: rgba(201,106,0,0.18); }

/* Plan / signup bonus banner */
.ca-acct-plan-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(201,106,0,0.07), rgba(245,158,11,0.05));
    border: 1px solid rgba(201,106,0,0.18);
    border-radius: 14px;
    margin-bottom: 12px;
}
.ca-acct-plan-icon { font-size: 1.4rem; flex-shrink: 0; }
.ca-acct-plan-info { flex: 1; min-width: 0; }
.ca-acct-plan-label {
    font-size: 11px;
    font-weight: 600;
    color: #78716c;
    margin-bottom: 2px;
}
.ca-acct-plan-credits {
    font-size: 14px;
    font-weight: 800;
    color: #c96a00;
}

/* No purchases nudge */
.ca-acct-no-purchase {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(37,99,235,0.04);
    border: 1px dashed rgba(37,99,235,0.2);
    border-radius: 14px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.ca-acct-no-pur-body {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ca-acct-no-pur-icon { font-size: 1.3rem; }
.ca-acct-no-pur-title {
    font-size: 12px;
    font-weight: 700;
    color: #292524;
    margin-bottom: 2px;
}
.ca-acct-no-pur-sub {
    font-size: 11px;
    color: #a8a29e;
}
.ca-acct-buy-now-btn {
    padding: 7px 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: opacity 0.15s;
    flex-shrink: 0;
}
.ca-acct-buy-now-btn:hover { opacity: 0.9; }

/* Activity log */
.ca-log-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ca-log-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    transition: background 0.12s;
}
.ca-log-item:hover { background: rgba(28,25,23,0.03); }
.ca-log-icon {
    font-size: 1rem;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}
.ca-log-body { flex: 1; min-width: 0; }
.ca-log-action {
    font-size: 12px;
    font-weight: 500;
    color: #292524;
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ca-log-date {
    font-size: 10px;
    color: #a8a29e;
    margin-top: 1px;
}
.ca-log-amount {
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.ca-log-pos { color: #059669; }
.ca-log-neg { color: #c96a00; }

/* ── modal-sheet open animation — scoped to not break existing sheets ── */
.modal-backdrop .modal-sheet {
    will-change: transform, opacity;
}

/* ═══════════════════════════════════════════════════════
   POWER YOUR CREATIVITY — animated credit activity text
   (matches pricing page animation style)
   ═══════════════════════════════════════════════════════ */
.ca-power-creative-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.2;
}
.ca-power-word {
    font-size: clamp(1.1rem, 5vw, 1.5rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    animation: caPowerReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    white-space: nowrap;
}
.ca-power-1 { color: #c96a00; animation-delay: 0s; }
.ca-power-2 { color: #292524; animation-delay: 0.12s; }
.ca-power-3 {
    color: transparent;
    background: linear-gradient(135deg, #c96a00, #f59e0b, #c96a00);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: caPowerReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both,
               caPowerShimmer 3s linear 0.84s infinite;
    white-space: nowrap;
}
@media (max-width: 400px) {
    .ca-power-creative-wrap { gap: 6px; max-width: 260px; }
    .ca-power-word { font-size: 1.1rem; }
}
@keyframes caPowerReveal {
    from { opacity: 0; transform: translateY(10px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes caPowerShimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* ═══════════════════════════════════════════════════════
   ACCOUNT PAGE — Smooth inline scroll for prompt history
   ═══════════════════════════════════════════════════════ */

/* Left panel: fixed height to enable inner scroll */
.ca-acct-left-panel {
    height: calc(100vh - 220px) !important;
    min-height: 460px !important;
    max-height: 780px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
@media (max-width: 768px) {
    .ca-acct-left-panel {
        /* Let content drive height on mobile — fixed px kills inner scroll */
        height: auto !important;
        max-height: 80svh !important;
        min-height: 480px !important;
    }
}

/* Credit activity inner scroll */
#acct-tab-credit {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
    padding: 16px 20px;
}

/* Prompt history tab inner scroll */
#acct-tab-prompts {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
#acct-history-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
    padding: 0 12px 12px;
}

/* Scrollbar styling — thin, amber accent */
#acct-tab-credit::-webkit-scrollbar,
#acct-history-list::-webkit-scrollbar {
    width: 4px;
}
#acct-tab-credit::-webkit-scrollbar-track,
#acct-history-list::-webkit-scrollbar-track {
    background: transparent;
}
#acct-tab-credit::-webkit-scrollbar-thumb,
#acct-history-list::-webkit-scrollbar-thumb {
    background: rgba(201, 106, 0, 0.25);
    border-radius: 99px;
}
#acct-tab-credit::-webkit-scrollbar-thumb:hover,
#acct-history-list::-webkit-scrollbar-thumb:hover {
    background: rgba(201, 106, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════
   PROFILE POPUP — Mobile fix
   Prevent popup from being too tall on small screens
   ═══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* Bottom-sheet style on mobile */
    #profile-modal .modal-sheet,
    #profile-modal .ca-profile-popup-sheet {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 24px 24px 0 0 !important;
        padding: 20px 16px 28px !important;
        max-height: 90dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translateY(100%) !important;
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }
    /* When open: slide up from bottom */
    #profile-modal.open .modal-sheet,
    #profile-modal.open .ca-profile-popup-sheet {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }
    /* Drag handle visible on mobile */
    #profile-modal .modal-drag-handle {
        display: block !important;
        width: 36px;
        height: 4px;
        border-radius: 99px;
        background: rgba(28,25,23,0.18);
        margin: 0 auto 16px;
    }
    /* Compact popup on mobile */
    .ca-popup-avatar { width: 56px !important; height: 56px !important; }
    .ca-popup-name   { font-size: 1rem !important; }
    .ca-popup-link   { min-height: 42px !important; padding: 9px 12px !important; font-size: 12px !important; }
    .ca-popup-buy-btn { min-height: 44px !important; padding: 11px !important; }
}

/* Auth modal mobile fix too */
@media (max-width: 640px) {
    #auth-modal .modal-sheet {
        max-height: 92dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ═══════════════════════════════════════════════════════
   ADMIN PROMPT HISTORY TABLE — horizontal scroll + styles
   ═══════════════════════════════════════════════════════ */
.ph-tbl-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 560px;
    overflow-y: auto;
    scroll-behavior: smooth;
}
.ph-tbl-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
.ph-tbl-scroll::-webkit-scrollbar-track { background: transparent; }
.ph-tbl-scroll::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.25); border-radius: 99px; }
.ph-tbl-scroll::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.5); }

/* Sticky table header */
#ph-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg);
}

/* ═══════════════════════════════════════════════════════════════════
   v52 MOBILE BUG FIXES
   1. Power Your Creativity  — already patched above
   2. 7-day sparkline pill   — already patched above
   3. Model selector pill    — equal top/bottom padding, true centered
   4. Toast / credit popups  — always centered top below header
   5. WP Admin button        — in comfyarts-settings (handled in PHP)
   ═══════════════════════════════════════════════════════════════════ */

/* ── FIX 3: Model selector pill — equal vertical padding on mobile ── */
/* The pill container always provides equal top/bottom padding.        */
/* The tab buttons inside get identical top and bottom padding.        */
@media (max-width: 767px) {
    /* Outer pill wrapper */
    .gen-model-tabs {
        padding: 4px !important;   /* equal all sides */
        align-items: center !important;
    }
    /* Every tab button — symmetric vertical padding */
    .gen-model-tab,
    .gen-aspect-tab,
    .gen-res-tab {
        padding-top:    6px !important;
        padding-bottom: 6px !important;
        padding-left:   10px !important;
        padding-right:  10px !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Active tab — same padding, just different bg */
    .gen-model-tab.active,
    .gen-aspect-tab.active,
    .gen-res-tab.active {
        padding-top:    6px !important;
        padding-bottom: 6px !important;
        padding-left:   10px !important;
        padding-right:  10px !important;
    }
    /* Cost badge inside tab — vertically centered */
    .gen-tab-cost {
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1 !important;
        padding: 2px 5px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* ── FIX 4: Toast / credit popup — always centered below header on all devices ── */
.ca-toast {
    position: fixed !important;
    top: 5.2rem !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    max-width: calc(100vw - 2rem) !important;
    margin: 0 !important;
    text-align: center !important;
    z-index: 9999 !important;
}
/* On very small screens keep a comfortable margin from edges */
@media (max-width: 480px) {
    .ca-toast {
        top: 4.8rem !important;
        max-width: calc(100vw - 2.5rem) !important;
        font-size: 0.74rem !important;
        padding: 0.55rem 1rem !important;
        white-space: normal !important;
        word-break: break-word !important;
        text-align: center !important;
    }
}

/* ── Keep no-activity block centered & responsive ── */
.ca-acct-no-activity {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}
.ca-acct-no-act-sub {
    font-size: 12px;
    color: #a8a29e;
    margin-bottom: 16px;
    max-width: 240px;
    line-height: 1.5;
}
.ca-acct-no-act-btn {
    display: inline-block;
    white-space: nowrap;
}



/* Panel layout */

/* Filter chips */

/* Icon wrap */


/* Inner panel (now lives inside ca-acct-left-panel) */

/* Admin notif table improvements */
#notif-hist-table td { }

/* Notif item — fix dismiss button alignment on small screens */
@media (max-width: 480px) {
}

/* Smooth tab transition for notif panel */
@keyframes ca-tab-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ComfyAI Cloud Ultimate — BUTTON & ASPECT-RATIO FIX (v21)
   Fix: Download / Share / Expand / Edit buttons NEVER overlap the image card
   Fix: 9:16 and 1:1 images never push buttons off-screen in edit mode
   Fix: Padding is JS-driven via _syncResultPadding() + CSS safe fallbacks
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. Floating action row — always above the prompt-bar overlay */
.gen-floating-actions {
    position: relative;
    z-index: 50 !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    /* Ensure buttons never sit inside the image card */
    margin-top: 0.5rem !important;
}

/* 2. Individual buttons never shrink to invisible */
.gen-float-btn {
    flex-shrink: 0;
    min-width: max-content;
}

/* 3. Result wrapper must never clip its children (buttons live outside the image) */
.gen-result-wrapper {
    overflow: visible !important;
}
.gen-atomic-wrap {
    overflow: hidden !important; /* image itself clips to border-radius */
}

/* 4. Desktop baseline clearance — JS _syncResultPadding() overrides this dynamically */
@media (min-width: 768px) {
    #single-result-container {
        padding-bottom: 14rem;
    }

    /* EDIT MODE desktop: image strip makes prompt bar ~90px taller */
    body.ca-edit-mode #single-result-container {
        padding-bottom: 22rem !important;
    }

    /* 9:16 + edit mode desktop: extra tall bar + portrait image — need maximum clearance */
    body.ca-edit-mode #single-result-container:has(.gen-result-wrapper[data-aspect="9:16"]),
    body.ca-edit-mode #single-result-container:has(.gen-result-wrapper[data-aspect="1:1"]) {
        padding-bottom: 24rem !important;
    }

    /* Model selector pill z-stacking: below buttons, above content */
    .sidebar-model-row {
        position: relative;
        z-index: 30 !important;
    }
}

/* 5. Desktop medium — tablets 768-1024px (slightly shorter viewports) */
@media (min-width: 768px) and (max-width: 1024px) {
    body.ca-edit-mode #single-result-container {
        padding-bottom: 23rem !important;
    }
    body.ca-edit-mode #single-result-container:has(.gen-result-wrapper[data-aspect="9:16"]),
    body.ca-edit-mode #single-result-container:has(.gen-result-wrapper[data-aspect="1:1"]) {
        padding-bottom: 26rem !important;
    }
    .gen-floating-actions {
        flex-wrap: wrap !important;
        gap: 0.45rem !important;
    }
}

/* 6. Mobile — standard clearance */
@media (max-width: 767px) {
    #single-result-container {
        padding-bottom: 15rem !important;
    }

    /* Mobile edit mode: image strip is visible below prompt bar */
    body.ca-edit-mode #single-result-container {
        padding-bottom: 22rem !important;
    }

    /* Mobile edit mode + 9:16 or 1:1: the image is taller, needs more room */
    body.ca-edit-mode #single-result-container:has(.gen-result-wrapper[data-aspect="9:16"]),
    body.ca-edit-mode #single-result-container:has(.gen-result-wrapper[data-aspect="1:1"]) {
        padding-bottom: 24rem !important;
    }

    /* Buttons wrap neatly — never clip or overflow */
    .gen-floating-actions {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        padding: 0 0.25rem !important;
    }

    /* Compact pills on small screens so all 4 buttons fit in 2 columns */
    .gen-float-btn {
        padding: 0.45rem 0.7rem !important;
        font-size: 0.625rem !important;
        gap: 0.3rem !important;
    }
}

/* 7. Extra-small phones (≤ 390px) */
@media (max-width: 390px) {
    .gen-float-btn {
        padding: 0.4rem 0.55rem !important;
        font-size: 0.575rem !important;
    }
    .gen-floating-actions {
        gap: 0.3rem !important;
    }
}



/* ══════════════════════════════════════════════════════════
   REWARDS ADMIN — comfyarts-settings.php styles
   ══════════════════════════════════════════════════════════ */

/* Stat grid */
.rwa-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
@media (max-width: 640px) { .rwa-stat-grid { grid-template-columns: repeat(2, 1fr); } }

.rwa-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--rad-lg);
    padding: 18px 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.15s, box-shadow 0.15s;
}
.rwa-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.rwa-stat::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: var(--rad-lg) var(--rad-lg) 0 0;
}
.rwa-stat.indigo::before { background: var(--indigo); }
.rwa-stat.amber::before  { background: var(--amber); }
.rwa-stat.green::before  { background: var(--green); }
.rwa-stat.red::before    { background: var(--red); }
.rwa-stat-val { font-size: 1.9rem; font-weight: 900; line-height: 1; margin-bottom: 5px; }
.rwa-stat.indigo .rwa-stat-val { color: var(--indigo); }
.rwa-stat.amber  .rwa-stat-val { color: var(--amber);  }
.rwa-stat.green  .rwa-stat-val { color: var(--green);  }
.rwa-stat.red    .rwa-stat-val { color: var(--red);    }
.rwa-stat-lbl { font-size: .66rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .07em; }

/* Inner tabs */
.rwa-tabs { display: flex; gap: 1px; border-bottom: 2px solid var(--border); margin-bottom: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rwa-tab { padding: 10px 16px; font-size: .76rem; font-weight: 700; color: var(--text-3); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; transition: all .08s; background: transparent; user-select: none; position: relative; }
.rwa-tab:hover { color: var(--text-2); background: var(--bg); }
.rwa-tab.active { color: var(--indigo); border-bottom-color: var(--indigo); background: var(--indigo-bg); }
.rwa-badge { background: var(--red); color: #fff; font-size: .56rem; font-weight: 800; padding: 1px 5px; border-radius: 99px; margin-left: 4px; }
.rwa-panel { display: none; animation: csFadeIn .1s ease; }
.rwa-panel.active { display: block; }

/* Task cards in admin */
.rwa-task-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--rad-lg); padding: 20px; margin-bottom: 14px; transition: border-color .1s, box-shadow .1s; }
.rwa-task-card:hover { border-color: rgba(99,102,241,.25); box-shadow: 0 4px 18px rgba(99,102,241,.08); }
.rwa-task-card.inactive { opacity: .6; border-style: dashed; }
.rwa-task-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.rwa-task-title { font-size: .94rem; font-weight: 800; color: var(--text); }
.rwa-credit-pill-admin { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; background: linear-gradient(135deg,rgba(16,185,129,.12),rgba(16,185,129,.06)); color: #059669; border: 1px solid rgba(16,185,129,.25); font-size: .76rem; font-weight: 800; flex-shrink: 0; }
.rwa-task-actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }

/* Submission cards */
.rwa-sub-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--rad-lg); padding: 16px 18px; margin-bottom: 10px; border-left: 3px solid var(--border); transition: border-color .08s; }
.rwa-sub-card.pending  { border-left-color: var(--amber); }
.rwa-sub-card.approved { border-left-color: var(--green); opacity: .85; }
.rwa-sub-card.retry    { border-left-color: var(--red); }
.rwa-sub-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.rwa-sub-user { font-weight: 800; font-size: .82rem; color: var(--text); }
.rwa-sub-task { font-size: .7rem; color: var(--text-3); }
.rwa-sub-time { font-size: .65rem; color: var(--text-3); margin-left: auto; }
.rwa-sub-proof { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: .78rem; color: var(--text-2); line-height: 1.6; word-break: break-word; margin-bottom: 10px; white-space: pre-wrap; }
.rwa-sub-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.rwa-approve-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 8px; background: var(--green); color: #fff; font-size: .74rem; font-weight: 800; border: none; cursor: pointer; box-shadow: 0 2px 10px rgba(16,185,129,.3); transition: all .1s; }
.rwa-approve-btn:hover { background: #059669; transform: translateY(-1px); }
.rwa-retry-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 8px; background: var(--red-bg); color: var(--red); font-size: .74rem; font-weight: 800; border: 1px solid rgba(239,68,68,.2); cursor: pointer; transition: all .1s; }
.rwa-retry-btn:hover { background: var(--red); color: #fff; }

.rwa-note-input { flex: 1; min-width: 160px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: .74rem; background: var(--bg); color: var(--text); outline: none; transition: border-color .08s; }
.rwa-note-input:focus { border-color: var(--indigo); }

/* Status badges admin */
.rwa-status { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 99px; font-size: .62rem; font-weight: 700; }
.rwa-status.pending  { background: rgba(245,158,11,.1);  color: #d97706; border: 1px solid rgba(245,158,11,.2); }
.rwa-status.approved { background: rgba(16,185,129,.1);  color: #059669; border: 1px solid rgba(16,185,129,.2); }
.rwa-status.retry    { background: rgba(239,68,68,.1);   color: #dc2626; border: 1px solid rgba(239,68,68,.2); }
.rwa-status.active   { background: var(--indigo-bg);     color: var(--indigo); border: 1px solid var(--indigo-border); }
.rwa-status.inactive { background: var(--bg);            color: var(--text-3); border: 1px solid var(--border); }

/* Modal */
.rwa-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); backdrop-filter: blur(8px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.rwa-modal { background: #fff; border-radius: 20px; width: 100%; max-width: 580px; box-shadow: 0 32px 80px rgba(0,0,0,.2); overflow: hidden; animation: supModalSlide .22s cubic-bezier(.34,1.56,.64,1); }
.rwa-modal-head { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg,#f5f3ff,#ede9fe); }
.rwa-modal-title { font-weight: 800; font-size: .96rem; color: #4f46e5; }
.rwa-modal-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; max-height: 65svh; overflow-y: auto; }
.rwa-modal-foot { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; background: #fafafa; }

/* Steps builder */
.rwa-step-builder { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.rwa-step-row { display: flex; gap: 6px; align-items: center; }
.rwa-step-idx { width: 22px; height: 22px; border-radius: 6px; background: var(--indigo-bg); color: var(--indigo); font-size: .62rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--indigo-border); }
.rwa-step-input { flex: 1; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); font-size: .8rem; color: var(--text); outline: none; transition: border-color .08s; }
.rwa-step-input:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
.rwa-step-del { width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(239,68,68,.2); background: var(--red-bg); color: var(--red); cursor: pointer; font-size: .8rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .08s; }
.rwa-step-del:hover { background: var(--red); color: #fff; }

/* Push card */
.rwa-push-card { background: linear-gradient(135deg,rgba(99,102,241,.05),rgba(139,92,246,.04)); border: 1.5px solid var(--indigo-border); border-radius: var(--rad-lg); padding: 20px; }

/* Empty admin */
.rwa-empty-admin { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; gap: 10px; }

@media (max-width: 600px) {
    .rwa-sub-head { flex-wrap: wrap; }
    .rwa-sub-actions { flex-direction: column; align-items: stretch; }
    .rwa-note-input { min-width: 100%; width: 100%; }
    .rwa-approve-btn, .rwa-retry-btn { justify-content: center; }
}


/* ═══════════════════════════════════════════════════════════════════
   REWARDS SYSTEM — Enterprise UI v23
   Tokens: --orange(#f59e0b) --indigo(#6366f1) --bg(#faf8f4)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tab panel container ── */
#acct-tab-rewards {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--bg);
}

/* ── Header ── */
.rw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.125rem 0.75rem;
    border-bottom: 1px solid var(--border);
    background: #fff;
    flex-shrink: 0;
}
.rw-header-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-1);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.rw-refresh-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s, transform 0.3s;
    flex-shrink: 0;
}
.rw-refresh-btn:hover {
    border-color: var(--orange);
    color: var(--orange);
    transform: rotate(180deg);
}

/* ── Stats strip ── */
.rw-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--border);
    background: #fff;
    flex-shrink: 0;
}
.rw-stat {
    padding: 0.75rem 0.5rem;
    text-align: center;
    border-right: 1px solid var(--border);
}
.rw-stat:last-child { border-right: none; }
.rw-stat-val {
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 2px;
}
.rw-stat-val.indigo { color: var(--indigo); }
.rw-stat-val.amber  { color: var(--orange); }
.rw-stat-val.green  { color: #16a34a; }
.rw-stat-lbl {
    font-size: 0.57rem;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

/* ── Task list scroll container ── */
#rw-task-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: 0.875rem 0.875rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
#rw-task-list::-webkit-scrollbar { width: 3px; }
#rw-task-list::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    border-radius: 2px;
}

/* ── Task card ── */
.rw-task-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ca-ease-spring);
    will-change: transform;
}
.rw-task-card:hover {
    border-color: rgba(245,158,11,0.4);
    box-shadow: 0 6px 24px rgba(245,158,11,0.09), 0 2px 8px rgba(0,0,0,0.04);
    transform: translateY(-1px);
}
.rw-task-card.status-approved {
    border-color: rgba(22,163,74,0.3);
}
.rw-task-card.status-pending {
    border-color: rgba(245,158,11,0.35);
}
.rw-task-card.status-retry {
    border-color: rgba(239,68,68,0.3);
}

/* Top accent stripe */
.rw-task-stripe {
    height: 3px;
}
.rw-task-card             .rw-task-stripe { background: linear-gradient(90deg,#f59e0b 0%,#fbbf24 60%,#fde68a 100%); }
.rw-task-card.status-approved .rw-task-stripe { background: linear-gradient(90deg,#16a34a,#4ade80); }
.rw-task-card.status-pending  .rw-task-stripe { background: linear-gradient(90deg,#f59e0b,#fde68a); }
.rw-task-card.status-retry    .rw-task-stripe { background: linear-gradient(90deg,#ef4444,#fca5a5); }

.rw-task-body { padding: 0.875rem 0.875rem 0.75rem; }

/* Task top row */
.rw-task-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}
.rw-task-title {
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--text-1);
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.rw-task-desc {
    font-size: 0.74rem;
    color: var(--text-3);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

/* ── Credit pill ── */
.rw-credit-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 6px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    flex-shrink: 0;
    white-space: nowrap;
    letter-spacing: -0.01em;
    transition: transform 0.15s, box-shadow 0.15s;
}
.rw-credit-pill:hover { transform: scale(1.04); }

.rw-credit-pill.state-locked {
    background: var(--bg-2);
    color: var(--text-3);
    border: 1px solid var(--border);
}
.rw-credit-pill.state-open {
    background: linear-gradient(135deg,rgba(245,158,11,0.14),rgba(251,191,36,0.08));
    color: #92400e;
    border: 1px solid rgba(245,158,11,0.32);
    animation: rwPillPulse 3s ease-in-out infinite;
}
@keyframes rwPillPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.15); }
    50%      { box-shadow: 0 0 0 4px rgba(245,158,11,0.12); }
}
.rw-credit-pill.state-done {
    background: linear-gradient(135deg,#16a34a,#22c55e);
    color: #fff;
    border: none;
    box-shadow: 0 3px 10px rgba(22,163,74,0.28);
}
.rw-pill-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    flex-shrink: 0;
    font-style: normal;
}
.state-locked .rw-pill-icon { background: rgba(0,0,0,0.07); }
.state-open   .rw-pill-icon { background: rgba(245,158,11,0.18); }
.state-done   .rw-pill-icon { background: rgba(255,255,255,0.28); }

/* ── Status badge ── */
.rw-status {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.rw-status.s-open     { background: rgba(245,158,11,0.1);  color: #92400e; border: 1px solid rgba(245,158,11,0.25); }
.rw-status.s-pending  { background: rgba(99,102,241,0.08); color: var(--indigo); border: 1px solid var(--indigo-border); }
.rw-status.s-approved { background: rgba(22,163,74,0.09);  color: #16a34a; border: 1px solid rgba(22,163,74,0.22); }
.rw-status.s-retry    { background: rgba(239,68,68,0.08);  color: #dc2626; border: 1px solid rgba(239,68,68,0.2); }

/* ── Steps list — elegant numbered ── */
.rw-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg);
}
.rw-step {
    display: flex;
    align-items: flex-start;
    gap: 0;
    border-bottom: 1px solid var(--border);
    transition: background 0.12s;
}
.rw-step:last-child { border-bottom: none; }
.rw-step:hover { background: rgba(255,255,255,0.8); }

.rw-step-num {
    width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.64rem;
    font-weight: 900;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    letter-spacing: 0;
    position: relative;
}
/* Each step number gets a unique accent color */
.rw-step:nth-child(1) .rw-step-num { color: #b45309; background: rgba(245,158,11,0.08); }
.rw-step:nth-child(2) .rw-step-num { color: var(--indigo-dark); background: rgba(99,102,241,0.07); }
.rw-step:nth-child(3) .rw-step-num { color: #0e7490; background: rgba(6,182,212,0.07); }
.rw-step:nth-child(4) .rw-step-num { color: #16a34a; background: rgba(22,163,74,0.07); }
.rw-step:nth-child(5) .rw-step-num { color: #9333ea; background: rgba(147,51,234,0.07); }
.rw-step:nth-child(6) .rw-step-num { color: #dc2626; background: rgba(239,68,68,0.07); }

.rw-step-text {
    flex: 1;
    font-size: 0.75rem;
    color: var(--text-2);
    line-height: 1.55;
    padding: 0.6rem 0.75rem;
    font-weight: 500;
}

/* ── Submit area — glass card ── */
.rw-submit-area {
    border: 1.5px solid var(--indigo-border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(99,102,241,0.06);
}
.rw-submit-label {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(90deg, var(--indigo-bg), rgba(139,92,246,0.06));
    border-bottom: 1px solid var(--indigo-border);
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--indigo);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.rw-submit-input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: none;
    background: #fff;
    font-size: 0.78rem;
    color: var(--text-1);
    font-family: inherit;
    resize: none;
    outline: none;
    line-height: 1.6;
    min-height: 64px;
    transition: background 0.15s;
}
.rw-submit-input:focus { background: rgba(99,102,241,0.018); }
.rw-submit-input::placeholder { color: var(--text-3); }
.rw-submit-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg);
    border-top: 1px solid var(--border);
}
.rw-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.45rem 0.875rem;
    border-radius: 999px;
    background: linear-gradient(135deg,var(--indigo),#8b5cf6);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    border: none;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(99,102,241,0.32);
    transition: transform 0.15s var(--ca-ease-spring), box-shadow 0.15s;
    letter-spacing: 0.01em;
    white-space: nowrap;
    flex-shrink: 0;
}
.rw-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 5px 18px rgba(99,102,241,0.42);
}
.rw-submit-btn:active:not(:disabled) { transform: scale(0.96); }
.rw-submit-btn:disabled { opacity: 0.45; pointer-events: none; }

/* ── Feedback notes ── */
.rw-feedback {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0.625rem 0.75rem;
    border-radius: 10px;
    font-size: 0.73rem;
    line-height: 1.55;
    margin-top: 0.5rem;
    animation: rwFeedIn 0.25s var(--ca-ease-spring);
}
@keyframes rwFeedIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.rw-feedback.fb-pending  { background: rgba(99,102,241,0.05); border: 1px solid var(--indigo-border); color: #3730a3; }
.rw-feedback.fb-approved { background: rgba(22,163,74,0.06);  border: 1px solid rgba(22,163,74,0.22); color: #166534; }
.rw-feedback.fb-retry    { background: rgba(239,68,68,0.05);  border: 1px solid rgba(239,68,68,0.2);  color: #991b1b; }
.rw-feedback-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
    margin-top: 1px;
}
.fb-pending  .rw-feedback-icon { background: var(--indigo-bg); }
.fb-approved .rw-feedback-icon { background: rgba(22,163,74,0.12); }
.fb-retry    .rw-feedback-icon { background: rgba(239,68,68,0.1); }

@keyframes rwCheckPop {
    0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
    65%  { transform: scale(1.25) rotate(5deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
.rw-check-anim { animation: rwCheckPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both; display: inline-block; }

/* ── Skeleton loading ── */
.rw-skeleton-card {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 1rem;
}
.rw-skel {
    background: linear-gradient(90deg, var(--bg-2) 25%, rgba(228,222,212,0.5) 50%, var(--bg-2) 75%);
    background-size: 200% 100%;
    animation: rwShimmer 1.5s ease infinite;
    border-radius: 6px;
    display: block;
}
@keyframes rwShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Empty state ── */
.rw-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.625rem;
    padding: 2.5rem 1rem;
    flex: 1;
    min-height: 180px;
}
.rw-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: linear-gradient(135deg,rgba(245,158,11,0.12),rgba(251,191,36,0.06));
    border: 1px solid rgba(245,158,11,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rw-empty-title {
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--text-2);
    letter-spacing: -0.01em;
    margin: 0;
}
.rw-empty-sub {
    font-size: 0.73rem;
    color: var(--text-3);
    max-width: 230px;
    line-height: 1.6;
    margin: 0;
}

/* ── Card enter animation ── */
@keyframes rwCardIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.rw-task-card { animation: rwCardIn 0.28s var(--ca-ease-spring) both; }
.rw-task-card:nth-child(1) { animation-delay: 0ms; }
.rw-task-card:nth-child(2) { animation-delay: 50ms; }
.rw-task-card:nth-child(3) { animation-delay: 100ms; }
.rw-task-card:nth-child(4) { animation-delay: 140ms; }

/* mobile replaced below */

/* ══════════════════════════════════════════════════════════
   REWARDS ADMIN SETTINGS — comfyarts-settings.php
   ══════════════════════════════════════════════════════════ */
.rwa-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
@media(max-width:640px) { .rwa-stat-grid { grid-template-columns:repeat(2,1fr); } }
.rwa-stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--rad-lg); padding:18px 16px; text-align:center; position:relative; overflow:hidden; box-shadow:var(--shadow); }
.rwa-stat::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:var(--rad-lg) var(--rad-lg) 0 0; }
.rwa-stat.indigo::before { background:var(--indigo); } .rwa-stat.amber::before { background:var(--amber); }
.rwa-stat.green::before  { background:var(--green);  } .rwa-stat.red::before   { background:var(--red); }
.rwa-stat-val { font-size:1.9rem; font-weight:900; line-height:1; margin-bottom:5px; }
.rwa-stat.indigo .rwa-stat-val { color:var(--indigo); } .rwa-stat.amber .rwa-stat-val { color:var(--amber); }
.rwa-stat.green  .rwa-stat-val { color:var(--green);  } .rwa-stat.red   .rwa-stat-val { color:var(--red);   }
.rwa-stat-lbl { font-size:.66rem; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.07em; }
.rwa-tabs { display:flex; gap:1px; border-bottom:2px solid var(--border); margin-bottom:20px; overflow-x:auto; }
.rwa-tab { padding:10px 16px; font-size:.76rem; font-weight:700; color:var(--text-3); cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap; transition:all .08s; background:transparent; }
.rwa-tab:hover { color:var(--text-2); background:var(--bg); }
.rwa-tab.active { color:var(--indigo); border-bottom-color:var(--indigo); background:var(--indigo-bg); }
.rwa-badge { background:var(--red); color:#fff; font-size:.56rem; font-weight:800; padding:1px 5px; border-radius:99px; margin-left:4px; }
.rwa-panel { display:none; animation:csFadeIn .1s ease; } .rwa-panel.active { display:block; }
.rwa-task-card { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--rad-lg); padding:20px; margin-bottom:14px; transition:border-color .1s,box-shadow .1s; }
.rwa-task-card:hover { border-color:rgba(99,102,241,.25); box-shadow:0 4px 18px rgba(99,102,241,.08); }
.rwa-task-card.inactive { opacity:.6; border-style:dashed; }
.rwa-task-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.rwa-task-title { font-size:.94rem; font-weight:800; color:var(--text); }
.rwa-credit-pill-admin { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:999px; background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(16,185,129,.06)); color:#059669; border:1px solid rgba(16,185,129,.25); font-size:.76rem; font-weight:800; flex-shrink:0; }
.rwa-task-actions { display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; }
.rwa-sub-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--rad-lg); padding:16px 18px; margin-bottom:10px; border-left:3px solid var(--border); }
.rwa-sub-card.pending  { border-left-color:var(--amber); } .rwa-sub-card.approved { border-left-color:var(--green); opacity:.85; }
.rwa-sub-card.retry    { border-left-color:var(--red); }
.rwa-sub-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.rwa-sub-user { font-weight:800; font-size:.82rem; color:var(--text); }
.rwa-sub-task { font-size:.7rem; color:var(--text-3); } .rwa-sub-time { font-size:.65rem; color:var(--text-3); margin-left:auto; }
.rwa-sub-proof { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-size:.78rem; color:var(--text-2); line-height:1.6; word-break:break-word; margin-bottom:10px; white-space:pre-wrap; }
.rwa-sub-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.rwa-approve-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 14px; border-radius:8px; background:var(--green); color:#fff; font-size:.74rem; font-weight:800; border:none; cursor:pointer; box-shadow:0 2px 10px rgba(16,185,129,.3); transition:all .1s; }
.rwa-approve-btn:hover { background:#059669; transform:translateY(-1px); }
.rwa-retry-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:8px; background:var(--red-bg); color:var(--red); font-size:.74rem; font-weight:800; border:1px solid rgba(239,68,68,.2); cursor:pointer; transition:all .1s; }
.rwa-retry-btn:hover { background:var(--red); color:#fff; }
.rwa-note-input { flex:1; min-width:160px; padding:6px 10px; border:1px solid var(--border); border-radius:7px; font-size:.74rem; background:var(--bg); color:var(--text); outline:none; }
.rwa-note-input:focus { border-color:var(--indigo); }
.rwa-status { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:99px; font-size:.62rem; font-weight:700; }
.rwa-status.pending  { background:rgba(245,158,11,.1); color:#d97706; border:1px solid rgba(245,158,11,.2); }
.rwa-status.approved { background:rgba(16,185,129,.1); color:#059669; border:1px solid rgba(16,185,129,.2); }
.rwa-status.retry    { background:rgba(239,68,68,.1);  color:#dc2626; border:1px solid rgba(239,68,68,.2); }
.rwa-status.active   { background:var(--indigo-bg);    color:var(--indigo); border:1px solid var(--indigo-border); }
.rwa-status.inactive { background:var(--bg); color:var(--text-3); border:1px solid var(--border); }
.rwa-modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,.5); backdrop-filter:blur(8px); z-index:9999; display:flex; align-items:center; justify-content:center; padding:16px; }
.rwa-modal { background:#fff; border-radius:20px; width:100%; max-width:580px; box-shadow:0 32px 80px rgba(0,0,0,.2); overflow:hidden; animation:supModalSlide .22s cubic-bezier(.34,1.56,.64,1); }
.rwa-modal-head { padding:18px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; background:linear-gradient(135deg,#f5f3ff,#ede9fe); }
.rwa-modal-title { font-weight:800; font-size:.96rem; color:#4f46e5; }
.rwa-modal-body { padding:22px; display:flex; flex-direction:column; gap:14px; max-height:65svh; overflow-y:auto; }
.rwa-modal-foot { padding:14px 22px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; background:#fafafa; }
.rwa-step-builder { display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.rwa-step-row { display:flex; gap:6px; align-items:center; }
.rwa-step-idx { width:22px; height:22px; border-radius:6px; background:var(--indigo-bg); color:var(--indigo); font-size:.62rem; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid var(--indigo-border); }
.rwa-step-input { flex:1; padding:7px 10px; border:1px solid var(--border); border-radius:7px; background:var(--bg); font-size:.8rem; color:var(--text); outline:none; transition:border-color .08s; }
.rwa-step-input:focus { border-color:var(--indigo); box-shadow:0 0 0 3px rgba(99,102,241,.1); }
.rwa-step-del { width:26px; height:26px; border-radius:6px; border:1px solid rgba(239,68,68,.2); background:var(--red-bg); color:var(--red); cursor:pointer; font-size:.8rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .08s; }
.rwa-step-del:hover { background:var(--red); color:#fff; }
.rwa-push-card { background:linear-gradient(135deg,rgba(99,102,241,.05),rgba(139,92,246,.04)); border:1.5px solid var(--indigo-border); border-radius:var(--rad-lg); padding:20px; }
.rwa-empty-admin { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px; text-align:center; gap:10px; }
@media(max-width:600px) {
    .rwa-sub-head { flex-wrap:wrap; }
    .rwa-sub-actions { flex-direction:column; align-items:stretch; }
    .rwa-note-input { min-width:100%; }
    .rwa-approve-btn,.rwa-retry-btn { justify-content:center; }
}

/* ═══════════════════════════════════════════════════════════════════
   REWARDS — GLOBAL MOBILE + DEVICE COMPATIBILITY v25
   Tested: iOS Safari, Android Chrome, Samsung Internet, tablet
   ═══════════════════════════════════════════════════════════════════ */

/* ── ALL SCREENS: base fixes ── */
#acct-tab-rewards {
    /* Use flex column so stats+header are fixed, list scrolls */
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--bg);
    /* GPU layer for smoother scroll */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

#rw-task-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; /* iOS momentum scroll */
    overscroll-behavior-y: contain;    /* prevent scroll chaining */
    scroll-behavior: smooth;
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* Prevent content clipping */
    will-change: scroll-position;
}

/* ── MOBILE: ≤767px (phones portrait + landscape) ── */
@media (max-width: 767px) {

    /* Left panel: auto height, large enough to show tasks */
    .ca-acct-left-panel {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        flex: 1 1 auto;
        overflow: hidden;
    }

    /* Rewards panel: fill available space and scroll */
    #acct-tab-rewards {
        overflow: hidden;
        flex: 1 1 auto;
        min-height: 0;
    }

    #rw-task-list {
        /* Extra bottom clearance for nav bar + safe area */
        padding-bottom: max(5rem, calc(4rem + env(safe-area-inset-bottom)));
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        gap: 0.625rem;
    }

    /* Stats: compact on phone */
    .rw-stats-row { border-bottom: 1px solid var(--border); }
    .rw-stat { padding: 0.6rem 0.25rem; }
    .rw-stat-val { font-size: 1.2rem; }
    .rw-stat-lbl { font-size: 0.53rem; }

    /* Header */
    .rw-header { padding: 0.625rem 0.875rem; }
    .rw-header-title { font-size: 0.72rem; }

    /* Task card */
    .rw-task-card { border-radius: 12px; }
    .rw-task-card:hover { transform: none; } /* no hover effect on touch */
    .rw-task-body { padding: 0.75rem 0.75rem 0.625rem; }
    .rw-task-title { font-size: 0.82rem; }
    .rw-task-desc { font-size: 0.72rem; }

    /* Credit pill — move above title on narrow screens */
    .rw-task-top { flex-wrap: nowrap; align-items: flex-start; }
    .rw-credit-pill { font-size: 0.67rem; padding: 4px 8px 4px 5px; }
    .rw-pill-icon { width: 14px; height: 14px; font-size: 8px; }

    /* Steps */
    .rw-steps { border-radius: 8px; }
    .rw-step-num { width: 32px; min-height: 34px; font-size: 0.62rem; }
    .rw-step-text { font-size: 0.72rem; padding: 0.5rem 0.625rem; }

    /* Submit area */
    .rw-submit-label { font-size: 0.6rem; padding: 0.45rem 0.625rem; }
    .rw-submit-input {
        font-size: 16px !important; /* CRITICAL: prevent iOS auto-zoom */
        min-height: 56px;
        padding: 0.5rem 0.625rem;
    }
    .rw-submit-footer {
        flex-wrap: wrap;
        gap: 0.375rem;
        padding: 0.5rem 0.625rem;
    }
    .rw-submit-btn {
        width: 100%;
        justify-content: center;
        padding: 0.6rem 1rem;
        font-size: 0.75rem;
        min-height: 44px; /* Apple HIG minimum tap target */
        border-radius: 10px;
    }

    /* Feedback notes */
    .rw-feedback { font-size: 0.71rem; padding: 0.5rem 0.625rem; }

    /* Status badge */
    .rw-status { font-size: 0.58rem; padding: 2px 7px; }

    /* Empty state */
    .rw-empty { padding: 1.5rem 0.75rem; min-height: 160px; }
    .rw-empty-icon { width: 44px; height: 44px; border-radius: 11px; }
    .rw-empty-title { font-size: 0.82rem; }
    .rw-empty-sub { font-size: 0.71rem; }

    /* Refresh button — bigger tap area on mobile */
    .rw-refresh-btn { width: 32px; height: 32px; }

    /* Disable card animation on mobile (performance + no hover) */
    .rw-task-card { animation: none; }
}

/* ── SMALL PHONES: ≤390px ── */
@media (max-width: 390px) {
    .rw-stat-val { font-size: 1.1rem; }
    .rw-task-title { font-size: 0.8rem; }
    .rw-step-text { font-size: 0.7rem; }
    .rw-credit-pill { font-size: 0.65rem; }
    .rw-task-body { padding: 0.625rem; }
}

/* ── TABLET: 768px–1024px ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .ca-acct-left-panel {
        height: calc(100vh - 280px) !important;
        min-height: 420px !important;
        max-height: 700px !important;
    }
    #rw-task-list { padding: 0.875rem; gap: 0.625rem; }
    .rw-submit-input { font-size: 16px !important; } /* prevent iPad auto-zoom too */
}

/* ── iOS SAFE AREA: notch + home indicator ── */
@supports (padding: max(0px)) {
    #rw-task-list {
        padding-bottom: max(0.875rem, env(safe-area-inset-bottom));
    }
    @media (max-width: 767px) {
        #rw-task-list {
            padding-bottom: max(5rem, calc(4rem + env(safe-area-inset-bottom)));
        }
    }
}

/* ── TOUCH: remove hover effects that flicker on tap ── */
@media (hover: none) and (pointer: coarse) {
    .rw-task-card:hover {
        border-color: var(--border);
        box-shadow: none;
        transform: none;
    }
    .rw-credit-pill:hover { transform: none; }
    .rw-submit-btn:hover:not(:disabled) {
        transform: none;
        box-shadow: 0 3px 12px rgba(99,102,241,0.32);
    }
    .rw-refresh-btn:hover {
        transform: none;
    }
    /* Larger tap targets */
    .rw-submit-btn { min-height: 44px; }
    .rw-refresh-btn { min-height: 44px; min-width: 44px; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
    .rw-task-card { animation: none; }
    .rw-credit-pill.state-open { animation: none; }
    .rw-feedback { animation: none; }
    .rw-check-anim { animation: none; }
    .rw-skel { animation: none; background: var(--bg-2); }
}


/* ═══════════════════════════════════════════════════════
   ANDROID-ONLY PATCHES
   Using -webkit-min-device-pixel-ratio to target Android
   Chrome exclusively — iOS Safari does not match this
   combined with hover:none/pointer:coarse.
   NO changes to iOS or desktop.
   ═══════════════════════════════════════════════════════ */

/* Android detection:
   - hover:none + pointer:coarse  = touch device
   - not (-webkit-touch-callout)  = NOT iOS (iOS supports -webkit-touch-callout)
   Together these match Android Chrome only.                */
@media (hover: none) and (pointer: coarse) and (not (-webkit-touch-callout: none)) {

    /* ── 1. REWARDS: fully hidden on Android ── */
    /* Tab button */
    .ca-acct-tab[data-tab="rewards"],
    button[data-tab="rewards"] {
        display: none !important;
    }

    /* Tab panel */
    #acct-tab-rewards {
        display: none !important;
    }

    /* Badge */
    #acct-rewards-badge {
        display: none !important;
    }

    /* If rewards was default-active, auto-activate prompts tab instead */
    /* (handled via JS below — see inline <script> in index.php)         */

    /* ── 2. GENERATE PAGE: single cursor on Android prompt box ── */
    #gen-prompt {
        /* Prevent phantom cursor line at top-of-textarea on Android:
           padding-top flush with line-height so there is no empty
           gap above the first line for Android to place a ghost cursor */
        padding-top: 0.5625rem !important;
        padding-bottom: 0.5625rem !important;
        /* Clip: exact single-line height so there's no overflowing space */
        min-height: 2.5rem !important;
        max-height: 2.5rem !important;
        height: 2.5rem !important;
        line-height: 1.4 !important;
        /* Disable user resize entirely */
        resize: none !important;
        /* Android sometimes shows extra cursor when box has overflow room */
        overflow: hidden !important;
        /* Ensure caret stays in the content area, not in padding zone */
        box-sizing: border-box !important;
        display: block !important;
        vertical-align: middle !important;
        /* Suppress browser-injected cursor artefacts */
        -webkit-user-modify: read-write-plaintext-only !important;
        caret-color: var(--indigo) !important;
    }
    /* Expand on focus (user is typing) */
    #gen-prompt:focus {
        max-height: 4rem !important;
        overflow-y: auto !important;
    }
}


/* ═══════════════════════════════════════════════════════
   GLOBAL: Single-cursor prompt box — all devices
   Fixes phantom second cursor when tapping top of textarea
   on iOS Safari, Android Chrome, and desktop browsers.
   ═══════════════════════════════════════════════════════ */

#gen-prompt {
    /* rows="1" means internal box = exactly 1 line.
       Padding must match so the visual height = internal height.
       No gap above line 1 = nowhere for a second cursor to appear. */
    box-sizing: border-box;
    overflow-y: auto;            /* allow scroll for long prompts     */
    overflow-x: hidden;
    resize: none;
    /* Consistent line-height prevents "tall" padding creating
       dead space above the text where a phantom cursor renders */
    line-height: 1.5;
    /* Vertical padding = (desired-height - font-size*line-height) / 2
       With font ~15px, line-height 1.5 → text block = 22.5px
       Padding ~0.875rem each side → total ≈ 50px — single row    */
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    /* Reset any inline height that could leave empty space */
    height: auto;
    min-height: 0;
}

/* Desktop / tablet — allow multi-line expansion on input event */
@media (min-width: 768px) {
    #gen-prompt {
        overflow-y: auto;
        min-height: 0;
        max-height: 6rem;
    }
}

/* All touch devices (iOS + Android) — one line until user types more */
@media (hover: none) and (pointer: coarse) {
    #gen-prompt {
        /*
         * Enable multi‑line prompts on touch devices.  The textarea
         * starts at a single‑line height (~2.5 rem) but is allowed to
         * expand and scroll as the user types.  We preserve the
         * line-height and padding to ensure the cursor sits in the
         * correct vertical location and remove the WebKit padding hacks
         * that caused phantom cursor gaps.  Overflow‑y auto allows
         * scrolling of long prompts without shifting the rest of the
         * layout.
         */
        height: auto !important;
        min-height: 2.5rem !important;
        max-height: 5rem !important;
        line-height: 1.4 !important;
        padding-top: 0.5625rem !important;
        padding-bottom: 0.5625rem !important;
        overflow-y: auto !important;
        resize: none !important;
        -webkit-padding-before: 0 !important;
        -webkit-padding-after: 0 !important;
        display: block !important;
        vertical-align: middle !important;
    }
    /* On focus maintain the dynamic sizing and scroll behaviour */
    #gen-prompt:focus {
        height: auto !important;
        min-height: 2.5rem !important;
        max-height: 5rem !important;
        overflow-y: auto !important;
    }
}

/* v22 FIX: On mobile, NEVER allow focus expansion — keeps prompt box fixed height.
   This overrides the touch-device :focus rules above that expand to 4rem. */
/*
 * On small touch devices allow the prompt textarea to grow up to
 * 5 rem in height and become scrollable instead of being locked to
 * exactly one line.  The previous implementation forced a fixed
 * 2.5 rem height with hidden overflow, which resulted in the
 * onscreen keyboard refusing to appear or hiding the caret off‑screen
 * on certain mobile browsers.  By setting `height:auto` and
 * increasing the max height we let the JavaScript (see v57 mobile
 * textarea fix in app.js) adjust the element’s height based on the
 * content while still capping its growth to preserve the layout.  The
 * textarea remains non‑resizable to avoid users dragging it larger
 * and prevents horizontal scrolling by only enabling vertical
 * scrolling when needed.
 */
@media (hover: none) and (pointer: coarse) and (max-width: 767px) {
    #gen-prompt,
    #gen-prompt:focus {
        height: auto !important;
        min-height: 2.85rem !important;
        max-height: 5rem !important;
        overflow-y: auto !important;
        resize: none !important;
    }
}


/* ═══════════════════════════════════════════════════════
   ANDROID ONLY — Complete Rewards removal
   
   Detection logic:
   - (hover:none) + (pointer:coarse) = any touch device
   - @supports not (-webkit-touch-callout:none) = NOT iOS
     (-webkit-touch-callout is iOS WebKit only; Android
      Chrome does not recognise it, so @supports fails = Android)
   
   iOS Safari, desktop — completely unaffected.
   ═══════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
    @supports not (-webkit-touch-callout: none) {

        /* 1. Hide the Rewards tab button */
        .ca-acct-tab[data-tab="rewards"] {
            display: none !important;
        }

        /* 2. Hide the Rewards panel */
        #acct-tab-rewards {
            display: none !important;
        }

        /* 3. Hide the Rewards badge on the tab */
        #acct-rewards-badge {
            display: none !important;
        }

        /* 4. If Rewards was the default active tab,
              make Prompt History show as active fallback */
        .ca-acct-tab[data-tab="prompts"] {
            border-bottom-color: var(--orange);
            color: var(--text-1);
        }

        /* 5. Show Prompt History panel by default on Android */
        #acct-tab-prompts {
            display: flex !important;
            flex-direction: column !important;
        }

    }
}


/* ═════════════════════════════════════════════════════════════════════════════
   COMFYAI CLOUD v49 — COMPREHENSIVE UI REFINEMENTS
   ✅ 9:16 Edit mode overlap fix
   ✅ 9:16 card sizing improvements
   ✅ Edit-mode X button matches replicate card style
   ✅ Pricing cards subtle glow (non-hover)
   ✅ Rewards section 10x UI overhaul
   ✅ Account cards blend with bg + glowing outlines
   ✅ Home page enhanced color aesthetics
   ✅ Background consistency across all pages
   ═════════════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────
   FIX 1: 9:16 GENERATE + EDIT MODE — no white strip, buttons never overlap
   ────────────────────────────────────────────── */
@media (min-width: 768px) {
    /* Edit mode needs extra bottom room for the edit bar */
    body.ca-edit-mode #single-result-container:has(.gen-result-wrapper[data-aspect="9:16"]) {
        padding-bottom: 20rem !important;
    }
}
@media (max-width: 767px) {
    .gen-result-wrapper[data-aspect="9:16"] {
        max-width: 65vw !important;
        margin: 0 auto !important;
    }
    .gen-result-wrapper[data-aspect="9:16"] .gen-atomic-wrap {
        aspect-ratio: unset !important;
        max-height: none !important;
        line-height: 0 !important;
    }
    .gen-result-wrapper[data-aspect="9:16"] img.gen-result-image {
        width: 100% !important;
        height: auto !important;
        max-height: calc(100svh - 340px) !important;
        object-fit: contain !important;
        display: block !important;
    }
    body.ca-edit-mode .gen-result-wrapper[data-aspect="9:16"] img.gen-result-image {
        max-height: calc(100svh - 400px) !important;
    }
}


/* ──────────────────────────────────────────────
   FIX 2: 9:16 & 1:1 RESULT CARD STYLING
   Better proportions, elevated glass feel
   ────────────────────────────────────────────── */
.gen-result-wrapper {
    background: transparent !important;
}
.gen-atomic-wrap {
    box-shadow:
        0 8px 40px rgba(0,0,0,0.10),
        0 2px 12px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.5) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
}
.gen-floating-actions {
    padding-top: 4px !important;
}
/* Slightly bigger float buttons for better touch targets */
.gen-float-btn {
    padding: 0.6rem 1.1rem !important;
    font-size: 0.7rem !important;
    border-radius: 9999px !important;
    backdrop-filter: blur(24px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(255,255,255,0.5) inset !important;
}
.gen-float-btn:hover {
    background: rgba(255,255,255,1) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 0 0 1px rgba(255,255,255,0.8) inset !important;
    transform: translateY(-1px) !important;
}
/* Edit this button keep indigo accent */
.gen-float-btn[style*="indigo"] {
    background: rgba(99,102,241,0.10) !important;
    border-color: rgba(99,102,241,0.25) !important;
}
.gen-float-btn[style*="indigo"]:hover {
    background: rgba(99,102,241,0.18) !important;
}


/* ──────────────────────────────────────────────
   FIX 3: EDIT MODE X BUTTON — MATCH REPLICATE STYLE
   Small red circle on the corner, glow, spin on hover
   ────────────────────────────────────────────── */
#gen-img-strip > div > button[title="Remove"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    border-radius: 50% !important;
    background: rgba(239, 68, 68, 0.85) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.60) !important;
    box-shadow:
        0 2px 8px rgba(239, 68, 68, 0.35),
        0 0 0 1px rgba(239, 68, 68, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: opacity 0.22s ease, transform 0.22s var(--ca-ease-spring), box-shadow 0.22s ease !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    font-size: 11px !important;
    top: -4px !important;
    right: -4px !important;
    z-index: 5 !important;
}
#gen-img-strip > div > button[title="Remove"]:hover {
    transform: scale(1.15) rotate(90deg) !important;
    background: #ef4444 !important;
    box-shadow:
        0 4px 16px rgba(239, 68, 68, 0.55),
        0 0 0 2px rgba(239, 68, 68, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}


/* ──────────────────────────────────────────────
   FIX 4: PRICING CARDS — SUBTLE GLOW (NON-HOVER)
   Keep white bg, add subtle colored glow behind each card
   ────────────────────────────────────────────── */
.pricing-card--starter {
    border-color: rgba(99,102,241,0.30) !important;
    box-shadow:
        0 0 0 3px rgba(99,102,241,0.06),
        0 0 18px rgba(99,102,241,0.07),
        0 4px 24px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
.pricing-card--creator {
    border-color: rgba(99,102,241,0.30) !important;
    box-shadow:
        0 0 0 3px rgba(99,102,241,0.06),
        0 0 22px rgba(99,102,241,0.08),
        0 4px 24px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
.pricing-card--studio {
    border-color: rgba(99,102,241,0.30) !important;
    box-shadow:
        0 0 0 3px rgba(99,102,241,0.06),
        0 0 18px rgba(99,102,241,0.07),
        0 4px 24px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
.pricing-card--enterprise {
    border-color: rgba(99,102,241,0.30) !important;
    box-shadow:
        0 0 0 3px rgba(99,102,241,0.06),
        0 0 18px rgba(99,102,241,0.07),
        0 4px 24px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
}


/* ──────────────────────────────────────────────
   FIX 5: ACCOUNT PAGE — BLEND WITH BG, GLOWING OUTLINES
   Remove plain white cards, use transparent bg + 
   subtle colored glowing border outlines
   ────────────────────────────────────────────── */

/* Hero card — blend with bg */
.ca-acct-hero-card {
    background: transparent !important;
    border: 1px solid rgba(201,106,0,0.15) !important;
    box-shadow:
        0 0 16px rgba(201,106,0,0.06),
        0 0 0 1px rgba(201,106,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.3) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
}

/* Sparkline row — blend */
.ca-acct-sparkline-row {
    background: rgba(201,106,0,0.03) !important;
    border: 1px solid rgba(201,106,0,0.10) !important;
    box-shadow: 0 0 12px rgba(201,106,0,0.04) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Left panel (activity & history) — blend with bg, glowing outline */
.ca-acct-left-panel {
    background: transparent !important;
    border: 1px solid rgba(99,102,241,0.15) !important;
    box-shadow:
        0 0 20px rgba(99,102,241,0.05),
        0 0 0 1px rgba(99,102,241,0.08) !important;
    backdrop-filter: blur(16px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
}

/* Right sidebar — blend with bg, glowing outline */
.ca-acct-sidebar-inner {
    background: transparent !important;
    border: 1px solid rgba(6,182,212,0.15) !important;
    box-shadow:
        0 0 20px rgba(6,182,212,0.05),
        0 0 0 1px rgba(6,182,212,0.08) !important;
    backdrop-filter: blur(16px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
}

/* Action buttons inside sidebar — blend */
.ca-acct-action-btn {
    background: rgba(0,0,0,0.015) !important;
    border: 1px solid rgba(28,25,23,0.06) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
.ca-acct-action-btn:hover {
    background: rgba(0,0,0,0.035) !important;
    border-color: rgba(28,25,23,0.12) !important;
}
/* Keep specific colored buttons */
.ca-acct-btn-amber { background: rgba(201,106,0,0.04) !important; border-color: rgba(201,106,0,0.15) !important; }
.ca-acct-btn-indigo { background: rgba(99,102,241,0.04) !important; border-color: rgba(99,102,241,0.15) !important; }
.ca-acct-btn-green { background: rgba(16,185,129,0.04) !important; border-color: rgba(16,185,129,0.15) !important; }
.ca-acct-btn-cyan { background: rgba(6,182,212,0.04) !important; border-color: rgba(6,182,212,0.15) !important; }
.ca-acct-btn-primary {
    background: linear-gradient(135deg,#2563eb,#1d4ed8) !important;
    border-color: rgba(37,99,235,0.3) !important;
}

/* Divider inside sidebar — more subtle */
.ca-acct-divider::before,
.ca-acct-divider::after {
    background: rgba(28,25,23,0.05) !important;
}

/* Avatar dot glow */
.ca-acct-avatar-dot {
    box-shadow: 0 0 8px rgba(245,158,11,0.4) !important;
    border-color: var(--bg) !important;
}


/* ──────────────────────────────────────────────
   FIX 6: REWARDS SECTION — 10X UI OVERHAUL
   Match website aesthetic colors, not plain white
   ────────────────────────────────────────────── */

/* Rewards header — blend with bg */
.rw-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(245,158,11,0.12) !important;
}

/* Stats row — transparent with subtle gradient */
.rw-stats-row {
    background: transparent !important;
    border-bottom: 1px solid rgba(245,158,11,0.10) !important;
}
.rw-stat {
    border-right-color: rgba(245,158,11,0.10) !important;
}
.rw-stat-val {
    text-shadow: 0 0 20px currentColor;
    filter: drop-shadow(0 0 3px currentColor);
}
.rw-stat-lbl {
    color: var(--text-4) !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.12em !important;
}

/* Task cards — glass morphism, no plain white */
.rw-task-card {
    background: transparent !important;
    border: 1.5px solid rgba(245,158,11,0.15) !important;
    border-radius: 16px !important;
    box-shadow:
        0 0 16px rgba(245,158,11,0.04),
        0 2px 12px rgba(0,0,0,0.03) !important;
    backdrop-filter: blur(12px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.3) !important;
    transition: all 0.3s var(--ca-ease-spring) !important;
}
.rw-task-card:hover {
    border-color: rgba(245,158,11,0.35) !important;
    box-shadow:
        0 0 28px rgba(245,158,11,0.10),
        0 6px 24px rgba(0,0,0,0.06) !important;
    transform: translateY(-2px) !important;
}
.rw-task-card.status-approved {
    border-color: rgba(22,163,74,0.25) !important;
    box-shadow: 0 0 16px rgba(22,163,74,0.06), 0 2px 12px rgba(0,0,0,0.03) !important;
}
.rw-task-card.status-pending {
    border-color: rgba(99,102,241,0.25) !important;
    box-shadow: 0 0 16px rgba(99,102,241,0.06), 0 2px 12px rgba(0,0,0,0.03) !important;
}
.rw-task-card.status-retry {
    border-color: rgba(239,68,68,0.25) !important;
    box-shadow: 0 0 16px rgba(239,68,68,0.06), 0 2px 12px rgba(0,0,0,0.03) !important;
}

/* Task stripe — thicker, more vibrant */
.rw-task-stripe {
    height: 3.5px !important;
}

/* Credit pill enhancements */
.rw-credit-pill {
    font-size: 0.72rem !important;
    padding: 5px 12px 5px 7px !important;
    border-radius: 999px !important;
}
.rw-credit-pill.state-open {
    background: linear-gradient(135deg,rgba(245,158,11,0.12),rgba(251,191,36,0.06)) !important;
    box-shadow: 0 0 12px rgba(245,158,11,0.10) !important;
}
.rw-credit-pill.state-done {
    box-shadow: 0 3px 14px rgba(22,163,74,0.30), 0 0 8px rgba(22,163,74,0.15) !important;
}

/* Steps list — glass feel */
.rw-steps {
    background: transparent !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
.rw-step {
    border-bottom-color: rgba(0,0,0,0.05) !important;
}
.rw-step:hover {
    background: rgba(245,158,11,0.03) !important;
}
.rw-step-num {
    border-right-color: rgba(0,0,0,0.05) !important;
}
.rw-step-text {
    font-size: 0.76rem !important;
    line-height: 1.6 !important;
}

/* Submit area — glass feel */
.rw-submit-area {
    background: transparent !important;
    border: 1.5px solid rgba(99,102,241,0.20) !important;
    box-shadow: 0 0 14px rgba(99,102,241,0.05) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}
.rw-submit-label {
    background: linear-gradient(90deg, rgba(99,102,241,0.06), rgba(139,92,246,0.04)) !important;
    border-bottom-color: rgba(99,102,241,0.15) !important;
}
.rw-submit-input {
    background: transparent !important;
}

/* Feedback boxes — glass */
.rw-feedback {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Refresh button — blend */
.rw-refresh-btn {
    background: transparent !important;
    border-color: rgba(245,158,11,0.15) !important;
}
.rw-refresh-btn:hover {
    background: rgba(245,158,11,0.06) !important;
}

/* Task list better scroll area */
#rw-task-list {
    padding: 1rem 1rem 2rem !important;
    gap: 0.875rem !important;
}


/* ──────────────────────────────────────────────
   FIX 7: HOME PAGE — ENHANCED COLOR AESTHETICS
   More vibrant orbs, richer ambient bg
   ────────────────────────────────────────────── */
.orb-1 {
    background: radial-gradient(circle, rgba(100,180,255,0.60) 0%, rgba(0,122,255,0.22) 55%, transparent 100%) !important;
    opacity: 0.42 !important;
}
.orb-2 {
    background: radial-gradient(circle, rgba(200,170,255,0.55) 0%, rgba(124,58,237,0.18) 55%, transparent 100%) !important;
    opacity: 0.32 !important;
}
.orb-3 {
    background: radial-gradient(circle, rgba(160,235,255,0.45) 0%, rgba(6,182,212,0.14) 55%, transparent 100%) !important;
    opacity: 0.25 !important;
}

/* Add a fourth warm orb for richer atmosphere */
.ambient-bg::after {
    content: '';
    position: absolute;
    width: 55vw;
    height: 55vw;
    bottom: -10%;
    right: -5%;
    background: radial-gradient(circle, rgba(245,158,11,0.18) 0%, rgba(201,106,0,0.06) 55%, transparent 100%);
    opacity: 0.3;
    filter: blur(80px);
    pointer-events: none;
    animation: orbFloat 36s infinite ease-in-out alternate-reverse;
}

/* Home nav pills — more vibrant hover states */
.home-nav-pill {
    backdrop-filter: blur(12px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
}
.home-nav-pill:hover {
    background: rgba(255,255,255,0.15) !important;
    box-shadow: 0 0 16px rgba(0,0,0,0.06) !important;
}

/* Home prompt gradient border — slightly more vibrant */
.home-prompt-gradient-border {
    box-shadow: 0 0 32px rgba(124,58,237,0.06), 0 0 16px rgba(6,182,212,0.04) !important;
}


/* ──────────────────────────────────────────────
   FIX 8: BACKGROUND CONSISTENCY
   All pages use the same base bg color
   ────────────────────────────────────────────── */
.view-section {
    background-color: transparent !important;
}
#view-home,
#view-generate,
#view-replicate,
#view-plans,
#view-account {
    background-color: transparent !important;
}
/* The ambient-bg provides the consistent warm base */
.ambient-bg {
    background: var(--bg) !important;
}


/* ──────────────────────────────────────────────
   FIX 9: TABS INSIDE ACCOUNT — BLEND
   ────────────────────────────────────────────── */
.ca-acct-tab-nav {
    border-bottom-color: rgba(28,25,23,0.06) !important;
    background: transparent !important;
}
.ca-acct-tab {
    background: transparent !important;
}
.ca-acct-tab:hover {
    background: rgba(0,0,0,0.02) !important;
}
.ca-acct-tab.active {
    background: rgba(0,0,0,0.03) !important;
}
.ca-acct-tab-panel {
    background: transparent !important;
}

/* History list items inside account */
#acct-history-list > div {
    background: transparent !important;
    border-color: rgba(0,0,0,0.06) !important;
}


/* ──────────────────────────────────────────────
   FIX 10: SYSTEM-WIDE POLISH
   Small touches for consistency everywhere
   ────────────────────────────────────────────── */

/* Generate page prompt card — ensure it blends nicely */
.gen-prompt-card {
    background: rgba(250,248,244,0.92) !important;
    box-shadow:
        0 -4px 24px rgba(0,0,0,0.06),
        0 0 0 1px rgba(0,0,0,0.04),
        inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

/* Generate sidebar — blend */
#gen-sidebar {
    background: rgba(250,248,244,0.96) !important;
}

/* Ensure image strip thumbnails have proper spacing and overflow visible */
#gen-img-strip {
    gap: 10px !important;
    padding: 10px 14px 8px !important;
}
#gen-img-strip > div {
    border-radius: 12px !important;
    border: 2px solid rgba(99,102,241,0.30) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    overflow: visible !important;
}

/* History session page — blend */
#hist-session-page {
    background: rgba(250,248,244,0.97) !important;
}

/* Mobile bottom nav glass — slightly stronger */
@media (max-width: 767px) {
    .ca-nav-mobile .glass-nav {
        background: rgba(250,248,244,0.94) !important;
        box-shadow: 0 -1px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04) !important;
    }
}

/* Desktop nav — ensure glass consistency */
.ca-nav-desktop .glass-nav {
    background: rgba(250,248,244,0.90) !important;
    box-shadow: 0 4px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04) !important;
}

/* Footer consistency — transparent bg */
.ca-footer {
    background: transparent !important;
}

/* Smooth transitions on all interactive elements */
.btn-spring {
    will-change: transform !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   COMFYAI CLOUD v50 — TARGETED FIXES
   ✅ Generate prompt box: sharp thin blue border, pure white inside
   ✅ Header "ComfyAI Cloud" text: Power Your Creativity gradient, no animation
   ✅ 9:16 card: thin border, adapt to image, 4 buttons in 1 line
   ✅ Support logo: green customer support (CSS)
   ✅ Home nav pills: green border non-hover
   ═════════════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────
   1. GENERATE PROMPT BOX — Sharp thin blue border, pure white inside
   ────────────────────────────────────────────── */
.gen-prompt-card {
    background: #ffffff !important;
    border: 1.5px solid rgba(99,102,241,0.35) !important;
    border-radius: 1.5rem !important;
    box-shadow:
        0 2px 16px rgba(99,102,241,0.06),
        0 0 0 0.5px rgba(99,102,241,0.12) !important;
}
.gen-prompt-card:focus-within {
    border-color: rgba(99,102,241,0.55) !important;
    box-shadow:
        0 0 0 3px rgba(99,102,241,0.08),
        0 4px 24px rgba(99,102,241,0.10) !important;
}

/* Home prompt box — also sharp thin blue border, pure white inside */
.home-prompt-box {
    background: #ffffff !important;
    border: 1.5px solid rgba(99,102,241,0.30) !important;
    border-radius: 1.75rem !important;
    box-shadow:
        0 2px 16px rgba(99,102,241,0.05),
        0 0 0 0.5px rgba(99,102,241,0.10) !important;
}
.home-prompt-box:focus-within {
    border-color: rgba(99,102,241,0.55) !important;
    box-shadow:
        0 0 0 3px rgba(99,102,241,0.08),
        0 4px 24px rgba(99,102,241,0.10) !important;
}


/* ──────────────────────────────────────────────
   2. HEADER "ComfyAI Cloud" TEXT — Power Your Creativity gradient, NO animation
   Uses same gradient: #7C3AED → #06B6D4 → #EC4899
   ────────────────────────────────────────────── */
.ca-brand-name {
    background: linear-gradient(120deg, #7C3AED 0%, #06B6D4 40%, #EC4899 80%) !important;
    background-size: 100% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    animation: none !important;
}


/* ──────────────────────────────────────────────
   3. 9:16 RESULT CARD — Thin border, adapt to image, 4 buttons in 1 row
   ────────────────────────────────────────────── */

/* Remove the thick white wrapper border / shadow */
.gen-atomic-wrap {
    border: none !important;
    border-radius: 1rem !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.05) !important;
}

/* 9:16 specific — thin border, wrap adapts to image (no white strip) */
.gen-result-wrapper[data-aspect="9:16"] .gen-atomic-wrap {
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 1rem !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04) !important;
    aspect-ratio: unset !important;
    max-height: none !important;
    line-height: 0 !important;
}
.gen-result-wrapper[data-aspect="9:16"] img.gen-result-image {
    border-radius: 1rem !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Force all 4 floating action buttons into ONE LINE for 9:16 */
.gen-result-wrapper[data-aspect="9:16"] .gen-floating-actions {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 0.375rem !important;
    /* Allow buttons to overflow the narrow wrapper */
    width: max-content !important;
    max-width: none !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}
.gen-result-wrapper[data-aspect="9:16"] .gen-float-btn {
    padding: 0.45rem 0.7rem !important;
    font-size: 0.625rem !important;
    gap: 0.3rem !important;
    white-space: nowrap !important;
}
.gen-result-wrapper[data-aspect="9:16"] .gen-float-btn i {
    width: 14px !important;
    height: 14px !important;
}

/* 9:16 wrapper on desktop — compact card, buttons always visible */
@media (min-width: 768px) {
    .gen-result-wrapper[data-aspect="9:16"] {
        max-width: 260px !important;
        width: 260px !important;
        overflow: visible !important;
    }
}

/* Mobile 9:16 — also force single row with compact buttons */
@media (max-width: 767px) {
    .gen-result-wrapper[data-aspect="9:16"] {
        overflow: visible !important;
    }
    .gen-result-wrapper[data-aspect="9:16"] .gen-floating-actions {
        flex-wrap: nowrap !important;
        gap: 0.3rem !important;
    }
    .gen-result-wrapper[data-aspect="9:16"] .gen-float-btn {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.58rem !important;
    }
    .gen-result-wrapper[data-aspect="9:16"] .gen-float-btn span {
        display: inline !important;
    }
}


/* ──────────────────────────────────────────────
   4. SUPPORT CHAT AVATAR — Green customer support icon styling
   ────────────────────────────────────────────── */
.support-chat-avatar {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border: 2px solid rgba(16,185,129,0.30) !important;
    box-shadow: 0 2px 10px rgba(16,185,129,0.20) !important;
}
.support-chat-avatar img {
    display: none !important;
}
.ca-support-page-avatar {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border: 2px solid rgba(16,185,129,0.30) !important;
    box-shadow: 0 2px 10px rgba(16,185,129,0.20) !important;
}
.ca-support-page-avatar img {
    display: none !important;
}


/* ──────────────────────────────────────────────
   5. HOME NAV PILLS — Green border in non-hover state
   ────────────────────────────────────────────── */
.home-nav-pill {
    border-color: rgba(16,185,129,0.35) !important;
    color: var(--text-3) !important;
    background: rgba(255,255,255,0.06) !important;
}
.home-nav-pill:hover {
    border-color: rgba(16,185,129,0.55) !important;
    background: rgba(255,255,255,0.15) !important;
    color: var(--text-1) !important;
    box-shadow: 0 0 14px rgba(16,185,129,0.08) !important;
}


/* ──────────────────────────────────────────────
   6. MOBILE PROMPT BOX — Same blue border treatment
   ────────────────────────────────────────────── */
@media (max-width: 767px) {
    .gen-prompt-card {
        background: #ffffff !important;
        border: 1.5px solid rgba(99,102,241,0.30) !important;
    }
}



/* ═════════════════════════════════════════════════════════════════════════════
   AR SELECTOR POPUP — Apple-grade floating popup
   ═════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   AR SELECTOR — Premium Bottom Sheet (mobile) + Floating Card (desktop)
   High-end glass UI, smooth spring animation, proportional shape previews
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Overlay container ── */
.ar-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

/* ── Blurred backdrop ── */
.ar-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: auto;
    cursor: default;
}

/* ── Floating card — centered on ALL screen sizes ── */
.ar-popup-content {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(56px) saturate(2.2);
    -webkit-backdrop-filter: blur(56px) saturate(2.2);
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 1.75rem;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.055),
        0 2px 0 rgba(255, 255, 255, 0.9) inset,
        0 32px 96px rgba(0, 0, 0, 0.22),
        0 8px 32px rgba(0, 0, 0, 0.10);
    width: min(92vw, 480px);
    max-height: min(82svh, 560px);
    display: flex;
    flex-direction: column;
    /* Enter: rise + scale up from slightly below */
    transform: translateY(18px) scale(0.94);
    opacity: 0;
    transition:
        transform 0.36s cubic-bezier(0.32, 1.22, 0.48, 1),
        opacity   0.24s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    overflow: hidden;
    will-change: transform, opacity;
}

/* No drag pill — this is a card, not a sheet */
.ar-popup-content::before { display: none; }

/* ── Open states ── */
.ar-popup.open {
    pointer-events: auto;
}
.ar-popup.open .ar-popup-backdrop {
    opacity: 1;
}
.ar-popup.open .ar-popup-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ── Desktop: float the card above the prompt bar ── */
@media (min-width: 768px) {
    .ar-popup {
        align-items: flex-end;
        padding-bottom: 170px;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }
    .ar-popup-content {
        width: min(90vw, 500px);
        max-height: 440px;
        border-radius: 1.5rem;
        transform: translateY(14px) scale(0.96);
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.06),
            0 2px 0 rgba(255, 255, 255, 0.85) inset,
            0 20px 64px rgba(0, 0, 0, 0.18),
            0 4px 18px rgba(0, 0, 0, 0.09);
    }
    .ar-popup.open .ar-popup-content {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* ── Header ── */
.ar-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.25rem 0.9rem;
    flex-shrink: 0;
}

.ar-popup-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-1, #111);
    letter-spacing: -0.025em;
    line-height: 1;
}

/* ── Close button ── */
.ar-popup-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0,0,0,0.05);
    color: var(--text-3, #888);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
    padding: 0;
    min-height: auto;
    flex-shrink: 0;
}
.ar-popup-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-1, #111);
    transform: scale(1.12) rotate(90deg);
}
.ar-popup-close:active { transform: scale(0.92); }

/* ── Divider ── */
.ar-popup-header + .ar-popup-grid {
    border-top: 1px solid rgba(0,0,0,0.055);
}

/* ── Grid ── */
.ar-popup-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    padding: 0.875rem 1rem 1.375rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.ar-popup-grid::-webkit-scrollbar { display: none; }

@media (min-width: 480px) {
    .ar-popup-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 768px) {
    .ar-popup-grid {
        grid-template-columns: repeat(7, 1fr);
        padding: 0.75rem 1.25rem 1.25rem;
        gap: 0.5rem;
    }
}

/* ── Option card ── */
.ar-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.75rem 0.35rem 0.65rem;
    border-radius: 1.0rem;
    background: rgba(0, 0, 0, 0.028);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.18s ease;
    min-height: auto;
    -webkit-tap-highlight-color: transparent;
    will-change: transform;
}
.ar-option:hover {
    background: rgba(99, 102, 241, 0.07);
    border-color: rgba(99, 102, 241, 0.22);
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.12);
}
.ar-option:active {
    transform: scale(0.94);
    transition-duration: 0.1s;
}
.ar-option.active {
    background: linear-gradient(135deg, rgba(99,102,241,0.11) 0%, rgba(139,92,246,0.09) 100%);
    border-color: rgba(99, 102, 241, 0.38);
    box-shadow:
        0 0 0 3px rgba(99, 102, 241, 0.10),
        0 4px 16px rgba(99, 102, 241, 0.15);
    transform: scale(1.02);
}
.ar-option.active .ar-icon-wrap { border-color: rgba(99,102,241,0.5); }
.ar-option.active .ar-icon-inner { background: rgba(99,102,241,0.15); color: #6366f1; }
.ar-option.active .ar-label { color: #6366f1; font-weight: 700; }

/* ── Shape preview wrapper ── */
.ar-icon {
    width: 44px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ar-icon svg {
    width: 18px; height: 18px;
    opacity: 0.55;
}

/* Proportional shape preview boxes */
.ar-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 30px;
    flex-shrink: 0;
}

.ar-icon-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.065);
    border-radius: 4px;
    border: 1.5px solid rgba(0,0,0,0.14);
    color: var(--text-4, #aaa);
    font-size: 0.5rem;
    font-weight: 800;
    font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
    letter-spacing: -0.03em;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    line-height: 1;
}

/* Proportional dimensions for each ratio */
.ar-inner-auto    { width: 26px; height: 26px; border-radius: 5px; }
.ar-inner-1-1     { width: 26px; height: 26px; }
.ar-inner-3-4     { width: 21px; height: 28px; }
.ar-inner-4-3     { width: 28px; height: 21px; }
.ar-inner-9-16    { width: 17px; height: 29px; }
.ar-inner-16-9    { width: 32px; height: 18px; }
.ar-inner-2-3     { width: 20px; height: 30px; }
.ar-inner-3-2     { width: 30px; height: 20px; }
.ar-inner-9-195   { width: 15px; height: 30px; }
.ar-inner-195-9   { width: 30px; height: 14px; }
.ar-inner-9-20    { width: 14px; height: 30px; }
.ar-inner-20-9    { width: 30px; height: 14px; }
.ar-inner-1-2     { width: 14px; height: 28px; }
.ar-inner-2-1     { width: 30px; height: 15px; }

/* ── Label ── */
.ar-label {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-4, #aaa);
    letter-spacing: 0.01em;
    transition: color 0.18s ease;
    line-height: 1;
    white-space: nowrap;
}

/* ── Mobile: compact card grid ── */
@media (max-width: 479px) {
    .ar-popup-content {
        width: min(94vw, 400px);
        max-height: min(78svh, 520px);
        border-radius: 1.5rem;
    }
    .ar-popup-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.4rem;
        padding: 0.75rem 0.875rem 1.125rem;
    }
    .ar-option { padding: 0.65rem 0.25rem 0.55rem; border-radius: 0.875rem; }
    .ar-icon-wrap { width: 36px; height: 28px; }
    .ar-inner-16-9 { width: 28px; height: 16px; }
    .ar-inner-9-16 { width: 15px; height: 26px; }
    .ar-inner-1-1  { width: 22px; height: 22px; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   AR BUTTON IN PROMPT BAR — Polished pill with indigo accent
   ═════════════════════════════════════════════════════════════════════════════ */

#gen-ar-btn {
    background: rgba(99, 102, 241, 0.07) !important;
    border: 1.5px solid rgba(99, 102, 241, 0.18) !important;
    color: #6366f1 !important;
    border-radius: 0.75rem !important;
    font-weight: 700 !important;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.2s ease !important;
    will-change: transform;
}
#gen-ar-btn:hover {
    background: rgba(99, 102, 241, 0.13) !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.18) !important;
}
#gen-ar-btn:active {
    transform: scale(0.95) !important;
    transition-duration: 0.1s !important;
}

#gen-ar-label {
    font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: -0.02em;
}

/* ═════════════════════════════════════════════════════════════════════════════
   EDIT MODE FIXES — Toast spacing & Button spacing
   ═════════════════════════════════════════════════════════════════════════════ */

/* FIX: Toast stacking to prevent overlapping */
.ca-toast {
    /* Ensure toasts stack vertically instead of overlapping */
    margin-bottom: 0.5rem;
}

/* Multiple toasts should stack with proper spacing */
.ca-toast + .ca-toast {
    margin-top: 0.5rem;
}

/* FIX: Edit mode button spacing in gen-floating-actions */
.ca-edit-mode .gen-floating-actions {
    /* Extra spacing between buttons in edit mode */
    gap: 0.75rem;
    padding: 0.5rem 0;
}

/* FIX: Ensure buttons don't overlap on mobile in edit mode */
@media (max-width: 767px) {
    .ca-edit-mode .gen-floating-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem 0.5rem;
    }

    .ca-edit-mode .gen-float-btn {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 120px;
        justify-content: center;
    }
}

/* FIX: Toast positioning for mobile — prevent overlap with nav */
@media (max-width: 767px) {
    .ca-toast {
        top: 4.5rem;
        max-width: calc(100vw - 1rem);
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }
}

/* FIX: Better spacing for message pills in edit mode */
.ca-edit-mode #gen-img-strip {
    padding: 10px 12px 8px;
    gap: 10px;
}

/* FIX: Ensure proper spacing between button section and image strip */
.ca-edit-mode .glass-panel.rounded-\[2rem\] {
    padding-bottom: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════
   EDIT MODE FIXES — v54
   1. AR button + model/res row hidden in edit mode (CSS backup)
   2. No card wrapper on edit result — bare image rounded corners
   3. Proper gap between action buttons and selector row
   4. Toast positioning fix in edit mode
   5. Button spacing fixes in edit mode
═══════════════════════════════════════════════════════════════ */

/* 1. AR button + full model/res row hidden in edit mode (CSS-level backup to JS) */
body.ca-edit-mode #gen-ar-btn {
    display: none !important;
}
body.ca-edit-mode .sidebar-model-row {
    display: none !important;
}

/* 2. Edit result: image gets only rounded corners, no card shadow/overflow */
.gen-result-wrapper.ca-edit-result {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
}
.gen-result-wrapper.ca-edit-result .gen-result-image {
    border-radius: 1.25rem !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
    overflow: hidden !important;
}

/* 3. Gap between selector row and Download/Share/Expand/Edit buttons */
.gen-floating-actions {
    margin-top: 0.875rem !important;
}
.sidebar-model-row {
    margin-bottom: 10px !important;
}

/* Edit mode actions: slightly wider gap between the 4 buttons */
.gen-floating-actions.ca-edit-actions {
    gap: 0.625rem !important;
    margin-top: 0.875rem !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
}

/* 4. Toast: push down when in edit mode (image strip adds height to prompt bar) */
body.ca-edit-mode .ca-toast {
    top: 6rem !important;
}
@media (max-width: 767px) {
    body.ca-edit-mode .ca-toast {
        top: 5.5rem !important;
    }
    /* Edit mode buttons: wrap neatly on mobile */
    .gen-floating-actions.ca-edit-actions {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        padding: 0.5rem 0.25rem !important;
    }
    .gen-floating-actions.ca-edit-actions .gen-float-btn {
        flex: 1 1 calc(50% - 0.5rem) !important;
        min-width: 110px !important;
        justify-content: center !important;
    }
}

/* 5. All edit mode action buttons match generate mode style — no per-button overrides */

/* ═══════════════════════════════════════════════════════════════
   EDIT MODE BUTTON STYLE — FINAL FIX v54.1
   All 4 buttons (Download/Share/Expand/Edit this) must be
   identical to generate mode: plain glass pill, no tint.
═══════════════════════════════════════════════════════════════ */

/* Reset any special per-button tints inside edit mode results */
.ca-edit-result .gen-float-btn,
.ca-edit-result .gen-float-btn-download,
.ca-edit-result .gen-float-btn-share,
.ca-edit-result .gen-float-btn-expand,
.ca-edit-result .gen-float-btn-edit,
.ca-edit-result .gen-float-btn[onclick*="useResultAsReference"] {
    background: rgba(255,255,255,0.95) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    color: var(--text-1, #1c1917) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* Hover: all 4 buttons get same green glow — matching generate mode */
.ca-edit-result .gen-float-btn:hover,
.ca-edit-result .gen-float-btn-download:hover,
.ca-edit-result .gen-float-btn-share:hover,
.ca-edit-result .gen-float-btn-expand:hover,
.ca-edit-result .gen-float-btn-edit:hover,
.ca-edit-result .gen-float-btn[onclick*="useResultAsReference"]:hover {
    background: rgba(16,185,129,0.15) !important;
    border-color: rgba(16,185,129,0.4) !important;
    color: #059669 !important;
    box-shadow: 0 4px 16px rgba(16,185,129,0.35), 0 0 20px rgba(16,185,129,0.2) !important;
    transform: translateY(-2px) scale(1.05) !important;
}

/* ══════════════════════════════════════════════════════════════════
   v54 FINAL — MOBILE: Single pill selector, no double box
   .sidebar-model-row = the pill container (bg, border, shadow)
   .gen-model-tabs = transparent scroll container inside it
   Desktop: .gen-model-tabs = the pill, .sidebar-model-row = layout only
══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Outer row IS the pill on mobile */
  .sidebar-model-row,
  .ca-prompt-bar .sidebar-model-row,
  #view-generate .sidebar-model-row {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;            /* fallback for clip-path on old iOS */
    border-radius: 9999px !important;
    background: rgba(255,252,248,0.96) !important;
    border: 1px solid rgba(0,0,0,0.09) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.95) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
    backdrop-filter: blur(24px) saturate(1.8) !important;
    max-width: calc(100% - 2rem) !important;
    margin: 0 auto 0.5rem !important;
    padding: 0 !important;
    position: relative !important;
    clip-path: inset(0 round 9999px) !important;
    -webkit-clip-path: inset(0 round 9999px) !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .sidebar-model-row::-webkit-scrollbar,
  .ca-prompt-bar .sidebar-model-row::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
  }

  /* Fade masks — hint scrollability */
  .sidebar-model-row::before,
  .sidebar-model-row::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 1.25rem !important;
    z-index: 5 !important;
    pointer-events: none !important;
  }
  .sidebar-model-row::before {
    left: 0 !important;
    background: linear-gradient(to right, rgba(255,252,248,0.90), transparent) !important;
    border-radius: 9999px 0 0 9999px !important;
  }
  .sidebar-model-row::after {
    right: 0 !important;
    background: linear-gradient(to left, rgba(255,252,248,0.90), transparent) !important;
    border-radius: 0 9999px 9999px 0 !important;
  }

  /* Inner tabs = transparent, NO pill styling — outer row handles it */
  .gen-model-tabs,
  .sidebar-model-row .gen-model-tabs,
  .ca-prompt-bar .sidebar-model-row .gen-model-tabs,
  .ca-prompt-bar .gen-model-tabs {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    -webkit-align-items: center !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 2px !important;
    padding: 4px 1rem !important;
    width: 100% !important;
    min-width: 0 !important;
    touch-action: pan-x !important;
    overscroll-behavior-x: contain !important;
    /* CLEAR all pill styling — outer row is the pill */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .gen-model-tabs::-webkit-scrollbar,
  .sidebar-model-row .gen-model-tabs::-webkit-scrollbar,
  .ca-prompt-bar .sidebar-model-row .gen-model-tabs::-webkit-scrollbar {
    display: none !important;
  }

  /* Tab buttons — match desktop size + margin fallback for gap */
  .gen-model-tab,
  .gen-aspect-tab,
  .gen-res-tab {
    -webkit-flex-shrink: 0 !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 0.72rem !important;
    padding: 6px 12px !important;
    border-radius: 11px !important;
    touch-action: manipulation !important;
    margin-right: 2px !important;           /* fallback for gap on iOS < 14.1 */
  }
  .gen-model-tab:last-child,
  .gen-aspect-tab:last-child,
  .gen-res-tab:last-child {
    margin-right: 0 !important;
  }
  .gen-model-tab.active,
  .gen-aspect-tab.active,
  .gen-res-tab.active {
    border-radius: 11px !important;
  }
}

/* Dark mode mobile pill */
@media (max-width: 767px) {
  html.ca-dark .sidebar-model-row,
  html.ca-dark .ca-prompt-bar .sidebar-model-row {
    background: rgba(28,28,30,0.96) !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  }
  html.ca-dark .sidebar-model-row::before {
    background: linear-gradient(to right, rgba(28,28,30,0.90), transparent) !important;
  }
  html.ca-dark .sidebar-model-row::after {
    background: linear-gradient(to left, rgba(28,28,30,0.90), transparent) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE FIX: Floating action buttons for ALL narrow portrait ARs
   Prevents Download/Share/Expand/Edit from overflowing off-screen
   on small mobile devices for 9:16, 9:19.5, 9:20, 1:2
   ═══════════════════════════════════════════════════════════════════════════ */

/* All narrow portrait wrappers must allow button overflow */
.gen-result-wrapper[data-aspect="9:16"],
.gen-result-wrapper[data-aspect="9:19.5"],
.gen-result-wrapper[data-aspect="9:20"],
.gen-result-wrapper[data-aspect="1:2"] {
    overflow: visible !important;
}

/* Buttons row: break out of narrow wrapper, center on viewport */
.gen-result-wrapper[data-aspect="9:16"] .gen-floating-actions,
.gen-result-wrapper[data-aspect="9:19.5"] .gen-floating-actions,
.gen-result-wrapper[data-aspect="9:20"] .gen-floating-actions,
.gen-result-wrapper[data-aspect="1:2"] .gen-floating-actions {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    width: max-content !important;
    max-width: none !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    gap: 0.375rem !important;
}

/* Compact button sizing for narrow portrait */
.gen-result-wrapper[data-aspect="9:16"] .gen-float-btn,
.gen-result-wrapper[data-aspect="9:19.5"] .gen-float-btn,
.gen-result-wrapper[data-aspect="9:20"] .gen-float-btn,
.gen-result-wrapper[data-aspect="1:2"] .gen-float-btn {
    padding: 0.45rem 0.7rem !important;
    font-size: 0.625rem !important;
    gap: 0.3rem !important;
    white-space: nowrap !important;
}

.gen-result-wrapper[data-aspect="9:16"] .gen-float-btn i,
.gen-result-wrapper[data-aspect="9:19.5"] .gen-float-btn i,
.gen-result-wrapper[data-aspect="9:20"] .gen-float-btn i,
.gen-result-wrapper[data-aspect="1:2"] .gen-float-btn i {
    width: 14px !important;
    height: 14px !important;
}

/* ── Mobile: tighter buttons for narrow portrait ── */
@media (max-width: 767px) {
    .gen-result-wrapper[data-aspect="9:16"] .gen-floating-actions,
    .gen-result-wrapper[data-aspect="9:19.5"] .gen-floating-actions,
    .gen-result-wrapper[data-aspect="9:20"] .gen-floating-actions,
    .gen-result-wrapper[data-aspect="1:2"] .gen-floating-actions {
        flex-wrap: nowrap !important;
        gap: 0.25rem !important;
        width: max-content !important;
        max-width: calc(100vw - 1.5rem) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .gen-result-wrapper[data-aspect="9:16"] .gen-float-btn,
    .gen-result-wrapper[data-aspect="9:19.5"] .gen-float-btn,
    .gen-result-wrapper[data-aspect="9:20"] .gen-float-btn,
    .gen-result-wrapper[data-aspect="1:2"] .gen-float-btn {
        padding: 0.4rem 0.55rem !important;
        font-size: 0.56rem !important;
        gap: 0.2rem !important;
    }

    .gen-result-wrapper[data-aspect="9:16"] .gen-float-btn span,
    .gen-result-wrapper[data-aspect="9:19.5"] .gen-float-btn span,
    .gen-result-wrapper[data-aspect="9:20"] .gen-float-btn span,
    .gen-result-wrapper[data-aspect="1:2"] .gen-float-btn span {
        display: inline !important;
    }

    .gen-result-wrapper[data-aspect="9:16"] .gen-float-btn i,
    .gen-result-wrapper[data-aspect="9:19.5"] .gen-float-btn i,
    .gen-result-wrapper[data-aspect="9:20"] .gen-float-btn i,
    .gen-result-wrapper[data-aspect="1:2"] .gen-float-btn i {
        width: 12px !important;
        height: 12px !important;
        flex-shrink: 0 !important;
    }
}

/* ── Extra-small phones (≤ 390px): icon-only buttons for narrow portrait ── */
@media (max-width: 390px) {
    .gen-result-wrapper[data-aspect="9:16"] .gen-float-btn,
    .gen-result-wrapper[data-aspect="9:19.5"] .gen-float-btn,
    .gen-result-wrapper[data-aspect="9:20"] .gen-float-btn,
    .gen-result-wrapper[data-aspect="1:2"] .gen-float-btn {
        padding: 0.45rem !important;
        font-size: 0 !important;
        gap: 0 !important;
        min-width: 32px !important;
        justify-content: center !important;
    }

    .gen-result-wrapper[data-aspect="9:16"] .gen-float-btn span,
    .gen-result-wrapper[data-aspect="9:19.5"] .gen-float-btn span,
    .gen-result-wrapper[data-aspect="9:20"] .gen-float-btn span,
    .gen-result-wrapper[data-aspect="1:2"] .gen-float-btn span {
        display: none !important;
    }

    .gen-result-wrapper[data-aspect="9:16"] .gen-float-btn i,
    .gen-result-wrapper[data-aspect="9:19.5"] .gen-float-btn i,
    .gen-result-wrapper[data-aspect="9:20"] .gen-float-btn i,
    .gen-result-wrapper[data-aspect="1:2"] .gen-float-btn i {
        width: 16px !important;
        height: 16px !important;
        font-size: 16px !important;
    }

    .gen-result-wrapper[data-aspect="9:16"] .gen-floating-actions,
    .gen-result-wrapper[data-aspect="9:19.5"] .gen-floating-actions,
    .gen-result-wrapper[data-aspect="9:20"] .gen-floating-actions,
    .gen-result-wrapper[data-aspect="1:2"] .gen-floating-actions {
        gap: 0.35rem !important;
        max-width: none !important;
    }
}

/* ── Small phones (≤ 360px): even more compact ── */
@media (max-width: 360px) {
    .gen-result-wrapper[data-aspect="9:16"] .gen-float-btn,
    .gen-result-wrapper[data-aspect="9:19.5"] .gen-float-btn,
    .gen-result-wrapper[data-aspect="9:20"] .gen-float-btn,
    .gen-result-wrapper[data-aspect="1:2"] .gen-float-btn {
        padding: 0.375rem !important;
        min-width: 28px !important;
    }

    .gen-result-wrapper[data-aspect="9:16"] .gen-float-btn i,
    .gen-result-wrapper[data-aspect="9:19.5"] .gen-float-btn i,
    .gen-result-wrapper[data-aspect="9:20"] .gen-float-btn i,
    .gen-result-wrapper[data-aspect="1:2"] .gen-float-btn i {
        width: 14px !important;
        height: 14px !important;
        font-size: 14px !important;
    }

    .gen-result-wrapper[data-aspect="9:16"] .gen-floating-actions,
    .gen-result-wrapper[data-aspect="9:19.5"] .gen-floating-actions,
    .gen-result-wrapper[data-aspect="9:20"] .gen-floating-actions,
    .gen-result-wrapper[data-aspect="1:2"] .gen-floating-actions {
        gap: 0.25rem !important;
    }
}


/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE DEEP FIX — v1.0
   Fixes: model tab centering, expand/edit button layout, prompt bar safe area,
          nav overflow, desktop centering, all device sizes
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. DESKTOP: Model tabs pill perfectly centered below prompt card ── */
.ca-prompt-bar .sidebar-model-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 868px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 8px !important;
    margin-bottom: 8px !important;
    box-sizing: border-box !important;
}

.ca-prompt-bar .gen-model-tabs {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── 2. MOBILE: Model tabs row — centered, not left-aligned ── */
@media (max-width: 767px) {
    .sidebar-model-row {
        justify-content: center !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 0 4px !important;
        margin-bottom: 6px !important;
    }

    .sidebar-model-row::-webkit-scrollbar { display: none !important; }

    .gen-model-tabs {
        /* Pill container centered, scrollable only if overflow */
        flex-shrink: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Tabs & res buttons — comfortable touch targets */
    .gen-model-tab,
    .gen-res-tab {
        padding: 7px 11px !important;
        font-size: 0.7rem !important;
        min-height: 34px !important;
        touch-action: manipulation !important;
    }

    .gen-tab-cost {
        font-size: 0.58rem !important;
    }
}

/* ── 3. MOBILE: Floating action buttons (Expand / Edit) — centered & full-width ── */
@media (max-width: 767px) {
    .gen-floating-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0.25rem 0.5rem 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Each action button: readable, tappable */
    .gen-float-btn {
        padding: 0.5rem 0.9rem !important;
        font-size: 0.68rem !important;
        font-weight: 700 !important;
        min-height: 36px !important;
        border-radius: 999px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.35rem !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        touch-action: manipulation !important;
    }

    .gen-float-btn i,
    .gen-float-btn [data-lucide] {
        width: 13px !important;
        height: 13px !important;
        flex-shrink: 0 !important;
    }
}

/* ── 4. EXTRA SMALL phones (≤ 390px): tighter layout ── */
@media (max-width: 390px) {
    .gen-floating-actions {
        gap: 0.35rem !important;
        padding: 0.2rem 0.25rem 0 !important;
    }

    .gen-float-btn {
        padding: 0.45rem 0.7rem !important;
        font-size: 0.625rem !important;
        min-height: 32px !important;
    }

    /* Model tabs: fit all 5 options without scrolling on 390px */
    .gen-model-tab,
    .gen-res-tab {
        padding: 6px 8px !important;
        font-size: 0.65rem !important;
    }

    .gen-tab-cost {
        display: none !important; /* Hide credit cost on tiny screens */
    }
}

/* ── 5. TINY phones (≤ 360px): most compact ── */
@media (max-width: 360px) {
    .gen-model-tab,
    .gen-res-tab {
        padding: 5px 7px !important;
        font-size: 0.6rem !important;
    }

    .gen-floating-actions {
        gap: 0.25rem !important;
    }

    .gen-float-btn {
        padding: 0.4rem 0.55rem !important;
        font-size: 0.575rem !important;
    }
}

/* ── 6. Prompt input bar: always above safe area on all devices ── */
.ca-prompt-bar {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 40 !important;
    padding: 0 0.5rem !important;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
}

/* ── 7. Generate prompt card: responsive max-width for all screens ── */
.gen-prompt-card {
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: calc(100% - 8px) !important;
    box-sizing: border-box !important;
}

@media (max-width: 767px) {
    .gen-prompt-card {
        width: calc(100% - 4px) !important;
        margin: 0 2px !important;
        border-radius: 1.25rem !important;
    }

    /* Toolbar inside prompt card — allow wrapping on small screens */
    .gen-prompt-card .flex.items-center.justify-between.px-2 {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Add Image & AR Selector buttons: correct touch target */
    #gen-img-upload-btn,
    #gen-ar-btn {
        min-height: 34px !important;
        padding: 5px 10px !important;
        font-size: 0.7rem !important;
        touch-action: manipulation !important;
    }

    /* Submit button: always visible and full-size */
    #gen-submit-btn {
        min-height: 42px !important;
        padding: 0.55rem 1.1rem !important;
        font-size: 0.78rem !important;
        touch-action: manipulation !important;
        flex-shrink: 0 !important;
    }
}

/* ── 8. Result container: correct clearance for prompt bar + action buttons ── */
@media (max-width: 767px) {
    #single-result-container {
        /* Extra room so buttons above the prompt bar are always fully visible */
        padding-bottom: 16rem !important;
    }

    body.ca-edit-mode #single-result-container {
        padding-bottom: 23rem !important;
    }
}

/* ── 9. Mobile nav: prevent text from becoming invisible on tiny screens ── */
@media (max-width: 380px) {
    .mob-nav-lnk {
        padding: 4px 5px !important;
        font-size: 8px !important;
        letter-spacing: -0.02em !important;
    }

    #mob-credit-pill {
        max-width: 60px !important;
    }

    #mob-credit-text {
        max-width: 36px !important;
    }
}

/* ── 10. Generate main: correct top padding so content starts below nav ── */
@media (max-width: 767px) {
    #gen-main {
        padding-top: max(4.5rem, calc(3.5rem + env(safe-area-inset-top))) !important;
    }
}

/* ── 11. AR popup: centered card on mobile, safe-area aware ── */
@media (max-width: 767px) {
    .ar-popup-content {
        max-height: min(80svh, 520px) !important;
    }
}

/* ── 12. Image strip (edit mode): horizontal scroll, no height collapse ── */
@media (max-width: 767px) {
    #gen-img-strip {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-shrink: 0 !important;
        min-height: 0 !important;
    }

    #gen-img-strip::-webkit-scrollbar { display: none !important; }
}

/* ── 13. Desktop: ensure model tabs pill is perfectly centered on wide screens ── */
@media (min-width: 768px) {
    .sidebar-model-row {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 868px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .gen-model-tabs {
        /* Never stretch to full width on desktop — keeps pill compact and centered */
        width: auto !important;
        max-width: none !important;
    }
}

/* ── 14. Fix tap highlight on all interactive elements ── */
.gen-float-btn,
.gen-model-tab,
.gen-res-tab,
#gen-submit-btn,
#gen-ar-btn,
#gen-img-upload-btn,
.mob-nav-lnk,
.btn-spring {
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
}

/* ── 15. Prevent textarea zoom on iOS ── */
#gen-prompt,
#home-prompt,
#hist-search,
#acct-hist-search,
#ca-chat-input,
#ca-support-page-input {
    font-size: max(16px, 1em) !important;
}

/* ── 16. Smooth scrolling & overscroll-behavior on result container ── */
#single-result-container {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}

/* ── 17. Empty state — centered on all screen sizes ── */
#generate-empty-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
    min-height: 200px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v55 MOBILE-ONLY FIXES
   1. Prompt box must NOT expand upward when images attached in edit mode
   2. Model/resolution selector: no pill border, individual rounded blue
      buttons, centered, fixed position, no top border lines
   All changes scoped to max-width:767px — desktop is untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FIX 18: Mobile edit mode — constrain prompt card, no upward expansion ── */
@media (max-width: 767px) {

    /* Prompt card: lock max-height so image strip + textarea never push it up */
    body.ca-edit-mode .gen-prompt-card {
        max-height: 200px !important;
        overflow: hidden !important;
    }

    /* Image strip in edit mode: single row, small thumbnails, no growth */
    body.ca-edit-mode #gen-img-strip {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        max-height: 64px !important;
        padding: 6px 10px 4px !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        border-bottom: 1px solid rgba(99,102,241,0.10) !important;
    }
    body.ca-edit-mode #gen-img-strip::-webkit-scrollbar {
        display: none !important;
    }

    /* Thumbnails inside strip: small and fixed on mobile edit mode */
    body.ca-edit-mode #gen-img-strip > div {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
    }
    body.ca-edit-mode #gen-img-strip > div img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    /* Textarea in edit mode: shorter to leave room for strip */
    body.ca-edit-mode #gen-prompt {
        max-height: 3.5rem !important;
        padding: 0.5rem 1rem !important;
    }

    /* Prompt bar itself: no upward growth, stays pinned at bottom */
    body.ca-edit-mode .ca-prompt-bar {
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        overflow: visible !important;
    }
}

/* ── FIX 19: Mobile model/resolution selector — COMPLETE REDESIGN
     Requirements:
     - Remove outer rounded pill shape border (no .sidebar-model-row border)
     - No border lines on the container
     - Fixed position on mobile
     - Each of the 5 buttons (Fast, GEN, Pro, 1K, 2K) gets individual
       rounded blue line border matching prompt box border style
     - Remove the divider line between model and resolution tabs
     - Remove any lines touching the top
     - Center the selector row
     ── */
@media (max-width: 767px) {

    /* Outer container: strip ALL pill styling — just a flex centering wrapper */
    .sidebar-model-row,
    .ca-prompt-bar .sidebar-model-row,
    #view-generate .sidebar-model-row {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        justify-content: center !important;
        align-items: center !important;
        /* REMOVE all pill styling */
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        overflow: visible !important;
        max-width: 100% !important;
        margin: 0 auto 6px !important;
        padding: 0 8px !important;
        position: relative !important;
    }

    /* Remove the fade mask pseudo-elements (scroll hints) */
    .sidebar-model-row::before,
    .sidebar-model-row::after {
        display: none !important;
        content: none !important;
    }

    /* Inner tabs container: transparent, centered flex row */
    .gen-model-tabs,
    .sidebar-model-row .gen-model-tabs,
    .ca-prompt-bar .sidebar-model-row .gen-model-tabs,
    .ca-prompt-bar .gen-model-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 2px 0 !important;
        width: auto !important;
        /* CLEAR all pill styling from inner container */
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .gen-model-tabs::-webkit-scrollbar,
    .sidebar-model-row .gen-model-tabs::-webkit-scrollbar,
    .ca-prompt-bar .sidebar-model-row .gen-model-tabs::-webkit-scrollbar {
        display: none !important;
    }

    /* Remove the divider line between model and resolution tabs */
    .gen-tab-divider {
        display: none !important;
    }

    /* Each button: individual rounded shape with blue border matching prompt box */
    .gen-model-tab,
    .gen-aspect-tab,
    .gen-res-tab {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        padding: 7px 14px !important;
        border-radius: 1.25rem !important;
        border: 1.5px solid rgba(99,102,241,0.35) !important;
        background: #ffffff !important;
        color: #636366 !important;
        box-shadow: 0 1px 4px rgba(99,102,241,0.06) !important;
        margin-right: 0 !important;
        touch-action: manipulation !important;
        transition: all 0.18s ease !important;
    }

    /* Active button: filled blue background */
    .gen-model-tab.active,
    .gen-aspect-tab.active,
    .gen-res-tab.active {
        background: rgba(99,102,241,0.10) !important;
        border-color: rgba(99,102,241,0.55) !important;
        color: #4f46e5 !important;
        box-shadow:
            0 0 0 2px rgba(99,102,241,0.08),
            0 2px 8px rgba(99,102,241,0.10) !important;
    }

    /* Hover state */
    .gen-model-tab:hover:not(.active),
    .gen-aspect-tab:hover:not(.active),
    .gen-res-tab:hover:not(.active) {
        background: rgba(99,102,241,0.04) !important;
        border-color: rgba(99,102,241,0.45) !important;
    }

    /* Cost badge inside buttons: inherit blue theming */
    .gen-model-tab .gen-tab-cost,
    .gen-res-tab .gen-tab-cost {
        background: rgba(99,102,241,0.08) !important;
        color: #6366f1 !important;
    }
    .gen-model-tab.active .gen-tab-cost,
    .gen-res-tab.active .gen-tab-cost {
        background: rgba(99,102,241,0.15) !important;
        color: #4f46e5 !important;
    }
}

/* Dark mode override for the mobile individual buttons */
@media (max-width: 767px) {
    html.ca-dark .sidebar-model-row,
    html.ca-dark .ca-prompt-bar .sidebar-model-row {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    html.ca-dark .sidebar-model-row::before,
    html.ca-dark .sidebar-model-row::after {
        display: none !important;
        content: none !important;
    }
    html.ca-dark .gen-model-tab,
    html.ca-dark .gen-aspect-tab,
    html.ca-dark .gen-res-tab {
        background: rgba(28,28,30,0.95) !important;
        border-color: rgba(99,102,241,0.30) !important;
        color: #a5a5ad !important;
    }
    html.ca-dark .gen-model-tab.active,
    html.ca-dark .gen-aspect-tab.active,
    html.ca-dark .gen-res-tab.active {
        background: rgba(99,102,241,0.15) !important;
        border-color: rgba(99,102,241,0.50) !important;
        color: #818cf8 !important;
    }
}

/* ── FIX 20: Extra small mobile screens — selector buttons scale down ── */
@media (max-width: 380px) {
    .gen-model-tab,
    .gen-aspect-tab,
    .gen-res-tab {
        padding: 5px 10px !important;
        font-size: 0.6rem !important;
        border-radius: 1rem !important;
    }
}

/* ── FIX 21: iPhone SE / very narrow — prevent selector overflow ── */
@media (max-width: 340px) {
    .gen-model-tab,
    .gen-aspect-tab,
    .gen-res-tab {
        padding: 4px 8px !important;
        font-size: 0.55rem !important;
        gap: 3px !important;
    }
    .gen-tab-cost {
        font-size: 0.5rem !important;
        padding: 0px 3px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   FIX 22: MOBILE PROMPT BOX — NEVER EXPAND UPWARD
   Prevents the gen-prompt-card from growing when images are attached
   or edit mode is entered. Keeps the "Edit this" button visible.
   Works on iOS Safari, Chrome, Samsung Internet, Firefox, etc.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /*
     * 1. Textarea: previously this section locked the prompt box to a
     * single-line height.  To resolve mobile typing issues we allow
     * the textarea to grow dynamically up to 5 rem and enable vertical
     * scrolling.  The font size and line height remain unchanged to
     * prevent iOS from zooming, and touch-action stays set so that
     * tapping inside the field doesn’t trigger unwanted zooming or
     * page scrolling.
     */
    #gen-prompt {
        height: auto !important;
        min-height: 2.85rem !important;
        max-height: 5rem !important;
        overflow-y: auto !important;
        resize: none !important;
        font-size: 16px !important;           /* prevents iOS zoom on focus */
        line-height: 1.35 !important;
        padding: 0.5rem 0.875rem !important;
        /* Prevent iOS from resizing viewport on focus */
        touch-action: manipulation !important;
    }

    /* ── 2. Image strip: ultra-compact on mobile ──
       Smaller thumbs (44px), minimal padding, so the prompt card
       barely grows when images are attached. */
    #gen-img-strip {
        gap: 6px !important;
        padding: 6px 10px 4px !important;
        align-items: center !important;
        min-height: 0 !important;
        max-height: 56px !important;          /* 44px thumb + padding */
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    }
    #gen-img-strip::-webkit-scrollbar {
        display: none !important;
    }

    /* Thumbnails: 44px instead of 64px */
    #gen-img-strip > div {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0 !important;
        border-radius: 10px !important;
        border-width: 1.5px !important;
    }

    /* Remove button on thumbs: smaller and tighter */
    #gen-img-strip > div > button[title="Remove"] {
        width: 18px !important;
        height: 18px !important;
        font-size: 10px !important;
        top: -3px !important;
        right: -3px !important;
    }

    /* "Clear All" button: more compact */
    #gen-img-strip > button:last-child {
        padding: 2px 8px !important;
        font-size: 10px !important;
    }

    /* ── 3. Bottom bar in prompt card: compact in edit mode ── */
    body.ca-edit-mode .gen-prompt-card .flex.items-center.justify-between {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    /* ── 4. Edit mode badge: smaller on mobile ── */
    body.ca-edit-mode #gen-edit-mode-badge {
        font-size: 9px !important;
        padding: 1px 6px !important;
        gap: 2px !important;
    }
    body.ca-edit-mode #gen-edit-mode-badge i {
        width: 10px !important;
        height: 10px !important;
    }

    /* ── 5. The prompt bar itself: cap its total height in edit mode
       so it NEVER grows more than ~120px total (strip + textarea + buttons) ── */
    body.ca-edit-mode .ca-prompt-bar {
        max-height: none !important;           /* let flex handle it */
        padding-top: 4px !important;
    }

    /* ── 6. The prompt card: prevent upward expansion ── */
    body.ca-edit-mode .gen-prompt-card {
        max-height: 130px !important;          /* hard cap: strip(56) + textarea(40) + buttons(34) */
        overflow: hidden !important;
    }

    /* ── 7. Result container: ensure action buttons remain visible ──
       In edit mode, reduce bottom padding so images + buttons
       have more room above the prompt bar. */
    body.ca-edit-mode #single-result-container {
        padding-bottom: 0.5rem !important;
    }

    /* ── 8. Floating action buttons: ensure always above prompt bar ── */
    body.ca-edit-mode .gen-floating-actions,
    .gen-floating-actions {
        margin-bottom: 0.5rem !important;
        padding-bottom: 0 !important;
    }

    /* ── 9. iOS Safari: prevent viewport bounce/resize on keyboard open ── */
    #view-generate {
        overflow: hidden !important;
        /* Prevent elastic overscroll on iOS */
        overscroll-behavior: none !important;
        -webkit-overscroll-behavior: none !important;
    }

    /*
     * 10. iOS Safari: textarea should not trigger viewport resize
     * When focusing on the textarea we still want to avoid viewport
     * bouncing, but we no longer lock the height.  Instead, allow
     * the textarea to keep its current size (managed by the inline
     * auto-resizing script) and remain scrollable.  This prevents
     * the keyboard from covering the caret on long prompts.
     */
    #gen-prompt:focus {
        height: 2.5rem !important;
        max-height: 2.5rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}



/* ═══════════════════════════════════════════════════════════════════════════
   COMFYAI CLOUD v56 — COMPREHENSIVE MOBILE + EDIT MODE FIX
   ✅ Mobile prompt box: no expanding, no button dropping, all devices
   ✅ Edit Image button: no layout break when images attached
   ✅ 9:16 edit mode: NO crop, NO zoom, minimize image, center, bg fill
   ✅ 16:9: keep as is, no extra zoom, perfect card
   ✅ 1:1 edit mode card adjustment
   ✅ Mobile buttons (Download, Share, Expand, Edit this): perfectly arranged
   ✅ Final theme consistency
   ═══════════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────
   §1  MOBILE PROMPT BOX — POSITION FIX, NO EXPANDING, NO OVERFLOW
   Applies to ALL mobile devices. Prompt bar stays pinned at bottom,
   never expands upward, never clips buttons, no overflow.
   ────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* Prompt bar: always flex footer, never absolute, never grows */
    .ca-prompt-bar {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        z-index: 40 !important;
        background: var(--bg, #f2f2f7) !important;
        padding: 0.375rem 0.5rem max(0.5rem, env(safe-area-inset-bottom)) !important;
        box-shadow: 0 -1px 0 rgba(0,0,0,0.06) !important;
        overflow: visible !important;
    }

    /* Prompt card: HARD max-height so it never pushes content up */
    .gen-prompt-card {
        max-height: 160px !important;
        overflow: hidden !important;
        width: calc(100% - 4px) !important;
        margin: 0 2px !important;
    }

    /* Edit mode prompt card: slightly taller for image strip */
    body.ca-edit-mode .gen-prompt-card {
        max-height: 140px !important;
        overflow: hidden !important;
    }

    /*
     * Textarea: allow multi‑line growth and scrolling on mobile.  The
     * previous fixed 2.5 rem height prevented long prompts from
     * appearing and often suppressed the on‑screen keyboard on iOS/Android.
     * We instead set the minimum height to roughly the previous
     * single‑line dimension, permit auto height so JavaScript can
     * resize the element based on the content (see app.js v57 fix),
     * and cap the maximum height to ~5 rem to maintain layout.
     * Overflow is set to auto so the user can scroll within the box.
     */
    #gen-prompt,
    #gen-prompt:focus {
        height: 2.5rem !important;
        min-height: 2.5rem !important;
        max-height: 2.5rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        resize: none !important;
        font-size: 16px !important;       /* prevents iOS zoom on focus */
        line-height: 1.35 !important;
        padding: 0.5rem 0.875rem !important;
        touch-action: pan-y !important;
    }

    /* Image strip: ultra-compact, never causes expansion */
    #gen-img-strip {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        max-height: 56px !important;
        padding: 5px 10px 4px !important;
        gap: 6px !important;
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    }
    #gen-img-strip::-webkit-scrollbar { display: none !important; }

    /* Thumbnails: 44px compact */
    #gen-img-strip > div {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
        border-width: 1.5px !important;
        overflow: visible !important;
    }
    #gen-img-strip > div img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    /* Remove button on thumbs: small */
    #gen-img-strip > div > button[title="Remove"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        font-size: 9px !important;
        top: -3px !important;
        right: -3px !important;
    }

    /* Edit mode badge: compact */
    body.ca-edit-mode #gen-edit-mode-badge {
        font-size: 9px !important;
        padding: 1px 6px !important;
    }

    /* Bottom toolbar: compact spacing */
    .gen-prompt-card .flex.items-center.justify-between {
        padding: 2px 8px !important;
        min-height: 34px !important;
    }

    /* Buttons in toolbar: proper touch targets */
    #gen-img-upload-btn,
    #gen-ar-btn {
        min-height: 32px !important;
        padding: 4px 10px !important;
        font-size: 0.68rem !important;
    }

    #gen-submit-btn,
    .gen-submit-glass {
        min-height: 38px !important;
        padding: 0.45rem 0.9rem !important;
        font-size: 0.72rem !important;
        flex-shrink: 0 !important;
    }
}


/* ──────────────────────────────────────────────
   §2  EDIT MODE 9:16 — NO CROP, NO ZOOM
   Image is minimized inside the card, centered.
   Left/right space filled with website bg color.
   Works for both desktop and mobile.
   ────────────────────────────────────────────── */

/* Desktop: 9:16 edit mode */
@media (min-width: 768px) {
    .ca-edit-result[data-aspect="9:16"] {
        max-width: 280px !important;
        width: 280px !important;
        overflow: visible !important;
    }
    .ca-edit-result[data-aspect="9:16"] .gen-atomic-wrap {
        aspect-ratio: unset !important;
        max-height: none !important;
        line-height: 0 !important;
        overflow: hidden !important;
        background: var(--bg, #f2f2f7) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .ca-edit-result[data-aspect="9:16"] img.gen-result-image {
        width: 100% !important;
        height: auto !important;
        max-height: calc(100svh - 400px) !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
    }
}

/* Mobile: 9:16 edit mode */
@media (max-width: 767px) {
    .ca-edit-result[data-aspect="9:16"] {
        max-width: 60vw !important;
        width: 60vw !important;
        margin: 0 auto !important;
        overflow: visible !important;
    }
    .ca-edit-result[data-aspect="9:16"] .gen-atomic-wrap {
        aspect-ratio: unset !important;
        max-height: none !important;
        line-height: 0 !important;
        overflow: hidden !important;
        background: var(--bg, #f2f2f7) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .ca-edit-result[data-aspect="9:16"] img.gen-result-image {
        width: 100% !important;
        height: auto !important;
        max-height: calc(100svh - 340px) !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
    }
}

/* Generate mode 9:16: same treatment — no crop, contain inside card */
.gen-result-wrapper[data-aspect="9:16"]:not(.ca-edit-result) .gen-atomic-wrap {
    background: var(--bg, #f2f2f7) !important;
}
.gen-result-wrapper[data-aspect="9:16"]:not(.ca-edit-result) img.gen-result-image {
    object-fit: contain !important;
}


/* ──────────────────────────────────────────────
   §3  16:9 EDIT MODE — KEEP AS IS, NO EXTRA ZOOM
   16:9 card stays perfect, no modifications needed.
   Just ensure no crop/zoom is accidentally applied.
   ────────────────────────────────────────────── */
@media (min-width: 768px) {
    .ca-edit-result[data-aspect="16:9"] {
        max-width: 760px !important;
        width: min(760px, 90vw) !important;
    }
    .ca-edit-result[data-aspect="16:9"] .gen-atomic-wrap {
        aspect-ratio: 16/9 !important;
        overflow: hidden !important;
    }
    .ca-edit-result[data-aspect="16:9"] img.gen-result-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}
@media (max-width: 767px) {
    .ca-edit-result[data-aspect="16:9"] {
        max-width: 100% !important;
        width: 100% !important;
    }
    .ca-edit-result[data-aspect="16:9"] .gen-atomic-wrap {
        aspect-ratio: 16/9 !important;
    }
    .ca-edit-result[data-aspect="16:9"] img.gen-result-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}


/* ──────────────────────────────────────────────
   §4  1:1 EDIT MODE CARD — Proper sizing, centered
   ────────────────────────────────────────────── */
@media (min-width: 768px) {
    .ca-edit-result[data-aspect="1:1"] {
        max-width: 420px !important;
        width: min(420px, 85vw) !important;
    }
    .ca-edit-result[data-aspect="1:1"] .gen-atomic-wrap {
        aspect-ratio: 1/1 !important;
        max-width: calc(100svh - 480px) !important;
        overflow: hidden !important;
    }
    .ca-edit-result[data-aspect="1:1"] img.gen-result-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}
@media (max-width: 767px) {
    .ca-edit-result[data-aspect="1:1"] {
        max-width: 80vw !important;
        width: 80vw !important;
        margin: 0 auto !important;
    }
    .ca-edit-result[data-aspect="1:1"] .gen-atomic-wrap {
        aspect-ratio: 1/1 !important;
        overflow: hidden !important;
    }
    .ca-edit-result[data-aspect="1:1"] img.gen-result-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}


/* ──────────────────────────────────────────────
   §5  MOBILE EDIT MODE BUTTONS — PERFECTLY ARRANGED
   Download, Share, Expand, Edit this: 2×2 grid on mobile,
   no conflicts, no overflow, centered, always visible.
   ────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* Edit mode action buttons: 2×2 centered grid */
    .ca-edit-actions,
    .ca-edit-result .gen-floating-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 90vw !important;
        margin: 0.5rem auto 0 !important;
        padding: 0 !important;
        /* Override any transform/left from portrait overrides */
        position: relative !important;
        left: auto !important;
        transform: none !important;
    }

    /* Each button: full-width in its grid cell */
    .ca-edit-actions .gen-float-btn,
    .ca-edit-result .gen-floating-actions .gen-float-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.35rem !important;
        padding: 0.55rem 0.5rem !important;
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        min-height: 38px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        width: 100% !important;
        flex-shrink: 0 !important;
    }

    .ca-edit-actions .gen-float-btn i,
    .ca-edit-result .gen-floating-actions .gen-float-btn i {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
    }

    .ca-edit-actions .gen-float-btn span,
    .ca-edit-result .gen-floating-actions .gen-float-btn span {
        display: inline !important;
    }

    /* 9:16 edit mode buttons: must break out of narrow wrapper */
    .ca-edit-result[data-aspect="9:16"] .gen-floating-actions {
        width: 90vw !important;
        max-width: 90vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Extra-small phones: even more compact buttons */
@media (max-width: 390px) {
    .ca-edit-actions .gen-float-btn,
    .ca-edit-result .gen-floating-actions .gen-float-btn {
        padding: 0.45rem 0.4rem !important;
        font-size: 0.6rem !important;
        min-height: 34px !important;
        gap: 0.25rem !important;
    }
    .ca-edit-actions .gen-float-btn i,
    .ca-edit-result .gen-floating-actions .gen-float-btn i {
        width: 12px !important;
        height: 12px !important;
    }
}

/* Tiny phones (≤ 360px): icon + short label */
@media (max-width: 360px) {
    .ca-edit-actions .gen-float-btn,
    .ca-edit-result .gen-floating-actions .gen-float-btn {
        padding: 0.4rem 0.3rem !important;
        font-size: 0.55rem !important;
        min-height: 32px !important;
    }
}


/* ──────────────────────────────────────────────
   §6  GENERATE MODE BUTTONS — SAME TREATMENT FOR ALL MOBILE
   Non-edit-mode floating actions: proper flex-wrap, centered
   ────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Standard generate mode actions */
    .gen-floating-actions:not(.ca-edit-actions) {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.4rem !important;
        width: 100% !important;
        padding: 0.25rem 0 !important;
    }

    .gen-floating-actions:not(.ca-edit-actions) .gen-float-btn {
        padding: 0.5rem 0.85rem !important;
        font-size: 0.65rem !important;
        min-height: 36px !important;
    }
}


/* ──────────────────────────────────────────────
   §7  MOBILE RESULT CONTAINER — PROPER CLEARANCE
   Enough bottom padding so buttons never get hidden
   behind the prompt bar.
   ────────────────────────────────────────────── */
@media (max-width: 767px) {
    #single-result-container {
        padding-bottom: 1rem !important;
    }

    body.ca-edit-mode #single-result-container {
        padding-bottom: 0.5rem !important;
    }

    /* Top clearance below nav */
    #single-result-container {
        padding-top: max(4.5rem, calc(3.5rem + env(safe-area-inset-top))) !important;
    }
}


/* ──────────────────────────────────────────────
   §8  MOBILE MODEL/RES SELECTOR — CLEAN INDIVIDUAL BUTTONS
   (Reinforce v55 FIX 19 — no outer pill, individual blue-bordered buttons)
   ────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Edit mode: hide selector (already handled by JS, CSS backup) */
    body.ca-edit-mode .sidebar-model-row {
        display: none !important;
    }

    /* Non-edit mode: centered row of individual buttons */
    .sidebar-model-row:not([style*="display: none"]):not([style*="display:none"]) {
        display: flex !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        padding: 0 6px !important;
        margin: 0 auto 5px !important;
    }

    .sidebar-model-row::before,
    .sidebar-model-row::after {
        display: none !important;
    }

    .gen-model-tabs {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        gap: 5px !important;
    }

    .gen-model-tab,
    .gen-res-tab {
        border: 1.5px solid rgba(99,102,241,0.30) !important;
        background: #ffffff !important;
        border-radius: 1.25rem !important;
        padding: 6px 12px !important;
        font-size: 0.68rem !important;
    }

    .gen-model-tab.active,
    .gen-res-tab.active {
        background: rgba(99,102,241,0.10) !important;
        border-color: rgba(99,102,241,0.55) !important;
        color: #4f46e5 !important;
    }

    .gen-tab-divider {
        display: none !important;
    }
}


/* ──────────────────────────────────────────────
   §9  DESKTOP EDIT MODE — 9:16 BOTTOM PADDING
   Ensure buttons + prompt bar don't overlap the image
   ────────────────────────────────────────────── */
@media (min-width: 768px) {
    body.ca-edit-mode #single-result-container:has(.ca-edit-result[data-aspect="9:16"]) {
        padding-bottom: 22rem !important;
    }
    body.ca-edit-mode #single-result-container:has(.ca-edit-result[data-aspect="1:1"]) {
        padding-bottom: 20rem !important;
    }
    body.ca-edit-mode #single-result-container:has(.ca-edit-result[data-aspect="16:9"]) {
        padding-bottom: 18rem !important;
    }
}


/* ──────────────────────────────────────────────
   §10  FINAL THEME CONSISTENCY
   Ensure all views have consistent background,
   buttons have consistent styling across modes.
   ────────────────────────────────────────────── */

/* Edit mode result: all 4 buttons identical glass pills */
.ca-edit-result .gen-float-btn {
    background: rgba(255,255,255,0.95) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    color: var(--text-1) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* All 4 buttons: same green glow on hover */
.ca-edit-result .gen-float-btn:hover {
    background: rgba(16,185,129,0.12) !important;
    border-color: rgba(16,185,129,0.35) !important;
    color: #059669 !important;
    box-shadow: 0 4px 16px rgba(16,185,129,0.30), 0 0 16px rgba(16,185,129,0.15) !important;
    transform: translateY(-1px) scale(1.02) !important;
}

/* Generate mode view: white bg */
#view-generate {
    background: #ffffff !important;
}

/* Prompt bar bg consistency */
@media (max-width: 767px) {
    .ca-prompt-bar {
        background: #ffffff !important;
    }
}

/* Nav pill consistent glass */
.ca-nav-mobile nav {
    background: rgba(255,255,255,0.94) !important;
}

/* Result atomic wrap: consistent rounded corners */
.gen-atomic-wrap {
    border-radius: 1.25rem !important;
}
.gen-result-image {
    border-radius: 1.25rem !important;
}


/* ──────────────────────────────────────────────
   §11  GENERATE VIEW FLEX LAYOUT — MOBILE BULLETPROOF
   Ensures the entire generate page is a strict flex column
   so prompt bar never gets pushed off screen.
   ────────────────────────────────────────────── */
@media (max-width: 767px) {
    #view-generate {
        display: flex !important;
        flex-direction: column !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    #view-generate > .flex.h-full,
    #view-generate > .relative.z-10 {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #view-generate main,
    #gen-main {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding-top: 0 !important;
    }

    #single-result-container {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
    }
}


/* ──────────────────────────────────────────────
   §12  DESKTOP: 9:16 CARD BG COLOR FILL
   For 9:16 images where the card is wider than the image,
   fill left/right gaps with website bg color.
   ────────────────────────────────────────────── */
@media (min-width: 768px) {
    /* 9:16 generate mode: bg fill for card wrapper */
    .gen-result-wrapper[data-aspect="9:16"] .gen-atomic-wrap {
        background: var(--bg, #f2f2f7) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* END v56 COMPREHENSIVE FIX */


/* ═══════════════════════════════════════════════════════════════════════════
   COMFYAI CLOUD v56.1 — TARGETED FIXES
   ✅ 1. Mobile prompt box: slightly taller (2.5rem → 2.85rem)
   ✅ 2. Edit Image button: proper spacing, never hidden
   ✅ 3. Desktop edit mode 9:16: NO crop, NO zoom, minimize image,
         center, bg fill — matching mobile treatment exactly
   ✅ Generator mode: UNTOUCHED
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────
   FIX 1: MOBILE PROMPT BOX — SLIGHTLY TALLER
   Increase textarea from 2.5rem to 2.85rem.
   Increase prompt card max-height to accommodate.
   ───────────────────────────────────────────────── */
@media (max-width: 767px) {

    /*
     * Allow the prompt textarea to expand beyond a single line on
     * handheld devices while capping the maximum height.  Using
     * `auto` height lets JS measure and resize the element as the
     * user types, and keeping the min height at 2.85 rem preserves
     * the original design aesthetic.  Overflow-y is set to auto so
     * long prompts can scroll within the card instead of pushing the
     * entire card upward.
     */
    #gen-prompt,
    #gen-prompt:focus {
        height: auto !important;
        min-height: 2.85rem !important;
        max-height: 5rem !important;
        overflow-y: auto !important;
        resize: none !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        padding: 0.6rem 0.9rem !important;
    }

    /* Prompt card: accommodate the taller textarea + toolbar */
    .gen-prompt-card {
        max-height: 180px !important;
        overflow: hidden !important;
    }

    /* Edit mode prompt card: image strip + textarea + toolbar */
    body.ca-edit-mode .gen-prompt-card {
        max-height: 170px !important;
        overflow: hidden !important;
    }
}


/* ─────────────────────────────────────────────────
   FIX 2: EDIT BUTTON + TOOLBAR — PROPER SPACING, NEVER HIDDEN
   The bottom toolbar row (Add Image, AR, Edit badge, Generate/Edit button)
   must always be fully visible with proper padding and gap.
   ───────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* Bottom toolbar row: generous padding, taller min-height */
    .gen-prompt-card .flex.items-center.justify-between {
        padding: 4px 10px 4px !important;
        min-height: 40px !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }

    /* Upload / AR buttons: proper sizing */
    #gen-img-upload-btn,
    #gen-ar-btn {
        min-height: 34px !important;
        padding: 5px 11px !important;
        font-size: 0.7rem !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* Edit mode badge: don't eat up space */
    #gen-edit-mode-badge {
        font-size: 9px !important;
        padding: 2px 7px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* Generate / Edit Image submit button: ALWAYS visible, never crushed */
    #gen-submit-btn,
    .gen-submit-glass {
        min-height: 40px !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.75rem !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        margin-left: auto !important;
    }

    /* When Edit Image button has long text, truncate instead of wrap */
    #gen-submit-btn span,
    .gen-submit-glass span {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100px !important;
    }
}


/* ─────────────────────────────────────────────────
   FIX 3: DESKTOP EDIT MODE — ALL PORTRAIT CARDS
   NO crop, NO zoom. Minimize image, center it.
   Fill left/right empty space with website bg color.
   Matching the same treatment as mobile.
   ONLY targets .ca-edit-result (edit mode).
   Generator mode is COMPLETELY UNTOUCHED.
   ───────────────────────────────────────────────── */

/* === DESKTOP EDIT MODE: 9:16 === */
@media (min-width: 768px) {
    .ca-edit-result[data-aspect="9:16"] {
        max-width: 240px !important;
        width: 240px !important;
        overflow: visible !important;
    }
    .ca-edit-result[data-aspect="9:16"] .gen-atomic-wrap {
        aspect-ratio: unset !important;
        max-height: none !important;
        line-height: 0 !important;
        overflow: hidden !important;
        background: var(--bg, #f2f2f7) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 1.25rem !important;
    }
    .ca-edit-result[data-aspect="9:16"] img.gen-result-image {
        width: 100% !important;
        height: auto !important;
        max-height: calc(100svh - 420px) !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
        border-radius: 1.25rem !important;
    }
}

/* === DESKTOP EDIT MODE: 3:4 === */
@media (min-width: 768px) {
    .ca-edit-result[data-aspect="3:4"] {
        max-width: 300px !important;
        width: 300px !important;
    }
    .ca-edit-result[data-aspect="3:4"] .gen-atomic-wrap {
        aspect-ratio: unset !important;
        background: var(--bg, #f2f2f7) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .ca-edit-result[data-aspect="3:4"] img.gen-result-image {
        width: 100% !important;
        height: auto !important;
        max-height: calc(100svh - 420px) !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}

/* === DESKTOP EDIT MODE: 2:3 === */
@media (min-width: 768px) {
    .ca-edit-result[data-aspect="2:3"] {
        max-width: 280px !important;
        width: 280px !important;
    }
    .ca-edit-result[data-aspect="2:3"] .gen-atomic-wrap {
        aspect-ratio: unset !important;
        background: var(--bg, #f2f2f7) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .ca-edit-result[data-aspect="2:3"] img.gen-result-image {
        width: 100% !important;
        height: auto !important;
        max-height: calc(100svh - 420px) !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}

/* === DESKTOP EDIT MODE: 9:19.5 === */
@media (min-width: 768px) {
    .ca-edit-result[data-aspect="9:19.5"] {
        max-width: 220px !important;
        width: 220px !important;
    }
    .ca-edit-result[data-aspect="9:19.5"] .gen-atomic-wrap {
        aspect-ratio: unset !important;
        background: var(--bg, #f2f2f7) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .ca-edit-result[data-aspect="9:19.5"] img.gen-result-image {
        width: 100% !important;
        height: auto !important;
        max-height: calc(100svh - 420px) !important;
        object-fit: contain !important;
    }
}

/* === DESKTOP EDIT MODE: 9:20 === */
@media (min-width: 768px) {
    .ca-edit-result[data-aspect="9:20"] {
        max-width: 210px !important;
        width: 210px !important;
    }
    .ca-edit-result[data-aspect="9:20"] .gen-atomic-wrap {
        aspect-ratio: unset !important;
        background: var(--bg, #f2f2f7) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .ca-edit-result[data-aspect="9:20"] img.gen-result-image {
        width: 100% !important;
        height: auto !important;
        max-height: calc(100svh - 420px) !important;
        object-fit: contain !important;
    }
}

/* === DESKTOP EDIT MODE: 1:2 === */
@media (min-width: 768px) {
    .ca-edit-result[data-aspect="1:2"] {
        max-width: 240px !important;
        width: 240px !important;
    }
    .ca-edit-result[data-aspect="1:2"] .gen-atomic-wrap {
        aspect-ratio: unset !important;
        background: var(--bg, #f2f2f7) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .ca-edit-result[data-aspect="1:2"] img.gen-result-image {
        width: 100% !important;
        height: auto !important;
        max-height: calc(100svh - 420px) !important;
        object-fit: contain !important;
    }
}

/* === DESKTOP EDIT MODE: 1:1 — slightly smaller, contained === */
@media (min-width: 768px) {
    .ca-edit-result[data-aspect="1:1"] {
        max-width: 380px !important;
        width: min(380px, 80vw) !important;
    }
    .ca-edit-result[data-aspect="1:1"] .gen-atomic-wrap {
        aspect-ratio: unset !important;
        max-width: none !important;
        background: var(--bg, #f2f2f7) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .ca-edit-result[data-aspect="1:1"] img.gen-result-image {
        width: 100% !important;
        height: auto !important;
        max-height: calc(100svh - 420px) !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}

/* === DESKTOP EDIT MODE: 16:9 — keep as-is, no crop changes === */
@media (min-width: 768px) {
    .ca-edit-result[data-aspect="16:9"] {
        max-width: 700px !important;
        width: min(700px, 88vw) !important;
    }
    .ca-edit-result[data-aspect="16:9"] .gen-atomic-wrap {
        aspect-ratio: 16/9 !important;
        overflow: hidden !important;
    }
    .ca-edit-result[data-aspect="16:9"] img.gen-result-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* === DESKTOP EDIT MODE: 4:3 — keep cover, no crop changes === */
@media (min-width: 768px) {
    .ca-edit-result[data-aspect="4:3"] {
        max-width: 580px !important;
        width: min(580px, 88vw) !important;
    }
    .ca-edit-result[data-aspect="4:3"] .gen-atomic-wrap {
        aspect-ratio: 4/3 !important;
        overflow: hidden !important;
    }
    .ca-edit-result[data-aspect="4:3"] img.gen-result-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* === DESKTOP EDIT MODE: 3:2 — keep cover === */
@media (min-width: 768px) {
    .ca-edit-result[data-aspect="3:2"] {
        max-width: 540px !important;
        width: min(540px, 88vw) !important;
    }
    .ca-edit-result[data-aspect="3:2"] .gen-atomic-wrap {
        aspect-ratio: 3/2 !important;
        overflow: hidden !important;
    }
    .ca-edit-result[data-aspect="3:2"] img.gen-result-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* === DESKTOP EDIT MODE: wide panoramics — keep cover === */
@media (min-width: 768px) {
    .ca-edit-result[data-aspect="19.5:9"],
    .ca-edit-result[data-aspect="20:9"],
    .ca-edit-result[data-aspect="2:1"] {
        max-width: 720px !important;
        width: min(720px, 92vw) !important;
    }
    .ca-edit-result[data-aspect="19.5:9"] .gen-atomic-wrap,
    .ca-edit-result[data-aspect="20:9"] .gen-atomic-wrap,
    .ca-edit-result[data-aspect="2:1"] .gen-atomic-wrap {
        overflow: hidden !important;
    }
    .ca-edit-result[data-aspect="19.5:9"] img.gen-result-image,
    .ca-edit-result[data-aspect="20:9"] img.gen-result-image,
    .ca-edit-result[data-aspect="2:1"] img.gen-result-image {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}


/* ─────────────────────────────────────────────────
   FIX 3b: DESKTOP EDIT MODE BUTTONS — center under card
   For portrait edit cards, buttons break out of narrow
   wrapper and center on viewport (same as mobile).
   ───────────────────────────────────────────────── */
@media (min-width: 768px) {
    .ca-edit-result[data-aspect="9:16"] .gen-floating-actions,
    .ca-edit-result[data-aspect="3:4"] .gen-floating-actions,
    .ca-edit-result[data-aspect="2:3"] .gen-floating-actions,
    .ca-edit-result[data-aspect="9:19.5"] .gen-floating-actions,
    .ca-edit-result[data-aspect="9:20"] .gen-floating-actions,
    .ca-edit-result[data-aspect="1:2"] .gen-floating-actions {
        flex-wrap: nowrap !important;
        justify-content: center !important;
        width: max-content !important;
        max-width: none !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        gap: 0.5rem !important;
    }
}


/* ─────────────────────────────────────────────────
   FIX 3c: DESKTOP EDIT MODE — EXTRA BOTTOM PADDING
   Ensure scroll area has enough room for image + buttons + prompt bar
   ───────────────────────────────────────────────── */
@media (min-width: 768px) {
    body.ca-edit-mode #single-result-container {
        padding-bottom: 20rem !important;
    }
    body.ca-edit-mode #single-result-container:has(.ca-edit-result[data-aspect="9:16"]),
    body.ca-edit-mode #single-result-container:has(.ca-edit-result[data-aspect="9:19.5"]),
    body.ca-edit-mode #single-result-container:has(.ca-edit-result[data-aspect="9:20"]),
    body.ca-edit-mode #single-result-container:has(.ca-edit-result[data-aspect="1:2"]) {
        padding-bottom: 22rem !important;
    }
}


/* END v56.1 TARGETED FIXES */


/* ══════════════════════════════════════════════════════════════════════════════
   v57 — MOBILE PROMPT BAR: THREE TARGETED FIXES
   ✅ FIX 1 — Prompt card NEVER clips the toolbar / Edit-Image button
              Root cause: overflow:hidden + max-height was cutting off the
              bottom toolbar row whenever the image strip was visible.
              Fix: overflow:visible + max-height:none on the card itself.
              The card still looks correct — its background + border-radius
              paint normally. Only the hard clip is removed.
   ✅ FIX 2 — Image strip: locked stable height so it never distorts the box.
              flex-shrink:0 ensures it never collapses under pressure.
   ✅ FIX 3 — 5 buttons (Fast/GEN/Pro/1K/2K) moved slightly up + white bar
              extended upward for more breathing room. Done by increasing
              .ca-prompt-bar padding-top and tightening the row bottom margin.
   All rules are @max-width:767px — desktop is completely untouched.
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* ── FIX 3a: Extend white/bg area of prompt bar upward ─────────────────
       Increasing padding-top pushes the separator line higher and gives
       the 5 buttons a little more room above them.                          */
    .ca-prompt-bar {
        padding-top: 0.75rem !important;
    }

    /* ── FIX 3b: 5-button row — tighten bottom gap so buttons sit higher ──
       Reducing margin-bottom from ~6px → 3px nudges buttons toward the top
       of the white area without touching any other spacing.                  */
    .sidebar-model-row,
    .ca-prompt-bar .sidebar-model-row,
    #view-generate .sidebar-model-row {
        margin-bottom: 3px !important;
    }

    /* ── FIX 1: Prompt card — remove the overflow clip entirely ────────────
       overflow:hidden is what hid the Edit-Image button when the image
       strip was visible. With overflow:visible the border+bg still render
       correctly; only the invisible hard clip is gone.
       Natural card height = strip(54px) + textarea(46px) + toolbar(40px)
       + p-2 padding(16px) ≈ 156px — perfectly contained in the bar.        */
    .gen-prompt-card,
    body.ca-edit-mode .gen-prompt-card {
        overflow: visible !important;
        max-height: none !important;
    }

    /* ── FIX 2: Image strip — locked stable height, no layout expansion ────
       flex-shrink:0 prevents WebKit from squishing the strip when the bar
       is under flex pressure. Fixed 54px height = 44px thumb + padding.     */
    #gen-img-strip {
        flex-shrink: 0 !important;
        min-height: 54px !important;
        max-height: 54px !important;
        height: 54px !important;
        align-items: center !important;
    }

    /*
     * Textarea — allow height to grow within a sensible bound on
     * mobile while preventing the flex container from collapsing.  We
     * keep flex-shrink:0 so the textarea does not compress when the
     * parent bar is under pressure.  Setting height:auto with a
     * reasonable min/max height lets JavaScript adjust the element
     * height as the user types and the overflow-y:auto ensures that
     * longer prompts remain scrollable without pushing other UI
     * elements off-screen.  The resize property stays disabled to
     * discourage manual dragging on touch devices.
     */
    #gen-prompt,
    #gen-prompt:focus {
        flex-shrink: 0 !important;
        height: auto !important;
        min-height: 2.85rem !important;
        max-height: 5rem !important;
        overflow-y: auto !important;
        resize: none !important;
    }

    /* ── Bottom toolbar row — always visible, proper stacking context ─────
       overflow:visible ensures the submit button is never clipped.
       z-index:2 keeps it above any sibling layers.                          */
    .gen-prompt-card .flex.items-center.justify-between {
        overflow: visible !important;
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 2 !important;
        padding: 4px 10px 6px !important;
        min-height: 40px !important;
    }

    /* ── Generate / Edit Image submit button — always on top, never hidden ─ */
    #gen-submit-btn,
    .gen-submit-glass {
        overflow: visible !important;
        position: relative !important;
        z-index: 3 !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* ── Upload + AR buttons — never shrink ─────────────────────────────── */
    #gen-img-upload-btn,
    #gen-ar-btn {
        flex-shrink: 0 !important;
    }

    /* ── Edit mode badge — never shrink ─────────────────────────────────── */
    #gen-edit-mode-badge {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
}

/* Dark-mode: same upward extension for the white bar */
@media (max-width: 767px) {
    html.ca-dark .ca-prompt-bar {
        padding-top: 0.75rem !important;
    }
    html.ca-dark .sidebar-model-row {
        margin-bottom: 3px !important;
    }
}

/* END v57 MOBILE PROMPT BAR FIXES */

/* ═════════════════════════════════════════════════════════════════════════════
   AI WRITER BRAIN — Prompt enhancement buttons
   ═════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   AI WRITER ROW — wraps label + buttons, centered on desktop
═══════════════════════════════════════════════════════════════════════ */
.ca-writer-row {
    display: flex;
    align-items: center;
    justify-content: center;          /* perfect center on desktop */
    gap: 6px;
    padding: 7px 12px 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    min-height: 42px;
    position: relative;
}
.ca-writer-row::-webkit-scrollbar { display: none; }

/* ── AI Writer label (brain icon + "AI Writer" text) ── */
.ca-writer-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.61rem;
    font-weight: 800;
    color: var(--text-5);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
    opacity: 0.65;
    margin-right: 2px;
}

/* ── Button group wrapper ── */
.ca-writer-btns {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════
   BASE BUTTON — matches site's existing pill-chip aesthetic
   (same visual language as gen-img-upload-btn & gen-ar-btn)
════════════════════════════════════════════════════════════════════ */
.ca-writer-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 0.75rem;           /* rounded-xl — matches site btns */
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    border: 1px solid rgba(99,102,241,0.22);
    background: rgba(99,102,241,0.08);
    color: #5b5ef7;
    white-space: nowrap;
    min-height: 32px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    transition:
        transform   0.22s var(--ca-ease-spring),
        background  0.18s var(--ca-ease-apple),
        box-shadow  0.20s var(--ca-ease-apple),
        border-color 0.18s ease,
        color       0.18s ease;
}

/* Shimmer sweep on hover */
.ca-writer-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(255,255,255,0.30) 50%,
        transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.50s ease;
    pointer-events: none;
}
.ca-writer-btn:hover::before { transform: translateX(130%); }

.ca-writer-btn:hover {
    background: rgba(99,102,241,0.14);
    border-color: rgba(99,102,241,0.42);
    box-shadow: 0 3px 14px rgba(99,102,241,0.20);
    transform: translateY(-1px) scale(1.035);
    color: #4f46e5;
}
.ca-writer-btn:active {
    transform: scale(0.95) translateY(0);
    transition-duration: 0.08s;
}
.ca-writer-btn.ca-writer-loading {
    opacity: 0.45;
    pointer-events: none;
    animation: writerBtnPulse 1.4s ease-in-out infinite;
}
@keyframes writerBtnPulse {
    0%, 100% { opacity: 0.45; }
    50%       { opacity: 0.65; }
}

/* ── IMPROVE — teal/green (matches gen-ar-btn) ── */
.ca-writer-btn--improve {
    border-color: rgba(16,185,129,0.22);
    background: rgba(16,185,129,0.08);
    color: #059669;
}
.ca-writer-btn--improve:hover {
    background: rgba(16,185,129,0.14);
    border-color: rgba(16,185,129,0.42);
    box-shadow: 0 3px 14px rgba(16,185,129,0.20);
    color: #047857;
}

/* ── CREATIVE — vibrant purple with animated gradient border ── */
.ca-writer-btn--creative {
    border-color: rgba(168,85,247,0.25);
    background: rgba(168,85,247,0.08);
    color: #9333ea;
    position: relative;
}
.ca-writer-btn--creative::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(90deg,
        rgba(99,102,241,0.5),
        rgba(168,85,247,0.6),
        rgba(236,72,153,0.5),
        rgba(99,102,241,0.5));
    background-size: 300% 100%;
    animation: writerCreativeBorder 3s linear infinite;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 0;
}
.ca-writer-btn--creative > * { position: relative; z-index: 1; }
.ca-writer-btn--creative:hover::after { opacity: 1; }
.ca-writer-btn--creative:hover {
    background: rgba(168,85,247,0.14);
    border-color: transparent;
    box-shadow: 0 3px 16px rgba(168,85,247,0.26);
    color: #7c3aed;
}
@keyframes writerCreativeBorder {
    0%   { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* ── BEST — premium amber/gold with subtle glow animation ── */
.ca-writer-btn--best {
    border-color: rgba(245,158,11,0.28);
    background: linear-gradient(135deg,
        rgba(245,158,11,0.10) 0%,
        rgba(251,191,36,0.07) 100%);
    color: #d97706;
    box-shadow: 0 1px 4px rgba(245,158,11,0.10);
    animation: writerBestGlow 3s ease-in-out infinite;
}
.ca-writer-btn--best:hover {
    background: linear-gradient(135deg,
        rgba(245,158,11,0.18) 0%,
        rgba(251,191,36,0.14) 100%);
    border-color: rgba(245,158,11,0.52);
    box-shadow: 0 3px 16px rgba(245,158,11,0.28),
                0 0 0 3px rgba(245,158,11,0.06);
    color: #b45309;
    animation: none;
}
@keyframes writerBestGlow {
    0%, 100% { box-shadow: 0 1px 4px rgba(245,158,11,0.10); }
    50%       { box-shadow: 0 2px 10px rgba(245,158,11,0.22); }
}

/* ════════════════════════════════════════════════════════════════════
   LOADING DOTS — shown while AI is thinking
════════════════════════════════════════════════════════════════════ */
.ca-writer-spinner {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    flex-shrink: 0;
}
.ca-writer-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--indigo);
    animation: writerDotPulse 1.1s ease-in-out infinite;
}
.ca-writer-dot:nth-child(2) { animation-delay: 0.18s; background: var(--purple); }
.ca-writer-dot:nth-child(3) { animation-delay: 0.36s; background: var(--orange); }

@keyframes writerDotPulse {
    0%, 80%, 100% { transform: scale(0.65); opacity: 0.35; }
    40%            { transform: scale(1.25); opacity: 1; }
}

/* ── Typewriter cursor animation on textarea while AI fills it ── */
#gen-prompt.ca-typewriting {
    caret-color: var(--indigo);
    animation: caTypewriterBlink 0.6s step-end infinite;
}
@keyframes caTypewriterBlink {
    0%, 100% { caret-color: var(--indigo); }
    50%       { caret-color: transparent; }
}

/* ── Glow pulse on prompt card while AI is writing ── */
.gen-prompt-card.ca-writer-active {
    border-color: rgba(99,102,241,0.40) !important;
    box-shadow:
        0 0 0 3px rgba(99,102,241,0.08),
        0 0 28px rgba(99,102,241,0.12),
        var(--glass-shadow) !important;
    transition: all 0.28s var(--ca-ease-smooth);
}

/* ════════════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .ca-writer-row { border-top-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .ca-writer-label { color: rgba(255,255,255,0.30); }

[data-theme="dark"] .ca-writer-btn {
    background: rgba(99,102,241,0.12);
    border-color: rgba(99,102,241,0.28);
    color: #818cf8;
}
[data-theme="dark"] .ca-writer-btn:hover {
    background: rgba(99,102,241,0.20);
    border-color: rgba(99,102,241,0.48);
    color: #a5b4fc;
}
[data-theme="dark"] .ca-writer-btn--improve {
    background: rgba(16,185,129,0.10);
    border-color: rgba(16,185,129,0.26);
    color: #34d399;
}
[data-theme="dark"] .ca-writer-btn--improve:hover {
    background: rgba(16,185,129,0.18);
    color: #6ee7b7;
}
[data-theme="dark"] .ca-writer-btn--creative {
    background: rgba(168,85,247,0.12);
    border-color: rgba(168,85,247,0.30);
    color: #c084fc;
}
[data-theme="dark"] .ca-writer-btn--creative:hover { color: #e9d5ff; }
[data-theme="dark"] .ca-writer-btn--best {
    background: rgba(245,158,11,0.10);
    border-color: rgba(245,158,11,0.28);
    color: #fbbf24;
}
[data-theme="dark"] .ca-writer-btn--best:hover { color: #fde68a; }

/* ════════════════════════════════════════════════════════════════════
   MOBILE — keep all 4 buttons visible, left-aligned, scrollable
════════════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
    .ca-writer-row {
        justify-content: flex-start;    /* scroll left-to-right on mobile */
        padding: 6px 10px 7px;
        gap: 5px;
        min-height: 40px;
    }
    .ca-writer-label { display: none; }   /* hide label to save space */
    .ca-writer-btn {
        padding: 5px 10px;
        font-size: 0.69rem;
        min-height: 30px;
        border-radius: 0.65rem;
    }
}
@media (max-width: 380px) {
    .ca-writer-btn {
        padding: 4px 8px;
        font-size: 0.66rem;
        gap: 3px;
    }
    .ca-writer-btn svg,
    .ca-writer-btn i { display: none; }  /* icon-only mode on tiny screens */
}

/* ═══════════════════════════════════════════════════════════════════
   v55 — SCROLL · EMPTY-STRIP · WRITER-BTN IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════

   1. PROMPT TEXTAREA — butter-smooth scroll on all platforms
   2. IMAGE STRIP    — hidden on mobile unless edit mode is active
   3. WRITER BUTTONS — smaller/tighter on mobile
═══════════════════════════════════════════════════════════════════ */

/* ── 1a. TEXTAREA SCROLL — mobile (iOS + Android) ─────────────────
   The #gen-prompt textarea grows up to 6rem. When content overflows
   it needs iOS momentum scroll, GPU compositing, and the exact
   touch-action value that allows vertical finger swipes inside the
   box without hijacking page scroll. */
@media (max-width: 767px) {
    #gen-prompt {
        /* Momentum scrolling — iOS Safari & old WebKit */
        -webkit-overflow-scrolling: touch;
        /* Only vertical pan inside box; horizontal pan scrolls page */
        touch-action: pan-y;
        /* GPU-composited layer — prevents jank on repaint */
        will-change: scroll-position;
        /* Smooth deceleration */
        scroll-behavior: smooth;
        /* Contain overscroll — don't let it chain to page */
        overscroll-behavior-y: contain;
        /* Hide scrollbar track while keeping scroll functional */
        scrollbar-width: none;
    }
    #gen-prompt::-webkit-scrollbar { display: none; }
}

/* ── 1b. TEXTAREA SCROLL — desktop ────────────────────────────────
   On desktop show a thin elegant scrollbar that matches the site's
   existing .custom-scrollbar aesthetic. */
@media (min-width: 768px) {
    #gen-prompt {
        scroll-behavior: smooth;
        overscroll-behavior-y: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(0,0,0,0.13) transparent;
    }
    #gen-prompt::-webkit-scrollbar {
        width: 4px;
    }
    #gen-prompt::-webkit-scrollbar-track {
        background: transparent;
        margin: 4px 0;
    }
    #gen-prompt::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.14);
        border-radius: 4px;
    }
    #gen-prompt::-webkit-scrollbar-thumb:hover {
        background: rgba(0,0,0,0.24);
    }
    [data-theme="dark"] #gen-prompt::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.15);
    }
    [data-theme="dark"] #gen-prompt::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.28);
    }
}

/* ── 2. IMAGE STRIP — mobile-only: collapse unless edit mode ───────
   On mobile the strip has inline display:none from JS, but we also
   enforce via CSS so no ghost height/border appears when JS is slow.
   The body.ca-edit-mode class is added by _updateEditModeUI() the
   moment an image is attached, so the strip only opens in edit mode. */
@media (max-width: 767px) {
    /* Hard-collapse strip when no images: no height, no border */
    #gen-img-strip:empty,
    body:not(.ca-edit-mode) #gen-img-strip {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        border: none !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    /* In edit mode: smooth slide-in animation */
    body.ca-edit-mode #gen-img-strip {
        display: flex !important;
        animation: stripReveal 0.22s cubic-bezier(0.34,1.20,0.64,1) both;
    }
    @keyframes stripReveal {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* ── 3. WRITER BUTTONS — smaller on mobile ─────────────────────────
   Target: all 4 buttons fit on one line on 375px without scrolling,
   feel tap-friendly (min 28px), and keep their colour identity. */
@media (max-width: 767px) {
    .ca-writer-row {
        padding: 5px 8px 6px;
        gap: 4px;
        min-height: 38px;
        justify-content: center;
    }
    .ca-writer-label { display: none; }   /* hide "AI Writer" label */
    .ca-writer-btn {
        padding: 4px 9px;
        font-size: 0.645rem;
        min-height: 28px;
        gap: 3px;
        border-radius: 0.6rem;
        letter-spacing: 0.005em;
    }
    .ca-writer-btn svg,
    .ca-writer-btn i {
        width: 11px !important;
        height: 11px !important;
    }
}

/* Very small phones (≤ 380px) — tightest possible fit */
@media (max-width: 380px) {
    .ca-writer-btn {
        padding: 3px 7px;
        font-size: 0.60rem;
        min-height: 26px;
        gap: 2px;
    }
    /* Icons eat too much space — hide them, text only */
    .ca-writer-btn svg,
    .ca-writer-btn i { display: none !important; }
}

/* ── Hover / active states stay sharp — only override sizing ── */
.ca-writer-btn:hover { transform: translateY(-1px) scale(1.03); }
.ca-writer-btn:active { transform: scale(0.94) translateY(0); }


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE SCROLL + CURSOR FINAL FIX — v57
   Fixes: iOS/Android scroll-in-scroll, cursor position, prompt box scroll
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── PROMPT BOX: allow real scrolling when text overflows ─────────────── */
@media (max-width: 767px) {
    #gen-prompt,
    #gen-prompt:focus {
        /* Allow vertical scroll when prompt text overflows single line */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;

        /* Fix cursor/caret position: uniform padding, block display */
        height: auto !important;
        min-height: 2.85rem !important;
        max-height: 5rem !important;
        line-height: 1.4 !important;
        padding: 0.6rem 0.9rem !important;

        /* Remove webkit ghost padding that shifts cursor up/down */
        -webkit-padding-before: 0 !important;
        -webkit-padding-after: 0 !important;
        display: block !important;
        vertical-align: top !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        resize: none !important;
        will-change: scroll-position;
    }

    #gen-prompt::-webkit-scrollbar { display: none !important; }

    /* Prompt card: expand to show textarea + toolbar */
    .gen-prompt-card {
        max-height: 220px !important;
        overflow: visible !important;
    }
    body.ca-edit-mode .gen-prompt-card {
        max-height: 200px !important;
        overflow: visible !important;
    }
}

/* ── SCROLL-IN-SCROLL: fix iOS elastic overscroll chaining ───────────── */
@media (max-width: 767px) {
    /* The result container is the ONLY thing that scrolls vertically */
    #single-result-container {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    /* The generate view is a rigid flex column — NEVER scrolls itself */
    #view-generate {
        display: flex !important;
        flex-direction: column !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
        position: relative !important;
    }

    /* All intermediate wrappers between view and result container */
    #view-generate > .flex.h-full,
    #view-generate > .relative.z-10,
    #view-generate main,
    #gen-main {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Prompt bar: pinned at bottom, never scrolls */
    .ca-prompt-bar {
        flex-shrink: 0 !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 40 !important;
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
        overscroll-behavior: none !important;
    }
}

/* ── CURSOR POSITION: fix ghost-row / wrong caret position on all mobile ─ */
@media (hover: none) and (pointer: coarse) {
    #gen-prompt {
        vertical-align: top !important;
        display: block !important;
        box-sizing: border-box !important;
        -webkit-padding-before: 0 !important;
        -webkit-padding-after: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0.6rem !important;
        padding-bottom: 0.6rem !important;
        line-height: 1.4 !important;
        caret-color: var(--indigo, #6366f1) !important;
    }
}

/* ── HISTORY + SUPPORT CHAT nested scroll — iOS safe ─────────────────── */
#history-list,
#history-list-mobile,
.support-chat-messages {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
}

/* ── VIEW SECTIONS (non-generate) — smooth native scroll on iOS ───────── */
@media (max-width: 767px) {
    .view-section:not(#view-generate) {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-y !important;
    }
}
/* END v57 MOBILE FIX */

:root {
    --ca-viewport-height: 100dvh;
    --ca-viewport-offset-top: 0px;
    --ca-viewport-offset-left: 0px;
    --ca-keyboard-offset: 0px;
    --ca-prompt-bar-height: 148px;
    --ca-mobile-input-clearance: 140px;
    --ca-support-input-clearance: 120px;
}

@media (hover: none) and (pointer: coarse) {
    html,
    body,
    .ca-body {
        min-height: var(--ca-viewport-height);
    }

    #view-generate,
    #view-support {
        height: var(--ca-viewport-height) !important;
        max-height: var(--ca-viewport-height) !important;
    }

    #single-result-container {
        scroll-padding-bottom: calc(var(--ca-mobile-input-clearance) + env(safe-area-inset-bottom)) !important;
    }

    .ca-support-page-messages {
        scroll-padding-bottom: calc(var(--ca-support-input-clearance) + env(safe-area-inset-bottom)) !important;
    }

    #gen-prompt,
    #home-prompt,
    #ca-chat-input,
    #ca-support-page-input {
        font-size: 16px !important;
        line-height: 1.45 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        caret-color: var(--indigo, #6366f1) !important;
    }

    #gen-prompt {
        min-height: 2.875rem !important;
        max-height: 6rem !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .ca-prompt-bar,
    .ca-support-page-input-bar {
        padding-bottom: max(0.625rem, env(safe-area-inset-bottom)) !important;
    }

    body.ca-mobile-keyboard-open #single-result-container,
    body.ca-mobile-keyboard-open .ca-support-page-messages {
        scroll-behavior: auto !important;
    }
}

/* END v58 MOBILE KEYBOARD STABILITY FIX */

@media (hover: none) and (pointer: coarse) {
    body.ca-mobile-input-active,
    body.ca-mobile-input-active #view-generate,
    body.ca-mobile-input-active #gen-main,
    body.ca-mobile-input-active #single-result-container {
        scroll-behavior: auto !important;
    }

    #view-generate,
    #view-generate > .flex.h-full,
    #gen-main,
    #view-generate main,
    #single-result-container,
    .ca-prompt-bar,
    .gen-prompt-card,
    #gen-prompt {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }

    /* Android / non-iOS touch: use position:fixed + translate to track keyboard.
       iOS overrides these below with the flex-column approach. */
    body:not(.ca-ios-device) .ca-prompt-bar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        z-index: 80 !important;
        transform: translate3d(0, calc(-1 * var(--ca-keyboard-offset)), 0) !important;
        -webkit-transform: translate3d(0, calc(-1 * var(--ca-keyboard-offset)), 0) !important;
        will-change: auto !important;
        padding-top: 0.35rem !important;
        padding-bottom: max(0.35rem, env(safe-area-inset-bottom)) !important;
        background: #ffffff !important;
    }

    #gen-main,
    #view-generate main {
        padding-bottom: 0 !important;
    }

    body:not(.ca-ios-device) #single-result-container {
        padding-bottom: calc(var(--ca-mobile-input-clearance) + 0.5rem) !important;
        scroll-padding-bottom: calc(var(--ca-mobile-input-clearance) + var(--ca-keyboard-offset) + 0.5rem) !important;
    }

    #gen-prompt,
    #gen-prompt:focus {
        height: 2.5rem !important;
        min-height: 2.5rem !important;
        max-height: 2.5rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        font-size: 16px !important;
        touch-action: pan-y !important;
    }

    body.ca-mobile-keyboard-open:not(.ca-ios-device) .ca-prompt-bar {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
        box-shadow: 0 -1px 0 rgba(0,0,0,0.04) !important;
    }

    body.ca-mobile-keyboard-open:not(.ca-ios-device) #single-result-container {
        padding-bottom: calc(var(--ca-mobile-input-clearance) + var(--ca-keyboard-offset) + 0.5rem) !important;
    }
}

/* END v59 MOBILE PROMPT SNAP FIX */

/* ═══════════════════════════════════════════════════════════════
   iOS KEYBOARD STABLE FIX — Simple, proven approach (ported from stable build)
   No --ca-viewport-height flex-column tracking on iOS gen-prompt.
   Keyboard opens fully on first tap. No sliding, no half-keyboard.
   ─────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {

    /* iOS: prevent viewport bounce on keyboard open */
    body.ca-ios-device #view-generate {
        overflow: hidden !important;
        overscroll-behavior: none !important;
        -webkit-overscroll-behavior: none !important;
    }

    /* iOS: lock prompt bar — no transforms, no position:fixed sliding */
    body.ca-ios-device .ca-prompt-bar {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        padding-bottom: max(0.625rem, env(safe-area-inset-bottom)) !important;
        z-index: 30 !important;
    }

    /* iOS: kill all transitions/animations on keyboard-related elements —
       prevents the "slide" visual that appears when viewport changes */
    body.ca-ios-device #view-generate,
    body.ca-ios-device .ca-prompt-bar,
    body.ca-ios-device .gen-prompt-card,
    body.ca-ios-device #gen-prompt,
    body.ca-ios-device #app-root {
        transition: none !important;
        animation: none !important;
    }

    /* iOS: prevent document scroll bounce while keyboard active */
    body.ca-ios-device.ca-mobile-keyboard-open,
    body.ca-ios-device.ca-ios-keyboard-pending {
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }
}

/* Gen-prompt: FIXED single-row height on mobile iOS/Android —
   no expansion, no upward push, no layout shift on keyboard open.
   font-size 16px prevents iOS auto-zoom on focus. */
@media (hover: none) and (pointer: coarse) and (max-width: 767px) {
    #view-generate #gen-prompt,
    #view-generate #gen-prompt:focus {
        height: 2.5rem !important;
        min-height: 2.5rem !important;
        max-height: 2.5rem !important;
        overflow-y: auto !important;           /* allow scroll inside box */
        -webkit-overflow-scrolling: touch !important; /* smooth iOS inner scroll */
        overscroll-behavior-y: contain !important;
        resize: none !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
        padding: 0.5rem 0.875rem !important;
        touch-action: pan-y !important;        /* allow vertical drag inside */
    }
}
/* END iOS KEYBOARD STABLE FIX */


/* ═════════════════════════════════════════════════════════════════════════════
   v62 — ICE-BLUE LIQUID GLASS + PROMPT 2-LINE + TOAST UPGRADE
   Appended last — highest specificity wins.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   §1. HOME HERO H1 — Ice-blue gradient text
       #0A1628 → #1E3A8A → #2563EB with shimmer drop-shadow
   ───────────────────────────────────────────────────── */
#view-home h1,
#view-home h1.bg-clip-text,
h1.text-gradient-hero {
    /* Maintain the ice‑blue gradient but remove drop shadows for a clean look */
    background: linear-gradient(148deg, #0A1628 0%, #1E3A8A 42%, #2563EB 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    letter-spacing: -0.025em !important;
    /* Remove the blurred drop-shadow from hero text */
    filter: none !important;
    will-change: auto !important;
}

/* ─────────────────────────────────────────────────────
   §2. HOME CANVAS — Cold ice-blue liquid glass background
       body.home-active: cold canvas behind particles
   ───────────────────────────────────────────────────── */
body.home-active .ambient-bg {
    background: linear-gradient(
        160deg,
        #E8F1FF 0%,
        #DDE9FF 45%,
        #EEF5FF 100%
    ) !important;
}

/* Ice-blue orbs when on home page */
body.home-active .orb-1 {
    background: radial-gradient(circle,
        rgba(147,197,253,0.75) 0%,
        rgba(59,130,246,0.30) 50%,
        transparent 100%) !important;
    opacity: 0.55 !important;
    width: 58vw !important;
    height: 58vw !important;
    top: -8% !important;
    left: -6% !important;
    animation-duration: 38s !important;
}
body.home-active .orb-2 {
    background: radial-gradient(circle,
        rgba(199,210,254,0.70) 0%,
        rgba(99,102,241,0.22) 50%,
        transparent 100%) !important;
    opacity: 0.45 !important;
    width: 62vw !important;
    height: 62vw !important;
    animation-duration: 44s !important;
}
body.home-active .orb-3 {
    background: radial-gradient(circle,
        rgba(186,230,253,0.60) 0%,
        rgba(14,165,233,0.16) 55%,
        transparent 100%) !important;
    opacity: 0.38 !important;
    animation-duration: 52s !important;
}

/* Fourth ambient orb: cool periwinkle for home only */
body.home-active .ambient-bg::after {
    background: radial-gradient(circle,
        rgba(199,210,254,0.50) 0%,
        rgba(99,102,241,0.10) 55%,
        transparent 100%) !important;
    opacity: 0.35 !important;
    width: 50vw !important;
    height: 50vw !important;
    bottom: 5% !important;
    right: 5% !important;
}

/* Inline pseudo-orbs on #view-home for deeper frosted depth:
   ::before = top-left ice shimmer, ::after = bottom-right periwinkle drift */
#view-home {
    isolation: isolate;
    overflow: hidden;
}
#view-home::before,
#view-home::after {
    /* Hide the decorative pseudo‑orbs on the home page to eliminate any visible shade around the hero */
    display: none !important;
}
#view-home > * { position: relative; z-index: 1; }

@keyframes iceOrbDrift1 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(3%, 5%) scale(1.06); }
}
@keyframes iceOrbDrift2 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-4%, -3%) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
    #view-home::before, #view-home::after { animation: none; }
}

/* Frosted-glass shimmer on the home hero content wrapper */
body.home-active #view-home > div:first-child {
    /* subtle cool tinted glass layer behind text */
    background: transparent !important;
}

/* ─────────────────────────────────────────────────────
   §3. GENERATE PROMPT BOX — 2 lines on desktop
       Desktop only (≥769 px): min-height 4.5rem = ~2 visible lines
   ───────────────────────────────────────────────────── */
@media (min-width: 769px) {
    #gen-prompt {
        min-height: 4.5rem !important;
        /* Allow up to 6 lines before scrolling */
        max-height: 9.6rem !important;
    }
}

/* ─────────────────────────────────────────────────────
   §4. TOAST — Gradient text + premium glass look
       Default/info: ice-blue gradient (#0A1628→#1E3A8A→#2563EB)
       Error/success/gift keep semantic color but gain glass polish
   ───────────────────────────────────────────────────── */

/* Reset any prior conflicting toast overrides */
.ca-toast {
    /* Layout & positioning — single centred pill, never overlaps */
    position: fixed !important;
    top: 5rem !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(0) !important;
    margin: 0 !important;

    /* Sizing */
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    padding: 0.6rem 1.35rem !important;
    border-radius: 9999px !important;
    width: max-content !important;
    max-width: min(520px, calc(100vw - 2rem)) !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    z-index: 99999 !important;

    /* Glass surface */
    background: rgba(240,246,255,0.96) !important;
    backdrop-filter: blur(28px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
    border: 1px solid rgba(147,197,253,0.45) !important;
    box-shadow:
        0 4px 24px rgba(37,99,235,0.10),
        0 1px 6px rgba(37,99,235,0.07),
        inset 0 1px 0 rgba(255,255,255,0.90) !important;

    /* Ice-blue gradient text */
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;

    /* Gradient text via mask — works reliably with transparent bg */
    color: transparent !important;
    background-image:
        linear-gradient(rgba(240,246,255,0.96), rgba(240,246,255,0.96)),
        linear-gradient(148deg, #0A1628 0%, #1E3A8A 42%, #2563EB 100%) !important;
    background-origin: padding-box, padding-box !important;
    /* Use foreground text trick: paint a solid white bg + gradient clip */
}

/* Simpler reliable approach: use text-fill instead */
.ca-toast {
    background: rgba(240,246,255,0.96) !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    background-image: none !important;
    color: #1E3A8A !important;
}

/* Gradient text via the span-inside trick isn't available here — use solid fallback
   but give it a premium look with colored text that shifts per semantic type */

/* Default (info): deep navy–blue */
.ca-toast {
    color: #1E3A8A !important;
    border-color: rgba(147,197,253,0.50) !important;
}

/* Error: rose-red */
.ca-toast.error {
    background: rgba(255,242,242,0.97) !important;
    border-color: rgba(255,100,100,0.35) !important;
    box-shadow:
        0 4px 24px rgba(220,38,38,0.10),
        0 1px 6px rgba(220,38,38,0.07),
        inset 0 1px 0 rgba(255,255,255,0.90) !important;
    color: #B91C1C !important;
}

/* Success: emerald */
.ca-toast.success {
    background: rgba(240,253,244,0.97) !important;
    border-color: rgba(34,197,94,0.35) !important;
    box-shadow:
        0 4px 24px rgba(22,163,74,0.10),
        0 1px 6px rgba(22,163,74,0.07),
        inset 0 1px 0 rgba(255,255,255,0.90) !important;
    color: #15803D !important;
}

/* Prompt-rejected (also green — "good news") */
.ca-toast.prompt-rejected {
    background: rgba(240,253,244,0.97) !important;
    border-color: rgba(34,197,94,0.30) !important;
    color: #047857 !important;
}

/* Gift: warm violet */
.ca-toast.gift {
    background: rgba(245,243,255,0.97) !important;
    border-color: rgba(139,92,246,0.35) !important;
    box-shadow:
        0 4px 24px rgba(124,58,237,0.10),
        0 1px 6px rgba(124,58,237,0.07),
        inset 0 1px 0 rgba(255,255,255,0.90) !important;
    color: #6D28D9 !important;
}

/* Warning */
.ca-toast.warning {
    background: rgba(255,251,235,0.97) !important;
    border-color: rgba(245,158,11,0.35) !important;
    box-shadow:
        0 4px 24px rgba(217,119,6,0.10),
        0 1px 6px rgba(217,119,6,0.07),
        inset 0 1px 0 rgba(255,255,255,0.90) !important;
    color: #B45309 !important;
}

/* Entrance animation: slide down + fade in */
@keyframes toastEnter {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(0.96); }
    60%  { opacity: 1; transform: translateX(-50%) translateY(2px) scale(1.01); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.ca-toast {
    animation: toastEnter 0.36s cubic-bezier(0.34,1.56,0.64,1) forwards !important;
    transition: opacity 0.28s ease, transform 0.28s ease !important;
}

/* Mobile: slightly smaller + allow wrapping */
@media (max-width: 480px) {
    .ca-toast {
        top: 4.6rem !important;
        font-size: 0.75rem !important;
        padding: 0.5rem 1rem !important;
        max-width: calc(100vw - 2.5rem) !important;
        white-space: normal !important;
        word-break: break-word !important;
        text-align: center !important;
    }
}
/* END v62 */

/*
 * ============================================================================
 * Custom modifications for the mobile home hero (user customization)
 *
 * The client requested that on mobile the hero headline displays like the
 * provided mockup — "Create & Deconstruct" split across two lines with no
 * visible square or rectangular box behind it — and that the overall home
 * page background feels lighter.  The following overrides lighten the
 * ambient background and orb colours on the home page and hide the
 * colourful gradient border around the prompt box on small screens.  These
 * rules are placed at the end of the stylesheet to ensure they override
 * previous definitions.
 * ============================================================================
 */

/* Lighten the ambient background on the home page.  Use a very pale blue
   gradient instead of the default to make the canvas airy.  The
   `!important` flag overrides prior declarations. */
body.home-active .ambient-bg {
    background: linear-gradient(
        160deg,
        #F7FAFF 0%,
        #F4F9FF 45%,
        #FAFCFF 100%
    ) !important;
}


/*
 * Hide the ambient orbs and pseudo-orb overlays on the home page for a clean
 * background on all devices.  This removes the circular coloured shapes
 * entirely rather than just lightening them.
 */
body.home-active .ambient-bg .orb-1,
body.home-active .ambient-bg .orb-2,
body.home-active .ambient-bg .orb-3 {
    display: none !important;
}
body.home-active .ambient-bg::after,
#view-home::before,
#view-home::after {
    display: none !important;
    content: none !important;
}

/* Remove the animated gradient border around the prompt box on all devices
   for a flat, clean interface.  Previously only hidden on small screens. */
.home-prompt-gradient-border {
    background: transparent !important;
    box-shadow: none !important;
}

/* ═════════════════════════════════════════════════════════════════════════════
   FLUID DOTS BACKGROUND v2 — transparent view backgrounds + solid card panels
   Only view-home, view-generate, view-plans get transparent backgrounds.
   All cards, panels, nav, prompt bars get solid opaque backgrounds so dots
   never bleed through interactive elements.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Canvas layer ── */
#fluid-dots-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* ── Transparent backgrounds for dot-enabled views ── */
#view-home,
#view-generate,
#view-plans {
    background: transparent !important;
}

/* ── Hide generate empty state — clean look with just dots ── */
#generate-empty-state {
    display: none !important;
}

/* ── Solid card/panel backgrounds — dots must NEVER show through ── */

/* Nav bars */
.glass-nav {
    background: rgba(255,255,255,0.96) !important;
}

/* Home prompt box — no extra shadow */
.home-prompt-box {
    background: #fffcfa !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}
.home-prompt-gradient-border {
    background: transparent !important;
}
.home-nav-pill {
    background: rgba(255,255,255,0.95) !important;
}
.home-attach-pill {
    background: rgba(255,255,255,0.95) !important;
}

/* Generate page panels */
.gen-sidebar {
    background: rgba(250,248,244,0.99) !important;
}

/* Generate prompt card — clean, no heavy shadow */
.gen-prompt-card {
    background: #ffffff !important;
    border: 1.5px solid rgba(0,0,0,0.09) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.gen-prompt-card:focus-within {
    border-color: rgba(99,102,241,0.3) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.08), 0 2px 12px rgba(0,0,0,0.06) !important;
}

/* Prompt bar — NO shade on desktop, keep shade on mobile */
@media (min-width: 768px) {
    .ca-prompt-bar {
        background: transparent !important;
    }
}
@media (max-width: 767px) {
    .ca-prompt-bar {
        background: var(--bg, #faf8f4) !important;
    }
}
.gen-model-tabs {
    background: rgba(255,255,255,0.97) !important;
}
.sidebar-model-row {
    background: transparent !important;
}

/* Generate loading card — solid so dots NEVER show through */
#single-result-container > div:not(.gen-result-wrapper):not(#generate-empty-state) {
    background: rgba(250, 248, 244, 0.97) !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* Generate result cards — solid white */
.gen-result-wrapper {
    position: relative;
    z-index: 2;
}
.gen-result-wrap,
.gen-result-card {
    background: #ffffff !important;
}

/* Credits / pricing cards */
.pricing-card {
    background: #ffffff !important;
}

/* Account, replicate, other panels */
.ca-account-card,
.ca-rep-card,
.ca-support-card {
    background: #ffffff !important;
}

/* Modals — always solid */
.ca-modal-content,
.ca-modal-body {
    background: #ffffff !important;
}

/* Footer inside dot-enabled views — subtle glass */
#view-home .ca-footer,
#view-generate .ca-footer,
#view-plans .ca-footer {
    background: rgba(250,248,244,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Toast notifications */
.ca-toast {
    background: rgba(255,255,255,0.97) !important;
}

/* Page loader must block dots */
.ca-page-loader {
    z-index: 9999;
}

/* ── Reduced motion: hide dots canvas entirely ── */
@media (prefers-reduced-motion: reduce) {
    #fluid-dots-canvas {
        display: none !important;
    }
}