.wrapper,
.login-shell,
.main-panel,
.card,
.dropdown-menu,
.form-control,
.form-select {
    color: #1f2937;
    font-family: Arial, "Helvetica Neue", sans-serif;
}

.form-control,
.form-control:focus,
.form-select,
.form-select:focus {
    color: #1f2937 !important;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #dfe4ec;
    border-radius: 8px;
    color: #374151;
    background: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.theme-toggle:hover {
    border-color: #1572e8;
    color: #1572e8;
    background: #f4f8ff;
}

.theme-toggle-item {
    display: flex;
    align-items: center;
    margin-right: 8px;
}

.theme-toggle-floating {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 1050;
    box-shadow: 0 8px 24px rgba(31, 45, 61, .14);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .wrapper,
html[data-theme="dark"] .login-shell,
html[data-theme="dark"] .main-panel,
html[data-theme="dark"] .main-panel > .container {
    color: #e5e7eb;
    background-color: #111827;
}

html[data-theme="dark"] .app-header,
html[data-theme="dark"] .navbar-header,
html[data-theme="dark"] .main-header,
html[data-theme="dark"] .card,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .login-card {
    color: #e5e7eb;
    border-color: #2b3546 !important;
    background-color: #1b2433 !important;
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .border-bottom {
    border-color: #303b4d !important;
}

html[data-theme="dark"] .page-title,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .login-card .brand-wordmark,
html[data-theme="dark"] .profile-username,
html[data-theme="dark"] .dropdown-item {
    color: #f3f4f6 !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .card-category,
html[data-theme="dark"] .dropdown-title,
html[data-theme="dark"] small {
    color: #9ca3af !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] .input-group-text {
    color: #f3f4f6 !important;
    border-color: #3b4658 !important;
    background-color: #111827 !important;
}

html[data-theme="dark"] .form-control::placeholder {
    color: #6b7280;
}

html[data-theme="dark"] .form-control[readonly] {
    background-color: #182131 !important;
}

html[data-theme="dark"] .input-icon .input-icon-addon {
    color: #9ca3af;
}

html[data-theme="dark"] .table {
    --bs-table-color: #e5e7eb;
    --bs-table-bg: transparent;
    --bs-table-hover-color: #f9fafb;
    --bs-table-hover-bg: rgba(255, 255, 255, .045);
    color: #e5e7eb;
}

html[data-theme="dark"] .table > :not(caption) > * > * {
    color: inherit;
    border-color: #303b4d;
    background-color: transparent;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    color: #fff !important;
    background-color: #283448;
}

html[data-theme="dark"] .dropdown-divider {
    border-color: #303b4d;
}

html[data-theme="dark"] .payment-method {
    color: #e5e7eb;
    border-color: #3b4658;
    background: #151e2c;
}

html[data-theme="dark"] .pagination .page-link {
    color: #bfdbfe;
    border-color: #3b4658;
    background-color: #1b2433;
}

html[data-theme="dark"] .pagination .active .page-link {
    color: #fff;
    border-color: #1572e8;
    background-color: #1572e8;
}

html[data-theme="dark"] .btn-light {
    color: #e5e7eb !important;
    border-color: #465268;
    background: #253145;
}

html[data-theme="dark"] .alert-warning {
    color: #fde68a;
    border-color: #6b5420;
    background: #352c17;
}

html[data-theme="dark"] .alert-success {
    color: #a7f3d0;
    border-color: #28634e;
    background: #173a30;
}

html[data-theme="dark"] .alert-danger {
    color: #fecaca;
    border-color: #713544;
    background: #421f29;
}

html[data-theme="dark"] .theme-toggle {
    color: #dbeafe;
    border-color: #465268;
    background: #253145;
}

html[data-theme="dark"] .theme-toggle:hover {
    color: #fff;
    border-color: #60a5fa;
    background: #2d3a50;
}

html[data-theme="dark"] .login-shell {
    background:
        radial-gradient(circle at 16% 18%, rgba(37, 99, 235, .18), transparent 30%),
        radial-gradient(circle at 84% 82%, rgba(22, 163, 74, .12), transparent 28%),
        #0b1120;
}

html[data-theme="dark"] .soft-panel {
    box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .empty-state {
    color: #7f8ba0;
}

.input-icon {
    position: relative;
}

.input-icon .input-icon-addon {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 3;
    transform: translateY(-50%);
    color: #4b5563;
}

.input-icon .form-control {
    padding-left: 42px !important;
}

.login-card .input-icon > .form-control {
    padding-left: 48px !important;
}

.btn-primary,
.btn-danger,
.btn-success,
.btn-info,
.btn-warning,
.btn-secondary {
    color: #fff !important;
}

.brand-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .2px;
    text-decoration: none;
}

.login-card .brand-wordmark {
    color: #1f2937 !important;
}

.sidebar .brand-wordmark,
.logo-header[data-background-color="dark"] .brand-wordmark {
    color: #fff !important;
}

.brand-wordmark .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1572e8, #31ce36);
    box-shadow: 0 8px 18px rgba(21, 114, 232, .28);
    background-size: 180% 180%;
    animation: brandPulse 6s ease infinite;
}

.quick-stat {
    min-height: 132px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
    isolation: isolate;
}

.quick-stat::after {
    content: "";
    position: absolute;
    right: -36px;
    bottom: -48px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    transition: transform .35s ease;
}

.quick-stat::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .22) 45%, transparent 70%);
    transform: translateX(-130%);
    animation: statSweep 4.8s ease-in-out infinite;
}

.quick-stat .card-body {
    position: relative;
    z-index: 1;
}

.quick-stat:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 18px 38px rgba(21, 114, 232, .22);
    filter: saturate(1.05);
}

.quick-stat:hover::after {
    transform: scale(1.15) translate(-8px, -8px);
}

.soft-panel {
    border: 0;
    box-shadow: 0 8px 28px rgba(31, 45, 61, .08);
    transform: translateZ(0);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.soft-panel:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(31, 45, 61, .12);
}

.empty-state {
    display: flex;
    min-height: 150px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #8d9498;
}

.empty-state i {
    font-size: 34px;
    margin-bottom: 10px;
    opacity: .55;
    animation: emptyFloat 3.2s ease-in-out infinite;
}

