.empty-container {
     text-align: center;
     max-width: 600px;
     width: 100%;
 }

 .illustration {
     width: 100%;
     max-width: 320px;
     margin: 0 auto 2.5rem;
 }

 .illustration svg {
     width: 100%;
     height: auto;
 }

 .search-icon {
     animation: swing 2s ease-in-out infinite;
     transform-origin: 80px 80px;
 }

 @keyframes swing {

     0%,
     100% {
         transform: rotate(-5deg);
     }

     50% {
         transform: rotate(5deg);
     }
 }

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

 @keyframes float {

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

     50% {
         transform: translateY(-10px);
     }
 }

 h1 {
     font-family: var(--heading-font);
     color: var(--hc);
     font-size: 2rem;
     font-weight: 600;
     margin-bottom: 1rem;
     line-height: 1.3;
 }

 .search-query {
     color: var(--pc);
     font-weight: 600;
     background: var(--bubble);
     padding: 0.25rem 0.75rem;
     border-radius: 6px;
     display: inline-block;
     margin: 0.5rem 0;
 }

 p {
     color: var(--muted);
     font-size: 1.125rem;
     line-height: 1.7;
     margin-bottom: 2rem;
 }

 .suggestions {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 1.5rem;
     margin-bottom: 2rem;
     text-align: left;
 }

 .suggestions h3 {
     font-size: 1rem;
     font-weight: 600;
     color: var(--hc);
     margin-bottom: 1rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }

 .suggestions ul {
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .suggestions li {
     padding: 0.5rem 0;
     color: var(--body-color);
     font-size: 0.95rem;
     display: flex;
     align-items: flex-start;
     gap: 0.5rem;
 }

 .suggestions li:before {
     content: "•";
     color: var(--pc);
     font-weight: bold;
     font-size: 1.2rem;
 }

 .action-buttons {
     display: flex;
     gap: 1rem;
     justify-content: center;
     flex-wrap: wrap;
 }

 .btn {
     padding: 0.875rem 2rem;
     font-size: 1rem;
     font-weight: 500;
     font-family: var(--body-font);
     border-radius: 10px;
     cursor: pointer;
     transition: all 0.3s ease;
     text-decoration: none;
     display: inline-block;
     border: none;
 }

 .btn-primary {
     background: var(--pc);
     color: white;
     box-shadow: 0 4px 12px rgba(99, 171, 69, 0.2);
 }

 .btn-primary:hover {
     background: var(--accent);
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(99, 171, 69, 0.3);
 }

 .btn-secondary {
     background: var(--card);
     color: var(--body-color);
     border: 1px solid var(--border);
 }

 .btn-secondary:hover {
     background: var(--bubble);
     border-color: var(--pc);
     transform: translateY(-2px);
     color: var(--body-color)!important;
 }

 .divider {
     display: flex;
     align-items: center;
     text-align: center;
     margin: 2rem 0;
     color: var(--muted);
     font-size: 0.875rem;
 }

 .divider::before,
 .divider::after {
     content: '';
     flex: 1;
     border-bottom: 1px solid var(--border);
 }

 .divider span {
     padding: 0 1rem;
 }

 .popular-topics {
     margin-top: 2.5rem;
 }

 .popular-topics h3 {
     font-size: 0.875rem;
     font-weight: 600;
     color: var(--muted);
     margin-bottom: 1rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .topics-list {
     display: flex;
     flex-wrap: wrap;
     gap: 0.75rem;
     justify-content: center;
 }

 .topic-tag {
     padding: 0.5rem 1rem;
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: 50px;
     color: var(--body-color);
     font-size: 0.875rem;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .topic-tag:hover {
     background: var(--pc);
     color: white;
     border-color: var(--pc);
     transform: translateY(-2px);
 }

 @media (max-width: 640px) {
     h1 {
         font-size: 1.5rem;
     }

     p {
         font-size: 1rem;
     }

     .illustration {
         max-width: 240px;
     }

     .action-buttons {
         flex-direction: column;
     }

     .btn {
         width: 100%;
     }
 }