/* ═══════════════════════════════════════════════════════════════════
   ComfyAI Cloud — Premium Redesign Overrides v1.0
   Loaded after app.css. Targets:
     • Home page 6 cards (horizontal AI-hub aesthetic)
     • Generate page header (dark + credits pill)
     • Generate page background + prompt box (dark, redesign.html aesthetic)
     • Pricing page (dark, redesign.html aesthetic, PayPal styled)
   ═════════════════════════════════════════════════════════════════ */

:root {
  --rd-bg: #070a12;
  --rd-bg-2: #0b1020;
  --rd-bg-3: #050812;
  --rd-panel: #111827;
  --rd-panel-2: #172033;
  --rd-ink: #f8fbff;
  --rd-muted: #a9b8d7;
  --rd-quiet: #7282a7;
  --rd-line: rgba(255, 255, 255, 0.09);
  --rd-line-2: rgba(255, 255, 255, 0.15);
  --rd-red: #38bdf8;
  --rd-red-2: #2563eb;
  --rd-red-3: #7dd3fc;
  --rd-red-soft: rgba(56, 189, 248, 0.13);
  --rd-serif: "Instrument Serif", Georgia, serif;
  --rd-mono: "JetBrains Mono", ui-monospace, monospace;
  --rd-sans: "Geist", "Outfit", "Inter", system-ui, -apple-system, sans-serif;
}

/* Main theme tint pass: keep the warm brand accents, but move the dominant UI
   language toward the tools site's blue/cyan aesthetic. */
:root {
  --orange: #38bdf8;
  --orange-light: #7dd3fc;
  --orange-dark: #0284c7;
  --orange-bg: rgba(56, 189, 248, 0.10);
  --orange-border: rgba(56, 189, 248, 0.28);
  --pink: #f472b6;
}
.text-amber-700,
.text-amber-600,
[style*="#c96a00"] {
  color: #38bdf8 !important;
}
.focus\:border-amber-600\/35:focus,
.focus-within\:border-amber-500\/40:focus-within {
  border-color: rgba(56, 189, 248, 0.42) !important;
}
.ca-popup-link-amber,
.ca-acct-btn-amber {
  background: linear-gradient(135deg, #2563eb, #38bdf8) !important;
  color: #fff !important;
}

/* Load redesign fonts asynchronously (the @import is deferred by browsers
   when not blocking, but we keep family fallbacks above for FCP safety) */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@500;600;700&display=swap");

/* ═════════════════════════════════════════════════════════════════════
   1. HOME PAGE — 6 cards horizontal redesign
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  body .hm-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}
@media (min-width: 1100px) {
  body .hm-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

body .hm-tool-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 20px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.054), rgba(255, 255, 255, 0.018)) !important;
  border: 1px solid var(--rd-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28) !important;
  position: relative;
  overflow: hidden !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
  text-align: left !important;
}

body .hm-tool-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  background: radial-gradient(circle at 0% 0%, rgba(244, 63, 94, 0.1), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
body .hm-tool-card:hover::before { opacity: 1; }

body .hm-tool-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(244, 63, 94, 0.42) !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(244, 63, 94, 0.12) !important;
}

/* Hide the old top color line on each card */
body .hm-tool-card .hm-line { display: none !important; }

/* Icon slot — first child after .hm-line */
body .hm-tool-card .hm-card-icon {
  flex: 0 0 54px !important;
  display: grid !important;
  place-items: center !important;
  width: 54px !important;
  height: 54px !important;
  border: 1px solid rgba(244, 63, 94, 0.3) !important;
  border-radius: 10px !important;
  color: var(--rd-red-3) !important;
  background: var(--rd-red-soft) !important;
  position: relative;
  z-index: 1;
}
body .hm-tool-card .hm-card-icon svg,
body .hm-tool-card .hm-card-icon i { width: 22px !important; height: 22px !important; }

/* Subhead, title, desc become a single column body via floating tactic.
   The card is flex-row, but we let subhead/title/desc behave like normal block
   children grouped in the middle by giving them flex: 1 1 auto and using
   margin to chain them together. */
body .hm-tool-card .hm-card-subhead {
  order: 2;
  flex: 1 1 100%;
  font-family: var(--rd-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--rd-red-3) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  margin: 0 !important;
  display: block !important;
  position: relative;
  z-index: 1;
}

body .hm-tool-card .hm-card-title {
  order: 3;
  flex: 1 1 100%;
  margin: 4px 0 0 0 !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: var(--rd-ink) !important;
  font-family: var(--rd-sans) !important;
  position: relative;
  z-index: 1;
}

body .hm-tool-card .hm-card-desc {
  order: 4;
  flex: 1 1 100%;
  margin: 6px 0 0 0 !important;
  color: var(--rd-muted) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  position: relative;
  z-index: 1;
}

/* Restyle the bottom button → small "Open" button on the right */
body .hm-tool-card .hm-card-btn {
  order: 5;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 92px !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid var(--rd-line-2) !important;
  color: var(--rd-ink) !important;
  box-shadow: none !important;
  position: relative;
  z-index: 1;
  transition: transform 0.18s ease, background 0.18s ease !important;
  align-self: center !important;
  margin-left: auto;
}
body .hm-tool-card .hm-card-btn::after { display: none !important; }
body .hm-tool-card .hm-card-btn .lucide-arrow-right,
body .hm-tool-card .hm-card-btn svg { width: 14px !important; height: 14px !important; }

/* Use CSS Grid as the actual layout: icon left, body in middle column, btn right */
body .hm-tool-card {
  display: grid !important;
  grid-template-columns: 54px 1fr auto !important;
  grid-template-rows: auto auto auto !important;
  align-items: start !important;
  column-gap: 18px !important;
  row-gap: 0 !important;
}
body .hm-tool-card .hm-card-icon {
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  align-self: center !important;
}
body .hm-tool-card .hm-card-subhead {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
body .hm-tool-card .hm-card-title {
  grid-column: 2 !important;
  grid-row: 2 !important;
}
body .hm-tool-card .hm-card-desc {
  grid-column: 2 !important;
  grid-row: 3 !important;
}
body .hm-tool-card .hm-card-btn {
  grid-column: 3 !important;
  grid-row: 1 / span 3 !important;
  align-self: center !important;
}

/* First card (Generate Studio) gets primary red treatment */
body .hm-tool-card[data-rd="primary"] .hm-card-btn,
body .hm-tool-card:hover .hm-card-btn {
  background: linear-gradient(180deg, var(--rd-red), var(--rd-red-2)) !important;
  border-color: transparent !important;
  color: white !important;
  box-shadow: 0 10px 22px rgba(244, 63, 94, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

@media (max-width: 767px) {
  body .hm-tool-card {
    grid-template-columns: 48px 1fr !important;
    column-gap: 12px !important;
    padding: 16px !important;
  }
  body .hm-tool-card .hm-card-icon {
    grid-row: 1 / span 2 !important;
    width: 48px !important;
    height: 48px !important;
  }
  body .hm-tool-card .hm-card-subhead { grid-column: 2 !important; grid-row: 1 !important; }
  body .hm-tool-card .hm-card-title { grid-column: 2 !important; grid-row: 2 !important; }
  body .hm-tool-card .hm-card-desc { grid-column: 1 / span 2 !important; grid-row: 3 !important; margin-top: 10px !important; }
  body .hm-tool-card .hm-card-btn {
    grid-column: 1 / span 2 !important;
    grid-row: 4 !important;
    width: 100% !important;
    margin-top: 10px;
    align-self: stretch !important;
  }
}

/* Tighten cards section width to mirror redesign.html wrap */
body .hm-cards-section { max-width: 1220px !important; }

/* Home FAQ — make heading + items align with redesign palette */
body .hm-faq-item h4 { color: var(--rd-red-3) !important; font-weight: 800 !important; }


/* ═════════════════════════════════════════════════════════════════════
   2. GENERATE PAGE HEADER (.glass-nav) — dark + credits pill
   Skip home page; only applies when generate/plans/replicate/account is active.
   ═════════════════════════════════════════════════════════════════════ */
html.rd-dark .ca-nav-desktop .glass-nav,
html.rd-dark .ca-nav-mobile .glass-nav,
html:not(.home-page) .ca-nav-desktop .glass-nav,
html:not(.home-page) .ca-nav-mobile .glass-nav,
html:has(#view-generate.active) .glass-nav,
html:has(#view-plans.active) .glass-nav,
html:has(#view-replicate.active) .glass-nav,
html:has(#view-account.active) .glass-nav {
  background: rgba(9, 9, 13, 0.78) !important;
  backdrop-filter: blur(22px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
  border-bottom: 1px solid var(--rd-line) !important;
  box-shadow: none !important;
}

html.rd-dark .ca-brand-name,
html:not(.home-page) .ca-nav-desktop .ca-brand-name,
html:not(.home-page) .ca-nav-mobile .ca-brand-name {
  color: var(--rd-ink) !important;
}

/* Nav links */
html.rd-dark .nav-link,
html:not(.home-page) .ca-nav-desktop .nav-link,
html:not(.home-page) .ca-nav-mobile .nav-link {
  color: var(--rd-muted) !important;
}
html.rd-dark .nav-link:hover,
html.rd-dark .nav-link.active,
html:not(.home-page) .ca-nav-desktop .nav-link:hover,
html:not(.home-page) .ca-nav-mobile .nav-link:hover,
html:not(.home-page) .ca-nav-desktop .nav-link.active,
html:not(.home-page) .ca-nav-mobile .nav-link.active {
  color: var(--rd-ink) !important;
  background: var(--rd-red-soft) !important;
}

/* Admin link */
html.rd-dark #nav-admin-btn,
html:not(.home-page) .ca-nav-desktop #nav-admin-btn {
  color: var(--rd-red-3) !important;
}

/* Sign-in button — white pill stays, but make subtle */
html.rd-dark #nav-signin-btn,
html.rd-dark #nav-signin-btn-m,
html:not(.home-page) #nav-signin-btn,
html:not(.home-page) #nav-signin-btn-m {
  background: linear-gradient(180deg, var(--rd-red), var(--rd-red-2)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 22px rgba(244, 63, 94, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

/* Profile button — turn into the redesign.html credit pill */
html.rd-dark #nav-profile-btn,
html:not(.home-page) #nav-profile-btn {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.18), rgba(244, 63, 94, 0.05)) !important;
  border: 1px solid rgba(244, 63, 94, 0.36) !important;
  color: var(--rd-ink) !important;
  font-family: var(--rd-mono) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  padding: 6px 12px 6px 6px !important;
  gap: 8px !important;
  border-radius: 999px !important;
  min-height: 36px !important;
}
html.rd-dark #nav-profile-btn #nav-avatar,
html:not(.home-page) #nav-profile-btn #nav-avatar {
  width: 22px !important;
  height: 22px !important;
  border: 1px solid rgba(244, 63, 94, 0.5) !important;
}
html.rd-dark #nav-profile-btn #nav-credit-text,
html:not(.home-page) #nav-profile-btn #nav-credit-text {
  color: var(--rd-ink) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
}

/* Mobile credit pill */
html.rd-dark #mob-credit-pill,
html:not(.home-page) #mob-credit-pill {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.18), rgba(244, 63, 94, 0.05)) !important;
  border-color: rgba(244, 63, 94, 0.36) !important;
}
html.rd-dark #mob-credit-pill > span:first-child,
html:not(.home-page) #mob-credit-pill > span:first-child {
  background: var(--rd-red-3) !important;
}
html.rd-dark #mob-credit-text,
html:not(.home-page) #mob-credit-text {
  color: var(--rd-ink) !important;
}
html.rd-dark #nav-profile-btn-m > div:first-child,
html:not(.home-page) #nav-profile-btn-m > div:first-child {
  background: rgba(244, 63, 94, 0.18) !important;
}
html.rd-dark #nav-profile-btn-m img,
html:not(.home-page) #nav-profile-btn-m img {
  border-color: rgba(244, 63, 94, 0.55) !important;
}

/* ═════════════════════════════════════════════════════════════════════
   3. GENERATE PAGE — body + prompt box dark
   ═════════════════════════════════════════════════════════════════════ */
html.view-generate body,
body.view-generate,
html:has(#view-generate.active) body,
body:has(#view-generate.active) {
  background:
    radial-gradient(circle at 12% -8%, rgba(244, 63, 94, 0.18), transparent 30rem),
    radial-gradient(circle at 92% 4%, rgba(45, 212, 191, 0.10), transparent 26rem),
    linear-gradient(180deg, var(--rd-bg-2) 0%, var(--rd-bg) 42%, var(--rd-bg-3) 100%) !important;
  color: var(--rd-ink) !important;
}

/* Generate page bg overrides */
#view-generate,
#view-generate.active {
  background: transparent !important;
  color: var(--rd-ink) !important;
}

/* Sidebar — dark glass */
#view-generate #gen-sidebar {
  background: rgba(15, 15, 21, 0.92) !important;
  border-right: 1px solid var(--rd-line) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
}
#view-generate #gen-sidebar .sidebar-text,
#view-generate #gen-sidebar span,
#view-generate #gen-sidebar .gen-sidebar-nav-btn { color: var(--rd-muted) !important; }
#view-generate #gen-sidebar .gen-sidebar-nav-btn:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--rd-ink) !important;
}
#view-generate #hist-search {
  background: rgba(0, 0, 0, 0.22) !important;
  border: 1px solid var(--rd-line) !important;
  color: var(--rd-ink) !important;
}
#view-generate #hist-search::placeholder { color: var(--rd-quiet) !important; }
#view-generate #gen-sidebar .border-t { border-color: var(--rd-line) !important; }

/* Empty state text */
#view-generate #generate-empty-state p { color: var(--rd-muted) !important; }
#view-generate #generate-empty-state .text-amber-600\/50 { color: var(--rd-red-3) !important; }

/* Prompt card — dark */
#view-generate .gen-prompt-card,
.ca-prompt-bar .gen-prompt-card,
body #gen-prompt-card.gen-prompt-card {
  background: rgba(15, 15, 21, 0.92) !important;
  border: 1px solid var(--rd-line-2) !important;
  border-radius: 22px !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(244, 63, 94, 0.05) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
#view-generate .gen-prompt-card:focus-within {
  border-color: rgba(244, 63, 94, 0.42) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.5), 0 0 0 3px rgba(244, 63, 94, 0.08) !important;
}

/* Textarea inside dark prompt card */
#view-generate #gen-prompt {
  color: var(--rd-ink) !important;
  background: transparent !important;
}
#view-generate #gen-prompt::placeholder { color: var(--rd-quiet) !important; }

/* Writer row */
#view-generate .ca-writer-row {
  background: rgba(255, 255, 255, 0.024) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
#view-generate .ca-writer-label {
  color: var(--rd-muted) !important;
  font-family: var(--rd-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
}
#view-generate .ca-writer-btn {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid var(--rd-line) !important;
  color: var(--rd-muted) !important;
}
#view-generate .ca-writer-btn:hover { color: var(--rd-ink) !important; }
#view-generate .ca-writer-btn--improve {
  color: var(--rd-red-3) !important;
  border-color: rgba(244, 63, 94, 0.32) !important;
  background: var(--rd-red-soft) !important;
}

/* Bottom toolbar tools (img upload, AR, NSFW) */
#view-generate #gen-img-upload-btn {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid var(--rd-line) !important;
  color: var(--rd-muted) !important;
}
#view-generate #gen-img-upload-btn:hover { color: var(--rd-ink) !important; }
#view-generate #gen-ar-btn {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid var(--rd-line) !important;
  border-radius: 8px !important;
  color: var(--rd-muted) !important;
}
#view-generate #ca-nsfw-switch .ca-nsfw-lbl { color: var(--rd-quiet) !important; }
#view-generate #ca-nsfw-switch .ca-nsfw-track {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--rd-line-2) !important;
}
#view-generate #ca-nsfw-switch .ca-nsfw-knob { background: var(--rd-muted) !important; }
#view-generate #ca-nsfw-switch.on .ca-nsfw-track {
  background: var(--rd-red) !important;
  border-color: var(--rd-red) !important;
}
#view-generate #ca-nsfw-switch.on .ca-nsfw-knob { background: white !important; }
#view-generate #ca-nsfw-switch.on .ca-nsfw-lbl { color: var(--rd-red-3) !important; }

/* Image strip border */
#view-generate #gen-img-strip { border-bottom-color: rgba(255, 255, 255, 0.06) !important; }

/* Submit button — red gradient */
#view-generate #gen-submit-btn,
#view-generate .gen-submit-glass {
  background: linear-gradient(180deg, var(--rd-red), var(--rd-red-2)) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 12px 30px rgba(244, 63, 94, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  font-weight: 900 !important;
}
#view-generate #gen-submit-btn:hover { transform: translateY(-1px); }
#view-generate #gen-submit-btn .gen-btn-cost-badge,
#view-generate .gen-btn-cost-badge {
  background: rgba(255, 255, 255, 0.18) !important;
  color: white !important;
  font-family: var(--rd-mono) !important;
  font-weight: 800 !important;
}

/* AI Writer spinner dots */
#view-generate .ca-writer-dot { background: var(--rd-red-3) !important; }

/* Floating model select (existing structure kept) — dark aesthetic */
#view-generate .gen-model-tabs {
  background: rgba(0, 0, 0, 0.32) !important;
  border: 1px solid var(--rd-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
#view-generate .gen-model-tab,
#view-generate .gen-res-tab {
  color: var(--rd-muted) !important;
  background: transparent !important;
  border-radius: 999px !important;
}
#view-generate .gen-model-tab:hover:not(.active),
#view-generate .gen-res-tab:hover:not(.active) {
  color: var(--rd-ink) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}
