* {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    }

    /* Smooth transitions */
    button, .template-card, .category-btn {
      transition: all 0.3s ease;
    }

    /* Custom scrollbar */
    ::-webkit-scrollbar {
      width: 6px;
    }

    ::-webkit-scrollbar-track {
      background: #f1f5f9;
    }

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

    ::-webkit-scrollbar-thumb:hover {
      background: #94a3b8;
    }

    /* Mobile sidebar animation */
    @media (max-width: 768px) {
      .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
      }

      .sidebar.active {
        transform: translateX(0);
      }

      .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        z-index: 40;
      }

      .sidebar-overlay.active {
        display: block;
      }
    }

    /* Active category button style */
    .category-btn.active {
      background: linear-gradient(135deg, #3b83f663 0%, #1e40afa3 100%);
      border-left: 4px solid #0ea5e9;
    }

    /* Template card hover effect */
    .template-card {
      position: relative;
      overflow: hidden;
    }

    .template-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(30, 64, 175, 0.1) 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .template-card:hover::before {
      opacity: 1;
    }

    .template-card.active {
      box-shadow: 0 0 0 2px #3b82f6, 0 8px 16px rgba(59, 130, 246, 0.2);
    }

    /* Toolbar buttons */
    .toolbar-btn {
      position: relative;
      overflow: hidden;
    }

    .toolbar-btn::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.6s ease, height 0.6s ease;
    }

    .toolbar-btn:active::after {
      width: 300px;
      height: 300px;
    }