/* ============================================================================================
   Hírlevél / kampány modul (2026-09-25) — a modul saját rétege az app.css tokenjeire építve.
   Konzol-elrendezés (bal sáv + kontextus-fejléc + munkaterület), VIVID gradiens-csempék, státusz-
   pasztillák, szabály-építő, blokk-szerkesztő, előnézet, riport-diagramok. Csak tokeneket használ,
   így követi a világos / sötét témát.
   ============================================================================================ */

/* Modul-tokenek (2026-09-27, TOPIC 4 — a beégetett színek helyett). A levél-előnézet VÁSZNA témát követ; a levél
   PAPÍRJA viszont mindkét témán fehér, mert a levél HTML-je fehér háttérre készül (a címzett postafiókjában is az)
   — sötét papíron a levél saját, sötét betűi olvashatatlanok lennének. Ugyanez az elv, mint az Ajánlat arculat
   előnézeténél: a dokumentum a saját tónusait viseli, nem az app témáját. */
:root {
    --nl-canvas: #e9e9ee;           /* a levél körüli vászon (előnézet, sablon-bélyegkép) — a korábbi érték */
    --nl-paper: #ffffff;            /* a levél papírja: aláírás-kártya, logó-bélyeg, előnézeti iframe */
    --nl-paper-text: #222222;
    --nl-paper-muted: #6b7280;
    --nl-paper-warn: #b45309;       /* figyelmeztető chip a papíron — a papír mindkét témán világos */
}
[data-theme="dark"] {
    --nl-canvas: var(--surface-hover);
}

.nl-muted { color: var(--text-muted); font-size: .8rem; }
.nl-error { color: var(--danger); font-size: .8rem; }
.nl-row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.nl-grow { flex: 1; }

