:root{
  --hatter:#f6f7f8; --lap:#fff; --szoveg:#1a1c1e; --halvany:#6b7075;
  --keret:#dfe3e6; --kiemelt:#0b62d0; --kiemelt-halvany:#e8f1fd;
  --ok:#1a7f37; --figyelem:#9a6700; --hiba:#c1121f;
  --sugar:10px; --arnyek:0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
}
@media (prefers-color-scheme: dark){
  :root{ --hatter:#16181a; --lap:#1e2124; --szoveg:#e6e8ea; --halvany:#9aa0a6;
    --keret:#33383d; --kiemelt:#5aa2ff; --kiemelt-halvany:#1b2b45;
    --ok:#4ac26b; --figyelem:#d9a441; --hiba:#ff6b6b; --arnyek:none; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--hatter);color:var(--szoveg);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:1500px;margin:0 auto;padding:24px 20px 60px}
h1{font-size:26px;margin:0 0 4px}
h2{font-size:19px;margin:0 0 8px}
.alcim{color:var(--halvany);margin:0 0 24px}
.szekcio{margin-top:36px;padding-top:20px;border-top:1px solid var(--keret)}
.halvany{color:var(--halvany)}
a{color:var(--kiemelt)}

/* fejléc */
.fejlec{display:flex;align-items:center;gap:22px;padding:0 20px;height:54px;
  background:var(--lap);border-bottom:1px solid var(--keret);position:sticky;top:0;z-index:20}
.logo{font-weight:650;text-decoration:none;color:var(--szoveg)}
.fejlec nav{display:flex;gap:18px;margin-left:auto}
.fejlec nav a{text-decoration:none;color:var(--halvany);padding:4px 0;
  border-bottom:2px solid transparent}
.fejlec nav a:hover{color:var(--szoveg)}
.fejlec nav a.aktiv{color:var(--szoveg);border-bottom-color:var(--kiemelt)}

/* belépés */
.belepes{max-width:340px;margin:12vh auto;background:var(--lap);padding:28px;
  border:1px solid var(--keret);border-radius:var(--sugar);box-shadow:var(--arnyek)}
.belepes h1{text-align:center;margin-bottom:20px}
.belepes label{display:block;margin-bottom:6px;color:var(--halvany);font-size:13px}
.belepes input{width:100%;margin-bottom:14px}
.belepes button{width:100%}

/* kártyák */
.kartyak{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.kartya{display:block;background:var(--lap);border:1px solid var(--keret);
  border-radius:var(--sugar);padding:18px;text-decoration:none;color:inherit;
  box-shadow:var(--arnyek);transition:border-color .15s,transform .15s}
a.kartya:hover{border-color:var(--kiemelt);transform:translateY(-2px)}
.kartya p{color:var(--halvany);font-size:14px;margin:6px 0 12px}
.kartya.inaktiv{opacity:.55}
.cimke{font-size:12px;padding:3px 9px;border-radius:99px;background:var(--keret);color:var(--halvany)}
.cimke.kesz{background:var(--kiemelt-halvany);color:var(--kiemelt)}

/* űrlapelemek */
input,select,button{font:inherit;color:inherit}
input[type=number],input[type=text],input[type=password],input[type=search],select{
  background:var(--lap);border:1px solid var(--keret);border-radius:7px;
  padding:7px 9px;width:100px}
/* A legördülőknek a tartalom szerint kell szélesedniük: az "Alumínium
   (AlMg3/AlMg4,5)" fix 100 px-en levágódott és olvashatatlan volt. Fix
   min-width nincs: a rövid listák (gáz: O₂, N₂) így nem foglalnak helyet a
   mértékegység elől, hosszúaknál pedig a max-width tartja a panelen belül. */
select{width:auto;max-width:100%}
input[type=file]{width:100%;max-width:100%;font-size:13px}
input[type=search]{width:100%}
input:focus{outline:2px solid var(--kiemelt);outline-offset:-1px;border-color:transparent}
button{background:var(--lap);border:1px solid var(--keret);border-radius:7px;
  padding:8px 14px;cursor:pointer}
button:hover{border-color:var(--kiemelt)}
button.elsodleges{background:var(--kiemelt);border-color:var(--kiemelt);color:#fff;font-weight:550}
button.elsodleges:hover{filter:brightness(1.08)}
button.kicsi{padding:6px 10px;font-size:13px}
button:disabled{opacity:.5;cursor:not-allowed}
fieldset{border:1px solid var(--keret);border-radius:var(--sugar);padding:12px 14px;
  margin:0 0 14px;background:var(--lap)}
legend{font-weight:600;font-size:13px;padding:0 6px;color:var(--halvany)}
label{font-size:14px}
.sor{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.sor label{display:flex;align-items:center;gap:6px}
.mm{color:var(--halvany);font-size:13px}
.radio{display:flex;align-items:center;gap:7px;margin:3px 0;cursor:pointer}
.radio input{width:auto}
.sugo{font-size:12.5px;color:var(--halvany);margin:8px 0 0}
.gombsor{display:flex;gap:10px;position:sticky;bottom:0;background:var(--hatter);
  padding:12px 0 4px}
.gombsor button{flex:1}
fieldset[disabled],fieldset.tiltott{opacity:.45;pointer-events:none}

/* panelgen elrendezés */
.panelgen{display:grid;grid-template-columns:390px 1fr;gap:22px;align-items:start}
@media (max-width:1000px){.panelgen{grid-template-columns:1fr}}
/* NINCS saját görgetés: a max-height nem vette figyelembe, hol kezdődik a
   panel, ezért a sticky gombsor a képernyő alá került. Helyette az egész lap
   görget, az előnézet pedig sticky – így a gomb mindig elérhető. */
.vezerlo{padding-right:4px}
.elonezet{background:var(--lap);border:1px solid var(--keret);border-radius:var(--sugar);
  padding:14px;box-shadow:var(--arnyek);position:sticky;top:78px}
.elonezet-fejlec{display:flex;align-items:center;gap:10px;margin-bottom:10px;
  font-size:13px;min-height:22px}
.rajz{display:flex;justify-content:center;min-height:380px;align-items:center}
.rajz svg{max-height:min(72vh,900px);max-width:100%}
.rajz[hidden]{display:none}

/* nézetváltó fülek az előnézet fölött (darab / tábla) */
.fulek{display:flex;gap:4px;margin-bottom:10px;border-bottom:1px solid var(--keret)}
.fulek[hidden]{display:none}
.ful{background:none;border:none;border-bottom:2px solid transparent;
  border-radius:0;padding:6px 12px;font-size:13.5px;color:var(--halvany)}
.ful:hover{color:inherit}
.ful.aktiv{color:var(--kiemelt);border-bottom-color:var(--kiemelt);font-weight:600}

/* mintaválasztó */
.minta-racs{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
  gap:6px;max-height:230px;overflow-y:auto;margin-top:8px;padding:2px}
.minta-csempe{padding:3px;display:flex;flex-direction:column;align-items:center;gap:2px;
  border-radius:7px;background:var(--lap)}
.minta-csempe img{width:100%;height:auto;border-radius:4px;background:#fff}
.minta-csempe span{font-size:11px;color:var(--halvany)}
.minta-csempe.kivalasztott{border-color:var(--kiemelt);
  box-shadow:0 0 0 2px var(--kiemelt-halvany)}
.minta-csempe.rejtett{display:none}

/* riport */
#riport{margin-top:12px;font-size:13.5px}
.megj{padding:8px 11px;border-radius:7px;margin-top:6px;border-left:3px solid}
.megj.ok{background:color-mix(in srgb,var(--ok) 10%,transparent);border-color:var(--ok)}
.megj.figyelmeztetés{background:color-mix(in srgb,var(--figyelem) 12%,transparent);
  border-color:var(--figyelem)}
.megj.hiba{background:color-mix(in srgb,var(--hiba) 12%,transparent);border-color:var(--hiba)}
/* kézzel felülírt gépparaméter – a gépnél ez az érvényes, tűnjön ki */
.kezi{color:var(--kiemelt)}
.hiba-szoveg{color:var(--hiba)}
.hiba-doboz{background:color-mix(in srgb,var(--hiba) 12%,transparent);
  border:1px solid var(--hiba);color:var(--hiba);padding:9px 12px;border-radius:7px;
  font-size:14px;margin:0 0 14px}
.hiba-sor{color:var(--hiba);font-size:12.5px;margin-top:3px}

/* táblázat */
.tabla{width:100%;border-collapse:collapse;background:var(--lap);
  border:1px solid var(--keret);border-radius:var(--sugar);overflow:hidden;font-size:14px}
.tabla th{text-align:left;padding:9px 12px;background:color-mix(in srgb,var(--keret) 35%,transparent);
  font-size:12.5px;color:var(--halvany);font-weight:600}
.tabla td{padding:9px 12px;border-top:1px solid var(--keret);vertical-align:top}
.allapot{font-size:12px;padding:2px 8px;border-radius:99px;background:var(--keret)}
.allapot.kesz{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.allapot.fut{background:var(--kiemelt-halvany);color:var(--kiemelt)}
.allapot.hiba{background:color-mix(in srgb,var(--hiba) 15%,transparent);color:var(--hiba)}

/* köteg */
.koteg{background:var(--lap);border:1px solid var(--keret);border-radius:var(--sugar);
  padding:18px;box-shadow:var(--arnyek);max-width:820px}
.koteg pre{background:var(--hatter);padding:11px;border-radius:7px;overflow-x:auto;
  font-size:12.5px;margin:10px 0 6px}
.koteg details{margin:12px 0}
.koteg summary{cursor:pointer;color:var(--kiemelt);font-size:14px}
.csik{height:7px;background:var(--keret);border-radius:99px;overflow:hidden;margin:10px 0}
.csik div{height:100%;background:var(--kiemelt);transition:width .3s}

/* pörgő */
.pörgő{width:14px;height:14px;border:2px solid var(--keret);border-top-color:var(--kiemelt);
  border-radius:50%;animation:forog .7s linear infinite;display:inline-block}
@keyframes forog{to{transform:rotate(360deg)}}
.rejtett{display:none!important}