#view-generate .gen-model-tab.active,
#view-generate .gen-res-tab.active {
  color: white !important;
  border: 1px solid rgba(244, 63, 94, 0.38) !important;
  background: linear-gradient(180deg, rgba(244, 63, 94, 0.9), rgba(190, 18, 60, 0.92)) !important;
  box-shadow: 0 8px 22px rgba(244, 63, 94, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}
#view-generate .gen-tab-cost {
  background: rgba(0, 0, 0, 0.28) !important;
  color: var(--rd-muted) !important;
  font-family: var(--rd-mono) !important;
}
#view-generate .gen-model-tab.active .gen-tab-cost,
#view-generate .gen-res-tab.active .gen-tab-cost {
  background: rgba(255, 255, 255, 0.18) !important;
  color: white !important;
}
#view-generate .gen-tab-divider {
  background: var(--rd-line) !important;
}

/* Edit Mode badge */
#view-generate #gen-edit-mode-badge {
  background: linear-gradient(90deg, var(--rd-red), var(--rd-red-2)) !important;
}

/* Result placeholders / loaders text colour fix */
#view-generate .text-zinc-400,
#view-generate .text-zinc-500,
#view-generate .text-zinc-600 { color: var(--rd-muted) !important; }


/* ═════════════════════════════════════════════════════════════════════
   4. PRICING PAGE — dark redesign
   ═════════════════════════════════════════════════════════════════════ */
html.view-plans body,
body.view-plans,
html:has(#view-plans.active) body,
body:has(#view-plans.active) {
  background:
    radial-gradient(circle at 12% -8%, rgba(244, 63, 94, 0.20), transparent 30rem),
    radial-gradient(circle at 92% 4%, rgba(45, 212, 191, 0.12), transparent 26rem),
    linear-gradient(180deg, var(--rd-bg-2) 0%, var(--rd-bg) 42%, var(--rd-bg-3) 100%) !important;
  color: var(--rd-ink) !important;
}

#view-plans { background: transparent !important; color: var(--rd-ink) !important; }

/* Header */
#view-plans .pricing-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(244, 63, 94, 0.35);
  background: var(--rd-red-soft);
  color: var(--rd-red-3);
  font: 700 11px/1 var(--rd-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#view-plans .pricing-title {
  font-family: var(--rd-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(42px, 5.2vw, 76px) !important;
  line-height: 0.96 !important;
  color: var(--rd-ink) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  animation: none !important;
  letter-spacing: 0 !important;
}
#view-plans .pricing-title em { color: var(--rd-red-3); font-style: italic; }
#view-plans .pricing-sub { color: var(--rd-muted) !important; line-height: 1.6; }

/* Pricing cards — dark */
#view-plans .pricing-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.054), rgba(255, 255, 255, 0.018)) !important;
  border: 1px solid var(--rd-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28) !important;
  color: var(--rd-ink) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 24px !important;
  min-height: 340px;
  outline: none !important;
}
#view-plans .pricing-card--creator {
  border-color: rgba(244, 63, 94, 0.42) !important;
  background: linear-gradient(180deg, rgba(244, 63, 94, 0.13), rgba(255, 255, 255, 0.025)) !important;
  box-shadow: 0 12px 30px rgba(244, 63, 94, 0.18) !important;
}
#view-plans .pricing-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(244, 63, 94, 0.45) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(244, 63, 94, 0.18) !important;
  outline: none !important;
}

#view-plans .pricing-card-icon {
  background: var(--rd-red-soft) !important;
  border: 1px solid rgba(244, 63, 94, 0.3) !important;
  color: var(--rd-red-3) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  width: 3rem !important;
  height: 3rem !important;
}

#view-plans .pricing-plan-name {
  color: var(--rd-ink) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  margin: 18px 0 8px !important;
}
#view-plans .pricing-card .text-zinc-500 { color: var(--rd-muted) !important; }

/* Money line */
#view-plans .pricing-card .text-4xl {
  font-family: var(--rd-mono) !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  color: var(--rd-ink) !important;
}

/* Credit pill on each plan */
#view-plans .ca-credit-pill {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.18), rgba(244, 63, 94, 0.05)) !important;
  border: 1px solid rgba(244, 63, 94, 0.36) !important;
  color: var(--rd-ink) !important;
  font-family: var(--rd-mono) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#view-plans .ca-pill-credits { color: var(--rd-ink) !important; }
#view-plans .ca-pill-bonus {
  background: rgba(244, 63, 94, 0.2) !important;
  color: var(--rd-red-3) !important;
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 6px;
  font-size: 10px;
}

/* Feature list */
#view-plans .ca-feat-list { color: var(--rd-muted) !important; font-size: 14px !important; }
#view-plans .plans-feat-item { color: var(--rd-muted) !important; }
#view-plans .plans-feat-item svg,
#view-plans .ca-check--starter,
#view-plans .ca-check--creator,
#view-plans .ca-check--studio,
#view-plans .ca-check--enterprise { color: var(--rd-red-3) !important; }

/* Razorpay amount button frame */
#view-plans .ca-paypal-btn {
  width: 100% !important;
  min-height: 3.25rem !important;
  border-radius: 14px !important;
  padding: 4px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)) !important;
  border: 1px solid rgba(125, 211, 252, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 22px rgba(0, 0, 0, 0.18) !important;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
#view-plans .ca-paypal-btn:hover {
  border-color: rgba(45, 212, 191, 0.38) !important;
  background: linear-gradient(180deg, rgba(20,184,166,0.12), rgba(255,255,255,0.035)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 12px 28px rgba(20,184,166,0.10) !important;
}
#view-plans .ca-rzp-pay-btn:disabled {
  cursor: wait !important;
  opacity: 0.78 !important;
  filter: grayscale(0.25) !important;
}

/* Cost tables — dark */
#view-plans .cost-table-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.054), rgba(255, 255, 255, 0.018)) !important;
  border: 1px solid var(--rd-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28) !important;
  overflow: hidden;
}
#view-plans .cost-table-card * {
  color: var(--rd-ink);
  border-color: var(--rd-line) !important;
}
#view-plans .cost-table-card h3 { color: var(--rd-ink) !important; }
#view-plans .cost-table-card span[style*="color:#a8a29e"],
#view-plans .cost-table-card div[style*="color:#a8a29e"] { color: var(--rd-muted) !important; }
#view-plans .cost-table-card div[style*="background:rgba(124,58,237,0.02)"] {
  background: rgba(244, 63, 94, 0.06) !important;
}
#view-plans .cost-table-card p { color: var(--rd-muted) !important; }

/* Trust badges row */
#view-plans .trust-badges { color: var(--rd-muted) !important; }
#view-plans .trust-badges svg,
#view-plans .trust-badges .text-emerald-600 { color: var(--rd-red-3) !important; }

/* Footer on pricing page */
#view-plans .ca-footer { color: var(--rd-muted) !important; border-top-color: var(--rd-line) !important; }
#view-plans .ca-footer a { color: var(--rd-muted) !important; }
#view-plans .ca-footer a:hover { color: var(--rd-ink) !important; }


/* ═════════════════════════════════════════════════════════════════════
   5. REPLICATE / ACCOUNT — dark wash so they match the new palette
   ═════════════════════════════════════════════════════════════════════ */
html.view-replicate body,
html.view-account body,
body.view-replicate,
body.view-account,
html:has(#view-replicate.active) body,
html:has(#view-account.active) body {
  background:
    radial-gradient(circle at 12% -8%, rgba(244, 63, 94, 0.16), transparent 30rem),
    linear-gradient(180deg, var(--rd-bg-2) 0%, var(--rd-bg) 42%, var(--rd-bg-3) 100%) !important;
}
#view-replicate, #view-account { color: var(--rd-ink); }
#view-replicate h2, #view-account h2 { color: var(--rd-ink) !important; }
#view-replicate p, #view-account p { color: var(--rd-muted) !important; }

/* ═════════════════════════════════════════════════════════════════════
   6. REDESIGN.HTML FINAL SKIN — shared dark aesthetic
   Source: redesign (1).html reference.
   ═════════════════════════════════════════════════════════════════════ */
:root {
  --rd-amber: #e0a560;
  --rd-teal: #2dd4bf;
  --rd-violet: #a78bfa;
  --rd-radius: 8px;
  --rd-radius-lg: 14px;
}

html.rd-dark,
html.view-generate,
html.view-account,
html.view-replicate,
html.view-plans {
  background: #09090d !important;
}

html.rd-dark body,
html.view-generate body,
html.view-account body,
html.view-replicate body,
html.view-plans body {
  font-family: var(--rd-sans) !important;
  color: var(--rd-ink) !important;
  background:
    radial-gradient(circle at 12% -8%, rgba(244, 63, 94, 0.23), transparent 30rem),
    radial-gradient(circle at 92% 4%, rgba(45, 212, 191, 0.14), transparent 26rem),
    linear-gradient(180deg, #0d0b10 0%, var(--rd-bg) 42%, #060608 100%) !important;
}

html.rd-dark body::before,
html.view-generate body::before,
html.view-account body::before,
html.view-replicate body::before,
html.view-plans body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html.rd-dark .view-section,
html.view-generate .view-section,
html.view-account .view-section,
html.view-replicate .view-section,
html.view-plans .view-section {
  background: transparent !important;
  color: var(--rd-ink) !important;
}

html.rd-dark .view-section.active,
html.view-generate .view-section.active,
html.view-account .view-section.active,
html.view-replicate .view-section.active,
html.view-plans .view-section.active {
  transition:
    opacity 0.32s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.32s cubic-bezier(0.25, 1, 0.5, 1),
    visibility 0s linear 0s !important;
}

/* Page loader: dark all the way through navigation, no light flash. */
.ca-page-loader {
  background:
    radial-gradient(circle at 50% 8%, rgba(244, 63, 94, 0.18), transparent 24rem),
    #050507 !important;
}
.ca-page-loader .ca-simple-spinner {
  border-color: rgba(255, 255, 255, 0.10) !important;
  border-top-color: var(--rd-red) !important;
}

/* Home hero and prompt adopt the reference typography/card system. */
#view-home.active {
  background:
    radial-gradient(circle at 12% -8%, rgba(244, 63, 94, 0.23), transparent 30rem),
    radial-gradient(circle at 92% 4%, rgba(45, 212, 191, 0.14), transparent 26rem),
    linear-gradient(180deg, #0d0b10 0%, var(--rd-bg) 42%, #060608 100%) !important;
  color: var(--rd-ink) !important;
  font-family: var(--rd-sans) !important;
}
#view-home h1,
#view-home h1 span {
  font-family: var(--rd-sans) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 0.92 !important;
  color: var(--rd-ink) !important;
  text-shadow: none !important;
}
#view-home #home-greeting,
#view-home #home-greeting-text {
  color: var(--rd-muted) !important;
  font-family: var(--rd-sans) !important;
  font-weight: 600 !important;
}
#view-home .home-prompt-gradient-border {
  background: transparent !important;
  border-radius: 22px !important;
  padding: 0 !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(244, 63, 94, 0.05) !important;
  animation: none !important;
}
#view-home .home-prompt-gradient-border::before,
#view-home .home-prompt-gradient-border::after {
  display: none !important;
}
#view-home .home-prompt-box {
  border: 1px solid var(--rd-line-2) !important;
  border-radius: 22px !important;
  background: rgba(15, 15, 21, 0.92) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
#view-home .home-prompt-box textarea {
  min-height: 6.5rem !important;
  color: var(--rd-ink) !important;
  background: transparent !important;
  font-family: var(--rd-sans) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}
#view-home .home-prompt-box textarea::placeholder {
  color: var(--rd-quiet) !important;
}
#view-home .home-prompt-box > .flex {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(255, 255, 255, 0.024) !important;
  padding: 10px 12px 11px !important;
}
#view-home .home-prompt-tagline {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--rd-line) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: var(--rd-muted) !important;
  font: 700 11px/1 var(--rd-mono) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}
#view-home .home-submit-arrow {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: var(--rd-radius) !important;
  color: #fff !important;
  background: linear-gradient(180deg, var(--rd-red), var(--rd-red-2)) !important;
  box-shadow: 0 12px 30px rgba(244, 63, 94, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  animation: none !important;
}

/* Generate result cards, empty states, and prompt controls. */
#view-generate #single-result-container {
  background: transparent !important;
}
#view-generate .gen-result-wrapper,
#view-generate .gen-atomic-wrap,
#view-generate .ca-edit-result,
#view-generate #ca-mob-img-preview .gen-atomic-wrap {
  border: 1px solid var(--rd-line) !important;
  border-radius: var(--rd-radius-lg) !important;
  background:
    radial-gradient(circle at 40% 20%, rgba(244, 63, 94, 0.14), transparent 26rem),
    rgba(255, 255, 255, 0.022) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38) !important;
  overflow: hidden !important;
}
#view-generate .gen-result-image,
#view-generate .rep-card-image {
  background: #050507 !important;
}
#view-generate .gen-floating-actions {
  gap: 8px !important;
}
#view-generate .gen-float-btn {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid var(--rd-line-2) !important;
  border-radius: var(--rd-radius) !important;
  color: var(--rd-ink) !important;
  background: rgba(15, 15, 21, 0.86) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: blur(18px) !important;
}
#view-generate .gen-float-btn:hover {
  color: #fff !important;
  border-color: rgba(244, 63, 94, 0.42) !important;
  background: var(--rd-red-soft) !important;
}
#view-generate .gen-model-tabs {
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid var(--rd-line) !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.22) !important;
}
#view-generate .gen-model-tab,
#view-generate .gen-res-tab {
  min-height: 30px !important;
  min-width: 64px !important;
  justify-content: center !important;
  padding: 7px 11px !important;
  border: 1px solid transparent !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease !important;
}
#view-generate .gen-tab-cost {
  background: transparent !important;
  color: inherit !important;
  opacity: 0.72 !important;
}
#view-generate #gen-submit-btn,
#view-generate .gen-submit-glass,
#view-generate #gen-submit-btn::before,
#view-generate #gen-submit-btn::after,
#view-generate .gen-submit-glass-shine {
  animation: none !important;
}
@media (max-width: 767px) {
  #view-generate #gen-submit-btn,
  #view-generate .gen-submit-glass,
  body.ca-edit-mode #gen-submit-btn,
  body.ca-edit-mode .gen-submit-glass {
    background: linear-gradient(180deg, var(--rd-red), var(--rd-red-2)) !important;
    box-shadow: 0 12px 30px rgba(244, 63, 94, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  }
}

/* Account page: every light panel becomes a readable dark card. */
#view-account {
  background: transparent !important;
  font-family: var(--rd-sans) !important;
}
#view-account .ca-acct-page-wrap {
  padding-top: max(6.25rem, calc(5.25rem + env(safe-area-inset-top))) !important;
}
#view-account .glass-panel,
#view-account .ca-acct-hero-card,
#view-account .ca-acct-sparkline-row,
#view-account .ca-acct-left-panel,
#view-account .ca-acct-sidebar-inner,
#view-account .rw-task-card,
#view-account .rw-stat,
#view-account .rw-empty,
#view-account .ca-skeleton-row,
#view-account .ca-acct-empty-state {
  border: 1px solid var(--rd-line) !important;
  border-radius: var(--rd-radius-lg) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.054), rgba(255, 255, 255, 0.018)) !important;
  color: var(--rd-ink) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28) !important;
}
#view-account .ca-acct-hero-card {
  border-color: rgba(244, 63, 94, 0.30) !important;
  background: linear-gradient(180deg, rgba(244, 63, 94, 0.13), rgba(255, 255, 255, 0.025)) !important;
}
#view-account h1,
#view-account h2,
#view-account h3,
#view-account .ca-acct-hero-name,
#view-account .rw-header-title,
#view-account .rw-task-title,
#view-account .rw-empty-title,
#view-account .ca-acct-empty-title,
#view-account strong {
  color: var(--rd-ink) !important;
}
#view-account p,
#view-account span,
#view-account small,
#view-account .ca-acct-hero-email,
#view-account .ca-acct-sparkline-label,
#view-account .ca-acct-sparkline-stats,
#view-account .rw-task-desc,
#view-account .rw-stat-lbl,
#view-account .rw-empty-sub,
#view-account .ca-acct-empty-sub,
#view-account .text-zinc-500,
#view-account .text-zinc-600,
#view-account .text-zinc-700 {
  color: var(--rd-muted) !important;
}
#view-account .ca-acct-cred-num,
#view-account .rw-stat-val,
#view-account .rw-credit-pill,
#view-account .ca-acct-tab.active,
#view-account .ca-acct-tab.active span {
  color: var(--rd-red-3) !important;
}
#view-account .ca-acct-cred-label,
#view-account .ca-acct-tab,
#view-account .ca-acct-tab-badge,
#view-account .ca-acct-divider span {
  font-family: var(--rd-mono) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
