@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

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

       body {
           font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
           background: #0a0a0a;
           color: #ffffff;
           min-height: 100vh;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           overflow-x: hidden;
           opacity: 0;
           animation: fadeIn 0.8s ease forwards;
       }

       @keyframes fadeIn {
           to {
               opacity: 1;
           }
       }

       .bg-pattern {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background:
               radial-gradient(circle at 20% 30%, rgba(220, 20, 60, 0.1) 0%, transparent 50%),
               radial-gradient(circle at 80% 70%, rgba(139, 0, 0, 0.08) 0%, transparent 50%),
               linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
           z-index: -1;
       }

       .nav {
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           padding: 20px 40px;
           display: flex;
           justify-content: space-between;
           align-items: center;
           z-index: 100;
           backdrop-filter: blur(10px);
           border-bottom: 1px solid rgba(255, 255, 255, 0.05);
       }

       .nav-left {
           display: flex;
           gap: 30px;
           font-size: 14px;
           font-weight: 400;
           color: #999;
       }

       .nav-left a {
           text-decoration: none;
           color: inherit;
           cursor: pointer;
           transition: color 0.3s ease, transform 0.2s ease;
           -webkit-tap-highlight-color: transparent;
       }

       .nav-left a:hover {
           color: #dc143c;
           transform: scale(1.05);
       }

       .main-container {
           display: flex;
           flex-direction: column;
           align-items: center;
           text-align: center;
           max-width: 500px;
           padding: 0 40px;
           margin-top: 60px;
           margin-bottom: 60px;
       }

       .login-card {
           background: rgba(255, 255, 255, 0.03);
           border: 1px solid rgba(255, 255, 255, 0.08);
           border-radius: 12px;
           padding: 50px;
           box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
           backdrop-filter: blur(10px);
           text-align: center;
           width: 100%;
       }

       .logo {
           font-size: clamp(32px, 5vw, 48px);
           font-weight: 300;
           margin-bottom: 20px;
           background: linear-gradient(135deg, #ffffff 0%, #dc143c 50%, #8b0000 100%);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
           background-clip: text;
           letter-spacing: -1px;
       }

       .form-group {
           margin-bottom: 20px;
           text-align: left;
       }

       .form-group label {
           display: block;
           color: #d5d5d5;
           font-size: 14px;
           margin-bottom: 8px;
           text-transform: lowercase;
           letter-spacing: 0.5px;
       }

       .form-group input {
           width: 100%;
           background: rgba(255, 255, 255, 0.06);
           border: 1px solid rgba(255, 255, 255, 0.12);
           border-radius: 8px;
           padding: 12px 16px;
           color: #fff;
           outline: none;
           font-size: 16px;
           transition: all 0.3s ease;
       }

       .form-group input:focus {
           border-color: #ff4757;
           box-shadow: 0 0 0 2px rgba(255, 71, 87, 0.2);
       }

       .form-group input::placeholder {
           color: #888;
       }

       .login-btn {
           width: 100%;
           background: #dc143c;
           border: none;
           color: white;
           padding: 14px;
           border-radius: 8px;
           cursor: pointer;
           font-size: 16px;
           font-weight: 500;
           transition: all 0.3s ease;
           box-shadow: 0 10px 30px rgba(220, 20, 60, 0.3);
           margin-bottom: 20px;
       }

       .login-btn:hover {
           transform: translateY(-2px) scale(1.05);
           box-shadow: 0 15px 40px rgba(220, 20, 60, 0.5);
       }

       .login-btn:disabled {
           opacity: 0.6;
           cursor: not-allowed;
           transform: none;
       }

       .links {
           display: flex;
           justify-content: space-between;
           align-items: center;
           margin-top: 20px;
       }

       .link {
           color: #8a8a8a;
           text-decoration: none;
           font-size: 14px;
           transition: color 0.3s ease, transform 0.2s ease;
           -webkit-tap-highlight-color: transparent;
       }

       .link:hover {
           color: #dc143c;
           transform: scale(1.05);
       }

       .error-message {
           color: #dc143c;
           font-size: 14px;
           margin-top: 10px;
           text-align: center;
       }

       .success-message {
           color: #4ade80;
           font-size: 14px;
           margin-top: 10px;
           text-align: center;
       }

       .footer {
           position: fixed;
           bottom: 0;
           left: 0;
           right: 0;
           padding: 20px 40px;
           display: flex;
           justify-content: center;
           gap: 30px;
           font-size: 12px;
           color: #666;
           backdrop-filter: blur(10px);
           border-top: 1px solid rgba(255, 255, 255, 0.05);
       }

       .footer a {
           text-decoration: none;
           color: inherit;
           cursor: pointer;
           transition: color 0.3s ease, transform 0.2s ease;
           -webkit-tap-highlight-color: transparent;
       }

       .footer a:hover {
           color: #dc143c;
           transform: scale(1.05);
       }

       .glow-thing {
           position: fixed;
           width: 300px;
           height: 300px;
           background: radial-gradient(circle, rgba(220, 20, 60, 0.15) 0%, transparent 70%);
           border-radius: 50%;
           animation: float 10s ease-in-out infinite;
           z-index: -1;
       }

       @keyframes float {
           0% {
               transform: translate(0, 0) scale(1);
           }

           33% {
               transform: translate(10px, -15px) scale(1.05);
           }

           66% {
               transform: translate(-15px, 20px) scale(1.08);
           }

           100% {
               transform: translate(0, 0) scale(1);
           }
       }

       .glow-1 {
           top: 20%;
           left: 10%;
           animation-delay: 0s;
       }

       .glow-2 {
           bottom: 30%;
           right: 15%;
           animation-delay: 5s;
       }

       .loading {
           display: none;
           align-items: center;
           justify-content: center;
           gap: 10px;
           color: #8a8a8a;
           font-size: 14px;
       }

       .loading::after {
           content: '';
           width: 16px;
           height: 16px;
           border: 2px solid #333;
           border-top: 2px solid #dc143c;
           border-radius: 50%;
           animation: spin 1s linear infinite;
       }

       @keyframes spin {
           0% {
               transform: rotate(0deg);
           }

           100% {
               transform: rotate(360deg);
           }
       }

       @media (max-width: 480px) {
           .container {
               padding: 10px;
           }

           .login-card {
               padding: 30px 20px;
           }
       }