/* ═══════════════════════════════════════════════════════════════════════
   SMARTSOLVEN PANEL — a „MŰHELY" arculat vezérlőpult-változata
   Egy ember, sok projekt: egy pillantásra látszódjon, mi ég.
   A narancs (--lang) CSAK teendőt jelöl. Ha minden narancs, semmi sem az.
   Nincs lekerekítés — a márka éles sarkú.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Archivo"; font-weight: 700 900; font-display: swap;
             src: url("/fonts/archivo-hu.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 100 900; font-display: swap;
             src: url("/fonts/InterTight-lat.woff2") format("woff2"); }

:root {
  --tus:    #0B0E13;   /* alap */
  --lap:    #10141B;   /* felület */
  --lap-2:  #151A23;   /* kiemelt felület, mezők */
  --lap-3:  #1B212C;   /* hover */
  --vonal:  rgba(147, 161, 180, .14);
  --vonal-2:rgba(147, 161, 180, .26);
  --szoveg: #E9EDF3;
  --halk:   #93A1B4;   /* 7,0:1 a --lap-on */
  --halkabb:#7D8BA0;   /* 5,1:1 a --lap-on — csak másodlagos adatnak */
  --kek:    #6E8FB8;   /* rajzvonal, méretvonal */
  --kek-vil:#9DB6D6;
  --lang:   #FF6A2B;   /* EGYETLEN jelszín: teendő */
  --lang-halvany: rgba(255, 106, 43, .12);
  --tinta:  #10141A;   /* sötét felirat a narancs gombon (6,46:1) */
  --ok:     #4CC38A;
  --figy:   #E8B04A;
  --baj:    #F2555A;
  --baj-halvany: rgba(242, 85, 90, .12);

  --kijelzo: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --kenyer:  "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --t1: 4px; --t2: 8px; --t3: 12px; --t4: 16px; --t5: 24px; --t6: 32px; --t7: 48px;
  --oldalsav: 236px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--tus); color: var(--szoveg);
  font: 400 14px/1.55 var(--kenyer); font-feature-settings: "tnum" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--kijelzo); letter-spacing: -.02em; line-height: 1.1; }
p { margin: 0; }
code, kbd, .mono { font-family: var(--mono); font-size: 12.5px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--kek-vil); outline-offset: 2px; }
::selection { background: rgba(110, 143, 184, .4); }

.ugras { position: absolute; left: -9999px; top: var(--t3); z-index: 100; background: var(--lang); color: var(--tinta); padding: var(--t2) var(--t3); font-weight: 700; }
.ugras:focus { left: var(--t3); }

.ikon { flex: none; vertical-align: -3px; }

/* ── Márka ─────────────────────────────────────────────────────────────── */
.marka { display: flex; align-items: center; gap: 10px; text-decoration: none;
         font-family: var(--kijelzo); font-weight: 900; font-size: 17px; letter-spacing: -.03em; }
.marka em { font-style: normal; color: var(--halk); margin-left: 3px; }
.marka small { font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--kek-vil);
               border: 1px solid var(--vonal-2); padding: 3px 5px 2px; margin-left: 2px; }
.marka--nagy { font-size: 22px; }
.jel { display: grid; grid-template: repeat(2, 1fr) / repeat(2, 1fr); gap: 2px; width: 16px; height: 16px; flex: none; }
.jel i { background: var(--szoveg); }
.jel i:nth-child(4) { background: var(--lang); }
.marka--nagy .jel { width: 20px; height: 20px; }