#view-account .ca-acct-tab-nav,
#view-account .rw-header,
#view-account #acct-hist-hint,
#view-account .ca-acct-divider {
  border-color: rgba(255, 255, 255, 0.06) !important;
  background: rgba(255, 255, 255, 0.024) !important;
}
#view-account .ca-acct-tab,
#view-account .ca-acct-action-btn,
#view-account .rw-refresh-btn,
#view-account .ca-acct-clear-btn,
#view-account .ca-acct-batch-btn,
#view-account .ca-acct-batch-del-btn,
#view-account .ca-acct-batch-cancel-btn,
#view-account .rw-submit-btn,
#view-account .ca-acct-empty-cta {
  border: 1px solid var(--rd-line) !important;
  border-radius: var(--rd-radius) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: var(--rd-muted) !important;
  box-shadow: none !important;
}
#view-account .ca-acct-tab:hover,
#view-account .ca-acct-tab.active,
#view-account .ca-acct-action-btn:hover,
#view-account .rw-refresh-btn:hover {
  border-color: rgba(244, 63, 94, 0.35) !important;
  background: var(--rd-red-soft) !important;
  color: var(--rd-ink) !important;
}
#view-account .ca-acct-btn-primary,
#view-account .rw-submit-btn,
#view-account .ca-acct-empty-cta {
  border-color: transparent !important;
  color: #fff !important;
  background: linear-gradient(180deg, var(--rd-red), var(--rd-red-2)) !important;
  box-shadow: 0 12px 30px rgba(244, 63, 94, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
#view-account input,
#view-account textarea,
#view-account select,
#view-account #acct-hist-search,
#view-account #acct-hist-sort,
#view-account .rw-submit-input {
  border: 1px solid var(--rd-line) !important;
  border-radius: var(--rd-radius) !important;
  background: rgba(0, 0, 0, 0.22) !important;
  color: var(--rd-ink) !important;
}
#view-account input::placeholder,
#view-account textarea::placeholder {
  color: var(--rd-quiet) !important;
}
#view-account .ca-skel,
#view-account .rw-skel,
#view-account .rw-skeleton-card {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04)) !important;
}
#view-account .ca-footer {
  border-top-color: var(--rd-line) !important;
  color: var(--rd-muted) !important;
}
#view-account .ca-footer a {
  color: var(--rd-muted) !important;
}
#view-account .ca-footer a:hover {
  color: var(--rd-ink) !important;
}

/* Replicate controls and cards share the same dark card treatment. */
#view-replicate .glass-panel,
#view-replicate .rep-card,
#view-replicate .rep-card-prompt-box,
#view-replicate select,
#view-replicate input,
#view-replicate textarea {
  border: 1px solid var(--rd-line) !important;
  border-radius: var(--rd-radius) !important;
  background: rgba(15, 15, 21, 0.86) !important;
  color: var(--rd-ink) !important;
}
#view-replicate .rep-toggle-wrap,
#view-replicate .rep-toggle-wrap * {
  color: var(--rd-muted) !important;
}
#view-replicate .rep-toggle-wrap:hover,
#view-replicate .rep-toggle-wrap.active {
  border-color: rgba(244, 63, 94, 0.35) !important;
  background: var(--rd-red-soft) !important;
}

/* ═════════════════════════════════════════════════════════════════════
   7. GENERATE RESULT FIXES — preserve original sizing, darken only states
   ═════════════════════════════════════════════════════════════════════ */
#view-generate .gen-result-wrapper,
#view-generate .gen-atomic-wrap,
#view-generate .ca-edit-result,
#view-generate #ca-mob-img-preview .gen-atomic-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#view-generate .gen-result-wrapper {
  gap: 0.75rem !important;
  overflow: visible !important;
}
#view-generate .gen-atomic-wrap {
  border-radius: 1.25rem !important;
  outline: 1px solid rgba(255, 255, 255, 0.10) !important;
  outline-offset: -1px !important;
}
#view-generate #single-result-container > .relative.rounded-3xl {
  background:
    radial-gradient(circle at 38% 22%, rgba(244, 63, 94, 0.18), transparent 24rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.054), rgba(255, 255, 255, 0.018)) !important;
  border: 1px solid var(--rd-line) !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34) !important;
}
#view-generate #single-result-container > .relative.rounded-3xl .bg-indigo-400,
#view-generate #single-result-container > .relative.rounded-3xl .bg-purple-400,
#view-generate #single-result-container > .relative.rounded-3xl .bg-teal-400 {
  background: var(--rd-red) !important;
  opacity: 0.18 !important;
}
#view-generate #single-result-container > .relative.rounded-3xl [data-lucide="loader-circle"],
#view-generate #single-result-container > .relative.rounded-3xl .text-indigo-500,
#view-generate #single-result-container > .relative.rounded-3xl .text-purple-500 {
  color: var(--rd-red-3) !important;
}
#view-generate #single-result-container > .relative.rounded-3xl .text-indigo-400,
#view-generate #single-result-container > .relative.rounded-3xl .text-purple-400 {
  color: var(--rd-muted) !important;
  font-family: var(--rd-mono) !important;
}
#view-generate .gen-floating-actions {
  display: flex !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 30 !important;
  width: 100% !important;
  pointer-events: auto !important;
}
#view-generate .gen-float-btn {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 0.55rem 0.8rem !important;
  border-radius: var(--rd-radius) !important;
  gap: 0.45rem !important;
  color: var(--rd-ink) !important;
  background: rgba(15, 15, 21, 0.88) !important;
  border: 1px solid var(--rd-line-2) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32) !important;
  font-family: var(--rd-sans) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
}
#view-generate .gen-float-btn span {
  display: inline !important;
}
#view-generate .gen-float-btn:hover {
  transform: translateY(-1px) !important;
  color: #fff !important;
  background: linear-gradient(180deg, var(--rd-red), var(--rd-red-2)) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 26px rgba(244, 63, 94, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

/* ═════════════════════════════════════════════════════════════════════
   8. MOBILE-FIRST DARK POLISH — replicate, writer buttons, pricing table
   ═════════════════════════════════════════════════════════════════════ */
html.rd-dark,
html.rd-dark body,
html.view-generate,
html.view-generate body,
html.view-replicate,
html.view-replicate body,
html.view-plans,
html.view-plans body,
html.view-account,
html.view-account body {
  background-color: #09090d !important;
}

/* Generate AI Writer: playground-like segmented controls. */
#view-generate .ca-writer-row {
  gap: 10px !important;
  padding: 10px 12px !important;
}
#view-generate .ca-writer-btns {
  display: flex !important;
  gap: 7px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
}
#view-generate .ca-writer-btn {
  min-height: 34px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid var(--rd-line) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: var(--rd-muted) !important;
  font-family: var(--rd-sans) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}
#view-generate .ca-writer-btn [data-lucide],
#view-generate .ca-writer-btn i {
  color: currentColor !important;
}
#view-generate .ca-writer-btn:hover,
#view-generate .ca-writer-btn.ca-writer-loading {
  transform: translateY(-1px) !important;
  color: var(--rd-ink) !important;
  border-color: rgba(244, 63, 94, 0.38) !important;
  background: var(--rd-red-soft) !important;
}
#view-generate .ca-writer-btn--improve,
#view-generate .ca-writer-btn--best {
  color: var(--rd-red-3) !important;
  border-color: rgba(244, 63, 94, 0.34) !important;
  background: rgba(244, 63, 94, 0.11) !important;
}
#view-generate .ca-writer-btn--creative {
  color: var(--rd-violet) !important;
  border-color: rgba(167, 139, 250, 0.28) !important;
}
@media (max-width: 767px) {
  #view-generate #gen-main {
    padding-top: max(4.75rem, calc(3.75rem + env(safe-area-inset-top))) !important;
  }
  #view-generate #single-result-container {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
    padding-bottom: 13rem !important;
  }
  #view-generate .ca-prompt-bar {
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
  }
  #view-generate .ca-writer-row {
    padding: 8px 10px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  #view-generate .ca-writer-row::-webkit-scrollbar { display: none !important; }
  #view-generate .ca-writer-btns {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    min-width: max-content !important;
  }
  #view-generate .ca-writer-btn {
    flex: 0 0 auto !important;
    min-height: 32px !important;
    padding: 7px 11px !important;
    font-size: 11px !important;
  }
  #view-generate .gen-prompt-card {
    border-radius: 18px !important;
  }
}

/* Replicate page: full dark mobile/desktop controls and cards. */
#view-replicate {
  background: transparent !important;
  font-family: var(--rd-sans) !important;
}
#view-replicate h1,
#view-replicate h2,
#view-replicate h3,
#view-replicate .rep-drop-zone-title,
#view-replicate .rep-card-title,
#view-replicate .rep-card-name,
#view-replicate strong {
  color: var(--rd-ink) !important;
}
#view-replicate p,
#view-replicate span,
#view-replicate small,
#view-replicate .text-zinc-400,
#view-replicate .text-zinc-500,
#view-replicate .text-zinc-600,
#view-replicate .text-stone-800 {
  color: var(--rd-muted) !important;
}
#view-replicate #rep-cost-badge {
  border: 1px solid rgba(244, 63, 94, 0.35) !important;
  border-radius: 999px !important;
  background: var(--rd-red-soft) !important;
  color: var(--rd-red-3) !important;
  font-family: var(--rd-mono) !important;
}
#view-replicate .glass-panel,
#view-replicate .rep-toggle-wrap,
#view-replicate #rep-view-toggle,
#view-replicate #rep-download-btn,
#view-replicate .rep-card,
#view-replicate .rep-card-prompt-box,
#view-replicate .rep-drop-zone,
#view-replicate .rep-drop-zone-inner {
  border: 1px solid var(--rd-line) !important;
  border-radius: var(--rd-radius-lg) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.054), rgba(255, 255, 255, 0.018)) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28) !important;
  color: var(--rd-ink) !important;
}
#view-replicate .rep-drop-zone {
  padding: 1px !important;
  overflow: hidden !important;
}
#view-replicate .rep-drop-zone-inner {
  min-height: 280px !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  box-shadow: none !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(244, 63, 94, 0.12), transparent 18rem),
    rgba(255, 255, 255, 0.018) !important;
}
#view-replicate .rep-drop-zone-icon {
  border: 1px solid rgba(244, 63, 94, 0.3) !important;
  border-radius: var(--rd-radius) !important;
  background: var(--rd-red-soft) !important;
  color: var(--rd-red-3) !important;
}
#view-replicate .rep-drop-zone-link,
#view-replicate .rep-drop-zone-types {
  color: var(--rd-red-3) !important;
}
#view-replicate .rep-deconstruct-btn,
#view-replicate #rep-process-btn {
  min-height: 44px !important;
  padding: 10px 15px !important;
  border: 0 !important;
  border-radius: var(--rd-radius) !important;
  color: #fff !important;
  background: linear-gradient(180deg, var(--rd-red), var(--rd-red-2)) !important;
  box-shadow: 0 12px 30px rgba(244, 63, 94, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  font-weight: 900 !important;
}
#view-replicate #rep-download-btn,
#view-replicate #rep-view-toggle {
  min-height: 44px !important;
  border-radius: var(--rd-radius) !important;
}
#view-replicate #rep-pro-toggle {
  background: rgba(0, 0, 0, 0.24) !important;
  border: 1px solid rgba(244, 63, 94, 0.32) !important;
}
#view-replicate #rep-pro-knob {
  background: var(--rd-red-3) !important;
  box-shadow: 0 0 16px rgba(244, 63, 94, 0.45) !important;
}
#view-replicate .bg-stone-100\/50,
#view-replicate .bg-stone-100\/80 {
  background: rgba(0, 0, 0, 0.22) !important;
}
#view-replicate button.w-6,
#view-replicate #rep-worker-count {
  color: var(--rd-ink) !important;
}
#view-replicate .rep-card {
  overflow: hidden !important;
}
#view-replicate .rep-card img,
#view-replicate .rep-card-image {
  background: #050507 !important;
}
#view-replicate .rep-card button,
#view-replicate .rep-card .btn-spring {
  border: 1px solid var(--rd-line) !important;
  border-radius: var(--rd-radius) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: var(--rd-muted) !important;
}
#view-replicate .rep-card button:hover,
#view-replicate .rep-card .btn-spring:hover {
  border-color: rgba(244, 63, 94, 0.35) !important;
  background: var(--rd-red-soft) !important;
  color: var(--rd-ink) !important;
}
@media (max-width: 767px) {
  #view-replicate > div {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
    padding-top: max(4.75rem, calc(3.75rem + env(safe-area-inset-top))) !important;
  }
  #view-replicate .animate-scale-in:first-child,
  #view-replicate .flex.flex-col.md\:flex-row {
    gap: 14px !important;
    margin-bottom: 14px !important;
  }
  #view-replicate .flex.flex-wrap.items-center.gap-2.w-full {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #view-replicate .rep-toggle-wrap,
  #view-replicate #rep-process-btn {
    grid-column: 1 / span 2 !important;
    justify-content: center !important;
    width: 100% !important;
  }
  #view-replicate #rep-download-btn,
  #view-replicate #rep-view-toggle,
  #view-replicate .glass-panel {
    width: 100% !important;
  }
  #view-replicate .rep-drop-zone-inner {
    min-height: 220px !important;
    padding: 24px 14px !important;
  }
  #view-replicate #rep-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Pricing cost table: remove inline white bands and restore contrast. */
#view-plans .cost-table-card,
#view-plans .cost-table-card[style] {
  border: 1px solid var(--rd-line) !important;
  border-radius: var(--rd-radius-lg) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.054), rgba(255,255,255,.018)) !important;
  box-shadow: 0 6px 22px rgba(0,0,0,.28) !important;
}
#view-plans .cost-table-card *,
#view-plans .cost-table-card [style] {
  color: var(--rd-muted) !important;
  border-color: var(--rd-line) !important;
}
#view-plans .cost-table-card h3,
#view-plans .cost-table-card strong,
#view-plans .cost-table-card .font-bold,
#view-plans .cost-table-card [style*="font-size:28px"],
#view-plans .cost-table-card [style*="font-size:24px"] {
  color: var(--rd-ink) !important;
}
#view-plans .cost-table-card > div,
#view-plans .cost-table-card [style*="background:#fff"],
#view-plans .cost-table-card [style*="background:#faf8f4"],
#view-plans .cost-table-card [style*="background:rgba(124,58,237"],
#view-plans .cost-table-card [style*="background:rgba(8,145,178"],
#view-plans .cost-table-card [style*="background:rgba(180,83,9"] {
  background: rgba(255,255,255,.024) !important;
}
#view-plans .cost-table-card span[style*="background"] {
  border: 1px solid rgba(244, 63, 94, 0.30) !important;
  background: var(--rd-red-soft) !important;
  color: var(--rd-red-3) !important;
}
#view-plans .cost-table-card svg {
  stroke: currentColor !important;
  color: var(--rd-red-3) !important;
}
@media (max-width: 767px) {
  #view-plans .cost-table-card {
    border-radius: 12px !important;
  }
  #view-plans .cost-table-card [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  #view-plans .cost-table-card > div {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* Mobile Generate composer: visual-only dark cleanup.
   Keep app.css in charge of keyboard positioning; v54.9.1 worked because its
   first-tap path was not overridden by redesign layout rules. */
@media (max-width: 767px) {
  html.view-generate,
  html.view-generate body,
  body.view-generate,
  body:has(#view-generate.active) {
    background-color: var(--rd-bg) !important;
  }

  #view-generate .ca-prompt-bar,
  html.view-generate .ca-prompt-bar,
  body.view-generate .ca-prompt-bar,
  body:has(#view-generate.active) .ca-prompt-bar {
    background: linear-gradient(
      to top,
      rgba(9, 9, 13, 0.98) 0%,
      rgba(9, 9, 13, 0.92) 72%,
      rgba(9, 9, 13, 0) 100%
    ) !important;
    box-shadow: none !important;
  }

  #view-generate .ca-prompt-bar .sidebar-model-row,
  #view-generate .ca-prompt-bar .gen-model-tabs,
  html.view-generate .ca-prompt-bar .sidebar-model-row,
  html.view-generate .ca-prompt-bar .gen-model-tabs {
    background: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }

  #view-generate #gen-prompt-card.gen-prompt-card {
    background: rgba(15, 15, 21, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.48) !important;
  }

  #view-generate #gen-prompt,
  #view-generate #gen-prompt:focus {
    font-size: 16px !important;
    background: transparent !important;
  }

  /* Match the v54.9.1 mobile keyboard layout. These are layout resets, not
     visual styling: app.css owns the first-tap keyboard positioning. */
  html.view-generate body::before,
  body.view-generate::before,
  body:has(#view-generate.active)::before {
    display: none !important;
  }

  #view-generate #gen-main {
    padding-top: max(5.5rem, calc(4.5rem + env(safe-area-inset-top))) !important;
  }

  #view-generate #single-result-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 13rem !important;
  }

  #view-generate .ca-prompt-bar {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Cross-device first-focus dock. Some mobile browsers do not apply the
     visualViewport resize before the first input event; this class is driven
     by index.php and pins the composer above the measured keyboard offset. */
  body.ca-gen-prompt-keyboard #view-generate .ca-prompt-bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 90 !important;
    transform: translate3d(0, calc(-1 * var(--ca-focus-keyboard-offset, 0px)), 0) !important;
    -webkit-transform: translate3d(0, calc(-1 * var(--ca-focus-keyboard-offset, 0px)), 0) !important;
    will-change: transform !important;
  }

  body.ca-gen-prompt-keyboard #view-generate #single-result-container {
    padding-bottom: calc(var(--ca-prompt-bar-height, 148px) + var(--ca-focus-keyboard-offset, 0px) + 0.75rem) !important;
  }
}

