/* Characters — look cool. Logo stays exact (navbar brand). Features untouched. */

body.theme-characters {
  --c-pink: #ff4fd8;
  --c-mag: #c44cff;
  --c-vio: #7b5cff;
  --c-cyan: #3de7ff;
  --c-panel: rgba(8, 6, 22, 0.92);
  background-color: #03020a !important;
  background-image:
    radial-gradient(900px 520px at 80% -5%, rgba(255, 79, 216, 0.28), transparent 60%),
    radial-gradient(800px 480px at -5% 30%, rgba(61, 231, 255, 0.14), transparent 55%),
    radial-gradient(700px 400px at 50% 110%, rgba(123, 92, 255, 0.18), transparent 50%) !important;
  background-attachment: fixed !important;
}

body.theme-characters .char-page-title,
body.theme-characters .hero-grad,
body.theme-characters h1.hero-grad {
  background: linear-gradient(100deg, #fff 0%, #ff4fd8 35%, #c44cff 70%, #7ab8ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 32px rgba(255, 79, 216, 0.45)) !important;
  font-weight: 900 !important;
}

/* Glowing cards */
body.theme-characters .chars-board .chars-col-prompt,
body.theme-characters .chars-board .chars-col-gens,
body.theme-characters .chars-board .chars-col-adv,
body.theme-characters .chars-col-prompt,
body.theme-characters .chars-col-gens,
body.theme-characters .chars-col-adv {
  border: 2px solid rgba(196, 76, 255, 0.75) !important;
  border-radius: 20px !important;
  background: var(--c-panel) !important;
  box-shadow:
    0 0 40px rgba(196, 76, 255, 0.35),
    0 0 80px rgba(255, 79, 216, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  padding: 1rem !important;
}

body.theme-characters .chars-label {
  color: #f5d0fe !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}

/* Neon inputs */
body.theme-characters .chars-board .chars-input,
body.theme-characters .chars-board .chars-prompt,
body.theme-characters input.chars-input,
body.theme-characters textarea.chars-prompt {
  border: 2px solid rgba(61, 231, 255, 0.85) !important;
  border-radius: 14px !important;
  background: rgba(2, 8, 24, 0.95) !important;
  color: #fff !important;
  box-shadow:
    0 0 20px rgba(61, 231, 255, 0.35),
    inset 0 0 24px rgba(0, 80, 160, 0.25) !important;
}
body.theme-characters .chars-input:focus,
body.theme-characters .chars-prompt:focus {
  border-color: #3de7ff !important;
  box-shadow:
    0 0 0 3px rgba(61, 231, 255, 0.25),
    0 0 28px rgba(61, 231, 255, 0.5) !important;
}

/* Gen slots — bright cyan HUD */
body.theme-characters .chars-board .chars-gen-slot,
body.theme-characters button.chars-gen-slot {
  border: 2px solid #3de7ff !important;
  border-style: solid !important;
  border-radius: 16px !important;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px) !important;
  background:
    linear-gradient(rgba(61, 231, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 231, 255, 0.12) 1px, transparent 1px),
    #050818 !important;
  background-size: 12px 12px, 12px 12px, auto !important;
  box-shadow:
    0 0 24px rgba(61, 231, 255, 0.55),
    inset 0 0 30px rgba(0, 120, 200, 0.3) !important;
}
body.theme-characters .chars-gen-slot .slot-ph {
  color: #3de7ff !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  text-shadow: 0 0 16px rgba(61, 231, 255, 0.9) !important;
}
body.theme-characters .chars-gen-slot.filled {
  border-color: #ff4fd8 !important;
  box-shadow: 0 0 28px rgba(255, 79, 216, 0.5) !important;
}
body.theme-characters .chars-gen-slot.active {
  box-shadow: 0 0 0 3px #ff4fd8, 0 0 32px rgba(255, 79, 216, 0.7) !important;
}

/* Ref + reticle */
body.theme-characters .chars-main-ref {
  position: relative !important;
  min-height: 12rem !important;
  border: 2px solid rgba(196, 76, 255, 0.8) !important;
  border-radius: 18px !important;
  background: rgba(8, 4, 24, 0.9) !important;
  box-shadow: 0 0 30px rgba(196, 76, 255, 0.4) !important;
  overflow: hidden !important;
}
body.theme-characters .chars-main-ref::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 48% !important;
  width: 140px !important;
  height: 140px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  border: 2px solid rgba(196, 76, 255, 0.85) !important;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 12px, rgba(196, 76, 255, 0.45) 13px),
    repeating-linear-gradient(90deg, transparent, transparent 12px, rgba(196, 76, 255, 0.45) 13px) !important;
  box-shadow: 0 0 36px rgba(196, 76, 255, 0.55) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
body.theme-characters .chars-main-ref .ref-cell {
  position: relative !important;
  z-index: 1 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.theme-characters .chars-wide {
  border: 2px solid rgba(196, 76, 255, 0.7) !important;
  border-radius: 18px !important;
  box-shadow: 0 0 28px rgba(196, 76, 255, 0.3) !important;
  background: rgba(8, 4, 24, 0.88) !important;
}

/* Big glowing CTAs */
body.theme-characters .chars-start-btn,
body.theme-characters .chars-precision-btn,
body.theme-characters .chars-make-btn,
body.theme-characters .generate-btn.chars-start-btn {
  background: linear-gradient(90deg, #7b5cff, #ff4fd8) !important;
  border: 1px solid rgba(255, 180, 255, 0.85) !important;
  border-radius: 14px !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow:
    0 0 28px rgba(255, 79, 216, 0.55),
    0 8px 24px rgba(123, 92, 255, 0.35) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
body.theme-characters .chars-start-btn:hover,
body.theme-characters .chars-precision-btn:hover,
body.theme-characters .chars-make-btn:hover {
  filter: brightness(1.12) !important;
  transform: translateY(-1px);
}

body.theme-characters .btn-outline-accent {
  border: 2px solid rgba(196, 76, 255, 0.75) !important;
  color: #f5d0fe !important;
  background: rgba(8, 4, 24, 0.7) !important;
  border-radius: 14px !important;
  box-shadow: 0 0 16px rgba(196, 76, 255, 0.25) !important;
}

body.theme-characters .chars-precision-tip,
body.theme-characters .char-tip {
  border: 1.5px solid rgba(196, 76, 255, 0.65) !important;
  border-radius: 14px !important;
  background: rgba(28, 10, 48, 0.95) !important;
  box-shadow: 0 0 20px rgba(196, 76, 255, 0.3) !important;
  color: #f3e8ff !important;
}

body.theme-characters .roster-grid {
  border: 2px solid rgba(196, 76, 255, 0.55) !important;
  border-radius: 20px !important;
  padding: 1rem !important;
  background: rgba(8, 4, 24, 0.8) !important;
  box-shadow: 0 0 32px rgba(196, 76, 255, 0.25) !important;
}
body.theme-characters .section-label {
  color: #ff4fd8 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

/* Don't touch the logo mark */
body.theme-characters .navbar-brand img {
  filter: none !important;
}