/* ===========================================================================
   RiskSensei — Prisijungimo rodinys (Login). Scoped dizaino stiliai.
   Šaltinis: contracts/design_handoff_login (README.md + RiskSensei Prisijungimas.html).
   VISKAS scope'inta po `.rs-login`, kad generiniai vardai (.field/.row/.btn/.input/
   .toast/.lang) nesikirstų su Tailwind/kitais app stiliais. Pattern kaip
   public/sidebars.css ir public/ai-credits.css (static, linkuojama index.html).
   Keyframes pavadinimai su `rs-` prefiksu (spin→rs-spin, hot→rs-hot).
   Šriftas: Poppins (kraunamas index.html per Google Fonts; svoriai 400–700).
   Antraštės = Poppins 700 (buvo Gilroy 800 — atsisakyta).
   =========================================================================== */

.rs-login {
  /* Core tokens */
  --ac: #0062FF; --ac-700: #0049bf;
  --navy: #0b1424; --navy-2: #0f1b33;
  --surface: #ffffff; --tintl: #eef3ff;
  --ink: #0b1424; --ink-2: #3a4658; --muted: #7b8694; --line: #e8edf4;
  --field: #f4f7fb; --field-line: #e2e9f2;
  --green: #37cf7c; --yellow: #fbcf2b; --orange: #f6963c; --red: #ef5b5b;

  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(448px, min(30%, 480px)) 1fr;
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--ink);
  background: var(--navy);
  -webkit-font-smoothing: antialiased;
}
.rs-login[data-ratio="40"] { grid-template-columns: minmax(380px, 40%) 1fr; }
.rs-login[data-ratio="50"] { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .rs-login[data-ratio="30"] { grid-template-columns: minmax(340px, 38%) 1fr; } }

.rs-login a { color: var(--ac); text-decoration: none; }
.rs-login a:hover { color: var(--ac-700); }
.rs-login ::selection { background: var(--ac); color: #fff; }
.rs-login .gil { font-family: 'Poppins', sans-serif; }

/* ===== BRAND PANEL (left) ===== */
.rs-login .brand-panel {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(0,98,255,.30), transparent 55%),
    radial-gradient(100% 80% at 8% 100%, rgba(0,98,255,.14), transparent 60%),
    linear-gradient(160deg, #0b1424 0%, #0d1830 55%, #0a1122 100%);
  color: #eef2f8; display: flex; flex-direction: column; padding: clamp(34px, 4vw, 54px);
}
.rs-login .bp-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 100% at 70% 20%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 100% at 70% 20%, #000, transparent 78%);
  pointer-events: none;
}
.rs-login .bp-orb {
  position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(90px); opacity: .5;
  background: radial-gradient(circle, rgba(0,98,255,.5), transparent 62%); top: -160px; right: -120px; pointer-events: none;
}
/* Turinys užima VISĄ likusį aukštį ir centruojasi jame; „Sensei AI" eilutė gyvena
   ŽEMIAU, kaip atskiras panelės vaikas — todėl ji visada prisegta prie apačios,
   o turinys nepersistumia į viršų. */
