/* Theme Styles - Day and night mode theming */

/* NIGHT MODE (default) */
body {
    background: linear-gradient(135deg, #000000 0%, #0f172a 50%, #1e293b 100%);
    color: #22d3ee;
    transition: all 0.5s ease;
}

/* DAY MODE */
body.day-mode {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%) !important;
    color: #1e293b !important;
}

/* DAY MODE - Text colors */
body.day-mode h1,
body.day-mode h2, 
body.day-mode h3,
body.day-mode p {
    color: #1e293b !important;
}

/* DAY MODE - Links */
body.day-mode a {
    color: #0891b2 !important;
}

/* DAY MODE - Buttons */
body.day-mode .btn-primary,
body.day-mode button {
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
    color: #ffffff !important;
    border-color: #0891b2 !important;
}

body.day-mode .btn-secondary {
    background: rgba(148, 163, 184, 0.2) !important;
    color: #1e293b !important;
    border-color: #94a3b8 !important;
}

/* DAY MODE - Cards */
body.day-mode .card {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

/* DAY MODE - Navigation */
body.day-mode .top-nav {
    background: rgba(248, 250, 252, 0.95) !important;
    border-bottom-color: #cbd5e1 !important;
}

/* DAY MODE - Session Timer */
body.day-mode #sessionTimer {
    color: #0891b2 !important;
}

/* DAY MODE - Intro Page Specific */
body.day-mode .container h1 {
    color: #1e293b !important;
}

body.day-mode .container p {
    color: #475569 !important;
}

/* DAY MODE - Force override inline styles on intro page */
body.day-mode [style*="color: #22d3ee"] {
    color: #0891b2 !important;
}

/* DAY MODE - Profile Page Overrides */
body.day-mode .profile-container {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%) !important;
}

body.day-mode .profile-title {
    color: #1e293b !important;
    text-shadow: 0 0 30px rgba(30, 41, 59, 0.3) !important;
}

body.day-mode .profile-subtitle {
    color: #475569 !important;
}

body.day-mode .profile-panel {
    background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(248,250,252,0.95)) !important;
    border: 2px solid rgba(203, 213, 225, 0.5) !important;
    color: #1e293b !important;
}

body.day-mode .panel-title {
    color: #0891b2 !important;
}

body.day-mode .info-value {
    color: #0891b2 !important;
}

body.day-mode .info-label {
    color: #475569 !important;
}

body.day-mode .companion-details h3 {
    color: #0891b2 !important;
}

body.day-mode .companion-details p {
    color: #475569 !important;
}

body.day-mode .settings-title {
    color: #0891b2 !important;
}

body.day-mode .setting-label {
    color: #1e293b !important;
}

body.day-mode .stat-number {
    color: #0891b2 !important;
}

body.day-mode .stat-label {
    color: #475569 !important;
}

/* DAY MODE - Force override any hardcoded dark backgrounds */
body.day-mode [style*="background: linear-gradient"][style*="#000000"],
body.day-mode [style*="background: linear-gradient"][style*="#0f172a"] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%) !important;
}

/* DAY MODE - Force override hardcoded cyan colors */
body.day-mode [style*="color: #22d3ee"],
body.day-mode .profile-title,
body.day-mode .panel-title,
body.day-mode .info-value {
    color: #0891b2 !important;
}

/* RAINBOW BACKGROUND FOR BLAYZION AND BLAYZIA CHARACTERS */
body.character-blayzion,
body.character-blayzia {
    background: linear-gradient(45deg, 
        #ff006e, 
        #8338ec, 
        #3a86ff, 
        #06ffa5, 
        #ffbe0b, 
        #ff006e
    ) !important;
    background-size: 300% 300% !important;
    animation: rainbowBackground 8s ease infinite !important;
}

body.character-blayzion.day-mode,
body.character-blayzia.day-mode {
    background: #ffffff !important;
    background-size: auto !important;
    animation: none !important;
}

@keyframes rainbowBackground {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* DAY MODE CHARACTER CARDS - Force light backgrounds over inline styles */
body.day-mode .character-card[style*="background: rgba(34, 211, 238, 0.1)"] {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 20px rgba(34, 211, 238, 0.3) !important;
}

body.day-mode .character-card[style*="background: rgba(255, 0, 0, 0.1)"] {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.3) !important;
}

body.day-mode .character-card[style*="background: rgba(255, 69, 0, 0.1)"] {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 20px rgba(255, 69, 0, 0.3) !important;
}

body.day-mode .character-card[style*="background: rgba(139, 92, 246, 0.1)"] {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3) !important;
}

body.day-mode .character-card[style*="background: rgba(255, 0, 110, 0.1)"] {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 20px rgba(255, 0, 110, 0.3) !important;
}

/* DAY MODE - Override inner content boxes with light backgrounds */
body.day-mode .character-card div[style*="background: rgba(34, 211, 238, 0.1)"] {
    background: rgba(248, 250, 252, 0.95) !important;
}

body.day-mode .character-card div[style*="background: rgba(255, 0, 0, 0.1)"] {
    background: rgba(248, 250, 252, 0.95) !important;
}

body.day-mode .character-card div[style*="background: rgba(255, 69, 0, 0.1)"] {
    background: rgba(248, 250, 252, 0.95) !important;
}

body.day-mode .character-card div[style*="background: rgba(139, 92, 246, 0.1)"] {
    background: rgba(248, 250, 252, 0.95) !important;
}

body.day-mode .character-card div[style*="background: rgba(255, 0, 110, 0.1)"] {
    background: rgba(248, 250, 252, 0.95) !important;
}

/* DAY MODE TEXT COLORS - Dark text on light backgrounds */
body.day-mode .character-card .character-name {
    color: #1f2937 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* DAY MODE - Rainbow gradient character inner backgrounds */
body.day-mode .character-blayzia-inner {
    background: rgba(248, 250, 252, 0.95) !important;
}

body.day-mode .character-card.character-blayzion > div {
    background: rgba(248, 250, 252, 0.95) !important;
}

body.day-mode .character-card .character-description {
    color: rgba(31, 41, 55, 0.8) !important;
}

/* DAY MODE - Companion specific text colors */
body.day-mode .character-card.character-blayzo .character-name,
body.day-mode .character-card.character-blayzo .character-description {
    color: #0891b2 !important;
}

body.day-mode .character-card.character-blayzica .character-name,
body.day-mode .character-card.character-blayzica .character-description {
    color: #dc2626 !important;
}

body.day-mode .character-card.character-crimson .character-name,
body.day-mode .character-card.character-crimson .character-description {
    color: #ea580c !important;
}

body.day-mode .character-card.character-violet .character-name,
body.day-mode .character-card.character-violet .character-description {
    color: #7c3aed !important;
}

body.day-mode .character-card.character-blayzion .character-name,
body.day-mode .character-card.character-blayzion .character-description {
    color: #be185d !important;
}

body.day-mode .character-card.character-blayzia .character-name,
body.day-mode .character-card.character-blayzia .character-description {
    color: #be185d !important;
}


/* AI CHAT INTERFACE - SIMPLE 2-TONE STYLING */
/* Rule: 1. Black backgrounds, 2. White text, 3. Theme color borders, 4. Yellow voice button */

/* UNIVERSAL AI CHAT STYLING - ALL CHARACTERS */
html body[class*="character-"] #chatInterface,
html body[class*="character-"] #chatInterface *:not(.character-greeting-single):not(.character-description) {
    background: #000 !important;
    color: #fff !important;
}

/* FORCE WHITE TEXT FOR BLAYZION AND BLAYZIA AI CHAT - MAXIMUM SPECIFICITY */
html body.character-blayzion #chatInterface *:not(img):not(#chatAvatarImg):not(#chatParticleContainer),
html body.character-blayzia #chatInterface *:not(img):not(#chatAvatarImg):not(#chatParticleContainer) {
    color: #fff !important;
    background: #000 !important;
    -webkit-text-fill-color: #fff !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
}

/* OVERRIDE GRADIENT TEXT IN AI CHAT FOR PREMIUM CHARACTERS - MAXIMUM FORCE */
html body.character-blayzion #chatInterface .character-greeting-single,
html body.character-blayzia #chatInterface .character-greeting-single,
html body.character-blayzion #chatInterface .character-description,
html body.character-blayzia #chatInterface .character-description,
html body.character-blayzion #chatInterface span,
html body.character-blayzia #chatInterface span,
html body.character-blayzion #chatInterface div,
html body.character-blayzia #chatInterface div,
html body.character-blayzion #chatInterface p,
html body.character-blayzia #chatInterface p {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
    text-shadow: none !important;
}

/* EXCLUDE IMAGES FROM STYLING */
html body[class*="character-"] #chatInterface img,
html body[class*="character-"] #chatInterface #chatAvatarImg,
html body[class*="character-"] #chatInterface #chatParticleContainer {
    background: transparent !important;
    color: initial !important;
}

/* CHARACTER-SPECIFIC BORDERS ONLY */
html body.character-blayzo #chatInterface .btn,
html body.character-blayzo #chatInterface .input-field,
html body.character-blayzo #chatInterface div[style*="background"],
html body.character-blayzo #chatInterface div[onclick],
html body.character-blayzo #chatInterface .soulbridge-chat-label,
html body.character-blayzo #chatInterface #selectedCharacter {
    border: 2px solid #22d3ee !important;
}

html body.character-blayzica #chatInterface .btn,
html body.character-blayzica #chatInterface .input-field,
html body.character-blayzica #chatInterface div[style*="background"],
html body.character-blayzica #chatInterface div[onclick],
html body.character-blayzica #chatInterface .soulbridge-chat-label,
html body.character-blayzica #chatInterface #selectedCharacter {
    border: 2px solid #ff0000 !important;
}

html body.character-crimson #chatInterface .btn,
html body.character-crimson #chatInterface .input-field,
html body.character-crimson #chatInterface div[style*="background"],
html body.character-crimson #chatInterface div[onclick],
html body.character-crimson #chatInterface .soulbridge-chat-label,
html body.character-crimson #chatInterface #selectedCharacter {
    border: 2px solid #ff4500 !important;
}

html body.character-violet #chatInterface .btn,
html body.character-violet #chatInterface .input-field,
html body.character-violet #chatInterface div[style*="background"],
html body.character-violet #chatInterface div[onclick],
html body.character-violet #chatInterface .soulbridge-chat-label,
html body.character-violet #chatInterface #selectedCharacter {
    border: 2px solid #8b5cf6 !important;
}

html body.character-blayzike #chatInterface .btn,
html body.character-blayzike #chatInterface .input-field,
html body.character-blayzike #chatInterface div[style*="background"],
html body.character-blayzike #chatInterface div[onclick],
html body.character-blayzike #chatInterface .soulbridge-chat-label,
html body.character-blayzike #chatInterface #selectedCharacter {
    border: 2px solid #8b5cf6 !important;
}

html body.character-blayzion #chatInterface .btn,
html body.character-blayzion #chatInterface .input-field,
html body.character-blayzion #chatInterface div[style*="background"],
html body.character-blayzion #chatInterface div[onclick],
html body.character-blayzion #chatInterface .soulbridge-chat-label,
html body.character-blayzion #chatInterface #selectedCharacter {
    border: 2px solid #ff006e !important;
}

html body.character-blayzia #chatInterface .btn,
html body.character-blayzia #chatInterface .input-field,
html body.character-blayzia #chatInterface div[style*="background"],
html body.character-blayzia #chatInterface div[onclick],
html body.character-blayzia #chatInterface .soulbridge-chat-label,
html body.character-blayzia #chatInterface #selectedCharacter {
    border: 2px solid #ff006e !important;
}

/* VOICE BUTTON SPECIAL STYLING - YELLOW BACKGROUND WITH BLACK TEXT */
html body.character-blayzo #chatInterface #voiceChatBtn {
    background: #ffd700 !important;
    color: #000 !important;
    border: 2px solid #22d3ee !important;
}

html body.character-blayzica #chatInterface #voiceChatBtn {
    background: #ffd700 !important;
    color: #000 !important;
    border: 2px solid #ff0000 !important;
}

html body.character-crimson #chatInterface #voiceChatBtn {
    background: #ffd700 !important;
    color: #000 !important;
    border: 2px solid #ff4500 !important;
}

html body.character-violet #chatInterface #voiceChatBtn {
    background: #ffd700 !important;
    color: #000 !important;
    border: 2px solid #8b5cf6 !important;
}

html body.character-blayzike #chatInterface #voiceChatBtn {
    background: #ffd700 !important;
    color: #000 !important;
    border: 2px solid #8b5cf6 !important;
}

html body.character-blayzion #chatInterface #voiceChatBtn {
    background: #ffd700 !important;
    color: #000 !important;
    border: 2px solid #ff006e !important;
}

html body.character-blayzia #chatInterface #voiceChatBtn {
    background: #ffd700 !important;
    color: #000 !important;
    border: 2px solid #ff006e !important;
}

/* MICROPHONE AND BUTTON TEXT STYLING */
html body[class*="character-"] #chatInterface #voiceChatBtn * {
    color: #000 !important;
}

/* FORCE WHITE TEXT FOR CRIMSON, VIOLET, AND BLAYZIKE AI CHAT */
html body.character-crimson #chatInterface *:not(img):not(#chatAvatarImg):not(#chatParticleContainer),
html body.character-violet #chatInterface *:not(img):not(#chatAvatarImg):not(#chatParticleContainer),
html body.character-blayzike #chatInterface *:not(img):not(#chatAvatarImg):not(#chatParticleContainer) {
    color: #fff !important;
    background: #000 !important;
    -webkit-text-fill-color: #fff !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
}

/* ENSURE ALL BUTTON TEXT AND ICONS ARE WHITE (EXCEPT VOICE BUTTON) */
html body[class*="character-"] #chatInterface .btn:not(#voiceChatBtn) *,
html body[class*="character-"] #chatInterface .btn:not(#voiceChatBtn) span,
html body[class*="character-"] #chatInterface div[onclick]:not(#voiceChatBtn) *,
html body[class*="character-"] #chatInterface div[onclick]:not(#voiceChatBtn) span {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

/* FORCE MICROPHONE EMOJI TO BE VISIBLE */
html body[class*="character-"] #chatInterface span:contains("🎤"),
html body[class*="character-"] #chatInterface *:contains("🎤") {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* CHARACTER CARD STYLING - Remove inline styles and use proper CSS */
.character-card {
    border: 3px solid;
    border-radius: 20px;
    padding: 1rem;
    box-shadow: 0 0 30px;
    transition: all 0.3s ease;
}

.character-card.character-blayzo {
    border-color: #22d3ee;
    background: rgba(34, 211, 238, 0.1);
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.7);
}

.character-card.character-blayzica {
    border-color: #ff0000;
    background: rgba(255, 0, 0, 0.1);
    box-shadow: 0 0 30px rgba(255, 0, 0, 0.7);
}

.character-card.character-crimson {
    border-color: #ff4500;
    background: rgba(255, 69, 0, 0.1);
    box-shadow: 0 0 30px rgba(255, 69, 0, 0.7);
}

.character-card.character-violet {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.7);
}

.character-card.character-blayzion {
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b);
    border-radius: 21px;
    padding: 1px;
    box-shadow: 0 0 30px rgba(255, 0, 110, 0.7);
}

.character-card.character-blayzia {
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b);
    border-radius: 21px;
    padding: 1px;
    box-shadow: 0 0 30px rgba(255, 0, 110, 0.7);
}

.character-inner {
    background: rgba(255, 0, 110, 0.1);
    border-radius: 20px;
    padding: 1rem;
    height: 100%;
    width: 100%;
}

