body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 .notification {
     box-sizing: border-box;
     position: fixed;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
     background: linear-gradient(135deg, #ff9500 0%, #ff6b35 25%, #232f3e 50%, #131a22 75%, #ff9500 100%);
     background-size: 400% 400%;
     color: white;
     padding: 20px 35px;
     border-radius: 20px;
     box-shadow:
         0 12px 40px rgba(255, 149, 0, 0.4),
         0 8px 20px rgba(0, 0, 0, 0.3),
         inset 0 1px 0 rgba(255, 255, 255, 0.2);
     font-size: 16px;
     font-weight: 700;
     z-index: 9999;
     animation: fadeSlideIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), gradientShift 6s ease-in-out infinite;
     border: 2px solid rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     text-align: center;
     min-width: 350px;
     letter-spacing: 0.8px;
     text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
     cursor: pointer;
     transition: all 0.4s ease;
     overflow: hidden;
 }

 .notification::before {
     box-sizing: border-box;
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
     animation: shine 4s infinite;
     z-index: 2;
 }

 .notification::after {
     box-sizing: border-box;
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 100%;
     background: linear-gradient(45deg, #ff9500, #ff6b35, #232f3e, #ff9500);
     background-size: 400% 400%;
     border-radius: 22px;
     z-index: -1;
     animation: borderGlow 3s ease-in-out infinite;
 }

 .notification:hover {
     transform: translateX(-50%) translateY(-5px) scale(1.05);
     box-shadow:
         0 20px 60px rgba(255, 149, 0, 0.5),
         0 12px 30px rgba(0, 0, 0, 0.4);
 }

 .notification-content {
     position: relative;
     z-index: 3;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
 }

 .notification-icon {
     font-size: 22px;
     animation: bounce 2s infinite;
 }

 .notification-text {
     font-size: 16px;
     font-weight: 700;
 }

 @keyframes fadeSlideIn {
     0% {
         opacity: 0;
         transform: translateX(-50%) translateY(50px) scale(0.8);
         filter: blur(5px);
     }

     100% {
         opacity: 1;
         transform: translateX(-50%) translateY(0) scale(1);
         filter: blur(0);
     }
 }

 @keyframes gradientShift {
     0% {
         background-position: 0% 50%;
     }

     25% {
         background-position: 100% 25%;
     }

     50% {
         background-position: 100% 75%;
     }

     75% {
         background-position: 0% 100%;
     }

     100% {
         background-position: 0% 50%;
     }
 }

 @keyframes shine {
     0% {
         left: -100%;
     }

     50% {
         left: 100%;
     }

     100% {
         left: 100%;
     }
 }

 @keyframes borderGlow {

     0%,
     100% {
         background-position: 0% 50%;
         opacity: 0.8;
     }

     50% {
         background-position: 100% 50%;
         opacity: 1;
     }
 }

 @keyframes bounce {

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

     40% {
         transform: translateY(-5px);
     }

     60% {
         transform: translateY(-3px);
     }
 }

 @media (max-width: 480px) {
     .notification {
         min-width: 90vw;
         padding: 18px 25px;
         font-size: 14px;
         bottom: 20px;
     }
 }