/* ============================================================
   BLUEGRADE — frontend arculati stíluslap
   Színek: logo/szinek.md · Betű: Outfit (Google Fonts)
   ============================================================ */

:root {
  --blg-feher:      #FFFFFF;
  --blg-kek:        #2D68C4;
  --blg-kek-sotet:  #245699;   /* kódbeviteli sáv, hover */
  --blg-sotet:      #101820;
  --blg-raszter:    #8CACDE;
  --blg-raszter-inv:#96B4E2;
  --blg-papir:      #F6F9FD;
  --blg-hatter:     #F2F5F9;   /* oldalkereten kívüli háttér */
  --blg-vonal:      #E0E8F6;
  --blg-vonal-int:  #9FB6DC;   /* interaktív elemek körvonala */
  --blg-szurke:     #64696E;
  --blg-menu:       #E3ECFA;   /* inaktív menüpont kéken */
  --blg-zold:       #1F7A3D;
  --blg-zold-h:     #E2F3E6;
  --blg-piros:      #B03A3A;
  --blg-piros-h:    #F9E4E4;
  --blg-sarga:      #9A6A0E;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  color: var(--blg-sotet);
  background: var(--blg-hatter);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blg-kek); text-decoration: none; }
a:hover { color: var(--blg-sotet); }

.mono { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; }

/* ---- háttérminta (a logó rácsából) ---- */
/* A diák oldalak (kitöltés indítása, kitöltő felület, eredmény) háttere:
   ugyanaz a low-poly háromszög-mozaik, mint a kódbeviteli sávon, csak
   egészen világos árnyalatokban. A kép hézagmentesen ismételhető csempe
   (img/mozaik-vilagos.png, 896×896, ~20 kB) — lásd logo/vilagos-mozaik-generator.py. */
.blg-pattern {
  background-color: var(--blg-hatter);
  background-image: url("../img/mozaik-vilagos.png");
  background-repeat: repeat;
  background-size: 896px 896px;   /* eredeti méret: nincs átméretezés, így a csempehatár sem látszik */
}
/* Kódbeviteli sáv háttere: saját készítésű low-poly mozaik (img/kod-hatter.jpg).
   A képre sötétítő réteg kerül, hogy a fehér felirat és a beviteli mező
   minden képernyőméretnél jól olvasható maradjon. */