.character-info {
    text-align: center;
    border: 5px solid;
    border-radius: 15px;
    padding: 0.6rem;
    margin: 0.1rem auto 0.5rem auto;
    width: 90%;
    display: block;
    box-sizing: border-box;
    position: relative;
    top: -0.5rem;
}

.character-card.character-blayzo .character-info {
    border-color: #22d3ee;
    background: rgba(34, 211, 238, 0.1);
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.5);
}

.character-card.character-blayzica .character-info {
    border-color: #ff0000;
    background: rgba(255, 0, 0, 0.1);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
}

.character-card.character-crimson .character-info {
    border-color: #ff4500;
    background: rgba(255, 69, 0, 0.1);
    box-shadow: 0 0 20px rgba(255, 69, 0, 0.5);
}

.character-card.character-violet .character-info {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

.character-card.character-blayzion .character-info {
    border-color: #ff006e;
    background: rgba(255, 0, 110, 0.1);
    box-shadow: 0 0 25px rgba(255, 0, 110, 0.6);
}

.character-card.character-blayzia .character-info {
    border-color: #ff006e;
    background: rgba(255, 0, 110, 0.1);
    box-shadow: 0 0 25px rgba(255, 0, 110, 0.6);
}

.character-greeting-single {
    font-size: 0.85rem;
    line-height: 1.4;
    font-style: italic;
    margin-top: 1rem;
    opacity: 0.9;
}

.character-card.character-blayzo .character-greeting-single {
    color: #22d3ee;
}

.character-card.character-blayzica .character-greeting-single {
    color: #ff0000;
}

.character-card.character-crimson .character-greeting-single {
    color: #dc2626;
}

.character-card.character-violet .character-greeting-single {
    color: #8b5cf6;
}

.character-card.character-blayzion .character-greeting-single,
.character-card.character-blayzia .character-greeting-single {
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b);
    background-size: 400% 400%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

.character-card.character-blayzion .character-description,
.character-card.character-blayzia .character-description {
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b);
    background-size: 400% 400%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

/* DAY MODE - Same styling as night mode for AI chat interface */
body.day-mode[class*="character-"] #chatInterface,
body.day-mode[class*="character-"] #chatInterface *:not(.character-greeting-single):not(.character-description) {
    background: #000 !important;
    color: #fff !important;
}

/* DAY MODE FORCE WHITE TEXT FOR BLAYZION AND BLAYZIA - MAXIMUM SPECIFICITY */
body.day-mode.character-blayzion #chatInterface *:not(img):not(#chatAvatarImg):not(#chatParticleContainer),
body.day-mode.character-blayzia #chatInterface *:not(img):not(#chatAvatarImg):not(#chatParticleContainer) {
    color: #fff !important;
    background: #000 !important;
    -webkit-text-fill-color: #fff !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
}

/* DAY MODE OVERRIDE GRADIENT TEXT IN AI CHAT FOR PREMIUM CHARACTERS - MAXIMUM FORCE */
body.day-mode.character-blayzion #chatInterface .character-greeting-single,
body.day-mode.character-blayzia #chatInterface .character-greeting-single,
body.day-mode.character-blayzion #chatInterface .character-description,
body.day-mode.character-blayzia #chatInterface .character-description,
body.day-mode.character-blayzion #chatInterface span,
body.day-mode.character-blayzia #chatInterface span,
body.day-mode.character-blayzion #chatInterface div,
body.day-mode.character-blayzia #chatInterface div,
body.day-mode.character-blayzion #chatInterface p,
body.day-mode.character-blayzia #chatInterface p {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
    text-shadow: none !important;
}

/* EXCLUDE IMAGES FROM DAY MODE STYLING */
body.day-mode[class*="character-"] #chatInterface img,
body.day-mode[class*="character-"] #chatInterface #chatAvatarImg,
body.day-mode[class*="character-"] #chatInterface #chatParticleContainer {
    background: transparent !important;
    color: initial !important;
}

/* DAY MODE CHARACTER-SPECIFIC BORDERS */
body.day-mode.character-blayzo #chatInterface .btn,
body.day-mode.character-blayzo #chatInterface .input-field,
body.day-mode.character-blayzo #chatInterface div[style*="background"],
body.day-mode.character-blayzo #chatInterface div[onclick],
body.day-mode.character-blayzo #chatInterface .soulbridge-chat-label,
body.day-mode.character-blayzo #chatInterface #selectedCharacter {
    border: 2px solid #22d3ee !important;
}

body.day-mode.character-blayzica #chatInterface .btn,
body.day-mode.character-blayzica #chatInterface .input-field,
body.day-mode.character-blayzica #chatInterface div[style*="background"],
body.day-mode.character-blayzica #chatInterface div[onclick],
body.day-mode.character-blayzica #chatInterface .soulbridge-chat-label,
body.day-mode.character-blayzica #chatInterface #selectedCharacter {
    border: 2px solid #ff0000 !important;
}

body.day-mode.character-crimson #chatInterface .btn,
body.day-mode.character-crimson #chatInterface .input-field,
body.day-mode.character-crimson #chatInterface div[style*="background"],
body.day-mode.character-crimson #chatInterface div[onclick],
body.day-mode.character-crimson #chatInterface .soulbridge-chat-label,
body.day-mode.character-crimson #chatInterface #selectedCharacter {
    border: 2px solid #ff4500 !important;
}

body.day-mode.character-violet #chatInterface .btn,
body.day-mode.character-violet #chatInterface .input-field,
body.day-mode.character-violet #chatInterface div[style*="background"],
body.day-mode.character-violet #chatInterface div[onclick],
body.day-mode.character-violet #chatInterface .soulbridge-chat-label,
body.day-mode.character-violet #chatInterface #selectedCharacter {
    border: 2px solid #8b5cf6 !important;
}

body.day-mode.character-blayzion #chatInterface .btn,
body.day-mode.character-blayzion #chatInterface .input-field,
body.day-mode.character-blayzion #chatInterface div[style*="background"],
body.day-mode.character-blayzion #chatInterface div[onclick],
body.day-mode.character-blayzion #chatInterface .soulbridge-chat-label,
body.day-mode.character-blayzion #chatInterface #selectedCharacter {
    border: 2px solid #ff006e !important;
}

body.day-mode.character-blayzia #chatInterface .btn,
body.day-mode.character-blayzia #chatInterface .input-field,
body.day-mode.character-blayzia #chatInterface div[style*="background"],
body.day-mode.character-blayzia #chatInterface div[onclick],
body.day-mode.character-blayzia #chatInterface .soulbridge-chat-label,
body.day-mode.character-blayzia #chatInterface #selectedCharacter {
    border: 2px solid #ff006e !important;
}

/* DAY MODE VOICE BUTTON - Same yellow styling */
body.day-mode.character-blayzo #chatInterface #voiceChatBtn {
    background: #ffd700 !important;
    color: #000 !important;
    border: 2px solid #22d3ee !important;
}

body.day-mode.character-blayzica #chatInterface #voiceChatBtn {
    background: #ffd700 !important;
    color: #000 !important;
    border: 2px solid #ff0000 !important;
}

body.day-mode.character-crimson #chatInterface #voiceChatBtn {
    background: #ffd700 !important;
    color: #000 !important;
    border: 2px solid #ff4500 !important;
}

body.day-mode.character-violet #chatInterface #voiceChatBtn {
    background: #ffd700 !important;
    color: #000 !important;
    border: 2px solid #8b5cf6 !important;
}

body.day-mode.character-blayzion #chatInterface #voiceChatBtn {
    background: #ffd700 !important;
    color: #000 !important;
    border: 2px solid #ff006e !important;
}

body.day-mode.character-blayzia #chatInterface #voiceChatBtn {
    background: #ffd700 !important;
    color: #000 !important;
    border: 2px solid #ff006e !important;
}

body.day-mode[class*="character-"] #chatInterface #voiceChatBtn * {
    color: #000 !important;
}

/* DAY MODE FORCE WHITE TEXT FOR CRIMSON AND VIOLET AI CHAT */
body.day-mode.character-crimson #chatInterface *:not(img):not(#chatAvatarImg):not(#chatParticleContainer),
body.day-mode.character-violet #chatInterface *:not(img):not(#chatAvatarImg):not(#chatParticleContainer) {
    color: #fff !important;
    background: #000 !important;
    -webkit-text-fill-color: #fff !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
}

/* DAY MODE ENSURE ALL BUTTON TEXT AND ICONS ARE WHITE (EXCEPT VOICE BUTTON) */
body.day-mode[class*="character-"] #chatInterface .btn:not(#voiceChatBtn) *,
body.day-mode[class*="character-"] #chatInterface .btn:not(#voiceChatBtn) span,
body.day-mode[class*="character-"] #chatInterface div[onclick]:not(#voiceChatBtn) *,
body.day-mode[class*="character-"] #chatInterface div[onclick]:not(#voiceChatBtn) span {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

/* DAY MODE FORCE MICROPHONE EMOJI TO BE VISIBLE */
body.day-mode[class*="character-"] #chatInterface span:contains("🎤"),
body.day-mode[class*="character-"] #chatInterface *:contains("🎤") {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* MY PROFILE BUTTON - BLACK TEXT FOR ALL CHARACTERS IN ALL MODES */
html body[class*="character-"] #profileBtn,
html body[class*="character-"] #profileBtn *,
html body[class*="character-"] #profileBtn span,
body.day-mode[class*="character-"] #profileBtn,
body.day-mode[class*="character-"] #profileBtn *,
body.day-mode[class*="character-"] #profileBtn span {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
}

/* CLEAN UP - Remove everything else, this is the complete styling */

/* CHARACTER CARD HEIGHT ADJUSTMENT - Base heights */
.character-card {
    overflow: hidden !important;
}

/* Remove scaling - use proper CSS sizing instead */
.character-card > * {
    /* transform: scale(0.75) !important; */
    /* transform-origin: center top !important; */
}

