:root {
    --glass-bg: rgba(255, 255, 255, .22);
    --glass-bg-strong: rgba(255, 255, 255, .40);
    --glass-bg-frost: rgba(238, 247, 255, .42);
    --glass-bg-sidebar: rgba(244, 250, 255, .48);
    --glass-border: rgba(180, 220, 245, .35);
    --glass-border-dark: rgba(103, 130, 170, .16);
    --glass-shadow: 0 24px 70px rgba(33, 61, 105, .14), 0 2px 8px rgba(33, 61, 105, .06);
    --glass-text: #17233b;
    --glass-muted: #5e6d87;
    --glass-accent: #5d9fe8;
    --glass-accent-2: #55c5d3;
    --glass-radius: 22px;
    --card-tint: rgba(120, 180, 255, .06);
    --card-tint-strong: rgba(110, 200, 230, .08);
}

html {
    background: #eaf1ff;
}

html,
body {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

::selection {
    background: rgba(93, 159, 232, .28);
    color: #17233b;
}

body,
body.lyear-index,
body.center-vh {
    color: var(--glass-text);
    background:
        radial-gradient(circle at 12% 14%, rgba(255, 222, 200, .28), transparent 34rem),
        radial-gradient(circle at 88% 86%, rgba(192, 224, 250, .30), transparent 32rem),
        radial-gradient(circle at 50% 8%, rgba(232, 244, 252, .22), transparent 38rem),
        radial-gradient(circle at 8% 92%, rgba(214, 240, 230, .24), transparent 30rem),
        linear-gradient(135deg, #f0f6fc 0%, #f6faf8 48%, #eef6fb 100%);
    background-color: #f0f6fc;
    background-attachment: fixed;
}

.lyear-layout-sidebar {
    background: rgba(196, 222, 244, .22) !important;
    border: 0 !important;
    border-right: 1px solid rgba(130, 176, 218, .18) !important;
    border-radius: 0 !important;
    box-shadow:
        14px 0 56px rgba(33, 61, 105, .16),
        inset 1px 0 0 rgba(255, 255, 255, .65) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    overflow: hidden;
}

.lyear-layout-header {
    background: rgba(214, 232, 248, .28) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(130, 176, 218, .16) !important;
    border-radius: 0 !important;
    box-shadow:
        0 12px 40px rgba(33, 61, 105, .12),
        inset 0 -1px 0 rgba(255, 255, 255, .6) !important;
    backdrop-filter: blur(26px) saturate(175%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(175%) !important;
    overflow: visible;
}

.lyear-layout-sidebar,
.lyear-layout-header,
.card:not([class*="bg-"]),
.api-card,
.info-card,
.glass-card,
.modal-content,
.dropdown-menu,
.offcanvas,
.table-responsive,
.announcement-bar,
.alert,
.form-control,
.form-select,
.input-group-text,
.api-search-box {
    border-radius: var(--glass-radius);
    background:
        linear-gradient(140deg, rgba(255, 255, 255, .55) 0%, rgba(214, 234, 250, .42) 50%, rgba(196, 224, 244, .35) 100%) !important;
    border: 1px solid rgba(180, 220, 245, .38) !important;
    box-shadow:
        0 8px 28px rgba(45, 100, 155, .10),
        inset 0 1px 0 rgba(255, 255, 255, .65) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
}

.api-card .card-title,
.api-card .card-text {
    color: var(--glass-text);
}

.card.bg-primary,
.card.bg-pink,
.card.bg-success,
.card.bg-danger,
.card.bg-warning,
.card.bg-info {
    border: 1px solid rgba(255, 255, 255, .45) !important;
    box-shadow:
        0 12px 32px rgba(45, 100, 155, .18),
        inset 0 1px 0 rgba(255, 255, 255, .55) !important;
    backdrop-filter: blur(16px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(155%) !important;
}
.card.bg-primary {
    background: linear-gradient(140deg, rgba(120, 188, 232, .88) 0%, rgba(176, 222, 214, .82) 100%) !important;
}
.card.bg-pink {
    background: linear-gradient(140deg, rgba(236, 150, 195, .85) 0%, rgba(220, 180, 215, .78) 100%) !important;
}
.card.bg-success {
    background: linear-gradient(140deg, rgba(130, 210, 165, .85) 0%, rgba(170, 225, 195, .78) 100%) !important;
}
.card.bg-danger {
    background: linear-gradient(140deg, rgba(232, 145, 155, .85) 0%, rgba(230, 175, 180, .78) 100%) !important;
}

.lyear-layout-sidebar .sidebar-header,
.lyear-layout-sidebar .sidebar-footer,
.lyear-layout-sidebar .lyear-layout-sidebar-info,
.lyear-layout-sidebar .sidebar-main {
    background: transparent !important;
    border-color: rgba(130, 176, 218, .14) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.sidebar-main .nav-item > a,
.nav-link,
.dropdown-item,
.icon-item {
    border-radius: 14px;
    color: var(--glass-muted);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.navbar .nav > li > a,
.navbar-right .dropdown-toggle {
    color: var(--glass-muted);
    border-radius: 12px;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}

.navbar .nav > li > a:hover,
.navbar-right .dropdown-toggle:hover,
.navbar-right .dropdown-toggle[aria-expanded="true"] {
    color: #2879ba;
    background: linear-gradient(100deg, rgba(134, 194, 255, .20), rgba(119, 222, 218, .12));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}

.sidebar-main .nav-item > a:hover,
.sidebar-main .nav-item.active > a,
.nav-link:hover,
.nav-link.active,
.dropdown-item:hover {
    color: #2879ba;
    background: linear-gradient(100deg, rgba(134, 194, 255, .22), rgba(119, 222, 218, .14));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
    transform: translateX(2px);
}

.nav-drawer > li.active > a,
.nav-drawer > .active > a,
.nav-drawer > li.active > a:hover,
.nav-drawer > li.active > a:focus,
.nav-drawer > .active > a:hover,
.nav-drawer > .active > a:focus {
    border-right: 3px solid transparent !important;
    background-image:
        linear-gradient(90deg, transparent 70%, rgba(134, 194, 255, .35)),
        linear-gradient(100deg, rgba(134, 194, 255, .22), rgba(119, 222, 218, .14));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .35),
        inset -3px 0 0 0 rgba(134, 194, 255, .85),
        inset -3px 0 12px -2px rgba(119, 222, 218, .45) !important;
    transform: translateX(2px);
}

.nav-drawer .nav-subnav > li.active > a,
.nav-drawer .nav-subnav > li > a:hover {
    border-right: none !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .35),
        inset -3px 0 0 0 rgba(134, 194, 255, .75),
        inset -3px 0 10px -2px rgba(119, 222, 218, .40) !important;
}

.sidebar-header,
.sidebar-footer,
.navbar,
.card-header,
.card-footer {
    border-color: var(--glass-border-dark) !important;
}

.btn {
    position: relative;
    overflow: hidden;
    border-radius: 14px !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s cubic-bezier(.22,.61,.36,1), filter .25s ease, border-color .25s ease;
}

.btn:hover {
    transform: translateY(-3px);
}

.btn:active {
    transform: translateY(-1px) scale(.99);
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-25deg);
    pointer-events: none;
    transition: left .55s ease;
}

.btn:hover::before {
    left: 130%;
}

.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
    mix-blend-mode: overlay;
}

.btn-primary {
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    background:
        linear-gradient(135deg, rgba(120, 188, 232, .95) 0%, rgba(176, 222, 214, .95) 100%) !important;
    box-shadow:
        0 8px 22px rgba(72, 140, 194, .28),
        inset 0 1px 0 rgba(255, 255, 255, .55) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    color: #ffffff !important;
    filter: brightness(1.08) saturate(1.06);
    border-color: rgba(255, 255, 255, .7) !important;
    box-shadow:
        0 18px 36px rgba(72, 140, 194, .40),
        0 2px 8px rgba(72, 140, 194, .22),
        inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}

.btn-success {
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    background:
        linear-gradient(135deg, rgba(126, 217, 178, .95) 0%, rgba(176, 222, 196, .95) 100%) !important;
    box-shadow:
        0 8px 22px rgba(80, 180, 130, .28),
        inset 0 1px 0 rgba(255, 255, 255, .55) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
}

.btn-success:hover,
.btn-success:focus {
    color: #ffffff !important;
    filter: brightness(1.06) saturate(1.08);
    border-color: rgba(255, 255, 255, .7) !important;
    box-shadow:
        0 18px 36px rgba(80, 180, 130, .40),
        0 2px 8px rgba(80, 180, 130, .22),
        inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}

.btn-info {
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    background:
        linear-gradient(135deg, rgba(132, 210, 230, .95) 0%, rgba(168, 224, 224, .95) 100%) !important;
    box-shadow:
        0 8px 22px rgba(90, 170, 200, .28),
        inset 0 1px 0 rgba(255, 255, 255, .55) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
}

.btn-info:hover,
.btn-info:focus {
    color: #ffffff !important;
    filter: brightness(1.06) saturate(1.08);
    border-color: rgba(255, 255, 255, .7) !important;
    box-shadow:
        0 18px 36px rgba(90, 170, 200, .40),
        0 2px 8px rgba(90, 170, 200, .22),
        inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}

.btn-warning {
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    background:
        linear-gradient(135deg, rgba(244, 198, 132, .95) 0%, rgba(252, 220, 168, .95) 100%) !important;
    box-shadow:
        0 8px 22px rgba(220, 165, 90, .30),
        inset 0 1px 0 rgba(255, 255, 255, .55) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
}

.btn-warning:hover,
.btn-warning:focus {
    color: #ffffff !important;
    filter: brightness(1.06) saturate(1.08);
    border-color: rgba(255, 255, 255, .7) !important;
    box-shadow:
        0 18px 36px rgba(220, 165, 90, .42),
        0 2px 8px rgba(220, 165, 90, .24),
        inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}

.btn-danger {
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    background:
        linear-gradient(135deg, rgba(238, 138, 138, .95) 0%, rgba(240, 174, 174, .95) 100%) !important;
    box-shadow:
        0 8px 22px rgba(210, 100, 110, .30),
        inset 0 1px 0 rgba(255, 255, 255, .55) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
}

.btn-danger:hover,
.btn-danger:focus {
    color: #ffffff !important;
    filter: brightness(1.06) saturate(1.08);
    border-color: rgba(255, 255, 255, .7) !important;
    box-shadow:
        0 18px 36px rgba(210, 100, 110, .42),
        0 2px 8px rgba(210, 100, 110, .24),
        inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}

.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary {
    color: #2f5680 !important;
    border: 1px solid rgba(91, 126, 171, .42) !important;
    background:
        linear-gradient(140deg, rgba(255, 255, 255, .82) 0%, rgba(232, 244, 255, .62) 100%) !important;
    box-shadow:
        0 6px 18px rgba(45, 100, 155, .14),
        inset 0 1px 0 rgba(255, 255, 255, .85) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: #1d4a78 !important;
    border-color: rgba(72, 152, 220, .6) !important;
    background:
        linear-gradient(140deg, rgba(255, 255, 255, .96) 0%, rgba(220, 236, 252, .78) 100%) !important;
    box-shadow:
        0 16px 30px rgba(72, 152, 220, .28),
        0 2px 6px rgba(72, 152, 220, .16),
        inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

.btn-light {
    color: #2f5680 !important;
    border: 1px solid rgba(180, 220, 245, .45) !important;
    background:
        linear-gradient(140deg, rgba(255, 255, 255, .85), rgba(232, 244, 255, .65)) !important;
    box-shadow:
        0 6px 18px rgba(45, 100, 155, .12),
        inset 0 1px 0 rgba(255, 255, 255, .85) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
}

.btn:disabled,
.btn.disabled {
    filter: saturate(.5) brightness(1.05);
    opacity: .65;
    cursor: not-allowed;
}

.dropdown-menu {
    z-index: 1080;
    border-radius: 16px;
    padding: 6px;
    border: 1px solid rgba(180, 220, 245, .38) !important;
    box-shadow:
        0 18px 48px rgba(45, 100, 155, .20),
        inset 0 1px 0 rgba(255, 255, 255, .65) !important;
    backdrop-filter: blur(20px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(155%) !important;
}

.dropdown-menu.show {
    top: calc(100% + 4px);
}

.dropdown-menu-end.show {
    right: 0;
    left: auto;
}

.form-control,
.form-select {
    color: var(--glass-text);
    border-color: rgba(180, 220, 245, .55) !important;
    background:
        linear-gradient(140deg, rgba(255, 255, 255, .68) 0%, rgba(232, 244, 255, .48) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .85),
        0 4px 14px rgba(45, 100, 155, .08) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}

.form-control:focus,
.form-select:focus {
    color: var(--glass-text);
    border-color: rgba(66, 156, 224, .65) !important;
    background:
        linear-gradient(140deg, rgba(255, 255, 255, .92) 0%, rgba(232, 244, 255, .72) 100%) !important;
    box-shadow:
        0 0 0 4px rgba(93, 159, 232, .16),
        0 10px 28px rgba(93, 159, 232, .16),
        inset 0 1px 0 rgba(255, 255, 255, .85) !important;
}

.table,
.table > :not(caption) > * > * {
    color: var(--glass-text);
    background: transparent;
    border-color: var(--glass-border-dark);
}

.table-hover > tbody > tr:hover > * {
    background: rgba(116, 160, 255, .1);
}

.card > .list-group-flush > .list-group-item {
    background: transparent;
    border-color: var(--glass-border-dark);
    color: var(--glass-text);
    padding: 12px 18px;
}

.card > .list-group-flush > .list-group-item:hover {
    background: rgba(116, 160, 255, .08);
}

.modal-backdrop.show {
    opacity: .35;
    backdrop-filter: blur(6px);
}

.auth-wrapper,
.auth-box,
.signin-form,
.signup-form {
    border-radius: var(--glass-radius);
}

.auth-box,
body > .card {
    background:
        linear-gradient(140deg, rgba(255, 255, 255, .58) 0%, rgba(216, 234, 250, .42) 50%, rgba(196, 224, 244, .32) 100%) !important;
    border: 1px solid rgba(180, 220, 245, .38) !important;
    border-radius: var(--glass-radius);
    box-shadow:
        0 30px 90px rgba(34, 58, 104, .18),
        inset 0 1px 0 rgba(255, 255, 255, .7);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
}

body #sidebar {
    border-radius: 0 !important;
    box-shadow: 14px 0 48px rgba(33, 61, 105, .14) !important;
}

body #sidebar,
body .top-header,
body .main-header {
    background: rgba(247, 252, 255, .55) !important;
    border-color: rgba(130, 176, 218, .16) !important;
}

.huli-user-toggle {
    padding: 6px 12px;
    color: var(--glass-text);
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 12px;
    transition: background .2s ease, color .2s ease;
}

.huli-user-toggle:hover,
.huli-user-toggle[aria-expanded="true"] {
    background: linear-gradient(100deg, rgba(134, 194, 255, .22), rgba(119, 222, 218, .14));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
    color: #2879ba;
}

.huli-user-toggle::after {
    margin-left: auto;
    transition: transform .25s ease;
}

.huli-user-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.api-card:hover,
.info-card:hover,
.card:not([class*="bg-"]):hover {
    transform: translateY(-5px);
    border-color: rgba(140, 200, 245, .55) !important;
    box-shadow:
        0 26px 50px rgba(45, 100, 155, .22),
        0 4px 12px rgba(45, 100, 155, .10),
        inset 0 1px 0 rgba(255, 255, 255, .8);
}

@keyframes huli-float {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

.huli-float {
    animation: huli-float var(--float-duration, 4.6s) ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .huli-float,
    .api-card:hover,
    .info-card:hover {
        animation: none !important;
        transform: none !important;
    }
}

.floating-sidebar-btn .btn-float {
    background:
        linear-gradient(140deg, rgba(120, 188, 232, .55) 0%, rgba(176, 222, 214, .45) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    box-shadow:
        0 10px 28px rgba(72, 140, 194, .28),
        inset 0 1px 0 rgba(255, 255, 255, .65),
        inset 0 -1px 0 rgba(120, 188, 232, .25) !important;
    backdrop-filter: blur(16px) saturate(165%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(165%) !important;
}

.floating-sidebar-btn .btn-float:hover {
    background:
        linear-gradient(140deg, rgba(120, 188, 232, .72) 0%, rgba(176, 222, 214, .62) 100%) !important;
    filter: brightness(1.04);
}

.floating-sidebar-btn.is-dragging .btn-float {
    box-shadow:
        0 16px 36px rgba(72, 140, 194, .38),
        inset 0 1px 0 rgba(255, 255, 255, .7),
        inset 0 -1px 0 rgba(120, 188, 232, .35) !important;
}

body[data-theme='dark'] .floating-sidebar-btn .btn-float {
    background:
        linear-gradient(140deg, rgba(120, 188, 232, .32) 0%, rgba(176, 222, 214, .24) 100%) !important;
    border-color: rgba(255, 255, 255, .20) !important;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, .45),
        inset 0 1px 0 rgba(255, 255, 255, .22),
        inset 0 -1px 0 rgba(120, 188, 232, .22) !important;
}

@media (max-width: 768px) {
    :root { --glass-radius: 18px; }
    .content-wrapper { padding: 18px !important; }
    .top-header { padding: 34px 18px !important; }
    .api-grid { grid-template-columns: 1fr !important; }
    .lyear-layout-sidebar { box-shadow: 14px 0 50px rgba(33, 61, 105, .18); }
}

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

@supports not ((backdrop-filter: blur(1px))) {
    .lyear-layout-sidebar,
    .lyear-layout-header,
    .card:not([class*="bg-"]),
    .api-card,
    .info-card,
    .glass-card,
    .auth-box,
    .dropdown-menu,
    .offcanvas,
    .form-control,
    .form-select {
        background: rgba(244, 250, 255, .85) !important;
    }
}

body[data-theme='dark'] {
    --glass-text: #e6eef7;
    --glass-muted: #a8b8cc;
    --glass-bg-sidebar: rgba(28, 36, 52, .42);
    --glass-bg-frost: rgba(40, 48, 60, .58);
    color: var(--glass-text);
}

body[data-theme='dark'],
body[data-theme='dark'] .lyear-layout-container {
    background-color: #141a26 !important;
    background-image:
        radial-gradient(circle at 14% 16%, rgba(94, 130, 200, .26) 0%, transparent 55%),
        radial-gradient(circle at 86% 84%, rgba(110, 90, 180, .22) 0%, transparent 55%),
        radial-gradient(circle at 50% 100%, rgba(60, 120, 160, .16) 0%, transparent 65%),
        radial-gradient(circle at 92% 8%, rgba(120, 80, 140, .14) 0%, transparent 55%) !important;
}

body[data-theme='dark'] .lyear-layout-sidebar {
    background: rgba(28, 36, 52, .42) !important;
    border-right-color: rgba(160, 200, 230, .18) !important;
    box-shadow:
        14px 0 56px rgba(0, 0, 0, .45),
        inset 1px 0 0 rgba(255, 255, 255, .14) !important;
    backdrop-filter: blur(28px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(170%) !important;
}

body[data-theme='dark'] .lyear-layout-header {
    background: rgba(28, 36, 52, .42) !important;
    border-bottom-color: rgba(160, 200, 230, .16) !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, .40),
        inset 0 -1px 0 rgba(255, 255, 255, .14) !important;
    backdrop-filter: blur(26px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(170%) !important;
}

body[data-theme='dark'] .lyear-layout-sidebar,
body[data-theme='dark'] .lyear-layout-header,
body[data-theme='dark'] .card:not([class*="bg-"]),
body[data-theme='dark'] .api-card,
body[data-theme='dark'] .info-card,
body[data-theme='dark'] .glass-card,
body[data-theme='dark'] .modal-content,
body[data-theme='dark'] .dropdown-menu,
body[data-theme='dark'] .offcanvas,
body[data-theme='dark'] .form-control,
body[data-theme='dark'] .form-select {
    background:
        linear-gradient(140deg, rgba(48, 58, 74, .62) 0%, rgba(38, 48, 64, .55) 50%, rgba(32, 42, 58, .50) 100%) !important;
    border-color: rgba(120, 160, 200, .25) !important;
    box-shadow:
        0 12px 36px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

body[data-theme='dark'] .card.bg-primary,
body[data-theme='dark'] .card.bg-pink,
body[data-theme='dark'] .card.bg-success,
body[data-theme='dark'] .card.bg-danger,
body[data-theme='dark'] .card.bg-warning,
body[data-theme='dark'] .card.bg-info {
    background:
        linear-gradient(140deg,
            rgba(120, 188, 232, .45) 0%,
            rgba(176, 222, 214, .38) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .22) !important;
    backdrop-filter: blur(14px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
}
body[data-theme='dark'] .card.bg-pink {
    background: linear-gradient(140deg, rgba(236, 130, 180, .42) 0%, rgba(220, 170, 210, .34) 100%) !important;
}
body[data-theme='dark'] .card.bg-success {
    background: linear-gradient(140deg, rgba(120, 200, 150, .42) 0%, rgba(160, 220, 180, .34) 100%) !important;
}
body[data-theme='dark'] .card.bg-danger {
    background: linear-gradient(140deg, rgba(232, 120, 130, .42) 0%, rgba(220, 150, 160, .34) 100%) !important;
}

body[data-theme='dark'] .form-control,
body[data-theme='dark'] .form-select {
    color: var(--glass-text);
    background:
        linear-gradient(140deg, rgba(48, 58, 74, .72) 0%, rgba(38, 48, 64, .62) 100%) !important;
}

body[data-theme='dark'] .btn-secondary,
body[data-theme='dark'] .btn-outline-primary,
body[data-theme='dark'] .btn-outline-secondary,
body[data-theme='dark'] .btn-light {
    color: #c8d6e6 !important;
    border-color: rgba(160, 200, 230, .35) !important;
    background:
        linear-gradient(140deg, rgba(60, 72, 92, .78) 0%, rgba(44, 56, 78, .65) 100%) !important;
}

body[data-theme='dark'] .table,
body[data-theme='dark'] .table > :not(caption) > * > * {
    color: var(--glass-text);
    border-color: rgba(160, 200, 230, .18);
}

body[data-theme='dark'] .dropdown-item:hover,
body[data-theme='dark'] .nav-link:hover,
body[data-theme='dark'] .nav-link.active,
body[data-theme='dark'] .sidebar-main .nav-item > a:hover,
body[data-theme='dark'] .sidebar-main .nav-item.active > a {
    background: linear-gradient(100deg, rgba(120, 180, 232, .28), rgba(120, 200, 200, .20));
    color: #a8d4ee;
}

body[data-theme='dark'] .nav-drawer > li.active > a,
body[data-theme='dark'] .nav-drawer > .active > a,
body[data-theme='dark'] .nav-drawer > li.active > a:hover,
body[data-theme='dark'] .nav-drawer > .active > a:hover {
    border-right: 3px solid transparent !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .18),
        inset -3px 0 0 0 rgba(180, 220, 250, .85),
        inset -3px 0 14px -2px rgba(120, 180, 232, .55) !important;
    transform: translateX(2px);
}

body[data-theme='dark'] .nav-drawer .nav-subnav > li.active > a {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .16),
        inset -3px 0 0 0 rgba(180, 220, 250, .75),
        inset -3px 0 12px -2px rgba(120, 180, 232, .45) !important;
}