/* Light Mode (Default) */
:root {
  /* Brand Colors */
  --primary: #B7CEB0;             /* Sage green */
  --primary-hover: #A8C49A;       /* Slightly darker sage for hover */
  --primary-rgb: 183, 206, 176;   /* Sage RGB */
  --primary-dark: #27521a;   /* Dark green for button text */
  --accent: #E2A9A9;              /* Dusty rose */
  --accent-hover: #D4847A;        /* Darker dusty rose for hover */
  --accent-rgb: 226, 169, 169;    /* Dusty rose RGB */
  --neutral: #6c757d;             /* Keep existing neutral */
  --neutral-hover: #565e64;
  --neutral-rgb: 108, 117, 125;
  --cta: #fdcb6e;                 /* Keep your golden CTA */
  --cta-dark: #f39c12;
  --cta-rgb: 253, 203, 110;

  /* Neutral System */
  --background: #F1EDE6;          /* Warm cream background */
  --surface: #FCFBF9;             /* Warm white for cards */
  --border: rgba(66, 75, 84, 0.1); /* Light border using text color */
  --border-heavy: rgba(66, 75, 84, 0.30);
  /* Text Colors */
  --text: #424B54;                /* Charcoal for body text */
  --text-rgb: 66, 75, 84;
  --text-muted: rgba(66, 75, 84, 0.6);    /* 60% charcoal for muted */
  --text-muted-rgb: 66, 75, 84;           /* Same RGB, use with opacity */
  --text-inverse: #F1EDE6;        /* Light text for dark backgrounds */
  --text-inverse-rgb: 241, 237, 230;

  /* Semantic Colors - Keep existing */
  --success: #48bb78;
  --success-rgb: 72, 187, 120;
  --danger: #f56565;
  --danger-rgb: 245, 101, 101;
  --info: #4299e1;
  --info-rgb: 66, 153, 225;

  --danger-15: rgba(245, 101, 101, 0.15);
  --success-15: rgba(72, 187, 120, 0.15);

  /* Opacity Variants */
  --background-15: rgba(241, 237, 230, 0.15);
  --background-25: rgba(241, 237, 230, 0.25);
  --background-50: rgba(241, 237, 230, 0.50);
  --background-75: rgba(241, 237, 230, 0.75);

  --primary-5: rgba(var(--primary-rgb), 0.05);
  --primary-10: rgba(var(--primary-rgb), 0.1);
  --primary-15: rgba(var(--primary-rgb), 0.15);
  --primary-25: rgba(var(--primary-rgb), 0.25);
  --primary-33: rgba(var(--primary-rgb), 0.33);
  --primary-50: rgba(var(--primary-rgb), 0.50);
  --primary-75: rgba(var(--primary-rgb), 0.75);
  --accent-5: rgba(var(--accent-rgb), 0.05);
  --accent-10: rgba(var(--accent-rgb), 0.1);
  --accent-15: rgba(var(--accent-rgb), 0.15);
  --accent-25: rgba(var(--accent-rgb), 0.25);
  --accent-33: rgba(var(--accent-rgb), 0.33);
  --accent-50: rgba(var(--accent-rgb), 0.50);
  --accent-75: rgba(var(--accent-rgb), 0.75);
  --accent-90: rgba(var(--accent-rgb), 0.90);
  --neutral-5: rgba(var(--neutral-rgb), 0.05);
  --neutral-10: rgba(var(--neutral-rgb), 0.1);
  --neutral-15: rgba(var(--neutral-rgb), 0.15);
  --neutral-25: rgba(var(--neutral-rgb), 0.25);
  --neutral-50: rgba(var(--neutral-rgb), 0.50);
  --neutral-75: rgba(var(--neutral-rgb), 0.75);
  --success-5: rgba(var(--success-rgb), 0.05);
  --success-10: rgba(var(--success-rgb), 0.1);
  --success-25: rgba(var(--success-rgb), 0.25);
  --success-50: rgba(var(--success-rgb), 0.50);
  --success-75: rgba(var(--success-rgb), 0.75);
  --danger-5: rgba(var(--danger-rgb), 0.05);
  --danger-10: rgba(var(--danger-rgb), 0.1);
  --danger-25: rgba(var(--danger-rgb), 0.25);
  --danger-50: rgba(var(--danger-rgb), 0.50);
  --danger-75: rgba(var(--danger-rgb), 0.75);
  --info-5: rgba(var(--info-rgb), 0.05);
  --info-10: rgba(var(--info-rgb), 0.1);
  --info-50: rgba(var(--info-rgb), 0.50);
  --info-75: rgba(var(--info-rgb), 0.75);

  --cta-50: rgba(var(--cta-rgb), 0.50);

  /* Text Opacity Variants */
  --text-5: rgba(var(--text-rgb), 0.05);
  --text-10: rgba(var(--text-rgb), 0.1);
  --text-15: rgba(var(--text-rgb), 0.15);
  --text-25: rgba(var(--text-rgb), 0.25);
  --text-50: rgba(var(--text-rgb), 0.50);
  --text-75: rgba(var(--text-rgb), 0.75);
  --text-90: rgba(var(--text-rgb), 0.90);
}

/* Dark Mode Overrides - Only when html has dark theme */
html[data-theme="dark"] {
  /* Brand Colors */
  --primary: #A9C9E2;             /* Powder blue */
  --primary-hover: #8bb5d8;       /* Darker powder blue for hover */
  --primary-rgb: 169, 201, 226;   /* Powder blue RGB */
  --primary-dark: #1B365D;   /* Dark navy for button text */

  --accent: #B7CEB0;              /* Sage as accent */
  --accent-hover: #A8C49A;        /* Darker sage for hover */
  --accent-rgb: 183, 206, 176;    /* Sage RGB */

  --neutral: #6c757d;
  --neutral-hover: #565e64;
  --neutral-rgb: 108, 117, 125;

  --cta: #fdcb6e;                 /* Keep golden CTA */
  --cta-rgb: 253, 203, 110;

  /* Neutral System */
  --background: #262624;          /* RGB(38,38,36) - softer dark background */
  --surface: #333333;             /* Dark gray cards */
  --border: rgba(241, 237, 230, 0.1); /* Light border using warm cream */
  --border-heavy: rgba(241, 237, 230, 0.3);

  /* Text Colors */
  --text: #F1EDE6;                /* Warm cream text */
  --text-rgb: 241, 237, 230;
  --text-muted: rgba(241, 237, 230, 0.7);    /* 70% cream for muted */
  --text-muted-rgb: 241, 237, 230;
  --text-inverse: #424B54;        /* Dark text for light backgrounds */
  --text-inverse-rgb: 66, 75, 84;

  /* Semantic Colors */
  --success: #48bb78;
  --success-rgb: 72, 187, 120;
  --danger: #f56565;
  --danger-rgb: 245, 101, 101;
  --info: #4299e1;
  --info-rgb: 66, 153, 225;

  /* Opacity Variants */
  --primary-5: rgba(var(--primary-rgb), 0.05);
  --primary-10: rgba(var(--primary-rgb), 0.1);
  --primary-15: rgba(var(--primary-rgb), 0.15);
  --primary-25: rgba(var(--primary-rgb), 0.25);
  --primary-50: rgba(var(--primary-rgb), 0.50);
  --primary-75: rgba(var(--primary-rgb), 0.75);

  --accent-5: rgba(var(--accent-rgb), 0.05);
  --accent-10: rgba(var(--accent-rgb), 0.1);
  --accent-15: rgba(var(--accent-rgb), 0.15);
  --accent-25: rgba(var(--accent-rgb), 0.25);
  --accent-50: rgba(var(--accent-rgb), 0.50);
  --accent-75: rgba(var(--accent-rgb), 0.75);
  --accent-90: rgba(var(--accent-rgb), 0.90);

  --neutral-5: rgba(var(--neutral-rgb), 0.05);
  --neutral-10: rgba(var(--neutral-rgb), 0.1);
  --neutral-15: rgba(var(--neutral-rgb), 0.15);
  --neutral-25: rgba(var(--neutral-rgb), 0.25);
  --neutral-50: rgba(var(--neutral-rgb), 0.50);
  --neutral-75: rgba(var(--neutral-rgb), 0.75);

  --success-5: rgba(var(--success-rgb), 0.05);
  --success-10: rgba(var(--success-rgb), 0.1);
  --success-25: rgba(var(--success-rgb), 0.25);
  --success-50: rgba(var(--success-rgb), 0.50);
  --success-75: rgba(var(--success-rgb), 0.75);

  --danger-5: rgba(var(--danger-rgb), 0.05);
  --danger-10: rgba(var(--danger-rgb), 0.1);
  --danger-50: rgba(var(--danger-rgb), 0.50);
  --danger-75: rgba(var(--danger-rgb), 0.75);

  --warning-5: rgba(var(--warning-rgb), 0.05);
  --warning-10: rgba(var(--warning-rgb), 0.1);
  --warning-50: rgba(var(--warning-rgb), 0.50);
  --warning-75: rgba(var(--warning-rgb), 0.75);

  --info-5: rgba(var(--info-rgb), 0.05);
  --info-10: rgba(var(--info-rgb), 0.1);
  --info-50: rgba(var(--info-rgb), 0.50);
  --info-75: rgba(var(--info-rgb), 0.75);

  --background-15: rgba(38, 38, 36, 0.15);
  --background-25: rgba(38, 38, 36, 0.15);
  --background-50: rgba(38, 38, 36, 0.15);
  --background-75: rgba(38, 38, 36, 0.15);

  /* Text Opacity Variants */
  --text-5: rgba(var(--text-rgb), 0.05);
  --text-10: rgba(var(--text-rgb), 0.1);
  --text-15: rgba(var(--text-rgb), 0.15);
  --text-25: rgba(var(--text-rgb), 0.25);
  --text-50: rgba(var(--text-rgb), 0.50);
  --text-75: rgba(var(--text-rgb), 0.75);
  --text-90: rgba(var(--text-rgb), 0.90);

  --text-muted-5: rgba(var(--text-muted-rgb), 0.05);
  --text-muted-10: rgba(var(--text-muted-rgb), 0.1);
  --text-muted-15: rgba(var(--text-muted-rgb), 0.15);
  --text-muted-25: rgba(var(--text-muted-rgb), 0.25);
  --text-muted-50: rgba(var(--text-muted-rgb), 0.50);
  --text-muted-75: rgba(var(--text-muted-rgb), 0.75);

  --text-inverse-5: rgba(var(--text-inverse-rgb), 0.05);
  --text-inverse-10: rgba(var(--text-inverse-rgb), 0.1);
  --text-inverse-15: rgba(var(--text-inverse-rgb), 0.15);
  --text-inverse-25: rgba(var(--text-inverse-rgb), 0.25);
  --text-inverse-50: rgba(var(--text-inverse-rgb), 0.50);
  --text-inverse-75: rgba(var(--text-inverse-rgb), 0.75);
}

body {
  background-color: var(--background) !important;
  color: var(--text-75) !important;
}

/* Typography - Lora serif for headers */
h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: 'Lora', serif !important;
}

/* Ensure cards and content areas maintain good contrast */
.card, .bg-white {
  background-color: var(--surface);
}

