/* 3HASH Login — overrides Elastic skin completely on login page */
:root {
  --3h-navy: #0A1628;
  --3h-blue: #2563EB;
  --3h-blue-hover: #1D4ED8;
  --3h-bg: #F8FAFC;
  --3h-muted: #64748B;
  --3h-border: #E2E8F0;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100vh !important;
  width: 100vw !important;
  overflow: hidden !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  background: var(--3h-bg) !important;
  color: var(--3h-navy) !important;
}

body.task-login #layout {
  display: flex !important;
  flex-direction: row !important;
  height: 100vh !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  position: fixed !important;
  inset: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
}

body.task-login #layout-content {
  display: flex !important;
  flex-direction: row !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: static !important;
  flex: none !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

body.task-login .login-left {
  flex: 0 0 500px !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 60px 64px !important;
  box-shadow: 4px 0 50px rgba(10,22,40,0.08) !important;
  z-index: 10 !important;
  height: 100vh !important;
  overflow-y: auto !important;
}

body.task-login .login-left .logo-wrap {
  margin-bottom: 48px !important;
  text-align: left !important;
}
body.task-login .login-left .logo-wrap img {
  height: 50px !important;
  width: auto !important;
  max-width: 200px !important;
  display: inline-block !important;
}
body.task-login .login-left h1.login-title {
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  margin: 0 0 8px !important;
  color: var(--3h-navy) !important;
  line-height: 1.2 !important;
}
body.task-login .login-left p.subtitle {
  font-size: 15px !important;
  color: var(--3h-muted) !important;
  margin: 0 0 36px !important;
  line-height: 1.5 !important;
}

body.task-login form#login-form {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
body.task-login #login-form fieldset { border: 0 !important; padding: 0 !important; margin: 0 !important; }
body.task-login #login-form legend { display: none !important; }
body.task-login #login-form table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: transparent !important;
  border: 0 !important;
}
body.task-login #login-form table tbody { display: block !important; width: 100% !important; }
body.task-login #login-form table tr {
  display: block !important;
  margin-bottom: 18px !important;
  background: transparent !important;
  border: 0 !important;
}
body.task-login #login-form table td {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body.task-login #login-form table td.title {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--3h-muted) !important;
  margin-bottom: 6px !important;
}
body.task-login #login-form table td.title label {
  color: var(--3h-muted) !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
body.task-login #login-form input[type="text"],
body.task-login #login-form input[type="email"],
body.task-login #login-form input[type="password"] {
  width: 100% !important;
  height: 50px !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  border: 1.5px solid var(--3h-border) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--3h-navy) !important;
  outline: none !important;
  font-family: inherit !important;
  box-shadow: none !important;
  margin: 0 !important;
  display: block !important;
}
body.task-login #login-form input[type="text"]:focus,
body.task-login #login-form input[type="password"]:focus {
  border-color: var(--3h-blue) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12) !important;
}
body.task-login #login-form .formbuttons {
  margin: 12px 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
body.task-login #login-form button[type="submit"],
body.task-login #login-form .submit,
body.task-login #login-form #rcmloginsubmit {
  width: 100% !important;
  height: 52px !important;
  background: var(--3h-blue) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  text-transform: none !important;
  display: block !important;
  margin: 0 !important;
}
body.task-login #login-form button[type="submit"]:hover {
  background: var(--3h-blue-hover) !important;
}

