:root{
  --act:#2A6FD4; --act-h:#1D4FA0; --txt:#1A1D21; --ink-2:#6B7280; --grey-3:#9AA0A6;
  --line:#ECEEF0; --line-2:#F2F4F6; --field-line:#E4E7EA; --soft:#F2F4F6; --surface:#FFFFFF;
  --danger:#E5484D; --danger-t:#C2181B; --danger-bg:#FDECEC;
  --ok-bg:#E7EFFC; --ok-t:#1D4FA0; --warn:#8A9199; --warn-bg:#EEF0F2; --warn-t:#4A4E54;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --grad:linear-gradient(135deg,#5B93E8,#2A6FD4 60%,#1D4FA0);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:'Manrope',sans-serif;color:#fff;background:#2A6FD4;-webkit-font-smoothing:antialiased;
  min-height:100dvh;display:flex;align-items:center;justify-content:flex-start;padding:11px 5% 11px 30%;position:relative;overflow-x:hidden}
.mi{font-family:'Material Icons Outlined';font-style:normal;line-height:1;vertical-align:middle;
  text-transform:none;letter-spacing:normal;font-weight:400}

/* ── фон: low poly на весь екран ── */
.bg{position:fixed;inset:0;z-index:0}
.bg svg{width:100%;height:100%;display:block}
.bg-veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,rgba(29,79,160,.62) 0%,rgba(29,79,160,.34) 46%,rgba(29,79,160,.5) 100%)}

/* ── каркас ── */
.shell{position:relative;z-index:2;width:100%;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.85fr);
  min-height:560px;align-items:center}

/* ── бренд ── */
.brand-panel{position:relative;padding:22px 26px;display:flex;flex-direction:column;justify-content:center}
.ghost{position:absolute;left:11px;top:-78px;width:calc(100% - 43px);height:280px;
  pointer-events:none}
.ghost svg{width:100%;height:100%}
.brand-group{position:relative;z-index:1;margin-top:125px}
.brand-co{font:800 34px/1.08 'Manrope',sans-serif;letter-spacing:-.02em;margin-bottom:18px}
.brand-lede{font:500 14px/1.55 'Manrope',sans-serif;color:rgba(255,255,255,.82);max-width:34ch;margin-bottom:40px}
.brand-foot{font:600 11px/1 'Manrope',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66)}

/* ── форма ── */
.form-panel{position:relative;padding:44px 46px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.form-panel::before{content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:rgba(255,255,255,.35)}
.f-kick{font:600 11px/1 'Manrope',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.7);margin-bottom:10px}
.f-title{font:800 26px/1.2 'Manrope',sans-serif;letter-spacing:-.02em}
.f-cap{font:400 13.5px/1.5 'Manrope',sans-serif;color:rgba(255,255,255,.75);margin:6px 0 26px}
.form-panel form{width:100%;max-width:293px}
.f{position:relative;margin-bottom:16px}
.f-label{display:block;font:600 12px/1 'Manrope',sans-serif;color:rgba(255,255,255,.86);margin:0 0 8px 2px}
.in{display:block;width:100%;height:52px;border:1.5px solid transparent;background:rgba(255,255,255,.94);
  border-radius:999px;padding:0 46px 0 44px;font:500 14.5px/1 'Manrope',sans-serif;color:var(--txt);
  outline:none;transition:.18s ease}
.in::placeholder{color:var(--grey-3)}
.in:focus{background:#fff;border-color:var(--act-h)}
.ic{position:absolute;left:16px;bottom:0;height:52px;display:grid;place-items:center;
  color:var(--grey-3);pointer-events:none;transition:.18s ease}
.ic .mi{font-size:19px}
.f:focus-within .ic{color:var(--act)}
.eye{position:absolute;right:16px;bottom:0;height:52px;display:grid;place-items:center;
  color:var(--grey-3);cursor:pointer}
.eye .mi{font-size:20px}
.btn-row{display:flex;justify-content:center;margin-top:16px}
.btn{width:56%;min-width:150px;height:52px;border:2px solid #fff;border-radius:999px;background:transparent;
  color:#fff;cursor:pointer;font:600 15px/1 'Poppins','Manrope',sans-serif;transition:.2s ease}
.btn:hover{background:#fff;color:var(--act)}
.btn:active{transform:translateY(1px)}
.fp{display:block;text-align:center;margin-top:16px;color:#fff;opacity:.8;
  font:700 11.5px/1 'Manrope',sans-serif;text-decoration:none}
.fp:hover{opacity:1}

/* ── повідомлення (помилка / успіх) ── */
.alert{display:none;align-items:center;gap:10px;border-radius:12px;padding:11px 13px;
  font:600 13px/1.35 'Manrope',sans-serif;margin-bottom:16px;max-width:293px}
.alert svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:2}
.alert.show{display:flex;animation:pop .3s ease both}
.alert.err{background:rgba(253,236,236,.96);color:var(--danger-t)}
.alert.ok{background:rgba(231,239,252,.96);color:var(--ok-t)}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* поле з помилкою */
.f.error .in{border-color:var(--danger);background:#fff}
.f.error .ic{color:var(--danger)}

/* ── стани кнопки ── */
.btn{display:flex;align-items:center;justify-content:center;gap:8px}
.btn:disabled{cursor:not-allowed}
.spinner{display:none;width:18px;height:18px;border:2.5px solid rgba(42,111,212,.35);
  border-top-color:var(--act);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn .check{display:none;align-items:center;gap:8px}
.btn .check svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4}
body.loading .btn,body.success .btn{background:#fff;color:var(--act)}
body.loading .btn .label{display:none}
body.loading .btn .spinner{display:block}
body.success .btn .label,body.success .btn .spinner{display:none}
body.success .btn .check{display:flex}

/* ── підказка під «Не пам'ятаю пароль» ── */
.fp-note{display:none;margin-top:10px;text-align:center;
  font:600 11.5px/1.45 'Manrope',sans-serif;color:rgba(255,255,255,.78)}
.fp-note.show{display:block;animation:pop .25s ease both}

@media (max-width:1500px){ body{padding:11px 5% 11px 22%} }
@media (max-width:1200px){ body{padding:11px 4% 11px 12%} }
@media (max-width:1000px){ body{padding:11px 3% 11px 5%} }

@media (max-width:820px){
  body{padding:16px 32px}
  .shell{grid-template-columns:1fr;max-width:420px;margin:0 auto;min-height:0}
  .brand-panel{padding:20px 0 0;align-items:center;text-align:center}
  .brand-group{margin-top:0}
  .brand-co,.brand-lede,.brand-foot{display:none}
  .ghost{position:static;width:100%;height:auto;aspect-ratio:600/240;margin:0 auto}
  .form-panel{padding:24px 0 30px}
  .form-panel::before{display:none}
  .form-panel form{max-width:100%}
  .form-panel{align-items:stretch}
  .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}