.blg-kodsav {
  background-color: var(--blg-kek-sotet);
  background-image:
    linear-gradient(180deg, rgba(11,22,44,.42) 0%, rgba(11,22,44,.30) 45%, rgba(11,22,44,.52) 100%),
    url("../img/kod-hatter.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.blg-pattern-dark {
  background-color: var(--blg-kek-sotet);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='126' height='126'%3E%3Cg fill='%23FFFFFF'%3E%3Crect x='0' y='0' width='22' height='22' rx='3' opacity='.05'/%3E%3Crect x='42' y='21' width='22' height='22' rx='3' opacity='.08'/%3E%3Crect x='84' y='0' width='22' height='22' rx='3' opacity='.04'/%3E%3Crect x='21' y='63' width='22' height='22' rx='3' opacity='.07'/%3E%3Crect x='63' y='84' width='22' height='22' rx='3' opacity='.05'/%3E%3Crect x='105' y='63' width='22' height='22' rx='3' opacity='.06'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- animált visszajelző modal (belépés, regisztráció, jelszó) ---- */
.blg-umodal {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(16, 24, 32, .52);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: blgUmodalHatter .22s ease-out both;
}
.blg-umodal-lap {
  width: 440px; max-width: 100%;
  background: var(--blg-feher);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(16, 24, 32, .28), 0 2px 6px rgba(16, 24, 32, .10);
  padding: 34px 34px 28px;
  text-align: center;
  animation: blgUmodalLap .34s cubic-bezier(.2, .9, .25, 1.06) both;
}
.blg-umodal-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 50%;
  margin-bottom: 16px;
  animation: blgUmodalIkon .42s cubic-bezier(.18, 1.1, .32, 1.04) .06s both;
}
.blg-umodal-ikon-ok { background: var(--blg-zold-h); color: var(--blg-zold); }
.blg-umodal-ikon-info { background: #E7EFFC; color: var(--blg-kek); }
.blg-umodal-ikon-figy { background: #FBF3E7; color: #A9711A; }
/* a pipa „megrajzolódik” */
.blg-umodal-pipa {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: blgUmodalPipa .4s ease-out .26s forwards;
}
.blg-umodal-cim {
  margin: 0 0 8px; font-size: 20px; font-weight: 500;
  letter-spacing: -0.015em; color: var(--blg-sotet);
}
.blg-umodal-szoveg {
  margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--blg-szurke);
}
.blg-umodal-gomb { margin-top: 22px; min-width: 140px; }

/* kilépés */
.blg-umodal.blg-umodal-zar { animation: blgUmodalHatterKi .2s ease-in both; }
.blg-umodal.blg-umodal-zar .blg-umodal-lap { animation: blgUmodalLapKi .2s ease-in both; }

@keyframes blgUmodalHatter { from { opacity: 0 } to { opacity: 1 } }
@keyframes blgUmodalHatterKi { from { opacity: 1 } to { opacity: 0 } }
@keyframes blgUmodalLap {
  from { opacity: 0; transform: translateY(18px) scale(.94) }
  to   { opacity: 1; transform: none }
}
@keyframes blgUmodalLapKi {
  from { opacity: 1; transform: none }
  to   { opacity: 0; transform: translateY(10px) scale(.97) }
}
@keyframes blgUmodalIkon {
  from { opacity: 0; transform: scale(.4) }
  to   { opacity: 1; transform: none }
}
@keyframes blgUmodalPipa { to { stroke-dashoffset: 0 } }

/* aki kikapcsolta az animációkat, annak nem villog semmi */
@media (prefers-reduced-motion: reduce) {
  .blg-umodal, .blg-umodal-lap, .blg-umodal-ikon,
  .blg-umodal.blg-umodal-zar, .blg-umodal.blg-umodal-zar .blg-umodal-lap { animation: none }
  .blg-umodal-pipa { stroke-dashoffset: 0; animation: none }
}

/* ---- lenyíló megoldás az eredményoldalon ---- */
.blg-megoldas {
  border: 1px solid var(--blg-vonal);
  border-radius: 10px;
  background: var(--blg-papir);
  padding: 0 18px;
}
.blg-megoldas > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 0; cursor: pointer; list-style: none;
}
.blg-megoldas > summary::-webkit-details-marker { display: none; }
.blg-megoldas-cim { font-size: 15.5px; font-weight: 500; color: var(--blg-sotet); }
.blg-megoldas-jel {
  display: inline-flex; color: var(--blg-kek);
  transition: transform .18s ease;
}
.blg-megoldas[open] > summary { border-bottom: 1px solid var(--blg-vonal); }
.blg-megoldas[open] .blg-megoldas-jel { transform: rotate(180deg); }
.blg-megoldas > summary:hover .blg-megoldas-cim { color: var(--blg-kek); }

/* ---- diák felület fülei ---- */
.blg-dfulek {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0 0 24px; padding-bottom: 14px;
  border-bottom: 1px solid var(--blg-vonal);
}
.blg-dful {
  display: inline-flex; align-items: center;
  height: 36px; padding: 0 16px; border-radius: 8px;
  font-size: 14px; font-weight: 500;
  color: var(--blg-szurke); background: var(--blg-papir);
  border: 1px solid transparent; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.blg-dful:hover { background: var(--blg-menu); color: var(--blg-kek-sotet); }
.blg-dful.is-on {
  background: var(--blg-kek); border-color: var(--blg-kek); color: #fff;
}
.blg-dful.is-on:hover { background: var(--blg-kek-sotet); color: #fff; }

/* ============================================================
   Nyitólapi 2×3 kártyahálózat: felül az „Így működik" három lépése,
   alatta a három kiemelt tulajdonság.

   A színek hasábonként ismétlődnek (1. hasáb kék, 2. zöldeskék,
   3. borostyán), így a két sor összecseng. Szándékosan halvány,
   pasztell tónusok — a márka kékje marad a domináns.
   ============================================================ */
/* felső sor — „Így működik": kék, zöldeskék, borostyán */
.blg-szin-1 { --k-hatter: #F2F6FD; --k-vonal: #DCE7F8; --k-ikon: #2D68C4; --k-ikonhatter: #E3ECFB; }
.blg-szin-2 { --k-hatter: #F0F7F5; --k-vonal: #D6E8E3; --k-ikon: #1C7565; --k-ikonhatter: #E0F0EC; }
.blg-szin-3 { --k-hatter: #FBF6EE; --k-vonal: #EFE2CC; --k-ikon: #A9711A; --k-ikonhatter: #F6EBD8; }

/* alsó sor — kiemelt tulajdonságok: indigó, mályva, kékeszöld.
   Szándékosan MÁS hármas, mint a felső soré, hogy a két sáv elváljon. */
.blg-jszin-1 { --k-hatter: #F5F3FC; --k-vonal: #E2DEF5; --k-ikon: #574BA6; --k-ikonhatter: #EBE8F8; }
.blg-jszin-2 { --k-hatter: #FCF3F6; --k-vonal: #F1DFE5; --k-ikon: #9E4260; --k-ikonhatter: #F7E7ED; }
.blg-jszin-3 { --k-hatter: #EFF7FA; --k-vonal: #D9EAF2; --k-ikon: #22687F; --k-ikonhatter: #E1F1F7; }

/* ---- „Így működik" — három lépés a nyitólapon ---- */
.blg-lepesek { padding: 58px min(5vw, 72px) 56px; background: var(--blg-feher); }
.blg-lepes-fej {
  margin: 0 auto 34px; text-align: center;
  font-size: 28px; font-weight: 500; letter-spacing: -0.02em;
}
.blg-lepes-racs {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 1180px;
  display: grid; gap: 40px;   /* a relációs jel elfér a résben, a boxokhoz nem ér hozzá */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.blg-lepes {
  position: relative;
  padding: 30px 26px 28px;
  border: 1px solid var(--k-vonal);
  border-radius: 14px;
  background: var(--k-hatter);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.blg-lepes:hover {
  box-shadow: 0 6px 20px rgba(36, 86, 153, .09);
  transform: translateY(-2px);
}

/* nagy, elhalványított sorszám a jobb felső sarokban */
.blg-lepes-szam {
  position: absolute; top: 2px; right: 18px;
  font-size: 62px; font-weight: 600; line-height: 1;
  letter-spacing: -0.04em;
  color: var(--k-ikon); opacity: .16;
  user-select: none; pointer-events: none;
}

/* kör alakú, középre igazított ikon — ugyanaz a forma, mint a tulajdonságoknál */
.blg-lepes-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--k-ikonhatter); color: var(--k-ikon);
  margin-bottom: 16px; flex: 0 0 auto;
}
.blg-lepes h3 {
  margin: 0 0 8px; font-size: 17.5px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--blg-sotet);
  max-width: 15em;
}
.blg-lepes p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--blg-szurke); }

/* Vastag, relációs jel szerű nyíl a kártyák között — ugyanaz a súlyos,
   elhalványított hangvétel, mint a sorszámoknál. A doboz pontosan a
   hasábok közti rést tölti ki, a jel pedig középen áll benne, így
   egyik kártyához sem ér hozzá. */
.blg-lepes-nyil {
  position: absolute; top: 50%; right: -40px;
  width: 40px; height: 40px;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  color: var(--blg-raszter);
  opacity: .55;
  line-height: 0;
  z-index: 1;
}

.blg-lepes-cta {
  display: flex; justify-content: center; gap: 14px;
  margin-top: 34px; flex-wrap: wrap;
}

@media (max-width: 900px) {
  .blg-lepes-racs { grid-template-columns: 1fr; gap: 52px; }
  .blg-lepesek { padding: 44px 20px 34px; }
  /* egymás alatti kártyáknál a jel lefelé fordul, a kártyák közé */
  .blg-lepes-nyil {
    top: auto; right: 50%; bottom: -46px;
    transform: translateX(50%) rotate(90deg);
  }
}

/* ---- fejléc jobb oldala: menü + a két belépő gomb ---- */
.blg-fjobb {
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
}
.blg-belep { display: flex; align-items: center; gap: 10px; }
.blg-belep form { margin: 0; }
.blg-bgomb {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: 8px;
  border: 1px solid transparent;
  font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
/* diák: áttetsző, világosabb árnyalat a kék fejlécen */
.blg-bgomb-diak {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .42);
  color: #fff;
}
.blg-bgomb-diak:hover {
  background: rgba(255, 255, 255, .27);
  border-color: rgba(255, 255, 255, .68);
  color: #fff;
}
/* tanár: tömör fehér, sötét szöveggel — erősebb kontraszt */
.blg-bgomb-tanar {
  background: #fff;
  border-color: #fff;
  color: var(--blg-kek-sotet);
}
.blg-bgomb-tanar:hover {
  background: var(--blg-menu);
  border-color: var(--blg-menu);
  color: var(--blg-kek-sotet);
}
/* kilépés: csak körvonal */
.blg-bgomb-ki {
  background: transparent;
  border-color: rgba(255, 255, 255, .38);
  color: var(--blg-menu);
}
.blg-bgomb-ki:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
}

@media (max-width: 900px) {
  .blg-fjobb { width: 100%; flex-direction: column; gap: 14px; }
  .blg-fmenu { justify-content: center; gap: 24px !important; }
  .blg-belep { justify-content: center; flex-wrap: wrap; }
}

/* ---- belépő / regisztrációs lapok ---- */
.blg-auth {
  flex: 1 1 auto;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 20px 64px;
}
.blg-auth-lap {
  width: 460px; max-width: 100%;
  background: var(--blg-feher);
  border: 1px solid var(--blg-vonal);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(16, 24, 32, .07);
  padding: 34px 36px 32px;
}
.blg-auth-lap h1 {
  margin: 0 0 6px; font-size: 24px; font-weight: 500; letter-spacing: -0.02em;
}
.blg-auth-lap .blg-auth-alcim {
  margin: 0 0 22px; font-size: 14px; line-height: 1.55; color: var(--blg-szurke);
}
.blg-auth-sor { margin-bottom: 15px; }
.blg-auth-lap .btn-primary { width: 100%; height: 46px; }
.blg-auth-labjegyzet {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--blg-vonal);
  font-size: 13.5px; line-height: 1.6; color: var(--blg-szurke); text-align: center;
}
/* vagy-elválasztó */
.blg-vagy {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0; font-size: 12.5px; color: var(--blg-szurke);
}
.blg-vagy::before, .blg-vagy::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--blg-vonal);
}
/* Google gomb */
.blg-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 46px; border-radius: 8px;
  border: 1px solid var(--blg-vonal-int); background: #fff;
  font-family: inherit; font-size: 15px; font-weight: 500; color: var(--blg-sotet);
  cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.blg-google:hover { background: var(--blg-papir); border-color: var(--blg-kek); color: var(--blg-sotet); }
/* jelszó-követelmények */
.blg-jelszo-info {
  margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--blg-szurke);
}

/* ---- fix szöveges aloldalak (Információk, Kapcsolat, Adatvédelem) ----
   Fejléc: ugyanaz a sötétkék mozaik, mint a kódbeviteli sávon.
   Tartalom: fehér lap középen, két oldalt a világos mozaik. */
.blg-oldalfej {
  padding: 46px min(5vw, 72px);
  text-align: center;
}
.blg-oldalfej h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
}
.blg-oldalsav {
  flex: 1 1 auto;
  padding: 40px min(5vw, 56px) 60px;
}
.blg-oldal-lap {
  max-width: 880px;
  margin: 0 auto;
  background: var(--blg-feher);
  border: 1px solid var(--blg-vonal);
  border-radius: 14px;
  padding: 44px 52px 48px;
  box-shadow: 0 4px 20px rgba(36, 86, 153, .07);
  font-size: 15.5px;
  line-height: 1.7;
  color: #2A3138;
}