/* Desktop heights - compact but readable without scaling */
.character-card.character-blayzo {
    height: 720px !important;
    max-height: 720px !important;
    min-height: 720px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.character-card.character-blayzica {
    height: 740px !important;
    max-height: 740px !important;
    min-height: 740px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.character-card.character-crimson {
    height: 800px !important;
    max-height: 800px !important;
    min-height: 800px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.character-card.character-violet {
    height: 800px !important;
    max-height: 800px !important;
    min-height: 800px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.character-card.character-blayzion {
    height: 820px !important;
    max-height: 820px !important;
    min-height: 820px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.character-card.character-blayzia {
    height: 780px !important;
    max-height: 780px !important;
    min-height: 780px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Mobile responsive heights - increased for longer greetings */
@media (max-width: 768px) {
    .character-card {
        max-width: 100% !important;
    }
    
    .character-card.character-blayzo {
        height: 660px !important;
        max-height: 660px !important;
        min-height: 660px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .character-card.character-blayzica {
        height: 680px !important;
        max-height: 680px !important;
        min-height: 680px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .character-card.character-crimson {
        height: 730px !important;
        max-height: 730px !important;
        min-height: 730px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .character-card.character-violet {
        height: 730px !important;
        max-height: 730px !important;
        min-height: 730px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .character-card.character-blayzion {
        height: 750px !important;
        max-height: 750px !important;
        min-height: 750px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .character-card.character-blayzia {
        height: 710px !important;
        max-height: 710px !important;
        min-height: 710px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }
}

/* FORCE REMOVE BACKGROUNDS AND BORDERS FROM NON-COMPANION ELEMENTS ONLY */
div.character-card img,
div.character-card *:not(.character-name):not(.character-description):not(.character-greeting) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    outline: none !important;
    border-image: none !important;
}

/* ALL COMPANION STYLING - DUAL BORDER SETUP */

/* BLAYZO - Black background with cyan borders */
div.character-card.character-blayzo {
    background: #000 !important;
    border: 2px solid #22d3ee !important;
    border-radius: 12px !important;
    padding: 2rem !important;
}

/* BLAYZICA - Black background with red borders */
html body div.character-card.character-blayzica {
    background: #000 !important;
    border: 2px solid #ff0000 !important;
    border-radius: 12px !important;
    padding: 2rem !important;
}

/* CRIMSON - Black background with orange borders */
html body div.character-card.character-crimson {
    background: #000 !important;
    border: 2px solid #ff4500 !important;
    border-radius: 12px !important;
    padding: 2rem !important;
}

/* VIOLET - Black background with purple borders */
html body div.character-card.character-violet {
    background: #000 !important;
    border: 2px solid #8b5cf6 !important;
    border-radius: 12px !important;
    padding: 2rem !important;
}

/* BLAYZION - Black background with rainbow borders */
html body div.character-card.character-blayzion {
    background: #000 !important;
    border: 2px solid #ff006e !important;
    border-radius: 12px !important;
    padding: 2rem !important;
}

/* BLAYZIA - Black background with rainbow borders */
html body div.character-card.character-blayzia {
    background: #000 !important;
    border: 2px solid #ff006e !important;
    border-radius: 12px !important;
    padding: 2rem !important;
}

/* BLAYZIKE - Black background with purple-blue gradient borders */
html body div.character-card.character-blayzike {
    background: #000 !important;
    border: 2px solid transparent !important;
    background-image: linear-gradient(#000, #000), linear-gradient(135deg, #8b5cf6, #6366f1, #3b82f6) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    border-radius: 12px !important;
    padding: 2rem !important;
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.6) !important;
}

/* Clean character card styling - consistent appearance */
.character-card .character-name {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

.character-card .character-description {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Blayzo specific cyan text */
.character-card.character-blayzo .character-name,
.character-card.character-blayzo .character-description {
    color: #22d3ee !important;
}

/* BLAYZO - Special styling with background and border */
.character-card.character-blayzo {
    background: #000 !important;
    border: 2px solid #22d3ee !important;
    border-radius: 12px !important;
    padding: 2rem !important;
}

.character-card.character-blayzo .character-name,
.character-card.character-blayzo .character-description {
    background: transparent !important;
    color: #22d3ee !important;
}

.character-card.character-blayzica .character-name,
.character-card.character-blayzica .character-description {
    background: transparent !important;
    color: #ff0000 !important;
}

.character-card.character-crimson .character-name,
.character-card.character-crimson .character-description {
    background: transparent !important;
    color: #ff4500 !important;
}

.character-card.character-violet .character-name,
.character-card.character-violet .character-description {
    background: transparent !important;
    color: #8b5cf6 !important;
}

.character-card.character-blayzike .character-name,
.character-card.character-blayzike .character-description {
    background: transparent !important;
    background-image: linear-gradient(135deg, #8b5cf6, #6366f1, #3b82f6) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #8b5cf6 !important; /* Fallback for non-webkit browsers */
}

/* ALLOW TEXT GRADIENTS FOR SPECIAL CHARACTERS */
.character-card.character-blayzion .character-name,
.character-card.character-blayzion .character-description,
.character-card.character-blayzia .character-name,
.character-card.character-blayzia .character-description {
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Blayzion specific galaxy text */
.character-card.character-blayzion .character-name,
.character-card.character-blayzion .character-description {
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Default styles for non-character specific elements */
body {
    background: linear-gradient(135deg, #000000 0%, #0f172a 50%, #1e293b 100%);
    color: #22d3ee;
    font-weight: bold;
}

/* ===== COMPANION-SPECIFIC THEMING FOR ALL PAGES ===== */

/* Blayzo - Black background, cyan words, cyan border throughout ALL pages */
.character-blayzo #chatInterface,
.character-blayzo .screen:not(.character-card),
.character-blayzo #selectScreen,
.character-blayzo .ai-message,
.character-blayzo .user-message,
.character-blayzo .chat-container {
    background: #000 !important;
    color: #22d3ee !important;
    border: 3px solid #22d3ee !important;
}

/* Remove borders from ALL character card children for Blayzo */
.character-blayzo .character-card,
.character-blayzo .character-card *,
.character-blayzo .character-card .character-name,
.character-blayzo .character-card .character-description,
.character-blayzo .character-card .character-greeting,
.character-blayzo .character-card img,
.character-blayzo .character-card div {
    border: none !important;
    background: transparent !important;
    color: #22d3ee !important;
}

/* Blayzion - Galaxy border, cyan background, galaxy words throughout ALL pages */
.character-blayzion #chatInterface,
.character-blayzion .screen:not(.character-card),
.character-blayzion #selectScreen,
.character-blayzion .ai-message,
.character-blayzion .user-message,
.character-blayzion .chat-container {
    background: #22d3ee !important;
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    border: 3px solid;
    border-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b) 1 !important;
}

/* Remove borders from ALL character card children for Blayzion */
.character-blayzion .character-card,
.character-blayzion .character-card img,
.character-blayzion .character-card div:not(.character-name):not(.character-description):not(.character-greeting) {
    border: none !important;
    background: transparent !important;
}

/* FORCE Blayzion text elements with gradient - MAXIMUM SPECIFICITY */
html body div.character-grid div.character-card.character-blayzion .character-name,
html body div.character-grid div.character-card.character-blayzion .character-description,
html body div.character-grid div.character-card.character-blayzion .character-greeting,
html body div.character-card.character-blayzion .character-name,
html body div.character-card.character-blayzion .character-description,
html body div.character-card.character-blayzion .character-greeting,
div.character-card.character-blayzion .character-name,
div.character-card.character-blayzion .character-description,
div.character-card.character-blayzion .character-greeting,
.character-card.character-blayzion .character-name,
.character-card.character-blayzion .character-description,
.character-card.character-blayzion .character-greeting {
    border: none !important;
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607) !important;
    background-size: 400% 400% !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: galaxyText 3s ease-in-out infinite !important;
    font-weight: bold !important;
}

/* Crimson - Blood orange border, black background, blood orange words throughout ALL pages */
.character-crimson #chatInterface,
.character-crimson .screen:not(.character-card),
.character-crimson #selectScreen,
.character-crimson .ai-message,
.character-crimson .user-message,
.character-crimson .chat-container {
    background: #000 !important;
    color: #ff4500 !important;
    border: 3px solid #ff4500 !important;
}

/* Remove borders from ALL character card children for Crimson */
.character-crimson .character-card,
.character-crimson .character-card *,
.character-crimson .character-card .character-name,
.character-crimson .character-card .character-description,
.character-crimson .character-card .character-greeting,
.character-crimson .character-card img,
.character-crimson .character-card div {
    border: none !important;
    background: transparent !important;
    color: #ff4500 !important;
}

/* Blayzica - Red border, black background, red words throughout ALL pages */
.character-blayzica #chatInterface,
.character-blayzica .screen:not(.character-card),
.character-blayzica #selectScreen,
.character-blayzica .ai-message,
.character-blayzica .user-message,
.character-blayzica .chat-container {
    background: #000 !important;
    color: #ff0000 !important;
    border: 3px solid #ff0000 !important;
}

/* Remove borders from ALL character card children for Blayzica */
.character-blayzica .character-card,
.character-blayzica .character-card *,
.character-blayzica .character-card .character-name,
.character-blayzica .character-card .character-description,
.character-blayzica .character-card .character-greeting,
.character-blayzica .character-card img,
.character-blayzica .character-card div {
    border: none !important;
    background: transparent !important;
    color: #ff0000 !important;
}

/* Blayzia - Galaxy border, red background, galaxy words throughout ALL pages */
.character-blayzia #chatInterface,
.character-blayzia .screen:not(.character-card),
.character-blayzia #selectScreen,
.character-blayzia .ai-message,
.character-blayzia .user-message,
.character-blayzia .chat-container {
    background: #ff0000 !important;
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    border: 3px solid;
    border-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b) 1 !important;
}

/* Remove borders from ALL character card children for Blayzia */
.character-blayzia .character-card,
.character-blayzia .character-card img,
.character-blayzia .character-card div:not(.character-name):not(.character-description):not(.character-greeting) {
    border: none !important;
    background: transparent !important;
}

/* FORCE Blayzia text elements with gradient - MAXIMUM SPECIFICITY */
html body div.character-grid div.character-card.character-blayzia .character-name,
html body div.character-grid div.character-card.character-blayzia .character-description,
html body div.character-grid div.character-card.character-blayzia .character-greeting,
html body div.character-card.character-blayzia .character-name,
html body div.character-card.character-blayzia .character-description,
html body div.character-card.character-blayzia .character-greeting,
div.character-card.character-blayzia .character-name,
div.character-card.character-blayzia .character-description,
div.character-card.character-blayzia .character-greeting,
.character-card.character-blayzia .character-name,
.character-card.character-blayzia .character-description,
.character-card.character-blayzia .character-greeting {
    border: none !important;
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607) !important;
    background-size: 400% 400% !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: galaxyText 3s ease-in-out infinite !important;
    font-weight: bold !important;
}

/* Violet - Violet border, black background, violet words throughout ALL pages */
.character-violet #chatInterface,
.character-violet .screen:not(.character-card),
.character-violet #selectScreen,
.character-violet .ai-message,
.character-violet .user-message,
.character-violet .chat-container {
    background: #000 !important;
    color: #8b5cf6 !important;
    border: 3px solid #8b5cf6 !important;
}

/* Remove borders from ALL character card children for Violet */
.character-violet .character-card,
.character-violet .character-card *,
.character-violet .character-card .character-name,
.character-violet .character-card .character-description,
.character-violet .character-card .character-greeting,
.character-violet .character-card img,
.character-violet .character-card div {
    border: none !important;
    background: transparent !important;
    color: #8b5cf6 !important;
}

/* Fix intro screen to not be affected by character theming */
#introScreen,
#introScreen *,
#introScreen h1,
#introScreen p,
#introScreen .btn {
    background: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
}

#introScreen h1 {
    color: #22d3ee !important;
}

#introScreen p {
    color: #fff !important;
}


/* Back button styles - Dark mode only */
body:not(.day-mode) #backBtn,
body:not(.day-mode) #backToIntroBtn {
    background: #000 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
    border-radius: 50px !important;
    padding: 4px 12px !important;
    font-weight: bold !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: block !important;
}

body:not(.day-mode) #backBtn:hover,
body:not(.day-mode) #backToIntroBtn:hover {
    background: #333 !important;
    transform: translateY(-2px) !important;
}

/* Back buttons in day mode - black text */
body.day-mode #backBtn,
body.day-mode #backToIntroBtn {
    background: #fff !important;
    color: #000 !important;
    border: 2px solid #000 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
    border-radius: 50px !important;
    padding: 4px 12px !important;
    font-weight: bold !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: block !important;
}

body.day-mode #backBtn:hover,
body.day-mode #backToIntroBtn:hover {
    background: #f0f0f0 !important;
    transform: translateY(-2px) !important;
}

/* Character-specific greeting colors in dark mode */
.character-blayzica-text {
    color: #000 !important;
}

.character-blayzo-text {
    color: #000 !important;
    background: rgba(34, 211, 238, 0.9) !important;
}

/* Character-specific colors in dark mode for character select */
.character-blayzica .character-name {
    color: #dc2626 !important;
}

.character-blayzica .character-description {
    color: #dc2626 !important;
}

/* Day mode overrides */
body.day-mode {
    background: #f8f9fa !important;
    color: #000 !important;
    font-weight: bold !important;
}

/* Day mode logo switcher */
body.day-mode .intro-logo {
    content: url("../logos/BlackIntroLogo.png") !important;
    border-radius: 30px !important;
    width: 900px !important;
    height: 675px !important;
    max-width: 900px !important;
    max-height: 675px !important;
}

/* Dark mode logo size adjustment */
body:not(.day-mode) .intro-logo {
    width: 900px !important;
    height: 675px !important;
    max-width: 900px !important;
    max-height: 675px !important;
    transform: translate(-50%, -50%) scale(1.0) !important;
}

/* Day mode text styling */
body.day-mode h1, body.day-mode h2, body.day-mode h3, body.day-mode p, body.day-mode span, body.day-mode div {
    color: #000 !important;
    font-weight: bold !important;
}

/* Day mode intro screen content */
body.day-mode #introScreen h1 {
    color: #000 !important;
    font-weight: bold !important;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.3) !important;
}

body.day-mode #introScreen p {
    color: #333 !important;
    font-weight: bold !important;
}

/* Day mode character select content */
body.day-mode #characterSelect {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #e2e8f0 100%) !important;
}

body.day-mode #characterSelect h2 {
    color: #000 !important;
    font-weight: bold !important;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.3) !important;
}

body.day-mode #characterSelect p {
    color: #333 !important;
    font-weight: bold !important;
}

/* Character-specific colors in day mode for character select */
body.day-mode .character-blayzo .character-name {
    color: #22d3ee !important;
    font-weight: bold !important;
}

body.day-mode .character-blayzo .character-description {
    color: #22d3ee !important;
    font-weight: bold !important;
}

body.day-mode .character-blayzica .character-name {
    color: #dc2626 !important;
    font-weight: bold !important;
}

body.day-mode .character-blayzica .character-description {
    color: #dc2626 !important;
    font-weight: bold !important;
}


/* Day mode back button */
body.day-mode #backBtn,
body.day-mode #backToIntroBtn,
html body.day-mode #backBtn,
html body.day-mode #backToIntroBtn {
    background: rgba(34, 211, 238, 0.8) !important;
    color: #000 !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(34, 211, 238, 0.3) !important;
}

body.day-mode #backBtn:hover,
body.day-mode #backToIntroBtn:hover,
html body.day-mode #backBtn:hover,
html body.day-mode #backToIntroBtn:hover {
    background: rgba(34, 211, 238, 1) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(34, 211, 238, 0.5) !important;
}

/* Day mode character cards */
body.day-mode .character-card {
    border: none !important;
    background: transparent !important;
}

body.day-mode .character-card:hover {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

body.day-mode .character-card.selected {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.day-mode .character-card:focus {
    border: none !important;
    box-shadow: none !important;
}

body.day-mode .character-card::before {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
}

/* Day mode character grid - proper borders and backgrounds */
body.day-mode .character-grid .character-card.character-blayzica,
body.day-mode #characterSelect .character-card.character-blayzica {
    border: 3px solid #ff0000 !important;
    background: rgba(255, 0, 0, 0.1) !important;
}

body.day-mode .character-grid .character-card.character-crimson,
body.day-mode #characterSelect .character-card.character-crimson {
    border: 3px solid #ff4500 !important;
    background: rgba(255, 69, 0, 0.1) !important;
}

body.day-mode .character-grid .character-card.character-violet,
body.day-mode #characterSelect .character-card.character-violet {
    border: 3px solid #8b5cf6 !important;
    background: rgba(139, 92, 246, 0.1) !important;
}

body.day-mode .character-grid .character-card.character-blayzion,
body.day-mode #characterSelect .character-card.character-blayzion {
    border: 3px solid #ff006e !important;
    background: rgba(255, 0, 110, 0.1) !important;
}

body.day-mode .character-grid .character-card.character-blayzia,
body.day-mode #characterSelect .character-card.character-blayzia {
    border: 3px solid #ff006e !important;
    background: rgba(255, 0, 110, 0.1) !important;
}

body.day-mode .character-grid .character-card.character-blayzo,
body.day-mode #characterSelect .character-card.character-blayzo {
    border: 3px solid #22d3ee !important;
    background: rgba(34, 211, 238, 0.1) !important;
}

/* Day mode chat components */
body.day-mode .chat-container {
    background: rgba(0, 0, 0, 0.9) !important;
    border: 2px solid #000 !important;
    color: #fff !important;
}

body.day-mode .ai-message {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.9), rgba(220, 38, 38, 0.8)) !important;
    color: #22d3ee !important;
    border: 1px solid rgba(34, 211, 238, 0.5) !important;
}

/* Enhanced AI message styling for Blayzo */
.character-blayzo .ai-message {
    background: #000 !important;
    color: #22d3ee !important;
    border: 3px solid #22d3ee !important;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.4), 0 4px 20px rgba(34, 211, 238, 0.2) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    margin: 0.5rem 0 !important;
    backdrop-filter: blur(5px) !important;
}

/* Enhanced AI message styling for Blayzica */
.character-blayzica .ai-message {
    background: #000 !important;
    color: #ff0000 !important;
    border: 3px solid #ff0000 !important;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4), 0 4px 20px rgba(255, 0, 0, 0.2) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    margin: 0.5rem 0 !important;
    backdrop-filter: blur(5px) !important;
}

/* Enhanced AI message styling for Crimson */
.character-crimson .ai-message {
    background: #000 !important;
    color: #ff4500 !important;
    border: 3px solid #ff4500 !important;
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.4), 0 4px 20px rgba(255, 69, 0, 0.2) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    margin: 0.5rem 0 !important;
    backdrop-filter: blur(5px) !important;
}

/* Enhanced AI message styling for Violet */
.character-violet .ai-message {
    background: #000 !important;
    color: #8b5cf6 !important;
    border: 3px solid #8b5cf6 !important;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.4), 0 4px 20px rgba(139, 92, 246, 0.2) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    margin: 0.5rem 0 !important;
    backdrop-filter: blur(5px) !important;
}

/* Enhanced AI message styling for Blayzion (rainbow gradient) */
.character-blayzion .ai-message {
    background: #000 !important;
    color: transparent !important;
    border: 3px solid;
    border-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b) 1 !important;
    box-shadow: 0 0 15px rgba(255, 0, 110, 0.4), 0 4px 20px rgba(255, 0, 110, 0.2) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    margin: 0.5rem 0 !important;
    backdrop-filter: blur(5px) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    background-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b) !important;
}

/* Enhanced AI message styling for Blayzia (rainbow gradient) */
.character-blayzia .ai-message {
    background: #000 !important;
    color: transparent !important;
    border: 3px solid;
    border-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b) 1 !important;
    box-shadow: 0 0 15px rgba(255, 0, 110, 0.4), 0 4px 20px rgba(255, 0, 110, 0.2) !important;
    border-radius: 12px !important;
    padding: 1rem !important;
    margin: 0.5rem 0 !important;
    backdrop-filter: blur(5px) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    background-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b) !important;
}

/* Day mode enhanced AI message styling */
body.day-mode .character-blayzo .ai-message {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #0891b2 !important;
    border: 3px solid #22d3ee !important;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.3), 0 4px 20px rgba(34, 211, 238, 0.1) !important;
}

body.day-mode .character-blayzica .ai-message {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #dc2626 !important;
    border: 3px solid #ff0000 !important;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.3), 0 4px 20px rgba(255, 0, 0, 0.1) !important;
}

body.day-mode .character-crimson .ai-message {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #ea580c !important;
    border: 3px solid #ff4500 !important;
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.3), 0 4px 20px rgba(255, 69, 0, 0.1) !important;
}

body.day-mode .character-violet .ai-message {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #7c3aed !important;
    border: 3px solid #8b5cf6 !important;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3), 0 4px 20px rgba(139, 92, 246, 0.1) !important;
}

body.day-mode .character-blayzion .ai-message {
    background: rgba(255, 255, 255, 0.95) !important;
    color: transparent !important;
    border: 3px solid;
    border-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b) 1 !important;
    box-shadow: 0 0 15px rgba(255, 0, 110, 0.3), 0 4px 20px rgba(255, 0, 110, 0.1) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    background-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b) !important;
}

