/* Finished FL Trades login controls. Keeps the approved card treatment intact. */
.login-input-shell{
  position:relative;
  display:flex;
  align-items:center;
  min-width:0;
}
.login-input-shell .operator-input{
  width:100%!important;
  padding-left:42px!important;
  padding-right:42px!important;
}
.login-field-icon{
  position:absolute;
  left:13px;
  z-index:2;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  color:#777880;
  pointer-events:none;
}
.login-field-icon .lucide{width:18px;height:18px;stroke:currentColor}
.login-input-shell:focus-within .login-field-icon{color:var(--fl-brand-ember,#ff6a22)}
.login-password-toggle{
  position:absolute;
  right:7px;
  z-index:2;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#777880;
  cursor:pointer;
}
.login-password-toggle:hover,.login-password-toggle:focus-visible{
  background:rgba(255,255,255,.05);
  color:#f5f5f7;
  outline:0;
}
.login-password-toggle .lucide{width:18px;height:18px;stroke:currentColor}
.login-recovery-link{
  justify-self:end;
  margin:-1px 0 2px;
  padding:2px 0;
  border:0;
  background:transparent;
  color:#8e8f96;
  font:inherit;
  font-size:10px;
  cursor:pointer;
}
.login-recovery-link:hover,.login-recovery-link:focus-visible{color:var(--fl-brand-ember,#ff6a22);outline:0}
.login-divider{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  margin:2px 0;
  color:#585960;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.login-divider::before,.login-divider::after{content:"";height:1px;background:rgba(255,255,255,.075)}
.login-request-access{
  background:rgba(5,5,8,.66)!important;
  border-color:rgba(122,56,255,.25)!important;
}
.login-request-access:hover,.login-request-access:focus-visible{
  background:linear-gradient(105deg,rgba(255,66,26,.09),rgba(122,56,255,.12))!important;
  border-color:rgba(211,44,255,.34)!important;
}
.operator-login .operator-input::placeholder{color:#55565d!important;opacity:1}

/* Brand refresh: Dubai yields to the candlestick mark while authentication runs. */
.login-logo-stack{
  position:relative;
  width:clamp(88px,10vw,116px);
  aspect-ratio:1;
  margin:0 auto 10px;
  filter:drop-shadow(0 12px 30px rgba(122,56,255,.20));
}
.login-logo-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.login-logo-candlesticks{z-index:1}
.login-logo-dubai{z-index:2;opacity:1;transition:opacity 780ms cubic-bezier(.2,.8,.2,1),transform 780ms cubic-bezier(.2,.8,.2,1)}
.login-logo-stack.is-authenticating .login-logo-dubai{opacity:0;transform:scale(1.025)}
.login-logo-stack.is-authenticating .login-logo-candlesticks{animation:fl-login-logo-pulse 1200ms ease-in-out infinite alternate}
@keyframes fl-login-logo-pulse{to{filter:drop-shadow(0 0 17px rgba(255,66,26,.34))}}

/* Authenticated brand system: compact header lockup plus quiet institutional seal. */
.crm-brand-lockup{position:relative;display:block;width:clamp(154px,16vw,205px);height:44px}
body .operator-header .crm-brand-lockup img{position:absolute!important;inset:0!important;width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;object-fit:contain!important;object-position:left center!important;border-radius:0!important;box-shadow:none!important}
.crm-brand-lockup-light,.crm-institutional-light{display:none!important}
html[data-theme="light"] .crm-brand-lockup-dark,html[data-theme="light"] .crm-institutional-dark{display:none!important}
html[data-theme="light"] .crm-brand-lockup-light,html[data-theme="light"] .crm-institutional-light{display:block!important}
.crm-institutional-lockup{width:min(116px,18vw);margin:22px var(--pad,24px) -86px auto;pointer-events:none;opacity:.88}
.crm-institutional-lockup img{width:100%;height:auto;object-fit:contain}
@media(max-width:700px){.crm-brand-lockup{width:154px;height:38px}.crm-institutional-lockup{width:74px;margin:14px 16px -56px auto}}

@media(prefers-reduced-motion:reduce){
  .login-logo-dubai{transition:none}
  .login-logo-stack.is-authenticating .login-logo-candlesticks{animation:none}
}

/* Reference-faithful login footer and mode control. */
#login-view .login-footer{
  position:relative;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:7px!important;
  width:min(100%,620px)!important;
  padding:10px 70px 0!important;
  text-align:center;
}
#login-view .login-footer nav{order:1;justify-content:center;gap:0!important}
#login-view .login-footer nav a+ a::before{content:'|';margin:0 13px;color:currentColor;opacity:.45}
#login-view .login-footer>span{order:2}
.login-theme-toggle{
  position:absolute;
  right:0;
  bottom:max(10px,env(safe-area-inset-bottom));
  z-index:4;
  width:54px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(8,9,12,.90);
  color:#f5f5f7;
  box-shadow:0 12px 32px rgba(0,0,0,.38);
  cursor:pointer;
}
.login-theme-toggle:focus-visible{outline:2px solid #ff6a22;outline-offset:3px}

/* Light sign-in is the first-visit default; saved operator preference still wins. */
html[data-theme="light"] body:not(.operator-authenticated) .operator-header{
  background:rgba(251,252,254,.94)!important;
  border-color:rgba(15,23,42,.10)!important;
}
html[data-theme="light"] #login-view.operator-login{
  background-color:#f5f7fb!important;
  background-image:url('fl_trades_desktop_16x9_no_wordmark.webp')!important;
}
html[data-theme="light"] #login-view.operator-login::before{
  background:
    linear-gradient(180deg,rgba(250,252,255,.82),rgba(247,249,253,.91)),
    linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,255,255,.70) 50%,rgba(255,255,255,.88))!important;
}
html[data-theme="light"] #login-view .login-panel{
  background:
    linear-gradient(112deg,rgba(255,255,255,.92),rgba(255,255,255,.72)) padding-box,
    linear-gradient(180deg,#fff,#f7f8fb) padding-box,
    linear-gradient(118deg,rgba(255,106,34,.72),rgba(211,44,255,.54) 58%,rgba(122,56,255,.64)) border-box!important;
  border-color:transparent!important;
  box-shadow:inset 0 1px 0 #fff,0 24px 74px rgba(40,48,70,.16)!important;
}
html[data-theme="light"] #login-view .login-panel::before{border-color:rgba(15,23,42,.06)!important;background:linear-gradient(180deg,rgba(255,255,255,.68),transparent 24%)!important}
html[data-theme="light"] #login-view .login-panel-head{border-color:rgba(15,23,42,.11)!important;box-shadow:none!important}
html[data-theme="light"] #login-view .login-panel-head h1{color:#11141a!important;text-shadow:none!important}
html[data-theme="light"] #login-view .field-label{color:#3e4551!important}
html[data-theme="light"] #login-view .login-input-shell{background:#fff!important;box-shadow:none!important}
html[data-theme="light"] #login-view .login-input-shell .operator-input{
  background:#fff!important;color:#171a21!important;border-color:#c5cad4!important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.045)!important;
}
html[data-theme="light"] #login-view .login-input-shell .operator-input::placeholder{color:#7a8290!important}
html[data-theme="light"] #login-view .login-field-icon,html[data-theme="light"] #login-view .login-password-toggle{color:#697386!important;filter:none!important}
html[data-theme="light"] #login-view #password-recovery{color:#6434db!important}
html[data-theme="light"] #login-view #login-submit.button--solid{
  border-color:transparent!important;
  background:linear-gradient(100deg,#ff6a2a,#ed466f 48%,#7438ff)!important;
  color:#fff!important;text-shadow:none!important;
  box-shadow:0 12px 28px rgba(123,56,255,.18)!important;
}
html[data-theme="light"] #login-view .login-request-access{background:rgba(255,255,255,.78)!important;border-color:#c9ced8!important;color:#222731!important}
html[data-theme="light"] #login-view .login-divider{color:#687180!important}
html[data-theme="light"] #login-view .login-divider::before,html[data-theme="light"] #login-view .login-divider::after{background:rgba(15,23,42,.14)!important}
html[data-theme="light"] #login-view .login-footer{border-color:rgba(15,23,42,.11)!important;color:#687180!important}
html[data-theme="light"] #login-view .login-footer a{color:#616b7b!important}
html[data-theme="light"] .login-theme-toggle{background:#fff;color:#252a34;border-color:rgba(15,23,42,.12);box-shadow:0 10px 28px rgba(30,41,59,.16)}
@media(max-width:700px){
  #login-view .login-footer{padding-inline:58px!important}
  .login-theme-toggle{width:48px;height:40px;right:2px}
  html[data-theme="light"] #login-view.operator-login{background-image:url('fl_trades_mobile_9x16_no_wordmark.webp')!important}
}
@media(max-height:760px){
  #login-view .login-vault{
    grid-template-rows:auto auto!important;
    align-content:start!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
  }
  #login-view .login-panel{align-self:start!important;margin:10px auto 12px!important}
  #login-view .login-footer{position:relative!important;margin:0 auto!important}
}

@media(max-width:700px){
  .login-input-shell .operator-input{font-size:16px!important}
  .login-password-toggle{width:40px;height:40px;right:4px}
}

/* Access-request intake: CRM lead creation happens server-side. */
.access-request-dialog{max-width:480px!important}
.access-request-copy{margin:0 0 18px;color:#9a9ba1;font-size:13px;line-height:1.55}
.access-request-fields{grid-template-columns:1fr!important}
.access-request-dialog .form-field input{min-height:44px}
.access-request-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.access-request-dialog .operator-status{min-height:20px}
@media(max-width:700px){.access-request-dialog{width:calc(100vw - 24px)!important;max-width:none!important}.access-request-dialog .dialog-shell{max-height:calc(100dvh - 24px);overflow:auto}}

/* Login viewport authority: app-like shell, no phantom page scroll. */
html{--fl-app-vh:100dvh}
body.operator-shell:not(.operator-authenticated){overscroll-behavior:none}
body.operator-shell:not(.operator-authenticated){
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:var(--fl-app-vh,100dvh)!important;
  max-height:var(--fl-app-vh,100dvh)!important;
  min-height:0!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}
body.operator-shell:not(.operator-authenticated) #operator-main{
  flex:1 1 auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
body.operator-shell:not(.operator-authenticated) #login-view.operator-login{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  padding:0!important;
  overflow:hidden!important;
  align-items:stretch!important;
}
#login-view .login-vault{
  width:min(var(--max),calc(100% - 28px))!important;
  height:100%!important;
  min-height:0!important;
  padding:10px 0 max(10px,env(safe-area-inset-bottom))!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  align-items:center!important;
  justify-items:center!important;
  align-content:stretch!important;
  overflow:hidden!important;
}
#login-view .login-panel{
  grid-row:1!important;
  align-self:center!important;
  justify-self:center!important;
  margin:0!important;
}
.login-footer{
  grid-row:2;
  width:min(100%,560px);
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 2px 0;
  border-top:1px solid rgba(255,255,255,.07);
  color:#676970;
  font-size:10px;
  line-height:1.2;
  letter-spacing:.02em;
}
.login-footer nav{display:flex;align-items:center;gap:14px}
.login-footer a{color:#777981;text-decoration:none}
.login-footer a:hover,.login-footer a:focus-visible{color:#d7d8db;outline:none}

/* iOS/Safari: 16px form controls prevent focus zoom without disabling user zoom. */
@media(max-width:900px), (pointer:coarse){
  #login-view .operator-input,
  #login-view input,
  #login-view select,
  #login-view textarea{font-size:16px!important;-webkit-text-size-adjust:100%}
  #login-view .login-password-toggle{width:44px!important;height:44px!important;right:2px!important}
}

/* Only a genuinely constrained visual viewport gets an internal scroll lane. */
html.fl-keyboard-open #login-view .login-vault{
  overflow-y:auto!important;
  overscroll-behavior-y:contain!important;
  -webkit-overflow-scrolling:touch;
  grid-template-rows:auto!important;
  align-content:start!important;
  padding-top:8px!important;
}
html.fl-keyboard-open #login-view .login-panel{margin:0 auto 10px!important}
html.fl-keyboard-open #login-view .login-footer{display:none!important}
@media(max-height:680px){
  #login-view .login-vault{overflow-y:auto!important;overscroll-behavior-y:contain!important;-webkit-overflow-scrolling:touch}
}
@media(max-width:700px){
  .login-footer{width:100%;min-height:32px;gap:10px;padding-inline:2px;font-size:9px}
  .login-footer nav{gap:11px}
}

/* Blackened metal authority — opaque instrument housing, not frosted glass. */
#login-view.operator-login{
  background-color:#020203!important;
}
#login-view.operator-login::before{
  background:
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.50)),
    linear-gradient(90deg,rgba(0,0,0,.54) 0%,rgba(0,0,0,.20) 48%,rgba(0,0,0,.46) 100%)!important;
}
#login-view .login-panel{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border:1px solid transparent!important;
  border-radius:14px!important;
  background:
    linear-gradient(112deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.012) 17%,transparent 36%) padding-box,
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,rgba(0,0,0,.012) 1px 3px) padding-box,
    linear-gradient(180deg,#191a1e 0%,#111216 10%,#0a0b0e 28%,#07080a 100%) padding-box,
    linear-gradient(90deg,
      #3b3e45 0%,#555961 3%,#4b4f56 15%,
      #4b4f56 85%,#555961 97%,#3b3e45 100%) border-box!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(255,255,255,.025),
    inset 0 -22px 34px rgba(0,0,0,.28),
    0 1px 0 #000,
    0 3px 8px rgba(0,0,0,.54),
    0 28px 86px rgba(0,0,0,.68)!important;
}
#login-view .login-panel::before{
  content:""!important;
  position:absolute!important;
  inset:1px!important;
  z-index:-1!important;
  border-radius:12px!important;
  border:1px solid rgba(255,255,255,.035)!important;
  border-top-color:rgba(255,255,255,.12)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 18%)!important;
  pointer-events:none!important;
}
#login-view .login-panel::after{
  content:""!important;
  position:absolute!important;
  inset:-1px!important;
  z-index:3!important;
  border-radius:inherit!important;
  padding:1px!important;
  background:
    conic-gradient(from 12deg,
      rgba(255,106,34,.76) 0deg,
      rgba(221,72,80,.62) 18deg,
      transparent 38deg 142deg,
      rgba(211,44,255,.68) 160deg,
      rgba(211,44,255,.56) 178deg,
      transparent 198deg 322deg,
      rgba(255,106,34,.72) 342deg 360deg)!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
  -webkit-mask-composite:xor!important;
  mask-composite:exclude!important;
  filter:none!important;
  opacity:.78!important;
  pointer-events:none!important;
}
#login-view .login-panel-head{
  padding-bottom:18px!important;
  margin-bottom:4px!important;
  border-bottom:1px solid #222429!important;
  box-shadow:0 1px 0 rgba(255,255,255,.025)!important;
}
#login-view .login-wordmark{
  width:min(184px,68%)!important;
  max-height:58px!important;
  margin:0 auto 13px!important;
  filter:saturate(.72) contrast(1.08) brightness(.95)!important;
}
#login-view .login-panel-head h1{
  font-size:34px!important;
  line-height:1!important;
  font-weight:600!important;
  letter-spacing:-.038em!important;
  text-shadow:0 1px 0 #000!important;
}
#login-view .field-label{
  margin-top:9px!important;
  color:#9da0a7!important;
  font-size:10px!important;
  font-weight:650!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
}
#login-view .login-input-shell{
  border-radius:9px!important;
  background:#050608!important;
  box-shadow:0 1px 0 rgba(255,255,255,.03)!important;
}
#login-view .login-input-shell .operator-input{
  min-height:46px!important;
  height:46px!important;
  border:1px solid #2a2c31!important;
  border-radius:9px!important;
  background:linear-gradient(180deg,#050608,#0a0b0e)!important;
  color:#f1f2f4!important;
  box-shadow:
    inset 0 2px 7px rgba(0,0,0,.82),
    inset 0 1px 0 rgba(255,255,255,.018),
    0 1px 0 rgba(255,255,255,.025)!important;
}
#login-view .login-input-shell .operator-input:hover{
  border-color:#34373d!important;
}
#login-view .login-input-shell .operator-input:focus{
  border-color:#555961!important;
  outline:0!important;
  box-shadow:
    inset 0 2px 7px rgba(0,0,0,.82),
    inset 0 1px 0 rgba(255,255,255,.025),
    0 0 0 2px rgba(166,170,178,.075)!important;
}
#login-view .login-field-icon{
  color:#686b72!important;
  filter:drop-shadow(0 1px 0 #000)!important;
}
#login-view .login-input-shell:focus-within .login-field-icon{
  color:#c6c8ce!important;
}
#login-view .login-password-toggle{
  border:1px solid transparent!important;
  color:#777a82!important;
}
#login-view .login-password-toggle:hover,
#login-view .login-password-toggle:focus-visible{
  border-color:#2e3035!important;
  background:linear-gradient(180deg,#1a1b1f,#0c0d10)!important;
  color:#e7e8eb!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.45)!important;
}
#login-view #password-recovery{
  color:#8a8d94!important;
  font-weight:550!important;
}
#login-view #password-recovery:hover,
#login-view #password-recovery:focus-visible{color:#d0d2d6!important}
#login-view #login-submit.button--solid{
  min-height:48px!important;
  margin-top:5px!important;
  border:1px solid #494c53!important;
  border-bottom-color:#292b30!important;
  border-radius:9px!important;
  background:
    linear-gradient(180deg,#32343a 0%,#24262b 48%,#17191d 52%,#111216 100%)!important;
  color:#f5f5f6!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.80),
    0 1px 0 #000,
    0 5px 14px rgba(0,0,0,.42)!important;
  text-shadow:0 1px 0 #000!important;
  font-weight:650!important;
}
#login-view #login-submit.button--solid:hover,
#login-view #login-submit.button--solid:focus-visible{
  border-color:#60646c!important;
  background:linear-gradient(180deg,#3c3f45 0%,#2a2d32 48%,#1c1e22 52%,#15161a 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.82),
    0 1px 0 #000,
    0 7px 18px rgba(0,0,0,.46)!important;
  transform:translateY(-1px)!important;
}
#login-view #login-submit.button--solid:active{
  transform:translateY(1px)!important;
  background:linear-gradient(180deg,#17191d,#26282d)!important;
  box-shadow:inset 0 2px 7px rgba(0,0,0,.78),0 1px 0 rgba(255,255,255,.04)!important;
}
#login-view .login-divider{
  color:#686b72!important;
  font-size:10px!important;
}
#login-view .login-divider::before,
#login-view .login-divider::after{
  background:linear-gradient(90deg,transparent,#33353a)!important;
}
#login-view .login-divider::after{background:linear-gradient(90deg,#33353a,transparent)!important}
#login-view .login-request-access{
  min-height:45px!important;
  border:1px solid #282a2f!important;
  border-radius:9px!important;
  background:linear-gradient(180deg,#0e0f12,#08090b)!important;
  color:#aeb1b7!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 1px 2px rgba(0,0,0,.35)!important;
}
#login-view .login-request-access:hover,
#login-view .login-request-access:focus-visible{
  border-color:#3b3e44!important;
  background:linear-gradient(180deg,#17181c,#0c0d10)!important;
  color:#eceef1!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 3px 8px rgba(0,0,0,.40)!important;
}
#login-view .operator-status{color:#aeb1b7!important}
#login-view .operator-status.is-error{color:#d59688!important}
#login-view .operator-input::placeholder{color:#4f5259!important}

