/* Kódszabó – a valódi programok kinézetét követő bemutatók stílusa.
   Betűk a valódi programokból (Taperforge: Geist + Noto Sans Display; BV Beauty: saját sans + serif). */
@font-face { font-family: "TF Geist"; src: url("betuk/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "TF Geist"; src: url("betuk/geist-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "TF Noto"; src: url("betuk/noto-sans-display-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "TF Noto"; src: url("betuk/noto-sans-display-latin-ext.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "BV Sans"; src: url("betuk/bv-sans.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "BV Sans"; src: url("betuk/bv-sans-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "BV Serif"; src: url("betuk/bv-serif.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "BV Serif"; src: url("betuk/bv-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* a Kódszabó oldal címsor-betűje ne szivárogjon be a valódi felületekbe */
:is(.tfe, .tfm, .tfp, .bva, .bvf, .wa, .wam, .thj, .ths, .gal, .galm) :is(h1, h2, h3, h4, h5, h6) { font-family: inherit; }

/* =====================================================================
   Taperforge – közös (márkajel)
   ===================================================================== */
.tf-marka { display: inline-flex; align-items: center; gap: .55em; color: #fff; white-space: nowrap; }
.tf-marka .tf-mark { width: 2em; height: 2em; flex: none; }
.tf-mark-csucs { color: #5ad1e6; }
.tf-marka > span { display: grid; line-height: 1.05; }
.tf-marka b { font: 700 1.35em "TF Geist", "Segoe UI", sans-serif; letter-spacing: -.02em; }
.tf-marka b i { font-style: normal; color: #5ad1e6; }
.tf-marka small { margin-top: .25em; font: 600 .62em "TF Geist", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #b9cdd4; }

/* =====================================================================
   Taperforge – tetőszerkesztő (tfe)
   ===================================================================== */
.tfe {
  --tf-ink: #102c39; --tf-halk: #586b73; --tf-vonal: #d4dde0; --tf-vonal2: #e5ebed; --tf-kek: #0b6a82; --tf-akt: #e1471d; --tf-navy: #12323f;
  display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; font: .78em/1.4 "TF Noto", "Segoe UI", Arial, sans-serif; color: var(--tf-ink); background: #edf1f2;
}
.tfe button { cursor: pointer; }
.tfe-fej { display: flex; align-items: center; gap: 1.2em; min-width: 0; padding: .55em 1em; background: var(--tf-navy); color: #fff; border-bottom: 2px solid #0a7f99; }
.tfe-fej .tf-marka { padding-right: 1.1em; border-right: 1px solid #2c4c59; }
.tfe-cim { display: grid; min-width: 0; line-height: 1.25; }
.tfe-cim b { font: 650 1.1em "TF Geist", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfe-cim small { display: flex; align-items: center; gap: .4em; color: #b9cdd4; font-size: .82em; white-space: nowrap; }
.tfe-cim small i { width: .5em; height: .5em; border-radius: 50%; background: #3ccf8e; }
.tfe-fej-gombok { display: flex; align-items: center; gap: .45em; margin-left: auto; }
.tfe-fg { display: inline-flex; align-items: center; gap: .3em; height: 2.5em; padding: 0 .9em; border: 1px solid #335562; border-radius: 3px; background: transparent; color: #e8f0f2; font: 600 .9em "TF Geist", sans-serif; white-space: nowrap; }
.tfe-fg:hover { background: #1b4351; }
.tfe-fg.fo { background: #0b6a82; border-color: #0b6a82; color: #fff; }
.tfe-fg.fo:hover { background: #095a6f; }
.tfe-allapotjel { border-color: #2d6b55; background: #1d4b3c; color: #b7f0d2; cursor: default; }
.tfe-allapotjel.figy { border-color: #8a5a10; background: #4a3410; color: #ffd98a; }
.tfe-nyil { font-size: .8em; opacity: .8; }

.tfe-test { display: grid; grid-template-columns: 17.5em minmax(0, 1fr) 12.5em; min-height: 0; }
.tfe-bal, .tfe-jobb { position: relative; min-height: 0; overflow: auto; background: #fff; scrollbar-width: thin; }
.tfe-bal { border-right: 1px solid var(--tf-vonal); }
.tfe-jobb { border-left: 1px solid var(--tf-vonal); padding: 0 1em 1em; }
.tfe-pcim { margin: 0; padding: .9em 1em .7em; font: 700 .88em "TF Geist", sans-serif; letter-spacing: .08em; text-transform: uppercase; border-left: 3px solid #0a7f99; margin-top: .8em; }
.tfe-jobb .tfe-pcim { margin-left: -1em; }
.tfe-lepesek { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .1em .2em; padding: .2em .6em .6em; border-bottom: 1px solid var(--tf-vonal2); }
.tfe-lepesek button { display: flex; align-items: center; gap: .3em; min-width: 0; padding: .5em .2em; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--tf-ink); font: 500 .88em "TF Noto", sans-serif; text-align: left; white-space: nowrap; overflow: hidden; }
.tfe-lepesek button span { display: grid; place-items: center; flex: none; width: 1.55em; height: 1.55em; border: 1px solid var(--tf-vonal); border-radius: 2px; font-size: .85em; color: var(--tf-halk); }
.tfe-lepesek button i { font-style: normal; color: #2a9d6a; font-size: .85em; visibility: hidden; }
.tfe-lepesek button.kesz i { visibility: visible; }
.tfe-lepesek button.aktiv { color: var(--tf-akt); font-weight: 650; border-bottom-color: var(--tf-akt); background: #fdf1ed; }
.tfe-lepesek button.aktiv span { background: var(--tf-akt); border-color: var(--tf-akt); color: #fff; }
.tfe-lepesek button:hover:not(.aktiv) { background: #f3f6f7; }
.tfe-lepes-tart { padding: .9em 1em 1.2em; display: grid; gap: .65em; align-content: start; }
.tfe-lepes-tart h5 { margin: .2em 0 0; font: 700 1.05em "TF Geist", sans-serif; }
.tfe-alcim { margin: 0; font: 700 .78em "TF Geist", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--tf-halk); }
.tfe-halk { margin: 0; color: var(--tf-halk); font-size: .92em; }
.tfe-cimke { margin: .2em 0 -.3em; font-weight: 650; font-size: .92em; }
.tfe-szeg { display: flex; border: 1px solid var(--tf-vonal); border-radius: 3px; overflow: hidden; }
.tfe-szeg button { flex: 1; padding: .55em .3em; border: 0; border-right: 1px solid var(--tf-vonal); background: #fff; color: var(--tf-ink); font: 550 .9em "TF Noto", sans-serif; white-space: nowrap; }
.tfe-szeg button:last-child { border-right: 0; }
.tfe-szeg button[aria-pressed="true"] { background: var(--tf-kek); color: #fff; }
.tfe-mezok { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.tfe-mezok label { display: grid; gap: .25em; font-weight: 650; font-size: .9em; }
.tfe-mezok span { display: flex; align-items: center; border: 1px solid var(--tf-vonal); border-radius: 3px; background: #fff; }
.tfe-mezok input { width: 100%; min-width: 0; padding: .5em .6em; border: 0; background: none; font: inherit; font-weight: 500; color: var(--tf-ink); }
.tfe-mezok input:focus { outline: none; }
.tfe-mezok span:focus-within { border-color: #0a7f99; box-shadow: 0 0 0 2px #0a7f9933; }
.tfe-mezok i { padding-right: .6em; font-style: normal; color: var(--tf-halk); }
.tfe-gomb { display: flex; align-items: center; justify-content: center; gap: .45em; padding: .7em .8em; border: 1px solid var(--tf-vonal); border-radius: 3px; background: #fff; color: var(--tf-ink); font: 650 .92em "TF Geist", sans-serif; }
.tfe-gomb:hover { border-color: #9fb0b8; background: #f5f8f8; }
.tfe-gomb.fo { background: var(--tf-kek); border-color: var(--tf-kek); color: #fff; }
.tfe-gomb.fo:hover { background: #095a6f; }
.tfe-gomb.veszely { color: #b3261e; border-color: #e8c4c1; margin-top: .8em; width: 100%; }
.tfe-gomb .mi { width: 1.15em; height: 1.15em; }
.tfe-pipa { display: flex; align-items: center; gap: .5em; font-weight: 600; font-size: .92em; }
.tfe-pipa input { width: 1.1em; height: 1.1em; accent-color: var(--tf-akt); }
.tfe-ketgomb { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.tfe-ketgomb button { padding: .9em .4em; border: 1px solid var(--tf-vonal2); border-radius: 3px; background: #fafbfb; color: #9aa9af; font: 600 .9em "TF Noto", sans-serif; }
.tfe-lef-lista { display: grid; gap: .3em; margin: 0; padding: 0; list-style: none; }
.tfe-lef-lista button { display: flex; align-items: center; gap: .7em; width: 100%; padding: .45em .6em; border: 1px solid var(--tf-vonal2); border-radius: 3px; background: #fff; font: inherit; color: var(--tf-ink); text-align: left; }
.tfe-lef-lista button b { display: grid; place-items: center; width: 2.1em; height: 2.1em; border: 2px solid #1e5aa8; border-radius: 50%; color: #1e5aa8; font-size: .85em; }
.tfe-lef-lista button span { color: var(--tf-halk); font-size: .9em; }
.tfe-lef-lista button[aria-pressed="true"] { border-color: #0a7f99; background: #e4f3f6; }
.tfe-retegek { display: grid; gap: .3em; margin: 0; padding: 0; list-style: none; }
.tfe-retegek li { display: grid; padding: .45em .7em; border: 1px solid var(--tf-vonal2); border-left: 3px solid #c7d3d7; border-radius: 2px; background: #fafbfb; line-height: 1.3; }
.tfe-retegek li.kiemelt { border-left-color: #0a7f99; background: #f1f8fa; }
.tfe-retegek small { color: var(--tf-halk); }
.tfe-ell { display: grid; gap: .45em; margin: 0; padding: 0; list-style: none; }
.tfe-ell li { display: flex; gap: .6em; align-items: flex-start; padding: .55em .7em; border-radius: 3px; background: #eef7f2; font-size: .92em; line-height: 1.35; }
.tfe-ell li b { display: grid; place-items: center; flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; background: #1d7a4f; color: #fff; font-size: .8em; }
.tfe-ell li.figy { background: #fdf3e2; }
.tfe-ell li.figy b { background: #a15c00; }

.tfe-kozep { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-width: 0; min-height: 0; }
.tfe-eszkoz { display: flex; align-items: center; gap: 1em; min-width: 0; padding: .55em .9em; background: #fff; border-bottom: 1px solid var(--tf-vonal); }
.tfe-info { display: grid; min-width: 0; line-height: 1.25; }
.tfe-info b { font: 650 .98em "TF Geist", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfe-info small { color: var(--tf-halk); font-size: .85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfe-skala { display: flex; align-items: center; gap: .45em; margin-left: auto; color: var(--tf-halk); font-size: .85em; white-space: nowrap; }
.tfe-skala i { width: 6.5em; height: .8em; border-radius: 1px; background: linear-gradient(90deg, hsl(200 78% 88%), hsl(160 78% 84%), hsl(120 78% 80%), hsl(80 78% 77%), hsl(40 78% 73%)); }
.tfe-eg { height: 2.4em; padding: 0 .85em; border: 1px solid var(--tf-vonal); border-radius: 3px; background: #fff; font: 650 .9em "TF Geist", sans-serif; color: var(--tf-ink); white-space: nowrap; }
.tfe-eg[aria-pressed="true"] { border-color: #0a7f99; background: #e4f3f6; }
.tfe-rajz-doboz {
  position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden;
  background-color: #f4f7f7; background-image: linear-gradient(#e2e9eb 1px, transparent 1px), linear-gradient(90deg, #e2e9eb 1px, transparent 1px); background-size: 1.6em 1.6em;
}
.tfe-rajz { position: relative; cursor: crosshair; }
.tfe-rajz canvas, .tfe-rajz .tfe-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tfe-svg { overflow: visible; pointer-events: none; }
.tfe-racs { fill: none; stroke: #ffffff; opacity: .6; }
.tfe-racs.kiosztva { stroke: #0f2a35; opacity: .32; }
.tfe-korvonal { fill: none; stroke: #155e63; stroke-linejoin: miter; }
.tfe-meret { fill: none; stroke: #6d7f86; }
.tfe-meret-doboz { fill: #fff; stroke: #c3cfd3; }
.tfe-meret-szoveg { fill: #102c39; font-family: "TF Noto", sans-serif; font-weight: 650; }
.tfe-nyilak path { fill: none; stroke: #1e5aa8; stroke-linecap: round; }
.tfe-nyilak path.hegy { fill: #1e5aa8; stroke: none; }
.tfe-nyil-szoveg { fill: #10283a; font-family: "TF Noto", sans-serif; font-weight: 700; paint-order: stroke; stroke: rgba(255, 255, 255, .55); stroke-width: .08; dominant-baseline: middle; }
.tfe-lef circle { fill: #fff; stroke: #1e5aa8; }
.tfe-lef .tfe-lef-hal { fill: rgba(30, 90, 168, .12); stroke: none; }
.tfe-lef path { stroke: #1e5aa8; }
.tfe-lef text { fill: #1e5aa8; font-family: "TF Noto", sans-serif; font-weight: 700; }
.tfe-lef.kij circle:not(.tfe-lef-hal) { fill: #fff3ee; stroke: #e1471d; }
.tfe-lef.kij .tfe-lef-hal { fill: rgba(225, 71, 29, .2); }
.tfe-lef.kij path, .tfe-lef.kij text { stroke: #e1471d; fill: #e1471d; }
.tfe-lef.kij path { fill: none; }
.tfe-sugo { position: absolute; z-index: 3; display: grid; padding: .45em .7em; border: 1px solid var(--tf-vonal); border-radius: 3px; background: #fff; box-shadow: 0 8px 24px #0a1f2824; font-size: .85em; line-height: 1.3; pointer-events: none; white-space: nowrap; }
.tfe-sugo b { font: 700 1.1em "TF Geist", sans-serif; }
.tfe-sugo small { color: var(--tf-halk); }
.tfe-zoom { position: absolute; right: .8em; bottom: .7em; display: flex; align-items: center; gap: .2em; padding: .2em .3em; border: 1px solid var(--tf-vonal); border-radius: 3px; background: #fff; font-size: .82em; color: var(--tf-halk); }
.tfe-zoom span { padding: 0 .5em; }
.tfe-zoom button { width: 1.9em; height: 1.9em; border: 0; background: none; font-size: 1.15em; color: #0b6a82; }
.tfe-jelmagy { position: absolute; left: .8em; top: .8em; z-index: 2; display: grid; gap: .35em; padding: .7em .9em; border: 1px solid var(--tf-vonal); border-radius: 3px; background: #fff; box-shadow: 0 8px 24px #0a1f2824; font-size: .85em; }
.tfe-jelmagy p { display: flex; align-items: center; gap: .6em; margin: 0; }
.tfe-jelmagy i { display: inline-block; width: 1.6em; height: .9em; flex: none; }
.tfe-jelmagy .j-nyil { background: linear-gradient(90deg, #1e5aa8 70%, transparent 70%); height: .25em; position: relative; }
.tfe-jelmagy .j-lef { width: .95em; height: .95em; border: 2px solid #1e5aa8; border-radius: 50%; }
.tfe-jelmagy .j-vapa { height: .2em; background: #157880; }
.tfe-jelmagy .j-gerinc { height: .2em; background: #7648ba; }
.tfe-jelmagy .j-mezo { border: 1px dashed #8aa0a8; background: hsl(120 78% 80%); }
.tfe-rajz-doboz > .m-tipp { position: absolute; left: 1em; bottom: 1em; }
.tfe-bal > .m-tipp { position: absolute; right: .7em; top: .9em; }
.tfe-fiok { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; max-height: 70%; overflow: auto; background: #fff; border-top: 2px solid var(--tf-akt); box-shadow: 0 -10px 30px #0a1f2829; }
.tfe-fiok-fej { position: sticky; top: 0; display: flex; align-items: baseline; gap: .8em; padding: .6em 1em; background: #fff; border-bottom: 1px solid var(--tf-vonal2); }
.tfe-fiok-fej b { font: 700 1em "TF Geist", sans-serif; }
.tfe-fiok-fej small { color: var(--tf-halk); }
.tfe-fiok-fej button { margin-left: auto; width: 1.8em; height: 1.8em; border: 1px solid var(--tf-vonal); border-radius: 3px; background: #fff; font-size: 1.1em; line-height: 1; color: var(--tf-ink); }
.tfe-fiok .tfe-ell { padding: .8em 1em; }
.tfe-tabla { width: 100%; border-collapse: collapse; font-size: .88em; }
.tfe-tabla th { padding: .45em 1em; text-align: left; font: 700 .82em "TF Geist", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--tf-halk); background: #f5f8f8; }
.tfe-tabla td { padding: .4em 1em; border-top: 1px solid var(--tf-vonal2); white-space: nowrap; }
.tfe-tabla tr.alap td { background: #f1f8fa; }
.tfe-allapot { display: flex; gap: 1.6em; padding: .4em .9em; background: #fff; border-top: 1px solid var(--tf-vonal); color: var(--tf-halk); font-size: .82em; white-space: nowrap; overflow: hidden; }
.tfe-allapot b { color: var(--tf-ink); font-weight: 650; }
.tfe-tipp { margin-left: auto; }
.tfe-also { position: relative; display: flex; align-items: stretch; gap: .4em; padding: 0 .9em; background: #fff; border-top: 1px solid var(--tf-vonal); }
.tfe-also button { display: flex; align-items: center; gap: .6em; padding: .65em .6em; border: 0; border-bottom: 2px solid transparent; background: none; font: 650 .95em "TF Geist", sans-serif; color: var(--tf-ink); }
.tfe-also button.aktiv { color: var(--tf-akt); border-bottom-color: var(--tf-akt); }
.tfe-also em { padding: .15em .55em; border-radius: 2px; background: #eef1f2; font: 600 .88em "TF Noto", sans-serif; font-style: normal; color: var(--tf-ink); }
.tfe-also > .m-tipp { position: absolute; right: 1em; top: 50%; transform: translateY(-50%); }
.tfe-tul-cim { margin: .2em 0 .6em; font: 600 1em "TF Geist", sans-serif; }
.tfe-tul-cim b { color: var(--tf-akt); }
.tfe-dl { display: grid; gap: 0; margin: .6em 0 0; }
.tfe-dl div { display: flex; justify-content: space-between; gap: .6em; padding: .45em 0; border-bottom: 1px solid var(--tf-vonal2); font-size: .9em; }
.tfe-dl dt { color: var(--tf-halk); }
.tfe-dl dd { margin: 0; font-weight: 650; text-align: right; }
.tfe-dl dd.figy { color: #a15c00; }

/* keskeny (táblagép álló): egymás alatt, a jobb panel nélkül */
@container minta (max-width: 560px) {
  .tfe { font-size: .74em; }
  .tfe-fej { flex-wrap: wrap; gap: .5em .8em; padding: .5em .7em; }
  .tfe-fej .tf-marka { border: 0; padding: 0; }
  .tfe-cim { display: none; }
  .tfe-fej-gombok { flex-wrap: wrap; justify-content: flex-end; }
  .tfe-fej-gombok .tfe-fg:not(.fo):not(.tfe-allapotjel) { display: none; }
  .tfe-test { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .tfe-jobb { display: none; }
  .tfe-bal { border-right: 0; border-bottom: 1px solid var(--tf-vonal); max-height: 15em; }
  .tfe-pcim { display: none; }
  .tfe-lepesek { grid-template-columns: repeat(6, auto); overflow-x: auto; padding: .3em .5em; }
  .tfe-lepes-tart { padding: .6em .8em .8em; }
  .tfe-eszkoz { flex-wrap: wrap; gap: .4em .8em; }
  .tfe-eg { display: none; }
  .tfe-tipp { display: none; }
  .tfe-bal > .m-tipp { top: .5em; }
}

/* =====================================================================
   Taperforge – portál, Ügyfélszerző (tfp)
   ===================================================================== */
.tfp {
  --tf-ink: #102c39; --tf-halk: #586b73; --tf-vonal: #d4dde0; --tf-vonal2: #e5ebed; --tf-kek: #0b6a82; --tf-navy: #12323f;
  position: relative; display: grid; grid-template-columns: 14.8em minmax(0, 1fr); height: 100%; font: .76em/1.42 "TF Geist", "Segoe UI", Arial, sans-serif; color: var(--tf-ink); background: #edf1f2;
}
.tfp button { cursor: pointer; font-family: inherit; }
.tfp-oldal { overflow: auto; padding: 1.3em .8em; background: #12323f; color: #dbe7ea; scrollbar-width: none; }
.tfp-oldal .tf-marka { padding: 0 .4em 1.1em; border-bottom: 1px solid #2a4b58; width: 100%; }
.tfp-oldal-cim { margin: 1.3em .5em .5em; font-size: .72em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9fb7bf; }
.tfp-menu { display: grid; gap: .1em; padding-bottom: 1em; border-bottom: 1px solid #2a4b58; }
.tfp-menu:last-child { border-bottom: 0; }
.tfp-menu button { display: flex; align-items: center; gap: .75em; padding: .6em .7em; border: 0; border-left: 3px solid transparent; border-radius: 0 3px 3px 0; background: none; color: #e6eff1; font-weight: 600; font-size: .95em; text-align: left; }
.tfp-menu button:hover { background: #1b4351; }
.tfp-menu button .mi { width: 1.25em; height: 1.25em; color: #a9c1c8; }
.tfp-menu button.aktiv { background: #1d4756; border-left-color: #5ad1e6; color: #fff; }
.tfp-menu button.aktiv::after { content: ""; width: .35em; height: .35em; margin-left: auto; background: #5ad1e6; }
.tfp-menu em { margin-left: auto; display: grid; place-items: center; min-width: 1.6em; height: 1.6em; border-radius: 50%; background: #0a7f99; color: #fff; font-style: normal; font-size: .8em; }
.tfp-fo { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
.tfp-fej { display: flex; align-items: center; gap: .6em; padding: .9em 1.6em; background: #fff; border-bottom: 1px solid var(--tf-vonal); font-size: .8em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #3d535c; }
.tfp-fej .mi { width: 1.3em; height: 1.3em; color: #0a7f99; }
.tfp-felh { display: flex; align-items: center; gap: .5em; margin-left: auto; letter-spacing: 0; text-transform: none; font-size: 1.15em; color: var(--tf-ink); }
.tfp-tart { position: relative; overflow: auto; padding: 1.6em 1.6em 2em; scrollbar-width: thin; }
.tfp-szem { display: flex; align-items: center; gap: .6em; margin: 0; font-size: .78em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #0b6a82; }
.tfp-szem::before { content: ""; width: 1.6em; height: 2px; background: #0b6a82; }
.tfp-h1 { margin: .15em 0 .2em; font-size: 2em; font-weight: 700; letter-spacing: -.02em; }
.tfp-lead { margin: 0; color: #3d535c; font-size: .95em; }
.tfp-ceg { display: flex; align-items: center; gap: .5em; flex-wrap: wrap; margin: 1em 0 1.3em; font-size: .9em; }
.tfp-tag { padding: .1em .5em; border: 1px solid var(--tf-vonal); border-radius: 2px; background: #fff; font-size: .82em; font-weight: 600; }
.tfp-tag.sarga { border-color: #f1d79a; background: #fdf3d6; color: #8a5a00; }
.tfp-halk { color: var(--tf-halk); }
.tfp-halk.kicsi { margin: .1em 0 0; font-size: .85em; }
.tfp-kpik { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7em; margin-bottom: 1.2em; }
.tfp-kpi { display: grid; align-content: start; gap: .2em; min-width: 0; padding: .9em 1em 1em; border: 1px solid var(--tf-vonal); border-radius: 3px; background: #fff; }
.tfp-kpi p { display: flex; justify-content: space-between; gap: .4em; margin: 0 0 .5em; font-size: .9em; font-weight: 700; }
.tfp-kpi p span { display: grid; place-items: center; width: 2em; height: 2em; flex: none; border-radius: 2px; background: #e4f3f6; color: #0b6a82; }
.tfp-kpi p .mi { width: 1.1em; height: 1.1em; }
.tfp-kpi b { font-size: 2em; line-height: 1; font-weight: 700; }
.tfp-kpi small { color: var(--tf-halk); font-size: .78em; }
.tfp-kpi.sotet { background: #12323f; border-color: #12323f; color: #fff; box-shadow: inset 0 3px 0 #0a7f99; }
.tfp-kpi.sotet small { color: #b9cdd4; }
.tfp-kpi.sotet p span { background: #1d4756; color: #5ad1e6; }
.tfp-kpi.piros b { color: #a1323b; }
.tfp-kpi.piros p span { background: #fbe9ea; color: #b3261e; }
.tfp-eszkoz { display: flex; align-items: flex-end; gap: .8em; flex-wrap: wrap; margin-bottom: .6em; }
.tfp-fulek { display: flex; padding: .25em; border: 1px solid var(--tf-vonal); border-radius: 3px; background: #fff; }
.tfp-fulek button { padding: .55em 1em; border: 0; border-bottom: 2px solid transparent; background: none; color: #3d535c; font-weight: 600; font-size: .92em; }
.tfp-fulek button[aria-pressed="true"] { border-bottom-color: #0b6a82; color: var(--tf-ink); background: #f5f8f8; }
.tfp-kereso { display: grid; gap: .3em; flex: 1; min-width: 12em; font-size: .9em; }
.tfp-kereso.keskeny { flex: 0 1 12em; min-width: 9em; }
.tfp-kereso small, .tfp-mezo small { font-weight: 700; font-size: .9em; }
.tfp-kereso input, .tfp-kereso select, .tfp-mezo input, .tfp-mezo select { width: 100%; min-width: 0; padding: .6em .7em; border: 1px solid #c5d2d6; border-radius: 2px; background: #fff; font: inherit; font-weight: 500; color: var(--tf-ink); }
.tfp-gomb { display: inline-flex; align-items: center; justify-content: center; gap: .45em; padding: .65em 1em; border: 1px solid #c5d2d6; border-radius: 2px; background: #fff; color: var(--tf-ink); font-weight: 650; font-size: .92em; white-space: nowrap; }
.tfp-gomb:hover { border-color: #8aa0a8; }
.tfp-gomb .mi { width: 1.1em; height: 1.1em; }
.tfp-gomb.fo { background: #0b6a82; border-color: #0b6a82; color: #fff; }
.tfp-gomb.fo:hover { background: #095a6f; }
.tfp-gomb.halk { background: #9aa7ac; border-color: #9aa7ac; color: #fff; }
.tfp-gomb.tiltott { background: #a9b4b8; border-color: #a9b4b8; color: #fff; }
.tfp-gomb.szeles { width: 100%; }
.tfp-gomb.veszely { color: #b3261e; border-color: #e8c4c1; }
.tfp-gomb:disabled { opacity: .55; cursor: wait; }
.tfp-tart > .m-tipp { position: absolute; right: 1.6em; top: 1.6em; }
.tfp-tipp { margin: 0 0 .7em; color: #3d535c; font-size: .85em; }
.tfp-kanban { display: grid; grid-template-columns: repeat(4, minmax(12.5em, 1fr)) 2.6em 2.6em; gap: .6em; overflow-x: auto; padding-bottom: .4em; align-items: start; }
.tfp-oszlop { display: grid; gap: .55em; align-content: start; min-width: 0; padding: .7em .6em .8em; border-radius: 3px; background: #e2e9eb; border-top: 3px solid #9fb0b8; }
.tfp-oszlop.k-meg { border-top-color: #12323f; }
.tfp-oszlop.k-val { border-top-color: #0a7f99; }
.tfp-oszlop.k-par { border-top-color: #1d7a4f; }
.tfp-oszlop-fej { display: flex; align-items: center; justify-content: space-between; margin: 0 .2em; font-size: .95em; }
.tfp-oszlop-fej em { padding: .05em .55em; border-radius: 2px; background: #fff; font-style: normal; font-weight: 700; font-size: .85em; }
.tfp-oszlop-es { margin: -.3em .2em 0; color: #8a5a00; font-size: .8em; font-weight: 650; }
.tfp-ures { margin: .4em; color: var(--tf-halk); font-size: .85em; }
.tfp-kartya { display: grid; gap: .55em; padding: .8em .85em; border: 1px solid var(--tf-vonal); border-radius: 3px; background: #fff; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.tfp-kartya:hover { border-color: #8aa0a8; box-shadow: 0 6px 18px #0a1f2814; }
.tfp-kartya.villan { animation: tfp-villan 1s ease; }
@keyframes tfp-villan { 0% { box-shadow: 0 0 0 3px #5ad1e6; } 100% { box-shadow: 0 0 0 0 transparent; } }
.tfp-kartya-fej { display: flex; gap: .7em; align-items: flex-start; }
.tfp-kartya-fej span:last-child { display: grid; min-width: 0; line-height: 1.25; }
.tfp-kartya-fej b { font-size: .98em; }
.tfp-kartya-fej small { color: var(--tf-halk); font-size: .85em; }
.tfp-pont { display: grid; place-items: center; flex: none; width: 2.6em; height: 2.6em; border-radius: 2px; background: #eef2f3; color: #586b73; font-weight: 700; font-size: .95em; box-shadow: inset 0 -3px 0 #c5d2d6; }
.tfp-pont.kozep { background: #e4f3f6; color: #0b6a82; box-shadow: inset 0 -3px 0 #0b6a82; }
.tfp-pont.eros { background: #0b6a82; color: #fff; box-shadow: inset 0 -3px 0 #074a5c; }
.tfp-pont.nagy { width: 3.4em; height: 3.4em; font-size: 1.5em; }
.tfp-cimkek { display: flex; flex-wrap: wrap; gap: .3em; }
.tfp-cimke { padding: .1em .45em; border: 1px solid #c5d2d6; border-radius: 2px; font-size: .78em; font-weight: 650; color: #3d535c; background: #fff; }
.tfp-cimke.sarga { border-color: #f1d79a; background: #fdf3d6; color: #8a5a00; }
.tfp-cimke.piros { border-color: #efc2c5; background: #fbe9ea; color: #a1323b; }
.tfp-teendo { display: flex; gap: .5em; padding: .5em .6em; border-radius: 2px; background: #f1f4f5; font-size: .82em; line-height: 1.3; }
.tfp-teendo .mi { width: 1.1em; height: 1.1em; flex: none; margin-top: .1em; }
.tfp-teendo span { display: grid; }
.tfp-teendo.lejart { background: #fbe9ea; color: #8f2a2f; }
.tfp-teendo.lejart b { color: #b3261e; }
.tfp-teendo.ma { background: #fdf3d6; color: #6b4a00; }
.tfp-teendo.ma b { color: #8a5a00; }
.tfp-kartya-lab { display: flex; align-items: center; gap: .5em; padding-top: .5em; border-top: 1px solid var(--tf-vonal2); }
.tfp-eler { display: inline-flex; gap: .45em; }
.tfp-eler .mi { width: 1.1em; height: 1.1em; }
.tfp-eler .nincs { opacity: .3; }
.tfp-valt { margin-left: auto; color: var(--tf-halk); }
.tfp-kartya-lab select { width: 7.4em; padding: .35em .4em; border: 1px solid #c5d2d6; border-radius: 2px; background: #fff; font: inherit; font-size: .85em; color: var(--tf-ink); cursor: pointer; }
.tfp-csukott { display: grid; justify-items: center; align-content: start; gap: .6em; min-height: 12em; padding: .8em 0; border: 0; border-radius: 3px; background: #e2e9eb; border-top: 3px solid #a1323b; }
.tfp-csukott:last-child { border-top-color: #9fb0b8; }
.tfp-csukott b { writing-mode: vertical-rl; font-size: .9em; }
.tfp-csukott em { padding: .05em .45em; border-radius: 2px; background: #fff; font-style: normal; font-weight: 700; font-size: .8em; }
.tfp-doboz { padding: 1.1em 1.2em; border: 1px solid var(--tf-vonal); border-radius: 3px; background: #fff; }
.tfp-doboz h5 { margin: 0 0 .2em; font-size: 1.15em; font-weight: 700; }
.tfp-doboz > p { margin: 0; }
.tfp-tabla { width: 100%; border-collapse: collapse; font-size: .88em; }
.tfp-tabla th { padding: .6em .7em; text-align: left; font-size: .8em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #3d535c; border-bottom: 1px solid var(--tf-vonal); }
.tfp-tabla td { padding: .7em; border-bottom: 1px solid var(--tf-vonal2); vertical-align: top; }
.tfp-tabla td small { display: block; color: var(--tf-halk); }
.tfp-tabla td .tfp-cimkek { margin: .3em 0; }
.tfp-tabla tr[data-tfp-lead] { cursor: pointer; }
.tfp-tabla tr[data-tfp-lead]:hover td { background: #f5f8f8; }
.tfp-tabla tr.tilt td { color: #8a989e; }
.tfp-tabla tr.tilt .tfp-pont { opacity: .55; }
.tfp-all { padding: .15em .5em; border-radius: 2px; background: #eef2f3; font-weight: 650; font-size: .85em; white-space: nowrap; }
.tfp-all.a-megkeresve { background: #dfe7ea; } .tfp-all.a-valaszolt { background: #e4f3f6; color: #0b6a82; } .tfp-all.a-partner { background: #e3f3ea; color: #1d7a4f; } .tfp-all.a-elutasitotta, .tfp-all.a-nemerdekes { color: #a1323b; background: #fbe9ea; }
.tfp-piros { color: #b3261e; font-weight: 650; }
.tfp-tilto ul { display: grid; gap: .4em; margin: .8em 0 0; padding: 0; list-style: none; }
.tfp-tilto li { display: grid; padding: .6em .8em; border: 1px solid var(--tf-vonal2); border-left: 3px solid #a1323b; border-radius: 2px; }
.tfp-tilto li span { color: var(--tf-halk); font-size: .88em; }
.tfp-keres-racs { display: grid; grid-template-columns: minmax(15em, .78fr) minmax(0, 1.22fr); gap: 1em; align-items: start; }
.tfp-keres-bal { display: grid; gap: 1em; }
.tfp-uj-kereses { display: grid; gap: .65em; }
.tfp-keret { display: flex; gap: .5em; margin: .2em 0 0 !important; font-size: .82em; color: #3d535c; }
.tfp-keret .mi { width: 1.1em; height: 1.1em; flex: none; color: #0b6a82; }
.tfp-mcim { margin: .6em 0 -.1em; font-size: .78em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #3d535c; }
.tfp-szeg { display: inline-flex; padding: .2em; border: 1px solid var(--tf-vonal); border-radius: 2px; background: #f5f8f8; justify-self: start; }
.tfp-szeg button { padding: .45em .9em; border: 0; border-radius: 2px; background: none; color: #6a7c83; font-weight: 600; font-size: .9em; }
.tfp-szeg button[aria-pressed="true"] { background: #fff; color: var(--tf-ink); box-shadow: 0 1px 3px #0a1f2829; }
.tfp-mezo { display: grid; gap: .3em; font-size: .92em; }
.tfp-mezo input[type="range"] { padding: 0; border: 0; accent-color: #0b6a82; }
.tfp-csipek { display: flex; flex-wrap: wrap; gap: .4em; }
.tfp-csip { display: inline-flex; align-items: center; gap: .4em; padding: .4em .75em; border: 1px solid #c5d2d6; border-radius: 999px; font-size: .85em; font-weight: 600; cursor: pointer; }
.tfp-csip input { accent-color: #0b6a82; margin: 0; }
.tfp-csip.be { border-color: #0b6a82; background: #e4f3f6; }
.tfp-korabbi { display: grid; gap: .5em; }
.tfp-korabbi-sor { display: grid; grid-template-columns: 1fr auto; gap: .2em .6em; padding: .6em .7em; border: 1px solid transparent; border-radius: 2px; font-size: .9em; }
.tfp-korabbi-sor.aktiv { border-color: #f0b3a6; background: #e4f3f6; }
.tfp-korabbi-sor em { padding: .05em .45em; border: 1px solid var(--tf-vonal); border-radius: 2px; background: #fff; font-style: normal; font-size: .82em; font-weight: 650; }
.tfp-korabbi-sor small { grid-column: 1 / -1; color: var(--tf-halk); font-size: .85em; }
.tfp-talalatok { min-height: 20em; overflow-x: auto; }
.tfp-koltseg { display: flex; align-items: center; gap: .5em; margin: .9em 0 !important; font-size: .88em; color: #3d535c; }
.tfp-koltseg .mi { width: 1.1em; height: 1.1em; color: #0b6a82; }
.tfp-talalat-eszk { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; padding: .7em; margin-bottom: .6em; border: 1px solid var(--tf-vonal2); border-radius: 2px; background: #f5f8f8; }
.tfp-talalat-eszk small { margin-left: auto; color: var(--tf-halk); font-size: .82em; }
.tfp-eler-cella small { font-size: .82em; word-break: break-all; color: #3d535c !important; }
.tfp-ures-nagy { display: grid; justify-items: center; gap: .5em; padding: 3em 1em; text-align: center; color: var(--tf-halk); }
.tfp-ures-nagy .mi { width: 2.4em; height: 2.4em; color: #9fb0b8; }
.tfp-ures-nagy b { color: var(--tf-ink); font-size: 1.1em; }
.tfp-ures-nagy p { max-width: 28em; margin: 0; }
.tfp-reszek { display: grid; gap: .6em; margin-top: 1.2em; }
.tfp-reszek p { display: grid; grid-template-columns: 13em minmax(0, 1fr) 4.5em; align-items: center; gap: .8em; margin: 0; font-size: .9em; }
.tfp-reszek i { height: .55em; border-radius: 1px; background: #e2e9eb; overflow: hidden; }
.tfp-reszek i b { display: block; height: 100%; width: 0; background: #0b6a82; }
.tfp-reszek em { font-style: normal; text-align: right; color: var(--tf-halk); }
.tfp-lab { margin: 1.4em 0 0; color: var(--tf-halk); font-size: .78em; }
.tfp-panel-hatter { position: absolute; inset: 0; z-index: 5; background: rgba(10, 31, 40, .45); }
.tfp-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 6; width: min(31em, 92%); overflow: auto; background: #fff; border-top: 3px solid #0a7f99; box-shadow: -18px 0 50px #0a1f2840; scrollbar-width: thin; }
.tfp-panel.beuszik { animation: tfp-be .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes tfp-be { from { transform: translateX(40px); opacity: 0; } }
.tfp-panel-fej { position: sticky; top: 0; z-index: 1; display: flex; gap: 1em; justify-content: space-between; padding: 1em 1.3em .9em; background: #fff; border-bottom: 1px solid var(--tf-vonal2); }
.tfp-panel-fej span { display: grid; line-height: 1.3; }
.tfp-panel-fej small { font-size: .75em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #0b6a82; }
.tfp-panel-fej b { font-size: 1.35em; }
.tfp-panel-fej em { font-style: normal; color: var(--tf-halk); font-size: .88em; }
.tfp-panel-fej button { align-self: start; width: 2.2em; height: 2.2em; border: 1px solid var(--tf-vonal); border-radius: 2px; background: #fff; font-size: 1.2em; line-height: 1; color: var(--tf-ink); }
.tfp-panel-test { display: grid; gap: .7em; padding: 1em 1.3em 1.5em; }
.tfp-bontas { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9em 1em; padding: 1em; border: 1px solid var(--tf-vonal2); border-top: 3px solid #0a7f99; border-radius: 2px; background: #f5f8f8; }
.tfp-bontas > div:not(.tfp-okok) { display: grid; gap: .35em; }
.tfp-bontas p { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 3em; align-items: center; gap: .6em; margin: 0; font-size: .85em; }
.tfp-bontas i { height: .35em; background: #dbe3e6; }
.tfp-bontas i b { display: block; height: 100%; background: #12323f; }
.tfp-bontas em { font-style: normal; font-weight: 700; text-align: right; }
.tfp-bontas em small { font-weight: 500; color: var(--tf-halk); }
.tfp-okok { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .35em; }
.tfp-okok span { padding: .25em .6em; border: 1px solid var(--tf-vonal); border-radius: 999px; background: #fff; font-size: .78em; color: #3d535c; }
.tfp-allapotok { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em; }
.tfp-allapotok button { padding: .6em .7em; border: 1px solid var(--tf-vonal); border-left: 3px solid #c5d2d6; border-radius: 2px; background: #fff; color: #6a7c83; font-weight: 600; font-size: .88em; text-align: left; }
.tfp-allapotok button[aria-pressed="true"] { background: #9fb0b8; border-color: #9fb0b8; color: #102c39; }
.tfp-teendo-sor { display: grid; grid-template-columns: .8fr 1.2fr; gap: .6em; }
.tfp-gyors { display: flex; gap: .35em; flex-wrap: wrap; align-items: center; }
.tfp-gyors > button:not(.tfp-gomb) { padding: .45em .7em; border: 1px solid var(--tf-vonal); border-radius: 2px; background: #f5f8f8; color: #3d535c; font-size: .82em; font-weight: 600; }
.tfp-gyors .tfp-gomb { margin-left: auto; }
.tfp-sotet-jelzes { display: flex; gap: .6em; margin: 0; padding: .8em 1em; border-radius: 2px; background: #12323f; color: #e6eff1; font-size: .85em; font-weight: 600; }
.tfp-sotet-jelzes .mi { width: 1.2em; height: 1.2em; flex: none; color: #5ad1e6; }
.tfp-level-eszk { display: flex; gap: .5em; flex-wrap: wrap; align-items: center; }
.tfp-level { border: 1px solid var(--tf-vonal); border-radius: 2px; background: #fafcfc; }
.tfp-level-fej { display: grid; grid-template-columns: 5em 1fr; gap: .6em; margin: 0; padding: .55em .9em; border-bottom: 1px solid var(--tf-vonal2); font-size: .88em; }
.tfp-level-fej small { color: var(--tf-halk); }
.tfp-level-test { display: grid; gap: .6em; padding: .9em; font: .9em/1.5 "TF Noto", sans-serif; min-height: 10em; }
.tfp-level-test p { margin: 0; }
.tfp-panel-lab { display: flex; gap: .5em; flex-wrap: wrap; padding-top: .9em; border-top: 1px solid var(--tf-vonal2); }
.tfp-tel-lista { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid #d4dde0; border-radius: 3px; background: #fff; }
.tfp-tel-lista li { display: flex; align-items: center; gap: .6em; padding: .6em .7em; border-top: 1px solid #e5ebed; }
.tfp-tel-lista li:first-child { border-top: 0; }
.tfp-tel-lista li > span:not(.tfp-pont) { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.tfp-tel-lista b { font: 650 .92em "TF Geist", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfp-tel-lista small { color: #586b73; font-size: .8em; }
.tfp-tel-lista small.piros { color: #b3261e; font-weight: 650; }
.tfp-tel-lista .tfp-pont { width: 2.2em; height: 2.2em; font-size: .85em; }
.tfp-tel-lista button { display: grid; place-items: center; width: 2.2em; height: 2.2em; flex: none; border: 0; border-radius: 50%; background: #1d7a4f; color: #fff; cursor: pointer; }
.tfp-tel-lista button .mi { width: 1.1em; height: 1.1em; }

@container minta (max-width: 560px) {
  .tfp { grid-template-columns: minmax(0, 1fr); font-size: .72em; }
  .tfp-oldal { display: none; }
  .tfp-fej { padding: .8em 1em; }
  .tfp-tart { padding: 1.1em 1em 1.5em; }
  .tfp-kpik { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tfp-kpi:first-child { grid-column: 1 / -1; }
  .tfp-eszkoz .tfp-gomb, .tfp-kereso.keskeny { display: none; }
  .tfp-kanban { grid-template-columns: repeat(4, 15em) 2.6em 2.6em; }
  .tfp-keres-racs { grid-template-columns: minmax(0, 1fr); }
  .tfp-tart > .m-tipp { top: 1.1em; right: 1em; }
}

/* =====================================================================
   BV Beauty – közös
   ===================================================================== */
.bva, .bvf { --bv-fg: #3b2037; --bv-pri: #612e50; --bv-pri-s: #49203e; --bv-muted: #f4e9ef; --bv-mfg: #75636f; --bv-vonal: #e8d8e1; --bv-gold: #956b3c; --bv-gold-l: #e4c393; }
.bv-monogram { display: grid; place-items: center; width: 2.6em; height: 2.6em; flex: none; border: 1px solid #c9a477; border-radius: 50%; background: #fbf4ee; color: #8a6237; font: 400 1.05em "BV Serif", Georgia, serif; letter-spacing: -.02em; }
.bv-monogram.kicsi { width: 2.1em; height: 2.1em; font-size: .95em; }
.bv-szem { margin: 0; font: 600 .72em "BV Sans", sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--bv-gold); }
.bv-gomb { display: inline-flex; align-items: center; justify-content: center; gap: .45em; padding: .75em 1.3em; border: 0; border-radius: 999px; background: var(--bv-pri); color: #fff; font: 600 .95em "BV Sans", sans-serif; cursor: pointer; box-shadow: 0 8px 22px -10px #612e50aa; }
.bv-gomb:hover { background: var(--bv-pri-s); }
.bv-gomb:disabled { background: #cdb8c4; box-shadow: none; cursor: not-allowed; }
.bv-gomb.masodik { background: #fff; color: var(--bv-pri); border: 1px solid var(--bv-vonal); box-shadow: none; }
.bv-gomb.szeles { width: 100%; }
.bv-gomb .mi { width: 1.1em; height: 1.1em; }

/* BV Beauty – adminfelület, heti naptár (bva) */
.bva { position: relative; display: grid; grid-template-columns: 13.5em minmax(0, 1fr); height: 100%; font: .78em/1.4 "BV Sans", "Avenir Next", "Segoe UI", sans-serif; color: var(--bv-fg); background: #f6f1ef; }
.bva button { cursor: pointer; font-family: inherit; }
.bva-oldal { display: flex; flex-direction: column; gap: 1.6em; padding: 1.5em 1em; background: linear-gradient(180deg, #3e1f36, #2e1729); color: #f3e6ed; overflow: auto; scrollbar-width: none; }
.bva-marka { display: flex; align-items: center; gap: .7em; padding: 0 .4em; }
.bva-marka .bv-monogram { background: transparent; border-color: #e4c39399; color: #e4c393; }
.bva-marka span:last-child { display: grid; line-height: 1.1; }
.bva-marka b { font: 400 1.25em "BV Serif", Georgia, serif; }
.bva-marka small { margin-top: .2em; font-size: .68em; letter-spacing: .16em; text-transform: uppercase; color: var(--bv-gold-l); }
.bva-nav { display: grid; gap: .2em; }
.bva-nav button { display: flex; align-items: center; gap: .75em; padding: .6em .75em; border: 0; border-radius: .8em; background: none; color: #e8d6e0; font-size: .94em; text-align: left; }
.bva-nav button .mi { width: 1.15em; height: 1.15em; opacity: .85; }
.bva-nav button:hover { background: #ffffff12; color: #fff; }
.bva-nav button.aktiv { background: #ffffff1f; color: #fff; font-weight: 600; }
.bva-nav em { margin-left: auto; padding: .05em .55em; border-radius: 99px; background: var(--bv-gold-l); color: #3b2037; font-style: normal; font-size: .78em; font-weight: 600; }
.bva-lab { display: grid; gap: .5em; margin-top: auto; padding: 0 .5em; font-size: .82em; color: #cbb3c1; }
.bva-lab button { display: inline-flex; align-items: center; gap: .5em; padding: 0; border: 0; background: none; color: #f3e6ed; font-size: 1.05em; text-align: left; }
.bva-lab .mi { width: 1em; height: 1em; }
.bva-fo { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: .8em; min-width: 0; min-height: 0; padding: 1.3em 1.5em 1.2em; }
.bva-cim { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; flex-wrap: wrap; }
.bva-h1 { margin: .15em 0 0; font: 400 2.1em/1.05 "BV Serif", Georgia, serif; letter-spacing: -.03em; }
.bva-sub { margin: .3em 0 0; color: var(--bv-mfg); font-size: .9em; }
.bva-fugg-szo { color: #a26b18; font-weight: 600; }
.bva-nezetek { display: flex; gap: .2em; padding: .25em; border-radius: 99px; background: #f3e7ee; }
.bva-nezetek button { padding: .45em 1em; border: 0; border-radius: 99px; background: none; color: var(--bv-fg); font-size: .9em; }
.bva-nezetek button[aria-current="page"] { background: var(--bv-pri); color: #fff; font-weight: 600; }
.bva-szurok { display: flex; align-items: center; gap: .45em; flex-wrap: wrap; }
.bva-szuro-cim { margin-right: .2em; color: var(--bv-mfg); font-size: .85em; }
.bva-szurok button { display: inline-flex; align-items: center; gap: .4em; padding: .38em .85em; border: 1px solid var(--bv-vonal); border-radius: 99px; background: #fff; color: var(--bv-fg); font-size: .85em; }
.bva-szurok button i, .bva-dl i { width: .65em; height: .65em; border-radius: 50%; background: var(--c); display: inline-block; }
.bva-szurok button[aria-pressed="true"] { background: var(--bv-pri); border-color: var(--bv-pri); color: #fff; }
.bva-kapcs { display: inline-flex; align-items: center; gap: .5em; margin-left: auto; font-size: .85em; color: var(--bv-mfg); }
.bva-kapcs input { display: none; }
.bva-kapcs span { position: relative; width: 2.3em; height: 1.3em; border-radius: 99px; background: var(--bv-pri); }
.bva-kapcs span::after { content: ""; position: absolute; top: .15em; left: 1.15em; width: 1em; height: 1em; border-radius: 50%; background: #fff; }
.bva-racs-doboz { position: relative; min-height: 0; }
.bva-racs-doboz > .m-tipp { position: absolute; right: .7em; bottom: .7em; }
.bva-racs { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; border: 1px solid #ece1e6; border-radius: 1.1em; background: #fff; overflow: hidden; box-shadow: 0 4px 18px #4c20370a; }
.bva-fejsor, .bva-test { display: grid; grid-template-columns: 3.4em repeat(6, minmax(0, 1fr)); }
.bva-fejsor { border-bottom: 1px solid #ece1e6; background: #fdf9fb; }
.bva-napfej { display: grid; justify-items: center; padding: .45em .2em; border-left: 1px solid #ece1e6; line-height: 1.15; }
.bva-napfej small { color: var(--bv-mfg); font-size: .78em; text-transform: uppercase; letter-spacing: .08em; }
.bva-napfej b { font: 400 1.35em "BV Serif", Georgia, serif; }
.bva-napfej em { font-style: normal; font-size: .72em; color: var(--bv-mfg); }
.bva-napfej em.fugg { color: #a26b18; font-weight: 600; }
.bva-napfej.mai { background: #f6e9f0; }
.bva-napfej.mai b { color: var(--bv-pri); font-weight: 600; }
.bva-test { position: relative; min-height: 0; background-image: repeating-linear-gradient(180deg, transparent 0, transparent calc(100% / 9 - 1px), #f1e7ec calc(100% / 9 - 1px), #f1e7ec calc(100% / 9)); }
.bva-orak { position: relative; }
.bva-orak span { position: absolute; right: .5em; transform: translateY(-.1em); font-size: .72em; color: var(--bv-mfg); font-variant-numeric: tabular-nums; }
.bva-oszlop { position: relative; border-left: 1px solid #ece1e6; }
.bva-oszlop.mai { background: #fcf5f9; }
.bva-most { position: absolute; left: 0; right: 0; z-index: 3; height: 2px; background: #a12842; }
.bva-most::before { content: ""; position: absolute; left: -.3em; top: -.25em; width: .55em; height: .55em; border-radius: 50%; background: #a12842; }
.bva-ev { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: .05em; overflow: hidden; padding: .25em .4em .25em .45em; border: 1px solid color-mix(in srgb, var(--c) 22%, #fff); border-left: .3em solid var(--c); border-radius: .7em; background: color-mix(in srgb, var(--c) 13%, #fff); color: #2d1a28; font-size: .74em; line-height: 1.25; text-align: left; box-shadow: 0 2px 8px #4c203712; transition: transform .1s, box-shadow .1s; }
.bva-ev:hover { z-index: 5; transform: translateY(-1px); box-shadow: 0 8px 18px #4c203726; }
.bva-ev b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bva-ev-ido { font-size: .9em; color: #5d4757; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bva-ev-kez { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bva-ev.rovid .bva-ev-kez { display: none; }
.bva-ev.st-fugg { background: #fffaf0; border: 1.5px dashed #c58a2f; border-left: .3em solid var(--c); }
.bva-ev.st-fugg .bva-ev-ido { color: #a26b18; font-weight: 600; }
.bva-ev.uj { animation: bva-uj 1.6s ease 2; }
@keyframes bva-uj { 0%, 100% { box-shadow: 0 2px 8px #4c203712; } 50% { box-shadow: 0 0 0 4px #e4c393; } }
.bva-panel-hatter { position: absolute; inset: 0; z-index: 5; background: #2e172966; }
.bva-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 6; display: grid; align-content: start; gap: .7em; width: min(24em, 90%); overflow: auto; padding: 1.3em 1.4em; background: #fff; border-radius: 1.2em 0 0 1.2em; box-shadow: -20px 0 50px #2e172940; }
.bva-panel.beuszik { animation: tfp-be .28s cubic-bezier(.2, .7, .2, 1); }
.bva-panel-fej { display: flex; justify-content: space-between; align-items: center; }
.bva-panel-fej button { width: 2.2em; height: 2.2em; border: 0; border-radius: 50%; background: var(--bv-muted); color: var(--bv-fg); font-size: 1.15em; line-height: 1; }
.bva-all { padding: .25em .75em; border-radius: 99px; background: #e5f1ea; color: #295b41; font-size: .82em; font-weight: 600; }
.bva-all.st-fugg { background: #fdf0d9; color: #8a5a10; }
.bva-panel-nev { margin: 0; font: 400 1.7em/1.1 "BV Serif", Georgia, serif; }
.bva-panel-ido { margin: 0; color: var(--bv-mfg); font-size: .92em; }
.bva-dl { display: grid; margin: .3em 0 0; }
.bva-dl div { display: flex; justify-content: space-between; gap: .8em; padding: .55em 0; border-bottom: 1px solid #f1e7ec; font-size: .92em; }
.bva-dl dt { color: var(--bv-mfg); }
.bva-dl dd { display: flex; align-items: center; gap: .4em; margin: 0; font-weight: 600; text-align: right; }
.bva-panel-tipp { margin: .3em 0 0; padding: .7em .9em; border-radius: .8em; background: #fbf4ee; color: #6b4a2a; font-size: .85em; }
.bva-panel-gombok { display: flex; gap: .5em; flex-wrap: wrap; }

@container minta (max-width: 560px) {
  .bva { grid-template-columns: minmax(0, 1fr); font-size: .72em; }
  .bva-oldal { display: none; }
  .bva-fo { padding: 1em; }
  .bva-nezetek, .bva-kapcs { display: none; }
  .bva-fejsor, .bva-test { grid-template-columns: 2.6em repeat(6, minmax(0, 1fr)); }
  .bva-ev-kez { display: none; }
}

/* BV Beauty – a vendég foglalója a telefonon (bvf) */
.bvf { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; font: .9em/1.4 "BV Sans", "Avenir Next", "Segoe UI", sans-serif; color: var(--bv-fg); background: linear-gradient(180deg, #fffafc, #fcf6f9); }
.bvf button { cursor: pointer; font-family: inherit; }
.bvf-fej { display: flex; align-items: center; gap: .6em; padding: .6em 1em; border-bottom: 1px solid #f1e5eb; }
.bvf-fej b { font: 400 1.05em "BV Serif", Georgia, serif; }
.bvf-fej button { margin-left: auto; width: 1.9em; height: 1.9em; border: 0; border-radius: 50%; background: var(--bv-muted); color: var(--bv-fg); font-size: 1.1em; line-height: 1; }
.bvf-test { overflow: auto; padding: .9em 1em 1em; display: grid; grid-template-columns: minmax(0, 1fr); gap: .55em; align-content: start; scrollbar-width: none; }
.bvf-cim { position: relative; margin: 0; font: 400 1.6em/1.05 "BV Serif", Georgia, serif; letter-spacing: -.02em; }
.bvf-cim .m-tipp { position: absolute; right: 0; top: -.2em; font-size: .5em; }
.bvf-sub { margin: 0; color: var(--bv-mfg); font-size: .88em; }
.bvf-lepesek { display: flex; gap: .7em; padding: .4em 0 .7em; border-bottom: 1px solid #efe2e8; font-size: .82em; color: var(--bv-mfg); }
.bvf-lepesek span { display: flex; align-items: center; gap: .35em; }
.bvf-lepesek i { display: grid; place-items: center; width: 1.7em; height: 1.7em; border: 1px solid #dccad4; border-radius: 50%; font-style: normal; font-size: .9em; }
.bvf-lepesek .most { color: var(--bv-fg); font-weight: 600; }
.bvf-lepesek .most i { background: var(--bv-pri); border-color: var(--bv-pri); color: #fff; }
.bvf-lepesek .kesz i { background: #f4e9ef; border-color: #d9c0cd; color: var(--bv-pri); }
.bvf-kat { display: flex; padding: .25em; border-radius: 99px; background: #f3e7ee; }
.bvf-kat button { flex: 1; padding: .55em .4em; border: 0; border-radius: 99px; background: none; color: var(--bv-fg); font-weight: 600; font-size: .85em; }
.bvf-kat button[aria-pressed="true"] { background: var(--bv-pri); color: #fff; }
.bvf-kezelesek { display: grid; gap: .45em; }
.bvf-kez { display: flex; align-items: center; gap: .7em; padding: .7em .8em; border: 1px solid var(--bv-vonal); border-radius: .9em; background: #fff; color: var(--bv-fg); text-align: left; }
.bvf-kez i { width: 1.3em; height: 1.3em; flex: none; border: 1.5px solid #cdb6c3; border-radius: .35em; }
.bvf-kez span { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.bvf-kez b { font-weight: 600; font-size: .92em; }
.bvf-kez small { color: var(--bv-mfg); font-size: .82em; }
.bvf-kez em { font-style: normal; font-size: .8em; color: var(--bv-mfg); text-align: right; max-width: 6.5em; line-height: 1.2; }
.bvf-kez[aria-pressed="true"] { border-color: var(--bv-pri); background: #f8eef3; }
.bvf-kez[aria-pressed="true"] i { border-color: var(--bv-pri); background: var(--bv-pri) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 85% no-repeat; }
.bvf-lab { display: flex; align-items: center; gap: .6em; padding: .7em 1em .9em; border-top: 1px solid #efe2e8; background: #fff; }
.bvf-lab > span { display: grid; flex: 1; min-width: 0; line-height: 1.25; font-size: .85em; }
.bvf-lab > span small { color: var(--bv-mfg); }
.bvf-lab .bv-gomb { padding: .7em 1.2em; font-size: .9em; }
.bvf-lab .bv-gomb.masodik { flex: none; }
.bvf-lab .bv-gomb:not(.masodik) { margin-left: auto; }
.bvf-honap { margin: .3em 0 0; font: 400 1.15em "BV Serif", Georgia, serif; }
.bvf-honap::first-letter, .bvf-alcim::first-letter { text-transform: uppercase; }
.bvf-napok { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3em; }
.bvf-nap { display: grid; justify-items: center; padding: .45em 0; border: 1px solid var(--bv-vonal); border-radius: .8em; background: #fff; color: var(--bv-fg); line-height: 1.15; }
.bvf-nap small { font-size: .72em; color: var(--bv-mfg); }
.bvf-nap b { font-size: 1.05em; font-weight: 600; }
.bvf-nap:disabled { background: transparent; border-color: transparent; color: #c6b5bf; cursor: not-allowed; }
.bvf-nap:disabled small { color: #c6b5bf; }
.bvf-nap.kij { background: var(--bv-pri); border-color: var(--bv-pri); color: #fff; }
.bvf-nap.kij small { color: #f2dce7; }
.bvf-alcim { margin: .3em 0 0; font-weight: 600; font-size: .88em; }
.bvf-idok { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em; }
.bvf-idok button { padding: .55em 0; border: 1px solid var(--bv-vonal); border-radius: 99px; background: #fff; color: var(--bv-fg); font-weight: 600; font-size: .85em; font-variant-numeric: tabular-nums; }
.bvf-idok button[aria-pressed="true"] { background: var(--bv-pri); border-color: var(--bv-pri); color: #fff; }
.bvf-tipp { display: flex; gap: .5em; align-items: flex-start; padding: .6em .8em; border-radius: .8em; background: #fbf4ee; color: #6b4a2a; }
.bvf-tipp .mi { width: 1.1em; height: 1.1em; flex: none; }
.bvf-mezo { display: grid; gap: .25em; font-size: .85em; font-weight: 600; }
.bvf-mezo input { padding: .65em .8em; border: 1px solid #deccd7; border-radius: .8em; background: #fff; font: 400 1.05em "BV Sans", sans-serif; color: var(--bv-fg); }
.bvf-pipa { display: flex; gap: .5em; align-items: flex-start; font-size: .82em; color: var(--bv-mfg); }
.bvf-pipa input { accent-color: var(--bv-pri); margin-top: .15em; }
.bvf-kesz { display: grid; justify-items: center; gap: .6em; padding-top: 1em; text-align: center; }
.bvf-kesz-jel { display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 50%; background: #f4e9ef; color: var(--bv-pri); }
.bvf-kesz-jel .mi { width: 1.6em; height: 1.6em; }
.bvf-osszegzo { display: grid; gap: .3em; width: 100%; padding: .7em .9em; border: 1px solid var(--bv-vonal); border-radius: .9em; background: #fff; text-align: left; }
.bvf-osszegzo p { display: grid; margin: 0; font-size: .88em; }
.bvf-osszegzo small { color: var(--bv-mfg); font-size: .85em; }

/* =====================================================================
   Webáruház-asszisztens (wa, wam) – sötét, ibolya, rendszerbetű
   ===================================================================== */
.wa, .wam {
  --wa-lap: #0c0a16; --wa-fel: #151327; --wa-fel2: #1c1933; --wa-sz: #2a2647; --wa-sz2: #3b3663; --wa-szoveg: #eeedf7; --wa-halk: #a9a6c9; --wa-ib: #a78bfa; --wa-ib2: #c4b5fd; --wa-gomb: #6d4fe0;
  --wa-jo: #3ccf5a; --wa-figy: #fab219; --wa-krit: #f07a7a;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--wa-szoveg); background: radial-gradient(ellipse at 70% -10%, #2a1d5a 0%, transparent 55%), var(--wa-lap);
}
.wa button, .wam button { cursor: pointer; font-family: inherit; }
.wa code, .wam code { font-family: ui-monospace, Consolas, monospace; font-size: .86em; }
.wa { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100%; font-size: .76em; line-height: 1.45; }
.wa-fej { display: flex; align-items: center; gap: .9em; padding: .7em 1.6em; border-bottom: 1px solid var(--wa-sz); background: #0e0c1bcc; }
.wa-logo { display: grid; place-items: center; width: 2.4em; height: 2.4em; flex: none; border-radius: .6em; background: linear-gradient(135deg, #7c5cff, #5b3fd9); color: #fff; box-shadow: 0 6px 18px -6px #7c5cffaa; }
.wa-logo svg { width: 1.35em; height: 1.35em; }
.wa-nev { font-size: 1.05em; line-height: 1.15; }
.wa-proba { padding: .25em .8em; border: 1px dashed var(--wa-sz2); border-radius: 99px; color: #cfcce6; font-size: .8em; white-space: nowrap; }
.wa-nav { display: flex; gap: .15em; margin-left: auto; }
.wa-nav button { display: flex; align-items: center; gap: .4em; padding: .55em .9em; border: 1px solid transparent; border-radius: 99px; background: none; color: #d9d6f0; font-weight: 600; font-size: .95em; white-space: nowrap; }
.wa-nav button:hover { background: var(--wa-fel2); }
.wa-nav button[aria-pressed="true"] { background: #231d45; border-color: #4a3f8a; color: #fff; }
.wa-nav em, .wam-also em { display: grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .3em; border-radius: 99px; background: var(--wa-gomb); color: #fff; font-style: normal; font-size: .78em; font-weight: 700; }
.wa-test { overflow: auto; padding: 1.4em 1.6em 2em; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1em; align-content: start; scrollbar-width: thin; scrollbar-color: #3b3663 transparent; }
.wa-h1 { margin: 0; font-size: 1.75em; line-height: 1.2; font-weight: 750; letter-spacing: -.01em; }
.wa-h2 { margin: .4em 0 0; font-size: 1.2em; }
.wa-datum { margin: -.6em 0 0; color: var(--wa-halk); font-size: .92em; }
.wa-racs-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1em; align-items: start; }
.wa-kartya { position: relative; padding: 1.1em 1.2em; border: 1px solid var(--wa-sz); border-radius: .9em; background: var(--wa-fel); }
.wa-kartya > .m-tipp { position: absolute; right: .8em; top: .8em; }
.wa-roviden { border-color: #5b4bb0; background: linear-gradient(160deg, #1d1838, #151327); }
.wa-roviden p { margin: .5em 0 0; font-size: 1.02em; }
.wa-szem { margin: 0 !important; font-size: .78em !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wa-ib2); }
.wa-kcim { display: flex; align-items: center; gap: .55em; margin: 0 0 .7em; font-size: 1.15em; font-weight: 750; }
.wa-kcim .mi { width: 1.1em; height: 1.1em; color: var(--wa-ib); }
.wa-kfej { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-bottom: .4em; }
.wa-kfej .wa-kcim { margin: 0; }
.wa-dontes-sav { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .8em 1em; border: 1px solid #4a3f8a; border-radius: .7em; background: #1d1838; }
.wa-dontes-sav.kesz { border-color: #2b6b3d; background: #12251a; color: #b5f0c3; }
.wa-dontes-sav .mi { width: 1.1em; height: 1.1em; vertical-align: -.15em; margin-right: .4em; }
.wa-sorok { display: grid; margin: .4em 0 0; padding: 0; list-style: none; }
.wa-sorok li { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); gap: .8em; align-items: start; padding: .8em 0; border-bottom: 1px solid var(--wa-sz); }
.wa-sorok li:last-child { border-bottom: 0; }
.wa-sorok b { color: var(--wa-ib2); }
.wa-sorok small { display: block; color: #cfcce6; font-size: .9em; }
.wa-jelv { justify-self: start; padding: .2em .65em; border: 1px solid; border-radius: 99px; font-size: .82em; font-weight: 700; white-space: nowrap; }
.wa-jelv.piros { border-color: #7a2a33; background: #2a1219; color: #ffb3b3; }
.wa-jelv.sarga { border-color: #7a5a12; background: #2a2010; color: #ffd98a; }
.wa-gomb { display: inline-flex; align-items: center; justify-content: center; gap: .45em; padding: .55em 1em; border: 1px solid var(--wa-sz2); border-radius: .55em; background: transparent; color: var(--wa-szoveg); font-weight: 650; font-size: .92em; white-space: nowrap; }
.wa-gomb:hover { background: var(--wa-fel2); }
.wa-gomb .mi { width: 1.05em; height: 1.05em; }
.wa-gomb.fo { background: var(--wa-gomb); border-color: var(--wa-gomb); color: #fff; }
.wa-gomb.fo:hover { background: #5d40d0; }
.wa-gomb.szellem { border-color: transparent; color: #d9d6f0; }
.wa-besz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em 1.2em; }
.wa-besz p { display: flex; align-items: flex-start; gap: .6em; margin: 0; color: #dcd9f2; }
.wa-kor { display: grid; place-items: center; width: 1.9em; height: 1.9em; flex: none; border: 1px solid; border-radius: 50%; }
.wa-kor .mi { width: 1em; height: 1em; }
.wa-kor.piros { border-color: #7a2a33; color: #ff8a8a; background: #2a1219; } .wa-kor.sarga { border-color: #7a5a12; color: #ffd166; background: #2a2010; } .wa-kor.halk { border-color: #3b3663; color: #b5b2d6; background: #1c1933; } .wa-kor.zold { border-color: #2b6b3d; color: #6ee38a; background: #12251a; }
.wa-oszlopok { display: flex; align-items: flex-end; gap: .45em; height: 8em; padding-top: 1.2em; }
.wa-oszlopok i { position: relative; flex: 1; border-radius: .3em .3em 0 0; background: linear-gradient(180deg, #8b6cff, #4b34b0); opacity: .7; }
.wa-oszlopok i.most { opacity: 1; box-shadow: 0 0 18px #8b5cf655; }
.wa-oszlopok i span { position: absolute; left: 50%; top: -1.35em; transform: translateX(-50%); font-size: .68em; color: var(--wa-halk); white-space: nowrap; }
.wa-bolt { display: flex; align-items: center; gap: .9em; }
.wa-bolt > span:nth-child(2) { display: grid; line-height: 1.3; }
.wa-bolt b { font-size: 1.15em; }
.wa-bolt small { color: var(--wa-halk); }
.wa-csip { padding: .2em .7em; border: 1px solid var(--wa-sz2); border-radius: 99px; font-size: .82em; }
.wa-bolt .wa-gomb { margin-left: auto; }
.wa-atv { display: grid; grid-template-columns: minmax(13em, .8fr) minmax(0, 2fr); gap: 1em; align-items: start; }
.wa-meres { display: grid; justify-items: center; gap: .6em; text-align: center; }
.wa-meres > p { margin: 0; font-weight: 700; }
.wa-meres > small { color: #cfcce6; }
.wa-gyuru { display: grid; place-items: center; align-content: center; width: 9em; height: 9em; border-radius: 50%; background: radial-gradient(closest-side, var(--wa-fel) 80%, transparent 81%), conic-gradient(#fbbf24 calc(var(--p) * 1%), #3b3220 0); }
.wa-gyuru b { font-size: 2.8em; line-height: 1; font-weight: 800; }
.wa-gyuru small { color: var(--wa-halk); }
.wa-atv-jobb { display: grid; gap: .9em; }
.wa-nagy { margin: 0; font-size: 1.1em; color: #dcd9f2; }
.wa-nagy b { color: #fff; }
.wa-szamok { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; }
.wa-szamok .wa-kartya p { display: flex; align-items: center; gap: .45em; margin: 0 0 .4em; font-weight: 650; font-size: .92em; }
.wa-szamok .wa-kartya p .mi { width: 1em; height: 1em; }
.wa-szamok .wa-kartya b { display: block; font-size: 1.9em; font-weight: 800; line-height: 1.1; }
.wa-szamok .wa-kartya small { color: var(--wa-halk); font-size: .85em; }
.wa-szamok .wa-kartya.kiemelt { border-color: #5b4bb0; background: linear-gradient(160deg, #221a46, #151327); }
.wa-banner { display: flex; align-items: center; gap: .8em; border-color: #4a3f8a; background: #1a1534; }
.wa-banner > .mi { width: 1.3em; height: 1.3em; flex: none; color: var(--wa-ib2); }
.wa-banner .wa-gomb { margin-left: auto; border-radius: 99px; }
.wa-teruletek { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; }
.wa-terulet p { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 .6em; }
.wa-terulet p span { color: var(--wa-halk); font-size: .85em; }
.wa-terulet p span b { color: #fff; font-size: 1.6em; }
.wa-terulet i { display: block; height: .45em; border-radius: 99px; background: #2a2640; overflow: hidden; }
.wa-terulet i b { display: block; height: 100%; border-radius: inherit; }
.wa-terulet i.sarga b { background: #fbbf24; } .wa-terulet i.piros b { background: #ef4444; } .wa-terulet i.zold b { background: #22c55e; }
.wa-terulet small { display: block; margin-top: .6em; color: #cfcce6; }
.wa-cimsor { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; }
.wa-cimsor .wa-datum { margin: .3em 0 0; }
.wa-info { margin: -.4em 0 0; color: var(--wa-halk); font-size: .88em; }
.wa-szurok { display: flex; align-items: center; gap: .45em; flex-wrap: wrap; }
.wa-szurok > span { color: var(--wa-halk); font-size: .9em; }
.wa-szurok button { display: inline-flex; align-items: center; gap: .4em; padding: .5em .95em; border: 1px solid var(--wa-sz2); border-radius: 99px; background: var(--wa-fel); color: #dcd9f2; font-weight: 600; font-size: .9em; }
.wa-szurok button .mi { width: 1em; height: 1em; }
.wa-szurok button[aria-pressed="true"] { background: #2b2357; border-color: #6d5ad0; color: #fff; }
.wa-test > .m-tipp { justify-self: end; margin-bottom: -2.4em; z-index: 1; }
.wa-dontes { display: grid; gap: .8em; }
.wa-dontes-fej { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; }
.wa-dontes-fej > span:first-child { display: grid; }
.wa-dontes-fej b { font-size: 1.12em; }
.wa-dontes-fej small { color: var(--wa-halk); }
.wa-tipus { display: inline-flex; align-items: center; gap: .35em; padding: .25em .7em; border: 1px solid #4a5fc0; border-radius: 99px; background: #151a3a; color: #c7d2ff; font-weight: 650; font-size: .85em; white-space: nowrap; }
.wa-tipus .mi { width: 1em; height: 1em; }
.wa-meta { margin: 0; color: #cfcce6; font-size: .92em; }
.wa-meta b { color: #fff; }
.wa-figy { margin: 0; padding: .7em .9em; border: 1px solid #7a5a12; border-radius: .6em; background: #2a2010; color: #ffe2a8; font-size: .92em; }
.wa-tabla { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--wa-sz); border-radius: .6em; overflow: hidden; font-size: .92em; }
.wa-tabla th { padding: .6em .8em; text-align: left; font-size: .8em; letter-spacing: .08em; text-transform: uppercase; color: var(--wa-halk); background: #19162e; }
.wa-tabla td { padding: .6em .8em; border-top: 1px solid var(--wa-sz); vertical-align: top; }
.wa-tabla td small { display: block; color: var(--wa-halk); }
.wa-tabla th:last-child, .wa-tabla td:last-child { text-align: right; }
.wa-tabla tfoot td { background: #19162e; color: #cfcce6; }
.wa-ok { display: inline-block; padding: .15em .6em; border: 1px solid; border-radius: 99px; font-size: .82em; font-weight: 700; white-space: nowrap; }
.wa-ok.piros { border-color: #7a2a33; background: #2a1219; color: #ffb3b3; } .wa-ok.sarga { border-color: #7a5a12; background: #2a2010; color: #ffd98a; } .wa-ok.zold { border-color: #2b6b3d; background: #12251a; color: #8ff0a5; } .wa-ok.halk { border-color: #3b3663; color: #b5b2d6; }
.wa-diff { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.wa-diff small { color: var(--wa-halk); font-size: .82em; }
.wa-diff p { display: grid; gap: .3em; margin: .3em 0 0; padding: .7em .9em; border-radius: .6em; font-size: .92em; }
.wa-diff p.regi { border: 1px solid #5a2a33; background: #1f1016; color: #e8c2c6; }
.wa-diff p.uj { border: 1px solid #2b6b3d; background: #0f1f16; color: #d4f5dc; }
.wa-miert { display: grid; gap: .25em; margin: 0; padding-left: 1.2em; color: #cfcce6; font-size: .9em; }
.wa-szov { margin: 0; color: #dcd9f2; }
.wa-dontes-gombok { display: flex; gap: .5em; flex-wrap: wrap; }
.wa-kesz-sor { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .8em 1.1em; }
.wa-ures { display: grid; justify-items: center; gap: .3em; padding: 2em 1em; text-align: center; color: var(--wa-halk); }
.wa-ures .mi { width: 2em; height: 2em; color: var(--wa-jo); }
.wa-ures b { color: #fff; }
.wa-toast { position: absolute; right: 1.4em; bottom: 1.4em; z-index: 5; display: flex; align-items: center; gap: .6em; max-width: 26em; padding: .9em 1.1em; border: 1px solid var(--wa-sz2); border-radius: .8em; background: #1c1933; box-shadow: 0 18px 40px #00000080; font-size: .95em; }
.wa-toast .mi { width: 1.2em; height: 1.2em; flex: none; color: var(--wa-jo); }
.wa-toast.be { animation: tfp-be .25s ease; }
@container minta (max-width: 560px) {
  .wa { font-size: .72em; }
  .wa-fej { flex-wrap: wrap; padding: .7em 1em; }
  .wa-nav { order: 3; width: 100%; overflow-x: auto; margin: 0; }
  .wa-test { padding: 1em; }
  .wa-racs-2, .wa-atv, .wa-diff { grid-template-columns: minmax(0, 1fr); }
  .wa-besz, .wa-szamok, .wa-teruletek { grid-template-columns: minmax(0, 1fr); }
  .wa-cimsor > .wa-gomb { display: none; }
}
.wam { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; font-size: .86em; line-height: 1.4; }
.wam-fej { display: flex; align-items: center; gap: .7em; padding: .7em 1em; border-bottom: 1px solid var(--wa-sz); }
.wam-fej .wa-logo { width: 2.1em; height: 2.1em; }
.wam-test { overflow: auto; padding: 1em; display: grid; grid-template-columns: minmax(0, 1fr); gap: .8em; align-content: start; scrollbar-width: none; }
.wam .wa-h1 { font-size: 1.3em; }
.wam .wa-datum { margin-top: -.5em; }
.wam .wa-kartya { padding: .9em; }
.wam .wa-kartya > .m-tipp { right: .6em; top: .6em; }
.wam .wa-sorok li { grid-template-columns: minmax(0, 1fr); gap: .3em; padding: .6em 0; }
.wam .wa-dontes-sav { flex-direction: column; align-items: flex-start; gap: .6em; }
.wam .wa-dontes-fej { flex-direction: column; gap: .4em; }
.wam .wa-diff { grid-template-columns: minmax(0, 1fr); }
.wam .wa-tabla { font-size: .85em; }
.wam .wa-gyuru { width: 7em; height: 7em; }
.wam-also { display: grid; grid-template-columns: repeat(5, 1fr); padding: .35em .3em .55em; border-top: 1px solid var(--wa-sz); background: #0e0c1b; }
.wam-also button { position: relative; display: grid; justify-items: center; gap: .15em; padding: .35em 0; border: 0; border-radius: .6em; background: none; color: #a9a6c9; font-size: .68em; }
.wam-also button .mi { width: 1.6em; height: 1.6em; }
.wam-also button[aria-pressed="true"] { background: #231d45; color: #fff; }
.wam-also em { position: absolute; top: 0; right: 18%; }

/* =====================================================================
   Tudáshősök – a játék (thj) és a szülői felület (ths)
   ===================================================================== */
.thj, .ths { font-family: "Trebuchet MS", "Segoe UI", Nunito, system-ui, sans-serif; }
.thj button, .ths button { cursor: pointer; font-family: inherit; }
.thj { position: relative; flex: 1; min-height: 0; height: 100%; overflow: hidden; color: #fff; background: radial-gradient(ellipse at 50% 10%, #3a2a7a 0%, #1d1648 45%, #15122e 100%); font-size: .86em; line-height: 1.3; }
.thj.frissul { animation: thj-be .35s ease; }
@keyframes thj-be { from { opacity: .4; transform: scale(.985); } }
.thj-nezet-tabor { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; gap: .55em; padding: .8em .85em 1em; }
.thj-nezet-tabor::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 20% 30%, #fff8, transparent), radial-gradient(1px 1px at 70% 18%, #fff9, transparent), radial-gradient(1.5px 1.5px at 85% 45%, #fff7, transparent), radial-gradient(1px 1px at 40% 60%, #fff6, transparent); pointer-events: none; }
.thj-felso { position: relative; display: flex; justify-content: space-between; gap: .5em; }
.thj-hos-adat { display: grid; gap: .15em; }
.thj-hos-adat b { font-size: 1.2em; }
.thj-hos-adat > span { font-size: .78em; color: #d6d0f5; }
.thj-rang { padding: .05em .45em; border: 2px solid #b8a8ff; border-radius: .5em; background: #2c2266; font-style: normal; font-weight: 700; color: #fff; }
.thj-xp { position: relative; width: 9.5em; height: 1em; border: 2px solid #fff; border-radius: 99px; overflow: hidden; background: #15122e; }
.thj-xp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #7b5fd6, #b066ff); }
.thj-xp small { position: relative; display: block; text-align: center; font-size: .65em; font-weight: 700; line-height: 1.25; }
.thj-penz { display: grid; gap: .3em; align-content: start; }
.thj-penz span { padding: .15em .55em; border-radius: 99px; background: #0e0b24cc; font-weight: 800; font-size: .9em; color: #ffd23f; text-align: right; }
.thj-penz span + span { color: #7fe0ff; }
.thj-jelenet { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
.thj-jelenet::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 70%; height: 30%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 100%, #ff9a3a55, transparent 70%); }
.thj-sator { width: 26%; margin-right: -3%; }
.thj-hos { width: 38%; max-height: 100%; position: relative; z-index: 1; }
.thj-hos svg, .thj-kesz-hos svg { display: block; width: 100%; height: auto; max-height: 13em; }
.thj-tuz { width: 22%; margin-left: -4%; position: relative; z-index: 1; }
.thj-statok { position: relative; display: flex; justify-content: center; gap: .35em; }
.thj-statok span { padding: .2em .5em; border-radius: 99px; background: #0e0b24cc; font-weight: 800; font-size: .82em; }
.thj-kuldetes { position: relative; display: grid; justify-items: center; gap: .2em; padding: .55em .7em; border: 3px solid #1d2340; border-radius: .9em; background: #fffaf0; color: #1d2340; }
.thj-kuldetes small { font-size: .7em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7b5fd6; }
.thj-kuldetes b { font-size: 1.05em; }
.thj-kuldetes i { width: 100%; height: .7em; border: 2px solid #1d2340; border-radius: 99px; overflow: hidden; background: #ece6fb; }
.thj-kuldetes i b { display: block; height: 100%; background: #b066ff; }
.thj-targyak { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; }
.thj-targyak button { display: grid; gap: .1em; justify-items: center; padding: .65em .2em .55em; border: 3px solid #1d2340; border-radius: .9em; color: #1d2340; font-weight: 800; font-size: .95em; box-shadow: 0 .22em 0 #1d2340; }
.thj-targyak button small { font-size: .68em; font-weight: 700; opacity: .85; }
.thj-targyak .matek { background: linear-gradient(180deg, #ffe07a, #ffb800); }
.thj-targyak .magyar { background: linear-gradient(180deg, #ffc0d6, #e2557a); color: #fff; }
.thj-targyak .kornyezet { background: linear-gradient(180deg, #8fe39f, #3fbf6a); color: #fff; }
.thj-targyak button:active { transform: translateY(.15em); box-shadow: 0 .07em 0 #1d2340; }
.thj-jel { position: absolute; right: .7em; top: 4.2em; z-index: 3; }
.thj-hatter { position: absolute; inset: 0; }
.thj-hatter svg { width: 100%; height: 100%; display: block; }
.thj-terkep { position: absolute; inset: 0; overflow: hidden; color: #1d2340; }
.thj-terkep-fej { position: absolute; left: .7em; right: .7em; top: .7em; z-index: 2; display: flex; justify-content: space-between; align-items: center; }
.thj-terkep-fej button { padding: .4em .7em; border: 3px solid #1d2340; border-radius: .7em; background: #fffaf0; color: #1d2340; font-weight: 800; box-shadow: 0 .18em 0 #1d2340; }
.thj-birodalom { display: grid; padding: .3em .7em; border: 3px solid #1d2340; border-radius: .7em; background: linear-gradient(180deg, #ffe07a, #ffb800); font-weight: 800; box-shadow: 0 .18em 0 #1d2340; line-height: 1.15; }
.thj-birodalom small { font-size: .72em; }
.thj-honapcim { position: absolute; left: .7em; right: .7em; top: 3.9em; z-index: 2; display: grid; padding: .45em .7em; border-radius: .6em; background: #2c2a4ae6; color: #fff; }
.thj-honapcim b { font-size: .92em; }
.thj-honapcim small { color: #ffd23f; font-weight: 800; }
.thj-osveny { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.thj-csomo { position: absolute; z-index: 2; display: flex; align-items: center; gap: .4em; transform: translate(-1.4em, -50%); padding: 0; border: 0; background: none; color: #fff; text-align: left; }
.thj-csomo i { display: grid; place-items: center; width: 2.8em; height: 2.8em; flex: none; border: 3px solid #1d2340; border-radius: 50%; background: #3a3f5c; font-style: normal; font-weight: 800; font-size: .95em; box-shadow: 0 .2em 0 #1d2340; }
.thj-csomo.most i { background: #fff6b0; color: #1d2340; animation: thj-pulzus 1.4s ease-in-out infinite; }
.thj-csomo.kesz i { background: linear-gradient(180deg, #ffe07a, #ffb800); color: #1d2340; }
@keyframes thj-pulzus { 50% { box-shadow: 0 .2em 0 #1d2340, 0 0 0 .4em #fff6b066; } }
.thj-csomo span { display: grid; line-height: 1.1; text-shadow: 0 1px 2px #1d2340, 0 0 4px #1d2340; }
.thj-csomo b { font-size: .85em; }
.thj-csomo small { font-size: .68em; color: #fff7d6; }
.thj-csomo.kesz small { color: #ffd23f; font-size: .8em; letter-spacing: .05em; }
.thj-lada { position: absolute; left: .7em; right: .7em; bottom: .7em; z-index: 2; display: flex; align-items: center; gap: .6em; padding: .45em .7em; border: 3px solid #1d2340; border-radius: .8em; background: #fffaf0; font-size: 1.2em; }
.thj-lada span { display: grid; font-size: .7em; line-height: 1.2; }
.thj-ablak-hatter { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 1em; background: #15122e99; }
.thj-ablak { position: relative; display: grid; justify-items: center; gap: .4em; width: 100%; padding: 1em .9em; border: 3px solid #1d2340; border-radius: 1em; background: #fffaf0; color: #1d2340; text-align: center; animation: thj-be .3s ease; }
.thj-ablak-x { position: absolute; right: .5em; top: .4em; border: 0; background: none; font-size: 1.2em; color: #1d2340; }
.thj-ablak-cim { font-size: 1.3em; }
.thj-ablak > small { color: #7b5fd6; font-weight: 700; }
.thj-ablak-test { display: grid; grid-template-columns: 40% 1fr; align-items: center; gap: .4em; text-align: left; font-size: .82em; }
.thj-ablak-leny svg, .thj-harc-leny svg { width: 100%; height: auto; display: block; }
.thj-sarga { padding: .6em 1.6em; border: 3px solid #1d2340; border-radius: .8em; background: linear-gradient(180deg, #ffe07a, #ffb800); color: #1d2340; font-weight: 800; font-size: 1.1em; box-shadow: 0 .22em 0 #1d2340; }
.thj-sarga:active { transform: translateY(.15em); box-shadow: 0 .07em 0 #1d2340; }
.thj-harc { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.thj-harc-fej { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: .3em; padding: .55em .5em 0; }
.thj-x { width: 2em; height: 2em; border: 3px solid #1d2340; border-radius: .6em; background: #fffaf0; color: #1d2340; font-weight: 800; }
.thj-hp { display: grid; gap: .1em; padding: .25em .4em; border-radius: .6em; background: #2c2a4ae6; color: #fff; line-height: 1.1; }
.thj-hp b { font-size: .72em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thj-hp i { height: .55em; border-radius: 99px; background: #15122e; overflow: hidden; }
.thj-hp i b { display: block; height: 100%; background: #3fbf6a; transition: width .4s ease; }
.thj-hp.ellen i b { background: #ff7a3a; }
.thj-hp small { font-size: .62em; text-align: right; }
.thj-kombo { display: flex; gap: .1em; padding: .25em .3em; border-radius: .6em; background: #2c2a4ae6; }
.thj-kombo i { font-style: normal; font-size: .75em; filter: grayscale(1) opacity(.4); }
.thj-kombo i.be { filter: none; }
.thj-zsak { position: relative; z-index: 2; display: flex; justify-content: flex-end; gap: .3em; padding: .3em .5em 0; }
.thj-zsak span { padding: .1em .5em; border-radius: 99px; background: #2c2a4ae6; font-weight: 800; font-size: .78em; }
.thj-szin { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 6% .6em; min-height: 0; }
.thj-harc-hos { width: 34%; }
.thj-harc-hos svg { width: 100%; height: auto; display: block; max-height: 9em; }
.thj-harc-leny { width: 36%; }
.thj-harc-leny svg { max-height: 8em; }
.thj-harc-hos.tamad { animation: thj-tamad .5s ease; }
.thj-harc-leny.tamad-b { animation: thj-tamad-b .5s ease; }
.thj-harc-hos.talalt, .thj-harc-leny.talalt { animation: thj-talalt .5s ease; }
@keyframes thj-tamad { 40% { transform: translateX(55%) rotate(6deg); } }
@keyframes thj-tamad-b { 40% { transform: translateX(-55%) rotate(-6deg); } }
@keyframes thj-talalt { 20%, 60% { transform: translateX(-6%); filter: brightness(1.8) saturate(.4); } 40%, 80% { transform: translateX(6%); } }
.thj-panel { position: relative; z-index: 2; display: grid; gap: .45em; padding: .6em .65em .8em; border-top: 3px solid #1d2340; border-radius: 1em 1em 0 0; background: #fffaf0; color: #1d2340; }
.thj-eszk { display: flex; align-items: center; gap: .3em; }
.thj-utasit { flex: 1; min-width: 0; padding: .3em .5em; border-radius: .6em; background: #ffe2c4; font-size: .7em; font-weight: 700; line-height: 1.2; }
.thj-eszk button { padding: .25em .45em; border: 2px solid #1d2340; border-radius: .55em; background: #fff; font-size: .78em; font-weight: 800; color: #1d2340; }
.thj-eszk .thj-suga { background: #fff3c4; }
.thj-kerdes { margin: 0; font-size: 1.25em; font-weight: 800; line-height: 1.2; }
.thj-kep { display: grid; place-items: center; }
.thj-kep svg { width: 78%; height: auto; max-height: 6.5em; }
.thj-kep.gomba svg, .thj-kep.sor svg { width: 92%; }
.thj-valaszok { display: grid; gap: .45em; }
.thj-valaszok.n2 { grid-template-columns: 1fr 1fr; }
.thj-valaszok.n3 { grid-template-columns: repeat(3, 1fr); }
.thj-valaszok button { display: grid; place-items: center; min-height: 2.9em; border: 3px solid #1d2340; border-radius: .8em; background: #fff; color: #1d2340; font-size: 1.4em; font-weight: 800; box-shadow: 0 .16em 0 #1d2340; }
.thj-valaszok button svg { width: 1.5em; height: 1.5em; }
.thj-valaszok button.jo { background: #c8f5d2; border-color: #1d7a3a; box-shadow: 0 .16em 0 #1d7a3a; }
.thj-valaszok button.rossz { background: #ffd0d8; border-color: #b3263b; box-shadow: 0 .16em 0 #b3263b; }
.thj-vissza { min-height: 1.3em; margin: 0; font-weight: 800; font-size: .85em; text-align: center; }
.thj-vissza.jo { color: #1d7a3a; }
.thj-vissza.rossz { color: #9b2338; font-weight: 700; font-size: .78em; }
.thj-kesz { position: absolute; inset: 0; display: grid; justify-items: center; align-content: center; gap: .5em; padding: 1em; text-align: center; }
.thj-kesz-cim { margin: 0; font-size: 1.6em; font-weight: 800; color: #ffd23f; text-shadow: 0 .1em 0 #1d2340; }
.thj-kesz-cs { margin: 0; font-size: 2.4em; color: #ffd23f; letter-spacing: .1em; text-shadow: 0 .06em 0 #1d2340; }
.thj-kesz-cs span { color: #4a4570; }
.thj-kesz-hos { width: 40%; }
.thj-zsakmany { display: grid; gap: .3em; }
.thj-zsakmany span { padding: .25em .8em; border-radius: 99px; background: #2c2a4ae6; font-weight: 800; font-size: .85em; }
.thj-kesz-sz { margin: 0; color: #d6d0f5; font-size: .85em; }
.thj-konfetti i { position: absolute; top: -5%; left: var(--x); width: .5em; height: .8em; background: hsl(var(--h) 90% 60%); animation: thj-konf 2.4s var(--d) ease-in forwards; }
@keyframes thj-konf { to { transform: translateY(120vh) rotate(540deg); } }

.ths { --ths-uveg: #2a2264b3; --ths-vonal: #4b3f8f; position: relative; height: 100%; overflow: auto; color: #fff; background: radial-gradient(ellipse at 50% -20%, #4b2fa0 0%, #241a5a 45%, #15122e 100%); font-size: .76em; line-height: 1.4; scrollbar-width: thin; scrollbar-color: #4b3f8f transparent; }
.ths-fej { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1em; padding: .9em 1.6em .5em; }
.ths-vissza { justify-self: start; padding: .5em 1em; border: 1.5px solid #6d5fb0; border-radius: 99px; background: #241d52; color: #fff; font-weight: 700; font-size: .92em; }
.ths-cim { display: flex; align-items: center; gap: .6em; }
.ths-bagoly { width: 2.4em; }
.ths-bagoly svg { width: 100%; height: auto; display: block; }
.ths-cim > span:last-child { display: grid; line-height: 1.15; }
.ths-cim small { font-size: .7em; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #c9bff5; }
.ths-cim b { font-size: 1.15em; }
.ths-gyerekek { justify-self: end; display: flex; gap: .3em; }
.ths-gyerekek button { padding: .35em .85em; border: 1.5px solid #6d5fb0; border-radius: 99px; background: transparent; color: #d6d0f5; font-weight: 700; font-size: .85em; }
.ths-gyerekek button[aria-pressed="true"] { background: #8b6cff; border-color: #8b6cff; color: #fff; }
.ths-test { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9em; padding: .4em 1.6em 1.6em; }
.ths-kep { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto auto; gap: .9em 1.1em; padding: 1.1em 1.2em; border: 1.5px solid var(--ths-vonal); border-radius: 1.1em; background: var(--ths-uveg); }
.ths-kep > .m-tipp { position: absolute; right: .8em; top: .8em; }
.ths-portre { width: 6em; height: 6em; padding: .3em; border-radius: .9em; background: #1d1645; overflow: hidden; }
.ths-portre svg { width: 100%; height: 100%; }
.ths-nev { display: grid; align-content: center; gap: .15em; }
.ths-nev b { font-size: 1.6em; }
.ths-nev span { color: #d6d0f5; }
.ths-nev small { color: #b7aee6; }
.ths-het { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35em; align-self: end; }
.ths-het div { display: grid; justify-items: center; gap: .2em; }
.ths-het em { font-style: normal; font-size: .7em; color: #c9bff5; min-height: 1.1em; }
.ths-het span { position: relative; width: 100%; height: 4.2em; border-radius: .4em; background: #ffffff10; overflow: hidden; }
.ths-het i { position: absolute; left: 20%; right: 20%; bottom: 0; border-radius: .3em .3em 0 0; background: #8b6cff; transition: height .5s ease; }
.ths-het .mai i { background: #ffc93a; }
.ths-het small { font-size: .72em; color: #d6d0f5; }
.ths-het .mai small { color: #fff; font-weight: 800; }
.ths-szamok { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .55em; }
.ths-szamok div { display: grid; padding: .6em .8em; border: 1.5px solid var(--ths-vonal); border-radius: .8em; background: #1b1546cc; }
.ths-szamok b { font-size: 1.7em; line-height: 1.1; }
.ths-szamok b.villog { animation: ths-villog 1.2s ease 2; }
@keyframes ths-villog { 50% { color: #ffd23f; text-shadow: 0 0 12px #ffd23f88; } }
.ths-szamok small { color: #c9bff5; font-size: .82em; }
.ths-fulek { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3em; padding: .3em; border: 1.5px solid var(--ths-vonal); border-radius: 1em; background: #1b1546cc; }
.ths-fulek button { padding: .65em .4em; border: 0; border-radius: .75em; background: none; color: #e6e1ff; font-weight: 700; font-size: .95em; }
.ths-fulek button[aria-pressed="true"] { background: linear-gradient(135deg, #8b6cff, #a067ff); color: #fff; }
.ths-fulek button[data-th-ful="lapok"]:not([aria-pressed="true"]) { color: #ffd23f; }
.ths-ful { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9em; }
.ths-kartya { padding: 1em 1.2em; border: 1.5px solid var(--ths-vonal); border-radius: 1em; background: var(--ths-uveg); }
.ths-kartya p { margin: .4em 0 0; }
.ths-kcim { font-size: 1.15em; }
.ths-kfej { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; flex-wrap: wrap; margin-bottom: .7em; }
.ths-halk { color: #c9bff5; font-size: .88em; }
.ths-lapok-hivo { display: flex; align-items: center; gap: 1em; border-color: #8a6a2a; background: linear-gradient(90deg, #3a2a3a, #2a2264); }
.ths-lapok-hivo > span:nth-child(2) { display: grid; flex: 1; }
.ths-lapok-hivo small { color: #e6e1ff; }
.ths-ikon { display: grid; place-items: center; width: 2.6em; height: 2.6em; flex: none; border-radius: .7em; background: #4a3a40; font-size: 1.3em; }
.ths-sarga { padding: .65em 1.2em; border: 0; border-radius: .7em; background: linear-gradient(180deg, #ffe07a, #ffc21a); color: #2a1d00; font-weight: 800; white-space: nowrap; box-shadow: 0 6px 18px -8px #ffc21a; }
.ths-targyak { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; }
.ths-targy { display: grid; gap: .6em; padding: .9em 1em; border: 1.5px solid var(--ths-vonal); border-top: 3px solid #ffd23f; border-radius: .9em; background: #1b1546cc; color: #fff; text-align: left; }
.ths-targy.magyar { border-top-color: #ff9ec0; } .ths-targy.kornyezet { border-top-color: #7fe0a0; }
.ths-targy-fej { display: flex; align-items: center; gap: .6em; }
.ths-targy-fej i { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: .6em; background: #3a3170; font-style: normal; }
.ths-targy-fej span { display: grid; flex: 1; line-height: 1.2; }
.ths-targy-fej small { color: #c9bff5; font-size: .82em; }
.ths-targy > small { color: #d6d0f5; font-size: .85em; }
.ths-sav { display: block; height: .45em; border-radius: 99px; background: #ffffff1a; overflow: hidden; }
.ths-sav b { display: block; height: 100%; border-radius: inherit; background: #8b6cff; }
.ths-sav.jo b { background: #3fd17a; } .ths-sav.kozep b { background: #ffc93a; } .ths-sav.gyenge b { background: #ff7a8a; }
.ths-temak { display: grid; gap: .1em; margin: 0; padding: 0; list-style: none; }
.ths-temak li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 3em; align-items: center; gap: 1em; padding: .65em 0; border-bottom: 1px solid #ffffff14; }
.ths-temak li span:first-child { display: grid; line-height: 1.25; }
.ths-temak small { color: #c9bff5; font-size: .82em; }
.ths-temak em { font-style: normal; font-weight: 800; text-align: right; }
.ths-szeg { display: flex; flex-wrap: wrap; gap: .35em; margin-top: .7em; }
.ths-szeg button { padding: .55em 1em; border: 1.5px solid #6d5fb0; border-radius: .7em; background: #1b1546; color: #e6e1ff; font-weight: 700; }
.ths-szeg button[aria-pressed="true"] { background: #8b6cff; border-color: #b9a5ff; color: #fff; box-shadow: 0 0 0 2px #8b6cff55; }
.ths-magyaraz { padding: .7em .9em; border-radius: .7em; background: #ffffff10; color: #fff; }
.ths-lap-racs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9em; align-items: start; }
.ths-lap-racs .ths-sarga { margin-top: .9em; }
.ths-a4 { padding: 1.2em 1.4em; border-radius: .3em; background: #fff; color: #1d2340; box-shadow: 0 18px 40px #00000066; aspect-ratio: 1 / 1.3; font-size: .9em; }
.ths-a4-fej { display: flex; justify-content: space-between; margin: 0 0 .8em; padding-bottom: .5em; border-bottom: 2px solid #1d2340; font-size: .9em; }
.ths-a4 ol { display: grid; gap: .9em; margin: 0; padding-left: 1.3em; }
.ths-doboz { display: inline-block; width: 2.2em; height: 1.5em; margin-left: .3em; vertical-align: middle; border: 2px solid #1d2340; border-radius: .25em; }
@container minta (max-width: 560px) {
  .ths { font-size: .72em; }
  .ths-fej { grid-template-columns: 1fr; justify-items: center; padding: .8em 1em .3em; }
  .ths-vissza, .ths-gyerekek { display: none; }
  .ths-test { padding: .3em 1em 1.2em; }
  .ths-kep { grid-template-columns: auto minmax(0, 1fr); }
  .ths-het { grid-column: 1 / -1; }
  .ths-szamok { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ths-fulek { grid-template-columns: repeat(3, 1fr); }
  .ths-targyak, .ths-lap-racs { grid-template-columns: minmax(0, 1fr); }
  .ths-lapok-hivo { flex-wrap: wrap; }
}

/* =====================================================================
   3D galéria (gal, galm) – a Kerekes Éva Style galéria kezelőfelülete
   ===================================================================== */
.gal, .galm { --g-mely: #0b2a3a; --g-atl: rgba(9, 34, 48, .78); --g-turkiz: #3cc6d0; --g-arany: #d9b45a; --g-feher: #f4f7f8; --g-halv: rgba(244, 247, 248, .68); --g-serif: Georgia, "Palatino Linotype", Cambria, serif; font-family: "Segoe UI", system-ui, sans-serif; color: var(--g-feher); -webkit-user-select: none; user-select: none; }
.gal button, .galm button { cursor: pointer; font-family: inherit; color: inherit; }
.gal { position: relative; height: 100%; overflow: hidden; background: #dcd8d0; font-size: .8em; }
.gal-szinter { position: absolute; inset: 0; z-index: 0; overflow: hidden; perspective: 24em; perspective-origin: 50% 44%; cursor: grab; touch-action: pan-y; background: #e9e7e2; }
.gal-szinter:active { cursor: grabbing; }
.gal-terem { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: translateZ(24em) rotateY(var(--a)); transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.gal-terem.huz { transition: none; }
.gal-fal {
  position: absolute; left: -28em; top: -15em; width: 56em; height: 30em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2em; padding: 2em 3em 4em;
  backface-visibility: hidden; transform: rotateY(calc(var(--k) * -90deg)) translateZ(-28em); color: #1f4a5a;
  background: radial-gradient(ellipse 22% 50% at 25% 8%, rgba(255, 252, 240, .9), transparent 70%), radial-gradient(ellipse 22% 50% at 50% 8%, rgba(255, 252, 240, .9), transparent 70%), radial-gradient(ellipse 22% 50% at 75% 8%, rgba(255, 252, 240, .9), transparent 70%), linear-gradient(180deg, #f7f6f3 0%, #efede8 88%, #d9d5cc 88.4%, #e6e2da 91%, #f2f0ec 100%);
}
.gal-fal.kek { color: #eaf6f8; background: radial-gradient(ellipse 22% 50% at 25% 8%, rgba(120, 200, 220, .35), transparent 70%), radial-gradient(ellipse 22% 50% at 75% 8%, rgba(120, 200, 220, .35), transparent 70%), linear-gradient(180deg, #2a7896 0%, #1f6a85 88%, #18546a 88.4%, #1b5d75 100%); }
.gal-sin { position: absolute; left: 12%; right: 12%; top: 1.2em; height: .35em; background: #1d1d1f; }
.gal-sin::before, .gal-sin::after { content: ""; position: absolute; top: .35em; width: .9em; height: 1.6em; background: #1d1d1f; border-radius: 0 0 .25em .25em; transform: rotate(-12deg); }
.gal-sin::before { left: 22%; } .gal-sin::after { right: 22%; transform: rotate(12deg); }
.gal-falcim { display: grid; justify-items: center; gap: .3em; }
.gal-falcim b { font: 400 3.2em var(--g-serif); letter-spacing: .14em; color: #1f5a6e; }
.gal-falcim small { font: italic 1.25em var(--g-serif); color: #a07a3c; }
.gal-eloter { display: flex; align-items: center; gap: 3.5em; }
.gal-idezet { display: grid; gap: .5em; max-width: 17em; color: #2a3b40; }
.gal-idezet b { font: 400 1.4em var(--g-serif); color: #1f6a85; padding-bottom: .4em; border-bottom: 2px solid #d9b45a; width: max-content; }
.gal-idezet p { margin: 0; font: italic 1.25em/1.45 var(--g-serif); }
.gal-idezet small { color: #4a5a60; }
.gal-sor { display: flex; align-items: center; justify-content: space-evenly; width: 100%; gap: 2em; }
.gal-kep { position: relative; display: grid; justify-items: center; gap: .9em; flex: none; padding: 0; border: 0; background: none; transition: transform .2s; }
.gal-kep:hover { transform: scale(1.04); }
.gal-keret { display: block; width: 14em; height: 10.5em; padding: .9em; background: #fff; box-shadow: 0 0 0 .35em #1b1b1d, 0 1.2em 1.8em -.6em rgba(0, 0, 0, .55); }
.gal-kep.portre .gal-keret { width: 9.2em; height: 12.3em; }
.gal-keret svg { display: block; width: 100%; height: 100%; }
.gal-cimke { position: relative; display: grid; padding: .3em .7em; background: #fff; color: #33302b; font-size: .62em; line-height: 1.3; text-align: left; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.gal-cimke b { font-family: var(--g-serif); font-weight: 400; font-size: 1.15em; }
.gal-cimke small { color: #6b665e; }
.gal-cimke i { position: absolute; right: -.4em; top: -.4em; width: .8em; height: .8em; border-radius: 50%; background: #c0392b; }
.gal-padlo { position: absolute; left: -28em; top: -28em; width: 56em; height: 56em; transform: rotateX(90deg) translateZ(-15em); background: repeating-linear-gradient(90deg, #d7b48a 0 3.2em, #cfa97c 3.2em 3.3em, #dcbb92 3.3em 6.5em, #c9a274 6.5em 6.6em), #d4b085; }
.gal-padlo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .18), rgba(0, 0, 0, .18) 75%); }
.gal-plafon { position: absolute; left: -28em; top: -28em; width: 56em; height: 56em; transform: rotateX(-90deg) translateZ(-15em); background: radial-gradient(circle at 50% 50%, #f2f2f0, #d6d5d1 75%); }
.gal-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.gal-pirula { pointer-events: auto; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; background: var(--g-atl); color: var(--g-feher); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.gal-pirula:hover { border-color: rgba(60, 198, 208, .6); }
.gal-teremnev { position: absolute; left: 1em; top: 1em; padding: .55em 1.1em; font: 1em var(--g-serif); pointer-events: none; }
.gal-hud-jobb { position: absolute; right: 1em; top: 1em; display: flex; gap: .5em; }
.gal-ikon { display: grid; place-items: center; width: 3em; height: 3em; padding: 0; font-weight: 700; font-size: 1em; }
.gal-ikon svg { width: 1.4em; height: 1.4em; fill: currentColor; }
.gal-ikon .mi { width: 1.2em; height: 1.2em; }
.gal-hud-lent { position: absolute; left: 50%; bottom: 1.2em; display: flex; gap: .6em; align-items: center; transform: translateX(-50%); transition: transform .35s ease; }
.gal.panel-nyitva .gal-hud-lent { transform: translateX(calc(-50% - 11em)); }
.gal-seta { display: flex; align-items: center; gap: .5em; height: 3em; padding: 0 1.3em 0 1em; font-size: .95em; }
.gal-seta svg { width: 1.2em; height: 1.2em; fill: var(--g-turkiz); }
.gal-seta.fut { border-color: rgba(60, 198, 208, .7); }
.gal > .m-tipp { position: absolute; left: 1em; top: auto; bottom: 1.4em; z-index: 4; }
.gal-info { position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; display: flex; flex-direction: column; width: 22em; max-width: 100%; background: linear-gradient(180deg, rgba(8, 31, 44, .95), rgba(6, 24, 35, .97)); border-left: 1px solid rgba(255, 255, 255, .08); transform: translateX(105%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); -webkit-user-select: text; user-select: text; }
.gal-info.nyitva { transform: none; }
.gal-bezar { position: absolute; top: .6em; right: .6em; z-index: 2; display: grid; place-items: center; width: 2.4em; height: 2.4em; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; background: rgba(0, 0, 0, .35); font-size: 1.4em; line-height: 1; color: #fff; }
.gal-info-kep { display: grid; place-items: center; padding: 1.2em; background: rgba(0, 0, 0, .25); }
.gal-info-kep svg { width: 100%; aspect-ratio: 4 / 3; display: block; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.gal-info-kep.portre svg { width: 62%; aspect-ratio: 3 / 4; }
.gal-info-szoveg { flex: 1; overflow-y: auto; padding: 1.2em 1.4em .8em; line-height: 1.6; }
.gal-info-felcim { margin: 0; color: var(--g-turkiz); font-size: .75em; letter-spacing: .2em; text-transform: uppercase; }
.gal-info-szoveg h5 { margin: .2em 0 .3em; font: 400 1.6em/1.2 var(--g-serif); }
.gal-meta { margin: 0 0 .3em; color: #e8dcc0; font-size: .9em; }
.gal-dij { margin: 0 0 .6em; color: var(--g-arany); font-size: .9em; }
.gal-info-szoveg > p:not([class]) { margin: 0 0 .8em; color: rgba(244, 247, 248, .88); font-size: .92em; }
.gal-linkek { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .6em; }
.gal-linkek button { padding: .55em 1em; border: 0; border-radius: 999px; background: var(--g-turkiz); color: #062230 !important; font-size: .88em; font-weight: 600; }
.gal-linkek button.masod { background: transparent; color: var(--g-turkiz) !important; border: 1px solid rgba(60, 198, 208, .6); }
.gal-lapozo { display: flex; justify-content: space-between; align-items: center; padding: .7em 1em; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .88em; }
.gal-lapozo span { color: var(--g-halv); }
.gal-masod { padding: .45em .9em; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: transparent; }
.gal-masod:hover { border-color: var(--g-turkiz); }
.gal-reteg { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 1em; background: rgba(3, 14, 20, .55); }
.gal-reteg-doboz { position: relative; display: grid; gap: .7em; width: min(30em, 100%); padding: 1.3em 1.5em; border: 1px solid rgba(255, 255, 255, .1); border-radius: 1.1em; background: rgba(8, 31, 44, .96); }
.gal-reteg-doboz > b { font: 400 1.4em var(--g-serif); }
.gal-reteg-doboz > small { color: var(--g-halv); }
.gal-alaprajz { display: grid; grid-template-columns: 11em 1fr; gap: 1em; align-items: center; }
.gal-alaprajz svg { width: 100%; }
.gal-alaprajz ul { display: grid; gap: .3em; margin: 0; padding: 0; list-style: none; }
.gal-alaprajz li button { display: flex; gap: .6em; width: 100%; padding: .45em .7em; border: 1px solid rgba(255, 255, 255, .12); border-radius: .6em; background: transparent; text-align: left; font-size: .9em; }
.gal-alaprajz li b { color: var(--g-turkiz); font-family: var(--g-serif); }
.gal-alaprajz li.akt button { border-color: var(--g-arany); background: rgba(217, 180, 90, .12); }
.gal-kezdo { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; overflow: hidden; transition: opacity .9s ease; }
.gal-kezdo.eltunik { opacity: 0; pointer-events: none; }
.gal-kezdo-hatter { position: absolute; inset: 0; animation: gal-lebeg 18s ease-in-out infinite alternate; }
.gal-kezdo-hatter svg { width: 100%; height: 100%; filter: blur(1.5px) saturate(1.1); }
.gal-kezdo-hatter::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 28, 41, .55) 0%, rgba(6, 28, 41, .86) 62%, rgba(6, 28, 41, .97) 100%); }
@keyframes gal-lebeg { from { transform: scale(1.04); } to { transform: scale(1.1) translateY(-1.5%); } }
.gal-kezdo-tart { position: relative; display: grid; justify-items: center; padding: 1em 2em; text-align: center; }
.gal-felcim { margin: 0 0 .5em; color: var(--g-turkiz); font-size: .78em; letter-spacing: .32em; text-transform: uppercase; }
.gal-kezdo-tart h4 { margin: 0; font: 400 4.2em/1.05 var(--g-serif); letter-spacing: .03em; text-shadow: 0 4px 30px rgba(0, 0, 0, .45); }
.gal-alcim { margin: .4em 0 1em; color: #e8dcc0; font: italic 1.3em var(--g-serif); }
.gal-motto { margin: 0 0 1.4em; color: var(--g-halv); }
.gal-toltes { width: 22em; max-width: 80%; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .15); }
.gal-toltes i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--g-turkiz), var(--g-arany)); }
.gal-toltes-sz { min-height: 1.2em; margin: .6em 0 1.1em; color: var(--g-halv); font-size: .85em; }
.gal-gomb-fo { padding: .9em 2.1em; border: 0; border-radius: 999px; background: linear-gradient(135deg, #43d0d8, #1f8fa6); color: #062230 !important; font-size: 1.05em; font-weight: 600; letter-spacing: .04em; box-shadow: 0 10px 30px rgba(60, 198, 208, .35); transition: transform .2s, box-shadow .2s, opacity .3s; }
.gal-gomb-fo:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(60, 198, 208, .5); }
.gal-gomb-fo:disabled { opacity: .35; cursor: wait; }
.gal-kezdo-sugo { display: grid; gap: .5em; margin-top: 2em; color: var(--g-halv); font-size: .82em; line-height: 1.5; }
.gal-kezdo-sugo p { margin: 0; }
.gal-kezdo-sugo b { margin-right: .5em; color: var(--g-feher); }
@container minta (max-width: 560px) {
  .gal { font-size: .7em; }
  .gal-szinter { perspective: 20em; }
  .gal-info { width: 100%; top: 35%; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); border-radius: 1.2em 1.2em 0 0; }
  .gal.panel-nyitva .gal-hud-lent { transform: translateX(-50%); }
  .gal-kezdo-tart h4 { font-size: 3em; }
  .gal-kezdo-sugo { display: none; }
}
.galm { position: relative; flex: 1; height: 100%; min-height: 0; overflow: hidden; background: #e9e7e2; font-size: .82em; }
.galm-fal { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2em; padding: 3.4em .8em 5em; color: #1f4a5a; background: radial-gradient(ellipse 50% 30% at 50% 10%, rgba(255, 252, 240, .9), transparent 70%), linear-gradient(180deg, #f7f6f3 0%, #efede8 72%, #d9d5cc 72.4%, #e6e2da 74%); }
.galm-fal.kek { color: #eaf6f8; background: linear-gradient(180deg, #2a7896 0%, #1f6a85 72%, #18546a 72.4%, #1b5d75 74%); }
.galm-fal .gal-falcim b { font-size: 1.5em; }
.galm-fal .gal-falcim small { font-size: .85em; }
.galm-kepek { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4em .9em; position: relative; z-index: 1; }
.galm .gal-keret { width: 7.4em; height: 5.6em; padding: .45em; box-shadow: 0 0 0 .22em #1b1b1d, 0 .8em 1.2em -.5em rgba(0, 0, 0, .55); }
.galm .gal-kep.portre .gal-keret { width: 5em; height: 6.6em; }
.galm .gal-cimke { font-size: .58em; }
.galm-padlo { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: repeating-linear-gradient(100deg, #d7b48a 0 2em, #cfa97c 2em 2.08em, #dcbb92 2.08em 4em, #c9a274 4em 4.08em); }
.galm .gal-sin { top: 3.2em; }
.galm-nev { position: absolute; left: .7em; top: 3.3em; z-index: 2; padding: .45em .9em; font: .9em var(--g-serif); pointer-events: none; }
.galm-lent { position: absolute; left: 50%; bottom: 1em; z-index: 2; display: flex; gap: .4em; transform: translateX(-50%); }
.galm-lent .gal-ikon { width: 2.6em; height: 2.6em; }
.galm-lent .gal-seta { height: 2.6em; }
.galm-lap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; max-height: 78%; display: flex; flex-direction: column; overflow: auto; border-radius: 1.2em 1.2em 0 0; background: linear-gradient(180deg, rgba(8, 31, 44, .97), rgba(6, 24, 35, .99)); box-shadow: 0 -10px 30px rgba(0, 0, 0, .35); }
.galm-lap.be { animation: galm-fel .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes galm-fel { from { transform: translateY(30%); opacity: .3; } }
.galm-lap .gal-info-kep { padding: 1em 1em .6em; }
.galm-lap .gal-info-szoveg { padding: .6em 1.1em 1em; }
.galm-lap .gal-info-szoveg h5 { font-size: 1.3em; }
.galm-jel { position: absolute; right: .7em; top: 3.4em; z-index: 3; }

/* Taperforge – a projekt telefonon (tfm) */
.tfm { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; font: .92em/1.4 "TF Noto", "Segoe UI", sans-serif; color: #102c39; background: #edf1f2; }
.tfm-fej { display: flex; align-items: center; justify-content: space-between; padding: .7em 1em; background: #12323f; border-bottom: 2px solid #0a7f99; }
.tfm-fej .tf-marka b { font-size: 1.15em; }
.tfm-fej .tf-marka .tf-mark { width: 1.6em; height: 1.6em; }
.tfm-menu { color: #fff; }
.tfm-menu .mi { width: 1.4em; height: 1.4em; }
.tfm-test { overflow: auto; padding: 1em; display: grid; grid-template-columns: minmax(0, 1fr); gap: .6em; align-content: start; scrollbar-width: none; }
.tfm-szem { margin: 0; font: 700 .75em "TF Geist", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #0b6a82; }
.tfm-cim { position: relative; margin: 0; font: 700 1.3em/1.2 "TF Geist", sans-serif; }
.tfm-cim .m-tipp { position: absolute; right: 0; top: 0; }
.tfm-sor { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; margin: 0; }
.tfm-sor small { color: #586b73; }
.tfm-chip { padding: .2em .6em; border: 1px solid #b9dccb; border-radius: 2px; background: #eaf6ef; color: #1d7a4f; font-weight: 650; font-size: .8em; }
.tfm-kep { padding: .4em; border: 1px solid #d4dde0; border-radius: 3px; background: #fff; }
.tfm-kep img { display: block; width: 100%; height: auto; }
.tfm-kpik { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.tfm-kpik div { display: grid; padding: .6em .7em; border: 1px solid #d4dde0; border-radius: 3px; background: #fff; }
.tfm-kpik div:first-child { background: #12323f; border-color: #12323f; color: #fff; }
.tfm-kpik div:first-child small { color: #b9cdd4; }
.tfm-kpik small { color: #586b73; font-size: .8em; }
.tfm-kpik b { font: 700 1.2em "TF Geist", sans-serif; }
.tfm-alcim { margin: .4em 0 0; font: 700 .78em "TF Geist", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #586b73; }
.tfm-lista { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid #d4dde0; border-radius: 3px; background: #fff; }
.tfm-lista li { display: flex; justify-content: space-between; padding: .5em .8em; border-top: 1px solid #e5ebed; font-size: .92em; }
.tfm-lista li:first-child { border-top: 0; }
.tfm-lista li span { color: #586b73; }
.tfm-lista li.halk b { font-weight: 500; color: #586b73; }