body.day-mode .character-blayzia .ai-message {
    background: rgba(255, 255, 255, 0.95) !important;
    color: transparent !important;
    border: 3px solid;
    border-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b) 1 !important;
    box-shadow: 0 0 15px rgba(255, 0, 110, 0.3), 0 4px 20px rgba(255, 0, 110, 0.1) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    background-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b) !important;
}

/* ========================================
   COMPANION-SPECIFIC COMPLETE PAGE STYLING
======================================== */

/* Blayzo - Black background, cyan words, cyan border throughout ALL pages EXCEPT character cards */
.character-blayzo #chatInterface,
.character-blayzo .screen:not(.character-card) {
    background: #000 !important;
    color: #22d3ee !important;
    border: 3px solid #22d3ee !important;
}

/* Blayzo character card - NO outer border */
.character-blayzo .character-card {
    background: transparent !important;
    color: #22d3ee !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 2rem !important;
}

/* Add borders to Blayzo name and greeting separately FIRST */
html body .character-blayzo .character-card .character-name {
    border: 1px solid #22d3ee !important;
    border-radius: 8px !important;
    padding: 0.5rem !important;
    margin-bottom: 1rem !important;
    background: transparent !important;
    color: #22d3ee !important;
}

html body .character-blayzo .character-card .character-greeting {
    border: 1px solid #22d3ee !important;
    border-radius: 8px !important;
    padding: 0.5rem !important;
    margin-top: 1rem !important;
    background: transparent !important;
    color: #22d3ee !important;
}

/* Remove borders from OTHER character card children */
.character-blayzo .character-card *:not(.character-name):not(.character-greeting) {
    border: none !important;
    background: transparent !important;
}

/* Blayzion - Simple 2-color theme */
.character-blayzion #chatInterface,
.character-blayzion .ai-message,
.character-blayzion .user-message,
.character-blayzion .chat-container,
.character-blayzion .message-input,
.character-blayzion .send-button,
.character-blayzion .back-button,
.character-blayzion .chat-header,
.character-blayzion .message-bubble,
.character-blayzion .input-container {
    background: rgba(255, 0, 110, 0.1) !important;
    border-color: #ff006e !important;
}

.character-blayzion .ai-message,
.character-blayzion .user-message,
.character-blayzion .character-name,
.character-blayzion #selectedCharacter span,
.character-blayzion .message-text,
.character-blayzion .send-button,
.character-blayzion .back-button,
.character-blayzion input,
.character-blayzion textarea,
.character-blayzion p,
.character-blayzion span,
.character-blayzion div,
.character-blayzion button {
    color: #ff006e !important;
}

/* Remove any conflicting styles for Blayzion - but preserve character card content */
.character-blayzion .ai-message *,
.character-blayzion .user-message *,
.character-blayzion .chat-container *,
.character-blayzion .message-input *,
.character-blayzion .send-button *,
.character-blayzion .back-button * {
    background: rgba(255, 0, 110, 0.1) !important;
    color: #ff006e !important;
}

/* Crimson - Simple 2-color theme */
.character-crimson #chatInterface,
.character-crimson .ai-message,
.character-crimson .user-message,
.character-crimson .chat-container,
.character-crimson .message-input,
.character-crimson .send-button,
.character-crimson .back-button,
.character-crimson .chat-header,
.character-crimson .message-bubble,
.character-crimson .input-container {
    background: rgba(255, 69, 0, 0.1) !important;
    border-color: #ff4500 !important;
}

.character-crimson .ai-message,
.character-crimson .user-message,
.character-crimson .character-name,
.character-crimson #selectedCharacter span,
.character-crimson .message-text,
.character-crimson .send-button,
.character-crimson .back-button,
.character-crimson input,
.character-crimson textarea,
.character-crimson p,
.character-crimson span,
.character-crimson div,
.character-crimson button {
    color: #ff4500 !important;
}

/* Remove any conflicting styles for Crimson - but preserve character card content */
.character-crimson .ai-message *,
.character-crimson .user-message *,
.character-crimson .chat-container *,
.character-crimson .message-input *,
.character-crimson .send-button *,
.character-crimson .back-button * {
    background: rgba(255, 69, 0, 0.1) !important;
    color: #ff4500 !important;
}

/* Blayzica - Simple 2-color theme */
.character-blayzica #chatInterface,
.character-blayzica .ai-message,
.character-blayzica .user-message,
.character-blayzica .chat-container,
.character-blayzica .message-input,
.character-blayzica .send-button,
.character-blayzica .back-button,
.character-blayzica .chat-header,
.character-blayzica .message-bubble,
.character-blayzica .input-container {
    background: rgba(255, 0, 0, 0.1) !important;
    border-color: #ff0000 !important;
}

.character-blayzica .ai-message,
.character-blayzica .user-message,
.character-blayzica .character-name,
.character-blayzica #selectedCharacter span,
.character-blayzica .message-text,
.character-blayzica .send-button,
.character-blayzica .back-button,
.character-blayzica input,
.character-blayzica textarea,
.character-blayzica p,
.character-blayzica span,
.character-blayzica div,
.character-blayzica button {
    color: #ff0000 !important;
}

/* Remove any conflicting styles for Blayzica - but preserve character card content */
.character-blayzica .ai-message *,
.character-blayzica .user-message *,
.character-blayzica .chat-container *,
.character-blayzica .message-input *,
.character-blayzica .send-button *,
.character-blayzica .back-button * {
    background: rgba(255, 0, 0, 0.1) !important;
    color: #ff0000 !important;
}

/* Blayzica character card - ONLY outer border */
.character-blayzica .character-card {
    background: #000 !important;
    color: #ff0000 !important;
    border: 2px solid #ff0000 !important;
    border-radius: 12px !important;
    padding: 2rem !important;
}

/* Remove borders from character card children */
.character-blayzica .character-card * {
    border: none !important;
    background: transparent !important;
}

/* Blayzia - Simple 2-color theme */
.character-blayzia #chatInterface,
.character-blayzia .ai-message,
.character-blayzia .user-message,
.character-blayzia .chat-container,
.character-blayzia .message-input,
.character-blayzia .send-button,
.character-blayzia .back-button,
.character-blayzia .chat-header,
.character-blayzia .message-bubble,
.character-blayzia .input-container {
    background: rgba(255, 0, 110, 0.1) !important;
    border-color: #ff006e !important;
}

.character-blayzia .ai-message,
.character-blayzia .user-message,
.character-blayzia .character-name,
.character-blayzia #selectedCharacter span,
.character-blayzia .message-text,
.character-blayzia .send-button,
.character-blayzia .back-button,
.character-blayzia input,
.character-blayzia textarea,
.character-blayzia p,
.character-blayzia span,
.character-blayzia div,
.character-blayzia button {
    color: #ff006e !important;
}

/* Remove any conflicting styles for Blayzia - but preserve character card content */
.character-blayzia .ai-message *,
.character-blayzia .user-message *,
.character-blayzia .chat-container *,
.character-blayzia .message-input *,
.character-blayzia .send-button *,
.character-blayzia .back-button * {
    background: rgba(255, 0, 110, 0.1) !important;
    color: #ff006e !important;
}

/* Violet - Simple 2-color theme */
.character-violet #chatInterface,
.character-violet .ai-message,
.character-violet .user-message,
.character-violet .chat-container,
.character-violet .message-input,
.character-violet .send-button,
.character-violet .back-button,
.character-violet .chat-header,
.character-violet .message-bubble,
.character-violet .input-container {
    background: rgba(139, 92, 246, 0.1) !important;
    border-color: #8b5cf6 !important;
}

.character-violet .ai-message,
.character-violet .user-message,
.character-violet .character-name,
.character-violet #selectedCharacter span,
.character-violet .message-text,
.character-violet .send-button,
.character-violet .back-button,
.character-violet input,
.character-violet textarea,
.character-violet p,
.character-violet span,
.character-violet div,
.character-violet button {
    color: #8b5cf6 !important;
}

/* Remove any conflicting styles for Violet - but preserve character card content */
.character-violet .ai-message *,
.character-violet .user-message *,
.character-violet .chat-container *,
.character-violet .message-input *,
.character-violet .send-button *,
.character-violet .back-button * {
    background: rgba(139, 92, 246, 0.1) !important;
    color: #8b5cf6 !important;
}

/* Blayzo - Simple 2-color theme */
.character-blayzo #chatInterface,
.character-blayzo .ai-message,
.character-blayzo .user-message,
.character-blayzo .chat-container,
.character-blayzo .message-input,
.character-blayzo .send-button,
.character-blayzo .back-button,
.character-blayzo .chat-header,
.character-blayzo .message-bubble,
.character-blayzo .input-container {
    background: rgba(34, 211, 238, 0.1) !important;
    border-color: #22d3ee !important;
}

.character-blayzo .ai-message,
.character-blayzo .user-message,
.character-blayzo .character-name,
.character-blayzo #selectedCharacter span,
.character-blayzo .message-text,
.character-blayzo .send-button,
.character-blayzo .back-button,
.character-blayzo input,
.character-blayzo textarea,
.character-blayzo p,
.character-blayzo span,
.character-blayzo div,
.character-blayzo button {
    color: #22d3ee !important;
}

/* FINAL OVERRIDE: Simple 2-tone styling for Blayzo - highest priority */
html body.character-blayzo #chatInterface,
html body.character-blayzo .ai-message,
html body.character-blayzo .user-message,
html body.character-blayzo .chat-container,
html body.character-blayzo .message-input,
html body.character-blayzo .send-button,
html body.character-blayzo .back-button,
html body.character-blayzo .message-text,
html body.character-blayzo .message-content,
html body.character-blayzo .chat-header,
html body.character-blayzo .input-container {
    background: rgba(34, 211, 238, 0.1) !important;
    color: #22d3ee !important;
    border-color: #22d3ee !important;
}

/* Remove any conflicting styles for Blayzo - but preserve character card content */
.character-blayzo .ai-message *,
.character-blayzo .user-message *,
.character-blayzo .chat-container *,
.character-blayzo .message-input *,
.character-blayzo .send-button *,
.character-blayzo .back-button * {
    background: rgba(34, 211, 238, 0.1) !important;
    color: #22d3ee !important;
}

/* FINAL OVERRIDE: Simple 2-tone styling for all characters - highest priority */
html body.character-blayzica #chatInterface,
html body.character-blayzica .ai-message,
html body.character-blayzica .user-message,
html body.character-blayzica .chat-container,
html body.character-blayzica .message-input,
html body.character-blayzica .send-button,
html body.character-blayzica .back-button,
html body.character-blayzica .message-text,
html body.character-blayzica .message-content,
html body.character-blayzica .chat-header,
html body.character-blayzica .input-container {
    background: rgba(255, 0, 0, 0.1) !important;
    color: #ff0000 !important;
    border-color: #ff0000 !important;
}

html body.character-crimson #chatInterface,
html body.character-crimson .ai-message,
html body.character-crimson .user-message,
html body.character-crimson .chat-container,
html body.character-crimson .message-input,
html body.character-crimson .send-button,
html body.character-crimson .back-button,
html body.character-crimson .message-text,
html body.character-crimson .message-content,
html body.character-crimson .chat-header,
html body.character-crimson .input-container {
    background: rgba(255, 69, 0, 0.1) !important;
    color: #ff4500 !important;
    border-color: #ff4500 !important;
}

html body.character-violet #chatInterface,
html body.character-violet .ai-message,
html body.character-violet .user-message,
html body.character-violet .chat-container,
html body.character-violet .message-input,
html body.character-violet .send-button,
html body.character-violet .back-button,
html body.character-violet .message-text,
html body.character-violet .message-content,
html body.character-violet .chat-header,
html body.character-violet .input-container {
    background: rgba(139, 92, 246, 0.1) !important;
    color: #8b5cf6 !important;
    border-color: #8b5cf6 !important;
}

html body.character-blayzion #chatInterface,
html body.character-blayzion .ai-message,
html body.character-blayzion .user-message,
html body.character-blayzion .chat-container,
html body.character-blayzion .message-input,
html body.character-blayzion .send-button,
html body.character-blayzion .back-button,
html body.character-blayzion .message-text,
html body.character-blayzion .message-content,
html body.character-blayzion .chat-header,
html body.character-blayzion .input-container {
    background: rgba(255, 0, 110, 0.1) !important;
    color: #ff006e !important;
    border-color: #ff006e !important;
}

html body.character-blayzia #chatInterface,
html body.character-blayzia .ai-message,
html body.character-blayzia .user-message,
html body.character-blayzia .chat-container,
html body.character-blayzia .message-input,
html body.character-blayzia .send-button,
html body.character-blayzia .back-button,
html body.character-blayzia .message-text,
html body.character-blayzia .message-content,
html body.character-blayzia .chat-header,
html body.character-blayzia .input-container {
    background: rgba(255, 0, 110, 0.1) !important;
    color: #ff006e !important;
    border-color: #ff006e !important;
}

/* DAY MODE - Simple 2-tone styling for all characters */
body.day-mode .character-blayzo #chatInterface,
body.day-mode .character-blayzo .ai-message,
body.day-mode .character-blayzo .user-message,
body.day-mode .character-blayzo .chat-container,
body.day-mode .character-blayzo .message-input,
body.day-mode .character-blayzo .send-button,
body.day-mode .character-blayzo .back-button {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #1f2937 !important;
}

body.day-mode .character-blayzo .ai-message,
body.day-mode .character-blayzo .user-message,
body.day-mode .character-blayzo .message-text,
body.day-mode .character-blayzo .send-button,
body.day-mode .character-blayzo .back-button,
body.day-mode .character-blayzo input,
body.day-mode .character-blayzo textarea {
    color: #1f2937 !important;
}

body.day-mode .character-blayzica #chatInterface,
body.day-mode .character-blayzica .ai-message,
body.day-mode .character-blayzica .user-message,
body.day-mode .character-blayzica .chat-container,
body.day-mode .character-blayzica .message-input,
body.day-mode .character-blayzica .send-button,
body.day-mode .character-blayzica .back-button {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #1f2937 !important;
}

body.day-mode .character-blayzica .ai-message,
body.day-mode .character-blayzica .user-message,
body.day-mode .character-blayzica .message-text,
body.day-mode .character-blayzica .send-button,
body.day-mode .character-blayzica .back-button,
body.day-mode .character-blayzica input,
body.day-mode .character-blayzica textarea {
    color: #1f2937 !important;
}

body.day-mode .character-crimson #chatInterface,
body.day-mode .character-crimson .ai-message,
body.day-mode .character-crimson .user-message,
body.day-mode .character-crimson .chat-container,
body.day-mode .character-crimson .message-input,
body.day-mode .character-crimson .send-button,
body.day-mode .character-crimson .back-button {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #1f2937 !important;
}

body.day-mode .character-crimson .ai-message,
body.day-mode .character-crimson .user-message,
body.day-mode .character-crimson .message-text,
body.day-mode .character-crimson .send-button,
body.day-mode .character-crimson .back-button,
body.day-mode .character-crimson input,
body.day-mode .character-crimson textarea {
    color: #1f2937 !important;
}

body.day-mode .character-violet #chatInterface,
body.day-mode .character-violet .ai-message,
body.day-mode .character-violet .user-message,
body.day-mode .character-violet .chat-container,
body.day-mode .character-violet .message-input,
body.day-mode .character-violet .send-button,
body.day-mode .character-violet .back-button {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #1f2937 !important;
}