.payment-method {
    border: 1px solid #e5e8ef;
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.payment-method:hover,
.payment-method:has(input:checked) {
    border-color: #1572e8;
    box-shadow: 0 12px 30px rgba(21, 114, 232, .12);
    transform: translateY(-1px);
}

.payment-logo {
    max-width: 110px;
    max-height: 54px;
    object-fit: contain;
}

.login-shell {
    min-height: 100vh;
    background:
        linear-gradient(120deg, rgba(21, 114, 232, .12), rgba(49, 206, 54, .10), rgba(104, 97, 206, .12)),
        radial-gradient(circle at top left, rgba(21, 114, 232, .20), transparent 30%),
        radial-gradient(circle at bottom right, rgba(49, 206, 54, .16), transparent 28%),
        #f5f7fb;
    background-size: 220% 220%, 100% 100%, 100% 100%;
    animation: loginFlow 14s ease infinite;
}

.login-card {
    width: min(440px, calc(100vw - 32px));
    border: 0;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(31, 45, 61, .14);
    animation: cardRise .7s cubic-bezier(.2, .8, .2, 1) both;
}

.table > :not(caption) > * > * {
    vertical-align: middle;
}

.page-inner > *,
.motion-reveal {
    animation: revealUp .58s cubic-bezier(.2, .8, .2, 1) both;
}

.page-inner > *:nth-child(1) { animation-delay: .03s; }
.page-inner > *:nth-child(2) { animation-delay: .10s; }
.page-inner > *:nth-child(3) { animation-delay: .17s; }
.page-inner > *:nth-child(4) { animation-delay: .24s; }
.page-inner > *:nth-child(5) { animation-delay: .31s; }

.sidebar .nav > .nav-item > a {
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, background-color .18s ease;
}

.sidebar .nav > .nav-item > a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
    transform: translateX(-130%);
    transition: transform .55s ease;
}

.sidebar .nav > .nav-item > a:hover {
    transform: translateX(4px);
}

.sidebar .nav > .nav-item > a:hover::after,
.sidebar .nav > .nav-item.active > a::after {
    transform: translateX(130%);
}

.btn {
    position: relative;
    overflow: hidden;
}

.btn-ripple {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    pointer-events: none;
    background: rgba(255, 255, 255, .45);
    transform: translate(-50%, -50%) scale(0);
    animation: ripplePop .58s ease-out forwards;
}

.btn-primary,
.bg-primary-gradient,
.card-primary {
    background-size: 180% 180% !important;
    animation: gradientDrift 8s ease infinite;
}

.zonedata {
    animation: zoneIn .28s ease both;
}

.topbar-icon .notification {
    animation: notifyPulse 2.4s ease-in-out infinite;
}

@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes cardRise {
    from {
        opacity: 0;
        transform: translateY(22px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes loginFlow {
    0%, 100% { background-position: 0% 45%, center, center; }
    50% { background-position: 100% 55%, center, center; }
}

@keyframes brandPulse {
    0%, 100% { background-position: 0% 50%; box-shadow: 0 8px 18px rgba(21, 114, 232, .28); }
    50% { background-position: 100% 50%; box-shadow: 0 12px 26px rgba(49, 206, 54, .28); }
}

@keyframes statSweep {
    0%, 55% { transform: translateX(-130%); }
    78%, 100% { transform: translateX(130%); }
}

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

@keyframes ripplePop {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(26);
    }
}

@keyframes gradientDrift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes zoneIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes notifyPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(242, 89, 97, .28); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(242, 89, 97, 0); }
}

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

@media (max-width: 575.98px) {
    .page-inner {
        padding-left: 14px;
        padding-right: 14px;
    }

    .card-title,
    .page-title {
        line-height: 1.25;
    }
}

/* Focused motion: animate state changes only, never the whole page continuously. */
.motion-focused .ambient-layer,
.motion-focused .cursor-aura,
.motion-focused .floating-motion-control,
.motion-focused .page-transition,
.motion-focused .motion-particle,
.motion-focused .main-panel::before,
.motion-focused .main-panel::after,
.motion-focused .login-shell::before,
.motion-focused .login-shell::after {
    display: none !important;
}

.motion-focused.login-shell,
.motion-focused .login-shell,
.motion-focused .login-card,
.motion-focused .brand-mark,
.motion-focused .brand-mark i,
.motion-focused .quick-stat,
.motion-focused .quick-stat::before,
.motion-focused .quick-stat::after,
.motion-focused .quick-stat .card-title,
.motion-focused .quick-stat .icon-big,
.motion-focused .quick-stat .icon-big::before,
.motion-focused .quick-stat .icon-big i,
.motion-focused .quick-stat .numbers,
.motion-focused .btn-primary,
.motion-focused .btn-primary i,
.motion-focused .topbar-icon > .nav-link > i,
.motion-focused .topbar-icon .notification,
.motion-focused .avatar-title,
.motion-focused .avatar-title i,
.motion-focused .empty-state i,
.motion-focused .page-inner > .row,
.motion-focused .page-inner > .card,
.motion-focused .form-control,
.motion-focused .form-select {
    animation: none !important;
}

.motion-focused .page-inner > *,
.motion-focused .motion-reveal,
.motion-focused .progressive-glow {
    animation: none !important;
}

.motion-focused .quick-stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(21, 114, 232, .18);
}

.motion-focused .quick-stat:hover .icon-big i {
    transform: translateY(-2px) scale(1.08);
}

.motion-focused .btn-primary {
    background-image: linear-gradient(110deg, #1572e8, #48abf7, #6861ce) !important;
    background-size: 100% 100% !important;
}

.motion-focused .btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
}

.motion-focused .sidebar .nav > .nav-item.active > a i {
    animation: none !important;
}

.motion-focused .sidebar .nav > .nav-item > a:hover i {
    transform: translateY(-1px) scale(1.1);
}

.motion-focused .form-control:focus,
.motion-focused .form-select:focus {
    animation: none !important;
    box-shadow: 0 0 0 4px rgba(21, 114, 232, .08), 0 10px 24px rgba(21, 114, 232, .08);
}

.motion-focused .dropdown-menu.show {
    animation: dropdownSpring .24s cubic-bezier(.2, .85, .25, 1.1) both;
}

.motion-focused .zonedata[style*="display: block"] {
    animation: zoneIn .24s ease both;
}

/* Curated ambient motion: always-on only for small visual accents. */
.motion-focused .brand-mark {
    animation: brandPulse 7s ease infinite !important;
}

.motion-focused .brand-mark i {
    animation: iconBrandFloat 3.8s ease-in-out infinite !important;
}

.motion-focused .quick-stat .icon-big {
    animation: focusedIconFloat 4.8s ease-in-out infinite !important;
}

.motion-focused .col-sm-6:nth-child(2) .quick-stat .icon-big {
    animation-delay: -1.2s !important;
}

