body { 
        font-family: 'Inter', sans-serif; 
        background-color: #0a0a0a; 
        color: #e2e8f0; 
    
        background-image: 
            radial-gradient(circle at top right, rgba(17, 29, 74), transparent 40%), 
            radial-gradient(circle at bottom left, rgba(17, 29, 74), transparent 40%);
    
        background-attachment: fixed; 
        -webkit-font-smoothing: antialiased; 
        -moz-osx-font-smoothing: grayscale; 
    }

    html, body { height: 100%; }
        .dashboard-card, .feature-card, .plan-card { background: rgba(24, 24, 27, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
        .dashboard-card, .feature-card { transition: all 0.3s ease; }
        .plan-card { transition: all 0.3s ease; }
        .dashboard-card:hover, .feature-card:hover { transform: translateY(-6px); background: rgba(30, 30, 33, 0.6); border-color: rgba(17, 29, 74); box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.3); }
        .plan-card:hover { transform: translateY(-8px);  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.4); }
        .glow-button { position: relative; overflow: hidden; }
        .glow-button::before { content: ''; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background: radial-gradient(circle, rgba(17, 29, 74) 0%, rgba(167, 139, 250, 0) 70%); border-radius: 50%; transform: translate(-50%, -50%); transition: all 0.6s ease; z-index: 0; }
        .glow-button:hover::before { width: 400%; height: 400%; opacity: 0.7; }
        .glow-button > * { position: relative; z-index: 1; }
        .modal-backdrop { background-color: rgba(0,0,0,0.7); backdrop-filter: blur(8px); }
        .prose { color: #d1d5db; } .prose h1, .prose h2, .prose h3, .prose h4 { color: white; } .prose a { color: #a78bfa; } .prose strong { color: white; } .prose blockquote { border-left-color: #4f46e5; } .prose pre { background-color: #111827; border: 1px solid #374151; padding: 1rem; border-radius: 0.5rem; white-space: pre-wrap; word-wrap: break-word;} .prose code { color: #e5e7eb; background-color: #1f2937; padding: 0.2rem 0.4rem; border-radius: 0.25rem; } .prose code::before, .prose code::after { content: '' !important; } .prose ul > li::before { background-color: #6d28d9; }
        .blinking-cursor { animation: blink 1s step-end infinite; }
        @keyframes blink { from, to { color: transparent } 50% { color: #e2e8f0; } }
        .page-blur-container { position: relative; z-index: 1; }
        .page-blur-container::before { content: ''; position: absolute; z-index: -1; inset: 0; background-color: rgba(10, 10, 10, 0.1); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
        #message-input { scrollbar-gutter: stable; }
        #message-input::-webkit-scrollbar { display: none; }
        #message-input { -ms-overflow-style: none; scrollbar-width: none; }
        .model-selector-panel {
            max-height: 20rem;
            overflow-y: auto;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .model-selector-panel::-webkit-scrollbar {
            display: none;
        }
        #model-selector-button .chevron-icon {
            transition: transform 0.2s ease-in-out;
        }
        #model-selector-button.open .chevron-icon {
            transform: rotate(180deg);
        }
        #messages-container {
            overflow-y: auto;
            max-height: calc(100vh - 200px);
        }
        .docs-content h1 { font-size: 2.5rem; font-weight: 800; padding-bottom: 0.75rem; border-bottom: 1px solid #374151; margin-top: 2.5rem; margin-bottom: 1.5rem; color: #fff; }
        .docs-content h2 { font-size: 2rem; font-weight: 700; padding-bottom: 0.5rem; border-bottom: 1px solid #374151; margin-top: 3rem; margin-bottom: 1.25rem; color: #f3f4f6; }
        .docs-content h3 { font-size: 1.5rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: 1rem; color: #e5e7eb; }
        .docs-content p { color: #9ca3af; line-height: 1.75; margin-bottom: 1.25rem; font-size: 1.05rem; }
        .docs-content a { color: #a78bfa; text-decoration: none; transition: color 0.2s; }
        .docs-content a:hover { color: #c4b5fd; text-decoration: underline; }
        .docs-content code { background-color: #1f2937; color: #d1d5db; padding: 0.2rem 0.4rem; font-size: 0.9em; border-radius: 0.35rem; font-family: 'Fira Code', monospace; }
        .docs-content pre { background-color: #111827; border: 1px solid #374151; color: #e5e7eb; padding: 1.25rem; border-radius: 0.75rem; overflow-x: auto; margin-bottom: 1.75rem; box-shadow: 0 4px 6px rgba(0,0,0,0.2); }
        .docs-content pre code { padding: 0; background-color: transparent; }
        .docs-content table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; }
        .docs-content th, .docs-content td { border: 1px solid #374151; padding: 0.85rem 1rem; text-align: left; }
        .docs-content th { background-color: #1f2937; color: #fff; font-weight: 600; }