/* ============================================================================
   Selira v2 look (2026-09-21): warmer, more playful, still focused.
   ----------------------------------------------------------------------------
   Design: https://claude.ai/artifact/WsApWpT9YzUvJgjPrvcN44 (variant A)

   An overlay on the existing pages (index, create, chat, generate). It changes
   colour, type and light only: no sizes, grids or positions, so nothing moves.
   Every rule is prefixed with `html` to outrank the pages' own inline <style>
   blocks by one element, whatever order they load in. `!important` is only
   used where the page sets the value inline or with its own !important.

   The palette: black, white and Selira pink stay. Three accents, one job each:
     Pink    #EC4899  action: buttons, the active page, the selected chip.
                      Always WHITE text, on a pink-to-deeper-pink gradient
                      (#EC4899 -> #D61F7A); flat pink only reaches ~3.5:1.
     Butter  #FFD166  rewards: credits, the daily gift, NEW badges. Black text.
     Violet  #A78BFA  mood: the image button, typing, memories. Black text.
   Orchid #CE93D8 is the logo's colour and nothing else's any more; until now
   it was also --accent, which is why every button on the site was orchid.

   Spark: primary actions glow, page titles end in a two-star sparkle, and a
   soft pink/violet light sits at the top of every page.
   ========================================================================== */