.motion-focused .col-sm-6:nth-child(3) .quick-stat .icon-big {
    animation-delay: -2.4s !important;
}

.motion-focused .col-sm-6:nth-child(4) .quick-stat .icon-big {
    animation-delay: -3.6s !important;
}

.motion-focused .quick-stat .icon-big::before {
    animation: focusedIconRing 4.8s ease-in-out infinite !important;
}

.motion-focused .quick-stat .icon-big i {
    animation: focusedIconGlyph 4.8s ease-in-out infinite !important;
}

.motion-focused .quick-stat::before {
    animation: focusedStatSweep 7.5s ease-in-out infinite !important;
}

.motion-focused .topbar-icon > .nav-link > i {
    animation: focusedBell 5.5s ease-in-out infinite !important;
}

.motion-focused .topbar-icon .notification {
    animation: notifyPulse 3.2s ease-in-out infinite !important;
}

.motion-focused .avatar-title {
    background-size: 180% 180% !important;
    animation: avatarGradient 7s ease infinite !important;
}

.motion-focused .avatar-title i {
    animation: avatarIconFloat 3.8s ease-in-out infinite !important;
}

.motion-focused .btn-primary {
    background-size: 180% 100% !important;
    animation: focusedButtonGradient 8s ease infinite !important;
}

.motion-focused .soft-panel {
    border: 1px solid rgba(21, 114, 232, .07);
    animation: focusedPanelBorder 9s ease-in-out infinite !important;
}

.motion-focused .empty-state i {
    animation: focusedEmptyFloat 4s ease-in-out infinite !important;
}

@keyframes focusedIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes focusedIconRing {
    0%, 100% { opacity: .28; transform: scale(.94); }
    50% { opacity: .7; transform: scale(1.08); }
}

@keyframes focusedIconGlyph {
    0%, 100% { transform: rotate(0) scale(1); }
    50% { transform: rotate(-4deg) scale(1.06); }
}

@keyframes focusedStatSweep {
    0%, 68% { transform: translateX(-135%); }
    88%, 100% { transform: translateX(135%); }
}

@keyframes focusedBell {
    0%, 78%, 100% { transform: rotate(0); }
    84% { transform: rotate(10deg); }
    90% { transform: rotate(-8deg); }
    95% { transform: rotate(4deg); }
}

@keyframes focusedButtonGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes focusedPanelBorder {
    0%, 100% {
        border-color: rgba(21, 114, 232, .07);
        box-shadow: 0 8px 28px rgba(31, 45, 61, .08);
    }
    50% {
        border-color: rgba(104, 97, 206, .14);
        box-shadow: 0 10px 30px rgba(104, 97, 206, .08);
    }
}

@keyframes focusedEmptyFloat {
    0%, 100% { transform: translateY(0); opacity: .55; }
    50% { transform: translateY(-5px); opacity: .75; }
}

/* Requested full motion. Page-transition remains disabled. */
body.motion-focused.motion-showcase .ambient-layer,
body.motion-focused.motion-showcase .cursor-aura,
body.motion-focused.motion-showcase .motion-particle {
    display: block !important;
}

body.motion-focused.motion-showcase .main-panel::before,
body.motion-focused.motion-showcase .main-panel::after,
body.motion-focused.motion-showcase .login-shell::before,
body.motion-focused.motion-showcase .login-shell::after {
    display: block !important;
}

body.motion-focused.motion-showcase .page-inner > * {
    animation: revealUp .58s cubic-bezier(.2, .8, .2, 1) both !important;
}

body.motion-focused.motion-showcase .page-inner > *:nth-child(1) {
    animation-delay: .03s !important;
}

body.motion-focused.motion-showcase .page-inner > *:nth-child(2) {
    animation-delay: .10s !important;
}

body.motion-focused.motion-showcase .page-inner > *:nth-child(3) {
    animation-delay: .17s !important;
}

body.motion-focused.motion-showcase .page-inner > *:nth-child(4) {
    animation-delay: .24s !important;
}

body.motion-focused.motion-showcase .page-inner > *:nth-child(5) {
    animation-delay: .31s !important;
}

body.motion-focused.motion-max .page-inner > .row {
    animation: sectionBreath 10s ease-in-out infinite !important;
}

body.motion-focused.motion-max .page-inner > .row:nth-of-type(2) {
    animation-delay: -3.3s !important;
}

body.motion-focused.motion-max .page-inner > .card {
    animation: standaloneCardBreath 9s ease-in-out infinite !important;
}

body.motion-focused.motion-showcase .motion-reveal {
    animation: revealUp .48s cubic-bezier(.2, .8, .2, 1) both !important;
}

body.motion-focused.motion-showcase .progressive-glow {
    animation: progressiveGlow .7s ease both !important;
}

body.motion-focused .page-transition,
body.motion-focused.motion-showcase .page-transition,
body.motion-focused.motion-max .page-transition {
    display: none !important;
}

/* Motion v2: ambient animation and compact sidebar polish */
.wrapper {
    background: #f5f7fb;
}

.main-panel {
    position: relative;
    overflow: visible !important;
}

.main-panel > .container,
.main-panel > .container-fluid {
    position: relative;
    z-index: 2;
}

.main-header {
    position: fixed !important;
    z-index: 1001;
}

.main-panel::before,
.main-panel::after {
    content: "";
    position: fixed;
    z-index: 0;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(18px);
    opacity: .42;
}

.main-panel::before {
    top: 92px;
    right: 7%;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(21, 114, 232, .18), transparent 68%);
    animation: ambientOrbA 16s ease-in-out infinite;
}

.main-panel::after {
    bottom: 8%;
    left: 18%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(49, 206, 54, .16), transparent 70%);
    animation: ambientOrbB 19s ease-in-out infinite;
}

.ambient-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none !important;
    overflow: hidden;
}

.login-shell .ambient-layer {
    position: fixed;
    z-index: 0;
}

.login-card {
    position: relative;
    z-index: 1;
}

.ambient-dot {
    position: absolute;
    width: var(--dot-size, 8px);
    height: var(--dot-size, 8px);
    left: var(--dot-x, 50%);
    top: var(--dot-y, 50%);
    border-radius: 999px;
    background: var(--dot-color, rgba(21, 114, 232, .18));
    box-shadow: 0 0 26px var(--dot-glow, rgba(21, 114, 232, .20));
    animation: ambientDot var(--dot-speed, 12s) ease-in-out infinite;
    animation-delay: var(--dot-delay, 0s);
}

