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

 body {
     font-family: 'Inter', sans-serif
 }

 .font-jakarta {
     font-family: 'Plus Jakarta Sans', sans-serif
 }

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

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

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

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

 .sidebar-scroll::-webkit-scrollbar {
     width: 4px
 }

 .sidebar-scroll::-webkit-scrollbar-thumb {
     background: rgba(148, 163, 184, .3);
     border-radius: 2px
 }

 .glass {
     background: rgba(255, 255, 255, .7);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px)
 }

 .dark .glass {
     background: rgba(15, 23, 42, .7)
 }

 .glass-card {
     background: rgba(255, 255, 255, .8);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border: 1px solid rgba(226, 232, 240, .8)
 }

 .dark .glass-card {
     background: rgba(30, 41, 59, .8);
     border: 1px solid rgba(51, 65, 85, .6)
 }

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

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

 @keyframes pulse-soft {

     0%,
     100% {
         opacity: 1
     }

     50% {
         opacity: .7
     }
 }

 @keyframes slideInRight {
     from {
         opacity: 0;
         transform: translateX(20px)
     }

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

 .animate-fadeInUp {
     animation: fadeInUp .5s ease-out forwards
 }

 .animate-slideInRight {
     animation: slideInRight .4s ease-out forwards
 }

 .stagger-1 {
     animation-delay: .05s
 }

 .stagger-2 {
     animation-delay: .1s
 }

 .stagger-3 {
     animation-delay: .15s
 }

 .stagger-4 {
     animation-delay: .2s
 }

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

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

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

 .gradient-text {
     background: linear-gradient(135deg, #6366f1, #8b5cf6, #a78bfa);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text
 }

 .nav-active {
     background: linear-gradient(135deg, rgba(99, 102, 241, .12), rgba(139, 92, 246, .08));
     border-right: 3px solid #6366f1;
     color: #6366f1
 }

 .dark .nav-active {
     background: linear-gradient(135deg, rgba(99, 102, 241, .2), rgba(139, 92, 246, .12));
     color: #818cf8;
     border-color: #818cf8
 }

 .notification-dot {
     position: absolute;
     top: -2px;
     right: -2px;
     width: 10px;
     height: 10px;
     background: #ef4444;
     border-radius: 50%;
     border: 2px solid #fff;
     animation: pulse-soft 2s infinite
 }

 .dark .notification-dot {
     border-color: #0f172a
 }

 .dropdown-enter {
     opacity: 0;
     transform: translateY(-8px) scale(.96);
     transition: all .2s cubic-bezier(.4, 0, .2, 1);
     pointer-events: none
 }

 .dropdown-enter.active {
     opacity: 1;
     transform: translateY(0) scale(1);
     pointer-events: auto
 }

 .sidebar-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .5);
     z-index: 40;
     opacity: 0;
     pointer-events: none;
     transition: opacity .3s ease
 }

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

 .kpi-gradient-1 {
     background: linear-gradient(135deg, #6366f1, #8b5cf6)
 }

 .kpi-gradient-2 {
     background: linear-gradient(135deg, #06b6d4, #3b82f6)
 }

 .kpi-gradient-3 {
     background: linear-gradient(135deg, #10b981, #059669)
 }

 .kpi-gradient-4 {
     background: linear-gradient(135deg, #f59e0b, #ef4444)
 }

 .chart-container {
     position: relative;
     width: 100%;
     min-height: 280px
 }

 @media(max-width:640px) {
     .chart-container {
         min-height: 220px
     }
 }

 .table-row-hover {
     transition: background .15s ease
 }

 .table-row-hover:hover {
     background: rgba(99, 102, 241, .04)
 }

 .dark .table-row-hover:hover {
     background: rgba(99, 102, 241, .08)
 }

 .badge-success {
     background: #ecfdf5;
     color: #059669
 }

 .dark .badge-success {
     background: rgba(16, 185, 129, .15);
     color: #34d399
 }

 .badge-warning {
     background: #fffbeb;
     color: #d97706
 }

 .dark .badge-warning {
     background: rgba(245, 158, 11, .15);
     color: #fbbf24
 }

 .badge-danger {
     background: #fef2f2;
     color: #dc2626
 }

 .dark .badge-danger {
     background: rgba(239, 68, 68, .15);
     color: #f87171
 }

 .badge-info {
     background: #eff6ff;
     color: #2563eb
 }

 .dark .badge-info {
     background: rgba(59, 130, 246, .15);
     color: #60a5fa
 }

 .badge-purple {
     background: #f5f3ff;
     color: #7c3aed
 }

 .dark .badge-purple {
     background: rgba(124, 58, 237, .15);
     color: #a78bfa
 }

 .modal-backdrop {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .6);
     backdrop-filter: blur(4px);
     z-index: 100;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     pointer-events: none;
     transition: opacity .3s ease;
     padding: 16px
 }

 .modal-backdrop.active {
     opacity: 1;
     pointer-events: auto
 }

 .modal-content {
     background: #fff;
     border-radius: 16px;
     padding: 24px;
     max-width: 560px;
     width: 100%;
     max-height: calc(100vh - 32px);
     overflow-y: auto;
     transform: scale(.95) translateY(10px);
     transition: transform .3s ease
 }

 .modal-backdrop.active .modal-content {
     transform: scale(1) translateY(0)
 }

 .dark .modal-content {
     background: #1e293b
 }

 .live-indicator {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: #10b981;
     animation: pulse-soft 1.5s infinite
 }

 /* Activities-specific */
 .timeline-item {
     position: relative;
     padding-left: 52px;
     padding-bottom: 24px
 }

 .timeline-item:last-child {
     padding-bottom: 0
 }

 .timeline-item::before {
     content: '';
     position: absolute;
     left: 19px;
     top: 40px;
     bottom: 0;
     width: 2px;
     background: linear-gradient(to bottom, #e2e8f0, transparent);
 }

 .dark .timeline-item::before {
     background: linear-gradient(to bottom, #334155, transparent)
 }

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

 .timeline-icon {
     position: absolute;
     left: 0;
     top: 0;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     flex-shrink: 0;
     z-index: 2;
     box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
 }

 .ti-create {
     background: linear-gradient(135deg, #10b981, #059669)
 }

 .ti-update {
     background: linear-gradient(135deg, #6366f1, #4f46e5)
 }

 .ti-delete {
     background: linear-gradient(135deg, #ef4444, #dc2626)
 }

 .ti-login {
     background: linear-gradient(135deg, #06b6d4, #0891b2)
 }

 .ti-share {
     background: linear-gradient(135deg, #8b5cf6, #7c3aed)
 }

 .ti-comment {
     background: linear-gradient(135deg, #f59e0b, #d97706)
 }

 .ti-payment {
     background: linear-gradient(135deg, #10b981, #059669)
 }

 .ti-alert {
     background: linear-gradient(135deg, #ec4899, #f43f5e)
 }

 .ti-download {
     background: linear-gradient(135deg, #3b82f6, #2563eb)
 }

 .ti-upload {
     background: linear-gradient(135deg, #14b8a6, #0d9488)
 }

 .ti-invite {
     background: linear-gradient(135deg, #f97316, #ea580c)
 }

 .ti-approve {
     background: linear-gradient(135deg, #10b981, #059669)
 }

 .activity-card {
     transition: all .25s cubic-bezier(.4, 0, .2, 1);
     cursor: pointer;
 }

 .activity-card:hover {
     background: rgba(99, 102, 241, .03);
     border-color: rgba(99, 102, 241, .2)
 }

 .dark .activity-card:hover {
     background: rgba(99, 102, 241, .06);
     border-color: rgba(99, 102, 241, .3)
 }

 .type-pill {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     padding: 2px 8px;
     border-radius: 6px;
     font-size: 10px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .5px;
 }

 .tp-create {
     background: #ecfdf5;
     color: #059669
 }

 .dark .tp-create {
     background: rgba(16, 185, 129, .15);
     color: #34d399
 }

 .tp-update {
     background: #eff6ff;
     color: #2563eb
 }

 .dark .tp-update {
     background: rgba(59, 130, 246, .15);
     color: #60a5fa
 }

 .tp-delete {
     background: #fef2f2;
     color: #dc2626
 }

 .dark .tp-delete {
     background: rgba(239, 68, 68, .15);
     color: #f87171
 }

 .tp-security {
     background: #fff7ed;
     color: #ea580c
 }

 .dark .tp-security {
     background: rgba(234, 88, 12, .15);
     color: #fdba74
 }

 .tp-payment {
     background: #f0fdf4;
     color: #16a34a
 }

 .dark .tp-payment {
     background: rgba(22, 163, 74, .15);
     color: #86efac
 }

 .tp-social {
     background: #faf5ff;
     color: #7c3aed
 }

 .dark .tp-social {
     background: rgba(124, 58, 237, .15);
     color: #a78bfa
 }

 .date-divider {
     display: flex;
     align-items: center;
     gap: 12px;
     margin: 20px 0 12px;
 }

 .date-divider::before,
 .date-divider::after {
     content: '';
     flex: 1;
     height: 1px;
     background: #e2e8f0;
 }

 .dark .date-divider::before,
 .dark .date-divider::after {
     background: #334155
 }

 .date-divider-label {
     padding: 4px 12px;
     background: #f1f5f9;
     border-radius: 9999px;
     font-size: 11px;
     font-weight: 600;
     color: #64748b;
 }

 .dark .date-divider-label {
     background: #1e293b;
     color: #94a3b8
 }

 .live-badge {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     padding: 3px 10px;
     border-radius: 9999px;
     font-size: 10px;
     font-weight: 700;
     background: rgba(16, 185, 129, .15);
     color: #059669;
 }

 .dark .live-badge {
     background: rgba(16, 185, 129, .2);
     color: #34d399
 }

 .filter-chip {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     padding: 6px 12px;
     border-radius: 9999px;
     font-size: 11px;
     font-weight: 600;
     border: 1px solid #e2e8f0;
     transition: all .2s ease;
     cursor: pointer;
     white-space: nowrap;
 }

 .dark .filter-chip {
     border-color: #334155
 }

 .filter-chip:hover {
     background: #f1f5f9
 }

 .dark .filter-chip:hover {
     background: #1e293b
 }

 .filter-chip.active {
     background: #6366f1;
     color: #fff;
     border-color: #6366f1
 }

 .mini-timeline-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     flex-shrink: 0;
     box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
 }

 .dark .mini-timeline-dot {
     box-shadow: 0 0 0 3px rgba(15, 23, 42, .9)
 }

 .cta-btn {
     padding: 4px 10px;
     border-radius: 6px;
     font-size: 11px;
     font-weight: 600;
     transition: all .2s;
     display: inline-flex;
     align-items: center;
     gap: 4px;
 }

 .cta-btn:hover {
     transform: scale(1.05)
 }

 .cta-primary {
     background: #6366f1;
     color: #fff
 }

 .cta-primary:hover {
     background: #4f46e5
 }

 .cta-ghost {
     background: transparent;
     color: #6366f1;
     border: 1px solid #6366f1
 }

 .cta-ghost:hover {
     background: #6366f1;
     color: #fff
 }