/* WebRendbe Pajzs: világos alap, a WebRendbe mostani színeivel. */
:root {
	--hatter: #F4F6F3;
	--felulet: #FFFFFF;
	--szoveg: #1A1B1B;
	--halvany: #44565C;
	--vonal: #DCE3E0;
	--gomb: #EEF06A;
	--gomb-hover: #F5F79A;
	--gomb-szoveg: #1A1B1B;
	--kritikus: #B42318;
	--magas: #C2410C;
	--kozepes: #A16207;
	--alacsony: #475467;
	--jo: #067647;
	--kerek: 16px;
	--cim: 'Bricolage Grotesque', Figtree, Arial, sans-serif;
	--betu: Figtree, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--hatter); color: var(--szoveg); font: 400 18px/1.5 var(--betu); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
[hidden] { display: none !important; }
a { color: inherit; }
svg.ik, .ered-gombok svg, .gomb svg, .elonyok svg, .mezo-ikon, .kartya-cim svg, .logo-jel svg, .kapu-ikon svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rejtett, .csali { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; left: -9999px; }
h1, h2, h3 { font-family: var(--cim); font-weight: 800; line-height: 1.1; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }

/* Fejléc */
.fej { background: var(--felulet); border-bottom: 1px solid var(--vonal); }
.fej-belso { max-width: 1200px; margin: 0 auto; padding: 16px 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 20px var(--cim); }
.logo b { font-weight: 800; }
.logo-jel { width: 36px; height: 36px; border-radius: 10px; background: var(--gomb); display: grid; place-items: center; }
.logo-jel svg { width: 20px; height: 20px; }

/* Közös elemek */
.felirat { margin: 0 0 16px; font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--halvany); }
.kartya { background: var(--felulet); border: 1px solid var(--vonal); border-radius: var(--kerek); padding: 24px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.gomb { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 14px 24px; border: 0; border-radius: var(--kerek); background: var(--gomb); color: var(--gomb-szoveg); font: 800 19px var(--betu); text-decoration: none; cursor: pointer; transition: background .15s; }
.gomb:hover { background: var(--gomb-hover); }
.gomb:focus-visible, .gomb2:focus-visible, .ful:focus-visible, .tal-fej:focus-visible, input:focus-visible { outline: 3px solid #12303A; outline-offset: 2px; }
.gomb:disabled { opacity: .6; cursor: wait; }
.gomb svg { width: 22px; height: 22px; }
.gomb2 { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--vonal); border-radius: var(--kerek); background: var(--felulet); color: var(--szoveg); font: 700 16px var(--betu); cursor: pointer; }
.gomb2:hover { border-color: var(--szoveg); }
.gomb2 svg { width: 18px; height: 18px; }
.apro { font-size: 16px; color: var(--halvany); margin: 16px 0 0; }
.hiba { margin: 12px 0 0; padding: 12px 16px; border-radius: var(--kerek); background: #FEF3F2; color: var(--kritikus); font-weight: 600; font-size: 16px; }
.siker { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--kerek); background: #ECFDF3; color: var(--jo); font-weight: 600; font-size: 16px; }
.allapot { margin: 0 0 8px; font-size: 16px; color: var(--halvany); min-height: 0; }
.allapot:empty { display: none; }

/* Kezdőképernyő */
.kezdo { padding: 56px 0 72px; }
.kezdo-racs { display: grid; gap: 48px; align-items: center; }
.kezdo h1 { font-size: clamp(34px, 7vw, 60px); margin-bottom: 24px; }
.kezdo h1 span { display: block; margin-bottom: 8px; }
.kezdo h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--gomb) 62%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lead { font-size: 20px; color: var(--halvany); margin: 0 0 32px; max-width: 34em; }
.fulek { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--kerek); background: #E3EAE7; margin-bottom: 16px; }
.ful { border: 0; background: transparent; padding: 10px 18px; border-radius: 12px; font: 700 16px var(--betu); color: var(--halvany); cursor: pointer; min-height: 44px; }
.ful.aktiv { background: var(--felulet); color: var(--szoveg); box-shadow: 0 1px 3px rgba(16,24,40,.12); }
.urlap { max-width: 560px; }
.mezo-sor { position: relative; margin-bottom: 12px; }
.mezo-ikon { position: absolute; left: 18px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--halvany); }
.urlap input, .kapu input[type=email] { width: 100%; min-height: 56px; padding: 14px 18px; border: 1.5px solid var(--vonal); border-radius: var(--kerek); background: var(--felulet); font: 500 18px var(--betu); color: var(--szoveg); }
.urlap input { padding-left: 52px; }
.urlap input:focus, .kapu input:focus { border-color: var(--szoveg); outline: none; box-shadow: 0 0 0 3px rgba(238,240,106,.6); }
.elonyok { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 16px 0 0; font-size: 16px; font-weight: 600; }
.elonyok li { display: inline-flex; align-items: center; gap: 6px; }
.elonyok svg { width: 18px; height: 18px; color: var(--jo); stroke-width: 2.5; }

