* {
     font-family: 'JetBrains Mono', monospace;
}
 @keyframes wave {
     0%, 100% {
         transform: translateY(0px);
    }
     50% {
         transform: translateY(-6px);
    }
}
 .dot-1 {
     animation: wave 1.5s ease-in-out infinite;
}
 .dot-2 {
     animation: wave 1.5s ease-in-out infinite 0.2s;
}
 .dot-3 {
     animation: wave 1.5s ease-in-out infinite 0.4s;
}
 .form-input {
     transition: border-color 0.2s ease-in-out;
     border: 2px solid #e5e7eb;
     box-sizing: border-box;
}
 .form-input:hover {
     border-color: #000000;
}
 .form-input:focus {
     outline: none;
     border-color: #000000;
     border-width: 2px;
     box-shadow: 0 0 0 1px #000000;
}
 #notification {
     display: none;
     position: absolute;
     top: -60px;
     left: 50%;
     transform: translateX(-50%);
     padding: 12px 24px;
     border: 2px solid;
     background-color: #ffffff;
     color: #000000;
     font-size: 14px;
     font-weight: 500;
     z-index: 1000;
     transition: opacity 0.3s ease-in-out;
     width: 90%;
     max-width: 400px;
     text-align: center;
}
 #notification.show {
     display: block;
     opacity: 1;
}
 #notification.success {
     border-color: #22c55e;
     background-color: #f0fdf4;
     color: #166534;
}
 #notification.error {
     border-color: #ef4444;
     background-color: #fef2f2;
     color: #991b1b;
}
 button:disabled {
     opacity: 0.6;
     cursor: not-allowed;
}
 .otp-container {
     display: flex;
     align-items: center;
     gap: 12px;
     width: 100%;
}
 #otp.form-input {
     flex: 1;
     padding: 6px 12px;
     line-height: 1.5;
     font-size: 0.875rem;
}
 .send-code-btn {
     flex: 0 0 80px;
     padding: 6px 12px;
     line-height: 1.5;
     font-size: 0.875rem;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     order: 2;
}
 body {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
}
 main {
     flex: 1;
}
 @media (min-width: 640px) {
     #otp.form-input {
         padding: 8px 16px;
         font-size: 1rem;
    }
     .send-code-btn {
         flex: 0 0 100px;
         padding: 8px 16px;
         font-size: 1rem;
    }
}
 @media (max-width: 640px) {
     #notification {
         top: -70px;
         width: 80%;
         max-width: 320px;
         padding: 8px 16px;
         font-size: 12px;
    }
     main {
         min-height: calc(100vh - 4rem);
         padding-bottom: 1rem;
    }
     #otp.form-input {
         padding: 6px 12px;
         font-size: 0.75rem;
    }
     .send-code-btn {
         flex: 0 0 70px;
         padding: 6px 12px;
         font-size: 0.75rem;
    }
}