:root { --primary-black: #121212; --secondary-black: #1e1e1e; --primary-gray: #2d2d2d; --secondary-gray: #3d3d3d; --light-gray: #aaaaaa; --primary-purple: #9370DB; /* Medium Purple */ --secondary-purple: #7B68EE; /* Medium Slate Blue */ --dark-purple: #6A5ACD; /* Slate Blue */ --text-color: #e0e0e0; } body { background: linear-gradient(135deg, var(--primary-black) 0%, var(--secondary-black) 100%); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text-color); min-height: 100vh; } .card { margin-bottom: 20px; background-color: var(--primary-gray); border: none; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); color: var(--text-color); } .card-title { color: var(--primary-purple); } .card-subtitle { color: var(--light-gray) !important; } .bot-card { transition: all 0.3s ease-in-out; border-left: 3px solid var(--primary-purple); } .bot-card:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); border-left: 3px solid var(--secondary-purple); } .card-footer { background-color: var(--secondary-gray) !important; border-top: 1px solid #444; } .navbar { background: linear-gradient(90deg, var(--primary-black) 0%, var(--dark-purple) 100%) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); margin-bottom: 20px; } .navbar-brand { color: var(--text-color) !important; font-weight: bold; text-shadow: 0 0 10px rgba(147, 112, 219, 0.5); } .nav-link { color: var(--text-color) !important; } .nav-link:hover { color: var(--primary-purple) !important; } .btn-primary { background-color: var(--primary-purple) !important; border-color: var(--primary-purple) !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--secondary-purple) !important; border-color: var(--secondary-purple) !important; } .btn-success { background-color: #4CAF50 !important; border-color: #4CAF50 !important; } .btn-secondary { background-color: var(--secondary-gray) !important; border-color: var(--secondary-gray) !important; } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pubkey { font-family: monospace; font-size: 0.85em; color: var(--light-gray); background-color: var(--secondary-black); padding: 2px 6px; border-radius: 4px; display: inline-block; } .modal-content { background-color: var(--secondary-gray); color: var(--text-color); border: 1px solid #444; } .modal-header { border-bottom: 1px solid #444; } .modal-footer { border-top: 1px solid #444; } .form-control, .form-select { background-color: var(--primary-black); border: 1px solid #444; color: var(--text-color); } .form-control:focus, .form-select:focus { background-color: var(--primary-black); border-color: var(--primary-purple); box-shadow: 0 0 0 0.25rem rgba(147, 112, 219, 0.25); color: var(--text-color); } .form-text { color: var(--light-gray); } .form-check-input:checked { background-color: var(--primary-purple); border-color: var(--primary-purple); } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--primary-black); } ::-webkit-scrollbar-thumb { background: var(--primary-purple); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--secondary-purple); }