:root {
            --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-tertiary: #334155;
            --bg-interactive: #475569; --border-color: #334155; --text-primary: #f1f5f9;
            --text-secondary: #94a3b8; --accent-color: #38bdf8; --accent-hover: #0ea5e9;
        }
        .light-theme {
            --bg-primary: #f1f5f9; --bg-secondary: #ffffff; --bg-tertiary: #e2e8f0;
            --bg-interactive: #f1f5f9; --border-color: #e2e8f0; --text-primary: #1e293b;
            --text-secondary: #64748b;
        }
        body { font-family: 'Cairo', sans-serif; background-color: var(--bg-primary); color: var(--text-primary); transition: background-color 0.3s, color 0.3s; }
        .main-container { background-color: var(--bg-secondary); border: 1px solid var(--border-color); transition: background-color 0.3s, border-color 0.3s; }
        .card-bg { background-color: var(--bg-secondary); border: 1px solid var(--border-color); }
        .light-theme .card-bg { background-color: #f8fafc; }
        .header-bg { background-color: rgba(15, 23, 42, 0.5); }
        .light-theme .header-bg { background-color: rgba(226, 232, 240, 0.5); }

        /* Animation and transition styles */
        .tab { transition: all 0.3s ease; border-bottom: 3px solid transparent; color: var(--text-secondary); }
        .tab.active { color: var(--accent-color); border-bottom-color: var(--accent-color); }
        .light-theme .tab.active { color: var(--accent-hover); border-bottom-color: var(--accent-hover); }
        .tab-content, .animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
        .hidden { display: none; }
        .animate-pop-in { animation: popIn 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; }
        @keyframes popIn { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } }
        
        /* Form and input styles */
        .input-field { background-color: var(--bg-tertiary); border: 1px solid var(--border-color); transition: all 0.2s ease-in-out; color: var(--text-primary); }
        .input-field:focus { background-color: var(--bg-interactive); border-color: var(--accent-color); outline: none; }
        select option { background-color: #334155; color: white; }
        .light-theme select option { background-color: white; color: black; }
        input[type="radio"]:checked + label { background-color: var(--accent-hover); color: white; border-color: var(--accent-hover); }

        /* Button styles */
        .btn-primary { background-color: var(--accent-hover); color: white; }
        .btn-primary:hover { background-color: #0284c7; }
        .btn-primary:disabled { background-color: #334155; color: #64748b; cursor: not-allowed; }
        .btn-secondary { background-color: #475569; color: #e2e8f0; }
        .btn-secondary:hover { background-color: #64748b; }
        .light-theme .btn-secondary { background-color: #e2e8f0; color: #334155; }
        .light-theme .btn-secondary:hover { background-color: #cbd5e1; }
        
        /* Modal and Toast styles */
        .modal-overlay { transition: opacity 0.3s ease-in-out; }