/* ═══ LANSCOUT · Belépő V5 — teljes képernyős földgömb · mérés-út animáció · eredmény-ablak · Radar-paletta ═══ */
:root{
  --bg-0:#070C12;--bg-1:#0A1119;--bg-2:#0E1822;--panel:rgba(22,32,42,.55);--panel-2:#121C26;--glass:rgba(12,20,29,.74);
  --bd:rgba(160,200,230,.08);--bd-2:rgba(160,200,230,.16);--bd-cy:rgba(0,229,255,.35);
  --txt:#E6F1F8;--mut:#7B8B99;--mut-2:#5A6976;
  --cy:#00E5FF;--cy-soft:#5BD6FF;--cy-deep:#00B4D8;--cy-bg:rgba(0,229,255,.08);
  --gn:#00E676;--yl:#FFD166;--or:#FF8A3D;--rd:#FF3D55;--vt:#B388FF;
  --gn-bg:rgba(0,230,118,.10);--yl-bg:rgba(255,209,102,.10);--rd-bg:rgba(255,61,85,.10);
  --f:'Space Grotesk',Inter,system-ui,sans-serif;--m:'JetBrains Mono',Consolas,monospace;
  --r:10px;--r-lg:16px;--glow:0 0 18px rgba(0,229,255,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg-0);color:var(--txt);font-family:var(--f);font-size:14px;line-height:1.45}
a{color:var(--cy-soft);text-decoration:none}a:hover{color:var(--cy)}
b{font-weight:700}.mono{font-family:var(--m)}
button{font-family:inherit}
svg.i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.kbd{font-family:var(--m);font-size:10px;border:1px solid var(--bd-2);border-radius:5px;padding:1px 6px;color:var(--mut)}

/* ── teljes képernyős földgömb-háttér ── */
#stage{position:fixed;inset:0;z-index:0}
#stage canvas{width:100%!important;height:100%!important;display:block;cursor:grab}
/* 7. kör: WebGL nélkül — állókép a földgömb helyén; ami a térképhez tartozik (jelölő-feliratok, jelmagyarázat, térkép-gombok), rejtve */
body.nogl #stage{background:var(--bg-0) center/cover no-repeat}
body.nogl #stage canvas,body.nogl .gtag,body.nogl .legend,body.nogl .mapctl{display:none!important}
.btn[disabled]{opacity:.55;cursor:default}
/* 7. kör: a verdikt szövegébe ágyazott visszaszámláló NE törjön külön sorba (a `.verdict span` blokk) */
.verdict span span{display:inline;margin:0;font-size:inherit;color:inherit}
.verdict .cdn,.btn .cdn{font-family:var(--m);font-variant-numeric:tabular-nums}
.vig{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(1300px 900px at 68% 50%, transparent 30%, rgba(7,12,18,.45) 70%, rgba(7,12,18,.9) 100%),linear-gradient(90deg, rgba(7,12,18,.92) 0, rgba(7,12,18,.62) 34%, transparent 58%)}
.grid{position:fixed;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(rgba(124,178,210,.03) 1px, transparent 1px),linear-gradient(90deg, rgba(124,178,210,.03) 1px, transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at center, black 20%, transparent 78%)}
/* a földgömbön lévő címkék (DOM, vetítve) */
.gtag{position:fixed;z-index:3;transform:translate(-50%,-140%);display:flex;flex-direction:column;align-items:center;padding:6px 10px;border:1px solid var(--bd-cy);border-radius:9px;background:rgba(12,20,29,.88);backdrop-filter:blur(8px);font-family:var(--m);font-size:11px;color:var(--txt);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .35s}
.gtag.on{opacity:1}.gtag b{font-size:12px}.gtag small{color:var(--mut);font-size:10px}
.gtag.hub{border-color:rgba(0,229,255,.55)}.gtag.tgt{border-color:rgba(0,230,118,.55)}.gtag.me{border-color:rgba(255,255,255,.5)}

.gtag::after{content:"";position:absolute;left:50%;bottom:-6px;width:1px;height:6px;background:var(--bd-2)}

/* ── fejléc ── */
.top{position:fixed;left:0;right:0;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:12px 26px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.04em;font-size:14px;color:#fff}
.mark{width:26px;height:26px;border-radius:7px;border:1px solid var(--bd-cy);position:relative;background:radial-gradient(circle at 30% 30%, rgba(0,229,255,.65), rgba(0,180,216,.15) 60%, transparent 80%);box-shadow:0 0 18px rgba(0,229,255,.3), inset 0 0 10px rgba(0,229,255,.2)}
.mark::before{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(0,229,255,.8);animation:radar 2.6s ease-in-out infinite}
@keyframes radar{0%,100%{transform:scale(.6);opacity:.3}50%{transform:scale(1);opacity:.95}}
.brand small{color:var(--mut);font-family:var(--m);font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.sp{flex:1}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid var(--bd-2);border-radius:999px;background:rgba(14,24,34,.6);backdrop-filter:blur(12px);color:var(--txt);font-size:12.5px;font-weight:600;cursor:pointer}
.pill.ghost{color:var(--mut)}.pill.pri{border-color:var(--bd-cy);background:linear-gradient(180deg, rgba(0,229,255,.20), rgba(0,180,216,.10));color:var(--cy);box-shadow:var(--glow)}
.pill i.dot{width:7px;height:7px;border-radius:50%;background:var(--gn);box-shadow:0 0 8px var(--gn);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.pill.mono{font-family:var(--m)}
/* v0.10.8 (user-kérés): belépve a fejlécben CSAK a NEVED áll (a „Belépés” helyett), a hub user-pilljének
   mintájára — kis kör a kezdőbetűvel. Kattintásra a meglévő becsúszó panel nyílik, EGY gombbal. */
.pill.user{gap:7px;padding:4px 12px 4px 4px}
.av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--cy-bg);border:1px solid var(--bd-cy);color:var(--cy);font-family:var(--m);font-size:11px;font-weight:700;flex:none}
.login .meblk{margin-top:22px}
.login .meblk .btn{width:100%;margin-top:0;text-decoration:none;justify-content:center}
/* 8. kör: a Kilépés a panel ALJÁN (a lábjegyzet fölött) — a .foot auto-margója helyett ez tolja le */
/* ★ V-kör (v0.10.43, mockup ⑧): a „Hibát találtam” sor a vezérlőpult és a Kilépés között + a gombok rajzolt ikonja (J7: a Kilépés „⏻”-je helyett) */
.login .mehb{margin-top:10px}.login .mehb .btn{margin-top:0;justify-content:center;color:var(--txt)}
.login .btn svg{width:16px;height:16px;flex:none}
.login .meout{margin-top:auto;padding-top:14px}.login .meout .btn{width:100%;color:var(--mut);text-decoration:none;justify-content:center}.login .meout+.foot{margin-top:12px}

