/* v3 — refined styles to mimic screenshot */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:Inter, "Segoe UI", Arial, sans-serif;background:#ffffff;color:#222}

/* big centered layout with lots of whitespace */
.wrapper{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 16px}
#content-container{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center}

/* logo area similar to screenshot */
#login-sub-header{display:flex;justify-content:center;width:100%;margin-bottom:28px}
#login-sub-header .main-logo{width:360px;height:auto;display:block}

/* card style is minimal: inputs stacked with spaced layout */
#login-sub-container{width:100%;max-width:420px;padding:0;margin:0;border:none;background:transparent;box-shadow:none}
#forms{width:100%;display:flex;flex-direction:column;align-items:stretch}

/* labels & inputs */
.input-req-login{font-weight:600;margin:6px 0;color:#333;font-size:14px}
.std_textbox{width:100%;height:44px;padding:10px 12px 10px 44px;border:1px solid #d0d6db;border-radius:4px;font-size:14px;color:#333;background:#fff;background-image:none; background-repeat:no-repeat; background-position:12px center; outline:none;transition:box-shadow .12s ease,border-color .12s ease}
#user{background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iIzlhYTBhNiIgZD0iTTEyIDEyYTQgNCAwIDEwMC04IDQgNCAwIDAwMCA4em0wIDJjLTQuNCAwLTggMi4yLTggNHYyaDE2di0yYzAtMS44LTMuNi00LTgtNHoiLz48L3N2Zz4=')}
#pass{background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iIzlhYTBhNiIgZD0iTTE3IDhWN2E1IDUgMCAxMC0xMCAwdjFINXYxMmgxNFY4aC0yem0tOC0xYTMgMyAwIDExNiAwdjFIOVY3eiIvPjwvc3ZnPg==')}
.std_textbox:focus{border-color:#2b9aff;box-shadow:0 6px 18px rgba(43,154,255,0.08)}

/* spacing for inputs */
.input-field-login{margin-bottom:16px}

/* big blue button like screenshot */
.login-btn button{display:block;width:100%;background:linear-gradient(180deg,#2aa3ff,#188fe6);color:#fff;border:none;padding:12px 14px;border-radius:6px;font-weight:700;box-shadow:0 2px 0 rgba(24, 143, 230, 0.12);cursor:pointer;font-size:15px}
.login-btn button:active{transform:translateY(1px)}

/* language list centered near bottom like screenshot */
#locale-footer{width:100%;margin-top:54px;text-align:center;font-size:14px;color:#333}
#locales_list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
#locales_list li a{color:#444;text-decoration:none;opacity:0.95}

/* footer copyright */
.footer{margin-top:54px;text-align:center;color:#777;font-size:13px}
.footer .cp-logo{display:block;margin:10px auto 6px auto}

/* responsive */
@media(max-width:520px){
  #login-sub-header .main-logo{width:280px}
  .wrapper{padding:24px}
}