.ambient-line {
    position: absolute;
    width: 180px;
    height: 1px;
    left: var(--line-x, 20%);
    top: var(--line-y, 30%);
    background: linear-gradient(90deg, transparent, rgba(21, 114, 232, .20), transparent);
    transform: rotate(var(--line-rotate, -18deg));
    animation: ambientLine var(--line-speed, 11s) ease-in-out infinite;
    animation-delay: var(--line-delay, 0s);
}

.brand-wordmark {
    white-space: nowrap;
}

.brand-wordmark span:last-child {
    transition: opacity .22s ease, transform .22s ease, max-width .22s ease;
}

.sidebar {
    box-shadow: 8px 0 32px rgba(9, 14, 30, .12);
}

.sidebar .sidebar-wrapper {
    transition: width .28s ease;
}

.sidebar .nav > .nav-item > a i {
    transition: transform .22s ease, margin .22s ease, color .22s ease;
}

.sidebar .nav > .nav-item.active > a i,
.sidebar .nav > .nav-item > a:hover i {
    transform: translateY(-1px) scale(1.08);
}

.sidebar_minimize:not(.sidebar_minimize_hover) .sidebar .brand-wordmark {
    width: 44px;
    justify-content: center;
}

.sidebar_minimize:not(.sidebar_minimize_hover) .sidebar .brand-wordmark span:last-child {
    max-width: 0;
    opacity: 0;
    transform: translateX(-8px);
    overflow: hidden;
}

.sidebar_minimize:not(.sidebar_minimize_hover) .sidebar .brand-mark {
    width: 38px;
    height: 38px;
}

.sidebar_minimize:not(.sidebar_minimize_hover) .sidebar .nav > .nav-item > a {
    justify-content: center;
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 16px;
    overflow: visible;
}

.sidebar_minimize:not(.sidebar_minimize_hover) .sidebar .nav > .nav-item > a i {
    margin-right: 0 !important;
    font-size: 18px;
}

.sidebar_minimize:not(.sidebar_minimize_hover) .sidebar .nav > .nav-item > a[data-nav-label]::before {
    content: attr(data-nav-label);
    position: fixed;
    left: 84px;
    top: var(--nav-tip-y, 120px);
    z-index: 4000;
    padding: 8px 11px;
    border-radius: 10px;
    background: #111827;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-50%) translateX(-8px) scale(.96);
    pointer-events: none;
    box-shadow: 0 14px 30px rgba(17, 24, 39, .22);
    transition: opacity .16s ease, transform .16s ease;
}

.sidebar_minimize:not(.sidebar_minimize_hover) .sidebar .nav > .nav-item > a:hover[data-nav-label]::before {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1);
}

.sidebar_minimize.sidebar_minimize_hover .sidebar {
    box-shadow: 16px 0 46px rgba(9, 14, 30, .20);
}

.sidebar_minimize.sidebar_minimize_hover .sidebar .brand-wordmark span:last-child,
.sidebar_minimize.sidebar_minimize_hover .sidebar .nav > .nav-item > a p {
    animation: sidebarTextIn .24s ease both;
}

.quick-stat .card-title {
    animation: numberBreath 4.8s ease-in-out infinite;
}

.soft-panel {
    position: relative;
    overflow: hidden;
}

.soft-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 20%, rgba(21, 114, 232, .06), transparent 70%);
    opacity: 0;
    transform: translateX(-30%);
    transition: opacity .22s ease;
}

.soft-panel:hover::before {
    opacity: 1;
    animation: panelSheen 1.15s ease;
}

.login-shell {
    position: relative;
    overflow: hidden;
}

.login-shell::before,
.login-shell::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(26px);
    opacity: .28;
}

.login-shell::before {
    top: 12%;
    left: 18%;
    background: radial-gradient(circle, rgba(21, 114, 232, .28), transparent 70%);
    animation: loginOrbA 18s ease-in-out infinite;
}

.login-shell::after {
    right: 15%;
    bottom: 10%;
    background: radial-gradient(circle, rgba(49, 206, 54, .25), transparent 70%);
    animation: loginOrbB 20s ease-in-out infinite;
}

.navbar-header {
    backdrop-filter: blur(12px);
}

.brand-mark i {
    animation: iconBrandFloat 3.4s ease-in-out infinite;
}

.sidebar .nav > .nav-item > a i {
    color: #79b8ff;
    filter: drop-shadow(0 0 8px rgba(21, 114, 232, .18));
}

.sidebar .nav > .nav-item:nth-of-type(2) > a i {
    color: #63e6be;
}

.sidebar .nav > .nav-item:nth-of-type(3) > a i {
    color: #ffd43b;
}

.sidebar .nav > .nav-item:nth-of-type(4) > a i {
    color: #ff8787;
}

.sidebar .nav > .nav-item:nth-of-type(5) > a i {
    color: #b197fc;
}

.sidebar .nav > .nav-item:nth-of-type(6) > a i {
    color: #74c0fc;
}

.sidebar .nav > .nav-item.active > a i {
    color: #fff;
    animation: activeNavIcon 2.8s ease-in-out infinite;
}

.quick-stat .icon-big {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    animation: statIconContainer 4.6s ease-in-out infinite;
}

.quick-stat .icon-big::before {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: -1;
    border-radius: 21px;
    border: 1px solid rgba(255, 255, 255, .24);
    animation: iconOrbitRing 3.6s ease-in-out infinite;
}

.quick-stat .icon-big i {
    color: #fff !important;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .16));
    animation: statIconFloat 3.2s ease-in-out infinite;
}

.quick-stat:nth-child(2n) .icon-big,
.col-sm-6:nth-child(2n) .quick-stat .icon-big {
    animation-delay: -.8s;
}

.quick-stat:nth-child(3n) .icon-big,
.col-sm-6:nth-child(3n) .quick-stat .icon-big {
    animation-delay: -1.6s;
}