.elonezet .kartya { padding: 28px; }
.kartya-cim { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font: 800 20px var(--cim); }
.kartya-cim svg { width: 24px; height: 24px; }
.csempek { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.csempe { border-radius: 12px; padding: 14px 16px; background: var(--hatter); border-top: 4px solid var(--alacsony); }
.csempe-felirat { display: block; font-size: 16px; font-weight: 700; color: var(--halvany); }
.csempe-szam { display: block; font: 800 34px/1.1 var(--cim); margin-top: 4px; }
.csempe.sev-critical { border-top-color: var(--kritikus); }
.csempe.sev-high { border-top-color: var(--magas); }
.csempe.sev-medium { border-top-color: var(--kozepes); }
.csempe.sev-ok { border-top-color: var(--jo); }
.tenyek { margin-top: 20px; display: grid; gap: 12px; }
.teny { margin: 0; padding: 14px 16px; border: 1px solid var(--vonal); border-radius: 12px; font-size: 16px; color: var(--halvany); }
.teny b { color: var(--szoveg); font: 800 20px var(--cim); }

/* Vizsgálat */
.vizsgal { padding: 56px 0 80px; }
.vizsgal-kartya { max-width: 640px; margin: 0 auto; padding: 32px; }
.vizsgal h2 { font-size: clamp(26px, 6vw, 36px); word-break: break-word; margin-bottom: 24px; }
.sav { height: 12px; border-radius: 999px; background: #E3EAE7; overflow: hidden; }
.sav span { display: block; height: 100%; width: 0; background: var(--szoveg); border-radius: 999px; transition: width .4s ease; }
.sav-felirat { display: flex; justify-content: space-between; margin: 10px 0 24px; font-size: 16px; font-weight: 600; color: var(--halvany); }
.lepesek { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lepesek li { position: relative; padding-left: 32px; font-size: 17px; color: #98A2A0; }
.lepesek li::before { content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C6D0CD; }
.lepesek li.most { color: var(--szoveg); font-weight: 700; }
.lepesek li.most::before { border-color: var(--szoveg); border-right-color: transparent; animation: forog .8s linear infinite; }
.lepesek li.kesz { color: var(--halvany); }
.lepesek li.kesz::before { background: var(--jo); border-color: var(--jo); }
.lepesek li.kesz::after { content: ''; position: absolute; left: 6px; top: 8px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes forog { to { transform: rotate(360deg); } }

/* Eredmény */
.eredmeny { padding: 40px 0 80px; }
.ered-fej { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; }
.ered-fej .felirat { margin-bottom: 8px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.ered-fej h2 { font-size: clamp(28px, 6vw, 44px); word-break: break-word; }
.ered-gombok { display: flex; flex-wrap: wrap; gap: 8px; }
.ered-racs { display: grid; gap: 24px; align-items: start; }
.pont-kartya { display: grid; gap: 24px; border-top: 6px solid var(--alacsony); }
.pont-kartya.kock-high { border-top-color: var(--kritikus); }
.pont-kartya.kock-medium { border-top-color: var(--kozepes); }
.pont-kartya.kock-low { border-top-color: var(--jo); }
.pont-felirat { margin: 0; font-size: 16px; font-weight: 700; color: var(--halvany); }
.pont-szam { margin: 4px 0; font: 800 72px/1 var(--cim); }
.pont-szam span { font-size: 24px; color: var(--halvany); margin-left: 4px; }
.pont-kock { margin: 0; font-weight: 800; font-size: 19px; }
.kock-high .pont-kock { color: var(--kritikus); }
.kock-medium .pont-kock { color: var(--kozepes); }
.kock-low .pont-kock { color: var(--jo); }

.kiemelesek { display: grid; gap: 16px; margin-top: 24px; }
.kiemelesek:empty { display: none; }
.kiem { border-left: 6px solid var(--magas); }
.kiem-fej { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.kiem-fej svg { width: 26px; height: 26px; color: var(--magas); flex: none; }
.kiem h3 { font-size: 24px; }
.kiem p { margin: 0 0 12px; }
.lanc { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.lanc li { display: grid; grid-template-columns: 22px auto 1fr; gap: 10px; align-items: start; font-size: 17px; }
.lanc li svg { width: 22px; height: 22px; margin-top: 2px; }
.lanc li.rossz svg { color: var(--kritikus); }
.lanc li.jo svg { color: var(--jo); }
.lanc b { white-space: nowrap; }
.kiem-zaro { font-weight: 700; }
.kiem-megj { font-size: 16px; color: var(--halvany); }
.nevek, .bizonyitek { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; font-weight: 400; }
.bizonyitek { flex-direction: column; align-items: flex-start; }
.nevek-felirat { font-size: 16px; color: var(--halvany); width: 100%; }
code { font: 600 15px/1.4 ui-monospace, Consolas, monospace; background: #F2F4F7; border: 1px solid #E4E7EC; border-radius: 8px; padding: 2px 8px; word-break: break-all; }

.lista-fej { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin: 40px 0 16px; }
.lista-fej h3 { font-size: 28px; }
.rendben-db { font-size: 16px; font-weight: 700; color: var(--jo); }
.talalatok { display: grid; gap: 10px; }
.tal { background: var(--felulet); border: 1px solid var(--vonal); border-left: 5px solid var(--alacsony); border-radius: var(--kerek); }
.tal.sev-critical { border-left-color: var(--kritikus); }
.tal.sev-high { border-left-color: var(--magas); }
.tal.sev-medium { border-left-color: var(--kozepes); }
.tal.sev-ok { border-left-color: var(--jo); }
.tal-fej { display: grid; grid-template-columns: 22px 1fr auto auto; gap: 12px; align-items: start; padding: 16px 18px; }
.nyithato .tal-fej { cursor: pointer; }
.tal-ik { width: 22px; height: 22px; margin-top: 2px; }
.sev-critical .tal-ik { color: var(--kritikus); }
.sev-high .tal-ik { color: var(--magas); }
.sev-medium .tal-ik { color: var(--kozepes); }
.sev-ok .tal-ik { color: var(--jo); }
.sev-low .tal-ik, .sev-info .tal-ik { color: var(--alacsony); }
.tal-cim { font-weight: 700; font-size: 17px; min-width: 0; }
.cimke { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; background: #F2F4F7; color: var(--alacsony); white-space: nowrap; }
.sev-critical .cimke { background: #FEE4E2; color: var(--kritikus); }
.sev-high .cimke { background: #FFEAD5; color: var(--magas); }
.sev-medium .cimke { background: #FEF0C7; color: var(--kozepes); }
.sev-ok .cimke { background: #DCFAE6; color: var(--jo); }
.tal-nyil { width: 20px; height: 20px; margin-top: 3px; color: var(--halvany); transition: transform .2s; }
.nyitva .tal-nyil { transform: rotate(180deg); }
.tal-test { padding: 0 18px 18px 52px; }
.tal-test p { margin: 0 0 10px; font-size: 17px; color: #344054; }
.tal-h { font-weight: 800; color: var(--szoveg) !important; margin-bottom: 2px !important; }
.tal-kod { display: block; white-space: pre-wrap; margin-top: 4px; }
.zarolt { background: repeating-linear-gradient(135deg, #fff, #fff 10px, #F7F9F8 10px, #F7F9F8 20px); }
.zarolt .tal-cim { color: var(--halvany); font-weight: 600; }
.zarolt-szoveg { color: var(--szoveg); font-weight: 800; }
.zarolt .tal-ik { color: var(--halvany) !important; }

.kapu { margin: 6px 0; text-align: left; border: 2px solid var(--szoveg); }
.kapu-ikon { width: 52px; height: 52px; border-radius: 14px; background: var(--gomb); display: grid; place-items: center; margin-bottom: 16px; }
.kapu-ikon svg { width: 26px; height: 26px; }
.kapu h3 { font-size: 28px; margin-bottom: 8px; }
.kapu > p { margin: 0 0 20px; color: var(--halvany); }
.kapu label[for] { display: block; font-weight: 700; margin-bottom: 6px; font-size: 17px; }
.pipa { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 20px; font-size: 16px; color: var(--halvany); cursor: pointer; }
.pipa input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--szoveg); }

.pont-megj { margin: 12px 0 0; font-size: 16px; color: var(--halvany); max-width: 22em; }
.figyeles { margin-top: 16px; }
.figyeles p { margin: 0; color: var(--halvany); font-size: 17px; }
.cta h3 { font-size: 26px; margin-bottom: 12px; }
.cta p { margin: 0 0 20px; color: var(--halvany); }
.cta .apro { margin: 12px 0 0; text-align: center; }

.lab { border-top: 1px solid var(--vonal); background: var(--felulet); }
.lab p { max-width: 1200px; margin: 0 auto; padding: 24px; font-size: 16px; color: var(--halvany); }

@media (min-width: 900px) {
	main { padding: 0 48px; }
	.fej-belso, .lab p { padding-left: 48px; padding-right: 48px; }
	.kezdo { padding: 96px 0 112px; }
	.kezdo-racs { grid-template-columns: 1.15fr .85fr; gap: 64px; }
	.ered-racs { grid-template-columns: minmax(0, 1fr) 340px; }
	.ered-oldal { position: sticky; top: 24px; }
	.pont-kartya { grid-template-columns: auto 1fr; align-items: center; gap: 40px; }
}
@media (max-width: 599px) {
	body { font-size: 17px; }
	.kezdo { padding-top: 32px; }
	.kezdo .felirat { font-size: 14px; margin-bottom: 12px; }
	.lead { margin-bottom: 24px; }
	.kartya { padding: 20px; }
	.csempe { padding: 12px; }
	.csempe-szam { font-size: 28px; }
	.tal-fej { grid-template-columns: 22px 1fr auto; }
	.tal-fej .cimke { grid-column: 2; grid-row: 2; justify-self: start; }
	.tal-nyil { grid-column: 3; grid-row: 1; }
	.tal-test { padding-left: 18px; }
	.ered-gombok { width: 100%; }
	.ered-gombok .gomb2 { flex: 1 1 auto; justify-content: center; }
	.lanc li { grid-template-columns: 22px 1fr; }
	.lanc li span { grid-column: 2; }
}
/* ===== Admin (csak Magdolnának) ===== */
.adm { max-width: 960px; padding-top: 40px; padding-bottom: 80px; }
.adm-fej { display: flex; justify-content: space-between; align-items: center; }
.adm h1 { font-size: 32px; margin-bottom: 12px; }
.adm h2 { font-size: 26px; margin: 40px 0 16px; }
.adm h3 { font-size: 22px; }
.adm-belep { max-width: 440px; margin: 40px auto; }
.adm-belep label, .adm-urlap label { display: block; font-weight: 700; font-size: 16px; }
.adm-belep input, .adm-urlap input, .adm-link input, .hf-urlap input[type=email], .hf-urlap textarea { width: 100%; min-height: 52px; margin: 6px 0 16px; padding: 12px 16px; border: 1.5px solid var(--vonal); border-radius: var(--kerek); background: var(--felulet); font: 500 17px var(--betu); color: var(--szoveg); }
.adm-belep input:focus, .adm-urlap input:focus, .hf-urlap input:focus, .hf-urlap textarea:focus { border-color: var(--szoveg); outline: none; box-shadow: 0 0 0 3px rgba(238,240,106,.6); }
.adm-bev { margin: 0 0 20px; }
.adm-urlap { display: grid; gap: 0 20px; }
.adm-urlap .gomb { grid-column: 1 / -1; }
.adm-sor { margin-bottom: 12px; }
.adm-sor.friss { border: 2px solid var(--szoveg); }
.adm-sor-fej { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.adm-sor .apro { margin: 4px 0 0; }
.all { font-size: 15px; font-weight: 800; padding: 6px 12px; border-radius: 999px; background: #F2F4F7; color: var(--alacsony); }
.all-nyitva { background: #FEF0C7; color: var(--kozepes); }
.all-kesz { background: #DCFAE6; color: var(--jo); }
.adm-adott { margin: 12px 0 0; font-weight: 600; }
.adm-link { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.adm-link input { flex: 1 1 280px; margin: 0; min-height: 44px; font-size: 15px; }
.adm-link form { margin: 0; }
.adm-torol { color: var(--kritikus); }
.adm-tabla-tok { overflow-x: auto; background: var(--felulet); border: 1px solid var(--vonal); border-radius: var(--kerek); }
.adm-tabla { width: 100%; border-collapse: collapse; font-size: 16px; }
.adm-tabla th, .adm-tabla td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--vonal); white-space: nowrap; }
.adm-tabla th { font-weight: 800; color: var(--halvany); }
@media (min-width: 700px) { .adm-urlap { grid-template-columns: 1fr 1fr; } }

/* ===== Személyes hozzáférés-útmutató ===== */
.hf { max-width: 880px; padding-top: 48px; padding-bottom: 80px; }
.hf-bev h1 { font-size: clamp(32px, 6vw, 52px); margin-bottom: 20px; }
.hf-bev h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--gomb) 62%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hf-fiok { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 16px 20px; border-radius: var(--kerek); background: var(--felulet); border: 2px solid var(--szoveg); font-weight: 700; }
.hf-fiok code { font-size: 18px; padding: 6px 12px; background: var(--gomb); border-color: transparent; }
.hf-bizalom { list-style: none; padding: 0; margin: 24px 0 8px; display: grid; gap: 8px; font-size: 17px; }
.hf-bizalom li { display: flex; gap: 10px; align-items: flex-start; }
.hf-bizalom svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--jo); fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hf-lep { margin-top: 16px; padding: 0; }
.hf-lep summary { list-style: none; display: grid; grid-template-columns: 44px 1fr 24px; gap: 16px; align-items: center; padding: 20px 24px; cursor: pointer; }
.hf-lep summary::-webkit-details-marker { display: none; }
.hf-lep summary b { display: block; font: 800 22px/1.2 var(--cim); }
.hf-lep summary small { display: block; font-size: 16px; color: var(--halvany); margin-top: 4px; }
.hf-szam { width: 44px; height: 44px; border-radius: 50%; background: var(--gomb); display: grid; place-items: center; font: 800 20px var(--cim); }
.hf-nyil { width: 24px; height: 24px; color: var(--halvany); transition: transform .2s; }
.hf-lep[open] .hf-nyil { transform: rotate(180deg); }
.hf-racs { display: grid; gap: 24px; padding: 0 24px; }
.hf-lista { margin: 0; padding-left: 24px; display: grid; gap: 12px; font-size: 17px; }
.hf-lista li::marker { font-weight: 800; }
.hf-megj { padding: 0 24px 24px; margin: 16px 0 0; }
.ablak { margin: 0; align-self: start; }
.ablak-sav { display: flex; gap: 6px; padding: 10px 14px; background: #E3EAE7; border-radius: 12px 12px 0 0; }
.ablak-sav i { width: 10px; height: 10px; border-radius: 50%; background: #C6D0CD; }
.ablak-test { padding: 18px; border: 1px solid #E3EAE7; border-top: 0; border-radius: 0 0 12px 12px; background: #FFFFFF; font-size: 16px; }
.ablak-test p { margin: 0; }
.ablak-cim { font-weight: 800; font-size: 18px; margin-bottom: 14px !important; }
.ablak-cimke { font-size: 14px; color: var(--halvany); margin-bottom: 4px !important; }
.ablak-mezo { padding: 10px 12px; border: 1.5px solid var(--szoveg); border-radius: 8px; margin-bottom: 12px !important; word-break: break-all; }
.ablak-valaszto { display: flex; justify-content: space-between; align-items: center; background: #FBFCE0; }
.ablak-valaszto svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.ablak-gomb { display: inline-block; padding: 8px 18px; border-radius: 8px; background: #1A73E8; color: #FFFFFF; font-weight: 700; }
.ablak figcaption { font-size: 14px; color: var(--halvany); margin-top: 8px; }
.hf-urlap { margin-top: 32px; }
.hf-urlap h2 { font-size: 28px; margin-bottom: 16px; }
.hf-valasz { border: 1px solid var(--vonal); border-radius: 12px; padding: 12px 16px; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.hf-valasz legend { font-weight: 800; padding: 0 6px; }
.hf-valasz label { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; cursor: pointer; font-size: 17px; }
.hf-valasz input { width: 20px; height: 20px; accent-color: var(--szoveg); }
.hf-cimke { display: block; font-weight: 700; margin-top: 12px; }
.hf-urlap textarea { min-height: 96px; resize: vertical; }
.hf-kesz { text-align: left; }
.hf-kesz h1 { font-size: 36px; margin-bottom: 12px; }
@media (min-width: 760px) { .hf-racs { grid-template-columns: 1fr 300px; } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media print {
	.fej, .lab, .ered-gombok, .ered-oldal, .kapu, #share-status, #report-status { display: none !important; }
	body { background: #fff; font-size: 14px; }
	.ered-racs { display: block; }
	.tal, .kartya { break-inside: avoid; box-shadow: none; }
	.tal-test { display: block !important; }
}
.egyben { white-space: nowrap; }
.hf-lista b { white-space: nowrap; }
.pont-kartya .pont { min-width: min(15em, 100%); }
@media (min-width: 900px) and (max-width: 1100px) { .pont-kartya { grid-template-columns: 1fr; } }

/* ===== LILA DESIGN (a webrendbe.hu 2026-11-11-i lila dizájnja szerint) ===== */
:root {
	--hatter: #231D40;
	--felulet: #2F2856;
	--szoveg: #F4F0FF;
	--halvany: #CFC8E6;
	--vonal: #544A84;
	--gomb: #C6B4FF;
	--gomb-hover: #D9CCFF;
	--gomb-szoveg: #0E0B1A;
	--kritikus: #FF8F8F;
	--magas: #FFB27A;
	--kozepes: #F2D27A;
	--alacsony: #9C93B8;
	--jo: #7EE2B8;
	--kerek: 20px;
	--cim: 'Cormorant Garamond', Georgia, serif;
	--betu: 'Manrope', system-ui, Arial, sans-serif;
}
body { background: var(--hatter); color: var(--szoveg); }
a { color: #C6B4FF; }
a:hover { color: #E4DBFF; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; }
.fej, .lab { background: #1A1530; border-color: #3A3268; }
.logo { color: var(--szoveg); font-family: var(--betu); font-weight: 800; }
.logo-jel { background: #C6B4FF; color: #0E0B1A; box-shadow: 0 0 18px rgba(139,108,255,.55); }
.kartya, .tal, .gomb2, .teny, .adm-tabla-tok, .hf-fiok { background: var(--felulet); border-color: var(--vonal); box-shadow: none; }
.gomb { border-radius: 999px; font-weight: 800; box-shadow: 0 0 0 1px rgba(198,180,255,.5), 0 10px 34px rgba(139,108,255,.45); transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.gomb:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(198,180,255,.8), 0 0 40px rgba(139,108,255,.85); }
.gomb2 { border-radius: 999px; color: var(--szoveg); }
.gomb2:hover { background: #3A3268; border-color: #8A7FD0; }
.gomb:focus-visible, .gomb2:focus-visible, .ful:focus-visible, .tal-fej:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #6FE3EA; outline-offset: 3px; }
.urlap input, .kapu input[type=email], .adm-belep input, .adm-urlap input, .adm-link input, .hf-urlap input[type=email], .hf-urlap textarea { background: #231D40; border: 1px solid #8A7FD0; color: var(--szoveg); border-radius: 999px; }
.hf-urlap textarea { border-radius: 20px; }
.urlap input::placeholder, .kapu input::placeholder, .adm input::placeholder, .hf-urlap input::placeholder, .hf-urlap textarea::placeholder { color: #9C93B8; }
.urlap input:focus, .kapu input:focus, .adm-belep input:focus, .adm-urlap input:focus, .hf-urlap input:focus, .hf-urlap textarea:focus { border-color: #C6B4FF; box-shadow: 0 0 0 3px rgba(139,108,255,.35); }
.mezo-ikon { color: #9C93B8; }
.kezdo h1 em, .hf-bev h1 em { background: none; color: #C6B4FF; text-shadow: 0 0 24px rgba(139,108,255,.6); }
.fulek { background: #1A1530; border: 1px solid var(--vonal); border-radius: 999px; }
.ful { border-radius: 999px; color: #CFC8E6; }
.ful.aktiv { background: #C6B4FF; color: #0E0B1A; box-shadow: 0 0 18px rgba(139,108,255,.45); }
.elonyok svg, .hf-bizalom svg { color: #6FE3EA; }
.csempe { background: #231D40; border-radius: 14px; }
.teny b, .csempe-szam, .pont-szam { font-family: var(--cim); }
.sav { background: #1A1530; }
.sav span { background: linear-gradient(90deg, #8B6CFF, #C6B4FF); box-shadow: 0 0 16px rgba(139,108,255,.7); }
.lepesek li { color: #7A6FB0; }
.lepesek li::before { border-color: #544A84; }
.lepesek li.most::before { border-color: #C6B4FF; border-right-color: transparent; }
.lepesek li.kesz::before { background: #6FE3EA; border-color: #6FE3EA; }
.lepesek li.kesz::after { border-color: #0E0B1A; }
.hiba { background: rgba(255,143,143,.12); color: #FFB3B3; border: 1px solid rgba(255,143,143,.4); }
.siker { background: rgba(126,226,184,.12); color: #A8F0D2; border: 1px solid rgba(126,226,184,.4); }
code { background: #1A1530; border-color: #544A84; color: #E4DBFF; }
.hf-fiok { border: 1px solid #C6B4FF; }
.hf-fiok code { background: #C6B4FF; color: #0E0B1A; }
.cimke { background: #3A3268; color: #CFC8E6; }
.sev-critical .cimke { background: rgba(255,143,143,.16); color: #FFB3B3; }
.sev-high .cimke { background: rgba(255,178,122,.16); color: #FFC9A0; }
.sev-medium .cimke { background: rgba(242,210,122,.16); color: #F5DE9E; }
.sev-ok .cimke { background: rgba(126,226,184,.16); color: #A8F0D2; }
.tal-test p { color: #CFC8E6; }
.zarolt { background: repeating-linear-gradient(135deg, #2F2856, #2F2856 10px, #2A2350 10px, #2A2350 20px); }
.kapu { border: 1px solid #C6B4FF; box-shadow: 0 0 30px rgba(139,108,255,.18); }
.kapu-ikon, .hf-szam { background: #C6B4FF; color: #0E0B1A; box-shadow: 0 0 18px rgba(139,108,255,.55); }
.pipa input, .hf-valasz input { accent-color: #C6B4FF; }
.pont-kartya { border-top-width: 4px; }
.kiem { border-left-width: 4px; }
.all { background: #3A3268; color: #CFC8E6; }
.all-nyitva { background: rgba(242,210,122,.16); color: #F5DE9E; }
.all-kesz { background: rgba(126,226,184,.16); color: #A8F0D2; }
.adm-sor.friss { border-color: #C6B4FF; }
.adm-tabla th, .adm-tabla td { border-color: #3A3268; }
.hf-valasz { border-color: var(--vonal); border-radius: 14px; }
.ablak-test { color: #1A1B1B; }
.ablak-cimke, .ablak figcaption { color: #9C93B8; }
.ablak-test .ablak-cimke { color: #5F6B7A; }
.ablak-sav { background: #3A3268; }
.ablak-sav i { background: #7A6FB0; }
@media print { body, .kartya, .tal { background: #fff !important; color: #1A1B1B !important; } }h1, h2, h3, .csempe-szam, .pont-szam, .teny b, .hf-szam { font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; }
.legfontosabb { margin: 4px 0 -2px; font-size: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #C6B4FF; }
#gate-sent p { margin: 0; color: var(--halvany); }
#gate-sent b { color: var(--szoveg); word-break: break-all; }

/* Hibajavítás-oldal */
.jv { max-width: 720px; }
.jv-kartya h1 { font-size: clamp(32px, 6vw, 48px); margin-bottom: 16px; }
.jv-kartya > p { color: var(--halvany); }
.jv-szam { font-size: 22px; font-weight: 800; color: var(--szoveg) !important; margin: 0 0 8px; }
.jv-tel { margin: 16px 0 0; }
.jv-tel b { color: var(--szoveg); }
.jv-megj { margin: -8px 0 8px; }
.jv input[type=tel], .jv textarea, .kapu input[type=tel] { width: 100%; min-height: 52px; margin: 6px 0 16px; padding: 12px 16px; border: 1px solid #8A7FD0; border-radius: 999px; background: #231D40; color: var(--szoveg); font: 500 17px var(--betu); }
.jv textarea { border-radius: 20px; min-height: 96px; resize: vertical; }
.jv input:focus, .jv textarea:focus, .kapu input[type=tel]:focus { border-color: #C6B4FF; outline: none; box-shadow: 0 0 0 3px rgba(139,108,255,.35); }
.jv input::placeholder, .jv textarea::placeholder, .kapu input[type=tel]::placeholder { color: #9C93B8; }
.kapu .kapu-tel-bev { margin: 4px 0 6px; font-size: 16px; color: var(--halvany); }

/* A Biztonsági vizsgálat fülön a fő gomb piros: veszélyre figyelmeztet (Magdolna, 2026-11-11) */
body[data-fajta="security"] #go { background: #E5484D; color: #FFFFFF; box-shadow: 0 0 0 1px rgba(255,140,140,.5), 0 10px 34px rgba(229,72,77,.45); }
body[data-fajta="security"] #go:hover { background: #F2666A; box-shadow: 0 0 0 1px rgba(255,160,160,.8), 0 0 40px rgba(229,72,77,.75); }

/* ===== Piros figyelmeztetés (2026-11-11, Magdolna: a veszélyre hívja fel a figyelmet) ===== */
/* Sötétlila háttér, piros figyelmeztető jelzések (Magdolna választása, 2026-11-11): a Biztonsági vizsgálaton és minden komoly találatnál */
body[data-fajta="security"] .kezdo h1 em { color: #FF6B70; text-shadow: 0 0 28px rgba(229,72,77,.55); }
body[data-fajta="security"] .kartya-cim svg { color: #FF6B70; }
body[data-fajta="security"] .elonezet .kartya { border-color: rgba(229,72,77,.45); box-shadow: 0 0 40px rgba(229,72,77,.12); }
body[data-fajta="security"] .sav span { background: linear-gradient(90deg, #B42318, #FF6B70); box-shadow: 0 0 16px rgba(229,72,77,.7); }
body[data-fajta="security"] .lepesek li.most::before { border-color: #FF6B70; border-right-color: transparent; }
.pont-kartya.kock-high { border-top-color: #E5484D; box-shadow: 0 0 0 1px rgba(229,72,77,.35), 0 0 48px rgba(229,72,77,.22); }
.pont-kartya.kock-high .pont-kock { color: #FF6B70; }
.tal.sev-critical, .tal.sev-high { border-left-color: #E5484D; box-shadow: 0 0 24px rgba(229,72,77,.10); }
.sev-critical .tal-ik, .sev-high .tal-ik { color: #FF6B70; }
.sev-critical .cimke, .sev-high .cimke { background: rgba(229,72,77,.18); color: #FFB3B5; }
.kiem { border-left-color: #E5484D; }
.kiem-fej svg { color: #FF6B70; }
body[data-fajta="security"] .legfontosabb { color: #FF6B70; }
body[data-fajta="security"] #gate { border-color: #E5484D; box-shadow: 0 0 36px rgba(229,72,77,.22); }
body[data-fajta="security"] #gate .kapu-ikon { background: #E5484D; color: #FFFFFF; box-shadow: 0 0 18px rgba(229,72,77,.6); }
body[data-fajta="security"] #gate-send { background: #E5484D; color: #FFFFFF; box-shadow: 0 0 0 1px rgba(255,140,140,.5), 0 10px 34px rgba(229,72,77,.45); }
body[data-fajta="security"] #gate-send:hover { background: #F2666A; }


/* Erősebb piros riasztás a lila alapon (2026-11-11) */
.riasztas { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 16px 20px; border-radius: 20px; background: linear-gradient(90deg, rgba(229,72,77,.28), rgba(229,72,77,.12)); border: 1px solid #E5484D; box-shadow: 0 0 40px rgba(229,72,77,.25); animation: riaszt-feny 2.4s ease-in-out infinite; }
.riasztas svg { width: 30px; height: 30px; flex: none; fill: none; stroke: #FF6B70; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.riasztas p { margin: 0; font-weight: 800; font-size: 19px; color: #FFE4E5; }
@keyframes riaszt-feny { 0%, 100% { box-shadow: 0 0 24px rgba(229,72,77,.18); } 50% { box-shadow: 0 0 48px rgba(229,72,77,.45); } }
.pont-kartya.van-komoly { border-top-color: #E5484D; box-shadow: 0 0 0 1px rgba(229,72,77,.4), 0 0 48px rgba(229,72,77,.22); }
.pont-kartya.van-komoly .pont-kock { color: #FF6B70; }
.csempe.van { background: rgba(229,72,77,.2); border-top-color: #E5484D; box-shadow: inset 0 0 0 1px rgba(229,72,77,.45); }
.csempe.van .csempe-szam { color: #FF6B70; }
.csempe.van .csempe-felirat { color: #FFC9CA; }
.felirat .figy-jel { display: none; width: 18px; height: 18px; margin: 0 8px -3px 0; fill: none; stroke: #FF6B70; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
body[data-fajta="security"] .felirat .figy-jel { display: inline-block; }
body[data-fajta="security"] .kezdo .felirat { color: #FFB3B5; }
body[data-fajta="security"] .kezdo { position: relative; }
body[data-fajta="security"] .kezdo::before { content: ""; position: absolute; z-index: -1; inset: -40px -24px auto; height: 520px; pointer-events: none; background: radial-gradient(ellipse at 25% 35%, rgba(229,72,77,.22), rgba(229,72,77,0) 60%); }
body[data-fajta="security"] .elonezet .csempe.sev-critical, body[data-fajta="security"] .elonezet .csempe.sev-high { background: rgba(229,72,77,.14); }
@media (prefers-reduced-motion: reduce) { .riasztas { animation: none; } }
/* Még erősebb figyelemfelkeltés (2026-11-11 este) */
.riasztas { align-items: flex-start; }
.riasztas-test p { margin: 0; }
.riasztas .riasztas-legs { margin-top: 6px; font-weight: 600; font-size: 17px; color: #FFD1D3; }
.riasztas svg { margin-top: 2px; }
.pont-kartya.van-komoly .pont-szam { color: #FF6B70; text-shadow: 0 0 24px rgba(229,72,77,.5); }
.pont-kartya.van-komoly .pont-szam span { color: #FFB3B5; }
body[data-fajta="security"] .vizsgal-kartya { border-color: rgba(229,72,77,.5); box-shadow: 0 0 48px rgba(229,72,77,.18); }
body[data-fajta="security"] .vizsgal .felirat { color: #FFB3B5; }
body[data-fajta="security"] .vizsgal .felirat::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: #FF4D52; vertical-align: 1px; animation: radar 1.2s ease-out infinite; }
@keyframes radar { 0% { box-shadow: 0 0 0 0 rgba(255,77,82,.7); } 100% { box-shadow: 0 0 0 14px rgba(255,77,82,0); } }
/* A kezdőképernyő piros derengése szél nélkül halványul el */
body[data-fajta="security"] .kezdo::before { inset: -80px -120px auto; height: 720px; background: radial-gradient(closest-side ellipse at 30% 45%, rgba(229,72,77,.24), rgba(229,72,77,0)); }
body[data-fajta="security"] .kezdo { overflow: visible; }
main { overflow-x: clip; } /* a derengés ne okozzon vízszintes görgetést */
@media (prefers-reduced-motion: reduce) { body[data-fajta="security"] .vizsgal .felirat::before { animation: none; } }
/* ===== TELEFON: nagyobb betűk, hüvelykujjal is könnyen eltalálható gombok (Magdolna, 2026-11-11) ===== */
@media (max-width: 699px) {
  body { font-size: 19px; }
  .felirat, .kezdo .felirat { font-size: 16px; }
  .apro, .hiba, .siker, .allapot, .elonyok, .csempe-felirat, .teny, .sav-felirat, .pont-felirat,
  .kiem-megj, .nevek-felirat, .rendben-db, .pipa, .pont-megj, .lab p, .legfontosabb,
  .kapu .kapu-tel-bev, .hf-lep summary small, .ablak-test, .adm-tabla { font-size: 18px; }
  .lepesek li, .lanc li, .tal-cim, .tal-test p, .kapu label[for], .figyeles p, .hf-bizalom,
  .hf-lista, .hf-valasz label, .riasztas .riasztas-legs { font-size: 19px; }
  .cimke, .ablak-cimke, .ablak figcaption, .all { font-size: 16px; }
  code { font-size: 17px; }
  .fulek { display: flex; width: 100%; }
  .ful { flex: 1 1 0; min-height: 56px; padding: 8px 12px; font-size: 18px; line-height: 1.2; }
  .gomb { min-height: 60px; font-size: 20px; }
  .gomb2 { min-height: 48px; font-size: 18px; }
  .urlap input, .kapu input[type=email], .kapu input[type=tel], .jv input[type=tel], .jv textarea,
  .hf-urlap input[type=email], .hf-urlap textarea, .adm-belep input, .adm-urlap input { min-height: 60px; font-size: 19px; }
  .hf-valasz label { min-height: 48px; }
  .logo { min-height: 48px; }
  .lab a { display: inline-flex; align-items: center; min-height: 48px; }
}