/* Comfyarts — app.css v17.0
   ✅ Warm Parchment (#F0EDE6) — Claude.ai aesthetic
   ✅ Terracotta (#C4613E) accent throughout
   ✅ Left 52px sidebar navigation
   ✅ Apple-grade smooth animations — all warm-toned
   ✅ 20 custom animations preserved + warm-palette
   ✅ Mobile drawer nav
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900&display=swap');

/* ─── Design Tokens ─── */
:root {
    --ca-spd: 1;
    --ca-ease-spring: cubic-bezier(0.34,1.56,0.64,1);
    --ca-ease-smooth: cubic-bezier(0.25,1,0.5,1);

    /* Palette */
    --bg:          #F0EDE6;
    --bg-elevated: #F7F4EF;
    --bg-card:     rgba(255,253,248,0.88);
    --bg-glass:    rgba(240,237,230,0.82);
    --bg-hover:    rgba(196,97,62,0.06);

    --accent:      #C4613E;
    --accent-h:    #B05535;
    --accent-soft: rgba(196,97,62,0.12);
    --accent-glow: rgba(196,97,62,0.25);
    --amber:       #D4853C;
    --amber-soft:  rgba(212,133,60,0.12);
    --coral:       #E06B4A;

    --text-1:   #1A1814;
    --text-2:   #4A453E;
    --text-3:   #6B6560;
    --text-4:   #9E9890;
    --text-5:   #C5BFB5;

    --border:      rgba(196,97,62,0.12);
    --border-soft: rgba(196,97,62,0.07);

    --shadow-sm: 0 2px 8px rgba(26,24,20,0.06), 0 1px 2px rgba(26,24,20,0.04);
    --shadow-md: 0 8px 24px rgba(26,24,20,0.08), 0 2px 6px rgba(26,24,20,0.04);
    --shadow-lg: 0 20px 48px rgba(26,24,20,0.12), 0 4px 12px rgba(26,24,20,0.06);

    --sidebar-w: 52px;
    --nav-h:     0px; /* no top nav — sidebar only */
}

*, *::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; }
body.admin-bar { margin-top:0 !important; padding-top:0 !important; }

html { scroll-behavior:smooth; height:100%; overflow:hidden; }
body, .ca-body {
    font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", 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;
}

