* {
       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 slideIn {
       from {
           opacity: 0;
           transform: translateX(-20px)
       }

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

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

   .animate-slideIn {
       animation: slideIn .3s 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
   }

   /* Notifications-specific */
   .notif-item {
       position: relative;
       padding: 16px;
       border-radius: 12px;
       transition: all .25s cubic-bezier(.4, 0, .2, 1);
       cursor: pointer;
       border: 1px solid transparent;
   }

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

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

   .notif-item.unread {
       background: linear-gradient(90deg, rgba(99, 102, 241, .04) 0%, transparent 100%);
       border-left: 3px solid #6366f1
   }

   .dark .notif-item.unread {
       background: linear-gradient(90deg, rgba(99, 102, 241, .1) 0%, transparent 100%)
   }

   .notif-icon {
       width: 44px;
       height: 44px;
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       color: #fff;
       flex-shrink: 0;
       box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
   }

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

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

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

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

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

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

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

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

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

   .unread-dot {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: #6366f1;
       flex-shrink: 0;
       animation: pulse-soft 2s infinite;
   }

   .priority-badge {
       display: inline-flex;
       align-items: center;
       gap: 3px;
       padding: 2px 6px;
       border-radius: 5px;
       font-size: 10px;
       font-weight: 700;
       text-transform: uppercase;
   }

   .pb-high {
       background: #fef2f2;
       color: #dc2626
   }

   .dark .pb-high {
       background: rgba(239, 68, 68, .2);
       color: #f87171
   }

   .pb-medium {
       background: #fffbeb;
       color: #d97706
   }

   .dark .pb-medium {
       background: rgba(245, 158, 11, .2);
       color: #fbbf24
   }

   .pb-low {
       background: #f0fdf4;
       color: #059669
   }

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

   .channel-card {
       transition: all .3s ease;
       cursor: pointer;
   }

   .channel-card:hover {
       transform: translateY(-3px)
   }

   .channel-icon {
       width: 48px;
       height: 48px;
       border-radius: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
       color: #fff;
       flex-shrink: 0;
   }

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

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

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

   .ch-slack {
       background: linear-gradient(135deg, #4a154b, #611f68)
   }

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

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

   .toggle-lg {
       position: relative;
       width: 44px;
       height: 24px;
       background: #cbd5e1;
       border-radius: 9999px;
       cursor: pointer;
       transition: background .2s;
       flex-shrink: 0;
   }

   .dark .toggle-lg {
       background: #475569
   }

   .toggle-lg::after {
       content: '';
       position: absolute;
       top: 2px;
       left: 2px;
       width: 20px;
       height: 20px;
       background: #fff;
       border-radius: 50%;
       transition: transform .2s;
       box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
   }

   .toggle-lg.on {
       background: #6366f1
   }

   .toggle-lg.on::after {
       transform: translateX(20px)
   }

   .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;
       box-shadow: 0 4px 12px rgba(99, 102, 241, .3)
   }

   .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
   }

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

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

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

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

   .ab-ghost {
       color: #64748b
   }

   .ab-ghost:hover {
       background: #f1f5f9;
       color: #334155
   }

   .dark .ab-ghost {
       color: #94a3b8
   }

   .dark .ab-ghost:hover {
       background: #1e293b;
       color: #e2e8f0
   }

   .pref-row {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 12px;
       border-radius: 10px;
       transition: background .2s;
   }

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

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

   .quiet-slider {
       -webkit-appearance: none;
       width: 100%;
       height: 6px;
       border-radius: 3px;
       background: linear-gradient(90deg, #e2e8f0 0%, #e2e8f0 100%);
       outline: none;
   }

   .dark .quiet-slider {
       background: linear-gradient(90deg, #334155 0%, #334155 100%)
   }

   .quiet-slider::-webkit-slider-thumb {
       -webkit-appearance: none;
       width: 18px;
       height: 18px;
       border-radius: 50%;
       background: #6366f1;
       cursor: pointer;
       box-shadow: 0 2px 6px rgba(99, 102, 241, .4);
   }