.btn-primary {
    border: 0;
    background-image: linear-gradient(110deg, #1572e8, #48abf7, #6861ce, #1572e8) !important;
    background-size: 260% 100% !important;
    box-shadow: 0 10px 24px rgba(21, 114, 232, .22);
    animation: colorfulButton 5.4s linear infinite;
}

.btn-primary:hover {
    box-shadow: 0 14px 32px rgba(104, 97, 206, .30);
    transform: translateY(-2px);
}

.btn-primary i {
    animation: buttonIconSpark 2.7s ease-in-out infinite;
    filter: drop-shadow(0 0 7px rgba(255, 255, 255, .42));
}

.btn-label-primary i,
.btn-light i {
    color: #1572e8;
    animation: utilityIconSpin 5.8s ease-in-out infinite;
}

.topbar-icon > .nav-link > i {
    color: #6861ce;
    animation: bellDance 4.4s ease-in-out infinite;
    filter: drop-shadow(0 3px 6px rgba(104, 97, 206, .24));
}

.avatar-title {
    background-image: linear-gradient(135deg, #1572e8, #48abf7, #6861ce) !important;
    background-size: 180% 180%;
    animation: avatarGradient 5s ease infinite;
    box-shadow: 0 8px 20px rgba(21, 114, 232, .24);
}

.avatar-title i {
    animation: avatarIconFloat 3s ease-in-out infinite;
}

.nav-search .input-group {
    transition: transform .2s ease, box-shadow .2s ease;
}

.nav-search .input-group.focus,
.nav-search .input-group:focus-within {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(21, 114, 232, .10);
}

.table tbody tr {
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.table tbody tr:hover {
    transform: translateX(3px);
    background-color: rgba(21, 114, 232, .035);
    box-shadow: inset 3px 0 0 rgba(21, 114, 232, .28);
}

@keyframes ambientOrbA {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    45% { transform: translate3d(-42px, 34px, 0) scale(1.14); }
    70% { transform: translate3d(18px, 68px, 0) scale(.94); }
}

@keyframes ambientOrbB {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    40% { transform: translate3d(54px, -28px, 0) scale(1.12); }
    75% { transform: translate3d(-26px, -62px, 0) scale(.96); }
}

@keyframes ambientDot {
    0%, 100% {
        opacity: .18;
        transform: translate3d(0, 0, 0) scale(.9);
    }
    48% {
        opacity: .72;
        transform: translate3d(var(--dot-dx, 22px), var(--dot-dy, -28px), 0) scale(1.25);
    }
}

@keyframes ambientLine {
    0%, 100% {
        opacity: 0;
        transform: translateX(-34px) rotate(var(--line-rotate, -18deg));
    }
    40%, 68% {
        opacity: .72;
    }
    72% {
        transform: translateX(54px) rotate(var(--line-rotate, -18deg));
    }
}

@keyframes loginOrbA {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(40px, 34px, 0) scale(1.18); }
}

@keyframes loginOrbB {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-48px, -26px, 0) scale(1.14); }
}

@keyframes sidebarTextIn {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes numberBreath {
    0%, 100% { transform: translateY(0); filter: brightness(1); }
    50% { transform: translateY(-1px); filter: brightness(1.08); }
}

@keyframes panelSheen {
    from { transform: translateX(-45%); }
    to { transform: translateX(45%); }
}

@keyframes iconBrandFloat {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-2px) rotate(4deg); }
}

@keyframes activeNavIcon {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, .18));
    }
    50% {
        transform: translateY(-2px) scale(1.12);
        filter: drop-shadow(0 0 9px rgba(255, 255, 255, .48));
    }
}

@keyframes statIconContainer {
    0%, 100% {
        transform: translateY(0) rotate(0);
        background-color: rgba(255, 255, 255, .14);
    }
    50% {
        transform: translateY(-4px) rotate(-2deg);
        background-color: rgba(255, 255, 255, .22);
    }
}

@keyframes iconOrbitRing {
    0%, 100% {
        opacity: .35;
        transform: rotate(0) scale(.96);
    }
    50% {
        opacity: .85;
        transform: rotate(180deg) scale(1.08);
    }
}

@keyframes statIconFloat {
    0%, 100% { transform: translateY(0) rotate(0) scale(1); }
    45% { transform: translateY(-3px) rotate(-5deg) scale(1.06); }
    70% { transform: translateY(1px) rotate(3deg) scale(.98); }
}

@keyframes colorfulButton {
    from { background-position: 0 50%; }
    to { background-position: 260% 50%; }
}

@keyframes buttonIconSpark {
    0%, 100% { transform: rotate(0) scale(1); }
    45% { transform: rotate(7deg) scale(1.12); }
    60% { transform: rotate(-4deg) scale(1.04); }
}

@keyframes utilityIconSpin {
    0%, 78%, 100% { transform: rotate(0); }
    86% { transform: rotate(180deg); }
}

@keyframes bellDance {
    0%, 72%, 100% { transform: rotate(0); }
    78% { transform: rotate(13deg); }
    84% { transform: rotate(-11deg); }
    90% { transform: rotate(7deg); }
}

@keyframes avatarGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes avatarIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-layer,
    .main-panel::before,
    .main-panel::after,
    .login-shell::before,
    .login-shell::after {
        display: none !important;
    }
}

/* Interaction safety: ambient motion must never block page scroll/click. */
html,
body {
    min-height: 100%;
    overflow-y: auto !important;
}

.wrapper {
    overflow-x: hidden;
}

.main-panel {
    overflow: visible !important;
}

.main-panel > .container,
.main-panel > .container-full {
    margin-top: 70px !important;
}

.page-inner {
    padding-top: 16px !important;
}

.ambient-layer,
.ambient-layer *,
.main-panel::before,
.main-panel::after,
.login-shell::before,
.login-shell::after {
    pointer-events: none !important;
}

@media (max-width: 991.98px) {
    .main-panel > .container,
    .main-panel > .container-full {
        margin-top: 70px !important;
    }

    .topbar_open .main-panel > .container,
    .topbar_open .main-panel > .container-full {
        margin-top: 123px !important;
    }
}

/* Motion showcase: visual-only effects, isolated from KaiAdmin layout. */
.motion-showcase .main-panel {
    background-image:
        linear-gradient(rgba(21, 114, 232, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21, 114, 232, .025) 1px, transparent 1px);
    background-size: 34px 34px;
    animation: gridDrift 26s linear infinite;
}

.motion-showcase .navbar-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, #1572e8, #31ce36, #6861ce, transparent);
    background-size: 220% 100%;
    opacity: .7;
    animation: headerScan 5s linear infinite;
}

