import { createTheme, responsiveFontSizes } from '@mui/material/styles';

let theme = createTheme({
    palette: {
        mode: 'dark',
        primary: {
            main: '#35C2D4',
            light: '#73D7E3',
            dark: '#1B98A8',
            contrastText: '#061017',
        },
        secondary: {
            main: '#9AA7BA',
            light: '#C4CEDB',
            dark: '#6E7C92',
            contrastText: '#09101A',
        },
        background: {
            default: '#090C12',
            paper: '#121926',
        },
        text: {
            primary: '#E8EDF5',
            secondary: '#9DA9BC',
        },
        divider: 'rgba(194, 207, 228, 0.16)',
        error: {
            main: '#E36C61',
        },
        warning: {
            main: '#E3A34B',
        },
        success: {
            main: '#53C18A',
        },
        info: {
            main: '#35C2D4',
        },
    },
    shape: {
        borderRadius: 12,
    },
    typography: {
        fontFamily: [
            'Helvetica Neue',
            'Helvetica',
            'Arial',
            'sans-serif'
        ].join(','),
        h1: {
            fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
            fontWeight: 1500,
        },
        h2: {
            fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
            fontWeight: 200,
        },
        h3: {
            fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
            fontWeight: 250,
        },
        h4: {
            fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
            fontWeight: 300,
            letterSpacing: '0.01em',
        },
        h5: {
            fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
            fontWeight: 350,
            letterSpacing: '0.01em',
        },
        h6: {
            fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
            fontWeight: 400,
        },
        body1: {
            fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
            fontWeight: 300,
        },
        body2: {
            fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
            fontWeight: 300,
        },
        button: {
            fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
            fontWeight: 400,
            letterSpacing: '0.01em',
        },
    },
    components: {
        MuiCssBaseline: {
            styleOverrides: {
                ':root': {
                    colorScheme: 'dark',
                },
                body: {
                    margin: 0,
                    minHeight: '100vh',
                    backgroundColor: '#090C12',
                    backgroundImage: 'radial-gradient(1400px 700px at 8% -10%, rgba(53, 194, 212, 0.16), transparent 55%), radial-gradient(900px 500px at 92% -20%, rgba(83, 193, 138, 0.12), transparent 60%), linear-gradient(160deg, #090C12 0%, #0D121B 45%, #0A0F16 100%)',
                    color: '#E8EDF5',
                },
                '#root': {
                    minHeight: '100vh',
                },
                '*::-webkit-scrollbar': {
                    width: '10px',
                    height: '10px',
                },
                '*::-webkit-scrollbar-track': {
                    background: 'rgba(157, 169, 188, 0.14)',
                    borderRadius: '999px',
                },
                '*::-webkit-scrollbar-thumb': {
                    background: 'rgba(157, 169, 188, 0.45)',
                    borderRadius: '999px',
                    border: '2px solid rgba(0, 0, 0, 0)',
                    backgroundClip: 'padding-box',
                    '&:hover': {
                        background: 'rgba(157, 169, 188, 0.62)',
                    },
                },
                '*::-webkit-scrollbar-corner': {
                    background: 'rgba(157, 169, 188, 0.12)',
                },
                '*': {
                    scrollbarWidth: 'thin',
                    scrollbarColor: 'rgba(157, 169, 188, 0.45) rgba(157, 169, 188, 0.14)',
                },
            },
        },
        MuiPaper: {
            styleOverrides: {
                root: {
                    backgroundColor: '#121926',
                    backgroundImage: 'linear-gradient(180deg, rgba(20, 27, 40, 0.92) 0%, rgba(15, 22, 34, 0.95) 100%)',
                    border: '1px solid rgba(194, 207, 228, 0.14)',
                    boxShadow: '0 18px 32px rgba(4, 8, 14, 0.42)',
                    backdropFilter: 'blur(8px)',
                },
            },
        },
        MuiCard: {
            styleOverrides: {
                root: {
                    backgroundColor: '#111826',
                    backgroundImage: 'linear-gradient(180deg, rgba(18, 25, 38, 0.98) 0%, rgba(15, 22, 34, 0.96) 100%)',
                    border: '1px solid rgba(194, 207, 228, 0.14)',
                    boxShadow: '0 10px 18px rgba(4, 8, 14, 0.3)',
                    transition: 'border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease',
                    '&:hover': {
                        borderColor: 'rgba(115, 215, 227, 0.3)',
                        boxShadow: '0 16px 30px rgba(4, 8, 14, 0.46)',
                        transform: 'translateY(-1px)',
                    },
                },
            },
        },
        MuiButton: {
            styleOverrides: {
                root: {
                    textTransform: 'none',
                    borderRadius: 10,
                    fontWeight: 600,
                    paddingInline: 16,
                    display: 'inline-flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    lineHeight: 1.2,
                    '& .MuiButton-startIcon, & .MuiButton-endIcon': {
                        display: 'inline-flex',
                        alignItems: 'center',
                    },
                    transition: 'transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease',
                },
                contained: {
                    boxShadow: '0 8px 18px rgba(6, 10, 18, 0.46)',
                    '&:hover': {
                        boxShadow: '0 12px 22px rgba(6, 10, 18, 0.58)',
                        transform: 'translateY(-1px)',
                    },
                },
                containedPrimary: {
                    backgroundImage: 'linear-gradient(135deg, #35C2D4 0%, #2AA9B9 55%, #228E9D 100%)',
                },
                containedError: {
                    backgroundImage: 'linear-gradient(135deg, #E36C61 0%, #CF5A4E 100%)',
                },
                outlined: {
                    borderColor: 'rgba(157, 169, 188, 0.4)',
                    '&:hover': {
                        borderColor: '#35C2D4',
                        backgroundColor: 'rgba(53, 194, 212, 0.08)',
                    },
                },
            },
        },
        MuiInputBase: {
            styleOverrides: {
                root: {
                    '&:not(.MuiInputBase-multiline)': {
                        alignItems: 'center',
                    },
                },
                input: {
                    lineHeight: 1.4,
                },
            },
        },
        MuiTextField: {
            styleOverrides: {
                root: {
                    '& .MuiOutlinedInput-root': {
                        backgroundColor: 'rgba(10, 15, 23, 0.84)',
                        '& fieldset': {
                            borderColor: 'rgba(157, 169, 188, 0.3)',
                        },
                        '&:hover fieldset': {
                            borderColor: 'rgba(157, 169, 188, 0.55)',
                        },
                        '&.Mui-focused fieldset': {
                            borderColor: '#35C2D4',
                        },
                    },
                },
            },
        },
        MuiSelect: {
            styleOverrides: {
                root: {
                    backgroundColor: 'rgba(10, 15, 23, 0.84)',
                    '& .MuiOutlinedInput-notchedOutline': {
                        borderColor: 'rgba(157, 169, 188, 0.3)',
                    },
                    '&:hover .MuiOutlinedInput-notchedOutline': {
                        borderColor: 'rgba(157, 169, 188, 0.55)',
                    },
                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                        borderColor: '#35C2D4',
                    },
                },
                select: {
                    display: 'flex',
                    alignItems: 'center',
                },
            },
        },
        MuiMenuItem: {
            styleOverrides: {
                root: {
                    backgroundColor: '#121926',
                    '&:hover': {
                        backgroundColor: 'rgba(53, 194, 212, 0.08)',
                    },
                    '&.Mui-selected': {
                        backgroundColor: 'rgba(53, 194, 212, 0.14)',
                        '&:hover': {
                            backgroundColor: 'rgba(53, 194, 212, 0.2)',
                        },
                    },
                },
            },
        },
        MuiChip: {
            styleOverrides: {
                root: {
                    backgroundColor: 'rgba(157, 169, 188, 0.16)',
                    color: '#E8EDF5',
                    border: '1px solid rgba(157, 169, 188, 0.24)',
                    '&.MuiChip-colorPrimary': {
                        backgroundColor: 'rgba(53, 194, 212, 0.2)',
                        color: '#C8F3F9',
                    },
                },
                outlined: {
                    borderColor: 'rgba(157, 169, 188, 0.4)',
                    '&.MuiChip-colorPrimary': {
                        borderColor: '#35C2D4',
                        color: '#73D7E3',
                    },
                },
            },
        },
        MuiAccordion: {
            styleOverrides: {
                root: {
                    backgroundColor: 'rgba(12, 18, 28, 0.7)',
                    border: '1px solid rgba(194, 207, 228, 0.16)',
                    borderRadius: 12,
                    overflow: 'hidden',
                    '&:before': {
                        display: 'none',
                    },
                    '&.Mui-expanded': {
                        margin: 0,
                    },
                },
            },
        },
        MuiAccordionSummary: {
            styleOverrides: {
                root: {
                    backgroundColor: 'rgba(15, 22, 34, 0.8)',
                    borderRadius: 12,
                    minHeight: 44,
                    '& .MuiAccordionSummary-content': {
                        margin: '10px 0',
                        alignItems: 'center',
                    },
                    '&.Mui-expanded': {
                        minHeight: 44,
                    },
                    '&.Mui-expanded .MuiAccordionSummary-content': {
                        margin: '10px 0',
                    },
                    '&:hover': {
                        backgroundColor: 'rgba(19, 28, 42, 0.9)',
                    },
                },
            },
        },
        MuiDialog: {
            styleOverrides: {
                paper: {
                    backgroundColor: '#121926',
                    backgroundImage: 'linear-gradient(180deg, rgba(20, 27, 40, 0.98) 0%, rgba(14, 21, 33, 0.98) 100%)',
                    border: '1px solid rgba(194, 207, 228, 0.18)',
                    borderRadius: 14,
                    boxShadow: '0 28px 48px rgba(4, 8, 14, 0.6)',
                },
            },
        },
        MuiDialogTitle: {
            styleOverrides: {
                root: {
                    backgroundColor: 'rgba(14, 21, 33, 0.8)',
                    borderBottom: '1px solid rgba(194, 207, 228, 0.15)',
                    color: '#F4F7FC',
                    fontWeight: 600,
                    fontSize: '1.15rem',
                },
            },
        },
        MuiDialogContent: {
            styleOverrides: {
                root: {
                    backgroundColor: 'rgba(14, 21, 33, 0.64)',
                    color: '#CCD5E3',
                },
            },
        },
        MuiDialogActions: {
            styleOverrides: {
                root: {
                    backgroundColor: 'rgba(14, 21, 33, 0.72)',
                    borderTop: '1px solid rgba(194, 207, 228, 0.15)',
                    padding: '14px 20px',
                    gap: 8,
                },
            },
        },
        MuiListItem: {
            styleOverrides: {
                root: {
                    '&:hover': {
                        backgroundColor: 'rgba(53, 194, 212, 0.08)',
                    },
                    '&.Mui-selected': {
                        backgroundColor: 'rgba(53, 194, 212, 0.14)',
                        '&:hover': {
                            backgroundColor: 'rgba(53, 194, 212, 0.2)',
                        },
                    },
                },
            },
        },
        MuiCheckbox: {
            styleOverrides: {
                root: {
                    color: '#9AA7BA',
                    '&.Mui-checked': {
                        color: '#35C2D4',
                    },
                    '&:hover': {
                        backgroundColor: 'rgba(53, 194, 212, 0.08)',
                    },
                },
            },
        },
        MuiFormControlLabel: {
            styleOverrides: {
                label: {
                    color: '#CCD5E3',
                    fontSize: '0.875rem',
                },
            },
        },
        MuiSlider: {
            styleOverrides: {
                root: {
                    color: '#35C2D4',
                },
                rail: {
                    backgroundColor: 'rgba(157, 169, 188, 0.24)',
                },
                track: {
                    backgroundColor: '#35C2D4',
                    border: 0,
                },
                thumb: {
                    backgroundColor: '#74DEE9',
                    '&:hover': {
                        boxShadow: '0 0 0 8px rgba(53, 194, 212, 0.2)',
                    },
                },
            },
        },
        MuiLinearProgress: {
            styleOverrides: {
                root: {
                    backgroundColor: 'rgba(157, 169, 188, 0.2)',
                },
                bar: {
                    backgroundColor: '#35C2D4',
                },
            },
        },
        MuiCircularProgress: {
            styleOverrides: {
                root: {
                    color: '#35C2D4',
                },
            },
        },
        MuiTabs: {
            styleOverrides: {
                root: {
                    '& .MuiTabs-indicator': {
                        backgroundColor: '#35C2D4',
                    },
                },
            },
        },
        MuiTab: {
            styleOverrides: {
                root: {
                    color: '#9DA9BC',
                    '&.Mui-selected': {
                        color: '#35C2D4',
                    },
                    '&:hover': {
                        color: '#E8EDF5',
                    },
                },
            },
        },
        MuiBackdrop: {
            styleOverrides: {
                root: {
                    backgroundColor: 'rgba(5, 9, 16, 0.84)',
                    backdropFilter: 'blur(4px)',
                },
            },
        },
        MuiDivider: {
            styleOverrides: {
                root: {
                    borderColor: 'rgba(194, 207, 228, 0.16)',
                },
            },
        },
        MuiIconButton: {
            styleOverrides: {
                root: {
                    color: '#9DA9BC',
                    '&:hover': {
                        backgroundColor: 'rgba(53, 194, 212, 0.1)',
                        color: '#73D7E3',
                    },
                },
            },
        },
        MuiContainer: {
            styleOverrides: {
                root: {
                    backgroundColor: 'transparent',
                    background: 'transparent',
                },
            },
        },
    },
});

