/* ==========================================================================
   Ekran logowania — białe tło, ostre (bez zaokrągleń) kwadraty marki Cetina
   przy lewej i prawej krawędzi, logo wyśrodkowane u góry, jedna wyśrodkowana
   karta logowania. Środek ekranu zawsze czysty.
   ========================================================================== */

.auth-body {
  background: #ffffff;
  min-height: 100vh;
}

.auth-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 20px 40px;
  overflow-x: hidden;
}

/* ---------- Kwadraty przy krawędziach (bez zaokrągleń — celowo ostre rogi) ---------- */

.crn-blocks { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.crn-sq {
  position: absolute;
  border-radius: 0;
  box-shadow: 0 10px 20px -8px rgba(20, 30, 60, .26), 0 3px 8px rgba(20, 30, 60, .12);
}
.crn-sq.blue { background: #2f6fed; }
.crn-sq.red { background: #e6483c; }
.crn-sq.gray { background: #9aa4b8; }

.crn-tile {
  position: absolute;
  background: #ffffff;
  border-radius: 0;
  box-shadow: 0 14px 26px -10px rgba(20, 30, 60, .22), 0 3px 8px rgba(20, 30, 60, .1);
}
.crn-tile svg { position: absolute; inset: 18%; }

/* lewa krawędź, góra -> dół */
.crn-l1 { top: -3%; left: -30px; width: 110px; height: 110px; }
.crn-l2 { top: 0%; left: 150px; width: 70px; height: 70px; }
.crn-l3 { top: 8%; left: 250px; width: 42px; height: 42px; }
.crn-l4 { top: 3%; left: 40px; width: 55px; height: 55px; }
.crn-l5 { top: 6%; left: 95px; width: 100px; height: 100px; }
.crn-l6 { top: 19%; left: -35px; width: 120px; height: 120px; }
.crn-l7 { top: 15%; left: 250px; width: 32px; height: 32px; }
.crn-l8 { top: 26%; left: 175px; width: 38px; height: 38px; }
.crn-l9 { top: 32%; left: 0px; width: 88px; height: 88px; }
.crn-l10 { top: 37%; left: 155px; width: 95px; height: 95px; }
.crn-l11 { top: 44%; left: 55px; width: 105px; height: 105px; }
.crn-l12 { top: 48%; left: 250px; width: 40px; height: 40px; }
.crn-l13 { top: 53%; left: -5px; width: 78px; height: 78px; }
.crn-l14 { top: 58%; left: 155px; width: 66px; height: 66px; }
.crn-l15 { top: 61%; left: 275px; width: 32px; height: 32px; }
.crn-l16 { top: 62%; left: 55px; width: 42px; height: 42px; }
.crn-l17 { top: 67%; left: -10px; width: 96px; height: 96px; }
.crn-l18 { top: 77%; left: 125px; width: 86px; height: 86px; }
.crn-l19 { top: 82%; left: 220px; width: 64px; height: 64px; }
.crn-l20 { top: 88%; left: 55px; width: 50px; height: 50px; }
.crn-l21 { top: 91%; left: 165px; width: 56px; height: 56px; }

/* prawa krawędź — lustrzane rozmieszczenie */
.crn-r1 { top: -3%; right: -30px; width: 110px; height: 110px; }
.crn-r2 { top: 0%; right: 150px; width: 70px; height: 70px; }
.crn-r3 { top: 8%; right: 250px; width: 42px; height: 42px; }
.crn-r4 { top: 3%; right: 40px; width: 55px; height: 55px; }
.crn-r5 { top: 6%; right: 95px; width: 100px; height: 100px; }
.crn-r6 { top: 19%; right: -35px; width: 120px; height: 120px; }
.crn-r7 { top: 15%; right: 250px; width: 32px; height: 32px; }
.crn-r8 { top: 26%; right: 175px; width: 38px; height: 38px; }
.crn-r9 { top: 32%; right: 0px; width: 88px; height: 88px; }
.crn-r10 { top: 37%; right: 155px; width: 95px; height: 95px; }
.crn-r11 { top: 44%; right: 55px; width: 105px; height: 105px; }
.crn-r12 { top: 48%; right: 250px; width: 40px; height: 40px; }
.crn-r13 { top: 53%; right: -5px; width: 78px; height: 78px; }
.crn-r14 { top: 58%; right: 155px; width: 66px; height: 66px; }
.crn-r15 { top: 61%; right: 275px; width: 32px; height: 32px; }
.crn-r16 { top: 62%; right: 55px; width: 42px; height: 42px; }
.crn-r17 { top: 67%; right: -10px; width: 96px; height: 96px; }
.crn-r18 { top: 77%; right: 125px; width: 86px; height: 86px; }
.crn-r19 { top: 82%; right: 220px; width: 64px; height: 64px; }
.crn-r20 { top: 88%; right: 55px; width: 50px; height: 50px; }
.crn-r21 { top: 91%; right: 165px; width: 56px; height: 56px; }

/* wypełnienie środka strony — pomija tylko pas bezpośrednio za logo (top<26%, left 28-72%),
   żeby napis pozostał czytelny; reszta może swobodnie wchodzić za kartę (i tak niewidoczna,
   bo karta ma nieprzezroczyste tło) */
.crn-c1 { top: 4%; left: 22%; width: 46px; height: 46px; }
.crn-c2 { top: 2%; left: 76%; width: 60px; height: 60px; }
.crn-c3 { top: 14%; left: 24%; width: 34px; height: 34px; }
.crn-c4 { top: 12%; left: 74%; width: 40px; height: 40px; }
.crn-c5 { top: 30%; left: 30%; width: 70px; height: 70px; }
.crn-c6 { top: 28%; left: 68%; width: 55px; height: 55px; }
.crn-c7 { top: 36%; left: 20%; width: 38px; height: 38px; }
.crn-c8 { top: 38%; left: 80%; width: 46px; height: 46px; }
.crn-c9 { top: 48%; left: 26%; width: 60px; height: 60px; }
.crn-c10 { top: 50%; left: 72%; width: 50px; height: 50px; }
.crn-c11 { top: 55%; left: 18%; width: 44px; height: 44px; }
.crn-c12 { top: 58%; left: 82%; width: 36px; height: 36px; }
.crn-c13 { top: 68%; left: 32%; width: 52px; height: 52px; }
.crn-c14 { top: 70%; left: 66%; width: 66px; height: 66px; }
.crn-c15 { top: 75%; left: 22%; width: 40px; height: 40px; }
.crn-c16 { top: 76%; left: 78%; width: 48px; height: 48px; }
.crn-c17 { top: 85%; left: 28%; width: 58px; height: 58px; }
.crn-c18 { top: 87%; left: 70%; width: 42px; height: 42px; }
.crn-c19 { top: 90%; left: 16%; width: 34px; height: 34px; }
.crn-c20 { top: 92%; left: 84%; width: 50px; height: 50px; }
.crn-c21 { top: 94%; left: 36%; width: 38px; height: 38px; }
.crn-c22 { top: 95%; left: 62%; width: 44px; height: 44px; }
.crn-ct1 { top: 46%; left: 14%; width: 80px; height: 80px; }
.crn-ct2 { top: 44%; left: 80%; width: 76px; height: 76px; }

@media (max-width: 1180px) {
  .crn-blocks { display: none; }
}

/* ---------- Logo + hasło marki (wyśrodkowane, bez karty) ---------- */

.auth-brand-mark {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 36px;
}

.auth-brand-mark .wave-mark {
  width: 64px;
  height: auto;
  margin-bottom: 6px;
}

.auth-brand-word {
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 10px;
}

.auth-brand-word b {
  color: #2f6fed;
  font-weight: 800;
}

.auth-brand-tag {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #7c8aa8;
}

/* ---------- Karta logowania (wyśrodkowana) ---------- */

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: #ffffff;
  border: 1px solid #eef0f4;
  border-radius: 20px;
  padding: 40px 40px 32px;
  box-shadow: 0 24px 50px -22px rgba(20, 30, 60, .22), 0 6px 16px rgba(20, 30, 60, .06);
}

.auth-card h2 {
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: 6px;
}

.auth-card .auth-sub {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 28px;
}

.auth-input-group {
  position: relative;
}

.auth-input-group .auth-input-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.auth-input-group .form-control {
  padding-left: 38px;
}

.auth-toggle-pass {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 6px 8px;
  border-radius: 6px;
}

.auth-toggle-pass:hover {
  color: var(--text);
  background: var(--bg);
}

.auth-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 22px;
}

.auth-row-between a {
  font-size: 0.85rem;
  text-decoration: none;
}

.btn-auth-submit {
  width: 100%;
  padding: 11px 16px;
  font-weight: 600;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.auth-divider {
  height: 1px;
  background: var(--border);
  margin: 26px 0 16px;
}

.auth-security-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.auth-security-note svg { flex-shrink: 0; color: #1a8a4c; }

.auth-footer-note {
  margin-top: 26px;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
}

.auth-page-footer {
  position: relative;
  z-index: 1;
  margin-top: 32px;
  width: 100%;
  max-width: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.auth-page-footer svg { flex-shrink: 0; opacity: 0.8; }

@media (max-width: 480px) {
  .auth-brand-word { font-size: 1.7rem; }
  .auth-brand-mark .wave-mark { width: 50px; }
  .auth-card { padding: 32px 24px 26px; }
}