.motion-showcase .page-title {
    display: inline-block;
    color: transparent !important;
    background: linear-gradient(100deg, #1f2937 10%, #1572e8 42%, #6861ce 58%, #1f2937 90%);
    background-size: 240% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    animation: titleShimmer 7s ease-in-out infinite;
}

.motion-showcase .page-title::after {
    content: "";
    display: block;
    width: 38%;
    height: 3px;
    margin-top: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #1572e8, #31ce36, #6861ce);
    transform-origin: left;
    animation: titleUnderline 3.8s ease-in-out infinite;
}

.motion-showcase .card {
    --motion-card-x: 50%;
    --motion-card-y: 50%;
}

.motion-showcase .soft-panel {
    border: 1px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(120deg, rgba(21, 114, 232, .22), rgba(49, 206, 54, .16), rgba(104, 97, 206, .22)) border-box;
    background-size: 100% 100%, 240% 240%;
    animation: panelBorderFlow 10s ease infinite;
}

.motion-showcase .soft-panel::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    left: calc(var(--motion-card-x) - 90px);
    top: calc(var(--motion-card-y) - 90px);
    pointer-events: none;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(21, 114, 232, .10), transparent 68%);
    opacity: 0;
    transform: scale(.72);
    transition: opacity .25s ease, transform .25s ease;
}

.motion-showcase .soft-panel:hover::after {
    opacity: 1;
    transform: scale(1);
}

.motion-showcase .quick-stat {
    animation: statCardHoverLoop 7s ease-in-out infinite;
}

.motion-showcase .col-sm-6:nth-child(2) .quick-stat {
    animation-delay: -1.4s;
}

.motion-showcase .col-sm-6:nth-child(3) .quick-stat {
    animation-delay: -2.8s;
}

.motion-showcase .col-sm-6:nth-child(4) .quick-stat {
    animation-delay: -4.2s;
}

.motion-showcase .quick-stat .numbers {
    animation: statTextFloat 5s ease-in-out infinite;
}

.motion-showcase .quick-stat .card-category {
    position: relative;
}

.motion-showcase .quick-stat .card-category::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 24px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    animation: statLabelLine 3.6s ease-in-out infinite;
}

.motion-showcase .icon-big .motion-particle,
.motion-showcase .brand-mark .motion-particle,
.motion-showcase .avatar-title .motion-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    pointer-events: none;
    background: currentColor;
    opacity: 0;
    animation: iconParticle 3.8s ease-out infinite;
}

.motion-showcase .motion-particle:nth-child(2) {
    animation-delay: -1.25s;
}

.motion-showcase .motion-particle:nth-child(3) {
    animation-delay: -2.5s;
}

.motion-showcase .brand-mark,
.motion-showcase .avatar-title,
.motion-showcase .icon-big {
    position: relative;
}

.motion-showcase .sidebar::after {
    content: "";
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 28%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(72, 171, 247, .08), transparent);
    animation: sidebarLightPass 9s ease-in-out infinite;
}

.motion-showcase .sidebar .nav > .nav-item.active > a {
    background-image: linear-gradient(100deg, rgba(21, 114, 232, .36), rgba(104, 97, 206, .20), rgba(49, 206, 54, .18));
    background-size: 220% 100%;
    animation: activeNavGradient 6s ease infinite;
}

.motion-showcase .sidebar .nav > .nav-item.active > a::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 20%;
    width: 3px;
    height: 60%;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 12px rgba(255, 255, 255, .72);
    animation: navIndicatorPulse 2.6s ease-in-out infinite;
}

.motion-showcase .nav-search .input-group::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(90deg, #1572e8, #31ce36, #6861ce, #1572e8);
    background-size: 240% 100%;
    opacity: 0;
    filter: blur(5px);
    transition: opacity .2s ease;
    animation: inputBorderFlow 5s linear infinite;
}

.motion-showcase .nav-search .input-group:focus-within::after {
    opacity: .42;
}

.motion-showcase .form-control:focus,
.motion-showcase .form-select:focus {
    border-color: rgba(21, 114, 232, .58);
    box-shadow: 0 0 0 4px rgba(21, 114, 232, .08), 0 10px 24px rgba(21, 114, 232, .08);
    animation: inputFocusPulse 2.8s ease-in-out infinite;
}

.motion-showcase .chart-container {
    position: relative;
}

.motion-showcase .chart-container::before {
    content: "";
    position: absolute;
    inset: 8% 4%;
    pointer-events: none;
    border-radius: 18px;
    background: radial-gradient(circle at 50% 100%, rgba(21, 114, 232, .08), transparent 62%);
    animation: chartAura 7s ease-in-out infinite;
}

.motion-showcase .empty-state {
    position: relative;
}

.motion-showcase .empty-state::before,
.motion-showcase .empty-state::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    border: 1px solid rgba(21, 114, 232, .10);
    pointer-events: none;
    animation: emptyRing 4.5s ease-out infinite;
}

.motion-showcase .empty-state::before {
    width: 74px;
    height: 74px;
}

.motion-showcase .empty-state::after {
    width: 104px;
    height: 104px;
    animation-delay: -2.25s;
}

.motion-showcase .table thead {
    position: relative;
    background: linear-gradient(90deg, rgba(21, 114, 232, .025), rgba(104, 97, 206, .035), rgba(49, 206, 54, .025));
    background-size: 220% 100%;
    animation: tableHeaderFlow 8s linear infinite;
}

.motion-showcase .badge,
.motion-showcase .notification {
    isolation: isolate;
}

.motion-showcase .notification::after {
    content: "";
    position: absolute;
    inset: -5px;
    z-index: -1;
    border-radius: 999px;
    border: 1px solid rgba(49, 206, 54, .5);
    animation: notificationRing 2.2s ease-out infinite;
}

.motion-showcase .btn::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -30%;
    width: 24%;
    height: 340%;
    pointer-events: none;
    background: rgba(255, 255, 255, .28);
    transform: rotate(18deg);
    animation: buttonAutoShine 5.2s ease-in-out infinite;
}

.motion-showcase .dropdown-menu.show {
    animation: dropdownSpring .32s cubic-bezier(.2, .85, .25, 1.15) both;
}

.motion-showcase .ambient-dot {
    mix-blend-mode: multiply;
}

.motion-showcase .cursor-aura {
    position: fixed;
    z-index: 0;
    width: 280px;
    height: 280px;
    left: 0;
    top: 0;
    pointer-events: none;
    border-radius: 999px;
    opacity: .45;
    background: radial-gradient(circle, rgba(21, 114, 232, .09), rgba(104, 97, 206, .04) 38%, transparent 70%);
    transform: translate3d(calc(var(--cursor-x, -400px) - 140px), calc(var(--cursor-y, -400px) - 140px), 0);
    transition: transform .14s ease-out, opacity .2s ease;
}

.motion-showcase.motion-idle .cursor-aura {
    opacity: .18;
}

@keyframes gridDrift {
    from { background-position: 0 0, 0 0; }
    to { background-position: 34px 34px, 34px 34px; }
}

@keyframes headerScan {
    from { background-position: 220% 0; }
    to { background-position: -20% 0; }
}

