/* 404 Main Content */
    .error-container {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-2xl) var(--space-lg);
    }

    .error-card {
      background: var(--bg-white);
      border-radius: var(--radius-xl);
      padding: var(--space-2xl);
      text-align: center;
      max-width: 650px;
      width: 100%;
      margin: 0 auto;
      border: 1px solid var(--border-light);
      box-shadow: var(--shadow-md);
      transition: transform 0.3s ease;
    }

    .error-card:hover { 
      transform: translateY(-5px); 
    }

    .error-code {
      font-size: clamp(6rem, 15vw, 10rem);
      font-weight: 800;
      background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-gold) 100%);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      line-height: 1;
      margin-bottom: var(--space-md);
    }

    .error-icon {
      font-size: 4rem;
      color: var(--primary-gold);
      margin-bottom: var(--space-md);
    }

    .error-title {
      font-size: clamp(1.5rem, 5vw, 2rem);
      font-weight: 700;
      color: var(--primary-blue);
      margin-bottom: var(--space-sm);
    }

    .error-message {
      color: var(--slate-light);
      max-width: 450px;
      margin: 0 auto var(--space-lg);
      font-size: 1rem;
    }

    .action-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-md);
      margin-top: var(--space-lg);
      padding-top: var(--space-md);
      border-top: 1px solid var(--border-light);
    }

    .action-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--primary-blue);
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s;
    }

    .action-link:hover { 
      color: var(--primary-gold); 
    }
   
    @media (max-width: 640px) {
      .error-card { padding: var(--space-xl); }
      .search-box { flex-direction: column; }
    }

    /* Fun animation */
    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
      100% { transform: translateY(0px); }
    }
    
    .error-icon i {
      animation: float 3s ease-in-out infinite;
      display: inline-block;
    }