@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap');

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#050505;color:#fff}
body{font-family:'Source Sans 3','Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{cursor:pointer}

.login-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(420px,.75fr);
  background:
    radial-gradient(circle at 16% 18%,rgba(255,221,0,.08),transparent 29%),
    linear-gradient(135deg,#050505 0%,#0a0b0c 55%,#111416 100%);
}
.login-visual{
  position:relative;
  min-height:100vh;
  padding:52px 64px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  border-right:1px solid rgba(255,255,255,.08);
}
.login-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(125deg,rgba(255,255,255,.035),transparent 42%),
    repeating-linear-gradient(90deg,transparent 0 89px,rgba(255,255,255,.018) 90px),
    repeating-linear-gradient(0deg,transparent 0 89px,rgba(255,255,255,.018) 90px);
  pointer-events:none;
}
.login-brand,.login-visual-bottom{position:relative;z-index:1}
.login-brand{max-width:720px}
.login-logo{
  width:174px;height:46px;
  background:url('https://cp-b2b.pages.dev/assets/logo-pereko.png') left center/164px auto no-repeat;
  margin-bottom:66px;
}
.login-brand-copy>span{
  display:block;
  color:rgba(255,255,255,.46);
  font:800 10px/1 'Montserrat',sans-serif;
  letter-spacing:.17em;
}
.login-brand-copy h1{
  margin:14px 0 12px;
  font:800 clamp(38px,5vw,72px)/.98 'Montserrat',sans-serif;
  letter-spacing:-.055em;
}
.login-brand-copy p{
  margin:0;
  max-width:560px;
  color:rgba(255,255,255,.62);
  font-size:16px;
  line-height:1.55;
}
.login-visual-bottom{display:flex;flex-direction:column;gap:8px}
.login-visual-bottom span{
  color:rgba(255,255,255,.44);
  font:700 9px/1 'Montserrat',sans-serif;
  letter-spacing:.12em;
}
.login-visual-bottom small{color:rgba(255,255,255,.28);font-size:10px}

.login-panel{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:42px;
  background:rgba(0,0,0,.22);
}
.login-card{
  width:min(430px,100%);
  padding:34px;
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 32px 90px rgba(0,0,0,.36);
  backdrop-filter:blur(22px);
}
.login-card-head>span{
  color:rgba(255,255,255,.46);
  font:800 9px/1 'Montserrat',sans-serif;
  letter-spacing:.15em;
}
.login-card-head h2{
  margin:9px 0 8px;
  font:800 28px/1.05 'Montserrat',sans-serif;
  letter-spacing:-.035em;
}
.login-card-head p{margin:0;color:rgba(255,255,255,.55);font-size:13px}

