/* MARKETING OS · F3b csomag (Hirdetés, Landing, Űrlap, Partnerek, Persona, Felmérések, Tudás, Szabályok, Skillek) stílusa. A prototípus tokenjeit használja. */
.f3b-danger { color: var(--bad) !important; }
.f3b-hint { color: var(--muted); font-size: 13px; }
.f3b-warn { color: var(--warn); }
.f3b-off { color: var(--muted); cursor: not-allowed; } /* kikapcsolt állapot: nem halványítás (opacity), hanem kifejezett kinézet, hogy a szöveg kontrasztja megmaradjon (>= 4,5:1) */
.f3b-off .tag, .f3b-off .pill { background: var(--surface-3); color: var(--muted); border: 1px dashed var(--border-strong); }
.f3b-link { color: var(--mk-g2, var(--primary)); cursor: pointer; font-weight: 600; }
.f3b-link:hover { text-decoration: underline; }
.f3b-x { cursor: pointer; font-style: normal; color: var(--muted); padding: 0 4px; }
.f3b-x:hover { color: var(--bad); }
.f3b-banner { border-radius: 10px; padding: 10px 12px; font-size: 14px; border: 1px solid var(--border); background: var(--surface-2); }
.f3b-banner.bad { background: var(--bad-bg, #fbe9e7); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.f3b-banner.warn { background: var(--warn-bg, #fcf3e1); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.f3b-banner.ok { background: var(--ok-bg, #e7f4eb); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.f3b-banner.info { background: var(--surface-2); color: var(--text-2); }
.f3b-in { font: inherit; font-size: 15px; padding: 6px 10px; border: 1px solid var(--border-strong, var(--border)); border-radius: 8px; background: var(--surface); color: var(--text); min-width: 0; }
textarea.f3b-in { width: 100%; box-sizing: border-box; resize: vertical; }
.f3b-say { min-height: 52px; }
.f3b-w60 { width: 60px; } .f3b-w80 { width: 80px; } .f3b-w120 { width: 120px; } .f3b-w160 { width: 160px; } .f3b-w220 { width: 220px; }
.f3b-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .f3b-two { grid-template-columns: 1fr; } }
.f3b-check { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.f3b-fs { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
.f3b-prev-n { display: flex; gap: 16px; flex-wrap: wrap; margin: 6px 0; font-size: 14px; }
.f3b-trial { border: 1px dashed var(--border-strong); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; background: var(--surface-2); }
.f3b-confirm { border-color: var(--mk-g2, var(--primary)); }
.f3b-parse { background: var(--surface-2); }
.f3b-sigs { margin-bottom: 10px; }
.rb-row.sel { outline: 2px solid color-mix(in srgb, var(--mk-g2, var(--primary)) 45%, transparent); }
.f3b-cond, .f3b-act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.f3b-cgroup { border: 1px solid var(--border); border-radius: 10px; padding: 8px; display: grid; gap: 6px; margin-bottom: 6px; }
.f3b-ghead { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
select.rb-sel, input.rb-sel { font: inherit; font-size: 14px; padding: 4px 8px; border: 1px solid var(--border-strong, var(--border)); border-radius: 8px; background: var(--surface); color: var(--text); }
.rb-say textarea { width: 100%; }
.f3b-limits .f3b-lim { border-bottom: 1px solid var(--border); padding-bottom: 12px; display: grid; gap: 8px; }
.f3b-limits .f3b-lim:last-child { border-bottom: 0; padding-bottom: 0; }
.f3b-lim-h { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.f3b-lim-h .btn { margin-left: auto; }
.f3b-mini { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }
.f3b-num { display: inline-flex; gap: 4px; align-items: center; color: var(--text); }
.aut-seg .f3b-off { pointer-events: none; text-decoration: line-through; color: var(--muted); }
.aut-fix svg { vertical-align: -2px; }
.toggle[role="button"] { cursor: pointer; }
.pe-chip i { cursor: pointer; font-style: normal; margin-left: 6px; color: var(--muted); }
.pe-chip i:hover { color: var(--bad); }

/* Hirdetés */
.f3b-wrap { flex-wrap: wrap; gap: 6px; }
.f3b-scroll { overflow-x: auto; }
.f3b-featbox { padding: 10px 0; border-bottom: 1px solid var(--border); display: grid; gap: 6px; }
.f3b-feats { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.f3b-feat { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.mb-mt td small.mb-hint { display: block; }
.f3b-incomplete { display: inline-block; font-size: 12px; font-weight: 600; color: var(--bad); }

/* Landingszerkesztő, űrlapszerkesztő */
.f3b-edtop .card-b { padding: 10px 14px; }
.f3b-edtop .kill { height: 32px; padding: 0 10px; font-size: 13.5px; }
@media (max-width: 1560px) { .f3b-edtop .kill:not(.mos-killed) .p-kl { display: none; } }
.f3b-grow { flex: 1 1 auto; }
.f3b-title { font-weight: 600; font-size: 16px; min-width: 220px; }
.f3b-edbody { display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; gap: 14px; align-items: start; margin-top: 12px; }
@media (max-width: 1100px) { .f3b-edbody { grid-template-columns: 1fr; } }
.f3b-left, .f3b-insp { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: grid; gap: 10px; }
.f3b-tabs { display: flex; flex-wrap: wrap; }
.f3b-layers { display: grid; gap: 4px; }
.f3b-lay { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 14px; }
.f3b-lay.on { border-color: var(--mk-g2, var(--primary)); background: var(--primary-subtle, var(--surface-2)); }
.f3b-lib { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.f3b-lib div { padding: 10px 8px; border: 1px solid var(--border); border-radius: 8px; text-align: center; cursor: pointer; font-size: 14px; background: var(--surface-2); }
.f3b-lib div:hover:not(.off) { border-color: var(--mk-g2, var(--primary)); }
.f3b-lib div.off { color: var(--muted); background: var(--surface-3); border-style: dashed; cursor: not-allowed; }
.f3b-lib div.off .tag, .f3b-lib div.off .pill { background: var(--surface); color: var(--muted); }
.f3b-canvas { background: var(--surface-3, var(--surface-2)); border: 1px solid var(--border); border-radius: 12px; padding: 14px; min-height: 400px; position: relative; overflow-x: auto; }
.f3b-page { margin: 0 auto; background: var(--surface); border-radius: 10px; border: 1px solid var(--border); display: grid; gap: 0; }
.f3b-page .f3b-blk { padding: 16px 18px; border-bottom: 1px dashed var(--border); position: relative; cursor: pointer; }
.f3b-page .f3b-blk.on { outline: 2px solid var(--mk-g2, var(--primary)); outline-offset: -2px; }
.f3b-page .f3b-blk.f3b-gone { opacity: .5; background: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--surface-2) 8px, var(--surface-2) 16px); }
.f3b-tag { display: block; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.f3b-page h1 { font-size: 24px; margin: 0; } .f3b-page h2 { font-size: 18px; margin: 0 0 4px; } .f3b-page p { margin: 0; white-space: pre-wrap; }
.f3b-page .lp-btn { display: inline-block; padding: 8px 16px; border-radius: 8px; background: var(--mk-primary, #a3157a); color: #fff; font-weight: 600; }
.f3b-undo { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; }
.f3b-omit { display: grid; gap: 4px; }
.f3b-fh { display: flex; justify-content: space-between; align-items: center; }
.la-a { display: grid; gap: 4px; margin-bottom: 8px; font-size: 14px; }
.la-i { display: flex; gap: 8px; align-items: baseline; }
.lt { display: inline-block; padding: 1px 6px; border-radius: 6px; font-size: 11px; font-weight: 700; font-style: normal; white-space: nowrap; }
.lt-j { background: var(--ok-bg, #e7f4eb); color: var(--ok); } .lt-f { background: var(--warn-bg, #fcf3e1); color: var(--warn); } .lt-h { background: var(--bad-bg, #fbe9e7); color: var(--bad); }
.la-pr { display: grid; gap: 4px; font-size: 14px; }
.ed-tv { display: flex; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ed-tv > span { flex: 1 1 200px; }
.f3b-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.f3b-tree { display: grid; gap: 4px; margin-bottom: 8px; }
.f3b-tree .fo-sh { font-weight: 600; font-size: 13px; cursor: pointer; color: var(--text-2); padding: 4px 0; }
.f3b-tree .fo-sh.on { color: var(--mk-g2, var(--primary)); }
.f3b-steps { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.f3b-steps span { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 14px; background: var(--surface); }
.f3b-steps span.on { border-color: var(--mk-g2, var(--primary)); background: var(--primary-subtle, var(--surface-2)); font-weight: 600; }
.f3b-ff { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; cursor: pointer; display: grid; gap: 4px; }
.f3b-ff.on { outline: 2px solid var(--mk-g2, var(--primary)); }
.f3b-page .fe-in { border: 1px solid var(--border-strong, var(--border)); border-radius: 8px; padding: 6px 10px; min-height: 18px; color: var(--muted); }
.f3b-page .fe-ftag { font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.f3b-page .fe-known { font-size: 12px; color: var(--muted); }
.f3b-page .fe-consent { display: flex; gap: 8px; align-items: center; font-size: 14px; margin: 6px 0; }
.f3b-consent { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 8px; align-items: center; margin-bottom: 6px; }
.f3b-consent[hidden] { display: none; }
.f3b-logic { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px; border: 1px solid var(--border); border-radius: 10px; }
.f3b-showlist { display: flex; gap: 10px; flex-wrap: wrap; }
.f3b-funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.f3b-fstep { border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: grid; gap: 2px; }
.f3b-fstep b { font-size: 24px; }
.f3b-arrow { align-self: center; color: var(--muted); }
.f3b-savebar { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); padding: 10px 14px; display: flex; gap: 10px; align-items: center; margin-top: 12px; border-radius: 10px; }
/* WP07 · a platformon futó célzás kizárt-piac ellenőrzése (Hirdetés › Ma automatikusan) */
.f3b-targeting { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 4px; }
.f3b-tviol { margin: 4px 0 0; padding-left: 18px; flex-basis: 100%; display: grid; gap: 2px; font-size: 13px; }
/* Riasztási idősáv szerkesztő: egy sor = napok + tól-ig + törlés */
.f3b-aw-row { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; margin-bottom: 8px; }
.f3b-aw-row .row { display: flex; gap: 10px 14px; flex-wrap: wrap; }

/* WP37 · beágyazott feltétel-csoportok, a csendes próba rövid állapota a szabálykártyán, a hírlevél blokkjai */
.f3b-cgroup .f3b-cgroup { margin-left: 14px; border-style: dashed; background: var(--surface-2); }
.f3b-gbody { display: grid; gap: 6px; }
.f3b-gadd { display: flex; gap: 14px; flex-wrap: wrap; }
.f3b-trial-brief { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.f3b-trial-brief[data-state="over"] { color: var(--warn); }
.f3b-blocks { display: grid; gap: 4px; margin-top: 6px; }
.f3b-block { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
/* WP43/WP44: a Hirdetés oldal telefonon -- a platform-kártyák, a költés-sáv (Finance-keret blokkal) és az oldalsáv (Idővonal · ma) egy oszlopba rendeződik */
@media (max-width: 760px) {
  .mb-plat { grid-template-columns: minmax(0, 1fr); }
  .mb-pace { grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; }
  .mb-pace .mb-fin { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 12px; }
  .mb-cols { grid-template-columns: minmax(0, 1fr) !important; }
}

/* WP47/WP48 · persona feltöltő ejtési zóna (a .pu-drop keret a prototípusból): húzás közben kiemelés, kiválasztott fájl jelzése */
.pu-drop[data-drop]{transition:border-color .12s,background .12s}
.pu-drop[data-drop].over{border-color:var(--primary);background:var(--primary-subtle)}
.pu-drop[data-drop].has{border-style:solid}
.pu-drop .pu-pick{cursor:pointer}
.pu-drop .pu-file{font-size:13px}
.mismatch-why{margin-top:2px}