/* Admin final visual pass: red-line toast system and home hero finish. */
.ca-toast,
.ca-toast.success,
.ca-toast.error,
.ca-toast.gift,
.ca-toast.prompt-rejected {
  background: rgba(9, 9, 13, 0.94) !important;
  color: #fff7ed !important;
  border: 1px solid rgba(251, 113, 133, 0.58) !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 34px rgba(56, 189, 248, 0.14) !important;
}
.ca-toast.success {
  color: #ecfdf5 !important;
  border-color: rgba(52, 211, 153, 0.56) !important;
}
.ca-toast.error {
  color: #fff1f2 !important;
  border-color: rgba(251, 113, 133, 0.72) !important;
}
.ca-toast.gift {
  color: #f5f3ff !important;
  border-color: rgba(196, 181, 253, 0.62) !important;
}
.ca-toast.prompt-rejected {
  color: #f0f9ff !important;
  border-color: rgba(125, 211, 252, 0.56) !important;
}
.ca-toast.prompt-rejected .ca-toast-line2 {
  color: #dbeafe !important;
  opacity: 1 !important;
}
#view-home .home-hero-title,
html.home-page #view-home .home-hero-title,
body.home-page #view-home .home-hero-title {
  font-family: var(--rd-serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 0.9 !important;
}
#view-home .home-hero-title-main {
  color: #f8fbff !important;
  text-shadow: 0 24px 70px rgba(0, 0, 0, 0.46) !important;
}
#view-home .home-hero-title-accent {
  color: #7dd3fc !important;
  font-style: italic !important;
  text-shadow: 0 18px 56px rgba(56, 189, 248, 0.28) !important;
}
@media (max-width: 640px) {
  #view-home .home-hero-title {
    width: 100% !important;
    max-width: calc(100vw - 1.5rem) !important;
    overflow: visible !important;
    font-size: clamp(2.55rem, 13.8vw, 4.35rem) !important;
    line-height: 0.94 !important;
    align-items: center !important;
    text-align: center !important;
  }
  #view-home .home-hero-title-main,
  #view-home .home-hero-title-accent {
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }
  #view-home .home-hero-title-accent {
    font-size: 0.94em !important;
  }
}

/* v56 merged-theme rescue: modern home cards, analyzer UI, and main-theme cohesion. */
#view-home .home-stitch-ai-btn,
#view-home .home-stitch-cta,
#view-home .home-stitch-signin,
#view-home .home-stitch-avatar-btn {
  border-radius: 12px !important;
  border: 1px solid rgba(125, 211, 252, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.035)),
    rgba(12, 18, 31, .78) !important;
  color: #f8fbff !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), border-color .18s ease, box-shadow .18s ease !important;
}
#view-home .home-stitch-ai-btn:hover,
#view-home .home-stitch-cta:hover,
#view-home .home-stitch-signin:hover,
#view-home .home-stitch-avatar-btn:hover {
  border-color: rgba(251, 113, 133, 0.42) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.32),
    0 0 28px rgba(56,189,248,.16),
    inset 0 1px 0 rgba(255,255,255,.13) !important;
}
#view-home .home-stitch-ai-btn:active,
#view-home .home-stitch-cta:active,
#view-home .home-stitch-signin:active,
#view-home .home-stitch-avatar-btn:active,
#view-home .hm-tool-card:active,
#view-home .hm-card-btn:active {
  transform: scale(.965) !important;
}
#view-home .home-stitch-cta {
  background:
    linear-gradient(135deg, rgba(125, 211, 252, .20), rgba(251, 113, 133, .18)),
    rgba(12, 18, 31, .84) !important;
}
#view-home .home-stitch-avatar-btn {
  padding: 2px !important;
  overflow: hidden !important;
}

#view-home .hm-cards-section {
  max-width: 1220px !important;
}
#view-home .hm-tool-card {
  background:
    radial-gradient(circle at 8% 0%, rgba(125, 211, 252, .11), transparent 34%),
    radial-gradient(circle at 92% 100%, rgba(251, 113, 133, .08), transparent 36%),
    linear-gradient(180deg, rgba(18, 25, 42, .94), rgba(10, 13, 23, .96)) !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  border-radius: 18px !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow:
    0 16px 42px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
  transform: translateZ(0);
}
#view-home .hm-tool-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.06) 45%, transparent 70%) !important;
  opacity: 0 !important;
  transform: translateX(-45%) !important;
  transition: opacity .25s ease, transform .5s ease !important;
  pointer-events: none !important;
}
#view-home .hm-tool-card:hover {
  transform: translateY(-6px) translateZ(0) !important;
  border-color: rgba(125, 211, 252, .36) !important;
  box-shadow:
    0 24px 54px rgba(0,0,0,.42),
    0 0 38px rgba(125,211,252,.12),
    inset 0 1px 0 rgba(255,255,255,.09) !important;
}
#view-home .hm-tool-card:hover::before {
  opacity: 1 !important;
  transform: translateX(45%) !important;
}
#view-home .hm-card-icon {
  background: rgba(12, 18, 31, .68) !important;
  border: 1px solid rgba(125, 211, 252, .22) !important;
  color: #7dd3fc !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.20) !important;
}
#view-home .hm-card-subhead {
  color: #7dd3fc !important;
}
#view-home .hm-card-title {
  color: #f8fbff !important;
}
#view-home .hm-card-desc {
  color: rgba(219, 229, 255, .78) !important;
}
#view-home .hm-card-btn,
#view-home .hm-tool-card[data-rd="primary"] .hm-card-btn {
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #e8f0ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.18) !important;
}
#view-home .hm-tool-card:hover .hm-card-btn,
#view-home .hm-tool-card[data-rd="primary"]:hover .hm-card-btn {
  background: linear-gradient(135deg, #7dd3fc, #fb7185) !important;
  border-color: transparent !important;
  color: #07101e !important;
  box-shadow: 0 14px 28px rgba(125,211,252,.22), 0 10px 28px rgba(251,113,133,.12) !important;
}

body:has(#view-replicate.active),
html:has(#view-replicate.active) {
  background: #070a13 !important;
}
#view-replicate.active {
  background:
    radial-gradient(circle at 12% 0%, rgba(125,211,252,.10), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(251,113,133,.08), transparent 30%),
    linear-gradient(180deg, #070a13 0%, #0a0d17 100%) !important;
  color: #f8fbff !important;
}
#view-replicate h2 {
  color: #f8fbff !important;
  letter-spacing: -.04em !important;
}
#view-replicate .text-zinc-400,
#view-replicate .text-zinc-500,
#view-replicate .text-stone-800,
#view-replicate .text-zinc-600 {
  color: rgba(219,229,255,.74) !important;
}
#view-replicate .glass-panel,
#view-replicate #rep-view-toggle {
  background: rgba(12, 18, 31, .74) !important;
  border-color: rgba(125, 211, 252, .16) !important;
  color: #dbeafe !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 26px rgba(0,0,0,.18) !important;
}
#view-replicate #rep-view-toggle option {
  background: #0b1020 !important;
  color: #e5edff !important;
}
#view-replicate .rep-deconstruct-btn {
  border: 1px solid rgba(125,211,252,.32) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #7dd3fc, #a7f3d0 52%, #fb7185) !important;
  color: #07101e !important;
  font-weight: 900 !important;
  padding: 0 18px !important;
  box-shadow: 0 18px 36px rgba(45,212,191,.18), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
#view-replicate #rep-drop-zone {
  position: relative !important;
  overflow: hidden !important;
  min-height: 290px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 26px !important;
  border: 1px solid rgba(125, 211, 252, .28) !important;
  background:
    linear-gradient(180deg, rgba(12,18,31,.74), rgba(9,13,24,.88)),
    radial-gradient(circle at 50% 0%, rgba(125,211,252,.16), transparent 50%) !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}
#view-replicate #rep-drop-zone::before {
  content: "" !important;
  position: absolute !important;
  inset: 16px !important;
  border-radius: 20px !important;
  background:
    linear-gradient(rgba(125,211,252,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,211,252,.08) 1px, transparent 1px) !important;
  background-size: 34px 34px !important;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.16)) !important;
  pointer-events: none !important;
}
#view-replicate #rep-drop-zone::after {
  content: "" !important;
  position: absolute !important;
  left: 20px !important;
  right: 20px !important;
  top: 24px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #7dd3fc, #fb7185, transparent) !important;
  animation: caRepScan 2.3s ease-in-out infinite !important;
  opacity: .88 !important;
  pointer-events: none !important;
}
#view-replicate .rep-drop-zone-inner {
  position: relative !important;
  z-index: 2 !important;
}
#view-replicate .rep-drop-zone-icon {
  width: 74px !important;
  height: 74px !important;
  border-radius: 20px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 auto 18px !important;
  background: rgba(125,211,252,.11) !important;
  border: 1px solid rgba(125,211,252,.24) !important;
  color: #7dd3fc !important;
  box-shadow: 0 0 34px rgba(125,211,252,.12), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#view-replicate .rep-drop-zone-title {
  color: #f8fbff !important;
  font-size: clamp(1.35rem, 3vw, 2rem) !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
}
#view-replicate .rep-drop-zone-sub,
#view-replicate .rep-drop-zone-types {
  color: rgba(219,229,255,.72) !important;
}
#view-replicate .rep-drop-zone-link {
  color: #7dd3fc !important;
  font-weight: 900 !important;
}
#view-replicate .rep-card {
  border-color: rgba(125, 211, 252, .22) !important;
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(9,13,24,.96)) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
@keyframes caRepScan {
  0%,100% { transform: translateY(0); opacity: .32; }
  50% { transform: translateY(214px); opacity: .95; }
}

html:has(.ai-friends-main),
body:has(.ai-friends-main),
html:has(#aifc-root),
body:has(#aifc-root),
html:has(#usc-main),
body:has(#usc-main) {
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100% !important;
  background: #070a13 !important;
}

/* v57 mobile-first generator and professional analyzer polish */
body.view-is-generate,
html.view-is-generate,
#view-generate.active {
  background:
    radial-gradient(circle at 14% 0%, rgba(45,212,191,.12), transparent 32%),
    radial-gradient(circle at 88% 12%, rgba(244,114,182,.10), transparent 28%),
    linear-gradient(180deg, #050814 0%, #080b14 100%) !important;
}

#view-generate .home-stitch-header,
#view-replicate .home-stitch-header,
.cat-main-header {
  background: rgba(5, 9, 18, .92) !important;
  border-bottom: 1px solid rgba(125, 211, 252, .14) !important;
}

#view-generate #gen-main { background: transparent !important; }
#view-generate #single-result-container {
  align-items: center !important;
  padding-left: clamp(.75rem, 3vw, 2rem) !important;
  padding-right: clamp(.75rem, 3vw, 2rem) !important;
}
#view-generate #generate-empty-state .relative {
  opacity: 1 !important;
  padding: 28px !important;
  border: 1px solid rgba(125,211,252,.16) !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(15,23,42,.62), rgba(8,11,21,.72)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px rgba(0,0,0,.28) !important;
}
#view-generate .ca-prompt-bar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 45 !important;
  padding: 0 clamp(.7rem, 2vw, 1.25rem) max(.8rem, env(safe-area-inset-bottom)) !important;
  background: linear-gradient(to top, rgba(5,8,20,.98) 0%, rgba(5,8,20,.92) 70%, transparent 100%) !important;
}
#view-generate .gen-prompt-card {
  max-width: 920px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(16,24,40,.94), rgba(8,12,24,.96)) !important;
  border: 1px solid rgba(125,211,252,.24) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.46), 0 0 0 1px rgba(255,255,255,.035), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#view-generate #gen-prompt {
  color: #f8fbff !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}
#view-generate #gen-prompt::placeholder { color: rgba(203,213,225,.52) !important; }
#view-generate .gen-model-tabs {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: min(920px, calc(100vw - 1.5rem)) !important;
  margin: 0 auto 8px !important;
  padding: 5px !important;
  gap: 5px !important;
  border: 1px solid rgba(125,211,252,.18) !important;
  border-radius: 16px !important;
  background: rgba(15,23,42,.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
#view-generate .gen-model-tabs::-webkit-scrollbar { display:none !important; }
#view-generate .gen-model-tab,
#view-generate .gen-res-tab {
  min-height: 34px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.045) !important;
  color: rgba(226,232,240,.8) !important;
  padding: 0 13px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}
#view-generate .gen-model-tab.active,
#view-generate .gen-res-tab.active {
  background: linear-gradient(135deg, rgba(45,212,191,.26), rgba(129,140,248,.18)) !important;
  border-color: rgba(125,211,252,.46) !important;
  color: #f8fbff !important;
  box-shadow: 0 8px 20px rgba(45,212,191,.12) !important;
}
#view-generate .gen-tab-cost,
#view-generate .gen-btn-cost-badge {
  color: #07101e !important;
  background: #a7f3d0 !important;
  border-radius: 999px !important;
  padding: 2px 7px !important;
}
#view-generate .ca-writer-row {
  border-top: 1px solid rgba(125,211,252,.11) !important;
  background: rgba(255,255,255,.025) !important;
}
#view-generate .ca-writer-btn,
#view-generate #gen-img-upload-btn,
#view-generate #gen-ar-btn,
#view-generate #ca-nsfw-switch {
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(125,211,252,.16) !important;
  color: #dbeafe !important;
  border-radius: 11px !important;
}
#view-generate #gen-submit-btn {
  border-radius: 14px !important;
  background: linear-gradient(135deg, #2dd4bf 0%, #7dd3fc 48%, #f472b6 100%) !important;
  color: #020617 !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: 0 16px 34px rgba(45,212,191,.20), 0 8px 30px rgba(244,114,182,.12), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
#view-generate #gen-submit-btn:hover { filter: saturate(1.12) brightness(1.06) !important; transform: translateY(-2px) !important; }
#view-generate #gen-submit-btn:active { transform: scale(.96) !important; }

@media (max-width: 767px) {
  #view-generate aside { display: none !important; }
  #view-generate #gen-main {
    min-height: 100svh !important;
    padding-top: max(4.4rem, calc(3.65rem + env(safe-area-inset-top))) !important;
  }
  #view-generate #single-result-container {
    padding-top: .4rem !important;
    padding-bottom: 17.5rem !important;
    align-items: flex-start !important;
  }
  #view-generate #generate-empty-state { min-height: calc(100svh - 25rem) !important; }
  #view-generate .ca-prompt-bar {
    padding-left: .65rem !important;
    padding-right: .65rem !important;
  }
  #view-generate .sidebar-model-row { align-items: stretch !important; }
  #view-generate .gen-model-tabs {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
  }
  #view-generate .gen-prompt-card {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 20px !important;
  }
  #view-generate #gen-prompt,
  #view-generate #gen-prompt:focus {
    min-height: 7.25rem !important;
    max-height: 12rem !important;
    padding: 14px 14px 12px !important;
  }
  #view-generate .gen-prompt-card > .flex.items-center.justify-between {
    padding: 8px 10px 10px !important;
    gap: 8px !important;
  }
  #view-generate #gen-submit-btn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    border-radius: 15px !important;
  }
  #view-generate #gen-submit-text { display: none !important; }
  #view-generate .gen-submit-mob-icon { display: block !important; width: 22px !important; height: 22px !important; }
  #view-generate #gen-ar-btn,
  #view-generate #gen-img-upload-btn,
  #view-generate #ca-nsfw-switch { min-height: 38px !important; }
}

/* Replicate / Visual Deconstruction v57: no scan gimmick, readable image cards */
#view-replicate #rep-drop-zone::after { display: none !important; animation: none !important; }
#view-replicate #rep-drop-zone::before {
  background: radial-gradient(circle at 50% 0%, rgba(125,211,252,.10), transparent 60%) !important;
  background-size: auto !important;
  inset: 0 !important;
  mask-image: none !important;
}
#view-replicate #rep-drop-zone {
  border-radius: 22px !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(45,212,191,.12), transparent 34%),
    radial-gradient(circle at 86% 92%, rgba(244,114,182,.10), transparent 34%),
    linear-gradient(180deg, rgba(15,23,42,.86), rgba(5,8,17,.94)) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
#view-replicate #rep-drop-zone.drag-over,
#view-replicate #rep-drop-zone:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(45,212,191,.56) !important;
  box-shadow: 0 30px 74px rgba(0,0,0,.46), 0 0 38px rgba(45,212,191,.12), inset 0 1px 0 rgba(255,255,255,.09) !important;
}
#view-replicate .rep-deconstruct-btn,
#view-replicate #rep-download-btn,
#view-replicate #rep-view-toggle,
#view-replicate .rep-toggle-wrap {
  border-radius: 12px !important;
  border-color: rgba(125,211,252,.22) !important;
  color: #f8fbff !important;
}
#view-replicate .rep-deconstruct-btn {
  background: linear-gradient(135deg, #2dd4bf 0%, #7dd3fc 48%, #f472b6 100%) !important;
  color: #020617 !important;
  font-weight: 950 !important;
}
#view-replicate #rep-worker-count,
#view-replicate .text-stone-800 { color: #f8fbff !important; }
#view-replicate .rep-card {
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(125,211,252,.20) !important;
  background: linear-gradient(180deg, rgba(15,23,42,.94), rgba(7,10,19,.98)) !important;
  box-shadow: 0 22px 54px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07) !important;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), border-color .2s ease, box-shadow .2s ease !important;
}
#view-replicate .rep-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(45,212,191,.46) !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.48), 0 0 34px rgba(45,212,191,.10), inset 0 1px 0 rgba(255,255,255,.09) !important;
}
#view-replicate .rep-card-image-wrap {
  background: #020617 !important;
  border-bottom: 1px solid rgba(125,211,252,.14) !important;
}
#view-replicate .rep-card-content {
  background: transparent !important;
  color: #e5edff !important;
}
#view-replicate .rep-card-placeholder { color: rgba(226,232,240,.78) !important; }
#view-replicate .rep-card-prompt-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 12px !important;
}
#view-replicate .rep-card-prompt-box {
  min-height: 150px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(125,211,252,.20) !important;
  background: rgba(2,6,23,.62) !important;
  color: #f8fbff !important;
  padding: 12px !important;
  line-height: 1.55 !important;
  font-size: 12.5px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}
