html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ===== NaxanCms modul-stílusok ===== */
.cms-page { max-width: 1080px; margin: 0 auto; padding: 1rem; }
.cms-zone { margin-bottom: 1.5rem; }
.cms-section { margin-bottom: 1.25rem; }
/* F2 P1 rács: sor → oszlopok (12-es rácsból --cms-col-w egység) */
.cms-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.cms-col { flex: 1 1 calc(var(--cms-col-w, 12) / 12 * 100% - 1rem); min-width: 0; }
@media (max-width: 767.98px) { .cms-col { flex-basis: 100%; } }
.cms-module { margin-bottom: 1rem; }

/* [K72] Tördelhetetlen szöveg elleni védelem a TARTALOM-rétegen (nem a rácson).
   Mérve: egy 80 karakteres tördelhetetlen token 390 px-es telefonon 478 px-es
   layout-viewportot kényszerített (88 px túllógás) — az `overflow-wrap: anywhere`
   ezt 390 px-re, azaz 0 px-re vitte. A hiba TARTALOM-függő: a rács sosem csordult
   túl, viszont bármelyik szerkesztő betehet egy hosszú URL-t vagy szót, ezért ez
   megelőző szabály, nem egyszeri javítás. Gépi kapu: tools/browser-checks/mobile-editor.mjs [K73]. */
.cms-page, .cms-module, .cms-richtext, .cms-heading { overflow-wrap: anywhere; }
/* A richtext-táblázat önálló, kisebb forrás volt: +82 px 390 px-en. Saját sávban
   görgetjük, hogy ne a LAPOT szélesítse ki. */
.cms-richtext table { display: block; width: 100%; overflow-x: auto; }

.cms-hero {
    border-radius: 14px;
    padding: 3.5rem 2rem;
    background: linear-gradient(135deg, #1f2937 0%, #4338ca 100%);
    color: #fff;
    text-align: center;
}
.cms-hero-inner { max-width: 720px; margin: 0 auto; }
.cms-hero h1 { font-size: 2.4rem; margin: 0 0 .5rem; }
.cms-hero-subtitle { font-size: 1.15rem; opacity: .9; margin-bottom: 1.25rem; }
/* A CTA-gomb a KIEMELÉS token-szerepére hivatkozik (nem per-elem inline szín): egy
   accent-váltás minden modul gombját együtt színezi. A fallback a token hiányára véd. */
.cms-btn {
    display: inline-block; padding: .6rem 1.4rem; border-radius: 999px;
    background: var(--nx-color-accent, #2563eb);
    color: var(--nx-color-on-accent, #fff);
    font-weight: 600; text-decoration: none;
}
.cms-btn:hover { filter: brightness(0.92); }

.cms-richtext { line-height: 1.7; }

.cms-gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--cms-cols, 3), 1fr);
    gap: .75rem;
}

/* ===== F2.5 beépített modulok ===== */
.cms-accordion-item { border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: .5rem; padding: .25rem .75rem; }
.cms-accordion-item summary { font-weight: 600; cursor: pointer; padding: .5rem 0; }
.cms-accordion-body { padding: 0 0 .75rem; }

