/* KSK – Fiók, bolt, profil. Szerkezet és méret; szín kizárólag tokenből. */

#pg-login,#pg-register,#pg-shop,#pg-profile{
  align-items:center;padding:40px 20px;background:var(--gradient-intro);
  overflow-y:auto;
}
.acc-card{
  max-width:760px;width:100%;background:var(--surface-1);
  border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:36px 40px;box-shadow:var(--shadow-hero);
}
.acc-h{font-family:var(--font-display);font-size:1.57rem;font-weight:800;margin-bottom:18px}
.acc-loading{color:var(--text-muted);padding:18px 0}

/* ── Értesítések ──────────────────────────────────────── */
.acc-notice{
  border:1px solid var(--border-subtle);border-radius:var(--radius);
  background:var(--surface-2);padding:14px 16px;line-height:1.6;
  color:var(--text-secondary);margin-bottom:18px;
}
.acc-notice--ok{background:var(--ok-soft);border-color:var(--ok-border);color:var(--text-primary)}
.acc-notice--error{background:var(--danger-soft);border-color:var(--danger-border);color:var(--text-primary)}

.acc-error{
  background:var(--danger-soft);border:1px solid var(--danger-border);
  border-radius:var(--radius);padding:10px 14px;margin:14px 0;
  color:var(--text-primary);line-height:1.5;
}

/* ── Belépés és regisztráció (két külön lap) ──────────── */
.acc-lead{color:var(--text-secondary);line-height:1.65;margin-bottom:20px}

/* Átjáró a két lap között. Gomb, nem hivatkozás: a lapváltást JS végzi, egy
   `href="#"` pedig olyan címet ígérne, ami nem létezik. */
.acc-switch{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--border-subtle);
  color:var(--text-secondary);font-size:.92rem;
}
.acc-switch-btn{
  background:none;border:none;padding:0;font:inherit;color:var(--accent);
  font-weight:600;text-decoration:underline;cursor:pointer;
}
.acc-switch-btn:hover{color:var(--accent-hover)}

.acc-form{display:flex;flex-direction:column}
.acc-label{font-size:.86rem;color:var(--text-secondary);margin-bottom:6px}
.acc-input{
  background:var(--surface-2);border:1px solid var(--border-subtle);
  border-radius:var(--radius);padding:11px 13px;font-size:1rem;
  color:var(--text-primary);margin-bottom:16px;
}
.acc-input:focus{border-color:var(--accent-border-strong);outline:none;box-shadow:0 0 0 2px var(--accent-soft)}
.acc-hint{font-size:.82rem;color:var(--text-muted);margin:-10px 0 16px}
.acc-submit{margin-top:8px;align-self:flex-start}
.acc-back{margin-top:22px}
.acc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

.acc-consent{
  background:var(--surface-2);border:1px solid var(--border-subtle);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:16px;
}
.acc-consent-t{font-weight:700;margin-bottom:10px}
.acc-consent ul{margin:0 0 14px 18px;color:var(--text-secondary);line-height:1.65;font-size:.9rem}
.acc-consent li{margin-bottom:5px}
.acc-check{display:flex;gap:10px;align-items:flex-start;line-height:1.5;font-size:.92rem}
.acc-check input{margin-top:3px;flex:none}

/* ── Bolt ─────────────────────────────────────────────── */
.shop-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.shop-balance{
  background:var(--accent-soft);border:1px solid var(--accent-border);
  color:var(--accent);border-radius:20px;padding:6px 14px;font-size:.88rem;
}
.shop-balance--unknown{background:var(--surface-2);border-color:var(--border-subtle);color:var(--text-muted)}
.shop-sec{margin-top:28px}
.shop-h2{font-family:var(--font-display);font-size:1.14rem;font-weight:700;margin-bottom:8px}
.shop-lead{color:var(--text-secondary);font-size:.9rem;line-height:1.6;margin-bottom:14px}

.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.shop-card{
  background:var(--surface-2);border:1px solid var(--border-subtle);
  border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:8px;
}
.shop-card-t{font-family:var(--font-display);font-size:1.07rem;font-weight:700}
.shop-card-d{font-size:.86rem;color:var(--text-secondary);line-height:1.55;flex:1}
.shop-price{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--accent)}
.shop-card-m{font-size:.82rem;color:var(--text-muted)}

