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

   body {
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       background: #0f172a;
       color: #e2e8f0;
       min-height: 100vh;
   }

   /* LOGIN PAGE STYLES */
   .login-container {
       display: flex;
       min-height: 100vh;
       align-items: center;
       justify-content: center;
       padding: 20px;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
       position: relative;
       overflow: hidden;
   }

   .login-container::before {
       content: '';
       position: absolute;
       width: 200%;
       height: 200%;
       background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
       background-size: 50px 50px;
       animation: moveBackground 20s linear infinite;
   }

   @keyframes moveBackground {
       0% {
           transform: translate(0, 0);
       }

       100% {
           transform: translate(50px, 50px);
       }
   }

   .login-box {
       background: rgba(30, 41, 59, 0.95);
       backdrop-filter: blur(20px);
       padding: 50px 40px;
       border-radius: 24px;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
       width: 100%;
       max-width: 440px;
       position: relative;
       z-index: 1;
       border: 1px solid rgba(255, 255, 255, 0.1);
   }

   .login-header {
       text-align: center;
       margin-bottom: 40px;
   }

   .login-logo {
       width: 80px;
       height: 80px;
       background: linear-gradient(135deg, #3b82f6, #8b5cf6);
       border-radius: 20px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 2.5em;
       margin: 0 auto 20px;
       box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
   }

   .login-header h1 {
       font-size: 2em;
       margin-bottom: 8px;
       background: linear-gradient(135deg, #3b82f6, #8b5cf6);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }

   .login-header p {
       color: #94a3b8;
       font-size: 0.95em;
   }

   .form-group {
       margin-bottom: 24px;
   }

   .form-group label {
       display: block;
       margin-bottom: 10px;
       color: #cbd5e1;
       font-weight: 500;
       font-size: 0.95em;
   }

   .input-wrapper {
       position: relative;
   }

   .input-icon {
       position: absolute;
       left: 16px;
       top: 50%;
       transform: translateY(-50%);
       font-size: 1.2em;
       color: #64748b;
   }

   .form-group input {
       width: 100%;
       padding: 16px 16px 16px 50px;
       background: #0f172a;
       border: 2px solid #334155;
       border-radius: 12px;
       color: #e2e8f0;
       font-size: 1em;
       transition: all 0.3s;
   }

   .form-group input:focus {
       outline: none;
       border-color: #3b82f6;
       box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
   }

   .remember-forgot {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 24px;
       font-size: 0.9em;
   }

   .remember-me {
       display: flex;
       align-items: center;
       gap: 8px;
       cursor: pointer;
       color: #94a3b8;
   }

   .remember-me input[type="checkbox"] {
       width: 18px;
       height: 18px;
       cursor: pointer;
   }

   .forgot-password {
       color: #3b82f6;
       text-decoration: none;
       transition: all 0.3s;
   }

   .forgot-password:hover {
       color: #8b5cf6;
   }

   .btn-login {
       width: 100%;
       padding: 16px;
       background: linear-gradient(135deg, #3b82f6, #8b5cf6);
       border: none;
       border-radius: 12px;
       color: white;
       font-size: 1.1em;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.3s;
       margin-bottom: 20px;
   }

   .btn-login:hover {
       transform: translateY(-2px);
       box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
   }

   .message-info {
       background: rgba(59, 130, 246, 0.1);
       border: 1px solid rgba(59, 130, 246, 0.3);
       padding: 16px;
       border-radius: 12px;
       text-align: center;
       font-size: 0.9em;
       color: #94a3b8;
       display: none;
   }

   .message-info.active {
       display: block;
   }

   .message-info strong {
       color: #3b82f6;
       display: block;
       margin-bottom: 8px;
   }

   .demo-credentials {
       display: flex;
       flex-direction: column;
       gap: 6px;
       margin-top: 10px;
       font-family: monospace;
   }