@keyframes titleShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes titleUnderline {
    0%, 100% { transform: scaleX(.55); opacity: .58; }
    50% { transform: scaleX(1.2); opacity: 1; }
}

@keyframes panelBorderFlow {
    0%, 100% { background-position: 0 0, 0% 50%; }
    50% { background-position: 0 0, 100% 50%; }
}

@keyframes statCardHoverLoop {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes statTextFloat {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(2px); }
}

@keyframes statLabelLine {
    0%, 100% { width: 18px; opacity: .42; }
    50% { width: 42px; opacity: .92; }
}

@keyframes iconParticle {
    0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.4); }
    22% { opacity: .8; }
    100% { opacity: 0; transform: translate3d(var(--particle-x, 18px), var(--particle-y, -22px), 0) scale(1.25); }
}

@keyframes sidebarLightPass {
    0%, 15% { transform: translateY(-100%); opacity: 0; }
    40%, 62% { opacity: 1; }
    85%, 100% { transform: translateY(520%); opacity: 0; }
}

@keyframes activeNavGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes navIndicatorPulse {
    0%, 100% { transform: scaleY(.72); opacity: .55; }
    50% { transform: scaleY(1.15); opacity: 1; }
}

@keyframes inputBorderFlow {
    from { background-position: 0% 50%; }
    to { background-position: 240% 50%; }
}

@keyframes inputFocusPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(21, 114, 232, .08), 0 10px 24px rgba(21, 114, 232, .08); }
    50% { box-shadow: 0 0 0 6px rgba(104, 97, 206, .07), 0 14px 30px rgba(104, 97, 206, .10); }
}

@keyframes chartAura {
    0%, 100% { opacity: .35; transform: scale(.96); }
    50% { opacity: .9; transform: scale(1.03); }
}

@keyframes emptyRing {
    0% { opacity: 0; transform: scale(.55); }
    30% { opacity: .5; }
    100% { opacity: 0; transform: scale(1.3); }
}

@keyframes tableHeaderFlow {
    from { background-position: 0% 50%; }
    to { background-position: 220% 50%; }
}

@keyframes notificationRing {
    from { opacity: .75; transform: scale(.7); }
    to { opacity: 0; transform: scale(1.45); }
}

@keyframes buttonAutoShine {
    0%, 58% { transform: translateX(-220%) rotate(18deg); }
    78%, 100% { transform: translateX(620%) rotate(18deg); }
}

@keyframes dropdownSpring {
    from { opacity: 0; transform: translateY(-8px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 767.98px) {
    .motion-showcase .cursor-aura,
    .motion-showcase .ambient-line:nth-of-type(n+3) {
        display: none;
    }

    .motion-showcase .quick-stat {
        animation-duration: 9s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .motion-showcase .cursor-aura,
    .motion-showcase .motion-particle {
        display: none !important;
    }
}

.motion-paused *,
.motion-paused *::before,
.motion-paused *::after {
    animation-play-state: paused !important;
}

/* Motion max: additional visual effects without changing layout geometry. */
.motion-max .main-panel > .container::before {
    content: "";
    position: fixed;
    inset: 70px 0 0 265px;
    z-index: -1;
    pointer-events: none;
    opacity: .28;
    background:
        radial-gradient(circle at 14% 22%, rgba(72, 171, 247, .12) 0 2px, transparent 3px),
        radial-gradient(circle at 72% 16%, rgba(49, 206, 54, .10) 0 2px, transparent 3px),
        radial-gradient(circle at 84% 72%, rgba(104, 97, 206, .10) 0 2px, transparent 3px);
    background-size: 110px 110px, 150px 150px, 190px 190px;
    animation: starField 32s linear infinite;
}

.motion-max.sidebar_minimize .main-panel > .container::before {
    left: 75px;
}

.motion-max .quick-stat::after {
    animation: statBubbleMorph 7.5s ease-in-out infinite;
}

.motion-max .quick-stat .card-body::after {
    content: "";
    position: absolute;
    left: -18%;
    right: -18%;
    bottom: -46px;
    height: 72px;
    pointer-events: none;
    border-radius: 42% 58% 0 0 / 62% 68% 0 0;
    background: rgba(255, 255, 255, .10);
    animation: statWave 6s ease-in-out infinite;
}

.motion-max .col-sm-6:nth-child(2) .quick-stat .card-body::after {
    animation-delay: -1.5s;
}

.motion-max .col-sm-6:nth-child(3) .quick-stat .card-body::after {
    animation-delay: -3s;
}

.motion-max .col-sm-6:nth-child(4) .quick-stat .card-body::after {
    animation-delay: -4.5s;
}

.motion-max .quick-stat .card-title[data-motion-ready] {
    display: inline-block;
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    animation: counterGlow 3.8s ease-in-out infinite;
}

.motion-max .sidebar .nav > .nav-item > a i::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 999px;
    border: 1px dashed currentColor;
    opacity: 0;
    animation: iconOrbit 6s linear infinite;
}

.motion-max .sidebar .nav > .nav-item.active > a i::after {
    opacity: .36;
}

.motion-max .sidebar .nav > .nav-item > a i {
    position: relative;
}

.motion-max .sidebar .nav > .nav-item > a:hover i::after {
    opacity: .45;
}

.motion-max .topbar-user .profile-pic {
    position: relative;
}

.motion-max .topbar-user .profile-pic::before {
    content: "";
    position: absolute;
    inset: -4px -6px;
    z-index: -1;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(21, 114, 232, .10), rgba(104, 97, 206, .10), rgba(49, 206, 54, .10));
    background-size: 220% 100%;
    opacity: .35;
    animation: profileHalo 6s ease infinite;
}

.motion-max .page-inner > .row {
    transform-origin: center top;
    animation: sectionBreath 10s ease-in-out infinite;
}

.motion-max .page-inner > .row:nth-of-type(2) {
    animation-delay: -3.3s;
}

.motion-max .page-inner > .card {
    animation: standaloneCardBreath 9s ease-in-out infinite;
}

.motion-max .card-header .card-title {
    position: relative;
    display: inline-block;
}

.motion-max .card-header .card-title::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -5px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #1572e8, #31ce36, #6861ce);
    animation: cardTitleTrace 6s ease-in-out infinite;
}

.motion-max .form-control,
.motion-max .form-select {
    background-image: linear-gradient(90deg, transparent 0%, rgba(21, 114, 232, .025) 48%, transparent 100%);
    background-size: 220% 100%;
    animation: inputAmbient 9s ease-in-out infinite;
}