#loginForm{display:grid;gap:15px;margin-top:28px}
#loginForm label{display:grid;gap:7px}
#loginForm label>span{
  color:rgba(255,255,255,.66);
  font:700 10px/1 'Montserrat',sans-serif;
}
#loginForm input{
  width:100%;
  height:46px;
  padding:0 13px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.055);
  color:#fff;
  outline:none;
}
#loginForm input::placeholder{color:rgba(255,255,255,.28)}
#loginForm input:focus{border-color:rgba(255,255,255,.28);box-shadow:0 0 0 3px rgba(255,255,255,.035)}
.password-field{position:relative}
.password-field input{padding-right:48px!important}
.password-field button{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:36px;height:34px;border:0;border-radius:9px;
  background:transparent;color:rgba(255,255,255,.58);
  display:grid;place-items:center;
}
.password-field button:hover{background:rgba(255,255,255,.07);color:#fff}
.password-field svg{width:18px;height:18px;fill:currentColor}

.login-submit{
  height:46px;
  margin-top:4px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.075));
  color:#fff;
  font:700 11px/1 'Montserrat',sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.18);
}
.login-submit:hover{background:linear-gradient(145deg,rgba(255,255,255,.23),rgba(255,255,255,.11));border-color:rgba(255,255,255,.27)}
.login-forgot{
  justify-self:center;
  border:0;background:transparent;color:rgba(255,255,255,.48);
  font:600 9.5px/1 'Montserrat',sans-serif;
}
.login-forgot:hover{color:#fff}
.login-message{min-height:18px;text-align:center;color:rgba(255,255,255,.55);font-size:10px;line-height:1.35}
.login-security{
  margin-top:23px;padding-top:18px;border-top:1px solid rgba(255,255,255,.07);
  display:grid;grid-template-columns:20px 1fr;gap:9px;align-items:start;
  color:rgba(255,255,255,.38);font-size:9.5px;line-height:1.4;
}
.login-security svg{width:18px;height:18px;fill:rgba(255,255,255,.42)}

@media(max-width:900px){
  .login-shell{grid-template-columns:1fr}
  .login-visual{min-height:36vh;padding:34px 28px;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .login-logo{margin-bottom:34px}
  .login-brand-copy h1{font-size:40px}
  .login-panel{min-height:64vh;padding:28px}
}
@media(max-width:520px){
  .login-visual{padding:28px 20px}
  .login-panel{padding:20px}
  .login-card{padding:25px 20px}
  .login-brand-copy h1{font-size:34px}
}

/* Belka i marginesy identyczne jak na stronie głównej */
.topbar-shell{
  position:sticky;top:0;z-index:1000;
  width:100%;height:84px;
  background:
    radial-gradient(circle at 82% 12%,rgba(255,221,0,.105) 0,transparent 31%),
    linear-gradient(135deg,#101618 0%,#1c2529 52%,#29353a 100%);
  border-bottom:1px solid rgba(255,255,255,.11);
  box-shadow:0 5px 22px rgba(8,12,14,.17);
}
.topbar{
  width:min(1400px,calc(100% - 48px));height:84px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand-zone{display:flex;align-items:center;gap:16px;min-width:0;color:#fff}
.brand-badge{
  width:156px;height:38px;flex:0 0 156px;
  background:url('https://cp-b2b.pages.dev/assets/logo-pereko.png') left center/148px auto no-repeat;
  color:transparent;font-size:0
}
.brand-copy{
  min-height:39px;padding-left:17px;border-left:1px solid rgba(255,255,255,.24);
  display:flex;flex-direction:column;justify-content:center;white-space:nowrap
}
.brand-copy strong{font-size:0}
.brand-copy strong::after{
  content:'Centrum Projektów Marketingowych';
  display:block;color:#fff;
  font:700 14px/1.15 'Montserrat',sans-serif;
}
.brand-copy span{font-size:0}
.brand-copy span::after{
  content:'Planowanie, realizacja i kontrola działań marketingowych PEREKO';
  display:block;margin-top:4px;color:#c0c9cd;
  font:500 9px/1.25 'Montserrat',sans-serif;
}
.login-topbar-note{
  min-width:210px;padding:7px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;background:rgba(255,255,255,.05);
}
.login-topbar-note span{
  display:block;color:rgba(255,255,255,.48);
  font:800 7.5px/1 'Montserrat',sans-serif;letter-spacing:.11em
}
.login-topbar-note strong{
  display:block;margin-top:4px;color:#fff;
  font:700 10px/1.1 'Montserrat',sans-serif
}

.login-page{
  min-height:calc(100vh - 84px);
  background:
    radial-gradient(circle at 16% 18%,rgba(255,221,0,.08),transparent 29%),
    linear-gradient(135deg,#050505 0%,#0a0b0c 55%,#111416 100%);
}
.login-page>.login-shell{
  width:min(1400px,calc(100% - 48px));
  min-height:calc(100vh - 84px);
  margin:0 auto;
  background:transparent;
}
.login-page .login-visual,
.login-page .login-panel{
  min-height:calc(100vh - 84px);
}
.login-page .login-visual{
  padding-left:16px;
  padding-right:48px;
}
.login-page .login-panel{
  padding-right:16px;
}
.login-page .login-logo{display:none}

@media(max-width:900px){
  .topbar{width:min(1400px,calc(100% - 32px))}
  .login-page>.login-shell{width:min(1400px,calc(100% - 32px))}
  .login-topbar-note{display:none}
  .login-page .login-visual{padding-left:0;padding-right:0}
  .login-page .login-panel{padding-right:28px;padding-left:28px}
}
@media(max-width:620px){
  .topbar{width:calc(100% - 24px)}
  .brand-badge{width:132px;flex-basis:132px;background-size:126px auto}
  .brand-copy{display:none}
  .login-page>.login-shell{width:calc(100% - 24px)}
}


/* Finalny układ strony logowania: czarne tło, spójne marginesy i boksy informacyjne */
html,body{
  background:#050505!important;
}
.login-page{
  background:#050505!important;
}
.login-page>.login-shell{
  background:#050505!important;
  width:min(1400px,calc(100% - 48px))!important;
  grid-template-columns:minmax(0,1.25fr) minmax(420px,.75fr)!important;
  align-items:center!important;
}
.login-page .login-visual,
.login-page .login-panel{
  min-height:calc(100vh - 84px)!important;
}
.login-page .login-visual{
  padding:42px 48px 42px 0!important;
  border-right:0!important;
  display:grid!important;
  align-items:center!important;
  overflow:visible!important;
  background:#050505!important;
}
.login-page .login-visual::before{
  display:none!important;
}
.login-left-content{
  width:100%!important;
  max-width:760px!important;
  display:grid!important;
  gap:24px!important;
  align-content:center!important;
}
.login-brand-copy{
  max-width:700px!important;
}
.login-brand-copy h1{
  margin:11px 0 10px!important;
  font-size:clamp(36px,4.3vw,62px)!important;
}
.login-brand-copy p{
  max-width:620px!important;
  font-size:14px!important;
  line-height:1.45!important;
}
.login-feature-grid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
}
.login-feature{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  align-items:start!important;
  gap:12px!important;
  padding:14px 16px!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important
}
.login-feature>span{
  width:36px!important;
  height:36px!important;
  border-radius:10px!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(255,255,255,.07)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  color:rgba(255,255,255,.58)!important;
  font:800 9px/1 'Montserrat',sans-serif!important
}
.login-feature strong{
  display:block!important;
  color:#fff!important;
  font:700 12px/1.2 'Montserrat',sans-serif!important
}
.login-feature p{
  margin:4px 0 0!important;
  color:rgba(255,255,255,.56)!important;
  font-size:11px!important;
  line-height:1.4!important
}
.login-visual-bottom{
  gap:6px!important;
  margin-top:0!important;
}
.login-panel{
  padding:42px 0 42px 42px!important;
  background:#050505!important;
  place-items:center end!important;
}
.login-card{
  width:min(430px,100%)!important;
}

/* górna/dolna krawędź lewej treści optycznie spięta z kartą logowania */
@media(min-width:901px){
  .login-left-content{
    min-height:470px!important;
    max-height:560px!important;
    justify-content:center!important;
  }
}

@media(max-width:900px){
  .login-page>.login-shell{
    width:min(1400px,calc(100% - 32px))!important;
    grid-template-columns:1fr!important;
  }
  .login-page .login-visual{
    min-height:auto!important;
    padding:36px 0 22px!important;
  }
  .login-left-content{
    max-width:none!important;
  }
  .login-panel{
    min-height:auto!important;
    padding:22px 0 36px!important;
    place-items:center!important;
  }
}
@media(max-width:620px){
  .login-page>.login-shell{
    width:calc(100% - 24px)!important;
  }
}


/* Belka logowania 1:1 z belką strony głównej */
.topbar-shell{
  height:88px!important;
  background:#050505!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.18)!important
}
.topbar{
  width:min(1400px,calc(100% - 48px))!important;
  height:88px!important;
  margin:0 auto!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:24px!important
}
.brand-zone{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:16px!important;
  min-width:0!important;
  max-width:760px!important;
  color:#fff!important
}
.brand-badge{
  width:156px!important;
  height:38px!important;
  flex:0 0 156px!important;
  border:0!important;
  border-radius:0!important;
  background-color:transparent!important;
  background-image:url('https://cp-b2b.pages.dev/assets/logo-pereko.png')!important;
  background-repeat:no-repeat!important;
  background-size:148px auto!important;
  background-position:left center!important;
  color:transparent!important;
  font-size:0!important;
  box-shadow:none!important
}
.brand-copy{
  min-width:0!important;
  min-height:39px!important;
  padding:0 0 0 17px!important;
  margin:0!important;
  border-left:1px solid rgba(255,255,255,.24)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  line-height:1.2!important;
  white-space:nowrap!important
}
.brand-copy strong{font-size:0!important}
.brand-copy strong::after{
  content:'Centrum Projektów Marketingowych'!important;
  display:block!important;
  color:#fff!important;
  font-family:'Montserrat','Segoe UI',Arial,sans-serif!important;
  font-size:15px!important;
  line-height:1.15!important;
  font-weight:700!important;
  letter-spacing:-.015em!important
}
.brand-copy span{font-size:0!important}
.brand-copy span::after{
  content:'Planowanie, realizacja i kontrola działań marketingowych PEREKO'!important;
  display:block!important;
  margin-top:4px!important;
  color:#b9c2c6!important;
  font-family:'Montserrat','Segoe UI',Arial,sans-serif!important;
  font-size:10px!important;
  line-height:1.25!important;
  font-weight:500!important
}
.login-page{min-height:calc(100vh - 88px)!important}
.login-page>.login-shell,
.login-page .login-visual,
.login-page .login-panel{min-height:calc(100vh - 88px)!important}
.login-topbar-note{display:none!important}
@media(max-width:900px){
  .topbar{width:min(1400px,calc(100% - 32px))!important}
}
@media(max-width:620px){
  .topbar{width:calc(100% - 24px)!important}
}


/* Korekta proporcji strony logowania — obie strony szersze i bliżej środka */
.login-page>.login-shell{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  column-gap:28px!important;
  align-items:center!important;
}
.login-page .login-visual{
  padding:42px 14px 42px 0!important;
}
.login-left-content{
  max-width:none!important;
  width:100%!important;
}
.login-feature-grid{
  width:100%!important;
}
.login-panel{
  padding:42px 0 42px 14px!important;
  place-items:center stretch!important;
}
.login-card{
  width:100%!important;
  max-width:none!important;
}
@media(max-width:1100px){
  .login-page>.login-shell{
    grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr)!important;
    column-gap:22px!important;
  }
}
@media(max-width:900px){
  .login-page>.login-shell{
    grid-template-columns:1fr!important;
    column-gap:0!important;
  }
  .login-page .login-visual{padding-right:0!important}
  .login-panel{padding-left:0!important}
}


/* Minimalistyczny wariant strony logowania */
.login-minimal-page{
  min-height:100vh!important;
  background:#050505!important;
  display:grid!important;
  place-items:center!important;
  padding:40px 24px!important;
}
.login-minimal-wrap{
  width:min(560px,100%)!important;
  display:grid!important;
  justify-items:center!important;
  gap:34px!important;
}
.login-brand-center{
  width:100%!important;
  display:flex!important;
  justify-content:center!important;
}
.login-brand-center .brand-zone{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:16px!important;
  color:#fff!important;
}
.login-brand-center .brand-badge{
  width:156px!important;
  height:38px!important;
  flex:0 0 156px!important;
  border:0!important;
  background-color:transparent!important;
  background-image:url('https://cp-b2b.pages.dev/assets/logo-pereko.png')!important;
  background-repeat:no-repeat!important;
  background-size:148px auto!important;
  background-position:left center!important;
  color:transparent!important;
  font-size:0!important;
}
.login-brand-center .brand-copy{
  min-height:39px!important;
  padding-left:17px!important;
  border-left:1px solid rgba(255,255,255,.24)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  white-space:nowrap!important;
}
.login-brand-center .brand-copy strong{font-size:0!important}
.login-brand-center .brand-copy strong::after{
  content:'Centrum Projektów Marketingowych'!important;
  display:block!important;
  color:#fff!important;
  font:700 15px/1.15 'Montserrat',sans-serif!important;
  letter-spacing:-.015em!important;
}
.login-brand-center .brand-copy span{font-size:0!important}
.login-brand-center .brand-copy span::after{
  content:'Planowanie, realizacja i kontrola działań marketingowych PEREKO'!important;
  display:block!important;
  margin-top:4px!important;
  color:#b9c2c6!important;
  font:500 10px/1.25 'Montserrat',sans-serif!important;
}
.login-panel-minimal{
  width:min(460px,100%)!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
}
.login-panel-minimal .login-card-head{
  text-align:left!important;
}
.login-panel-minimal #loginForm{
  margin-top:26px!important;
}
.login-panel-minimal .login-submit{
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.075))!important;
}
.login-panel-minimal .login-security{
  display:none!important;
}

/* schowaj poprzedni layout, jeśli cache złapie stare elementy */
.topbar-shell,.login-page,.login-shell,.login-visual,.login-panel,.login-card{
  background:transparent;
}

@media(max-width:620px){
  .login-minimal-page{padding:28px 16px!important}
  .login-minimal-wrap{gap:28px!important}
  .login-brand-center .brand-zone{gap:12px!important}
  .login-brand-center .brand-badge{
    width:132px!important;
    flex-basis:132px!important;
    background-size:126px auto!important
  }
  .login-brand-center .brand-copy strong::after{font-size:13px!important}
  .login-brand-center .brand-copy span::after{font-size:8.5px!important}
}


/* FINAL: wspólne marginesy brandingu i formularza logowania */
.login-minimal-wrap{
  width:min(620px,100%)!important;
  justify-items:stretch!important;
}
.login-brand-center{
  width:100%!important;
  justify-content:stretch!important;
}
.login-brand-center .brand-zone{
  width:100%!important;
  max-width:none!important;
  justify-content:flex-start!important;
}
.login-panel-minimal{
  width:100%!important;
  max-width:none!important;
}
.login-panel-minimal .login-card-head,
.login-panel-minimal #loginForm{
  width:100%!important;
}
@media(max-width:620px){
  .login-minimal-wrap{width:100%!important}
}


/* FINAL: szerokość formularza do końca tekstu pod brandingiem */
.login-minimal-wrap{
  width:min(620px,100%)!important;
}
.login-panel-minimal{
  width:min(520px,100%)!important;
  max-width:520px!important;
  justify-self:start!important;
}
.login-panel-minimal .login-card-head,
.login-panel-minimal #loginForm{
  width:100%!important;
}
@media(max-width:620px){
  .login-panel-minimal{
    width:100%!important;
    max-width:none!important;
  }
}