/* ═══════════════════════════════════════════════════════════════════
   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: #09090d;
  --rd-bg-2: #0d0b10;
  --rd-bg-3: #060608;
  --rd-panel: #15151d;
  --rd-panel-2: #1c1c25;
  --rd-ink: #f7f2ea;
  --rd-muted: #aaa49b;
  --rd-quiet: #746d65;
  --rd-line: rgba(255, 255, 255, 0.09);
  --rd-line-2: rgba(255, 255, 255, 0.15);
  --rd-red: #f43f5e;
  --rd-red-2: #be123c;
  --rd-red-3: #fb7185;
  --rd-red-soft: rgba(244, 63, 94, 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;
}

/* 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; }

/* PayPal button — wrap in dark frame so the iframe blends */
#view-plans .ca-paypal-btn {
  width: 100% !important;
  min-height: 2.75rem !important;
  border-radius: 10px !important;
  padding: 6px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--rd-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: border-color 0.18s ease, background 0.18s ease;
}
#view-plans .ca-paypal-btn:hover {
  border-color: rgba(244, 63, 94, 0.35) !important;
  background: rgba(244, 63, 94, 0.06) !important;
}
#view-plans .ca-paypal-btn iframe {
  border-radius: 8px !important;
  background: white;
}

/* 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(244, 63, 94, 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: #fff7ed !important;
  text-shadow: 0 24px 70px rgba(0, 0, 0, 0.46) !important;
}
#view-home .home-hero-title-accent {
  color: #fb7185 !important;
  font-style: italic !important;
  text-shadow: 0 18px 56px rgba(244, 63, 94, 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;
  }
}