/* ═════════════════════════════════════════════════════════════════════════════
   COMFYARTS 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.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 {
        border-radius: 14px !important;
        padding: 3px !important;
        flex-shrink: 0 !important;
    }
    .gen-model-tab,
    .gen-aspect-tab,
    .gen-res-tab {
        padding: 5px 9px !important;
        font-size: 0.68rem !important;
        border-radius: 10px !important;
        gap: 4px !important;
    }
    .gen-model-tab.active,
    .gen-aspect-tab.active,
    .gen-res-tab.active {
        border-radius: 10px !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;
    }
}

/* Generated image result with floating actions */
.gen-result-wrapper {
    position: relative;
    display: inline-block;
    border-radius: 1.5rem;
    overflow: visible;
}

/* ── DESKTOP 9:16 FIX: buttons at TOP of image card, slightly smaller card ── */
@media (min-width: 768px) {
    /* When 9:16 result is shown, align container from top-center so scrolling works */
    #single-result-container:has(.gen-result-wrapper[data-aspect="9:16"]) {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: 2rem !important;
    }
    .gen-result-wrapper[data-aspect="9:16"] {
        display: block !important;
        position: relative !important;
        max-width: 300px !important;
    }
    .gen-result-wrapper[data-aspect="9:16"] .gen-atomic-wrap {
        width: 100% !important;
        max-height: calc(100svh - 230px) !important;
        overflow: hidden !important;
        border-radius: 1.5rem !important;
    }
    .gen-result-wrapper[data-aspect="9:16"] img.gen-result-image {
        width: 100% !important;
        max-height: calc(100svh - 230px) !important;
        object-fit: cover !important;
    }
    /* Buttons pinned to the TOP of the image card on desktop 9:16 only */
    .gen-result-wrapper[data-aspect="9:16"] .gen-floating-actions {
        position: absolute !important;
        top: 1rem !important;
        bottom: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        justify-content: center !important;
        z-index: 20 !important;
        background: rgba(0,0,0,0.18) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-radius: 9999px !important;
        padding: 0.25rem 0.5rem !important;
        gap: 0.375rem !important;
    }
}

/* ── Mobile: switch to column flow so buttons are always below the image ── */
@media (max-width: 767px) {
    .gen-result-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.25rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .gen-atomic-wrap {
        width: 100% !important;
    }
    /* 9:16 images: cap height so buttons always visible below fold */
    .gen-result-wrapper[data-aspect="9:16"] .gen-atomic-wrap,
    .gen-result-wrapper[data-aspect="9:16"] img.gen-result-image {
        max-height: calc(100svh - 300px) !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        border-radius: 1.25rem !important;
    }
    .gen-result-wrapper[data-aspect="9:16"] .gen-atomic-wrap {
        display: flex !important;
        justify-content: center !important;
        overflow: hidden !important;
        border-radius: 1.25rem !important;
    }
}

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

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

/* Floating action buttons */
.gen-floating-actions {
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    z-index: 10;
}

/* ── Mobile: bring buttons into document flow, always visible ── */
@media (max-width: 767px) {
    .gen-floating-actions {
        position: static !important;
        transform: none !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        justify-content: center !important;
        gap: 0.625rem !important;
        padding: 0 0.5rem !important;
    }
    .gen-float-btn {
        flex: 1 !important;
        max-width: 110px !important;
        justify-content: center !important;
    }
    .gen-float-btn span {
        display: inline !important;
    }
}

.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);
}

.gen-float-btn-download {
    background: var(--glass-bg-strong);
    color: var(--text-1);
}

.gen-float-btn-download:hover {
    background: var(--indigo);
    color: white;
    transform: translateY(-2px) scale(1.05);
}

.gen-float-btn-share {
    background: var(--glass-bg-strong);
    color: var(--text-1);
}

.gen-float-btn-share:hover {
    background: var(--teal);
    color: white;
    transform: translateY(-2px) scale(1.05);
}

/* 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: var(--glass-bg-strong);
    backdrop-filter: blur(40px) saturate(1.9);
    -webkit-backdrop-filter: blur(40px) saturate(1.9);
    border: 1px solid rgba(0, 0, 0, 0.09);
    box-shadow: var(--glass-shadow), var(--glass-inner-glow);
    border-radius: 1.5rem;
    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 {
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: var(--glass-shadow-lg);
    transform: translateY(-4px);
}

.pricing-card.popular {
    border-color: rgba(16, 185, 129, 0.45) !important;
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.3), var(--glass-shadow-lg);
    position: relative !important;
    overflow: visible !important;
    padding-top: 2rem !important;
}

.pricing-card.popular::before {
    display: none;
    content: none;
}

@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 4px 18px rgba(0,0,0,0.13), 0 1px 0 rgba(255,255,255,0.55) inset;
    border: 1.5px solid rgba(255,255,255,0.45);
}

.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: var(--teal); }

/* Plan name — same gradient/font style as "Power Your Creativity" hero */
.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;
}