body.task-login #login-footer {
  margin-top: 32px !important;
  font-size: 13px !important;
  color: var(--3h-muted) !important;
  text-align: left !important;
  background: transparent !important;
  position: static !important;
  padding: 0 !important;
}
body.task-login #login-footer a,
body.task-login .support-link {
  color: var(--3h-blue) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

body.task-login .login-right {
  flex: 1 1 auto !important;
  background: linear-gradient(135deg, #0A1628 0%, #1E3A8A 50%, #2563EB 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  padding: 60px !important;
  height: 100vh !important;
}
body.task-login .login-right::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.10) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.07) 0%, transparent 50%) !important;
  pointer-events: none !important;
}
body.task-login .login-right::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(255,255,255,0.025) 40px, rgba(255,255,255,0.025) 41px) !important;
  pointer-events: none !important;
}
body.task-login .login-right .marketing {
  position: relative !important;
  z-index: 2 !important;
  max-width: 540px !important;
}
body.task-login .login-right .marketing .badge {
  display: inline-block !important;
  padding: 6px 14px !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 100px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 24px !important;
  color: #fff !important;
}
body.task-login .login-right .marketing h2 {
  font-size: 52px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -1.5px !important;
  margin: 0 0 24px !important;
  color: #fff !important;
}
body.task-login .login-right .marketing .lead {
  font-size: 18px !important;
  line-height: 1.6 !important;
  opacity: 0.85 !important;
  margin: 0 0 36px !important;
  color: #fff !important;
}
body.task-login .login-right .marketing ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.task-login .login-right .marketing ul li {
  font-size: 15px !important;
  line-height: 1.5 !important;
  padding-left: 36px !important;
  position: relative !important;
  margin-bottom: 16px !important;
  opacity: 0.92 !important;
  color: #fff !important;
}
body.task-login .login-right .marketing ul li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 1px !important;
  width: 24px !important;
  height: 24px !important;
  background: rgba(255,255,255,0.18) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.task-login #message,
body.task-login #messagestack {
  position: fixed !important;
  top: 24px !important;
  left: 520px !important;
  right: 24px !important;
  z-index: 9999 !important;
}

@media (max-width: 900px) {
  html, body { overflow: auto !important; height: auto !important; }
  body.task-login #layout, body.task-login #layout-content {
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh !important;
    position: static !important;
  }
  body.task-login .login-left { flex: none !important; padding: 40px 28px !important; height: auto !important; }
  body.task-login .login-right { flex: none !important; padding: 40px 28px !important; height: auto !important; }
  body.task-login .login-right .marketing h2 { font-size: 36px !important; }
}

/* Aggressive #logo override (Elastic positions logo absolutely) */
body.task-login #logo,
body.task-login img#logo {
  position: static !important;
  display: block !important;
  margin: 0 !important;
  height: 50px !important;
  width: auto !important;
  max-width: 220px !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}
body.task-login .logo-wrap {
  display: block !important;
  margin-bottom: 40px !important;
}

/* Final alignment: logo + title both aligned-left, same vertical line */
body.task-login .login-left .logo-wrap {
  margin: 0 0 32px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  display: block !important;
}
body.task-login #logo,
body.task-login img#logo {
  height: 44px !important;
  margin-left: 0 !important;
  display: block !important;
}
body.task-login .login-left .login-title {
  margin-left: 0 !important;
  text-align: left !important;
}
body.task-login .login-left .subtitle {
  text-align: left !important;
  margin-left: 0 !important;
}

/* Centre everything in left panel */
body.task-login .login-left {
  text-align: center !important;
  align-items: center !important;
}
body.task-login .login-left .logo-wrap {
  text-align: center !important;
  margin: 0 auto 32px auto !important;
}
body.task-login #logo,
body.task-login img#logo {
  margin: 0 auto !important;
}
body.task-login .login-left .login-title {
  text-align: center !important;
}
body.task-login .login-left .subtitle {
  text-align: center !important;
  max-width: 360px !important;
  margin: 0 auto 36px auto !important;
}
body.task-login form#login-form {
  width: 100% !important;
  max-width: 380px !important;
  margin: 0 auto !important;
  text-align: left !important;
}
body.task-login #login-footer {
  text-align: center !important;
  width: 100% !important;
}

/* Support modal */
.support-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(10, 22, 40, 0.6) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 100000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.support-modal-backdrop.open {
  display: flex !important;
  opacity: 1;
  animation: fadeIn 0.2s ease forwards;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

.support-modal {
  background: #fff !important;
  border-radius: 16px !important;
  width: 100% !important;
  max-width: 480px !important;
  padding: 40px 36px 32px 36px !important;
  box-shadow: 0 25px 80px rgba(10, 22, 40, 0.4) !important;
  position: relative !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}
.support-modal h2 {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0A1628 !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.5px !important;
}
.support-modal .support-lead {
  font-size: 14px !important;
  color: #64748B !important;
  margin: 0 0 28px !important;
}
.support-modal-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #F1F5F9 !important;
  color: #475569 !important;
  border: 0 !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
}
.support-modal-close:hover { background: #E2E8F0 !important; }

.support-row {
  margin-bottom: 16px !important;
}
.support-row label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #64748B !important;
  margin-bottom: 6px !important;
}
.support-row input,
.support-row textarea {
  width: 100% !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #0A1628 !important;
  outline: none !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
  resize: vertical !important;
}
.support-row input:focus,
.support-row textarea:focus {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12) !important;
}