/* Header with slight contrast */
header {
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Footer styling - white background, minimal border */
footer {
  background-color: var(--surface) !important;
  border-top: 1px solid var(--border);
  margin-top: 3rem !important; /* Add space above footer */
}

/* Wizard pages - normal footer at bottom (not fixed) */
.wizard-layout footer {
  padding: 1rem 0 !important;
}

/* Prompt blocks navigation compact styling */
.prompt-blocks-nav .block-variable-name {
  font-size: 0.7rem;
}

.prompt-blocks-nav .subgroup-name {
  font-size: 0.8rem;
}

.prompt-blocks-nav .subgroup-badge {
  font-size: 0.7rem;
}

.prompt-blocks-nav .block-link {
  font-size: 0.8rem;
}

.prompt-blocks-nav .block-link.active {
  background-color: rgba(0, 0, 0, 0.35) !important;
  color: var(--text) !important;
}

/* Wizard navigation styling (when visible) */
.wizard-nav {
  background-color: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  margin-top: 2rem !important;
}

/* Mobile wizard navigation - keep single row but make buttons smaller */
@media (max-width: 768px) {
  .wizard-nav-btn {
    font-size: 0.8rem !important;
    padding: 0.5rem 0.75rem !important;
    white-space: nowrap !important;
  }

  /* Truncate long Next button text on mobile */
  .wizard-nav-btn[data-action="next"] {
    max-width: 120px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Universal fix: Add margin to columns when they wrap on mobile */
  /* Exclude rows that explicitly use Bootstrap gutter classes (g-*, gx-*, gy-*) */
  .row:not([class*="g-"]):not([class*="gx-"]):not([class*="gy-"]) > [class*="col-"]:not(:first-child) {
    margin-top: 1.5rem;
  }
}

/* Wizard content padding */
.wizard-content {
  padding-bottom: 20px !important;
}

/* Progress bar with new color scheme */
.progress {
  background-color: var(--primary-10) !important;
}

.progress-bar {
  background-color: var(--primary) !important;
}

.border-primary { border-color: var(--primary) !important; }

/* Primary button and link colors */
.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-dark) !important;
  transition: filter 0.2s;
}

.btn-primary:hover, .btn-primary:focus {
  filter: brightness(1.1);
}

.btn-primary.primary-border { border-color: var(--primary-dark) !important; }

.btn-primary:disabled,
.btn-primary.disabled,
.btn-primary[disabled] {
  background-color: var(--primary-10) !important;
  border-color: var(--primary-25) !important;
  color: var(--text-75) !important;
  cursor: not-allowed !important;
  filter: none !important;
  opacity: 1 !important;
}

.btn-primary.faded {
  color: var(--primary-dark) !important;
  background-color: var(--primary-75) !important;
  border-color: var(--primary-75) !important;
}

/* Secondary button - accent color */
.btn-secondary {
  background-color: var(--accent-25) !important;
  border-color: var(--accent-50) !important;
  color: var(--text) !important;
  transition: filter 0.2s;
}

.btn-secondary:hover, .btn-secondary:focus {
  filter: brightness(1.15);
}

.btn-secondary:disabled,
.btn-secondary.disabled,
.btn-secondary[disabled] {
  background-color: var(--accent-10) !important;
  border-color: var(--accent-25) !important;
  color: var(--text-75) !important;
  cursor: not-allowed !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Outline buttons */
.btn-outline-primary {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--text-inverse) !important; /* White text on hover */
}

.btn-outline-secondary {
  color: var(--accent-75) !important;
  border-color: var(--accent-90) !important;
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background-color: var(--accent-75) !important;
  border-color: var(--accent-90) !important;
  color: var(--text) !important;
}

/* Neutral button - for gray/muted actions */
.btn-neutral {
  background-color: var(--background) !important;
  border-color: var(--text-50) !important;
  color: var(--text-75) !important;
}

.btn-neutral:hover, .btn-neutral:focus {
  background-color: var(--background) !important;
  border-color: var(--text-50) !important;
  color: var(--text-75) !important;
  filter: brightness(1.15);
}

.btn-neutral:disabled,
.btn-neutral.disabled,
.btn-neutral[disabled] {
  background-color: var(--neutral-10) !important;
  border-color: var(--neutral-10) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed !important;
  filter: none !important;
  opacity: 1 !important;
}

.btn-outline-neutral {
  color: var(--neutral) !important;
  border-color: var(--neutral) !important;
}

.btn-outline-neutral:hover, .btn-outline-neutral:focus {
  background-color: var(--neutral) !important;
  border-color: var(--neutral) !important;
  color: var(--text-inverse) !important;
}

.btn-link { color: var(--text-75) }
.btn-link:hover { color: var(--text) }

/* Social Login Buttons */

/* Google Sign-In Button - Following Google Brand Guidelines */
/* https://developers.google.com/identity/branding-guidelines */

/* Light mode - Neutral theme (gray fill with stroke) */
.btn-google {
  background-color: #f2f2f2 !important;
  border: 1px solid #747775 !important;
  color: #1f1f1f !important;
  font-family: 'Google Sans', Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.25px;
  padding: 10px 24px;
  transition: background-color 0.218s, box-shadow 0.218s;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-google .google-icon {
  vertical-align: middle;
  flex-shrink: 0;
}

.btn-google:hover {
  background-color: #e8e8e8 !important;
  box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15) !important;
  color: #1f1f1f !important;
}

.btn-google:active {
  background-color: #dadce0 !important;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3) !important;
}

.btn-google:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.3) !important;
}

/* Dark mode Google button - same neutral gray */
html[data-theme="dark"] .btn-google {
  background-color: #f2f2f2 !important;
  border: 1px solid #747775 !important;
  color: #1f1f1f !important;
}

html[data-theme="dark"] .btn-google:hover {
  background-color: #e8e8e8 !important;
  border-color: #747775 !important;
  color: #1f1f1f !important;
}

html[data-theme="dark"] .btn-google:active {
  background-color: #dadce0 !important;
}

html[data-theme="dark"] .btn-google:focus {
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.3) !important;
}

/* Apple Sign-In Button - Following Apple Brand Guidelines */
/* https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple */

.btn-apple {
  background-color: #000000 !important;
  border: 1px solid #000000 !important;
  color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.31px;
  padding: 10px 24px;
  transition: background-color 0.2s, box-shadow 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Apple icon inherits text color for dark mode compatibility */
.btn-apple svg path {
  fill: currentColor !important;
}

.btn-apple:hover {
  background-color: #2d2d2d !important;
  border-color: #2d2d2d !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.btn-apple:active {
  background-color: #1a1a1a !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.btn-apple:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
  color: #ffffff !important;
}

/* Dark mode Apple button - keep black */
html[data-theme="dark"] .btn-apple {
  background-color: #000000 !important;
  border: 1px solid #000000 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .btn-apple:hover {
  background-color: #2d2d2d !important;
  border-color: #2d2d2d !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .btn-apple:active {
  background-color: #1a1a1a !important;
}

html[data-theme="dark"] .btn-apple:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.bg-primary { background: var(--primary) !important; }
.bg-primary-10 { background: var(--primary-10) !important; }

.badge-primary { background: var(--primary-25); color: var(--primary-dark) !important; }
.badge-cta { background: var(--cta-50); border-color: var(--cta-dark); color: var(--primary-dark) !important; }

html[data-theme="dark"] .badge-primary { background: var(--primary-25); color: var(--text) !important; }

.badge-secondary { background: var(--accent-25); color: var(--text-75) !important; }
.badge-neutral { background: var(--neutral-25); color: var(--text-75) !important;}
.badge-success { background: var(--success-25); color: var(--success) !important; }
.badge-danger { background: var(--danger-25); color: var(--danger) !important; }
/* Badge overlay for image overlays */
.badge-overlay {
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--text-inverse) !important;
}

html[data-theme="dark"] .badge-overlay {
  color: var(--text) !important;
}

/* Text colors */
.text-primary {
  color: var(--primary) !important;
  filter: brightness(0.85);
}

/* Text colors */
.text-cta {
  color: var(--cta) !important;
  filter: brightness(0.85);
}

html[data-theme="dark"] .text-primary {
  filter: brightness(1.0);
}

.text-secondary {
  color: var(--accent) !important;
}

.text-inverse {
  color: var(--text-inverse) !important;
}

/* Links */
a {
  color: var(--primary);
  text-decoration: none !important;
}

a:hover {
  color: var(--primary);
  text-decoration: underline !important;
}

/* Exception: buttons should never have underlines */
a.btn,
a.btn:hover,
a.btn:focus {
  text-decoration: none !important;
}

/* Exception: card wrapper links should never have underlines */
.card a.text-decoration-none,
.card a.text-decoration-none:hover,
a.text-decoration-none:hover {
  text-decoration: none !important;
}

.text-danger {
  color: var(--danger) !important;
}

/* Logo link - inherit text color, no decoration, pointer cursor */
.logo-link {
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer;
}

.logo-link:hover,
.logo-link:focus,
.logo-link:visited {
  color: inherit !important;
  text-decoration: none !important;
}

/* Accent color utility classes */
.bg-accent {
  background-color: var(--accent-25) !important;
  color: var(--text) !important;
}

.text-accent {
  color: var(--accent) !important;
}

.border-accent {
  border-color: var(--accent) !important;
}

/* CTA buttons - special gradient styling */
.btn-cta {
  background: linear-gradient(135deg, var(--cta) 0%, var(--cta-dark) 100%) !important;
  border-color: var(--cta) !important;
  color: var(--text) !important;
  font-weight: bold !important;
  transition: filter 0.2s;
}

html[data-theme="dark"] .btn-cta {
  color: var(--text-inverse) !important;
}

.btn-cta:hover, .btn-cta:focus {
  filter: brightness(0.9);
  border-color: rgba(var(--cta-rgb), 0.80);
}

/* Hero sections with dark gradient */
.hero, .hero-section {
  background: linear-gradient(135deg, var(--background) 0%, var(--surface) 40%, var(--border) 100%) !important;
  color: var(--text) !important;
}

/* Nav item hover effects - MOVED TO "Navigation - Consolidated" section around line 2790 */

/* Character Gallery Cards - matching theme card pattern */
.character-card {
  border: 2px solid transparent;
  transition: all 0.3s ease;
  height: 100%;
}

.character-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.character-card .character-image {
  height: 320px;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.character-card:hover .character-image {
  transform: scale(1.02);
}

.character-card .no-image {
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 8px;
}

/* Character card refreshing state */
.character-card.refreshing {
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.character-card.refreshing::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
  z-index: 10;
}

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

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: var(--text-inverse) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

/* Shared card delete overlay styling */
.card-delete-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(73, 29, 33, 0.95);
  color: white;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 0.375rem;
  z-index: 20;
  animation: fadeIn 0.3s ease-in-out;
}
.card-delete-overlay.show {
  display: flex;
}
.card-delete-overlay-content {
  text-align: center;
  padding: 1rem;
}
.card-delete-overlay-content h6 {
  margin-bottom: 0.75rem;
  font-weight: 600;
}
.card-delete-overlay-content p {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  opacity: 0.9;
}
.card-delete-overlay-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
.card-delete-overlay-buttons .btn {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}

/* Base confirmation overlay styles */
.confirmation-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: var(--text-inverse) !important;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 0.375rem;
  z-index: 20;
  animation: fadeIn 0.3s ease-in-out;
}

/* Ensure all child elements use inverse text color */
.confirmation-overlay h6,
.confirmation-overlay p,
.confirmation-overlay .confirmation-content {
  color: var(--text-inverse) !important;
}

/* Dark mode override - use --text (white) instead of --text-inverse (gray) */
[data-theme="dark"] .confirmation-overlay,
[data-theme="dark"] .confirmation-overlay h6,
[data-theme="dark"] .confirmation-overlay p,
[data-theme="dark"] .confirmation-overlay .confirmation-content {
  color: var(--text) !important;
}

/* Custom modal size - between lg and xl */
.modal-900 {
  max-width: 900px;
}

.confirmation-overlay.show,
.confirmation-overlay.active {
  display: flex;
}

.confirmation-content {
  text-align: center;
  padding: 1rem;
}