/* a CMS-ből érkező tartalom tipográfiája */
.blg-oldal-lap > :first-child { margin-top: 0; }
.blg-oldal-lap > :last-child { margin-bottom: 0; }
.blg-oldal-lap h2 {
  margin: 34px 0 12px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--blg-sotet);
}
.blg-oldal-lap h3 {
  margin: 26px 0 10px;
  font-size: 17.5px;
  font-weight: 500;
  color: var(--blg-sotet);
}
.blg-oldal-lap p { margin: 0 0 14px; }
.blg-oldal-lap ul,
.blg-oldal-lap ol { margin: 0 0 16px; padding-left: 22px; }
.blg-oldal-lap li { margin-bottom: 7px; }
.blg-oldal-lap li::marker { color: var(--blg-vonal-int); }
.blg-oldal-lap img { max-width: 100%; height: auto; border-radius: 8px; }
.blg-oldal-lap table { border-collapse: collapse; width: 100%; margin: 0 0 16px; }
.blg-oldal-lap th,
.blg-oldal-lap td { border: 1px solid var(--blg-vonal); padding: 8px 12px; text-align: left; }
.blg-oldal-lap th { background: var(--blg-papir); font-weight: 500; }
.blg-oldal-lap blockquote {
  margin: 0 0 16px;
  padding: 12px 18px;
  border-left: 3px solid var(--blg-kek);
  background: var(--blg-papir);
  border-radius: 0 8px 8px 0;
}
.blg-oldal-lap hr { border: 0; border-top: 1px solid var(--blg-vonal); margin: 28px 0; }

