/* omnir skin — Login screen; loaded by Users_Login_View::getHeaderCss(), BEFORE style.css.
   Field and button rules are scoped to #loginCard: style.css ends with an !important
   input[type=…]:not()×4 rule (0-5-1) that outranks any class selector here. */
body {
  overflow-x: hidden;
}
/* The video is the page background: body carries the colour shown until it paints
   (html body — style.css sets body{background:var(--bg)!important} and loads later). */
html body {
  background: #0B2239 !important;
}
.main-container {
  position:   relative;
  background: transparent !important;
}
#myVideo {
  position:   fixed;
  top:        0;
  left:       0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  z-index:    0;
}
.loginShell {
  position:        relative;
  z-index:         1;
  min-height:      100vh;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         24px 16px;
}
/* body div#page: one step above style.css's own !important div#page sidebar offset (order-tie). */
body div#page {
  padding-top: 0px !important;
  margin-left: 0 !important;
  width:       100% !important;
  max-width:   100% !important;
  background:  transparent !important;
}
.login-heading {
  text-align:       center;
  padding-bottom:   12px;
  background-color: unset !important;
}
.login-heading img {
  width:     110px;
  max-width: 60%;
  height:    auto;
}
.loginDiv {
  width:            100%;
  max-width:        400px;
  margin:           0 auto;
  border:           1px solid rgba(255,255,255,0.6);
  border-radius:    var(--view-card-radius-md);
  background-color: #FFFFFF;
  box-shadow:       0 18px 45px rgba(11, 34, 57, 0.28);
  padding:          1.5rem;
}
.extbuttons {
  margin-top: 14px;
}
/* The OAuth buttons carry an inline margin-bottom; the last one padded the card out. */
.extbuttons .oauthLogin:last-child {
  margin-bottom: 0 !important;
}

#loginCard .form-group {
  margin-bottom: 14px;
}
#loginCard .form-group label {
  display:     block;
  font-size:   var(--label-font-size);
  font-weight: var(--label-font-weight);
  color:       var(--color-text-muted);
  margin:      0 0 6px;
  line-height: inherit;
}
.inputField {
  position: relative;
}
.fieldIcon {
  position:       absolute;
  top:            50%;
  left:           14px;
  transform:      translateY(-50%);
  font-size:      14px;
  color:          #9AA6B8;
  pointer-events: none;
}
#loginCard input.form-control {
  height:        42px !important;
  padding:       0 14px !important;
  border:        1px solid var(--field-border) !important;
  border-radius: var(--view-control-radius) !important;
  background:    #ffffff !important;
  font-size:     14px !important;
  color:         var(--color-text-field) !important;
  box-shadow:    none !important;
}
#loginCard .inputField input.form-control {
  padding-left: 40px !important;
}
#loginCard .inputField:has(.passwordToggle) input.form-control {
  padding-right: 42px !important;
}
#loginCard input.form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow:  0 0 0 3px var(--color-primary-tint) !important;
  outline:     none !important;
}
.passwordToggle {
  position:        absolute;
  top:             0;
  right:           0;
  height:          100%;
  width:           42px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0;
  border:          0;
  background:      none;
  box-shadow:      none;
  color:           #9AA6B8;
  cursor:          pointer;
}
.passwordToggle:hover,
.passwordToggle:focus {
  color:   var(--color-primary);
  outline: none;
}

#loginCard .button {
  width:            100%;
  background-color: var(--color-primary);
  color:            #ffffff;
  font-size:        15px !important;
  font-weight:      600;
  transition:       all 0.1s ease 0s;
  border:           1px solid transparent;
  padding:          11px 24px;
  border-radius:    var(--view-control-radius);
  cursor:           pointer;
  background-image: none !important;
}
#loginCard .button:hover {
  background-color: var(--color-primary-hover);
}
#loginCard .button i {
  margin-right: 6px;
}
#loginCard .button:disabled,
#loginCard .button.is-loading {
  opacity: 0.85;
  cursor:  default;
}
.loginSpinner {
  display:          inline-block;
  width:            14px;
  height:           14px;
  margin-right:     8px;
  vertical-align:   -2px;
  border:           2px solid rgba(255,255,255,0.45);
  border-top-color: #ffffff;
  border-radius:    50%;
  animation:        loginSpin 0.7s linear infinite;
}
@keyframes loginSpin { to { transform: rotate(360deg); } }
.login-form.is-busy .form-group { opacity: 0.6; }

.stepHead {
  text-align:    center;
  margin-bottom: 16px;
}
.stepIcon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           50px;
  height:          50px;
  margin-bottom:   12px;
  border-radius:   50%;
  background:      var(--color-primary-tint);
  color:           var(--color-primary);
  font-size:       19px;
}
.stepIcon.is-success {
  background: rgba(34, 200, 122, 0.14);
  color:      var(--color-success);
}
.stepTitle {
  margin:      0 0 6px;
  font-size:   21px;
  font-weight: 700;
  color:       var(--color-text);
}
.stepText {
  margin:      0;
  font-size:   13px;
  line-height: 1.5;
  color:       var(--color-text-muted);
}
.stepText b {
  color:       var(--color-primary);
  font-weight: 600;
}
.stepBack {
  display:       inline-block;
  margin-bottom: 4px;
  font-size:     13px;
  font-weight:   500;
  color:         var(--color-primary);
  cursor:        pointer;
}
.stepBack i {
  margin-right: 6px;
}
.changeUsernameLink {
  margin-left: 4px;
  color:       var(--color-primary);
  cursor:      pointer;
}
.stepNote {
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin-top:    14px;
  padding:       10px 13px;
  border-radius: var(--view-control-radius);
  background:    var(--color-surface-muted);
  font-size:     12.5px;
  line-height:   1.45;
  color:         var(--color-text-muted);
}
.stepNote i {
  color: var(--color-primary);
}