body.day-mode .character-violet .ai-message,
body.day-mode .character-violet .user-message,
body.day-mode .character-violet .message-text,
body.day-mode .character-violet .send-button,
body.day-mode .character-violet .back-button,
body.day-mode .character-violet input,
body.day-mode .character-violet textarea {
    color: #1f2937 !important;
}

body.day-mode .character-blayzion #chatInterface,
body.day-mode .character-blayzion .ai-message,
body.day-mode .character-blayzion .user-message,
body.day-mode .character-blayzion .chat-container,
body.day-mode .character-blayzion .message-input,
body.day-mode .character-blayzion .send-button,
body.day-mode .character-blayzion .back-button {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #1f2937 !important;
}

body.day-mode .character-blayzion .ai-message,
body.day-mode .character-blayzion .user-message,
body.day-mode .character-blayzion .message-text,
body.day-mode .character-blayzion .send-button,
body.day-mode .character-blayzion .back-button,
body.day-mode .character-blayzion input,
body.day-mode .character-blayzion textarea {
    color: #1f2937 !important;
}

body.day-mode .character-blayzia #chatInterface,
body.day-mode .character-blayzia .ai-message,
body.day-mode .character-blayzia .user-message,
body.day-mode .character-blayzia .chat-container,
body.day-mode .character-blayzia .message-input,
body.day-mode .character-blayzia .send-button,
body.day-mode .character-blayzia .back-button {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #1f2937 !important;
}

body.day-mode .character-blayzia .ai-message,
body.day-mode .character-blayzia .user-message,
body.day-mode .character-blayzia .message-text,
body.day-mode .character-blayzia .send-button,
body.day-mode .character-blayzia .back-button,
body.day-mode .character-blayzia input,
body.day-mode .character-blayzia textarea {
    color: #1f2937 !important;
}

/* ========================================
   COMPANION CHAT ELEMENTS STYLING
======================================== */

/* Apply companion-specific styling to all chat elements */
.character-blayzion .chat-container,
.character-blayzion .ai-message,
.character-blayzion .user-message,
.character-blayzion .input-field,
.character-blayzion .btn-primary,
.character-blayzion .btn-secondary,
.character-blayzion .timestamp,
.character-blayzion .typing-indicator,
.character-blayzion .error-message {
    background: #22d3ee !important;
    color: transparent !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    background-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607) !important;
    border: 2px solid;
    border-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607) 1 !important;
    border-radius: 8px !important;
}

.character-crimson .chat-container,
.character-crimson .ai-message,
.character-crimson .user-message,
.character-crimson .input-field,
.character-crimson .btn-primary,
.character-crimson .btn-secondary,
.character-crimson .timestamp,
.character-crimson .typing-indicator,
.character-crimson .error-message {
    background: #000 !important;
    color: #dc2626 !important;
    border: 2px solid #dc2626 !important;
    border-radius: 8px !important;
}

.character-blayzica .chat-container,
.character-blayzica .ai-message,
.character-blayzica .user-message,
.character-blayzica .input-field,
.character-blayzica .btn-primary,
.character-blayzica .btn-secondary,
.character-blayzica .timestamp,
.character-blayzica .typing-indicator,
.character-blayzica .error-message {
    background: #000 !important;
    color: #ef4444 !important;
    border: 2px solid #ef4444 !important;
    border-radius: 8px !important;
}

.character-blayzia .chat-container,
.character-blayzia .ai-message,
.character-blayzia .user-message,
.character-blayzia .input-field,
.character-blayzia .btn-primary,
.character-blayzia .btn-secondary,
.character-blayzia .timestamp,
.character-blayzia .typing-indicator,
.character-blayzia .error-message {
    background: #ef4444 !important;
    color: transparent !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    background-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607) !important;
    border: 2px solid;
    border-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607) 1 !important;
    border-radius: 8px !important;
}

.character-violet .chat-container,
.character-violet .ai-message,
.character-violet .user-message,
.character-violet .input-field,
.character-violet .btn-primary,
.character-violet .btn-secondary,
.character-violet .timestamp,
.character-violet .typing-indicator,
.character-violet .error-message {
    background: #000 !important;
    color: #7c3aed !important;
    border: 2px solid #7c3aed !important;
    border-radius: 8px !important;
}

.character-blayzo .chat-container {
    background: rgba(0, 0, 0, 0.9) !important;
    border: 2px solid #22d3ee !important;
}

.character-blayzo .user-message {
    background: rgba(0, 0, 0, 0.9) !important;
    color: #22d3ee !important;
    border: 2px solid #22d3ee !important;
    border-radius: 8px !important;
}

.character-blayzo .timestamp {
    color: #22d3ee !important;
    opacity: 0.8 !important;
}

.character-blayzo .typing-indicator {
    background: rgba(0, 0, 0, 0.9) !important;
    color: #22d3ee !important;
    border: 2px solid #22d3ee !important;
    border-radius: 8px !important;
}

.character-blayzo .typing-text {
    color: #22d3ee !important;
}

.character-blayzo .typing-dot {
    background: #22d3ee !important;
}

.character-blayzo .btn-primary {
    background: rgba(0, 0, 0, 0.9) !important;
    color: #22d3ee !important;
    border: 2px solid #22d3ee !important;
}

.character-blayzo .btn-secondary {
    background: rgba(0, 0, 0, 0.9) !important;
    color: #22d3ee !important;
    border: 2px solid #22d3ee !important;
}

.character-blayzo .error-message {
    background: rgba(0, 0, 0, 0.9) !important;
    color: #22d3ee !important;
    border: 2px solid #22d3ee !important;
    border-radius: 8px !important;
}

.character-blayzo .chat-container::-webkit-scrollbar-thumb {
    background: #22d3ee !important;
    border: 1px solid #000 !important;
}

.character-blayzo .input-field {
    background: rgba(0, 0, 0, 0.9) !important;
    border: 2px solid #22d3ee !important;
    color: #22d3ee !important;
    border-radius: 8px !important;
}

.character-blayzo .input-field::placeholder {
    color: #22d3ee !important;
    opacity: 0.7 !important;
}

/* Dark mode AI message styling for Blayzica */
.character-blayzica .ai-message {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.9), rgba(220, 38, 38, 0.8)) !important;
    color: #000 !important;
    border: 2px solid #22d3ee !important;
}

/* Character-specific AI messages in day mode */
body.day-mode.character-blayzica .ai-message {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.9), rgba(220, 38, 38, 0.8)) !important;
    color: #000 !important;
    border: 1px solid rgba(220, 38, 38, 0.5) !important;
}

body.day-mode.character-blayzo .ai-message {
    background: #000 !important;
    color: #22d3ee !important;
    border: 2px solid #22d3ee !important;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.3) !important;
    border-radius: 8px !important;
}

/* Premium character AI messages - Dark mode */
.character-blayzion .ai-message {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.9), rgba(34, 211, 238, 0.8)) !important;
    color: transparent !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    border: 1px solid rgba(34, 211, 238, 0.5) !important;
}

/* Removed gradient animations for simple 2-tone styling */

.character-blayzia .ai-message {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.9), rgba(220, 38, 38, 0.8)) !important;
    color: transparent !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    border: 1px solid rgba(220, 38, 38, 0.5) !important;
}

/* Removed gradient animations for simple 2-tone styling */

/* Premium character AI messages - Day mode */
body.day-mode.character-blayzion .ai-message {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.9), rgba(34, 211, 238, 0.8)) !important;
    border: 1px solid rgba(34, 211, 238, 0.5) !important;
}

body.day-mode/* Removed gradient animations for simple 2-tone styling */

body.day-mode.character-blayzia .ai-message {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.9), rgba(220, 38, 38, 0.8)) !important;
    border: 1px solid rgba(220, 38, 38, 0.5) !important;
}

body.day-mode/* Removed gradient animations for simple 2-tone styling */

/* Premium character AI messages - Violet */
.character-violet .ai-message {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.9), rgba(75, 0, 130, 0.8)) !important;
    color: transparent !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    border: 1px solid rgba(138, 43, 226, 0.5) !important;
}

.character-violet .ai-message * {
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607) !important;
    background-size: 400% 400% !important;
    animation: galaxyText 3s ease-in-out infinite !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: bold !important;
}

body.day-mode.character-violet .ai-message {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.9), rgba(75, 0, 130, 0.8)) !important;
    border: 1px solid rgba(138, 43, 226, 0.5) !important;
}

body.day-mode.character-violet .ai-message * {
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607) !important;
    background-size: 400% 400% !important;
    animation: galaxyText 3s ease-in-out infinite !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: bold !important;
}

/* Premium character AI messages - Crimson */
.character-crimson .ai-message {
    background: linear-gradient(135deg, rgba(220, 20, 60, 0.9), rgba(139, 0, 0, 0.8)) !important;
    color: transparent !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    border: 1px solid rgba(220, 20, 60, 0.5) !important;
}

.character-crimson .ai-message * {
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607) !important;
    background-size: 400% 400% !important;
    animation: galaxyText 3s ease-in-out infinite !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: bold !important;
}

body.day-mode.character-crimson .ai-message {
    background: linear-gradient(135deg, rgba(220, 20, 60, 0.9), rgba(139, 0, 0, 0.8)) !important;
    border: 1px solid rgba(220, 20, 60, 0.5) !important;
}

body.day-mode.character-crimson .ai-message * {
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607) !important;
    background-size: 400% 400% !important;
    animation: galaxyText 3s ease-in-out infinite !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: bold !important;
}

/* Galaxy text animation */
@keyframes galaxyText {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Premium character select page styling */
.character-blayzion .character-name,
.character-blayzia .character-name,
.character-violet .character-name,
.character-crimson .character-name {
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607) !important;
    background-size: 400% 400% !important;
    animation: galaxyText 3s ease-in-out infinite !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: bold !important;
}

.character-blayzion .character-description,
.character-blayzia .character-description,
.character-violet .character-description,
.character-crimson .character-description {
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607) !important;
    background-size: 400% 400% !important;
    animation: galaxyText 3s ease-in-out infinite !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: bold !important;
}

body.day-mode .user-message {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.9), rgba(34, 211, 238, 0.7)) !important;
    color: #000 !important;
}

/* Dark mode character ready boxes */
.character-blayzo #selectedCharacter {
    background: rgba(34, 211, 238, 0.9) !important;
    border: 2px solid #22d3ee !important;
    color: #000 !important;
}

.character-blayzica #selectedCharacter {
    background: rgba(0, 0, 0, 0.9) !important;
    border: 2px solid #dc2626 !important;
    color: #dc2626 !important;
}

.character-blayzion #selectedCharacter {
    background: rgba(255, 215, 0, 0.9) !important;
    border: 2px solid #ffd700 !important;
    color: #000 !important;
}

.character-blayzia #selectedCharacter {
    background: rgba(255, 215, 0, 0.9) !important;
    border: 2px solid #ffd700 !important;
    color: #000 !important;
}

.character-violet #selectedCharacter {
    background: rgba(138, 43, 226, 0.9) !important;
    border: 2px solid #8a2be2 !important;
    color: #fff !important;
}

.character-crimson #selectedCharacter {
    background: rgba(220, 20, 60, 0.9) !important;
    border: 2px solid #dc143c !important;
    color: #fff !important;
}

/* Day mode character ready box - Blayzo */
body.day-mode.character-blayzo #selectedCharacter {
    background: rgba(220, 38, 38, 0.9) !important;
    border: 2px solid #dc2626 !important;
    color: #000 !important;
}

/* Day mode character ready box - Blayzica */
body.day-mode.character-blayzica #selectedCharacter {
    background: rgba(34, 211, 238, 0.9) !important;
    border: 2px solid #22d3ee !important;
    color: #000 !important;
}

/* Day mode character ready box - Blayzion */
body.day-mode.character-blayzion #selectedCharacter {
    background: rgba(220, 38, 38, 0.9) !important;
    border: 2px solid #dc2626 !important;
    color: #ffd700 !important;
}

/* Day mode character ready box - Blayzia */
body.day-mode.character-blayzia #selectedCharacter {
    background: rgba(220, 38, 38, 0.9) !important;
    border: 2px solid #dc2626 !important;
    color: #ffd700 !important;
}

/* Day mode character ready box - Violet */
body.day-mode.character-violet #selectedCharacter {
    background: rgba(138, 43, 226, 0.9) !important;
    border: 2px solid #8a2be2 !important;
    color: #ffd700 !important;
}

/* Day mode character ready box - Crimson */
body.day-mode.character-crimson #selectedCharacter {
    background: rgba(220, 20, 60, 0.9) !important;
    border: 2px solid #dc143c !important;
    color: #ffd700 !important;
}

/* Character-specific greeting colors in day mode */
body.day-mode .character-blayzo-text {
    color: #000 !important;
    background: rgba(34, 211, 238, 0.9) !important;
}

body.day-mode .character-blayzica-text {
    color: #000 !important;
    background: rgba(34, 211, 238, 0.9) !important;
}

/* SoulBridge AI Chat label styling - dark mode */
.character-blayzo .soulbridge-chat-label {
    color: #22d3ee !important;
    border: 2px solid #22d3ee !important;
    text-align: center !important;
    background: rgba(0, 0, 0, 0.9) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
}

.character-blayzica .soulbridge-chat-label {
    color: #dc2626 !important;
    background: rgba(0, 0, 0, 0.9) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    border: 2px solid #dc2626 !important;
    text-align: center !important;
}

/* SoulBridge AI Chat label in day mode - Blayzo */
body.day-mode.character-blayzo .soulbridge-chat-label {
    background: rgba(0, 0, 0, 0.9) !important;
    color: #22d3ee !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
    border: 2px solid #22d3ee !important;
    text-align: center !important;
}

/* SoulBridge AI Chat label in day mode - Blayzica */
body.day-mode.character-blayzica .soulbridge-chat-label {
    background: rgba(0, 0, 0, 0.9) !important;
    color: #dc2626 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 8px !important;
}

/* Message input styling for Blayzo in day mode */
body.day-mode.character-blayzo .input-field {
    background: rgba(0, 0, 0, 0.9) !important;
    border-color: #22d3ee !important;
    color: #22d3ee !important;
    box-shadow: 0 4px 15px rgba(34, 211, 238, 0.1) !important;
}

body.day-mode.character-blayzo .input-field::placeholder {
    color: #22d3ee !important;
    opacity: 0.7;
}

/* ========================================
   COMPANION-SPECIFIC PAGE STYLING - DAY MODE
======================================== */

/* Blayzo - Cyan border, black background, cyan text */
body.day-mode.character-blayzo #chatInterface,
body.day-mode.character-blayzo .character-card {
    border: 3px solid #22d3ee !important;
    background: #000 !important;
    min-height: 100vh !important;
    color: #22d3ee !important;
}

/* Blayzion - Galaxy border, cyan background, galaxy text */
body.day-mode.character-blayzion #chatInterface,
body.day-mode.character-blayzion .character-card {
    border: 3px solid;
    border-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607) 1 !important;
    background: #22d3ee !important;
    min-height: 100vh !important;
    color: transparent !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    background-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607) !important;
}

/* Crimson - Crimson border, black background, crimson text */
body.day-mode.character-crimson #chatInterface,
body.day-mode.character-crimson .character-card {
    border: 3px solid #dc2626 !important;
    background: #000 !important;
    min-height: 100vh !important;
    color: #dc2626 !important;
}

/* Blayzica - Red border, black background, red text */
body.day-mode.character-blayzica #chatInterface,
body.day-mode.character-blayzica .character-card {
    border: 3px solid #ef4444 !important;
    background: #000 !important;
    min-height: 100vh !important;
    color: #ef4444 !important;
}