@media (max-width: 700px) {
  .blg-oldalfej { padding: 32px 20px; }
  .blg-oldalfej h1 { font-size: 26px; }
  .blg-oldalsav { padding: 20px 14px 40px; }
  .blg-oldal-lap { padding: 26px 22px 30px; border-radius: 12px; }
  .blg-oldal-lap h2 { font-size: 19.5px; margin-top: 26px; }
}

/* ---- kiemelt tulajdonságok a nyitólapon (a tanári belépés alatt) ---- */
.blg-jellemzok {
  padding: 48px min(5vw, 72px) 60px;
  background: var(--blg-papir);
  border-top: 1px solid var(--blg-vonal);
}
.blg-jellemzok .blg-lepes-cta { margin-top: 32px; }
.blg-jell-racs {
  max-width: 1180px; margin: 0 auto;
  display: grid; gap: 40px;   /* ugyanannyi, mint a lépéseknél — így a hasábok egy vonalban vannak */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.blg-jell {
  background: var(--k-hatter, var(--blg-feher));
  border: 1px solid var(--k-vonal, var(--blg-vonal));
  border-radius: 14px;
  padding: 30px 26px 28px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.blg-jell:hover {
  box-shadow: 0 6px 20px rgba(36, 86, 153, .10);
  transform: translateY(-2px);
}
.blg-jell-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--k-ikonhatter, #E7EFFC); color: var(--k-ikon, var(--blg-kek));
  margin-bottom: 16px; flex: 0 0 auto;
}
.blg-jell h3 {
  margin: 0; font-size: 16.5px; font-weight: 500; line-height: 1.35;
  letter-spacing: -0.01em; color: var(--blg-sotet);
}
.blg-jell p {
  margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--blg-szurke);
}
@media (max-width: 900px) {
  .blg-jell-racs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .blg-jellemzok { padding: 34px 20px 44px; }
  .blg-jell-racs { grid-template-columns: 1fr; gap: 14px; }
  .blg-jell { padding: 24px 20px; }
}

