* {
        margin: 0;
        padding: 0;
        box-sizing: border-box
    }

    body {
        font-family: 'Inter', sans-serif;
        overflow-x: hidden
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: 'Plus Jakarta Sans', sans-serif
    }

    html,
    body {
        max-width: 100vw;
        overflow-x: hidden
    }

    ::-webkit-scrollbar {
        width: 6px;
        height: 6px
    }

    ::-webkit-scrollbar-track {
        background: transparent
    }

    ::-webkit-scrollbar-thumb {
        background: #94a3b8;
        border-radius: 3px
    }

    .dark ::-webkit-scrollbar-thumb {
        background: #475569
    }

    .glass {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2)
    }

    .dark .glass {
        background: rgba(17, 24, 39, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.05)
    }

    .glass-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(226, 232, 240, 0.8);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05)
    }

    .dark .glass-card {
        background: rgba(30, 41, 59, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.05)
    }

    .sidebar {
        transition: all .3s cubic-bezier(.4, 0, .2, 1)
    }

    .sidebar-overlay {
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px)
    }

    @keyframes shimmer {
        0% {
            background-position: -200% 0
        }

        100% {
            background-position: 200% 0
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0
        }

        to {
            opacity: 1
        }
    }

    @keyframes scaleIn {
        from {
            opacity: 0;
            transform: scale(.95)
        }

        to {
            opacity: 1;
            transform: scale(1)
        }
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(20px)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }

    @keyframes float {

        0%,
        100% {
            transform: translateY(0)
        }

        50% {
            transform: translateY(-10px)
        }
    }

    .skeleton {
        background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite
    }

    .dark .skeleton {
        background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
        background-size: 200% 100%
    }

    .animate-fadeIn {
        animation: fadeIn .3s ease
    }

    .animate-scaleIn {
        animation: scaleIn .3s ease
    }

    .animate-slideUp {
        animation: slideUp .4s ease
    }

    .float-animation {
        animation: float 4s ease-in-out infinite
    }

    .hover-lift {
        transition: all .3s cubic-bezier(.4, 0, .2, 1)
    }

    .hover-lift:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1)
    }

    .dark .hover-lift:hover {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3)
    }

    .gradient-text {
        background: linear-gradient(135deg, #4F46E5, #7C3AED);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text
    }

    .nav-item.active {
        background: linear-gradient(135deg, #4F46E5, #7C3AED);
        color: white
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }

    .icon-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 12px;
        cursor: pointer;
        position: relative;
        z-index: 1;
        transition: all .2s;
        border: none;
        outline: none;
        -webkit-tap-highlight-color: transparent
    }

    .icon-btn:active {
        transform: scale(.92)
    }

    .icon-btn svg {
        pointer-events: none
    }

    .icon-btn .badge-dot {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 9px;
        height: 9px;
        background: #EF4444;
        border-radius: 50%;
        border: 2px solid white
    }

    .dark .icon-btn .badge-dot {
        border-color: #111827
    }

    .slide-panel {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        height: 100dvh;
        z-index: 60;
        transform: translateX(100%);
        transition: transform .35s cubic-bezier(.4, 0, .2, 1);
        will-change: transform
    }

    .slide-panel.open {
        transform: translateX(0)
    }

    .panel-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(4px);
        z-index: 55;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s
    }

    .panel-overlay.active {
        opacity: 1;
        pointer-events: auto
    }

    @media(max-width:1023px) {
        .sidebar {
            transform: translateX(-100%);
            position: fixed;
            z-index: 50
        }

        .sidebar.open {
            transform: translateX(0)
        }
    }

    .dropdown-menu {
        position: absolute;
        right: 0;
        top: calc(100% + 8px);
        z-index: 50;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px) scale(.97);
        transition: all .2s cubic-bezier(.4, 0, .2, 1)
    }

    .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1)
    }

    .tab-content {
        display: none
    }

    .tab-content.active {
        display: block;
        animation: fadeIn .3s ease
    }

    .profile-tab {
        transition: all .2s;
        position: relative
    }

    .profile-tab.active {
        color: #4F46E5;
        font-weight: 600
    }

    .profile-tab.active::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 2px;
        background: #4F46E5;
        border-radius: 2px
    }

    .cover-gradient {
        background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #EC4899 100%);
        position: relative;
        overflow: hidden
    }

    .cover-gradient::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
        border-radius: 50%
    }

    .cover-gradient::after {
        content: '';
        position: absolute;
        bottom: -30%;
        left: -10%;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
        border-radius: 50%
    }

    .progress-ring {
        transform: rotate(-90deg)
    }

    .progress-ring circle {
        transition: stroke-dashoffset 1s ease
    }

    .custom-checkbox {
        accent-color: #4F46E5;
        width: 16px;
        height: 16px;
        cursor: pointer;
        border-radius: 4px
    }

    .achievement-card {
        transition: all .3s
    }

    .achievement-card:hover {
        transform: translateY(-4px) rotate(-2deg)
    }

    .timeline-item {
        position: relative;
        padding-left: 32px
    }

    .timeline-item::before {
        content: '';
        position: absolute;
        left: 11px;
        top: 32px;
        bottom: -16px;
        width: 2px;
        background: #e2e8f0
    }

    .dark .timeline-item::before {
        background: #334155
    }

    .timeline-item:last-child::before {
        display: none
    }

    .timeline-dot {
        position: absolute;
        left: 0;
        top: 8px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1
    }

    @supports(padding-bottom:env(safe-area-inset-bottom)) {
        .mobile-safe {
            padding-bottom: env(safe-area-inset-bottom)
        }
    }

    .quick-action-btn {
        transition: all .2s
    }

    .quick-action-btn:hover {
        transform: scale(1.03)
    }

    .quick-action-btn:active {
        transform: scale(.97)
    }