:root{--g:#168a50;--y:#f2ff00;--m:#c9d2ce}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.lg{margin:0;min-height:100vh;font-family:Inter,Arial,sans-serif;color:#eef3f1;background:#1b2421 url('bg/flowpos-login.jpg') center/cover no-repeat fixed;display:grid;grid-template-columns:1.1fr minmax(360px,470px);gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(20px,5vw,64px)}
.lg-center{display:flex!important;justify-content:center;align-items:center}
.lg-center .lg-card{width:min(100%,470px)}
.lg-brand{max-width:560px}
.lg-logo{display:flex;align-items:center;gap:12px;margin-bottom:clamp(28px,6vw,64px)}
.lg-logo,.lg-logo:hover{text-decoration:none;color:inherit}
.lg-logo:focus-visible{outline:3px solid rgba(242,255,0,.6);outline-offset:6px;border-radius:12px}
.lg-mark{width:auto;height:58px;/*border-radius:14px;background:var(--y);*/color:#111;display:grid;place-items:center;font:600 1.15rem Outfit,Inter,sans-serif}
.lg-logo b{display:block;font:500 1.15rem Outfit,Inter,sans-serif}.lg-logo span{font-size:.78rem;color:var(--m)}
.lg-brand h1{font:300 clamp(2.2rem,4.6vw,3.6rem)/1.08 Outfit,Inter,sans-serif;letter-spacing:-.03em;margin:0 0 14px}
.lg-brand>p{color:var(--m);font-size:1rem;line-height:1.6;margin:0 0 28px;max-width:46ch}
.lg-feats{display:grid;gap:10px;max-width:420px}
.lg-feat{padding:13px 16px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px)}
.lg-feat b{display:block;font-weight:500;font-size:.92rem}.lg-feat span{font-size:.8rem;color:var(--m)}
.lg-card{background:rgba(24,33,31,.55);border:1px solid rgba(255,255,255,.16);border-radius:28px;padding:clamp(22px,3vw,36px);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 30px 70px rgba(0,0,0,.28)}
.lg-home-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-bottom:20px;padding:0 12px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(255,255,255,.08);color:#e3eae7;font:500 .82rem Inter,Arial,sans-serif;text-decoration:none;transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.lg-home-btn svg{width:17px;height:17px;flex:none}
.lg-home-btn:hover{border-color:rgba(242,255,0,.55);background:rgba(255,255,255,.14);color:var(--y)}
.lg-home-btn:focus-visible{outline:3px solid rgba(242,255,0,.6);outline-offset:3px}
.lg-card h2{font:400 1.65rem Outfit,Inter,sans-serif;letter-spacing:-.02em;margin:0 0 6px}
.lg-sub{color:var(--m);font-size:.9rem;margin:0 0 22px}
.lg-tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.08);margin-bottom:22px}
.lg-tabs button{flex:1;min-height:40px;border:0;border-radius:999px;background:transparent;color:#e3eae7;font:500 .88rem Inter,sans-serif;cursor:pointer}
.lg-tabs button[aria-selected=true]{background:var(--y);color:#111;font-weight:600}
.lg-f{display:grid;gap:16px}
.lg-actions{display:grid;gap:12px}
.lg-f[hidden]{display:none}
.lg-l{display:block;font-size:.82rem;color:#e3eae7;margin-bottom:7px}
.lg-in{width:100%;height:48px;padding:0 14px;border-radius:14px;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.1);color:#fff;font:400 .95rem Inter,sans-serif}
.lg-in::placeholder{color:#a9b5b0}
.lg-in:focus{outline:0;border-color:var(--y);box-shadow:0 0 0 3px rgba(242,255,0,.22)}
.lg-in option{color:#1b2421;background-color:#fff}
.lg-pw{position:relative}.lg-pw .lg-in{padding-right:70px}
.lg-pw button{position:absolute;right:6px;top:6px;height:36px;padding:0 12px;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font:500 .78rem Inter,sans-serif;cursor:pointer}
.lg-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.84rem}
.lg-row label{display:flex;align-items:center;gap:8px;color:#e3eae7;cursor:pointer}
.lg-row input{width:18px;height:18px;accent-color:var(--y)}
.lg-a,.lg-link{background:none;border:0;padding:0;color:var(--y);font:500 .84rem Inter,sans-serif;cursor:pointer;text-decoration:none}
.lg-a:hover,.lg-link:hover{text-decoration:underline}
.lg-btn{width:100%;height:50px;border:0;border-radius:14px;background:var(--y);color:#111;font:600 .95rem Inter,sans-serif;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.lg-btn:hover{background:#e3ef00}.lg-btn:disabled{opacity:.7;cursor:progress}
.lg-btn.ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22)}.lg-btn.ghost:hover{background:rgba(255,255,255,.18)}
.lg-err,.lg-ok{display:flex;gap:8px;padding:11px 13px;border-radius:12px;font-size:.85rem;line-height:1.4}
.lg-err{background:rgba(255,106,90,.16);border:1px solid rgba(255,106,90,.55);color:#ffd9d4}
.lg-ok{background:rgba(242,255,0,.12);border:1px solid rgba(242,255,0,.45);color:#f6ffa0}
.lg-err[hidden],.lg-ok[hidden]{display:none}
.lg-note{margin:18px 0 0;font-size:.76rem;color:var(--m);text-align:center}
:focus-visible{outline:3px solid rgba(242,255,0,.6);outline-offset:2px}
@media(max-width:900px){body.lg{grid-template-columns:1fr;align-content:start;gap:28px}.lg-feats{display:none}.lg-logo{margin-bottom:24px}.lg-brand h1{font-size:2rem}.lg-brand>p{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

body.lg-register{
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(32px,6vw,88px);
  width:min(1440px,100%);
  margin:0 auto;
  padding:clamp(24px,4vw,64px)
}
.lg-register .lg-brand{width:100%;max-width:520px;justify-self:end}
.lg-register .lg-logo{margin-bottom:clamp(28px,5vw,54px)}
.lg-eyebrow,.lg-form-kicker{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(242,255,0,.3);
  border-radius:999px;
  background:rgba(242,255,0,.1);
  color:#f6ffa0;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase
}
.lg-register .lg-brand h1{max-width:13ch;margin-top:18px}
.lg-register .lg-brand>p{max-width:48ch;margin-bottom:28px}
.lg-register-steps{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.lg-register-steps li{
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:14px 15px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:rgba(255,255,255,.065);
  backdrop-filter:blur(12px)
}
.lg-step-number{
  display:grid;
  width:30px;
  height:30px;
  flex:0 0 30px;
  place-items:center;
  border-radius:10px;
  background:rgba(242,255,0,.14);
  color:#f6ffa0;
  font-size:.8rem;
  font-weight:700
}
.lg-register-steps li>span:last-child{display:grid;gap:3px}
.lg-register-steps b{font-size:.85rem;font-weight:600}
.lg-register-steps small{color:var(--m);font-size:.74rem;line-height:1.45}
.lg-register-card{width:100%;max-width:680px;justify-self:start;padding:clamp(24px,3.2vw,40px)}
.lg-register-card .lg-home-btn{margin-bottom:24px}
.lg-register-heading{margin-bottom:24px}
.lg-register-heading h2{margin-top:12px}
.lg-register-heading .lg-sub{max-width:54ch;margin:8px 0 0;line-height:1.55}
.lg-form-kicker{min-height:25px;border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#d7e0dc;font-size:.64rem}
.lg-register-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.lg-register-form .lg-field{min-width:0}
.lg-register-form .lg-l{min-height:20px}
.lg-register-form .lg-l span{color:#aab8b1;font-size:.74rem;font-weight:400}
.lg-register-form .lg-in{min-width:0}
.lg-register-form .lg-err,.lg-register-form .lg-ok,.lg-register-submit{grid-column:1/-1}
.lg-register-submit{margin-top:4px}
.lg-register-card .lg-note{margin-top:20px}
@media(max-width:900px){
  body.lg-register{grid-template-columns:minmax(0,680px);justify-content:center;align-content:start;gap:28px}
  .lg-register .lg-brand,.lg-register .lg-register-card{max-width:680px;justify-self:stretch}
  .lg-register .lg-logo{margin-bottom:18px}
  .lg-register .lg-brand h1{max-width:22ch;margin:12px 0 8px;font-size:clamp(2rem,5vw,2.6rem)}
  .lg-register .lg-brand>p{display:block;max-width:62ch;margin-bottom:16px;font-size:.9rem}
  .lg-register-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .lg-register-steps li{padding:12px;gap:9px}
}
@media(max-width:620px){
  body.lg-register{gap:20px;padding:20px 16px}
  .lg-register .lg-brand h1{font-size:2rem}
  .lg-register .lg-brand>p{font-size:.84rem}
  .lg-register-steps{grid-template-columns:1fr;gap:8px}
  .lg-register-steps li{align-items:center;padding:10px 12px}
  .lg-register-steps small{font-size:.72rem}
  .lg-register-card{padding:22px 18px}
  .lg-register-card .lg-home-btn{margin-bottom:20px}
  .lg-register-form{grid-template-columns:minmax(0,1fr);gap:14px}
  .lg-register-form .lg-l{min-height:0}
  .lg-register-form .lg-err,.lg-register-form .lg-ok,.lg-register-submit{grid-column:auto}
}
@media(max-width:360px){
  body.lg-register{padding:16px 12px}
  .lg-register-card{padding:19px 15px;border-radius:22px}
  .lg-register-heading h2{font-size:1.45rem}
  .lg-register .lg-home-btn{margin-bottom:16px}
}

body.lg-login{
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(32px,6vw,88px);
  width:min(1440px,100%);
  margin:0 auto;
  padding:clamp(24px,4vw,64px)
}
.lg-login .lg-brand{width:100%;max-width:520px;justify-self:end}
.lg-login .lg-logo{margin-bottom:clamp(28px,5vw,54px)}
.lg-login .lg-brand h1{max-width:13ch;margin-top:18px}
.lg-login .lg-brand>p{max-width:48ch;margin-bottom:28px}
.lg-login-highlights{margin-top:0}
.lg-login-card{width:100%;max-width:680px;justify-self:start;padding:clamp(24px,3.2vw,40px)}
.lg-login-card .lg-home-btn{margin-bottom:24px}
.lg-login-card .lg-register-heading{margin-bottom:24px}
.lg-login-form{gap:16px}
.lg-login-form .lg-field{min-width:0}
.lg-login-message{margin:0 0 16px}
.lg-login-card .lg-note{margin-top:20px}
.lg-login-card .lg-note a{color:#c1daf5;text-decoration:none}
.lg-login-card .lg-note a:hover{color:var(--y)}
@media(max-width:900px){
  body.lg-login{grid-template-columns:minmax(0,680px);justify-content:center;align-content:start;gap:28px}
  .lg-login .lg-brand,.lg-login .lg-login-card{max-width:680px;justify-self:stretch}
  .lg-login .lg-logo{margin-bottom:18px}
  .lg-login .lg-brand h1{max-width:22ch;margin:12px 0 8px;font-size:clamp(2rem,5vw,2.6rem)}
  .lg-login .lg-brand>p{display:block;max-width:62ch;margin-bottom:16px;font-size:.9rem}
  .lg-login-highlights{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .lg-login-highlights li{padding:12px;gap:9px}
}
@media(max-width:620px){
  body.lg-login{gap:20px;padding:20px 16px}
  .lg-login .lg-brand h1{font-size:2rem}
  .lg-login .lg-brand>p{font-size:.84rem}
  .lg-login-highlights{grid-template-columns:1fr;gap:8px}
  .lg-login-highlights li{align-items:center;padding:10px 12px}
  .lg-login-highlights small{font-size:.72rem}
  .lg-login-card{padding:22px 18px}
  .lg-login-card .lg-home-btn{margin-bottom:20px}
}
@media(max-width:360px){
  body.lg-login{padding:16px 12px}
  .lg-login-card{padding:19px 15px;border-radius:22px}
  .lg-login-card .lg-register-heading h2{font-size:1.45rem}
  .lg-login-card .lg-home-btn{margin-bottom:16px}
}