theme = responsiveFontSizes(theme, {
    breakpoints: ['sm', 'md', 'lg'],
    factor: 2.4,
});

export const lightTheme = createTheme(theme, {
    palette: {
        mode: 'light',
        primary: {
            main: '#1497A8',
            light: '#4CBCCA',
            dark: '#0F7482',
            contrastText: '#F7FDFF',
        },
        secondary: {
            main: '#64748B',
            light: '#93A3B8',
            dark: '#475569',
            contrastText: '#F8FAFC',
        },
        background: {
            default: '#F5F9FC',
            paper: '#FFFFFF',
        },
        text: {
            primary: '#0F172A',
            secondary: '#475569',
            disabled: 'rgba(0, 0, 0, 0.38)',
        },
        action: {
            active: 'rgba(0, 0, 0, 0.54)',
            hover: 'rgba(0, 0, 0, 0.04)',
            selected: 'rgba(0, 0, 0, 0.08)',
            disabled: 'rgba(0, 0, 0, 0.26)',
            disabledBackground: 'rgba(0, 0, 0, 0.12)',
        },
        divider: 'rgba(15, 23, 42, 0.14)',
        error: {
            main: '#DC5B57',
        },
        warning: {
            main: '#D08C30',
        },
        success: {
            main: '#2E9E63',
        },
        info: {
            main: '#1497A8',
        },
    },
    components: {
        MuiCssBaseline: {
            styleOverrides: {
                ':root': {
                    colorScheme: 'light',
                },
                body: {
                    margin: 0,
                    minHeight: '100vh',
                    backgroundColor: '#F5F9FC',
                    backgroundImage: 'radial-gradient(1400px 700px at 8% -10%, rgba(20, 151, 168, 0.14), transparent 55%), radial-gradient(900px 500px at 92% -20%, rgba(46, 158, 99, 0.1), transparent 60%), linear-gradient(160deg, #F6FAFD 0%, #EFF5FA 45%, #F8FBFE 100%)',
                    color: '#0F172A',
                },
                '#root': {
                    minHeight: '100vh',
                },
                '*::-webkit-scrollbar-track': {
                    background: 'rgba(100, 116, 139, 0.12)',
                    borderRadius: '999px',
                },
                '*::-webkit-scrollbar-thumb': {
                    background: 'rgba(100, 116, 139, 0.38)',
                    borderRadius: '999px',
                    '&:hover': {
                        background: 'rgba(100, 116, 139, 0.52)',
                    },
                },
                '*::-webkit-scrollbar-corner': {
                    background: 'rgba(100, 116, 139, 0.1)',
                },
                '*': {
                    scrollbarWidth: 'thin',
                    scrollbarColor: 'rgba(100, 116, 139, 0.38) rgba(100, 116, 139, 0.12)',
                },
            },
        },
        MuiPaper: {
            styleOverrides: {
                root: {
                    backgroundColor: '#FFFFFF',
                    backgroundImage: 'linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.98) 100%)',
                    border: '1px solid rgba(15, 23, 42, 0.12)',
                    boxShadow: '0 14px 26px rgba(15, 23, 42, 0.08)',
                },
            },
        },
        MuiCard: {
            styleOverrides: {
                root: {
                    backgroundColor: '#FFFFFF',
                    backgroundImage: 'linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 251, 255, 0.99) 100%)',
                    border: '1px solid rgba(15, 23, 42, 0.12)',
                    boxShadow: '0 10px 18px rgba(15, 23, 42, 0.08)',
                    '&:hover': {
                        borderColor: 'rgba(20, 151, 168, 0.32)',
                        boxShadow: '0 16px 30px rgba(15, 23, 42, 0.12)',
                    },
                },
            },
        },
        MuiButton: {
            styleOverrides: {
                contained: {
                    boxShadow: '0 8px 18px rgba(20, 151, 168, 0.22)',
                    '&:hover': {
                        boxShadow: '0 12px 24px rgba(20, 151, 168, 0.28)',
                    },
                },
                containedPrimary: {
                    backgroundImage: 'linear-gradient(135deg, #1497A8 0%, #1AAABC 55%, #107A88 100%)',
                },
                containedError: {
                    backgroundImage: 'linear-gradient(135deg, #DC5B57 0%, #CB4B45 100%)',
                },
                outlined: {
                    borderColor: 'rgba(100, 116, 139, 0.32)',
                    '&:hover': {
                        borderColor: '#1497A8',
                        backgroundColor: 'rgba(20, 151, 168, 0.08)',
                    },
                },
            },
        },
        MuiTextField: {
            styleOverrides: {
                root: {
                    '& .MuiOutlinedInput-root': {
                        backgroundColor: 'rgba(255, 255, 255, 0.92)',
                        '& fieldset': {
                            borderColor: 'rgba(100, 116, 139, 0.28)',
                        },
                        '&:hover fieldset': {
                            borderColor: 'rgba(100, 116, 139, 0.5)',
                        },
                        '&.Mui-focused fieldset': {
                            borderColor: '#1497A8',
                        },
                    },
                },
            },
        },
        MuiSelect: {
            styleOverrides: {
                root: {
                    backgroundColor: 'rgba(255, 255, 255, 0.92)',
                    '& .MuiOutlinedInput-notchedOutline': {
                        borderColor: 'rgba(100, 116, 139, 0.28)',
                    },
                    '&:hover .MuiOutlinedInput-notchedOutline': {
                        borderColor: 'rgba(100, 116, 139, 0.5)',
                    },
                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                        borderColor: '#1497A8',
                    },
                },
            },
        },
        MuiMenuItem: {
            styleOverrides: {
                root: {
                    backgroundColor: '#FFFFFF',
                    '&:hover': {
                        backgroundColor: 'rgba(20, 151, 168, 0.08)',
                    },
                    '&.Mui-selected': {
                        backgroundColor: 'rgba(20, 151, 168, 0.14)',
                        '&:hover': {
                            backgroundColor: 'rgba(20, 151, 168, 0.2)',
                        },
                    },
                },
            },
        },
        MuiChip: {
            styleOverrides: {
                root: {
                    backgroundColor: 'rgba(100, 116, 139, 0.12)',
                    color: '#0F172A',
                    border: '1px solid rgba(100, 116, 139, 0.24)',
                },
            },
        },
        MuiAccordion: {
            styleOverrides: {
                root: {
                    backgroundColor: 'rgba(255, 255, 255, 0.82)',
                    border: '1px solid rgba(15, 23, 42, 0.12)',
                    borderRadius: 12,
                    overflow: 'hidden',
                    '&:before': {
                        display: 'none',
                    },
                    '&.Mui-expanded': {
                        margin: 0,
                    },
                },
            },
        },
        MuiAccordionSummary: {
            styleOverrides: {
                root: {
                    backgroundColor: 'rgba(248, 251, 255, 0.95)',
                    borderRadius: 12,
                    '&:hover': {
                        backgroundColor: 'rgba(239, 245, 250, 1)',
                    },
                },
            },
        },
        MuiDialog: {
            styleOverrides: {
                paper: {
                    backgroundColor: '#FFFFFF',
                    backgroundImage: 'linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(246, 250, 254, 0.99) 100%)',
                    border: '1px solid rgba(15, 23, 42, 0.12)',
                    boxShadow: '0 28px 48px rgba(15, 23, 42, 0.16)',
                },
            },
        },
        MuiDialogTitle: {
            styleOverrides: {
                root: {
                    backgroundColor: 'rgba(246, 250, 254, 0.98)',
                    borderBottom: '1px solid rgba(15, 23, 42, 0.1)',
                    color: '#0F172A',
                },
            },
        },
        MuiDialogContent: {
            styleOverrides: {
                root: {
                    backgroundColor: 'rgba(255, 255, 255, 0.98)',
                    color: '#334155',
                },
            },
        },
        MuiDialogActions: {
            styleOverrides: {
                root: {
                    backgroundColor: 'rgba(246, 250, 254, 0.98)',
                    borderTop: '1px solid rgba(15, 23, 42, 0.1)',
                },
            },
        },
        MuiListItem: {
            styleOverrides: {
                root: {
                    '&:hover': {
                        backgroundColor: 'rgba(53, 194, 212, 0.08)',
                    },
                    '&.Mui-selected': {
                        backgroundColor: 'rgba(53, 194, 212, 0.14)',
                        '&:hover': {
                            backgroundColor: 'rgba(53, 194, 212, 0.2)',
                        },
                    },
                },
            },
        },
        MuiCheckbox: {
            styleOverrides: {
                root: {
                    color: '#64748B',
                    '&.Mui-checked': {
                        color: '#1497A8',
                    },
                    '&:hover': {
                        backgroundColor: 'rgba(20, 151, 168, 0.08)',
                    },
                },
            },
        },
        MuiFormControlLabel: {
            styleOverrides: {
                label: {
                    color: '#334155',
                },
            },
        },
        MuiSlider: {
            styleOverrides: {
                root: {
                    color: '#1497A8',
                },
                rail: {
                    backgroundColor: 'rgba(100, 116, 139, 0.24)',
                },
                track: {
                    backgroundColor: '#1497A8',
                    border: 0,
                },
                thumb: {
                    backgroundColor: '#4CBCCA',
                    '&:hover': {
                        boxShadow: '0 0 0 8px rgba(20, 151, 168, 0.2)',
                    },
                },
            },
        },
        MuiLinearProgress: {
            styleOverrides: {
                root: {
                    backgroundColor: 'rgba(100, 116, 139, 0.2)',
                },
                bar: {
                    backgroundColor: '#1497A8',
                },
            },
        },
        MuiCircularProgress: {
            styleOverrides: {
                root: {
                    color: '#1497A8',
                },
            },
        },
        MuiTabs: {
            styleOverrides: {
                root: {
                    '& .MuiTabs-indicator': {
                        backgroundColor: '#1497A8',
                    },
                },
            },
        },
        MuiTab: {
            styleOverrides: {
                root: {
                    color: '#64748B',
                    '&.Mui-selected': {
                        color: '#1497A8',
                    },
                    '&:hover': {
                        color: '#0F172A',
                    },
                },
            },
        },
        MuiBackdrop: {
            styleOverrides: {
                root: {
                    backgroundColor: 'rgba(15, 23, 42, 0.38)',
                    backdropFilter: 'blur(4px)',
                },
            },
        },
        MuiDivider: {
            styleOverrides: {
                root: {
                    borderColor: 'rgba(15, 23, 42, 0.14)',
                },
            },
        },
        MuiIconButton: {
            styleOverrides: {
                root: {
                    color: '#64748B',
                    '&:hover': {
                        backgroundColor: 'rgba(20, 151, 168, 0.1)',
                        color: '#1497A8',
                    },
                },
            },
        },
    },
});

