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

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

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

   ::-webkit-scrollbar-thumb {
       background: #CBD5E1;
       border-radius: 99px
   }

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

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

   .sidebar-link:hover {
       transform: translateX(6px)
   }

   .sidebar-link.active {
       background: linear-gradient(135deg, #EEF2FF, #E0E7FF)
   }

   .dark .sidebar-link.active {
       background: linear-gradient(135deg, #312E81, #3730A3)
   }

   .glass {
       backdrop-filter: blur(24px);
       -webkit-backdrop-filter: blur(24px)
   }

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

   .card-hover:hover {
       transform: translateY(-6px);
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .12)
   }

   .dark .card-hover:hover {
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5)
   }

   .gradient-primary {
       background: linear-gradient(135deg, #6366F1, #8B5CF6, #A78BFA)
   }

   .gradient-success {
       background: linear-gradient(135deg, #10B981, #34D399)
   }

   .gradient-danger {
       background: linear-gradient(135deg, #EF4444, #F87171)
   }

   .gradient-warning {
       background: linear-gradient(135deg, #F59E0B, #FBBF24)
   }

   .gradient-info {
       background: linear-gradient(135deg, #3B82F6, #60A5FA)
   }

   .gradient-pink {
       background: linear-gradient(135deg, #EC4899, #F472B6)
   }

   .gradient-cyan {
       background: linear-gradient(135deg, #06B6D4, #22D3EE)
   }

   .gradient-teal {
       background: linear-gradient(135deg, #14B8A6, #2DD4BF)
   }

   .gradient-orange {
       background: linear-gradient(135deg, #F97316, #FB923C)
   }

   .gradient-violet {
       background: linear-gradient(135deg, #7C3AED, #A78BFA)
   }

   .progress-bar {
       transition: width 1.8s cubic-bezier(.4, 0, .2, 1)
   }

   .modal-overlay {
       transition: opacity .3s ease, visibility .3s ease
   }

   .modal-content {
       transition: all .45s cubic-bezier(.4, 0, .2, 1)
   }

   .modal-overlay.active {
       opacity: 1;
       visibility: visible
   }

   .modal-overlay.active .modal-content {
       transform: scale(1) translateY(0);
       opacity: 1
   }

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

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

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

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

   @keyframes pulse-ring {
       0% {
           transform: scale(.8);
           opacity: 1
       }

       100% {
           transform: scale(2.5);
           opacity: 0
       }
   }

   .notification-badge::after {
       content: '';
       position: absolute;
       top: -1px;
       right: -1px;
       width: 10px;
       height: 10px;
       background: #EF4444;
       border-radius: 50%;
       border: 2px solid white;
       animation: pulse-ring 2s infinite
   }

   .dark .notification-badge::after {
       border-color: #0B1120
   }

   .sidebar-mobile {
       transform: translateX(-100%);
       transition: transform .4s cubic-bezier(.4, 0, .2, 1)
   }

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

   .ripple {
       position: absolute;
       border-radius: 50%;
       background: rgba(255, 255, 255, .3);
       transform: scale(0);
       animation: rp .6s linear;
       pointer-events: none
   }

   @keyframes rp {
       to {
           transform: scale(4);
           opacity: 0
       }
   }

   .glow-primary {
       box-shadow: 0 0 25px rgba(99, 102, 241, .35)
   }

   .glow-violet {
       box-shadow: 0 0 25px rgba(124, 58, 237, .35)
   }

   @keyframes float {

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

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

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

   .table-row {
       transition: all .2s ease
   }

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

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

   /* Key card styles */
   .key-card {
       transition: all .3s ease
   }

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

   .dark .key-card:hover {
       box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .45)
   }

   /* Code font */
   .font-mono {
       font-family: 'Courier New', monospace
   }

   /* Status dot pulse */
   @keyframes dot-pulse {

       0%,
       100% {
           opacity: 1;
           transform: scale(1)
       }

       50% {
           opacity: .6;
           transform: scale(1.3)
       }
   }

   .dot-active {
       animation: dot-pulse 2s ease-in-out infinite
   }

   /* Glow badges */
   .badge-active {
       box-shadow: 0 0 0 3px rgba(16, 185, 129, .15)
   }

   .badge-revoked {
       box-shadow: 0 0 0 3px rgba(239, 68, 68, .12)
   }

   .badge-expired {
       box-shadow: 0 0 0 3px rgba(245, 158, 11, .12)
   }

   /* Copy flash */
   @keyframes copy-flash {
       0% {
           background: rgba(99, 102, 241, .15)
       }

       100% {
           background: transparent
       }
   }

   .copy-flash {
       animation: copy-flash .6s ease
   }

   /* Meter bar */
   .meter-bar {
       transition: width 2s cubic-bezier(.4, 0, .2, 1)
   }

   /* Rotating icon */
   @keyframes spin-slow {
       to {
           transform: rotate(360deg)
       }
   }

   .spin-slow {
       animation: spin-slow 8s linear infinite
   }

   /* Toast */
   #toast {
       position: fixed;
       bottom: 1.5rem;
       left: 50%;
       transform: translateX(-50%) translateY(100px);
       transition: transform .4s cubic-bezier(.4, 0, .2, 1), opacity .4s ease;
       opacity: 0;
       z-index: 9999
   }

   #toast.show {
       transform: translateX(-50%) translateY(0);
       opacity: 1
   }