.confirmation-content h6 {
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.confirmation-content p {
  margin-bottom: 1rem;
  font-size: 0.9rem;
  opacity: 0.9;
}

.confirmation-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.confirmation-buttons .btn {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}

/* Shared red background for delete and clear-source */
.delete-confirmation-overlay,
.clear-source-confirmation-overlay {
  background-color: rgba(73, 29, 33, 0.95);
}

/* Specific color override for clear-source */
.clear-source-confirmation-overlay {
  color: #F1EDE6 !important;
}

.clear-source-confirmation-overlay h6,
.clear-source-confirmation-overlay p {
  color: #F1EDE6 !important;
}

/* Other overlay types */
.select-confirmation-overlay {
  background-color: rgba(40, 40, 40, 0.75); /* slightly charcoal */
}

.details-overlay {
  background-color: rgba(0, 0, 0, 0.70);
  align-items: flex-start;
  justify-content: flex-start;
  padding: 1rem;
}

.details-overlay .confirmation-content {
  text-align: left;
  max-width: 500px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Character status badge positioning - REMOVED - now using card-title */

/* Draft count badge positioning - top right corner of character image */
.character-draft-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  font-size: 0.75rem;
  pointer-events: none; /* Badge doesn't interfere with clicks */
}

/* Character image container - entire area clickable */
.text-center.position-relative:has(.generated-character-img) {
  cursor: pointer;
}

/* Character generated images - clickable to open modal */
.generated-character-img {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.generated-character-img:hover {
  transform: scale(1.02);
}

/* Stack effect for images with multiple drafts */
.generated-character-img.has-drafts {
  box-shadow:
    0 4px 8px rgba(0,0,0,0.15),
    2px -2px 0 1px rgba(255,255,255,0.8),
    4px -4px 0 1px rgba(0,0,0,0.06) !important;
}

.generated-character-img.has-drafts:hover {
  transform: scale(1.02);
}

/* Dark mode stack effect - less white, smaller deck */
.generated-character-img.has-drafts {
  box-shadow:
    0 4px 8px rgba(0,0,0,0.3),
    2px -2px 0 1px rgba(255,255,255,0.6),
    4px -4px 0 1px rgba(255,255,255,0.3) !important;
}

/* Dark mode hover - maintain stack effect */
.generated-character-img.has-drafts:hover {
  transform: scale(1.02);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.3),
    2px -2px 0 1px rgba(255,255,255,0.6),
    4px -4px 0 1px rgba(255,255,255,0.3) !important;
}

/* Character actions menu - top right, vertically centered */
.character-actions-menu, .source-image-actions-menu {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  z-index: 11;
}

.character-menu-btn {
  color: var(--neutral);
  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 0.25rem 0.5rem;
  border: none !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border-radius: 50% !important;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.character-card:hover .character-menu-btn,
.source-image-card:hover .character-menu-btn {
  opacity: 1;
}

/* Character Modal Image Styling */

.character-modal-img {
  max-width: 95%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-heavy) !important;
  transition: transform 0.2s ease;
}

.character-modal-img:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .character-modal-img {
    max-height: 60vh;
    max-width: 90%;
  }
}

/* Generic Before/After Comparison Component */
.comparison-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto; /* Center the container */
  gap: 1rem;
}

/* Only constrain container width when height is limiting image size */
@media (max-height: 800px) {
  .comparison-container {
    max-width: min(80vw, 800px);
  }
}

@media (max-height: 600px) {
  .comparison-container {
    max-width: min(70vw, 600px);
  }
}

.comparison-before-section,
.comparison-after-section {
  flex: 1;
  text-align: center;
}

.comparison-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.comparison-image {
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.comparison-image:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.comparison-arrow {
  flex-shrink: 0;
  background: var(--primary-75);
  color: var(--primary-dark);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  border: 3px solid var(--surface);
}

/* Mobile responsive adjustments for comparison */
@media (max-width: 768px) {
  .comparison-image {
    max-height: 50vh;
  }

  .comparison-label {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
  }

  .comparison-arrow {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }
}

/* Small screens and below - stack vertically */
@media (max-width: 575px) {
  .comparison-container {
    flex-direction: column;
    gap: 1.5rem;
  }

  .comparison-before-section,
  .comparison-after-section {
    flex: none;
    width: 100%;
  }

  .comparison-arrow {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }

  .comparison-arrow i {
    transform: rotate(90deg); /* Point down instead of right on mobile */
  }
}

.character-menu-btn:hover,
.character-menu-btn:focus {
  color: var(--primary) !important;
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Before & After Gallery Cards */
.before-after-card .before-image {
  border-radius: 0.375rem 0 0 0.375rem;
}

.before-after-card .after-image {
  border-radius: 0 0.375rem 0.375rem 0;
}

.before-after-card .comparison-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
  background: var(--primary-75) !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary-dark) !important;
  width: 30px;
  height: 30px;
  font-size: 1.0rem;
}

.before-after-card .comparison-arrow i {
  color: var(--primary-dark) !important;
}

/* Mobile - don't rotate arrow for before/after cards */
@media (max-width: 575px) {
  .before-after-card .comparison-arrow i {
    transform: none;
  }
}