export const appStyles = {
    root: {
        minHeight: '100vh',
        background: 'transparent',
        backgroundColor: 'transparent',
        overflow: 'visible',
        position: 'relative',
        display: 'flex',
        flexDirection: 'column',
    },
    container: (showWelcomePage) => ({
        py: { xs: 1, sm: 1.5, md: 2.5 },
        px: { xs: 0.75, sm: 1.25, md: 2.5 },
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: 'transparent',
        background: 'transparent',
        overflow: 'visible',
        boxSizing: 'border-box',
        width: '100%',
        maxWidth: '100%',
        filter: showWelcomePage ? 'blur(8px)' : 'none',
        transition: 'filter 0.3s ease-in-out',
    }),
    headerRow: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: { xs: 'stretch', md: 'flex-start' },
        flexDirection: { xs: 'column', md: 'row' },
        gap: { xs: 1.25, sm: 1.75, md: 2 },
        mb: { xs: 1, sm: 1.5 },
    },
    headerBrand: {
        position: 'relative',
        display: 'flex',
        alignItems: 'center',
        gap: { xs: 1.25, sm: 2 },
        py: { xs: 0.25, sm: 0.5 },
    },
    logo: {
        width: 60,
        height: 60,
        backgroundImage: 'url(/fragmenta_icon_1024.png)',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        borderRadius: 2,
        border: '1px solid rgba(194, 207, 228, 0.22)',
        boxShadow: '0 10px 20px rgba(4, 8, 14, 0.36)',
        filter: 'drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3))',
    },
    title: {
        color: 'text.primary',
        fontFamily: '"Bitcount Single", "IBM Plex Mono", "JetBrains Mono", "Space Mono", "Courier New", monospace',
        fontWeight: 400,
        letterSpacing: '0.02em',
        textShadow: '0 2px 10px rgba(0, 0, 0, 0.6)',
    },
    headerActionsContainer: (isCompactLayout) => ({
        display: 'flex',
        alignItems: 'stretch',
        justifyContent: { xs: 'flex-start', md: 'flex-end' },
        gap: { xs: 1, sm: 1.5 },
        flexDirection: isCompactLayout ? 'column' : 'row',
        flexWrap: isCompactLayout ? 'wrap' : 'nowrap',
        width: { xs: '100%', md: 'auto' },
    }),
    headerActionsGrid: (isCompactLayout) => ({
        display: 'grid',
        gridTemplateColumns: isCompactLayout
            ? 'repeat(2, minmax(0, 1fr))'
            : 'repeat(2, 122px)',
        gap: { xs: 0.75, sm: 1 },
        justifyContent: 'flex-end',
        flex: isCompactLayout ? '1 1 auto' : '0 1 auto',
        width: isCompactLayout ? '100%' : 'auto',
    }),
    headerActionButton: {
        fontSize: { xs: '0.70rem', sm: '0.72rem' },
        height: { xs: 34, sm: 36 },
        minWidth: 0,
        width: '100%',
        px: { xs: 1, sm: 1.5 },
        '& .MuiButton-startIcon svg': {
            width: { xs: 14, sm: 15 },
            height: { xs: 14, sm: 15 },
        },
    },
    gpuCard: (isCompactLayout) => ({
        p: { xs: 1.25, sm: 1.75 },
        bgcolor: 'background.paper',
        borderRadius: 2.5,
        border: '1px solid',
        borderColor: 'divider',
        minWidth: isCompactLayout ? '100%' : 270,
        flexShrink: 0,
        position: 'relative',
        overflow: 'hidden',
        boxShadow: '0 16px 32px rgba(4, 8, 14, 0.44)',
    }),
    gpuUsageTrack: {
        position: 'relative',
        width: '100%',
        height: 6,
        bgcolor: 'rgba(157, 169, 188, 0.2)',
        borderRadius: 3,
        overflow: 'hidden',
    },
    gpuUsageFill: (width, color) => ({
        position: 'absolute',
        top: 0,
        left: 0,
        height: '100%',
        width,
        bgcolor: color,
        borderRadius: 3,
        transition: 'width 0.3s ease-in-out',
    }),
    emphasizedPrimaryBody2: {
        fontWeight: 'bold',
        color: 'primary.main',
    },
    advancedSettingsDetails: (muiTheme) => {
        const isDark = muiTheme.palette.mode === 'dark';
        return {
            backgroundColor: isDark
                ? 'rgba(10, 15, 23, 0.46)'
                : 'rgba(255, 255, 255, 0.82)',
            borderTop: isDark
                ? '1px solid rgba(194, 207, 228, 0.12)'
                : '1px solid rgba(15, 23, 42, 0.08)',
            borderBottomLeftRadius: 12,
            borderBottomRightRadius: 12,
            maxHeight: { xs: 'none', md: '400px' },
            overflowY: { xs: 'visible', md: 'auto' },
            overflowX: 'hidden',
            '&::-webkit-scrollbar': {
                width: '8px',
            },
            '&::-webkit-scrollbar-track': {
                background: isDark
                    ? 'rgba(157, 169, 188, 0.14)'
                    : 'rgba(100, 116, 139, 0.14)',
                borderRadius: '4px',
            },
            '&::-webkit-scrollbar-thumb': {
                background: isDark
                    ? 'rgba(157, 169, 188, 0.45)'
                    : 'rgba(100, 116, 139, 0.42)',
                borderRadius: '4px',
                '&:hover': {
                    background: isDark
                        ? 'rgba(157, 169, 188, 0.62)'
                        : 'rgba(100, 116, 139, 0.56)',
                },
            },
        };
    },
    mainLayout: {
        display: 'flex',
        flexDirection: { xs: 'column', md: 'row' },
        width: '100%',
        flex: 1,
        gap: { xs: 1, sm: 1.25, md: 1.5 },
        borderRadius: 3,
        minHeight: 0,
    },
    navPaper: {
        width: { xs: '100%', md: 64, lg: 220 },
        backgroundColor: 'background.paper',
        borderRadius: 2.5,
        overflow: 'hidden',
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
    },
    navigationTabs: (isCompactLayout, isIconOnly = false) => ({
        height: isCompactLayout ? 'auto' : '100%',
        p: { xs: 0.5, sm: 1 },
        gap: { xs: 0.25, sm: 0.5 },
        '& .MuiTabs-indicator': {
            display: 'none',
        },
        '& .MuiTab-root': {
            alignItems: 'center',
            justifyContent: (isCompactLayout || isIconOnly) ? 'center' : 'flex-start',
            textAlign: (isCompactLayout || isIconOnly) ? 'center' : 'left',
            minHeight: { xs: 40, sm: 46 },
            fontSize: { xs: '0.78rem', sm: '0.86rem' },
            fontWeight: 500,
            textTransform: 'none',
            color: 'text.secondary',
            borderRadius: 2,
            px: isIconOnly ? 0 : { xs: 1, sm: 1.5 },
            py: { xs: 0.75, sm: 1 },
            mx: isCompactLayout ? 0.25 : 0,
            minWidth: isIconOnly ? 0 : undefined,
            '& .MuiTab-iconWrapper': {
                marginBottom: '0 !important',
            },
            '&.Mui-selected': {
                color: 'primary.main',
                fontWeight: 600,
                backgroundColor: 'rgba(53, 194, 212, 0.16)',
                boxShadow: 'inset 0 0 0 1px rgba(115, 215, 227, 0.35)',
            },
            '&:hover': {
                color: 'text.primary',
                backgroundColor: 'rgba(53, 194, 212, 0.08)',
            },
        },
    }),
    mainContentPaper: (muiTheme) => ({
        flex: 1,
        backgroundColor: 'background.paper',
        borderRadius: 2.5,
        display: 'flex',
        flexDirection: 'column',
        minHeight: { xs: 'auto', md: 0 },
        overflow: 'visible',
        '& .MuiTypography-body1, & .MuiTypography-body2, & .MuiTypography-caption, & .MuiTypography-subtitle2': {
            fontSize: muiTheme.typography.body2.fontSize,
            lineHeight: muiTheme.typography.body2.lineHeight,
        },
        '& .MuiButton-startIcon svg, & .MuiButton-endIcon svg, & .MuiIconButton-root svg, & .MuiAccordionSummary-expandIconWrapper svg': {
            width: 20,
            height: 20,
        },
    }),
    elevatedInfoCard: (muiTheme) => {
        const isDark = muiTheme.palette.mode === 'dark';
        return {
            p: { xs: 1.5, sm: 2 },
            mb: 2,
            boxShadow: isDark
                ? '0 14px 28px rgba(4, 8, 14, 0.44)'
                : '0 14px 26px rgba(15, 23, 42, 0.1)',
            borderRadius: 2.5,
            border: isDark
                ? '1px solid rgba(194, 207, 228, 0.16)'
                : '1px solid rgba(15, 23, 42, 0.12)',
            background: isDark
                ? 'linear-gradient(160deg, rgba(17, 24, 37, 0.96) 0%, rgba(13, 20, 31, 0.92) 100%)'
                : 'linear-gradient(160deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 255, 0.98) 100%)',
            '&:hover': {
                boxShadow: isDark
                    ? '0 20px 34px rgba(4, 8, 14, 0.56)'
                    : '0 20px 34px rgba(15, 23, 42, 0.14)',
                transform: 'translateY(-1px)',
                transition: 'all 0.3s ease',
            },
            transition: 'all 0.3s ease',
        };
    },
    modelMissingAlert: {
        mt: 2,
        backgroundColor: 'rgba(219, 80, 68, 0)',
        border: '1px solid #DB5044',
        borderRadius: 2,
        '& .MuiAlert-icon': {
            color: '#DB5044',
        },
    },
    modelMissingLink: {
        fontWeight: 600,
        color: 'primary.main',
        textDecoration: 'none',
        '&:hover': {
            textDecoration: 'underline',
        },
    },
    headerActionButtonWithOpacity: (isEnabled) => ({
        fontSize: { xs: '0.70rem', sm: '0.72rem' },
        height: { xs: 34, sm: 36 },
        minWidth: 0,
        width: '100%',
        px: { xs: 1, sm: 1.5 },
        opacity: isEnabled ? 1 : 0.5,
        '& .MuiButton-startIcon svg': {
            width: { xs: 14, sm: 15 },
            height: { xs: 14, sm: 15 },
        },
    }),
    gpuHeaderRow: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        mb: 1,
    },
    gpuLabel: {
        fontWeight: 500,
    },
    gpuStatusGroup: {
        display: 'flex',
        alignItems: 'center',
        gap: 0.5,
    },
    gpuStatusDot: (status, animate = true) => ({
        width: 6,
        height: 6,
        borderRadius: '50%',
        bgcolor: status === 'good'
            ? 'success.main'
            : status === 'low'
                ? 'warning.main'
                : 'error.main',
        animation: animate ? 'pulse 2s infinite' : 'none',
        '@keyframes pulse': {
            '0%': { opacity: 1 },
            '50%': { opacity: 0.5 },
            '100%': { opacity: 1 },
        },
    }),
    gpuUsageWrap: {
        mb: 1.25,
    },
    gpuFooterRow: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    gpuFreeText: {
        fontWeight: 'bold',
    },
    centeredCaption: {
        display: 'block',
        textAlign: 'center',
    },
    centeredCaptionWithMargin: {
        display: 'block',
        textAlign: 'center',
        mt: 0.5,
    },
    dataProcessingGrid: {
        flex: 1,
        minHeight: 0,
        flexWrap: 'wrap',
        alignItems: 'stretch',
    },
    primaryPaneItem: {
        display: 'flex',
        flexDirection: 'column',
        minHeight: 0,
        overflow: 'visible',
    },
    primaryPaneContent: {
        flex: 1,
        overflow: 'visible',
        pr: { xs: 0, md: 1 },
    },
    secondaryPaneItem: {
        display: 'flex',
        flexDirection: 'column',
        overflow: 'visible',
    },
    secondaryPaneContent: {
        flex: 1,
        overflow: 'visible',
        pl: { xs: 0, md: 1 },
    },
    addRowButton: {
        mb: { xs: 2, sm: 3 },
    },
    sectionInfoAlert: {
        mb: 2,
    },
    recentFilesBlock: {
        mt: 1,
        minWidth: 0,
        overflowWrap: 'anywhere',
        wordBreak: 'break-word',
    },
    responsiveGrid: {
        height: 'auto',
        flexWrap: 'wrap',
    },
    formControlMarginBottom: {
        mb: 2,
    },
    fieldMarginBottom: {
        mb: 2,
    },
    fieldMarginBottomLarge: {
        mb: 3,
    },
    accordionMarginBottom: {
        mb: 2,
    },
    sliderRow: {
        display: 'flex',
        alignItems: 'center',
        gap: 2,
    },
    sliderFlexGrow: {
        flex: 1,
    },
    sliderInputSmall: {
        width: { xs: '72px', sm: '80px' },
    },
    sliderInputMedium: {
        width: { xs: '88px', sm: '100px' },
    },
    trainingActionRow: {
        display: 'flex',
        gap: { xs: 1.25, sm: 2 },
        flexDirection: { xs: 'column', sm: 'row' },
    },
    actionButtonFlexGrow: {
        flex: 1,
    },
    mediumWeightBodyText: {
        fontWeight: 500,
    },
    trainingMonitorWrap: {
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
    },
    trainingMonitorHeaderRow: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        mb: 1,
    },
    trainingMonitorTitle: {
        mb: 0,
    },
    trainingMonitorStatusInline: (muiTheme) => ({
        display: 'flex',
        alignItems: 'center',
        gap: 0.75,
        px: 1,
        py: 0.35,
        borderRadius: 999,
        border: '1px solid',
        borderColor: 'divider',
        backgroundColor: muiTheme.palette.mode === 'dark'
            ? 'rgba(10, 15, 23, 0.7)'
            : 'rgba(255, 255, 255, 0.9)',
    }),
    trainingMonitorStatusDot: (status, animate = false) => ({
        width: 8,
        height: 8,
        borderRadius: '50%',
        bgcolor: status === 'live'
            ? 'success.main'
            : status === 'error'
                ? 'error.main'
                : status === 'complete'
                    ? 'primary.main'
                    : 'text.secondary',
        animation: animate ? 'pulse 2s infinite' : 'none',
        '@keyframes pulse': {
            '0%': { opacity: 1 },
            '50%': { opacity: 0.5 },
            '100%': { opacity: 1 },
        },
    }),
    trainingMonitorStatusText: (status) => ({
        color: status === 'live'
            ? 'success.main'
            : status === 'error'
                ? 'error.main'
                : status === 'complete'
                    ? 'primary.main'
                    : 'text.secondary',
        fontWeight: 600,
        letterSpacing: '0.03em',
        textTransform: 'uppercase',
        fontSize: { xs: '0.64rem', sm: '0.7rem' },
        lineHeight: 1,
    }),
    generationModelRow: {
        display: 'flex',
        alignItems: 'center',
        gap: { xs: 1, sm: 2 },
        mb: 2,
    },
    refreshModelsButton: {
        minWidth: 40,
    },
    durationRow: {
        display: 'flex',
        alignItems: 'center',
        gap: { xs: 1, sm: 2 },
        mb: 2,
    },
    generatingWrap: {
        mb: 3,
    },
    generatingHeader: {
        display: 'flex',
        alignItems: 'center',
        mb: 1,
    },
    generatingSpinner: {
        mr: 1,
    },
    generatingProgress: {
        height: 8,
        borderRadius: 4,
    },
    generatingHint: {
        mt: 1,
        display: 'block',
    },
    generateButton: {
        mb: 2,
    },
    warningAlertTop: {
        mt: 2,
    },
    sectionCardHeader: {
        display: 'flex',
        alignItems: 'center',
        gap: 1,
        mb: 1.5,
    },
    sectionCardIcon: {
        display: 'inline-flex',
        color: 'text.primary',
        lineHeight: 0,
    },
    sectionCardTitle: {
        fontWeight: 500,
    },
    selectedModelCard: (muiTheme) => {
        const isDark = muiTheme.palette.mode === 'dark';
        return {
            p: { xs: 1.5, sm: 2 },
            mb: 2,
            boxShadow: isDark
                ? '0 14px 28px rgba(4, 8, 14, 0.44)'
                : '0 14px 26px rgba(15, 23, 42, 0.1)',
            borderRadius: 2.5,
            border: isDark
                ? '1px solid rgba(194, 207, 228, 0.16)'
                : '1px solid rgba(15, 23, 42, 0.12)',
            background: isDark
                ? 'linear-gradient(160deg, rgba(17, 24, 37, 0.96) 0%, rgba(13, 20, 31, 0.92) 100%)'
                : 'linear-gradient(160deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 255, 0.98) 100%)',
            '&:hover': {
                boxShadow: isDark
                    ? '0 20px 34px rgba(4, 8, 14, 0.56)'
                    : '0 20px 34px rgba(15, 23, 42, 0.14)',
                transform: 'translateY(-1px)',
                transition: 'all 0.3s ease',
            },
            transition: 'all 0.3s ease',
        };
    },
    boldBodyText: {
        fontWeight: 'bold',
    },
    selectedModelMetaText: {
        display: 'block',
        mt: 0.5,
    },
    unwrappedInfoWrap: {
        mt: 2,
    },
    dialogBodyText: {
        mt: 3,
    },
    dialogErrorText: {
        mt: 2,
    },
    modeToggleButton: (muiTheme) => {
        const isDark = muiTheme.palette.mode === 'dark';
        return {
            position: 'fixed',
            left: { xs: 12, sm: 16 },
            bottom: { xs: 58, sm: 66 },
            width: { xs: 38, sm: 42 },
            height: { xs: 38, sm: 42 },
            zIndex: 1350,
            border: isDark
                ? '1px solid rgba(194, 207, 228, 0.22)'
                : '1px solid rgba(15, 23, 42, 0.16)',
            background: isDark
                ? 'linear-gradient(145deg, rgba(18, 25, 38, 0.96) 0%, rgba(12, 19, 30, 0.96) 100%)'
                : 'linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 255, 0.98) 100%)',
            color: isDark ? 'primary.light' : 'primary.main',
            boxShadow: isDark
                ? '0 14px 24px rgba(4, 8, 14, 0.5)'
                : '0 14px 24px rgba(15, 23, 42, 0.14)',
            '&:hover': {
                background: isDark
                    ? 'linear-gradient(145deg, rgba(20, 28, 42, 1) 0%, rgba(14, 22, 34, 1) 100%)'
                    : 'linear-gradient(145deg, rgba(244, 250, 255, 1) 0%, rgba(236, 245, 252, 1) 100%)',
                transform: 'translateY(-1px)',
                boxShadow: isDark
                    ? '0 18px 28px rgba(4, 8, 14, 0.6)'
                    : '0 18px 28px rgba(15, 23, 42, 0.18)',
            },
        };
    },
    infoButton: (muiTheme) => {
        const isDark = muiTheme.palette.mode === 'dark';
        return {
            position: 'fixed',
            left: { xs: 12, sm: 16 },
            bottom: { xs: 12, sm: 16 },
            width: { xs: 38, sm: 42 },
            height: { xs: 38, sm: 42 },
            zIndex: 1350,
            border: isDark
                ? '1px solid rgba(194, 207, 228, 0.22)'
                : '1px solid rgba(15, 23, 42, 0.16)',
            background: isDark
                ? 'linear-gradient(145deg, rgba(18, 25, 38, 0.96) 0%, rgba(12, 19, 30, 0.96) 100%)'
                : 'linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 255, 0.98) 100%)',
            color: isDark ? 'primary.light' : 'primary.main',
            boxShadow: isDark
                ? '0 14px 24px rgba(4, 8, 14, 0.5)'
                : '0 14px 24px rgba(15, 23, 42, 0.14)',
            '&:hover': {
                background: isDark
                    ? 'linear-gradient(145deg, rgba(20, 28, 42, 1) 0%, rgba(14, 22, 34, 1) 100%)'
                    : 'linear-gradient(145deg, rgba(244, 250, 255, 1) 0%, rgba(236, 245, 252, 1) 100%)',
                transform: 'translateY(-1px)',
                boxShadow: isDark
                    ? '0 18px 28px rgba(4, 8, 14, 0.6)'
                    : '0 18px 28px rgba(15, 23, 42, 0.18)',
            },
        };
    },
    infoDialogTitleRow: {
        display: 'inline-flex',
        alignItems: 'center',
        gap: 1,
    },
    infoDialogIntro: {
        mt: 2.5,
        color: 'text.secondary',
    },
    infoDialogSectionTitle: {
        mt: 2.25,
        mb: 1,
        color: 'text.primary',
        fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
        fontWeight: 700,
        letterSpacing: '0.03em',
        textTransform: 'uppercase',
        fontSize: { xs: '0.7rem', sm: '0.74rem' },
    },
    infoDialogActionStack: {
        mt: 0.25,
        display: 'flex',
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'center',
        gap: 1,
    },
    infoDocButton: {
        fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
    },
};

