/*
 * Ekrany kont: logowanie, rejestracja, hasło, 2FA, Moje konto.
 * Źródło: makieta/assets/panel.css.
 */
[hidden] { display: none !important; }

/* ---------- Logowanie ---------- */
.logowanie { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); background: var(--surface); }
.logowanie__forma { display: flex; flex-direction: column; padding: 28px clamp(20px, 5vw, 72px); }
.logowanie__gora { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logowanie__gora .logo img { height: 42px; }
.logowanie__srodek { margin-block: auto; padding-block: 48px; width: 100%; max-width: 420px; }
.logowanie h1 { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.7rem); letter-spacing: -.025em; }
.logowanie__srodek > p { margin-top: 12px; color: var(--muted); }
.logowanie form { margin-top: 32px; display: grid; gap: 18px; }
.haslo { position: relative; }
.haslo input { padding-right: 52px; }
.haslo button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: transparent; color: var(--muted); border-radius: 8px; cursor: pointer; font-size: 20px; display: grid; place-items: center; }
.haslo button:hover { background: var(--surface-2); color: var(--ink); }
.logowanie__wiersz { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 15px; }
.logowanie__wiersz .zgoda { grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: center; }
.logowanie__wiersz .zgoda input { width: 18px; height: 18px; margin: 0; }
.logowanie .btn--glowny { width: 100%; }
.logowanie__nowy { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.logowanie__nowy a { font-weight: 650; }
.logowanie__stopka { font-size: 13.5px; color: var(--muted); }
.logowanie__obraz { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; padding: clamp(28px, 4vw, 56px); color: #FFFFFF; }
.logowanie__obraz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.logowanie__obraz::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, rgb(8 20 30 / .25) 45%), var(--grad-tekst); opacity: .82; mix-blend-mode: multiply; }
.logowanie__obraz::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(8 20 30 / .55), transparent 55%); }
.logowanie__cytat { max-width: 30ch; }
.logowanie__cytat strong { display: block; font-size: clamp(2.6rem, 1.6rem + 3vw, 4.2rem); line-height: 1; font-weight: 820; letter-spacing: -.03em; font-variation-settings: "wdth" 116; font-variant-numeric: tabular-nums; }
.logowanie__cytat span { display: block; margin-top: 12px; font-size: 1.2rem; font-weight: 600; color: rgb(255 255 255 / .92); }

