/* eMIK — komponens-CSS referencia (a prototípusból). A .emik gyökérosztály helyett élesben body. */

body{margin:0}
*,*::before,*::after{box-sizing:border-box}
.emik{font-family:var(--betu-szoveg);color:var(--szin-szoveg);background:var(--szin-hatter);font-size:1rem;line-height:1.5;overflow:hidden;position:relative}
.emik h1,.emik h2,.emik h3,.emik h4{font-family:var(--betu-cim);margin:0;line-height:1.2;letter-spacing:-.01em}
.emik p{margin:0}
.szam{font-variant-numeric:tabular-nums}
a{color:var(--szin-akcens)}a:hover{color:var(--szin-elsodleges)}
.ik{width:1.25rem;height:1.25rem;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ik--kicsi{width:1rem;height:1rem}.ik--nagy{width:1.5rem;height:1.5rem}
:focus-visible{outline:.125rem solid var(--szin-fokusz);outline-offset:.125rem}
.gomb{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;padding:0 1rem;border-radius:var(--radius-kozepes);border:1px solid transparent;font:600 .9375rem/1 var(--betu-szoveg);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--atmenet-gyors),border-color var(--atmenet-gyors),color var(--atmenet-gyors)}
.gomb--elsodleges{background:var(--szin-elsodleges);color:var(--szin-elsodleges-szoveg)}
.gomb--elsodleges:hover{background:var(--szin-elsodleges-sotet);color:var(--szin-elsodleges-szoveg)}
.gomb--korvonalas{background:var(--szin-felulet);color:var(--szin-szoveg);border-color:var(--szin-keret-mezo)}
.gomb--korvonalas:hover{background:var(--szin-felulet-sullyedt);color:var(--szin-szoveg)}
.gomb--veszely{background:var(--szin-hiba);color:var(--szin-hiba-szoveg)}
.gomb--halvany{background:transparent;color:var(--szin-akcens)}
.gomb--halvany:hover{background:var(--szin-akcens-halvany)}
.gomb--kicsi{min-height:2rem;padding:0 .75rem;font-size:.8125rem;gap:.375rem}
.gomb--ikon{padding:0;width:2.75rem}.gomb--kicsi.gomb--ikon{width:2rem}
.gomb[disabled]{opacity:.45;cursor:not-allowed}
.gomb--nav{background:transparent;color:var(--szin-nav-szoveg);border-color:rgba(255,255,255,.22)}
.gomb--nav:hover{background:var(--szin-nav-aktiv);color:var(--szin-nav-szoveg)}
.cimke{display:block;font-weight:600;font-size:.875rem;margin-bottom:.375rem;color:var(--szin-szoveg)}
.cimke small{font-weight:400;color:var(--szin-szoveg-halvany)}
.sugo{font-size:.8125rem;color:var(--szin-szoveg-halvany);margin-top:.375rem}
.hibauzenet{display:flex;align-items:center;gap:.375rem;font-size:.8125rem;color:var(--szin-hiba);margin-top:.375rem;font-weight:600}
.mezo{display:block;width:100%;min-height:2.75rem;padding:.5rem .75rem;background:var(--szin-felulet);color:var(--szin-szoveg);border:1px solid var(--szin-keret-mezo);border-radius:var(--radius-kozepes);font:400 1rem/1.4 var(--betu-szoveg);transition:border-color var(--atmenet-gyors)}
.mezo:focus,.mezo--fokusz{outline:.125rem solid var(--szin-fokusz);outline-offset:0;border-color:var(--szin-fokusz)}
.mezo--hiba{border-color:var(--szin-hiba);box-shadow:inset 0 0 0 1px var(--szin-hiba)}
.mezo[disabled],.mezo[readonly]{background:var(--szin-felulet-sullyedt);color:var(--szin-szoveg-halvany)}
.mezo--kicsi{min-height:2.25rem;padding:.375rem .625rem;font-size:.875rem}
textarea.mezo{resize:vertical;min-height:6rem}
select.mezo{appearance:none;padding-right:2.25rem;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 1.125rem) 50%,calc(100% - .8125rem) 50%;background-size:.3125rem .3125rem;background-repeat:no-repeat}
.jelolo{display:flex;align-items:flex-start;gap:.625rem;font-size:.9375rem;cursor:pointer;min-height:2.75rem;padding:.5rem 0}
.jelolo input{width:1.25rem;height:1.25rem;margin:.125rem 0 0;accent-color:var(--szin-akcens);flex-shrink:0}
.kapcsolo{position:relative;display:inline-flex;align-items:center;gap:.75rem;cursor:pointer;min-height:2.75rem;font-size:.9375rem}
.kapcsolo input{appearance:none;margin:0;width:2.75rem;height:1.5rem;border-radius:var(--radius-kerek);background:var(--szin-keret-mezo);position:relative;cursor:pointer;transition:background var(--atmenet-normal);flex-shrink:0}
.kapcsolo input::after{content:"";position:absolute;top:.1875rem;left:.1875rem;width:1.125rem;height:1.125rem;border-radius:50%;background:#fff;transition:transform var(--atmenet-normal)}
.kapcsolo input:checked{background:var(--szin-akcens)}
.kapcsolo input:checked::after{transform:translateX(1.25rem)}
.badge{display:inline-flex;align-items:center;gap:.3125rem;padding:.125rem .5rem .125rem .4375rem;border-radius:var(--radius-kerek);font:600 .75rem/1.5 var(--betu-szoveg);white-space:nowrap}
.badge .ik{width:.875rem;height:.875rem}
.b-piszkozat{color:var(--allapot-piszkozat);background:var(--allapot-piszkozat-hatter)}
.b-szerkesztes{color:var(--allapot-szerkesztes);background:var(--allapot-szerkesztes-hatter)}
.b-bekuldve{color:var(--allapot-bekuldve);background:var(--allapot-bekuldve-hatter)}
.b-jovahagyott{color:var(--allapot-jovahagyott);background:var(--allapot-jovahagyott-hatter)}
.b-lezart{color:var(--allapot-lezart);background:var(--allapot-lezart-hatter)}
.b-siker{color:var(--szin-siker);background:var(--szin-siker-hatter)}
.b-figyelem{color:var(--szin-figyelem);background:var(--szin-figyelem-hatter)}
.b-hiba{color:var(--szin-hiba);background:var(--szin-hiba-hatter)}
.b-info{color:var(--szin-info);background:var(--szin-info-hatter)}
.kod{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:1.5rem;padding:0 .375rem;border-radius:var(--radius-kicsi);font:700 .75rem/1 var(--betu-cim);letter-spacing:.02em}
.kartya{background:var(--szin-felulet);border:1px solid var(--szin-keret);border-radius:var(--radius-nagy);box-shadow:var(--arnyek-kicsi)}
.ertesito{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;border-radius:var(--radius-kozepes);border:1px solid;font-size:.9375rem}
.ertesito strong{font-weight:700}
.e-siker{color:var(--szin-siker);background:var(--szin-siker-hatter);border-color:currentColor}
.e-figyelem{color:var(--szin-figyelem);background:var(--szin-figyelem-hatter);border-color:currentColor}
.e-hiba{color:var(--szin-hiba);background:var(--szin-hiba-hatter);border-color:currentColor}
.e-info{color:var(--szin-info);background:var(--szin-info-hatter);border-color:currentColor}
.ertesito p{color:var(--szin-szoveg)}
.tabla{width:100%;border-collapse:collapse;font-size:.9375rem}
.tabla th{text-align:left;font:600 .75rem/1.3 var(--betu-szoveg);letter-spacing:.03em;text-transform:uppercase;color:var(--szin-szoveg-halvany);background:var(--szin-felulet-sullyedt);padding:.625rem .75rem;border-bottom:1px solid var(--szin-keret);white-space:nowrap}
.tabla td{padding:.625rem .75rem;border-bottom:1px solid var(--szin-keret);vertical-align:middle}
.tabla tbody tr:hover td,.tabla tr.sor-hover td{background:var(--szin-felulet-sullyedt)}
.tabla tr[aria-selected="true"] td{background:var(--szin-info-hatter)}
.haladas{height:.5rem;border-radius:var(--radius-kerek);background:var(--szin-felulet-sullyedt);border:1px solid var(--szin-keret);overflow:hidden}
.haladas>span{display:block;height:100%;background:var(--szin-akcens);border-radius:var(--radius-kerek)}
.haladas--kesz>span{background:var(--szin-siker)}
.lapful{display:flex;gap:.25rem;border-bottom:1px solid var(--szin-keret)}
.lapful button{background:none;border:0;border-bottom:.1875rem solid transparent;padding:.625rem .875rem;font:600 .9375rem var(--betu-szoveg);color:var(--szin-szoveg-halvany);cursor:pointer;min-height:2.75rem;margin-bottom:-1px}
.lapful button[aria-selected="true"]{color:var(--szin-szoveg);border-bottom-color:var(--szin-akcens)}
.morzsa{display:flex;align-items:center;gap:.375rem;font-size:.875rem;color:var(--szin-szoveg-halvany);flex-wrap:wrap}
.morzsa a{color:var(--szin-szoveg-halvany);text-decoration:none}.morzsa a:hover{color:var(--szin-akcens);text-decoration:underline}
.morzsa [aria-current]{color:var(--szin-szoveg);font-weight:600}
.nav-elem{display:flex;align-items:center;gap:.75rem;min-height:2.5rem;padding:0 .75rem;border-radius:var(--radius-kozepes);color:var(--szin-szoveg-halvany);text-decoration:none;font-weight:600;font-size:.9375rem}
.nav-elem:hover{background:var(--szin-felulet-sullyedt);color:var(--szin-szoveg)}
.nav-elem[aria-current="page"]{background:var(--szin-akcens-halvany);color:var(--szin-szoveg)}
.nav-elem[aria-current="page"] .ik{color:var(--szin-akcens)}
.nav-szam{margin-left:auto;font-size:.75rem;font-weight:700;padding:0 .4375rem;border-radius:var(--radius-kerek);background:var(--szin-figyelem-hatter);color:var(--szin-figyelem)}
.fejlec-szoveg{font-family:var(--betu-cim)}
.logo-hely{display:flex;align-items:center;justify-content:center;border:1px dashed rgba(255,255,255,.55);border-radius:var(--radius-kicsi);color:#fff;font:600 .6875rem/1.2 var(--betu-szoveg);letter-spacing:.04em;text-align:center}
.kpi-szam{font:700 2rem/1.1 var(--betu-cim);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pottyok{background-image:radial-gradient(var(--szin-keret) 1px,transparent 1px);background-size:1rem 1rem}
.toltes{width:1.25rem;height:1.25rem;border-radius:50%;border:.1875rem solid var(--szin-keret);border-top-color:var(--szin-akcens);animation:forog .8s linear infinite}
@keyframes forog{to{transform:rotate(360deg)}}
.csontvaz{background:linear-gradient(90deg,var(--szin-felulet-sullyedt) 0%,var(--szin-keret) 50%,var(--szin-felulet-sullyedt) 100%);background-size:200% 100%;animation:csillan 1.4s ease-in-out infinite;border-radius:var(--radius-kicsi)}
@keyframes csillan{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.toltes,.csontvaz{animation:none}}
.szakasz-cim{font:700 .75rem/1.2 var(--betu-szoveg);letter-spacing:.08em;text-transform:uppercase;color:var(--szin-szoveg-halvany)}

/* Programszerkesztő */

.racs-test{position:relative;background-color:var(--szin-felulet);
background-image:repeating-linear-gradient(to bottom,var(--szin-keret) 0,var(--szin-keret) 1px,transparent 1px,transparent 4.5rem),
repeating-linear-gradient(to bottom,transparent 0,transparent 1.5rem,color-mix(in srgb,var(--szin-keret) 55%,transparent) 1.5rem,color-mix(in srgb,var(--szin-keret) 55%,transparent) calc(1.5rem + 1px));touch-action:none}
.blokk{position:absolute;border-radius:var(--radius-kozepes);transition:box-shadow var(--atmenet-gyors)}
.blokk-test{display:flex;flex-direction:column;align-items:stretch;gap:.125rem;width:100%;height:100%;padding:.3125rem .625rem .5rem;text-align:left;border-radius:var(--radius-kozepes);border:1px solid var(--szekcio-3);background:var(--szekcio-3-hatter);color:var(--szekcio-3-szoveg);font:inherit;cursor:grab;overflow:hidden;box-shadow:var(--arnyek-kicsi)}
.blokk-test:active{cursor:grabbing}
.blokk--valasztott .blokk-test{outline:.125rem solid var(--szin-fokusz);outline-offset:.0625rem;box-shadow:var(--arnyek-kozepes)}
.blokk--hiba .blokk-test{border-color:var(--szin-hiba);border-style:dashed;border-width:1px;background-image:repeating-linear-gradient(135deg,var(--szin-atfedes) 0,var(--szin-atfedes) .375rem,transparent .375rem,transparent .75rem)}
.blokk--huzas{z-index:5}
.blokk--huzas .blokk-test{box-shadow:var(--arnyek-nagy);cursor:grabbing;transform:translateX(.25rem)}
.blokk--szellem{position:absolute;border:1px dashed var(--szin-keret-mezo);border-radius:var(--radius-kozepes);background:transparent;pointer-events:none}
.blokk-ido{font:700 .75rem/1.2 var(--betu-szoveg);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:.375rem}
.blokk-cim{font:600 .875rem/1.25 var(--betu-szoveg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blokk-eloado{font-size:.8125rem;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fogo{position:absolute;left:25%;right:25%;bottom:-.25rem;height:.75rem;border:0;background:transparent;cursor:ns-resize;display:flex;align-items:center;justify-content:center;padding:0}
.fogo::after{content:"";width:2rem;height:.25rem;border-radius:var(--radius-kerek);background:var(--szekcio-3);opacity:.7}
.fogo:hover::after{opacity:1}
.ido-buborek{position:absolute;right:.5rem;top:-1.875rem;padding:.1875rem .5rem;border-radius:var(--radius-kicsi);background:var(--szin-elsodleges);color:var(--szin-elsodleges-szoveg);font:700 .75rem/1.4 var(--betu-szoveg);font-variant-numeric:tabular-nums;box-shadow:var(--arnyek-kozepes);white-space:nowrap}
.res-sav{position:absolute;left:.5rem;right:.5rem;border:1px dashed var(--szin-figyelem);border-radius:var(--radius-kozepes);background:var(--szin-figyelem-hatter);color:var(--szin-figyelem);display:flex;align-items:center;justify-content:center;gap:.375rem;font:600 .75rem var(--betu-szoveg);pointer-events:none}
.kivul-sav{position:absolute;left:0;right:0;background-image:repeating-linear-gradient(135deg,var(--szin-atfedes) 0,var(--szin-atfedes) .375rem,transparent .375rem,transparent .75rem);border-top:.125rem solid var(--szin-hiba);pointer-events:none}
.kivul-cimke{position:absolute;right:.5rem;top:.25rem;display:flex;align-items:center;gap:.25rem;color:var(--szin-hiba);font:700 .6875rem var(--betu-szoveg);background:var(--szin-felulet);padding:0 .375rem;border-radius:var(--radius-kicsi)}
.jel{display:inline-flex;align-items:center;gap:.25rem;font:700 .6875rem/1.4 var(--betu-szoveg);padding:0 .375rem;border-radius:var(--radius-kicsi);white-space:nowrap}
.jel .ik{width:.75rem;height:.75rem}
.jel--hiba{background:var(--szin-hiba);color:var(--szin-hiba-szoveg)}
.jel--figy{background:var(--szin-figyelem-hatter);color:var(--szin-figyelem);border:1px solid var(--szin-figyelem)}
.figy-elem{display:flex;align-items:center;gap:.5rem;padding:.375rem .625rem;border-radius:var(--radius-kozepes);border:1px solid var(--szin-keret);background:var(--szin-felulet);font:600 .8125rem var(--betu-szoveg);color:var(--szin-szoveg);cursor:pointer;min-height:2rem}
.figy-elem:hover{border-color:var(--szin-keret-mezo)}
.toast{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:var(--radius-kozepes);background:var(--szin-elsodleges);color:var(--szin-elsodleges-szoveg);box-shadow:var(--arnyek-nagy);font-weight:600;font-size:.9375rem;z-index:20}