export const tabPanelStyles = {
    root: {
        p: { xs: 1.25, md: 2 },
        background: 'transparent',
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
        minHeight: 0,
        overflow: 'visible',
    },
};

export const audioUploadRowStyles = {
    card: (muiTheme) => {
        const isDark = muiTheme.palette.mode === 'dark';
        return {
            mb: { xs: 1.5, sm: 2 },
            boxShadow: isDark
                ? '0 12px 24px rgba(4, 8, 14, 0.34)'
                : '0 12px 24px rgba(15, 23, 42, 0.1)',
            borderRadius: 2.2,
            border: isDark
                ? '1px solid rgba(194, 207, 228, 0.15)'
                : '1px solid rgba(15, 23, 42, 0.12)',
            background: isDark
                ? 'linear-gradient(160deg, rgba(17, 24, 37, 0.96) 0%, rgba(13, 20, 31, 0.92) 100%)'
                : 'linear-gradient(160deg, rgba(255, 255, 255, 0.99) 0%, rgba(245, 250, 255, 0.98) 100%)',
            '&:hover': {
                boxShadow: isDark
                    ? '0 16px 30px rgba(4, 8, 14, 0.46)'
                    : '0 16px 30px rgba(15, 23, 42, 0.14)',
                transform: 'translateY(-1px)',
                transition: 'all 0.3s ease',
            },
            transition: 'all 0.3s ease',
        };
    },
    cardContent: {
        p: { xs: 1.5, sm: 2 },
        '&:last-child': {
            pb: { xs: 1.5, sm: 2 },
        },
    },
    gridSpacing: { xs: 1.5, sm: 2 },
    uploadDropZone: (isDragActive) => (muiTheme) => {
        const isDark = muiTheme.palette.mode === 'dark';
        return {
            border: isDark
                ? '1.5px dashed rgba(194, 207, 228, 0.35)'
                : '1.5px dashed rgba(100, 116, 139, 0.34)',
            borderRadius: 2,
            p: { xs: 1.5, sm: 2 },
            textAlign: 'center',
            cursor: 'pointer',
            '&:hover': {
                borderColor: 'primary.main',
                backgroundColor: isDark
                    ? 'rgba(53, 194, 212, 0.08)'
                    : 'rgba(20, 151, 168, 0.08)',
            },
            backgroundColor: isDragActive
                ? (isDark ? 'rgba(53, 194, 212, 0.12)' : 'rgba(20, 151, 168, 0.12)')
                : (isDark ? 'rgba(10, 15, 23, 0.8)' : 'rgba(255, 255, 255, 0.9)'),
        };
    },
    hiddenInput: {
        display: 'none',
    },
    audioPreview: {
        width: '100%',
        marginTop: 8,
    },
    deleteGridItem: {
        display: 'flex',
        justifyContent: { xs: 'flex-end', sm: 'center' },
    },
    deleteIconButton: {
        alignSelf: { xs: 'center', sm: 'flex-start' },
    },
};