/* ── Status pills ── */
.nl-status { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .62rem; border-radius: 20px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; border: 1px solid transparent; }
.nl-status-draft { background: color-mix(in srgb, var(--text-muted) 14%, transparent); color: var(--text-primary); }
.nl-status-ready { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.nl-status-scheduled { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.nl-status-sending { background-image: var(--grd-primary); color: #fff; }
.nl-status-paused { background: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--warning); }
.nl-status-sent { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.nl-status-cancelled { background: color-mix(in srgb, var(--text-muted) 14%, transparent); color: var(--text-muted); }
.nl-status-failed { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

/* ── KPI tiles (VIVID) ── */
.nl-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.nl-kpi { display: flex; gap: .8rem; align-items: center; padding: .85rem 1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.nl-kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background-image: var(--app-grd, var(--grd-primary)); }
.nl-kpi-ico { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1.25rem; background-image: var(--app-grd, var(--grd-primary)); box-shadow: var(--app-glow, var(--glow-primary)); flex-shrink: 0; }
.nl-kpi-body { display: flex; flex-direction: column; min-width: 0; }
.nl-kpi-value { font-size: 1.45rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.nl-kpi-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); font-weight: 700; }
.nl-kpi-sub { font-size: .74rem; color: var(--text-muted); }
.nl-kpi-bench { font-size: .7rem; font-weight: 700; margin-top: .15rem; }
.nl-kpi-bench.up { color: var(--success); }
.nl-kpi-bench.down { color: var(--warning); }

/* ── Console layout ── */
.nl-console { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; min-height: 70vh; }
.nl-console.wide { grid-template-columns: 250px minmax(0, 1fr) 420px; }
.nl-console .pc-rail { min-height: 0; }
.nl-step { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .6rem; border: 1px solid transparent; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; color: var(--text-primary); }
.nl-step:hover { background: var(--surface-hover); }
.nl-step.active { background: var(--surface); border-color: var(--border-strong); box-shadow: inset 3px 0 0 var(--accent), var(--shadow-sm); }
.nl-step-num { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; background-image: var(--grd-primary); color: #fff; flex-shrink: 0; }
.nl-step.done .nl-step-num { background-image: var(--grd-success); }
.nl-step-meta { display: flex; flex-direction: column; min-width: 0; }
.nl-step-name { font-size: .85rem; font-weight: 600; }
.nl-step-sub { font-size: .7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-work { padding: 1rem 1.1rem; overflow: auto; min-width: 0; }
.nl-side { border-left: 1px solid var(--border); background: var(--surface-2); padding: .8rem; overflow: auto; }
.nl-context { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; margin-bottom: 1rem; border-radius: 12px; background: linear-gradient(180deg, var(--surface-alt), var(--surface)); border: 1px solid var(--border); position: relative; overflow: hidden; }
.nl-context::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background-image: var(--grd-primary); }
.nl-context-ico { width: 40px; height: 40px; border-radius: 10px; background-image: var(--grd-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; box-shadow: var(--glow-primary); }
.nl-context-text { flex: 1; min-width: 0; }
.nl-context-text strong { font-size: 1.05rem; }
.nl-context-stats { display: flex; gap: 1rem; }
.nl-context-stat { text-align: center; }
.nl-context-stat b { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.nl-context-stat span { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.nl-footbar { display: flex; gap: .5rem; align-items: center; padding: .7rem 1rem; border-top: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
/* 2026-09-27 (TOPIC 4): a lábléc-sáv (Mentés / Vissza / Tovább) a konzol RÉSZE — a munkaterület-oszlop alján ül,
   nem lóg a konzol alatt a levegőben. A bal sáv és a jobb oldali előnézet a lábléc sorát is kitölti. */
.nl-console:has(> .nl-footbar) { grid-template-rows: minmax(0, 1fr) auto; }
.nl-console:has(> .nl-footbar) > .pc-rail { grid-column: 1; grid-row: 1 / span 2; }
.nl-console:has(> .nl-footbar) > .nl-side { grid-column: 3; grid-row: 1 / span 2; }
.nl-console > .nl-footbar { grid-column: 2; grid-row: 2; }
/* Rendszer-sablonnál nincs mit menteni: az üres lábléc-sáv ne rajzoljon üres csíkot. */
.nl-footbar:not(:has(*)) { display: none; }
/* A sor VÉGÉN álló kompakt színválasztó lenyílója balra nyíljon, ne lógjon ki a munkaterületből. */
.nl-work .form-row > .form-group:last-child .cpick-pop { left: auto; right: 0; }

/* ── Checklist ── */
.nl-check { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--border); margin-bottom: .35rem; background: var(--surface); }
.nl-check.ok { border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.nl-check.warn { border-color: color-mix(in srgb, var(--warning) 50%, transparent); }
.nl-check.fail { border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.nl-check i { font-size: 1rem; }
.nl-check.ok i { color: var(--success); }
.nl-check.warn i { color: var(--warning); }
.nl-check.fail i { color: var(--danger); }

/* ── Rule builder ── */
.nl-rules { display: flex; flex-direction: column; gap: .5rem; }
.nl-rules-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem; }
.nl-rules-empty { padding: .6rem .8rem; border: 1px dashed var(--border-strong); border-radius: 8px; color: var(--text-muted); font-size: .8rem; }
.nl-rule { display: grid; grid-template-columns: 1.4fr .9fr 1.6fr auto; gap: .5rem; align-items: center; padding: .45rem .55rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-alt); }
.nl-rule-pair { display: flex; gap: .4rem; align-items: center; }
.nl-rule-pair .form-input { min-width: 0; }
/* 2026-09-27: a feltétel-sor cellái zsugorodhatnak — különben egy sok-chipes értékválasztó szétfeszítette a sort. */
.nl-rule-field, .nl-rule-op, .nl-rule-value { min-width: 0; }
.nl-rules-add { padding-top: .2rem; }

/* ── Block editor ── */
.nl-be { display: grid; grid-template-columns: 240px minmax(320px, 1fr) minmax(360px, 640px); gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.nl-be-list { background: var(--surface-2); border-right: 1px solid var(--border); padding: .6rem; display: flex; flex-direction: column; gap: .3rem; overflow: auto; max-height: 720px; }
.nl-be-list-head { display: flex; justify-content: space-between; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); padding: 0 .3rem .3rem; }
.nl-be-item { display: flex; align-items: center; gap: .5rem; padding: .45rem .5rem; border-radius: 8px; border: 1px solid transparent; cursor: pointer; font-size: .82rem; }
.nl-be-item:hover { background: var(--surface-hover); }
.nl-be-item.active { background: var(--surface); border-color: var(--border-strong); box-shadow: inset 3px 0 0 var(--accent); }
.nl-be-item-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-be-item-tools { display: none; gap: .15rem; }
.nl-be-item:hover .nl-be-item-tools, .nl-be-item.active .nl-be-item-tools { display: inline-flex; }
.nl-be-item-tools .btn-icon { width: 22px; height: 22px; font-size: .7rem; }
.nl-be-add { padding-top: .4rem; }
.nl-be-props { padding: .8rem 1rem; overflow: auto; max-height: 720px; border-right: 1px solid var(--border); }
.nl-be-props-head { display: flex; align-items: center; gap: .5rem; padding-bottom: .6rem; margin-bottom: .6rem; border-bottom: 1px solid var(--border); }
.nl-be-props.form-stack > .nl-be-props-head { margin-bottom: 0; }   /* a form-stack gap-je adja a közt (2026-09-27) */
.nl-be-hint { color: var(--text-muted); padding: 2rem 1rem; text-align: center; }
.nl-be-color { display: flex; gap: .5rem; align-items: center; }
.nl-be-image { display: flex; flex-direction: column; gap: .4rem; }
.nl-be-image-tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.nl-upload { position: relative; overflow: hidden; cursor: pointer; }
.nl-upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* Közvetlenül a (flex-oszlop) .modal-body-ban álló szegmens-választó és feltöltő-gomb ne nyúljon teljes
   szélességűre (2026-09-27). */
.modal-body > .nl-seg, .modal-body > .nl-upload { align-self: flex-start; }
.nl-be-preview { background: var(--nl-canvas); padding: .6rem; }

/* ── Preview frame ── */
.nl-preview { display: flex; flex-direction: column; gap: .4rem; height: 100%; }
.nl-preview-bar { display: flex; align-items: center; gap: .5rem; }
.nl-preview-subject { flex: 1; min-width: 0; display: flex; gap: .4rem; align-items: center; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
.nl-preview-devices { display: flex; gap: .3rem; }
.nl-preview-stage { display: flex; justify-content: center; background: var(--nl-canvas); border-radius: 10px; padding: .5rem; }
.nl-preview-stage iframe { width: 100%; max-width: 660px; border: 0; background: var(--nl-paper); border-radius: 8px; box-shadow: 0 6px 22px rgba(0,0,0,.15); }
.nl-preview-stage.mobile iframe { max-width: 390px; }
.nl-preview-empty { padding: 2rem; color: var(--text-muted); }

/* ── Charts ── */
.nl-chart { position: relative; }
.nl-chart-svg { width: 100%; height: 100%; }
.nl-chart-grid { stroke: var(--border); stroke-width: 1; }
.nl-chart-bar.s1 { fill: var(--accent); }
.nl-chart-bar.s2 { fill: var(--info); }
.nl-chart-label { fill: var(--text-muted); font-size: 10px; }
.nl-chart-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); font-size: .8rem; }
.nl-chart-legend { display: flex; gap: 1rem; font-size: .72rem; color: var(--text-muted); padding-top: .2rem; }
.nl-chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; vertical-align: middle; }
.nl-chart-legend i.s1 { background: var(--accent); }
.nl-chart-legend i.s2 { background: var(--info); }
/* 2026-09-27: a tengely-feliratok HTML-ként, százalékos helyen állnak — az SVG preserveAspectRatio="none" nyújtása
   (a sávok kitöltik a kártya szélességét) így a betűket nem torzítja. A jelmagyarázat a fix magasságú dobozon
   KÍVÜL áll, nem lóg rá a következő tartalomra. */
.nl-chart-xlabels { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; pointer-events: none; }
.nl-chart-xlabels span { position: absolute; bottom: 2px; transform: translateX(-50%); font-size: 10px; line-height: 1; white-space: nowrap; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nl-bars { display: flex; flex-direction: column; gap: .35rem; }
.nl-bar { display: grid; grid-template-columns: 160px 1fr 70px; gap: .5rem; align-items: center; font-size: .8rem; }
.nl-bar-track { height: 10px; border-radius: 5px; background: var(--surface-alt); overflow: hidden; }
.nl-bar-fill { height: 100%; background-image: var(--grd-primary); border-radius: 5px; }
.nl-bar-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }

/* ── Template gallery ── */
.nl-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.nl-card { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .12s ease, box-shadow .12s ease; }
.nl-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.nl-card-thumb { height: 220px; background: var(--nl-canvas); overflow: hidden; position: relative; }
.nl-card-thumb iframe { width: 600px; height: 880px; transform: scale(.383); transform-origin: 0 0; border: 0; pointer-events: none; background: var(--nl-paper); }
.nl-card-body { padding: .7rem .8rem; display: flex; flex-direction: column; gap: .25rem; }
.nl-card-name { font-weight: 700; font-size: .9rem; }
.nl-card-sub { font-size: .72rem; color: var(--text-muted); }
.nl-card-actions { display: flex; gap: .3rem; padding: .5rem .8rem .7rem; flex-wrap: wrap; }
.nl-badge { display: inline-flex; padding: .1rem .5rem; border-radius: 12px; font-size: .66rem; font-weight: 700; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }

/* ── Segmented pills ── */
.nl-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 22px; overflow: hidden; }
.nl-seg button { background: transparent; border: 0; padding: .4rem .85rem; font-size: .8rem; cursor: pointer; color: var(--text-primary); }
.nl-seg button.on { background-image: var(--grd-primary); color: #fff; }

/* ── Progress ── */
.nl-progress { height: 8px; border-radius: 4px; background: var(--surface-alt); overflow: hidden; }
.nl-progress > div { height: 100%; background-image: var(--grd-primary); transition: width .3s ease; }

/* ── Audience list rail ── */
.nl-aud { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .5rem .55rem; border: 1px solid transparent; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; color: var(--text-primary); }
.nl-aud:hover { background: var(--surface-hover); }
.nl-aud.active { background: var(--surface); border-color: var(--border-strong); box-shadow: inset 3px 0 0 var(--accent), var(--shadow-sm); }
.nl-aud-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--chip-color, var(--accent)); flex-shrink: 0; }
.nl-aud-meta { display: flex; flex-direction: column; min-width: 0; }
.nl-aud-name { font-size: .84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-aud-sub { font-size: .68rem; color: var(--text-muted); }

@media (max-width: 1100px) {
    .nl-console, .nl-console.wide { grid-template-columns: 1fr; }
    .nl-be { grid-template-columns: 1fr; }
    .nl-rule { grid-template-columns: 1fr; }
    /* egy oszlopban a lábléc-sáv a konzol utolsó sora (2026-09-27) */
    .nl-console:has(> .nl-footbar) { grid-template-rows: none; }
    .nl-console:has(> .nl-footbar) > .pc-rail,
    .nl-console:has(> .nl-footbar) > .nl-side,
    .nl-console > .nl-footbar { grid-column: 1; grid-row: auto; }
}

/* ── Send wizard / recipes / stations (2026-09-26) ─────────────────────────────────────────── */
.nl-hero-cta { display:flex; align-items:center; gap:1.2rem; padding:1.1rem 1.4rem; border-radius:16px; background:var(--grd-primary); color:#fff; box-shadow:0 10px 30px color-mix(in srgb, var(--accent) 25%, transparent); margin-bottom:1rem; }
.nl-hero-cta .nl-hero-ico { width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-size:1.7rem; flex:0 0 auto; }
.nl-hero-cta h3 { margin:0; font-size:1.15rem; font-weight:800; letter-spacing:.01em; }
.nl-hero-cta p { margin:.15rem 0 0; opacity:.9; font-size:.9rem; }
.nl-hero-cta .btn-hero { margin-left:auto; background:#fff; color:var(--accent-dark); border:0; font-weight:800; padding:.7rem 1.2rem; border-radius:12px; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.18); white-space:nowrap; }
.nl-hero-cta .btn-hero:hover { transform:translateY(-1px); }
.nl-recipes { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:.7rem; margin-bottom:1rem; }
.nl-recipe { display:flex; flex-direction:column; gap:.35rem; padding:.85rem .95rem; border:1px solid var(--border); border-radius:14px; background:var(--surface); cursor:pointer; text-align:left; transition:transform .12s, box-shadow .12s, border-color .12s; }
.nl-recipe:hover, .nl-recipe.on { border-color:var(--accent); box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 16%, transparent); transform:translateY(-2px); }
.nl-recipe.on { outline:2px solid var(--accent); }
.nl-recipe .nl-recipe-accent { font-size:1.6rem; line-height:1; font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif; }
.nl-recipe .nl-recipe-name { font-weight:700; font-size:.95rem; }
.nl-recipe .nl-recipe-desc { font-size:.78rem; color:var(--text-muted); line-height:1.35; }
.nl-recipe .nl-recipe-tag { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); font-weight:700; }
.nl-wizard-steps { display:flex; gap:.4rem; margin-bottom:1rem; flex-wrap:wrap; }
.nl-wizard-steps .ws { display:flex; align-items:center; gap:.45rem; padding:.35rem .7rem; border-radius:999px; background:var(--surface-2); font-size:.82rem; font-weight:600; color:var(--text-muted); }
.nl-wizard-steps .ws.active { background:var(--accent); color:#fff; }
.nl-wizard-steps .ws.done { background:color-mix(in srgb, var(--success) 15%, transparent); color:var(--success); }
.nl-wizard-steps .ws b { width:20px; height:20px; border-radius:50%; background:color-mix(in srgb, var(--text-primary) 12%, transparent); display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; }
.nl-aud-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.6rem; }
.nl-aud-card { display:flex; gap:.7rem; align-items:flex-start; padding:.75rem .85rem; border:1px solid var(--border); border-radius:14px; background:var(--surface); cursor:pointer; text-align:left; transition:border-color .12s, box-shadow .12s; }
.nl-aud-card:hover, .nl-aud-card.on { border-color:var(--accent); box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 14%, transparent); }
.nl-aud-card.on { outline:2px solid var(--accent); }
.nl-aud-card .nl-aud-ico { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.05rem; flex:0 0 auto; }
.nl-aud-card .nl-aud-title { font-weight:700; font-size:.9rem; }
.nl-aud-card .nl-aud-desc { font-size:.76rem; color:var(--text-muted); line-height:1.3; }
.nl-aud-card .nl-aud-count { margin-left:auto; font-weight:800; font-size:1.05rem; color:var(--accent); white-space:nowrap; }
.nl-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.nl-chip-toggle { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .75rem; border-radius:999px; border:1px solid var(--border); background:var(--surface); cursor:pointer; font-size:.82rem; font-weight:600; }
.nl-chip-toggle.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.nl-chip-toggle i { font-size:.85rem; }
.nl-choice { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.6rem; }
.nl-choice .nl-choice-card { padding:.7rem .85rem; border:1px solid var(--border); border-radius:12px; cursor:pointer; background:var(--surface); text-align:left; }
.nl-choice .nl-choice-card.on { border-color:var(--accent); outline:2px solid var(--accent); }
.nl-choice .nl-choice-card b { display:block; font-size:.9rem; }
.nl-choice .nl-choice-card span { font-size:.76rem; color:var(--text-muted); }
.nl-wizard-body { min-height:420px; }
.nl-wizard-grid { display:grid; grid-template-columns:minmax(300px,1fr) minmax(360px,600px); gap:1rem; }
.nl-station-table td.nl-swatches span { display:inline-block; width:14px; height:14px; border-radius:4px; margin-right:3px; vertical-align:middle; border:1px solid color-mix(in srgb, var(--text-primary) 15%, transparent); }
.nl-warn-chip { display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .5rem; border-radius:999px; background:color-mix(in srgb, var(--warning) 14%, transparent); color:var(--warning); font-size:.72rem; font-weight:600; margin:.1rem .2rem .1rem 0; }
.nl-ok-chip { display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .5rem; border-radius:999px; background:color-mix(in srgb, var(--success) 14%, transparent); color:var(--success); font-size:.72rem; font-weight:600; }
.nl-sig-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:.8rem; }
.nl-sig-card { border:1px solid var(--border); border-radius:14px; padding:.8rem .9rem; background:var(--nl-paper); color:var(--nl-paper-text); }
.nl-sig-card .nl-sig-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; font-size:.8rem; color:var(--nl-paper-muted); }
.nl-sig-card .nl-warn-chip { color:var(--nl-paper-warn); background:color-mix(in srgb, var(--nl-paper-warn) 12%, transparent); }
.nl-logo-thumb { height:34px; max-width:110px; object-fit:contain; background:var(--nl-paper); border-radius:6px; padding:2px; border:1px solid var(--border); }
.nl-empty-state { padding:2rem 1rem; text-align:center; color:var(--text-muted); }
.nl-empty-state i { font-size:2rem; display:block; margin-bottom:.4rem; color:var(--accent); }
.nl-confirm { display:inline-flex; gap:.4rem; align-items:center; }
@media (max-width: 900px) { .nl-wizard-grid { grid-template-columns:1fr; } .nl-hero-cta { flex-wrap:wrap; } .nl-hero-cta .btn-hero { margin-left:0; } }

/* ── Reszponzív kétoszlopos elrendezések (2026-09-27, TOPIC 4) ─────────────────────────────────────────
   A lapok inline, fix (pixeles minimumú) rácsai ~1400 px alatt — a konzol oldalsávjai mellett már 1600 px
   körül is — vízszintesen kilógtak. Ezek a tároló TÉNYLEGES szélességéhez igazodnak: széles tárolóban
   kétoszlopos, keskenyben egy oszlopra törnek, kilógás nélkül. */
.nl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.nl-cols-editor { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: .8rem; }
.nl-cols-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 1200px) { .nl-cols-2-1 { grid-template-columns: minmax(0, 1fr); } }
/* Egymás MELLETT álló kártyák: az app.css „.data-card + .data-card { margin-top }" (egymás ALATTI kártyákra szól)
   itt a jobb oldali kártyát 1rem-mel lejjebb tolta — a sor teteje nem volt egy vonalban. A rács gap-je adja a közt. */