#view-replicate .rep-card-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
#view-replicate .rep-card-btn {
  min-height: 40px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(125,211,252,.18) !important;
  background: rgba(255,255,255,.055) !important;
  color: #dbeafe !important;
  font-weight: 850 !important;
}
#view-replicate .rep-card-btn-use {
  background: linear-gradient(135deg, rgba(45,212,191,.22), rgba(244,114,182,.16)) !important;
  color: #fff !important;
}
#view-replicate .rep-card-remove,
#view-replicate .rep-card-expand-btn {
  background: rgba(2,6,23,.78) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #fff !important;
  backdrop-filter: blur(12px) !important;
}
@media (max-width: 767px) {
  #view-replicate > .max-w-7xl {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
    padding-top: max(4.5rem, calc(3.75rem + env(safe-area-inset-top))) !important;
  }
  #view-replicate .flex.flex-wrap.items-center.gap-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  #view-replicate .rep-deconstruct-btn,
  #view-replicate #rep-view-toggle,
  #view-replicate #rep-download-btn,
  #view-replicate .rep-toggle-wrap {
    width: 100% !important;
    justify-content: center !important;
  }
  #view-replicate #rep-drop-zone { min-height: 240px !important; }
  #view-replicate #rep-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* v61 emergency visibility patch for pages that were rendering as black/blank.
   These pages use the global app shell CSS, so they need normal document scroll. */
#ca-page-loader,
body .ca-page-loader,
html .ca-page-loader {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.ca-body {
  opacity: 1 !important;
  visibility: visible !important;
  contain: none !important;
  content-visibility: visible !important;
}

html,
body,
body[class*="ca-anim-"],
body[class*="pulse"],
body[class*="glow"],
body[class*="shimmer"] {
  contain: none !important;
  content-visibility: visible !important;
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: auto !important;
}

#app-root {
  height: auto !important;
  min-height: 100svh !important;
  overflow: visible !important;
}

.view-section.active,
#view-home.active,
#view-generate.active,
#view-replicate.active,
#view-plans.active,
#view-account.active {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: auto !important;
  touch-action: auto !important;
}

#view-home.active {
  position: relative !important;
  height: auto !important;
  min-height: 100svh !important;
  overflow: visible !important;
}

html:has(#gc-root),
body:has(#gc-root),
html:has(.ai-friends-main),
body:has(.ai-friends-main),
html:has(#usc-main),
body:has(#usc-main),
html:has(#decon-main),
body:has(#decon-main) {
  height: auto !important;
  min-height: 100svh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #070a13 !important;
  contain: none !important;
  content-visibility: visible !important;
}

#gc-root,
.ai-friends-main,
#usc-main,
#decon-main,
#view-replicate.active {
  opacity: 1 !important;
  visibility: visible !important;
}

.cat-main-header,
.cat-main-mobile {
  background: linear-gradient(180deg, rgba(5,9,18,.97), rgba(7,10,19,.93)) !important;
  border-bottom: 1px solid rgba(125,211,252,.18) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.05) !important;
  color: #f8fbff !important;
}

.cat-main-header *,
.cat-main-mobile * {
  color: inherit;
}

.cat-main-nav-link {
  color: #aeb9d4 !important;
}

.cat-main-nav-link:hover,
.cat-main-nav-link.active {
  color: #ffffff !important;
}

.cat-signin-chip,
.cat-credit-chip {
  background: linear-gradient(135deg, rgba(125,211,252,.18), rgba(129,140,248,.15), rgba(244,114,182,.12)) !important;
  color: #f8fbff !important;
  border-color: rgba(125,211,252,.34) !important;
}

#view-replicate.active {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 1 !important;
}

#view-replicate.active > .max-w-7xl,
#view-replicate.active #rep-drop-zone,
#view-replicate.active #rep-grid {
  opacity: 1 !important;
  visibility: visible !important;
}

/* v63 scroll recovery: keep the SPA routes in normal document flow.
   Absolute full-viewport sections were trapping wheel/touch scroll on live pages. */
body #app-root {
  height: auto !important;
  min-height: 100svh !important;
  overflow: visible !important;
}

body .view-section.active,
body #view-home.active,
body #view-generate.active,
body #view-replicate.active,
body #view-plans.active,
body #view-account.active {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: 100svh !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  transform: none !important;
}

html,
body {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
}

/* v65 production polish: fix clipped generator results, persistent deconstruct
   drop zones, and hidden controls caused by older force-visible route CSS. */
#view-generate #single-result-container {
  min-height: calc(100svh - 260px) !important;
  height: auto !important;
  max-height: none !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: clamp(1.2rem, 4vh, 2.8rem) !important;
  padding-bottom: clamp(17rem, 29vh, 22rem) !important;
  overflow: visible !important;
}
#view-generate .gen-result-wrapper {
  position: relative !important;
  width: min(980px, calc(100vw - 2rem)) !important;
  max-width: min(980px, calc(100vw - 2rem)) !important;
  margin: 0 auto !important;
  overflow: visible !important;
}
#view-generate .gen-atomic-wrap {
  width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  background: linear-gradient(180deg, rgba(15,23,42,.80), rgba(6,10,22,.92)) !important;
  border: 1px solid rgba(125,211,252,.18) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
#view-generate .gen-result-image {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: min(64svh, 760px) !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}
#view-generate .gen-floating-actions {
  position: absolute !important;
  top: 1rem !important;
  right: max(-9rem, calc(-1 * min(9rem, 12vw))) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .65rem !important;
  z-index: 8 !important;
}
#view-generate .gen-float-btn {
  min-width: 112px !important;
  min-height: 42px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(125,211,252,.20) !important;
  background: rgba(13,18,31,.82) !important;
  color: #f8fbff !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07) !important;
  backdrop-filter: blur(18px) !important;
}
#view-generate .gen-float-btn:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(125,211,252,.44) !important;
  background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(129,140,248,.15), rgba(244,114,182,.10)) !important;
}
@media (max-width: 1020px) {
  #view-generate .gen-floating-actions {
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin-top: .85rem !important;
  }
}
@media (max-width: 767px) {
  #view-generate #single-result-container {
    padding-top: .85rem !important;
    padding-bottom: 19rem !important;
  }
  #view-generate .gen-result-wrapper {
    width: min(100%, calc(100vw - 1.25rem)) !important;
    max-width: min(100%, calc(100vw - 1.25rem)) !important;
  }
  #view-generate .gen-result-image {
    max-height: min(50svh, 520px) !important;
  }
  #view-generate .gen-float-btn {
    min-width: 0 !important;
    flex: 1 1 calc(50% - .5rem) !important;
  }
}

#view-replicate #rep-drop-zone.rep-dz-hidden,
#decon-main #rep-drop-zone.rep-dz-hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#view-replicate.active #rep-drop-zone.rep-dz-hidden,
#decon-main.active #rep-drop-zone.rep-dz-hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
#decon-main {
  background:
    radial-gradient(circle at 10% 0%, rgba(56,189,248,.12), transparent 30%),
    radial-gradient(circle at 92% 12%, rgba(129,140,248,.13), transparent 34%),
    linear-gradient(180deg, #050914 0%, #070a13 100%) !important;
}
#decon-main .rep-drop-zone,
#view-replicate #rep-drop-zone {
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#decon-main #rep-worker-range {
  height: 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(56,189,248,.9), rgba(129,140,248,.7), rgba(244,114,182,.65)) !important;
}
#decon-main #rep-pro-toggle,
#decon-main #rep-fx-toggle,
#decon-main #rep-run-btn,
#decon-main #rep-download-btn {
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), border-color .18s ease, filter .18s ease !important;
}
#decon-main #rep-pro-toggle:active,
#decon-main #rep-fx-toggle:active,
#decon-main #rep-run-btn:active,
#decon-main #rep-download-btn:active {
  transform: scale(.96) !important;
}
#decon-main .rep-card {
  border-color: rgba(125,211,252,.22) !important;
  background: linear-gradient(180deg, rgba(14,21,36,.94), rgba(6,10,21,.98)) !important;
}
#decon-main .rep-card-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#usc-main .usc-processing-cancel {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 5 !important;
}

/* v66 generator sizing correction: restore compact result cards instead of
   forcing every image into a wide preview. Aspect-specific widths mirror the
   original result card feel while keeping the fixed composer clear. */
#view-generate #single-result-container {
  padding-top: clamp(.75rem, 2.4vh, 1.8rem) !important;
  padding-bottom: clamp(18rem, 31vh, 23rem) !important;
}
#view-generate .gen-result-wrapper {
  width: min(440px, 88vw) !important;
  max-width: min(440px, calc(100vw - 2rem)) !important;
}
#view-generate .gen-result-wrapper[data-aspect="16:9"],
#view-generate .gen-result-wrapper[data-aspect="19.5:9"],
#view-generate .gen-result-wrapper[data-aspect="20:9"],
#view-generate .gen-result-wrapper[data-aspect="21:9"],
#view-generate .gen-result-wrapper[data-aspect="2:1"] {
  width: min(600px, 84vw) !important;
  max-width: min(600px, calc(100vw - 2rem)) !important;
}
#view-generate .gen-result-wrapper[data-aspect="4:3"],
#view-generate .gen-result-wrapper[data-aspect="3:2"],
#view-generate .gen-result-wrapper[data-aspect="5:4"] {
  width: min(520px, 84vw) !important;
  max-width: min(520px, calc(100vw - 2rem)) !important;
}
#view-generate .gen-result-wrapper[data-aspect="9:16"],
#view-generate .gen-result-wrapper[data-aspect="9:19.5"],
#view-generate .gen-result-wrapper[data-aspect="9:20"],
#view-generate .gen-result-wrapper[data-aspect="9:21"],
#view-generate .gen-result-wrapper[data-aspect="1:2"] {
  width: min(300px, 80vw) !important;
  max-width: min(300px, calc(100vw - 2rem)) !important;
}
#view-generate .gen-result-wrapper[data-aspect="3:4"],
#view-generate .gen-result-wrapper[data-aspect="2:3"],
#view-generate .gen-result-wrapper[data-aspect="4:5"] {
  width: min(360px, 82vw) !important;
  max-width: min(360px, calc(100vw - 2rem)) !important;
}
#view-generate .gen-result-image {
  max-height: min(39svh, 430px) !important;
}
#view-generate .gen-floating-actions {
  right: -8rem !important;
}
@media (max-width: 1020px) {
  #view-generate .gen-floating-actions {
    right: auto !important;
  }
}
@media (max-width: 767px) {
  #view-generate #single-result-container {
    padding-top: .5rem !important;
    padding-bottom: 19rem !important;
  }
  #view-generate .gen-result-image {
    max-height: min(36svh, 380px) !important;
  }
}

/* v67 final UI pass: solid brand, compact generator results, horizontal image actions. */
.ca-brand-name,
.home-stitch-brand,
.cat-main-brand .ca-brand-name,
.cat-header .ca-brand-name,
.cat-tools-brand .ca-brand-name {
  color:#fff !important;
  background:none !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:0 8px 28px rgba(125,211,252,.18) !important;
  letter-spacing:-.035em !important;
}

.home-stitch-header,
.cat-main-header {
  background:linear-gradient(180deg,rgba(4,8,18,.94),rgba(4,7,15,.90)) !important;
  border-bottom:1px solid rgba(125,211,252,.16) !important;
  box-shadow:0 12px 42px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.045) !important;
}

#view-home {
  background:
    radial-gradient(circle at 16% 0%,rgba(56,189,248,.13),transparent 28%),
    radial-gradient(circle at 82% 10%,rgba(129,140,248,.12),transparent 30%),
    radial-gradient(circle at 76% 92%,rgba(244,114,182,.08),transparent 32%),
    linear-gradient(180deg,#030712 0%,#070b16 52%,#040610 100%) !important;
}
#view-home .home-main-card,
#view-home .hm-tool-card,
#view-home .tool-card,
#view-home .ca-card {
  background:linear-gradient(180deg,rgba(16,23,39,.88),rgba(6,10,22,.96)) !important;
  border:1px solid rgba(125,211,252,.18) !important;
  box-shadow:0 22px 58px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.055) !important;
}
#view-home .hm-tool-card,
#view-home .tool-card {
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),border-color .2s ease,box-shadow .2s ease,background .2s ease !important;
}
#view-home .hm-tool-card:hover,
#view-home .tool-card:hover {
  transform:translateY(-5px) !important;
  border-color:rgba(125,211,252,.36) !important;
  box-shadow:0 30px 78px rgba(0,0,0,.38),0 0 36px rgba(56,189,248,.12),inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#view-home .hm-card-btn,
#view-home .tool-card a,
#view-home .card-btn {
  background:rgba(15,23,42,.72) !important;
  border:1px solid rgba(125,211,252,.22) !important;
  color:#f8fbff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
}
#view-home .hm-card-btn:hover,
#view-home .tool-card a:hover,
#view-home .card-btn:hover {
  background:linear-gradient(135deg,rgba(56,189,248,.32),rgba(129,140,248,.24),rgba(244,114,182,.18)) !important;
  border-color:rgba(125,211,252,.50) !important;
  transform:translateY(-2px) scale(1.02) !important;
}

#view-generate #single-result-container {
  padding-top:clamp(.75rem,2vh,1.4rem) !important;
  padding-bottom:clamp(17rem,29vh,22rem) !important;
}
#view-generate #single-result-container .gen-result-wrapper {
  position:relative !important;
  display:block !important;
  margin-inline:auto !important;
  border-radius:20px !important;
  overflow:hidden !important;
  background:rgba(8,13,26,.62) !important;
  box-shadow:0 26px 70px rgba(0,0,0,.42),0 0 0 1px rgba(125,211,252,.10) !important;
}
#view-generate #single-result-container .gen-result-image {
  display:block !important;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  border-radius:inherit !important;
}
#view-generate #single-result-container .gen-floating-actions {
  position:absolute !important;
  inset:auto 12px 12px auto !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  gap:8px !important;
  width:auto !important;
  max-width:min(92%,520px) !important;
  margin:0 !important;
  z-index:8 !important;
  pointer-events:auto !important;
}
#view-generate #single-result-container .gen-float-btn {
  min-width:42px !important;
  min-height:42px !important;
  width:auto !important;
  height:42px !important;
  padding:0 13px !important;
  border-radius:13px !important;
  background:rgba(4,8,18,.76) !important;
  border:1px solid rgba(226,232,240,.18) !important;
  color:#f8fbff !important;
  box-shadow:0 12px 28px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter:blur(18px) saturate(1.35) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35) !important;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),border-color .18s ease,background .18s ease !important;
}
#view-generate #single-result-container .gen-float-btn:hover {
  transform:translateY(-2px) scale(1.03) !important;
  background:rgba(14,23,43,.88) !important;
  border-color:rgba(125,211,252,.46) !important;
}
#view-generate #single-result-container .gen-float-btn:active {
  transform:scale(.94) !important;
}
@media (max-width: 767px) {
  #view-generate #single-result-container {
    padding-top:.5rem !important;
    padding-bottom:18rem !important;
  }
  #view-generate #single-result-container .gen-result-wrapper {
    width:min(92vw,420px) !important;
    max-width:calc(100vw - 1rem) !important;
  }
  #view-generate #single-result-container .gen-floating-actions {
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    justify-content:center !important;
    max-width:none !important;
  }
  #view-generate #single-result-container .gen-float-btn {
    flex:1 1 42px !important;
    padding-inline:8px !important;
  }
}

/* v68.1 mobile home drift fix: contain every animated home surface inside the
   viewport and disable horizontal shimmer transforms on narrow screens. */
@media (max-width: 767px) {
  html.home-page,
  html.home-page body,
  body.home-page {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
    touch-action: pan-y !important;
  }

  body.home-page #app-root,
  html.home-page #app-root,
  body.home-page #view-home,
  html.home-page #view-home,
  #view-home.active {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    left: 0 !important;
    right: 0 !important;
  }

  #view-home,
  #view-home .view-inner,
  #view-home .home-stitch-header,
  #view-home .home-main-card,
  #view-home .home-prompt-wrap,
  #view-home .home-prompt-gradient-border,
  #view-home .home-prompt-box,
  #view-home .hm-cards-section,
  #view-home .hm-cards-grid {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #view-home .home-prompt-wrap,
  #view-home .home-prompt-gradient-border,
  #view-home .home-prompt-box {
    width: 100% !important;
  }

  #view-home .home-prompt-gradient-border::before,
  #view-home .home-prompt-gradient-border::after,
  #view-home .hm-tool-card::before {
    animation: none !important;
    transform: none !important;
    background-position: 50% 50% !important;
    filter: none !important;
  }

  #view-home .home-hero-title,
  #view-home .home-hero-title-main,
  #view-home .home-hero-title-accent {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  #view-home .home-stitch-actions,
  #view-home .home-stitch-nav {
    max-width: calc(100vw - 28px) !important;
    min-width: 0 !important;
  }
}

