:root {
            /* --- LIGHT THEME VARIABLES --- */
            --bg-body: #f8fafc;
            /* Slate 50 */
            --bg-sidebar: #ffffff;
            /* White */
            --border-color: #e2e8f0;
            /* Slate 200 */
            --text-primary: #334155;
            /* Slate 700 */
            --text-secondary: #64748b;
            /* Slate 500 */

            --input-bg: #f1f5f9;
            /* Slate 100 */
            --input-hover: #e2e8f0;
            /* Slate 200 */

            --primary: #0f172a;
            /* Slate 900 */
            --primary-fg: #ffffff;

            --danger: #ef4444;
            /* Red 500 */
            --danger-bg: #fee2e2;
            /* Red 100 */

            --success: #10b981;
            /* Emerald 500 */

            --radius: 0.5rem;
            /* 8px */
            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --chevron-color: '%2364748b';
            /* URL encoded color for SVG */
        }

        [data-theme="dark"] {
            /* --- DARK THEME VARIABLES --- */
            --bg-body: #0f172a;
            /* Slate 900 (Main BG) */
            --bg-sidebar: #1e293b;
            /* Slate 800 (Sidebar) */
            --border-color: #334155;
            /* Slate 700 */
            --text-primary: #e2e8f0;
            /* Slate 200 */
            --text-secondary: #94a3b8;
            /* Slate 400 */

            --input-bg: #0f172a;
            /* Slate 900 */
            --input-hover: #1e293b;

            --primary: #f8fafc;
            /* Slate 50 */
            --primary-fg: #0f172a;
            /* Slate 900 */

            --danger: #f87171;
            /* Red 400 */
            --danger-bg: rgba(239, 68, 68, 0.1);

            --chevron-color: '%2394a3b8';
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            outline: none;
            -webkit-font-smoothing: antialiased;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-body);
            color: var(--text-primary);
            height: 100vh;
            display: flex;
            overflow: hidden;
            font-size: 14px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* --- SIDEBAR --- */
        aside {
            width: 320px;
            background-color: var(--bg-sidebar);
            border-right: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            padding: 24px;
            gap: 18px;
            z-index: 20;
            transition: transform 0.3s ease, background-color 0.3s ease;
            box-shadow: 4px 0 24px rgba(0, 0, 0, 0.02);
        }

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

        .brand {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .brand i {
            color: var(--primary);
            font-size: 1.3rem;
        }

        [data-theme="dark"] .brand i {
            color: var(--primary);
        }

        .control-group label {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 6px;
            display: block;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* --- INPUTS & SELECTS (CUSTOM CHEVRON) --- */
        input,
        select {
            font-family: inherit;
            font-size: 0.9rem;
            padding: 0.6rem 0.8rem;
            border-radius: var(--radius);
            border: 1px solid var(--border-color);
            background-color: var(--input-bg);
            color: var(--text-primary);
            width: 100%;
            transition: all 0.2s ease;
        }

        /* Custom Dropdown Arrow */
        select {
            appearance: none;
            /* Xóa mũi tên mặc định */
            -webkit-appearance: none;
            -moz-appearance: none;
            /* Thay bằng SVG Mũi tên đẹp */
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='var(--chevron-color)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 0.7rem center;
            background-size: 1em;
            padding-right: 2.5rem;
            cursor: pointer;
        }

        /* Trick để cập nhật màu SVG khi đổi theme (JS sẽ replace biến màu) */

        input:focus,
        select:focus {
            border-color: var(--text-secondary);
            box-shadow: 0 0 0 2px var(--bg-body), 0 0 0 4px var(--border-color);
        }

        /* --- BUTTONS --- */
        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 0.6rem 1rem;
            border-radius: var(--radius);
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s ease;
            border: 1px solid transparent;
        }

        .btn-primary {
            background-color: var(--primary);
            color: var(--primary-fg);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .btn-primary:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        .btn-secondary {
            background-color: var(--input-bg);
            border: 1px solid var(--border-color);
            color: var(--text-primary);
        }

        .btn-secondary:hover {
            background-color: var(--input-hover);
            border-color: var(--text-secondary);
        }

        .btn-destructive {
            background-color: transparent;
            color: var(--danger);
            border: 1px solid var(--border-color);
            font-size: 0.85rem;
        }

        .btn-destructive:hover {
            background-color: var(--danger-bg);
            border-color: var(--danger);
        }

        .btn-icon {
            width: 40px;
            padding: 0;
            flex-shrink: 0;
        }

        .row {
            display: flex;
            gap: 8px;
        }

        /* --- MAIN EDITOR --- */
        main {
            flex-grow: 1;
            position: relative;
        }

        .CodeMirror {
            height: 100vh !important;
            font-family: 'Fira Code', monospace;
            font-size: 14px;
            line-height: 1.6;
            background-color: var(--bg-body) !important;
            color: var(--text-primary) !important;
        }

        .CodeMirror-gutters {
            background-color: var(--bg-body) !important;
            border-right: 1px solid var(--border-color);
        }

        .CodeMirror-linenumber {
            color: var(--text-secondary);
            opacity: 0.5;
        }

        /* --- UTILS --- */
        .status-bar {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 10px 16px;
            background: var(--bg-sidebar);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
            border-radius: var(--radius);
            font-weight: 500;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 10px;
            z-index: 100;
            transform: translateY(150%);
            transition: transform 0.3s;
            box-shadow: var(--shadow);
        }

        .status-bar.show {
            transform: translateY(0);
        }

        .status-bar.success i {
            color: var(--success);
        }

        .status-bar.error i {
            color: var(--danger);
        }

        #loader {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 50;
            backdrop-filter: blur(2px);
        }

        .spinner {
            width: 36px;
            height: 36px;
            border: 3px solid var(--border-color);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* Toggle Theme Btn */
        #themeToggle {
            background: transparent;
            border: none;
            font-size: 1.2rem;
            cursor: pointer;
            color: var(--text-secondary);
            padding: 5px;
            border-radius: 50%;
            transition: color 0.2s;
        }

        #themeToggle:hover {
            color: var(--text-primary);
            background: var(--input-hover);
        }

        /* Mobile */
        #mobile-menu-btn {
            display: none;
            position: absolute;
            top: 15px;
            right: 15px;
            z-index: 50;
            background: var(--bg-sidebar);
            border: 1px solid var(--border-color);
            color: var(--text-primary);
            padding: 8px;
            border-radius: var(--radius);
        }

        @media (max-width: 768px) {
            aside {
                position: absolute;
                height: 100%;
                transform: translateX(-100%);
                width: 85%;
                box-shadow: 10px 0 20px rgba(0, 0, 0, 0.2);
            }

            aside.open {
                transform: translateX(0);
            }

            #mobile-menu-btn {
                display: block;
            }
        }