html, body {
    background: #0b1220;
}
header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(130%) blur(16px);
    background: linear-gradient(to right, rgba(15, 26, 51, .85), rgba(17, 31, 59, .75));
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.elevated {
    background: linear-gradient(180deg, rgba(20, 30, 60, .7), rgba(17, 31, 59, .66));
    backdrop-filter: blur(14px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 10px 30px rgba(5, 15, 35, .55);
}
.qfs-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    margin-bottom: 10px;
}
.qfs-badge .dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #00d08a;
    box-shadow: 0 0 0 6px rgba(0, 208, 138, .08);
}
.text-muted {
    color: #a5b0c3 !important;
}
.input {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.05);
    color: #fff;
    font-size: 15px;
    transition: border .2s ease, background .2s ease;
}
.input:focus {
    outline: none;
    border-color: #7bd6ff;
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 0 0 3px rgba(123, 214, 255, .12), 0 8px 22px rgba(90, 140, 255, .25);
}
input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 5px;
}
.btn:not(.btn-primary):not(.btn-danger) {
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    color: #fff;
    border-color: #303948;
}
.btn:not(.btn-primary):not(.btn-danger):hover, .btn:not(.btn-primary):not(.btn-danger):focus {
    color: #fff;
    border-color: #303948;
}
.btn-primary {
    background: linear-gradient(135deg, #5a8cff, #7bd6ff);
    color: #05122b;
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(90,140,255, .35);
}
.btn-primary:hover, .btn-primary:focus {
    color: #05122b !important;
    border-color: transparent !important;
    box-shadow: 0 10px 24px rgba(90,140,255, .35) !important;
}

.navbar-brand {
    color: #e8eefb !important;
    font-weight: 700;
}

.card {
    background: linear-gradient(180deg, rgba(15, 26, 51, .85), rgba(17, 31, 59, .75));
    border: 1px solid rgba(255,255,255,.06);
    color: #fff;
}

.table th, .table td {
    color: #fff;
    border-color: rgba(255,255,255,.06);
}

.table thead th {
    border-bottom: 2px solid rgba(255,255,255,.06) !important;
}

select.form-control, select.form-control:focus {
    background-color: #111f3b;
    color: #fff;
    border: 1px solid rgba(255,255,255,.1);
}

input[type="text"].form-control,
input[type="text"].form-control:focus,
input[type="number"].form-control,
input[type="number"].form-control:focus,
input[type="password"].form-control,
input[type="password"].form-control:focus {
    background-color: #111f3b;
    color: #fff;
    border: 1px solid rgba(255,255,255,.1);
}

.modal-content {
    background: #0f1933;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .06);
}

.modal-header .close {
    color: #fff;
    opacity: 1;
    font-weight: normal;
}

.modal-header, .modal-footer {
    border-color: rgba(255, 255, 255, .06);
}