.shop-modules{display:flex;flex-direction:column;gap:8px}
.shop-mod{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface-2);border:1px solid var(--border-subtle);
  border-radius:var(--radius);padding:12px 14px;
}
.shop-mod--unlocked{border-color:var(--ok-border);background:var(--ok-soft)}
/* A színezett háttéren a halvány szöveg NEM elég kontrasztos (mért 4,09 az
   előírt 4,5 helyett – az a11y-audit fogta meg). A tinten eggyel erősebb
   szövegtoken kell. */
.shop-mod--unlocked .shop-mod-id,
.shop-mod--unlocked .shop-mod-hint{color:var(--text-secondary)}

/* A „hamarosan" jelzése SZAGGATOTT KERET, nem áttetszőség. Az `opacity` az
   egész sort halványítja, beleértve a szöveget: mért 2,99 kontraszt. A
   megkülönböztetést a szaggatott keret és a „Hamarosan" felirat együtt
   hordozza – a szín itt sem egyedüli jelzés (css/README.md). */
.shop-mod--unreleased{border-style:dashed}
.shop-mod-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.shop-mod-id{font-family:var(--font-mono);font-size:.76rem;color:var(--text-muted)}
.shop-mod-name{font-weight:600}
.shop-mod-hint{font-size:.82rem;color:var(--text-muted)}
.shop-mod-side{display:flex;align-items:center;gap:10px;flex:none}
.shop-mod-badge{font-size:.86rem;color:var(--text-secondary);white-space:nowrap}

/* ── Profil ───────────────────────────────────────────── */
.prof-sec{
  margin-top:24px;padding-top:20px;border-top:1px solid var(--border-subtle);
}
.prof-sec--danger{border-top-color:var(--danger-border)}
.prof-p{color:var(--text-secondary);line-height:1.65;margin-bottom:12px}
.prof-list{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin-bottom:16px}
.prof-list dt{color:var(--text-muted);font-size:.88rem}
.prof-list dd{color:var(--text-primary);word-break:break-word}
.prof-modules{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-bottom:14px}
.prof-modules li{
  background:var(--accent-soft);border:1px solid var(--accent-border);
  color:var(--accent);border-radius:20px;padding:4px 12px;font-size:.85rem;
  font-family:var(--font-mono);
}
.prof-table{width:100%;border-collapse:collapse;font-size:.88rem}
.prof-table th,.prof-table td{
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--border-subtle);
}
.prof-table th{color:var(--text-muted);font-weight:600}

.btn-nav.danger{border-color:var(--danger-border);color:var(--danger)}

/* „megerősítve" / „nincs megerősítve" jelölés az e-mail cím mellett. A
   megerősített állapot kap zöldes hátteret; a hiánya SEMLEGES marad, mert nem
   hiba – ma semmit nem tilt. */
.prof-badge{
  display:inline-block;font-size:.75rem;padding:1px 8px;border-radius:20px;
  border:1px solid var(--border-subtle);color:var(--text-muted);white-space:nowrap;
}
.prof-badge--ok{background:var(--ok-soft);border-color:var(--ok-border);color:var(--text-secondary)}

/* A kezdőoldal fiók-gombjai. A tördelés nem díszítés: a bejelentkezett sávban
   három gomb áll (Profil, Bolt, Kijelentkezés), és keskeny kijelzőn ezek
   különben kilógnának a kártyából. */
#intro-account-bar{display:flex;gap:8px;flex-wrap:wrap}

/* A kitöltés fejlécének fiók-sávja. `display:contents`, hogy a gomb a fejléc
   saját gombsorának eleme legyen – így kijelentkezve, amikor a sáv üres, nem
   marad utána egy üres rés a fejlécben. */
#quiz-account-bar{display:contents}

@media (max-width:640px){
  .acc-card{padding:26px 20px}
  .prof-list{grid-template-columns:1fr;gap:2px 0}
  .prof-list dd{margin-bottom:8px}
  /* A görgetés a BURKOLÓN van, mert az fókuszálható – lásd invoiceTable(). */
  .prof-table-wrap{overflow-x:auto}
  .prof-table{min-width:420px}
}