html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* ShaLuLa living theme */
:root {
    --shalula-ink: #2d2433;
    --shalula-plum: #73518c;
    --shalula-deep: #49345c;
    --shalula-rose: #d789a8;
    --shalula-mint: #91c9b4;
}

html {
    min-height: 100%;
}

body {
    background:
        radial-gradient(
            circle at 5% 20%,
            rgba(215, 137, 168, 0.22),
            transparent 32%
        ),
        radial-gradient(
            circle at 95% 65%,
            rgba(145, 201, 180, 0.24),
            transparent 35%
        ),
        linear-gradient(145deg, #fbf8fc, #f5f8f6);
    color: var(--shalula-ink);
    font-family:
        "Segoe UI Variable",
        "Segoe UI",
        system-ui,
        sans-serif;
    min-height: 100vh;
}

body::before,
body::after {
    border-radius: 999px;
    content: "";
    opacity: 0.18;
    pointer-events: none;
    position: fixed;
    z-index: -1;
}

body::before {
    animation: shalula-drift 18s ease-in-out infinite;
    background: #c6a6d8;
    height: 340px;
    left: 30%;
    top: -180px;
    width: 340px;
}

body::after {
    animation:
        shalula-drift 22s ease-in-out infinite reverse;
    background: #f0b698;
    bottom: -190px;
    height: 390px;
    right: 12%;
    width: 390px;
}

header .navbar {
    backdrop-filter: blur(18px);
    background:
        rgba(255, 255, 255, 0.76) !important;
    border-color:
        rgba(115, 81, 140, 0.13) !important;
}

.navbar-brand {
    color: var(--shalula-deep) !important;
    font-weight: 780;
    letter-spacing: -0.03em;
}

.navbar .nav-link,
.navbar .btn.nav-link {
    border-radius: 999px;
    color: #574c5d !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    transition:
        background-color 160ms ease,
        transform 160ms ease;
}

.navbar .nav-link:hover,
.navbar .btn.nav-link:hover {
    background: rgba(115, 81, 140, 0.09);
    transform: translateY(-1px);
}

body > .container {
    max-width: 1600px;
}

.btn {
    border-radius: 999px;
    font-weight: 650;
}

.btn-primary {
    background:
        linear-gradient(
            135deg,
            var(--shalula-plum),
            #9d6e96
        );
    border: 0;
    box-shadow:
        0 9px 22px rgba(115, 81, 140, 0.2);
}

.form-control,
.form-select {
    background-color: rgba(255, 255, 255, 0.84);
    border-color: rgba(115, 81, 140, 0.2);
    border-radius: 0.7rem;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(115, 81, 140, 0.55);
    box-shadow:
        0 0 0 0.22rem rgba(115, 81, 140, 0.13);
}

.footer {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.45);
    border-color:
        rgba(115, 81, 140, 0.12) !important;
}

@keyframes shalula-drift {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(80px, 45px, 0)
            scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ShaLuLa dusk refinement v2 */
:root{--sl-bg:#080b12;--sl-panel:rgba(17,23,36,.94);--sl-border:rgba(210,202,255,.13);--sl-text:#f3f1f8;--sl-muted:#a7adbd;--sl-purple:#b89aff;--sl-mint:#72d9c3}
html{color-scheme:dark}
body{color:var(--sl-text);background:radial-gradient(circle at 10% -10%,rgba(104,73,170,.22),transparent 34rem),radial-gradient(circle at 95% 10%,rgba(36,124,122,.12),transparent 30rem),var(--sl-bg)}
.navbar,.navbar-light,header .navbar{color:var(--sl-text);background:rgba(8,11,18,.9)!important;border-color:var(--sl-border)!important;backdrop-filter:blur(18px)}
.nav-link,.navbar-brand,.navbar-light .navbar-brand,.navbar-light .navbar-nav .nav-link{color:var(--sl-text)!important}
.nav-link:focus,.nav-link:hover{color:var(--sl-purple)!important}
.navbar-toggler{filter:invert(1)}
a{color:#cbbaff}
a:hover{color:#e0d6ff}
.form-text,.text-muted{color:var(--sl-muted)!important}
.atlas-card,.auth-card,.card,.table-responsive{color:var(--sl-text);background:var(--sl-panel)!important;border-color:var(--sl-border)!important}
.table{--bs-table-color:var(--sl-text);--bs-table-bg:transparent;--bs-table-border-color:var(--sl-border);--bs-table-striped-color:var(--sl-text);--bs-table-striped-bg:rgba(255,255,255,.025)}
.form-control,.form-select{color:var(--sl-text);background:#0d1420;border:1px solid rgba(200,203,220,.18);border-radius:.72rem}
.form-control:focus,.form-select:focus{color:#fff;background:#101827;border-color:var(--sl-purple);box-shadow:0 0 0 .2rem rgba(184,154,255,.14)}
.form-select option{color:var(--sl-text);background:#111827}
.form-check-input{background-color:#0d1420;border-color:rgba(200,203,220,.3)}
.form-check-input:checked{background-color:#9e77ff;border-color:#9e77ff}
.btn{border-radius:.7rem;font-weight:650}
.btn-primary{color:#0b0811;background:linear-gradient(135deg,#b89aff,#d8caff);border:0;box-shadow:0 8px 24px rgba(126,90,211,.22)}
.btn-primary:focus,.btn-primary:hover{color:#08060d;background:linear-gradient(135deg,#cab5ff,#e5dcff)}
.btn-outline-secondary{color:#d4d6df;border-color:rgba(204,207,221,.24)}
.btn-outline-secondary:focus,.btn-outline-secondary:hover{color:#fff;background:rgba(184,154,255,.12);border-color:rgba(184,154,255,.4)}
.footer,footer{color:var(--sl-muted)!important;background:rgba(8,11,18,.72);border-color:var(--sl-border)!important}



/* ShaLuLa VM performance v4 */
body::before,body::after{display:none!important;animation:none!important}
header .navbar,.navbar,.navbar-light,.footer,footer{backdrop-filter:none!important}
.navbar .nav-link,.navbar .btn.nav-link{transition:background-color 100ms ease!important}
.navbar .nav-link:hover,.navbar .btn.nav-link:hover{transform:none!important}