/* Blayzia - Galaxy border, red background, galaxy text */
body.day-mode.character-blayzia #chatInterface,
body.day-mode.character-blayzia .character-card {
    border: 3px solid;
    border-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607) 1 !important;
    background: #ef4444 !important;
    min-height: 100vh !important;
    color: transparent !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    background-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607) !important;
}

/* Violet - Violet border, black background, violet text */
body.day-mode.character-violet #chatInterface,
body.day-mode.character-violet .character-card {
    border: 3px solid #7c3aed !important;
    background: #000 !important;
    min-height: 100vh !important;
    color: #7c3aed !important;
}

body.day-mode.character-blayzo .chat-container {
    background: rgba(0, 0, 0, 0.9) !important;
    border: 2px solid #22d3ee !important;
}

body.day-mode.character-blayzo .user-message {
    background: rgba(0, 0, 0, 0.9) !important;
    color: #22d3ee !important;
    border: 2px solid #22d3ee !important;
    border-radius: 8px !important;
}

body.day-mode.character-blayzo .timestamp {
    color: #22d3ee !important;
    opacity: 0.8 !important;
}

body.day-mode.character-blayzo .typing-indicator {
    background: rgba(0, 0, 0, 0.9) !important;
    color: #22d3ee !important;
    border: 2px solid #22d3ee !important;
    border-radius: 8px !important;
}

body.day-mode.character-blayzo .typing-text {
    color: #22d3ee !important;
}

body.day-mode.character-blayzo .typing-dot {
    background: #22d3ee !important;
}

body.day-mode.character-blayzo .btn-primary {
    background: rgba(0, 0, 0, 0.9) !important;
    color: #22d3ee !important;
    border: 2px solid #22d3ee !important;
}

body.day-mode.character-blayzo .btn-secondary {
    background: rgba(0, 0, 0, 0.9) !important;
    color: #22d3ee !important;
    border: 2px solid #22d3ee !important;
}

body.day-mode.character-blayzo .error-message {
    background: rgba(0, 0, 0, 0.9) !important;
    color: #22d3ee !important;
    border: 2px solid #22d3ee !important;
    border-radius: 8px !important;
}

body.day-mode.character-blayzo .chat-container::-webkit-scrollbar-thumb {
    background: #22d3ee !important;
    border: 1px solid #000 !important;
}

/* Message input styling for Blayzica in day mode */
body.day-mode.character-blayzica .input-field {
    background: rgba(0, 0, 0, 0.9) !important;
    border-color: #dc2626 !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.1) !important;
}

body.day-mode.character-blayzica .input-field::placeholder {
    color: #fff !important;
    opacity: 0.7;
}

body.day-mode #selectedCharacter span {
    color: #fff !important;
}

/* Character-specific ready label colors in dark mode - Override the global black text */
body:not(.day-mode) .character-blayzo-label,
body:not(.day-mode) #selectedCharacter span.character-blayzo-label,
body:not(.day-mode) #selectedCharacter .character-blayzo-label,
body:not(.day-mode) span.character-blayzo-label {
    color: #22d3ee !important;
    font-weight: bold !important;
    background: #000 !important;
    border: 2px solid #22d3ee !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    display: inline-block !important;
}

body:not(.day-mode) .character-blayzica-label,
body:not(.day-mode) #selectedCharacter span.character-blayzica-label,
body:not(.day-mode) #selectedCharacter .character-blayzica-label,
body:not(.day-mode) span.character-blayzica-label {
    color: #ec4899 !important;
    font-weight: bold !important;
}

body:not(.day-mode) .character-blayzion-label,
body:not(.day-mode) #selectedCharacter span.character-blayzion-label,
body:not(.day-mode) #selectedCharacter .character-blayzion-label,
body:not(.day-mode) span.character-blayzion-label {
    color: #ffd700 !important;
    font-weight: bold !important;
}

body:not(.day-mode) .character-blayzia-label,
body:not(.day-mode) #selectedCharacter span.character-blayzia-label,
body:not(.day-mode) #selectedCharacter .character-blayzia-label,
body:not(.day-mode) span.character-blayzia-label {
    color: #ffd700 !important;
    font-weight: bold !important;
}

body:not(.day-mode) .character-violet-label,
body:not(.day-mode) #selectedCharacter span.character-violet-label,
body:not(.day-mode) #selectedCharacter .character-violet-label,
body:not(.day-mode) span.character-violet-label {
    color: #7c3aed !important;
    font-weight: bold !important;
}

body:not(.day-mode) .character-crimson-label,
body:not(.day-mode) #selectedCharacter span.character-crimson-label,
body:not(.day-mode) #selectedCharacter .character-crimson-label,
body:not(.day-mode) span.character-crimson-label {
    color: #dc2626 !important;
    font-weight: bold !important;
}

/* Character-specific ready label colors in day mode */
body.day-mode.character-blayzo .character-blayzo-label,
body.day-mode.character-blayzo #selectedCharacter span {
    color: #22d3ee !important;
}

body.day-mode.character-blayzica .character-blayzica-label,
body.day-mode.character-blayzica #selectedCharacter span {
    color: #000 !important;
}

body.day-mode.character-blayzion .character-blayzion-label,
body.day-mode.character-blayzion #selectedCharacter span {
    color: #ffd700 !important;
}

body.day-mode.character-blayzia .character-blayzia-label,
body.day-mode.character-blayzia #selectedCharacter span {
    color: #ffd700 !important;
}

body.day-mode.character-violet .character-violet-label,
body.day-mode.character-violet #selectedCharacter span {
    color: #ffd700 !important;
}

body.day-mode.character-crimson .character-crimson-label,
body.day-mode.character-crimson #selectedCharacter span {
    color: #ffd700 !important;
}

body.day-mode .timestamp {
    opacity: 0.8 !important;
}

body.day-mode .typing-indicator {
    background: linear-gradient(135deg, rgba(0,0,0,0.9), rgba(0,0,0,0.8)) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}

body.day-mode .typing-text {
    color: #22d3ee !important;
}

body.day-mode .typing-dot {
    background-color: #22d3ee !important;
}

/* Day mode buttons */
body.day-mode .btn-primary {
    background: linear-gradient(135deg, #22d3ee, #0891b2);
    color: #000;
    box-shadow: 0 4px 15px rgba(34, 211, 238, 0.3);
}

body.day-mode .btn-primary:hover {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    box-shadow: 0 8px 25px rgba(34, 211, 238, 0.5);
}

body.day-mode .btn-secondary {
    background: linear-gradient(135deg, #374151, #1f2937);
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.day-mode .btn-secondary:hover {
    background: linear-gradient(135deg, #1f2937, #111827);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* Day mode inputs */
body.day-mode .input-field {
    background: rgba(255, 255, 255, 0.9);
    border-color: #000;
    color: #000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

body.day-mode .input-field:focus {
    border-color: #374151;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), 0 8px 25px rgba(0, 0, 0, 0.2);
}

body.day-mode .input-field:hover {
    border-color: #374151;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Day mode library components */
body.day-mode .conversation-card {
    background: rgba(248, 249, 250, 0.9);
    border-color: #000;
    color: #000;
}

body.day-mode .conversation-card:hover {
    background: rgba(248, 249, 250, 1);
}

body.day-mode .conversation-title {
    color: #000;
}

body.day-mode .conversation-meta,
body.day-mode .conversation-preview {
    color: #000;
}

/* Day mode reminder settings */
body.day-mode .reminder-setting {
    background: rgba(248, 249, 250, 0.9);
    border-color: #000;
}

body.day-mode .reminder-setting h3 {
    color: #000;
}

body.day-mode .reminder-option label {
    color: #000;
}

body.day-mode .time-input,
body.day-mode .email-input {
    background: rgba(255, 255, 255, 0.9);
    border-color: #000;
    color: #000;
}

body.day-mode .frequency-btn {
    border-color: #000;
    background: rgba(255, 255, 255, 0.9);
    color: #000;
}

/* Day mode error handling */
body.day-mode .error-message {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.9), rgba(185, 28, 28, 0.8)) !important;
    border-color: rgba(220, 38, 38, 0.5) !important;
}

body.day-mode .retry-btn {
    background: rgba(34, 211, 238, 0.9) !important;
    color: #000 !important;
}

body.day-mode .dismiss-btn {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #fff !important;
}

/* Intro screen background */
#introScreen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

#introScreen > * {
    position: relative;
    z-index: 3;
}

/* Intro logo styling */
.intro-logo {
    filter: drop-shadow(0 0 20px rgba(34, 211, 238, 0.5)) !important;
}

/* Day mode intro logo - add dark shadow for better contrast */
body.day-mode .intro-logo {
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.8)) !important;
    background: rgba(0, 0, 0, 0.2) !important;
    padding: 1rem !important;
    border-radius: 20px !important;
}

/* Character header styling */
#selectedCharacter {
    font-size: 1.25rem !important;
    padding: 0.75rem 1.5rem !important;
    margin-bottom: 1.5rem !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* FINAL OVERRIDE - NO BACKGROUNDS OR BORDERS EXCEPT BLAYZO */
div.character-card.character-blayzion:not(.preserve-styling),
div.character-card.character-crimson:not(.preserve-styling),
div.character-card.character-blayzica:not(.preserve-styling),
div.character-card.character-blayzia:not(.preserve-styling),
div.character-card.character-violet:not(.preserve-styling),
body.character-blayzion div.character-card,
body.character-crimson div.character-card,
body.character-blayzica div.character-card,
body.character-blayzia div.character-card,
body.character-violet div.character-card,
body.day-mode div.character-card:not(.character-blayzo),
body.day-mode.character-blayzion div.character-card,
body.day-mode.character-crimson div.character-card,
body.day-mode.character-blayzica div.character-card,
body.day-mode.character-blayzia div.character-card,
body.day-mode.character-violet div.character-card,
.character-blayzion .character-card,
.character-crimson .character-card,
.character-blayzica .character-card,
.character-blayzia .character-card,
.character-violet .character-card {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    border-image: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    outline: none !important;
}

/* ALL COMPANIONS FINAL OVERRIDES - DUAL BORDER SETUP */

/* BLAYZO FINAL OVERRIDE */
html body div.character-card.character-blayzo {
    background: #000 !important;
    border: 2px solid #22d3ee !important;
    border-radius: 12px !important;
    padding: 2rem !important;
}

/* BLAYZICA FINAL OVERRIDE */
html body div.character-card.character-blayzica {
    background: #000 !important;
    border: 2px solid #ff0000 !important;
    border-radius: 12px !important;
    padding: 2rem !important;
}

/* CRIMSON FINAL OVERRIDE */
html body div.character-card.character-crimson {
    background: #000 !important;
    border: 2px solid #ff4500 !important;
    border-radius: 12px !important;
    padding: 2rem !important;
}

/* VIOLET FINAL OVERRIDE */
html body div.character-card.character-violet {
    background: #000 !important;
    border: 2px solid #8b5cf6 !important;
    border-radius: 12px !important;
    padding: 2rem !important;
}

/* BLAYZION FINAL OVERRIDE */
html body div.character-card.character-blayzion {
    background: #000 !important;
    border: 3px solid;
    border-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b) 1 !important;
    border-radius: 12px !important;
    padding: 2rem !important;
}

/* BLAYZIA FINAL OVERRIDE */
html body div.character-card.character-blayzia {
    background: #000 !important;
    border: 3px solid #ff006e !important;
    border-radius: 12px !important;
    padding: 2rem !important;
}

/* ULTIMATE OVERRIDE - ALL COMPANIONS WITH MAXIMUM PRIORITY */
html body div.character-grid div.character-card.character-blayzica,
html body div.character-grid div.character-card.character-crimson,
html body div.character-grid div.character-card.character-violet,
html body div.character-grid div.character-card.character-blayzion,
html body div.character-grid div.character-card.character-blayzia {
    background: #000 !important;
    background-color: #000 !important;
    border-radius: 12px !important;
    padding: 2rem !important;
}

html body div.character-grid div.character-card.character-blayzica {
    border: 3px solid #ff0000 !important;
    border-width: 3px !important;
    border-style: solid !important;
    border-color: #ff0000 !important;
}

html body div.character-grid div.character-card.character-crimson {
    border: 3px solid #ff4500 !important;
}

html body div.character-grid div.character-card.character-violet {
    border: 3px solid #8b5cf6 !important;
}

html body div.character-grid div.character-card.character-blayzion {
    border: 3px solid #ff006e !important;
}

html body div.character-grid div.character-card.character-blayzia {
    border: 3px solid #ff006e !important;
}

/* TEXT AREA BORDERS FOR ALL COMPANIONS */
html body div.character-grid div.character-card.character-blayzica div[style*="text-align: center"]:not([style*="margin-bottom"]) {
    border: 1px solid #ff0000 !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    margin-top: 1rem !important;
    background: transparent !important;
}

html body div.character-grid div.character-card.character-crimson div[style*="text-align: center"]:not([style*="margin-bottom"]) {
    border: 1px solid #ff4500 !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    margin-top: 1rem !important;
    background: transparent !important;
}

html body div.character-grid div.character-card.character-violet div[style*="text-align: center"]:not([style*="margin-bottom"]) {
    border: 1px solid #8b5cf6 !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    margin-top: 1rem !important;
    background: transparent !important;
}

html body div.character-grid div.character-card.character-blayzion div[style*="text-align: center"]:not([style*="margin-bottom"]) {
    border: 1px solid #ff006e !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    margin-top: 1rem !important;
    background: transparent !important;
}

html body div.character-grid div.character-card.character-blayzia div[style*="text-align: center"]:not([style*="margin-bottom"]) {
    border: 1px solid #ff006e !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    margin-top: 1rem !important;
    background: transparent !important;
}

/* BLAYZICA SPECIAL OVERRIDE - MAXIMUM PRIORITY */
html body div.character-grid div.character-card.character-blayzica,
html body div.character-card.character-blayzica,
div.character-card.character-blayzica {
    background: #000 !important;
    background-color: #000 !important;
    border: 2px solid #ff0000 !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: #ff0000 !important;
    border-radius: 12px !important;
    padding: 2rem !important;
}

/* BLAYZICA TEXT AREA - SPECIAL OVERRIDE */
html body div.character-grid div.character-card.character-blayzica div[style*="text-align: center"]:not([style*="margin-bottom"]),
html body div.character-card.character-blayzica div[style*="text-align: center"]:not([style*="margin-bottom"]),
div.character-card.character-blayzica div[style*="text-align: center"]:not([style*="margin-bottom"]) {
    border: 1px solid #ff0000 !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #ff0000 !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    margin-top: 1rem !important;
    background: transparent !important;
}

/* FORCE ALL COMPANIONS TEXT AREA BORDERS - MAXIMUM SPECIFICITY */

/* FORCE BLAYZO TEXT AREA - Cyan border */
html body div.character-grid div.character-card.character-blayzo div[style*="text-align: center"]:not([style*="margin-bottom"]),
html body div.character-card.character-blayzo div[style*="text-align: center"]:not([style*="margin-bottom"]),
div.character-card.character-blayzo div[style*="text-align: center"]:not([style*="margin-bottom"]),
.character-card.character-blayzo div[style*="text-align: center"]:not([style*="margin-bottom"]) {
    border: 2px solid #22d3ee !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: #22d3ee !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-top: 1.5rem !important;
    background: transparent !important;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.3) !important;
}