.motion-max .payment-method {
    position: relative;
    overflow: hidden;
}

.motion-max .payment-method::after {
    content: "";
    position: absolute;
    inset: -60%;
    pointer-events: none;
    background: conic-gradient(from 0deg, transparent, rgba(21, 114, 232, .12), transparent 28%);
    animation: paymentOrbit 8s linear infinite;
}

.motion-max .payment-method > * {
    position: relative;
    z-index: 1;
}

.motion-max .table tbody tr td:first-child::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 5px;
    border-radius: 999px;
    background: #1572e8;
    opacity: .22;
    animation: rowDotPulse 3.4s ease-in-out infinite;
}

.motion-max .page-transition {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(135deg, rgba(21, 114, 232, .96), rgba(104, 97, 206, .96)),
        #1572e8;
    transform: scaleY(0);
    transform-origin: bottom;
}

.motion-max.motion-leaving .page-transition {
    pointer-events: auto;
    animation: pageCover .34s cubic-bezier(.7, 0, .3, 1) forwards;
}

.motion-max .page-transition::before {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    left: 50%;
    top: 50%;
    margin: -30px;
    border: 4px solid rgba(255, 255, 255, .28);
    border-top-color: #fff;
    border-radius: 999px;
    animation: transitionSpinner .7s linear infinite;
}

.motion-max .floating-motion-control {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #1572e8, #6861ce, #31ce36);
    background-size: 180% 180%;
    box-shadow: 0 12px 30px rgba(21, 114, 232, .28);
    animation: motionControlFloat 4s ease-in-out infinite, avatarGradient 7s ease infinite;
}

.motion-max .floating-motion-control i {
    animation: motionControlIcon 5s linear infinite;
}

.motion-max .floating-motion-control::after {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(21, 114, 232, .24);
    border-radius: 19px;
    animation: motionControlRing 3s ease-out infinite;
}

.motion-max .floating-motion-control:hover {
    transform: translateY(-3px) scale(1.04);
}

.motion-max .progressive-glow {
    animation: progressiveGlow .7s ease both;
}

.motion-max.motion-manual-paused *,
.motion-max.motion-manual-paused *::before,
.motion-max.motion-manual-paused *::after {
    animation-play-state: paused !important;
}

.motion-max.motion-manual-paused .floating-motion-control,
.motion-max.motion-manual-paused .floating-motion-control *,
.motion-max.motion-manual-paused .page-transition,
.motion-max.motion-manual-paused .page-transition * {
    animation-play-state: running !important;
}

@keyframes starField {
    from { background-position: 0 0, 0 0, 0 0; }
    to { background-position: 110px 110px, -150px 150px, 190px -190px; }
}

@keyframes statBubbleMorph {
    0%, 100% { border-radius: 50%; transform: scale(1) translate(0, 0); }
    35% { border-radius: 42% 58% 48% 52%; transform: scale(1.08) translate(-5px, -4px); }
    70% { border-radius: 58% 42% 54% 46%; transform: scale(.96) translate(4px, -8px); }
}

@keyframes statWave {
    0%, 100% { transform: translateX(-4%) rotate(-1deg); }
    50% { transform: translateX(5%) rotate(1deg); }
}

@keyframes counterGlow {
    0%, 100% { text-shadow: 0 0 0 rgba(255, 255, 255, 0); transform: scale(1); }
    50% { text-shadow: 0 0 14px rgba(255, 255, 255, .45); transform: scale(1.035); }
}

@keyframes iconOrbit {
    from { transform: rotate(0) scale(.9); }
    to { transform: rotate(360deg) scale(.9); }
}

@keyframes profileHalo {
    0%, 100% { background-position: 0% 50%; transform: scale(.96); }
    50% { background-position: 100% 50%; transform: scale(1.04); }
}

@keyframes sectionBreath {
    0%, 100% { filter: saturate(1); }
    50% { filter: saturate(1.035); }
}

@keyframes standaloneCardBreath {
    0%, 100% { box-shadow: 0 8px 28px rgba(31, 45, 61, .08); }
    50% { box-shadow: 0 12px 34px rgba(21, 114, 232, .10); }
}

@keyframes cardTitleTrace {
    0%, 18% { right: 100%; left: 0; opacity: 0; }
    38%, 62% { right: 0; left: 0; opacity: .8; }
    82%, 100% { right: 0; left: 100%; opacity: 0; }
}

@keyframes inputAmbient {
    0%, 100% { background-position: 220% 0; }
    50% { background-position: -20% 0; }
}

@keyframes paymentOrbit {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}

@keyframes rowDotPulse {
    0%, 100% { opacity: .18; transform: scale(.75); }
    50% { opacity: .65; transform: scale(1.2); }
}

@keyframes pageCover {
    from { opacity: 0; transform: scaleY(0); }
    to { opacity: 1; transform: scaleY(1); }
}

@keyframes transitionSpinner {
    to { transform: rotate(360deg); }
}

@keyframes motionControlFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes motionControlIcon {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}

@keyframes motionControlRing {
    0% { opacity: .55; transform: scale(.82); }
    100% { opacity: 0; transform: scale(1.35); }
}

@keyframes progressiveGlow {
    from { filter: brightness(.96); }
    50% { filter: brightness(1.08); }
    to { filter: brightness(1); }
}

@media (max-width: 991.98px) {
    .motion-max .main-panel > .container::before {
        left: 0;
    }
}

@media (max-width: 575.98px) {
    .motion-max .floating-motion-control {
        right: 14px;
        bottom: 14px;
        width: 42px;
        height: 42px;
    }

    .motion-max .page-inner > .row {
        animation: none;
    }
}

/* Theme overrides stay last so motion decoration cannot restore light surfaces. */
html[data-theme="dark"] .motion-showcase .soft-panel {
    background:
        linear-gradient(#1b2433, #1b2433) padding-box,
        linear-gradient(120deg, rgba(59, 130, 246, .38), rgba(34, 197, 94, .20), rgba(129, 140, 248, .34)) border-box;
}

html[data-theme="dark"] .motion-showcase .soft-panel::after {
    background: radial-gradient(circle, rgba(59, 130, 246, .12), transparent 68%);
}

html[data-theme="dark"] .motion-max .card:not(.card-primary) {
    color: #e5e7eb;
    border-color: #303b4d !important;
    background-color: #1b2433 !important;
}

html[data-theme="dark"] .motion-max .card:not(.card-primary) .card-body,
html[data-theme="dark"] .motion-max .card:not(.card-primary) .card-header {
    background-color: transparent !important;
}