.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(380px, calc(100vw - 2rem));
    height: min(520px, 70vh);
    background: var(--glass-bg-strong);
    backdrop-filter: blur(60px) saturate(2);
    -webkit-backdrop-filter: blur(60px) saturate(2);
    border: 1px solid var(--border-md);
    border-radius: 1.75rem;
    box-shadow: var(--shadow-xl);
    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: linear-gradient(135deg, var(--indigo-bg), var(--purple-bg));
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-shrink: 0;
}

.support-chat-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--indigo) 0%, var(--purple) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
    position: relative;
}

.support-chat-avatar::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.625rem;
    height: 0.625rem;
    background: var(--teal);
    border-radius: 50%;
    border: 2px solid var(--bg);
}

.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;
}

.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 var(--border);
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.5);
}

.support-chat-input-row textarea {
    flex: 1;
    background: var(--bg-2);
    border: 1px solid var(--border-md);
    border-radius: 1.125rem;
    color: var(--text-1);
    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: var(--indigo-border);
}

.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%;
    background: linear-gradient(145deg, var(--indigo) 0%, var(--purple) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;
    position: relative;
}

.ca-support-page-avatar::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--teal);
    border-radius: 50%;
    border: 2px solid var(--bg);
}

.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.5rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--glass-bg-strong);
    backdrop-filter: blur(40px);
    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: var(--text-5);
    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: var(--indigo-bg);
    border: 1px solid var(--indigo-border);
    color: var(--indigo);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    min-height: auto;
    white-space: nowrap;
}

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

/* 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 */
    #view-generate {
        display: flex !important;
        flex-direction: column !important;
        height: 100svh !important;
        max-height: 100svh !important;
        overflow: hidden !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 {
        min-height: 2.5rem !important;
        max-height: 4rem !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 0.625rem 0.875rem !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);
    }
    
    /* ── 9:16 & tall image result: static flow layout so buttons always visible ── */
    .gen-result-wrapper {
        /* Relative still needed for absolute positioned elements inside */
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-bottom: 0 !important;
    }
    
    /* Limit 9:16 images to never push buttons offscreen */
    .gen-result-wrapper .gen-atomic-wrap,
    .gen-result-wrapper .gen-result-image {
        max-height: 62svh !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        border-radius: 1.25rem !important;
    }
    
    .gen-result-wrapper .gen-atomic-wrap {
        display: flex !important;
        justify-content: center !important;
        overflow: hidden !important;
        width: 100% !important;
    }
    
    /* Floating actions become static row BELOW image on mobile */
    .gen-floating-actions {
        position: static !important;
        transform: none !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 0.625rem !important;
        margin-top: 0.875rem !important;
        padding-bottom: 0.5rem !important;
        z-index: 10 !important;
        width: 100% !important;
    }
    
    .gen-float-btn {
        padding: 0.5rem 0.875rem !important;
        font-size: 0.6875rem !important;
        gap: 0.375rem !important;
        flex: 1 !important;
        justify-content: center !important;
        max-width: 100px !important;
    }
    
    .gen-float-btn span {
        display: inline !important;
        font-size: 0.6rem !important;
    }
}

@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 */
.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 — Gen-Z glass redesign */
.pricing-card {
    background: rgba(255,255,255,0.94) !important;
    border: 1.5px solid rgba(0,0,0,0.07) !important;
    border-radius: 1.5rem !important;
    transition: all 0.38s var(--ca-ease-spring) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.05) !important;
    overflow: hidden;
    position: relative;
}

.pricing-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(124,58,237,0.0) 0%, rgba(6,182,212,0.0) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: background 0.4s ease;
}

.pricing-card:hover::before {
    background: linear-gradient(135deg, rgba(124,58,237,0.6) 0%, rgba(6,182,212,0.5) 100%);
}

.pricing-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.06) !important;
}

/* Starter card border */
.pricing-card:nth-child(1) { border-color: rgba(100,100,120,0.12) !important; }
.pricing-card:nth-child(1):hover { border-color: rgba(124,58,237,0.35) !important; box-shadow: 0 16px 48px rgba(124,58,237,0.10), 0 0 0 1px rgba(124,58,237,0.15) !important; }

