@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');

:root {
    --s28-primary: rgb(22, 35, 193);
    --s28-primary-d: rgb(15, 25, 140);
    --s28-secondary: rgb(39, 39, 39);
    --s28-text: rgb(31, 31, 31);
    --s28-radius: 8px;
    --s28-light: #f5f7fb;
}

body, .navbar, .btn, h1, h2, h3, h4, h5, input, textarea, select {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-weight: 800 !important; }

.navbar.bg-dark, nav.navbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(31,31,31,.08) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.navbar-dark .navbar-nav .nav-link, .navbar .nav-link {
    color: var(--s28-text) !important;
    font-weight: 600;
    transition: color .2s;
}
.navbar-dark .navbar-nav .nav-link:hover, .navbar .nav-link:hover {
    color: var(--s28-primary) !important;
}
.navbar-dark .navbar-brand, .navbar .navbar-brand {
    color: var(--s28-text) !important;
    font-weight: 800;
}
.navbar-toggler { border-color: rgba(31,31,31,.2) !important; }
.navbar-toggler-icon { filter: invert(1); }

.btn { border-radius: var(--s28-radius) !important; font-weight: 600; transition: all .2s; }
.btn-primary {
    background-color: var(--s28-primary) !important;
    border-color: var(--s28-primary) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--s28-primary-d) !important;
    border-color: var(--s28-primary-d) !important;
}
.btn-outline-primary {
    color: var(--s28-primary) !important;
    border-color: var(--s28-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--s28-primary) !important;
    color: #fff !important;
}
a { color: var(--s28-primary); transition: color .2s; }
a:hover { color: var(--s28-primary-d); }

.jumbotron {
    background: linear-gradient(135deg, var(--s28-primary) 0%, var(--s28-primary-d) 100%) !important;
    color: #fff !important;
    border-radius: var(--s28-radius);
    padding: 60px 40px;
    margin-bottom: 30px;
}
.jumbotron h1, .jumbotron h2, .jumbotron h3 { color: #fff !important; font-weight: 800; }

.card {
    border-radius: var(--s28-radius) !important;
    border: 1px solid rgba(31,31,31,.1) !important;
    transition: all .25s;
    background: #fff;
}
.card:hover {
    border-color: var(--s28-primary) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.card .card-header {
    border-radius: var(--s28-radius) var(--s28-radius) 0 0 !important;
    background-color: #fff;
    border-bottom: 1px solid rgba(31,31,31,.08);
    font-weight: 700;
}

.challenge-button {
    border-radius: var(--s28-radius) !important;
    transition: all .2s;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(31,31,31,.15) !important;
    color: var(--s28-text) !important;
    text-align: left;
}
.challenge-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,.1) !important;
    border-color: var(--s28-primary) !important;
    background-color: #ffffff !important;
    color: var(--s28-text) !important;
}
.challenge-button.challenge-solved {
    background-color: rgba(22,35,193,.08) !important;
    border-color: var(--s28-primary) !important;
}
.challenge-button .challenge-inner p { font-weight: 700; margin-bottom: 5px; }
.challenge-button .challenge-inner span { color: var(--s28-primary); font-weight: 800; }

.form-control {
    border-radius: var(--s28-radius) !important;
    border: 1px solid rgba(31,31,31,.18);
    padding: .6em 1em;
    transition: all .2s;
}
.form-control:focus {
    border-color: var(--s28-primary);
    box-shadow: 0 0 0 3px rgba(22,35,193,.15);
    outline: none;
}
.form-label { font-weight: 600; font-size: .95em; }

.table th { font-weight: 700; border-bottom: 2px solid rgba(31,31,31,.1); }
.table tbody tr { transition: background-color .15s; }
.table tbody tr:hover { background-color: rgba(22,35,193,.04) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--s28-light); }

.badge { border-radius: 6px !important; font-weight: 600; padding: .45em .75em; }
.badge-primary, .bg-primary { background-color: var(--s28-primary) !important; }

.modal-content {
    border-radius: var(--s28-radius) !important;
    border: none;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.dropdown-menu {
    border-radius: var(--s28-radius) !important;
    border: 1px solid rgba(31,31,31,.1);
    box-shadow: 0 10px 40px rgba(0,0,0,.1);
    padding: .4rem;
}
.dropdown-menu .dropdown-item { border-radius: 6px; padding: .5rem .9rem; transition: all .15s; }
.dropdown-menu .dropdown-item:hover { background-color: rgba(22,35,193,.08); color: var(--s28-primary); }

.footer {
    background-color: var(--s28-secondary) !important;
    color: rgba(255,255,255,.8) !important;
    padding: 40px 0 20px;
    margin-top: 60px;
}
.footer a, .footer small { color: rgba(255,255,255,.8) !important; }
.footer a:hover { color: #fff !important; }

.category-header h3 {
    font-weight: 800;
    color: var(--s28-text);
    border-bottom: 3px solid var(--s28-primary);
    display: inline-block;
    padding-bottom: 5px;
}

[data-bs-theme="dark"] body { background-color: #0d0d1a; color: #e6e6f0; }
[data-bs-theme="dark"] .navbar, [data-bs-theme="dark"] nav.navbar {
    background-color: #13131f !important;
    border-bottom-color: rgba(255,255,255,.08) !important;
}
[data-bs-theme="dark"] .navbar-dark .navbar-nav .nav-link,
[data-bs-theme="dark"] .navbar .nav-link { color: #e6e6f0 !important; }
[data-bs-theme="dark"] .navbar-dark .navbar-nav .nav-link:hover,
[data-bs-theme="dark"] .navbar .nav-link:hover { color: #8091ff !important; }
[data-bs-theme="dark"] .card, [data-bs-theme="dark"] .challenge-button {
    background-color: #1a1a2e !important;
    border-color: rgba(255,255,255,.1) !important;
    color: #e6e6f0 !important;
}
[data-bs-theme="dark"] .challenge-button:hover {
    border-color: #8091ff !important;
    color: #e6e6f0 !important;
}
[data-bs-theme="dark"] .jumbotron {
    background: linear-gradient(135deg, #1a1f7a 0%, #0a0d4a 100%) !important;
}