.etykieta { display: block; font-size: .8rem; font-weight: 600; color: #44403c; margin-bottom: .25rem; }
.pole { width: 100%; border: 1px solid #d6d3d1; border-radius: .5rem; padding: .45rem .6rem; background: #fff; font-size: .9rem; }
.pole:focus { outline: 2px solid #0f766e; outline-offset: 1px; }
.podpowiedz { display: block; font-size: .72rem; color: #78716c; margin-top: .25rem; }

.chip { display: inline-flex; align-items: center; gap: .25rem; border: 1px solid #d6d3d1; border-radius: 999px; padding: .15rem .55rem; font-size: .8rem; cursor: pointer; user-select: none; }
.chip:has(input:checked) { background: #fef2f2; border-color: #f87171; color: #b91c1c; }
.chip input { display: none; }

/* Karta pracy — podgląd A4 */
.karta { background: #fff; color: #1c1917; width: 100%; max-width: 210mm; aspect-ratio: auto; margin: 0 auto; padding: 16mm 18mm; box-shadow: 0 1px 3px rgba(0,0,0,.08); border-radius: 4px; font-family: Georgia, 'Times New Roman', serif; font-size: 14pt; line-height: 1.6; }
.karta [contenteditable]:focus { outline: 1px dashed #0f766e; outline-offset: 2px; }
.karta .naglowek { display: flex; justify-content: space-between; font-family: system-ui, sans-serif; font-size: 9pt; color: #78716c; border-bottom: 1px solid #e7e5e4; padding-bottom: 6px; margin-bottom: 14px; }
.karta .naglowek span.linia { display: inline-block; min-width: 45mm; border-bottom: 1px solid #a8a29e; }
.karta h2 { font-size: 20pt; margin: 0 0 6px; line-height: 1.25; }
.karta .polecenie { font-style: italic; color: #44403c; margin: 0 0 14px; }
.karta ol { padding-left: 1.6em; margin: 0; }
.karta ol li { margin: 0 0 .55em; padding-left: .2em; }
.karta .akapit { margin: 0 0 .8em; text-align: justify; }
.karta .pytania { margin-top: 1.2em; }
.karta .pytania h3, .karta .klucz h3 { font-size: 13pt; margin: 0 0 .4em; font-family: system-ui, sans-serif; }
.karta .siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em 1em; list-style: none; padding: 0; }
.karta .siatka li { border: 1px solid #e7e5e4; border-radius: 6px; padding: .35em .6em; font-size: 16pt; }
.karta .klucz { margin-top: 1.5em; padding-top: .6em; border-top: 1px dashed #a8a29e; font-size: 10pt; color: #57534e; }
.karta .stopka { margin-top: 1.6em; font-family: system-ui, sans-serif; font-size: 8pt; color: #a8a29e; text-align: right; }
.karta .blad { box-shadow: inset 3px 0 0 #dc2626; background: #fef2f2; }

@media (max-width: 640px) {
  .karta { padding: 8mm 6mm; font-size: 12pt; }
  .karta .siatka { grid-template-columns: repeat(2, 1fr); }
}

@media print {
  @page { size: A4; margin: 14mm 16mm; }
  body { background: #fff !important; }
  .no-print { display: none !important; }
  main { display: block !important; padding: 0 !important; max-width: none !important; }
  .karta { box-shadow: none; padding: 0; max-width: none; border-radius: 0; }
  .karta .blad { box-shadow: none; background: none; }
  .karta ol li, .karta .akapit { break-inside: avoid; }
}

/* Widoki: ładowanie → logowanie → aplikacja (przełącza konto.js przez body[data-widok]) */
.widok-ladowanie, .widok-logowanie, .widok-aplikacja { display: none; }
body[data-widok="ladowanie"] .widok-ladowanie,
body[data-widok="logowanie"] .widok-logowanie,
body[data-widok="aplikacja"] .widok-aplikacja { display: block; }
body[data-widok="ladowanie"] .widok-ladowanie { display: flex; min-height: 100vh; align-items: center; justify-content: center; }

.kropki { display: inline-flex; gap: .4rem; }
.kropki i { width: .5rem; height: .5rem; border-radius: 999px; background: currentColor; animation: kropka 1s infinite ease-in-out; }
.kropki i:nth-child(2) { animation-delay: .15s; }
.kropki i:nth-child(3) { animation-delay: .3s; }
@keyframes kropka { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

/* Ekran logowania */
.tlo-logowania {
  background:
    radial-gradient(60rem 30rem at 100% 0%, rgba(20, 184, 166, .14), transparent 60%),
    radial-gradient(40rem 25rem at 0% 100%, rgba(245, 158, 11, .08), transparent 60%),
    #f5f5f4;
}
.logo { width: 2.25rem; height: 2.25rem; border-radius: .7rem; background: #0f766e; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; box-shadow: 0 4px 12px rgba(15, 118, 110, .3); }
.karta-logowania { background: #fff; border: 1px solid #e7e5e4; border-radius: 1.25rem; padding: 2rem; box-shadow: 0 20px 50px -20px rgba(28, 25, 23, .18); max-width: 28rem; width: 100%; justify-self: center; }
@media (max-width: 640px) { .karta-logowania { padding: 1.5rem; } }
.pole-duze { padding: .7rem .85rem; font-size: 1rem; }
.cecha { display: flex; gap: .9rem; align-items: flex-start; }
.cecha strong { color: #1c1917; font-weight: 600; }
.cecha p { color: #57534e; font-size: .9rem; margin-top: .1rem; }
.cecha-ikona { flex: none; width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: #fff; border: 1px solid #e7e5e4; color: #0f766e; font-weight: 600; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; }

/* Logowanie i rejestracja */
.zakladki { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .25rem; background: #f5f5f4; border-radius: .75rem; }
.zakladki button { padding: .55rem; border-radius: .55rem; font-size: .9rem; font-weight: 500; color: #57534e; }
.zakladki button[aria-selected="true"] { background: #fff; color: #134e4a; box-shadow: 0 1px 3px rgba(28, 25, 23, .12); }
.przycisk-glowny { width: 100%; border-radius: .5rem; background: #0f766e; color: #fff; font-weight: 500; padding: .75rem; transition: background-color .15s; }
.przycisk-glowny:hover { background: #115e59; }
.przycisk-glowny:disabled { opacity: .6; }
.przycisk-google { width: 100%; display: flex; align-items: center; justify-content: center; gap: .6rem; border: 1px solid #d6d3d1; border-radius: .5rem; background: #fff; padding: .7rem; font-weight: 500; color: #292524; }
.przycisk-google:hover { background: #fafaf9; }
.lub { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0 1rem; color: #a8a29e; font-size: .8rem; }
.lub::before, .lub::after { content: ""; flex: 1; border-top: 1px solid #e7e5e4; }
.blad-pola { display: block; font-size: .75rem; color: #b91c1c; margin-top: .25rem; }
.blad-pola:empty { display: none; }
.pole[aria-invalid="true"] { border-color: #dc2626; }
.siatka-pol { display: grid; grid-template-columns: 8rem 1fr; gap: .75rem; }

/* Okna konta (dane do faktury, zmiana hasła) */
.okno { border: 0; border-radius: 1rem; padding: 1.5rem; width: min(30rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); overflow-y: auto; box-shadow: 0 20px 50px -20px rgba(28, 25, 23, .4); }
.okno::backdrop { background: rgba(28, 25, 23, .35); }