/* ---- gombok ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border: 0; border-radius: 6px;
  font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--blg-kek); color: #fff; }
.btn-primary:hover { background: var(--blg-kek-sotet); color: #fff; }
.btn-dark { background: var(--blg-sotet); color: #fff; }
.btn-dark:hover { background: #000; color: #fff; }
.btn-outline { background: #fff; color: var(--blg-szurke); border: 1px solid var(--blg-vonal-int); }
.btn-outline:hover { color: var(--blg-sotet); }
.btn-lg { height: 52px; padding: 0 34px; font-size: 17px; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13.5px; }

/* ---- űrlapok ---- */
label.lbl, .lbl { display: block; font-size: 13px; font-weight: 500; color: var(--blg-szurke); margin-bottom: 6px; }
.inp, select.inp, textarea.inp {
  width: 100%; height: 44px; padding: 0 13px;
  border: 1px solid var(--blg-vonal-int); border-radius: 6px; background: #fff;
  font-family: inherit; font-size: 15px; color: var(--blg-sotet);
}
textarea.inp { height: auto; padding: 10px 13px; line-height: 1.5; resize: vertical; }
.inp:focus { outline: 2px solid var(--blg-kek); outline-offset: -1px; border-color: var(--blg-kek); }
.err { color: var(--blg-piros); font-size: 13px; margin-top: 5px; }
.flash-ok {
  background: var(--blg-zold-h); color: var(--blg-zold);
  padding: 11px 16px; border-radius: 7px; font-size: 14px; font-weight: 500; margin-bottom: 16px;
}
.flash-err {
  background: var(--blg-piros-h); color: var(--blg-piros);
  padding: 11px 16px; border-radius: 7px; font-size: 14px; font-weight: 500; margin-bottom: 16px;
}