.rs-login .bp-in {
  position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
/* Turinys fiksuoto pločio (400px) kolonoje, centruotoje tamsioje panelėje —
   simetriški šonų tarpai; matrica visada per vidurį. */
/* „Sensei AI" eilutė — prisegta prie panelės apačios, sulygiuota su turinio kolona. */
.rs-login .lp-trust {
  position: relative; z-index: 2; width: 100%; max-width: 340px; margin: 0 auto;
  display: flex; gap: 10px; align-items: flex-start;
  padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08);
  font-size: 12.5px; line-height: 1.5; color: #93a4bb;
}
.rs-login .lp-trust .ico {
  flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(0,98,255,.15); color: #7aa9ff;
}
.rs-login .lp-trust .ico svg { width: 14px; height: 14px; }
.rs-login .lp-trust b { color: #cdd8ea; font-weight: 700; }
.rs-login .bp-inner { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: flex-start; }
.rs-login .bp-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #8fb4ff;
}
.rs-login .bp-eyebrow .dt { width: 7px; height: 7px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 4px rgba(0,98,255,.22); }
.rs-login .bp-h {
  font-family: 'Poppins'; font-weight: 700; font-size: clamp(26px, 2.5vw, 34px); line-height: 1.08;
  letter-spacing: -.03em; margin: 28px 0 14px; text-wrap: balance; max-width: 15ch;
}
.rs-login .bp-h em { font-style: normal; color: #5b9bff; }
.rs-login .bp-sub { font-size: 14.5px; line-height: 1.6; color: #aab8cf; max-width: 38ch; margin: 0 0 24px; }
/* Matrica sumažinta ~17% ir lygiuota KAIRĖJE (užpildo koloną, be tarpo dešinėje).
   iframe plotis kompensuotas calc(100%/.83), kad mastelis nesumažintų matricos
   papildomai; overflow:hidden nukerpa perteklinį rezervuotą iframe langą. */

/* ===== FORM PANEL (right) ===== */
.rs-login .form-panel { position: relative; background: var(--surface); display: flex; flex-direction: column; padding: 34px 40px; }
.rs-login .fp-top { display: flex; align-items: center; justify-content: space-between; }
.rs-login .fp-logo { height: 45px; width: auto; display: block; user-select: none; }
.rs-login .lang { display: flex; background: var(--field); border: 1px solid var(--field-line); border-radius: 10px; padding: 2px; margin-left: auto; }
.rs-login .lang button { font-family: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted); background: transparent; border: none; padding: 6px 11px; border-radius: 7px; cursor: pointer; transition: .15s; }
.rs-login .lang button.on { background: var(--ac); color: #fff; }
.rs-login .fp-body { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 400px; width: 100%; margin: 0 auto; padding: 20px 0; }
.rs-login .fp-h { font-family: 'Poppins'; font-weight: 700; font-size: 29px; letter-spacing: -.025em; margin: 0 0 8px; }
.rs-login .fp-lead { font-size: 14.5px; color: var(--ink-2); margin: 0 0 30px; line-height: 1.55; }

/* general auth-error alert (real login failures) */
.rs-login .fp-alert {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: #b42318;
  background: #fef4f4; border: 1px solid #f6cccc; border-radius: 11px; padding: 11px 14px; margin: 0 0 18px;
}
.rs-login .fp-alert svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.rs-login .field { margin-bottom: 16px; }
.rs-login .field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.rs-login .input { position: relative; display: flex; align-items: center; }
.rs-login .input .lead { position: absolute; left: 15px; color: var(--muted); display: grid; place-items: center; pointer-events: none; }
.rs-login .input .lead svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rs-login .input input { width: 100%; height: 52px; font-family: 'Poppins'; font-size: 15px; color: var(--ink); background: var(--field); border: 1.5px solid var(--field-line); border-radius: 13px; padding: 0 15px 0 44px; outline: none; transition: .16s; }
.rs-login .input input::placeholder { color: #9aa6b6; }
.rs-login .input input:focus { border-color: var(--ac); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac) 14%, transparent); }
.rs-login .input .rev { position: absolute; right: 8px; width: 36px; height: 36px; border: none; background: transparent; color: var(--muted); border-radius: 9px; cursor: pointer; display: grid; place-items: center; transition: .15s; }
.rs-login .input .rev:hover { color: var(--ink); background: var(--field-line); }
.rs-login .input .rev svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rs-login .field.err .input input { border-color: var(--red); background: #fef4f4; }
.rs-login .field.err .input input:focus { box-shadow: 0 0 0 4px rgba(239,91,91,.14); }
.rs-login .field .msg { font-size: 11.5px; color: var(--red); margin-top: 7px; font-weight: 500; display: none; align-items: center; gap: 5px; }
.rs-login .field.err .msg { display: flex; }
.rs-login .field .msg svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.rs-login .row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 22px; }
.rs-login .remember { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.rs-login .remember input { position: absolute; opacity: 0; width: 0; height: 0; }
.rs-login .remember .box { width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid var(--field-line); background: var(--field); display: grid; place-items: center; transition: .15s; flex: none; }
.rs-login .remember .box svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: .15s; }
.rs-login .remember input:checked + .box { background: var(--ac); border-color: var(--ac); }
.rs-login .remember input:checked + .box svg { opacity: 1; }
.rs-login .remember input:focus-visible + .box { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac) 16%, transparent); }
.rs-login .remember .t { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.rs-login .forgot { font-size: 13px; font-weight: 600; }

.rs-login .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 54px; font-family: 'Poppins'; font-weight: 600; font-size: 15px; border-radius: 13px; cursor: pointer; border: none; transition: .18s; position: relative; }
.rs-login .btn-primary { background: var(--ac); color: #fff; box-shadow: 0 12px 26px -12px var(--ac); }
.rs-login .btn-primary:hover { background: var(--ac-700); transform: translateY(-1px); }
.rs-login .btn-primary:active { transform: translateY(0); }
.rs-login .btn-primary svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s; }
.rs-login .btn-primary:hover svg { transform: translateX(3px); }
.rs-login .btn.loading { color: transparent; pointer-events: none; }
.rs-login .btn.loading::after { content: ""; position: absolute; width: 20px; height: 20px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: rs-spin .7s linear infinite; }
@keyframes rs-spin { to { transform: rotate(360deg); } }

