/* ==========================================================================
   manawaFLOW — strony logowania i paneli (/admin/ i /konto/).
   Jeden arkusz dla obu, bo to ten sam układ: pasek marki, wąska kolumna
   z kartą albo siatka kafli, stopka. Wygląd trzyma się palety marki:
   biel galerii, głęboki granat, artystyczny fiolet, złoto sceniczne,
   Poppins na nagłówki i Lato na tekst. Wszystkie krawędzie ostre.
   Ładuje go includes/manawa_uklad.php.
   ========================================================================== */

:root{
  --biel:#FFFFFF; --granat:#0F1219; --fiolet:#6A0DAD; --kobalt:#0047AB; --zloto:#FDC500;
  --granat-500:#5A616F; --granat-300:#9AA0AC; --linia:#E7E9EF; --tlo:#F7F8FB;
  --alarm:#C62828; --alarm-100:#FCEBEB; --ok:#1B9E5A; --ok-100:#E4F5EC;
  --f-head:Poppins,"Segoe UI",system-ui,sans-serif;
  --f-body:Lato,"Segoe UI",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--f-body); font-size:16px; line-height:1.62; color:var(--granat); background:var(--tlo);
  -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column}
h1,h2,h3{font-family:var(--f-head); font-weight:700; letter-spacing:-.015em; line-height:1.22; margin:0 0 .4em}
h1{font-size:clamp(1.35rem,2.2vw,1.85rem)}
h2{font-size:1.15rem}
h3{font-size:1rem; font-weight:600}
p{margin:0 0 1em}
a{color:var(--fiolet)}
small{font-size:.8125rem}
code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.86em; background:var(--tlo);
  border:1px solid var(--linia); padding:.1em .35em}

/* ——— pasek górny ——— */
.abar{background:var(--biel); border-bottom:1px solid var(--linia)}
.abar-in{max-width:1080px; margin:0 auto; padding:.9rem 1.5rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.abar-logo img{height:38px; width:auto; display:block}
.abar-tag{font-family:var(--f-head); font-weight:600; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.14em; color:var(--granat-300); border-left:1px solid var(--linia); padding-left:1rem}
.abar-right{margin-left:auto; display:flex; align-items:center; gap:.9rem; font-size:.82rem; color:var(--granat-500)}

/* ——— treść ——— */
main{flex:1; width:100%; max-width:1080px; margin:0 auto; padding:2.2rem 1.5rem 3rem}
main.narrow{max-width:520px; padding-top:3rem}
.lead{color:var(--granat-500); margin:-.2em 0 1.8rem}

.card{background:var(--biel); border:1px solid var(--linia); padding:1.5rem 1.6rem;
  box-shadow:0 1px 2px rgba(15,18,25,.06), 0 2px 8px rgba(15,18,25,.04); margin-bottom:1.25rem}
.card-top{border-top:4px solid var(--fiolet)}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; align-items:start}
.tile{display:flex; flex-direction:column; height:100%}
.tile p{color:var(--granat-500); font-size:.93rem}
.tile .btn{margin-top:auto; align-self:flex-start}

/* ——— formularze ——— */
label.field{display:block; margin-bottom:1.1rem}
.field span{display:block; font-family:var(--f-head); font-weight:600; font-size:.76rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--granat); margin-bottom:.35rem}
.field small{display:block; font-weight:400; text-transform:none; letter-spacing:0; color:var(--granat-500); margin-top:.2rem}
input[type=text],input[type=email],input[type=password]{width:100%; font-family:var(--f-body); font-size:1rem;
  color:var(--granat); padding:.72em .9em; border:1.5px solid var(--linia); background:var(--biel)}
input:focus{outline:none; border-color:var(--fiolet); box-shadow:0 0 0 4px rgba(106,13,173,.12)}

.btn{font-family:var(--f-head); font-weight:600; font-size:.82rem; text-transform:uppercase; letter-spacing:.06em;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:.78em 1.4em;
  border:2px solid transparent; cursor:pointer; text-decoration:none; background:none; transition:.14s ease}
.btn-gold{background:var(--zloto); color:var(--granat)}
.btn-gold:hover{background:#ffd633}
.btn-purple{background:var(--fiolet); color:var(--biel)}
.btn-purple:hover{background:#55098B}
.btn-ghost{border-color:var(--linia); color:var(--granat); background:var(--biel)}
.btn-ghost:hover{background:var(--tlo)}
.btn-block{width:100%}

/* ——— komunikaty ——— */
.msg{padding:.8em 1em; font-size:.9rem; margin:0 0 1.2rem; border-left:4px solid}
.msg-err{background:var(--alarm-100); color:#8E1D1D; border-color:var(--alarm)}
.msg-ok{background:var(--ok-100); color:#12673B; border-color:var(--ok)}
.msg-info{background:#E6EEF8; color:#00306F; border-color:var(--kobalt)}

.note{font-size:.84rem; color:var(--granat-500); line-height:1.6}
.note strong{color:var(--granat)}
hr{border:0; border-top:1px solid var(--linia); margin:1.5rem 0}

/* ——— stopka ——— */
.afoot{border-top:1px solid var(--linia); background:var(--biel)}
.afoot-in{max-width:1080px; margin:0 auto; padding:1.1rem 1.5rem; display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; font-size:.76rem; color:var(--granat-300)}
.afoot-in a{color:var(--granat-500)}

@media (max-width:620px){
  .abar-in,main,.afoot-in{padding-left:1.1rem; padding-right:1.1rem}
  .abar-tag{display:none}
}

/* ——— kafle narzędzi (konto klienta) ——— */
.tool{display:flex; flex-direction:column; height:100%; background:var(--biel);
  border:1px solid var(--linia); border-top:4px solid var(--linia); padding:1.4rem 1.5rem;
  box-shadow:0 1px 2px rgba(15,18,25,.06), 0 2px 8px rgba(15,18,25,.04)}
.tool.is-open{border-top-color:var(--fiolet)}
.tool.is-locked{border-top-color:var(--linia); background:var(--tlo)}
.tool h2{display:flex; align-items:center; gap:.5rem; margin-bottom:.2rem}
.tool-ico{font-size:1.15rem; color:var(--fiolet); line-height:1}
.tool.is-locked .tool-ico{color:var(--granat-300)}
.tool-sub{color:var(--granat-500); font-size:.9rem; margin:0 0 1rem}
.tool p{color:var(--granat-500); font-size:.93rem}
.tool .btn{margin-top:auto; align-self:flex-start}

/* ——— plakietki źródła dostępu ——— */
.tag{display:inline-flex; align-items:center; gap:.3em; font-family:var(--f-head); font-weight:600;
  font-size:.64rem; text-transform:uppercase; letter-spacing:.08em; padding:.28em .7em;
  background:var(--tlo); color:var(--granat-500); white-space:nowrap}
.tag-ok{background:var(--ok-100); color:#12673B}
.tag-off{background:var(--tlo); color:var(--granat-300)}
.tag-gold{background:#FFF6D9; color:#8A6A00}

/* ——— wiersz z drobnym linkiem pod formularzem ——— */
.pod-form{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.84rem; margin:1.2rem 0 0}