/* ---- kártyák, táblázatok ---- */
.card { background: #fff; border: 1px solid var(--blg-vonal); border-radius: 10px; padding: 24px 26px; }
.row-card {
  display: flex; align-items: center; gap: 16px; min-height: 62px; padding: 10px 20px;
  background: #fff; border: 1px solid var(--blg-vonal); border-radius: 8px;
}
.th { font-size: 12px; font-weight: 500; color: var(--blg-szurke); }
.sec { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--blg-szurke); }

.pill { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 14px;
  border: 0; border-radius: 14px; font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.pill-on { background: var(--blg-zold-h); color: var(--blg-zold); }
.pill-off { background: var(--blg-piros-h); color: var(--blg-piros); }

.act { background: none; border: 0; padding: 0; font-family: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--blg-kek); cursor: pointer; white-space: nowrap; }
.act:hover { color: var(--blg-kek-sotet); }
.act-del { color: var(--blg-piros); }
.act-del:hover { color: #8a2525; }

.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 11px; border-radius: 12px;
  background: #EAF0FA; color: var(--blg-kek-sotet); font-size: 12px; font-weight: 500; white-space: nowrap; }

.kod { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 12px;
  background: #EAF0FA; border-radius: 6px; }
.cpy { width: 26px; height: 26px; border-radius: 5px; background: #fff; border: 1px solid var(--blg-vonal-int);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.cpy:hover { border-color: var(--blg-kek); }

.jegy { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; font-weight: 600; font-size: 14.5px; color: #fff; }
.jegy-5 { background: var(--blg-zold); } .jegy-4 { background: #3E7326; }
.jegy-3 { background: var(--blg-sarga); } .jegy-2 { background: #B0742A; } .jegy-1 { background: var(--blg-piros); }

/* ---- tanári oldalsáv ---- */
.tshell { display: flex; min-height: 100vh; }
.tside {
  width: 250px; flex-shrink: 0;
  /* ugyanaz a low-poly mozaik, mint a kezdőlap kódsávjában — álló változatban,
     egyenletes sötétítő réteggel, hogy a fehér menü jól olvasható maradjon */
  background-color: var(--blg-kek-sotet);
  background-image:
    linear-gradient(180deg, rgba(11,22,44,.52) 0%, rgba(11,22,44,.58) 100%),
    url("../img/menu-hatter.jpg");
  background-size: cover, cover;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  display: flex; flex-direction: column; padding: 34px 16px; position: sticky; top: 0; height: 100vh;
}
/* Menüpontok: mindegyik halvány gomb-alakzat, középre igazítva; ráállva sötétebb */
.tside .mi {
  display: flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 18px;
  font-size: 15px; font-weight: 500; color: var(--blg-menu); text-align: center;
  border-radius: 8px; text-decoration: none;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10);
  transition: background .15s, color .15s, border-color .15s;
}
.tside .mi:hover { background: rgba(16,24,32,.22); border-color: rgba(255,255,255,.18); color: #fff; }
.tside .mi.on { background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.28); color: #fff; }

/* Kijelentkezés: fehér gomb sötét szöveggel, kilépés ikonnal */
.tside .mi-out {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 46px;
  background: #fff; color: var(--blg-sotet); border: 1px solid rgba(255,255,255,.65); border-radius: 8px;
  font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  transition: background .15s, color .15s;
}
.tside .mi-out:hover { background: var(--blg-menu); color: var(--blg-kek-sotet); }
.tside .mi-out svg { flex-shrink: 0; }
.tmain { flex-grow: 1; padding: 44px 52px; min-width: 0; }

/* ---- diák kitöltő ---- */
.qcard { background: #fff; border: 1px solid var(--blg-vonal); border-radius: 10px;
  padding: 24px 28px; box-shadow: 0 2px 10px rgba(16,24,32,.05); }
.opt { display: flex; align-items: center; gap: 11px; min-height: 46px; padding: 10px 16px;
  border: 1px solid var(--blg-vonal); border-radius: 7px; font-size: 14.5px; background: #fff; cursor: pointer; }
.opt:hover { border-color: var(--blg-vonal-int); }
.opt.sel { border: 2px solid var(--blg-kek); background: #F4F8FE; padding: 9px 15px; }
.drag { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 15px;
  border: 1px solid var(--blg-vonal-int); border-radius: 7px; font-size: 14px; background: #fff;
  cursor: grab; box-shadow: 0 1px 2px rgba(16,24,32,.06);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.drag.dragging { opacity: .9; cursor: grabbing; border-color: var(--blg-kek);
  box-shadow: 0 8px 22px rgba(16,24,32,.22); }
.drag-ph { opacity: 0; flex: 0 0 auto; }
.dropzone { min-height: 44px; border: 1.5px dashed var(--blg-vonal-int); border-radius: 7px;
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; color: var(--blg-szurke); }
.dropzone.over { border-color: var(--blg-kek); background: #F4F8FE; }

/* Folyamatban lévő kitöltések jelölései */
.blg-pont { width: 9px; height: 9px; border-radius: 50%; background: var(--blg-kek); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(45,104,196,.55); animation: blgElo 1.8s infinite; display: inline-block; }
@keyframes blgElo {
  0% { box-shadow: 0 0 0 0 rgba(45,104,196,.55); }
  70% { box-shadow: 0 0 0 9px rgba(45,104,196,0); }
  100% { box-shadow: 0 0 0 0 rgba(45,104,196,0); }
}
.blg-cimke { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.blg-cimke-elo { background: #DEEAFB; color: #1E4780; }
.blg-cimke-lejart { background: #FAE7CB; color: #8A5A12; }
.blg-cimke-figy { background: #FBE0DE; color: #A02B22; cursor: help; }
.blg-cimke-ai { background: #E6E3FB; color: #4B3FA6; cursor: help; }
.blg-cimke-aihiba { background: #FAE7CB; color: #8A5A12; cursor: help; }
.blg-hatra { font-variant-numeric: tabular-nums; }

/* Középre igazított emblémánál a BETA „kilóg" jobbra (nem számít bele a
   szélességbe), így maga a Bluegrade felirat kerül pontosan középre. */
.blg-brand-kozep .blg-nev { position: relative; }
.blg-brand-kozep .blg-beta { position: absolute; left: 100%; top: 0; }

/* Mobil fejléc: a jel, alatta a felirat + alcím, alatta a menü — mind középre.
   A soron belüli (inline) stílusokat kell felülírni, ezért !important. */
@media (max-width: 760px) {
  .blg-fejlec { flex-direction: column !important; justify-content: center !important; text-align: center; gap: 16px !important; }
  .blg-fejlec .blg-brand { flex-direction: column !important; align-items: center !important; gap: 10px !important; }
  .blg-fejlec .blg-brand-txt { flex-direction: column !important; align-items: center !important; gap: 5px !important; }
  .blg-fejlec .blg-nev { position: relative; }
  .blg-fejlec .blg-beta { position: absolute; left: 100%; top: 0; }
  .blg-fmenu { justify-content: center !important; flex-wrap: wrap; gap: 26px !important; }
}

/* ---- Tanári listák mobilon ----
   Álló telefonon a soros (táblázatos) elrendezés összenyomódik, ezért a sorok
   kártyává alakulnak: a főcím külön sorban, alatta a mezők tördelve, mindegyik
   a saját feliratával (data-cimke), a műveleti gombok pedig jobbra zárva. */
@media (max-width: 760px) {
  .tfej { display: none !important; }

  .row-card {
    flex-wrap: wrap !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 12px 14px !important;
    gap: 8px 14px !important;
  }
  .row-card > * { width: auto !important; flex: 0 0 auto !important; }
  .row-card > .rc-fo { flex: 1 1 100% !important; min-width: 0; white-space: normal !important; }
  .row-card .iacts { margin-left: auto !important; }
  .row-card .rc-ures { display: none !important; }
  .row-card [data-cimke]::before {
    content: attr(data-cimke) ": ";
    color: var(--blg-szurke); font-size: 11.5px; font-weight: 400;
  }

  /* rögzített szélességű oldalpanelek (kérdésszerkesztő, megosztás) */
  .blg-panel { width: 100% !important; flex: 1 1 100% !important; }
}

/* Mobilon a bal menüsáv fejlécként ül a tartalom fölött:
   embléma középen, alatta a menüpontok egy sorban, legalul a kijelentkezés. */
@media (max-width: 900px) {
  .tshell { flex-direction: column; }
  .tside { width: 100%; height: auto; position: static; flex-direction: column;
    align-items: stretch; gap: 10px; padding: 16px 16px 14px; }
  .tside > a { margin-bottom: 0 !important; }
  .tside nav { flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 8px !important; }
  .tside nav .mi { flex: 1 1 110px; padding: 0 12px; }
  .tside > div[style*="flex-grow"] { display: none; }
  .tmain { padding: 22px 16px; }
}


/* ---- ikonos műveletgombok ---- */
.ibtn {
  width: 34px; height: 34px; padding: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--blg-vonal-int); border-radius: 7px;
  background: #fff; color: var(--blg-kek); cursor: pointer;
  transition: background .12s, border-color .12s, transform .12s;
}
.ibtn:hover { border-color: var(--blg-kek); background: #F4F8FE; color: var(--blg-kek); transform: translateY(-1px); }
.ibtn:active { transform: none; }
.ibtn-del { color: var(--blg-piros); }
.ibtn-del:hover { border-color: var(--blg-piros); background: #FBF3F3; color: var(--blg-piros); }
.ibtn-sm { width: 30px; height: 30px; border-radius: 6px; }
.iacts { display: flex; gap: 8px; align-items: center; }

/* ---- megerősítő modal ---- */
.blgm-backdrop {
  position: fixed; inset: 0; z-index: 200; padding: 20px;
  background: rgba(16,24,32,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .18s ease;
}
.blgm-backdrop.show { opacity: 1; }
.blgm {
  width: 440px; max-width: 100%; background: #fff; border-radius: 12px;
  padding: 30px 32px 26px; box-shadow: 0 24px 70px rgba(16,24,32,.28); text-align: center;
  transform: translateY(16px) scale(.96); opacity: .6;
  transition: transform .24s cubic-bezier(.2,.9,.3,1.15), opacity .2s ease;
}
.blgm-backdrop.show .blgm { transform: none; opacity: 1; }
.blgm-ikon {
  width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.blgm-ikon svg { animation: blgmPop .35s cubic-bezier(.2,.9,.3,1.4) both .08s; }
@keyframes blgmPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.blgm h3 { margin: 0 0 8px; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; color: var(--blg-sotet); }
.blgm p { margin: 0 0 22px; font-size: 14.5px; line-height: 1.55; color: var(--blg-szurke); }
.blgm-btns { display: flex; gap: 10px; justify-content: center; }
.blgm-btns .btn { min-width: 120px; }