/* =====================================================================
   Kódszabó – a minta: színpad (laptop + telefon) és a kattintható programok
   A program belseje világos (ilyet kap az ügyfél), körülötte a Kódszabó sötét, ibolya izzású színpada.
   ===================================================================== */

/* ---------- Kész minta: teljes szélesség, a terv és a küldés két oszlopban ---------- */
.fulke-racs.kesz { grid-template-columns: minmax(0, 1fr); }
.fulke-racs.kesz .minta-panel { order: -1; }
.fulke-racs.kesz .naplo { min-height: 0; max-height: 360px; }
.minta-kesz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 1100px) {
  .fulke-racs.kesz .minta-kesz { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 28px; }
  .fulke-racs.kesz .minta-fej { grid-column: 1 / -1; grid-row: 1; }
  .fulke-racs.kesz .eszkoz { grid-column: 1 / -1; grid-row: 2; }
  .fulke-racs.kesz .ar-sor { grid-column: 1 / -1; grid-row: 3; }
  .fulke-racs.kesz .terv { grid-column: 1; grid-row: 4; }
  .fulke-racs.kesz .aam-kicsi { grid-column: 1; grid-row: 5; margin: 0; }
  .fulke-racs.kesz .kuldo, .fulke-racs.kesz .elkuldve { grid-column: 2; grid-row: 4 / span 2; align-self: start; position: sticky; top: calc(var(--fejlec-mag) + 16px); }
}
.eszkoz { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .minta-kesz.megjelenik .eszkoz { animation: none; }
}

/* ---------- Színpad ---------- */
.szinpad-keret { position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%; }
.szinpad-keret:focus { outline: none; }
.szinpad-sav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.szinpad-info { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--kod); font-size: .98rem; }
.szinpad-info b { color: var(--kreta); }
.mi { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; }
.szinpad-info .mi { width: 22px; height: 22px; color: var(--levendula); }
.szinpad-gombok { display: flex; flex-wrap: wrap; gap: 8px; }
.szinpad-gomb {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 12px; border: 1px solid var(--varrat); background: rgba(30, 24, 56, .85);
  color: var(--kreta); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.szinpad-gomb:hover { border-color: var(--levendula); background: var(--szovet-2); }
.szinpad-gomb:focus-visible { outline: none; box-shadow: var(--fokusz); }
.szinpad-gomb .mi { width: 18px; height: 18px; color: var(--levendula-vil); }
.szinpad-gomb[data-teljes] { border-color: rgba(167, 139, 250, .55); box-shadow: var(--izzas); }

.szinpad-valto { display: none; }

.szinpad { position: relative; padding: clamp(8px, 2vw, 28px) 0 clamp(26px, 4vw, 52px); }
.szinpad::before { /* ibolya fénytócsa a készülékek alatt */
  content: ""; position: absolute; inset: 14% 4% -2%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 45% 62%, rgba(139, 92, 246, .42), transparent 70%), radial-gradient(ellipse 30% 40% at 88% 70%, rgba(138, 180, 232, .25), transparent 70%);
  filter: blur(18px);
}
.szinpad figure { margin: 0; position: relative; z-index: 1; }
.szinpad figcaption { margin-top: 14px; text-align: center; color: var(--kod); font-size: .9rem; letter-spacing: .02em; }