/* Dark mode for character menu */
html[data-theme="dark"] .character-menu-btn {
  background: rgba(45, 55, 72, 0.9) !important;
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] .character-menu-btn:hover,
html[data-theme="dark"] .character-menu-btn:focus {
  background: rgba(45, 55, 72, 1) !important;
  color: var(--primary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Hero demo boxes */
.hero-demo-box {
  aspect-ratio: 1.39 / 1; /* Match kawaii image ratio (376:270) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.hero-demo-original {
  background-color: white;
  border: 1px solid #dee2e6;
}

.hero-demo-transformed {
  background: linear-gradient(135deg, var(--primary), var(--accent));
}

.hero-demo-image {
  max-height: 250px;
  border-radius: 8px;
  max-width: 100%;
  height: auto;
}

/* Dark mode for hero demo boxes */
.hero-demo-original {
  background-color: var(--surface);
  border-color: var(--border);
}

/* Custom width utilities */
.w-45 { width: 45% !important; }
.w-10 { width: 10% !important; }
.w-40 { width: 40% !important; }
.w-20 { width: 20% !important; }

/* Hero Character Grid - for landing page showcase */
.hero-character-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.5rem;
  width: 100%;
  aspect-ratio: 1.39 / 1; /* Match the single demo box ratio */
}

.hero-character-item {
  width: 100%;
  height: 100%;
}

.hero-character-item .hero-demo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cursor utilities */
.cursor-pointer { cursor: pointer !important; }

/* Art styles card images - portrait orientation for mobile images */
.art-style-card-img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
  background-color: var(--surface);
}

.art-style-card-placeholder {
  aspect-ratio: 1 / 1;
  width: 100%;
  background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
}

/* Mobile content padding fix */
@media (max-width: 576px) {
  main, .container, .container-fluid, .container-sm {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Ensure nested containers don't double-pad */
  .container .container, .container-fluid .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Hero section should extend full width but content should be padded */
  .hero {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Mobile: Always show menu button since no hover */
@media (max-width: 768px) {
  .character-menu-btn {
    opacity: 1 !important;
  }
}

/* Style badge */
.style-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: rgba(9, 132, 227, 0.1);
  color: var(--primary);
  border-radius: 1rem;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

/* Dark mode for style badge */
.style-badge {
  background: rgba(96, 165, 250, 0.2) !important;
  color: var(--primary) !important;
}

/* Universal Filter Component */
.filter-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.filter-selects {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: end;
  margin-bottom: 1rem;
}

.filter-select-group {
  flex: 1;
  min-width: 200px;
}

.filter-select-group label {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
}

.filter-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 0.875rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-10);
}

/* Pre-filtered (locked) state */
.filter-select-group.pre-filtered {
  opacity: 0.7;
  position: relative;
}

.filter-select-group.pre-filtered::after {
  content: "🔒";
  position: absolute;
  right: 0.75rem;
  top: 2.25rem;
  pointer-events: none;
  font-size: 0.875rem;
  opacity: 0.5;
}

.filter-select-group.pre-filtered .filter-select {
  background-color: var(--surface-secondary);
  cursor: not-allowed;
  border-style: dashed;
}

/* Active Filters Section */
.active-filters {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  min-height: 2rem;
}

.active-filters-label {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.filter-badge .remove-filter {
  margin-left: 0.5rem;
  cursor: pointer;
  opacity: 0.8;
}

.filter-badge .remove-filter:hover {
  opacity: 1;
}

/* Make remove button inherit the badge's text color */
.badge-outline-primary .remove-filter {
  color: var(--primary);
}

.badge-outline-secondary .remove-filter {
  color: var(--accent);
}

.badge-outline-success .remove-filter {
  color: #198754;
}

/* Custom outline badges - need !important to override Bootstrap */
.badge.badge-outline-primary {
  color: var(--primary) !important;
  background-color: transparent !important;
  border: 1px solid var(--primary) !important;
}

.badge.badge-outline-secondary {
  color: var(--accent-75) !important;
  background-color: transparent !important;
  border: 1px solid var(--accent-75) !important;
}

.badge.badge-outline-success {
  color: #198754 !important;
  background-color: transparent !important;
  border: 1px solid #198754 !important;
}

/* Dark mode support for outline badges */
.badge-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}

.badge-outline-secondary {
  color: var(--accent);
  border-color: var(--accent);
}

/* Min-width utility classes */
.mw-200 { min-width: 200px; }
.mw-250 { min-width: 250px; }
.mw-300 { min-width: 300px; }
.mw-350 { min-width: 350px; }
.mw-400 { min-width: 400px; }
.mw-450 { min-width: 450px; }
.mw-500 { min-width: 500px; }

.clear-all-filters {
  font-size: 0.75rem;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}

.clear-all-filters:hover {
  color: var(--accent);
  text-decoration: underline;
}

.alert-primary {
  background-color: var(--primary-15) !important;
  border-color: var(--primary-50) !important;
  color: var(--text-75) !important;
}

.alert-primary > .bi {
  color: var(--primary) !important;
}

/* Dark mode adjustments */
.filter-container {
  background: var(--surface);
  border-color: var(--border);
}

/* Filter Pills */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-pill {
  background-color: var(--background);
  border: 1px solid var(--text-75);
  color: var(--text-75);
  padding: 0.375rem 0.75rem;
  border-radius: 1.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.filter-pill:hover {
  background-color: var(--background);
  border-color: var(--text-75);
  color: var(--text-75);
  filter: brightness(1.15);
}

.filter-pill.active {
  background-color: var(--background);
  border-color: var(--text);
  color: var(--text);
  filter: brightness(1.05);
}

.filter-pill.active:hover {
  background-color: var(--background);
  border-color: var(--text);
  color: var(--text);
  filter: brightness(1.1);
}


/* Prevent button text wrapping globally - but not overflow:hidden which breaks scrolling */
.btn {
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  min-width: fit-content !important;
  text-decoration: none !important;
}

/* Ensure icons in buttons don't break */
.btn i {
  flex-shrink: 0 !important;
}

/* For buttons in flex containers that need to wrap responsively */
.btn-responsive {
  white-space: normal !important;
  word-break: break-word !important;
  min-height: 2.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Utility margin classes */
.me-2-px {
  margin-right: 2px !important;
}

.me-4-px {
  margin-right: 4px !important;
}

/* Social media square buttons */
.social-btn-square {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s ease;
  border: none;
  color: white;
}

.social-btn-square i {
  font-size: 1.2rem;
  color: white !important;
}

.social-btn-square:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  color: white;
}

/* Brand Colors */
.social-btn-square[data-platform="whatsapp"] {
  background-color: #25D366 !important;
}

.social-btn-square[data-platform="whatsapp"]:hover {
  background-color: #20b858 !important;
}

.social-btn-square[data-platform="telegram"] {
  background-color: #0088cc !important;
}

.social-btn-square[data-platform="telegram"]:hover {
  background-color: #006fa3 !important;
}

.social-btn-square[data-platform="facebook"] {
  background-color: #1877F2 !important;
}

.social-btn-square[data-platform="facebook"]:hover {
  background-color: #166fe5 !important;
}

.social-btn-square[data-platform="twitter"] {
  background-color: #000000 !important;
}

.social-btn-square[data-platform="twitter"]:hover {
  background-color: #333333 !important;
}

.social-btn-square[data-platform="email"] {
  background-color: #8e9aaf !important;
}

.social-btn-square[data-platform="email"]:hover {
  background-color: #7a8497 !important;
}

.social-btn-square[data-platform="instagram"] {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
}
.social-btn-square[data-platform="instagram"]:hover {
  background: linear-gradient(45deg, #d97f29 0%, #cf5a31 25%, #c51f38 50%, #b51b5a 75%, #a9147a 100%) !important;
}

.social-btn-square[data-platform="tiktok"] {
  background-color: #000000 !important;
}
.social-btn-square[data-platform="tiktok"]:hover {
  background-color: #333333 !important;
}

.social-btn-square[data-platform="pinterest"] {
  background-color: #E60023 !important;
}
.social-btn-square[data-platform="pinterest"]:hover {
  background-color: #c9001f !important;
}

.social-btn-square[data-platform="linkedin"] {
  background-color: #0A66C2 !important;
}
.social-btn-square[data-platform="linkedin"]:hover {
  background-color: #004182 !important;
}

/* Monochrome variant */
.social-share-monochrome .social-btn-square {
  background-color: var(--neutral) !important;
}
.social-share-monochrome .social-btn-square:hover {
  background-color: var(--neutral-hover) !important;
}

/* Copy link button - match social button sizing */
.social-share-widget .copy-link-btn,
.social-share-widget #copy-character-link,
.social-share-widget #copy-scene-link {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.social-share-widget .copy-link-btn i,
.social-share-widget #copy-character-link i,
.social-share-widget #copy-scene-link i {
  font-size: 1.2rem;
}

/* Small desktop - avoid awkward single icon wrapping */
@media (max-width: 1300px) and (min-width: 1025px) {
  .social-btn-square {
    width: 40px;
    height: 40px;
  }

  .social-btn-square i {
    font-size: 1rem;
  }
}

/* Medium tablet - avoid single icon wrapping */
@media (max-width: 1024px) and (min-width: 850px) {
  .social-btn-square {
    width: 38px;
    height: 38px;
  }

  .social-btn-square i {
    font-size: 0.9375rem;
  }
}

/* Tablet - tighter space, smaller buttons */
@media (max-width: 768px) {
  .social-btn-square {
    width: 36px;
    height: 36px;
  }

  .social-btn-square i {
    font-size: 0.875rem;
  }
}

/* Mobile - single column, plenty of space */
@media (max-width: 576px) {
  .social-btn-square {
    width: 48px;
    height: 48px;
  }

  .social-btn-square i {
    font-size: 1.25rem;
  }
}

/* Extra small button size */
.btn-xs {
  font-size: 0.625rem !important;
  padding: 0.25rem 0.375rem !important;
  border-radius: 0.2rem !important;
  line-height: 1.2 !important;
}

/* Mobile-specific button adjustments */
@media (max-width: 576px) {
  .btn {
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
  }

  .btn-sm {
    font-size: 0.75rem !important;
    padding: 0.375rem 0.5rem !important;
  }

  .btn-lg {
    font-size: 1rem !important;
    padding: 0.75rem 1rem !important;
  }

  .btn-xs {
    font-size: 0.6rem !important;
    padding: 0.2rem 0.3rem !important;
  }
}

/* Toast notifications */
.toast-notification {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  padding: 1rem 1.5rem;
  background: var(--surface);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1050;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.3s ease;
}

.toast-notification.show {
  opacity: 1;
  transform: translateY(0);
}

.toast-notification.success {
  border-left: 4px solid var(--primary);
}

.toast-notification.error {
  border-left: 4px solid var(--accent);
}

/* Professional pagination styling */
.pagination {
  gap: 0.5rem;
}

.pagination .page-link {
  border: none;
  background: var(--surface);
  color: var(--text);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.pagination .page-link:hover {
  background: var(--primary);
  color: var(--text);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);

}

.pagination .page-item.disabled .page-link {
  background: var(--neutral-bg);
  color: #adb5bd;
  cursor: not-allowed;
  box-shadow: none;
}

.pagination .page-item.active .page-link {
  background: var(--primary);
  color: var(--primary-dark);
}

/* Character page header actions */
.page-header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  gap: 1rem;
}

/* Top-align buttons when left side has complex content (multiple elements) */
.page-header-actions:has(> div:first-child > *:nth-child(2)) {
  align-items: flex-start;
}

/* Hide navbar completely when collapsed on mobile */
@media (max-width: 991.98px) {
  .navbar.navbar-expand-lg:not(:has(.navbar-collapse.show)) {
    display: none;
  }
}

/* Mobile: Stack header actions vertically - earlier breakpoint for complex content */
@media (max-width: 992px) {
  /* Only stack when there are multiple buttons (complex content) */
  .page-header-actions:has(.d-flex.gap-2) {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .page-header-actions:has(.d-flex.gap-2) h1 {
    margin-bottom: 0;
  }

  .page-header-actions:has(.d-flex.gap-2) .btn {
    align-self: stretch;
    text-align: center;
  }

  /* Handle button groups on the right side */
  .page-header-actions:has(.d-flex.gap-2) .d-flex.gap-2 {
    align-self: stretch;
    flex-direction: column;
  }

  .page-header-actions:has(.d-flex.gap-2) .d-flex.gap-2 .btn {
    margin-bottom: 0.5rem;
  }

  .page-header-actions:has(.d-flex.gap-2) .d-flex.gap-2 .btn:last-child {
    margin-bottom: 0;
  }
}

/* Mobile: Stack all header actions vertically - standard breakpoint for simple content */
@media (max-width: 768px) {
  .page-header-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .page-header-actions h1 {
    margin-bottom: 0;
  }

  .page-header-actions .btn {
    align-self: stretch;
    text-align: center;
  }

  /* Handle button groups on the right side */
  .page-header-actions .d-flex.gap-2 {
    align-self: stretch;
    flex-direction: column;
  }

  .page-header-actions .d-flex.gap-2 .btn {
    margin-bottom: 0.5rem;
  }

  .page-header-actions .d-flex.gap-2 .btn:last-child {
    margin-bottom: 0;
  }
}

/* Fix shareable toggle alignment in wizard */
.character-upload .form-check.form-switch {
  padding-left: 0;
  margin-bottom: 1rem;
}

.character-upload .form-check.form-switch .form-check-input {
  float: none;
  margin-left: 0;
  margin-right: 0.5rem;
}

.character-upload .form-check-label {
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

/* Enhanced card styling - Override Bootstrap's card border system */
.card {
  border: 1px solid var(--border);
  border-radius: 12px !important;
  transition: all 0.3s ease;
  color: var(--text-75) !important;
  overflow: hidden; /* Ensures child elements don't break the border radius */
}

/* Force Bootstrap card components to inherit the card's border radius */
.card > .card-header:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 1px solid var(--border);
}

.card > .card-body:first-child {
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}

/* Pack Preview Grid - Multi-image preview for character packs */
/* VERSION 2: Portrait left (3:4), 2x2 thumbnails right - Responsive */
.pack-preview-grid {
  display: flex;
  gap: 8px;
  width: 100%;
  margin: 0 auto;
}

.pack-preview-main {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 40% !important; /* Always 40% for consistent ratio */
  width: 40% !important;
  aspect-ratio: 3/4; /* Portrait ratio */
  border: 1px solid var(--border);
}

.pack-preview-source {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pack-preview-badge {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.pack-preview-thumbnails {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  flex: 1;
  min-width: 0; /* Allow flex shrinking */
  align-self: stretch; /* Match height of source image */
}

.pack-preview-thumb {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
  /* No aspect-ratio constraint - let grid handle sizing */
}

.pack-preview-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pack-preview-more {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
  border: 2px dashed var(--border-heavy);
  border-radius: 4px;
}

.pack-preview-more-content {
  text-align: center;
}

.pack-preview-more-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Single source image for packs without generated characters */
.pack-source-image.mb-3 {
  max-width: 180px !important;
  width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
  cursor: pointer;
}

/* Pack Avatar - Small source image next to pack title */
.pack-avatar {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pack-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* OLD VERSION 1: Stacked layout - DELETED */


.card > .card-body:last-child {
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

.card > .card-footer:last-child {
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: 1px solid var(--border) !important;
}

/* When card-body is between header and footer */
.card > .card-header + .card-body {
  border-radius: 0 !important;
}

.card > .card-body + .card-footer {
  border-radius: 0 !important;
}

/* Diff content styling for version history */
.diff-content {
  font-family: 'Courier New', monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 0.9rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  padding: 15px;
  border-radius: 8px;
}

/* Addition styling - green for added content */
.diff-added,
.diff-content .diff-added {
  background-color: #d4edda;
  border-left: 3px solid #28a745;
  color: #155724;
  padding: 2px 6px;
  margin: 2px 0;
  border-radius: 3px;
  display: inline-block;
  font-weight: 500;
}

/* Removal styling - red for removed content */
.diff-removed,
.diff-content .diff-removed {
  background-color: #f8d7da;
  border-left: 3px solid #dc3545;
  color: #721c24;
  padding: 2px 6px;
  margin: 2px 0;
  border-radius: 3px;
  display: inline-block;
  font-weight: 500;
  text-decoration: line-through;
}

/* Dark mode diff styling */
.diff-content {
  background-color: var(--surface);
  border-color: var(--border);
}

.diff-added,
.diff-content .diff-added {
  background-color: #1e3a2e;
  border-left-color: #48bb78;
  color: #9ae6b4;
}

.diff-removed,
.diff-content .diff-removed {
  background-color: #3c1e1e;
  border-left-color: #f56565;
  color: #fed7d7;
}

/* Handle line-by-line diffs with proper prefixes */
.diff-content .diff-line-added {
  background-color: #d4edda;
  border-left: 3px solid #28a745;
  color: #155724;
  padding: 4px 8px;
  margin: 1px 0;
  display: block;
}

.diff-content .diff-line-removed {
  background-color: #f8d7da;
  border-left: 3px solid #dc3545;
  color: #721c24;
  padding: 4px 8px;
  margin: 1px 0;
  display: block;
}

.diff-content .diff-line-added {
  background-color: #1e3a2e;
  border-left-color: #48bb78;
  color: #9ae6b4;
}

.diff-content .diff-line-removed {
  background-color: #3c1e1e;
  border-left-color: #f56565;
  color: #fed7d7;
}

/* Style for diff symbols like +, -, @ */
.diff-content .diff-symbol {
  font-weight: bold;
  padding-right: 0.5em;
}

.diff-content .diff-symbol.added {
  color: #28a745;
}

.diff-content .diff-symbol.removed {
  color: #dc3545;
}

.diff-content .diff-symbol.context {
  color: #6c757d;
}

.diff-content .diff-symbol.added {
  color: #48bb78;
}

.diff-content .diff-symbol.removed {
  color: #f56565;
}

.diff-content .diff-symbol.context {
  color: #a0aec0;
}

/* Version view toggle pills */
.version-view-toggle {
  display: inline-flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.version-view-pill {
  padding: 0.375rem 1rem;
  border: 1px solid var(--border);
  background-color: var(--surface);
  color: var(--text-secondary);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  font-weight: 500;
}

.version-view-pill:hover {
  background-color: var(--hover-bg);
  border-color: var(--primary-color);
}

.version-view-pill.active {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.version-content-wrapper .version-full-text {
  display: block;
}

.version-content-wrapper .version-diff {
  display: none;
}

.version-content-wrapper.show-diff .version-full-text {
  display: none;
}

.version-content-wrapper.show-diff .version-diff {
  display: block;
}

/* Custom modal sizes */
.modal-xlg {
  max-width: 1400px;
  width: 90%;
  margin: 1.75rem auto;
}

@media (max-width: 1500px) {
  .modal-xlg {
    max-width: 85%;
  }
}

@media (min-width: 576px) {
  .modal-xlg {
    margin: 1.75rem auto;
  }
}

/* Fix fullscreen modal centering and sizing */
.modal-fullscreen .modal-xlg,
.modal-fullscreen-sm-down .modal-xlg,
.modal-fullscreen-md-down .modal-xlg,
.modal-fullscreen-lg-down .modal-xlg,
.modal-fullscreen-xl-down .modal-xlg,
.modal-fullscreen-xxl-down .modal-xlg {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}

/* ========================================
   BOOTSTRAP UTILITY OVERRIDES
   ======================================== */

/* Text Utilities */
body {
color: var(--text-75) !important;
}

.text-muted {
  color: var(--text-muted) !important;
}

.text-dark {
  color: var(--text) !important;
}

.text-light {
  color: var(--neutral) !important;
}

.text-white {
  color: var(--text-inverse) !important;
}

.text-black {
  color: var(--text) !important;
}

.text-body {
  color: var(--text-75) !important;
}

.text-bright {
  color: var(--text) !important;
}

/* Background Utilities */
.bg-light {
  background-color: var(--surface) !important;
}

.bg-dark {
  background-color: #1a1a1a !important;
}

.bg-danger, .is-invalid {
  background-color: var(--danger-15) !important;
  border-color: var(--danger) !important;
  color: var(--text) !important;
}

/* Ensure form controls show validation state */
.form-control.is-invalid,
.form-select.is-invalid,
textarea.is-invalid {
  border-color: var(--danger) !important;
  background-color: var(--danger-10) !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
textarea.is-invalid:focus {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 0.25rem var(--danger-25) !important;
}

.bg-white {
  background-color: var(--surface) !important;
}

.bg-body {
  background-color: var(--neutral-bg) !important;
}

.bg-transparent {
  background-color: transparent !important;
}

/* Hero section specific fixes */
section.bg-white {
  background-color: var(--neutral-bg) !important;
}

/* Hero demo boxes */
.hero .bg-white {
  background-color: var(--surface) !important;
}

/* Image preview components */
.image-preview {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

.image-preview.has-image {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

/* Account Template Utilities */
.logo-large {
  height: 140px;
  opacity: 0.9;
}

.divider-line {
  height: 1px;
  background-color: var(--border-heavy);
  border: 0;
  opacity: 1;
}

/* Divider with text (e.g., "or continue with email") */
.divider-container {
  position: relative;
  text-align: center;
  margin: 1.5rem 0;
}

.divider-container .divider-line {
  margin: 0;
}

.divider-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface);
  padding: 0 1rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  white-space: nowrap;
}


/* File input containers - force override everything */
.file-input-container {
  background: var(--surface) !important;
  background-image: none !important;
  background-gradient: none !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  padding: 1rem !important;
  border-radius: 8px !important;
}

.file-input-container * {
  color: var(--text) !important;
}

.file-input-container .text-muted {
  color: var(--neutral) !important;
}

.file-input-container .form-text {
  color: var(--text-secondary) !important;
}

.file-input-container small {
  color: var(--neutral) !important;
}

.character-upload-icon {
  font-size: 4rem !important;
  margin-bottom: 0.5rem !important;
  color: var(--text-secondary) !important;
}

.file-input-container .text-muted {
  text-align: center;
}

.upload-zone {
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  padding: 24px;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-zone:hover {
  border-color: var(--primary-color);
  background-color: rgba(var(--primary-color-rgb), 0.05);
}

.upload-zone.border-primary {
  border-color: var(--primary-color) !important;
  background-color: rgba(var(--primary-color-rgb), 0.1) !important;
}

.character-photo-input,
input[type="file"] {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* Generate button container - with subtle gradient background */
.generate-button-container {
  background: linear-gradient(135deg, var(--primary-10) 0%, var(--accent-10) 100%) !important;
  border-radius: 0.5rem !important;
  border: 1px solid var(--border-heavy) !important;
  color: var(--text) !important;
}

/* Character generate section - uses dashed border style */
.generate-button-container.generate-character-btn {
  /* background: var(--surface) !important; */
  /* background-image: none !important; */
  border: 2px dashed var(--cta) !important;
  border-radius: 12px !important;
}

.generate-icon-container {
  color: var(--text) !important;
}

.generate-icon {
  color: var(--text-secondary) !important;
}

/* Generated character images */
.generated-character-img {
  border: 1px solid var(--border) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

.generated-character-img:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.8) !important;
}

/* Character saved indicator - base styles */
.character-saved-indicator {
  color: var(--text) !important;
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  pointer-events: none !important;
  background-color: var(--surface) !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid var(--text) !important;
  min-width: fit-content !important;
}

.character-saved-indicator i {
  font-size: 1rem !important;
  color: var(--text) !important;
}

/* Dark mode for character saved indicator */
html[data-theme="dark"] .character-saved-indicator {
  background: rgba(45, 55, 72, 0.95) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .character-saved-indicator i {
  color: var(--text) !important;
}

.character-saved-indicator .text-dark {
  color: var(--text) !important;
}

/* Border Utilities */
.border {
  border-color: var(--border) !important;
}

.border-light {
  border-color: var(--border) !important;
}

.border-dark {
  border-color: #1a1a1a !important;
}

.border-top {
  border-top: 1px solid var(--border) !important;
}

.border-bottom {
  border-bottom: 1px solid var(--border) !important;
}

.border-start {
  border-left: 1px solid var(--border) !important;
}

.border-end {
  border-right: 1px solid var(--border) !important;
}

.border-left {
  border-left: 1px solid var(--border) !important;
}

.border-right {
  border-right: 1px solid var(--border) !important;
}

/* Form Elements */
.form-control {
  background-color: var(--primary-10) !important;
  border-color: var(--border-heavy) !important;
  color: var(--text-50) !important;
}

.form-control:focus {
  background-color: var(--surface) !important;
  border-color: var(--primary) !important;
  color: var(--text-75) !important;
  box-shadow: 0 0 0 0.2rem var(--primary-25) !important;
}

.form-control::placeholder {
  color: var(--text-secondary) !important;
}

.form-select,
select {
  background-color: var(--primary-10) !important;
  border-color: var(--border) !important;
  color: var(--text-50) !important;
}

.form-select:focus,
select:focus {
  background-color: var(--surface) !important;
  border-color: var(--primary) !important;
  color: var(--text-75) !important;
  box-shadow: 0 0 0 0.2rem var(--primary-25) !important;
}

/* Option elements inside selects */
.form-select option,
select option {
  background-color: var(--surface) !important;
  color: var(--text) !important;
}

.form-check-input {
  background-color: var(--primary-15) !important;
  border-color: var(--border-heavy) !important;
}

.form-check-input:focus {
  background-color: var(--surface) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 0.2rem var(--primary-25) !important;
}

.form-check-input:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  background-image: none !important; /* Remove default */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.form-check-input:checked::before {
  content: "✓";
  color: var(--primary-dark) !important;
  font-weight: bold;
  font-size: 10px;
}

.form-check-input:checked:focus {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 0.2rem var(--primary-25) !important;
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.dropdown-item {
  color: var(--text) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(116, 185, 255, 0.1) !important;
  color: var(--text) !important;
}

.dropdown-item.active {
  background-color: var(--primary) !important;
  color: var(--primary-dark) !important;
}

.dropdown-divider {
  border-color: var(--border) !important;
}

/* Disabled dropdown items */
.dropdown-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--text-muted) !important;
  pointer-events: none;
}

/* Modals */
.modal-content {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

.modal-header {
  border-bottom-color: var(--border) !important;
}

.modal-footer {
  border-top-color: var(--border) !important;
}

.modal-title {
  color: var(--text) !important;
}

/* Character fullscreen modal CTA styling */
@media (max-width: 768px) {
  .character-fullscreen-cta .btn {
    font-size: 0.9rem !important;
    padding: 0.6rem 1.2rem !important;
  }
}

@media (max-width: 576px) {
  .character-fullscreen-cta .btn {
    font-size: 0.85rem !important;
    padding: 0.5rem 1rem !important;
    width: 90%;
  }
}

/* Close button - normal for light mode, inverted for dark mode */
html[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Tables - basic styles moved to Enhanced Table Styling section */

/* Alerts */
.alert-light {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.alert-dark {
  background-color: #1a1a1a !important;
  border-color: #333 !important;
  color: #e2e8f0 !important;
}

.alert-success {
  background-color: var(--success-15) !important;
  border-color: var(--success) !important;
  color: var(--text) !important;
}

.alert-danger {
  background-color: var(--danger-15) !important;
  border-color: var(--danger) !important;
  color: var(--text) !important;
}

.alert-warning, .alert-info {
  background-color: var(--accent-15) !important;
  border-color: var(--accent-33) !important;
  color: var(--text-75) !important;
}

.alert-warning, .alert-info > .bi {
  color: var(--accent) !important;
}

/* List Groups */
.list-group-item {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.list-group-item:hover {
  background-color: rgba(116, 185, 255, 0.05) !important;
}

.list-group-item.active {
  background-color: var(--primary-25) !important;
  border-color: var(--primary-33) !important;
}

/* Breadcrumbs */
.breadcrumb {
  background-color: var(--surface) !important;
  padding: 0.5rem 1.0rem 0.5rem 1.0rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar but keep functionality */
.breadcrumb::-webkit-scrollbar {
  height: 4px;
}

.breadcrumb::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}

.breadcrumb-item {
  white-space: nowrap;
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--neutral) !important;
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
  float: none !important;
}

.breadcrumb-item.active { color: var(--text-muted)}

/* Mobile breadcrumb fixes */
@media (max-width: 768px) {
  /* Prevent iOS Safari from shrinking text */
  .breadcrumb {
    font-size: 0.875rem;
  }

  /* Fade effect on edges to indicate scrollability */
  nav[aria-label="breadcrumb"] {
    position: relative;
  }

  nav[aria-label="breadcrumb"]::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to right, transparent, var(--surface));
    pointer-events: none;
  }
}

/* Navigation - Consolidated */
.nav-link,
.navbar-nav .nav-link {
  color: var(--text) !important;
  transition: all 0.3s ease !important;
  border-radius: 6px !important;
  margin: 0 2px !important;
  text-decoration: none !important;
}

/* Nav tabs should only have top border radius */
.nav-tabs .nav-link {
  border-radius: 6px 6px 0 0 !important;
}

.nav-link,
.navbar-nav .nav-link.text-cta {
  color: var(--cta) !important;
}

.nav-link:hover,
.nav-link:focus,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  background-color: var(--accent-10) !important;
  color: var(--text) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

.nav-link:hover i {
  transform: scale(1.1) !important;
  transition: transform 0.2s ease !important;
}

.nav-link.active,
.navbar-nav .nav-link.active {
  background-color: var(--accent-15) !important;
  color: var(--text) !important;
  font-weight: 500 !important;
}

.navbar-brand {
  color: var(--text) !important;
}

.navbar-brand:hover,
.navbar-brand:focus {
  color: var(--primary) !important;
}

/* Hamburger menu visibility */
.navbar-light .navbar-toggler-icon,
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2866, 75, 84, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  filter: none !important;
}

.navbar-toggler {
  border-color: rgba(var(--text-rgb), 0.2) !important;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--text-rgb), 0.25) !important;
}

html[data-theme="dark"] .navbar-light .navbar-toggler-icon,
html[data-theme="dark"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28241, 237, 230, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

html[data-theme="dark"] .navbar-toggler {
  border-color: rgba(var(--text-inverse-rgb), 0.2) !important;
}

html[data-theme="dark"] .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--text-inverse-rgb), 0.25) !important;
}

/* Pills and Tabs */
.nav-pills .nav-link {
  color: var(--text) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--primary) !important;
  color: white !important;
}

.nav-tabs {
  border-bottom-color: var(--neutral) !important;
}

.nav-tabs .nav-link {
  color: var(--neutral) !important;
  border-color: transparent !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: var(--border) !important;
  color: var(--primary) !important;
}

.nav-tabs .nav-link.active {
  background-color: var(--primary-15) !important;
  border-color: var(--primary) var(--primary) var(--background) !important;
  color: var(--text) !important;
}

.card-tabs {
  border-bottom-color: var(--neutral) !important;
}

.card-tabs .card-tab-link {
  color: var(--neutral) !important;
  border-color: transparent !important;
}

.card-tabs .card-tab-link:hover,
.card-tabs .card-tab-link:focus {
  border-color: var(--border) !important;
  color: var(--neutral-hover) !important;
}

.card-tabs .card-tab-link.active {
  background-color: var(--primary-25) !important;
  color: var(--text) !important;
}

/* Accordion */
.accordion-item {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

.accordion-header .accordion-button {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-bottom-color: var(--border) !important;
}

.accordion-button:not(.collapsed) {
  background-color: var(--primary-10) !important;
  color: var(--primary-dark) !important;
}

.accordion-button:focus {
  box-shadow: none !important;
  border-color: var(--border) !important;
}

.accordion-body {
  background-color: var(--surface) !important;
  color: var(--text) !important;
}

/* Offcanvas */
.offcanvas {
  background-color: var(--surface) !important;
  color: var(--text) !important;
}

.offcanvas-header {
  border-bottom-color: var(--border) !important;
}

.offcanvas-title {
  color: var(--text) !important;
}

/* Tooltips and Popovers */
.tooltip .tooltip-inner {
  background-color: #1a1a1a !important;
  color: #f7fafc !important;
}

.tooltip .tooltip-arrow::before {
  border-top-color: #1a1a1a !important;
  border-bottom-color: #1a1a1a !important;
}

.popover {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

.popover-header {
  background-color: rgba(116, 185, 255, 0.1) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text) !important;
}

.popover-body {
  color: var(--text) !important;
}

/* Progress Bars */
.progress {
  background-color: rgba(116, 185, 255, 0.1) !important;
}

/* Badges */
.badge.bg-light {
  background-color: var(--border) !important;
  color: var(--text) !important;
}

.badge.bg-dark {
  background-color: #1a1a1a !important;
  color: #f7fafc !important;
}

.badge.bg-info,
.bg-info {
  background-color: #0c63e4 !important;
  color: #f7fafc !important;
}

.badge.bg-warning,
.bg-warning {
  background-color: var(--neutral) !important;
  color: var(--text) !important;
}

/* Close buttons and other controls */
/* Close button - normal for light mode, inverted for dark mode */
html[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Card Components */
.card-title {
  color: var(--text) !important;
}

.card-text {
  color: var(--text-75) !important;
}

.card-subtitle {
  color: var(--text-secondary) !important;
}

.card-header {
  background-color: var(--surface) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text);
}

.card-footer {
  background-color: var(--surface) !important;
  border-top-color: var(--border) !important;
  color: var(--text) !important;
}

/* Typography Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: var(--text);
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  color: var(--text);
}

/* Lead and other text elements */
.lead {
  color: var(--text)
}

.text-decoration-none {
  text-decoration: none !important;
  color: inherit !important;
}

/* Neutral links - for footer, navigation, etc. */
.link-neutral,
footer a {
  text-decoration: none !important;
  color: inherit !important;
  transition: all 0.2s ease;
}

.link-neutral:hover,
footer a:hover {
  color: inherit !important;
  text-decoration: underline !important;
  filter: brightness(1.25);
}

small,
.small {
  font-size: 0.875em;
}

/* Blockquote */
blockquote {
  color: var(--text) !important;
  border-left-color: var(--border) !important;
}

.blockquote {
  color: var(--text) !important;
}

.blockquote-footer {
  color: var(--text-secondary) !important;
}

/* Code and Pre */
code {
  background-color: rgba(116, 185, 255, 0.1) !important;
  color: var(--secondary) !important;
}

pre {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.pre-scrollable {
  background-color: var(--surface) !important;
}

/* Form Labels and Help Text */
.form-label {
  color: var(--text) !important;
}

.form-text {
  color: var(--text-muted) !important;
}

.form-check-label {
  color: var(--text) !important;
}

.invalid-feedback {
  color: var(--danger-75) !important;
}

.invalid-feedback.text-danger {
  color: var(--danger) !important;
}

.valid-feedback {
  color: #48bb78 !important;
}

/* Input Groups */
.input-group-text {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Spinners */
.spinner-border {
  color: var(--primary) !important;
}

.spinner-grow {
  color: var(--primary) !important;
}

/* Loading content */
.loading-content {
  background-color: var(--surface) !important;
  color: var(--text) !important;
}

.spinner-border.text-primary {
  color: var(--primary) !important;
}

/* Toast notifications */
.toast {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.toast-header {
  background-color: rgba(116, 185, 255, 0.05) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text) !important;
}

.toast-body {
  color: var(--text) !important;
}

/* Carousel */
.carousel-caption {
  color: #f7fafc !important;
}

.carousel-indicators [data-bs-target] {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

.carousel-indicators .active {
  background-color: white !important;
}

/* Utility classes for margin/padding don't need color changes, but text utilities do */
.text-decoration-underline {
  color: inherit !important;
}

.text-nowrap {
  color: inherit !important;
}

.text-break {
  color: inherit !important;
}

.text-lowercase,
.text-uppercase,
.text-capitalize {
  color: inherit !important;
}

/* Fix for any remaining text elements - Use specific selectors instead of universal */
main p {
  color: var(--text);
}

/* Only inherit color for generic content containers, not functional divs */
.content-text div,
.card-body div:not([class*="btn"]):not([class*="form"]):not([class*="input"]) {
  color: inherit;
}

/* Override Bootstrap defaults for semantic text elements */
div, strong, b, em, i, mark, small, del, ins, sub, sup, span {
  color: inherit;
}

/* Shadows - reduce intensity in dark mode */
.shadow-sm {
  box-shadow: 0 .125rem .25rem var(--shadow-sm) !important;
}

.shadow {
  box-shadow: 0 .5rem 1rem var(--shadow-md) !important;
}

.shadow-lg {
  box-shadow: 0 1rem 3rem var(--shadow-lg) !important;
}

/* Character Card Components */
.character-card-selectable {
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.character-card-selectable:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.character-card-selectable:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

.character-card-selectable.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}

/* Character Image Styling - Override any conflicting rules */
.card-body .character-image.mb-3 {
  cursor: pointer;
  width: 100% !important;
  max-width: 300px;
  height: auto !important;
  border-radius: 8px;
  transition: transform 0.3s ease, opacity 0.2s ease;
  object-fit: unset !important;
  margin: 0 auto 1rem auto !important;
  padding: 0 !important;
  display: block;
}

.character-card-selectable:hover .character-image {
  opacity: 0.9;
}

/* Generic Interactive Card Component - Clean, simple styling */
.interactive-card {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--surface);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.interactive-card:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 2px 8px rgba(9, 132, 227, 0.1);
}

.interactive-card.selected {
  border-color: var(--primary) !important;
  background: rgba(9, 132, 227, 0.05);
}

/* Character Choice Cards - Use the generic interactive card */
.choice-card {
  height: 100%;
}

.choice-option {
  position: relative;
}

.choice-option.selected .choice-card::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--primary);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  z-index: 10;
}

.choice-icon i {
  opacity: 0.8;
}

.choice-card:hover .choice-icon i {
  opacity: 1;
  transform: scale(1.1);
  transition: all 0.3s ease;
}

/* Generic Clickable Overlay - Makes any child element cover full interactive-card area */
.interactive-card .clickable-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

/* Ensure interactive-card has relative positioning for overlays */
.interactive-card {
  position: relative;
}

/* Draft Thumbnails */
.draft-thumbnail {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.draft-thumbnail:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

/* Universal Selection Cards - Used in wizard steps for styles, themes, etc. */
.selection-card {
  border: 2px solid transparent;
  border-radius: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
  height: 100%;
}

.selection-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px var(--primary-15);
}

.selection-card.selected {
  border-color: var(--primary);
}

.selection-card.selected::after {
  content: "✓";
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--primary);
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  z-index: 10;
}

.selection-card-text-only, .selection-card-list-item {
  border-color: var(--neutral-25);
}

.selection-card.selection-card-list-item.selected {
  background-color: var(--primary-15);
}

/* Text-only selection cards - hide checkmark for cards with minimal content */
.selection-card.selection-card-text-only.selected::after {
  display: none;
}

.selection-card-text-only.selected, .selection-card-list-item.selected {
  background-color: var(--primary-15);
}

/* Selection card headers need special handling for selected state */
.selection-card-list-item.selected .card-header {
  background-color: var(--primary-25) !important;
  border-top-left-radius: 0 !important;
}

.selection-option {
  position: relative;
}

.selection-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/* Custom radio button with checkmark for list items */
.selection-card-list-item {
  position: relative;
  padding-left: 4rem;
}

.selection-card-list-item::before {
  content: "";
  position: absolute;
  left: 1.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid var(--neutral-50);
  border-radius: 50%;
  background-color: var(--surface);
  transition: all 0.2s ease;
  z-index: 2;
}

.selection-card-list-item.selected::before {
  background-color: var(--primary);
  border-color: var(--primary);
}

.selection-card-list-item.selected::after {
  content: "✓";
  position: absolute;
  left: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 1.1rem;
  font-weight: bold;
  z-index: 3;
}

.style-option {
  position: relative;
}

.style-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}


.selection-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1rem;
  aspect-ratio: 0.75;
}

.selection-placeholder {
  width: 100%;
  height: 400px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  aspect-ratio: 0.75;
}

.selection-info {
  text-align: left;
}

.selection-info h5 {
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.selection-tagline {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 0;
}

/* Draft thumbnail selected state (character modal) */
.draft-thumbnail.selected {
  border-color: var(--primary) !important;
  position: relative;
}

.draft-thumbnail.selected::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.75rem;
  z-index: 1;
}

/* Project Type Selection Cards */
.project-card {
  border: 2px solid transparent;
  border-radius: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
}

.project-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(9, 132, 227, 0.15);
}

.project-card.featured {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(9, 132, 227, 0.02) 0%, rgba(255, 118, 117, 0.02) 100%);
}

.project-card.featured .card-header {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
}

.project-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 2rem;
  color: white;
}

.project-icon.character {
  background: linear-gradient(135deg, var(--accent), var(--accent));
}

.project-icon.single-page {
  background: linear-gradient(135deg, var(--primary), var(--accent));
}

.project-icon.full-book {
  background: linear-gradient(135deg, var(--primary), var(--accent));
}

.feature-list {
  text-align: left;
  margin: 1.5rem 0;
}

.feature-list li {
  padding: 0.25rem 0;
}

.feature-list .bi {
  color: var(--primary);
  margin-right: 0.5rem;
}

/* Content Type Cards (Compact) */
.content-type-card {
  border: 2px solid var(--border);
  border-radius: 12px;
  transition: all 0.25s ease;
  cursor: pointer;
  background: var(--surface);
  position: relative;
}

.content-type-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(var(--primary-rgb), 0.15);
}