.nl-cols > .data-card + .data-card,
.nl-cols-2-1 > .data-card + .data-card,
.nl-cols-editor > .data-card + .data-card { margin-top: 0; }
/* ── Topic 9 (2026-09-27): the newsletter pages on the app canon ── */
/* KPI tiles = .kpi-card (sub-line / benchmark under the value); charts = .chart-card with a title row. */
.nl-kpi-card .kpi-body { min-width: 0; }
.nl-chart-card { margin-bottom: 1rem; }
.nl-chart-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.nl-chart-head .chart-title { margin: 0; display: inline-flex; align-items: center; gap: .4rem; }
/* Status pill = the standard .status-badge; the failed tone has no canon class. */
.nl-status-badge { gap: .3rem; align-items: center; white-space: nowrap; }
.status-badge.nl-status-danger { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
/* "Ötletek" — the campaign list's collapsible ideas panel (hero, recipes, figures). */
.nl-ideas { border-top: 1px solid var(--border); padding: .9rem 1rem .2rem; }
.nl-ideas .kpi-row { margin-bottom: .9rem; }
/* The vocabulary note under a "Kampány" heading and the tag chips of the campaign list. */
.nl-term { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--text-muted); font-weight: 600; letter-spacing: .02em; }
/* Gallery: the placeholder of a thumbnail that is still being drawn. */
.nl-thumb-skeleton { position: absolute; inset: 0; background: linear-gradient(100deg, var(--surface) 30%, color-mix(in srgb, var(--border) 60%, var(--surface)) 50%, var(--surface) 70%); background-size: 200% 100%; animation: nl-skeleton 1.2s ease-in-out infinite; }
@keyframes nl-skeleton { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .nl-thumb-skeleton { animation: none; } }
.nl-tag-chip { display: inline-flex; align-items: center; padding: .05rem .45rem; margin: .1rem .25rem .1rem 0; border-radius: 999px; border: 1px solid var(--border); font-size: .7rem; color: var(--text-muted); white-space: nowrap; }

/* ── 2026-09-29: image drop zone, undo/redo arrows of the block editor, A4 print dialog ── */
.nl-be-history { display: inline-flex; align-items: center; gap: .15rem; }
.nl-be-history .btn-icon:disabled { opacity: .35; cursor: default; }
.nl-be-drop {
    position: relative; display: flex; align-items: center; gap: .5rem; margin-top: .6rem; padding: .7rem .8rem;
    border: 2px dashed var(--border-strong); border-radius: var(--radius); color: var(--text-secondary);
    font-size: .8rem; line-height: 1.3; cursor: pointer;
}
.nl-be-drop:hover { border-color: var(--accent); color: var(--text-primary); }
.nl-be-drop.busy { opacity: .6; }
.nl-be-drop i { font-size: 1.25rem; color: var(--accent); }
/* The file input covers the zone, so a file dropped anywhere on it is taken without script. */
.nl-be-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.nl-print-check { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.nl-print-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }