body {
            font-family: 'Outfit', sans-serif;
            background-color: #0d1117;
            color: #c9d1d9;
            transition: background-color 0.3s, color 0.3s;
        }

        h1,
        h2,
        h3,
        .font-orbit {
            font-family: 'Orbitron', sans-serif;
        }

        code,
        pre {
            font-family: 'Fira Code', monospace;
        }

        .sidebar-link {
            border-left: 2px solid transparent;
            transition: all 0.2s;
            cursor: pointer;
        }

        .sidebar-link.active {
            border-color: #2dd4bf;
            color: #2dd4bf;
            background: rgba(45, 212, 191, 0.05);
        }

        .code-container {
            background: #010409;
            border: 1px solid #30363d;
            border-radius: 12px;
            position: relative;
        }

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

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

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(5px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .glass-card {
            background: rgba(22, 27, 34, 0.8);
            border: 1px solid #30363d;
            transition: all 0.3s ease;
        }

        .glass-card:hover {
            border-color: #2dd4bf;
            transform: translateY(-3px);
        }

        #terminal {
            background: #010409;
            border: 1px solid #2dd4bf55;
            height: 350px;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(45, 212, 191, 0.1);
        }

        .term-prompt {
            color: #2dd4bf;
            font-weight: bold;
        }

        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-thumb {
            background: #30363d;
            border-radius: 10px;
        }

        .copy-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            background: #21262d;
            border: 1px solid #30363d;
            color: #c9d1d9;
            font-size: 10px;
            padding: 4px 8px;
            border-radius: 6px;
            cursor: pointer;
            transition: 0.2s;
            z-index: 10;
        }

        .copy-btn:hover {
            background: #30363d;
            color: #fff;
        }

        .toggle-bg {
            transition: background-color 0.3s;
        }

        .toggle-knob {
            transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        }

        /* --- LIGHT MODE OVERRIDES --- */
        body.light-mode {
            background-color: #f8fafc;
            color: #334155;
        }

        body.light-mode nav,
        body.light-mode aside {
            background-color: #ffffff !important;
            border-color: #e2e8f0 !important;
        }

        body.light-mode main {
            background-color: #f8fafc !important;
        }

        body.light-mode .bg-slate-900 {
            background-color: #ffffff !important;
            border-color: #e2e8f0 !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }

        body.light-mode .bg-slate-800 {
            background-color: #f1f5f9 !important;
            border-color: #cbd5e1 !important;
            color: #0f172a !important;
        }

        body.light-mode .bg-slate-950 {
            background-color: #f8fafc !important;
            border-color: #cbd5e1 !important;
            color: #0f172a !important;
        }

        body.light-mode .glass-card {
            background-color: #ffffff !important;
            border-color: #e2e8f0 !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }

        body.light-mode .glass-card:hover {
            border-color: #0f766e !important;
        }

        body.light-mode input,
        body.light-mode select,
        body.light-mode textarea {
            color: #0f172a !important;
        }

        body.light-mode .text-white {
            color: #0f172a !important;
        }

        body.light-mode .text-slate-300 {
            color: #334155 !important;
        }

        body.light-mode .text-slate-400 {
            color: #475569 !important;
        }

        body.light-mode .text-slate-500 {
            color: #64748b !important;
        }

        body.light-mode .text-teal-400 {
            color: #0f766e !important;
        }

        body.light-mode .text-blue-400 {
            color: #2563eb !important;
        }

        body.light-mode .text-purple-400 {
            color: #7e22ce !important;
        }

        body.light-mode .text-yellow-400 {
            color: #d97706 !important;
        }

        body.light-mode .text-green-400 {
            color: #16a34a !important;
        }

        body.light-mode .text-red-400 {
            color: #dc2626 !important;
        }

        body.light-mode .text-orange-400 {
            color: #ea580c !important;
        }

        body.light-mode .sidebar-link.active {
            border-color: #0f766e !important;
            color: #0f766e !important;
            background: rgba(15, 118, 110, 0.08) !important;
        }

        body.light-mode .preserve-dark,
        body.light-mode .preserve-dark .bg-slate-900,
        body.light-mode .preserve-dark .bg-slate-800,
        body.light-mode .preserve-dark .bg-slate-950,
        body.light-mode .code-container {
            background-color: #0d1117 !important;
            border-color: #30363d !important;
        }

        body.light-mode .preserve-dark .text-white,
        body.light-mode .code-container .text-white {
            color: #ffffff !important;
        }

        body.light-mode .preserve-dark .text-slate-300,
        body.light-mode .code-container .text-slate-300 {
            color: #cbd5e1 !important;
        }

        body.light-mode .preserve-dark .text-slate-400,
        body.light-mode .code-container .text-slate-400 {
            color: #94a3b8 !important;
        }

        body.light-mode .preserve-dark .text-slate-500,
        body.light-mode .code-container .text-slate-500 {
            color: #64748b !important;
        }

        body.light-mode .preserve-dark .text-teal-400,
        body.light-mode .code-container .text-teal-400 {
            color: #2dd4bf !important;
        }

        body.light-mode .preserve-dark .text-blue-300,
        body.light-mode .code-container .text-blue-300 {
            color: #93c5fd !important;
        }

        body.light-mode .preserve-dark .text-blue-400,
        body.light-mode .code-container .text-blue-400 {
            color: #60a5fa !important;
        }

        body.light-mode .preserve-dark .text-yellow-400,
        body.light-mode .code-container .text-yellow-400 {
            color: #facc15 !important;
        }

        body.light-mode .preserve-dark .text-green-400,
        body.light-mode .code-container .text-green-400 {
            color: #4ade80 !important;
        }

        body.light-mode .preserve-dark .text-purple-400,
        body.light-mode .code-container .text-purple-400 {
            color: #c084fc !important;
        }

        body.light-mode .copy-btn {
            color: #c9d1d9 !important;
            border-color: #30363d !important;
            background: #21262d !important;
        }

        body.light-mode .copy-btn {
            color: #c9d1d9 !important;
            border-color: #30363d !important;
            background: #21262d !important;
        }

        body.light-mode .copy-btn:hover {
            background: #30363d !important;
            color: #fff !important;
        }