/* Ekran logowania SP6 - model „wejscie" (split-screen) jak app.samlavik.pl/login,
   w barwach i z logo idea4me (granat #1C1A4C / zieleń #45B75B), font Inter. */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/brama/static/fonts/inter.woff2') format('woff2');
}
:root{
  --navy:#1C1A4C; --navy2:#252261; --green:#45B75B; --green-d:#39a04e; --green-l:#8fe0a4;
  --bg:#f5f6fb; --panel:#ffffff; --ink:#1C1A4C; --mut:#6b7280; --dim:#9aa0b4;
  --line:#e6e8f2; --line2:#eef0f6; --danger:#e5484d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
}
.split{display:flex; min-height:100vh; width:100%}

/* ── lewy panel (branding, ciemny granat) ── */
.brand-side{
  width:460px; flex:none; color:#fff; padding:44px 46px; display:flex; flex-direction:column;
  background:linear-gradient(160deg,#15133a 0%,#1C1A4C 60%,#252261 100%);
  position:relative; overflow:hidden;
}
/* przezroczysty sygnet jako watermark (jak w Keksitbocie) - biały przez filter, nisko ustawiony */
.bok-znak{
  position:absolute; right:-24px; bottom:-34px; width:320px; height:320px; opacity:.5;
  pointer-events:none; user-select:none;
}
.bok-tresc{position:relative; z-index:1; display:flex; flex-direction:column; flex:1}
.brand-logo img{height:46px; width:auto; display:block; filter:brightness(0) invert(1)}
.brand-claim{font-size:31px; line-height:1.24; font-weight:800; margin:36px 0 32px; letter-spacing:-.01em}
.brand-claim em{color:var(--green-l); font-style:normal}
.feats{display:flex; flex-direction:column; gap:18px}
.feat{display:flex; gap:13px; align-items:flex-start; font-size:14.5px; line-height:1.45; color:#dfe3f2}
.feat .ic{
  width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:rgba(69,183,91,.16); color:var(--green-l);
}
.brand-foot{margin-top:auto; font-size:12.5px; color:#9fa6c4; padding-top:30px}
.brand-foot a{color:#9fa6c4; text-decoration:none}
.brand-foot a:hover{color:#fff}

/* ── prawa strona (formularz, jasna) ── */
.form-side{flex:1; min-width:0; display:flex; align-items:center; justify-content:center; padding:32px 20px}
.card{width:420px; max-width:100%}
/* logo na karcie ukryte na desktopie (jest na lewym panelu); pokazujemy je tylko na mobile, gdy panel znika */
.card-logo{display:none; height:40px; width:auto; margin:0 auto 20px}
h1{font-size:24px; margin:0 0 7px; color:var(--navy); letter-spacing:-.01em}
.lead{font-size:14.5px; color:var(--mut); line-height:1.55; margin:0 0 26px}
.field{margin-bottom:16px}
.lbl{display:block; font-size:12.5px; font-weight:600; color:var(--navy); margin-bottom:7px}
.inp{position:relative; display:flex; align-items:center}
.inp .ic-l{position:absolute; left:13px; color:var(--dim); display:grid; place-items:center; pointer-events:none}
.inp input{
  width:100%; padding:13px 14px 13px 42px; font-size:15px; font-family:inherit; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:11px; outline:none;
}
.inp.z-okiem input{padding-right:44px}
.inp input:focus{border-color:var(--green); box-shadow:0 0 0 3px rgba(69,183,91,.18)}
.inp input::placeholder{color:var(--dim)}
.oko{position:absolute; right:7px; width:32px; height:32px; border:0; background:transparent; color:var(--dim);
  border-radius:8px; display:grid; place-items:center; cursor:pointer}
.oko:hover{background:var(--line2); color:var(--navy)}
.blad{
  background:rgba(229,72,77,.1); border:1px solid rgba(229,72,77,.4); color:#b4232a;
  padding:11px 13px; border-radius:10px; font-size:13.5px; margin:0 0 18px;
}
.btn{
  width:100%; margin-top:8px; padding:14px; font-size:15px; font-weight:700; font-family:inherit;
  color:#fff; background:var(--green); border:0; border-radius:11px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.btn:hover{background:var(--green-d)}
.fine{font-size:12.5px; color:var(--mut); line-height:1.55; margin:22px 0 0; display:flex; gap:7px; align-items:flex-start}
.fine .ic{color:var(--green); flex:none; margin-top:1px}
.fine a{color:var(--green-d); text-decoration:none}

@media(max-width:860px){
  .brand-side{display:none}
  .form-side{padding:28px 18px}
  .card-logo{display:block}
}