/* ── Váz ───────────────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: var(--oldalsav) minmax(0, 1fr); min-height: 100vh; }
.oldalsav {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--t5);
  padding: var(--t5) var(--t4); border-right: 1px solid var(--vonal); background: var(--tus);
}
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 var(--t3);
  text-decoration: none; color: var(--halk); font-weight: 500; border-left: 2px solid transparent;
}
.nav a:hover { color: var(--szoveg); background: var(--lap); }
.nav a.aktiv { color: var(--szoveg); background: var(--lap); border-left-color: var(--kek); }
.szamlalo { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center;
            background: var(--lang); color: var(--tinta); font: 700 11px/1 var(--mono); }
.tar-jel { margin-left: auto; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--halkabb); }
.tar-jel.nyitva { color: var(--figy); }
.oldalsav__lab { margin-top: auto; display: flex; flex-direction: column; gap: var(--t3); align-items: flex-start; }

.fo { min-width: 0; padding: var(--t6) clamp(16px, 3vw, 44px) var(--t7); }
.fej { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--t4); flex-wrap: wrap; margin-bottom: var(--t5); }
.fej h1 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 900; }
.fej__al { color: var(--halk); margin-top: 6px; }
.fej__muvelet { display: flex; gap: var(--t2); flex-wrap: wrap; align-items: center; }
.morzsa { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--halk); margin-bottom: var(--t3); display: flex; gap: 8px; }
.morzsa a { text-decoration: none; }
.morzsa a:hover { color: var(--szoveg); }

/* ── Címke (mono) ─────────────────────────────────────────────────────── */
.cimke { font: 500 10.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--halk); }