/* v68.2 generate actions: keep download/share/edit/expand off the artwork. */
@media (min-width: 900px) {
  #view-generate #single-result-container .gen-result-wrapper {
    overflow: visible !important;
  }
  #view-generate #single-result-container .gen-floating-actions {
    position: fixed !important;
    inset: 30vh clamp(22px, 4.2vw, 76px) auto auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 156px !important;
    max-width: 156px !important;
    z-index: 45 !important;
  }
  #view-generate #single-result-container .gen-float-btn {
    width: 156px !important;
    min-width: 156px !important;
    height: 48px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    border-radius: 15px !important;
    background: rgba(7, 12, 25, .78) !important;
    border-color: rgba(125, 211, 252, .22) !important;
    box-shadow: 0 18px 38px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
}
@media (max-width: 899px) {
  #view-generate #single-result-container .gen-floating-actions {
    position: static !important;
    inset: auto !important;
    margin: 12px auto 0 !important;
    justify-content: center !important;
    width: min(100%, 440px) !important;
    max-width: min(100%, 440px) !important;
  }
}

/* v68.2 deconstruct upload + worker control polish. */
#decon-main .rep-drop-clean,
#view-replicate #rep-drop-zone.rep-drop-clean {
  min-height: clamp(180px, 26vw, 260px) !important;
  display: grid !important;
  place-items: center !important;
  padding: 28px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(125,211,252,.14), transparent 42%),
    linear-gradient(180deg, rgba(15,23,42,.78), rgba(7,10,19,.88)) !important;
  border: 1px solid rgba(125,211,252,.23) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
#decon-main .rep-drop-clean:hover,
#view-replicate #rep-drop-zone.rep-drop-clean:hover,
#decon-main .rep-drop-clean.drag-over {
  transform: translateY(-2px) !important;
  border-color: rgba(125,211,252,.50) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(125,211,252,.20), transparent 46%),
    linear-gradient(180deg, rgba(18,31,54,.82), rgba(7,10,19,.90)) !important;
}
#decon-main .rep-drop-clean-icon {
  color: #9bdcff !important;
  filter: drop-shadow(0 0 22px rgba(56,189,248,.32)) !important;
  opacity: .96 !important;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), color .18s ease !important;
}
#decon-main .rep-drop-clean:hover .rep-drop-clean-icon,
#decon-main .rep-drop-clean.drag-over .rep-drop-clean-icon {
  transform: translateY(-2px) scale(1.06) !important;
  color: #f8fbff !important;
}
#decon-main #rep-worker-range {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg,#38bdf8,#818cf8 52%,#f472b6) !important;
  outline: none !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35), 0 0 18px rgba(56,189,248,.14) !important;
}
#decon-main #rep-worker-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: #f8fbff !important;
  border: 3px solid #101827 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.38), 0 0 0 3px rgba(125,211,252,.22) !important;
  cursor: pointer !important;
}
#decon-main #rep-worker-range::-moz-range-thumb {
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: #f8fbff !important;
  border: 3px solid #101827 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.38), 0 0 0 3px rgba(125,211,252,.22) !important;
  cursor: pointer !important;
}
#decon-main .rep-view-toggle,
#decon-main .rep-grid-list-toggle,
#decon-main #rep-view-toggle {
  display: none !important;
}

/* v68.3 generate result actions: desktop stack lives outside the art/card. */
@media (min-width: 900px) {
  body.view-is-generate #view-generate #single-result-container {
    overflow: visible !important;
  }
  body.view-is-generate #view-generate #single-result-container .gen-result-wrapper {
    position: relative !important;
    overflow: visible !important;
    margin-inline: auto !important;
  }
  body.view-is-generate #view-generate #single-result-container .gen-floating-actions {
    position: absolute !important;
    inset: auto !important;
    top: 50% !important;
    left: calc(100% + clamp(24px, 3.4vw, 70px)) !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 156px !important;
    max-width: 156px !important;
    z-index: 60 !important;
    pointer-events: auto !important;
  }
  body.view-is-generate #view-generate #single-result-container .gen-float-btn {
    width: 156px !important;
    min-width: 156px !important;
    height: 50px !important;
    border-radius: 16px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 0 17px !important;
    background: rgba(5, 10, 23, .82) !important;
    border: 1px solid rgba(125, 211, 252, .26) !important;
    color: #f8fbff !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
  }
  body.view-is-generate #view-generate #single-result-container .gen-float-btn:hover {
    transform: translateX(4px) !important;
    border-color: rgba(125, 211, 252, .58) !important;
    background: linear-gradient(135deg, rgba(14, 22, 43, .94), rgba(16, 32, 62, .88)) !important;
  }
}
@media (min-width: 900px) and (max-width: 1260px) {
  body.view-is-generate #view-generate #single-result-container .gen-floating-actions {
    left: calc(100% + 18px) !important;
    width: 136px !important;
    max-width: 136px !important;
  }
  body.view-is-generate #view-generate #single-result-container .gen-float-btn {
    width: 136px !important;
    min-width: 136px !important;
    padding-inline: 14px !important;
  }
}
@media (max-width: 899px) {
  body.view-is-generate #view-generate #single-result-container .gen-floating-actions {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 12px auto 0 !important;
    width: min(100%, 440px) !important;
    max-width: min(100%, 440px) !important;
  }
}

/* v68.4 hard dock: generation actions stay outside every image/card on desktop. */
@media (min-width: 900px) {
  body.view-is-generate #view-generate #single-result-container .gen-floating-actions,
  #view-generate #single-result-container .gen-floating-actions {
    position: fixed !important;
    top: clamp(190px, 30vh, 360px) !important;
    right: clamp(24px, 4vw, 76px) !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 158px !important;
    max-width: 158px !important;
    z-index: 70 !important;
  }
  body.view-is-generate #view-generate #single-result-container .gen-float-btn,
  #view-generate #single-result-container .gen-float-btn {
    width: 158px !important;
    min-width: 158px !important;
  }
}

/* v68.4 replicate upload: a clean drop canvas, no nested-card look. */
#decon-main #rep-drop-zone.rep-drop-clean {
  min-height: clamp(220px, 31vw, 340px) !important;
  padding: 0 !important;
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 50% 2%, rgba(125,211,252,.16), transparent 40%),
    radial-gradient(circle at 84% 86%, rgba(129,140,248,.12), transparent 34%),
    linear-gradient(135deg, rgba(8,14,30,.72), rgba(7,10,20,.94)) !important;
  border: 1px dashed rgba(125,211,252,.36) !important;
  box-shadow: 0 30px 86px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.065) !important;
}
#decon-main #rep-drop-zone.rep-drop-clean::before,
#decon-main #rep-drop-zone.rep-drop-clean::after {
  display: none !important;
  content: none !important;
}
#decon-main #rep-drop-zone.rep-drop-clean .rep-drop-clean-icon {
  width: 76px !important;
  height: 76px !important;
  color: #b9ecff !important;
  filter: drop-shadow(0 0 28px rgba(56,189,248,.34)) !important;
}
#decon-main #rep-drop-zone.rep-drop-clean:hover .rep-drop-clean-icon,
#decon-main #rep-drop-zone.rep-drop-clean.drag-over .rep-drop-clean-icon {
  transform: translateY(-3px) scale(1.08) !important;
}
#decon-main #rep-worker-count {
  min-width: 54px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(125,211,252,.18), rgba(129,140,248,.12)) !important;
  border-color: rgba(125,211,252,.26) !important;
  color: #e0f2fe !important;
}

/* v68.5 final requested polish: home + replicate production pass. */
#view-home {
  background:
    radial-gradient(circle at 12% 4%, rgba(56,189,248,.13), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(236,72,153,.15), transparent 30%),
    radial-gradient(circle at 50% 72%, rgba(99,102,241,.09), transparent 32%),
    linear-gradient(180deg, #050711 0%, #070a14 48%, #090710 100%) !important;
}
#view-home .home-hero-title-main {
  color: #fff !important;
  text-shadow: 0 0 34px rgba(56,189,248,.18) !important;
}
#view-home .home-hero-title-accent {
  background: linear-gradient(92deg, #7dd3fc 0%, #c084fc 42%, #ff4fb7 78%, #f8fbff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: drop-shadow(0 0 24px rgba(236,72,153,.22)) !important;
}
#view-home .home-prompt-wrap {
  max-width: 790px !important;
}
#view-home .home-prompt-gradient-border {
  border-radius: 28px !important;
  padding: 1px !important;
  background:
    linear-gradient(135deg, rgba(125,211,252,.58), rgba(168,85,247,.38) 45%, rgba(244,114,182,.58)) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.45), 0 0 42px rgba(56,189,248,.12) !important;
}
#view-home .home-prompt-box {
  min-height: 172px !important;
  border-radius: 27px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(125,211,252,.11), transparent 35%),
    linear-gradient(180deg, rgba(15,23,42,.92), rgba(7,10,19,.96)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  overflow: hidden !important;
}
#view-home .home-prompt-box textarea {
  min-height: 108px !important;
  color: #f8fbff !important;
  font-weight: 500 !important;
}
#view-home .home-prompt-box > .flex {
  border-top: 1px solid rgba(148,163,184,.14) !important;
  background: rgba(8,13,26,.58) !important;
}
#view-home .home-prompt-tagline {
  color: rgba(203,213,225,.68) !important;
  letter-spacing: .16em !important;
}
#view-home .home-submit-arrow {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #22d3ee, #8b5cf6 52%, #f472b6) !important;
  color: #06101f !important;
  box-shadow: 0 16px 34px rgba(56,189,248,.24), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
#view-home .hm-cards-section {
  max-width: 1240px !important;
}
#view-home .hm-cards-grid {
  gap: 18px !important;
}
#view-home .hm-tool-card {
  min-height: 210px !important;
  border-radius: 22px !important;
  padding: 24px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(125,211,252,.13), transparent 38%),
    radial-gradient(circle at 90% 8%, rgba(244,114,182,.15), transparent 38%),
    linear-gradient(145deg, rgba(17,24,39,.84), rgba(5,8,18,.97)) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  box-shadow: 0 20px 54px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
#view-home .hm-tool-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.08) 48%, transparent 76%) !important;
  transform: translateX(-120%) skewX(-16deg) !important;
  transition: transform .65s cubic-bezier(.22,1,.36,1) !important;
  pointer-events: none !important;
}
#view-home .hm-tool-card:hover::before {
  transform: translateX(120%) skewX(-16deg) !important;
}
#view-home .hm-tool-card:hover {
  transform: translateY(-6px) scale(1.012) !important;
  border-color: rgba(244,114,182,.42) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,.45), 0 0 42px rgba(236,72,153,.14) !important;
}
#view-home .hm-card-icon {
  color: #9be8ff !important;
  background: rgba(125,211,252,.10) !important;
  border-color: rgba(125,211,252,.22) !important;
  box-shadow: 0 0 28px rgba(56,189,248,.12) !important;
}
#view-home .hm-card-subhead {
  background: linear-gradient(90deg, #7dd3fc, #c084fc, #fb7185) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
#view-home .hm-card-title {
  color: #f8fbff !important;
  letter-spacing: -.03em !important;
}
#view-home .hm-card-desc {
  color: rgba(219,229,255,.72) !important;
}
#view-home .hm-card-btn,
#view-home .hm-tool-card[data-rd="primary"] .hm-card-btn {
  background: rgba(255,255,255,.055) !important;
  color: #f8fbff !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}
#view-home .hm-tool-card:hover .hm-card-btn,
#view-home .hm-tool-card[data-rd="primary"]:hover .hm-card-btn {
  background: linear-gradient(135deg, rgba(34,211,238,.92), rgba(139,92,246,.95) 52%, rgba(244,114,182,.95)) !important;
  color: #06101f !important;
  box-shadow: 0 16px 36px rgba(244,114,182,.26) !important;
}

#view-replicate.active {
  background:
    radial-gradient(circle at 14% 0%, rgba(56,189,248,.15), transparent 31%),
    radial-gradient(circle at 88% 6%, rgba(244,114,182,.12), transparent 32%),
    linear-gradient(180deg, #050814 0%, #07101d 52%, #050711 100%) !important;
  color: #f8fbff !important;
}
#view-replicate > .max-w-7xl {
  max-width: 1240px !important;
  padding-top: max(6.25rem, calc(5.25rem + env(safe-area-inset-top))) !important;
}
#view-replicate h2 {
  color: #f8fbff !important;
  letter-spacing: -.055em !important;
}
#view-replicate h2 + p {
  color: rgba(203,213,225,.72) !important;
}
#view-replicate #rep-cost-badge {
  background: rgba(34,211,238,.10) !important;
  color: #b9ecff !important;
  border-color: rgba(125,211,252,.25) !important;
}
#view-replicate .rep-toggle-wrap,
#view-replicate .rep-worker-slider-card,
#view-replicate #rep-download-btn,
#view-replicate #rep-process-btn {
  min-height: 46px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(125,211,252,.18) !important;
  background: rgba(7,12,25,.74) !important;
  color: #f8fbff !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.07) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
}
#view-replicate .rep-worker-slider-card {
  display: grid !important;
  grid-template-columns: auto minmax(138px, 210px) 44px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 12px !important;
}
#view-replicate .rep-worker-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  line-height: 1 !important;
}
#view-replicate .rep-worker-label {
  color: #f8fbff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}
#view-replicate .rep-worker-meta {
  color: rgba(203,213,225,.52) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}
#view-replicate #rep-worker-range {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 8px !important;
  border-radius: 999px !important;
  border: 0 !important;
  outline: none !important;
  background: linear-gradient(90deg, #22d3ee, #8b5cf6 55%, #f472b6) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.42), 0 0 20px rgba(56,189,248,.13) !important;
}
#view-replicate #rep-worker-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: #f8fbff !important;
  border: 3px solid #091020 !important;
  box-shadow: 0 9px 24px rgba(0,0,0,.42), 0 0 0 4px rgba(125,211,252,.20) !important;
  cursor: pointer !important;
}
#view-replicate #rep-worker-range::-moz-range-thumb {
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: #f8fbff !important;
  border: 3px solid #091020 !important;
  box-shadow: 0 9px 24px rgba(0,0,0,.42), 0 0 0 4px rgba(125,211,252,.20) !important;
  cursor: pointer !important;
}
#view-replicate .rep-worker-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  height: 30px !important;
  border-radius: 999px !important;
  background: rgba(125,211,252,.12) !important;
  border: 1px solid rgba(125,211,252,.24) !important;
  color: #e0f2fe !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}
#view-replicate #rep-process-btn {
  padding: 0 18px !important;
  background: linear-gradient(135deg, #22d3ee, #8b5cf6 55%, #f472b6) !important;
  color: #06101f !important;
  border: 0 !important;
}
#view-replicate #rep-download-btn {
  padding: 0 16px !important;
}
#view-replicate #rep-view-toggle {
  display: none !important;
}
#view-replicate #rep-drop-zone {
  min-height: clamp(260px, 34vw, 420px) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin-bottom: 22px !important;
  border-radius: 34px !important;
  cursor: pointer !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(125,211,252,.18), transparent 42%),
    radial-gradient(circle at 86% 82%, rgba(244,114,182,.14), transparent 34%),
    linear-gradient(135deg, rgba(8,14,30,.82), rgba(5,8,18,.96)) !important;
  border: 1px dashed rgba(125,211,252,.38) !important;
  box-shadow: 0 32px 90px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.07) !important;
  overflow: hidden !important;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), border-color .2s ease, box-shadow .2s ease !important;
}
#view-replicate #rep-drop-zone::before,
#view-replicate #rep-drop-zone::after {
  display: none !important;
  content: none !important;
}
#view-replicate #rep-drop-zone:hover,
#view-replicate #rep-drop-zone.drag-over {
  transform: translateY(-3px) !important;
  border-color: rgba(244,114,182,.62) !important;
  box-shadow: 0 38px 110px rgba(0,0,0,.42), 0 0 52px rgba(56,189,248,.12) !important;
}
#view-replicate .rep-drop-zone-inner,
#view-replicate .rep-drop-zone-title,
#view-replicate .rep-drop-zone-sub,
#view-replicate .rep-drop-zone-types,
#view-replicate .rep-drop-zone-icon {
  display: none !important;
}
#view-replicate .rep-drop-clean-core {
  width: 92px !important;
  height: 92px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 26px !important;
  color: #dbf7ff !important;
  background: linear-gradient(135deg, rgba(125,211,252,.16), rgba(244,114,182,.10)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 0 42px rgba(56,189,248,.18), inset 0 1px 0 rgba(255,255,255,.10) !important;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), color .2s ease !important;
}
#view-replicate #rep-drop-zone:hover .rep-drop-clean-core,
#view-replicate #rep-drop-zone.drag-over .rep-drop-clean-core {
  transform: scale(1.07) rotate(-2deg) !important;
  color: #fff !important;
}
#view-replicate .rep-card {
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(15,23,42,.78), rgba(6,10,22,.96)) !important;
  border: 1px solid rgba(125,211,252,.20) !important;
  box-shadow: 0 22px 56px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06) !important;
  overflow: hidden !important;
}
#view-replicate .rep-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(244,114,182,.38) !important;
}
#view-replicate .rep-card-image,
#view-replicate .rep-card img {
  border-radius: 18px !important;
}
#view-replicate .rep-card-prompt-box {
  background: rgba(2,6,23,.54) !important;
  border: 1px solid rgba(148,163,184,.14) !important;
  color: rgba(226,232,240,.88) !important;
}
#view-replicate .rep-card-btn,
#view-replicate .rep-card button,
#view-replicate .rep-card .btn-spring {
  border-radius: 13px !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  color: #f8fbff !important;
}
#view-replicate .rep-card-btn-use,
#view-replicate .rep-card button:hover {
  background: linear-gradient(135deg, rgba(34,211,238,.90), rgba(244,114,182,.90)) !important;
  color: #06101f !important;
}
#view-replicate .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
@media (max-width: 760px) {
  #view-home .home-prompt-gradient-border {
    border-radius: 24px !important;
  }
  #view-home .home-prompt-box {
    min-height: 154px !important;
    border-radius: 23px !important;
  }
  #view-home .hm-cards-grid {
    grid-template-columns: 1fr !important;
  }
  #view-replicate > .max-w-7xl {
    padding-top: max(5.4rem, calc(4.4rem + env(safe-area-inset-top))) !important;
  }
  #view-replicate .rep-worker-slider-card {
    width: 100% !important;
    grid-template-columns: 1fr minmax(120px, 1.2fr) 40px !important;
  }
  #view-replicate #rep-drop-zone {
    min-height: 230px !important;
    border-radius: 26px !important;
  }
}

/* v68.7 homepage title clipping fix: keep the italic Deconstruct edge visible. */
#view-home .home-hero-title,
html.home-page #view-home .home-hero-title,
body.home-page #view-home .home-hero-title {
  overflow: visible !important;
  line-height: 1.04 !important;
  padding: 0 .22em .12em !important;
  max-width: min(100%, 1180px) !important;
}
#view-home .home-hero-title-main,
#view-home .home-hero-title-accent {
  display: block !important;
  overflow: visible !important;
}
#view-home .home-hero-title-accent {
  padding: 0 .18em .12em !important;
  margin-inline: auto !important;
  transform: translateZ(0) !important;
}
@media (max-width: 640px) {
  #view-home .home-hero-title {
    padding-inline: .12em !important;
    line-height: 1.08 !important;
  }
  #view-home .home-hero-title-accent {
    font-size: clamp(2.4rem, 12vw, 4rem) !important;
    padding-right: .22em !important;
  }
}

/* v69.1 global smoothness pass: restrained motion across primary site pages. */
:root {
  --ca-motion-fast: 160ms;
  --ca-motion-med: 260ms;
  --ca-motion-slow: 520ms;
  --ca-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

@keyframes caSoftEnter {
  from { opacity: 0; transform: translateY(10px) scale(.985); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  #view-home .home-stitch-header,
  #view-home .home-prompt-wrap,
  #view-home .hm-tool-card,
  #view-generate .gen-prompt-card,
  #view-generate .gen-empty-card,
  #view-plans .pricing-card,
  #view-plans .cost-table-card,
  .modal-sheet,
  .history-card,
  .acct-card,
  .ai-tool-card {
    animation: caSoftEnter var(--ca-motion-slow) var(--ca-motion-ease) both;
  }

  #view-home .hm-tool-card:nth-child(2),
  #view-plans .pricing-card:nth-child(2),
  .ai-tool-card:nth-child(2) { animation-delay: 45ms; }
  #view-home .hm-tool-card:nth-child(3),
  #view-plans .pricing-card:nth-child(3),
  .ai-tool-card:nth-child(3) { animation-delay: 90ms; }
  #view-home .hm-tool-card:nth-child(4),
  #view-plans .pricing-card:nth-child(4),
  .ai-tool-card:nth-child(4) { animation-delay: 135ms; }
  #view-home .hm-tool-card:nth-child(5),
  .ai-tool-card:nth-child(5) { animation-delay: 180ms; }
  #view-home .hm-tool-card:nth-child(6),
  .ai-tool-card:nth-child(6) { animation-delay: 225ms; }

  a,
  button,
  [role="button"],
  .btn-spring,
  .nav-link,
  .glass-pill,
  .glass-panel,
  .pricing-card,
  .hm-tool-card,
  .ai-tool-card,
  .gen-float-btn,
  .ca-paypal-btn,
  input,
  textarea,
  select {
    transition-duration: var(--ca-motion-med) !important;
    transition-timing-function: var(--ca-motion-ease) !important;
  }

  .hm-tool-card:hover,
  .ai-tool-card:hover,
  #view-plans .pricing-card:hover {
    transform: translateY(-3px) translateZ(0) !important;
  }
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(125, 211, 252, .72) !important;
  outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

/* v69.2 premium interaction system: glass actions, restrained motion, and payment readiness states. */
:root {
  --ca-motion-press: 120ms;
  --ca-motion-release: 260ms;
  --ca-motion-page: 520ms;
  --ca-motion-stagger: 40ms;
  --ca-motion-ease: cubic-bezier(.22, 1, .36, 1);
  --ca-glass-action-bg: linear-gradient(180deg, rgba(248,251,255,.155), rgba(125,211,252,.075) 52%, rgba(15,23,42,.24));
  --ca-glass-action-bg-hover: linear-gradient(180deg, rgba(248,251,255,.20), rgba(125,211,252,.12) 52%, rgba(15,23,42,.20));
  --ca-glass-action-border: rgba(125,211,252,.28);
  --ca-glass-action-border-strong: rgba(125,211,252,.52);
  --ca-focus-glow: 0 0 0 3px rgba(56,189,248,.18), 0 0 28px rgba(56,189,248,.16);
  --ca-card-radius: 22px;
  --ca-button-radius: 12px;
}

@keyframes caFadeUpOnce {
  from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes caToastIn {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes caToastOut {
  to { opacity: 0; transform: translate(-50%, 0); }
}

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

@keyframes caCreditPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(56,189,248,0); }
  50% { box-shadow: 0 0 0 5px rgba(56,189,248,.10), 0 0 24px rgba(56,189,248,.18); }
}

@keyframes caResultReveal {
  from { opacity: 0; filter: blur(8px); transform: scale(.992); }
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}

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

@keyframes caGlassSkeleton {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: no-preference) {
  .pricing-card,
  .hm-tool-card,
  .ai-tool-card,
  .history-card,
  .acct-card,
  .cost-table-card,
  .gen-prompt-card,
  .gen-empty-card {
    animation: caFadeUpOnce var(--ca-motion-page) var(--ca-motion-ease) both !important;
  }

  .pricing-card:nth-child(2),
  .hm-tool-card:nth-child(2),
  .ai-tool-card:nth-child(2),
  .history-card:nth-child(2),
  .acct-card:nth-child(2) { animation-delay: 40ms !important; }
  .pricing-card:nth-child(3),
  .hm-tool-card:nth-child(3),
  .ai-tool-card:nth-child(3),
  .history-card:nth-child(3),
  .acct-card:nth-child(3) { animation-delay: 80ms !important; }
  .pricing-card:nth-child(4),
  .hm-tool-card:nth-child(4),
  .ai-tool-card:nth-child(4),
  .history-card:nth-child(4),
  .acct-card:nth-child(4) { animation-delay: 120ms !important; }
  .hm-tool-card:nth-child(5),
  .ai-tool-card:nth-child(5),
  .history-card:nth-child(5),
  .acct-card:nth-child(5) { animation-delay: 160ms !important; }
  .hm-tool-card:nth-child(6),
  .ai-tool-card:nth-child(6),
  .history-card:nth-child(6),
  .acct-card:nth-child(6) { animation-delay: 200ms !important; }
  .hm-tool-card:nth-child(n+7),
  .ai-tool-card:nth-child(n+7),
  .history-card:nth-child(n+7),
  .acct-card:nth-child(n+7) { animation-delay: 240ms !important; }
}

.btn-spring,
button,
a,
[role="button"],
.nav-link,
.pricing-card,
.hm-tool-card,
.ai-tool-card,
.acct-card,
.history-card,
.ca-rzp-pay-btn,
.aip-razorpay-btn,
.ca-chip-btn,
.support-chat-send,
.ca-support-page-send,
input,
textarea,
select {
  transition-property: transform, opacity, background, border-color, box-shadow, color, filter !important;
  transition-duration: var(--ca-motion-release) !important;
  transition-timing-function: var(--ca-motion-ease) !important;
}

.btn-spring:hover,
button:hover,
[role="button"]:hover {
  transform: translateY(-1px) translateZ(0) !important;
}

.btn-spring:active,
button:active,
[role="button"]:active,
.ca-rzp-pay-btn:active,
.aip-razorpay-btn:active {
  transform: translateY(0) scale(.985) translateZ(0) !important;
  transition-duration: var(--ca-motion-press) !important;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(125,211,252,.74) !important;
  outline-offset: 3px !important;
  box-shadow: var(--ca-focus-glow) !important;
}

input:focus,
textarea:focus,
select:focus,
.ca-glass-input:focus,
.ca-support-page-input-wrap:focus-within,
.support-chat-input-row:focus-within {
  border-color: var(--ca-glass-action-border-strong) !important;
  box-shadow: var(--ca-focus-glow), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.modal-backdrop {
  opacity: 0;
  backdrop-filter: blur(0) !important;
  -webkit-backdrop-filter: blur(0) !important;
  transition: opacity var(--ca-motion-release) var(--ca-motion-ease), backdrop-filter var(--ca-motion-release) var(--ca-motion-ease) !important;
}

.modal-backdrop:not(.hidden) {
  opacity: 1;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.modal-sheet {
  border-radius: 24px !important;
  border: 1px solid rgba(125,211,252,.18) !important;
  background: linear-gradient(180deg, rgba(18,24,38,.96), rgba(7,10,18,.985)) !important;
  box-shadow: 0 34px 100px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.08) !important;
  transform: translateY(8px) scale(.98) !important;
  opacity: 0;
  transition: transform var(--ca-motion-release) var(--ca-motion-ease), opacity var(--ca-motion-release) var(--ca-motion-ease) !important;
}

.modal-backdrop:not(.hidden) .modal-sheet {
  transform: translateY(0) scale(1) !important;
  opacity: 1;
}

.nav-link {
  position: relative;
  overflow: hidden;
  border-radius: 999px !important;
  transition-duration: 180ms !important;
}

.nav-link::after {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 5px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(125,211,252,.95), rgba(96,165,250,.80)) !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  opacity: 0 !important;
  transition: transform 180ms var(--ca-motion-ease), opacity 180ms var(--ca-motion-ease) !important;
}

.nav-link.active::after,
.nav-link:hover::after {
  transform: scaleX(1) !important;
  opacity: .92 !important;
}

#nav-credit-pill,
#mob-credit-pill,
.credit-pill {
  position: relative !important;
  overflow: hidden !important;
  border-color: rgba(125,211,252,.24) !important;
  background: linear-gradient(180deg, rgba(30,41,59,.80), rgba(15,23,42,.72)) !important;
}

#nav-credit-pill::after,
#mob-credit-pill::after,
.credit-pill::after {
  content: "" !important;
  position: absolute !important;
  inset: -40% auto -40% -70% !important;
  width: 55% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent) !important;
  transform: skewX(-18deg) !important;
  transition: left 700ms var(--ca-motion-ease) !important;
}

#nav-credit-pill:hover::after,
#mob-credit-pill:hover::after,
.credit-pill:hover::after {
  left: 115% !important;
}

#nav-avatar,
#mob-avatar,
.support-chat-avatar,
.ca-support-page-avatar {
  transition: box-shadow var(--ca-motion-release) var(--ca-motion-ease), transform var(--ca-motion-release) var(--ca-motion-ease) !important;
}

#nav-credit-pill.ca-credit-updated #nav-avatar,
#mob-credit-pill.ca-credit-updated #mob-avatar,
.credit-pill.ca-credit-updated {
  animation: caCreditPulse 520ms var(--ca-motion-ease) both !important;
}

#view-plans .pricing-card {
  border-radius: var(--ca-card-radius) !important;
  border-color: rgba(125,211,252,.18) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06) !important;
  transform: translateY(0) !important;
}

#view-plans .pricing-card:hover {
  transform: translateY(-3px) translateZ(0) !important;
  border-color: rgba(125,211,252,.48) !important;
  box-shadow: 0 22px 66px rgba(0,0,0,.36), 0 0 30px rgba(56,189,248,.10), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

#view-plans .pricing-card--creator,
#view-plans .pricing-card.current-plan,
#view-plans .pricing-card.is-current-plan {
  border-color: rgba(125,211,252,.58) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.38), 0 0 0 1px rgba(125,211,252,.12), 0 0 36px rgba(56,189,248,.12) !important;
}

.ca-paypal-btn,
.ca-rzp-button-shell {
  position: relative !important;
  min-height: 44px !important;
  border-radius: 14px !important;
  overflow: visible !important;
}

.ca-paypal-btn:empty::before,
.ca-rzp-button-shell:not(.ca-rzp-ready)::before {
  content: "" !important;
  display: block !important;
  min-height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(125,211,252,.16) !important;
  background: linear-gradient(90deg, rgba(248,251,255,.08), rgba(125,211,252,.12), rgba(248,251,255,.08)) !important;
  background-size: 240% 100% !important;
  animation: caGlassSkeleton 1.2s var(--ca-motion-ease) infinite !important;
}

.ca-rzp-button-shell.ca-rzp-ready {
  animation: caActionFade 260ms var(--ca-motion-ease) both !important;
}

.ca-rzp-pay-btn,
.aip-razorpay-btn,
.is-loading,
.is-success,
.is-error {
  border-radius: var(--ca-button-radius) !important;
}

.ca-rzp-pay-btn,
.aip-razorpay-btn {
  background: var(--ca-glass-action-bg) !important;
  border-color: var(--ca-glass-action-border) !important;
  color: #f8fbff !important;
  min-height: 44px !important;
}

.ca-rzp-pay-btn:hover,
.aip-razorpay-btn:hover {
  background: var(--ca-glass-action-bg-hover) !important;
  border-color: var(--ca-glass-action-border-strong) !important;
}

.ca-rzp-pay-btn:disabled,
.aip-razorpay-btn:disabled,
button:disabled,
.is-disabled {
  cursor: not-allowed !important;
  opacity: .58 !important;
  transform: none !important;
  filter: saturate(.78) !important;
}

.ca-btn-spinner {
  width: 15px !important;
  height: 15px !important;
  border-radius: 999px !important;
  border: 2px solid rgba(255,255,255,.28) !important;
  border-top-color: currentColor !important;
  animation: caBtnSpin .72s linear infinite !important;
  flex: 0 0 auto !important;
}

.is-loading {
  pointer-events: none !important;
}

.is-success {
  border-color: rgba(52,211,153,.42) !important;
  background: linear-gradient(180deg, rgba(52,211,153,.22), rgba(20,184,166,.12)) !important;
  color: #d1fae5 !important;
}

.is-error {
  border-color: rgba(248,113,113,.42) !important;
  background: linear-gradient(180deg, rgba(248,113,113,.16), rgba(127,29,29,.12)) !important;
  color: #fecaca !important;
}

.ca-rzp-error {
  margin-top: 9px !important;
  color: #fecaca !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  text-align: center !important;
  opacity: .88 !important;
  animation: caActionFade 220ms var(--ca-motion-ease) both !important;
}

.ca-rzp-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 8px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(125,211,252,.22) !important;
  background: rgba(125,211,252,.075) !important;
  color: #bae6fd !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  animation: caActionFade 260ms var(--ca-motion-ease) both !important;
}

.ca-toast,
.ca-toast.success,
.ca-toast.error,
.ca-toast.info,
.ca-toast.gift,
.ca-toast.prompt-rejected {
  top: 18px !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translate(-50%, 0) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(8,13,24,.96)) !important;
  color: #f8fbff !important;
  border: 1px solid rgba(125,211,252,.20) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  animation: caToastIn 260ms var(--ca-motion-ease) both !important;
}

.ca-toast.error,
.ca-toast.prompt-rejected {
  border-color: rgba(248,113,113,.26) !important;
}

.ca-toast.success,
.ca-toast.gift {
  border-color: rgba(52,211,153,.26) !important;
}

#ca-support-chat {
  transform: translateY(10px) scale(.985) !important;
  opacity: 0 !important;
  transition: transform var(--ca-motion-release) var(--ca-motion-ease), opacity var(--ca-motion-release) var(--ca-motion-ease), border-color var(--ca-motion-release) var(--ca-motion-ease) !important;
}

#ca-support-chat.open,
#ca-support-chat.active,
#ca-support-chat[style*="display: block"],
#ca-support-chat[style*="display:block"] {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
}

.support-chat-messages > *,
.ca-support-page-messages > * {
  animation: caActionFade 240ms var(--ca-motion-ease) both !important;
}

.support-chat-send,
.ca-support-page-send,
.ca-chip-btn {
  background: var(--ca-glass-action-bg) !important;
  border: 1px solid var(--ca-glass-action-border) !important;
  color: #f8fbff !important;
  border-radius: var(--ca-button-radius) !important;
}

.support-chat-send:hover,
.ca-support-page-send:hover,
.ca-chip-btn:hover {
  background: var(--ca-glass-action-bg-hover) !important;
  border-color: var(--ca-glass-action-border-strong) !important;
}

.hm-tool-card:hover,
.ai-tool-card:hover,
.acct-card:hover,
.history-card:hover {
  transform: translateY(-3px) translateZ(0) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.28), 0 0 22px rgba(56,189,248,.08) !important;
}

.acct-tabs button,
.account-tab,
.ca-account-tab {
  position: relative !important;
}

.acct-tabs button::after,
.account-tab::after,
.ca-account-tab::after {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 2px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: rgba(125,211,252,.86) !important;
  transform: scaleX(0) !important;
  transition: transform var(--ca-motion-release) var(--ca-motion-ease) !important;
}

.acct-tabs button.active::after,
.account-tab.active::after,
.ca-account-tab.active::after {
  transform: scaleX(1) !important;
}

