export const Styles = {
    // Colors
    colors: {
        bg: 'rgba(20, 20, 25, 0.95)',
        bgPanel: 'rgba(255, 255, 255, 0.05)',
        text: '#eee',
        textMuted: '#aaa',
        primary: '#448aff',
        success: '#66bb6a',
        danger: '#ff5252',
        warning: '#ffa726',
        accent: '#bada55',
        border: '#444'
    },
    // Common CSS strings
    sidebar: `
        position: fixed;
        top: 20px;
        right: 20px;
        width: 300px;
        background: rgba(20, 20, 25, 0.95);
        color: #eee;
        padding: 0;
        border-radius: 12px;
        z-index: 9999999;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        box-shadow: 0 4px 15px rgba(0,0,0,0.6);
        border: 1px solid #444;
        backdrop-filter: blur(5px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: opacity 0.2s, transform 0.2s;
    `,
    panel: `
        background: rgba(255,255,255,0.05);
        padding: 10px;
        border-radius: 8px;
        margin-bottom: 15px;
    `,
    input: `
        width: 100%;
        padding: 6px;
        background: #333;
        border: 1px solid #555;
        color: white;
        border-radius: 4px;
        box-sizing: border-box;
    `,
    button: `
        cursor: pointer;
        border: none;
        padding: 8px 12px;
        border-radius: 4px;
        font-weight: bold;
        transition: background 0.2s;
        color: white;
    `,
    flexBetween: `
        display: flex;
        justify-content: space-between;
        align-items: center;
    `,
    label: `
        font-size: 12px; 
        color: #aaa; 
        margin-bottom: 4px; 
        display: block;
    `
};

export function createElement(tag, style = '', props = {}) {
    const el = document.createElement(tag);
    el.style.cssText = style;
    for (const [k, v] of Object.entries(props)) {
        if (k === 'dataset') {
            for (const [dk, dv] of Object.entries(v)) el.dataset[dk] = dv;
        } else {
            el[k] = v;
        }
    }
    return el;
}