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

 body {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 20px;
 }

 .container {
   background: rgba(255, 255, 255, 0.95);
   border-radius: 20px;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
   padding: 40px;
   width: 90%;
   max-width: 800px;
   backdrop-filter: blur(10px);
 }

 h1 {
   text-align: center;
   color: #333;
   margin-bottom: 10px;
   font-size: 2.5rem;
   background: linear-gradient(45deg, #667eea, #764ba2);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }

 .subtitle {
   text-align: center;
   color: #666;
   margin-bottom: 30px;
   font-size: 1.1rem;
 }

 .search-container {
   margin-bottom: 30px;
   position: relative;
 }

 #searchInput {
   width: 100%;
   padding: 15px 20px;
   border: 2px solid #e0e0e0;
   border-radius: 50px;
   font-size: 1.1rem;
   transition: all 0.3s ease;
   outline: none;
 }

 #searchInput:focus {
   border-color: #667eea;
   box-shadow: 0 0 15px rgba(102, 126, 234, 0.3);
 }

 .links-container {
   display: grid;
   gap: 15px;
   margin-top: 20px;
 }

 .link-card {
   background: white;
   border-radius: 15px;
   padding: 20px;
   display: flex;
   align-items: center;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
   border: 1px solid #f0f0f0;
   transform: translateY(0);
 }

 .link-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
   border-color: #667eea;
 }

 .link-icon {
   width: 50px;
   height: 50px;
   background: linear-gradient(135deg, #667eea, #764ba2);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 15px;
   flex-shrink: 0;
 }

 .link-icon i {
   color: white;
   font-size: 20px;
 }

 .link-content {
   flex-grow: 1;
 }

 .link-title {
   font-weight: 600;
   color: #333;
   margin-bottom: 5px;
   font-size: 1.2rem;
 }

 .link-description {
   color: #666;
   font-size: 0.9rem;
 }

 .link-number {
   background: #f8f9fa;
   color: #667eea;
   padding: 2px 10px;
   border-radius: 20px;
   font-weight: bold;
   margin-right: 15px;
 }

 .no-results {
   text-align: center;
   color: #666;
   padding: 40px;
   font-style: italic;
 }

 .fade-in {
   animation: fadeIn 0.5s ease forwards;
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(20px);
   }

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

 .highlight {
   animation: highlight 2s ease;
 }

 @keyframes highlight {
   0% {
     background-color: #fff3cd;
   }

   100% {
     background-color: transparent;
   }
 }

 @media (max-width: 768px) {
   .container {
     padding: 20px;
   }

   h1 {
     font-size: 2rem;
   }

   .links-container {
     grid-template-columns: 1fr;
   }
 }