.content-type-card.featured {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--primary-5) 0%, var(--accent-5) 100%);
}

.content-type-preview {
  width: 120px;
  min-width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
}

@media (max-width: 575px) {
  .content-type-preview {
    width: 80px;
    min-width: 80px;
    height: 80px;
  }

  .content-type-preview-placeholder {
    font-size: 2rem;
  }

  .content-type-card h5 {
    font-size: 1.1rem;
  }

  .content-type-card .small {
    font-size: 0.8rem;
  }
}

.content-type-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-type-preview-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: white;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
}

.content-type-arrow {
  color: var(--text-25);
  font-size: 1.25rem;
  transition: all 0.25s ease;
  margin-left: auto;
}

.content-type-card:hover .content-type-arrow {
  color: var(--primary);
  transform: translateX(4px);
}

.badge-popular {
  position: absolute;
  top: -8px;
  right: 12px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

/* Color Format Preview (3:4 portrait ratio) */
.color-format-preview {
  width: 90px;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
}

/* XXL screens: full width vertical layout */
@media (min-width: 1400px) {
  .color-format-preview {
    width: 100%;
  }
}

.color-format-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.color-format-preview-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
}

/* XXL screens: larger emoji */
@media (min-width: 1400px) {
  .color-format-preview-placeholder {
    font-size: 3rem;
  }
}