/* FORCE BLAYZICA TEXT AREA - Red border */
html body div.character-grid div.character-card.character-blayzica div[style*="text-align: center"]:not([style*="margin-bottom"]),
html body div.character-card.character-blayzica div[style*="text-align: center"]:not([style*="margin-bottom"]),
div.character-card.character-blayzica div[style*="text-align: center"]:not([style*="margin-bottom"]),
.character-card.character-blayzica div[style*="text-align: center"]:not([style*="margin-bottom"]) {
    border: 2px solid #ff0000 !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: #ff0000 !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-top: 1.5rem !important;
    background: transparent !important;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.3) !important;
}

/* FORCE CRIMSON TEXT AREA - Orange border */
html body div.character-grid div.character-card.character-crimson div[style*="text-align: center"]:not([style*="margin-bottom"]),
html body div.character-card.character-crimson div[style*="text-align: center"]:not([style*="margin-bottom"]),
div.character-card.character-crimson div[style*="text-align: center"]:not([style*="margin-bottom"]),
.character-card.character-crimson div[style*="text-align: center"]:not([style*="margin-bottom"]) {
    border: 2px solid #ff4500 !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: #ff4500 !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-top: 1.5rem !important;
    background: transparent !important;
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.3) !important;
}

/* FORCE VIOLET TEXT AREA - Purple border */
html body div.character-grid div.character-card.character-violet div[style*="text-align: center"]:not([style*="margin-bottom"]),
html body div.character-card.character-violet div[style*="text-align: center"]:not([style*="margin-bottom"]),
div.character-card.character-violet div[style*="text-align: center"]:not([style*="margin-bottom"]),
.character-card.character-violet div[style*="text-align: center"]:not([style*="margin-bottom"]) {
    border: 2px solid #8b5cf6 !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: #8b5cf6 !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-top: 1.5rem !important;
    background: transparent !important;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3) !important;
}

/* FORCE BLAYZION TEXT AREA - Rainbow border with glow */
html body div.character-grid div.character-card.character-blayzion div[style*="text-align: center"]:not([style*="margin-bottom"]),
html body div.character-card.character-blayzion div[style*="text-align: center"]:not([style*="margin-bottom"]),
div.character-card.character-blayzion div[style*="text-align: center"]:not([style*="margin-bottom"]),
.character-card.character-blayzion div[style*="text-align: center"]:not([style*="margin-bottom"]) {
    border: 3px solid !important;
    border-width: 3px !important;
    border-style: solid !important;
    border-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607) 1 !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-top: 1.5rem !important;
    background: transparent !important;
    box-shadow: 0 0 20px rgba(255, 0, 110, 0.4) !important;
    animation: rainbowGlow 3s ease-in-out infinite !important;
}

/* FORCE BLAYZIA TEXT AREA - Rainbow border with glow */
html body div.character-grid div.character-card.character-blayzia div[style*="text-align: center"]:not([style*="margin-bottom"]),
html body div.character-card.character-blayzia div[style*="text-align: center"]:not([style*="margin-bottom"]),
div.character-card.character-blayzia div[style*="text-align: center"]:not([style*="margin-bottom"]),
.character-card.character-blayzia div[style*="text-align: center"]:not([style*="margin-bottom"]) {
    border: 3px solid !important;
    border-width: 3px !important;
    border-style: solid !important;
    border-image: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b, #fb5607) 1 !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-top: 1.5rem !important;
    background: transparent !important;
    box-shadow: 0 0 20px rgba(255, 0, 110, 0.4) !important;
    animation: rainbowGlow 3s ease-in-out infinite !important;
}

/* Rainbow glow animation */
@keyframes rainbowGlow {
    0% { box-shadow: 0 0 20px rgba(255, 0, 110, 0.4) !important; }
    25% { box-shadow: 0 0 20px rgba(131, 56, 236, 0.4) !important; }
    50% { box-shadow: 0 0 20px rgba(58, 134, 255, 0.4) !important; }
    75% { box-shadow: 0 0 20px rgba(6, 255, 165, 0.4) !important; }
    100% { box-shadow: 0 0 20px rgba(255, 190, 11, 0.4) !important; }
}

/* FORCE PREMIUM LABELS TO BE VISIBLE - MAXIMUM SPECIFICITY */
html body div.character-grid div.character-card.premium-character div:contains("💎 Premium: $5.00"),
html body div.character-card.premium-character div:contains("💎 Premium: $5.00"),
div.character-card.premium-character div:contains("💎 Premium: $5.00"),
.character-card.premium-character div:contains("💎 Premium: $5.00"),
html body div.character-grid div.character-card div[style*="💎 Premium"],
html body div.character-card div[style*="💎 Premium"],
div.character-card div[style*="💎 Premium"],
.character-card div[style*="💎 Premium"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(34, 211, 238, 0.2) !important;
    border: 2px solid #22d3ee !important;
    border-radius: 20px !important;
    padding: 12px 20px !important;
    margin-top: 1.5rem !important;
    color: #22d3ee !important;
    font-weight: 900 !important;
    font-size: 1rem !important;
    text-align: center !important;
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.4) !important;
    animation: premiumPulse 2s ease-in-out infinite !important;
}

/* Premium pulse animation */
@keyframes premiumPulse {
    0% { transform: scale(1) !important; box-shadow: 0 0 15px rgba(34, 211, 238, 0.4) !important; }
    50% { transform: scale(1.05) !important; box-shadow: 0 0 25px rgba(34, 211, 238, 0.6) !important; }
    100% { transform: scale(1) !important; box-shadow: 0 0 15px rgba(34, 211, 238, 0.4) !important; }
}