export const generatedFragmentsWindowStyles = {
    rootPaper: (muiTheme) => {
        const isDark = muiTheme.palette.mode === 'dark';
        return {
            p: 2,
            height: 240,
            display: 'flex',
            flexDirection: 'column',
            borderRadius: 2.5,
            borderColor: isDark
                ? 'rgba(194, 207, 228, 0.16)'
                : 'rgba(15, 23, 42, 0.12)',
            background: isDark
                ? 'linear-gradient(160deg, rgba(17, 24, 37, 0.94) 0%, rgba(13, 20, 31, 0.9) 100%)'
                : 'linear-gradient(160deg, rgba(255, 255, 255, 0.99) 0%, rgba(245, 250, 255, 0.98) 100%)',
            boxShadow: isDark
                ? '0 14px 28px rgba(4, 8, 14, 0.42)'
                : '0 14px 28px rgba(15, 23, 42, 0.1)',
        };
    },
    headerRow: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        mb: 2,
    },
    titleRow: {
        display: 'flex',
        alignItems: 'center',
        gap: 1,
        minWidth: 0,
    },
    titleIcon: {
        display: 'inline-flex',
        color: 'text.primary',
        lineHeight: 0,
    },
    titleText: {
        fontWeight: 500,
    },
    countText: {
        fontWeight: 600,
        minWidth: 20,
        textAlign: 'right',
    },
    emptyState: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%',
        color: 'text.secondary',
    },
    listRoot: (muiTheme) => {
        const isDark = muiTheme.palette.mode === 'dark';
        return {
            flex: 1,
            overflow: 'auto',
            maxHeight: 180,
            '& .MuiListItem-root': {
                border: '1px solid',
                borderColor: isDark
                    ? 'rgba(194, 207, 228, 0.16)'
                    : 'rgba(15, 23, 42, 0.12)',
                borderRadius: 1.5,
                mb: 1,
                backgroundColor: isDark
                    ? 'rgba(12, 18, 28, 0.62)'
                    : 'rgba(248, 251, 255, 0.9)',
                '&:last-child': {
                    mb: 0,
                },
            },
        };
    },
    listItem: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'stretch',
        py: 1,
    },
    fragmentRow: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        mb: 1,
    },
    fragmentMeta: {
        flex: 1,
        minWidth: 0,
    },
    fragmentPrompt: {
        fontWeight: 'bold',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        display: '-webkit-box',
        WebkitLineClamp: 2,
        WebkitBoxOrient: 'vertical',
    },
    fragmentActions: {
        display: 'flex',
        gap: 1,
        flexShrink: 0,
    },
    playPauseButton: (isPlaying) => (muiTheme) => ({
        border: '1px solid',
        borderColor: isPlaying
            ? 'primary.main'
            : (muiTheme.palette.mode === 'dark' ? 'rgba(194, 207, 228, 0.22)' : 'rgba(15, 23, 42, 0.2)'),
    }),
    hiddenAudio: {
        display: 'none',
    },
};