/* ─── Ambient Background ─── */
.ambient-bg {
    position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none;
    background:var(--bg);
}
.ambient-orb {
    position:absolute; border-radius:50%; filter:blur(140px); opacity:0.055;
    animation:orbFloat 28s infinite ease-in-out alternate;
}
.orb-1 { top:-15%; left:-5%;  width:65vw; height:65vw; background:#C4613E; }
.orb-2 { bottom:-20%; right:-5%; width:70vw; height:70vw; background:#D4853C; animation-delay:-9s; }
.orb-3 { top:35%; left:35%; width:55vw; height:55vw; background:#E8956D; animation-delay:-17s; opacity:0.04; }
@keyframes orbFloat {
    0%   { transform:translate(0,0) scale(1); }
    50%  { transform:translate(6%,10%) scale(1.08); }
    100% { transform:translate(-4%,-6%) scale(0.94); }
}

#particle-canvas { position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:-1; pointer-events:none; }

/* ─── Left Sidebar ─── */
.ca-sidebar {
    position:fixed; left:0; top:0; bottom:0; width:var(--sidebar-w);
    background:rgba(240,237,230,0.92);
    backdrop-filter:blur(40px) saturate(1.6);
    -webkit-backdrop-filter:blur(40px) saturate(1.6);
    border-right:1px solid var(--border);
    z-index:50;
    display:flex; flex-direction:column; align-items:center;
    padding:16px 0 12px;
    box-shadow:2px 0 20px rgba(26,24,20,0.05);
}
.ca-sidebar-logo {
    width:32px; height:32px; border-radius:50%; overflow:hidden;
    margin-bottom:20px; cursor:pointer; flex-shrink:0;
    transition:transform 0.4s var(--ca-ease-spring), box-shadow 0.3s;
}
.ca-sidebar-logo:hover { transform:scale(1.08); box-shadow:0 0 0 3px var(--accent-soft); }
.ca-sidebar-logo img { width:100%; height:100%; object-fit:cover; }

.ca-sidebar-nav { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; width:100%; }

.ca-nav-item {
    position:relative; width:40px; height:40px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    color:var(--text-3); cursor:pointer;
    transition:all 0.25s var(--ca-ease-smooth);
    background:transparent; border:none; font-family:inherit;
    -webkit-tap-highlight-color:transparent;
}
.ca-nav-item:hover {
    background:var(--bg-hover); color:var(--accent);
}
.ca-nav-item.active {
    background:var(--accent-soft); color:var(--accent);
    box-shadow:inset -3px 0 0 var(--accent);
}
.ca-nav-item::after {
    content:attr(data-tooltip);
    position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
    background:var(--text-1); color:var(--bg); font-size:11px; font-weight:600;
    padding:5px 10px; border-radius:8px; white-space:nowrap;
    pointer-events:none; opacity:0; transition:opacity 0.2s;
    box-shadow:var(--shadow-sm); z-index:200;
}
.ca-nav-item:hover::after { opacity:1; }
.ca-nav-item svg, .ca-nav-item i { width:18px; height:18px; }

.ca-sidebar-bottom {
    display:flex; flex-direction:column; align-items:center; gap:8px; padding-bottom:4px;
}
.ca-sidebar-credits {
    display:none; flex-direction:column; align-items:center;
    font-size:9px; font-weight:800; color:var(--accent); letter-spacing:0.03em;
    padding:6px 4px; background:var(--accent-soft); border-radius:8px;
    border:1px solid var(--border); min-width:38px; text-align:center;
    cursor:pointer; transition:all 0.2s;
}
.ca-sidebar-credits.visible { display:flex; }
.ca-sidebar-credits:hover { background:rgba(196,97,62,0.18); }
.ca-sidebar-credits span:first-child { font-size:13px; font-weight:900; }

.ca-sidebar-avatar {
    display:none; width:32px; height:32px; border-radius:50%;
    overflow:hidden; cursor:pointer; position:relative;
    transition:transform 0.3s var(--ca-ease-spring), box-shadow 0.3s;
}
.ca-sidebar-avatar.visible { display:block; }
.ca-sidebar-avatar:hover { transform:scale(1.06); box-shadow:0 0 0 2.5px var(--accent); }
.ca-sidebar-avatar img { width:100%; height:100%; object-fit:cover; }

.ca-sidebar-signin {
    width:32px; height:32px; border-radius:50%; background:var(--text-1);
    color:var(--bg); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all 0.25s; border:none; flex-shrink:0;
}
.ca-sidebar-signin:hover { background:var(--accent); transform:scale(1.06); }
.ca-sidebar-signin svg, .ca-sidebar-signin i { width:15px; height:15px; }

/* ─── Mobile Nav ─── */
.ca-mobile-nav {
    position:fixed; top:0; left:0; right:0; z-index:60; display:none;
    padding:max(0.5rem,env(safe-area-inset-top)) 12px 0.5rem;
    background:rgba(240,237,230,0.92); backdrop-filter:blur(30px);
    border-bottom:1px solid var(--border);
    align-items:center; gap:10px;
}
@media (max-width:767px) {
    .ca-sidebar { display:none; }
    .ca-mobile-nav { display:flex; }
    #app-root { padding-left:0 !important; }
}

.ca-mobile-logo { width:30px; height:30px; border-radius:50%; overflow:hidden; flex-shrink:0; }
.ca-mobile-logo img { width:100%; height:100%; object-fit:cover; }
.ca-mobile-title { font-size:13px; font-weight:800; color:var(--text-1); letter-spacing:-0.04em; flex:1; }
.ca-mobile-credits { font-size:11px; font-weight:800; color:var(--accent); background:var(--accent-soft); padding:4px 10px; border-radius:9999px; border:1px solid var(--border); display:none; }
.ca-mobile-credits.visible { display:block; }
.ca-hamburger {
    width:36px; height:36px; border-radius:9px; background:transparent;
    border:1px solid var(--border); color:var(--text-2); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.2s; flex-shrink:0;
}
.ca-hamburger:hover { background:var(--bg-hover); color:var(--accent); }
.ca-hamburger svg { width:16px; height:16px; }

/* Mobile Drawer */
.ca-drawer-backdrop {
    position:fixed; inset:0; z-index:80; background:rgba(26,24,20,0.35);
    backdrop-filter:blur(8px); opacity:0; pointer-events:none;
    transition:opacity 0.3s ease;
}
.ca-drawer-backdrop.open { opacity:1; pointer-events:auto; }
.ca-drawer {
    position:fixed; top:0; left:0; bottom:0; width:260px; z-index:81;
    background:var(--bg-elevated); border-right:1px solid var(--border);
    transform:translateX(-100%); transition:transform 0.4s var(--ca-ease-spring);
    display:flex; flex-direction:column; padding:0;
    box-shadow:var(--shadow-lg);
}
.ca-drawer.open { transform:translateX(0); }
.ca-drawer-header {
    display:flex; align-items:center; gap:12px; padding:max(1rem,env(safe-area-inset-top)) 16px 1rem;
    border-bottom:1px solid var(--border);
}
.ca-drawer-user { flex:1; }
.ca-drawer-name { font-size:13px; font-weight:700; color:var(--text-1); }
.ca-drawer-email { font-size:11px; color:var(--text-3); }
.ca-drawer-close {
    width:32px; height:32px; border-radius:8px; background:var(--bg-hover);
    border:none; color:var(--text-2); cursor:pointer; display:flex;
    align-items:center; justify-content:center;
}
.ca-drawer-nav { flex:1; padding:8px; overflow-y:auto; }
.ca-drawer-nav-item {
    display:flex; align-items:center; gap:12px; padding:11px 12px;
    border-radius:10px; color:var(--text-2); font-size:13px; font-weight:600;
    cursor:pointer; transition:all 0.2s; border:none; background:none;
    width:100%; text-align:left; font-family:inherit;
}
.ca-drawer-nav-item:hover { background:var(--bg-hover); color:var(--accent); }
.ca-drawer-nav-item.active { background:var(--accent-soft); color:var(--accent); }
.ca-drawer-nav-item svg, .ca-drawer-nav-item i { width:16px; height:16px; flex-shrink:0; }
.ca-drawer-bottom {
    padding:12px; border-top:1px solid var(--border);
    display:flex; flex-direction:column; gap:8px;
}

/* ─── Main Content ─── */
#app-root {
    position:relative; width:100%;
    padding-left:var(--sidebar-w);
    height:100svh;
}

/* ─── Glass Panel ─── */
.glass-panel {
    background:var(--bg-card);
    backdrop-filter:blur(40px) saturate(1.6);
    -webkit-backdrop-filter:blur(40px) saturate(1.6);
    border:1px solid var(--border);
    box-shadow:var(--shadow-md);
}

/* ─── Custom Scrollbar ─── */
.custom-scrollbar { scrollbar-width:thin; scrollbar-color:rgba(196,97,62,0.2) transparent; }
.custom-scrollbar::-webkit-scrollbar { width:4px; height:4px; }
.custom-scrollbar::-webkit-scrollbar-track { background:transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background:rgba(196,97,62,0.2); border-radius:10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background:rgba(196,97,62,0.35); }

/* ─── View Sections ─── */
.view-section {
    position:absolute; top:0; left:0; right:0; bottom:0;
    opacity:0; pointer-events:none;
    transition:opacity 0.45s var(--ca-ease-smooth), transform 0.45s var(--ca-ease-smooth);
    transform:translateY(20px) scale(0.98);
    overflow-y:auto; overflow-x:hidden;
    -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
}
.view-section.active { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
#view-generate { overflow:hidden; }

/* ─── Button Spring ─── */
.btn-spring {
    transition:transform 0.35s var(--ca-ease-spring), background-color 0.2s, opacity 0.2s, box-shadow 0.35s, border-color 0.2s;
    -webkit-tap-highlight-color:transparent; cursor:pointer;
}
.btn-spring:active { transform:scale(0.94) !important; transition-duration:0.1s !important; }
@media (hover:hover) { .btn-spring:hover { transform:scale(1.02); } }

/* ─── Animate Scale In ─── */
.animate-scale-in { animation:scaleIn 0.65s var(--ca-ease-smooth) forwards; }
@keyframes scaleIn {
    0%   { opacity:0; transform:scale(0.96) translateY(14px); }
    100% { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes blob {
    0%   { transform:translate(0,0) scale(1); }
    33%  { transform:translate(35px,-50px) scale(1.12); }
    66%  { transform:translate(-28px,28px) scale(0.88); }
    100% { transform:translate(0,0) scale(1); }
}
.animate-blob { animation:blob 9s 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 8s linear infinite; }
.animate-spin      { animation:spin 1s linear infinite; }
.animate-pulse     { animation:pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ─── Asterisk ─── */
.ca-asterisk {
    display:inline-block; color:var(--accent); font-size:2.2rem;
    animation:asteriskPulse 4s ease-in-out infinite;
    filter:drop-shadow(0 0 16px var(--accent-glow));
    user-select:none;
}
@keyframes asteriskPulse {
    0%,100% { transform:scale(1) rotate(0deg); opacity:0.85; }
    30%     { transform:scale(1.06) rotate(10deg); opacity:1; }
    70%     { transform:scale(0.97) rotate(-5deg); opacity:0.9; }
}

/* ─── Home Prompt Card ─── */
.ca-home-prompt-card {
    background:rgba(255,253,248,0.92);
    backdrop-filter:blur(40px) saturate(1.8);
    -webkit-backdrop-filter:blur(40px) saturate(1.8);
    border:1px solid var(--border);
    border-radius:1.5rem;
    box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.7) inset;
    transition:border-color 0.25s, box-shadow 0.25s;
}
.ca-home-prompt-card:focus-within {
    border-color:rgba(196,97,62,0.35);
    box-shadow:var(--shadow-lg), 0 0 0 4px var(--accent-soft), 0 0 0 1px rgba(255,255,255,0.7) inset;
}

.ca-home-textarea {
    width:100%; background:transparent; border:none; outline:none; resize:none;
    font-family:inherit; font-size:15px; color:var(--text-1); line-height:1.6;
    padding:18px 20px 10px;
    placeholder-color:var(--text-4);
}
.ca-home-textarea::placeholder { color:var(--text-4); }

.ca-home-action-bar {
    display:flex; align-items:center; gap:10px;
    padding:8px 14px 12px;
}
.ca-attach-btn {
    width:32px; height:32px; border-radius:8px;
    background:transparent; border:1px solid var(--border);
    color:var(--text-3); cursor:pointer; display:flex;
    align-items:center; justify-content:center;
    font-size:18px; font-weight:300; line-height:1;
    transition:all 0.2s; flex-shrink:0;
}
.ca-attach-btn:hover { background:var(--bg-hover); color:var(--accent); border-color:var(--border); }
.ca-chips-row { display:flex; gap:6px; flex:1; overflow-x:auto; scrollbar-width:none; }
.ca-chips-row::-webkit-scrollbar { display:none; }
.ca-chip {
    flex-shrink:0; padding:6px 14px; border-radius:9999px;
    border:1px solid var(--border); background:transparent;
    font-size:12px; font-weight:600; color:var(--text-2);
    cursor:pointer; white-space:nowrap;
    transition:all 0.2s; font-family:inherit;
}
.ca-chip:hover { background:var(--accent-soft); color:var(--accent); border-color:var(--border); }
.ca-chip.active { background:var(--accent); color:white; border-color:var(--accent); }

/* ─── Status Badge ─── */
.ca-status-badge {
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 16px; border-radius:9999px;
    background:rgba(255,253,248,0.8); border:1px solid var(--border);
    font-size:12px; font-weight:600; color:var(--text-2);
    backdrop-filter:blur(20px);
}

/* ─── Feature Cards ─── */
.ca-card-generate, .ca-card-replicate {
    background:rgba(255,253,248,0.85);
    border:1px solid var(--border);
    box-shadow:var(--shadow-md);
}

/* ─── Toast ─── */
.ca-toast {
    position:fixed; top:1.5rem; left:50%; transform:translateX(-50%);
    padding:0.6rem 1.2rem; border-radius:9999px;
    background:rgba(255,253,248,0.95); backdrop-filter:blur(30px);
    font-size:0.8rem; font-weight:700; color:var(--accent);
    border:1px solid var(--border); z-index:300;
    box-shadow:var(--shadow-md);
    white-space:nowrap; pointer-events:none; max-width:calc(100vw - 2rem);
    animation:scaleIn 0.4s var(--ca-ease-spring) forwards;
}
.ca-toast.error   { color:#C0392B; border-color:rgba(192,57,43,0.25); }
.ca-toast.success { color:var(--accent); }
.ca-toast.gift    { color:var(--amber); border-color:rgba(212,133,60,0.3); }
@keyframes creditPop { 0%{transform:scale(1)} 40%{transform:scale(1.25)} 100%{transform:scale(1)} }
.credit-pop { animation:creditPop 0.35s var(--ca-ease-spring); }

/* ─── Modals ─── */
.modal-backdrop {
    position:fixed; inset:0; z-index:100;
    background:rgba(26,24,20,0.45); backdrop-filter:blur(12px);
    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(--bg-elevated);
    border:1px solid var(--border);
    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:0 -20px 60px rgba(26,24,20,0.15); max-height:90vh; overflow-y:auto;
}
@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:3rem; height:0.25rem; background:var(--border); border-radius:9999px; margin:0 auto 1.5rem; }

/* ─── History Sheet ─── */
.history-sheet-backdrop {
    position:fixed; inset:0; z-index:90; background:rgba(26,24,20,0.4);
    backdrop-filter:blur(8px); 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(--bg-elevated); border:1px solid var(--border);
    border-radius:2rem 2rem 0 0; transform:translateY(100%);
    transition:transform 0.5s var(--ca-ease-spring);
    max-height:72vh; display:flex; flex-direction:column;
    box-shadow:0 -20px 60px rgba(26,24,20,0.12);
}
.history-sheet.open { transform:translateY(0); }
#history-list, #history-list-mobile { scroll-behavior:smooth; overscroll-behavior:contain; }

/* ─── Generate Page ─── */
.ca-prompt-bar {
    position:absolute; bottom:0; left:0; right:0; z-index:40;
    padding:0 8px; padding-bottom:max(0.75rem, env(safe-area-inset-bottom));
    background:transparent;
}
#single-result-container {
    display:flex; align-items:center; justify-content:center;
    padding-bottom:11rem; padding-top:1.5rem;
    overflow-y:auto; overflow-x:hidden; flex:1;
    scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
}
.gen-prompt-card {
    background:rgba(255,253,248,0.95);
    backdrop-filter:blur(40px) saturate(1.8);
    -webkit-backdrop-filter:blur(40px) saturate(1.8);
    border:1px solid var(--border);
    box-shadow:var(--shadow-lg);
    border-radius:1.75rem;
    transition:border-color 0.25s, box-shadow 0.3s;
}
.gen-prompt-card:focus-within {
    border-color:rgba(196,97,62,0.35);
    box-shadow:var(--shadow-lg), 0 0 0 4px var(--accent-soft);
}
.reveal-lens img { transition:transform 1.5s var(--ca-ease-smooth); }
.reveal-lens:hover img { transform:scale(1.02); }

/* ─── Canvas ─── */
.ca-card-canvas { display:block; pointer-events:none; border-radius:inherit; position:absolute; inset:0; width:100%; height:100%; }
#gen-lens-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:0.7; }
#ca-confetti-canvas { position:fixed; inset:0; pointer-events:none; z-index:200; width:100%; height:100%; display:none; }

/* ─── Navigation (alias for JS compatibility) ─── */
.nav-link { transition:all 0.2s ease; -webkit-tap-highlight-color:transparent; }
.nav-link.active { color:var(--accent); }
.mobile-nav-icon { color:var(--text-3); }
.mobile-nav-icon.active { color:var(--accent); background:var(--accent-soft); }

/* ─── PayPal ─── */
.ca-paypal-btn iframe { border-radius:14px !important; overflow:hidden; }
.ca-paypal-btn { min-height:52px; }
.paypal-login-prompt {
    display:flex; align-items:center; justify-content:center;
    padding:0.75rem; border-radius:1rem;
    background:var(--bg-hover); border:1px solid var(--border);
    color:var(--text-3); font-size:0.75rem; font-weight:600;
    gap:0.5rem; cursor:pointer; transition:all 0.2s; min-height:52px;
}
.paypal-login-prompt:hover { background:var(--accent-soft); color:var(--accent); }

/* ─── Footer ─── */
.ca-footer {
    display:flex; align-items:center; justify-content:center;
    gap:0.75rem; padding:1.5rem 1rem; font-size:0.7rem; color:var(--text-4); flex-wrap:wrap;
}
.ca-footer-link {
    color:var(--text-4); text-decoration:none; background:none; border:none;
    cursor:pointer; font-size:0.7rem; font-family:inherit;
    transition:color 0.2s; padding:0; min-height:auto;
}
.ca-footer-link:hover { color:var(--text-2); }

/* ─── Pricing Cards ─── */
.pricing-card {
    background:rgba(255,253,248,0.88);
    border:1px solid var(--border-soft);
    box-shadow:var(--shadow-sm);
    transition:transform 0.35s var(--ca-ease-spring), border-color 0.3s, box-shadow 0.3s;
}

/* ─── Drag Over ─── */
.drag-over {
    border-color:var(--accent) !important;
    background:var(--accent-soft) !important;
    transform:scale(1.02) !important;
    box-shadow:0 0 40px var(--accent-glow) !important;
}

/* ─── Inline text ─── */
h1 { letter-spacing:-0.04em; }
h2 { letter-spacing:-0.03em; }
h3 { letter-spacing:-0.02em; }

/* ─── Prompt Chip Floating ─── */
.ca-prompt-chip {
    position:absolute; padding:5px 14px; border-radius:9999px;
    font-size:11px; font-weight:600; pointer-events:none;
    white-space:nowrap; opacity:0; user-select:none;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    color:var(--text-2); border:1px solid var(--border);
    background:rgba(255,253,248,0.75);
}
@keyframes ca-chipFloat {
    0%   { opacity:0; transform:translateY(16px) scale(0.85); }
    15%  { opacity:1; transform:translateY(0) scale(1); }
    80%  { opacity:1; }
    100% { opacity:0; transform:translateY(-16px) scale(0.85); }
}

/* ─── Scan Line — warm amber→coral ─── */
.ca-scan-overlay {
    position:absolute; left:0; right:0; top:0; height:2px;
    background:linear-gradient(90deg, transparent, #C4613E 40%, #E06B4A 60%, transparent);
    box-shadow:0 0 12px rgba(196,97,62,0.75), 0 0 4px rgba(224,107,74,0.55);
    animation:ca-scanLine calc(1.8s * var(--ca-spd)) linear infinite;
    pointer-events:none;
}
@keyframes ca-scanLine {
    0%   { top:-2px; opacity:0.9; }
    90%  { top:calc(100% + 2px); opacity:0.9; }
    100% { top:calc(100% + 2px); opacity:0; }
}

/* ─── Spinner ─── */
.spinner {
    width:24px; height:24px; border:2.5px solid rgba(196,97,62,0.2);
    border-top-color:var(--accent); border-radius:50%;
    animation:spin 0.8s linear infinite;
}

/* ═══════════════════════════════════════════
   20 CUSTOM ANIMATIONS — warm-toned
═══════════════════════════════════════════ */

/* 1. HERO FLOAT */
@keyframes ca-heroFloat {
    0%,100% { transform:translateY(0px) rotate(0deg); }
    30%  { transform:translateY(-10px) rotate(-0.3deg); }
    70%  { transform:translateY(-6px) rotate(0.2deg); }
}
.ca-anim-hero_float #view-home h1 {
    animation:ca-heroFloat calc(6s * var(--ca-spd)) ease-in-out infinite;
    transform-origin:center center;
}

/* 2. CARD PARALLAX */
.ca-anim-card_parallax .ca-card-generate,
.ca-anim-card_parallax .ca-card-replicate {
    transition:transform calc(0.5s * var(--ca-spd)) ease-out; will-change:transform;
}

/* 3. SHIMMER BADGE */
@keyframes ca-shimmerSweep {
    0%   { background-position:-200% 0; }
    100% { background-position:200% 0; }
}
.ca-anim-shimmer_badge .ca-status-badge { position:relative; overflow:hidden; }
.ca-anim-shimmer_badge .ca-status-badge::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent 0%, rgba(196,97,62,0.18) 50%, transparent 100%);
    background-size:200% 100%;
    animation:ca-shimmerSweep calc(2.5s * var(--ca-spd)) ease-in-out infinite;
    border-radius:inherit; pointer-events:none;
}

/* 4. TEXT REVEAL */
@keyframes ca-charReveal {
    0%   { opacity:0; transform:translateY(32px) rotateX(-55deg); filter:blur(3px); }
    60%  { opacity:1; filter:blur(0); }
    100% { opacity:1; transform:translateY(0) rotateX(0); }
}
.ca-reveal-char {
    display:inline-block;
    animation:ca-charReveal calc(0.45s * var(--ca-spd)) var(--ca-ease-spring) both;
    perspective:400px; transform-style:preserve-3d;
}

/* 5. CTA GLOW PULSE */
@keyframes ca-ctaGlow {
    0%,100% { box-shadow:var(--shadow-md); }
    50%     { box-shadow:var(--shadow-md), 0 0 0 10px var(--accent-soft), 0 0 40px var(--accent-glow); }
}
.ca-anim-cta_pulse #view-home .ca-cta-primary {
    animation:ca-ctaGlow calc(3s * var(--ca-spd)) ease-in-out infinite;
}

/* 6. NEON CURSOR */
.ca-anim-cursor_blink #gen-prompt { caret-color:var(--accent); }
.ca-anim-cursor_blink .ca-home-textarea { caret-color:var(--accent); }

/* 7. Inspiration chips — see .ca-prompt-chip above */

/* 8. 3D CARD TILT */
.ca-anim-result_tilt .reveal-lens {
    transition:transform calc(0.25s * var(--ca-spd)) ease-out;
    will-change:transform; transform-style:preserve-3d;
}

/* 9. CONFETTI BURST — handled in JS */
/* 10. AURORA WAVE — handled in JS */

/* 11. UPLOAD BREATHE */
@keyframes ca-uploadBreathe {
    0%,100% { border-color:var(--border); box-shadow:none; }
    50%     { border-color:rgba(196,97,62,0.4); box-shadow:0 0 0 8px var(--accent-soft), inset 0 0 30px rgba(196,97,62,0.03); }
}
.ca-anim-upload_breathe #rep-empty {
    animation:ca-uploadBreathe calc(3.5s * var(--ca-spd)) ease-in-out infinite;
}

