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

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

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

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

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

 ::-webkit-scrollbar-thumb {
     background: #c5c9d6;
     border-radius: 10px;
 }

 .dark ::-webkit-scrollbar-thumb {
     background: #3f4560;
 }

 .custom-scrollbar::-webkit-scrollbar {
     height: 4px;
 }

 /* Global Layout */
 .sidebar {
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .sidebar-overlay {
     transition: opacity 0.3s ease;
 }

 .panel-dropdown {
     position: absolute;
     right: 0;
     top: 100%;
     margin-top: 0.5rem;
     z-index: 100;
     width: 380px;
     max-width: calc(100vw - 24px);
     border-radius: 16px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
     transform-origin: top right;
 }

 .dark .panel-dropdown {
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
 }

 @media (max-width: 639px) {
     .panel-dropdown {
         position: fixed;
         right: 12px;
         left: 12px;
         top: 60px;
         width: auto;
         max-width: calc(100vw - 24px);
     }
 }

 .modal-overlay {
     position: fixed;
     inset: 0;
     z-index: 200;
     background: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(4px);
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 1rem;
 }

 .modal-content {
     background: white;
     border-radius: 20px;
     max-width: 640px;
     width: 100%;
     max-height: 90vh;
     overflow-y: auto;
     box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
 }

 .dark .modal-content {
     background: #1e2235;
     box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
 }

 .nav-item.active {
     background: linear-gradient(135deg, rgba(108, 92, 231, 0.12), rgba(108, 92, 231, 0.06));
     color: #6c5ce7;
     border-right: 3px solid #6c5ce7;
 }

 .dark .nav-item.active {
     background: linear-gradient(135deg, rgba(108, 92, 231, 0.2), rgba(108, 92, 231, 0.1));
     color: #a78bfa;
     border-right: 3px solid #a78bfa;
 }

 .notif-dot::after {
     content: '';
     position: absolute;
     top: -1px;
     right: -1px;
     width: 10px;
     height: 10px;
     background: #ef4444;
     border-radius: 50%;
     border: 2px solid white;
 }

 .dark .notif-dot::after {
     border-color: #1e2235;
 }

 /* Animations */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(18px);
     }

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

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

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

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

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

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

 .animate-fade-in-up {
     animation: fadeInUp 0.5s ease both;
 }

 .animate-fade-in {
     animation: fadeIn 0.3s ease both;
 }

 .animate-slide-in-right {
     animation: slideInRight 0.4s ease both;
 }

 .animate-scale-in {
     animation: scaleIn 0.3s ease both;
 }

 .delay-100 {
     animation-delay: 0.1s;
 }

 .delay-200 {
     animation-delay: 0.2s;
 }

 /* Favorites Specifics */
 .fav-card {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .fav-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
     z-index: 10;
 }

 .dark .fav-card:hover {
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
 }

 .fav-card.removing {
     transform: scale(0.9);
     opacity: 0;
     pointer-events: none;
     transition: all 0.3s ease;
 }

 .fav-img {
     transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .fav-card:hover .fav-img {
     transform: scale(1.08);
 }

 .fav-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
     transition: opacity 0.3s ease;
     border-radius: inherit;
 }

 .fav-details {
     position: absolute;
     inset: 0;
     padding: 20px;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     z-index: 10;
     transition: all 0.4s ease;
 }

 .fav-hover-actions {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     padding: 20px;
     transform: translateY(100%);
     opacity: 0;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     background: linear-gradient(to top, rgba(13, 16, 45, 0.95) 0%, rgba(13, 16, 45, 0.8) 100%);
     backdrop-filter: blur(8px);
     display: flex;
     flex-direction: column;
     z-index: 20;
     height: 100%;
     justify-content: center;
 }

 .fav-card:hover .fav-hover-actions {
     transform: translateY(0);
     opacity: 1;
 }

 .cat-pill {
     transition: all 0.2s ease;
 }

 .cat-pill.active {
     background-color: #6c5ce7;
     color: white;
     border-color: #6c5ce7;
 }

 /* Badges */
 .type-badge-image {
     background: rgba(59, 130, 246, 0.2);
     color: #60a5fa;
     border: 1px solid rgba(59, 130, 246, 0.3);
 }

 .type-badge-template {
     background: rgba(16, 185, 129, 0.2);
     color: #34d399;
     border: 1px solid rgba(16, 185, 129, 0.3);
 }

 .type-badge-style {
     background: rgba(192, 38, 211, 0.2);
     color: #e879f9;
     border: 1px solid rgba(192, 38, 211, 0.3);
 }

 .type-badge-model {
     background: rgba(245, 158, 11, 0.2);
     color: #fbbf24;
     border: 1px solid rgba(245, 158, 11, 0.3);
 }

 [data-tooltip] {
     position: relative;
 }

 [data-tooltip]:hover::after {
     content: attr(data-tooltip);
     position: absolute;
     bottom: calc(100% + 8px);
     left: 50%;
     transform: translateX(-50%);
     background: #1e2235;
     color: white;
     padding: 6px 12px;
     border-radius: 8px;
     font-size: 11px;
     font-weight: 600;
     white-space: nowrap;
     z-index: 50;
     animation: fadeIn 0.2s ease;
 }