export const trainingMonitorStyles = {
    rootPaper: (muiTheme) => {
        const isDark = muiTheme.palette.mode === 'dark';
        return {
            p: 3,
            mb: 2,
            flex: 1,
            display: 'flex',
            flexDirection: 'column',
            boxShadow: isDark
                ? '0 16px 30px rgba(4, 8, 14, 0.48)'
                : '0 16px 30px rgba(15, 23, 42, 0.1)',
            borderRadius: 2.5,
            border: isDark
                ? '1px solid rgba(194, 207, 228, 0.16)'
                : '1px solid rgba(15, 23, 42, 0.12)',
            background: isDark
                ? 'linear-gradient(160deg, rgba(17, 24, 37, 0.96) 0%, rgba(13, 20, 31, 0.92) 100%)'
                : 'linear-gradient(160deg, rgba(255, 255, 255, 0.99) 0%, rgba(245, 250, 255, 0.98) 100%)',
            '&:hover': {
                boxShadow: isDark
                    ? '0 22px 38px rgba(4, 8, 14, 0.58)'
                    : '0 22px 38px rgba(15, 23, 42, 0.14)',
                transform: 'translateY(-1px)',
                transition: 'all 0.3s ease',
            },
            transition: 'all 0.3s ease',
        };
    },
    headerRow: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        flexWrap: 'wrap',
        gap: 1,
        mb: 2,
    },
    headerTitleWrap: {
        display: 'flex',
        alignItems: 'center',
        gap: 1,
    },
    headerIcon: {
        display: 'inline-flex',
        color: 'text.primary',
        lineHeight: 0,
    },
    headerTitle: {
        fontWeight: 500,
    },
    statusInline: (muiTheme) => ({
        display: 'flex',
        alignItems: 'center',
        gap: 0.75,
        px: 1,
        py: 0.35,
        borderRadius: 999,
        border: '1px solid',
        borderColor: 'divider',
        backgroundColor: muiTheme.palette.mode === 'dark'
            ? 'rgba(10, 15, 23, 0.7)'
            : 'rgba(255, 255, 255, 0.9)',
    }),
    statusDot: (status, animate = false) => ({
        width: 8,
        height: 8,
        borderRadius: '50%',
        bgcolor: status === 'live'
            ? 'success.main'
            : status === 'error'
                ? 'error.main'
                : status === 'complete'
                    ? 'primary.main'
                    : 'text.secondary',
        animation: animate ? 'pulse 2s infinite' : 'none',
        '@keyframes pulse': {
            '0%': { opacity: 1 },
            '50%': { opacity: 0.5 },
            '100%': { opacity: 1 },
        },
    }),
    statusText: (status) => ({
        color: status === 'live'
            ? 'success.main'
            : status === 'error'
                ? 'error.main'
                : status === 'complete'
                    ? 'primary.main'
                    : 'text.secondary',
        fontWeight: 600,
        letterSpacing: '0.03em',
        textTransform: 'uppercase',
        fontSize: { xs: '0.64rem', sm: '0.7rem' },
        lineHeight: 1,
    }),
    progressSection: {
        mb: 2,
    },
    progressHeader: {
        display: 'flex',
        justifyContent: 'space-between',
        mb: 1,
    },
    progressBar: {
        height: 8,
        borderRadius: 4,
    },
    deviceSection: {
        mb: 2,
    },
    deviceInfo: {
        fontSize: { xs: '0.74rem', sm: '0.8rem' },
        mt: 0.5,
    },
    metricsGrid: {
        mb: 2,
    },
    lossSection: {
        mb: 2,
    },
    lossChartBox: {
        height: 200,
        width: '100%',
    },
    errorAlert: {
        mb: 2,
    },
};

export const welcomePageStyles = {
    backdrop: (muiTheme) => {
        const isDark = muiTheme.palette.mode === 'dark';
        return {
            zIndex: 9999,
            background: isDark
                ? 'radial-gradient(1200px 600px at 8% -15%, rgba(53, 194, 212, 0.2), transparent 55%), radial-gradient(800px 500px at 92% 110%, rgba(83, 193, 138, 0.16), transparent 65%), linear-gradient(160deg, #090C12 0%, #0C1119 45%, #090D13 100%)'
                : 'radial-gradient(1200px 600px at 8% -15%, rgba(20, 151, 168, 0.16), transparent 55%), radial-gradient(800px 500px at 92% 110%, rgba(72, 171, 118, 0.14), transparent 65%), linear-gradient(160deg, #F4FAFF 0%, #EAF4FF 45%, #F8FCFF 100%)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            p: { xs: 2, md: 4 },
            cursor: 'pointer',
        };
    },
    panel: (muiTheme) => {
        const isDark = muiTheme.palette.mode === 'dark';
        return {
            textAlign: 'center',
            width: 'min(920px, 100%)',
            border: isDark
                ? '1px solid rgba(194, 207, 228, 0.2)'
                : '1px solid rgba(15, 23, 42, 0.12)',
            borderRadius: 4,
            background: isDark
                ? 'linear-gradient(170deg, rgba(19, 27, 41, 0.95) 0%, rgba(12, 19, 31, 0.96) 100%)'
                : 'linear-gradient(170deg, rgba(255, 255, 255, 0.98) 0%, rgba(242, 248, 255, 0.98) 100%)',
            boxShadow: isDark
                ? '0 32px 56px rgba(4, 8, 14, 0.64)'
                : '0 24px 46px rgba(15, 23, 42, 0.2)',
            backdropFilter: 'blur(10px)',
            px: { xs: 3, md: 7 },
            py: { xs: 5, md: 6 },
        };
    },
    logo: (muiTheme) => {
        const isDark = muiTheme.palette.mode === 'dark';
        return {
            width: { xs: 96, sm: 122 },
            height: { xs: 96, sm: 122 },
            backgroundImage: 'url(/fragmenta_icon_1024.png)',
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            borderRadius: 3,
            border: isDark
                ? '1px solid rgba(194, 207, 228, 0.24)'
                : '1px solid rgba(15, 23, 42, 0.12)',
            boxShadow: isDark
                ? '0 16px 28px rgba(4, 8, 14, 0.45)'
                : '0 12px 24px rgba(15, 23, 42, 0.22)',
            filter: isDark
                ? 'drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4))'
                : 'drop-shadow(0 6px 12px rgba(15, 23, 42, 0.22))',
            mx: 'auto',
            mb: 1.5,
        };
    },
    title: {
        fontFamily: '"Bitcount Single", "IBM Plex Mono", "JetBrains Mono", "Space Mono", "Courier New", monospace',
        fontWeight: 400,
        color: 'text.primary',
        mb: 1,
        fontSize: { xs: '2.5rem', sm: '3.5rem', md: '4rem' },
        letterSpacing: '0.02em',
    },
    overline: {
        color: 'primary.main',
        letterSpacing: { xs: '0.12em', md: '0.18em' },
        fontWeight: 700,
        fontSize: { xs: '0.62rem', sm: '0.7rem' },
    },
    footer: {
        color: 'text.secondary',
        opacity: 0.6,
        fontSize: { xs: '0.64rem', sm: '0.7rem' },
        marginTop: 5,
    },
    version: {
        color: 'text.secondary',
        opacity: 0.6,
        fontSize: { xs: '0.64rem', sm: '0.7rem' },
        fontStyle: 'italic',
    },
    ctaButton: {
        mt: 3,
        mb: 2,
        px: { xs: 3.25, md: 4.5 },
        py: { xs: 1.2, md: 1.5 },
        borderRadius: 2,
        textTransform: 'none',
        fontSize: { xs: '0.98rem', sm: '1.05rem', md: '1.1rem' },
        fontWeight: 500,
    },
};