@media(min-width:701px){
  #login-view .login-panel{width:min(382px,calc(100vw - 48px))!important;padding:26px!important}
}
@media(max-width:700px){
  #login-view .login-panel{border-radius:13px!important;padding:22px 20px!important}
  #login-view .login-panel::before{border-radius:11px!important}
  #login-view .login-panel-head h1{font-size:31px!important}
  #login-view .login-wordmark{width:min(172px,66%)!important}
}

/* Short-landscape authority: preserve top-to-bottom form access after rotation.
   Use the wide 16:9 scene for phone landscape instead of cropping the portrait/tablet art. */
@media (orientation:landscape) and (max-height:680px){
  #login-view .login-vault{
    grid-template-rows:auto auto!important;
    align-items:start!important;
    align-content:start!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch;
  }
  #login-view .login-panel{
    align-self:start!important;
    margin:10px auto 12px!important;
  }
  #login-view .login-footer{
    position:relative!important;
    margin:0 auto!important;
  }
}
@media (orientation:landscape) and (max-height:680px) and (max-width:900px){
  #login-view.operator-login{
    background-image:
      radial-gradient(circle at 30% 48%,rgba(122,56,255,.055),transparent 38%),
      url('fl_trades_desktop_16x9_no_wordmark.webp')!important;
  }
  html[data-theme="light"] #login-view.operator-login{
    background-image:url('fl_trades_desktop_16x9_no_wordmark.webp')!important;
  }
}