/* Strony logowania i resetu hasła: formularz po lewej, panel wizualny po prawej (na telefonie tylko formularz) */
html, body { height: 100%; }
body.nf-auth-body { font-size: .92rem; }

.nf-auth { min-height: 100%; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); }

.nf-form-col { display: flex; flex-direction: column; padding-block: 2rem; padding-inline: clamp(1rem, 5vw, 4rem); }
.nf-auth .nf-brand { padding: 0; }
.nf-auth .nf-logo-mark { width: 40px; height: 40px; }
.nf-auth .nf-wordmark { font-size: 1.35rem; }
.nf-form-wrap { margin-block: auto; padding-block: 2.5rem; width: 100%; max-width: 380px; }
.nf-form-wrap h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.025em; margin-bottom: .35rem; text-wrap: balance; }
.nf-lead { color: var(--nf-muted); margin-bottom: 1.75rem; }
.nf-auth .form-control { padding: .65rem .85rem; }
.nf-auth .btn-primary { padding: .7rem 1rem; }
.nf-auth .btn-outline-secondary { font-weight: 600; padding: .65rem 1rem; }
.nf-auth a:not(.nf-brand):not(.btn) { color: var(--nf-accent); text-decoration: none; }
.nf-auth a:not(.nf-brand):not(.btn):hover { text-decoration: underline; }


.nf-divider { display: flex; align-items: center; gap: .75rem; color: var(--nf-muted); font-size: .78rem; margin-block: 1.25rem; }
.nf-divider::before, .nf-divider::after { content: ""; flex: 1; height: 1px; background: var(--nf-line); }
.nf-foot { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .78rem; color: var(--nf-muted); }
.nf-foot a { color: var(--nf-muted); }
.nf-lang .btn { font-size: .78rem; padding: .2rem .55rem; }

/* Panel wizualny */
.nf-visual { position: relative; overflow: hidden; background: var(--nf-panel); border-left: 1px solid var(--nf-line); display: flex; flex-direction: column; justify-content: center; padding: 3rem clamp(2rem, 5vw, 5rem); }
.nf-visual-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.nf-visual-map .grid { stroke: var(--nf-line); stroke-width: 1; }
.nf-visual-map .street { fill: none; stroke: var(--nf-bg); stroke-width: 14; stroke-linecap: round; }
.nf-visual-map .street-thin { fill: none; stroke: var(--nf-bg); stroke-width: 7; stroke-linecap: round; }
.nf-visual-map .route { fill: none; stroke: var(--nf-accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 10; animation: nfAuthRoute 1.6s linear infinite; }
.nf-visual-map .ping { fill: var(--nf-accent); transform-box: fill-box; transform-origin: center; animation: nfAuthPing 2.2s ease-out infinite; }
@keyframes nfAuthRoute { to { stroke-dashoffset: -24; } }
@keyframes nfAuthPing { from { transform: scale(.5); opacity: .4; } to { transform: scale(2.4); opacity: 0; } }
.nf-visual-copy { position: relative; max-width: 460px; }
.nf-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nf-accent); }
.nf-visual-copy h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; margin: .5rem 0 1rem; text-wrap: balance; }
.nf-visual-copy p { color: var(--nf-muted); max-width: 48ch; }
.nf-card { position: relative; background: var(--nf-bg); border: 1px solid var(--nf-line); border-radius: 14px; box-shadow: 0 10px 30px rgba(20, 32, 51, .08); padding: 1rem 1.1rem; max-width: 340px; margin-top: 2rem; }
.nf-card-head { display: flex; align-items: center; gap: .6rem; }
.nf-card-plate { font-weight: 800; letter-spacing: .02em; }
.nf-card .pill { margin-left: auto; }
.nf-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .85rem 0 0; }
.nf-card dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--nf-muted); font-weight: 600; }
.nf-card dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.nf-card-foot { margin-top: .75rem; padding-top: .65rem; border-top: 1px solid var(--nf-line); font-size: .74rem; color: var(--nf-muted); display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.nf-features { position: relative; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; list-style: none; padding: 0; }
.nf-features li { background: var(--nf-bg); border: 1px solid var(--nf-line); border-radius: 99px; padding: .3rem .75rem; font-size: .78rem; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
.nf-features i { color: var(--nf-accent); }

@media (max-width: 991.98px) {
  .nf-auth { grid-template-columns: 1fr; }
  .nf-visual { display: none; }
  .nf-form-wrap { margin-inline: auto; }
  .nf-form-col > header, .nf-form-col > footer { justify-content: center; }
}