/* Art Style Preview (3:4 portrait ratio) */
.art-style-preview {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
}

.art-style-preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.art-style-preview-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  text-align: center;
  padding: 0.5rem;
  color: white;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
}

/* Modal with Scrollable Body and Sticky Footer */
.modal-scrollable {
  height: 80vh;
}

.modal-scrollable .modal-body {
  overflow-y: auto;
  max-height: calc(80vh - 140px); /* Account for header + footer height */
}

/* On smaller viewports, use more of the available space */
@media (max-height: 600px) {
  .modal-scrollable {
    height: 95vh;
  }

  .modal-scrollable .modal-body {
    max-height: calc(95vh - 120px);
  }
}

/* Modal Navigation Arrows - Reusable for scene and page modals */
.modal-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1060; /* Above modal content */
  background: rgba(0, 0, 0, 0.7);
  border: none;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.2s ease;
  opacity: 0.8;
}

.modal-nav-arrow:hover {
  background: rgba(0, 0, 0, 0.9);
  opacity: 1;
  color: white;
  transform: translateY(-50%) scale(1.1);
}

.modal-nav-arrow:disabled {
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
  transform: translateY(-50%);
}

.modal-nav-prev {
  left: 30px;
}

.modal-nav-next {
  right: 30px;
}

/* Position arrows relative to the image container */
.modal-image-container {
  position: relative;
}