.cms-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.cms-price-tier { border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; text-align: center; }
.cms-price-tier.is-featured { border-color: var(--nx-color-accent, #2563eb); border-width: 2px; box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.cms-price-amount { font-size: 2rem; font-weight: 700; }
.cms-price-period { color: #6b7280; }
.cms-price-features { list-style: none; padding: 0; margin: 1rem 0; }
.cms-price-features li { padding: .3rem 0; border-bottom: 1px solid #f1f5f9; }

.cms-testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.cms-testimonial { border-left: 3px solid var(--nx-color-accent, #2563eb); padding: .5rem 1rem; }
.cms-testimonial-by { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.cms-avatar { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; }
.cms-muted { color: #6b7280; }

.cms-counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; text-align: center; }
.cms-counter-value { font-size: 2.2rem; font-weight: 700; color: var(--nx-color-accent, #2563eb); }
.cms-counter-label { color: #6b7280; }

.cms-features-grid { display: grid; grid-template-columns: repeat(var(--cms-cols, 3), 1fr); gap: 1.25rem; }
.cms-feature { text-align: center; }
.cms-feature-icon { font-size: 2rem; color: var(--nx-color-accent, #2563eb); display: block; margin-bottom: .5rem; }

.cms-iconrow { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.cms-iconitem { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; color: inherit; font-size: 1.4rem; }
.cms-iconitem span { font-size: .95rem; }

/* ===== P4 addon-batch 1 ===== */
.cms-heading { margin: 0 0 .5rem; }
.cms-buttonwrap { margin: .5rem 0; }
.cms-buttongroup { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
/* A gomb-variánsok mind token-SZEREPRE hivatkoznak (accent/primary), nem per-elem hexre. */
.cms-btn--accent  { background: var(--nx-color-accent,  #2563eb); color: var(--nx-color-on-accent,  #fff); }
.cms-btn--primary { background: var(--nx-color-primary, #1f2937); color: var(--nx-color-on-primary, #fff); }
.cms-btn--outline { background: transparent; color: var(--nx-color-accent, #2563eb); border: 2px solid var(--nx-color-accent, #2563eb); }
.cms-alert { padding: .8rem 1rem; border-radius: 8px; border-left: 4px solid; margin: .5rem 0; }
.cms-alert--info    { background: #eff6ff; border-color: #2563eb; }
.cms-alert--success { background: #ecfdf5; border-color: #16a34a; }
.cms-alert--warning { background: #fffbeb; border-color: #d97706; }
.cms-alert--danger  { background: #fef2f2; border-color: #dc2626; }
.cms-divider { border: 0; border-top: 2px solid #e2e8f0; margin: 1rem 0; }

/* ===== P4 addon-batch 2 ===== */
.cms-image img { max-width: 100%; height: auto; border-radius: 8px; }
.cms-image figcaption { color: #6b7280; font-size: .9rem; margin-top: .25rem; }
.cms-video iframe, .cms-video video { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; }
.cms-progress { margin: .5rem 0; }
.cms-progress-head { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: .25rem; }
.cms-progress-track { background: #eef2f7; border-radius: 999px; height: 10px; overflow: hidden; }
.cms-progress-fill { height: 100%; border-radius: 999px; }
.cms-person { display: flex; gap: 1rem; align-items: center; }
.cms-person-photo { width: 72px; height: 72px; border-radius: 999px; object-fit: cover; }
.cms-person-role { color: #6b7280; }
.cms-social { display: flex; gap: .75rem; flex-wrap: wrap; }
.cms-social-link { font-size: 1.4rem; color: var(--nx-color-accent, #2563eb); text-decoration: none; }
.cms-quote { border-left: 4px solid var(--nx-color-accent, #2563eb); padding: .5rem 1rem; font-style: italic; }
.cms-quote-author { font-style: normal; color: #6b7280; margin-top: .25rem; }

/* Közös stílus-réteg szerkesztő (P2/P6) */
.cms-style-layer { border-top: 1px dashed #e2e8f0; margin-top: .75rem; padding-top: .5rem; }
.cms-style-layer summary { cursor: pointer; font-weight: 600; }
.cms-box4 { display: flex; gap: .3rem; }
.cms-box4 input { width: 25%; }
.cms-device-switch { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; margin-bottom: .5rem; }
.cms-slider-val { margin-left: .5rem; font-weight: 600; }

/* ===== P4 addon-batch 3 ===== */
/* Fülek (radio-hack) */
.cms-tabs { display: flex; flex-wrap: wrap; }
.cms-tab-radio { position: absolute; opacity: 0; pointer-events: none; }
.cms-tab-label { padding: .5rem 1rem; cursor: pointer; border: 1px solid #e2e8f0; border-bottom: 0; margin-right: .25rem; border-radius: 6px 6px 0 0; }
.cms-tab-panel { display: none; order: 99; width: 100%; padding: 1rem; border: 1px solid #e2e8f0; }
.cms-tab-radio:checked + .cms-tab-label { background: var(--nx-color-accent, #2563eb); color: var(--nx-color-on-accent, #fff); }
.cms-tab-radio:checked + .cms-tab-label + .cms-tab-panel { display: block; }
/* Idővonal */
.cms-timeline { list-style: none; padding-left: 1rem; border-left: 2px solid var(--nx-color-accent, #2563eb); }
.cms-timeline-item { margin-bottom: 1rem; position: relative; padding-left: .75rem; }
.cms-timeline-item::before { content: ""; position: absolute; left: -1.4rem; top: .3rem; width: 10px; height: 10px; border-radius: 999px; background: var(--nx-color-accent, #2563eb); }
.cms-timeline-date { display: block; color: #6b7280; font-size: .85rem; }
.cms-timeline-title { display: block; }
/* Táblázat */
.cms-table-wrap { overflow-x: auto; }
.cms-table { width: 100%; border-collapse: collapse; }
.cms-table th, .cms-table td { border: 1px solid #e2e8f0; padding: .5rem .75rem; text-align: left; }
.cms-table thead th { background: #f8fafc; }
/* Flip */
.cms-flip { perspective: 1000px; max-width: 320px; }
.cms-flip-inner { position: relative; width: 100%; min-height: 200px; transition: transform .6s; transform-style: preserve-3d; }
.cms-flip:hover .cms-flip-inner { transform: rotateY(180deg); }
.cms-flip-face { position: absolute; inset: 0; backface-visibility: hidden; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.25rem; display: flex; flex-direction: column; justify-content: center; }
.cms-flip-back { transform: rotateY(180deg); background: var(--nx-color-surface, #fff); }
/* Ügyfelek */
.cms-clients { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.cms-client img { max-height: 48px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .15s, opacity .15s; }
.cms-client:hover img { filter: none; opacity: 1; }
/* Térkép */
.cms-map iframe { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; }

/* ===== P4 addon-batch 4 (záró) ===== */
.cms-countdown { text-align: center; padding: 1rem; }
.cms-cd-label { color: #6b7280; }
.cms-cd-display { font-size: 1.6rem; font-weight: 700; color: var(--nx-color-accent, #2563eb); }
.cms-carousel { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
.cms-carousel-slide { flex: 0 0 80%; scroll-snap-align: center; }
.cms-carousel-slide img { width: 100%; height: auto; border-radius: 8px; }
.cms-form { display: flex; flex-direction: column; gap: .6rem; max-width: 520px; }
.cms-form-field { display: flex; flex-direction: column; gap: .2rem; }
.cms-form-field input, .cms-form-field textarea { padding: .5rem; border: 1px solid #cbd5e1; border-radius: 6px; }
.cms-form-success { padding: 1rem; background: #ecfdf5; border: 1px solid #16a34a; border-radius: 8px; }

/* Ismételhető elem-lista a modul-szerkesztőben */
.cms-itemlist { display: flex; flex-direction: column; gap: .75rem; }
.cms-item { border: 1px solid #e2e8f0; border-radius: 8px; padding: .75rem; background: #fafbfc; }
.cms-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }

/* ===== F2.6 modul drag-n-drop canvas ===== */
.cms-palette { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
    padding: .6rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 1rem; }
.cms-palette-label { font-size: .85rem; color: #6b7280; margin-right: .5rem; }
.cms-palette-item { cursor: grab; user-select: none; background: #fff; font-size: .9rem;
    border: 1px solid #cbd5e1; border-radius: 999px; padding: .3rem .8rem; }
.cms-palette-item:hover { border-color: var(--nx-color-accent, #2563eb); }
.cms-palette-item.is-dragging { opacity: .5; }
.cms-module-card { cursor: default; }
.cms-module-card[draggable="true"] .cms-module-card-head { cursor: grab; }
.cms-module-card.is-dragging { opacity: .5; }
.cms-dropzone { border: 1px dashed #e2e8f0; border-radius: 6px; padding: .4rem; text-align: center;
    color: #cbd5e1; font-size: .75rem; margin: .35rem 0; transition: border-color .1s, color .1s, background .1s; }
.cms-dropzone:hover { border-color: var(--nx-color-accent, #2563eb); color: var(--nx-color-accent, #2563eb); background: #f8fafc; }
.cms-canvas-preview { border-top: 1px dashed #e2e8f0; margin-top: .4rem; padding: .5rem; cursor: pointer; }
/* Kijelölés: az SPPB `shadows.outline` mintája — fehér elválasztó gyűrű, rajta az akcent.
   Így a kijelölés sötét és világos modul-háttéren is elválik, nem olvad a tartalomba. */
.cms-canvas-preview.is-selected { outline: 0; border-radius: 6px;
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--nx-color-accent, #4f46e5); }
.cms-inspector-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }

/* Inspector polish (közös alap #3) */
.cms-inspector-head h3 { display: flex; align-items: center; gap: .4rem; font-size: 1rem; margin: 0; min-width: 0; }
.cms-inspector-head h3 > code { font-size: .68rem; background: #f1f5f9; color: #64748b; padding: .05rem .35rem; border-radius: 5px; font-weight: 500; }
.cms-inspector-icon { color: #4f46e5; }
.cms-inspector .cms-inspector-tabs { position: sticky; top: 0; background: #fff; z-index: 2; padding-top: .25rem; }
.cms-inspector .cms-config-actions { padding: .6rem 0 .2rem; margin-top: .75rem; border-top: 1px solid #eef2f6; }
/* Egységes, letisztult mezők az inspectorban (a Bootstrap felett). */
.cms-config-editor .form-control { border: 1px solid #d7dde5; border-radius: 7px; font-size: .85rem; padding: .35rem .5rem; }
.cms-config-editor .form-control:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, .12); }
.cms-config-editor label { color: #334155; }
.cms-config-editor .cms-style-title { margin-top: .35rem; padding-top: .5rem; border-top: 1px solid #f1f5f9; }
.cms-config-editor .cms-style-title:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* F2 P1 rács-szerkesztő (sor → oszlopok) — a vizuális megjelenést a lap alján lévő
   „BE-CANVAS-1 kanvasz nesting-hierarchia” blokk adja (egy helyen a négy szint). */

/* Addon: ikon-doboz + CTA blokk */
.cms-iconbox { padding: 1.5rem; border-radius: 12px; }
.cms-iconbox--link { display: block; text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease; }
.cms-iconbox--link:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15, 23, 42, .12); }
.cms-iconbox-icon { font-size: 2.4rem; color: var(--nx-color-accent, #4f46e5); margin-bottom: .6rem; }
.cms-iconbox-title { font-size: 1.15rem; font-weight: 700; margin-bottom: .35rem; }
.cms-iconbox-body { color: #475569; }
.cms-cta { padding: 2rem; border-radius: 14px; background: var(--nx-color-surface, #f8fafc); }
.cms-cta-title { font-size: 1.6rem; font-weight: 800; margin-bottom: .4rem; }
.cms-cta-text { color: #475569; margin-bottom: 1rem; }
.cms-cta-btn { display: inline-block; }

/* G-ROWSTYLE sor-stílus panel a szerkesztőben. */
.cms-row-style { border: 1px solid #cbd5e1; border-radius: 8px; padding: .6rem; margin-bottom: .6rem; background: #f8fafc; }
.cms-row-style .cms-field { margin-bottom: .5rem; }

/* G3 preset oszlop-osztás gombok: mini vizuális arány-előnézet a címke mellett. */
.cms-preset { display: inline-flex; align-items: center; gap: .4rem; }
.cms-preset-bars { display: inline-flex; gap: 2px; width: 34px; height: 12px; }
.cms-preset-bars > span { background: #94a3b8; border-radius: 2px; }

/* G1 kanvasz-szintű eszköz-előnézet: a device-sáv + a breakpoint-szélességre szűkülő kanvasz.
   A rács flex-wrap+min-width miatt valósághűen újratördel a keskenyebb kanvaszban. */
.cms-device-bar { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-bottom: .9rem; }
.cms-device-bar .xa-btn.is-active { background: #1e293b; color: #fff; border-color: #1e293b; }
.cms-device-w { margin-left: .35rem; font-size: .8rem; color: #64748b; }
.cms-canvas { transition: max-width .22s ease; }
/* Tablet/mobil: a kanvasz eszköz-keretbe szűkül és középre kerül. */
.cms-canvas--t, .cms-canvas--m {
    margin-inline: auto; padding: .9rem; background: #f1f5f9;
    border: 1px solid #cbd5e1; border-radius: 14px; box-shadow: 0 8px 30px rgba(15, 23, 42, .12);
}
.cms-canvas--t { max-width: 782px; }
.cms-canvas--m { max-width: 390px; }
/* Mobilon a valós viselkedés: minden oszlop egymás alá tördel. */
.cms-canvas--m .xa-grid-col { flex: 1 1 100%; min-width: 0; }

/* G10 láthatóság: kártya-jelvények + eszköz-pipák az inspectorban. */
.cms-mod-badge { display: inline-block; margin-left: .35rem; padding: .05rem .4rem; border-radius: 999px;
    font-size: .72rem; font-weight: 600; background: #eef2ff; color: #3730a3; vertical-align: middle; }
.cms-vis-devices { display: flex; gap: 1rem; flex-wrap: wrap; }
.cms-check { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; }

/* G2 fül-alapú inspector */
.cms-inspector-tabs { display: flex; gap: .15rem; border-bottom: 2px solid #e2e8f0; margin: .5rem 0 .9rem; flex-wrap: wrap; }
.cms-tab { border: 0; background: none; padding: .45rem .7rem; cursor: pointer; font-size: .85rem; font-weight: 600;
    color: #64748b; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.cms-tab:hover { color: #1e293b; }
.cms-tab.is-active { color: #4f46e5; border-bottom-color: #4f46e5; }
.cms-style-title { font-weight: 600; color: #334155; margin-bottom: .5rem; }

/* G2 interakció: előre definiált belépő-animációk + hover effektek (biztonságos, whitelistelt). */
@keyframes nxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nxSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes nxSlideLeft { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes nxZoom { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.nx-anim-fade { animation: nxFade .6s ease both; }
.nx-anim-slide-up { animation: nxSlideUp .6s ease both; }
.nx-anim-slide-left { animation: nxSlideLeft .6s ease both; }
.nx-anim-zoom { animation: nxZoom .6s ease both; }
.nx-hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
.nx-hover-lift:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(15, 23, 42, .12); }
.nx-hover-grow { transition: transform .2s ease; }
.nx-hover-grow:hover { transform: scale(1.03); }
.nx-hover-shadow { transition: box-shadow .2s ease; }
.nx-hover-shadow:hover { box-shadow: 0 10px 30px rgba(15, 23, 42, .15); }
@media (prefers-reduced-motion: reduce) {
    .nx-anim-fade, .nx-anim-slide-up, .nx-anim-slide-left, .nx-anim-zoom { animation: none; }
}
.cms-gallery-item { margin: 0; }
.cms-gallery-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.cms-gallery-empty { color: #6b7280; font-style: italic; padding: 1rem; border: 1px dashed #d1d5db; border-radius: 8px; text-align: center; }

.cms-module-unknown { color: #b91c1c; background: #fef2f2; padding: .75rem; border-radius: 8px; }
.cms-notfound { text-align: center; padding: 4rem 1rem; }
.cms-notfound h1 { font-size: 4rem; margin: 0; }

/* ===== NaxanCms admin ===== */
.cms-admin { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.cms-admin table { width: 100%; }
.cms-badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.cms-badge-draft { background: #fef9c3; color: #854d0e; }
.cms-badge-scheduled { background: #dbeafe; color: #1e40af; }
.cms-badge-published { background: #dcfce7; color: #166534; }
.cms-badge-archived { background: #e5e7eb; color: #374151; }
.cms-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.cms-editor-grid { display: grid; grid-template-columns: auto 2fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 800px) { .cms-gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== MOBIL — a strukturális (/xadmin) kanvasz telefonon =====
   A mért gond: a rács `auto 1fr` maradt, a grid-elem pedig alapból NEM zsugorodik a
   tartalma min-content szélessége alá (`min-width: auto`). Ezért 390 px-es képernyőn a
   kanvasz 403 px, a jobb panel 494 px lett, és 508 px-ig kilógott — vagyis a felület egy
   része egyszerűen elérhetetlen volt. A `min-width: 0` az, ami a zsugorodást engedélyezi. */
@media (max-width: 800px) {
    .cms-editor-grid { grid-template-columns: 1fr; }
    .cms-editor-grid > * { min-width: 0; }

    /* Az ikon-sáv telefonon vízszintes eszköz-csík a kanvasz fölött. */
    .cms-rail { position: static; flex-direction: row; overflow-x: auto; margin-bottom: .6rem; }
    .cms-rail-btn { flex: 0 0 auto; width: auto; min-width: 60px; }

    /* A jobb panel a kanvasz alá kerül, nem ragad. */
    .cms-side-panel { position: static; grid-column: 1 / -1; }

    /* A 12-es rács telefonon egymás alá tördel — 180 px-es minimum itt csak kilógást okozna. */
    .xa-grid-col { flex: 1 1 100%; min-width: 0; }
    .cms-palette2-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Bal ikon-sáv (közös alap #1) — SP-PB bal széle. */
.cms-rail { position: sticky; top: .5rem; display: flex; flex-direction: column; gap: .3rem;
    background: #0f172a; border-radius: 12px; padding: .4rem; }
.cms-rail-btn { display: flex; flex-direction: column; align-items: center; gap: .1rem; width: 58px;
    border: 0; background: transparent; color: #cbd5e1; border-radius: 9px; padding: .5rem .2rem;
    cursor: pointer; font-size: .62rem; font-weight: 600; transition: background .12s, color .12s; }
.cms-rail-btn i { font-size: 1.15rem; }
.cms-rail-btn:hover { background: #1e293b; color: #fff; }
.cms-rail-btn.is-active { background: #4f46e5; color: #fff; }
@media (max-width: 800px) { .cms-side-panel { grid-column: 1 / -1; } }

/* Layout-preset lista (bal sáv Layoutok) + média-rács (bal sáv Média). */
.cms-layout-presets { display: flex; flex-direction: column; gap: .4rem; }
.cms-layout-preset { display: flex; align-items: center; gap: .5rem; border: 1px solid #e5e7eb; border-radius: 8px; padding: .4rem .5rem; font-size: .8rem; }
.cms-media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin-top: .6rem; }
.cms-media-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; border: 1px solid #e5e7eb; }
.cms-wysiwyg-toolbar { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: .35rem; }
.cms-wysiwyg-toolbar button { border: 1px solid #d1d5db; background: #fff; border-radius: 6px; padding: .2rem .5rem; cursor: pointer; }
.cms-wysiwyg-surface { min-height: 160px; border: 1px solid #d1d5db; border-radius: 8px; padding: .6rem; background: #fff; }
/* A modul-kártya az SPPB „addon" megfelelője: alap-árnyékkal fizikai lapként ül a kanvaszon,
   hoverre magasabbra emelkedik (SPPB shadows.addon → shadows.addonHover). */
.cms-module-card { border: 1px solid #dfe3ee; border-radius: 6px; padding: .5rem; margin-bottom: .45rem; background: #fff;
    box-shadow: var(--nx-shadow-el, 0 1px 2px rgba(2, 11, 83, .15));
    transition: border-color .12s ease, box-shadow .12s ease; }
.cms-module-card:hover { border-color: #a7b3d1; box-shadow: var(--nx-shadow-el-hover, 0 3px 6px rgba(2, 11, 83, .1)); }
.cms-module-card-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .4rem;
    font-size: .82rem; min-height: 22px; }

/* ===== NaxanCms admin chrome ===== */
.cms-admin-topbar {
    display: flex; align-items: center; gap: 1.25rem;
    background: #111827; color: #f9fafb; padding: .6rem 1.25rem;
}
.cms-admin-brand a { color: #fff; font-weight: 700; text-decoration: none; }
.cms-admin-nav { display: flex; gap: 1rem; flex: 1; }
.cms-admin-nav a { color: #d1d5db; text-decoration: none; }
.cms-admin-nav a:hover { color: #fff; }
.cms-admin-logout button { background: transparent; border: 1px solid #4b5563; color: #f9fafb; border-radius: 6px; padding: .25rem .7rem; cursor: pointer; }

.cms-field { display: block; margin-bottom: .6rem; font-size: .9rem; font-weight: 600; }
.cms-field input, .cms-field select, .cms-field textarea { font-weight: 400; }
.cms-message { color: #059669; font-weight: 600; }

.cms-side-panel { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem; align-self: start; position: sticky; top: 1rem; }
.cms-side-panel h3 { font-size: 1rem; margin: .5rem 0; }
.cms-publish-actions { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .75rem; }
.cms-revisions { font-size: .82rem; color: #4b5563; padding-left: 1rem; }

.cms-actions { display: inline-flex; gap: .25rem; flex-wrap: wrap; }
.cms-actions .btn { padding: .1rem .45rem; }

/* ===== BE-CANVAS-1: kanvasz nesting-hierarchia (SPPB-szintű vizuális rend) =====
   Négy szint — zóna → section → sor → oszlop. A mélységet a beágyazás, a halvány
   háttér-árnyalat és egy diszkrét szint-chip adja, NEM vastag keretek. Hoverre csak a
   LEGBELSŐ szint emelkedik ki (`:has(...)` visszavonja a szülő kiemelését), így nem
   világít egyszerre négy egymásba ágyazott doboz. */
.cms-canvas {
    --nx-lvl-sec: #4f46e5;                          /* section — indigó  */
    --nx-lvl-row: #0891b2;                          /* sor      — cián   */
    --nx-lvl-col: #94a3b8;                          /* oszlop   — szürke */

    /* Keret- és árnyék-skála az SP Page Builder BE editorának token-készletéről
       (a React-bundle theme objektuma: `stroke.neutral` #D3D7EB, `shadows.card`,
       `shadows.addon`, `shadows.addonHover`). A kék árnyalatú keret és a kékes
       tónusú árnyék az, amitől az SPPB kanvasza „mélynek" hat a lapos szürke
       helyett. A rádiuszok az SPPB skálájára illeszkednek (2/3/4/5/6/8/10/14…) —
       szintenként csökkenő, így a beágyazás geometriája is olvasható. */
    --nx-line: #d3d7eb;                             /* SPPB stroke.neutral      */
    --nx-line-inner: #e4e7f0;                       /* beljebb lévő szintek     */
    --nx-line-soft: #e8eaf2;                        /* elválasztó vonal         */
    --nx-shadow-card: 0 2px 3px rgba(17, 18, 19, .05), 0 0 1px rgba(17, 18, 19, .25);
    --nx-shadow-el: 0 1px 2px rgba(2, 11, 83, .15);
    --nx-shadow-el-hover: 0 3px 6px rgba(2, 11, 83, .1);
}

/* Szint-chip + fejléc-tipográfia (mind a négy szinten ugyanaz a rács). */
.cms-lvl { display: inline-flex; align-items: center; height: 17px; padding: 0 .38rem; border-radius: 4px;
    font-size: .63rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    background: #eef1f6; color: #5b6478; white-space: nowrap; }
.cms-lvl--zone { background: transparent; color: #94a3b8; padding: 0; }
.cms-lvl--sec { background: #eef2ff; color: var(--nx-lvl-sec, #4f46e5); }
.cms-lvl--row { background: #e2f6fb; color: #0e7490; }
/* Az oszlop-chip FEHÉR háttéren ül (a többi színezett sávon) — a korábbi #f8fafc/#94a3b8
   párost gyakorlatilag nem lehetett elolvasni. */
.cms-lvl--col { background: #eef1f6; color: #5b6478; }
.cms-head-id { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.cms-head-name { font-size: .88rem; font-weight: 600; color: #1e293b;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-head-meta { font-size: .72rem; color: #94a3b8; white-space: nowrap; }
/* Kibontott stílus-panel egy szinten belül: a fejléchez igazított térköz. */
.cms-lvl-panel { padding: .5rem .6rem; border-bottom: 1px solid var(--nx-line-soft, #f1f5f9); }

/* 1. szint — ZÓNA: nem doboz, csak egy halk szekció-cím vonallal. */
.cms-zone-editor { margin-bottom: 1.35rem; }
.cms-zone-head { display: flex; align-items: center; gap: .45rem; padding-bottom: .38rem; margin-bottom: .6rem;
    border-bottom: 1px solid var(--nx-line-soft, #f1f5f9); }
.cms-zone-head strong { font-size: .82rem; font-weight: 700; color: #475569; }
.cms-zone-key { font-size: .68rem; color: #94a3b8; background: #f8fafc; border-radius: 4px; padding: 0 .3rem; }
.cms-zone-count { margin-left: auto; font-size: .72rem; color: #94a3b8; }

/* 2. szint — SECTION: fehér kártya, hajszálnyi árnyék; a fejléc önálló sáv. */
.cms-section-block { border: 1px solid var(--nx-line, #d3d7eb); border-radius: 10px; padding: 0;
    margin-bottom: .35rem; background: #fff; box-shadow: var(--nx-shadow-card);
    transition: border-color .12s ease, box-shadow .12s ease; }
.cms-section-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    min-height: 34px; padding: .4rem .6rem; background: #fcfdfe;
    border-bottom: 1px solid var(--nx-line-soft, #e8eaf2); border-radius: 10px 10px 0 0; }
.cms-section-canvas { padding: .6rem; }
.cms-section-block:hover { border-color: #a7b3d1; box-shadow: var(--nx-shadow-el-hover); }
.cms-section-block:has(.xa-grid-row:hover) { border-color: var(--nx-line, #d3d7eb); box-shadow: var(--nx-shadow-card); }

/* 3. szint — SOR: halvány, süllyesztett sáv a section-kártyán belül. */
.xa-grid-row { border: 1px solid var(--nx-line-inner, #e4e7f0); border-radius: 8px; padding: .4rem; margin-bottom: .2rem;
    background: #f6f6f7; transition: border-color .12s ease, background .12s ease; }
.xa-grid-row-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    min-height: 24px; margin-bottom: .4rem; }
.xa-grid-row:hover { border-color: #cfe7ef; background: #f0f4fa; }
.xa-grid-row:has(.xa-grid-col:hover) { border-color: var(--nx-line-inner, #e4e7f0); background: #f6f6f7; }

/* 4. szint — OSZLOP: újra fehér (a modulok háttere), így a mélység váltakozó.
   Az oszlopok közti vízszintes térközt az ejtő-vonalak adják (BE-CANVAS-3), ezért itt
   `column-gap: 0` — a 12-es rács alapmérete a vonalak fix 6 px-ét vonja le. */
.xa-grid-cols { display: flex; flex-wrap: wrap; column-gap: 0; row-gap: .45rem; }
.xa-grid-col { flex: 1 1 calc(var(--cms-col-w, 12) / 12 * 100% - 12px); min-width: 180px;
    border: 1px solid var(--nx-line-inner, #e4e7f0); border-radius: 6px; padding: .4rem; background: #fff;
    transition: border-color .12s ease, box-shadow .12s ease; }
.xa-grid-col-head { display: flex; justify-content: space-between; align-items: center; gap: .3rem;
    min-height: 22px; margin-bottom: .35rem; font-size: .78rem; }
.xa-grid-col:hover { border-color: #a7b3d1; box-shadow: var(--nx-shadow-el); }
.cms-col-w { font-size: .68rem; color: #64748b; background: #f1f5f9; border-radius: 4px; padding: 0 .3rem; }

/* Sor-hozzáadó sáv: a section alján, szaggatott elválasztóval — nem versenyez a tartalommal. */
.xa-grid-addrow { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
    margin: .5rem 0 0; padding-top: .45rem; border-top: 1px dashed #eceff4; }

/* ===== BE-CANVAS-2: strukturális vezérlők hover-reveal + három-pont menü =====
   A kanvasz alaphelyzetben a TARTALMAT mutatja: a szint-vezérlők csak akkor jelennek meg,
   amikor az egér az adott szint fölött van (opacity → nincs layout-ugrás). A ritkán használt
   műveletek (fel/le, duplikál, törlés, stílus) a három-pont menü mögé kerültek. */
.cms-lvl-actions { opacity: 0; pointer-events: none; transition: opacity .12s ease; }

/* Csak a LEGBELSŐ hoverelt szint mutatja a vezérlőit — a `:not(:has(...))` elnyomja a szülőt,
   így nem jelenik meg egyszerre a section-, a sor- és az oszlop-eszköztár. Billentyűzet-
   navigációnál a fókuszolt szint mindig látszik. */
.cms-section-block:hover:not(:has(.xa-grid-row:hover)) > .cms-section-head > .cms-lvl-actions,
.cms-section-head:focus-within > .cms-lvl-actions,
.xa-grid-row:hover:not(:has(.xa-grid-col:hover)) > .xa-grid-row-head > .cms-lvl-actions,
.xa-grid-row-head:focus-within > .cms-lvl-actions,
.xa-grid-col:hover:not(:has(.cms-module-card:hover)) > .xa-grid-col-head > .cms-lvl-actions,
.xa-grid-col-head:focus-within > .cms-lvl-actions { opacity: 1; pointer-events: auto; }

/* Nyitott menü mellett a szint-eszköztár nem tűnhet el a kurzor alól. */
.cms-lvl-actions:has(.cms-kebab.is-open) { opacity: 1; pointer-events: auto; }

/* Modul-hozzáadó sáv: oszloponként egy — hoverre kerül elő, hogy üres oszlop se legyen zsúfolt. */
.xa-grid-col .cms-add-module { opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.xa-grid-col:hover .cms-add-module,
.xa-grid-col:focus-within .cms-add-module { opacity: 1; pointer-events: auto; }

/* Érintős eszközön nincs hover — ott minden vezérlő végig látszik. */
@media (hover: none) {
    .cms-lvl-actions,
    .xa-grid-col .cms-add-module { opacity: 1; pointer-events: auto; }
}

/* Három-pont ("kebab") menü. A háttér-réteg fogja a kívülre kattintást (JS nélkül zár). */
.cms-kebab { position: relative; display: inline-flex; }
.cms-kebab-btn { padding: .1rem .4rem; line-height: 1.1; font-weight: 700; letter-spacing: .08em; }
.cms-kebab.is-open .cms-kebab-btn { background: #eef2ff; border-color: #c7d2fe; color: #4f46e5; }
.cms-kebab-backdrop { position: fixed; inset: 0; z-index: 40; background: transparent; }
/* Menü-árnyék: az SPPB `shadows.popover` kétrétegű, halkabb változata — a korábbi
   egyrétegű, sötét árnyék „ráült" a kanvaszra. */
.cms-kebab-menu { position: absolute; top: calc(100% + .3rem); right: 0; z-index: 41; min-width: 178px;
    display: flex; flex-direction: column; padding: .25rem; background: #fff;
    border: 1px solid #e2e8f0; border-radius: 8px;
    box-shadow: 0 6px 22px rgba(17, 18, 19, .08), 0 4px 10px rgba(17, 18, 19, .1); }
.cms-kebab-menu.is-left { right: auto; left: 0; }
.cms-kebab-item { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
    border: 0; background: none; border-radius: 6px; padding: .34rem .5rem; cursor: pointer;
    font-size: .8rem; color: #334155; white-space: nowrap; }
.cms-kebab-item > span:first-child { width: 1em; text-align: center; color: #94a3b8; }
.cms-kebab-item:hover { background: #f1f5f9; color: #0f172a; }
.cms-kebab-item.is-active { color: #4f46e5; font-weight: 600; }
.cms-kebab-item--danger { color: #b91c1c; }
.cms-kebab-item--danger > span:first-child { color: #fca5a5; }
.cms-kebab-item--danger:hover { background: #fef2f2; color: #991b1b; }
.cms-kebab-sep { height: 1px; margin: .25rem .3rem; background: #f1f5f9; }

/* ===== BE-CANVAS-3: drag-fogantyúk + ejtő-vonalak =====
   A húzás a fejlécről indul (a fejléc a draggable, nem a teljes blokk) — így egy kattintás
   a tartalomban soha nem indít véletlen húzást, és a beágyazott szintek nem versengenek
   egymással. A fejléc akciósávja `draggable="false"`, hogy a gombokra kattintás ne kezdjen húzni. */
/* A fogantyú Bootstrap-ikon (bi-grip-vertical) — a braille-pont glifa a legtöbb rendszer-
   betűtípuson vékony és inkonzisztens volt, az ikon minden platformon ugyanaz. */
.cms-grip { display: inline-flex; align-items: center; color: #a7b3d1; font-size: .9rem; line-height: 1;
    margin-right: -.1rem; opacity: 0; transition: opacity .12s ease, color .12s ease; }
.cms-section-head, .xa-grid-row-head, .xa-grid-col-head { cursor: grab; }
.cms-section-head:active, .xa-grid-row-head:active, .xa-grid-col-head:active { cursor: grabbing; }
/* Az akciósáv nem húzható (draggable="false"), ezért ott a kurzor se ígérjen húzást. */
.cms-lvl-actions, .cms-module-card .cms-actions { cursor: default; }
/* A fogantyú ugyanazt a „legbelső szint” szabályt követi, mint a vezérlők. */
.cms-section-block:hover:not(:has(.xa-grid-row:hover)) > .cms-section-head .cms-grip,
.cms-section-head:focus-within .cms-grip,
.xa-grid-row:hover:not(:has(.xa-grid-col:hover)) > .xa-grid-row-head .cms-grip,
.xa-grid-row-head:focus-within .cms-grip,
.xa-grid-col:hover:not(:has(.cms-module-card:hover)) > .xa-grid-col-head .cms-grip,
.xa-grid-col-head:focus-within .cms-grip,
.cms-module-card:hover .cms-grip,
.cms-module-card:focus-within .cms-grip { opacity: 1; }
/* Nyitott menü mellett a fogantyú se tűnjön el a kurzor alól (mint a vezérlőknél). */
.cms-section-head:has(.cms-kebab.is-open) .cms-grip,
.xa-grid-row-head:has(.cms-kebab.is-open) .cms-grip,
.xa-grid-col-head:has(.cms-kebab.is-open) .cms-grip,
.cms-module-card:has(.cms-kebab.is-open) .cms-grip { opacity: 1; }
.cms-section-head:hover .cms-grip, .xa-grid-row-head:hover .cms-grip,
.xa-grid-col-head:hover .cms-grip, .cms-module-card-head:hover .cms-grip { color: #4b5675; }
@media (hover: none) { .cms-grip { opacity: 1; } }

/* A húzott elem elhalványul (mint a modul-kártyánál). */
.cms-section-block.is-dragging, .xa-grid-row.is-dragging, .xa-grid-col.is-dragging { opacity: .45; }

/* Ejtő-vonal: alaphelyzetben LÁTHATATLAN, de helyet foglal — így a húzás kezdetén nem ugrik
   meg a kanvasz elrendezése. Húzás közben szaggatott sávvá élesedik, a célzott vonal tömör. */
.cms-drop-line { position: relative; height: 8px; margin: -1px 0; border-radius: 4px;
    transition: background .1s ease, box-shadow .1s ease; }
/* Húzás közben a találati felület elrendezés-változás NÉLKÜL nő 20 px-re — a 8 px-es
   vonalat egérrel nehéz lenne eltalálni, a magasság növelése viszont megugratná a kanvaszt. */
.cms-drop-line.is-armed::before { content: ""; position: absolute; inset: -6px 0; }
.cms-drop-line.is-armed { background: repeating-linear-gradient(90deg, #cbd5e1 0 6px, transparent 6px 12px);
    background-size: auto 2px; background-repeat: repeat-x; background-position: center; }
.cms-drop-line.is-over { background: var(--nx-color-accent, #4f46e5); box-shadow: 0 0 0 3px rgba(79, 70, 229, .16); }
/* Oszlopok között függőleges vonal (a .xa-grid-cols flex-sávjában). */
.cms-drop-line--v { height: auto; width: 8px; margin: 0 -1px; align-self: stretch; flex: 0 0 auto; }
.cms-drop-line--v.is-armed::before { inset: 0 -6px; }
.cms-drop-line--v.is-armed { background: repeating-linear-gradient(0deg, #cbd5e1 0 6px, transparent 6px 12px);
    background-size: 2px auto; background-repeat: repeat-y; background-position: center; }
.cms-drop-line--v.is-over { background: var(--nx-color-accent, #4f46e5); }

/* Kategorizált addon-paletta (közös alap #2) — a régi zsúfolt felső katalógus helyett. */
.cms-palette-card { position: sticky; top: .5rem; }
.cms-palette2-tabs { display: flex; gap: .15rem; border-bottom: 2px solid #e2e8f0; margin-bottom: .6rem; }
.cms-ptab { border: 0; background: none; padding: .4rem .7rem; cursor: pointer; font-size: .85rem; font-weight: 600;
    color: #64748b; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.cms-ptab:hover { color: #1e293b; }
.cms-ptab.is-active { color: #4f46e5; border-bottom-color: #4f46e5; }
.cms-palette2-search { position: relative; display: flex; align-items: center; margin-bottom: .7rem; }
.cms-palette2-search .bi-search { position: absolute; left: .55rem; color: #94a3b8; font-size: .85rem; pointer-events: none; }
.cms-palette2-search .xa-input { padding-left: 1.9rem; width: 100%; }
.cms-psearch-clear { position: absolute; right: .4rem; border: 0; background: none; cursor: pointer; color: #94a3b8; }
.cms-palette2-cat { margin-bottom: .8rem; }
.cms-palette2-catname { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: #94a3b8; margin-bottom: .4rem; display: flex; align-items: center; gap: .4rem; }
.cms-palette2-count { background: #eef2ff; color: #4f46e5; border-radius: 999px; padding: 0 .4rem; font-size: .68rem; }
.cms-palette2-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; }
.cms-palette2-item { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center;
    padding: .55rem .35rem; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; cursor: grab;
    font-size: .74rem; color: #334155; transition: border-color .12s, box-shadow .12s, transform .12s; }
.cms-palette2-item:hover { border-color: #4f46e5; box-shadow: 0 4px 12px rgba(79, 70, 229, .12); transform: translateY(-1px); }
.cms-palette2-item i { font-size: 1.15rem; color: #4f46e5; }
.cms-palette2-item.is-dragging { opacity: .5; }
.cms-palette2-empty { color: #94a3b8; font-size: .85rem; padding: .6rem 0; }
.cms-palette2-zone { margin-bottom: .6rem; }
.cms-palette2-seclist { display: flex; flex-direction: column; gap: .35rem; }
.cms-palette2-sec { display: flex; justify-content: space-between; align-items: center; gap: .4rem;
    border: 1px solid #e5e7eb; border-radius: 8px; padding: .4rem .5rem; font-size: .82rem; flex-wrap: wrap; }
.cms-palette2-secname { font-weight: 600; }

/* Kanvasz-declutter (közös alap): a modul-kártya akciógombjai (Elrejt/fel/le/Szerkeszt/duplikál/Töröl)
   alapból rejtve, csak a kártya hoverére VAGY billentyűzet-fókuszra jelennek meg. Nincs layout-ugrás
   (opacity + pointer-events). Érintős eszközön (nincs hover) mindig látszanak. */
.cms-module-card .cms-actions { opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.cms-module-card:hover .cms-actions,
.cms-module-card:focus-within .cms-actions,
.cms-module-card .cms-actions:has(.cms-kebab.is-open) { opacity: 1; pointer-events: auto; }
@media (hover: none) { .cms-module-card .cms-actions { opacity: 1; pointer-events: auto; } }
.cms-add-module, .cms-add-section, .cms-new-section { display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; }
.cms-config-editor { border-top: 1px dashed #d1d5db; margin-top: .5rem; padding-top: .5rem; }
.cms-config-actions { display: flex; gap: .5rem; margin-top: .5rem; }

/* ===== Szerkesztő-mód kapcsoló (Struktúra ←→ Frontend) + a FE-vászon váza =====
   A kapcsoló szegmentált vezérlő: egyértelműen látszik, hogy EGY oldalnak két
   szerkesztő-nézete van, nem két külön funkció. */
.cms-mode-switch { display: inline-flex; padding: 2px; background: #eef1f6;
    border: 1px solid var(--nx-line, #d3d7eb); border-radius: 8px; }
.cms-mode-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem;
    border-radius: 6px; font-size: .82rem; font-weight: 600; color: #5b6478; text-decoration: none;
    white-space: nowrap; transition: background .12s ease, color .12s ease, box-shadow .12s ease; }
.cms-mode-btn:hover { color: #1e293b; }
.cms-mode-btn.is-active { background: #fff; color: var(--nx-color-accent, #4f46e5);
    box-shadow: 0 1px 2px rgba(2, 11, 83, .15); }
.cms-mode-tag { padding: 0 .3rem; border-radius: 4px; background: #fef3c7; color: #92400e;
    font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* FE-vászon váz: ugyanaz az eszköz-keret, mint a strukturális kanvaszon, üres állapottal. */
.cms-fe-canvas { min-height: 320px; display: flex; align-items: center; justify-content: center; }
.cms-fe-canvas.cms-canvas--d { border: 1px dashed var(--nx-line, #d3d7eb); border-radius: 10px; background: #fcfdfe; }
.cms-fe-empty { max-width: 460px; padding: 2.5rem 1.25rem; text-align: center; }
.cms-fe-empty i { font-size: 1.8rem; color: var(--nx-color-accent, #4f46e5); }
.cms-fe-empty h3 { font-size: 1rem; margin: .6rem 0 .4rem; }
.cms-fe-empty p { font-size: .86rem; color: #475569; margin: 0 0 .5rem; }

/* FE szerkesztő-mód sávja a PUBLIKUS lapon (a szerkesztő-sziget fejléce, FE0).
   A tartalom fölött ül, a tartalom-DOM-ot nem érinti — a szerkesztő-chrome a FE1-től
   overlay-rétegre költözik, ez a sáv marad a mód állandó kerete. */
.cms-fe-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .6rem;
    flex-wrap: wrap; padding: .45rem .9rem; background: #0f172a; color: #e2e8f0;
    box-shadow: 0 1px 2px rgba(2, 11, 83, .15); }
.cms-fe-bar .cms-lvl { background: #4f46e5; color: #fff; }
.cms-fe-bar-title { font-size: .9rem; font-weight: 600; color: #fff; }
.cms-fe-bar-state { font-size: .78rem; }
.cms-fe-live { color: #4ade80; font-weight: 600; }
.cms-fe-idle { color: #fbbf24; }
/* A gomb-sáv SOHA nem tágíthatja a layoutot. Enélkül a hat gomb egy sorban 473 px-et kért,
   amitől a telefon 390 px helyett 511 px-es layout-viewportot vett fel, és az EGÉSZ oldal
   kizoomolt — így minden apró és használhatatlan lett. A `min-width: 0` kell, mert a flex-elem
   alapból a tartalma alá nem zsugorodik. */
.cms-fe-bar-actions { margin-left: auto; display: inline-flex; gap: .35rem;
    flex-wrap: wrap; min-width: 0; max-width: 100%; }
.cms-fe-bar--loading { justify-content: center; font-size: .85rem; }
.cms-fe-sel { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .8rem; }
.cms-fe-sel-name { color: #cbd5e1; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-fe-hint { color: #94a3b8; font-size: .78rem; }
.cms-fe-sel-chip { padding: 0 .38rem; border-radius: 4px; font-size: .62rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; background: #334155; color: #e2e8f0; }
.cms-fe-sel-chip--section { background: #4f46e5; color: #fff; }
.cms-fe-sel-chip--row { background: #0e7490; color: #fff; }
.cms-fe-sel-chip--column { background: #475569; color: #fff; }
.cms-fe-sel-chip--module { background: #047857; color: #fff; }
.cms-fe-bar .xa-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.cms-fe-bar .xa-btn:hover { background: #334155; color: #fff; }

/* ===== FE1 kijelölés-overlay =====
   KÜLÖN RÉTEG a tartalom felett: a szerkesztő soha nem ír a tartalom-DOM-ba (terv §3.1/3.).
   A réteg DOKUMENTUM-koordinátákkal dolgozik (a JS a <body> végére emeli), ezért a görgetés
   ingyen helyes — a böngésző mozgatja a kereteket a tartalommal, nincs scroll-figyelő.
   `pointer-events: none`: a keret soha nem veszi el a kattintást a tartalom elől. */
.cms-fe-layer { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 25; pointer-events: none; }
.cms-fe-box { position: absolute; top: 0; left: 0; pointer-events: none; border-radius: 3px;
    will-change: transform, width, height; }
.cms-fe-box--hover { border: 1px dashed rgba(79, 70, 229, .55); background: rgba(79, 70, 229, .05); }
.cms-fe-box--select { border: 2px solid var(--nx-color-accent, #4f46e5);
    box-shadow: 0 0 0 1px #fff, 0 0 0 4px rgba(79, 70, 229, .18); }
/* Szint-címke a kijelölés bal felső sarkában — nem takarja a tartalmat, mert kilóg fölé. */
.cms-fe-box--select .cms-fe-box-tag { position: absolute; top: -17px; left: -2px; padding: 0 .35rem;
    border-radius: 3px 3px 0 0; background: var(--nx-color-accent, #4f46e5); color: #fff;
    font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    line-height: 17px; white-space: nowrap; }
.cms-fe-box--hover .cms-fe-box-tag { display: none; }
/* Szintenkénti árnyalat, egyezik a sáv chipjeivel. */
.cms-fe-box--sec.cms-fe-box--select { border-color: #4f46e5; }
.cms-fe-box--row.cms-fe-box--select { border-color: #0e7490; }
.cms-fe-box--row.cms-fe-box--select .cms-fe-box-tag { background: #0e7490; }
.cms-fe-box--col.cms-fe-box--select { border-color: #475569; }
.cms-fe-box--col.cms-fe-box--select .cms-fe-box-tag { background: #475569; }
.cms-fe-box--mod.cms-fe-box--select { border-color: #047857; }
.cms-fe-box--mod.cms-fe-box--select .cms-fe-box-tag { background: #047857; }

/* ===== FE2 inspector a valódi lapon =====
   Ugyanazok a szerkesztő-komponensek, mint a BE-módban (fül-inspector) — csak a keret más:
   itt jobb oldali, rögzített panel, hogy a lap a saját viewportjában maradjon. */
.cms-fe-inspector { position: fixed; top: 44px; right: 0; bottom: 0; width: 340px; z-index: 26;
    overflow-y: auto; padding: .75rem .85rem 2rem; background: #fff;
    border-left: 1px solid var(--nx-line, #d3d7eb);
    box-shadow: -6px 0 22px rgba(17, 18, 19, .08); }
.cms-fe-inspector .cms-inspector-head { position: sticky; top: 0; background: #fff; z-index: 2;
    padding-bottom: .5rem; border-bottom: 1px solid #eef2f6; margin-bottom: .6rem; }
.cms-fe-inspector .cms-inspector-head h3 { display: flex; align-items: center; gap: .4rem;
    font-size: .95rem; margin: 0; min-width: 0; }
.cms-fe-insp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-fe-inline-hint { display: flex; align-items: flex-start; gap: .4rem; font-size: .78rem;
    color: #3730a3; background: #eef2ff; border-radius: 6px; padding: .4rem .5rem; margin: 0 0 .6rem; }
/* A lap kap helyet a panelnak, hogy a tartalom ne kerüljön alá — TISZTÁN CSS-ből
   (`:has()`), hogy a tartalom-elem markupja ne függjön a szerkesztő állapotától. */
@media (min-width: 900px) { body:has(.cms-fe-inspector) .cms-page { padding-right: 356px; } }
/* A mobil (alsó-lap) változatot lásd lentebb, a MOBIL blokkban. */
.cms-fe-save { font-size: .74rem; color: #4ade80; }
/* Lap-állapot a szerkesztő-sávban: a szerző LÁSSA, él-e a lap, mielőtt bármit tesz vele. */
.cms-fe-status { font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: .1rem .4rem; border-radius: 4px; background: #334155; color: #e2e8f0; }
.cms-fe-status--published { background: #166534; color: #dcfce7; }
.cms-fe-status--draft { background: #854d0e; color: #fef9c3; }
.cms-fe-status--scheduled { background: #1e40af; color: #dbeafe; }
.cms-fe-status--archived { background: #374151; color: #e5e7eb; }

/* FE4: jelenlét, elem-fogás és ütközés visszajelzése a szerkesztő-sávban. */
.cms-fe-peers { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem;
    color: #cbd5e1; background: #1e293b; border-radius: 999px; padding: .1rem .5rem; }
.cms-fe-held { font-size: .74rem; color: #fbbf24; }
.cms-fe-conflict { font-size: .76rem; font-weight: 600; color: #fca5a5;
    background: rgba(185, 28, 28, .25); border-radius: 5px; padding: .1rem .45rem; }
/* Ugyanez az inspectorban (BE és FE közös komponens). */
.cms-config-conflict { display: flex; flex-direction: column; gap: .15rem; margin: .5rem 0;
    padding: .5rem .6rem; border-radius: 7px; background: #fef2f2; border: 1px solid #fecaca;
    color: #991b1b; font-size: .78rem; }

/* Helyben szerkesztett szöveg: halk jelzés, hogy hol tart a kurzor. A `contenteditable` az
   EGYETLEN dolog, amit a szerkesztő a tartalom-DOM-ra tesz, és csak a szerkesztés idejére. */
.cms-fe-editing { outline: 2px dashed rgba(4, 120, 87, .5); outline-offset: 3px; border-radius: 3px; }
.cms-fe-editing:focus { outline: 2px solid #047857; }

/* ===== FE3 szerkesztő-chrome: elem-eszköztár + beszúró-pont =====
   A markup Blazoré (valódi @onclick, valódi szolgáltatás-hívások), a pozicionálás a
   fe-overlay.js-é. Mindkettő a <body> alatt ül, dokumentum-koordinátákkal — a
   tartalom-DOM-ba semmi nem kerül. Minden művelet gombbal elérhető: húzás sehol nem
   feltétel (WCAG 2.5.7). */
.cms-fe-toolbar { position: absolute; top: 0; left: 0; z-index: 27; display: none; align-items: center;
    gap: 1px; padding: 2px; border-radius: 7px; background: #0f172a;
    box-shadow: 0 6px 22px rgba(17, 18, 19, .18); }
.cms-fe-tb { border: 0; background: transparent; color: #e2e8f0; border-radius: 5px; cursor: pointer;
    font-size: .82rem; line-height: 1; padding: .3rem .45rem; }
.cms-fe-tb:hover { background: #334155; color: #fff; }
.cms-fe-tb--danger:hover { background: #b91c1c; color: #fff; }
.cms-fe-tb-label { color: #94a3b8; font-size: .62rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; padding: 0 .35rem; }

.cms-fe-insert { position: absolute; top: 0; left: 0; z-index: 27; display: none;
    flex-direction: column; align-items: center; }
.cms-fe-plus { display: inline-flex; align-items: center; gap: .3rem; border: 0; cursor: pointer;
    padding: .2rem .6rem; border-radius: 999px; background: var(--nx-color-accent, #4f46e5); color: #fff;
    font-size: .72rem; font-weight: 600; box-shadow: 0 2px 8px rgba(79, 70, 229, .35); opacity: .55;
    transition: opacity .12s ease, transform .12s ease; }
.cms-fe-insert:hover .cms-fe-plus, .cms-fe-insert.is-open .cms-fe-plus { opacity: 1; transform: scale(1.03); }
.cms-fe-plus span { font-size: .95rem; line-height: 1; }

.cms-fe-picker { margin-top: .35rem; width: 320px; max-height: 320px; overflow-y: auto; padding: .5rem;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
    box-shadow: 0 6px 22px rgba(17, 18, 19, .12), 0 4px 10px rgba(17, 18, 19, .1); }
.cms-fe-picker .cms-palette2-grid { grid-template-columns: repeat(3, 1fr); }
.cms-fe-picker .cms-palette2-item { cursor: pointer; }

/* ===== FE5 csiszolás =====
   Vizuálisan rejtett, de képernyőolvasónak elérhető live-régió ([K54]). NEM display:none —
   az kiesne a kisegítő fából, és pont a lényeg veszne el. */
.nx-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* [K68] üres állapot: az üres lapon nincs mit kijelölni, ezért explicit útválasztó kell. */
.cms-fe-empty-state { max-width: 520px; margin: 3rem auto; padding: 2rem 1.5rem; text-align: center;
    border: 1px dashed var(--nx-line, #d3d7eb); border-radius: 12px; background: #fcfdfe; }
.cms-fe-empty-state i { font-size: 2rem; color: var(--nx-color-accent, #4f46e5); }
.cms-fe-empty-state h2 { font-size: 1.1rem; margin: .6rem 0 .4rem; }
.cms-fe-empty-state p { font-size: .88rem; color: #475569; margin: 0 0 .75rem; }

/* Szerkesztő-módban az ÜRES oszlop is kapjon fogást: enélkül nulla magasságú, tehát
   kijelölhetetlen — és épp oda kellene az első elem. Kizárólag szerkesztő-módban él
   (`body:has(.cms-fe-bar)`), és tisztán CSS: a tartalom-DOM-hoz nem nyúlunk. */
body:has(.cms-fe-bar) .cms-col:not(:has(.cms-mod-wrap)) {
    min-height: 64px; border: 1px dashed #cbd5e1; border-radius: 6px; background: #fafbfc;
}

/* ===== MOBIL — a FE szerkesztő telefonon =====
   A mért gond nem apró volt: a szerkesztő-sáv gombjai egy sorban 473 px-et kértek, ezért a
   telefon 390 px helyett 511 px-es layout-viewportot vett fel, és a teljes oldal kizoomolt.
   Innentől minden méret a szerkesztő-chrome-ban explicit korlátot kap. */
.cms-fe-bar { max-width: 100vw; overflow-x: hidden; }

@media (max-width: 640px) {
    .cms-fe-bar { padding: .4rem .5rem; gap: .35rem; row-gap: .3rem; }
    .cms-fe-bar-title { font-size: .8rem; max-width: 9ch; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap; }
    /* A mód-címke helyét telefonon a tartalom kapja meg. */
    .cms-fe-bar > .cms-lvl { display: none; }
    .cms-fe-bar-actions { width: 100%; margin-left: 0; justify-content: flex-start; }
    .cms-fe-sel { width: 100%; }
    .cms-fe-sel-name { max-width: 12ch; }
    .cms-fe-picker { width: min(320px, calc(100vw - 1.5rem)); }
}

/* ÉRINTŐS eszközön a szerkesztő-gombok elérhető méretűek legyenek. A mért érték 21×23 px
   volt — a WCAG 2.5.8 minimuma 24×24, az érintés-barát cél ennél nagyobb. */
@media (pointer: coarse) {
    .cms-fe-tb { min-width: 40px; min-height: 40px; font-size: 1rem; }
    .cms-fe-bar .xa-btn, .cms-fe-bar a.xa-btn { min-height: 36px; padding-inline: .6rem; }
    .cms-fe-plus { min-height: 34px; padding-inline: .8rem; opacity: 1; }
    .cms-fe-inspector .xa-btn { min-height: 36px; }
}

/* Telefonon az inspector alsó lap: a tartalom felső fele SZABADON marad, hogy a szerkesztett
   elem látszódjon gépelés közben is. */
/* Összecsukott állapotban csak a fejléc-sáv látszik — a tartalom szabadon marad. */
.cms-fe-inspector.is-collapsed { height: auto; overflow: visible; padding-bottom: .5rem; }
.cms-fe-inspector.is-collapsed .cms-inspector-head { border-bottom: 0; margin-bottom: 0; }

@media (max-width: 899.98px) {
    .cms-fe-inspector { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: 55vh;
        border-left: 0; border-top: 1px solid var(--nx-line, #d3d7eb);
        border-radius: 12px 12px 0 0; box-shadow: 0 -6px 22px rgba(17, 18, 19, .16); }
    body:has(.cms-fe-inspector) .cms-page { padding-right: 0; padding-bottom: 56vh; }
    /* Csukott panel csak egy sávnyi helyet foglal. */
    body:has(.cms-fe-inspector.is-collapsed) .cms-page { padding-bottom: 5rem; }
}

/* „Szerkesztés itt" belépő a publikus lapon — csak jogosultnak renderelődik (szerver-oldali gát). */
.cms-fe-enter { position: fixed; right: 1rem; bottom: 1rem; z-index: 20;
    display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: 999px;
    background: #0f172a; color: #fff; text-decoration: none; font-size: .85rem; font-weight: 600;
    box-shadow: 0 6px 22px rgba(17, 18, 19, .18), 0 4px 10px rgba(17, 18, 19, .12); }
.cms-fe-enter:hover { background: var(--nx-color-accent, #4f46e5); color: #fff; }

.cms-preview-banner { background: #fef3c7; color: #92400e; padding: .6rem 1rem; text-align: center; font-size: .9rem; }

/* ===== NaxanCms media + search ===== */
.cms-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
.cms-media-card { margin: 0; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #fff; }
.cms-media-card img { width: 100%; height: 120px; object-fit: cover; display: block; }
.cms-media-card figcaption { display: flex; align-items: center; gap: .35rem; padding: .4rem; font-size: .8rem; }
.cms-media-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-reco { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; border-radius: 8px; padding: .5rem .75rem; margin-bottom: 1rem; font-size: .9rem; }
.cms-search-form { display: flex; gap: .5rem; margin-bottom: 1.25rem; }
.cms-search-form input { flex: 1; padding: .5rem .75rem; border: 1px solid #d1d5db; border-radius: 8px; }
.cms-search-results { list-style: none; padding: 0; }
.cms-search-results li { padding: .6rem 0; border-bottom: 1px solid #eee; }
.cms-search-desc { color: #6b7280; font-size: .9rem; }