/* ── hős: bal hasáb a földgömb fölött ── */
.hero{position:relative;z-index:4;min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:84px 26px 40px 40px;width:min(52vw,640px);pointer-events:none}
.hero>*{pointer-events:auto}
.eyebrow{font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cy-soft);display:flex;align-items:center;gap:10px}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--gn);box-shadow:0 0 8px var(--gn);animation:pulse 1.8s ease-in-out infinite}
h1{margin:0;font-size:clamp(30px,3.4vw,46px);line-height:1.06;letter-spacing:-.02em;font-weight:700;color:#fff}
h1 em{font-style:normal;color:var(--cy)}
.lead{color:var(--mut);font-size:15px;line-height:1.55;max-width:50ch;margin:0}
/* telemetria: tömör sáv */
.tele{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:10px 16px;padding:12px 16px;border:1px solid var(--bd-2);border-radius:var(--r-lg);background:var(--glass);backdrop-filter:blur(16px);position:relative;align-items:center}
.tele::before,.tele::after{content:"";position:absolute;width:14px;height:14px;border:1px solid var(--cy);opacity:.6}
.tele::before{top:-1px;left:-1px;border-right:none;border-bottom:none;border-top-left-radius:16px}.tele::after{bottom:-1px;right:-1px;border-left:none;border-top:none;border-bottom-right-radius:16px}
.tele .k{font-family:var(--m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut-2)}
.tele .v{font-family:var(--m);font-weight:600;font-size:13px;margin-top:2px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tele .ip .v{font-size:22px;letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.tele .ip button{all:unset;cursor:pointer;color:var(--mut);font-size:13px;border:1px solid var(--bd-2);border-radius:6px;padding:1px 7px}
.tele .d{font-size:11px;color:var(--mut);margin-top:1px}.tele .ok{color:var(--gn)}
/* mérés-választó a hős alatt */
.tools{border:1px solid var(--bd-2);border-radius:var(--r-lg);background:var(--glass);backdrop-filter:blur(16px);padding:10px 14px 14px}
.tabs{display:flex;flex-wrap:wrap;gap:0 2px;border-bottom:1px solid var(--bd-2);margin-bottom:12px}
/* F-kör (F5): ha a rövid feliratú fülek MÉRVE mégis két sorba törnének (keskeny panel), két EGYENLETES sor (4 + 3) — a `two` osztályt a fitTabs() teszi rá, mérés alapján */
.tabs.two{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 2px}.tabs.two .tab{justify-content:center;padding-left:6px;padding-right:6px}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:8px 8px;border:none;background:none;color:var(--mut);font-weight:600;font-size:12px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;margin-bottom:-1px;display:flex;align-items:center;gap:5px}   /* F5: 8/5 px (volt 10/6) — a hét rövid fül egy sorban 516 és 492 px-be is fér */
.tab.on{color:var(--cy);border-bottom-color:var(--cy)}.tab svg.i{width:14px;height:14px}
.form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.form.two{grid-template-columns:1fr 120px auto}
.form.two.seg{grid-template-columns:1fr 160px}.form.two.seg .btn.go{grid-column:1/-1;justify-content:center}   /* v0.10.27: „25 gyakori” / „mind a 252” — gombonként ~73 px kell (mérve); a gomb MINDEN szélességen külön sorban (mint 901–1440 között, G9): egy sorban 1536/1920-on a Cél-mező 113 px-re szűkült (a teljes IPv4-hez 143 kell) */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}.field label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);font-weight:600;font-family:var(--m)}
.inp,.sel{width:100%;padding:11px 13px;border:1px solid var(--bd-2);border-radius:var(--r);background:rgba(14,24,34,.7);color:var(--txt);font-family:var(--m);font-size:13px}
.inp:focus{outline:none;border-color:var(--bd-cy);box-shadow:0 0 0 3px var(--cy-bg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 16px;border-radius:var(--r);border:1px solid var(--bd-2);background:var(--panel);color:var(--txt);font-weight:700;font-size:13.5px;cursor:pointer;font-family:inherit;white-space:nowrap}
.btn.go{border-color:rgba(0,230,118,.5);background:linear-gradient(180deg, rgba(0,230,118,.22), rgba(0,230,118,.08));color:var(--gn);box-shadow:0 0 22px rgba(0,230,118,.18);animation:breathe 2.8s ease-in-out infinite}
.btn.go:hover{background:var(--gn);color:#04120a}.btn[disabled]{opacity:.55;cursor:default;animation:none}
@keyframes breathe{0%,100%{box-shadow:0 0 22px rgba(0,230,118,.14)}50%{box-shadow:0 0 34px rgba(0,230,118,.34)}}
.btn.pri{border-color:var(--bd-cy);background:linear-gradient(180deg, rgba(0,229,255,.20), rgba(0,180,216,.10));color:var(--cy)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--mut)}.btn.sm{padding:7px 11px;font-size:12px}
.hint{font-size:11.5px;color:var(--mut-2);margin-top:8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sw{position:relative;width:32px;height:18px;border-radius:9px;background:var(--bg-2);border:1px solid var(--bd-2);cursor:pointer;flex:none}
.sw i{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--mut);transition:all .2s}
.sw.on{background:var(--cy-bg);border-color:var(--bd-cy)}.sw.on i{left:16px;background:var(--cy)}
.trust{display:flex;gap:16px;flex-wrap:wrap;color:var(--mut);font-size:12px}.trust b{color:var(--txt)}

/* ── eredmény-ablak a földgömb fölött (félig átlátszó) ── */
.res{position:fixed;right:26px;top:84px;bottom:76px;z-index:12;width:min(440px,calc(100vw - 52px));display:flex;flex-direction:column;border:1px solid var(--bd-cy);border-radius:var(--r-lg);background:rgba(12,20,29,.62);backdrop-filter:blur(14px);box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 40px rgba(0,229,255,.06);transform:translateX(24px);opacity:0;pointer-events:none;transition:all .35s cubic-bezier(.2,.8,.2,1)}
.res.on{transform:none;opacity:1;pointer-events:auto}
.res .rh{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--bd)}
.res .rh .t{font-family:var(--m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cy-soft)}
.res .rh .tg{font-family:var(--m);font-size:11.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.res .x{all:unset;cursor:pointer;color:var(--mut);font-size:16px;padding:2px 6px}.res .x:hover{color:#fff}
.res .rb{flex:1;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.res .rf{padding:10px 14px;border-top:1px solid var(--bd);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* út-lépések */
.steps{display:flex;flex-direction:column;gap:6px}
.step{display:flex;align-items:center;gap:10px;font-family:var(--m);font-size:11.5px;color:var(--mut)}
.step i{width:8px;height:8px;border-radius:50%;background:var(--mut-2);flex:none}
.step.on i{background:var(--cy);box-shadow:0 0 8px var(--cy)}.step.done i{background:var(--gn)}
.step.done{color:var(--txt)}.step .ms{margin-left:auto;color:var(--mut);white-space:nowrap;flex:none}
.prog{height:6px;border-radius:3px;background:var(--bg-2);overflow:hidden}.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cy-deep),var(--cy));transition:width .25s}
/* ítélet */
.verdict{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);border:1px solid var(--bd-2);background:rgba(0,230,118,.06)}
.verdict .vi{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--gn-bg);color:var(--gn)}
.verdict.bad{background:rgba(255,61,85,.07)}.verdict.bad .vi{background:var(--rd-bg);color:var(--rd)}.verdict.warn{background:rgba(255,209,102,.06)}.verdict.warn .vi{background:var(--yl-bg);color:var(--yl)}
.verdict b{display:block;font-size:14px;line-height:1.3}.verdict span{display:block;color:var(--mut);font-size:12.5px;margin-top:3px;line-height:1.45}
/* laikus / mérnöki váltó */
.lvl{display:inline-flex;border:1px solid var(--bd-2);border-radius:999px;overflow:hidden;background:rgba(14,24,34,.6);margin-left:auto}
.lvl button{all:unset;cursor:pointer;padding:5px 11px;font-size:11.5px;font-weight:600;color:var(--mut)}.lvl button.on{background:var(--cy-bg);color:var(--cy)}
.res .eng{display:none}.res.mode-eng .eng{display:block}.res.mode-eng .lay{display:none}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:12.5px}.kv dt{color:var(--mut);font-family:var(--m);font-size:10.5px;padding-top:2px}.kv dd{margin:0;overflow-wrap:anywhere}
.json{background:#050a0f;border:1px solid var(--bd-2);border-radius:var(--r);padding:10px 12px;font-family:var(--m);font-size:10.5px;color:#9fd8e8;white-space:pre;overflow:auto;max-height:200px}
.term{background:#050a0f;border:1px solid var(--bd-2);border-radius:var(--r);padding:10px 12px;font-family:var(--m);font-size:10.5px;line-height:1.6;color:#cfe3ee;max-height:220px;overflow:auto}
.term .t{color:var(--mut-2);margin-right:6px}.term .k{color:var(--cy);margin-right:6px;font-weight:600}.term .ok{color:var(--gn)}.term .warn{color:var(--yl)}.term .bad{color:var(--rd)}
/* mini port-mátrix */
.mx{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.cell{padding:7px 8px 6px;border-radius:8px;border:1px solid var(--bd-2);background:rgba(14,24,34,.7);cursor:pointer;display:flex;flex-direction:column;gap:1px;transition:all .3s}
.cell .p{font-family:var(--m);font-weight:700;font-size:12px}.cell .n{font-size:10px;color:var(--mut)}.cell .s{font-family:var(--m);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut-2)}
.cell.q{border-style:dashed}.cell.scan{border-color:var(--cy);box-shadow:0 0 12px rgba(0,229,255,.35)}
.cell.ok{border-color:rgba(0,230,118,.45);background:rgba(0,230,118,.08)}.cell.ok .s{color:var(--gn)}
.cell.warn{border-color:rgba(255,209,102,.6);background:rgba(255,209,102,.08)}.cell.warn .s{color:var(--yl)}
.cell.bad{border-color:var(--rd);background:rgba(255,61,85,.1)}.cell.bad .s{color:var(--rd)}
.cell.open-ok{border-color:var(--bd-cy);background:var(--cy-bg)}.cell.open-ok .s{color:var(--cy-soft)}
.pdet{padding:10px 12px;border:1px solid var(--bd-cy);border-radius:var(--r);background:rgba(0,229,255,.05);font-size:12.5px}
.pdet b{display:block;margin-bottom:4px}.pdet .fix{margin-top:6px;padding:7px 9px;border-radius:7px;background:rgba(0,229,255,.07);font-size:12px}
/* v0.10.27 szöveg-kör (mockup 1–2, jóváhagyva): a nyitott port „Hogyan zárd be” sora (E1) · a 25 kocka jelmagyarázata (D2) · a minta-cél leírása (C10) */
.pdet .fix.how{border:1px dashed var(--bd-cy);background:none;color:var(--txt)}
.mxlegend{font-size:11.5px;color:var(--mut);margin:-2px 0 6px;display:flex;flex-wrap:wrap;gap:4px 12px;padding:2px 4px}
.mxlegend b{display:inline;margin:0;font-family:var(--m);font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.mxlegend .g{color:var(--gn)}.mxlegend .r{color:var(--rd)}
.sdesc{margin-top:8px;min-height:20px;font-size:12px;color:var(--mut-2);display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.sdesc .ar{color:var(--cy);font-family:var(--m)}.sdesc b{font-family:var(--m);font-weight:600;color:var(--cy-soft)}.sdesc span:not(.ar){color:var(--mut);min-width:0;overflow-wrap:anywhere}
.risk{font-family:var(--m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:5px;margin-left:6px}
.risk.ok{color:var(--gn);background:var(--gn-bg)}.risk.warn{color:var(--yl);background:var(--yl-bg)}.risk.bad{color:var(--rd);background:var(--rd-bg)}
.rec{display:flex;align-items:center;gap:10px;padding:7px 9px;border:1px solid var(--bd);border-radius:9px;background:rgba(14,24,34,.6)}
.rec .ty{font-family:var(--m);font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px;background:var(--cy-bg);color:var(--cy);min-width:40px;text-align:center}
.rec .val{font-family:var(--m);font-size:12px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rec .ttl{color:var(--mut-2);font-family:var(--m);font-size:10px}
.rec.ok .ty{background:var(--gn-bg);color:var(--gn)}.rec.bad .ty{background:var(--rd-bg);color:var(--rd)}
.gauge{display:flex;gap:14px;align-items:center}.gauge svg{width:96px;height:96px;flex:none}
.chips{display:flex;gap:5px;flex-wrap:wrap}.chips span{font-family:var(--m);font-size:10px;padding:2px 7px;border-radius:999px;border:1px solid var(--bd-2);color:var(--mut)}
.chips span.ok{color:var(--gn);border-color:rgba(0,230,118,.5)}.chips span.bad{color:var(--rd);border-color:rgba(255,61,85,.5)}
.section-title{font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-2);margin:2px 0}

/* ── jelmagyarázat · vezérlők ── */
/* F12 (v0.10.22): a jelmagyarázat a térkép-gombok sorában (901–1300 px-en a gombok FÖLÖTT). v0.10.54: asztalon a hely-kártya alján, a gombsorbeli
   példány telefonon — és v0.10.55 óta asztalon mérés közben is (a kártya ilyenkor összecsukódik). A szabályok a fájl végén. */
.legend{display:flex;gap:14px;align-items:center;color:var(--mut);font-size:11.5px;font-family:var(--m);margin-right:8px;white-space:nowrap}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.mapctl{position:fixed;right:26px;bottom:22px;z-index:5;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;row-gap:6px}
@media (min-width:901px) and (max-width:1300px){ .mapctl{display:grid;grid-template-columns:repeat(4,auto);justify-content:end;gap:6px 8px} .mapctl .legend{grid-column:1/-1;justify-self:end;margin:0} .res{bottom:88px} }
.scrolldown{position:fixed;left:50%;bottom:22px;z-index:5;transform:translateX(-50%);color:var(--mut-2);font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.scrolldown i{width:1px;height:22px;background:linear-gradient(180deg,var(--cy),transparent)}
.scrolldown.off{visibility:hidden}   /* G10: fitHint() — ha ütközne a gombsorral / a számláló-sorral */

/* ── második képernyő: ajánló (értesítés-oldalról) + lábléc ── */
.below{position:relative;z-index:6;background:linear-gradient(180deg, transparent, var(--bg-0) 120px);padding-top:60px}
.cta{max-width:1180px;margin:0 auto;padding:30px 26px 10px}
.cta .box{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px;align-items:center;padding:26px 28px;border:1px solid var(--bd-cy);border-radius:var(--r-lg);background:linear-gradient(135deg, rgba(0,229,255,.08), rgba(0,180,216,.02));backdrop-filter:blur(10px)}
.cta h2{margin:0 0 8px;font-size:26px;letter-spacing:-.01em;color:#fff}.cta p{margin:0;color:var(--mut);font-size:14px;line-height:1.5}
.cta ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:13px}.cta li{display:flex;gap:8px;align-items:center}.cta li i{width:6px;height:6px;border-radius:50%;background:var(--gn);flex:none}
.chan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.chan div{padding:10px 12px;border:1px solid var(--bd);border-radius:10px;background:rgba(14,24,34,.6);font-size:12.5px}.chan b{display:block}.chan span{color:var(--mut);font-size:11.5px}
footer{max-width:1180px;margin:0 auto;padding:22px 26px 40px;display:flex;gap:18px;flex-wrap:wrap;color:var(--mut);font-size:12.5px}footer .sp{flex:1}

/* ── belépés panel · lap · toast ── */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(4,8,12,.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .26s}
.login{position:fixed;top:0;right:0;bottom:0;z-index:51;width:min(420px,100%);padding:28px;background:rgba(14,24,34,.94);backdrop-filter:blur(18px);border-left:1px solid var(--bd-2);box-shadow:-30px 0 80px rgba(0,0,0,.5);transform:translateX(102%);transition:transform .32s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;gap:12px}
body.login-open .scrim{opacity:1;pointer-events:auto}body.login-open .login{transform:none}
.login h2{margin:22px 0 0;font-size:22px;font-weight:700;color:#fff;display:flex;align-items:center;gap:10px}.login h2::before{content:"";width:3px;height:20px;border-radius:2px;background:var(--cy);box-shadow:var(--glow)}
.login .sub{color:var(--mut);margin:0 0 8px 13px;font-size:13px}
.login label{display:block;color:var(--mut);font-size:10.5px;margin:8px 0 6px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;font-family:var(--m)}
.login input{width:100%;padding:12px 14px;background:var(--bg-2);color:var(--txt);border:1px solid var(--bd-2);border-radius:var(--r);font-family:var(--m);font-size:14px}
.login .btn{width:100%;margin-top:8px}
.login .x{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:9px;border:1px solid var(--bd-2);background:var(--panel);color:var(--mut);display:grid;place-items:center;cursor:pointer}
/* ★ M-kör (v0.10.36): a panel GÖRGETHETŐ — a meghívó-doboz a kérdéssel hosszabb lett, és alacsony ablakban (a kapu + az űrlap + a doboz)
   az „Elküldöm ›” a képernyő alá került: a rögzített panel nem görgetett, a gomb elérhetetlen volt (a verify_belepo_audit G mérése fogta meg) */
.login{overflow-y:auto;overscroll-behavior:contain}
/* ★ M-kör (v0.10.36, B29): a meghívó-kérés „Mi érdekel?” kérdése (a meglévő kapcsoló-chipek, tördelve) + a megjegyzés + a láthatatlan csapda-mező */
.login .opt{color:var(--mut-2);letter-spacing:.06em;text-transform:none;font-weight:500}
.login .ichips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}
.login .ichips .chip{white-space:normal;text-align:left;line-height:1.3}
.login .ichips .chip.on::before{content:"✓ "}
.login textarea{width:100%;min-height:64px;resize:vertical;padding:12px 14px;background:var(--bg-2);color:var(--txt);border:1px solid var(--bd-2);border-radius:var(--r);font:14px/1.45 var(--f)}
.login .cnt{font-family:var(--m);font-size:10.5px;color:var(--mut-2);text-align:right;margin:2px 2px 0}
.login .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.login .foot{margin-top:auto;font-size:11.5px;color:var(--mut-2);display:flex;flex-direction:column;gap:6px}
/* v0.10.6: a KAPU — a fiókhoz kötött mérések irányító blokkja a panel tetején (a látogatót a meghívó/regisztráció felé tereli) */
.gate{margin-top:14px;padding:14px 16px;border:1px solid var(--bd-cy);border-radius:var(--r);background:var(--cy-bg)}
.gate b{display:block;font-size:15px;line-height:1.3;color:#fff}.gate p{margin:6px 0 12px;color:var(--mut);font-size:12.5px;line-height:1.45}
.gate .ga{display:flex;gap:8px;flex-wrap:wrap}.gate .ga .btn{margin-top:0;width:auto;flex:1 1 140px}
.toast{position:fixed;left:50%;bottom:70px;transform:translateX(-50%);z-index:60;background:var(--panel-2);border:1px solid var(--bd-cy);border-radius:var(--r);padding:10px 14px;font-size:13px;box-shadow:0 20px 50px rgba(0,0,0,.5);opacity:0;transition:opacity .3s;pointer-events:none}
.toast.on{opacity:1}

/* ── szövegkönyv-panel (prototípus-eszköz) ── */
.protobar{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:21;display:flex;gap:8px}
.cpanel{position:fixed;right:0;top:0;bottom:0;width:420px;z-index:70;background:#15171b;border-left:1px solid #2a2d33;color:#d7dae0;display:none;flex-direction:column;padding:10px 12px;font-family:var(--f)}
body.cp-open .cpanel{display:flex}
.cpanel .cph{display:flex;align-items:center;gap:6px;font-size:12.5px;flex-wrap:nowrap;white-space:nowrap}.cph b{overflow:hidden;text-overflow:ellipsis}.cph .seg{padding:3px 7px;font-size:10.5px;white-space:nowrap}.cpanel .seg{padding:3px 8px;cursor:pointer;border:1px solid #2f333a;border-radius:8px;background:#111317;color:#aab0bb;font-size:11px}
.cpanel .cpl{flex:1;overflow:auto;display:flex;flex-direction:column;gap:6px;margin-top:8px}
.cpanel .cpi{padding:6px 8px;border:1px solid #23262c;border-radius:8px;background:#111317;display:grid;gap:3px}
.cpanel .cpk{font-family:var(--m);font-size:10px;color:#8a8f99}
.cpanel input{width:100%;padding:5px 8px;border:1px solid #2a2d33;border-radius:6px;background:#0f1114;color:#e8eaef;font-size:12px;font-family:inherit}
.cpanel .cpx{height:130px;margin-top:8px;font-family:var(--m);font-size:10.5px;background:#0f1114;color:#c9ced8;border:1px solid #2a2d33;border-radius:8px;padding:8px}

/* ── mobil ── */
@media (max-width:900px){
  .top{padding:10px 14px;gap:8px}.brand small{display:none}.top .pill.mono span.lbl{display:none}
  #stage{height:58vh;bottom:auto}.vig{background:linear-gradient(180deg, rgba(7,12,18,.15) 0, rgba(7,12,18,.1) 34%, rgba(7,12,18,.92) 56%, var(--bg-0) 62%)}
  .hero{width:auto;padding:56vh 14px 20px;min-height:0;justify-content:flex-start}
  h1{font-size:28px}.tele{grid-template-columns:1fr 1fr}.tele .ip{grid-column:1/-1}
  .form,.form.two,.form.two.seg{grid-template-columns:1fr}.btn.go{width:100%;min-height:52px}
  .res{left:0;right:0;top:auto;bottom:0;width:auto;max-height:64vh;border-radius:18px 18px 0 0;transform:translateY(24px)}
  .scrolldown{display:none}.mapctl{right:12px;bottom:auto;top:calc(58vh - 66px);display:grid;grid-template-columns:repeat(4,auto);justify-content:end;gap:4px 6px}.mapctl .legend{order:2;grid-column:1/-1;justify-self:end;margin:0;gap:10px;font-size:10.5px}.protobar{left:12px;bottom:12px;top:auto;transform:none;z-index:5}.demo{left:8px;right:8px;bottom:56px;top:auto;transform:none;width:auto}.samples{gap:4px}
  .cta .box{grid-template-columns:minmax(0,1fr)}.login{width:100%;top:auto;max-height:92%;border-left:none;border-top:1px solid var(--bd-2);border-radius:18px 18px 0 0;transform:translateY(102%)}
  .cpanel{width:100%}
}
@media (prefers-reduced-motion: reduce){ .mark::before,.pill i.dot,.eyebrow i,.btn.go{animation:none} }

/* ── V5b: mérés-mód — a hős összecsukódik, a földgömb és az eredmény kap helyet ── */
.hero-top{display:flex;flex-direction:column;gap:14px;max-height:900px;opacity:1;transition:max-height .45s cubic-bezier(.2,.8,.2,1),opacity .3s,margin .45s;overflow:hidden}
body.measuring .hero-top{max-height:0;opacity:0;margin:0;pointer-events:none}
.hero>.trust.hero-top{flex-direction:row}
/* próba-címek */
.samples{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:10px}
.samples .sl{font-family:var(--m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut-2);margin-right:2px}
.chip{font-family:var(--m);font-size:11px;padding:4px 9px;border-radius:999px;border:1px solid var(--bd-2);background:rgba(14,24,34,.6);color:var(--mut);cursor:pointer;white-space:nowrap}
.chip:hover{color:var(--txt);border-color:var(--bd-cy)}.chip.on{color:var(--cy);border-color:var(--bd-cy);background:var(--cy-bg)}
.ferr{margin-top:8px;padding:8px 10px;border-radius:var(--r);border:1px solid rgba(255,61,85,.45);background:var(--rd-bg);color:#ffb3bd;font-size:12.5px}
.inp.bad{border-color:var(--rd);box-shadow:0 0 0 3px rgba(255,61,85,.15)}
.btn.go.flash{background:var(--gn);color:#04120a}
.minta{font-size:11px;color:var(--mut-2);font-family:var(--m);cursor:help;border-bottom:1px dotted var(--mut-2)}
.samplenote{margin-top:8px;padding:8px 10px;border-radius:var(--r);border:1px dashed var(--bd-2);color:var(--mut);font-size:12px}
.kv dd.miss{color:var(--yl)}
.kv dd .src{color:var(--mut);font-size:11.5px}
.verdict.info{background:rgba(0,229,255,.05)}.verdict.info .vi{background:var(--cy-bg);color:var(--cy-soft)}
/* demó-panel (prototípus-eszköz) */
.demo{position:fixed;left:50%;top:60px;transform:translateX(-50%);z-index:40;width:min(440px,calc(100vw - 24px));padding:12px 14px 14px;border:1px solid #2f333a;border-radius:12px;background:#15171b;color:#d7dae0;box-shadow:0 20px 50px rgba(0,0,0,.5);display:none;flex-direction:column;gap:6px;font-family:var(--f)}
body.demo-open .demo{display:flex}
.demo .dh{display:flex;align-items:center;gap:8px;font-size:13px}.demo p{margin:0 0 4px;font-size:11px;color:#8a8f99}
.demo .seg{padding:3px 8px;cursor:pointer;border:1px solid #2f333a;border-radius:8px;background:#111317;color:#aab0bb;font-size:11px}
.demo .section-title{color:#8a8f99}.demo .chip{background:#111317;border-color:#2a2d33;color:#aab0bb}.demo .chip.on{color:#62a8ff;border-color:#62a8ff;background:rgba(98,168,255,.1)}
.demo .chips{display:flex;gap:5px;flex-wrap:wrap}
/* városnevek a földgömbön (közelítve) */
#cities{position:fixed;inset:0;z-index:2;pointer-events:none}
.city{position:absolute;transform:translate(6px,-55%);font-family:var(--m);font-size:10px;color:rgba(255,224,180,.72);white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.city.t1{font-size:11px;color:rgba(255,232,196,.9);font-weight:600}.city.t3{font-size:9.5px;color:rgba(255,224,180,.55)}
@media (max-width:900px){ .hero-top{gap:10px} body.measuring .hero{padding-top:56vh} .city{font-size:9px} }

/* rövid képernyő (laptop, böngésző-sávval): a hős tömörebb, a jelmagyarázat elbújik */
/* ★ v0.10.54 (a user kérése: „ne lógjon le a lapról”): a „rövid képernyő” (tömör fej: kisebb cím, kétsoros bevezető) határa 820 → 880 px —
   hosszú szolgáltató-/városnévvel 821–880 px magasan a mérés-választó alja eddig a nézet alá került (mérve 1536×864: 28 px; utána ≥ 92 px
   tartalék — javito/_forras/belepo_meres_*.json) */
/* v0.10.55: a tömör fejben a bevezető első mondata, egészben (nincs „…”) */
@media (min-width:901px) and (max-height:880px){ .hero{padding-top:58px;padding-bottom:64px;gap:8px} .lead{font-size:13.5px;line-height:1.45;max-width:72ch;text-wrap:balance} .lead .l2{display:none} h1{font-size:clamp(26px,3vw,36px)} .tele{padding:9px 14px} .tele .ip .v{font-size:19px} .trust{font-size:11px;gap:12px} }
@media (min-width:901px) and (max-height:700px){ .hero{padding-top:56px;padding-bottom:60px;gap:8px} .eyebrow{display:none}
  /* 21. kör: nagyon alacsony asztali látótéren az IP-kártya KOMPAKT CSÍK (eddig teljesen rejtve volt): cím · szolgáltató · hely · út, egy sorban, feliratok nélkül */
  .tele{display:flex;flex-wrap:wrap;gap:4px 18px;padding:8px 14px;align-items:center}
  .tele>div{flex-direction:row;align-items:baseline;gap:6px;flex:0 1 auto}
  .tele .k{display:none} .tele .k.kk{display:flex} .tele .k.kk #tele-place-k{display:none}
  .tele .v{font-size:13px;margin:0} .tele .ip .v{font-size:16px} .tele .d{font-size:11px;white-space:nowrap}
  .tele .ip button{padding:0 5px;font-size:11px} }

/* görgetve a fejléc hátteret kap, hogy az alá csúszó tartalom (hős, mérés-választó) ne keveredjen a feliratokkal */
.top{transition:background .25s,border-color .25s;border-bottom:1px solid transparent}
body.scrolled .top{background:linear-gradient(180deg, rgba(7,12,18,.96), rgba(7,12,18,.86));backdrop-filter:blur(14px);border-bottom-color:var(--bd)}
/* a szirmokat ne takarják a címkék: közeli te/mérő-szerver párnál a mérő-szerver címkéje feljebb ül */
/* mélyen legörgetve (ajánló) az eredmény-ablak félrehúzódik, hogy ne takarja az ajánlót; visszagörgetve visszajön */
@media (min-width:901px){ body.scrolled-deep .res.on{transform:translateX(110%);opacity:0;pointer-events:none} }

/* ── V5c · címke-elhelyezés 4 irányban (a rajz fókuszától távol), vezetővonallal ── */
.gtag::after{content:"";position:absolute;background:var(--bd-2)}
.gtag.p-t{transform:translate(-50%,-140%)}.gtag.p-t::after{left:50%;bottom:-8px;top:auto;width:1px;height:8px}
.gtag.p-b{transform:translate(-50%,40%)}.gtag.p-b::after{left:50%;top:-8px;bottom:auto;width:1px;height:8px}
.gtag.p-l{transform:translate(-106%,-50%)}.gtag.p-l::after{left:auto;right:-8px;top:50%;bottom:auto;width:8px;height:1px}
.gtag.p-r{transform:translate(6%,-50%)}.gtag.p-r::after{left:-8px;right:auto;top:50%;bottom:auto;width:8px;height:1px}
/* rajzolás közben az eredmény-ablak áttetszőbb: a fókusz a földgömbön */
body.routing .res{background:rgba(12,20,29,.40)}
/* ── görgetősávok a design szerint (vékony, sötét sáv, cián fogantyú) — az egész oldalon ── */
html{scrollbar-width:thin;scrollbar-color:rgba(91,214,255,.32) rgba(10,17,25,.9)}
*{scrollbar-width:thin;scrollbar-color:rgba(91,214,255,.32) transparent}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(91,214,255,.28);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(91,214,255,.5);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
.res .rb,.term,.json,.cpanel .cpl{scrollbar-gutter:stable}

.gtag.p-tl{transform:translate(-100%,-150%)}.gtag.p-tr{transform:translate(0,-150%)}.gtag.p-bl{transform:translate(-100%,50%)}.gtag.p-br{transform:translate(0,50%)}
.gtag.p-tl::after,.gtag.p-tr::after,.gtag.p-bl::after,.gtag.p-br::after{display:none}

.lnk{all:unset;cursor:pointer;color:var(--cy-soft);font-size:11px;border-bottom:1px dotted var(--cy-soft)}.lnk:hover{color:var(--cy)}

/* ── V5d · mérés alatt a mérés-választó keskeny sávvá csukódik (bal alul), hogy a földgömbön minden végpont látszódjon ── */
.tcompact{display:none;align-items:center;gap:10px;font-size:12.5px}
.tcompact b{font-weight:700}.tcompact .tg{font-family:var(--m);color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.tcompact svg.i{color:var(--cy)}.tcompact .btn{margin-left:auto}
@media (min-width:901px){
  body.measuring .hero{justify-content:flex-end;padding-bottom:64px}
  body.measuring:not(.tools-open) .tools{padding:10px 14px;width:min(52vw,560px)}
  body.measuring:not(.tools-open) .tfull{max-height:0;opacity:0;margin:0;pointer-events:none}
  body.measuring:not(.tools-open) .tcompact{max-height:60px;opacity:1;pointer-events:auto}
}
.pill.on{border-color:var(--bd-cy);background:var(--cy-bg);color:var(--cy)}

/* ── V5e · a mérés-választó összecsukása/visszanyílása animálva (alulról felfelé bomlik ki) ── */
.tfull{max-height:900px;opacity:1;overflow:hidden;transition:max-height .55s cubic-bezier(.2,.8,.2,1),opacity .35s ease .1s}
.tcompact{display:flex;max-height:0;opacity:0;overflow:hidden;pointer-events:none;transition:max-height .35s cubic-bezier(.2,.8,.2,1),opacity .25s}
body.measuring.tools-open .tools{box-shadow:0 0 0 1px var(--bd-cy),0 24px 60px rgba(0,0,0,.45),0 0 40px rgba(0,229,255,.10);animation:toolsIn .6s cubic-bezier(.2,.8,.2,1)}
@keyframes toolsIn{0%{transform:translateY(14px)}100%{transform:none}}
.step .loc{color:var(--mut-2);font-size:10.5px;margin-left:6px;white-space:nowrap}
/* mérnöki nézet: parancsok a saját gépre + nyers válasz, másolással */
.cmd{position:relative;background:#050a0f;border:1px solid var(--bd-2);border-radius:var(--r);padding:10px 12px;font-family:var(--m);font-size:11px;color:#cfe3ee;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}
.cmd .cp{position:absolute;top:6px;right:6px}
.cmd b{color:var(--cy-soft);font-weight:600}.cmd .c{color:var(--mut-2)}
.json{position:relative}.json .cp{position:absolute;top:6px;right:6px}
.btn.xs{padding:3px 8px;font-size:10.5px;border-radius:7px}
.engnote{font-size:11.5px;color:var(--mut);line-height:1.45;margin-top:2px}
/* szövegkönyv: kijelölés-mód */
body.cp-pick{cursor:crosshair}body.cp-pick .cpanel{cursor:default}
.cpanel .seg.on{color:#62a8ff;border-color:#62a8ff;background:rgba(98,168,255,.1)}
.cpanel .cpi.hit{border-color:#62a8ff;box-shadow:0 0 0 2px rgba(98,168,255,.25);background:#14202c}
.cp-flash{outline:2px solid rgba(98,168,255,.9);outline-offset:2px;border-radius:4px;transition:outline-color .8s}

.pickbar{position:fixed;left:50%;top:60px;transform:translateX(-50%);z-index:71;display:none;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#15171b;border:1px solid #62a8ff;color:#d7dae0;font-size:12.5px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
body.cp-pick .pickbar{display:flex}.pickbar .seg{padding:3px 8px;cursor:pointer;border:1px solid #2f333a;border-radius:8px;background:#111317;color:#aab0bb;font-size:11px;margin-left:6px}

/* mérés alatt a bal oldali sötétítés (a hős olvashatóságáért) visszavéve: a térkép és a vonal világos maradjon */
.vig{transition:opacity .6s}body.measuring .vig{opacity:.28}

/* ── V5h · mérés-bemutató a mérés-választóban (a főoldali minta: kis felirat · cím · 1 mondat · mérnöki sor) ── */
.tintro{display:none;flex-direction:column;gap:6px;padding:4px 2px 12px;border-bottom:1px solid var(--bd);margin-bottom:12px}
body[data-variant="B"] .tintro:not(:empty){display:flex}
.tintro .eyebrow{font-size:10px}
.tintro h3{margin:0;font-size:clamp(17px,1.5vw,21px);line-height:1.15;letter-spacing:-.01em;font-weight:700;color:#fff}
.tintro h3 em{font-style:normal;color:var(--cy)}
.tintro p{margin:0;color:var(--mut);font-size:12.5px;line-height:1.5;max-width:60ch}
.tintro .eng-line{font-family:var(--m);font-size:10.5px;color:var(--mut-2);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tintro .eng-line .mark,.eng-line .mark{all:unset;color:var(--cy);font-family:var(--m);font-size:15px;line-height:1;font-weight:700;animation:markPulse 2.2s ease-in-out infinite}.eng-line .mark::before{content:none}@keyframes markPulse{0%,100%{opacity:.55}50%{opacity:1}}
.tintro.in{animation:tintroIn .38s cubic-bezier(.2,.8,.2,1)}
@keyframes tintroIn{0%{opacity:0;transform:translateY(-6px)}100%{opacity:1;transform:none}}
@media (min-width:901px) and (max-height:880px){ .tintro p{display:none} }
@media (min-width:901px){ body.tools-szuk .tintro .eng-line{display:none} }
/* 15. kör: Készlet-kapcsolópár a natív lista helyett (a lista nem illett a designhoz, és a felirat is levágódott) */
.segc{display:flex;border:1px solid var(--bd-2);border-radius:var(--r);overflow:hidden;background:rgba(14,24,34,.7)}
.segc button{all:unset;flex:1 1 0;min-width:0;cursor:pointer;padding:11px 6px;font-family:var(--m);font-size:12px;color:var(--mut);text-align:center;white-space:nowrap}
.segc button+button{border-left:1px solid var(--bd-2)}
/* v0.10.6: a „252 port” felirat 5 px-szel kilógott az asztali szegmensből (mérve: scrollWidth−clientWidth=5;
   a KÉSZLET mező a kétoszlopos űrlapon szűk). Szűkebb vízszintes padding + 11,5 px betű — a felirat
   őszinte marad („252 port”, nem „Teljes”), és elfér. Mobilon a gomb 166 px, ott eddig sem lógott ki. */
#f-setseg button{padding:11px 4px;font-size:11.5px}
.segc button.on{background:var(--cy-bg);color:var(--cy)}
/* 15. kör: 1440 px alatt a mérés-választó és az eredmény-ablak együtt túl széles volt (1366: címkék a dobozon, 1280: 198 px sáv) */
@media (min-width:901px) and (max-width:1440px){ .tools{width:min(44vw,520px)} .res{width:400px} }
@media (min-width:1201px) and (max-width:1440px){ .form.two .btn.go{grid-column:1/-1;justify-content:center} }   /* G9 (v0.10.24): 1280/1366-on a Cél-mező 60–100 px volt („46.…”) — a gomb külön sorba, mint 901–1200 között */
@media (min-width:901px) and (max-width:1300px){ .tools{width:min(42vw,480px)} .res{width:380px} .tab{padding:8px 8px;font-size:12px} .tab svg.i{display:none} }   /* F5: 452 px belső szélességen a fülek ikon nélkül férnek egy sorba (mérve: ikonnal 510 px) */
/* 16. kör: J1 — a hős kártyája 1600 px alatt 2×2 rács (négy szűk oszlop helyett); J2 — a nem mért TLS-verziók sora */
@media (min-width:901px) and (max-width:1600px){ .tele{grid-template-columns:1fr 1fr} }
.unm{flex-basis:100%;font-family:var(--m);font-size:10.5px;color:var(--mut);margin-top:6px}
.kv dd a{color:var(--cy);text-decoration:none;border-bottom:1px dotted var(--cy)}
/* 19. kör — MOBIL MEGJELENÉS (≤ 900 px) + keskeny asztali/tablet (901–1200 px). Az asztali (> 1200 px) szabályokhoz nem nyúl. */
@media (max-width:900px){
  /* Fejléc: egy sor, semmi sem lóg ki. A „· mérő-szerver”, a „· másolás” és a billentyű-tipp elrejtve, a nyelv csak „HU”. */
  .top{padding:8px 10px;gap:6px}
  .top .brand small{display:none}
  .top .brand{gap:6px}
  .top .pill{padding:6px 9px;font-size:11.5px;gap:6px;white-space:nowrap;flex-shrink:0}
  #ippill .lbl{display:none}
  #langpill{font-size:0;padding:6px 8px} #langpill::before{content:"HU";font-size:11.5px;font-weight:600}
  .top .kbd{display:none}
  /* A földgömb sáv a felső 48 %-ban; a térkép-gombok a sáv aljához igazítva, a hős-szöveg alatta kezdődik — nincs átfedés. */
  .hero{padding:48vh 14px 20px;gap:12px}
  .vig{background:linear-gradient(180deg, rgba(7,12,18,.12) 0, rgba(7,12,18,.08) 28%, rgba(7,12,18,.92) 46%, var(--bg-0) 52%)}
  .mapctl{right:10px;left:auto;top:calc(48vh - 66px);bottom:auto;gap:4px 6px}   /* F12: a jelmagyarázat a gombsor ALATT (rács, 2. sor), a blokk alja marad a sáv aljánál */
  .mapctl .pill{padding:6px 9px;font-size:11px}
  /* Prototípus-gombok: kis ikon-pillek jobbra lent, halványan — nem takarják a kártyát. */
  .protobar{left:auto;right:10px;top:54px;bottom:auto;transform:none;gap:6px;opacity:.75;z-index:6}
  .protobar .pill{padding:5px 8px;font-size:10.5px}
  body.measuring .protobar,body.measuring .mapctl{display:none}
  /* Mérés-választó: a fülsor egy sorban, ujjal görgethető; az űrlap egymás alatt; a gomb 44 px. */
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:0 4px}
  .tabs::-webkit-scrollbar{display:none}
  .tab{padding:10px 10px;font-size:12.5px;min-height:40px}
  .form,.form.two,.form.two.seg{grid-template-columns:1fr}
  .btn.go{min-height:44px;justify-content:center}
  .segc button{padding:12px 6px}
  .chip{min-height:32px;display:inline-flex;align-items:center}
  .tintro p{font-size:13px}
  .eng-line,.tintro .eng-line{font-size:11px;flex-wrap:nowrap;align-items:flex-start}
  /* Földgömb-címkék: kisebbek, csak a név (a második sor a szűk képernyőn zaj). */
  .gtag{padding:4px 8px;font-size:11px;max-width:60vw}
  .gtag b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .gtag small{display:none}
  /* Eredmény-lap: alsó lap, a fejléce nem törik, a mátrix 4 oszlop, a parancsok görgethetők. */
  .res{max-height:66vh}
  .res .rh{gap:6px} .res .rh .tg{max-width:34vw}
  .mx{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cmd,.json{font-size:11px}
  .trust{font-size:11px;gap:10px}
  .kv dt{font-size:10.5px}
}
@media (max-width:360px){
  h1{font-size:25px}
  .mx{grid-template-columns:repeat(3,minmax(0,1fr))}
  #langpill{display:none}
  .mapctl .pill{padding:6px 7px;font-size:10.5px}
}
/* Fekvő tablet / keskeny asztali (901–1200 px): a mérés-választó űrlapja két sorba — a Cél mező ne nyomódjon össze, a gomb teljes szélességű. */
@media (min-width:901px) and (max-width:1200px){
  .form{grid-template-columns:1fr} .form .btn.go{grid-column:1/-1;justify-content:center}
  .form.two{grid-template-columns:1fr 140px} .form.two .btn.go{grid-column:1/-1}
  .hero{width:min(50vw,560px);padding-left:26px}
}

@media (max-width:900px){
  /* Görgetés után a földgömb-címkék elhalványulnak: a rögzített címkék ne lógjanak a görgetett tartalomra. */
  body.scrolled-deep .gtag,body.scrolled-deep .mapctl,body.scrolled-deep .protobar{opacity:0;pointer-events:none;transition:opacity .3s}
  /* Tapintófelület: a fejléc-pillek, a nézet-kapcsoló, a másoló gombok és a chipek legalább 36 px magasak. */
  .top .pill,.lvl button,.btn.xs,.cp,.chip,#ipcopy,#toolsEdit,#btnRisk{min-height:36px}
  .lvl button{padding:8px 12px}
  /* Apró betűk: a laptopon 9–10,5 px-es feliratok mobilon 11 px. */
  .tele .k,.eyebrow,.section-title,.city,.cell small,.cell .n,.kv dt,.gtag small,.cpk{font-size:11px}
}
@media (max-width:900px) and (max-height:520px){
  /* Fekvő telefon: kisebb földgömb-sáv, magasabb eredmény-lap. */
  .hero{padding-top:40vh}
  .mapctl{top:calc(40vh - 44px)} .mapctl .legend{display:none}   /* F12: fekvő telefonon nincs hely a jelmagyarázatnak */
  .vig{background:linear-gradient(180deg, rgba(7,12,18,.12) 0, rgba(7,12,18,.08) 22%, rgba(7,12,18,.92) 38%, var(--bg-0) 44%)}
  /* Fekvo telefonon az eredmeny-lap JOBB OLDALI panel (mint asztalon): a foldgomb es az ut balra latszik, nem 22 px marad neki. */
  .res{left:auto;right:10px;top:60px;bottom:10px;width:min(440px,58vw);max-height:none;border-radius:14px;transform:none}
  body.measuring .hero{padding-top:100vh} /* meres alatt a valaszto a hajtas ala: a bal oszlop a foldgombe */
  .res .rh .tg{max-width:30vw}
}
/* 19. kör b — a záró felmérés maradékai (≤ 900 px) */
@media (max-width:900px){
  /* tapintófelületek: minden gomb legalább 36 px, a fő gombok 40 */
  .mapctl .pill,.protobar .pill,#r-foot .btn,.res .rh .x,#r-close,#cpbtn,#demobtn,#btnRisk,#toolsEdit{min-height:36px}
  .res .rh .x,#r-close{min-width:36px;display:grid;place-items:center}
  #ipcopy{min-width:36px;min-height:36px;display:inline-grid;place-items:center}
  #geoBtn{display:inline-block;padding:8px 0;min-height:36px;line-height:20px}
  #r-foot .btn{padding:9px 14px}
  /* betűk: az eredmény celláinak és kulcsainak, a szövegkönyv kulcsainak minimuma 11 px */
  .res .cell .t,.res .cell .s,.res .cell span,.res .k,.res .kv dt,.res .t,#tools label,.field label,.form label,.city,.city.t3,.cpanel .cpk,.cpk,.kbd{font-size:11px !important}
  /* a fülsor ujjal görgethető — a jobb szélen elhalványítás jelzi, hogy van tovább */
  .tabs{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,#000 88%,transparent 100%);padding-right:24px}
}
/* 20. kör — IP-kártya: rendezett rács minden méreten (a ≥ 1600 px-es négyoszlopos asztali nézet változatlan) */
.tele>div{display:flex;flex-direction:column;gap:2px;min-width:0;align-self:start}
.tele .k.kk{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tele .k.kk .lnk{font-size:10.5px;letter-spacing:0;text-transform:none;font-family:var(--f);white-space:nowrap}
@media (min-width:901px) and (max-width:1600px){
  .tele{grid-template-columns:1fr 1fr;align-items:start;gap:10px 18px}
  .tele .ip{grid-column:auto}
  .tele .d{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tele .k{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:900px){
  .tele{grid-template-columns:1fr 1fr;align-items:start;gap:10px 14px}
  .tele .ip{grid-column:auto} .tele .ip .v{font-size:18px}
  /* sorrend: [publikus cím | út a szerverig] [szolgáltató | hely] — nincs üres cella */
  .tele>div:nth-child(4){order:2} .tele>div:nth-child(2){order:3} .tele>div:nth-child(3){order:4}
  .tele .d{white-space:normal}
  .tele .k.kk{flex-wrap:wrap;row-gap:2px}
}
@media (max-width:360px){ .tele{grid-template-columns:1fr} .tele>div{order:0 !important} }
/* 20. kör — városnevek a repülés alatt; mobilon a rajzolás alatt alacsonyabb lap */
#cities{transition:opacity .25s} body.flying #cities{opacity:0}
@media (max-width:900px){ .res{transition:max-height .35s ease,transform .3s} body.routing .res{max-height:42vh} }
@media (max-width:900px) and (max-height:520px){ body.routing .res{max-height:none} }
/* 21. kör — IP-kártya C: kiemelt cím + címke–érték felsorolás (a régi .tele-szabályokat a .tele.c felülírja, minden méreten) */
.tele.c{display:grid;grid-template-columns:1fr;gap:10px;align-items:start;padding:14px 18px}
.tele.c .big{display:flex;flex-direction:column;gap:2px;min-width:0}
.tele.c .big .k{font-size:10px;letter-spacing:.16em}
.tele.c .big .v{font-family:var(--m);font-weight:700;font-size:30px;line-height:1.1;color:#fff;display:flex;align-items:center;gap:10px;margin:4px 0 2px;white-space:normal;overflow:visible}
.tele.c .big .v button{all:unset;cursor:pointer;color:var(--mut);font-size:13px;border:1px solid var(--bd-2);border-radius:6px;padding:2px 8px}
.tele.c .big .d{font-size:12px;color:var(--mut)}
.tele.c .list{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:baseline}
.tele.c .row{display:contents}
.tele.c .row .k{font-size:9.5px;letter-spacing:.14em;white-space:nowrap}
.tele.c .row .rv{font-size:12.5px;color:var(--mut);min-width:0}
.tele.c .row .rv b{color:#fff;font-family:var(--m);font-weight:600;font-size:13px}
.tele.c .row .rv small{font-size:11px;color:var(--mut)} .tele.c .row .rv small::before{content:" · "}
.tele.c .row .rv .lnk{font-size:11px;white-space:nowrap;margin-left:4px}
@media (max-width:1600px){ .tele.c .big .v{font-size:26px} }
@media (max-width:900px){ .tele.c{padding:12px 14px;gap:10px} .tele.c .big .v{font-size:24px} .tele.c .list{gap:6px 10px} .tele.c .row .k{min-width:78px;white-space:normal} .tele.c .row .rv small{display:inline} }
/* 21. kör: alacsony asztali látótéren (≤ 820 px) a C-kártya kicsit tömörebb, hogy a számláló-sor a hajtás fölött maradjon */
@media (min-width:901px) and (max-height:880px){ .tele.c{padding:10px 16px;gap:6px} .tele.c .big .v{font-size:24px;margin:2px 0 0} .tele.c .list{gap:4px 14px} .hero{padding-bottom:52px} }
/* ≤ 700 px magas asztali nézet: tömör csík — v0.10.55: a ≤ 880-as szabály UTÁN (eddig az felülírta) */
@media (min-width:901px) and (max-height:700px){
  .tele.c{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:8px 14px}
  .tele.c .big{flex-direction:row;align-items:baseline;gap:10px} .tele.c .big .k{display:none} .tele.c .big .v{font-size:16px;margin:0} .tele.c .big .d{font-size:11px;white-space:nowrap}
  .tele.c .list{display:flex;flex-wrap:wrap;gap:4px 14px} .tele.c .row{display:flex;gap:6px;align-items:baseline} .tele.c .row .k{display:none}
  .tele.c .row .rv{font-size:11.5px;white-space:nowrap} .tele.c .row .rv b{font-size:12.5px}
}
@media (max-width:900px){ .tele.c #geoBtn{display:inline-flex;align-items:center;width:max-content;margin:6px 0 0;padding:6px 12px;min-height:36px;line-height:1;border:1px solid var(--bd-cy);border-radius:999px;background:rgba(0,229,255,.06)} .tele.c .row .rv small{white-space:normal;display:block;margin-top:2px} .tele.c .row .rv small::before{content:""} }

/* 2b (hub): a prototípus-eszközök — ✎ Szövegek, ⚙ Demó — csak ?demo=1 mellett (body.proto) */
body:not(.proto) .protobar{display:none!important}
body:not(.proto) .demo{display:none!important}
body:not(.proto) .cpanel{display:none!important}

/* v0.10.9 (terepi lelet: IPv6-os látogató mobilon) — a 39 karakteres IPv6-cím kifutott a kártyából és a fejléc-pillből.
   Törés > csonkítás > túlcsordulás: a kártyán a cím TÖRIK (v6-nál kisebb betűvel), a fejléc-pillben csonkul
   (a teljes cím a kártyán látszik, és a másolás a teljeset adja). */
.tele .big .v{flex-wrap:wrap;min-width:0}
#ipv{min-width:0;overflow-wrap:anywhere}
body.v6 .tele .big .v{font-size:clamp(15px,4.3vw,22px);line-height:1.3}
.top #ippill{flex:0 1 auto;min-width:0;max-width:min(46vw,440px);overflow:hidden}   /* zsugorodik: a nyelv- és a belépés-gomb NEM csúszhat le a képernyőről */
.top{min-width:0}.top .brand,.top #langpill,.top [data-open-login]{flex:none}
#ippill-v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* v0.10.11 (élesben mérve a v0.10.9-en): az IPv6-os NÉVREKORD 53 karakter töréspont nélkül
   („20014C4E210DA6015DBAEF9E0A4B7129.dsl.pool.telekom.hu”) — kifolyt a kártyából (.tele 471 px vs. 346). A sor értékei törhetők. */
.tele .row{min-width:0}.tele .rv{min-width:0}.tele .rv b,.tele .rv small{overflow-wrap:anywhere}
/* v0.10.13 (a user telefonos képe): a „+ N további port a naplóban” felirat `float:right` volt — keskeny képernyőn a következő sorba esett,
   és a mátrix rácsa kitért előle: a hely 26–39%-ára nyomódott össze (mérve 360–430 px-en, FUTÁS KÖZBEN), a feliratok egymásba folytak.
   A fejléc törhető sor lett; a cella szövege a végső biztosíték szerint csonkul, nem folyik ki. */
.mxhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px}
.mxhead>span{min-width:0}
.mx{clear:both}.mx .cell{min-width:0}.mx .cell .n,.mx .cell .s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* v0.10.14 (4. kör): a levél-védelem SÁRGA sora — a user döntése: az SPF, ami senkit nem tilt, figyelmeztetés, nem hiba */
.rec.warn .ty{background:var(--yl-bg);color:var(--yl)}.rec.warn .ttl{color:var(--yl)}
.res .recs{display:flex;flex-direction:column;gap:6px}
/* a hosszú érték (MX-gépnév, névszerver-felsorolás, SPF) TÖRIK, nem csonkul — a jóváhagyott mockup szerint; mérve 360–412 px-en */
.res .rec{align-items:flex-start}.res .rec .val{min-width:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.35}
/* v0.10.16 (5. kör): a TLS-verziók jelvényei — a SZÍN is állítás (a user döntése): a LETILTOTT régi verzió jó hír → szürke,
   az ELFOGADOTT régi verzió → sárga figyelmeztetés, a létrejött modern kézfogás → zöld, a „nem tudjuk” szaggatott keret */
.vchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.vchips span{font-family:var(--m);font-size:11px;padding:4px 9px;border-radius:999px;border:1px solid var(--bd-2);color:var(--mut);white-space:nowrap}
.vchips .on{border-color:rgba(0,230,118,.45);background:rgba(0,230,118,.08);color:var(--gn)}
.vchips .off{color:var(--mut-2)}
.vchips .risk{border-color:rgba(255,209,102,.6);background:var(--yl-bg);color:var(--yl)}
.vchips .unk{border-style:dashed}
/* KIS KÖR (v0.10.21, F6): a csak-olvasható cél-mező (a saját cím) nem vágja el az IPv6-ot szó nélkül — ellipszis + a teljes cím a súgóban (title) */
.inp[readonly]{text-overflow:ellipsis}
/* KIS KÖR (F1): a bezárás utáni görgetés célja az űrlap — a rögzített fejléc alá */
#tools{scroll-margin-top:64px}

/* ── F-KÖR (v0.10.22, 2026-09-22): a felülvizsgálat nyitott tételei — jóváhagyott mockup: mockups/belepo_F_lista.html ── */
/* F10: mobilon az IPv6-cím két sorba törik — a másolás-gomb a cím UTOLSÓ sorának végén, kisebb ikonként (eddig egyedül, külön sorban, 36 px-es négyzetként). */
@media (max-width:900px){
  body.v6 .tele.c .big .v{display:block;overflow-wrap:anywhere}
  body.v6 .tele.c .big .v #ipv{display:inline}
  body.v6 .tele.c .big .v #ipcopy{display:inline-grid;place-items:center;vertical-align:middle;min-width:32px;min-height:32px;margin-left:6px;font-size:12px;padding:0;line-height:1}
}
/* F2: mobilon az eredmény-lap tetején fogantyú; a fogantyún vagy a fejlécen indított LEFELÉ húzás bezár (az ✕ marad; a tartalom görgetése nem zár). Fekvő telefonon (jobb oldali panel) nincs. */
.res .grab{display:none}
@media (max-width:900px) and (min-height:521px){ .res .grab{display:block;flex:none;width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.35);margin:8px auto 0} .res .grab,.res .rh{touch-action:none} }
/* F8/1: a kártya MINDKÉT címcsaládot mutatja; az „Inkább IPv6 / IPv4” választó a fejléc-sorban — a másik család címe külső forrásból, csak megjelenítésre. */
.tele.c .big .k.kk{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;row-gap:4px}
.fam{display:inline-flex;gap:4px;align-items:center;letter-spacing:0;text-transform:none}
.fam[hidden]{display:none}   /* G7 (v0.10.24): a fenti display felülírta a `hidden`-t — a választó kattintás ELŐTT, üresen látszott */
.fam .fk{font-family:var(--m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-2);margin-right:2px}
.fam .pill{padding:2px 8px;font-size:10.5px;font-weight:600;letter-spacing:0}.fam .pill:disabled{opacity:.45;cursor:not-allowed}
.tele.c .big .d b.ipm{font-family:var(--m);color:var(--txt);font-weight:600;overflow-wrap:anywhere}
@media (max-width:900px){ .fam .pill{min-height:30px;padding:4px 10px} }
/* F9: belépve a lábléc gombja link (a vezérlőpult figyelője, a céllal előtöltve) — ugyanúgy néz ki, mint a gomb */
.rf a.btn{text-decoration:none}

/* ═══ G11–G12 (v0.10.25, 2026-09-23 — a user jóváhagyta: „jó a keret”; mockup: mockups/belepo_g11_nagykepernyo.html) ═══
   Nagy képernyőn a rögzített elemek egy KÖZÉPRE igazított, legfeljebb 1680 px széles keretben; a földgömb teljes képernyős marad.
   --gx: a keret bal / jobb széle. 1800 px alatt SEMMI nem változik. Mérve (v0.10.24): 2K-n a hős 40 px-nél, a lap alja 716 px-nél kezdődött
   (4K-n 40 ↔ 1356); az eredmény-ablakban 2K-n 592, 4K-n 1312 px üres rés volt a tartalom és a gombok között → az ablakok a TARTALOMHOZ igazodnak.
   G13 (4K 100 %-on nagyítás): a user döntése „A” — nem építjük be (4K-n az OS 150 %-os skálázása a szokásos, ott ez a 2K-s elrendezés). */
@media (min-width:1800px){
  /* ⚠ MÉRVE (a user Chrome-ja, 10 px-es klasszikus görgetősáv): a `100vw` a sávot is beleszámolja, a `margin:auto` (a lap alja) nem → 5 px eltérés.
     A `50%` elemenként a tényleges befoglaló szélességhez igazodik (a rögzített elemeknél a sáv nélküli nézethez) → minden él egy vonalban. */
  :root{--gx:max(0px, calc(50% - 840px))}
  .top{padding-left:calc(var(--gx) + 26px);padding-right:calc(var(--gx) + 26px)}
  .hero{width:calc(var(--gx) + 626px);padding-left:calc(var(--gx) + 26px)}
  .res{right:calc(var(--gx) + 26px);bottom:auto;max-height:calc(100vh - 160px)}
  .mapctl{right:calc(var(--gx) + 26px)}
  .login{top:72px;right:calc(var(--gx) + 26px);bottom:auto;max-height:calc(100vh - 144px);overflow:auto;border:1px solid var(--bd-2);border-radius:var(--r-lg);
         transform:translateX(calc(100% + 50vw))}   /* a transzformációban a % a panel SAJÁT szélessége → a keret széle 50vw-vel biztosan kívül */
  body.login-open .login{transform:none}
  .cta,footer{max-width:1680px}
}

/* ═══ v0.10.54 (javító kör, 8. pont, „C”; mockup: 07-meroeszkozok/javito/_kepek/belepo_c_1440.png) ═══
   Asztalon a jelmagyarázat a hely-kártya ALJÁN („A földgömbön ● te ● mérő-szerver ● a mérés célja”), telefonon a gombsor alatt (fekvőben rejtve);
   két példány, a nem látszó display:none. Mérés közben a kártya összecsukódik → v0.10.55: akkor a gombsorbeli látszik. Az üres minta- és
   leírás-sor nem foglal helyet. ⚠ A kártya magassága a látogató adatától függ (hosszú név: +37 px) — mérve: javito/_forras/belepo_meres.py. */
.tele .legend{display:none}
@media (min-width:901px){
  .mapctl .legend{display:none}
  /* a .tele>div szabály (20. kör) oszlopba rendezné — itt sor kell */
  .tele.c .legend{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0;padding-top:10px;border-top:1px solid rgba(160,200,230,.1);font-size:11.5px;color:var(--mut)}
  .tele.c .legend>span{display:inline-flex;align-items:center}
  .tele.c .legend .lgk{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut-2);margin-right:2px}
  .tools{padding-bottom:10px}
}
@media (min-width:901px) and (max-height:880px){
  .hero-top:not(.trust){gap:10px}   /* a számláló-sor is .hero-top — annak a vízszintes közét nem bántjuk */
  .tele.c{padding-top:8px;padding-bottom:8px}
  .tele.c .legend{padding-top:8px}
}
/* ≤ 700 px magas asztali nézet (a kártya tömör csík): a jelmagyarázat a csík saját sora */
@media (min-width:901px) and (max-height:700px){ .tele.c .legend{flex-basis:100%;padding-top:6px;margin-top:2px} }
/* v0.10.55: mérés közben a jelmagyarázat a térkép-gomboknál */
@media (min-width:901px){ body.measuring .mapctl .legend{display:flex} }
/* v0.10.55: ha a választó lelógna (app.js fitTools), a minták egy sorban, oldalra görgethetők */
@media (min-width:901px){
  body.minta-sor .sdesc{display:none}
  body.minta-sor .samples{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px;-webkit-mask-image:var(--mk,none);mask-image:var(--mk,none)}
  body.minta-sor .samples::-webkit-scrollbar{display:none}
  body.minta-sor .samples>*{flex:none}
  .samples.jobbra{--mk:linear-gradient(90deg,#000 82%,transparent)}
  .samples.balra{--mk:linear-gradient(90deg,transparent,#000 14%)}
  .samples.balra.jobbra{--mk:linear-gradient(90deg,transparent,#000 14%,#000 82%,transparent)}
}

.samples:empty,.sdesc:empty{display:none}