#sup-submit {
  width: 100% !important;
  height: 48px !important;
  background: #2563EB !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  margin-top: 8px !important;
}
#sup-submit:hover { background: #1D4ED8 !important; }
#sup-submit:disabled { opacity: 0.6 !important; cursor: wait !important; }

.support-error {
  color: #DC2626 !important;
  font-size: 13px !important;
  margin-top: 12px !important;
  text-align: center !important;
}

#support-success {
  text-align: center !important;
  padding: 20px 0 !important;
}
.support-success-icon {
  width: 64px !important;
  height: 64px !important;
  background: #10B981 !important;
  color: #fff !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 36px !important;
  margin-bottom: 16px !important;
}
#support-success h3 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0A1628 !important;
  margin: 0 0 12px !important;
}
#support-success p {
  margin: 6px 0 !important;
  color: #64748B !important;
  font-size: 14px !important;
}
#support-success strong {
  color: #2563EB !important;
  font-family: monospace !important;
  font-size: 15px !important;
}
.support-success-msg {
  margin-top: 16px !important;
}
#support-success button {
  margin-top: 24px !important;
  background: #F1F5F9 !important;
  color: #475569 !important;
  border: 0 !important;
  padding: 12px 28px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: inherit !important;
}
#support-success button:hover { background: #E2E8F0 !important; }

/* Mobile fix: hero (right) ABOVE form (left) */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    width: 100% !important;
  }
  body.task-login #layout {
    position: static !important;
    flex-direction: column-reverse !important;
    height: auto !important;
    min-height: 100vh !important;
    width: 100% !important;
    overflow: visible !important;
  }
  body.task-login #layout-content {
    flex-direction: column-reverse !important;
    height: auto !important;
    min-height: 100vh !important;
    width: 100% !important;
    position: static !important;
    overflow: visible !important;
  }
  body.task-login .login-left {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 32px 24px !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  body.task-login .login-left form#login-form {
    max-width: 100% !important;
    width: 100% !important;
  }
  body.task-login .login-right {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 280px !important;
    padding: 48px 24px !important;
    border-radius: 0 0 24px 24px !important;
  }
  body.task-login .login-right .marketing {
    text-align: center !important;
    max-width: 100% !important;
  }
  body.task-login .login-right .marketing h2 {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }
  body.task-login .login-right .marketing .lead {
    font-size: 15px !important;
  }
  body.task-login .login-right .marketing ul {
    display: none !important;
  }
  body.task-login .login-right .marketing .badge {
    font-size: 10px !important;
  }
  body.task-login .login-left .logo-wrap {
    margin: 0 auto 24px auto !important;
  }
  body.task-login .login-left .login-title {
    font-size: 24px !important;
  }
  body.task-login .login-left .subtitle {
    font-size: 14px !important;
    margin-bottom: 24px !important;
  }
  body.task-login #login-form input[type=text],
  body.task-login #login-form input[type=password] {
    height: 48px !important;
    font-size: 16px !important; /* >=16px previne zoom iOS */
  }
  body.task-login #login-form button[type=submit] {
    height: 50px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 900px) {
  body.task-login .login-right .marketing h2 {
    font-size: 26px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  body.task-login .login-left .login-title {
    font-size: 22px !important;
    word-wrap: break-word !important;
  }
  body.task-login .login-right {
    padding: 36px 20px !important;
  }
  body.task-login .login-left {
    padding: 28px 20px !important;
  }
}
@media (max-width: 480px) {
  body.task-login .login-right .marketing h2 {
    font-size: 22px !important;
  }
  body.task-login .login-right .marketing .lead {
    font-size: 13px !important;
  }
  body.task-login .login-left .login-title {
    font-size: 20px !important;
  }
  body.task-login .login-left .subtitle {
    font-size: 13px !important;
  }
}

/* Mobile word wrap force */
@media (max-width: 900px) {
  body.task-login * {
    box-sizing: border-box !important;
    max-width: 100vw !important;
  }
  body.task-login h1, body.task-login h2, body.task-login p,
  body.task-login .login-title, body.task-login .subtitle {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto !important;
  }
  body.task-login .login-left,
  body.task-login .login-right {
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  body.task-login #login-form table,
  body.task-login #login-form table tr,
  body.task-login #login-form table td,
  body.task-login #login-form input {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* The elastic skin wraps inputs in a div with icon - reset it */
  body.task-login #login-form .input-group,
  body.task-login #login-form .input-group .form-control {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
  }
  body.task-login #login-form .input-group input {
    flex: 1 !important;
    min-width: 0 !important;
  }
}