/* Creator card border */
.pricing-card:nth-child(2) { border-color: rgba(16,185,129,0.25) !important; box-shadow: 0 8px 32px rgba(16,185,129,0.12) !important; }
.pricing-card:nth-child(2):hover { border-color: rgba(16,185,129,0.5) !important; box-shadow: 0 16px 48px rgba(16,185,129,0.18) !important; }

/* Studio Pro border */
.pricing-card:nth-child(3) { border-color: rgba(168,85,247,0.20) !important; }
.pricing-card:nth-child(3):hover { border-color: rgba(168,85,247,0.50) !important; box-shadow: 0 16px 48px rgba(168,85,247,0.15) !important; }

/* Enterprise border */
.pricing-card:nth-child(4) { border-color: rgba(234,179,8,0.20) !important; }
.pricing-card:nth-child(4):hover { border-color: rgba(234,179,8,0.50) !important; box-shadow: 0 16px 48px rgba(234,179,8,0.15) !important; }

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

/* Plans feature items — bigger and more attractive */
.plans-feat-item {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--text-2) !important;
    letter-spacing: -0.01em;
}

/* Custom PayPal button wrapper — Gen-Z gradient design */
.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 {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        /* Allow horizontal pan, block vertical interference */
        touch-action: pan-x !important;
        padding: 0 4px !important;
        /* Prevent the row from being constrained */
        display: block !important;
        width: 100% !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;
        /* Allow the tabs to scroll within their container */
        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;
}

/* ═════════════════════════════════════════════════════════════════════════════
   COMFYARTS 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 ── */
/* On desktop the result container also benefits from GPU scroll */
@media (min-width: 768px) {
    #single-result-container {
        -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: 1rem !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 {
    min-height: 2.5rem !important;
    max-height: 3.5rem !important;
    font-size: 16px !important;
    padding: 0.5rem 0.875rem !important;
    line-height: 1.4 !important;
  }

  /* 6. Model selector row — ALWAYS visible on mobile, compact */
  .sidebar-model-row {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 0.375rem !important;
    overflow: hidden !important;
  }
  
  /* Ensure model/aspect/res tabs row shows properly */
  .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: 3px 6px !important;
    gap: 3px !important;
  }
  .sidebar-model-row .gen-model-tabs::-webkit-scrollbar { display: none !important; }
  
  /* Keep each tab button readable */
  .gen-model-tab, .gen-aspect-tab, .gen-res-tab {
    font-size: 0.65rem !important;
    padding: 5px 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !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 {
    display: flex !important;
    justify-content: flex-start !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 4px !important;
    border-radius: 14px !important;
  }
  .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: 3px 8px !important;
    gap: 2px !important;
    width: max-content !important;
    min-width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    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.63rem !important;
    padding: 5px 9px !important;
  }
}

/* ══ v43 FINAL: Mobile model/AR/res selector — guaranteed visible ══ */
@media (max-width: 767px) {
  /* The sidebar-model-row is the model+AR+res pill selector row in the prompt bar */
  .sidebar-model-row,
  .ca-prompt-bar .sidebar-model-row,
  #view-generate .sidebar-model-row {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    margin-bottom: 5px !important;
    scrollbar-width: none !important;
  }
  .sidebar-model-row .gen-model-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: max-content !important;
    min-width: 100% !important;
    scrollbar-width: none !important;
    gap: 3px !important;
    padding: 4px !important;
    background: rgba(255,252,248,0.96) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
  }
  .sidebar-model-row .gen-model-tabs::-webkit-scrollbar { display: none !important; }
  .gen-model-tab, .gen-aspect-tab, .gen-res-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 0.64rem !important;
    padding: 5px 10px !important;
    touch-action: manipulation !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: 5px 7px !important;
    border-radius: 9999px !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    min-height: 28px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 1 !important;
    min-width: 0 !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 — scrollable, perfect corners ── */
@media (max-width: 767px) {
    .ca-prompt-bar .sidebar-model-row {
        justify-content: flex-start !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; }
    .ca-prompt-bar .gen-model-tabs {
        border-radius: 14px !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
    }
    .gen-model-tab,
    .gen-aspect-tab,
    .gen-res-tab {
        border-radius: 10px !important;
    }
    .gen-model-tab.active,
    .gen-aspect-tab.active,
    .gen-res-tab.active {
        border-radius: 10px !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;
}