/* Bexchange – Login screen stylesheet */
:root{--white:#fafafa;--primary:#f90;--bg:#020518;--overlay:#0e152c;--muted:#9f9f9f;--field:#505050;--err:#ff6b6b}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:#f3f3f3;font-family:Poppins,system-ui,sans-serif;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}img{display:block;max-width:100%}
/* header */
.top{position:absolute;top:54px;left:40px;right:40px;display:flex;justify-content:space-between;align-items:center;z-index:5}
.logo{width:93px;height:58px;overflow:hidden;position:relative;flex:none}
.logo img{position:absolute;width:128.26%;height:137.21%;left:-13.41%;top:-9.3%;max-width:none}
.lang{position:relative}
.lang>button{background:#242426;border:1px solid #161617;border-radius:20px;padding:6px 10px;min-width:165px;display:flex;align-items:center;gap:10px;color:#787878;font:400 10px/1.2 Montserrat,system-ui,sans-serif}
.lang .fl{display:flex;align-items:center;gap:5px}
.lang .fl img{width:24px;height:24px}.lang .fl img.ar{width:16px;height:16px}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:190px;background:var(--overlay);border:1px solid var(--field);border-radius:12px;padding:6px;box-shadow:0 16px 40px rgba(0,0,0,.5);z-index:10}
.menu[hidden]{display:none}
.menu button{width:100%;text-align:left;background:none;border:0;color:#f3f3f3;font:400 12px/1.25 Poppins,system-ui,sans-serif;padding:10px;border-radius:8px;display:flex;justify-content:space-between;gap:10px}
.menu button:hover{background:rgba(255,255,255,.06)}.menu button[aria-selected=true]{color:var(--primary)}
/* card */
main{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:120px 20px}
.card{width:530px;max-width:100%;background:var(--overlay);border:1px solid var(--field);border-radius:20px;padding:53px 50px}
.card h1{font:500 42px/normal Poppins,system-ui,sans-serif;letter-spacing:.21px;color:#f3f3f3}
.card .sub{font-size:14px;line-height:1;color:var(--muted);margin-top:3px}
form{display:flex;flex-direction:column;gap:50px;margin-top:21px;align-items:center}
.fields{display:flex;flex-direction:column;gap:20px;width:100%}
.f{border:1px solid var(--field);border-radius:8px;height:51px;display:flex;align-items:center;padding:0 19px;gap:12px;transition:border-color .2s,box-shadow .2s}
.f:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,153,0,.14)}
.f.bad{border-color:var(--err)}
.f input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;color:#f3f3f3;font:400 12px/1.25 Poppins,system-ui,sans-serif}
.f input::placeholder{color:var(--muted)}
.f input:-webkit-autofill{-webkit-text-fill-color:#f3f3f3;-webkit-box-shadow:0 0 0 40px var(--overlay) inset}
.eye{background:none;border:0;padding:6px;margin-right:-6px;display:flex;flex:none;border-radius:6px}
.eye img{width:14.667px;height:12px}
.msg{font-size:12px;line-height:1.25;color:var(--err);margin-top:-8px}.msg:empty{display:none}
.forgot{align-self:flex-end;font-size:12px;line-height:1.25;color:var(--primary);margin-top:-4px}
.fieldwrap{display:flex;flex-direction:column;gap:16px;width:100%}
.actions{display:flex;flex-direction:column;gap:29px;align-items:center;width:100%;max-width:330px}
.btn{width:100%;height:42px;border-radius:20px;padding:10px;display:flex;align-items:center;justify-content:center;font:400 12px/1.25 Poppins,system-ui,sans-serif;color:#f3f3f3;border:1px solid var(--primary)}
.btn.p{background:var(--primary)}
.or{display:flex;align-items:center;gap:5px;width:100%;font:400 10px/normal Montserrat,system-ui,sans-serif;color:#696969}
.or::before,.or::after{content:"";flex:1;height:1px;background:#3a3a3a}
/* motion */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-14px)}}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(-4px)}}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.top{animation:slideDown .5s ease backwards}
.card{animation:fadeUp .6s .1s ease backwards}
.card>*,form>*{animation:fadeUp .5s ease backwards}
.card h1{animation-delay:.25s}.card .sub{animation-delay:.32s}.fields{animation-delay:.4s}.actions{animation-delay:.5s}
.menu:not([hidden]){animation:pop .18s ease}
.f.bad,.msg:not(:empty){animation:shake .35s}
a,button{transition:background-color .2s,color .2s,border-color .2s,transform .2s,filter .2s,box-shadow .2s}
.btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.1)}.btn:active{transform:none}
.btn:not(.p):hover{background:rgba(255,153,0,.1)}.btn:disabled{opacity:.7;cursor:default}
.forgot:hover{text-decoration:underline}.eye:hover{background:rgba(255,255,255,.08)}
.lang>button:hover{border-color:var(--field)}
.lang .ar{transition:transform .2s}.lang>button[aria-expanded=true] .ar{transform:rotate(180deg)}
:focus-visible:not(input){outline:2px solid var(--primary);outline-offset:2px}
@media (max-width:600px){
 .top{top:20px;left:16px;right:16px}.logo{width:70px;height:43px}
 .lang>button{min-width:0;padding:6px 8px}.lang .lbl{display:none}
 main{padding:96px 16px 40px;align-items:flex-start}
 .card{padding:32px 20px}.card h1{font-size:32px}.f{height:48px;padding:0 14px}.f input{font-size:14px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important}}

/* language picker with per-language flags (see js/lang.js) */
.lang .fl img:not(.ar){border-radius:50%}
.lang.has-value .lbl{color:#c7c7c7}
.menu button{align-items:center;justify-content:flex-start}
.menu button img{width:20px;height:20px;border-radius:50%;flex:none}
.menu button span{flex:1}
.menu button i{font-style:normal;color:var(--primary);opacity:0}
.menu button[aria-selected=true] i{opacity:1}
.menu button:focus-visible{background:rgba(255,255,255,.06);outline:0}