* {
     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: #1E3A5F
 }

 /* Sidebar */
 .sl {
     transition: all .25s cubic-bezier(.4, 0, .2, 1)
 }

 .sl:hover {
     transform: translateX(6px)
 }

 .sl.active {
     background: linear-gradient(135deg, rgba(99, 102, 241, .12), rgba(139, 92, 246, .06))
 }

 .dark .sl.active {
     background: linear-gradient(135deg, rgba(99, 102, 241, .28), rgba(139, 92, 246, .14))
 }

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

 /* Cards */
 .ch {
     transition: all .38s cubic-bezier(.4, 0, .2, 1)
 }

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

 .dark .ch:hover {
     box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55)
 }

 /* Gradients */
 .g-primary {
     background: linear-gradient(135deg, #6366F1, #8B5CF6)
 }

 .g-indigo {
     background: linear-gradient(135deg, #4338CA, #6366F1)
 }

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

 .g-blue {
     background: linear-gradient(135deg, #1D4ED8, #3B82F6)
 }

 .g-cyan {
     background: linear-gradient(135deg, #0891B2, #06B6D4)
 }

 .g-teal {
     background: linear-gradient(135deg, #0F766E, #14B8A6)
 }

 .g-green {
     background: linear-gradient(135deg, #059669, #10B981)
 }

 .g-amber {
     background: linear-gradient(135deg, #D97706, #F59E0B)
 }

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

 .g-red {
     background: linear-gradient(135deg, #DC2626, #EF4444)
 }

 .g-rose {
     background: linear-gradient(135deg, #BE123C, #F43F5E)
 }

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

 .g-slate {
     background: linear-gradient(135deg, #334155, #475569)
 }

 .g-settings {
     background: linear-gradient(135deg, #4338CA, #6366F1, #8B5CF6)
 }

 /* Modal */
 .mo {
     transition: opacity .3s ease, visibility .3s ease
 }

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

 .mo.active {
     opacity: 1;
     visibility: visible
 }

 .mo.active .mc {
     transform: scale(1) translateY(0);
     opacity: 1
 }

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

 .dark .sk {
     background: linear-gradient(90deg, #0E1E35 25%, #162844 50%, #0E1E35 75%);
     background-size: 200% 100%
 }

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

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

 /* Badge pulse */
 @keyframes bpulse {
     0% {
         transform: scale(.85);
         opacity: 1
     }

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

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

 .dark .nbadge::after {
     border-color: #070D1B
 }

 /* Sidebar mobile */
 .sb-m {
     transform: translateX(-100%);
     transition: transform .4s cubic-bezier(.4, 0, .2, 1)
 }

 .sb-m.open {
     transform: translateX(0)
 }

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

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

 /* Glows */
 .glow-primary {
     box-shadow: 0 0 22px rgba(99, 102, 241, .38)
 }

 .glow-indigo {
     box-shadow: 0 0 28px rgba(99, 102, 241, .42)
 }

 /* Float */
 @keyframes float {

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

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

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

 /* Toggle switch */
 .tog {
     position: relative;
     display: inline-flex;
     align-items: center;
     cursor: pointer;
     user-select: none
 }

 .tog input {
     position: absolute;
     opacity: 0;
     width: 0;
     height: 0
 }

 .tog-track {
     width: 44px;
     height: 24px;
     border-radius: 99px;
     background: #CBD5E1;
     transition: background .3s;
     flex-shrink: 0
 }

 .dark .tog-track {
     background: #334155
 }

 .tog input:checked~.tog-track {
     background: #6366F1
 }

 .tog-thumb {
     position: absolute;
     left: 3px;
     width: 18px;
     height: 18px;
     background: white;
     border-radius: 50%;
     transition: transform .3s;
     box-shadow: 0 1px 4px rgba(0, 0, 0, .2)
 }

 .tog input:checked~.tog-thumb {
     transform: translateX(20px)
 }

 /* Settings tab */
 .stab {
     transition: all .25s ease;
     border-left: 3px solid transparent
 }

 .stab.active {
     border-left-color: #6366F1;
     background: rgba(99, 102, 241, .08)
 }

 .dark .stab.active {
     background: rgba(99, 102, 241, .16)
 }

 .stab:hover:not(.active) {
     background: rgba(0, 0, 0, .04)
 }

 .dark .stab:hover:not(.active) {
     background: rgba(255, 255, 255, .04)
 }

 /* Input focus */
 .inp {
     transition: box-shadow .25s, border-color .25s
 }

 .inp:focus {
     outline: none;
     border-color: #6366F1;
     box-shadow: 0 0 0 3px rgba(99, 102, 241, .18)
 }

 /* Color swatch */
 .swatch {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     cursor: pointer;
     transition: transform .2s, box-shadow .2s;
     border: 3px solid transparent
 }

 .swatch:hover {
     transform: scale(1.15)
 }

 .swatch.selected {
     border-color: white;
     box-shadow: 0 0 0 3px rgba(99, 102, 241, .6)
 }

 /* Plan card */
 .plan-card {
     transition: all .3s ease;
     border: 2px solid transparent
 }

 .plan-card:hover {
     border-color: #6366F1;
     transform: translateY(-3px)
 }

 .plan-card.current {
     border-color: #6366F1;
     background: linear-gradient(135deg, rgba(99, 102, 241, .06), rgba(139, 92, 246, .04))
 }

 .dark .plan-card.current {
     background: linear-gradient(135deg, rgba(99, 102, 241, .18), rgba(139, 92, 246, .1))
 }

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

 /* Session card */
 .sess-card {
     transition: all .25s ease
 }

 .sess-card:hover {
     background: rgba(99, 102, 241, .04)
 }

 .dark .sess-card:hover {
     background: rgba(99, 102, 241, .1)
 }

 /* Danger zone */
 .danger-zone {
     border: 2px dashed rgba(239, 68, 68, .35)
 }

 .dark .danger-zone {
     border-color: rgba(239, 68, 68, .5)
 }

 /* 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;
     opacity: 0;
     z-index: 9999
 }

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

 /* Notification row */
 .nrow {
     transition: background .18s ease
 }

 .nrow:hover {
     background: rgba(99, 102, 241, .04)
 }

 .dark .nrow:hover {
     background: rgba(99, 102, 241, .08)
 }

 /* Avatar ring */
 .av-ring {
     box-shadow: 0 0 0 3px white, 0 0 0 5px #6366F1
 }

 .dark .av-ring {
     box-shadow: 0 0 0 3px #070D1B, 0 0 0 5px #6366F1
 }

 /* Kbd */
 kbd {
     display: inline-flex;
     align-items: center;
     padding: 2px 7px;
     border-radius: 6px;
     background: #F1F5F9;
     border: 1px solid #CBD5E1;
     font-size: 11px;
     font-weight: 600;
     color: #475569;
     font-family: monospace
 }

 .dark kbd {
     background: #0E1E35;
     border-color: #1E3A5F;
     color: #94A3B8
 }

 /* Section fade-in */
 .sec-panel {
     display: none
 }

 .sec-panel.active-panel {
     display: block
 }

 /* Scrollable activity */
 .act-scroll {
     max-height: 340px;
     overflow-y: auto
 }