export const checkpointManagerStyles = {
    root: {
        mt: 2,
        pt: 2,
        borderTop: '1px solid',
        borderColor: 'divider',
    },
    panelPaper: (muiTheme) => {
        const isDark = muiTheme.palette.mode === 'dark';
        return {
            p: 2,
            mb: 2,
            boxShadow: isDark
                ? '0 16px 30px rgba(4, 8, 14, 0.48)'
                : '0 16px 30px rgba(15, 23, 42, 0.1)',
            borderRadius: 2.5,
            border: isDark
                ? '1px solid rgba(194, 207, 228, 0.16)'
                : '1px solid rgba(15, 23, 42, 0.12)',
            background: isDark
                ? 'linear-gradient(160deg, rgba(17, 24, 37, 0.96) 0%, rgba(13, 20, 31, 0.92) 100%)'
                : 'linear-gradient(160deg, rgba(255, 255, 255, 0.99) 0%, rgba(245, 250, 255, 0.98) 100%)',
            '&:hover': {
                boxShadow: isDark
                    ? '0 22px 38px rgba(4, 8, 14, 0.58)'
                    : '0 22px 38px rgba(15, 23, 42, 0.14)',
                transform: 'translateY(-1px)',
                transition: 'all 0.3s ease',
            },
            transition: 'all 0.3s ease',
        };
    },
    checkpointsList: {
        mt: 1,
        display: 'grid',
        gap: 1,
    },
    checkpointCard: (muiTheme) => {
        const isDark = muiTheme.palette.mode === 'dark';
        return {
            mb: 1,
            p: 1.25,
            boxShadow: isDark
                ? '0 10px 20px rgba(4, 8, 14, 0.34)'
                : '0 10px 18px rgba(15, 23, 42, 0.08)',
            borderRadius: 1.75,
            border: isDark
                ? '1px solid rgba(194, 207, 228, 0.16)'
                : '1px solid rgba(15, 23, 42, 0.12)',
            background: isDark
                ? 'linear-gradient(180deg, rgba(18, 25, 38, 0.98) 0%, rgba(15, 22, 34, 0.96) 100%)'
                : 'linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 251, 255, 0.99) 100%)',
            '&:hover': {
                boxShadow: isDark
                    ? '0 14px 26px rgba(4, 8, 14, 0.44)'
                    : '0 16px 28px rgba(15, 23, 42, 0.12)',
                transform: 'translateY(-1px)',
                transition: 'all 0.2s ease',
            },
            transition: 'all 0.2s ease',
        };
    },
    checkpointRow: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 1,
    },
    checkpointInfo: {
        flex: 1,
    },
    checkpointName: {
        fontWeight: 600,
        display: 'flex',
        alignItems: 'center',
        flexWrap: 'wrap',
        gap: 0.75,
    },
    unwrappedChip: {
        fontSize: '0.7rem',
    },
    emptyText: {
        display: 'block',
        mt: 0.5,
    },
    metaNext: {
        ml: 1,
    },
    actions: {
        display: 'flex',
        gap: 1,
        flexWrap: 'wrap',
        justifyContent: 'flex-end',
    },
    errorAlert: {
        mt: 2,
    },
    deleteDialogText: {
        mt: 1.5,
    },
    snackbarAlert: {
        width: '100%',
    },
};

export const hfAuthDialogStyles = {
    checkingBox: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        my: 4,
    },
    checkingProgress: {
        mb: 2,
    },
    authStepBox: {
        mt: 2,
    },
    downloadStepBox: {
        mt: 2,
        textAlign: 'center',
    },
    downloadProgress: {
        mb: 2,
        height: 10,
        borderRadius: 5,
    },
    successStepBox: {
        mt: 2,
        textAlign: 'center',
    },
    stepper: {
        mb: 4,
    },
    errorAlert: {
        mb: 2,
    },
    loginSpinnerSize: 24,
};

export const modelUnwrapButtonStyles = {
    root: {
        mt: 1,
    },
    result: {
        mt: 0.5,
    },
    error: {
        color: '#DB5044',
        mt: 0.5,
    },
};

export const lossChartStyles = {
    padding: { top: 10, right: 16, bottom: 28, left: 44 },
    colors: {
        grid: '#2B3446',
        axis: '#9DA9BC',
        line: '#35C2D4',
        point: '#73D7E3',
        tooltipBg: '#111826',
        tooltipBorder: 'rgba(194, 207, 228, 0.2)',
        tooltipText: '#E8EDF5',
    },
    svg: {
        width: '100%',
        height: '100%',
    },
    axisFontSize: 10,
    tooltip: {
        width: 100,
        height: 34,
        rx: 4,
        textX: 6,
        timeY: 14,
        lossY: 28,
    },
};

// Shared visual tokens for the Performance page (panel, channels, MIDI menu).
// One source of truth for the size/spacing/height scale so similar elements
// match. The previous code carried 9+ distinct font sizes and 5+ letter
// spacings across these surfaces; anything new should pick from this set.
export const perfTokens = {
    fontSize: {
        knob: '0.58rem',   // knob labels, pan label, master peak readout
        small: '0.66rem',  // small labels: BPM unit, mute/solo, durationLabel, footer notes
        body: '0.72rem',   // primary text: buttons, dropdowns, prompt field, mapping rows
        badge: '0.78rem',  // section badges (MASTER, channel numbers)
    },
    letterSpacing: {
        wide: '0.08em',    // uppercase labels and badges
    },
    height: {
        compact: 26,       // primary compact controls (Link, MIDI, Q, BPM, transport, generate)
        sub: 22,           // small subordinate square buttons (mute, solo, loop)
    },
    // Sharp 2px radius is the deliberate Ableton-style accent on Link/MIDI.
    // Everything else lives on the MUI scale via shape.borderRadius (= 1.5).
};

export const performancePanelStyles = {
    root: {
        display: 'flex',
        flexDirection: 'column',
        gap: 1.5,
        width: '100%',
        minHeight: 0,
    },
    headerCard: {
        display: 'flex',
        alignItems: 'center',
        gap: 2,
        p: { xs: 1.25, sm: 1.75 },
        borderRadius: 2.5,
        border: '1px solid',
        borderColor: 'divider',
        background: 'linear-gradient(135deg, rgba(53, 194, 212, 0.08) 0%, rgba(159, 138, 230, 0.06) 100%)',
        flexWrap: { xs: 'wrap', md: 'nowrap' },
    },
    headerLeft: {
        display: 'flex',
        flexDirection: 'column',
        gap: 0.25,
        minWidth: 200,
        flex: '0 0 auto',
    },
    titleRow: {
        display: 'flex',
        alignItems: 'center',
        gap: 1,
        color: 'primary.main',
    },
    title: {
        fontWeight: 400,
        letterSpacing: '0.02em',
    },
    subtitle: {
        color: 'text.secondary',
        fontSize: perfTokens.fontSize.body,
    },
    headerPickers: {
        display: 'flex',
        gap: 1,
        flex: 1,
        minWidth: 0,
        flexWrap: { xs: 'wrap', sm: 'nowrap' },
    },
    headerModelPicker: {
        flex: 1,
        minWidth: 200,
        '& .MuiOutlinedInput-root': { borderRadius: 2 },
    },
    headerCheckpointPicker: {
        flex: 1,
        minWidth: 180,
        '& .MuiOutlinedInput-root': { borderRadius: 2 },
    },
    errorAlert: {
        borderRadius: 2,
    },
    channelsRow: {
        display: 'flex',
        gap: 1.5,
        alignItems: 'stretch',
        flexWrap: { xs: 'wrap', md: 'nowrap' },
    },
    channelsGrid: {
        display: 'grid',
        gridTemplateColumns: 'repeat(4, minmax(150px, 1fr))',
        gap: 1.25,
        flex: 1,
        minWidth: 0,
    },
    masterStrip: (color) => (theme) => ({
        display: 'flex',
        flexDirection: 'column',
        gap: 1.5,
        p: 1.25,
        borderRadius: 2.5,
        border: `1px solid ${color}55`,
        background: theme.palette.mode === 'dark'
            ? `linear-gradient(160deg, ${color}14 0%, rgba(13, 20, 31, 0.94) 70%)`
            : `linear-gradient(160deg, ${color}14 0%, ${theme.palette.background.paper} 70%)`,
        boxShadow: theme.palette.mode === 'dark'
            ? `0 8px 22px rgba(4, 8, 14, 0.44), inset 0 0 0 1px ${color}22`
            : `0 2px 8px rgba(0,0,0,0.1), inset 0 0 0 1px ${color}22`,
        width: { xs: '100%', md: 160 },
        flex: { xs: '1 1 100%', md: '0 0 160px' },
        minHeight: 0,
        overflow: 'hidden',
        boxSizing: 'border-box',
    }),
    masterHeader: (color) => ({
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 0.5,
        borderBottom: `1px solid ${color}33`,
        pb: 0.75,
        color,
    }),
    masterBadge: (color) => ({
        fontSize: perfTokens.fontSize.badge,
        fontWeight: 600,
        color,
        letterSpacing: perfTokens.letterSpacing.wide,
        px: 0.75,
        py: 0.25,
        borderRadius: 1,
        backgroundColor: `${color}1F`,
        border: `1px solid ${color}55`,
    }),
    masterFaderWrap: {
        flex: 1,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'stretch',
        justifyContent: 'center',
        gap: 1,
        py: 1.25,
        minHeight: 0,
    },
    masterMeterTrack: (theme) => ({
        width: 10,
        backgroundColor: theme.palette.mode === 'dark' ? 'rgba(9, 12, 18, 0.7)' : 'rgba(0, 0, 0, 0.08)',
        borderRadius: 0.75,
        border: '1px solid',
        borderColor: theme.palette.divider,
        position: 'relative',
        overflow: 'hidden',
        display: 'flex',
        alignItems: 'flex-end',
    }),
    masterMeterFill: (color) => ({
        width: '100%',
        height: '0%',
        background: `linear-gradient(0deg, ${color} 0%, ${color}DD 60%, #E3A34B 80%, #E36C61 100%)`,
        transition: 'height 0.05s linear',
    }),
    masterFader: (color) => (theme) => ({
        height: '100%',
        color,
        '& .MuiSlider-thumb': { width: 16, height: 16 },
        '& .MuiSlider-rail': { opacity: 0.3, width: 4 },
        '& .MuiSlider-track': { display: 'none' },
        '& .MuiSlider-mark': {
            width: 6,
            height: 1,
            backgroundColor: theme.palette.mode === 'dark' ? 'rgba(157, 169, 188, 0.55)' : 'rgba(0, 0, 0, 0.25)',
            opacity: 1,
        },
        '& .MuiSlider-markActive': {
            backgroundColor: theme.palette.mode === 'dark' ? 'rgba(157, 169, 188, 0.55)' : 'rgba(0, 0, 0, 0.25)',
        },
    }),
    masterReadouts: {
        display: 'flex',
        flexDirection: 'column',
        gap: 0.25,
        alignItems: 'center',
    },
    masterValue: {
        textAlign: 'center',
        color: 'primary.main',
        fontSize: perfTokens.fontSize.small,
        letterSpacing: '0.04em',
    },
    masterPeakValue: {
        textAlign: 'center',
        color: 'text.disabled',
        fontSize: perfTokens.fontSize.knob,
        letterSpacing: '0.04em',
    },
    masterTransport: {
        display: 'flex',
        flexDirection: 'column',
        gap: 0.5,
        pt: 0.75,
        borderTop: '1px solid',
        borderTopColor: 'divider',
    },
    masterBtn: (color, variant) => (theme) => ({
        textTransform: 'none',
        borderRadius: 1.5,
        fontSize: perfTokens.fontSize.body,
        py: 0.5,
        ...(variant === 'play'
            ? {
                color,
                borderColor: theme.palette.mode === 'dark' ? `${color}66` : `${color}BB`,
                backgroundColor: `${color}14`,
                '&:hover': { backgroundColor: `${color}26`, borderColor: color },
            }
            : {
                color: '#E36C61',
                borderColor: theme.palette.mode === 'dark' ? 'rgba(227, 108, 97, 0.5)' : 'rgba(227, 108, 97, 0.8)',
                '&:hover': { backgroundColor: 'rgba(227, 108, 97, 0.12)', borderColor: '#E36C61' },
            }),
    }),
};

