/* General Styles */
:root {
    /* Base Colors (Semper - Default) */
    --color-primary: #6a1b9a; /* Purple */
    --color-secondary: #9c27b0; /* Lighter Purple/Magenta */
    --color-accent: #ff4081; /* Pink/Red Accent */
    --color-text: #333;
    --color-text-light: #fff;
    --color-background-main: #f5f7fa; /* Light Gradient Start */
    --color-background-end: #c3cfe2; /* Light Gradient End */
    --color-card-bg: #ffffff;
    --color-card-shadow: rgba(0, 0, 0, 0.1);
    --color-input-bg: #f9f9f9;
    --color-input-border: #ddd;
    --color-warning-bg: rgba(255, 152, 0, 0.1);
    --color-warning-border: #ff9800;

    /* Power Bar Gradient */
    --color-bar-start: #8e24aa;
    --color-bar-end: #ff4081;
    
    /* Tier Colors - Semper */
    --tier-ultraomni: linear-gradient(60deg, #9c00ff, #ff00d4, #ff0055, #ff7700);
    --tier-atmos: linear-gradient(15deg, #9c00ff, #ff00d4, #ff0055, #ff7700);
    --tier-omniversal: linear-gradient(45deg, #9c00ff, #ff00d4, #ff0055, #ff7700);
    --tier-multiversal: #9c00ff;
    --tier-universal: #5000ca;
    --tier-solar: #ff7700;
    --tier-planetary: #00aaff;
    --tier-nation: #2185cc;
    --tier-city: #4caf50;
    --tier-street: #9e9e9e;
    --tier-mundane: #9e9e9e;
    
    /* New Tiers */
    --tier-galactic: #ff00ff; /* Bright Magenta */
    --tier-gasgiant: #8d6e63; /* Brownish gas giant tone */
    --tier-blackhole: #000000; /* Black */
    --tier-neutronic: #e0ffff; /* White-cyan neutron star tone */
    --tier-highmultiverse: linear-gradient(135deg, #00ffff, #ff00ff);
    
    /* NEW Tiers */
    --tier-human: #bdbdbd; /* Light grey */
    --tier-forest: #388e3c; /* Forest green */
    --tier-mountain: #795548; /* Brown/Earth */
    --tier-validus: linear-gradient(100deg, #ff0077, #7a00ff, #00ffff); /* Extreme gradient */
}

/* Skin Definitions */

/* 2. Casual (blue style) */
.skin-casual {
    --color-primary: #1976d2; /* Deep Blue */
    --color-secondary: #42a5f5; /* Medium Blue */
    --color-accent: #00bcd4; /* Cyan Accent */
    --color-text: #212121;
    --color-background-main: #e3f2fd;
    --color-background-end: #bbdefb;
    --color-card-shadow: rgba(25, 118, 210, 0.2);
    --color-input-bg: #ffffff;
    --color-input-border: #bbdefb;
    --color-warning-border: #ffb300;
    --color-warning-bg: rgba(255, 179, 0, 0.1);
    
    --color-bar-start: #1976d2;
    --color-bar-end: #00bcd4;
    
    /* Casual Tier Colors (simpler gradients/flat) */
    --tier-ultraomni: linear-gradient(60deg, #304ffe, #18ffff);
    --tier-atmos: linear-gradient(15deg, #00e5ff, #00b8d4);
    --tier-omniversal: linear-gradient(45deg, #2979ff, #448aff);
    --tier-multiversal: #2979ff;
    --tier-universal: #1565c0;
    --tier-solar: #ff8f00;
    --tier-planetary: #00c853;
    --tier-nation: #64dd17;
    --tier-city: #ffab00;
    --tier-street: #757575;
    --tier-mundane: #9e9e9e;
    
    /* New Tiers - Casual */
    --tier-galactic: #00e5ff;
    --tier-highmultiverse: linear-gradient(135deg, #00b0ff, #00d4ff);
    
    /* NEW Tiers - Casual */
    --tier-human: #b3e5fc;
    --tier-forest: #2e7d32;
    --tier-mountain: #a1887f;
    --tier-validus: linear-gradient(100deg, #ff79c6, #9c27b0, #00ffff);
}

/* 3. Multiverse (space) */
.skin-multiverse {
    --color-primary: #00cba0; /* Teal */
    --color-secondary: #ff7e5f; /* Coral/Orange */
    --color-accent: #e91e63; /* Deep Pink */
    --color-text: #e0e0e0;
    --color-text-light: #212121;
    --color-background-main: #1a1a2e; /* Dark Space */
    --color-background-end: #0f0f1c;
    --color-card-bg: #2c3855; /* Dark blue-grey card */
    --color-card-shadow: rgba(0, 0, 0, 0.5);
    --color-input-bg: #1f273b;
    --color-input-border: #4a546d;
    --color-warning-border: #ffcc00;
    --color-warning-bg: rgba(255, 204, 0, 0.2);

    --color-bar-start: #00cba0;
    --color-bar-end: #e91e63;

    /* Text areas and inputs must have light text */
    & textarea, & input[type="text"] { color: var(--color-text); border-color: var(--color-input-border); background: var(--color-input-bg); }
    & h1 { background: linear-gradient(to right, var(--color-primary), var(--color-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
    & button { color: var(--color-text-light); } /* Override default button color */
    & .alignment-badge, & .category-stat { background: var(--color-input-bg); color: var(--color-text); border-left-color: var(--color-primary); }
    & .category-description { color: #aaa; }
    & .comparison-fight-btn, & .matchup-fight-btn { color: var(--color-text-light); }
    & .power-bar-container { background-color: #444; }


    /* Tier Colors - Multiverse (cosmic) */
    --tier-ultraomni: linear-gradient(60deg, #f06292, #ab47bc, #4a148c);
    --tier-atmos: linear-gradient(15deg, #81c784, #4db6ac);
    --tier-omniversal: linear-gradient(45deg, #26c6da, #00acc1);
    --tier-multiversal: #00acc1;
    --tier-universal: #ffb74d;
    --tier-solar: #ff7043;
    --tier-planetary: #8d6e63;
    --tier-nation: #90a4ae;
    --tier-city: #78909c;
    --tier-street: #546e7a;
    --tier-mundane: #455a64;
    
    /* New Tiers - Multiverse */
    --tier-galactic: #ff0099;
    --tier-highmultiverse: linear-gradient(135deg, #9c27b0, #e91e63);
    
    /* NEW Tiers - Multiverse */
    --tier-human: #607d8b;
    --tier-forest: #4caf50;
    --tier-mountain: #5d4037;
    --tier-validus: linear-gradient(100deg, #ff7e5f, #00cba0, #e91e63);
}

/* 4. Simple (more performance) */
.skin-simple {
    --color-primary: #000000; 
    --color-secondary: #555555;
    --color-accent: #222222;
    --color-text: #000000;
    --color-text-light: #ffffff;
    --color-background-main: #ffffff;
    --color-background-end: #f0f0f0;
    --color-card-bg: #ffffff;
    --color-card-shadow: rgba(0, 0, 0, 0.05);
    --color-input-bg: #ffffff;
    --color-input-border: #cccccc;
    --color-warning-border: #9e9e9e;
    --color-warning-bg: rgba(158, 158, 158, 0.1);
    
    --color-bar-start: #000000;
    --color-bar-end: #333333;

    /* Disable animation gradients */
    & h1 { background: none; color: var(--color-primary); }
    & .power-bar { background: linear-gradient(to right, var(--color-bar-start), var(--color-bar-end)); animation: none !important; }
    & button { background: var(--color-primary); color: var(--color-text-light); box-shadow: none !important; }
    & button:hover { transform: none; box-shadow: none; opacity: 0.8; }
    & .tier-badge, & .char-tier { animation: none !important; background: var(--color-primary) !important; color: var(--color-text-light); }
    & .alignment-badge, & .category-stat { background: var(--color-background-end); border-left-color: var(--color-primary); }
    & .category-value { background: none; color: var(--color-primary); }


    /* Simple Tier Colors (flat) */
    --tier-ultraomni: #000000;
    --tier-atmos: #111111;
    --tier-omniversal: #222222;
    --tier-multiversal: #333333;
    --tier-universal: #444444;
    --tier-solar: #666666;
    --tier-planetary: #777777;
    --tier-nation: #888888;
    --tier-city: #aaaaaa;
    --tier-street: #cccccc;
    --tier-mundane: #dddddd;
    
    /* New Tiers - Simple */
    --tier-galactic: #555555;
    --tier-highmultiverse: #222222;
    
    /* NEW Tiers - Simple */
    --tier-human: #bbbbbb;
    --tier-forest: #666666;
    --tier-mountain: #777777;
    --tier-validus: #111111;

    --color-bar-start: #000000;
    --color-bar-end: #333333;
}

/* 5. SCP (dark lab tone) */
.skin-scp {
    --color-primary: #b71c1c; /* Deep Red Alert */
    --color-secondary: #757575; /* Dark Grey/Metal */
    --color-accent: #ffb300; /* Amber Warning */
    --color-text: #e0e0e0;
    --color-text-light: #111;
    --color-background-main: #212121; /* Dark Background */
    --color-background-end: #000000;
    --color-card-bg: #303030; /* Dark Card */
    --color-card-shadow: rgba(0, 0, 0, 0.7);
    --color-input-bg: #424242;
    --color-input-border: #616161;
    --color-warning-border: var(--color-accent);
    --color-warning-bg: rgba(255, 179, 0, 0.1);
    
    --color-bar-start: #b71c1c;
    --color-bar-end: #ffb300;
    
    font-family: monospace, 'Courier New', Courier;

    & textarea, & input[type="text"] { color: var(--color-text); border-color: var(--color-input-border); background: var(--color-input-bg); }
    & h1 { background: linear-gradient(to right, var(--color-primary), var(--color-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
    & button { background: linear-gradient(to right, var(--color-secondary), var(--color-primary)); color: var(--color-text); }
    & button:hover { box-shadow: 0 5px 15px rgba(183, 28, 28, 0.3); }
    & .alignment-badge, & .category-stat { background: var(--color-input-bg); color: var(--color-text); border-left-color: var(--color-primary); }
    & .category-description { color: #aaa; }
    & .power-bar-container { background-color: #555; }
    & .comparison-fight-btn, & .matchup-fight-btn { color: var(--color-text); background: linear-gradient(to right, var(--color-accent), var(--color-primary)); }


    /* SCP Tier Colors (utility/hazard tones) */
    --tier-ultraomni: #b71c1c; 
    --tier-atmos: #d32f2f;
    --tier-omniversal: #ff5252;
    --tier-multiversal: #ffb300;
    --tier-universal: #ffd600;
    --tier-solar: #795548;
    --tier-planetary: #4db6ac;
    --tier-nation: #607d8b;
    --tier-city: #9e9e9e;
    --tier-street: #bdbdbd;
    --tier-mundane: #e0e0e0;
    
    /* New Tiers - SCP */
    --tier-galactic: #9c27b0;
    --tier-highmultiverse: linear-gradient(135deg, #ff5252, #d32f2f);
    
    /* NEW Tiers - SCP */
    --tier-human: #9e9e9e;
    --tier-forest: #4db6ac;
    --tier-mountain: #795548;
    --tier-validus: #b71c1c;

    --color-bar-start: #b71c1c;
    --color-bar-end: #ffb300;
}

/* 6. Dark (default, but dark mode) */
.skin-dark {
    --color-primary: #d500f9; /* Bright Purple */
    --color-secondary: #ff4081; /* Pink Accent */
    --color-accent: #00e5ff; /* Cyan Accent */
    --color-text: #eeeeee;
    --color-text-light: #212121;
    --color-background-main: #121212; /* Very Dark */
    --color-background-end: #202020;
    --color-card-bg: #1e1e1e; /* Dark Card */
    --color-card-shadow: rgba(213, 0, 249, 0.2);
    --color-input-bg: #2c2c2c;
    --color-input-border: #555555;
    --color-warning-border: #ffcc00;
    --color-warning-bg: rgba(255, 204, 0, 0.1);

    --color-bar-start: #d500f9;
    --color-bar-end: #ff4081;
    
    /* Input adjustments */
    & textarea, & input[type="text"] { color: var(--color-text); border-color: var(--color-input-border); background: var(--color-input-bg); }
    & .power-bar-container { background-color: #444; }
    & .alignment-badge, & .category-stat { background: var(--color-input-bg); color: var(--color-text); border-left-color: var(--color-primary); }
    & .category-description { color: #aaa; }
    & .comparison-fight-btn, & .matchup-fight-btn { color: var(--color-text-light); }
    
    /* Tier Colors - Dark (use original gradients but on dark BG) */
    --tier-ultraomni: linear-gradient(60deg, #d500f9, #ff00d4, #ff0055, #ff7700);
    --tier-atmos: linear-gradient(15deg, #d500f9, #ff00d4, #ff0055, #ff7700);
    --tier-omniversal: linear-gradient(45deg, #d500f9, #ff00d4, #ff0055, #ff7700);
    --tier-multiversal: #d500f9;
    --tier-universal: #9e00ff;
    --tier-solar: #ff8f00;
    --tier-planetary: #00b0ff;
    --tier-nation: #40c4ff;
    --tier-city: #69f0ae;
    --tier-street: #9e9e9e;
    --tier-mundane: #757575;
    
    /* New Tiers - Dark */
    --tier-galactic: #3949ab;
    --tier-highmultiverse: linear-gradient(135deg, #00ffff, #3949ab);
    
    /* NEW Tiers - Dark */
    --tier-human: #9e9e9e;
    --tier-forest: #388e3c;
    --tier-mountain: #6d4c41;
    --tier-validus: linear-gradient(100deg, #ff00f7, #651fff, #00bcd4);

    --color-bar-start: #d500f9;
    --color-bar-end: #ff4081;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--color-text);
    background: linear-gradient(135deg, var(--color-background-main) 0%, var(--color-background-end) 100%);
    min-height: 100vh;
    transition: background-color 0.5s, color 0.5s; /* Smooth skin transitions */
}

/* 7. Evaluation (CRT Blue) */
.skin-evaluation {
    --color-primary: #00bcd4; /* Cyan/Blue */
    --color-secondary: #03a9f4; /* Sky Blue */
    --color-accent: #ffeb3b; /* Yellow/Amber contrast */
    --color-text: #00ff00; /* Bright green text for CRT feel */
    --color-text-light: #111;
    --color-background-main: #011627; /* Deep dark blue */
    --color-background-end: #040f1a;
    --color-card-bg: #001f33; /* Dark panel background */
    --color-card-shadow: rgba(0, 188, 212, 0.3);
    --color-input-bg: #00121f;
    --color-input-border: #03a9f4;
    --color-warning-border: #ffeb3b;
    --color-warning-bg: rgba(255, 235, 59, 0.1);

    --color-bar-start: #00bcd4;
    --color-bar-end: #00ff00;

    font-family: monospace, 'Courier New', Courier;
    
    /* Override defaults for dark/CRT styling */
    & body {
        background: linear-gradient(135deg, var(--color-background-main) 0%, var(--color-background-end) 100%) !important;
    }
    & h1 { 
        background: linear-gradient(to right, var(--color-primary), var(--color-accent)); 
        -webkit-background-clip: text; 
        background-clip: text; 
        color: transparent; 
        text-shadow: 0 0 5px var(--color-text); /* CRT Glow */
    }
    & textarea, & input[type="text"], & select { 
        color: var(--color-text); 
        border-color: var(--color-input-border); 
        background: var(--color-input-bg); 
        box-shadow: inset 0 0 5px var(--color-input-border);
    }
    & button { 
        background: linear-gradient(to right, var(--color-secondary), var(--color-primary)); 
        color: var(--color-text); /* Use bright green for button text */
        border: 1px solid var(--color-primary);
    }
    & button:hover {
        box-shadow: 0 0 10px rgba(0, 188, 212, 0.5);
    }
    & .alignment-badge, & .category-stat, & .power-archive, & .composite-simulator, & .results-section, & .input-section { 
        background-color: var(--color-card-bg); 
        color: var(--color-text); 
        border: 1px solid var(--color-input-border);
        box-shadow: 0 0 5px var(--color-primary);
    }
    & .power-bar-container { background-color: #000; border: 1px solid var(--color-input-border); }
    & .power-value { color: var(--color-text); text-shadow: none; }
    & .category-description { color: #aaa; }
    & .stat-name { color: var(--color-accent); }
    & .power-categories h3 { border-bottom-color: var(--color-input-border); }
    & .analysis-section h3 { border-bottom-color: var(--color-input-border); }
    & .tier-badge { animation: none !important; }

    /* Tier Colors - Evaluation (use sharp tones) */
    --tier-ultraomni: #ffeb3b;
    --tier-atmos: #ffc107;
    --tier-omniversal: #ffa000;
    --tier-multiversal: #00bcd4;
    --tier-universal: #03a9f4;
    --tier-solar: #4dd0e1;
    --tier-planetary: #80deea;
    --tier-nation: #b2ebf2;
    --tier-city: #e0f7fa;
    --tier-street: #9e9e9e;
    --tier-mundane: #757575;
    --tier-terrible: #424242;
    
    /* New Tiers - Evaluation */
    --tier-galactic: #ffc107;
    --tier-highmultiverse: linear-gradient(135deg, #ffeb3b, #ffc107);
    
    /* NEW Tiers - Evaluation */
    --tier-human: #00bcd4;
    --tier-forest: #03a9f4;
    --tier-mountain: #ffeb3b;
    --tier-validus: #ff4081; /* Use a red/pink for contrast */
}

/* 8. Microsoft (WinUI Clean) */
.skin-microsoft {
    --color-primary: #0078d4; /* Microsoft Blue */
    --color-secondary: #005a9e; /* Darker Blue */
    --color-accent: #ffb900; /* Yellow/Gold Accent */
    --color-text: #201f1e;
    --color-text-light: #ffffff;
    --color-background-main: #f3f2f1; /* Light Grey/White */
    --color-background-end: #ffffff;
    --color-card-bg: #ffffff;
    --color-card-shadow: rgba(0, 0, 0, 0.08);
    --color-input-bg: #ffffff;
    --color-input-border: #c8c6c4;
    --color-warning-border: #ffb900;
    --color-warning-bg: rgba(255, 185, 0, 0.1);

    --color-bar-start: #0078d4;
    --color-bar-end: #005a9e;

    font-family: 'Segoe UI', sans-serif;
    
    /* Override defaults for clean, flat styling */
    & h1 { 
        background: none; 
        color: var(--color-primary); 
        font-weight: 300; 
        letter-spacing: normal; 
    }
    & button {
        background: var(--color-primary);
        color: white;
        border: 1px solid var(--color-secondary);
        box-shadow: none;
        font-weight: 600;
    }
    & button:hover {
        background: var(--color-secondary);
        transform: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    & .tier-badge {
        font-weight: normal;
        border: 1px solid var(--color-input-border);
        box-shadow: 0 1px 3px var(--color-card-shadow);
        animation: none !important;
    }
    & .power-bar {
        border-radius: 0;
    }
    & .power-bar-container {
        background-color: #e1dfdd;
        border-radius: 0;
    }
    & .category-stat {
        border-left: 3px solid var(--color-primary);
        background: #fcfcfc;
    }
    & .category-name, & .stat-name {
        color: var(--color-secondary);
    }
    & .category-value {
        background: none;
        color: var(--color-primary);
        font-weight: 600;
    }

    /* Tier Colors - Microsoft (flat, clean colors) */
    --tier-ultraomni: #00188F; /* Darkest Blue */
    --tier-atmos: #0078D4;
    --tier-omniversal: #00B7C3;
    --tier-multiversal: #E3008C; /* Magenta */
    --tier-universal: #9B4F96; /* Purple */
    --tier-solar: #FFB900; /* Gold */
    --tier-planetary: #00CC6A; /* Green */
    --tier-nation: #7A7574; /* Grey */
    --tier-city: #C8C6C4;
    --tier-street: #E1DFDD;
    --tier-mundane: #F3F2F1;
    --tier-terrible: #FFFFFF;
    
    /* New Tiers - Microsoft */
    --tier-galactic: #8A2DA0; /* Bright Purple */
    --tier-highmultiverse: linear-gradient(135deg, #D13438, #E3008C);
    
    /* NEW Tiers - Microsoft */
    --tier-human: #A8A8A8;
    --tier-forest: #0078d4; /* Reuse primary blue */
    --tier-mountain: #7A7574;
    --tier-validus: #E3008C; /* Magenta */
}

/* 9. Rose (Red Tone) */
.skin-rose {
    --color-primary: #9d253f; /* Deep Rose Red */
    --color-secondary: #e91e63; /* Pinkish Red */
    --color-accent: #ffc107; /* Gold Accent */
    --color-text: #2c2c2c;
    --color-text-light: #fff;
    --color-background-main: #fff0f5; /* Light Pink/Rose */
    --color-background-end: #fbeff3;
    --color-card-bg: #ffffff;
    --color-card-shadow: rgba(157, 37, 63, 0.15);
    --color-input-bg: #ffffff;
    --color-input-border: #f0c9d3;
    --color-warning-border: #ff9800;
    --color-warning-bg: rgba(255, 152, 0, 0.1);

    --color-bar-start: #e91e63;
    --color-bar-end: #9d253f;
    
    /* Override button focus for softer look */
    & button:hover {
        box-shadow: 0 5px 15px rgba(233, 30, 99, 0.3);
    }
    & .tier-badge {
        animation: none;
        background-color: var(--color-primary);
    }
    
    /* Tier Colors - Rose (Deep reds/pinks) */
    --tier-ultraomni: linear-gradient(60deg, #d32f2f, #ffc107);
    --tier-atmos: linear-gradient(15deg, #e53935, #ff8a80);
    --tier-omniversal: linear-gradient(45deg, #f44336, #ffcdd2);
    --tier-multiversal: #e57373;
    --tier-universal: #ef9a9a;
    --tier-solar: #ffb74d;
    --tier-planetary: #ffccbc;
    --tier-nation: #9e9e9e;
    --tier-city: #bdbdbd;
    --tier-street: #e0e0e0;
    --tier-mundane: #f5f5f5;
    --tier-terrible: #eeeeee;
    
    /* New Tiers - Rose */
    --tier-galactic: #e57373;
    --tier-highmultiverse: linear-gradient(135deg, #ff5252, #e91e63);
    
    /* NEW Tiers - Rose */
    --tier-human: #ffcdd2;
    --tier-forest: #ef9a9a;
    --tier-mountain: #e57373;
    --tier-validus: linear-gradient(100deg, #e91e63, #d32f2f, #ffc107);
}


/* 10. Paradise (Beach/Sky) */
.skin-paradise {
    --color-primary: #0077b6; /* Deep Ocean Blue */
    --color-secondary: #00b4d8; /* Sky Blue */
    --color-accent: #ffc300; /* Sunny Yellow/Gold */
    --color-text: #333333;
    --color-text-light: #ffffff;
    --color-background-main: #90e0ef; /* Light Cyan Sky */
    --color-background-end: #0077b6; /* Ocean Blue Horizon */
    --color-card-bg: #ffffff;
    --color-card-shadow: rgba(0, 119, 182, 0.15);
    --color-input-bg: #f8f8f8;
    --color-input-border: #bbdefb;
    --color-warning-border: #ffc300;
    --color-warning-bg: rgba(255, 195, 0, 0.1);

    --color-bar-start: #00b4d8;
    --color-bar-end: #0077b6;
    
    /* Apply background gradient to body */
    & body {
        background: linear-gradient(135deg, var(--color-background-main) 0%, var(--color-background-end) 100%) !important;
    }

    /* Tier Colors - Paradise */
    --tier-ultraomni: linear-gradient(60deg, #0077b6, #ffc300, #ff8a00);
    --tier-atmos: #00b4d8;
    --tier-omniversal: #48cae4;
    --tier-multiversal: #90e0ef;
    --tier-universal: #ffc300;
    --tier-solar: #ff8a00;
    --tier-planetary: #76c7c0;
    --tier-nation: #40916c;
    --tier-city: #c0d8d6;
    --tier-street: #e0f2f1;
    --tier-mundane: #f5f5f5;
    --tier-terrible: #eeeeee;
    
    --tier-galactic: #ff99c8;
    --tier-highmultiverse: linear-gradient(135deg, #00b4d8, #ffc300);
    
    --tier-human: #e0f2f1;
    --tier-forest: #40916c;
    --tier-mountain: #a37b4e;
    --tier-validus: linear-gradient(100deg, #0077b6, #ffc300, #ff0055);
}

/* 11. Metal (Arrogant/Relentless) */
.skin-metal {
    --color-primary: #a3a3a3; /* Silver/Steel */
    --color-secondary: #ff0000; /* Aggressive Red */
    --color-accent: #333333; /* Dark Charcoal */
    --color-text: #e0e0e0;
    --color-text-light: #000000;
    --color-background-main: #1f1f1f; /* Industrial Black */
    --color-background-end: #0a0a0a;
    --color-card-bg: #2e2e2e; /* Dark Card */
    --color-card-shadow: rgba(255, 0, 0, 0.4);
    --color-input-bg: #383838;
    --color-input-border: #555555;
    --color-warning-border: #ff0000;
    --color-warning-bg: rgba(255, 0, 0, 0.1);

    --color-bar-start: #ff0000;
    --color-bar-end: #a3a3a3;
    
    font-family: 'Arial Black', Gadget, sans-serif;
    
    & textarea, & input[type="text"] { color: var(--color-text); border-color: var(--color-input-border); background: var(--color-input-bg); }
    & h1 { 
        background: linear-gradient(to right, var(--color-primary), var(--color-secondary)); 
        -webkit-background-clip: text; 
        background-clip: text; 
        color: transparent; 
        text-shadow: 1px 1px 2px #ff0000; 
        font-weight: 900;
    }
    & button { 
        background: linear-gradient(to right, var(--color-secondary), var(--color-primary)); 
        color: var(--color-text-light); 
        border: 2px solid var(--color-secondary);
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
    }
    & button:hover {
        box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
    }
    & .alignment-badge, & .category-stat { 
        background: var(--color-input-bg); 
        color: var(--color-text); 
        border-left-color: var(--color-secondary); 
    }
    & .category-description { color: #888; }
    & .power-bar-container { background-color: #555; }
    & .power-value { text-shadow: 0 0 3px #000; }
    & .character-card { border: 1px solid var(--color-secondary); }
    & .comparison-fight-btn, & .matchup-fight-btn { background: var(--color-primary); color: var(--color-text-light); border: 2px solid var(--color-secondary); }


    /* Tier Colors - Metal (Industrial/Hazard) */
    --tier-ultraomni: linear-gradient(60deg, #ff0000, #a3a3a3, #4f4f4f);
    --tier-atmos: #ff0000;
    --tier-omniversal: #d32f2f;
    --tier-multiversal: #a3a3a3;
    --tier-universal: #757575;
    --tier-solar: #424242;
    --tier-planetary: #6d4c41;
    --tier-nation: #9e9e9e;
    --tier-city: #bdbdbd;
    --tier-street: #e0e0e0;
    --tier-mundane: #f5f5f5;
    --tier-terrible: #f5f5f5;
    
    --tier-galactic: #ff9800;
    --tier-highmultiverse: linear-gradient(135deg, #a3a3a3, #ff0000);
    
    --tier-human: #e0e0e0;
    --tier-forest: #666;
    --tier-mountain: #757575;
    --tier-validus: linear-gradient(100deg, #ff0000, #a3a3a3, #4f4f4f);
}

/* 12. Atmos (High Energy) */
.skin-atmos {
    --color-primary: #ff0055; /* Hot Pink */
    --color-secondary: #9c00ff; /* Electric Purple */
    --color-accent: #ff7700; /* Fiery Orange */
    --color-text: #f0f0f0;
    --color-text-light: #111;
    --color-background-main: #0a0014; /* Deep Void/Black */
    --color-background-end: #20002f; /* Deep Purple */
    --color-card-bg: #1e0033; /* Dark Cosmic Card */
    --color-card-shadow: rgba(156, 0, 255, 0.6);
    --color-input-bg: #2d0042;
    --color-input-border: #4a0070;
    --color-warning-border: #ff7700;
    --color-warning-bg: rgba(255, 119, 0, 0.15);

    --color-bar-start: #ff00d4;
    --color-bar-end: #ff7700;
    
    /* Apply aggressive gradient to background and text */
    & body {
        background: linear-gradient(135deg, var(--color-background-main) 0%, var(--color-background-end) 100%) !important;
    }
    & h1 { 
        background: linear-gradient(to right, #ff00d4, #ff7700, #9c00ff);
        background-size: 300% 300%;
        animation: gradient 3s ease infinite;
        -webkit-background-clip: text; 
        background-clip: text; 
        color: transparent; 
        text-shadow: 0 0 10px rgba(255, 0, 212, 0.5);
    }
    & textarea, & input[type="text"], & select { 
        color: var(--color-text); 
        border-color: var(--color-input-border); 
        background: var(--color-input-bg); 
    }
    & button { 
        background: linear-gradient(to right, var(--color-secondary), var(--color-primary)); 
        color: var(--color-text); 
        box-shadow: 0 0 15px rgba(255, 0, 212, 0.2);
    }
    & button:hover {
        box-shadow: 0 0 20px rgba(255, 0, 212, 0.4);
    }
    & .alignment-badge, & .category-stat { 
        background: var(--color-input-bg); 
        color: var(--color-text); 
        border-left-color: var(--color-primary); 
    }
    & .category-description { color: #cfcfcf; }
    & .power-bar-container { background-color: #4a0070; }
    & .comparison-fight-btn, & .matchup-fight-btn { background: var(--color-primary); color: var(--color-text); }


    /* Tier Colors - Atmos (re-emphasize high tiers) */
    --tier-ultraomni: linear-gradient(60deg, #ff00d4, #ff7700, #9c00ff);
    --tier-atmos: linear-gradient(15deg, #ff00d4, #ff7700, #9c00ff);
    --tier-omniversal: #9c00ff;
    --tier-multiversal: #ff00d4;
    --tier-universal: #ff7700;
    --tier-solar: #ff4081;
    --tier-planetary: #c700ff;
    --tier-nation: #5d00ff;
    --tier-city: #00bcd4;
    --tier-street: #3949ab;
    --tier-mundane: #424242;
    --tier-terrible: #111111;
    
    --tier-galactic: #ffc107;
    --tier-highmultiverse: linear-gradient(135deg, #ff00d4, #9c00ff);
    
    --tier-human: #555555;
    --tier-forest: #4a0070;
    --tier-mountain: #7b1fa2;
    --tier-validus: linear-gradient(100deg, #ff00d4, #ff7700, #9c00ff);
}


.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header */
header {
    text-align: center;
    margin-bottom: 40px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1 {
    font-size: 3.5rem;
    margin-bottom: 10px;
    background: linear-gradient(to right, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-transform: uppercase;
    letter-spacing: 3px;
    transition: all 0.5s;
}

.logo {
    max-width: 150px;
    margin-bottom: 15px;
}

.subtitle {
    font-size: 1.2rem;
    color: var(--color-secondary);
    font-style: italic;
    transition: color 0.5s;
}

.skin-selector-container {
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text);
}

.music-control-container {
    margin-top: 10px;
    text-align: center;
}

#music-toggle-btn {
    background: linear-gradient(to right, var(--color-accent), var(--color-primary));
    color: var(--color-text-light);
    padding: 8px 15px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto; /* Center the button */
}

/* NEW: Developer Control Styles */
.developer-control-container {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text);
    padding: 5px 10px;
    border: 1px dashed var(--color-accent);
    border-radius: 5px;
    background-color: color-mix(in srgb, var(--color-accent) 5%, var(--color-card-bg));
}

.developer-checkbox {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
}


/* Input Section */
.input-section {
    background-color: var(--color-card-bg);
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px var(--color-card-shadow);
    margin-bottom: 30px;
    position: relative;
    transition: background-color 0.5s, box-shadow 0.5s;
}

/* New: Undo/Redo Controls */
.description-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.description-controls button {
    background: #e0e0e0;
    color: #555;
    padding: 8px 12px;
    font-size: 0.9rem;
    width: auto;
}

.description-controls button:hover:not(:disabled) {
    background: #ccc;
    box-shadow: none;
    transform: translateY(-1px);
}

.description-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

textarea {
    width: 100%;
    min-height: 150px;
    padding: 15px;
    border: 1px solid var(--color-input-border);
    border-radius: 5px;
    font-size: 1rem;
    margin-bottom: 20px;
    resize: vertical;
    transition: border 0.3s, background-color 0.5s, color 0.5s;
    background-color: var(--color-card-bg);
    color: var(--color-text);
}

textarea:focus {
    border-color: var(--color-secondary);
    outline: none;
}

button {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    color: var(--color-text-light);
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background 0.5s;
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(156, 39, 176, 0.3); /* Base shadow color adjustment needed */
}

button:active {
    transform: translateY(0);
}

/* Loader */
.loader {
    display: none;
    justify-content: center;
    margin-top: 20px;
}

.loader .bar {
    display: inline-block;
    width: 10px;
    height: 30px;
    margin: 0 5px;
    background-color: var(--color-secondary);
    border-radius: 5px;
    animation: loading 1.5s ease-in-out infinite;
}

.loader .bar:nth-child(2) {
    animation-delay: 0.2s;
}

.loader .bar:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes loading {
    0% {
        transform: scaleY(0.5);
    }
    50% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(0.5);
    }
}

/* Results Section */
.results-section {
    display: none;
    background-color: var(--color-card-bg);
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px var(--color-card-shadow);
    margin-top: 30px;
    transition: background-color 0.5s, box-shadow 0.5s;
    position: relative;
}

.character-profile h2 {
    color: var(--color-primary);
    margin-bottom: 30px;
    font-size: 2rem;
}

.profile-main-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.profile-main-info h2 {
    margin-bottom: 0; 
    margin-right: 15px;
}

.tier-badge {
    position: static;
    top: auto;
    right: auto;
    background-color: var(--tier-mundane);
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 1.2rem;
    transition: background-color 0.5s;
}

.alignment-badge {
    display: inline-block;
    padding: 6px 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    background: var(--color-input-bg);
    color: var(--color-text);
    font-weight: 600;
    transition: background-color 0.5s, color 0.5s;
}

/* Power Grid */
.power-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.power-stat {
    display: flex;
    flex-direction: column;
}

.stat-name {
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--color-primary);
}

.power-bar-container {
    position: relative;
    background-color: #eee;
    height: 25px;
    border-radius: 5px;
    overflow: hidden;
    transition: background-color 0.5s;
}

.power-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, var(--color-bar-start), var(--color-bar-end));
    border-radius: 5px;
    transition: width 1s ease-out, background 0.5s;
}

.power-value {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    color: white;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Analysis Section */
.analysis-section {
    margin-top: 30px;
}

.analysis-section h3 {
    color: var(--color-primary);
    margin-bottom: 15px;
    font-size: 1.5rem;
    border-bottom: 2px solid var(--color-input-border);
    padding-bottom: 10px;
}

.analysis-section h4 {
    color: var(--color-primary);
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

#analysis-text, #comparisons {
    line-height: 1.8;
    color: var(--color-text);
}

#analysis-text ul {
    margin-left: 20px;
    margin-bottom: 15px;
}

#analysis-text hr {
    margin: 20px 0;
    border: 0;
    height: 1px;
    background: #eee;
}

#comparisons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
}

.character-comparison {
    display: flex;
    flex-direction: column;
    background-color: var(--color-input-bg);
    border-left: 4px solid var(--color-secondary);
    padding: 15px;
    border-radius: 5px;
    flex: 1 1 300px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
}

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

.character-comparison h4 {
    color: var(--color-primary);
    margin-bottom: 10px;
}

.matchup-container {
    margin-top: 15px;
}

.comparison-fight-btn,
.matchup-fight-btn {
    background: linear-gradient(to right, var(--color-accent), var(--color-secondary));
    color: var(--color-text-light);
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 0.85rem;
    cursor: pointer;
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.comparison-fight-btn:hover,
.matchup-fight-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 10px rgba(156, 39, 176, 0.3);
}

/* Power Categories Section */
.power-categories {
    margin-top: 30px;
    border-top: 1px solid var(--color-input-border);
    padding-top: 20px;
}

.power-categories h3 {
    color: var(--color-primary);
    margin-bottom: 15px;
    font-size: 1.5rem;
    border-bottom: 2px solid var(--color-input-border);
    padding-bottom: 10px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.category-stat {
    background: var(--color-input-bg);
    padding: 12px;
    border-radius: 8px;
    border-left: 4px solid var(--color-primary);
    transition: background-color 0.5s;
}

.category-name {
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--color-primary);
    display: flex;
    justify-content: space-between;
}

.category-value {
    font-weight: bold;
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: background 0.5s;
}

.category-description {
    font-size: 0.9rem;
    color: #666;
    margin-top: 5px;
}

/* Tier Colors - Use variables */
.tier-ultraomni { background: var(--tier-ultraomni); background-size: 300% 300%; animation: gradient 1s ease infinite; }
.tier-atmos { background: var(--tier-atmos); background-size: 300% 300%; animation: gradient 6s ease infinite; }
.tier-omniversal { background: var(--tier-omniversal); background-size: 300% 300%; animation: gradient 3s ease infinite; }
.tier-multiversal { background-color: var(--tier-multiversal); animation: none; }
.tier-universal { background-color: var(--tier-universal); animation: none; }
.tier-solar { background-color: var(--tier-solar); animation: none; }
.tier-planetary { background-color: var(--tier-planetary); animation: none; }
.tier-nation { background-color: var(--tier-nation); animation: none; }
.tier-city { background-color: var(--tier-city); animation: none; }
.tier-street { background-color: var(--tier-street); animation: none; }
.tier-mundane { background-color: var(--tier-mundane); animation: none; }
.tier-terrible { background-color: var(--tier-mundane); animation: none; }
.tier-standard { background-color: var(--tier-mundane); animation: none; }

/* NEW TIER CLASSES */
.tier-galactic { background-color: var(--tier-galactic); animation: none; }
.tier-highmultiverse { background: var(--tier-highmultiverse); background-size: 300% 300%; animation: gradient 2s ease infinite; }
.tier-human { background-color: var(--tier-human); animation: none; }
.tier-forest { background-color: var(--tier-forest); animation: none; }
.tier-mountain { background-color: var(--tier-mountain); animation: none; }
.tier-validus { background: var(--tier-validus); background-size: 300% 300%; animation: gradient 0.7s ease infinite; }

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

/* Power Description Helper Styles */
.description-helpers {
    margin-bottom: 15px;
}

.helper-btn {
    background: linear-gradient(to right, var(--color-secondary), var(--color-primary));
    color: var(--color-text-light);
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.helper-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(156, 39, 176, 0.3);
}

.helpers-panel {
    display: none;
    background-color: var(--color-input-bg);
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
    border-left: 4px solid var(--color-primary);
    animation: fadeIn 0.3s ease;
}

.helpers-panel h3 {
    color: var(--color-primary);
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.helpers-panel p {
    margin-bottom: 15px;
    color: var(--color-text);
    font-weight: 500;
}

.helper-prompt {
    margin-bottom: 15px;
}

.helper-prompt label {
    display: block;
    margin-bottom: 5px;
    color: var(--color-primary);
    font-weight: 500;
}

.helper-prompt input[type="text"] {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--color-input-border);
    border-radius: 5px;
    font-size: 0.9rem;
    background-color: var(--color-card-bg);
    color: var(--color-text);
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.slider {
    flex: 1;
    height: 10px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    -webkit-appearance: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-secondary);
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-secondary);
    cursor: pointer;
}

.slider-value {
    min-width: 120px;
    font-size: 0.85rem;
    color: #666;
}

.power-checkbox-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.power-checkbox {
    display: flex;
    align-items: center;
    gap: 5px;
}

.power-checkbox input {
    margin: 0;
}

#generate-description-btn {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    color: var(--color-text-light);
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

#generate-description-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(156, 39, 176, 0.3);
}

.show-all-btn {
    background: linear-gradient(to right, var(--color-accent), var(--color-primary));
    color: var(--color-text-light);
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.95rem;
    margin-bottom: 15px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.show-all-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(156, 39, 176, 0.3);
}

.show-all-container {
    text-align: center;
    margin-bottom: 15px;
    width: 100%;
}

/* Improvement Settings */
.improvement-settings {
    margin-bottom: 15px;
    padding: 10px;
    background-color: var(--color-input-bg);
    border-radius: 5px;
    border-left: 4px solid var(--color-accent);
}

.improvement-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #666;
    cursor: pointer;
}

.improvement-checkbox input {
    margin: 0;
}

/* Character Improvement Styles */
.character-improvements {
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(135deg, var(--color-input-bg), var(--color-card-bg));
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    animation: fadeIn 0.5s ease;
}

.character-improvements h4 {
    color: var(--color-primary);
    margin-bottom: 15px;
    font-size: 1.4rem;
    text-align: center;
    border-bottom: 1px solid var(--color-input-border);
    padding-bottom: 10px;
}

.improvement-section {
    margin-bottom: 25px;
}

.improvement-section h5 {
    color: var(--color-secondary);
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.improvement-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.improvement-item {
    background: linear-gradient(135deg, var(--color-card-bg), var(--color-input-bg));
    border-left: 4px solid var(--color-accent);
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

.improvement-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.improvement-title {
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.improvement-description {
    color: #555;
    line-height: 1.6;
    margin-bottom: 10px;
}

.improvement-example {
    background: var(--color-warning-bg);
    border-radius: 5px;
    padding: 10px;
    font-style: italic;
    color: var(--color-text);
    margin-top: 10px;
}

.improvement-example strong {
    color: var(--color-primary);
}

.prompt-rewrite {
    border-left: 4px solid #4caf50;
    border-radius: 5px;
    padding: 15px;
    margin-top: 10px;
}
/* Default/Light skins specific coloring */
.skin-semper .prompt-rewrite, .skin-casual .prompt-rewrite, .skin-simple .prompt-rewrite { background: linear-gradient(135deg, #e8f5e8, #f0f8f0); }

/* Dark/Themed skins specific coloring */
.skin-dark .prompt-rewrite, .skin-multiverse .prompt-rewrite, .skin-scp .prompt-rewrite { 
    background: color-mix(in srgb, #4caf50 10%, var(--color-card-bg)); 
    border-left-color: #4caf50; 
}


.prompt-rewrite h6 {
    color: #2e7d32;
    margin-bottom: 8px;
    font-size: 1rem;
}

.original-prompt,
.improved-prompt {
    padding: 8px;
    border-radius: 3px;
    margin: 5px 0;
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--color-text);
}

.original-prompt {
    background-color: #ffebee;
    border-left: 3px solid #f44336;
}
.improved-prompt {
    background-color: #e8f5e8;
    border-left: 3px solid #4caf50;
}
/* Specific dark mode adjustments for prompt boxes */
.skin-dark .original-prompt, .skin-multiverse .original-prompt, .skin-scp .original-prompt { background-color: color-mix(in srgb, #f44336 20%, var(--color-card-bg)); border-left-color: #f44336; }
.skin-dark .improved-prompt, .skin-multiverse .improved-prompt, .skin-scp .improved-prompt { background-color: color-mix(in srgb, #4caf50 20%, var(--color-card-bg)); border-left-color: #4caf50; }


.improvements-btn {
    background: linear-gradient(to right, #ff6b6b, var(--color-accent));
    color: var(--color-text-light);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.improvements-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
}

/* Power Charts */
.power-charts {
    margin-top: 30px;
    margin-bottom: 30px;
}

.power-charts h3 {
    color: var(--color-primary);
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.charts-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
}

.chart-wrapper {
    background: var(--color-card-bg);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 10px var(--color-card-shadow);
    width: 100%;
    max-width: 400px;
    height: 400px;
}

/* Optional Outputs Section */
.optional-outputs {
    margin-top: 40px;
    border-top: 1px solid var(--color-input-border);
    padding-top: 20px;
    display: none;
}

.optional-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.optional-buttons button {
    background: linear-gradient(to right, var(--color-secondary), var(--color-accent));
    flex: 1;
    min-width: 180px;
}

.optional-output-container {
    background-color: var(--color-input-bg);
    border-radius: 8px;
    padding: 20px;
    min-height: 50px;
}

.loading-text {
    color: var(--color-secondary);
    font-style: italic;
    text-align: center;
}

/* Power Card Styles */
.power-card {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    background: linear-gradient(135deg, var(--color-background-end), var(--color-card-bg));
    border-radius: 10px;
    overflow: hidden;
    color: var(--color-text);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: background-color 0.5s, color 0.5s;
}
/* Explicit color setting for dark skins for text contrast */
.skin-dark .power-card, .skin-multiverse .power-card, .skin-scp .power-card { color: white; }


.card-header {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h3 {
    color: white;
    margin: 0;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card-tier {
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-radius: 5px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.card-stat {
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-card-bg));
    border-radius: 5px;
    padding: 10px;
    text-align: center;
}

.card-stat-name {
    font-size: 0.9rem;
    margin-bottom: 5px;
    opacity: 0.8;
}

.card-stat-value {
    font-size: 1.8rem;
    font-weight: bold;
}

.card-categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.card-category {
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-card-bg));
    border-radius: 5px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.download-card-btn {
    margin-top: 20px;
    width: 100%;
    max-width: 500px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Lore Snippet Styles */
.lore-snippet {
    background: linear-gradient(135deg, var(--color-background-main), var(--color-background-end));
    border-radius: 8px;
    padding: 30px;
    font-family: 'Georgia', serif;
    position: relative;
    box-shadow: 0 5px 15px var(--color-card-shadow);
}

.lore-snippet h4 {
    color: var(--color-primary);
    font-size: 1.6rem;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 1px solid var(--color-input-border);
    padding-bottom: 10px;
}

.lore-content {
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: justify;
    color: var(--color-text);
}

.lore-content p {
    margin-bottom: 15px;
    text-indent: 20px;
}

.lore-content p:first-letter {
    font-size: 200%;
    color: var(--color-primary);
    font-weight: bold;
}

/* Power Upgrades Styles */
.power-upgrades {
    border-radius: 8px;
    padding: 20px;
}

.power-upgrades h4 {
    color: var(--color-primary);
    font-size: 1.6rem;
    margin-bottom: 20px;
    text-align: center;
}

.upgrades-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.upgrade-item {
    background: linear-gradient(135deg, var(--color-card-bg), var(--color-input-bg));
    border-left: 4px solid var(--color-accent);
    border-radius: 5px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

.upgrade-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.upgrade-item h5 {
    color: var(--color-primary);
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.upgrade-benefit {
    margin-top: 10px;
    font-weight: bold;
    color: var(--color-secondary);
}

.upgrade-example {
    margin-top: 10px;
    font-style: italic;
    color: #666;
}

/* Battle Simulator Styles */
.battle-simulator {
    width: 100%;
    background-color: var(--color-card-bg);
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 5px 15px var(--color-card-shadow);
}

.opponent-section {
    padding: 20px;
    border-bottom: 1px solid var(--color-input-border);
}

.opponent-section h4 {
    color: var(--color-primary);
    margin-bottom: 15px;
    font-size: 1.5rem;
    text-align: center;
}

.opponent-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-input-border);
    margin-bottom: 20px;
}

.opponent-tab {
    flex: 1;
    padding: 10px;
    border: none;
    background: none;
    font-size: 1rem;
    cursor: pointer;
    color: #666;
    transition: all 0.3s ease;
}

.opponent-tab.active {
    color: var(--color-primary);
    font-weight: bold;
    border-bottom: 2px solid var(--color-primary);
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block;
}

.opponent-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.predefined-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.opponent-card {
    background: linear-gradient(135deg, var(--color-input-bg), var(--color-card-bg));
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.2s ease;
}

.opponent-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.opponent-name {
    font-weight: bold;
    color: var(--color-primary);
    font-size: 1.2rem;
}

.opponent-tier {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 5px;
    color: white;
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.select-opponent-btn {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    color: var(--color-text-light);
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.select-opponent-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(156, 39, 176, 0.3);
}

#analyze-opponent-btn {
    width: 100%;
    margin-top: 10px;
}

.analyzed-opponent {
    background: linear-gradient(135deg, var(--color-input-bg), var(--color-card-bg));
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.analyzed-opponent h5 {
    color: var(--color-primary);
    font-size: 1.3rem;
    margin: 0;
}

.opponent-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.opponent-stat {
    background: color-mix(in srgb, var(--color-secondary) 10%, var(--color-card-bg));
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    text-align: center;
}

/* Battle Arena Styles */
.battle-arena {
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.battle-arena h4 {
    color: var(--color-primary);
    margin-bottom: 15px;
    font-size: 1.5rem;
    text-align: center;
}

.battle-participants {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.battle-character,
.battle-opponent {
    flex: 1;
    background: linear-gradient(135deg, var(--color-input-bg), var(--color-card-bg));
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 45%;
}

.battle-character h5,
.battle-opponent h5 {
    color: var(--color-primary);
    font-size: 1.3rem;
    margin: 0;
    text-align: center;
}

.battle-tier {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 5px;
    color: white;
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.battle-power-scale {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    width: 100%;
}

.battle-stat {
    background: color-mix(in srgb, var(--color-secondary) 10%, var(--color-card-bg));
    padding: 5px;
    border-radius: 5px;
    font-size: 0.8rem;
    text-align: center;
}

/* Battle Results Styles */
.battle-results {
    margin-top: 20px;
}

.battle-report {
    background: linear-gradient(135deg, var(--color-input-bg), var(--color-card-bg));
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    animation: fadeIn 0.5s ease;
}

.battle-section {
    margin-bottom: 25px;
}

.battle-section h4 {
    color: var(--color-primary);
    margin-bottom: 10px;
    font-size: 1.3rem;
    border-bottom: 1px solid var(--color-input-border);
    padding-bottom: 5px;
}

.battle-simulation,
.battle-analysis,
.battle-outcome,
.battle-rematch {
    line-height: 1.8;
    text-align: justify;
    color: var(--color-text);
}

.battle-outcome.win {
    background-color: color-mix(in srgb, #4caf50 10%, var(--color-card-bg));
    border-left: 4px solid #4caf50;
    padding: 10px;
    border-radius: 5px;
}

.battle-outcome.loss {
    background-color: color-mix(in srgb, #f44336 10%, var(--color-card-bg));
    border-left: 4px solid #f44336;
    padding: 10px;
    border-radius: 5px;
}

.battle-outcome.draw {
    background-color: color-mix(in srgb, #ff9800 10%, var(--color-card-bg));
    border-left: 4px solid #ff9800;
    padding: 10px;
    border-radius: 5px;
}

.rematch-btn,
.new-opponent-btn {
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
}

/* Power Archive Styles */
.power-archive {
    margin-top: 40px;
    border-top: 1px solid var(--color-input-border);
    padding-top: 20px;
}

.power-archive h3 {
    color: var(--color-primary);
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.archive-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.archive-controls button {
    background: linear-gradient(to right, var(--color-secondary), var(--color-primary));
    flex: 1;
    min-width: 180px;
}

.character-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.character-tab {
    flex: 1;
    padding: 10px 15px;
    background: var(--color-input-bg);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
    color: var(--color-text);
}

.character-tab.active {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    color: white;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.archive-output-container {
    background-color: var(--color-input-bg);
    border-radius: 8px;
    padding: 20px;
    min-height: 50px;
}

.save-success {
    background-color: color-mix(in srgb, #4caf50 10%, var(--color-input-bg));
    border-left: 4px solid #4caf50;
    padding: 15px;
    border-radius: 5px;
}

.load-success {
    background-color: color-mix(in srgb, #2196f3 10%, var(--color-input-bg));
    border-left: 4px solid #2196f3;
    padding: 15px;
    border-radius: 5px;
}

.saved-characters h4 {
    color: var(--color-primary);
    margin-bottom: 15px;
    text-align: center;
}

.character-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.character-card {
    background: linear-gradient(135deg, var(--color-card-bg), var(--color-input-bg));
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.character-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.character-card h5 {
    margin: 0;
    color: var(--color-primary);
    font-size: 1.2rem;
}

.char-tier {
    padding: 3px 8px;
    border-radius: 5px;
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
}

.char-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.char-date {
    font-size: 0.8rem;
    color: #666;
}

.char-creator {
    font-size: 0.8rem;
    color: var(--color-secondary);
    font-weight: 500;
}

.char-buttons {
    display: flex;
    gap: 10px;
}

.load-char-btn {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    flex: 1;
}

.battle-char-btn {
    background: linear-gradient(to right, var(--color-accent), #ff6b6b);
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    flex: 1;
}

.delete-char-btn {
    background: linear-gradient(to right, #f44336, #d32f2f);
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    flex: 1;
}

.share-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.share-container h4 {
    color: var(--color-primary);
    margin-bottom: 5px;
    text-align: center;
}

.share-section {
    background-color: var(--color-input-bg);
    border-radius: 8px;
    padding: 15px;
}

.share-section p {
    margin-bottom: 10px;
    color: var(--color-text);
    font-weight: 500;
}

.share-input-container {
    display: flex;
    gap: 10px;
}

.share-input {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--color-input-border);
    border-radius: 5px;
    font-size: 0.8rem;
    background-color: var(--color-card-bg);
    color: var(--color-text);
    border: 1px solid var(--color-input-border);
}

.copy-btn, .import-btn, .copy-cc-btn {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    color: white;
    border: none;
    padding: 5px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
}

/* Voice Input Styles */
.voice-input {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.voice-btn {
    background: linear-gradient(to right, var(--color-secondary), var(--color-primary));
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.voice-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.voice-btn.recording {
    background: linear-gradient(to right, var(--color-accent), #ff5252);
    animation: pulse 1.5s infinite;
}

.voice-status {
    font-size: 0.9rem;
    color: var(--color-secondary);
    font-style: italic;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

/* Character Interaction Styles */
.character-interaction {
    width: 100%;
    background-color: var(--color-card-bg);
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 5px 15px var(--color-card-shadow);
}

.interaction-setup {
    padding: 20px;
    border-bottom: 1px solid var(--color-input-border);
}

.interaction-setup h4 {
    color: var(--color-primary);
    margin-bottom: 15px;
    font-size: 1.5rem;
    text-align: center;
}

.setup-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.setup-form label {
    font-weight: bold;
    color: var(--color-primary);
    margin-bottom: 5px;
}

.setup-form textarea {
    min-height: 120px;
    padding: 15px;
    border: 1px solid var(--color-input-border);
    border-radius: 5px;
    font-size: 1rem;
    resize: vertical;
    background-color: var(--color-card-bg);
    color: var(--color-text);
}

.setup-form button {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    color: var(--color-text-light);
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.setup-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px color-mix(in srgb, var(--color-secondary) 30%, transparent);
}

.setup-form button:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.chat-interface {
    display: none;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.chat-interface h4 {
    color: var(--color-primary);
    margin-bottom: 15px;
    font-size: 1.5rem;
    text-align: center;
}

.chat-messages {
    height: 400px;
    overflow-y: auto;
    border: 1px solid var(--color-input-border);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    background-color: var(--color-input-bg);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-message {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 18px;
    word-wrap: break-word;
    animation: messageSlide 0.3s ease;
}

.chat-message.user {
    align-self: flex-end;
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    color: white;
    border-bottom-right-radius: 6px;
}

.chat-message.character {
    align-self: flex-start;
    background: var(--color-card-bg);
    color: var(--color-text);
    border: 1px solid var(--color-input-border);
    border-bottom-left-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chat-message.system {
    align-self: center;
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-card-bg));
    color: var(--color-primary);
    font-style: italic;
    font-size: 0.9rem;
    max-width: 90%;
    text-align: center;
    border-radius: 12px;
}

.chat-input-container {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.chat-input {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--color-input-border);
    border-radius: 20px;
    font-size: 1rem;
    resize: none;
    min-height: 44px;
    max-height: 120px;
    background-color: var(--color-card-bg);
    color: var(--color-text);
}

.chat-input:focus {
    border-color: var(--color-secondary);
    outline: none;
}

.chat-send-btn {
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    color: var(--color-text-light);
    border: none;
    padding: 12px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 1rem;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.chat-send-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--color-secondary) 30%, transparent);
}

.chat-send-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.chat-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--color-input-border);
}

.chat-info {
    font-size: 0.9rem;
    color: #666;
}

.chat-reset-btn {
    background: linear-gradient(to right, #9e9e9e, #757575);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.chat-reset-btn:hover {
    background: linear-gradient(to right, #757575, #616161);
    transform: translateY(-1px);
}

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

/* Quick Import Section */
.import-section {
    background-color: var(--color-card-bg);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 5px 15px var(--color-card-shadow);
    margin-bottom: 20px;
    border-left: 4px solid var(--color-accent);
}

.import-section h2 {
    color: var(--color-primary);
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.import-container {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.import-container input {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--color-input-border);
    border-radius: 5px;
    font-size: 1rem;
    background-color: var(--color-card-bg);
    color: var(--color-text);
}

.import-container input:focus {
    border-color: var(--color-secondary);
    outline: none;
}

.import-container button {
    background: linear-gradient(to right, var(--color-accent), var(--color-primary));
    flex: 1;
    min-width: 180px;
}

.import-help {
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    margin: 0;
}

/* --- Fixed, High-Contrast Warnings (Override Skin Styles) --- */

/* 1. Urgent Warning (Community Characters: Data Loss Risk) */
.urgent-warning-note {
    /* Fixed base colors */
    --urgent-bg: #fff3cd; /* Light amber/yellow */
    --urgent-border: #ffc107; /* Amber/Yellow */
    --urgent-text: #856404; /* Dark text */

    /* Apply styles */
    background-color: var(--urgent-bg) !important;
    border-left: 4px solid var(--urgent-border) !important;
    color: var(--urgent-text) !important;
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    font-size: 0.95rem;
    font-weight: 500;
}

.urgent-warning-note strong {
    color: #a07a00 !important; /* Darker amber for emphasis */
    font-weight: bold !important;
}

/* Dark mode overrides for Urgent Warning */
.skin-dark .urgent-warning-note,
.skin-multiverse .urgent-warning-note,
.skin-scp .urgent-warning-note {
    --urgent-bg: #5f4a13; /* Darker background */
    --urgent-border: #ffc107;
    --urgent-text: #ffeb58; /* Bright yellow text */
    
    background-color: var(--urgent-bg) !important;
    color: var(--urgent-text) !important;
}
.skin-dark .urgent-warning-note strong,
.skin-multiverse .urgent-warning-note strong,
.skin-scp .urgent-warning-note strong {
    color: #ffeb3b !important;
}


/* 2. Info/Disclaimer Warning (My Characters: Local Storage Risk) */
.info-warning-note {
    /* Fixed base colors */
    --info-bg: #cfe2ff; /* Light blue */
    --info-border: #0d6efd; /* Strong blue */
    --info-text: #055160; /* Dark cyan/blue text */

    /* Apply styles */
    background-color: var(--info-bg) !important;
    border-left: 4px solid var(--info-border) !important;
    color: var(--info-text) !important;
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    font-size: 0.95rem;
    font-weight: 500;
}

.info-warning-note strong {
    color: #0d6efd !important;
    font-weight: bold !important;
}

/* Dark mode overrides for Info Warning */
.skin-dark .info-warning-note,
.skin-multiverse .info-warning-note,
.skin-scp .info-warning-note {
    --info-bg: #1c3653; /* Dark background */
    --info-border: #0d6efd;
    --info-text: #9ec5fe; /* Lighter blue text */
    
    background-color: var(--info-bg) !important;
    color: var(--info-text) !important;
}
.skin-dark .info-warning-note strong,
.skin-multiverse .info-warning-note strong,
.skin-scp .info-warning-note strong {
    color: #539eff !important;
}


.composite-simulator { background:var(--color-card-bg); border-radius:10px; padding:20px; box-shadow:0 5px 15px var(--color-card-shadow); margin:20px 0; }
.warning-note {
    background-color: var(--color-warning-bg); 
    border-left: 4px solid var(--color-warning-border);
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    color: var(--color-text);
    font-size: 0.95rem;
}
.warning-note strong {
    color: var(--color-warning-border);
}
.teams { display:flex; gap:15px; flex-wrap:wrap; }
.team-box { flex:1; min-width:280px; background:linear-gradient(135deg,var(--color-input-bg),var(--color-card-bg)); border-radius:8px; padding:15px; box-shadow:0 2px 10px rgba(0,0,0,0.2); }
#team-a-list, #team-b-list { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.team-member { background:var(--color-input-bg); border-left:4px solid var(--color-primary); border-radius:6px; padding:8px 10px; display:flex; justify-content:space-between; align-items:center; }
.team-member .meta { font-size:.85rem; color:#555; }
.team-member button { padding:6px 10px; font-size:.85rem; }

.composite-picker { margin:15px 0 5px; background:var(--color-card-bg); border:1px solid var(--color-input-border); border-radius:8px; padding:12px; }
.picker-header { display:flex; gap:10px; align-items:center; margin-bottom:10px; }
.picker-header input { flex:1; padding:8px 10px; border:1px solid var(--color-input-border); border-radius:6px; background-color: var(--color-card-bg); color: var(--color-text); }
.picker-tabs button { padding:8px 12px; border:none; border-radius:6px; background:var(--color-input-bg); cursor:pointer; color: var(--color-text); }
.picker-tabs button.active { background:linear-gradient(to right, var(--color-primary), var(--color-secondary)); color:var(--color-text-light); }
.picker-list { display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
.picker-item { background:linear-gradient(135deg,var(--color-input-bg),var(--color-card-bg)); border-radius:8px; padding:10px; box-shadow:0 2px 5px rgba(0,0,0,0.05); display:flex; flex-direction:column; gap:6px; }
.picker-top { display:flex; justify-content:space-between; align-items:center; }
.picker-name { font-weight:600; color:var(--color-primary); }
.picker-actions { display:flex; gap:8px; }
.picker-actions button { padding:6px 10px; font-size:.85rem; }

.composite-collapsible { margin:20px 0; }
.composite-collapsible > summary { list-style:none; padding:12px 16px; border:1px solid var(--color-input-border); border-radius:8px; background:linear-gradient(to right, var(--color-primary), var(--color-secondary)); color:var(--color-text-light); cursor:pointer; font-weight:600; }
.composite-collapsible > summary::-webkit-details-marker { display:none; }
.composite-collapsible > summary::marker { content:''; }
.composite-collapsible > .composite-simulator { border-top-left-radius:0; border-top-right-radius:0; }

.picker-collapsible > summary {
  list-style: none; padding: 10px 14px; border: 1px solid var(--color-input-border);
  border-radius: 8px; background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
  color: var(--color-text-light); cursor: pointer; font-weight: 600;
}
.picker-collapsible > summary::-webkit-details-marker { display: none; }

/* Counter Evaluation Styles */
.counter-evaluation-report {
    background: linear-gradient(135deg, var(--color-input-bg), var(--color-card-bg));
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 5px 15px var(--color-card-shadow);
    animation: fadeIn 0.5s ease;
}

.ce-battle-log {
    background: var(--color-card-bg);
    border: 1px solid var(--color-input-border);
    border-radius: 8px;
    padding: 15px;
}
.skin-dark .ce-battle-log, .skin-multiverse .ce-battle-log, .skin-scp .ce-battle-log {
    background: var(--color-input-bg);
}

.ce-matchup-header {
    font-weight: bold;
    color: var(--color-primary);
    padding: 5px 0;
    margin: 10px 0 5px;
    border-bottom: 1px dashed var(--color-input-border);
    font-size: 1.1em;
}

.ce-stage-break {
    text-align: center;
    font-style: italic;
    color: var(--color-accent);
    margin: 15px 0;
}

.ce-counter-info {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 5px;
}
.skin-dark .ce-counter-info, .skin-multiverse .ce-counter-info, .skin-scp .ce-counter-info {
    color: #aaa;
}


.ce-battle-result {
    padding: 10px;
    margin: 8px 0;
    border-radius: 5px;
    line-height: 1.5;
    font-size: 0.85em;
    display: flex;
    flex-direction: column;
}

.ce-battle-result p {
    margin-top: 5px;
}

.outcome-badge {
    font-weight: bold;
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    color: white;
    margin-bottom: 5px;
    align-self: flex-start;
}

.ce-win {
    background-color: color-mix(in srgb, #4caf50 10%, var(--color-card-bg));
    border-left: 4px solid #4caf50;
}
.ce-win .outcome-badge { background-color: #4caf50; }

.ce-loss {
    background-color: color-mix(in srgb, #f44336 10%, var(--color-card-bg));
    border-left: 4px solid #f44336;
}
.ce-loss .outcome-badge { background-color: #f44336; }

.ce-tie {
    background-color: color-mix(in srgb, #ff9800 10%, var(--color-card-bg));
    border-left: 4px solid #ff9800;
}
.ce-tie .outcome-badge { background-color: #ff9800; }

.ce-error {
    background-color: color-mix(in srgb, #d32f2f 10%, var(--color-card-bg));
    border-left: 4px solid #d32f2f;
    color: #d32f2f;
    padding: 10px;
    margin: 8px 0;
    border-radius: 5px;
    font-weight: bold;
}

/* Final Opponent Display */
.final-opponent-container {
    padding: 20px;
    border: 2px solid #b71c1c;
    border-radius: 8px;
    background: linear-gradient(145deg, var(--color-card-bg), var(--color-input-bg));
    text-align: center;
}
.skin-dark .final-opponent-container, .skin-multiverse .final-opponent-container, .skin-scp .final-opponent-container {
     background: #424242;
}

.opponent-details {
    text-align: left;
    margin-top: 20px;
}

.opponent-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.detail-box {
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-card-bg));
    padding: 8px 10px;
    border-radius: 5px;
    font-size: 0.95rem;
    text-align: center;
    font-weight: 500;
}
.skin-dark .detail-box, .skin-multiverse .detail-box, .skin-scp .detail-box {
    background: var(--color-input-bg);
}

.opponent-analysis-text {
    background: var(--color-input-bg);
    padding: 10px;
    border-radius: 5px;
    border-left: 3px solid var(--color-accent);
    margin-bottom: 15px;
    font-style: italic;
    font-size: 0.95rem;
}

.improvement-tip {
    font-weight: bold;
    color: var(--color-secondary);
    margin-top: 20px;
    border-top: 1px solid var(--color-input-border);
    padding-top: 10px;
}

/* NEW: Reference Management Styles */
.reference-collapsible { margin-bottom: 20px; }
.reference-collapsible > summary {
    list-style: none;
    padding: 10px 15px;
    border-radius: 5px;
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    color: var(--color-text-light);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}
.reference-collapsible > summary:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(156, 39, 176, 0.3);
}
.reference-collapsible > summary::-webkit-details-marker { display: none; }
.reference-collapsible > summary::marker { content:''; }

.reference-manager {
    padding: 15px;
    background-color: var(--color-input-bg);
    border: 1px solid var(--color-input-border);
    border-top: none;
    border-radius: 0 0 5px 5px;
}

.reference-help {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
}

.reference-input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    align-items: center;
    flex-wrap: wrap;
}

#reference-alias, #reference-value, #reference-type-select {
    padding: 8px 10px;
    border: 1px solid var(--color-input-border);
    border-radius: 5px;
    font-size: 0.9rem;
    background-color: var(--color-card-bg);
    color: var(--color-text);
}

#reference-alias {
    flex: 0 0 100px; /* Give alias input a fixed small size */
}

#reference-value {
    flex: 2;
    min-width: 150px;
}

#reference-type-select {
    flex-shrink: 0;
    min-width: 120px;
}

#add-reference-btn {
    padding: 8px 15px;
    font-size: 0.9rem;
    flex-shrink: 0;
    min-width: 100px;
}

.active-references {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reference-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-card-bg);
    padding: 10px 15px;
    border: 1px solid #eee;
    border-radius: 5px;
    font-size: 0.9rem;
}

.ref-alias {
    font-weight: bold;
    color: var(--color-primary);
    margin-right: 10px;
}

.ref-content {
    flex-grow: 1;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.remove-reference-btn {
    background: linear-gradient(to right, #f44336, #d32f2f);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-left: 10px;
    min-width: 60px;
    box-shadow: none;
}
.remove-reference-btn:hover {
    transform: none;
}

@media (max-width: 768px) {
    .container {
        padding: 15px;
    }
    
    h1 {
        font-size: 2.5rem;
    }
    
    .power-grid {
        grid-template-columns: 1fr;
    }
    
    .tier-badge {
        position: relative;
        display: inline-block;
        margin-bottom: 20px;
        right: auto;
        top: auto;
    }
    
    .optional-buttons {
        flex-direction: column;
    }
    
    .upgrades-list {
        grid-template-columns: 1fr;
    }
    
    .card-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .charts-container {
        flex-direction: column;
        align-items: center;
    }
    
    .chart-wrapper {
        width: 100%;
        height: 350px;
    }
    
    .battle-participants {
        flex-direction: column;
        gap: 20px;
    }
    
    .battle-character,
    .battle-opponent {
        max-width: 100%;
    }
    
    .battle-vs {
        margin: 5px 0;
    }
    
    .predefined-content {
        grid-template-columns: 1fr;
    }
    
    .archive-controls {
        flex-direction: column;
    }
    
    .character-list {
        grid-template-columns: 1fr;
    }
    
    .share-input-container {
        flex-direction: column;
    }
    
    .reference-input-group {
        flex-direction: column;
    }

    #reference-alias, #reference-type-select, #reference-value, #add-reference-btn {
        width: 100%;
        min-width: 100%;
    }
}

/* Battle Actions UI Styles */
.health-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding: 10px;
    background: var(--color-input-bg);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.health-bar-wrapper {
    flex: 1;
    text-align: center;
}

.health-vs {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-primary);
    margin: 0 15px;
}

.health-bar-outer {
    background: #e0e0e0;
    height: 15px;
    border-radius: 5px;
    overflow: hidden;
    margin: 5px auto;
    width: 90%;
}

.health-bar-inner {
    height: 100%;
    width: 100%; /* Default 100% width, adjusted dynamically */
    background-color: #4CAF50; /* Green */
    transition: width 0.5s ease-out;
}

.opponent-health .health-bar-inner {
    background-color: #F44336; /* Red for opponent */
    transition: width 0.5s ease-out; /* Ensure transition is explicit here too */
}

.health-value {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--color-text);
}

.battle-log-container {
    background: var(--color-card-bg);
    border: 1px solid var(--color-input-border);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 25px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.battle-log-scroll {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 10px; /* Space for scrollbar */
    margin-top: 10px;
}

.action-log-system {
    color: var(--color-secondary);
    font-style: italic;
    font-size: 0.9em;
    padding: 3px 0;
    border-bottom: 1px dashed var(--color-input-border);
}

.action-log-user {
    color: var(--color-primary);
    font-weight: 600;
    padding: 5px 0;
    font-style: italic; /* Dialogue is typically italicized */
}

.action-log-opp {
    color: var(--color-text);
    padding: 5px 0;
    border-bottom: 1px solid var(--color-input-border);
    font-style: italic; /* Dialogue is typically italicized */
}

/* NEW: Dialog Section Styles */
.dialog-section {
    padding: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--color-input-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#dialog-input {
    min-height: 40px;
    max-height: 80px;
    padding: 10px;
    border-radius: 5px;
    resize: none;
    font-size: 0.95rem;
    font-family: inherit;
    background-color: var(--color-card-bg);
    color: var(--color-text);
    border: 1px solid var(--color-input-border);
}
.skin-dark #dialog-input, .skin-multiverse #dialog-input, .skin-scp #dialog-input {
    background-color: var(--color-input-bg);
}

.dialog-send-btn {
    background: linear-gradient(to right, var(--color-secondary), var(--color-primary));
    color: var(--color-text-light);
    padding: 8px 15px;
    font-size: 0.95rem;
    align-self: flex-start;
}
.dialog-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #ccc;
    box-shadow: none;
    transform: none;
}
.dialog-send-btn i { margin-right: 5px; }

/* Battle Actions dialog section styles */
.dialog-section {
    padding: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--color-input-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#dialog-input {
    min-height: 40px;
    max-height: 80px;
    padding: 10px;
    border-radius: 5px;
    resize: none;
    font-size: 0.95rem;
    font-family: inherit;
    background-color: var(--color-card-bg);
    color: var(--color-text);
    border: 1px solid var(--color-input-border);
}

.dialog-send-btn {
    background: linear-gradient(to right, var(--color-secondary), var(--color-primary));
    color: var(--color-text-light);
    padding: 8px 15px;
    font-size: 0.95rem;
    align-self: flex-start;
}

.dialog-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #ccc;
    box-shadow: none;
    transform: none;
}

.dialog-send-btn i {
    margin-right: 5px;
}

/* Dark mode adjustments for Battle Actions */
.skin-dark .health-bar-outer, .skin-multiverse .health-bar-outer, .skin-scp .health-bar-outer {
    background: #444;
}

.skin-dark .battle-log-container, .skin-multiverse .battle-log-container, .skin-scp .battle-log-container {
    background: var(--color-input-bg);
}

.skin-dark .action-log-opp, .skin-multiverse .action-log-opp, .skin-scp .action-log-opp {
    color: var(--color-text);
}

/* NEW: Pro Mode Footer Link */
.pro-mode-footer-link {
    cursor: pointer;
    text-decoration: underline;
}

/* NEW: Advanced Character Generation Modal */
.acg-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}
.acg-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}
.acg-modal-content {
    position: relative;
    max-width: 960px;
    width: 95%;
    max-height: 90vh;
    background: var(--color-card-bg);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    padding: 15px 20px 20px 20px;
    z-index: 9001;
    overflow-y: auto;
}
.acg-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.acg-close-btn {
    background: transparent;
    color: var(--color-text);
    font-size: 1.5rem;
    padding: 4px 8px;
}
.acg-modal-body {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.acg-column {
    flex: 1;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.acg-column label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
}
.acg-column input[type="text"],
.acg-column textarea {
    padding: 8px;
    border-radius: 5px;
    border: 1px solid var(--color-input-border);
    background: var(--color-card-bg);
    color: var(--color-text);
    font-size: 0.9rem;
}
.acg-column textarea {
    resize: vertical;
}
.acg-stat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}
.acg-stat-row span:first-child {
    min-width: 90px;
}
.acg-stat-row input[type="range"] {
    flex: 1;
}
.acg-stat-row span:last-child {
    width: 24px;
    text-align: right;
}
.acg-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}
.acg-actions button {
    width: 100%;
}
.acg-actions button:hover {
    box-shadow: 0 3px 10px rgba(156, 39, 176, 0.3);
}
.acg-status {
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--color-secondary);
}

/* NEW: ACG Matchups List */
.acg-matchups-list {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.acg-matchup-item {
    padding: 6px 8px;
    border-radius: 5px;
    background: var(--color-input-bg);
    border: 1px solid var(--color-input-border);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.acg-matchup-item:hover {
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-card-bg));
    transform: translateY(-1px);
}

/* NEW: ACG Matchup Modal */
.acg-matchup-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9100;
}

.acg-matchup-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.acg-matchup-modal-content {
    position: relative;
    width: 90%;
    max-width: 480px;
    background: var(--color-card-bg);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    padding: 15px 18px 18px 18px;
    z-index: 9101;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.acg-matchup-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.acg-matchup-modal-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.acg-matchup-modal-body textarea {
    width: 100%;
    padding: 6px 8px;
    border-radius: 5px;
    border: 1px solid var(--color-input-border);
    background: var(--color-card-bg);
    color: var(--color-text);
    font-size: 0.9rem;
    resize: vertical;
}

.acg-matchup-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.acg-matchup-modal-footer button {
    padding: 8px 14px;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .acg-matchup-modal-content {
        width: 95%;
        max-width: 95%;
    }
}

/* NEW: Pro Mode badges/buttons */
.pro-mode-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: bold;
    background: linear-gradient(to right, var(--color-accent), var(--color-secondary));
    color: var(--color-text-light);
}

/* NEW: Pro Mode "Analyze Fully" result */
.pro-analysis-block {
    margin-top: 10px;
    padding: 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--color-input-bg), var(--color-card-bg));
    border-left: 4px solid var(--color-accent);
    font-size: 0.9rem;
}
.pro-analysis-block h4 {
    margin-bottom: 6px;
    color: var(--color-primary);
}

/* NEW: Archive private flag */
.char-private-flag {
    font-size: 0.75rem;
    color: #f44336;
    font-weight: 600;
}

/* Mobile adjustments for ACG modal */
@media (max-width: 768px) {
    .acg-modal-content {
        max-width: 100%;
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    .acg-modal-body {
        flex-direction: column;
    }
}

/* NEW: Toast Notification Styles */
#toast-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    pointer-events: none; /* Allows clicks to pass through if toast isn't fully covering */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.toast {
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    margin-bottom: 10px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    transform: translateY(20px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    min-width: 200px;
    text-align: center;
}

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

/* NEW: Clip / Video Simulation Styles */
.generate-clip-btn {
    margin-top: 10px;
    background: linear-gradient(to right, var(--color-accent), var(--color-primary));
    padding: 8px 16px;
    font-size: 0.9rem;
}

.clip-player {
    margin-top: 15px;
    padding: 15px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--color-input-bg), var(--color-card-bg));
    box-shadow: 0 2px 8px var(--color-card-shadow);
}

.clip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.clip-title {
    font-weight: 600;
    color: var(--color-primary);
}

.clip-screen {
    background: #000;
    color: #0fef0f;
    font-family: monospace;
    border-radius: 6px;
    min-height: 120px;
    max-height: 220px;
    padding: 10px;
    overflow: hidden;
    position: relative;
}

.clip-line {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.clip-line.visible {
    opacity: 1;
    transform: translateY(0);
}

.clip-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    gap: 10px;
}

.clip-play-btn {
    padding: 6px 14px;
    font-size: 0.85rem;
}

.clip-status {
    font-size: 0.8rem;
    color: #666;
}

/* Mobile tweaks for clip player */
@media (max-width: 768px) {
    .clip-screen {
        min-height: 100px;
        max-height: 180px;
        font-size: 0.85rem;
    }
}