/* 12. CARD FLIP REVEAL */
@keyframes ca-cardFlip {
    0%   { transform:perspective(700px) rotateY(-90deg) scale(0.8); opacity:0; }
    60%  { transform:perspective(700px) rotateY(8deg) scale(1.02); opacity:1; }
    100% { transform:perspective(700px) rotateY(0deg) scale(1); opacity:1; }
}
.ca-flip-reveal { animation:ca-cardFlip calc(0.65s * var(--ca-spd)) var(--ca-ease-spring) both; }

/* 13. SCAN LINE — defined above */

/* 14. GRID STAGGER */
.ca-anim-grid_stagger .ca-grid-item { animation:scaleIn calc(0.45s * var(--ca-spd)) var(--ca-ease-spring) both; }
.ca-anim-grid_stagger .ca-grid-item:nth-child(1) { animation-delay:0s; }
.ca-anim-grid_stagger .ca-grid-item:nth-child(2) { animation-delay:calc(0.05s * var(--ca-spd)); }
.ca-anim-grid_stagger .ca-grid-item:nth-child(3) { animation-delay:calc(0.10s * var(--ca-spd)); }
.ca-anim-grid_stagger .ca-grid-item:nth-child(4) { animation-delay:calc(0.15s * var(--ca-spd)); }
.ca-anim-grid_stagger .ca-grid-item:nth-child(n+5) { animation-delay:calc(0.20s * var(--ca-spd)); }