html:root {
  --accent: #ec4899;
  --accent-hover: #d61f7a;
  --accent-secondary: #ec4899;
  --glow-accent: rgba(236, 72, 153, 0.22);
  --success: #ec4899;
  --bg-secondary: #161216;
  --bg-tertiary: #221c22;
  --bg-sidebar: #110e11;
  --border: #2c252c;
  --border-color: #2c252c;
  --text-secondary: #b3aab3;
  --text-muted: #8f858f;

  --sv2-pink: linear-gradient(135deg, #ec4899 0%, #d61f7a 100%);
  --sv2-glow: 0 6px 22px rgba(236, 72, 153, 0.45);
  --sv2-glow-hover: 0 8px 30px rgba(236, 72, 153, 0.6);
  --sv2-butter: #ffd166;
  --sv2-violet: #a78bfa;
  --sv2-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --sv2-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Two stars, butter and pink: the sparkle that signs a page title. */
  --sv2-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 30'%3E%3Cpath d='M12 6C12.6 12.5 15.5 15.4 22 16C15.5 16.6 12.6 19.5 12 26C11.4 19.5 8.5 16.6 2 16C8.5 15.4 11.4 12.5 12 6Z' fill='%23ffd166'/%3E%3Cpath d='M28 0C28.3 3.2 29.8 4.7 33 5C29.8 5.3 28.3 6.8 28 10C27.7 6.8 26.2 5.3 23 5C26.2 4.7 27.7 3.2 28 0Z' fill='%23ec4899'/%3E%3C/svg%3E");
}

/* ── Type ────────────────────────────────────────────────────────────────── */
html body { font-family: var(--sv2-body); }
html button, html input, html textarea, html select { font-family: inherit; }

html .header-top .hero-header-text h1,
html .character-name,
html .seo-section h2, html .seo-section h3,
html .pricing-title, html .plan-name, html .feed-card-title,
html .livecam-banner-title, html .story-gate-title, html .sale-promo-title,
html .footer-column h4,
html .character-name-header, html .recent-chats-head, html .welcome-message h3,
html .video-intro-box h3, html .modal-header h3, html .chat-settings-head h3,
html .bm-header h3, html .bm-card-name, html .image-upgrade-title, html .report-modal-title,
html .creation-step h3, html .creation-step h4,
html .page-title, html .gp-title, html .gp-picker-head h2, html .gp-notfound h1,
html .section-title, html .faq-title, html .about-title, html .cta-section h2,
html .nsfw-blur-overlay-text, html .sidebar-promo-title, html .sidebar-promo-discount,
html .sale-promo-discount, html .cdm-head h3, html .milestone-number, html .bm-card-amount,
html .wt-tip h4,
/* the rest of the site: SEO pages, blog/news, pricing, profile, live cam… */
html h1, html h2,
html .seo-hero h1, html .header-top .hero-header-text .header-title, html .deal-title,
html .article-title, html .article-body h2, html .blog-title, html .blog-featured h2,
html .blog-card h3, html .blog-cta h2, html .empty-state h3, html .error-state h3,
html .hero-content h1, html .contact-title, html .success-title, html .remove-modal h3,
html .mobile-header-title, html .profile-card h3, html .cp-veil-title, html .cp-notfound h1,
html .cp-name, html .cp-h2, html .commission-percent, html .step-number, html .desk-detail-name,
html .desk-detail-price .dp-amount, html .desk-plan-row .dpr-amount, html .valentines-promo-title,
html .cancel-confirm-title, html .retention-warning-title, html .create-header h2,
html .rw-member-txt strong, html .live-header h1, html .character-chip .name,
html .actions-header h2, html .upgrade-banner .upgrade-text strong, html .upgrade-modal h2,
html .livecam-card-name {
  font-family: var(--sv2-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  letter-spacing: -0.005em;
}

/* Explicit Inter on controls. */
html .gp-mode-btn, html .gp-slot, html .gp-q, html .gp-btn, html .gp-chip, html .gp-dice,
html .gp-more, html .gp-picker-clear, html .gp-promptbox textarea, html .gp-lb-dl,
html .chat-header-entry, html .scenario-chip, html .scenario-card, html .msg-continue-btn,
html .bm-card-cta, html .bm-cancel-checkout, html .video-intro-actions button,
html .sidebar-promo-timer, html .story-btn, html .nsfw-blur-overlay-btn {
  font-family: var(--sv2-body);
}

/* Headings that carry Playfair in an inline style (h2s on the homepage, the
   sale label in the chat sidebar). The logo is excluded by its class. */
html [style*="Playfair Display"]:not(.sidebar-logo-text):not(.mobile-logo):not(.mobile-menu-logo) {
  font-family: var(--sv2-display) !important;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
}

/* The logo keeps its own face and orchid colour. It read var(--accent), which
   is now pink, so it is pinned here. */
html .sidebar-logo-text, html .mobile-logo, html .mobile-menu-logo,
html .footer-brand .sidebar-logo-text {
  font-family: 'Playfair Display', serif !important;
  font-variation-settings: normal;
  color: #ce93d8 !important;
}

/* The line under the logo speaks in the title voice, not the body voice. */
html .sidebar-tagline {
  font-family: var(--sv2-display);
  font-style: italic;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-size: 12.5px;
  letter-spacing: 0;
  color: #b3aab3;
}

/* ── Light ───────────────────────────────────────────────────────────────── */
html body {
  background-image:
    radial-gradient(ellipse 55% 38% at 28% 0%, rgba(236, 72, 153, 0.10), transparent 70%),
    radial-gradient(ellipse 45% 32% at 88% 4%, rgba(167, 139, 250, 0.08), transparent 70%);
  background-repeat: no-repeat;
}

/* The sparkle after a page title. */
html .header-top .hero-header-text h1::after,
html .creation-step h3::after,
html .page-title::after,
html .gp-title::after,
html .welcome-message h3::after,
html .seo-hero h1::after,
html .header-top .hero-header-text .header-title::after,
html .article-title::after,
html .blog-title::after,
html .hero-content h1::after,
html .live-header h1::after {
  content: '';
  display: inline-block;
  width: 1.15em;
  height: 0.95em;
  margin-left: 0.3em;
  vertical-align: -0.05em;
  background: var(--sv2-sparkle) no-repeat center / contain;
}

/* ── Primary actions: pink gradient, white text, glow ────────────────────── */
html .signup-btn, html .sidebar-auth-btn.primary, html .mobile-auth-btn,
html .mobile-menu-btn-register, html #mobileProfileBtn,
html .livecam-banner-cta-primary, html .story-btn-primary, html .story-gate-btn.primary,
html .nsfw-blur-overlay-btn, html .feed-card-cta, html .plan-button, html .cdm-cta,
html .btn-primary, html .btn-success, html .name-generator-btn,
html .gp-btn-primary, html .gp-lb-dl,
html .chat-header-entry.primary, html .mobile-generate-btn, html .video-intro-go,
html .bm-card-cta, html .image-upgrade-btn.primary, html .upgrade-notice-btn,
html .report-btn-submit, html .milestone-btn, html .wt-btn.prim, html .send-btn,
html .nav-item.nav-item-upgrade, html .quick-link.quick-link-upgrade,
html .mobile-menu-link.mobile-menu-upgrade {
  background: var(--sv2-pink) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: var(--sv2-glow) !important;
}
html .signup-btn:hover, html .sidebar-auth-btn.primary:hover, html .btn-primary:hover,
html .btn-success:hover, html .gp-btn-primary:hover, html .bm-card-cta:hover,
html .send-btn:hover, html .plan-button:hover, html .feed-card-cta:hover,
html .nav-item.nav-item-upgrade:hover, html .quick-link.quick-link-upgrade:hover,
html .chat-header-entry.primary:hover, html .milestone-btn:hover {
  box-shadow: var(--sv2-glow-hover) !important;
  filter: brightness(1.06);
}
html .send-btn:disabled, html .btn-success[disabled], html .gp-btn-primary[disabled] {
  box-shadow: none !important;
  filter: saturate(0.4) brightness(0.8);
}

/* Secondary actions: white outline. */
html .login-btn, html .livecam-banner-cta-secondary, html .story-btn-secondary {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
}
html .login-btn:hover, html .livecam-banner-cta-secondary:hover, html .story-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: #fff;
  box-shadow: none;
}

/* ── Selected states: pink with white text ───────────────────────────────── */
html .tag-pill.active,
html .body-selector-btn.selected, html .create-tag-button.selected,
html .gp-mode-btn.active, html .gp-q.active, html .bm-tabs .bm-tab.active,
html .mobile-dropdown-item.selected, html .mobile-nsfw-toggle .mobile-dropdown-btn.active {
  background: var(--sv2-pink) !important;
  border-color: transparent !important;
  color: #fff !important;
}
html .cs-btn.cs-active, html .gp-chip[aria-pressed="true"], html .gp-chips-visual .gp-chip[aria-pressed="true"] {
  background: var(--sv2-pink);
  border-color: transparent;
  color: #fff;
}
/* Unselected chips stay neutral: the one pink thing is the one chosen. */
html .tag-pill, html .dropdown-btn, html .body-selector-btn, html .gp-chip, html .cs-btn {
  color: #fff;
}
html .tag-pill:hover, html .dropdown-btn:hover, html .body-selector-btn:hover {
  border-color: rgba(255, 255, 255, 0.5);
}
/* The homepage filter dropdowns (Female, Style, Ethnicity, Age) are menus, not
   choices made: neutral until one is active. They were filled with --accent,
   which is pink now, so they turned into a row of four pink buttons. */
html .tag-pill.category, html .mobile-dropdown-btn {
  background: #221c22 !important;
  border: 1px solid #3a323a !important;
  color: #fff !important;
}
html .tag-pill.category:hover { border-color: rgba(255, 255, 255, 0.5) !important; }
/* A filter showing its current value ("Female") counts as active, and all four
   usually are: a tint rather than a fill, so "Create" stays the one solid pink
   button in the bar. */
html .dropdown-btn.active {
  background: rgba(236, 72, 153, 0.14) !important;
  border: 1px solid rgba(236, 72, 153, 0.45) !important;
  color: #fff !important;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */
html .nav-item-icon svg, html .quick-link svg, html .menu-icon svg { stroke: #b3aab3; }
html .nav-item:hover { background: rgba(255, 255, 255, 0.06); }
/* The active page is a pink tint, not a fill: the sidebar already has two
   solid pink calls to action (Memberships, Register), and a third pink block
   made the eye bounce between them. */
html .nav-item.active {
  background: rgba(236, 72, 153, 0.16);
  color: #fff;
  box-shadow: inset 3px 0 0 #ec4899;
}
html .nav-item.active .nav-item-icon svg { stroke: #ec4899; }
html .nav-item.nav-item-upgrade .nav-item-icon svg, html .quick-link.quick-link-upgrade svg { stroke: #fff; }
html .mobile-nav-item:hover, html .mobile-nav-item.active { color: #ec4899; }
html .recent-chat.active {
  background: rgba(236, 72, 153, 0.14);
  border-color: rgba(236, 72, 153, 0.5);
  box-shadow: inset 3px 0 0 #ec4899;
}
html .recent-chat.active .recent-chat-name { color: #fff; }

/* NEW badges are a small reward: butter sticker, slightly tilted. */
html .nav-new-badge, html .mobile-menu-link .nav-new-badge {
  background: var(--sv2-butter) !important;
  color: #0a0a0a !important;
  font-weight: 800;
  transform: rotate(-5deg);
}

/* ── Rewards: butter ─────────────────────────────────────────────────────── */
html .nav-credits-chip, html .credit-balance {
  background: rgba(255, 209, 102, 0.14) !important;
  border: 1px solid rgba(255, 209, 102, 0.5) !important;
  color: var(--sv2-butter) !important;
}
html .nav-credits-chip:hover { background: rgba(255, 209, 102, 0.22) !important; }
html .credit-balance .buy-more { background: var(--sv2-butter) !important; color: #0a0a0a !important; }
html .daily-claim-card {
  background: linear-gradient(160deg, #1e1a12 0%, #161216 60%) !important;
  border-color: var(--sv2-butter) !important;
  box-shadow: 0 20px 60px rgba(255, 209, 102, 0.18) !important;
}
html #dailyClaimBtn {
  background: var(--sv2-butter) !important;
  color: #0a0a0a !important;
  box-shadow: 0 6px 22px rgba(255, 209, 102, 0.35) !important;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
html .character-card {
  border-radius: 22px;
  border-color: #2a2229;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
html .character-card:hover {
  border-color: rgba(236, 72, 153, 0.6);
  box-shadow: 0 10px 34px rgba(236, 72, 153, 0.22), 0 20px 40px rgba(0, 0, 0, 0.35);
}
html .character-info::before {
  background: linear-gradient(to bottom, rgba(22, 18, 22, 0), rgba(22, 18, 22, 1));
}
html .stat-badge { background: rgba(10, 10, 10, 0.6); color: #fff; }
/* NSFW gate on the grid: one per card, so a whole screen of them. Warm dark
   instead of navy, a quiet label, and the button without its glow, so the grid
   is not a wall of glowing pink. */
html .nsfw-blur-overlay { background: linear-gradient(160deg, #221a22 0%, #161216 100%); }
html .nsfw-blur-overlay-badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
}
html .nsfw-blur-overlay svg { stroke: #b3aab3; }
html .nsfw-blur-overlay-btn { box-shadow: none !important; }
html .character-tag { background: rgba(167, 139, 250, 0.16); color: var(--sv2-violet); }

/* ── Chat ────────────────────────────────────────────────────────────────── */
html .message-content {
  background: #1f1a20;
  border-radius: 20px 20px 20px 6px;
}
html .message.user .message-content {
  background: var(--sv2-pink);
  color: #fff;
  border-radius: 20px 20px 6px 20px;
  box-shadow: 0 4px 16px rgba(236, 72, 153, 0.25);
}
html .typing-dots span:nth-child(1) { background: #ec4899; }
html .typing-dots span:nth-child(2) { background: var(--sv2-butter); }
html .typing-dots span:nth-child(3) { background: var(--sv2-violet); }
html .message.ai.cs-thinking .typing-dots span { background: rgba(255, 255, 255, 0.95); }
html .memory-flicker { color: var(--sv2-violet); }
html .scenario-chip {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.35);
  color: var(--sv2-violet);
}
/* The image button: violet, so it does not compete with send. */
html .request-image-btn {
  background: var(--sv2-violet) !important;
  border-color: var(--sv2-violet) !important;
  color: #0a0a0a !important;
}
html .request-image-btn svg { stroke: #0a0a0a; }
html .input-ta-wrap { border-radius: 999px; }
html .input-ta-wrap:focus-within {
  border-color: rgba(236, 72, 153, 0.7);
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15), 0 0 18px rgba(236, 72, 153, 0.2);
}
html .conversation-starter-btn { border-radius: 999px; }
html .conversation-starter-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  box-shadow: none;
}
html .character-avatar-header {
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.25), 0 0 22px rgba(236, 72, 153, 0.3);
}

/* ── Create ──────────────────────────────────────────────────────────────── */
html #progressFill { background: linear-gradient(90deg, #ec4899, #a78bfa); }
html .style-option:hover, html .ethnicity-option:hover, html .hair-option:hover,
html .sex-option:hover, html .hair-color-option:hover {
  box-shadow: 0 8px 26px rgba(236, 72, 153, 0.18), 0 8px 20px rgba(0, 0, 0, 0.3);
}
html .form-input:focus {
  border-color: rgba(236, 72, 153, 0.7);
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15);
}
html .creation-progress-bar { background: linear-gradient(90deg, #ec4899, #a78bfa) !important; }
html .creation-loading-text { font-family: var(--sv2-display) !important; color: #fff !important; }

/* ── Generate ────────────────────────────────────────────────────────────── */
html .gp-label { color: #b3aab3; }
html .gp-rail::before, html .gp-side::before { background: linear-gradient(90deg, #ec4899, #a78bfa); }
html .gp-slot.gp-slot-set {
  border-color: #ec4899;
  box-shadow: 0 0 0 1px #ec4899 inset, 0 6px 18px rgba(236, 72, 153, 0.25);
}
/* Empty slots are neutral; a slot turns pink once something is picked. */
html .gp-slot-ico { background: rgba(255, 255, 255, 0.06); color: #b3aab3; }
html .gp-slot:not(.gp-slot-set) .gp-slot-val { color: #fff; }
html .gp-dice { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
html .gp-avatar { box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.2), 0 0 18px rgba(236, 72, 153, 0.25); }
html .gp-loading, html .gp-status {
  background: rgba(236, 72, 153, 0.08);
  border-color: rgba(236, 72, 153, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  html .character-card { transition: none; }
}