/* ALL COMPANIONS IMAGE AREAS - NO BORDERS */
html body div.character-card div[style*="margin-bottom: 1.5rem"] {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Remove individual borders from ALL companion names and greetings - EXCEPT speech bubbles */
html body div.character-card .character-name:not(.speech-bubble),
html body div.character-card .character-description,
html body div.character-card .character-greeting {
    border: none !important;
    padding: 0 !important;
    margin: 0.5rem 0 !important;
}

/* Remove backgrounds ONLY for non-gradient companions - EXCEPT speech bubbles */
html body div.character-card:not(.character-blayzion):not(.character-blayzia) .character-name:not(.speech-bubble),
html body div.character-card:not(.character-blayzion):not(.character-blayzia) .character-description,
html body div.character-card:not(.character-blayzion):not(.character-blayzia) .character-greeting {
    background: transparent !important;
}

/* Character-specific text colors */
html body div.character-card.character-blayzo .character-name,
html body div.character-card.character-blayzo .character-description,
html body div.character-card.character-blayzo .character-greeting {
    color: #22d3ee !important;
}

html body div.character-card.character-blayzica .character-name,
html body div.character-card.character-blayzica .character-description,
html body div.character-card.character-blayzica .character-greeting {
    color: #ff0000 !important;
}

html body div.character-card.character-crimson .character-name,
html body div.character-card.character-crimson .character-description,
html body div.character-card.character-crimson .character-greeting {
    color: #ff4500 !important;
}

html body div.character-card.character-violet .character-name,
html body div.character-card.character-violet .character-description,
html body div.character-card.character-violet .character-greeting {
    color: #8b5cf6 !important;
}

html body div.character-card.character-blayzion .character-name:not(.speech-bubble),
html body div.character-card.character-blayzion .character-description,
html body div.character-card.character-blayzion .character-greeting {
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

html body div.character-card.character-blayzia .character-name:not(.speech-bubble),
html body div.character-card.character-blayzia .character-description,
html body div.character-card.character-blayzia .character-greeting {
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Speech Bubble Styles for Character Names */
.character-name.speech-bubble {
    position: relative !important;
    border-radius: 25px 25px 25px 5px !important;
    padding: 0.75rem 1.5rem !important;
    margin: 0.5rem auto 1.5rem auto !important;
    max-width: 80% !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    border: 2px solid #333 !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    color: #333 !important;
    text-shadow: none !important;
    letter-spacing: 0.05rem !important;
    text-transform: uppercase !important;
}

.character-name.speech-bubble::after {
    content: "" !important;
    position: absolute !important;
    bottom: -15px !important;
    left: 25px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 15px solid transparent !important;
    border-right: 15px solid transparent !important;
    border-top: 15px solid rgba(255, 255, 255, 0.9) !important;
    z-index: 1 !important;
}

.character-name.speech-bubble::before {
    content: "" !important;
    position: absolute !important;
    bottom: -17px !important;
    left: 24px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 16px solid transparent !important;
    border-right: 16px solid transparent !important;
    border-top: 16px solid #333 !important;
    z-index: 0 !important;
}

/* Character-specific speech bubble colors */
.character-blayzo .character-name.speech-bubble {
    background: rgba(34, 211, 238, 0.9) !important;
    border-color: #22d3ee !important;
    color: #0f172a !important;
}

.character-blayzo .character-name.speech-bubble::after {
    border-top-color: rgba(34, 211, 238, 0.9) !important;
}

.character-blayzo .character-name.speech-bubble::before {
    border-top-color: #22d3ee !important;
}

.character-blayzica .character-name.speech-bubble {
    background: rgba(255, 0, 0, 0.9) !important;
    border-color: #ff0000 !important;
    color: #ffffff !important;
}

.character-blayzica .character-name.speech-bubble::after {
    border-top-color: rgba(255, 0, 0, 0.9) !important;
}

.character-blayzica .character-name.speech-bubble::before {
    border-top-color: #ff0000 !important;
}

.character-crimson .character-name.speech-bubble {
    background: rgba(255, 69, 0, 0.9) !important;
    border-color: #ff4500 !important;
    color: #ffffff !important;
}

.character-crimson .character-name.speech-bubble::after {
    border-top-color: rgba(255, 69, 0, 0.9) !important;
}

.character-crimson .character-name.speech-bubble::before {
    border-top-color: #ff4500 !important;
}

.character-violet .character-name.speech-bubble {
    background: rgba(139, 92, 246, 0.9) !important;
    border-color: #8b5cf6 !important;
    color: #ffffff !important;
}

.character-violet .character-name.speech-bubble::after {
    border-top-color: rgba(139, 92, 246, 0.9) !important;
}

.character-violet .character-name.speech-bubble::before {
    border-top-color: #8b5cf6 !important;
}

.character-blayzion .character-name.speech-bubble {
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b) !important;
    border-color: #ff006e !important;
    color: #ffffff !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.character-blayzion .character-name.speech-bubble::after {
    border-top-color: #ff006e !important;
}

.character-blayzion .character-name.speech-bubble::before {
    border-top-color: #ff006e !important;
}

.character-blayzia .character-name.speech-bubble {
    background: linear-gradient(45deg, #ff006e, #8338ec, #3a86ff, #06ffa5, #ffbe0b) !important;
    border-color: #ff006e !important;
    color: #ffffff !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.character-blayzia .character-name.speech-bubble::after {
    border-top-color: #ff006e !important;
}

.character-blayzia .character-name.speech-bubble::before {
    border-top-color: #ff006e !important;
}

/* Fix content overflow and spacing within character cards */
.character-card {
    overflow: visible !important;
    position: relative !important;
    padding-bottom: 1rem !important;
}

.character-card > div:last-child {
    flex-grow: 0 !important;
    display: block !important;
    padding: 0.5rem !important;
    margin: 0 auto !important;
    position: relative !important;
    top: 0 !important;
    width: 95% !important;
    margin-bottom: 1rem !important;
}

/* Force greeting styling with maximum specificity */
html body div.character-card div.character-greeting,
.character-card .character-greeting,
div.character-greeting {
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    margin-top: -0.5rem !important;
    margin-bottom: 1rem !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    padding: 0.5rem 1rem !important;
    width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Remove the CSS rules that were hiding duplicates since we're fixing the HTML directly */

.character-description {
    font-size: 0.9rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
}

/* ===============================
   GOLD TIER THEME SYSTEM
   =============================== */

/* Gold Theme Selector Styles */
.gold-theme-btn {
    background: linear-gradient(135deg, #ffd700, #ffb347) !important;
    color: #000 !important;
    font-weight: bold !important;
    border: 2px solid #ffd700 !important;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3) !important;
}

.gold-theme-btn:hover {
    background: linear-gradient(135deg, #ffb347, #ffd700) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4) !important;
}

.gold-themes .theme-option {
    width: 120px !important;
    height: 80px !important;
    border-radius: 15px !important;
    position: relative !important;
    cursor: pointer !important;
    border: 3px solid transparent !important;
    transition: all 0.3s ease !important;
}

.gold-themes .theme-option:hover {
    transform: scale(1.05) !important;
    border-color: #ffd700 !important;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4) !important;
}

.gold-themes .theme-option.selected {
    border-color: #ffd700 !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6) !important;
}

/* Royal Purple Theme */
.theme-royal {
    --primary-color: #4b0082 !important;
    --secondary-color: #8b00ff !important;
    --accent-color: #9932cc !important;
    --background-gradient: linear-gradient(135deg, #1a0033, #2d1b69) !important;
}

.theme-royal .gold-tier {
    background: var(--background-gradient) !important;
}

.theme-royal .action-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    border-color: var(--accent-color) !important;
}

/* Emerald Green Theme */
.theme-emerald {
    --primary-color: #50c878 !important;
    --secondary-color: #228b22 !important;
    --accent-color: #32cd32 !important;
    --background-gradient: linear-gradient(135deg, #0d2818, #1a5a3e) !important;
}

.theme-emerald .gold-tier {
    background: var(--background-gradient) !important;
}

.theme-emerald .action-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    border-color: var(--accent-color) !important;
}

/* Sapphire Blue Theme */
.theme-sapphire {
    --primary-color: #0f52ba !important;
    --secondary-color: #4169e1 !important;
    --accent-color: #1e90ff !important;
    --background-gradient: linear-gradient(135deg, #0a1a33, #1a3a6b) !important;
}

.theme-sapphire .gold-tier {
    background: var(--background-gradient) !important;
}

.theme-sapphire .action-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    border-color: var(--accent-color) !important;
}

/* Ruby Red Theme */
.theme-ruby {
    --primary-color: #e0115f !important;
    --secondary-color: #dc143c !important;
    --accent-color: #ff1493 !important;
    --background-gradient: linear-gradient(135deg, #330a1a, #6b1a3a) !important;
}

.theme-ruby .gold-tier {
    background: var(--background-gradient) !important;
}

.theme-ruby .action-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    border-color: var(--accent-color) !important;
}

/* Platinum Silver Theme */
.theme-platinum {
    --primary-color: #e5e4e2 !important;
    --secondary-color: #c0c0c0 !important;
    --accent-color: #d3d3d3 !important;
    --background-gradient: linear-gradient(135deg, #2a2a2a, #4a4a4a) !important;
}

.theme-platinum .gold-tier {
    background: var(--background-gradient) !important;
    color: #ffffff !important;
}

.theme-platinum .action-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    border-color: var(--accent-color) !important;
    color: #000000 !important;
}

/* Cosmic Aurora Theme */
.theme-cosmic {
    --primary-color: #483d8b !important;
    --secondary-color: #9932cc !important;
    --accent-color: #ff1493 !important;
    --background-gradient: linear-gradient(135deg, #0a0a0a, #1a1a2e, #16213e) !important;
}

.theme-cosmic .gold-tier {
    background: var(--background-gradient) !important;
}

.theme-cosmic .action-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color), var(--accent-color)) !important;
    border-color: var(--accent-color) !important;
}

/* Sunset Glow Theme */
.theme-sunset {
    --primary-color: #ff4500 !important;
    --secondary-color: #ff8c00 !important;
    --accent-color: #ffd700 !important;
    --background-gradient: linear-gradient(135deg, #1a0f00, #3d2200, #5a3300) !important;
}

.theme-sunset .gold-tier {
    background: var(--background-gradient) !important;
}

.theme-sunset .action-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    border-color: var(--accent-color) !important;
}

/* Deep Ocean Theme */
.theme-ocean {
    --primary-color: #008b8b !important;
    --secondary-color: #20b2aa !important;
    --accent-color: #40e0d0 !important;
    --background-gradient: linear-gradient(135deg, #001a1a, #003333, #004d4d) !important;
}

.theme-ocean .gold-tier {
    background: var(--background-gradient) !important;
}

.theme-ocean .action-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    border-color: var(--accent-color) !important;
}

/* Mystic Forest Theme */
.theme-forest {
    --primary-color: #228b22 !important;
    --secondary-color: #32cd32 !important;
    --accent-color: #90ee90 !important;
    --background-gradient: linear-gradient(135deg, #0a1a0a, #1a3a1a, #2d5a2d) !important;
}

.theme-forest .gold-tier {
    background: var(--background-gradient) !important;
}

.theme-forest .action-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    border-color: var(--accent-color) !important;
}

/* Universal theme button styling for all Gold themes */
.gold-tier .action-btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3) !important;
}

.gold-tier .unlimited-badge {
    background: linear-gradient(135deg, #ffd700, #ffb347) !important;
    color: #000 !important;
    font-weight: bold !important;
}

/* ===============================
   SILVER TIER THEME SYSTEM  
   =============================== */

/* Silver Theme Selector Styles */
.theme-selector-btn {
    background: linear-gradient(135deg, #c0c0c0, #a9a9a9) !important;
    color: #000 !important;
    font-weight: bold !important;
    border: 2px solid #c0c0c0 !important;
    border-radius: 10px !important;
    padding: 10px 15px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(192, 192, 192, 0.3) !important;
}

.theme-selector-btn:hover {
    background: linear-gradient(135deg, #a9a9a9, #c0c0c0) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(192, 192, 192, 0.4) !important;
}

.theme-selector-panel {
    background: rgba(0, 0, 0, 0.95) !important;
    border: 2px solid #c0c0c0 !important;
    border-radius: 15px !important;
    padding: 20px !important;
    position: absolute !important;
    top: 50px !important;
    left: 0 !important;
    z-index: 1000 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
    min-width: 400px !important;
}

.theme-selector-panel h4 {
    color: #ffffff !important;
    text-align: center !important;
    margin-bottom: 15px !important;
}

.theme-options {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
    justify-items: center !important;
}

.theme-option {
    width: 100px !important;
    height: 70px !important;
    border-radius: 12px !important;
    position: relative !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.theme-option:hover {
    transform: scale(1.05) !important;
    border-color: #c0c0c0 !important;
    box-shadow: 0 5px 15px rgba(192, 192, 192, 0.3) !important;
}

.theme-option.selected {
    border-color: #c0c0c0 !important;
    box-shadow: 0 0 15px rgba(192, 192, 192, 0.6) !important;
}

.theme-option span {
    background: rgba(0, 0, 0, 0.8) !important;
    color: #ffffff !important;
    font-size: 0.7rem !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    text-align: center !important;
    width: 90% !important;
    margin-bottom: 5px !important;
}

/* Silver Theme Implementations (limited selection) */

/* Default Silver Theme */
.silver-tier {
    --primary-color: #00ffff !important;
    --secondary-color: #0099cc !important;
    --accent-color: #66ccff !important;
}

/* Purple Silver Theme */
.theme-purple .silver-tier {
    background: linear-gradient(135deg, #1a0033, #2d1b69) !important;
}

.theme-purple .action-btn {
    background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
    border-color: #8b5cf6 !important;
}

/* Green Silver Theme */
.theme-green .silver-tier {
    background: linear-gradient(135deg, #0d2818, #1a5a3e) !important;
}

.theme-green .action-btn {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border-color: #32cd32 !important;
}

/* Orange Silver Theme */
.theme-orange .silver-tier {
    background: linear-gradient(135deg, #1a0f00, #3d2200) !important;
}

.theme-orange .action-btn {
    background: linear-gradient(135deg, #f97316, #ea580c) !important;
    border-color: #ff8c00 !important;
}

/* Pink Silver Theme */
.theme-pink .silver-tier {
    background: linear-gradient(135deg, #330a1a, #6b1a3a) !important;
}

.theme-pink .action-btn {
    background: linear-gradient(135deg, #ec4899, #db2777) !important;
    border-color: #ff1493 !important;
}

/* Blue Silver Theme */
.theme-blue .silver-tier {
    background: linear-gradient(135deg, #0a1a33, #1a3a6b) !important;
}

.theme-blue .action-btn {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    border-color: #1e90ff !important;
}

/* Universal Silver tier enhancements */
.silver-tier .action-btn:hover {
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow: 0 6px 20px rgba(192, 192, 192, 0.2) !important;
}

/* ===============================
   NETFLIX-STYLE THEME CUSTOMIZATION MODAL
   =============================== */

/* Netflix-Style Backdrop */
.theme-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.theme-modal-backdrop.show {
    opacity: 1 !important;
}

.enhanced-theme-panel {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 680px !important;
    max-width: 95vw !important;
    max-height: 85vh !important;
    background: linear-gradient(145deg, rgba(8, 8, 15, 0.98), rgba(12, 12, 20, 0.98)) !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
    border-radius: 24px !important;
    box-shadow: 
        0 30px 100px rgba(0, 255, 255, 0.3),
        0 15px 50px rgba(0, 0, 0, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    z-index: 10000 !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    overflow: hidden !important;
    animation: themeSlideIn 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}

/* Glowing border effect */
.enhanced-theme-panel::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    padding: 2px !important;
    background: linear-gradient(135deg, #00ffff, #00a8ff, #0078ff, #00ffff) !important;
    border-radius: 24px !important;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    mask-composite: xor !important;
    -webkit-mask-composite: xor !important;
    animation: borderGlow 3s ease-in-out infinite alternate !important;
}

@keyframes borderGlow {
    0% { background: linear-gradient(135deg, #00ffff, #00a8ff, #0078ff, #00ffff); }
    100% { background: linear-gradient(135deg, #00a8ff, #0078ff, #00ffff, #00a8ff); }
}

@keyframes themeSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.theme-panel-header {
    position: relative !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 30px 35px 25px !important;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.12), rgba(0, 200, 255, 0.08)) !important;
    border-bottom: 1px solid rgba(0, 255, 255, 0.2) !important;
    backdrop-filter: blur(8px) !important;
    overflow: hidden !important;
}

.theme-panel-header::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent) !important;
    animation: headerShimmer 4s ease-in-out infinite !important;
}

@keyframes headerShimmer {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}

.theme-panel-header h3 {
    margin: 0 !important;
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    background: linear-gradient(135deg, #ffffff, #00ffff, #ffffff) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: titleGradient 3s ease-in-out infinite alternate !important;
    position: relative !important;
    z-index: 1 !important;
}

@keyframes titleGradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.theme-close-btn {
    background: rgba(255, 75, 75, 0.8) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 1.2rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.theme-close-btn:hover {
    background: #ff4757 !important;
    transform: rotate(90deg) !important;
}

.theme-section {
    position: relative !important;
    margin: 20px 25px !important;
    padding: 25px !important;
    background: linear-gradient(145deg, rgba(15, 15, 25, 0.8), rgba(20, 20, 35, 0.6)) !important;
    border: 1px solid rgba(0, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    overflow: hidden !important;
}

.theme-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, #00ffff, transparent) !important;
    opacity: 0.6 !important;
}

.theme-section:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(145deg, rgba(20, 20, 30, 0.9), rgba(25, 25, 40, 0.8)) !important;
    border-color: rgba(0, 255, 255, 0.3) !important;
    box-shadow: 0 8px 32px rgba(0, 255, 255, 0.15) !important;
}

.theme-section:last-child {
    margin-bottom: 25px !important;
}

.theme-section:last-child {
    border-bottom: none !important;
}

.section-header {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 25px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid rgba(0, 255, 255, 0.2) !important;
    position: relative !important;
}

.section-header::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 60px !important;
    height: 2px !important;
    background: linear-gradient(90deg, #00ffff, #00a8ff) !important;
    animation: dividerGlow 2s ease-in-out infinite alternate !important;
}

@keyframes dividerGlow {
    0% { width: 60px; box-shadow: 0 0 5px rgba(0, 255, 255, 0.5); }
    100% { width: 80px; box-shadow: 0 0 10px rgba(0, 255, 255, 0.8); }
}

.section-header i {
    font-size: 1.4rem !important;
    background: linear-gradient(135deg, #00ffff, #00a8ff, #0078ff) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.5)) !important;
    animation: iconPulse 2.5s ease-in-out infinite !important;
}

@keyframes iconPulse {
    0%, 100% { 
        transform: scale(1);
        filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.5));
    }
    50% { 
        transform: scale(1.1);
        filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.8));
    }
}

.section-header h4 {
    margin: 0 !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    background: linear-gradient(135deg, #ffffff 0%, #00ffff 50%, #ffffff 100%) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: textShine 3s ease-in-out infinite !important;
}

@keyframes textShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
}

.color-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
    gap: 20px !important;
    margin: 10px 0 !important;
    padding: 20px !important;
    background: linear-gradient(135deg, rgba(5, 15, 25, 0.4), rgba(10, 20, 35, 0.3)) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 255, 255, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    position: relative !important;
    overflow: hidden !important;
}

.color-grid::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.05), transparent) !important;
    animation: gridShimmer 6s ease-in-out infinite !important;
}

@keyframes gridShimmer {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}

.color-option {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 18px 12px !important;
    background: linear-gradient(145deg, rgba(20, 25, 35, 0.8), rgba(15, 20, 30, 0.9)) !important;
    border: 2px solid rgba(0, 255, 255, 0.25) !important;
    border-radius: 18px !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    position: relative !important;
    overflow: hidden !important;
    backdrop-filter: blur(6px) !important;
}

.color-option::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 18px !important;
    padding: 2px !important;
    background: conic-gradient(from 0deg, #00ffff, #00a8ff, #0078ff, #00ffff) !important;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    mask-composite: xor !important;
    -webkit-mask-composite: xor !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
}

.color-option:hover::before {
    opacity: 0.6 !important;
    animation: borderRotate 2s linear infinite !important;
}

@keyframes borderRotate {
    0% { background: conic-gradient(from 0deg, #00ffff, #00a8ff, #0078ff, #00ffff); }
    100% { background: conic-gradient(from 360deg, #00ffff, #00a8ff, #0078ff, #00ffff); }
}

.color-option:hover {
    transform: translateY(-5px) scale(1.08) !important;
    background: linear-gradient(145deg, rgba(25, 30, 40, 0.9), rgba(20, 25, 35, 0.95)) !important;
    box-shadow: 
        0 15px 40px rgba(0, 255, 255, 0.25),
        0 5px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(0, 255, 255, 0.5) !important;
}

.color-option.selected {
    transform: scale(1.12) !important;
    background: linear-gradient(145deg, rgba(0, 255, 255, 0.15), rgba(0, 200, 255, 0.1)) !important;
    border-color: #00ffff !important;
    box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.6),
        0 0 15px rgba(0, 255, 255, 0.4),
        inset 0 0 20px rgba(0, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.color-option.selected::before {
    opacity: 0.8 !important;
    animation: borderRotate 1.5s linear infinite !important;
}

.color-option.selected::after {
    content: '✓' !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 20px !important;
    height: 20px !important;
    background: #00ffff !important;
    color: #000 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: bold !important;
    animation: checkmarkPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

@keyframes checkmarkPop {
    0% { transform: scale(0) rotate(-180deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.color-preview {
    width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    border: 3px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 
        inset 0 2px 8px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(0, 255, 255, 0.2) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.color-preview::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%) !important;
    transform: rotate(45deg) !important;
    transition: transform 0.6s ease !important;
}

.color-option:hover .color-preview::after {
    transform: rotate(45deg) translateX(100%) !important;
}

.color-option:hover .color-preview {
    border-color: rgba(0, 255, 255, 0.6) !important;
    box-shadow: 
        inset 0 2px 8px rgba(0, 0, 0, 0.3),
        0 6px 16px rgba(0, 0, 0, 0.3),
        0 0 0 2px rgba(0, 255, 255, 0.4) !important;
}

.color-option span {
    color: #ffffff !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
    text-transform: capitalize !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 2 !important;
}

.color-option:hover span {
    color: #00ffff !important;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5) !important;
    transform: translateY(-1px) !important;
}

.color-option.selected span {
    color: #00ffff !important;
    font-weight: 700 !important;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.7) !important;
}

.preset-buttons {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 18px !important;
    margin-top: 15px !important;
}

.preset-btn {
    position: relative !important;
    background: linear-gradient(135deg, rgba(15, 25, 35, 0.9), rgba(20, 30, 45, 0.8)) !important;
    color: #ffffff !important;
    border: 2px solid rgba(0, 255, 255, 0.3) !important;
    border-radius: 16px !important;
    padding: 16px 24px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    overflow: hidden !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 
        0 4px 15px rgba(0, 255, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.preset-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(0, 200, 255, 0.05)) !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
}

.preset-btn::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%) !important;
    transform: rotate(45deg) translateX(-100%) !important;
    transition: transform 0.6s ease !important;
}

.preset-btn:hover::before {
    opacity: 1 !important;
}

.preset-btn:hover::after {
    transform: rotate(45deg) translateX(100%) !important;
}

.preset-btn:hover {
    transform: translateY(-4px) scale(1.03) !important;
    background: linear-gradient(135deg, rgba(20, 30, 45, 0.95), rgba(25, 35, 50, 0.9)) !important;
    border-color: rgba(0, 255, 255, 0.6) !important;
    color: #00ffff !important;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5) !important;
    box-shadow: 
        0 8px 30px rgba(0, 255, 255, 0.3),
        0 4px 15px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.preset-btn:active {
    transform: translateY(-1px) scale(1.01) !important;
    box-shadow: 
        0 4px 15px rgba(0, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.preset-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 3px 10px rgba(0, 255, 255, 0.3) !important;
}

/* Gold tier specific styling */
.enhanced-theme-panel.gold-tier {
    border-color: #ffd700 !important;
    box-shadow: 0 20px 60px rgba(255, 215, 0, 0.3) !important;
}

.gold-tier .theme-panel-header {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05)) !important;
}

.gold-tier .theme-panel-header h3,
.gold-tier .section-header i {
    color: #ffd700 !important;
}

.gold-tier .color-option:hover,
.gold-tier .color-option.selected {
    border-color: #ffd700 !important;
    background: rgba(255, 215, 0, 0.1) !important;
}

.gold-tier .preset-btn {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.9), rgba(255, 179, 71, 0.9)) !important;
    border-color: rgba(255, 215, 0, 0.4) !important;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.gold-tier .preset-btn:hover {
    background: linear-gradient(135deg, rgba(255, 179, 71, 0.95), rgba(255, 215, 0, 0.95)) !important;
    border-color: rgba(255, 215, 0, 0.7) !important;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    color: #000000 !important;
    text-shadow: 0 1px 3px rgba(255, 215, 0, 0.3) !important;
}

/* ===============================
   ENHANCED SCROLLBAR STYLING
   =============================== */

.enhanced-theme-panel::-webkit-scrollbar {
    width: 10px !important;
}

.enhanced-theme-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 5px !important;
}

.enhanced-theme-panel::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00ffff, #00a8ff) !important;
    border-radius: 5px !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.enhanced-theme-panel::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #00a8ff, #0078ff) !important;
    box-shadow: 
        0 0 8px rgba(0, 255, 255, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}