/* Final mobile H1 fix */
@media (max-width: 480px) {
  body.task-login .login-left .login-title {
    font-size: 19px !important;
    line-height: 1.2 !important;
    padding: 0 !important;
    text-align: center !important;
  }
  body.task-login .login-left .subtitle {
    font-size: 13px !important;
    padding: 0 !important;
    text-align: center !important;
  }
  body.task-login .login-left {
    padding: 24px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body.task-login .login-right {
    padding: 32px 16px !important;
    width: 100% !important;
  }
  body.task-login .login-right .marketing h2 {
    font-size: 22px !important;
  }
  body.task-login .login-right .marketing .lead {
    font-size: 13px !important;
    padding: 0 8px !important;
  }
  body.task-login .login-right .marketing .badge {
    font-size: 9px !important;
    padding: 5px 12px !important;
  }
}

@media (max-width: 900px) {
  body.task-login .login-left {
    justify-content: flex-start !important;
    min-height: auto !important;
    padding-top: 28px !important;
    padding-bottom: 24px !important;
  }
  body.task-login .login-left .logo-wrap {
    margin-bottom: 18px !important;
  }
  body.task-login .login-left .login-title {
    margin-bottom: 6px !important;
  }
  body.task-login .login-left .subtitle {
    margin-bottom: 22px !important;
  }
  body.task-login form#login-form {
    margin-top: 0 !important;
  }
  body.task-login #login-form table tr {
    margin-bottom: 14px !important;
  }
  body.task-login #login-footer {
    margin-top: 20px !important;
  }
  body.task-login .login-right {
    min-height: 220px !important;
  }
}

/* Mobile: hero MUITO compacto no topo */
@media (max-width: 900px) {
  body.task-login .login-right {
    min-height: 0 !important;
    height: auto !important;
    padding: 22px 20px !important;
    border-radius: 0 0 18px 18px !important;
  }
  body.task-login .login-right .marketing {
    text-align: center !important;
  }
  body.task-login .login-right .marketing .badge {
    margin-bottom: 10px !important;
    padding: 4px 11px !important;
    font-size: 9px !important;
  }
  body.task-login .login-right .marketing h2 {
    font-size: 20px !important;
    margin: 0 0 6px !important;
    line-height: 1.15 !important;
  }
  body.task-login .login-right .marketing .lead {
    font-size: 12px !important;
    margin: 0 !important;
    opacity: 0.75 !important;
  }
  body.task-login .login-right .marketing ul { display: none !important; }

  body.task-login .login-left {
    padding: 22px 20px 24px 20px !important;
  }
  body.task-login .login-left .logo-wrap {
    margin-bottom: 14px !important;
  }
  body.task-login .login-left .logo-wrap img,
  body.task-login #logo {
    height: 32px !important;
  }
  body.task-login .login-left .login-title {
    font-size: 19px !important;
    margin-bottom: 4px !important;
  }
  body.task-login .login-left .subtitle {
    font-size: 12px !important;
    margin-bottom: 18px !important;
  }
}
@media (max-width: 480px) {
  body.task-login .login-right {
    padding: 18px 16px !important;
  }
  body.task-login .login-right .marketing h2 {
    font-size: 18px !important;
  }
  body.task-login .login-right .marketing .lead {
    font-size: 11px !important;
  }
  body.task-login .login-left .login-title {
    font-size: 17px !important;
  }
  body.task-login .login-left {
    padding: 18px 16px 20px 16px !important;
  }
}

/* ============================================ */
/* MOBILE — design dedicado, não responsive     */
/* ============================================ */
@media (max-width: 900px) {
  html, body {
    background: linear-gradient(180deg, #F1F5F9 0%, #E2E8F0 100%) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh !important;
  }

  body.task-login #layout {
    position: static !important;
    display: block !important;
    flex-direction: column !important;
    width: 100vw !important;
    min-height: 100vh !important;
    height: auto !important;
    background: transparent !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  body.task-login #layout-content {
    display: block !important;
    flex-direction: column !important;
    width: 100vw !important;
    min-height: 100vh !important;
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    position: static !important;
    padding: 32px 20px 24px 20px !important;
    box-sizing: border-box !important;
  }

  /* HIDE the marketing/right panel completely on mobile */
  body.task-login .login-right { display: none !important; }

  /* LEFT becomes full-width container */
  body.task-login .login-left {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    display: block !important;
    overflow: visible !important;
  }

  /* HEADER — logo + title centered above the card */
  body.task-login .login-left .logo-wrap {
    text-align: center !important;
    margin: 8px 0 28px 0 !important;
    padding: 0 !important;
  }
  body.task-login .login-left .logo-wrap img,
  body.task-login #logo {
    height: 38px !important;
    width: auto !important;
    display: inline-block !important;
    margin: 0 auto !important;
  }
  body.task-login .login-left .login-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0A1628 !important;
    text-align: center !important;
    margin: 0 0 6px 0 !important;
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
  }
  body.task-login .login-left .subtitle {
    font-size: 13px !important;
    color: #64748B !important;
    text-align: center !important;
    margin: 0 auto 28px auto !important;
    max-width: 280px !important;
    line-height: 1.5 !important;
    padding: 0 !important;
  }

  /* CARD — form wrapped in a floating card */
  body.task-login form#login-form {
    background: #fff !important;
    border-radius: 20px !important;
    padding: 28px 22px !important;
    box-shadow: 0 12px 40px rgba(10, 22, 40, 0.12), 0 2px 8px rgba(10, 22, 40, 0.04) !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  body.task-login #login-form table {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body.task-login #login-form table tr {
    margin-bottom: 16px !important;
  }
  body.task-login #login-form table td {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  body.task-login #login-form table td.title {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  body.task-login #login-form input[type="text"],
  body.task-login #login-form input[type="password"],
  body.task-login #login-form input[type="email"] {
    width: 100% !important;
    height: 52px !important;
    font-size: 16px !important;
    padding: 0 16px !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
    box-sizing: border-box !important;
  }
  body.task-login #login-form input[type="text"]:focus,
  body.task-login #login-form input[type="password"]:focus {
    background: #fff !important;
    border-color: #2563EB !important;
  }
  body.task-login #login-form .formbuttons {
    margin-top: 24px !important;
  }
  body.task-login #login-form button[type="submit"],
  body.task-login #login-form .submit {
    width: 100% !important;
    height: 54px !important;
    background: #2563EB !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25) !important;
    cursor: pointer !important;
  }
  body.task-login #login-form button[type="submit"]:active {
    transform: translateY(1px) !important;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25) !important;
  }

  /* FOOTER — outside the card */
  body.task-login #login-footer {
    text-align: center !important;
    margin-top: 28px !important;
    font-size: 13px !important;
  }
  body.task-login #login-footer .support-link,
  body.task-login #login-footer a {
    color: #2563EB !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 12px !important;
    display: inline-block !important;
  }

  /* Remove the icon prefixes from inputs (elastic skin specific) */
  body.task-login #login-form .input-group {
    display: block !important;
    border: 0 !important;
    background: transparent !important;
  }
  body.task-login #login-form .input-group .input-group-prepend,
  body.task-login #login-form .input-group-text,
  body.task-login #login-form .input-group i {
    display: none !important;
  }
}

/* Mobile tweaks: bigger logo, centered, modal at top */
@media (max-width: 900px) {
  body.task-login .login-left .logo-wrap img,
  body.task-login #logo {
    height: 56px !important;
  }
  body.task-login .login-left .logo-wrap {
    margin: 16px 0 28px 0 !important;
  }
  body.task-login .login-left .login-title,
  body.task-login .login-left .subtitle {
    text-align: center !important;
  }
  body.task-login .login-left {
    text-align: center !important;
  }

  /* Modal anchored near top instead of centered vertically */
  .support-modal-backdrop {
    align-items: flex-start !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    overflow-y: auto !important;
  }
  .support-modal {
    margin-top: 0 !important;
    max-height: none !important;
    padding: 28px 24px 24px 24px !important;
  }
}