body {
     font-family: 'Inter', sans-serif !important;
     background-color: #0f172a !important;
     color: #f8fafc !important;
     margin: 0 !important;
     padding: 0 !important;
     box-sizing: border-box !important;
     min-height: 100vh !important;
     display: flex !important;
     flex-direction: column !important;
     justify-content: space-between !important;
 }

 .hub-header h1 {
     font-size: 2.5rem !important;
     font-weight: 800 !important;
     color: goldenrod !important;
     margin: 0 !important;
 }

 main {
     background-color: #dfe4e8 !important;
 }

 #main-content>div.text-center.max-w-3xl.mx-auto.mb-16>span {
     background-color: black !important;
     color: yellow !important;
     padding: .5rem !important;
 }

 main h1 {
     color: rgba(37, 3, 125, 0.892) !important;
 }

 main p {
     color: rgb(34, 32, 32) !important;
 }

 .bek-gradient-text {
     background: linear-gradient(150deg, #2821ef 0%, #818cf8 100%) !important;
     -webkit-background-clip: text !important;
     -webkit-text-fill-color: transparent !important;
 }

 .bek-card {
     background-color: #1e293b !important;
     border: 1px solid #334155 !important;
     border-radius: 1rem !important;
     box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3) !important;
     transition: all 0.3s ease !important;
 }

 .bek-card:hover {
     border-color: #38bdf8 !important;
     transform: translateY(-2px) !important;
 }

 .bek-input {
     background-color: #0f172a !important;
     border: 1px solid #475569 !important;
     color: #f8fafc !important;
     border-radius: 0.5rem !important;
     padding: 0.75rem 1rem !important;
     width: 100% !important;
     outline: none !important;
     transition: border-color 0.2s ease !important;
 }

 .bek-input:focus {
     border-color: #38bdf8 !important;
     box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2) !important;
 }

 .bek-btn {
     background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
     color: #ffffff !important;
     font-weight: 600 !important;
     padding: 0.75rem 1.5rem !important;
     border-radius: 0.5rem !important;
     border: none !important;
     cursor: pointer !important;
     transition: opacity 0.2s ease, transform 0.2s ease !important;
     display: inline-flex !important;
     align-items: center !important;
     justify-content: center !important;
     gap: 0.5rem !important;
     width: 100% !important;
 }

 .bek-btn:hover {
     opacity: 0.9 !important;
     transform: translateY(-1px) !important;
 }

 .bek-modal {
     position: fixed !important;
     top: 0 !important;
     left: 0 !important;
     width: 100% !important;
     height: 100% !important;
     background-color: rgba(15, 23, 42, 0.8) !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     z-index: 9999 !important;
     opacity: 0 !important;
     pointer-events: none !important;
     transition: opacity 0.3s ease !important;
 }

 .bek-modal.active {
     opacity: 1 !important;
     pointer-events: auto !important;
 }

 .bek-modal-content {
     background-color: #1e293b !important;
     border: 1px solid #334155 !important;
     padding: 2rem !important;
     border-radius: 1rem !important;
     max-width: 400px !important;
     width: 90% !important;
     text-align: center !important;
 }