/* =========================================================
   Lábológia Tudástár — fiók-oldalak (belépés, regisztráció,
   jelszó, saját fiók). A főoldal tokenjeire épül.
   ========================================================= */

.fiok-oldal{background:var(--papir-2);}

.fiok-fo{
  max-width:var(--szeles);
  margin-inline:auto;
  padding:clamp(2.5rem,7vw,5rem) var(--ter) clamp(3rem,8vw,6rem);
}
.fiok-fo--keskeny{max-width:30rem;}

/* ── kártya ── */
.kartya-doboz{
  background:var(--lap);
  border:1px solid var(--vonal-halk);
  border-radius:var(--ivl);
  padding:clamp(1.6rem,4vw,2.4rem);
  box-shadow:var(--emel);
}

.fiok-fej{margin-bottom:1.8rem;}
.fiok-fej h1{font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:200;letter-spacing:-.04em;line-height:1.1;}
.fiok-fej p{font-size:var(--s);color:var(--pala);margin-top:.7rem;line-height:1.6;}

/* ── űrlap ── */
.urlap-mezo{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.15rem;}
.urlap-mezo label{font-size:var(--xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--halk);}
.urlap-mezo input{
  font:inherit;font-size:var(--s);
  padding:.85rem 1rem;
  border:1px solid var(--vonal);border-radius:var(--ivs);
  background:var(--papir);color:var(--tinta);
  transition:border-color .25s ease,box-shadow .25s ease;
}
.urlap-mezo input:focus{outline:none;border-color:var(--kek-mely);box-shadow:0 0 0 3px rgba(95,143,230,.16);}
.urlap-mezo input[aria-invalid="true"]{border-color:var(--korall);}
.urlap-sugo{font-size:var(--xs);color:var(--halk);line-height:1.5;}

.urlap-gomb{width:100%;margin-top:.6rem;}

/* Körvonalas gomb — a fejléc Kilépés gombja és a visszavonó műveletek használják */
.gomb-vonal{border-color:var(--vonal);color:var(--tinta);background:transparent;}
.gomb-vonal:hover{color:#fff;border-color:transparent;}

.urlap-alja{
  margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--vonal-halk);
  font-size:var(--s);color:var(--pala);text-align:center;line-height:1.7;
}
.urlap-alja a{color:var(--kek-mely);font-weight:600;}
.urlap-alja a:hover{text-decoration:underline;}

/* ── üzenetek ── */
.uzenet{
  padding:.9rem 1.15rem;border-radius:var(--ivs);margin-bottom:1.4rem;
  font-size:var(--s);line-height:1.6;border:1px solid transparent;
}
.uzenet--ok{background:var(--kek-mos);border-color:var(--kek-mely);color:var(--tinta);}
.uzenet--hiba{background:rgba(255,117,117,.12);border-color:var(--korall);color:var(--korall-tinta);font-weight:500;}
.uzenet--info{background:var(--papir-2);border-color:var(--vonal);color:var(--pala);}

/* ── saját fiók ── */
.fiok-racs{display:grid;grid-template-columns:1fr;gap:clamp(.8rem,2vw,1.2rem);}
@media (min-width:52rem){.fiok-racs{grid-template-columns:1.4fr .6fr;align-items:start;}}

.allapot{display:flex;flex-direction:column;gap:1rem;}
.allapot-sor{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-block:.75rem;border-bottom:1px solid var(--vonal-halk);}
.allapot-sor:last-child{border-bottom:0;}
.allapot-sor dt{font-size:var(--xs);letter-spacing:.1em;text-transform:uppercase;color:var(--halk);font-weight:600;}
.allapot-sor dd{margin:0;font-size:var(--s);font-weight:500;}

.jelvény{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--xs);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:.25rem .6rem;border-radius:2px;}
.jelvény--elo{background:var(--kek-mos);color:var(--kek-mely);}
.jelvény--nincs{background:var(--vonal-halk);color:var(--halk);}

/* ── könyvtár a fiókban ── */
.polc{display:grid;grid-template-columns:1fr;gap:clamp(.8rem,2vw,1.1rem);margin-top:1.4rem;}
@media (min-width:40rem){.polc{grid-template-columns:repeat(2,1fr);}}
.polc-elem{
  background:var(--papir);border:1px solid var(--vonal-halk);border-radius:var(--ivk);
  padding:1.2rem;display:flex;flex-direction:column;gap:.6rem;
  transition:transform .4s var(--ki),box-shadow .4s ease;
}
.polc-elem:hover{transform:translateY(-3px);box-shadow:var(--emel);}
.polc-elem h3{font-size:var(--m);font-weight:400;letter-spacing:-.03em;}
.polc-elem p{font-size:var(--s);color:var(--pala);line-height:1.6;}
.polc-meta{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--kek-mely);}
.polc-ures{
  padding:2rem 1.4rem;text-align:center;border:1px dashed var(--vonal);border-radius:var(--ivk);
  font-size:var(--s);color:var(--halk);line-height:1.7;
}

@media (prefers-reduced-motion:reduce){
  .polc-elem:hover{transform:none;}
}