/* Hide on small screens */
@media (max-width: 768px) {
  .modal-nav-arrow {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .modal-nav-prev {
    left: 15px;
  }

  .modal-nav-next {
    right: 15px;
  }
}

/* =======================
   Character Wizard Tabs
   ======================= */

/* Tab container styling */
.character-wizard-container {
  background: transparent;
}

.character-wizard-tabs .card-tabs {
  border-bottom: 2px solid #e9ecef;
  margin-bottom: 0;
}

.character-wizard-tabs .card-tab-link {
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  font-weight: 500;
  padding: 12px 20px;
  margin-bottom: -2px;
  transition: all 0.2s ease;
}

.character-wizard-tabs .card-tab-link.tab-error {
  border-top: 1px solid var(--danger) !important;
  border-left: 1px solid var(--danger) !important;
  border-right: 1px solid var(--danger) !important;
  background: var(--danger-15) !important;
  color: var(--danger) !important;
  font-weight: 500;
}

.character-wizard-tabs .card-tab-link:hover {
  border-bottom-color: var(--primary);
  color: var(--primary);
  background: transparent;
}

.character-wizard-tabs .card-tab-link.active {
  border-bottom-color: var(--primary);
  color: var(--primary);
  background: transparent;
  font-weight: 600;
}

/* Add character tab styling */
.character-wizard-tabs .card-tab-link:has(.bi-plus-circle) {
  color: var(--accent);
  border-bottom-color: transparent;
}

.character-wizard-tabs .card-tab-link:has(.bi-plus-circle):hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent);
}

/* Remove button in tab - using proper CSS class, not JS selector */
.character-wizard-tabs .card-tab-link .tab-remove-btn {
  border: 1px solid var(--primary-33);
  background: var(--primary-25);
  color: var(--text-50);
  padding: 4px 8px;
  margin-left: 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.character-wizard-tabs .card-tab-link .tab-remove-btn:hover {
  background: var(--primary-75);
  color: var(--primary-dark);
  border-color: var(--primary);
  transform: scale(1.05);
}

/* Tab content styling */
.character-tab-content {
  min-height: 400px;
}

.character-tab-content .tab-pane {
  animation: fadeIn 0.3s ease-in-out;
}

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

/* Legacy support - keep old selector for existing components */
.source-selection-step .upload-zone {
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.source-selection-step .upload-zone:hover {
  border-color: var(--primary-color);
  background-color: rgba(var(--primary-color-rgb), 0.05);
}

.source-selection-step .upload-zone.border-primary {
  border-color: var(--primary-color) !important;
  background-color: rgba(var(--primary-color-rgb), 0.1) !important;
}

/* Interactive cards - reusable across all components */
.interactive-card {
  transition: all 0.2s ease;
  cursor: pointer;
}

.interactive-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Legacy support - keep old selector for existing components */
.source-selection-step .interactive-card {
  transition: all 0.2s ease;
  cursor: pointer;
}

.source-selection-step .interactive-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* =======================
   Generation Form Step
   ======================= */

.generation-form-step .card-header {
  background: var(--bs-gray-50);
  border-bottom: 1px solid #dee2e6;
}

/* =======================
   Generation Progress Step
   ======================= */

.generation-progress-step .card {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: none;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.generation-progress-step .spinner-border {
  border-width: 4px;
}

/* =======================
   Character Results Step
   ======================= */

.character-results-step .card-header {
  background: var(--bs-gray-50);
  border-bottom: 1px solid #dee2e6;
}

.character-results-step .badge.bg-success {
  background-color: #28a745 !important;
}

/* Character image styling */
.character-results-step .js-character-image {
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.2s ease;
}

.character-results-step .js-character-image:hover {
  transform: scale(1.02);
}

/* =======================
   JavaScript-only Classes (separated from styling)
   ======================= */

/* Tab management */
.js-tab-button { /* Functionality only - styling via .nav-link */ }
.js-add-character-tab { /* Functionality only - styling via .nav-link */ }
.js-remove-tab { /* Functionality only - styling defined above */ }
.js-tab-content { /* Functionality only - no additional styling */ }

/* Source selection */
.js-upload-zone { /* Functionality only - styling via .upload-zone */ }
.js-photo-upload { /* Functionality only - no additional styling */ }
.js-browse-file { /* Functionality only - styling via .btn */ }
.js-select-recent { /* Functionality only - styling via .interactive-card */ }
.js-browse-all { /* Functionality only - styling via .interactive-card or .btn */ }

/* Generation flow */
.js-character-name { /* Functionality only - styling via .form-control */ }
.js-character-instructions { /* Functionality only - styling via .form-control */ }
.js-generate-character { /* Functionality only - styling via .btn */ }
.js-cancel-generation { /* Functionality only - styling via .btn */ }

/* Results actions */
.js-regenerate-character { /* Functionality only - styling via .btn */ }
.js-save-character { /* Functionality only - styling via .btn */ }
.js-view-details { /* Functionality only - styling via .btn */ }
.js-view-drafts { /* Functionality only - styling via .btn */ }
.js-start-over { /* Functionality only - styling via .btn */ }

/* Navigation */
.js-finish-btn { /* Functionality only - styling via .btn */ }
.js-next-btn { /* Functionality only - styling via .btn */ }

/* Data holders */
.js-character-id { /* Functionality only - no styling */ }
.js-source-image-id { /* Functionality only - no styling */ }
.js-character-status { /* Functionality only - no styling */ }
.js-generation-id { /* Functionality only - no styling */ }

/* State management */
.js-character-image { /* Functionality only - styling via specific selectors above */ }
.js-generation-form { /* Functionality only - no additional styling */ }

/* =======================
   Error States
   ======================= */

.error-container .card.border-danger {
  border-color: #dc3545 !important;
  background: #fff5f5;
}

/* =======================
   Loading States
   ======================= */

.character-tab-container .spinner-border {
  width: 2rem;
  height: 2rem;
}

.character-tab-container .text-center.py-5 {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* =======================
   Responsive Adjustments
   ======================= */

@media (max-width: 768px) {
  .character-wizard-tabs .nav-link {
    padding: 8px 12px;
    font-size: 14px;
  }

  .character-wizard-tabs .nav-link .js-remove-tab {
    margin-left: 4px;
  }

  .character-tab-content {
    padding: 1rem 0;
  }

  .source-selection-step .upload-zone {
    padding: 2rem 1rem !important;
  }

  .generation-progress-step .card-body {
    padding: 2rem 1rem !important;
  }
}

/* Enhanced Table Styling for Billing */
.table {
  color: var(--text);
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

.table thead th {
  background-color: var(--background) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  font-weight: 600;
  padding: 1rem 0.75rem;
}

.table tbody td {
  background-color: var(--surface) !important;
  color: var(--text);
  border-color: var(--border) !important;
  padding: 0.875rem 0.75rem;
  vertical-align: middle;
}

.table-hover > tbody > tr:hover > td {
  background-color: var(--primary-5) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--background-15) !important;
}

/* Table light header override */
.table-light {
  background-color: var(--background) !important;
  border-color: var(--border) !important;
}

.table-light th {
  background-color: var(--background) !important;
  color: var(--text-75) !important;
  border-color: var(--border) !important;
}

/* Responsive table wrapper */
.table-responsive {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Ensure table maintains minimum width for proper layout */
.table-responsive .table {
  min-width: 800px;
  margin-bottom: 0;
  white-space: nowrap;
}

/* Better spacing for table cells */
.table td, .table th {
  padding: 0.75rem 1rem;
  vertical-align: middle;
}

/* Specific column width constraints for billing tables */
.table td:first-child, .table th:first-child {
  min-width: 120px; /* Type/Status column */
}

.table td:nth-child(2), .table th:nth-child(2) {
  min-width: 200px; /* Description column */
}

.table td:nth-child(3), .table th:nth-child(3) {
  min-width: 100px; /* Amount column */
  text-align: right;
}

.table td:last-child, .table th:last-child {
  min-width: 120px; /* Date column */
  text-align: right;
}

/* Special handling for subscription tables with more columns */
.table.subscription-table {
  min-width: 1000px;
}

.table.subscription-table td:nth-child(2),
.table.subscription-table th:nth-child(2) {
  min-width: 250px; /* Product description */
}

.table.subscription-table td:nth-child(4),
.table.subscription-table th:nth-child(4) {
  min-width: 150px; /* Billing interval */
}

/* Small table variant - same size as <small> text */
.table-sm {
  font-size: 0.875rem;
}

.table-sm td, .table-sm th {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  vertical-align: middle;
}

/* Improve text wrapping for small screens */
@media (max-width: 768px) {
  .table td, .table th {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }

  .table-responsive {
    font-size: 0.875rem;
  }
}

/* Smooth scrolling on mobile */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* Dark mode specific overrides - only where needed */
html[data-theme="dark"] .table-hover > tbody > tr:hover > td {
  background-color: var(--primary-10) !important;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--background-25) !important;
}

/* ==================================================
   LANDING PAGE COMPONENTS - REUSABLE ACROSS SITE
   ================================================== */

/* ===== CONVERSION HERO SECTION ===== */
.conversion-hero {
  background: linear-gradient(135deg, var(--background) 0%, var(--surface) 40%, var(--primary-5) 100%);
  border-bottom: 1px solid var(--border);
}

/* Landing Signup Container */
.landing-signup-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px var(--text-5);
}

.landing-signup-form .form-control {
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.landing-signup-form .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-10);
}

.whitespace-nowrap {
  white-space: nowrap;
}

/* Trust Signals */
.landing-trust-signals {
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}

/* ===== BEFORE/AFTER SHOWCASE ===== */
.before-after-showcase {
  padding: 2rem;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px var(--text-5);
}

.showcase-source-section,
.showcase-results-section {
  flex: 1;
  max-width: 45%;
}

.showcase-arrow {
  flex: 0 0 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 1rem;
}

.showcase-source-image,
.showcase-character-previews {
  background: var(--background);
  border-radius: 12px;
  padding: 1rem;
  border: 2px solid var(--border);
}

.showcase-demo-image {
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  object-fit: contain;
  width: auto;
  height: auto;
}

.showcase-placeholder {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background);
  border-radius: 8px;
  border: 2px dashed var(--border);
}

.showcase-character-previews {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.showcase-preview-item {
  position: relative;
  text-align: center;
}

.showcase-preview-item .showcase-demo-image {
  max-height: 80px;
  width: 100%;
  object-fit: cover;
}

.showcase-style-badge {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--primary-dark);
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
}

/* ===== CHARACTER SHOWCASE GRID ===== */
.landing-character-showcase {
  background: var(--background);
}

.showcase-source-highlight {
  text-align: center;
  padding: 2rem;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--border);
}

.showcase-source-container {
  position: relative;
  display: inline-block;
}

.showcase-source-featured {
  max-width: 300px;
  max-height: 300px;
  border-radius: 12px;
  box-shadow: 0 4px 16px var(--text-10);
  object-fit: contain;
}

.showcase-source-label {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}

/* Character Grid Layout - now uses Bootstrap grid (row/col-*) */

.showcase-character-item {
  position: relative;
}