/* ── Gombok ───────────────────────────────────────────────────────────── */
/* ⚠️ A button a böngésző szürke dobozát kapja, ha nincs saját háttere. */
.gomb {
  -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 var(--t4); border: 1px solid var(--vonal-2); background: var(--lap-2);
  color: var(--szoveg); font-weight: 600; font-size: 13.5px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.gomb:hover { background: var(--lap-3); border-color: var(--halkabb); }
.gomb--fo { background: var(--lang); border-color: var(--lang); color: var(--tinta); }
.gomb--fo:hover { background: #FF7F48; border-color: #FF7F48; }
.gomb--vonal { background: transparent; }
.gomb--veszely { background: transparent; border-color: rgba(242, 85, 90, .5); color: #FF8A8D; }
.gomb--veszely:hover { background: var(--baj-halvany); border-color: var(--baj); }
.gomb--kicsi { min-height: 32px; padding: 0 var(--t3); font-size: 12.5px; }
.gomb--ikon { width: 34px; min-height: 34px; padding: 0; }
.gomb--teljes { width: 100%; }
.gomb[disabled] { opacity: .5; cursor: not-allowed; }
.link-gomb { -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; color: var(--halk); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-gomb:hover { color: var(--szoveg); }

/* ── Űrlap ───────────────────────────────────────────────────────────── */
.urlap { display: grid; gap: var(--t4); }
.urlap--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.urlap--2 .teljes { grid-column: 1 / -1; }
.mezo { display: grid; gap: 6px; }
.mezo > span:first-child { font-size: 12.5px; font-weight: 600; color: var(--halk); }
.mezo input, .mezo select, .mezo textarea, .kereso input {
  -webkit-appearance: none; appearance: none; width: 100%; min-height: 40px; padding: 9px 12px;
  background: var(--lap-2); border: 1px solid var(--vonal-2); color: var(--szoveg); border-radius: 0;
}
.mezo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A1B4' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
               background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 34px; }
.mezo select option { background: var(--lap-2); color: var(--szoveg); }
.mezo textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.mezo input:hover, .mezo select:hover, .mezo textarea:hover { border-color: var(--halkabb); }
.mezo input:focus, .mezo select:focus, .mezo textarea:focus, .kereso input:focus { outline: none; border-color: var(--kek-vil); box-shadow: 0 0 0 3px rgba(110, 143, 184, .22); }
.mezo [aria-invalid="true"] { border-color: var(--baj); }
.mezo small { color: var(--halkabb); font-size: 12px; }
.mezo--kod { font: 600 22px/1 var(--mono) !important; letter-spacing: .3em; text-align: center; }
.hiba { color: #FF8A8D; font-size: 12.5px; }
.jelolo { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.jelolo input {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; flex: none;
  border: 1px solid var(--vonal-2); background: var(--lap-2); display: grid; place-items: center; cursor: pointer;
}
.jelolo input:checked { background: var(--kek); border-color: var(--kek); }
.jelolo input:checked::after { content: ""; width: 10px; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0E13' stroke-width='4'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat; }

.kereso { position: relative; }
.kereso .ikon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--halk); pointer-events: none; }
.kereso input { padding-left: 36px; min-width: min(320px, 100%); }
.kereso kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 1px solid var(--vonal-2); padding: 1px 6px; color: var(--halk); font-size: 11px; }

/* ── Szűrősáv ─────────────────────────────────────────────────────────── */
.szurok { display: flex; gap: var(--t2); flex-wrap: wrap; align-items: center; margin-bottom: var(--t4); }
.chip {
  -webkit-appearance: none; appearance: none; min-height: 32px; padding: 0 var(--t3); background: transparent; border: 1px solid var(--vonal);
  color: var(--halk); cursor: pointer; font-size: 12.5px; font-weight: 500; display: inline-flex; gap: 6px; align-items: center;
}
.chip:hover { color: var(--szoveg); border-color: var(--vonal-2); }
.chip[aria-pressed="true"] { color: var(--szoveg); border-color: var(--kek); background: rgba(110, 143, 184, .12); }
.chip b { font: 600 11px/1 var(--mono); color: var(--halkabb); }
.szurok__tolt { flex: 1; }

/* ── Összegző számok (felül) ──────────────────────────────────────────── */
.szamok { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--vonal); margin-bottom: var(--t5); }
.szam { padding: var(--t4) var(--t4) var(--t3); border-right: 1px solid var(--vonal); position: relative; }
.szam:last-child { border-right: 0; }
.szam b { display: block; font: 900 30px/1 var(--kijelzo); letter-spacing: -.03em; margin-top: 8px; }
.szam--baj b { color: var(--baj); }
.szam--lang b { color: var(--lang); }
.szam--figy b { color: var(--figy); }
.szam small { color: var(--halkabb); font-size: 12px; }

/* ── Állapotpötty ─────────────────────────────────────────────────────── */
.pont { width: 8px; height: 8px; flex: none; display: inline-block; background: var(--halkabb); }
.pont--ok { background: var(--ok); }
.pont--warn { background: var(--figy); }
.pont--down { background: var(--baj); box-shadow: 0 0 0 3px var(--baj-halvany); animation: lukt 1.6s ease-in-out infinite; }
/* Nem üreges keret: az a teendők pipálónégyzetének látszana. */
.pont--unknown { background: rgba(147, 161, 180, .35); }
.kereso input { padding-right: 36px; }
.kilep-ikon { display: none; }
@media (max-width: 520px) {
  /* A szóvédjegy + négy ikon + kilépés 390 px-en nem fér el: a modul-jel marad. */
  .oldalsav .marka > span:not(.jel) { display: none; }
  .kilep-szoveg { display: none; }
  .kilep-ikon { display: inline-block; width: 18px; height: 18px; }
  .oldalsav__lab .link-gomb { display: grid; place-items: center; min-width: 40px; min-height: 40px; color: var(--halk); }
}
@keyframes lukt { 50% { box-shadow: 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .pont--down { animation: none; } }

.allapot { display: inline-flex; align-items: center; gap: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
           padding: 4px 7px 3px; border: 1px solid var(--vonal-2); color: var(--halk); white-space: nowrap; }
.allapot--eles { color: var(--ok); border-color: rgba(76, 195, 138, .35); }
.allapot--fejlesztes { color: var(--kek-vil); border-color: rgba(110, 143, 184, .45); }
.allapot--demo { color: #C3A6E8; border-color: rgba(195, 166, 232, .35); }
.allapot--leallt { color: #FF8A8D; border-color: rgba(242, 85, 90, .45); }
.allapot--lezart { color: var(--halkabb); }

/* ── Projektlista ─────────────────────────────────────────────────────── */
.csoport { margin-bottom: var(--t5); }
.csoport__fej { display: flex; align-items: center; gap: var(--t3); margin-bottom: var(--t2); }
.csoport__fej::after { content: ""; flex: 1; height: 1px; background: var(--vonal); }
.projektek { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1px; background: var(--vonal); border: 1px solid var(--vonal); }
.projekt {
  position: relative; display: flex; flex-direction: column; gap: var(--t3); padding: var(--t4); background: var(--lap);
  text-decoration: none; min-height: 158px; transition: background .12s;
}
.projekt:hover { background: #121720; }
.projekt:focus-visible { outline-offset: -2px; }
.projekt--down { box-shadow: inset 3px 0 0 var(--baj); }
.projekt--warn { box-shadow: inset 3px 0 0 var(--figy); }
.projekt__fej { display: flex; align-items: flex-start; gap: 10px; }
.projekt__fej .pont { margin-top: 6px; }
.projekt__nev { font: 800 16px/1.2 var(--kijelzo); letter-spacing: -.015em; }
.projekt__domain { color: var(--halk); font: 12px/1.3 var(--mono); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.projekt__fej .allapot { margin-left: auto; }
.projekt__stack { color: var(--halkabb); font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.projekt__lab { margin-top: auto; display: flex; gap: var(--t3); align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--halk); }
.projekt__lab .sep { width: 1px; height: 12px; background: var(--vonal-2); }
.teendo-jel { display: inline-flex; align-items: center; gap: 5px; color: var(--lang); font-weight: 600; }
.baj-szoveg { color: #FF8A8D; }
.tuske-jel { position: absolute; top: 8px; right: 8px; color: var(--halkabb); }

/* ── MÉRETVONAL — lejárat-idővonal ────────────────────────────────────── */
/* Keresztvégű vonal; a kitöltött szakasz a hátralévő idő (90 napra vetítve). */
.mv { position: relative; height: 10px; border-left: 2px solid var(--kek); border-right: 2px solid var(--kek); }
.mv::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; background: rgba(110, 143, 184, .28); }
.mv > span { position: absolute; left: 0; top: 3px; height: 4px; background: var(--kek); width: var(--kitolt, 0%); }
.mv--figy { border-color: var(--figy); } .mv--figy > span { background: var(--figy); }
.mv--baj { border-color: var(--baj); } .mv--baj > span { background: var(--baj); }
.mv--disz { margin: var(--t4) 0 var(--t5); } .mv--disz > span { width: 100%; }
.lejarat { display: grid; gap: 6px; min-width: 150px; }
.lejarat__fent { display: flex; justify-content: space-between; gap: var(--t2); font-size: 12px; }
.lejarat__fent b { font: 600 12px/1 var(--mono); }

/* ── Lap / kártya ─────────────────────────────────────────────────────── */
.lap { background: var(--lap); border: 1px solid var(--vonal); }
.lap__fej { display: flex; align-items: center; justify-content: space-between; gap: var(--t3); padding: var(--t3) var(--t4); border-bottom: 1px solid var(--vonal); min-height: 50px; }
.lap__fej h2 { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
/* Keskeny kijelzőn a fejléc sora törjön, ne feszítse ki a lapot. */
.lap__fej { flex-wrap: wrap; }
.lap__fej > div { min-width: 0; flex-wrap: wrap; }
/* A select legkisebb szélessége a leghosszabb opció — a grid-oszlop ezt
   nem engedné összemenni, és a mező kilógna a lapból. */
.mezo { grid-template-columns: minmax(0, 1fr); }
.mezo select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.lap__test { padding: var(--t4); }
.lap__ures { padding: var(--t5) var(--t4); color: var(--halk); text-align: center; }

.racs-2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--t4); align-items: start; }
/* minmax(0,1fr): az auto oszlop a benne ülő tábla szélességére feszülne, és a
   görgethető táblakeret mobilon nem tudna összemenni. */
.hasab { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--t4); }

/* ── Fülek ────────────────────────────────────────────────────────────── */
.fulek { display: flex; gap: 0; border-bottom: 1px solid var(--vonal); margin-bottom: var(--t5); overflow-x: auto; scrollbar-width: none; }
.fulek a { padding: var(--t3) var(--t4); text-decoration: none; color: var(--halk); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: flex; gap: 8px; align-items: center; }
.fulek a:hover { color: var(--szoveg); }
.fulek a[aria-current="page"] { color: var(--szoveg); border-bottom-color: var(--kek); }
.fulek b { font: 600 11px/1 var(--mono); color: var(--halkabb); }
.fulek b.lang { color: var(--lang); }

/* ── Adatlista ────────────────────────────────────────────────────────── */
.adatok { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; margin: 0; }
.adatok dt, .adatok dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--vonal); }
.adatok dt { padding-right: var(--t5); color: var(--halk); font-size: 12.5px; }
.adatok dd { font-size: 13.5px; overflow-wrap: anywhere; }
.adatok > :nth-last-child(-n+2) { border-bottom: 0; }

.cimkek { display: flex; flex-wrap: wrap; gap: 6px; }
.cimkek span { font-size: 12px; padding: 3px 8px; border: 1px solid var(--vonal); color: var(--halk); }
/* A példa-kérdések hosszú szövegek: törjenek, ne feszítsék ki a lapot. */
.cimkek .chip { max-width: 100%; white-space: normal; text-align: left; padding-block: 6px; }

.linkek { display: grid; }
.linkek a { display: flex; align-items: center; gap: 10px; padding: 10px var(--t4); text-decoration: none; border-bottom: 1px solid var(--vonal); }
.linkek a:last-child { border-bottom: 0; }
.linkek a:hover { background: var(--lap-2); }
.linkek small { margin-left: auto; color: var(--halkabb); font: 11.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }

.figyelmeztetes { display: grid; }
.figyelmeztetes li { list-style: none; display: flex; gap: 10px; padding: 10px var(--t4); border-bottom: 1px solid var(--vonal); font-size: 13px; line-height: 1.5; color: #D4DAE3; }
.figyelmeztetes li:last-child { border-bottom: 0; }
.figyelmeztetes .ikon { color: var(--figy); margin-top: 2px; }
.figyelmeztetes ul { margin: 0; padding: 0; }

/* ── Táblázat ────────────────────────────────────────────────────────── */
.tabla-keret { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th { text-align: left; font: 500 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--halk); padding: 10px var(--t4); border-bottom: 1px solid var(--vonal); white-space: nowrap; }
.tabla td { padding: 11px var(--t4); border-bottom: 1px solid var(--vonal); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: #121720; }
.tabla .jobb { text-align: right; }
.tabla .szuk { width: 1%; white-space: nowrap; }

/* ── Teendők ─────────────────────────────────────────────────────────── */
.teendok { display: grid; }
.teendo { display: flex; gap: var(--t3); align-items: flex-start; padding: var(--t3) var(--t4); border-bottom: 1px solid var(--vonal); }
.teendo:last-child { border-bottom: 0; }
.teendo__pipa {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; flex: none; margin-top: 1px; cursor: pointer;
  border: 1px solid var(--vonal-2); background: var(--lap-2); display: grid; place-items: center; padding: 0;
}
.teendo__pipa:hover { border-color: var(--ok); }
.teendo__pipa[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); }
.teendo__pipa[aria-pressed="true"]::after { content: ""; width: 12px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0E13' stroke-width='4'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/contain no-repeat; }
.teendo__test { flex: 1; min-width: 0; }
.teendo__cim { line-height: 1.45; }
.teendo--kesz .teendo__cim { color: var(--halkabb); text-decoration: line-through; }
.teendo__meta { display: flex; gap: var(--t3); flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--halkabb); }
.teendo__meta a { color: var(--halk); text-decoration: none; }
.teendo__meta a:hover { color: var(--szoveg); }
.prio { font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 3px 6px 2px; }
.prio--2 { background: var(--lang); color: var(--tinta); }
.prio--1 { border: 1px solid rgba(255, 106, 43, .5); color: #FF9466; }
.kesett { color: #FF8A8D; }
.teendo__muvelet { display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.teendo:hover .teendo__muvelet, .teendo:focus-within .teendo__muvelet { opacity: 1; }
@media (hover: none) { .teendo__muvelet { opacity: 1; } }

.gyors { display: flex; gap: var(--t2); padding: var(--t3) var(--t4); border-bottom: 1px solid var(--vonal); background: var(--lap-2); flex-wrap: wrap; }
.gyors input, .gyors select { -webkit-appearance: none; appearance: none; min-height: 36px; padding: 7px 10px; background: var(--tus); border: 1px solid var(--vonal-2); color: var(--szoveg); border-radius: 0; }
.gyors input[type="text"] { flex: 1; min-width: 200px; }
.gyors input:focus, .gyors select:focus { outline: none; border-color: var(--kek-vil); }

/* ── Jegyzetek ───────────────────────────────────────────────────────── */
.jegyzet { padding: var(--t4); border-bottom: 1px solid var(--vonal); }
.jegyzet:last-child { border-bottom: 0; }
.jegyzet h3 { font-size: 15px; font-weight: 800; display: flex; gap: 8px; align-items: center; }
.jegyzet__test { margin-top: var(--t2); white-space: pre-wrap; color: #D4DAE3; line-height: 1.6; font-size: 13.5px; }
.jegyzet__meta { margin-top: var(--t2); display: flex; gap: var(--t3); align-items: center; color: var(--halkabb); font-size: 12px; }

/* ── Titkos tár ──────────────────────────────────────────────────────── */
.tar-zar { display: grid; place-items: center; text-align: center; gap: var(--t3); padding: var(--t7) var(--t4); }
.tar-zar .ikon { width: 28px; height: 28px; color: var(--kek-vil); }
.tar-zar p { color: var(--halk); max-width: 46ch; }
.tar-zar form { display: flex; gap: var(--t2); width: min(420px, 100%); margin-top: var(--t2); }
.tar-zar input { flex: 1; min-height: 40px; padding: 9px 12px; background: var(--lap-2); border: 1px solid var(--vonal-2); color: var(--szoveg); border-radius: 0; -webkit-appearance: none; appearance: none; }
.titok-ertek { font: 13px/1.3 var(--mono); padding: 5px 8px; background: var(--tus); border: 1px dashed var(--vonal-2); display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.titok-rejtett { letter-spacing: .2em; color: var(--halkabb); }
.tar-sav { display: flex; align-items: center; gap: var(--t3); padding: 10px var(--t4); background: rgba(232, 176, 74, .08); border: 1px solid rgba(232, 176, 74, .3); margin-bottom: var(--t4); font-size: 13px; }
.tar-sav .ikon { color: var(--figy); }
.tar-sav .link-gomb { margin-left: auto; }

/* ── Műveletek ───────────────────────────────────────────────────────── */
.muveletek { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--t2); }
.kimenet { margin: 0; padding: var(--t3) var(--t4); background: #07090D; border-top: 1px solid var(--vonal); font: 12px/1.55 var(--mono); color: #C9D2DE; white-space: pre-wrap; overflow-x: auto; max-height: 420px; }

/* ── Asszisztens ─────────────────────────────────────────────────────── */
.asszisztens { display: flex; flex-direction: column; min-height: min(72vh, 760px); }
.uzenetek { flex: 1; display: flex; flex-direction: column; gap: var(--t3); padding: var(--t4); overflow-y: auto; max-height: 62vh; }
.uzenet { display: flex; gap: 8px; }
.uzenet--en { justify-content: flex-end; }
.uzenet__buborek { max-width: 78%; background: var(--lap-3); border: 1px solid var(--vonal-2); padding: 10px 14px; white-space: pre-wrap; line-height: 1.55; }
.uzenet--claude { flex-direction: column; gap: 6px; max-width: 92%; }
.uzenet__szoveg { line-height: 1.65; color: #DCE2EA; }
.uzenet__szoveg > * + * { margin-top: .6em; }
.uzenet__szoveg ul, .uzenet__szoveg ol { padding-left: 1.3em; margin: 0; }
.uzenet__szoveg code { background: var(--tus); border: 1px solid var(--vonal); padding: 1px 5px; }
.uzenet__szoveg pre { background: #07090D; border: 1px solid var(--vonal); padding: 10px; overflow-x: auto; }
.uzenet__szoveg pre code { border: 0; padding: 0; }
.uzenet__szoveg table { border-collapse: collapse; font-size: 13px; }
.uzenet__szoveg th, .uzenet__szoveg td { border: 1px solid var(--vonal-2); padding: 4px 8px; text-align: left; }
.uzenet__szoveg a { color: var(--kek-vil); }
.uzenet__meta { font: 11px var(--mono); color: var(--halkabb); }
.uzenet--eszkoz { align-items: center; color: var(--halk); font: 12px var(--mono); padding-left: 2px; flex-wrap: wrap; }
.uzenet--eszkoz code { color: var(--halkabb); font-size: 11px; overflow-wrap: anywhere; }
.uzenet--hiba { align-items: flex-start; color: #FF8A8D; background: var(--baj-halvany); border: 1px solid rgba(242, 85, 90, .35); padding: 10px 12px; font-size: 13px; }
.kerdes { display: flex; gap: var(--t2); padding: var(--t3) var(--t4); border-top: 1px solid var(--vonal); background: var(--lap-2); align-items: flex-end; }
.kerdes textarea { flex: 1; -webkit-appearance: none; appearance: none; min-height: 44px; max-height: 220px; resize: vertical; padding: 10px 12px; background: var(--tus); border: 1px solid var(--vonal-2); color: var(--szoveg); border-radius: 0; line-height: 1.5; }
.kerdes textarea:focus { outline: none; border-color: var(--kek-vil); box-shadow: 0 0 0 3px rgba(110, 143, 184, .22); }
@media (max-width: 1100px) { .asszisztens + .lap { order: -1; } }

/* ── Kapu (belépés) ──────────────────────────────────────────────────── */
.vendeg { min-height: 100vh; background:
  linear-gradient(to right, rgba(110, 143, 184, .07) 1px, transparent 1px) 0 0 / 48px 48px,
  linear-gradient(to bottom, rgba(110, 143, 184, .07) 1px, transparent 1px) 0 0 / 48px 48px, var(--tus); }
.kapu { min-height: 100vh; display: grid; place-items: center; padding: var(--t5) var(--t4); }
.kapu__lap { width: min(440px, 100%); background: var(--lap); border: 1px solid var(--vonal-2); padding: var(--t6); }
.kapu__cim { font-size: 24px; font-weight: 900; margin-bottom: var(--t3); }
.kapu__szoveg { color: var(--halk); margin-bottom: var(--t4); line-height: 1.6; }
.kapu__lab { margin-top: var(--t4); color: var(--halkabb); font-size: 12.5px; text-align: center; }
.kapu .gomb--teljes + .gomb--teljes { margin-top: var(--t2); }
.qr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--t4); align-items: center; margin-bottom: var(--t4); }
.qr__kep { background: #fff; padding: 8px; line-height: 0; }
.qr__kep svg { width: 150px; height: 150px; }
.qr__kezi { display: grid; gap: 6px; }
.kod-blokk { display: block; padding: 8px; background: var(--tus); border: 1px dashed var(--vonal-2); word-break: break-all; cursor: copy; }
.tartalek { columns: 2; padding: 0 0 0 20px; margin: 0 0 var(--t4); color: var(--halk); }
.tartalek li { padding: 4px 0; }
.tartalek code { color: var(--szoveg); font-size: 14px; }

/* ── Toast ───────────────────────────────────────────────────────────── */
.toastok { position: fixed; right: var(--t4); bottom: var(--t4); display: grid; gap: var(--t2); z-index: 60; }
.toast { background: var(--lap-3); border: 1px solid var(--vonal-2); border-left: 3px solid var(--ok); padding: 10px var(--t4); font-size: 13px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); transition: opacity .4s, transform .4s; }
.toast--baj { border-left-color: var(--baj); }
.toast--el { opacity: 0; transform: translateY(6px); }

/* ── Üres állapot ────────────────────────────────────────────────────── */
.ures { padding: var(--t7) var(--t4); text-align: center; color: var(--halk); border: 1px dashed var(--vonal-2); }

/* ── Modális ─────────────────────────────────────────────────────────── */
.modal-hatter { position: fixed; inset: 0; background: rgba(4, 6, 9, .72); display: grid; place-items: center; padding: var(--t4); z-index: 50; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--lap); border: 1px solid var(--vonal-2); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.modal .lap__test { display: grid; gap: var(--t4); }
.modal__lab { display: flex; justify-content: flex-end; gap: var(--t2); padding: var(--t3) var(--t4); border-top: 1px solid var(--vonal); }

/* ── Mobil ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .racs-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .oldalsav { position: sticky; top: 0; z-index: 40; height: auto; flex-direction: row; align-items: center; gap: var(--t3);
              padding: 10px var(--t4); border-right: 0; border-bottom: 1px solid var(--vonal); overflow-x: auto; }
  .oldalsav .marka small { display: none; }
  .nav { flex-direction: row; gap: 0; }
  .nav a { min-height: 40px; padding: 0 10px; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .nav a.aktiv { border-bottom-color: var(--kek); background: transparent; }
  .tar-jel { display: none; }
  .oldalsav__lab { margin: 0 0 0 auto; flex-direction: row; align-items: center; }
  .oldalsav__lab .gomb { display: none; }
  .fo { padding-top: var(--t5); }
  .szamok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .szam:nth-child(2) { border-right: 0; }
  .szam:nth-child(-n+2) { border-bottom: 1px solid var(--vonal); }
  .urlap--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .nav a { font-size: 0; gap: 0; padding: 0 12px; }
  .nav a .ikon { width: 18px; height: 18px; }
  .nav a .szamlalo { font-size: 11px; margin-left: 4px; }
  .projektek { grid-template-columns: minmax(0, 1fr); }
  .kereso input { min-width: 0; }
  .kereso kbd { display: none; }
  .qr { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .kapu__lap { padding: var(--t5) var(--t4); }
  .tartalek { columns: 1; }
  .adatok { grid-template-columns: minmax(0, 1fr); }
  .adatok dt { border-bottom: 0; padding-bottom: 0; }
}

/* ═══ TELEPÍTHETŐ APP ═══════════════════════════════════════════════════
   Telefonon alsó menüsáv (hüvelykujjal elérhető), a státuszsáv és a
   kezdőképernyő-csík (safe-area) alá nem lóg semmi. */
.app-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.app-link.aktiv { color: var(--szoveg); }
.app-link__ikon { width: 16px; height: 16px; }

.lepesek { margin: 0; padding: 0; list-style: none; counter-reset: lepes; display: grid; gap: var(--t3); }
.lepesek li { counter-increment: lepes; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--t3); align-items: start; line-height: 1.5; }
.lepesek li::before { content: counter(lepes); display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--kek); color: var(--kek-vil); font: 600 13px/1 var(--mono); }
.lepesek .ikon { width: 16px; height: 16px; vertical-align: -3px; color: var(--kek-vil); }
.eszkozok { display: grid; }
.eszkoz { display: flex; gap: var(--t3); align-items: center; padding: 10px var(--t4); border-bottom: 1px solid var(--vonal); font-size: 13px; }
.eszkoz:last-child { border-bottom: 0; }
.eszkoz__nev { flex: 1; min-width: 0; }
.eszkoz__nev small { display: block; color: var(--halkabb); font-size: 12px; }
.kapcsolosor { display: flex; justify-content: space-between; align-items: center; gap: var(--t3); padding: 12px var(--t4); border-bottom: 1px solid var(--vonal); }
.kapcsolosor:last-child { border-bottom: 0; }
.kapcsolosor small { display: block; color: var(--halkabb); font-size: 12px; margin-top: 2px; }

@media (max-width: 860px) {
  .oldalsav { padding-top: calc(10px + env(safe-area-inset-top, 0px)); overflow: visible; }
  .oldalsav .nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
    background: rgba(11, 14, 19, .97); border-top: 1px solid var(--vonal-2);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
  }
  .oldalsav .nav a {
    position: relative; flex-direction: column; justify-content: center; gap: 3px; min-height: 52px; padding: 4px 2px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .01em; border: 0; border-top: 2px solid transparent; white-space: nowrap;
  }
  .oldalsav .nav a .ikon { width: 20px; height: 20px; }
  .oldalsav .nav a.aktiv { border-top-color: var(--kek); background: transparent; color: var(--szoveg); }
  .oldalsav .nav a .szamlalo { position: absolute; top: 3px; left: calc(50% + 6px); margin: 0; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; }
  .oldalsav .nav .tar-jel { display: none; }
  .oldalsav__lab .uj-projekt { display: none; }
  .oldalsav__lab { gap: var(--t2); }
  .app-link__szoveg { display: none; }
  .app-link { min-width: 40px; min-height: 40px; justify-content: center; }
  .app-link__ikon { width: 18px; height: 18px; }
  .fo { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .toastok { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); left: var(--t4); }
}
@media (max-width: 520px) {
  /* A korábbi „csak ikon" szabályt az alsó sáv felirata váltja. */
  .oldalsav .nav a { font-size: 10.5px; gap: 3px; padding: 4px 2px; }
  .oldalsav .nav a .ikon { width: 20px; height: 20px; }
}
@media (max-width: 360px) {
  .oldalsav .nav a { font-size: 9.5px; }
}
/* Telepített appként (standalone) a fejléc a státuszsáv alá kerül. */
.app-mod .kapu { padding-top: calc(var(--t5) + env(safe-area-inset-top, 0px)); }

@media (prefers-contrast: more) {
  :root { --halk: #B3BFCE; --halkabb: #9DAABB; --vonal: rgba(147, 161, 180, .3); --vonal-2: rgba(147, 161, 180, .5); }
}