@font-face{font-family:'BPG Glaho';src:url('https://cdn.web-fonts.ge/fonts/bpg-glaho-web/fonts/bpg-glaho-web-webfont.woff2') format('woff2');font-weight:100 500;font-display:swap}
@font-face{font-family:'BPG Glaho';src:url('https://cdn.web-fonts.ge/fonts/bpg-glaho-bold/fonts/bpg-glaho-bold-webfont.woff2') format('woff2');font-weight:600 900;font-display:swap}
@font-face{font-family:'BPG Nino Caps';src:url('https://cdn.web-fonts.ge/fonts/bpg-nino-elite-caps/fonts/bpg-nino-elite-caps-webfont.woff2') format('woff2');font-weight:400 800;font-display:swap}

body.task-login{
  font-family:'BPG Glaho','Inter',system-ui,sans-serif !important;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(212,175,55,.12), transparent 60%),
    linear-gradient(180deg,#0c0c12,#08080c) !important;
  position:relative; overflow:hidden; color:#f7f7fa;
}
body.task-login::before,body.task-login::after{
  content:""; position:fixed; border-radius:50%; filter:blur(90px); z-index:0; pointer-events:none;
}
body.task-login::before{ width:520px;height:520px; background:radial-gradient(circle,rgba(212,175,55,.38),transparent 70%); top:-180px; right:-120px; }
body.task-login::after{ width:440px;height:440px; background:radial-gradient(circle,rgba(120,90,255,.16),transparent 70%); bottom:-180px; left:-130px; }

body.task-login #layout,
body.task-login #layout-content{ background:transparent !important; }
body.task-login #layout{ display:flex !important; align-items:center !important; justify-content:center !important; min-height:100vh !important; }

body.task-login #layout-content{
  position:relative; z-index:1;
  background:linear-gradient(180deg,#111119,#0c0c12) !important;
  border:1px solid rgba(212,175,55,.18) !important;
  border-radius:24px !important;
  box-shadow:0 40px 100px -40px rgba(0,0,0,.9), 0 0 70px -30px rgba(212,175,55,.22) !important;
  max-width:430px !important; width:calc(100% - 40px) !important;
  margin:auto !important; padding:40px 34px 34px !important; flex:0 0 auto !important;
}
body.task-login #logo{ height:40px !important; width:auto !important; margin:0 auto 26px !important; display:block !important; }

body.task-login #login-form table{ width:100% !important; }
body.task-login #login-form td{ display:block !important; width:100% !important; padding:0 !important; border:0 !important; }
body.task-login #login-form td.title{ margin-top:16px !important; }
body.task-login label{ color:#9a9aab !important; font-weight:600 !important; font-size:.82rem !important; }

body.task-login input.form-control,
body.task-login .form-control{
  background:#16161f !important; color:#f7f7fa !important;
  border:1px solid rgba(255,255,255,.08) !important; border-radius:11px !important;
  padding:12px 14px !important; height:auto !important; box-shadow:none !important; margin-top:6px !important;
}
body.task-login .form-control:focus{ border-color:#d4af37 !important; box-shadow:0 0 0 3px rgba(212,175,55,.14) !important; }
body.task-login input.form-control::placeholder{ color:#6f6f7e !important; }

body.task-login p.formbuttons{ margin-top:24px !important; }
body.task-login #rcmloginsubmit,
body.task-login .button.mainaction{
  background:linear-gradient(95deg,#d4af37,#f5d57a) !important; color:#0a0a0a !important;
  border:0 !important; border-radius:12px !important; font-weight:700 !important;
  width:100% !important; padding:13px 18px !important;
  box-shadow:0 8px 30px -8px rgba(212,175,55,.5) !important; text-transform:none !important;
}
body.task-login #rcmloginsubmit:hover{ filter:brightness(1.06); }

body.task-login #login-footer,body.task-login #login-footer *{ color:#6f6f7e !important; }
body.task-login #logo{ content:url("/complexy-logo.svg") !important; height:40px !important; width:auto !important; margin:0 auto 26px !important; }

/* FIX: the `#login-form td{display:block}` rule above collapses Bootstrap's
   input-group (icon + field), and Bootstrap's `.form-control{width:1%}` then shrinks
   the input to ~30px with no flex to expand it. Restore flex so the field fills the
   row next to its icon, and join the icon + field into one dark rounded pill. */
body.task-login #login-form td.input-group{
  display:flex !important; align-items:stretch !important; width:100% !important; margin-top:6px !important;
}
body.task-login #login-form td.input-group .form-control{
  flex:1 1 auto !important; width:1% !important; margin-top:0 !important;
  border-left:0 !important; border-radius:0 11px 11px 0 !important;
}
body.task-login .input-group-prepend{ display:flex !important; margin:0 !important; }
body.task-login .input-group-prepend .input-group-text,
body.task-login .input-group-text{
  display:flex !important; align-items:center !important;
  background:#16161f !important; color:#d4af37 !important;
  border:1px solid rgba(255,255,255,.08) !important; border-right:0 !important;
  border-radius:11px 0 0 11px !important; padding:0 13px !important; margin:0 !important;
}

/* FIX 2: elastic's flex layout clamps #layout-content to a height smaller than its
   content, so the logo sat mid-card with a gap and the Login button + footer spilled
   BELOW the card. Bypass that layout — center an AUTO-HEIGHT card in the viewport
   (block flow, content from the top) so the panel wraps the whole form. */
html body.task-login #layout{ display:block !important; height:auto !important; min-height:100vh !important; position:relative !important; }
html body.task-login #layout-content{
  position:absolute !important; top:50% !important; left:50% !important;
  transform:translate(-50%,-50%) !important;
  display:block !important; height:auto !important; min-height:0 !important; max-height:none !important;
  width:430px !important; max-width:calc(100vw - 32px) !important;
  flex:none !important; margin:0 !important;
}
html body.task-login #layout-content > #logo{ margin:0 auto 22px !important; }
html body.task-login #login-form{ margin:0 !important; width:100% !important; }
html body.task-login #layout-content>#logo,html body.task-login #login-form{position:relative !important;top:0 !important;left:0 !important;}