.showcase-character-card {
  background: var(--surface);
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
  position: relative;
}

.showcase-character-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--text-10);
}

.showcase-character-image-container {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.showcase-character-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.showcase-character-card:hover .showcase-character-image {
  transform: scale(1.05);
}

.showcase-style-badge-overlay {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  text-align: center;
}

.showcase-character-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.showcase-character-card:hover .showcase-character-actions {
  opacity: 1;
}

/* Stats Section */
.showcase-stats {
  background: var(--surface);
  border-radius: 16px;
  padding: 2rem;
  border: 1px solid var(--border);
}

.stat-item h3 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

/* ===== CTA SECTIONS ===== */
.landing-cta-primary {
  background: linear-gradient(135deg, var(--accent-5) 0%, var(--primary-5) 100%);
}

.landing-cta-secondary {
  background: var(--surface);
}

.landing-cta-email {
  background: linear-gradient(135deg, var(--primary-5) 0%, var(--background) 100%);
}

/* Testimonial Card */
.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px var(--text-5);
}

.testimonial-avatar {
  flex-shrink: 0;
}

/* ===== SOCIAL SHARING ===== */
.landing-social-share {
  background: var(--surface);
}

.social-share-toolbar {
  flex-wrap: wrap;
}

.social-share-btn {
  transition: all 0.2s ease;
}

.social-share-btn:hover {
  transform: translateY(-1px);
}

/* Viral Stats */
.viral-stats {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.viral-stat-item {
  min-width: 120px;
}

.viral-stat-number {
  font-size: 1.5rem;
  display: block;
}

/* ===== MOBILE STICKY CTA ===== */
.mobile-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 0.75rem;
  box-shadow: 0 -2px 10px var(--text-10);
}

.mobile-sticky-cta .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0.5rem !important;
}

/* Override problematic responsive margin for sticky CTA only */
.mobile-sticky-cta .row > [class*="col-"] {
  margin-top: 0 !important;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
  .conversion-hero {
    padding: 2rem 0;
  }

  .before-after-showcase {
    padding: 1rem;
    flex-direction: column;
    text-align: center;
  }

  .before-after-showcase .d-flex {
    flex-direction: column !important;
    gap: 2rem;
  }

  .showcase-source-section,
  .showcase-results-section {
    max-width: 100%;
  }

  .showcase-arrow {
    transform: rotate(90deg);
    margin: 0;
  }

  .landing-signup-container {
    padding: 1rem;
  }

  .stat-item h3 {
    font-size: 2rem;
  }
}

@media (max-width: 576px) {
  .landing-signup-form .d-flex {
    flex-direction: column !important;
  }

  .viral-stats {
    flex-direction: column;
    gap: 1rem;
  }

  .social-share-toolbar {
    justify-content: center !important;
  }
}

/* Featured Packs Collage */
.featured-collage-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    aspect-ratio: 1;

}

.featured-collage-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--text-10);
}

.featured-collage-item img {
    width: 100%;
    height: 100%;
    object-position: center top !important;
}

/* Picture-in-Picture overlay */
.pip-overlay {
    position: absolute;
    width: 75px;
    height: 75px;
    border-radius: 8px;
    border: 2px solid var(--surface);
    box-shadow: 0 2px 8px var(--text-20);
    overflow: hidden;
}

.pip-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pip-top-left { top: 8px; left: 8px; }
.pip-top-right { top: 8px; right: 8px; }
.pip-bottom-left { bottom: 8px; left: 8px; }
.pip-bottom-right { bottom: 8px; right: 8px; }

/* Grid quartet layout - 2x2 grid of character images */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    height: 100%;
    width: 100%;
}

.grid-item {
    overflow: hidden;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Connected before/after styling */
.before-after-left {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.before-after-right {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Mini showcase small images - prevent cropping */
.mini-showcase-small img {
    object-fit: contain !important;
    object-position: center !important;
}

/* Hero demo images - prevent head cropping */
.hero-demo-image {
    object-position: center top !important;
}

/* ======================================
   Seamless Collage - Responsive Layout
   ====================================== */

/* Desktop: Seamless horizontal collage */
@media (min-width: 768px) {
    .seamless-collage {
        gap: 0 !important;
        margin: -1px; /* Slight negative margin to overlap borders */
    }

    .seamless-collage .featured-collage-item {
        margin: 1px; /* Small margin to prevent actual overlap while maintaining seamless look */
        border-radius: 0 !important; /* Remove border radius for seamless connection */
        transition: transform 0.2s ease, box-shadow 0.2s ease, z-index 0s ease;
    }

    /* Widget-specific desktop dimensions */
    .hero-pip-widget {
        width: 150px;
        height: 200px;
    }

    .before-after-widget {
        width: 300px;
        height: 200px;
    }

    .mini-showcase-widget {
        width: 300px;
        height: 200px;
    }

    .mini-showcase-small {
        width: 75px;
        height: 99px;
    }

    .grid-quartet-widget {
        width: 200px;
        height: 200px;
    }

    /* Manual edge classes - applied via JavaScript */
    .seamless-collage .collage-first {
        border-top-left-radius: 12px !important;
        border-bottom-left-radius: 12px !important;
    }

    .seamless-collage .collage-last {
        border-top-right-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }

    /* Mini showcase seamless layout */
    .seamless-collage .d-flex.gap-1 {
        gap: 0 !important; /* Remove spacing for seamless effect */
    }

    .seamless-collage .d-flex.flex-column.gap-1 {
        gap: 0 !important; /* Remove vertical spacing in right column */
    }

    /* Mini showcase specific corner rounding */
    .seamless-collage .mini-showcase-small:first-child {
        border-top-right-radius: 12px !important; /* Top-right corner of top-right image */
        border-bottom-right-radius: 0 !important; /* Ensure no bottom rounding */
    }

    .seamless-collage .mini-showcase-small:last-child {
        border-bottom-right-radius: 12px !important; /* Bottom-right corner of bottom-right image */
        border-top-right-radius: 0 !important; /* Ensure no top rounding */
    }
}

/* Mobile: Stacked cards with individual rounding */
@media (max-width: 767px) {
    .seamless-collage {
        flex-direction: column !important;
        gap: 1rem !important; /* Restore spacing for stacked layout */
        margin: 0; /* Remove negative margin */
        align-items: center; /* Center the cards */
    }

    /* Universal mobile widget sizing */
    .seamless-collage .featured-collage-item,
    .seamless-collage > a > div {
        border-radius: 12px !important; /* All corners rounded on mobile */
        margin: 0; /* Remove margin system */
        width: 100% !important; /* Full width containers */
        max-width: 350px; /* Reasonable max width */
        height: 200px !important; /* Consistent height across all widgets */
    }

    /* Reset all desktop-specific radius rules for mobile */
    .seamless-collage .collage-first,
    .seamless-collage .collage-last,
    .seamless-collage .mini-showcase-small:first-child,
    .seamless-collage .mini-showcase-small:last-child {
        border-radius: 12px !important; /* Override with full rounding */
    }

    /* Hero pip mobile layout */
    .hero-pip-widget {
        width: 100% !important;
        max-width: 350px;
        height: 200px;
    }

    /* Before/after mobile layout - stack vertically */
    .before-after-widget {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 350px;
        height: 300px !important; /* Taller to accommodate stacking */
    }

    .before-after-widget .featured-collage-item {
        height: 50% !important; /* Split height evenly */
    }

    /* Mini showcase mobile layout - reorganize */
    .mini-showcase-widget {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 350px;
        height: 250px !important;
        gap: 0.5rem !important;
    }

    .mini-showcase-widget .mini-showcase-main {
        height: 60% !important;
    }

    .mini-showcase-widget .mini-showcase-side {
        flex-direction: row !important;
        height: 35% !important;
        gap: 0.5rem !important;
    }

    .mini-showcase-widget .mini-showcase-small {
        width: 50% !important;
        height: 100% !important;
    }

    /* Grid quartet mobile layout - maintain 2x2 grid */
    .grid-quartet-widget {
        width: 100% !important;
        max-width: 350px;
        height: 200px;
    }

    .grid-quartet-widget .grid-container {
        gap: 3px; /* Slightly larger gap on mobile for better separation */
    }

    .grid-quartet-widget .grid-item {
        border-radius: 6px; /* Individual rounding for grid items on mobile */
        overflow: hidden;
    }
}

/* Hover effects - applies to all screen sizes */
.seamless-collage .featured-collage-item:hover {
    z-index: 10; /* Bring hovered item to front */
    transform: scale(1.02) translateY(-2px);
    box-shadow: 0 8px 24px var(--text-25);
}

/* ======================================
   Character Packs Collage (minimal styles)
   ====================================== */

.packs-collage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    max-height: 300px;
    overflow: hidden;
}

.pack-collage-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pack-collage-item:hover {
    transform: translateY(-2px);
}

.pack-collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .packs-collage-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        max-height: 200px;
    }
}

/* Compact centered layout for packs list grid */
.packs-list-compact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.packs-list-compact > a {
    flex: 0 0 auto;
}

/* Mobile: 2 items per row, smaller size */
@media (max-width: 768px) {
    .packs-list-compact {
        gap: 0.5rem;
        max-height: none !important;
        overflow: visible !important;
    }

    .packs-list-compact > a {
        flex: 0 0 calc(50% - 0.25rem);
        max-width: calc(50% - 0.25rem);
    }

    .packs-list-compact .grid-quartet-widget {
        max-width: 100%;
    }

    /* Mobile collage: 2 items per row, all 4x4 grids */
    .seamless-collage {
        flex-direction: row !important;
        gap: 0.5rem !important;
    }

    .seamless-collage .collage-mobile-item {
        flex: 0 0 calc(50% - 0.25rem) !important;
        max-width: calc(50% - 0.25rem) !important;
        width: calc(50% - 0.25rem) !important;
    }

    .seamless-collage .collage-mobile-item .grid-quartet-widget {
        max-width: 100%;
        width: 100% !important;
        height: auto !important;
    }

    .seamless-collage .collage-mobile-item .featured-collage-item {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Template Builder Pages Layout */
.page-list-sidebar {
    flex: 0 0 320px;
    max-width: 320px;
}

.page-editor-panel {
    flex: 1;
    min-width: 0;
}

@media (max-width: 991px) {
    .page-list-sidebar {
        flex: 0 0 280px;
        max-width: 280px;
    }
}

@media (max-width: 767px) {
    .page-list-sidebar,
    .page-editor-panel {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Responsive Font Size Utilities */
.fs-responsive-lead {
    font-size: 1rem;
}

@media (min-width: 768px) {
    .fs-responsive-lead {
        font-size: 1.25rem;
    }
}

/* Pulse Animation - Reusable */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.pulse {
    animation: pulse 2s infinite;
}

.pulse-slow {
    animation: pulse 3s infinite;
}

.pulse-fast {
    animation: pulse 1s infinite;
}



/* ============================================
   Character Ideas Gallery
   ============================================ */

.character-idea-card {
    cursor: pointer;
}

.character-idea-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px var(--text-10);
}

.character-idea-prompt {
    padding: 0.75rem;
    min-height: 60px;
    display: flex;
    align-items: center;
}

.character-idea-prompt small {
    font-size: 0.875rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Color Format Filter Pills - Larger & More Prominent */
.color-format-filter-container {
    background: var(--surface);
    border: 2px solid var(--border-heavy);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.color-format-filter-container h5 {
    color: var(--text);
    font-weight: 600;
    margin-bottom: 1rem;
}

.color-format-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.filter-pill-lg {
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
    font-weight: 500;
    border-width: 2px;
}

/* Native Ad Cards */
.native-ad-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.native-ad-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.native-ad-blurred-bg {
    filter: blur(8px);
}

.native-ad-blur-box {
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.8;
}

.native-ad-blur-box:nth-child(2n) {
    background: var(--accent);
}

.native-ad-blur-box:nth-child(3n) {
    background: var(--cta);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .color-format-pills {
        gap: 0.5rem;
    }

    .filter-pill-lg {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .color-format-filter-container {
        padding: 1rem;
    }
}