.otpBoxes {
  display: flex;
  gap:     8px;
}
#loginCard input.otpBox {
  flex:          1 1 0;
  min-width:     0;
  height:        50px !important;
  padding:       0 !important;
  border:        1px solid var(--field-border) !important;
  border-radius: var(--view-control-radius) !important;
  background:    #ffffff !important;
  text-align:    center !important;
  font-size:     20px !important;
  font-weight:   600 !important;
  color:         var(--color-text-field) !important;
}
#loginCard input.otpBox:focus {
  border-color: var(--color-primary) !important;
  box-shadow:   0 0 0 3px var(--color-primary-tint) !important;
  outline:      none !important;
}
#loginCard input.otpBox.is-filled {
  border-color: var(--color-primary) !important;
}
.otpBoxes.is-verifying {
  opacity:        0.6;
  pointer-events: none;
}

.pwStrength {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-top:  10px;
}
.pwBars {
  display: flex;
  gap:     5px;
  flex:    1 1 auto;
}
.pwBars i {
  flex:          1 1 0;
  height:        5px;
  border-radius: 3px;
  background:    var(--line);
  transition:    background 0.15s ease;
}
.pwStrengthLabel {
  font-size:   12px;
  font-weight: 600;
  min-width:   44px;
  text-align:  right;
}
.pwStrength[data-level="1"] .pwBars i.on,
.pwStrength[data-level="1"] .pwStrengthLabel { color: var(--color-danger); }
.pwStrength[data-level="2"] .pwBars i.on,
.pwStrength[data-level="2"] .pwStrengthLabel { color: #F59E0B; }
.pwStrength[data-level="3"] .pwBars i.on,
.pwStrength[data-level="3"] .pwStrengthLabel { color: var(--color-primary); }
.pwStrength[data-level="4"] .pwBars i.on,
.pwStrength[data-level="4"] .pwStrengthLabel { color: var(--color-success); }
.pwBars i.on { background: currentColor; }
.pwRulesTitle {
  margin:    10px 0 6px;
  font-size: 12.5px;
  color:     var(--color-text);
}
.pwRules {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   4px 12px;
  margin:                0;
  padding:               0;
}
/* Two columns push each rule onto two lines once the card narrows. */
@media (max-width: 480px) {
  .pwRules { grid-template-columns: 1fr; }
}
.pwRules li {
  display:      flex;
  align-items:  center;
  gap:          8px;
  list-style:   none;
  font-size:    12.5px;
  color:        var(--color-text-muted);
}
.pwRules li i {
  color:     #CBD5E1;
  font-size: 13px;
}
.pwRules li.is-met i {
  color: var(--color-success);
}
.pwMatch {
  display:     block;
  margin-top:  7px;
  font-size:   12.5px;
  font-weight: 500;
}
.pwMatch.is-ok    { color: var(--color-success); }
.pwMatch.is-error { color: var(--color-danger); }

.orDivider {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin:      0 0 16px;
  font-size:   12.5px;
  color:       var(--color-text-muted);
}
.orDivider:before,
.orDivider:after {
  content:    "";
  flex:       1 1 0;
  height:     1px;
  background: var(--line);
}
.resendLine {
  margin-top: 16px;
  text-align: center;
  font-size:  12.5px;
  color:      var(--color-text-muted);
}
.resendCodeLink {
  font-weight: 600;
  color:       var(--color-primary);
}
.resendCountdown {
  color: var(--color-text-muted);
}
.resendCodeLink.is-disabled {
  color:          #a8b7c7;
  pointer-events: none;
}
.fgtlink {
  margin-top:  12px;
  color:       var(--color-primary);
}
.fgtlink a {
  cursor: pointer;
}
.fgtlink i {
  margin-right: 6px;
}
.failureMessage {
  color:      var(--color-danger);
  display:    block;
  text-align: center;
  padding:    0px 0px 10px;
}
.successMessage {
  color:      var(--color-success);
  display:    block;
  text-align: center;
  padding:    0px 0px 10px;
}
.app-footer {
  width:       100%;
  text-align:  center;
  background:  none;
  border-top:  unset;
  margin:      18px 0 0;
  padding:     0;
  color:       rgba(255,255,255,0.92);
  font-size:   12.5px;
  text-shadow: 0 1px 3px rgba(11, 34, 57, 0.55);
}
.app-footer a {
  color: inherit;
}
.trustLine i {
  margin-right: 7px;
}
.app-footer .login-social li {
  display:      inline-block;
  list-style:   none;
  margin-right: 1em;
}
/* No social links configured leaves an empty list holding the footer open. */
.app-footer .login-social:empty {
  display: none;
}