@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&family=JetBrains+Mono:wght@400&display=swap');
:root {
--may-bg: #000000;
--may-sidebar: #050505;
--may-card: #080808;
--may-border: #ffffff;
--may-text: #ffffff;
}
body, html, .wrapper, .content-wrapper {
background-color: var(--may-bg) !important;
color: var(--may-text) !important;
font-family: 'Manrope', sans-serif;
background-image: radial-gradient(#1a1a1a 1px, transparent 1px);
background-size: 20px 20px;
}
h1, h2, h3, .brand-text { font-weight: 800 !important; letter-spacing: -0.5px; }
.main-sidebar {
background-color: var(--may-sidebar) !important;
border-right: 1px solid #222 !important;
box-shadow: 5px 0 15px rgba(0,0,0,0.5);
}
.brand-link {
background-color: var(--may-sidebar) !important;
border-bottom: 1px solid #222 !important;
padding: 20px 15px !important;
}
.nav-sidebar .nav-link {
margin: 5px 10px;
border-radius: 8px !important;
color: #999 !important;
transition: all 0.2s;
}
.nav-sidebar .nav-link.active {
background-color: #fff !important;
color: #000 !important;
font-weight: 800;
box-shadow: 0 0 10px rgba(255,255,255,0.3);
}
.nav-sidebar .nav-link:hover {
color: #fff !important;
background: rgba(255,255,255,0.05);
}
.navbar {
background: rgba(5,5,5,0.95) !important;
border-bottom: 1px solid #222 !important;
backdrop-filter: blur(10px);
}
.content-wrapper { padding: 20px !important; }
.card, .info-box, .small-box, .modal-content, .login-box, .register-box {
background-color: var(--may-card) !important;
border: 1px solid #333 !important;
border-radius: 16px !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
margin-bottom: 20px !important;
overflow: hidden;
}
.login-card-body, .register-card-body {
background-color: var(--may-card) !important;
color: #fff !important;
padding: 30px !important;
border-radius: 16px !important;
}
.login-box { width: 400px !important; margin: 0 auto; }
.btn, button {
background-color: #000 !important;
border: 1px solid #fff !important;
color: #fff !important;
border-radius: 8px !important;
padding: 10px 20px !important;
font-weight: 700;
text-transform: uppercase;
font-size: 0.85rem;
transition: all 0.3s;
box-shadow: 0 4px 0 #333;
margin-top: 5px;
margin-bottom: 5px;
display: inline-block;
}
.btn:active { transform: translateY(4px); box-shadow: none; }
.btn:hover {
background-color: #fff !important;
color: #000 !important;
border-color: #fff !important;
}
.btn-block { width: 100%; }
input, select, textarea, .form-control {
background: #0f0f0f !important;
border: 1px solid #333 !important;
color: #fff !important;
border-radius: 8px !important;
padding: 20px 15px !important;
height: auto !important;
font-family: 'JetBrains Mono', monospace;
}
input:focus {
border-color: #fff !important;
background: #000 !important;
}
.main-footer {
background: #000 !important;
border-top: 1px solid #222 !important;
padding: 20px;
text-align: center;
}
.main-footer strong, .main-footer .float-right { display: none !important; }
.may-footer-content {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
color: #666;
}
.may-link {
color: #fff;
text-decoration: none;
font-weight: 800;
border: 1px solid #333;
padding: 5px 15px;
border-radius: 20px;
background: #0a0a0a;
display: flex;
align-items: center;
gap: 8px;
}
.may-wave {
width: 10px; height: 10px;
background: #2979ff;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }
.alert {
background: #111 !important;
border: 1px solid #fff !important;
color: #fff !important;
border-radius: 12px !important;
}
::-webkit-scrollbar { width: 6px; background: #000; }
::-webkit-scrollbar-thumb { background: #fff; border-radius: 3px; }
@media (max-width: 768px) {
.content-wrapper { padding: 10px !important; }
.card { border-radius: 12px !important; margin-bottom: 15px !important; }
.btn { width: 100%; margin: 5px 0 !important; padding: 15px !important; }
.login-box { width: 90% !important; }
.col-lg-3, .col-6 { padding: 0 5px !important; }
.nav-link { padding: 12px !important; }
}