:root{--pri:#d9261f;--pri-d:#b81d18;--orange:#f09223;--yellow:#f6c222;--ink:#222;--mut:#6b6f76;--line:#eadfd5}
*{box-sizing:border-box}
html,body{height:100%}
body.lg{margin:0;font:15px/1.5 system-ui,Segoe UI,Roboto,sans-serif;color:var(--ink);background:#fff}
.lg-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}

/* ---- brand panel ---- */
.lg-brand{position:relative;overflow:hidden;color:#fff;display:flex;align-items:center;padding:56px;
  background:linear-gradient(135deg,#e5262a 0%,#ee5a24 38%,#f09223 68%,#f6c222 100%)}
.orb{position:absolute;border-radius:50%;background:rgba(255,255,255,.13)}
.o1{width:420px;height:420px;right:-140px;top:-120px}
.o2{width:260px;height:260px;left:-90px;bottom:-60px;background:rgba(255,255,255,.1)}
.o3{width:120px;height:120px;right:18%;bottom:12%;background:rgba(255,255,255,.16)}
.lg-brand-in{position:relative;max-width:460px}
.lg-kicker{display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);padding:5px 12px;border-radius:99px}
.lg-brand h2{font-size:40px;line-height:1.12;margin:18px 0 12px;font-weight:800;text-shadow:0 2px 10px rgba(0,0,0,.18)}
.lg-sub{font-size:17px;margin:0 0 26px;opacity:.95}
.lg-feat{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:12px}
.lg-feat li{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:500}
.lg-feat span{flex:0 0 26px;height:26px;border-radius:50%;background:#fff;color:var(--pri);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.lg-tag{font-size:15px;font-weight:600;letter-spacing:.04em;opacity:.95;border-top:1px solid rgba(255,255,255,.4);padding-top:16px}

/* ---- form panel ---- */
.lg-form{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px;background:#fffaf5}
.lg-card{width:100%;max-width:420px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 32px 26px;box-shadow:0 18px 50px rgba(217,38,31,.10),0 2px 8px rgba(0,0,0,.05)}
.lg-logo{display:block;height:78px;width:auto;margin:0 auto 10px}
.lg-card h1{text-align:center;font-size:26px;margin:4px 0 4px;font-weight:800}
.lg-hint{text-align:center;color:var(--mut);margin:0 0 20px}
.lg-err{background:#fee2e2;color:#7f1d1d;border:1px solid #fecaca;border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:14px}
label{display:block;font-weight:600;font-size:13px;margin:14px 0 6px}
.fld{position:relative}
.fld>svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#9a9ea6;pointer-events:none}
.fld input{width:100%;height:48px;padding:0 46px 0 42px;border:1.5px solid #ddd3ca;border-radius:12px;font:inherit;font-size:16px;background:#fff;transition:border-color .15s,box-shadow .15s}
.fld input:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 4px rgba(240,146,35,.2)}
.fld:focus-within>svg{color:var(--orange)}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;background:transparent;border-radius:10px;cursor:pointer;color:#9a9ea6;display:flex;align-items:center;justify-content:center}
.eye svg{width:21px;height:21px}
.eye:hover{background:#fff4ec;color:var(--pri)}.eye.on{color:var(--pri)}
.caps{display:none;font-size:12.5px;color:#b45309;margin-top:6px}.caps.show{display:block}
.go{width:100%;height:50px;margin-top:22px;border:0;border-radius:12px;background:var(--pri);color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 8px 18px rgba(217,38,31,.28);transition:background .15s,transform .05s}
.go:hover{background:var(--pri-d)}.go:active{transform:translateY(1px)}
.go:disabled{opacity:.75;cursor:wait}
.lg-help{margin:20px 0 0;padding:12px 14px;background:#fff8e1;border-left:4px solid var(--yellow);border-radius:8px;font-size:13px;color:#5b4a14}
.lg-foot{margin:18px 0 0;font-size:12px;color:var(--mut)}

/* ---- tablet / phone ---- */
@media(max-width:900px){
  .lg-wrap{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .lg-brand{padding:26px 22px 54px;align-items:flex-start}
  .lg-brand h2{font-size:26px;margin:12px 0 6px}
  .lg-sub{font-size:15px;margin:0}
  .lg-feat,.lg-tag{display:none}
  .o1{width:260px;height:260px}.o3{display:none}
  .lg-form{padding:0 16px 28px;margin-top:-36px;background:#fff}
  .lg-card{padding:26px 22px 22px}
  .lg-logo{height:64px}
}
@media(max-width:380px){.lg-card h1{font-size:23px}.lg-brand h2{font-size:23px}}
.lg-ok{background:#dcfce7;color:#14532d;border:1px solid #bbf7d0;border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:14px}

/* ---- Fit the whole page to the screen: no page scrolling ---- */
html,body.lg{height:100%;overflow:hidden}
.lg-wrap{height:100vh;height:100dvh;min-height:0}
.lg-brand{min-height:0;padding:clamp(24px,5vh,56px) clamp(24px,4vw,56px)}
.lg-brand h2{font-size:clamp(28px,5.2vh,40px);margin:clamp(10px,2.4vh,18px) 0 clamp(6px,1.4vh,12px)}
.lg-sub{margin-bottom:clamp(12px,3vh,26px)}
.lg-feat{gap:clamp(6px,1.6vh,12px);margin-bottom:clamp(14px,3.6vh,34px)}
.lg-form{min-height:0;padding:clamp(10px,2.4vh,32px) 20px;justify-content:center}
.lg-card{padding:clamp(16px,3.2vh,34px) 32px clamp(14px,2.4vh,26px);max-height:100%}
.lg-logo{height:clamp(48px,9vh,78px);margin-bottom:clamp(2px,1vh,10px)}
.lg-card h1{font-size:clamp(21px,3.6vh,26px)}
.lg-hint{margin-bottom:clamp(8px,2.2vh,20px)}
label{margin:clamp(8px,1.8vh,14px) 0 5px}
.fld input{height:clamp(42px,6.4vh,48px)}
.go{height:clamp(44px,6.6vh,50px);margin-top:clamp(12px,2.6vh,22px)}
.lg-help{margin-top:clamp(10px,2.4vh,20px);padding:clamp(8px,1.4vh,12px) 14px}
.lg-foot{margin:clamp(6px,1.6vh,18px) 0 0}
/* short screens: drop the least important text rather than scroll */
@media(max-height:700px){.lg-foot{display:none}.lg-sub{display:none}}
@media(max-height:620px){.lg-help{display:none}.lg-hint{display:none}}
@media(max-height:520px){.lg-feat{display:none}}
/* last resort on tiny landscape screens only */
@media(max-height:430px){html,body.lg{overflow:auto}.lg-wrap{height:auto;min-height:100vh}}

@media(max-width:900px){
  .lg-wrap{grid-template-rows:auto minmax(0,1fr)}
  .lg-brand{padding:clamp(14px,3vh,26px) 20px clamp(40px,7vh,54px)}
  .lg-brand h2{font-size:clamp(20px,3.4vh,26px);margin:8px 0 0}
  .lg-form{padding:0 16px clamp(8px,2vh,24px);margin-top:-34px;justify-content:flex-start}
  .lg-card{padding:clamp(14px,2.6vh,26px) 22px clamp(12px,2vh,22px)}
  .lg-logo{height:clamp(44px,7.5vh,64px)}
  .lg-hint{display:block}
}
@media(max-width:900px) and (max-height:700px){.lg-brand .lg-kicker{display:none}.lg-brand{padding-bottom:44px}.lg-hint{display:none}.lg-help{display:none}}
/* card must sit above the banner it overlaps on phones */
.lg-form{position:relative;z-index:1}