:root {
            --bg-base: #09090b; 
            --bg-panel: #18181b; 
            --border-subtle: #27272a; 
            --accent: #22c55e; 
        }
        
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-base);
            color: #e4e4e7; 
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        .font-mono {
            font-family: 'JetBrains Mono', monospace;
        }

        
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: var(--bg-base); 
        }
        ::-webkit-scrollbar-thumb {
            background: var(--border-subtle); 
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #3f3f46; 
        }

        .pixelated {
            image-rendering: pixelated;
        }

        /* Local Tailwind build does not include the color/arbitrary utilities used by the mockup. */
        .bg-\[\#0d1117\] { background-color: #0d1117; }
        .bg-\[\#0d1117\]\/95 { background-color: rgb(13 17 23 / 0.95); }
        .bg-\[\#050505\] { background-color: #050505; }
        .bg-\[\#5865F2\] { background-color: #5865F2; }
        .hover\:bg-\[\#4752C4\]:hover { background-color: #4752C4; }
        .shadow-\[\#5865F2\]\/20 { --tw-shadow-color: rgb(88 101 242 / 0.2); --tw-shadow: var(--tw-shadow-colored); }
        .bg-zinc-950 { background-color: #09090b; }
        .bg-zinc-900 { background-color: #18181b; }
        .bg-zinc-900\/30 { background-color: rgb(24 24 27 / 0.3); }
        .bg-zinc-900\/40 { background-color: rgb(24 24 27 / 0.4); }
        .bg-zinc-900\/80 { background-color: rgb(24 24 27 / 0.8); }
        .bg-zinc-900\/90 { background-color: rgb(24 24 27 / 0.9); }
        .bg-zinc-800 { background-color: #27272a; }
        .bg-zinc-800\/30 { background-color: rgb(39 39 42 / 0.3); }
        .bg-zinc-800\/50 { background-color: rgb(39 39 42 / 0.5); }
        .bg-zinc-700 { background-color: #3f3f46; }
        .bg-emerald-400 { background-color: #34d399; }
        .bg-emerald-500 { background-color: #10b981; }
        .bg-emerald-500\/10 { background-color: rgb(16 185 129 / 0.1); }
        .bg-emerald-600 { background-color: #059669; }
        .bg-red-500 { background-color: #ef4444; }
        .hover\:bg-emerald-500:hover { background-color: #10b981; }
        .hover\:bg-zinc-700:hover { background-color: #3f3f46; }
        .hover\:bg-zinc-800\/30:hover { background-color: rgb(39 39 42 / 0.3); }
        .hover\:bg-zinc-800\/50:hover { background-color: rgb(39 39 42 / 0.5); }
        .text-white { color: #fff; }
        .text-zinc-100 { color: #f4f4f5; }
        .text-zinc-200 { color: #e4e4e7; }
        .text-zinc-300 { color: #d4d4d8; }
        .text-zinc-400 { color: #a1a1aa; }
        .text-zinc-500 { color: #71717a; }
        .text-zinc-600 { color: #52525b; }
        .text-zinc-700 { color: #3f3f46; }
        .text-emerald-400 { color: #34d399; }
        .text-emerald-400\/90 { color: rgb(52 211 153 / 0.9); }
        .text-amber-500\/80 { color: rgb(245 158 11 / 0.8); }
        .hover\:text-white:hover { color: #fff; }
        .hover\:text-zinc-100:hover { color: #f4f4f5; }
        .hover\:text-zinc-200:hover { color: #e4e4e7; }
        .hover\:text-zinc-300:hover { color: #d4d4d8; }
        .hover\:text-red-400:hover { color: #f87171; }
        .group:hover .group-hover\:text-white { color: #fff; }
        .group:hover .group-hover\:text-zinc-200 { color: #e4e4e7; }
        .group:hover .group-hover\:text-zinc-300 { color: #d4d4d8; }
        .group:hover .group-hover\:opacity-100 { opacity: 1; }
        .group:hover .group-hover\:translate-y-0 { transform: translateY(0); }
        .overflow-visible { overflow: visible; }
        .overflow-y-visible { overflow-y: visible; }
        .border-zinc-500 { border-color: #71717a; }
        .border-zinc-600 { border-color: #52525b; }
        .border-zinc-700 { border-color: #3f3f46; }
        .border-zinc-700\/50 { border-color: rgb(63 63 70 / 0.5); }
        .border-zinc-800 { border-color: #27272a; }
        .border-zinc-800\/50 { border-color: rgb(39 39 42 / 0.5); }
        .border-emerald-500\/20 { border-color: rgb(16 185 129 / 0.2); }
        .border-amber-900\/50 { border-color: rgb(120 53 15 / 0.5); }
        .hover\:border-zinc-500:hover { border-color: #71717a; }
        .focus\:border-emerald-500:focus { border-color: #10b981; }
        .focus\:ring-emerald-500:focus { --tw-ring-color: #10b981; }
        .placeholder-zinc-600::placeholder { color: #52525b; }
        .text-\[10px\] { font-size: 10px; }
        .text-\[11px\] { font-size: 11px; }
        .grid-cols-\[280px_1fr\] { grid-template-columns: 280px 1fr; }
        .grid-cols-\[360px_1fr\] { grid-template-columns: 360px 1fr; }
        @media (min-width: 768px) {
            .md\:grid-cols-\[280px_1fr\] { grid-template-columns: 280px 1fr; }
            .md\:grid-cols-\[360px_1fr\] { grid-template-columns: 360px 1fr; }
        }

        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(2px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in {
            animation: fadeIn 0.15s ease-out forwards;
        }
        @media (max-width: 720px) {
            header .max-w-6xl {
                height: auto;
                min-height: 56px;
                flex-wrap: wrap;
                gap: 8px;
                padding-top: 8px;
                padding-bottom: 8px;
            }
            header nav { order: 3; width: 100%; justify-content: center; }
            header nav button { height: 36px; flex: 1; justify-content: center; }
        }