/* 15. CARD LEVITATE */
.ca-anim-card_levitate .pricing-card:hover {
    transform:translateY(-10px) scale(1.025) !important;
    box-shadow:var(--shadow-lg), 0 0 40px var(--accent-soft) !important;
}

/* 16. CREDITS TICKER */
.ca-credits-ticking { font-variant-numeric:tabular-nums; }

/* 17. POPULAR RING */
@keyframes ca-popularRing { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }
.ca-popular-ring { animation:ca-popularRing calc(5s * var(--ca-spd)) linear infinite; transform-origin:center; }

/* 18. LOG SLIDE */
@keyframes ca-logSlide {
    0%   { opacity:0; transform:translateX(-20px); }
    100% { opacity:1; transform:translateX(0); }
}
.ca-anim-log_slide #account-logs > div {
    animation:ca-logSlide calc(0.4s * var(--ca-spd)) var(--ca-ease-spring) both;
}
.ca-anim-log_slide #account-logs > div:nth-child(1)  { animation-delay:0s; }
.ca-anim-log_slide #account-logs > div:nth-child(2)  { animation-delay:calc(0.07s * var(--ca-spd)); }
.ca-anim-log_slide #account-logs > div:nth-child(3)  { animation-delay:calc(0.14s * var(--ca-spd)); }
.ca-anim-log_slide #account-logs > div:nth-child(4)  { animation-delay:calc(0.21s * var(--ca-spd)); }
.ca-anim-log_slide #account-logs > div:nth-child(5)  { animation-delay:calc(0.28s * var(--ca-spd)); }
.ca-anim-log_slide #account-logs > div:nth-child(n+6){ animation-delay:calc(0.35s * var(--ca-spd)); }