export const performanceChannelStyles = {
    strip: (color, playing) => (theme) => ({
        display: 'flex',
        flexDirection: 'column',
        gap: 1,
        p: 1.25,
        borderRadius: 2.5,
        border: '1px solid',
        borderColor: playing ? color : theme.palette.divider,
        background: playing
            ? `linear-gradient(160deg, ${color}1F 0%, ${theme.palette.background.paper} 60%)`
            : theme.palette.background.paper,
        boxShadow: playing
            ? `0 0 0 1px ${color}66, 0 8px 22px ${theme.palette.mode === 'dark' ? 'rgba(4, 8, 14, 0.5)' : 'rgba(0,0,0,0.15)'}`
            : `0 2px 8px ${theme.palette.mode === 'dark' ? 'rgba(4, 8, 14, 0.36)' : 'rgba(0,0,0,0.08)'}`,
        transition: 'box-shadow 0.2s ease, border-color 0.2s ease, background 0.3s ease',
        height: '100%',
        minWidth: 150,
    }),
    stripHeader: (color) => ({
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderBottom: `1px solid ${color}33`,
        pb: 0.75,
    }),
    channelBadge: (color) => ({
        fontFamily: 'inherit',
        fontSize: perfTokens.fontSize.badge,
        fontWeight: 600,
        color,
        letterSpacing: perfTokens.letterSpacing.wide,
        px: 0.75,
        py: 0.25,
        borderRadius: 1,
        backgroundColor: `${color}1F`,
        border: `1px solid ${color}55`,
    }),
    muteSoloRow: {
        display: 'flex',
        gap: 0.5,
    },
    muteBtn: (active) => ({
        width: perfTokens.height.sub,
        height: perfTokens.height.sub,
        fontSize: perfTokens.fontSize.small,
        fontWeight: 700,
        borderRadius: 1,
        color: active ? '#fff' : 'text.secondary',
        backgroundColor: active ? 'rgba(227, 108, 97, 0.85)' : 'transparent',
        border: '1px solid',
        borderColor: active ? 'rgba(227, 108, 97, 0.85)' : 'divider',
        '&:hover': {
            backgroundColor: active ? 'rgba(227, 108, 97, 0.95)' : 'rgba(227, 108, 97, 0.18)',
        },
    }),
    soloBtn: (active) => ({
        width: perfTokens.height.sub,
        height: perfTokens.height.sub,
        fontSize: perfTokens.fontSize.small,
        fontWeight: 700,
        borderRadius: 1,
        color: active ? '#0c1018' : 'text.secondary',
        backgroundColor: active ? 'rgba(227, 163, 75, 0.95)' : 'transparent',
        border: '1px solid',
        borderColor: active ? 'rgba(227, 163, 75, 0.95)' : 'divider',
        '&:hover': {
            backgroundColor: active ? 'rgba(227, 163, 75, 1)' : 'rgba(227, 163, 75, 0.2)',
        },
    }),
    promptBox: {
        display: 'flex',
        flexDirection: 'column',
        gap: 0.5,
    },
    promptField: (theme) => ({
        '& .MuiOutlinedInput-root': {
            fontSize: perfTokens.fontSize.body,
            backgroundColor: theme.palette.mode === 'dark' ? 'rgba(9, 12, 18, 0.5)' : 'rgba(0, 0, 0, 0.04)',
            borderRadius: 1.5,
            '& textarea': { lineHeight: 1.3 },
        },
        '& fieldset': { borderColor: theme.palette.divider },
    }),
    durationRow: {
        display: 'flex',
        alignItems: 'center',
        gap: 0.75,
    },
    durationLabel: {
        fontFamily: 'inherit',
        fontSize: perfTokens.fontSize.small,
        color: 'text.secondary',
        minWidth: 22,
    },
    durationSlider: (color) => ({
        flex: 1,
        color,
        '& .MuiSlider-thumb': { width: 10, height: 10 },
        '& .MuiSlider-rail': { opacity: 0.3 },
    }),
    generateBtn: (color) => (theme) => ({
        alignSelf: 'flex-end',
        width: perfTokens.height.compact,
        height: perfTokens.height.compact,
        borderRadius: 1.5,
        color,
        border: `1px solid ${color}55`,
        backgroundColor: `${color}14`,
        '&:hover': { backgroundColor: `${color}26` },
        '&.Mui-disabled': theme.palette.mode === 'dark' ? { opacity: 0.35 } : {},
    }),
    waveformWrap: (theme) => ({
        position: 'relative',
        height: 42,
        backgroundColor: theme.palette.mode === 'dark' ? 'rgba(9, 12, 18, 0.6)' : 'rgba(0, 0, 0, 0.06)',
        borderRadius: 1.5,
        border: '1px solid',
        borderColor: theme.palette.divider,
        overflow: 'hidden',
    }),
    waveformPlaceholder: {
        position: 'absolute',
        inset: 0,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: 'text.disabled',
        fontFamily: 'inherit',
        fontSize: perfTokens.fontSize.small,
        letterSpacing: perfTokens.letterSpacing.wide,
        pointerEvents: 'none',
    },
    knobsGrid: {
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 0.5,
        py: 0.5,
    },
    knobCell: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: 0.25,
        height: 70,
    },
    knobSlider: (color, fat = false) => ({
        height: 50,
        color,
        // Gain is visually fattened (wider track + bigger thumb) so it stands
        // out from LPF/DLY/REV — it's the dBFS-scaled "fader" of the four.
        '& .MuiSlider-thumb': { width: fat ? 12 : 10, height: fat ? 12 : 10 },
        '& .MuiSlider-rail': { opacity: 0.3, width: fat ? 4 : 2 },
        '& .MuiSlider-track': { width: fat ? 4 : 2, border: 'none' },
    }),
    knobLabel: {
        display: 'block',
        fontFamily: 'inherit',
        fontSize: perfTokens.fontSize.knob,
        color: 'text.secondary',
        letterSpacing: perfTokens.letterSpacing.wide,
        mt: 0.75,
    },
    transportRow: {
        display: 'flex',
        alignItems: 'center',
        gap: 0.5,
        mt: 'auto',
        pt: 0.75,
        borderTop: '1px solid',
        borderTopColor: 'divider',
    },
    transportBtn: (color, playing) => (theme) => ({
        width: perfTokens.height.compact,
        height: perfTokens.height.compact,
        borderRadius: 1.5,
        color: playing ? '#0c1018' : color,
        backgroundColor: playing ? color : `${color}14`,
        border: `1px solid ${color}55`,
        '&:hover': { backgroundColor: playing ? color : `${color}28` },
        '&.Mui-disabled': theme.palette.mode === 'dark' ? { opacity: 0.3 } : {},
    }),
    loopBtn: (color, active) => ({
        width: perfTokens.height.sub,
        height: perfTokens.height.sub,
        borderRadius: 1,
        color: active ? color : 'text.secondary',
        backgroundColor: active ? `${color}1F` : 'transparent',
        border: '1px solid',
        borderColor: active ? `${color}55` : 'divider',
        '&:hover': { backgroundColor: `${color}1F` },
    }),
    meterTrack: (theme) => ({
        flex: 1,
        height: 12,
        mt: 1,
        backgroundColor: theme.palette.mode === 'dark' ? 'rgba(9, 12, 18, 0.7)' : 'rgba(0, 0, 0, 0.08)',
        borderRadius: 0.75,
        border: '1px solid',
        borderColor: theme.palette.divider,
        position: 'relative',
        overflow: 'hidden',
        display: 'flex',
        alignItems: 'center',
    }),
    meterFill: (color) => ({
        width: '0%',
        height: '100%',
        background: `linear-gradient(90deg, ${color} 0%, ${color}AA 70%, #E36C61 100%)`,
        transition: 'width 0.05s linear',
    }),
};

export default theme;