.empty-state,
.ca-empty-state,
.history-empty,
.uploads-empty,
.friends-empty,
.rewards-empty {
  border-radius: var(--ca-card-radius) !important;
  border: 1px solid rgba(125,211,252,.14) !important;
  background: rgba(15,23,42,.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.empty-state svg,
.ca-empty-state svg,
.history-empty svg,
.uploads-empty svg,
.friends-empty svg,
.rewards-empty svg {
  opacity: .46 !important;
  filter: drop-shadow(0 0 18px rgba(56,189,248,.18)) !important;
}

.atomic-reveal-img,
.gen-result-image {
  animation: caResultReveal 500ms var(--ca-motion-ease) both !important;
}

#view-generate .gen-floating-actions {
  animation: caActionFade 360ms var(--ca-motion-ease) 150ms both !important;
}

@media (max-width: 767px) {
  #view-generate #single-result-container .gen-floating-actions {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    transform: none !important;
    border-radius: 18px !important;
    animation: caActionFade 320ms var(--ca-motion-ease) both !important;
  }
}

.home-hero-bg,
.home-stitch-bg,
.gen-ambient-layer {
  animation-duration: 24s !important;
}

body:has(.modal-backdrop:not(.hidden)) .home-hero-bg,
body:has(.modal-backdrop:not(.hidden)) .home-stitch-bg,
body:has(.modal-backdrop:not(.hidden)) .gen-ambient-layer,
body:has(.modal-backdrop:not(.hidden)) #gen-particle-canvas {
  animation-play-state: paused !important;
}

.will-animate,
.is-loading,
.ca-rzp-pay-btn.is-loading,
.aip-razorpay-btn.is-loading,
.atomic-reveal-img {
  will-change: transform, opacity !important;
}

.ca-page-loader,
#ca-page-loader {
  opacity: 1;
  transition: opacity var(--ca-motion-release) var(--ca-motion-ease) !important;
}

.ca-loader-hide,
#ca-page-loader.ca-loader-hide {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .pricing-card,
  .hm-tool-card,
  .ai-tool-card,
  .history-card,
  .acct-card,
  .cost-table-card,
  .gen-prompt-card,
  .gen-empty-card,
  .modal-backdrop,
  .modal-sheet,
  .ca-toast,
  .atomic-reveal-img,
  .gen-result-image,
  #ca-support-chat {
    animation: none !important;
    transition-duration: .001ms !important;
    transform: none !important;
    filter: none !important;
  }
}

/* v69.3 generated output, prompt focus, support chat, and aspect-ratio cleanup. */
#view-generate #single-result-container {
  overflow: visible !important;
}

#view-generate #single-result-container .gen-result-wrapper {
  overflow: visible !important;
  isolation: isolate !important;
}

@media (min-width: 1024px) {
  body.view-is-generate #view-generate #single-result-container .gen-floating-actions,
  #view-generate #single-result-container .gen-floating-actions {
    position: absolute !important;
    top: 0 !important;
    left: calc(100% + 18px) !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 142px !important;
    max-width: 142px !important;
    margin: 0 !important;
    z-index: 35 !important;
  }

  body.view-is-generate #view-generate #single-result-container .gen-float-btn,
  #view-generate #single-result-container .gen-float-btn {
    width: 142px !important;
    min-width: 142px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    border-radius: 13px !important;
    background: rgba(7, 13, 28, .78) !important;
    border: 1px solid rgba(125, 211, 252, .24) !important;
    color: #f8fbff !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(18px) saturate(1.28) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.28) !important;
  }

  body.view-is-generate #view-generate #single-result-container .gen-float-btn:hover,
  #view-generate #single-result-container .gen-float-btn:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(125, 211, 252, .52) !important;
    background: rgba(12, 23, 44, .88) !important;
  }

  #view-generate #single-result-container .gen-float-btn-expand { order: 1 !important; }
  #view-generate #single-result-container .gen-float-btn-download { order: 2 !important; }
  #view-generate #single-result-container .gen-float-btn-share { order: 3 !important; }
  #view-generate #single-result-container .gen-float-btn-edit { order: 4 !important; }
}

@media (min-width: 1024px) and (max-width: 1320px) {
  body.view-is-generate #view-generate #single-result-container .gen-floating-actions,
  #view-generate #single-result-container .gen-floating-actions {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: min(100%, 620px) !important;
    max-width: min(100%, 620px) !important;
    margin: 14px auto 0 !important;
  }

  body.view-is-generate #view-generate #single-result-container .gen-float-btn,
  #view-generate #single-result-container .gen-float-btn {
    width: auto !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
}

@media (max-width: 1023px) {
  body.view-is-generate #view-generate #single-result-container .gen-floating-actions,
  #view-generate #single-result-container .gen-floating-actions {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: min(100%, 440px) !important;
    max-width: min(100%, 440px) !important;
    margin: 12px auto 0 !important;
  }

  #view-generate #single-result-container .gen-float-btn {
    width: auto !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
}

#view-generate #gen-prompt-card:focus-within,
#view-generate .gen-prompt-card:focus-within,
#view-generate .ca-prompt-bar:focus-within,
#view-home .home-prompt-gradient-border:focus-within,
#view-home .home-prompt-box:focus-within,
.rep-card-prompt-box:focus-within,
.support-chat-input-row:focus-within,
.ca-support-page-input-wrap:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

#gen-prompt:focus,
#gen-prompt:focus-visible,
#ca-chat-input:focus,
#ca-chat-input:focus-visible,
#ca-support-page-input:focus,
#ca-support-page-input:focus-visible,
.rep-card-prompt-box textarea:focus,
.rep-card-prompt-box textarea:focus-visible,
#view-home .home-prompt-box textarea:focus,
#view-home .home-prompt-box textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

#view-home .home-prompt-gradient-border:focus-within::after {
  opacity: .38 !important;
  filter: blur(8px) !important;
}

#view-home .home-prompt-gradient-border:focus-within::before {
  opacity: .78 !important;
}

#ca-support-btn {
  width: 58px !important;
  height: 58px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 35% 22%, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(145deg, rgba(37,99,235,.95), rgba(14,165,233,.88)) !important;
  border: 1px solid rgba(191, 219, 254, .42) !important;
  color: #fff !important;
  box-shadow: 0 20px 48px rgba(37,99,235,.40), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

#ca-support-btn svg,
#ca-support-btn [data-lucide] {
  color: #fff !important;
  stroke: currentColor !important;
}

#ca-support-chat {
  background:
    radial-gradient(circle at 12% 0%, rgba(56,189,248,.16), transparent 34%),
    linear-gradient(180deg, rgba(10, 17, 33, .97), rgba(5, 8, 18, .985)) !important;
  border: 1px solid rgba(125, 211, 252, .22) !important;
  border-radius: 26px !important;
  color: #f8fbff !important;
  overflow: hidden !important;
  box-shadow: 0 34px 90px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(22px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;
}

#ca-support-chat .support-chat-header {
  background: rgba(8, 14, 28, .84) !important;
  border-bottom: 1px solid rgba(125, 211, 252, .14) !important;
}

#ca-support-chat .support-chat-header > div:nth-child(2) > div:first-child {
  color: #f8fbff !important;
}

#ca-support-chat .support-chat-header > div:nth-child(2) > div:nth-child(2) {
  color: #6ee7b7 !important;
}

#ca-support-chat .support-chat-header button {
  color: rgba(248, 251, 255, .78) !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
}

#ca-support-chat .support-chat-messages {
  background: rgba(3, 7, 18, .36) !important;
}

#ca-support-chat .chat-msg,
#view-support .chat-msg {
  color: #f8fbff !important;
  border: 1px solid rgba(226, 232, 240, .12) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.20) !important;
}

#ca-support-chat .chat-msg.admin,
#view-support .chat-msg.admin {
  background: rgba(15, 23, 42, .82) !important;
}

#ca-support-chat .chat-msg.user,
#view-support .chat-msg.user {
  background: linear-gradient(135deg, rgba(14,165,233,.28), rgba(59,130,246,.22)) !important;
  border-color: rgba(125, 211, 252, .30) !important;
}

#ca-chat-chips,
.ca-support-chips-row {
  background: rgba(5, 10, 22, .92) !important;
  border-top: 1px solid rgba(125, 211, 252, .14) !important;
}

.ca-support-chips-label {
  color: rgba(226, 232, 240, .72) !important;
}

.ca-chip-btn {
  min-height: 36px !important;
  background: rgba(15, 23, 42, .88) !important;
  color: #f8fbff !important;
  border-color: rgba(125, 211, 252, .26) !important;
  text-shadow: none !important;
  opacity: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.ca-chip-btn:hover {
  background: rgba(20, 35, 61, .96) !important;
  color: #fff !important;
}

.support-chat-input-row {
  background: rgba(4, 8, 18, .94) !important;
  border-top: 1px solid rgba(125, 211, 252, .14) !important;
}

#ca-chat-input,
#ca-support-page-input {
  background: rgba(15, 23, 42, .88) !important;
  border: 1px solid rgba(125, 211, 252, .22) !important;
  color: #f8fbff !important;
  caret-color: #7dd3fc !important;
}

#ca-chat-input::placeholder,
#ca-support-page-input::placeholder {
  color: rgba(226, 232, 240, .56) !important;
}

.support-chat-send,
.ca-support-page-send {
  min-width: 44px !important;
  min-height: 44px !important;
  background: linear-gradient(145deg, rgba(34, 211, 238, .92), rgba(96, 165, 250, .86)) !important;
  border: 1px solid rgba(191, 219, 254, .44) !important;
  color: #03111f !important;
  box-shadow: 0 14px 30px rgba(56,189,248,.24), inset 0 1px 0 rgba(255,255,255,.34) !important;
}

.support-chat-send svg,
.ca-support-page-send svg {
  color: #03111f !important;
  stroke: currentColor !important;
}

#ar-popup {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9998 !important;
  color: #f8fbff !important;
}

#ar-popup .ar-popup-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(2, 6, 23, .70) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
}

#ar-popup .ar-popup-content {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(1) !important;
  width: min(760px, calc(100vw - 32px)) !important;
  max-height: min(82svh, 660px) !important;
  overflow: auto !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(56,189,248,.18), transparent 32%),
    radial-gradient(circle at 92% 18%, rgba(244,114,182,.10), transparent 28%),
    linear-gradient(180deg, rgba(13, 20, 37, .97), rgba(5, 8, 18, .985)) !important;
  border: 1px solid rgba(125, 211, 252, .24) !important;
  box-shadow: 0 40px 110px rgba(0,0,0,.64), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

#ar-popup .ar-popup-header {
  min-height: 70px !important;
  padding: 18px 22px !important;
  border-bottom: 1px solid rgba(125, 211, 252, .14) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#ar-popup .ar-popup-title {
  color: #f8fbff !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
}

#ar-popup .ar-popup-close {
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  color: #e2e8f0 !important;
}

#ar-popup .ar-popup-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 18px 22px 22px !important;
}

#ar-popup .ar-option {
  min-height: 92px !important;
  border-radius: 18px !important;
  background: rgba(15, 23, 42, .68) !important;
  border: 1px solid rgba(125, 211, 252, .15) !important;
  color: rgba(226, 232, 240, .76) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#ar-popup .ar-option:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(125, 211, 252, .42) !important;
  background: rgba(20, 32, 56, .86) !important;
}

#ar-popup .ar-option.active {
  color: #f8fbff !important;
  border-color: rgba(125, 211, 252, .68) !important;
  background: linear-gradient(180deg, rgba(14, 165, 233, .22), rgba(59, 130, 246, .12)) !important;
  box-shadow: 0 0 0 1px rgba(125,211,252,.16), 0 18px 40px rgba(56,189,248,.12), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

#ar-popup .ar-icon-wrap,
#ar-popup .ar-icon-inner {
  color: currentColor !important;
  border-color: rgba(226, 232, 240, .28) !important;
  background: rgba(255, 255, 255, .05) !important;
}

#ar-popup .ar-label {
  color: currentColor !important;
  font-size: .74rem !important;
  font-weight: 800 !important;
}

#view-generate #single-result-container .gen-float-btn-expand { order: 1 !important; }
#view-generate #single-result-container .gen-float-btn-download { order: 2 !important; }
#view-generate #single-result-container .gen-float-btn-share { order: 3 !important; }
#view-generate #single-result-container .gen-float-btn-edit { order: 4 !important; }

@media (max-width: 760px) {
  #ar-popup .ar-popup-content {
    top: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 20px) !important;
    max-height: min(78svh, 620px) !important;
    border-radius: 24px !important;
  }

  #ar-popup .ar-popup-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding: 14px !important;
    gap: 8px !important;
  }

  #ar-popup .ar-option {
    min-height: 82px !important;
    border-radius: 16px !important;
  }
}

/* v69.4 final theme pass: stable home nav, softer home actions, chat support icon. */
body.home-page #ca-page-loader,
html.home-page #ca-page-loader,
body.home-page .ca-page-loader,
html.home-page .ca-page-loader {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.home-page #view-home,
html.home-page #view-home,
#view-home.active {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  min-height: 100svh !important;
  overflow-x: hidden !important;
}

body.home-page #view-home .home-stitch-header,
html.home-page #view-home .home-stitch-header,
body.home-page #view-home .home-main-card,
html.home-page #view-home .home-main-card {
  transform: none !important;
  transition-property: opacity, border-color, background, box-shadow !important;
}

#view-home .hm-card-btn,
#view-home .hm-tool-card[data-rd="primary"] .hm-card-btn,
#view-home .hm-tool-card:hover .hm-card-btn,
#view-home .hm-tool-card[data-rd="primary"]:hover .hm-card-btn {
  background:
    radial-gradient(circle at 22% 15%, rgba(255,255,255,.14), transparent 34%),
    linear-gradient(135deg, rgba(125,211,252,.18), rgba(59,130,246,.11)) !important;
  border: 1px solid rgba(125,211,252,.28) !important;
  color: #e0f2fe !important;
  box-shadow: 0 10px 24px rgba(56,189,248,.10), inset 0 1px 0 rgba(255,255,255,.12) !important;
  text-shadow: none !important;
  filter: none !important;
}

#view-home .hm-card-btn::after {
  display: none !important;
}

#view-home .home-stitch-cta,
#view-home .home-stitch-cta:hover {
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(135deg, rgba(125,211,252,.20), rgba(129,140,248,.13)) !important;
  border: 1px solid rgba(125,211,252,.30) !important;
  color: #f8fbff !important;
  box-shadow: 0 12px 28px rgba(56,189,248,.11), inset 0 1px 0 rgba(255,255,255,.14) !important;
}

#ca-support-btn {
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.30), transparent 34%),
    linear-gradient(145deg, rgba(34,211,238,.95), rgba(59,130,246,.90)) !important;
  border-color: rgba(191,219,254,.50) !important;
}

#ca-support-btn svg,
#ca-support-chat .support-chat-avatar svg,
#view-support .ca-support-page-avatar svg {
  stroke-width: 2.25 !important;
  color: #fff !important;
  stroke: currentColor !important;
}

#ca-support-chat .support-chat-avatar,
#view-support .ca-support-page-avatar {
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(145deg, rgba(34,211,238,.90), rgba(59,130,246,.84)) !important;
  border-color: rgba(191,219,254,.38) !important;
  box-shadow: 0 12px 28px rgba(56,189,248,.20), inset 0 1px 0 rgba(255,255,255,.20) !important;
}

#ca-chat-input:focus,
#ca-chat-input:focus-visible,
#ca-support-page-input:focus,
#ca-support-page-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* v69.4.1: hero Deconstruct stays crisp, no white/glow wash over the word. */
#view-home .home-hero-title-accent,
html.home-page #view-home .home-hero-title-accent,
body.home-page #view-home .home-hero-title-accent {
  filter: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

#view-home .home-hero-title-accent::before,
#view-home .home-hero-title-accent::after,
html.home-page #view-home .home-hero-title-accent::before,
html.home-page #view-home .home-hero-title-accent::after,
body.home-page #view-home .home-hero-title-accent::before,
body.home-page #view-home .home-hero-title-accent::after {
  display: none !important;
  content: none !important;
}

/* v69.5 production pricing: static plan cards, no generation cost box, no button motion. */
#view-plans .cost-table-card {
  display: none !important;
}

#view-plans *,
#view-plans *::before,
#view-plans *::after {
  animation: none !important;
  transition: none !important;
}

#view-plans .pricing-card,
#view-plans .pricing-card:hover,
#view-plans .pricing-card--creator,
#view-plans .pricing-card.current-plan,
#view-plans .pricing-card.is-current-plan {
  transform: none !important;
}

#view-plans .ca-paypal-btn:empty::before,
#view-plans .ca-rzp-button-shell:not(.ca-rzp-ready)::before,
#view-plans .ca-rzp-button-shell.ca-rzp-ready,
#view-plans .ca-rzp-error,
#view-plans .ca-rzp-badge,
#view-plans .ca-btn-spinner {
  animation: none !important;
}

#view-plans .ca-rzp-pay-btn,
#view-plans .aip-razorpay-btn,
#view-plans .ca-rzp-pay-btn:hover,
#view-plans .aip-razorpay-btn:hover {
  transform: none !important;
  transition: none !important;
  filter: none !important;
}

/* v69.5 home hero: remove every remaining glow layer from the Deconstruct word. */
#view-home .home-hero-title-accent,
html.home-page #view-home .home-hero-title-accent,
body.home-page #view-home .home-hero-title-accent {
  filter: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

#view-home .home-hero-title-accent *,
#view-home .home-hero-title-accent::before,
#view-home .home-hero-title-accent::after,
html.home-page #view-home .home-hero-title-accent::before,
html.home-page #view-home .home-hero-title-accent::after,
body.home-page #view-home .home-hero-title-accent::before,
body.home-page #view-home .home-hero-title-accent::after {
  filter: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}