/* 19. AVATAR AURA */
@keyframes ca-avatarAura {
    0%,100% { box-shadow:0 0 0 4px var(--accent-soft), var(--shadow-sm); }
    50%     { box-shadow:0 0 0 10px rgba(196,97,62,0.1), 0 0 40px var(--accent-glow); }
}
.ca-anim-avatar_aura #account-avatar {
    animation:ca-avatarAura calc(3s * var(--ca-spd)) ease-in-out infinite;
}

/* 20. NAV MORPH */
.ca-anim-nav_morph .ca-nav-item.active { position:relative; overflow:hidden; }
@keyframes ca-navMorphPill {
    0%   { transform:scaleX(0.5) scaleY(0.6); opacity:0; }
    60%  { transform:scaleX(1.08) scaleY(1.05); opacity:1; }
    100% { transform:scaleX(1) scaleY(1); opacity:1; }
}
.ca-anim-nav_morph .ca-nav-item.active::before {
    content:''; position:absolute; inset:0; border-radius:10px;
    background:var(--accent-soft);
    animation:ca-navMorphPill calc(0.5s * var(--ca-spd)) var(--ca-ease-spring);
    pointer-events:none;
}

/* ─── Inputs, selects ─── */
select, textarea, input {
    background:rgba(255,253,248,0.9) !important;
    border-color:var(--border) !important;
    color:var(--text-1) !important;
    font-family:inherit;
}
select option { background:var(--bg-elevated); color:var(--text-1); }
#gen-settings-popover {
    background:rgba(255,253,248,0.97) !important;
    border-color:var(--border) !important;
}