/* ---------- Konta: rejestracja, hasło, logowanie dwuetapowe ---------- */
.logowanie__nowy p + p { margin-top: 8px; }
.logowanie__srodek .powrot { margin-bottom: 20px; }
.logowanie__srodek:has(.sukces:not([hidden])) > :is(h1, p, .powrot) { display: none; }
.logowanie__email { font-weight: 650; color: var(--ink); word-break: break-word; }
.sukces--konto { padding: 0; border: 0; box-shadow: none; background: transparent; }
.sukces--konto h2 { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.3rem); }
.sukces--konto p { font-size: 1rem; }
.sukces--konto .btn { width: 100%; }
.haslo-wymogi { display: grid; gap: 6px; font-size: 14.5px; color: var(--muted); }
.haslo-wymogi li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; }
.haslo-wymogi .ik { font-size: 18px; margin-top: 2px; color: #9AA7B2; }
.haslo-wymogi li.ok { color: #1E6B42; }
.haslo-wymogi li.ok .ik { color: #2E8B57; }
.haslo-miernik { display: grid; gap: 6px; font-size: 13.5px; color: var(--muted); }
.haslo-miernik__opis { display: flex; justify-content: space-between; gap: 12px; }
.haslo-miernik__opis strong { color: var(--ink); font-weight: 650; }
.haslo-miernik__tor { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.haslo-miernik__tor span { display: block; width: 0; height: 100%; border-radius: inherit; transition: width .25s var(--ease), background-color .25s; }
.pole input.kod-2fa { font-size: 1.7rem; font-weight: 700; letter-spacing: .32em; text-align: center; font-variant-numeric: tabular-nums; }
.logowanie__link { font-size: 15px; text-align: center; }
.kroki--2fa { margin-top: 24px; }
.kroki--2fa li { padding-bottom: 18px; }
.kroki__tytul { padding-top: 8px; font-size: 1.05rem; font-variation-settings: "wdth" 104; }
.kroki--2fa .kroki__ikona { font-weight: 750; font-size: 16px; }
.logowanie form.logowanie__forma-2fa { margin-top: 4px; }
.logowanie__dalej { margin-top: 28px; width: 100%; }
.qr { margin-top: 10px; width: 232px; height: 232px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #FFFFFF; }
.qr svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }
.klucz-2fa { margin-top: 10px; display: block; font-size: 13.5px; color: var(--muted); }
.klucz-2fa code { display: block; margin-top: 2px; font: inherit; font-weight: 650; color: var(--ink); letter-spacing: .05em; word-break: break-all; }
.kody { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 16px 18px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-weight: 650; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.kody__akcje { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

.sukces { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(28px, 4vw, 56px); box-shadow: var(--shadow); }
.sukces:focus { outline: none; }
.sukces__ikona { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #FFFFFF; font-size: 32px; margin-bottom: 24px; }
.sukces h2 { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.3rem); }
.sukces p { margin-top: 14px; max-width: 52ch; font-size: 1.08rem; }
.sukces .sukces__mniej { color: var(--muted); font-size: 15px; }
.sukces .btn { margin-top: 28px; }

/* ---------- Moje konto ---------- */
.p-konto { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.p-sekcja { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.p-sekcja + .p-sekcja { margin-top: 16px; }
.p-sekcja h2 { font-size: 1.25rem; }
.p-sekcja > p { margin-top: 6px; color: var(--muted); font-size: 15px; }
.p-sekcja > .btn { margin-top: 16px; }
.p-sekcja form { margin-top: 20px; display: grid; gap: 18px; justify-items: start; }
.p-sekcja form .pola { margin-top: 0; width: 100%; }
.p-sekcja form > .pole, .p-sekcja form > .haslo-wymogi, .p-sekcja form > .haslo-miernik { width: 100%; }
.pole input[readonly] { background: var(--surface-2); color: var(--muted); }
.p-znacznik { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 4px 10px; border-radius: 999px; background: #E8F6EE; color: #1E6B42; font-size: 13.5px; font-weight: 700; }
.p-dane { display: grid; gap: 12px; }
.p-dane dt { font-size: 13px; font-weight: 700; color: var(--muted); }
.p-dane dd { margin: 1px 0 0; font-weight: 650; color: var(--ink); }
.p-widget .p-dane + .btn { margin-top: 16px; }
.p-sekcja__akcje { display: flex; gap: 10px; flex-wrap: wrap; }
.p-siatka--lista { margin-top: 28px; }
.p-widget__stopka { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px !important; }

/* ---------- Dwa stany ikony: przełącza klasa, a nie podmiana znaczników ---------- */
.haslo button .tak, .haslo-wymogi .tak { display: none; }
.haslo button.widac .tak, .haslo-wymogi li.ok .tak { display: inline-grid; }
.haslo button.widac .nie, .haslo-wymogi li.ok .nie { display: none; }
.haslo-wymogi__znak { display: inline-grid; }

/* ---------- Kroki przy włączaniu 2FA ---------- */
.kroki { margin-top: 18px; display: grid; gap: 0; }
.kroki li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; position: relative; padding-bottom: 22px; }
.kroki li:not(:last-child)::after { content: ""; position: absolute; left: 19.5px; top: 44px; bottom: 4px; width: 1.5px; background: var(--line); }
.kroki__ikona { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--line); color: var(--b2); font-size: 19px; }
.kroki h3 { font-size: 1.05rem; padding-top: 8px; font-variation-settings: "wdth" 104; }
.kroki p { color: var(--muted); font-size: 15px; margin-top: 3px; }

/* ---------- Komunikaty i pułapka na boty ---------- */
.komunikat-formularza { margin-top: 20px; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); font-size: 15px; line-height: 1.45; }
.komunikat-formularza .ik { font-size: 20px; margin-top: 1px; }
.komunikat-formularza--blad { background: #FDECF1; color: #8E0F35; }
.komunikat-formularza--ok { background: #E8F6EE; color: #1E6B42; }
.formularz__www { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.logowanie .pomoc { font-size: 13.5px; color: var(--muted); }
.p-sekcja form + form { margin-top: 12px; }

/* ---------- Responsywność ---------- */
@media (max-width: 1100px) {
	.p-konto { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 860px) {
	.logowanie { grid-template-columns: minmax(0, 1fr); }
	.logowanie__obraz { min-height: 260px; order: -1; }
}