/* laptop */
.keret-laptop { width: 77.5%; }
.keret-laptop .kepernyo-keret {
  position: relative; padding: 10px 10px 12px; border-radius: 18px 18px 6px 6px;
  background: linear-gradient(180deg, #2d2749, #16122a);
  box-shadow: 0 0 0 1px #4b4277, 0 40px 90px -40px rgba(139, 92, 246, .9), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.bongeszo { display: flex; align-items: center; gap: 6px; height: clamp(22px, 2.6vw, 30px); padding: 0 10px; border-radius: 6px 6px 0 0; background: #e9ebf2; }
.bongeszo i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; flex: none; }
.bongeszo i:nth-child(2) { background: #febc2e; }
.bongeszo i:nth-child(3) { background: #28c840; }
.bongeszo span { display: flex; align-items: center; gap: 5px; margin: 0 auto; padding: 2px 14px; border-radius: 999px; background: #fff; color: #4a5068; font-size: clamp(9px, .95vw, 12px); white-space: nowrap; overflow: hidden; max-width: 60%; }
.bongeszo .mi { width: 1em; height: 1em; color: #28a35a; }
.keret-laptop .kepernyo { position: relative; aspect-ratio: 16 / 10; border-radius: 0 0 4px 4px; overflow: hidden; }
.keret-laptop .kepernyo.gorgetheto { overflow: hidden auto; scrollbar-width: thin; }
.keret-laptop .laptop-talp { position: relative; height: 14px; margin: 0 -6%; border-radius: 0 0 18px 18px; background: linear-gradient(180deg, #4a4273, #1b1733); box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .9); }
.keret-laptop .laptop-talp::before { content: ""; display: block; width: 16%; height: 5px; margin: 0 auto; border-radius: 0 0 6px 6px; background: #120f22; }

/* telefon */
.keret-telefon { position: absolute !important; right: 0; bottom: clamp(26px, 4vw, 52px); width: 23%; min-width: 190px; z-index: 2 !important; }
.keret-telefon .kepernyo {
  position: relative; aspect-ratio: 9 / 19.2; overflow: hidden;
  border-radius: clamp(26px, 3.2vw, 40px); border: clamp(7px, .9vw, 11px) solid #0c0a16;
  box-shadow: 0 0 0 1.5px #4b4277, 0 0 0 4px #1d1833, 0 40px 80px -30px rgba(0, 0, 0, .95), 0 30px 70px -30px rgba(139, 92, 246, .8);
}
.szinpad figure.keret-telefon figcaption { margin-top: 12px; }
.kepernyo { container: minta / inline-size; background: #fff; color: #1b1f2e; }

/* lebegő kártya a színpadon (pl. Google-találat) */
.szinpad-lebego {
  position: absolute; left: 3%; bottom: 4%; z-index: 3; max-width: min(340px, 44%);
  display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 14px;
  background: #fff; color: #202124; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(167, 139, 250, .5);
  font-family: Arial, sans-serif; font-size: 13px; line-height: 1.35;
}
.szinpad-lebego small { color: #5f6368; font-size: 11px; }
.szinpad-lebego b { color: #1a0dab; font-weight: 500; font-size: 15px; }
.szinpad-lebego span { color: #188038; font-size: 12px; }
.szinpad-lebego em { color: #4d5156; font-style: normal; }

/* összeállás: a képernyő „kiszabva” jelenik meg, egy izzó vágóvonal mögött */
@media (prefers-reduced-motion: no-preference) {
  .szinpad.epul .keret-laptop { animation: kesz-be .7s cubic-bezier(.2, .7, .2, 1) both; }
  .szinpad.epul .keret-telefon { animation: tel-be .8s .35s cubic-bezier(.2, .7, .2, 1) both; }
  .szinpad.epul .kepernyo > .m { animation: kiszabas 1.1s .45s cubic-bezier(.6, 0, .3, 1) both; }
  .szinpad.epul .keret-telefon .kepernyo > .m { animation-delay: .9s; }
  .szinpad.epul .kepernyo::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; z-index: 5; pointer-events: none;
    background: #fff; box-shadow: 0 0 12px 3px #a78bfa, 0 0 30px 8px rgba(139, 92, 246, .8);
    animation: vagovonal 1.1s .45s cubic-bezier(.6, 0, .3, 1) both;
  }
  .szinpad.epul .keret-telefon .kepernyo::after { animation-delay: .9s; }
  .szinpad.epul .m-be { animation: elem-be .5s calc(1.2s + var(--i, 0) * 70ms) cubic-bezier(.2, .7, .2, 1) both; }
  .frissul .m-be { animation: elem-be .38s calc(var(--i, 0) * 45ms) cubic-bezier(.2, .7, .2, 1) both; }
  .mt-kepernyo.frissul { animation: elem-be .35s ease both; }
  .szinpad.epul .m-graf-ter svg, .frissul .m-graf-ter svg { animation: kitolt 1.4s 1.5s cubic-bezier(.4, 0, .2, 1) both; }
  .frissul .m-graf-ter svg { animation-delay: .2s; }
  .szinpad.epul .m-oszl i, .frissul .m-oszl i { animation: oszlop-no .7s calc(1.5s + var(--k, 0) * 70ms) cubic-bezier(.2, .7, .2, 1) both; }
  .frissul .m-oszl i { animation-delay: calc(.15s + var(--k, 0) * 50ms); }
  .szinpad.epul .m-savok b, .frissul .m-savok b { animation: sav-no .8s calc(1.5s + var(--k, 0) * 70ms) cubic-bezier(.2, .7, .2, 1) both; }
  .frissul .m-savok b { animation-delay: calc(.15s + var(--k, 0) * 50ms); }
}
@keyframes kesz-be { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes tel-be { from { opacity: 0; transform: translate(30px, 40px) rotate(4deg); } to { opacity: 1; transform: none; } }
@keyframes kiszabas { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vagovonal { 0% { left: 0; opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 3px); opacity: 0; } }
@keyframes elem-be { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes kitolt { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes oszlop-no { from { transform: scaleY(0); } to { transform: none; } }
@keyframes sav-no { from { transform: scaleX(0); } to { transform: none; } }

/* magyarázatok */
.tippek-doboz { padding: clamp(14px, 2vw, 20px); border-radius: 18px; border: 1px solid var(--varrat); background: rgba(21, 17, 42, .9); }
.tippek-cim { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 12px; font-family: var(--betu-cim); font-size: 1.05rem; }
.tippek-cim small { font-family: var(--betu-test); color: var(--kod); font-size: .92rem; }
.tippek { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.tippek button {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; height: 100%; padding: 12px 14px;
  border-radius: 14px; border: 1px solid transparent; background: rgba(42, 35, 80, .45);
  color: var(--kreta); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s;
}
.tippek button:hover, .tippek button.villan { border-color: var(--levendula); background: rgba(42, 35, 80, .9); }
.tippek button:focus-visible { outline: none; box-shadow: var(--fokusz); }
.tippek b { display: block; font-size: 1rem; }
.tippek small { display: block; margin-top: 3px; color: var(--kod); font-size: .92rem; line-height: 1.45; }
.tipp-szam, .m-tipp {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: #15112a; color: #fff; font-family: var(--betu-cim); font-size: 13px; font-weight: 600;
  box-shadow: 0 0 0 2px #a78bfa, 0 0 14px 2px rgba(139, 92, 246, .8);
}
.kiemel-keret { outline: 3px solid #a78bfa; outline-offset: 6px; border-radius: 44px; transition: outline-color .3s; }
.szinpad-lebego.kiemel-keret { border-radius: 14px; }

/* teljes képernyő */
html.teljes-nyitva { overflow: hidden; }
.szinpad-keret.teljes {
  position: fixed; inset: 0; z-index: 300; overflow: auto; padding: 14px clamp(12px, 3vw, 40px) 40px;
  background: radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, .22), transparent 60%), #08070f;
}
.szinpad-keret.teljes .szinpad { width: min(100%, calc((100vh - 120px) * 1.9)); margin-inline: auto; }
.szinpad-keret.teljes .tippek-doboz { width: min(100%, 1400px); margin-inline: auto; }

/* keskeny képernyőn: egyszerre egy készülék, váltóval */
@media (max-width: 860px) {
  .szinpad-valto { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 14px; background: rgba(30, 24, 56, .9); border: 1px solid var(--varrat); }
  .szinpad-valto button {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 6px 10px;
    border: 0; border-radius: 10px; background: none; color: var(--kod); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; line-height: 1.2;
  }
  .szinpad-valto button[aria-pressed="true"] { background: var(--ibolya-gomb); color: #fff; box-shadow: 0 6px 20px -8px rgba(139, 92, 246, .9); }
  .szinpad-valto .mi { width: 18px; height: 18px; }
  .keret-laptop { width: 100%; }
  .keret-telefon { position: relative !important; right: auto; bottom: auto; width: min(300px, 82%); min-width: 0; margin: 0 auto; }
  .szinpad[data-mutat="gep"] .keret-telefon, .szinpad[data-mutat="telefon"] .keret-laptop { display: none; }
  .szinpad-lebego { position: relative; left: auto; bottom: auto; max-width: none; margin-top: 16px; }
  .szinpad[data-mutat="telefon"] .szinpad-lebego { display: none; }
}
/* telefonon a gépes nézet táblagép-keretbe kerül, hogy olvasható maradjon */
@media (max-width: 600px) {
  .keret-laptop .kepernyo-keret { padding: 9px; border-radius: 26px; }
  .keret-laptop .bongeszo { border-radius: 16px 16px 0 0; }
  .keret-laptop .kepernyo { aspect-ratio: 3 / 4.3; border-radius: 0 0 16px 16px; }
  .keret-laptop .laptop-talp { display: none; }
  .szinpad-gomb span { display: none; }
  .szinpad-gomb { padding: 0 13px; }
  .szinpad-valto button { font-size: .85rem; }
}

/* =====================================================================
   A program belseje
   ===================================================================== */
.m {
  --m: #7c3aed; --m-ink: #fff; --m-halvany: #f1ebff;
  --m-szoveg: #1b1f2e; --m-halk: #646a80; --m-vonal: #e6e8f0; --m-hatter: #f4f5f9;
  --m-r: .7em; --m-r-kicsi: .45em;
  --m-jo: #16a34a; --m-jo-h: #dcfce7; --m-info: #2563eb; --m-info-h: #dbeafe; --m-figyel: #b45309; --m-figyel-h: #fef3c7; --m-piros: #dc2626; --m-piros-h: #fee2e2;
  position: relative; height: 100%; min-height: 100%;
  font-family: var(--betu-test); font-size: clamp(8.5px, 1.36cqw, 16px); line-height: 1.38;
  color: var(--m-szoveg); background: var(--m-hatter);
}
@container minta (max-width: 560px) { .m { font-size: clamp(9.5px, 3.75cqw, 15px); } }
.m * { box-sizing: border-box; }
.m :where(p, h4, h5, ul, ol) { margin: 0; padding: 0; }
.m :where(ul, ol) { list-style: none; }
.m :where(button, input, select, textarea) { font: inherit; color: inherit; }
.m button { cursor: pointer; }
.m :focus-visible { outline: 2px solid var(--m); outline-offset: 2px; }
.m .mi { width: 1.2em; height: 1.2em; }
.m-hang-elegans { --m-r: .25em; --m-r-kicsi: .15em; }
.m-hang-elegans .ma-cim, .m-hang-elegans .m-kpi b, .m-hang-elegans .mw h4, .m-hang-elegans .mw h5, .m-hang-elegans .mf-profil b, .m-hang-elegans .mk-ossz { font-family: "Iowan Old Style", Georgia, "Times New Roman", serif; font-weight: 600; }
.m-hang-baratsagos { --m-r: 1.15em; --m-r-kicsi: .9em; }
.m-hang-klasszikus { --m-r: 0; --m-r-kicsi: 0; font-family: Cambria, Georgia, serif; }
.m-halk { color: var(--m-halk); }

.m-logo {
  flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: calc(var(--m-r) + .1em);
  background: linear-gradient(135deg, var(--m), color-mix(in srgb, var(--m) 60%, #000)); color: var(--m-ink);
  font-weight: 800; font-size: .95em; letter-spacing: -.02em; box-shadow: 0 .3em .8em -.3em color-mix(in srgb, var(--m) 70%, transparent);
}
.m-logo.nagy { width: 4.4em; height: 4.4em; font-size: 1.1em; border: .2em solid #fff; }
.m-av {
  flex: none; display: inline-grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%;
  background: hsl(var(--h, 260) 70% 90%); color: hsl(var(--h, 260) 55% 30%); font-weight: 700; font-size: .85em; letter-spacing: -.02em;
}
.m-av.kicsi { width: 2em; height: 2em; font-size: .78em; margin-right: .6em; }
.m-av.mini { width: 1.7em; height: 1.7em; font-size: .68em; margin-right: .4em; }
.m-av.mindegy { background: #eceef5; color: var(--m-halk); }
.m-chip { display: inline-flex; align-items: center; gap: .3em; padding: .2em .65em; border-radius: 999px; font-size: .8em; font-weight: 600; white-space: nowrap; background: #eef0f6; color: #4a5068; }
.m-chip .mi { width: 1.05em; height: 1.05em; }
.m-chip-jo { background: var(--m-jo-h); color: #166534; }
.m-chip-info { background: var(--m-info-h); color: #1e40af; }
.m-chip-figyel { background: var(--m-figyel-h); color: #92400e; }
.m-chip-piros { background: var(--m-piros-h); color: #991b1b; }
.m-chip-halk { background: transparent; color: var(--m-halk); border: 1px dashed #cfd3e0; }

.m .m-tipp { position: absolute; top: .45em; right: .45em; z-index: 4; width: 2.1em; height: 2.1em; font-size: .9em; pointer-events: auto; cursor: pointer; }
.m .mt-cim .m-tipp, .m .mt-lab .m-tipp { top: 50%; transform: translateY(-50%); }
.m .mt-lab .m-tipp { right: .9em; top: -.6em; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .m .m-tipp { animation: tipp-lukter 2.4s ease-in-out infinite; }
}
@keyframes tipp-lukter { 50% { box-shadow: 0 0 0 2px #a78bfa, 0 0 0 .55em rgba(139, 92, 246, .22), 0 0 1em .3em rgba(139, 92, 246, .7); } }
.m .m-tipp.kiemel, .m .m-tipp.villan { background: #8b5cf6; transform: scale(1.25); transition: transform .2s; }
.m .mt-cim .m-tipp.kiemel, .m .mt-cim .m-tipp.villan { transform: translateY(-50%) scale(1.25); }

/* gombok, mezők */
.m-gomb {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 2.5em; padding: .45em 1.05em;
  border: 0; border-radius: var(--m-r-kicsi); background: var(--m); color: var(--m-ink); font-weight: 700; font-size: .92em; white-space: nowrap;
  box-shadow: 0 .35em .9em -.45em color-mix(in srgb, var(--m) 80%, transparent);
}
.m-gomb.masodik { background: #fff; color: var(--m-szoveg); box-shadow: inset 0 0 0 1px var(--m-vonal); }
.m-gomb.kicsi { min-height: 2.1em; padding: .25em .8em; font-size: .82em; }
.m-gomb.mini { min-height: 1.9em; padding: .15em .6em; font-size: .78em; }
.m-gomb.szeles { width: 100%; }
.m-ikon-gomb { display: inline-grid; place-items: center; width: 2em; height: 2em; border-radius: var(--m-r-kicsi); color: var(--m-halk); background: #f1f2f7; cursor: pointer; }
.m-mezo { display: flex; flex-direction: column; gap: .3em; font-size: .86em; font-weight: 600; color: var(--m-halk); }
.m-mezo input, .m-mezo select {
  width: 100%; min-height: 2.6em; padding: .35em .75em; border: 1px solid #d6d9e4; border-radius: var(--m-r-kicsi);
  background: #fff; color: var(--m-szoveg); font-size: 1.1em; font-weight: 500;
}
.m-mezo input:focus, .m-mezo select:focus { outline: none; border-color: var(--m); box-shadow: 0 0 0 .2em var(--m-halvany); }
.m-mezo-sor { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; }
.m-mezo-egyseg { position: relative; display: block; }
.m-mezo-egyseg i { position: absolute; right: .8em; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--m-halk); font-size: 1em; pointer-events: none; }
.m-mezo-egyseg input { padding-right: 4.2em; }
.m-szegmens { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .25em; padding: .25em; border-radius: calc(var(--m-r-kicsi) + .2em); background: #eef0f6; }
.m-szegmens button { min-height: 2.3em; border: 0; border-radius: var(--m-r-kicsi); background: transparent; font-weight: 600; font-size: 1.05em; color: var(--m-halk); }
.m-szegmens button[aria-pressed="true"] { background: #fff; color: var(--m-szoveg); box-shadow: 0 .15em .5em -.2em rgba(20, 24, 40, .3); }
.m-pipa { display: inline-flex; align-items: center; gap: .45em; font-size: .9em; font-weight: 500; }
.m-pipa input { width: 1.25em; height: 1.25em; accent-color: var(--m); }
.m-kereso { display: inline-flex; align-items: center; gap: .5em; min-width: 14em; min-height: 2.4em; padding: 0 .8em; border-radius: var(--m-r-kicsi); background: #fff; box-shadow: inset 0 0 0 1px var(--m-vonal); color: #9aa0b4; font-size: .9em; }
.m-szurok { display: inline-flex; gap: .2em; padding: .2em; border-radius: calc(var(--m-r-kicsi) + .15em); background: #eceef5; }
.m-szuro { min-height: 2em; padding: 0 .8em; border: 0; border-radius: var(--m-r-kicsi); background: transparent; color: var(--m-halk); font-weight: 600; font-size: .85em; white-space: nowrap; }
.m-szuro[aria-pressed="true"] { background: #fff; color: var(--m-szoveg); box-shadow: 0 .1em .4em -.15em rgba(20, 24, 40, .3); }
.m-eszkozsor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6em; }
.m-eszkozsor-bal, .m-eszkozsor-jobb { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; }
.m-het { font-size: 1.05em; }
.m-jelmagy { display: inline-flex; flex-wrap: wrap; gap: .9em; font-size: .82em; color: var(--m-halk); }
.m-jelmagy span { display: inline-flex; align-items: center; gap: .35em; }
.m-jelmagy i { width: .8em; height: .8em; border-radius: .2em; background: var(--m); }
.m-jelmagy .t1 i { background: color-mix(in srgb, var(--m) 55%, #fff); }
.m-jelmagy .t2 i { background: #0ea5a4; }
.m-jelmagy .ossze i { background: none; border-top: 2px dashed #a3a9bd; height: 0; border-radius: 0; }

/* kártyák, KPI-k, rácsok */
.m-kpik { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5em, 1fr)); gap: .8em; }
.m-kpi { position: relative; display: flex; flex-direction: column; gap: .15em; padding: .85em 1em; border-radius: var(--m-r); background: #fff; box-shadow: 0 .1em .25em rgba(20, 24, 40, .05), inset 0 0 0 1px var(--m-vonal); }
.m-kpi-fej { display: flex; align-items: center; gap: .45em; color: var(--m-halk); font-size: .82em; font-weight: 600; }
.m-kpi-fej .mi { width: 1.6em; height: 1.6em; padding: .3em; border-radius: .5em; background: var(--m-halvany); color: var(--m); }
.m-kpi b { font-size: 1.55em; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-kpi small { color: var(--m-halk); font-size: .78em; }
.m-trend { color: var(--m-jo) !important; font-weight: 700; }
.m-trend span { color: var(--m-halk); font-weight: 400; }
.m-trend.le { color: var(--m-piros) !important; }
.m-kpi-figyel { background: #fffbeb; box-shadow: inset 0 0 0 1px #fde68a; }
.m-kpi-figyel .m-kpi-fej .mi { background: var(--m-figyel-h); color: var(--m-figyel); }
.m-kpi-jo .m-kpi-fej .mi { background: var(--m-jo-h); color: var(--m-jo); }
.m-kpi-jo b { color: #15803d; }
.m-kartya { position: relative; display: flex; flex-direction: column; gap: .7em; min-width: 0; padding: 1em 1.1em; border-radius: var(--m-r); background: #fff; box-shadow: 0 .1em .25em rgba(20, 24, 40, .05), inset 0 0 0 1px var(--m-vonal); }
.m-kartya-fej { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding-right: 2.4em; }
.m-kartya-fej b { font-size: 1em; }
.m-kartya.belso-tabla .m-tabla-doboz { box-shadow: none; padding: 0; }
.m-racs-2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: .8em; }
.m-nagyszam { font-size: 1.7em; font-weight: 800; letter-spacing: -.02em; }
.m-be { position: relative; }

/* táblázat */
.m-tabla-doboz { position: relative; display: flex; flex-direction: column; gap: .7em; min-width: 0; padding: .9em 1em; border-radius: var(--m-r); background: #fff; box-shadow: 0 .1em .25em rgba(20, 24, 40, .05), inset 0 0 0 1px var(--m-vonal); overflow: hidden; }
.m-tabla-doboz { overflow: visible; }
.m .m-tabla-doboz > .m-tipp { top: -.85em; right: -.85em; }
.m-tabla { width: 100%; border-collapse: collapse; font-size: .9em; }
.m-tabla th { padding: .5em .6em; text-align: left; color: var(--m-halk); font-size: .82em; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--m-vonal); white-space: nowrap; }
.m-tabla td { padding: .55em .6em; border-bottom: 1px solid #f0f1f6; vertical-align: middle; white-space: nowrap; }
.m-tabla td:first-child { display: flex; align-items: center; min-height: 2.9em; white-space: normal; }
.m-tabla tr:last-child td { border-bottom: 0; }
.m-tabla tbody tr:hover td { background: #fafbfe; }
.m-tabla tr.keves td { background: #fff7f7; }
.m-tabla code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; color: #4a5068; background: #f1f2f7; padding: .1em .4em; border-radius: .3em; }
.m-sor-kicsi { display: block; color: var(--m-halk); font-size: .85em; }
.m-tabla td:first-child .m-sor-kicsi { margin-left: .4em; }
.m-halad { display: inline-block; width: 5em; height: .45em; border-radius: 1em; background: #eceef4; overflow: hidden; vertical-align: middle; }
.m-halad i { display: block; height: 100%; border-radius: 1em; background: var(--m); }
.m-berlet { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; }
.m-berlet .m-halad { width: 3.5em; }
.m-termek { display: flex; align-items: center; gap: .6em; }
.m-termek small { display: block; color: var(--m-halk); font-size: .82em; }
.m-termekkep { flex: none; display: grid; place-items: center; width: 2.4em; height: 2.4em; margin-right: .6em; border-radius: var(--m-r-kicsi); background: linear-gradient(135deg, hsl(var(--h) 70% 88%), hsl(calc(var(--h) + 40) 60% 76%)); color: hsl(var(--h) 45% 32%); }
.m-termek .m-termekkep { margin-right: 0; }
.m-szin-piros { color: var(--m-piros); }
.m-szin-figyel { color: var(--m-figyel); }
.m-szin-jo { color: var(--m-jo); }
.m-pipa-doboz { display: inline-grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; padding: 0; border-radius: .4em; border: 2px solid #c9cdda; background: #fff; color: transparent; transition: background .15s, border-color .15s; }
.m-pipa-doboz .mi { width: 1em; height: 1em; stroke-width: 3; }
.m-pipa-doboz.kesz { background: var(--m); border-color: var(--m); color: var(--m-ink); }
.m-kapcsolo { display: inline-block; width: 2.4em; height: 1.35em; padding: .17em; border-radius: 1em; background: #d6d9e4; }
.m-kapcsolo i { display: block; width: 1em; height: 1em; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .2s; }
.m-kapcsolo.be { background: var(--m); }
.m-kapcsolo.be i { transform: translateX(1.05em); }

/* grafikonok */
.m-graf { display: flex; flex-direction: column; gap: .4em; }
.m-graf-ter { position: relative; height: 9.5em; color: var(--m); }
.m-kartya.szeles .m-graf { flex: 1; }
.m-kartya.szeles .m-graf-ter { flex: 1; height: auto; min-height: 9.5em; }
.m-graf-ter svg { display: block; width: 100%; height: 100%; overflow: visible; }
.m-graf-racs { fill: none; stroke: #eceef4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.m-graf-vonal { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.m-graf-ossze { fill: none; stroke: #b7bccd; stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.m-graf-pont { position: absolute; width: .8em; height: .8em; margin: -.4em 0 0 -.4em; border-radius: 50%; background: #fff; border: .2em solid var(--m); box-shadow: 0 0 0 .35em color-mix(in srgb, var(--m) 20%, transparent); }
.m-graf-felirat { position: absolute; right: 0; transform: translate(0, -2.4em); padding: .2em .6em; border-radius: .4em; background: var(--m-szoveg); color: #fff; font-size: .78em; font-weight: 700; white-space: nowrap; }
.m-graf-cimkek { display: flex; justify-content: space-between; color: var(--m-halk); font-size: .76em; }
.m-oszl { display: flex; align-items: flex-end; gap: .6em; height: 9.5em; padding-top: 1.3em; }
.m-oszl-egy { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .3em; height: 100%; }
.m-oszl-egy i { display: block; width: 100%; max-width: 2.6em; height: var(--v); border-radius: .4em .4em .15em .15em; background: color-mix(in srgb, var(--m) 30%, #fff); transform-origin: bottom; }
.m-oszl-egy.utolso i { background: var(--m); }
.m-oszl-egy small { color: var(--m-halk); font-size: .76em; }
.m-oszl-ertek { font-size: .74em; font-weight: 700; color: var(--m-halk); }
.m-savok { display: flex; flex-direction: column; gap: .65em; }
.m-sav-sor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; gap: .7em; font-size: .88em; }
.m-sav-sor span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-sav-sor i { height: .6em; border-radius: 1em; background: #eef0f6; overflow: hidden; }
.m-sav-sor b { display: block; width: var(--v); height: 100%; border-radius: 1em; background: var(--m); transform-origin: left; }
.m-sav-sor em { font-style: normal; font-weight: 700; min-width: 3em; text-align: right; }
.m-fank { position: relative; display: grid; place-items: center; align-content: center; width: 7em; height: 7em; border-radius: 50%; background: conic-gradient(var(--m) 0 var(--a), #eef0f6 0); flex: none; }
.m-fank::before { content: ""; position: absolute; inset: .9em; border-radius: 50%; background: #fff; }
.m-fank b, .m-fank small { position: relative; }
.m-fank b { font-size: 1.5em; font-weight: 800; line-height: 1; }
.m-fank small { color: var(--m-halk); font-size: .75em; }
.m-jelmagy-lista { display: flex; flex-direction: column; gap: .5em; font-size: .88em; }
.m-jelmagy-lista li { display: flex; align-items: center; gap: .5em; }
.m-jelmagy-lista i { width: .8em; height: .8em; border-radius: .25em; background: #c9cdda; }
.m-jelmagy-lista i.jo { background: var(--m); }
.m-jelmagy-lista i.info { background: color-mix(in srgb, var(--m) 45%, #fff); }

/* ---------- Gépes program: keret ---------- */
.ma { display: grid; grid-template-columns: 14.5em minmax(0, 1fr); height: 100%; }
.ma-oldal { display: flex; flex-direction: column; gap: 1.2em; padding: 1.2em .9em 1em; background: #11131c; color: #c9ccdb; overflow: hidden; }
.ma-marka { display: flex; align-items: center; gap: .65em; padding: 0 .3em; }
.ma-marka b { color: #fff; font-size: .98em; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ma-menu { display: flex; flex-direction: column; gap: .25em; }
.ma-menupont {
  position: relative; display: flex; align-items: center; gap: .7em; width: 100%; min-height: 2.6em; padding: 0 .8em;
  border: 0; border-radius: var(--m-r-kicsi); background: transparent; color: #a9adc2; font-size: .92em; font-weight: 600; text-align: left; transition: background .15s, color .15s;
}
.ma-menupont:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.ma-menupont[aria-pressed="true"] { background: var(--m); color: var(--m-ink); box-shadow: 0 .4em 1em -.5em color-mix(in srgb, var(--m) 90%, transparent); }
.ma-menupont[data-ures] { opacity: .6; }
.ma-jelveny { margin-left: auto; min-width: 1.6em; padding: .05em .45em; border-radius: 1em; background: #ef4444; color: #fff; font-style: normal; font-size: .78em; text-align: center; }
.ma-menupont[aria-pressed="true"] .ma-jelveny { background: rgba(255, 255, 255, .25); }
.ma-oldal-also { display: flex; align-items: center; gap: .6em; margin-top: auto; padding: .7em .8em; border-radius: var(--m-r-kicsi); background: rgba(255, 255, 255, .05); font-size: .82em; }
.ma-oldal-also small { display: block; color: #7d8299; }
.ma-elo { width: .6em; height: .6em; flex: none; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 .25em rgba(34, 197, 94, .2); }
.ma-fo { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ma-fejsor { display: flex; align-items: center; gap: .9em; padding: .9em 1.4em; background: #fff; border-bottom: 1px solid var(--m-vonal); }
.ma-cimek { min-width: 0; margin-right: auto; }
.ma-cim { font-size: 1.3em; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.ma-alcim { color: var(--m-halk); font-size: .82em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-kereso { display: flex; align-items: center; gap: .5em; min-width: 15em; min-height: 2.4em; padding: 0 .4em 0 .8em; border-radius: var(--m-r-kicsi); background: var(--m-hatter); color: #9aa0b4; font-size: .88em; }
.ma-kereso span { flex: 1; }
.ma-kereso kbd { padding: .1em .45em; border-radius: .3em; background: #fff; box-shadow: inset 0 0 0 1px var(--m-vonal); font-family: inherit; font-size: .8em; }
.ma-harang { position: relative; display: grid; place-items: center; width: 2.5em; height: 2.5em; padding: 0; border: 0; border-radius: 50%; background: var(--m-hatter); color: var(--m-szoveg); }
.ma-harang i { position: absolute; top: -.1em; right: -.1em; min-width: 1.4em; height: 1.4em; padding: 0 .3em; border-radius: 1em; background: #ef4444; color: #fff; font-style: normal; font-size: .7em; font-weight: 700; line-height: 1.4em; border: 2px solid #fff; }
.ma-profil { display: flex; align-items: center; gap: .55em; font-size: .88em; font-weight: 700; line-height: 1.2; }
.ma-profil small { display: block; color: var(--m-halk); font-weight: 400; font-size: .88em; }
.ma-tartalom { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
.ma-nezet { display: flex; flex-direction: column; gap: .9em; padding: 1.2em 1.4em 1.6em; }

@container minta (max-width: 560px) {
  .ma { display: flex; flex-direction: column; }
  .ma-oldal { flex-direction: row; align-items: center; gap: .6em; padding: .55em .6em; overflow-x: auto; scrollbar-width: none; }
  .ma-oldal::-webkit-scrollbar { display: none; }
  .ma-marka b, .ma-oldal-also, .ma-menupont[data-ures] { display: none; }
  .ma-marka { padding: 0; }
  .ma-marka .m-logo { width: 2em; height: 2em; }
  .ma-menu { flex-direction: row; gap: .2em; }
  .ma-menupont { width: auto; min-height: 2.3em; padding: 0 .7em; white-space: nowrap; font-size: .88em; }
  .ma-jelveny { margin-left: .2em; }
  .ma-fejsor { padding: .7em .9em; gap: .6em; }
  .ma-kereso, .ma-profil > span { display: none; }
  .ma-nezet { padding: .9em .9em 1.3em; gap: .75em; }
  .m-racs-2 { grid-template-columns: minmax(0, 1fr); }
  .m-kpik { grid-template-columns: 1fr 1fr; gap: .6em; }
  .m-kpi { padding: .7em .8em; }
  .m-kpi b { font-size: 1.3em; }
  .m-kpi small span { display: none; }
  .m-rejt { display: none; }
  .m-kereso { min-width: 0; flex: 1; }
  .m-tabla-doboz { overflow-x: auto; }
  .m .m-tabla-doboz > .m-tipp { top: .35em; right: .35em; }
}

/* ---------- 1. Foglaló: heti naptár ---------- */
.mn { position: relative; padding: .6em .8em .8em; border-radius: var(--m-r); background: #fff; box-shadow: inset 0 0 0 1px var(--m-vonal); }
.mn-fej, .mn-test { display: grid; grid-template-columns: 3.2em repeat(var(--d), minmax(0, 1fr)); }
.mn-fej { padding-bottom: .4em; border-bottom: 1px solid var(--m-vonal); }
.mn-fej span { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.mn-fej small { color: var(--m-halk); font-size: .76em; font-weight: 600; text-transform: uppercase; }
.mn-fej b { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; font-size: 1.05em; }
.mn-fej .ma b { background: var(--m); color: var(--m-ink); }
.mn-test { position: relative; height: calc(var(--orak) * 2.9em); margin-top: .4em; }
.mn-orak { position: relative; }
.mn-orak span { position: absolute; right: .6em; transform: translateY(-50%); color: #9aa0b4; font-size: .72em; }
.mn-orak span:first-child { transform: none; }
.mn-nap { position: relative; border-left: 1px solid #f0f1f6; background-image: linear-gradient(#eef0f5 1px, transparent 1px); background-size: 100% calc(100% / var(--orak)); }
.mn-fog {
  position: absolute; left: .2em; right: .2em; display: flex; flex-direction: column; justify-content: flex-start; padding: .2em .45em; overflow: hidden;
  border-radius: calc(var(--m-r-kicsi) * .8); border-left: .22em solid var(--m); background: color-mix(in srgb, var(--m) 14%, #fff); font-size: .78em; line-height: 1.2;
}
.mn-fog.t1 { background: color-mix(in srgb, var(--m) 26%, #fff); }
.mn-fog.t2 { background: #dff5f3; border-left-color: #0f9f9a; }
.mn-fog b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-fog small { color: #4a5068; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9em; }
.mn-fog.rovid small { display: none; }
.mn-fog.uj { z-index: 2; background: var(--m); color: var(--m-ink); box-shadow: 0 0 0 .2em color-mix(in srgb, var(--m) 30%, transparent), 0 .6em 1.2em -.4em color-mix(in srgb, var(--m) 80%, transparent); overflow: visible; }
.mn-fog.uj small { color: inherit; opacity: .9; }
.mn-fog.uj em { display: inline-block; margin-right: .35em; padding: 0 .45em; border-radius: 1em; background: #ef4444; color: #fff; font-style: normal; font-size: .85em; font-weight: 800; vertical-align: .05em; }
.mn-fog.uj .m-tipp { top: -1em; right: -1em; font-size: 1.1em; }
@media (prefers-reduced-motion: no-preference) {
  .mn-fog.uj { animation: uj-lukter 2.2s 2.5s ease-in-out infinite; }
}
@keyframes uj-lukter { 50% { box-shadow: 0 0 0 .45em color-mix(in srgb, var(--m) 18%, transparent), 0 .6em 1.2em -.4em color-mix(in srgb, var(--m) 80%, transparent); } }
.mn-most { position: absolute; left: -.2em; right: 0; z-index: 3; height: 2px; background: #ef4444; }
.mn-most::before { content: ""; position: absolute; left: -.3em; top: -.3em; width: .65em; height: .65em; border-radius: 50%; background: #ef4444; }
.mn-most b { position: absolute; right: .2em; top: -1.5em; padding: 0 .35em; border-radius: .3em; background: #ef4444; color: #fff; font-size: .68em; }
@container minta (max-width: 560px) {
  .mn-fej, .mn-test { grid-template-columns: 2.6em repeat(var(--d), minmax(0, 1fr)); }
  .mn-fog small { display: none; }
  .mn-fog { font-size: .7em; padding: .15em .3em; }
}

/* ---------- Telefonos program: keret ---------- */
.mt { position: relative; display: flex; flex-direction: column; height: 100%; background: #f6f7fb; overflow: hidden; }
.mt-allapot { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; height: 2.9em; padding: .5em 1.5em 0; font-size: .92em; font-weight: 700; background: inherit; z-index: 6; }
.mt-allapot svg { width: 2.8em; height: .9em; fill: currentColor; }
.mt-sziget { position: absolute; left: 50%; top: .55em; width: 30%; height: 1.75em; transform: translateX(-50%); border-radius: 1em; background: #0b0916; }
.mt-kepernyo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mt-kepernyo[hidden] { display: none !important; }
.mt-gorget { position: relative; flex: 1; min-height: 0; overflow: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: .75em; padding: .4em 1.05em 1.2em; }
.mt-gorget::-webkit-scrollbar { display: none; }
.mt-gorget > * { flex-shrink: 0; }
.mt-cim { position: relative; margin-top: .3em; font-weight: 800; font-size: 1.02em; padding-right: 2.6em; }
.mt-lab { position: relative; flex: none; display: flex; flex-direction: column; gap: .4em; padding: .75em 1.05em 1.2em; background: #fff; box-shadow: 0 -.4em 1.2em -.6em rgba(20, 24, 40, .25); }
.mt-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em; width: 100%; min-height: 3.1em; padding: .4em 1em;
  border: 0; border-radius: calc(var(--m-r) + .2em); background: var(--m); color: var(--m-ink); font-weight: 800; font-size: 1em;
  box-shadow: 0 .5em 1.2em -.5em color-mix(in srgb, var(--m) 90%, transparent);
}
.mt-cta.masodik { background: #fff; color: var(--m-szoveg); box-shadow: inset 0 0 0 1px var(--m-vonal); }
.mt-cta.zold { background: #16a34a; color: #fff; box-shadow: 0 .5em 1.2em -.5em rgba(22, 163, 74, .8); }
.mt-also { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: .5em .4em 1em; background: #fff; border-top: 1px solid var(--m-vonal); }
.mt-also span { display: flex; flex-direction: column; align-items: center; gap: .2em; color: #9aa0b4; font-size: .7em; font-weight: 600; }
.mt-also .mi { width: 1.9em; height: 1.9em; }
.mt-also .aktiv { color: var(--m); }
.mt-ertesites {
  position: absolute; left: .6em; right: .6em; top: 3.2em; z-index: 8; display: flex; align-items: center; gap: .65em; padding: .7em .8em;
  border: 0; border-radius: 1.3em; background: rgba(245, 246, 250, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 .8em 2em -.6em rgba(20, 24, 40, .45), inset 0 0 0 1px rgba(255, 255, 255, .7); text-align: left; color: var(--m-szoveg);
  opacity: 0; transform: translateY(-130%); pointer-events: none;
}
.mt-ertesites .m-logo { width: 2.5em; height: 2.5em; }
.mt-ert-ikon { flex: none; display: grid; place-items: center; }
.mt-ert-ikon > .mi { width: 2.5em; height: 2.5em; padding: .55em; border-radius: .7em; background: var(--m); color: var(--m-ink); }
.mt-ert-szoveg { min-width: 0; font-size: .86em; line-height: 1.3; }
.mt-ert-szoveg b { display: flex; justify-content: space-between; gap: .5em; }
.mt-ert-szoveg small { color: var(--m-halk); font-weight: 400; }
.mt-ert-szoveg > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.szinpad .mt-ertesites { animation: ertesites 7s 3.4s cubic-bezier(.2, .8, .2, 1) both; pointer-events: auto; }
.szinpad .mt-ertesites.ujra { animation: ertesites 6s .2s cubic-bezier(.2, .8, .2, 1) both; }
.szinpad .mt-ertesites.el { animation: none; opacity: 0; transform: translateY(-130%); pointer-events: none; transition: opacity .25s, transform .25s; }
@keyframes ertesites { 0% { opacity: 0; transform: translateY(-130%); } 8%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-130%); } }
@media (prefers-reduced-motion: reduce) {
  .szinpad .mt-ertesites, .szinpad .mt-ertesites.ujra { animation: none; opacity: 1; transform: none; }
}
.mt-webfej { display: flex; align-items: center; gap: .6em; padding: .3em 0 .2em; }
.mt-webfej b { flex: 1; font-size: .98em; }
.mt-webfej > .mi { width: 1.6em; height: 1.6em; }
.mt-kpik { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.mt-kpik div { display: flex; flex-direction: column; padding: .8em .85em; border-radius: var(--m-r); background: #fff; box-shadow: inset 0 0 0 1px var(--m-vonal); }
.mt-kpik small { color: var(--m-halk); font-size: .78em; }
.mt-kpik b { font-size: 1.12em; font-weight: 800; letter-spacing: -.02em; }
.mt-kpik em { color: var(--m-jo); font-style: normal; font-size: .76em; font-weight: 700; }
.mt-lista { display: flex; flex-direction: column; gap: .5em; }
.mt-lista li { display: flex; align-items: center; gap: .65em; padding: .7em .75em; border-radius: var(--m-r); background: #fff; box-shadow: inset 0 0 0 1px var(--m-vonal); font-size: .9em; }
.mt-lista li > span:last-child { min-width: 0; flex: 1; }
.mt-lista b { display: block; line-height: 1.25; }
.mt-lista small { display: block; color: var(--m-halk); font-size: .86em; }
.mt-lista .m-halad { width: 100%; margin-top: .35em; }
.mt-lista .m-termekkep { margin-right: 0; }
.m-teendo-ikon { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: .7em; background: var(--m-halvany); color: var(--m); }
li.figyel .m-teendo-ikon { background: var(--m-figyel-h); color: var(--m-figyel); }
li.piros .m-teendo-ikon { background: var(--m-piros-h); color: var(--m-piros); }
li.info .m-teendo-ikon { background: var(--m-info-h); color: var(--m-info); }
.mt-fab { position: sticky; bottom: .2em; align-self: flex-end; display: grid; place-items: center; width: 3.4em; height: 3.4em; margin-top: auto; border: 0; border-radius: 1.1em; background: var(--m); color: var(--m-ink); box-shadow: 0 .6em 1.4em -.5em color-mix(in srgb, var(--m) 90%, transparent); }
.mt-fab .mi { width: 1.5em; height: 1.5em; }
.ma-telo-fej { display: flex; flex-direction: column; gap: .15em; padding: .4em 0 .2em; }
.ma-telo-fej small { color: var(--m-halk); font-size: .8em; text-transform: capitalize; }
.ma-telo-fej b { font-size: 1.55em; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.ma-telo-fej span { color: var(--m-halk); font-size: .9em; }

/* foglaló a vendég telefonján */
.mf-borito { position: relative; flex: none; height: 6.5em; margin: -.4em -1.05em 0; background: linear-gradient(135deg, var(--m), color-mix(in srgb, var(--m) 55%, #0b1020)); overflow: hidden; }
.mf-minta, .mw-minta { position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .28) 0 1.6em, transparent 1.65em), radial-gradient(circle at 85% 80%, rgba(255, 255, 255, .16) 0 3.2em, transparent 3.25em), repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 .5em, transparent .5em 1.2em); }
.mf-profil { display: flex; align-items: flex-end; gap: .7em; margin-top: -2.6em; position: relative; }
.mf-profil b { display: block; font-size: 1.15em; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.mf-profil small { color: var(--m-halk); font-size: .82em; }
.mf-profil > div { padding-bottom: .2em; min-width: 0; }
.mf-info { display: flex; flex-wrap: wrap; gap: .35em; }
.mf-staff { display: flex; gap: .55em; overflow-x: auto; scrollbar-width: none; }
.mf-staff button { display: flex; flex-direction: column; align-items: center; gap: .25em; padding: .35em .3em; border: 0; border-radius: var(--m-r); background: none; font-size: .82em; font-weight: 600; min-width: 3.6em; }
.mf-staff .m-av { width: 2.8em; height: 2.8em; box-shadow: 0 0 0 .18em #fff; }
.mf-staff button[aria-pressed="true"] .m-av { box-shadow: 0 0 0 .18em #fff, 0 0 0 .36em var(--m); }
.mf-staff button[aria-pressed="true"] small { color: var(--m); font-weight: 800; }
.mf-szolg { display: flex; flex-direction: column; gap: .45em; }
.mf-szolg button { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .75em .9em; border: 0; border-radius: var(--m-r); background: #fff; box-shadow: inset 0 0 0 1px var(--m-vonal); text-align: left; transition: box-shadow .15s; }
.mf-szolg span { display: flex; flex-direction: column; gap: .1em; }
.mf-szolg b { font-size: .98em; }
.mf-szolg small { display: flex; align-items: center; gap: .3em; color: var(--m-halk); font-size: .8em; }
.mf-szolg em { font-style: normal; font-weight: 800; white-space: nowrap; }
.mf-szolg button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--m), 0 .4em 1em -.6em color-mix(in srgb, var(--m) 90%, transparent); background: color-mix(in srgb, var(--m) 6%, #fff); }
.mf-napok { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(3em, 1fr); gap: .35em; overflow-x: auto; scrollbar-width: none; }
.mf-napok button { display: flex; flex-direction: column; align-items: center; gap: .05em; padding: .5em 0; border: 0; border-radius: var(--m-r); background: #fff; box-shadow: inset 0 0 0 1px var(--m-vonal); line-height: 1.15; }
.mf-napok small { color: var(--m-halk); font-size: .74em; font-weight: 700; text-transform: uppercase; }
.mf-napok b { font-size: 1.15em; }
.mf-idok { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em; }
.mf-idok button { min-height: 2.6em; border: 0; border-radius: var(--m-r-kicsi); background: #fff; box-shadow: inset 0 0 0 1px var(--m-vonal); font-weight: 700; font-size: .92em; }
.mf-idok button:disabled { color: #b4b8c7; text-decoration: line-through; background: #eef0f5; box-shadow: none; cursor: not-allowed; }
.mf-napok button[aria-pressed="true"], .mf-idok button[aria-pressed="true"] { background: var(--m); color: var(--m-ink); box-shadow: 0 .4em 1em -.5em color-mix(in srgb, var(--m) 90%, transparent); }
.mf-napok button[aria-pressed="true"] small { color: inherit; opacity: .85; }
.mf-kicsi { display: flex; align-items: center; gap: .45em; color: var(--m-halk); font-size: .82em; }
.mf-sav { display: flex; align-items: center; gap: .65em; padding: .75em .85em; border-radius: var(--m-r); background: var(--m-halvany); font-size: .88em; }
.mf-sav > .mi { width: 1.8em; height: 1.8em; color: var(--m); }
.mf-sav b { display: block; }
.mf-sav small { color: var(--m-halk); }
.mf-eloleg { display: flex; align-items: center; justify-content: center; gap: .35em; color: var(--m-halk); font-size: .78em; }
.mf-kesz { align-items: center; justify-content: center; text-align: center; gap: .6em; padding-top: 2em; }
.mf-pipa { display: grid; place-items: center; width: 4.6em; height: 4.6em; border-radius: 50%; background: #16a34a; color: #fff; box-shadow: 0 0 0 .6em #dcfce7; }
.mf-pipa .mi { width: 2.4em; height: 2.4em; stroke-width: 3; }
.mt-kepernyo.frissul .mf-pipa { animation: pipa-be .6s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pipa-be { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.mf-kesz-cim { font-size: 1.5em; font-weight: 800; letter-spacing: -.02em; margin-top: .4em; }
.mf-osszeg { display: flex; flex-direction: column; gap: .5em; width: 100%; padding: .9em 1em; border-radius: var(--m-r); background: #fff; box-shadow: inset 0 0 0 1px var(--m-vonal); text-align: left; }
.mf-osszeg small { display: block; color: var(--m-halk); font-size: .76em; }
.mf-osszeg b { font-size: .95em; }

/* ---------- 2. Kalkulátor ---------- */
.mk { display: flex; flex-direction: column; gap: .9em; }
.mk-urlap { display: flex; flex-direction: column; gap: .75em; }
.mk-pipak { display: flex; flex-wrap: wrap; gap: .5em 1.2em; }
.mk-eredmeny { position: relative; display: flex; flex-direction: column; gap: .7em; padding: 1.1em 1.2em; border-radius: var(--m-r); color: #fff; background: linear-gradient(150deg, #1a1d2e, #0f111b); box-shadow: 0 1em 2em -1.2em rgba(15, 17, 27, .8); overflow: hidden; }
.mk-eredmeny::after { content: ""; position: absolute; right: -4em; top: -4em; width: 12em; height: 12em; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--m) 60%, transparent), transparent 70%); pointer-events: none; }
.mk-eredmeny-fej { display: flex; align-items: center; justify-content: space-between; gap: .5em; padding-right: 2.4em; }
.mk-eredmeny-fej small { color: #a9adc2; font-size: .85em; }
.mk-ossz { position: relative; font-size: 2.3em; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.mk-bontas { position: relative; display: flex; flex-direction: column; gap: .35em; font-size: .9em; }
.mk-bontas li, .mk-doku-sorok li { display: flex; justify-content: space-between; gap: .6em; padding-bottom: .35em; border-bottom: 1px dashed rgba(255, 255, 255, .15); }
.mk-bontas span { color: #c9ccdb; }
.mk-haszon { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .3em .6em; font-size: .85em; color: #a9adc2; }
.mk-haszon b { color: #86efac; }
.mk-haszon .m-halad { grid-column: 1 / -1; width: 100%; background: rgba(255, 255, 255, .12); }
.mk-haszon .m-halad i { background: #4ade80; }
.mk-gombok { position: relative; display: flex; flex-wrap: wrap; gap: .5em; margin-top: auto; }
.mk-gombok .m-gomb { flex: 1; }
.mk-gombok .m-gomb.masodik { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.mk-rajz { display: block; width: 100%; height: auto; }
.mk-rajz-test { fill: var(--m-halvany); stroke: var(--m); stroke-width: 2; }
.mk-rajz-oszt { stroke: var(--m); stroke-width: .8; stroke-dasharray: 3 3; fill: none; }
.mk-rajz-meret { stroke: #646a80; stroke-width: 1; fill: none; }
.mk-rajz text { font-size: 9px; fill: #4a5068; font-weight: 600; }
.mk-anyag { display: flex; flex-direction: column; gap: .5em; font-size: .9em; }
.mk-anyag li { display: flex; justify-content: space-between; gap: .6em; padding: .55em .7em; border-radius: var(--m-r-kicsi); background: var(--m-hatter); }
.mk-anyag b { white-space: nowrap; }
.mk-fank-sor { display: flex; align-items: center; gap: 1.4em; padding: .3em 0; }
.mk-web-hos { position: relative; display: flex; flex-direction: column; gap: .3em; padding: 1.1em 1em; margin: 0 -.2em; border-radius: var(--m-r); background: linear-gradient(135deg, var(--m), color-mix(in srgb, var(--m) 55%, #0b1020)); color: var(--m-ink); }
.mk-web-hos small { opacity: .85; font-size: .78em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.mk-web-hos b { font-size: 1.2em; line-height: 1.2; letter-spacing: -.02em; }
.mk-web-urlap { display: flex; flex-direction: column; gap: .8em; }
.mk-web-urlap input[type="range"] { width: 100%; accent-color: var(--m); min-height: 0; padding: 0; border: 0; }
.mk-web-urlap .m-mezo b { color: var(--m-szoveg); }
.mk-web-ered { display: flex; flex-direction: column; gap: .2em; padding: 1em; border-radius: var(--m-r); background: #fff; box-shadow: inset 0 0 0 1px var(--m-vonal); }
.mk-web-ered .mk-ossz { color: var(--m-szoveg); font-size: 1.9em; }
.mk-level { gap: .7em; }
.mk-level-fej { display: flex; flex-direction: column; gap: .15em; padding-bottom: .5em; border-bottom: 1px solid var(--m-vonal); }
.mk-vissza { color: var(--m); font-size: .85em; font-weight: 600; }
.mk-level-fej b { font-size: 1.05em; line-height: 1.25; }
.mk-level-fej small { color: var(--m-halk); font-size: .8em; }
.mk-doku { display: flex; flex-direction: column; gap: .7em; padding: 1em .95em; border-radius: .3em; background: #fff; box-shadow: 0 .3em 1.2em -.4em rgba(20, 24, 40, .3); font-size: .86em; border-top: .35em solid var(--m); }
.mk-doku-fej { display: flex; align-items: center; gap: .55em; }
.mk-doku-fej .m-logo { width: 2.2em; height: 2.2em; }
.mk-doku-fej b { display: block; font-size: .95em; }
.mk-doku-fej small { color: var(--m-halk); font-size: .8em; }
.mk-doku-fej > span { margin-left: auto; text-align: right; font-weight: 800; letter-spacing: .06em; font-size: .78em; color: var(--m); }
.mk-doku-fej > span small { display: block; color: var(--m-halk); letter-spacing: 0; }
.mk-doku-kinek { display: grid; grid-template-columns: 1fr auto; gap: .5em; padding: .6em .7em; border-radius: .35em; background: var(--m-hatter); }
.mk-doku-kinek small { display: block; color: var(--m-halk); font-size: .78em; }
.mk-doku-sorok { display: flex; flex-direction: column; gap: .35em; }
.mk-doku-sorok li { border-bottom-color: var(--m-vonal); }
.mk-doku-ossz { display: flex; justify-content: space-between; align-items: baseline; padding: .6em .7em; border-radius: .35em; background: var(--m-halvany); }
.mk-doku-ossz b { font-size: 1.3em; font-weight: 800; color: var(--m); }
.mk-doku-kicsi { color: var(--m-halk); font-size: .78em; }

/* ---------- 3. Áruház ---------- */
.m-teendok { display: flex; flex-direction: column; gap: .5em; }
.m-teendok li { display: flex; align-items: center; gap: .65em; padding: .6em .7em; border-radius: var(--m-r-kicsi); background: var(--m-hatter); font-size: .9em; }
.m-teendok li > span:nth-child(2) { flex: 1; min-width: 0; }
.m-teendok b { display: block; line-height: 1.25; }
.m-teendok small { display: block; color: var(--m-halk); font-size: .86em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-rendeles { display: flex; flex-direction: column; gap: .45em; }
.m-rendeles li { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .55em .7em; border-radius: var(--m-r-kicsi); background: var(--m-hatter); font-size: .9em; }
.m-rendeles small { display: block; color: var(--m-halk); font-size: .86em; }
.m-rendeles em { font-style: normal; font-weight: 800; color: var(--m); white-space: nowrap; }
.m-rendeles-ossz { display: flex; justify-content: space-between; padding: .2em .2em 0; font-size: .95em; }
.m-posta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); min-height: 22em; border-radius: var(--m-r); background: #fff; box-shadow: inset 0 0 0 1px var(--m-vonal); overflow: hidden; }
.m-posta-lista { border-right: 1px solid var(--m-vonal); }
.m-posta-lista li { display: flex; align-items: center; gap: .3em; padding: .8em .9em; border-bottom: 1px solid #f0f1f6; font-size: .88em; }
.m-posta-lista li > span { min-width: 0; flex: 1; }
.m-posta-lista b { display: block; }
.m-posta-lista small { display: block; color: var(--m-halk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-posta-lista em { font-style: normal; color: var(--m-halk); font-size: .82em; align-self: flex-start; }
.m-posta-lista li.aktiv { background: var(--m-halvany); box-shadow: inset .22em 0 0 var(--m); }
.m-posta-level { position: relative; display: flex; flex-direction: column; gap: .6em; padding: 1.1em 1.2em; font-size: .92em; }
.m-posta-targy { font-size: 1.15em; font-weight: 800; padding-right: 2.4em; }
.m-valaszvazlat { display: flex; flex-direction: column; gap: .5em; margin-top: .3em; padding: .9em 1em; border-radius: var(--m-r); background: var(--m-halvany); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m) 30%, transparent); }
.m-valaszvazlat small { display: flex; align-items: center; gap: .35em; color: var(--m); font-weight: 700; }
.m-gombsor { display: flex; flex-wrap: wrap; gap: .5em; }
@container minta (max-width: 560px) {
  .m-posta { grid-template-columns: 1fr; }
  .m-posta-lista li:not(.aktiv) { display: none; }
}

/* ---------- 4. ERP ---------- */
.me-kanban { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7em; align-items: start; }
.me-oszlop { display: flex; flex-direction: column; gap: .55em; padding: .7em; border-radius: var(--m-r); background: #eceef5; min-height: 12em; }
.me-oszlop-cim { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: .9em; padding: 0 .2em; }
.me-oszlop-cim i { min-width: 1.7em; padding: .05em .45em; border-radius: 1em; background: #fff; color: var(--m-halk); font-style: normal; font-size: .85em; text-align: center; }
.me-lap { position: relative; display: flex; flex-direction: column; gap: .3em; padding: .7em .75em; border-radius: var(--m-r-kicsi); background: #fff; box-shadow: 0 .15em .4em -.15em rgba(20, 24, 40, .2); font-size: .86em; }
.me-lap.keso { box-shadow: inset .22em 0 0 var(--m-piros), 0 .15em .4em -.15em rgba(20, 24, 40, .2); }
.me-lap-fej { display: flex; align-items: center; justify-content: space-between; gap: .4em; }
.me-lap p { font-weight: 700; line-height: 1.25; }
.me-lap small { color: var(--m-halk); font-size: .88em; }
.me-lap .m-halad { width: 100%; }
.me-lap-lab { display: flex; align-items: center; gap: .2em; font-size: .9em; color: var(--m-halk); }
.me-lap-lab em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--m-szoveg); }
.me-lap-lab .m-gomb { margin-left: auto; }
.me-oszlop-cim > span { display: inline-flex; align-items: center; gap: .45em; }
.m .me-oszlop-cim .m-tipp, .m .me-lap-lab .m-tipp { position: static; flex: none; width: 1.95em; height: 1.95em; }
.m .me-lap-lab .m-tipp { margin-left: .35em; }
.me-esemenyek { display: flex; flex-direction: column; gap: .7em; }
.me-esemenyek li { display: flex; align-items: flex-start; gap: .25em; font-size: .88em; line-height: 1.35; }
.me-esemenyek small { display: block; color: var(--m-halk); font-size: .88em; }
.me-gantt { position: relative; display: flex; flex-direction: column; gap: .4em; padding: .9em 1em; border-radius: var(--m-r); background: #fff; box-shadow: inset 0 0 0 1px var(--m-vonal); }
.me-gantt-fej, .me-gantt-sor { display: grid; grid-template-columns: 8em minmax(0, 1fr); align-items: center; }
.me-gantt-fej { grid-template-columns: 8em repeat(5, minmax(0, 1fr)); color: var(--m-halk); font-size: .8em; font-weight: 700; padding-bottom: .3em; border-bottom: 1px solid var(--m-vonal); }
.me-gantt-fej .ma { color: var(--m); }
.me-gantt-sor > span b { display: block; font-size: .9em; }
.me-gantt-sor > span small { color: var(--m-halk); font-size: .78em; }
.me-gantt-sav { position: relative; height: 2.4em; border-radius: var(--m-r-kicsi); background: repeating-linear-gradient(90deg, #f6f7fb 0 calc(20% - 1px), #e9ebf2 calc(20% - 1px) 20%); }
.me-gantt-sav i { position: absolute; top: .3em; bottom: .3em; display: flex; align-items: center; padding: 0 .5em; border-radius: var(--m-r-kicsi); background: var(--m); color: var(--m-ink); font-style: normal; font-size: .76em; font-weight: 700; overflow: hidden; white-space: nowrap; }
.me-gantt-sav i.t1 { background: color-mix(in srgb, var(--m) 55%, #fff); color: var(--m-szoveg); }
.me-gantt-sav i.t2 { background: #0f9f9a; color: #fff; }
.me-olvaso { gap: .8em; }
.me-kamera { position: relative; height: 11em; margin: 0 -.2em; border-radius: var(--m-r); background: radial-gradient(circle at 50% 40%, #3a3f55, #11131c); overflow: hidden; display: grid; place-items: center; }
.me-kamera svg { width: 62%; height: auto; fill: #f4f5f9; padding: .5em; background: #f4f5f9; border-radius: .3em; }
.me-kamera svg rect { fill: #1b1f2e; }
.me-keret { position: absolute; inset: 1.4em 1.6em; border: .2em solid transparent; border-image: linear-gradient(90deg, #fff 0 22%, transparent 22% 78%, #fff 78%) 1; }
.me-lezer { position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: #ef4444; box-shadow: 0 0 .6em .2em rgba(239, 68, 68, .7); }
@media (prefers-reduced-motion: no-preference) { .me-lezer { animation: lezer 2s ease-in-out infinite alternate; } }
@keyframes lezer { from { top: 25%; } to { top: 75%; } }
.me-olvaso-cim { display: flex; align-items: center; gap: .4em; color: #16a34a; font-weight: 800; }
.me-tetel { display: flex; flex-direction: column; gap: .15em; padding: .85em .95em; border-radius: var(--m-r); background: #fff; box-shadow: inset 0 0 0 1px var(--m-vonal); }
.me-tetel code { font-family: ui-monospace, Consolas, monospace; color: var(--m); font-size: .8em; }
.me-tetel small { color: var(--m-halk); font-size: .82em; }
.me-lepteto { display: grid; grid-template-columns: 3em 1fr auto 3em; align-items: center; gap: .5em; padding: .4em; border-radius: var(--m-r); background: #fff; box-shadow: inset 0 0 0 1px var(--m-vonal); }
.me-lepteto button { height: 2.6em; border: 0; border-radius: var(--m-r-kicsi); background: var(--m-halvany); color: var(--m); font-size: 1.3em; font-weight: 800; line-height: 1; }
.me-lepteto b { text-align: right; font-size: 1.5em; font-weight: 800; }
.me-lepteto span { color: var(--m-halk); }
.me-ketgomb { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.me-kapu-fej { display: flex; flex-direction: column; gap: .15em; padding: 1em; border-radius: var(--m-r); background: linear-gradient(135deg, var(--m), color-mix(in srgb, var(--m) 55%, #0b1020)); color: var(--m-ink); }
.me-kapu-fej small { opacity: .85; font-size: .78em; }
.me-kapu-fej b { font-size: 1.1em; line-height: 1.25; }
.me-kapu-fej span { opacity: .85; font-size: .82em; }
.me-lepesek { display: flex; flex-direction: column; gap: 0; padding: .3em 0; }
.me-lepesek li { position: relative; display: flex; gap: .7em; padding-bottom: 1em; }
.me-lepesek li::before { content: ""; position: absolute; left: .85em; top: 1.8em; bottom: 0; width: 2px; background: #dfe2ea; }
.me-lepesek li:last-child::before { display: none; }
.me-lepesek li.kesz::before { background: var(--m); }
.me-lepesek i { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 1.8em; height: 1.8em; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #dfe2ea; color: var(--m-ink); }
.me-lepesek li.kesz i { background: var(--m); box-shadow: none; }
.me-lepesek li.kov i { box-shadow: inset 0 0 0 2px var(--m), 0 0 0 .3em var(--m-halvany); }
.me-lepesek i .mi { width: 1em; height: 1em; stroke-width: 3; }
.me-lepesek b { display: block; font-size: .95em; }
.me-lepesek small { color: var(--m-halk); font-size: .8em; }
@container minta (max-width: 560px) {
  .me-kanban { grid-template-columns: repeat(4, 78%); overflow-x: auto; scrollbar-width: none; padding-bottom: .3em; }
  .me-gantt-fej, .me-gantt-sor { grid-template-columns: 5.5em minmax(0, 1fr); }
  .me-gantt-fej { grid-template-columns: 5.5em repeat(5, minmax(0, 1fr)); }
}

/* ---------- 6. Egyedi ---------- */
.me-feladat { position: relative; display: flex; gap: 1em; padding: 1em 1.2em; border-radius: var(--m-r); color: var(--m-ink); background: linear-gradient(135deg, var(--m), color-mix(in srgb, var(--m) 50%, #0b1020)); box-shadow: 0 1em 2em -1.2em color-mix(in srgb, var(--m) 80%, transparent); }
.me-feladat small { display: flex; align-items: center; gap: .35em; opacity: .85; font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.me-feladat p { margin-top: .3em; font-size: 1.05em; line-height: 1.45; padding-right: 2em; }
.me-teendok { display: flex; flex-direction: column; gap: .45em; }
.me-teendok li { display: flex; align-items: center; gap: .65em; padding: .55em .65em; border-radius: var(--m-r-kicsi); background: var(--m-hatter); font-size: .9em; transition: opacity .2s; }
.me-teendok li > span:not(.m-chip) { flex: 1; min-width: 0; }
.me-teendok b { display: block; line-height: 1.25; }
.me-teendok small { display: flex; align-items: center; color: var(--m-halk); font-size: .85em; }
.me-teendok li.kesz b { text-decoration: line-through; color: var(--m-halk); }
.mt-teendok li { background: #fff; box-shadow: inset 0 0 0 1px var(--m-vonal); padding: .75em .8em; }
.me-ai { display: flex; flex-direction: column; gap: .55em; font-size: .9em; }
.me-ai p { padding: .65em .85em; border-radius: 1em; max-width: 92%; }
.me-ai .kerdes { align-self: flex-end; background: var(--m); color: var(--m-ink); border-bottom-right-radius: .3em; }
.me-ai .valasz { align-self: flex-start; background: var(--m-hatter); border-bottom-left-radius: .3em; }
.me-ai .valasz .mi { color: var(--m); margin-right: .3em; }
.me-ai-mezo { display: flex; align-items: center; justify-content: space-between; padding: .55em .8em; border-radius: 1em; box-shadow: inset 0 0 0 1px var(--m-vonal); color: #9aa0b4; }
.me-ai-mezo .mi { color: var(--m); }
.me-sav { display: flex; flex-wrap: wrap; gap: .6em 1.6em; padding: .8em 1em; border-radius: var(--m-r); background: #fff; box-shadow: inset 0 0 0 1px var(--m-vonal); font-size: .88em; color: var(--m-halk); }
.me-sav > span { display: inline-flex; align-items: center; gap: .45em; flex-wrap: wrap; }
.me-sav b { display: inline-flex; align-items: center; gap: .25em; color: var(--m-szoveg); margin-left: .3em; }
.me-sav .mi { color: var(--m); }

/* ---------- 5. Weboldal ---------- */
.mw { background: #fff; min-height: 100%; }
.mw-nav { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .8em; padding: .9em 2.4em; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--m-vonal); }
.mw-nev { font-size: 1.05em; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.mw-linkek { display: flex; gap: .2em; margin-left: auto; }
.mw-linkek button { padding: .4em .7em; border: 0; border-radius: var(--m-r-kicsi); background: none; color: #4a5068; font-weight: 600; font-size: .9em; }
.mw-linkek button:hover { background: var(--m-hatter); color: var(--m-szoveg); }
.mw-nyelv { color: var(--m-halk); font-size: .85em; }
.mw-gomb { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 2.8em; padding: .5em 1.3em; border: 0; border-radius: calc(var(--m-r) + .3em); background: var(--m); color: var(--m-ink); font-weight: 800; font-size: .95em; white-space: nowrap; box-shadow: 0 .5em 1.2em -.5em color-mix(in srgb, var(--m) 90%, transparent); }
.mw-gomb.masodik { background: #fff; color: var(--m-szoveg); box-shadow: inset 0 0 0 1px var(--m-vonal); }
.mw-nav-cta { min-height: 2.4em; font-size: .88em; }
.mw-hamburger { display: none; }
.mw-hos { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 2.4em; padding: 3.2em 2.4em 3em; background: radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--m) 14%, #fff), #fff 60%); overflow: hidden; }
.mw-hos-szoveg { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .9em; }
.mw-felcim { display: inline-flex; padding: .3em .8em; border-radius: 999px; background: var(--m-halvany); color: var(--m); font-size: .8em; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.mw h4 { font-size: 2.6em; font-weight: 800; letter-spacing: -.035em; line-height: 1.06; }
.mw-hos p { color: #4a5068; font-size: 1.05em; max-width: 30em; }
.mw-gombok { display: flex; flex-wrap: wrap; gap: .6em; }
.mw-bizalom { display: flex; flex-wrap: wrap; gap: .5em 1.4em; margin-top: .4em; color: var(--m-halk); font-size: .88em; }
.mw-bizalom b { color: var(--m-szoveg); }
.mw-vizual { position: relative; height: 22em; }
.mw-kep1 { position: absolute; inset: 0 8% 6% 6%; border-radius: calc(var(--m-r) * 2 + .6em); background: linear-gradient(145deg, color-mix(in srgb, var(--m) 75%, #fff), var(--m) 45%, color-mix(in srgb, var(--m) 45%, #0b1020)); overflow: hidden; box-shadow: 0 2em 3em -1.6em color-mix(in srgb, var(--m) 80%, transparent); }
.mw-taj { position: absolute; inset: 0; width: 100%; height: 100%; }
.mw-galeria > span .mw-taj, .mw-hir-kep .mw-taj, .mw-rolunk-kep .mw-taj { opacity: .9; }
.mw-kep2 { position: absolute; right: 0; top: -1em; width: 8em; height: 8em; border-radius: 50%; background: color-mix(in srgb, var(--m) 22%, #fff); z-index: -1; }
.mw-lebego { position: absolute; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: .55em; padding: .7em 1em; border-radius: calc(var(--m-r) + .2em); background: #fff; box-shadow: 0 1em 2em -1em rgba(20, 24, 40, .45); font-size: .9em; }
.mw-lebego .mi { grid-row: span 2; width: 2em; height: 2em; padding: .4em; border-radius: .6em; background: var(--m-halvany); color: var(--m); }
.mw-lebego small { color: var(--m-halk); font-size: .82em; }
.mw-lebego.l1 { left: 0; bottom: 14%; }
.mw-lebego.l2 { right: 2%; top: 12%; }
@media (prefers-reduced-motion: no-preference) {
  .mw-lebego.l1 { animation: lebeg 5s ease-in-out infinite; }
  .mw-lebego.l2 { animation: lebeg 6s 1s ease-in-out infinite; }
}
@keyframes lebeg { 50% { transform: translateY(-.5em); } }
.mw-szakasz { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .7em; padding: 2.6em 2.4em; }
.mw-szakasz:nth-of-type(odd) { background: #f8f9fc; }
.mw h5 { font-size: 1.8em; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-bottom: .4em; }
.mw-kartyak { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; width: 100%; }
.mw-kartya { display: flex; flex-direction: column; gap: .45em; padding: 1.3em; border-radius: calc(var(--m-r) + .3em); background: #fff; box-shadow: 0 .2em .8em -.3em rgba(20, 24, 40, .15), inset 0 0 0 1px var(--m-vonal); }
.mw-kartya p { color: #4a5068; font-size: .92em; }
.mw-kartya small { color: var(--m); font-weight: 700; margin-top: auto; }
.mw-ikon { display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: .8em; background: var(--m-halvany); color: var(--m); }
.mw-ikon .mi { width: 1.5em; height: 1.5em; }
.mw-rolunk { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 2.4em; }
.mw-rolunk p { color: #4a5068; }
.mw-rolunk-kep { position: relative; height: 14em; border-radius: calc(var(--m-r) * 2 + .4em); background: linear-gradient(160deg, color-mix(in srgb, var(--m) 35%, #fff), color-mix(in srgb, var(--m) 80%, #0b1020)); overflow: hidden; display: grid; place-items: center; }
.mw-szamok { display: flex; gap: 2em; margin-top: 1em; }
.mw-szamok span { display: flex; flex-direction: column; color: var(--m-halk); font-size: .85em; }
.mw-szamok b { color: var(--m); font-size: 2em; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.mw-arak { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; width: 100%; align-items: center; }
.mw-ar { position: relative; display: flex; flex-direction: column; gap: .5em; padding: 1.4em; border-radius: calc(var(--m-r) + .3em); background: #fff; box-shadow: inset 0 0 0 1px var(--m-vonal); }
.mw-ar p { font-size: 1.7em; font-weight: 800; letter-spacing: -.03em; }
.mw-ar ul { display: flex; flex-direction: column; gap: .35em; font-size: .9em; color: #4a5068; }
.mw-ar li { display: flex; align-items: center; gap: .4em; }
.mw-ar li .mi { color: var(--m); }
.mw-ar.kiemelt { padding: 1.9em 1.4em; background: var(--m); color: var(--m-ink); box-shadow: 0 1.4em 2.4em -1.4em color-mix(in srgb, var(--m) 90%, transparent); }
.mw-ar.kiemelt ul, .mw-ar.kiemelt li .mi { color: inherit; }
.mw-ar em { position: absolute; top: -.8em; left: 1.4em; padding: .2em .7em; border-radius: 1em; background: #fbbf24; color: #3b2a00; font-style: normal; font-size: .75em; font-weight: 800; }
.mw-galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 7em; gap: .7em; width: 100%; }
.mw-galeria > span, .mw-hir-kep { position: relative; border-radius: var(--m-r); overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--m) 45%, #fff), color-mix(in srgb, var(--m) 85%, #0b1020)); }
.mw-galeria .g0 { grid-row: span 2; }
.mw-galeria .g1, .mw-hir-kep.g2 { background: linear-gradient(200deg, #fde68a, color-mix(in srgb, var(--m) 60%, #f97316)); }
.mw-galeria .g2, .mw-hir-kep.g3 { background: linear-gradient(160deg, #99f6e4, color-mix(in srgb, var(--m) 50%, #0f766e)); }
.mw-galeria .g3 { grid-column: span 2; background: linear-gradient(90deg, color-mix(in srgb, var(--m) 30%, #fff), color-mix(in srgb, var(--m) 70%, #1e293b)); }
.mw-galeria .g4, .mw-hir-kep.g4 { background: linear-gradient(135deg, #fbcfe8, color-mix(in srgb, var(--m) 70%, #be185d)); }
.mw-galeria .g5 { background: linear-gradient(135deg, #e0e7ff, color-mix(in srgb, var(--m) 80%, #312e81)); }
.mw-velemenyek { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; width: 100%; }
.mw-velemeny { display: flex; flex-direction: column; gap: .6em; padding: 1.3em; border-radius: calc(var(--m-r) + .3em); background: #fff; box-shadow: inset 0 0 0 1px var(--m-vonal); }
.mw-csillagok { color: #f59e0b; letter-spacing: .1em; }
.mw-velemeny p { font-size: .95em; }
.mw-velemeny > span { display: flex; align-items: center; font-size: .88em; }
.mw-hir { padding: 0 0 1.1em; overflow: hidden; }
.mw-hir-kep { height: 6em; border-radius: 0; margin-bottom: .5em; }
.mw-hir small, .mw-hir b { padding: 0 1.1em; }
.mw-hir small { color: var(--m-halk); margin: 0; font-weight: 400; }
.mw-foglalo { position: relative; display: flex; flex-direction: column; gap: .6em; width: min(100%, 30em); padding: 1.2em; border-radius: calc(var(--m-r) + .3em); background: #fff; box-shadow: 0 .6em 1.6em -.8em rgba(20, 24, 40, .3), inset 0 0 0 1px var(--m-vonal); }
.mw-kapcs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2em; align-items: start; }
.mw-kapcs > div:first-child { position: relative; }
.mw-urlap { display: flex; flex-direction: column; gap: .55em; width: 100%; }
.mw-urlap input, .mw-urlap select, .mw-urlap textarea { width: 100%; min-height: 2.8em; padding: .5em .85em; border: 1px solid #d6d9e4; border-radius: var(--m-r-kicsi); background: #fff; font-size: .95em; resize: none; }
.mw-urlap .mw-gomb { align-self: flex-start; }
.mw-terkep { position: relative; height: 15em; border-radius: calc(var(--m-r) + .3em); background: #eef1f4; overflow: hidden; box-shadow: inset 0 0 0 1px var(--m-vonal); }
.mw-terkep svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mw-terkep path { fill: none; stroke: #fff; stroke-width: 6; }
.mw-tu { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -100%); color: var(--m); }
.mw-tu .mi { width: 2.6em; height: 2.6em; fill: var(--m); stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 .3em .4em rgba(0, 0, 0, .3)); }
.mw-cim { position: absolute; left: .8em; right: .8em; bottom: .8em; padding: .6em .8em; border-radius: var(--m-r-kicsi); background: #fff; box-shadow: 0 .4em 1em -.5em rgba(20, 24, 40, .4); font-size: .88em; }
.mw-cim b, .mw-cim small { display: block; }
.mw-cim small { color: var(--m-halk); }
.mw-lab { display: flex; flex-wrap: wrap; align-items: center; gap: .8em 2em; padding: 1.6em 2.4em; background: #11131c; color: #a9adc2; font-size: .85em; }
.mw-lab .m-logo { width: 2em; height: 2em; }
.mw-szakasz .m-tipp, .mw-hos-szoveg .m-tipp { top: -.4em; right: -.4em; }
.mw-hos-szoveg .m-tipp { right: 0; top: 0; }

@container minta (max-width: 560px) {
  .mw-nav { padding: .7em 1em; }
  .mw-linkek, .mw-nyelv, .mw-nav-cta { display: none; }
  .mw-hamburger { display: grid; place-items: center; margin-left: auto; width: 2.4em; height: 2.4em; border-radius: var(--m-r-kicsi); background: var(--m-hatter); }
  .mw-hos { grid-template-columns: 1fr; gap: 1.4em; padding: 1.6em 1.1em 2em; }
  .mw h4 { font-size: 1.85em; }
  .mw-vizual { height: 12em; }
  .mw-szakasz { padding: 1.8em 1.1em; }
  .mw h5 { font-size: 1.45em; }
  .mw-kartyak, .mw-arak, .mw-velemenyek, .mw-rolunk, .mw-kapcs { grid-template-columns: 1fr; }
  .mw-rolunk { gap: 1.2em; }
  .mw-galeria { grid-template-columns: 1fr 1fr; grid-auto-rows: 5.5em; }
  .mw-ar.kiemelt { padding: 1.4em; }
  .mw-lab { padding: 1.3em 1.1em; }
}
.mt-web { padding: 0; gap: 0; }
.mt-web .mw-nav { top: 0; }