body{font-family:'Poppins',sans-serif;background:linear-gradient(135deg,#e0e5ec,#e0e5ec);display:flex;justify-content:center;align-items:center;
    min-height:100vh;margin:0;color:#333;box-sizing:border-box;padding:25px}

.main-container{display:flex;flex-direction:column;align-items:center;width:100%;max-width:500px;background-color:#fff;
    border-radius:15px;box-shadow:0 10px 30px #00000014;overflow:hidden}
.login-header{color:#080808;padding-top:20px;width:100%;margin-bottom:-15px;text-align:center;border-bottom-left-radius:15px;border-bottom-right-radius:15px}
.login-header .logo img{width:90px;height:90px;margin-top:12px;margin-bottom:10px;object-fit:cover;border:1.5px solid #ffffffb3;box-shadow:0 0 10px #00000033}
.logo img {width:40px; height:40px; border-radius:50px; padding: 2px;}
.login-header h1{font-size:35px;margin-top:1px;margin-bottom:-13px;font-weight:700}
.login-header p{font-size:13px;opacity:.9;margin-bottom:15px}
.login-container-card{padding:35px;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center}
.signup-form{width:100%}
.input-group{position:relative;text-align:left;margin-bottom:5px}
.floating-label-group{position:relative;margin-top:15px}
.floating-label-group input{width:100%;padding:13px .25rem 13px 50px;border:1px solid #e0e0e0;border-radius:8px;font-size:16px;
    color:#333;box-sizing:border-box;transition:border-color .3s ease,box-shadow .3s ease,padding .3s ease}
.floating-label-group input:focus{outline:none;border-color:#2575fc;box-shadow:0 0 0 3px rgba(37,117,252,.15)}
.floating-label-group label{position:absolute;left:50px;top:14px;transform:translateY(0);color:#888;font-size:16px;font-weight:400;
    pointer-events:none;transition:all .2s ease-out;background:transparent;padding:0 5px;z-index:1}
.floating-label-group input:focus+label,.floating-label-group input:not(:placeholder-shown)+label{top:-.47rem;font-size:12px;
    color:#2575fc;transform:translateY(0) translateX(-5px);background-color:#fff;padding:0 5px;z-index:2}
.floating-label-group .input-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:#727272;font-size:1.1rem;z-index:3}
.floating-label-group.password-group input{padding-right:55px}
.floating-label-group .password-toggle{position:absolute;right:20px;top:50%;transform:translateY(-50%);cursor:pointer;color:#888;
    font-size:1.1rem;transition:color .3s ease;z-index:4}
.password-toggle:hover{color:#333}
.password-toggle .show-icon{display:none}
.password-toggle .default-icon{display:inline-block}
.password-toggle.show-password .show-icon{display:inline-block}
.password-toggle.show-password .default-icon{display:none}
.toggle-text{font-size:13px;color:#646672;font-weight:500}
.password-toggle:hover .toggle-text{color:#4a6cf7}
.next-btn{width:100%;padding:16px;background:linear-gradient(45deg,#6a11cb,#2575fc);color:#fff;border:none;border-radius:10px;font-size:18px;
    font-weight:600;cursor:pointer;margin-top:5px;box-shadow:0 4px 15px rgba(0,0,0,.3);transition:transform .3s ease,box-shadow .3s ease,opacity .3s ease}
.next-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px #00000033}
.login-link{margin-top:20px;font-size:14px;color:#666;text-align:center}
.login-link a{color:#2575fc;text-decoration:none;font-weight:500;transition:color .3s ease}
.login-link a:hover{text-decoration:underline}
.policy-agreement{display:flex;align-items:center;margin-top:18px;margin-bottom:4px;font-size:14px;color:#555;text-align:left;position:relative}
.policy-agreement input[type="checkbox"]{width:auto;margin-right:10px;min-width:10px;min-height:10px;accent-color:#2575fc;cursor:pointer;
    padding:0;border:1px solid #ccc;border-radius:4px}
.policy-agreement label{display:inline;margin-bottom:0;font-weight:400}
.policy-agreement a{color:#2575fc;text-decoration:none;font-weight:500;transition:color .3s ease}
.policy-agreement a:hover{text-decoration:underline}
.error-message{color:#dc3545;font-size:13px;margin-top:3px;margin-bottom:8px;padding-left:6px;text-align:left;display:none}
.error-message.show{display:block}
.input-error{border-color:#dc3545!important}
.input-error:focus{box-shadow:0 0 0 3px #dc354526!important}


@media (max-width:500px){
    body{padding:0}
    .main-container{justify-content: center;flex-direction:column;max-width:100%;box-shadow:none;border-radius:0;height:100vh}
    .login-header{padding:0 0 10px}
    .login-header .logo img {width:56px;height:70px;}
    .login-header h1{font-size:26px; padding-bottom: 5px;}
    .login-header p{font-size:10px}
    .login-container-card{padding:22px 17px 50px}
    .floating-label-group input{padding:12.5px 8px 12.5px 45px;font-size:.95rem}
    .floating-label-group label{left:45px;top:.9rem;font-size:.95rem}
    .floating-label-group input:focus+label,.floating-label-group input:not(:placeholder-shown)+
    label{top:-.65rem;font-size:.7rem;transform:translateY(0) translateX(-5px)}
    .floating-label-group .input-icon{left:15px;font-size:1rem}
    .floating-label-group.password-group input{padding-right:50px}
    .password-toggle{right:15px;font-size:1rem}
    .next-btn{padding:.9rem;font-size:1rem}
    .policy-agreement{font-size:12px;margin-bottom:3px;margin-top: 20px; font-size: 13px;}
    .policy-agreement input[type="checkbox"]{min-width:16px;min-height:16px}
    .error-message{font-size:.8rem;margin-top:.2rem;margin-bottom:.8rem}
    .login-link{margin-top:12px;font-size:14px;color:#666;text-align:center}
}