.rs-login .divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--muted); font-size: 12px; font-weight: 500; }
.rs-login .divider::before, .rs-login .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.rs-login .sso { display: grid; grid-template-columns: 1fr; gap: 11px; }
.rs-login .btn-sso { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; font-family: 'Poppins'; font-weight: 600; font-size: 14.5px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--field-line); border-radius: 13px; cursor: pointer; transition: .16s; }
.rs-login .btn-sso:hover { border-color: #c9d6ea; background: var(--field); }
.rs-login .btn-sso:disabled { opacity: .6; cursor: default; }
.rs-login .btn-sso svg, .rs-login .btn-sso img { width: 18px; height: 18px; display: block; }
.rs-login .fp-note { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 26px; line-height: 1.6; }
.rs-login .fp-note a { font-weight: 600; }
.rs-login .fp-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 11.5px; color: var(--muted); padding-top: 14px; flex-wrap: wrap; }
.rs-login .fp-foot a { color: var(--muted); }
.rs-login .fp-foot a:hover { color: var(--ink); }

/* Neaktyvios nuorodos (funkcionalumo dar nėra): pilkos, neveikiančios, „netrukus". */
.rs-login .lnk-soon { color: var(--muted); cursor: default; font-weight: 600; }
.rs-login .lnk-soon:hover { color: var(--muted); }
.rs-login .fp-foot .lnk-soon { color: var(--muted); font-weight: inherit; }

/* toast (sėkmingo prisijungimo patvirtinimas) */
.rs-login .toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); background: var(--navy); color: #fff; font-size: 13px; font-weight: 500; padding: 13px 20px; border-radius: 12px; box-shadow: 0 20px 50px -18px rgba(0,0,0,.6); display: flex; align-items: center; gap: 10px; opacity: 0; pointer-events: none; transition: .3s; z-index: 200; }
.rs-login .toast.on { opacity: 1; transform: translate(-50%, 0); }
.rs-login .toast svg { width: 17px; height: 17px; stroke: var(--green); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ===== RESPONSIVE ===== */
@media (max-width: 820px) {
  /* `[data-ratio]` selektorius specifiškesnis už paprastą `.rs-login`, tad be jo čia
     stulpelių taisyklė NEsuveikdavo: brand panelė būdavo paslėpta, bet jai rezervuota
     ~340px kolona likdavo — telefone matėsi juoda juosta dešinėje. */
  .rs-login,
  .rs-login[data-ratio] { grid-template-columns: 1fr; }
  .rs-login .brand-panel { display: none; }
  .rs-login .form-panel { min-height: 100vh; padding: 30px 26px; }
}
@media (max-width: 440px) {
  .rs-login .form-panel { padding: 24px 20px; }
  .rs-login .fp-h { font-size: 25px; }
}