/* ─── Generate history items ─── */
.hist-item { background:rgba(255,253,248,0.7); border:1px solid var(--border-soft); border-radius:12px; }
.hist-item:hover { background:var(--bg-hover); border-color:var(--border); }

/* ─── Mobile ─── */
@media (max-width:767px) {
    html, body { font-size:15px; }
    .ambient-orb { opacity:0.04; filter:blur(100px); }
    #app-root { padding-left:0; }
    #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.2rem !important; line-height:1.05 !important; }
    #view-generate > div.relative { padding-top:max(4.5rem,calc(3.8rem + env(safe-area-inset-top))) !important; }
    .ca-prompt-bar { padding-left:4px; padding-right:4px; padding-bottom:max(1rem,env(safe-area-inset-bottom)); }
    .gen-prompt-card { border-radius:1.5rem !important; }
    #single-result-container { padding-bottom:12rem !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; }
    #view-terms > div, #view-privacy > div { padding-top:max(5rem,calc(4rem + env(safe-area-inset-top))) !important; }
    #view-admin > div { padding-top:max(5rem,calc(4rem + env(safe-area-inset-top))) !important; }
}

/* ─── Desktop ─── */
@media (min-width:768px) {
    .ca-mobile-nav { display:none !important; }
    #mob-avatar-float { display:none !important; }
}

/* Utility overrides for warm palette */
.text-accent { color:var(--accent); }
.text-amber  { color:var(--amber); }
.bg-accent-soft { background:var(--accent-soft); }

/* ─── High contrast active nav items ─── */
.ca-nav-item.active svg,
.ca-nav-item.active i { color:var(--accent); }