/* ═══════════════════════════════════════════════════════════════════
   UX ENHANCEMENTS — form validation, tutorial overlay, phase locking,
   animations. Supplement to Tailwind; never overrides existing rules.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── FIELD: ERROR STATE ─────────────────────────────────────────── */

.ms-input-error,
input.ms-input-error,
textarea.ms-input-error {
  border-color: rgba(239, 68, 68, .7) !important;
  box-shadow:   0 0 0 3px rgba(239, 68, 68, .12) !important;
  transition:   border-color .2s, box-shadow .2s;
}

.ms-field-error-msg {
  display:     none;
  margin-top:  5px;
  font-size:   .78rem;
  font-weight: 600;
  color:       #ef4444;
  line-height: 1.4;
}

/* ─── FIELD: CHECKMARK ────────────────────────────────────────────── */

.ms-field-checkmark {
  display:     none;
  margin-left: 6px;
  font-size:   .9rem;
  font-weight: 700;
  color:       #10b981;
  vertical-align: middle;
}

/* ─── REQUIRED INDICATOR ─────────────────────────────────────────── */

.ms-required-dot {
  display:       inline-block;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    linear-gradient(135deg, #7c4dff, #8b5cf6);
  margin-right:  5px;
  vertical-align: middle;
  box-shadow:    0 0 0 4px rgba(124, 77, 255, .1);
}

/* ─── BUTTON: LOADING STATE ──────────────────────────────────────── */

.ms-btn-loading {
  cursor:  not-allowed !important;
  opacity: 0.8;
}

/* É3/P1 (2026-07-22, Író-2, W-A hullám) — additív spinner-kiegészítés a FENTI
   opacity-only szabályhoz (a régi szabály VÁLTOZATLAN maradt, ez csak hozzáadódik).
   Egy kicsi, forgó gyűrű jelenik meg a gomb szövege UTÁN, a normál inline
   szövegfolyásban (NEM position:absolute) — így semmilyen meglévő gomb
   paddingjét/elrendezését nem kell megbontani, a gomb csak minimálisan
   szélesedik (biztonságos minden gomb-osztályon, minden témán). `currentColor`
   a keret színe → automatikusan illeszkedik a gomb szövegszínéhez (primary/
   secondary/danger/stb. és dark/light téma — nincs hardcode-olt szín).
   A JS-oldal (MS.setPending/clearPending, shared-utils.js) `textContent`-tel
   cseréli a feliratot, SOHA nem innerHTML-lel — ez a pszeudo-elem emiatt sosem
   vész el egy felirat-csere közben (nem valódi DOM-gyerek). Szűk szelektor,
   nem szivárog. */
.ms-btn-loading::after {
  content:        '';
  display:        inline-block;
  width:          0.9em;
  height:         0.9em;
  margin-left:    0.55em;
  vertical-align: -0.15em;
  border:              2px solid currentColor;
  border-right-color:  transparent;
  border-radius:  50%;
  opacity:        0.85;
  animation:      ms-spin 0.6s linear infinite;
}

@keyframes ms-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ms-btn-loading::after {
    animation: none;
  }
}

/* ─── TUTORIAL ARROW OVERLAY ─────────────────────────────────────── */

.ms-tutorial-overlay {
  display:        none;
  position:       fixed;
  z-index:        1200;
  flex-direction: column;
  align-items:    flex-start;
  gap:            8px;
  pointer-events: none;
}

.ms-tutorial-floating {
  position: absolute;
  max-width: 260px;
}

.ms-tutorial-bubble {
  position:      relative;   /* UX-FIX B3: az X-gomb abszolút pozicionálásához */
  background:    linear-gradient(135deg, rgba(124,77,255,.16), rgba(139,92,246,.12));
  border:        1px solid rgba(124,77,255,.28);
  border-radius: 14px;
  padding:       11px 30px 11px 16px; /* jobb oldali hely az X-gombnak */
  font-size:     .84rem;
  font-weight:   600;
  color:         rgba(233, 233, 233,.92);
  max-width:     240px;
  backdrop-filter: blur(10px);
  line-height:   1.45;
}

.ms-tutorial-icon {
  display:      inline-block;
  font-size:    1.5rem;
  line-height:  1;
  margin-bottom: 2px;
}

/* ─── TUTORIAL BEZÁRÓ (X) GOMB (UX-FIX KÖR B3, 2026-07-12) ───────────
   Az .ms-tutorial-overlay ősön pointer-events:none van (dekoratív
   buborék, ne fogja a kattintást) — a gombon explicit pointer-events:auto
   kell, hogy mégis kattintható legyen. NINCS perzisztencia: a bezárás
   csak az adott (DOM-ból amúgy is törlődő) buborékpéldányt tünteti el. */
.ms-tutorial-close {
  position:       absolute;
  top:            6px;
  right:          6px;
  width:          20px;
  height:         20px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  border:         none;
  border-radius:  50%;
  background:     rgba(255,255,255,.08);
  color:          rgba(233,233,233,.75);
  font-size:      14px;
  line-height:    1;
  cursor:         pointer;
  pointer-events: auto;
  transition:     background .15s ease, color .15s ease;
}

.ms-tutorial-close:hover {
  background: rgba(255,255,255,.18);
  color:      #fff;
}

.ms-tutorial-close:focus-visible {
  outline:        2px solid #7c4dff;
  outline-offset: 2px;
  background:     rgba(255,255,255,.18);
  color:          #fff;
}

/* ─── OLDAL-SÚGÓ: „?" GOMB + BUBORÉK (2026-07-30) ──────────────────
   Ádám kérése: a szekvencia-/szegmens-oldali „?"-popup kerüljön rá minden
   olyan oldalra, ahol még nincs segítség. A gombot a szerver rendereli
   (`I18n::sugoGomb()`), a viselkedés az anime-helpers.js delegált
   `[data-ms-help]` kezelőjében van — ez a fájl CSAK a megjelenés.
   Itt (ux-enhancements.css) él, mert ez az EGYETLEN stíluslap, amit
   MIND a 16 authed view betölt; a `.sz-help-btn` (szegmensek.css) és a
   `.szq-node-help-btn` (sequence_builder.css) per-oldal másolatok — azokat
   szándékosan NEM bántjuk, csak nem születik belőlük 12 újabb. */
.ms-help-btn {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border2, rgba(184,184,184,.35));
  background: var(--surface, rgba(255,255,255,.05));
  color: var(--muted2, #c9c9cf);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.ms-help-btn:hover,
.ms-help-btn:focus-visible {
  background: var(--primary, #7c4dff);
  border-color: var(--primary, #7c4dff);
  color: #fff;
}

.ms-help-btn:focus-visible {
  outline: 2px solid var(--primary, #7c4dff);
  outline-offset: 2px;
}

/* ⚠️ pointer-events: az `.ms-tutorial-overlay` ős `pointer-events:none`-t ad
   (dekoratív, kattintás-áteresztő tutorial-buborék). Az oldal-súgó viszont
   KATTINTHATÓ tartalom: nélküle a „kívülre kattintás zár" figyelő a saját
   buborékon belüli kattintást is KÍVÜLINEK látná (az esemény átesne rajta),
   és a buborék a saját szövegére kattintva bezárulna. */
.ms-help-bubble {
  pointer-events: auto;
  max-width: 320px;
}

/* Az oldal-súgó szövege hosszabb a node-tooltipeknél (egy funkciót magyaráz,
   nem egy mezőt), ezért szélesebb, mint az alap 240px-es tutorial-buborék. */
.ms-help-bubble .ms-tutorial-bubble {
  max-width: 320px;
  font-weight: 500;
}

.ms-help-bubble .ms-tutorial-bubble strong {
  font-weight: 800;
}

/* ─── CAMPAIGN PHASE BLOCKING OVERLAY ────────────────────────────── */

.ms-phase-overlay {
  display:        none;
  position:       absolute;
  inset:          0;
  z-index:        10;
  background:     rgba(10, 10, 10, .62);
  border-radius:  inherit;
  backdrop-filter: blur(3px);
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:            12px;
  text-align:     center;
  padding:        20px;
}

.ms-phase-overlay-text {
  font-size:   .9rem;
  font-weight: 700;
  color:       rgba(205,205,212,.85);
  line-height: 1.45;
}

.ms-phase-overlay-icon {
  font-size: 2rem;
}

/* Parent section needs position:relative for the overlay to work */
.ms-phase-section {
  position: relative;
}

/* Locked visual for blocked sections */
.ms-phase-section.is-locked {
  pointer-events: none;
  user-select:    none;
}

/* ─── CAMPAIGN NAME EMPHASIS ─────────────────────────────────────── */

.ms-name-emphasis-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  font-size:     .74rem;
  font-weight:   700;
  color:         rgba(251,191,36,.85);
  background:    rgba(245,158,11,.1);
  border:        1px solid rgba(245,158,11,.22);
  border-radius: 999px;
  padding:       3px 10px;
  margin-left:   8px;
  letter-spacing: .02em;
}

/* ─── SUCCESS CELEBRATION CONTAINER ─────────────────────────────── */

.ms-celebration-wrap {
  position:    relative;
  overflow:    visible;
  display:     inline-block;
}

/* Confetti dots are injected by JS; no base style needed */

/* ─── STEP GUIDE ARROW ───────────────────────────────────────────── */

.ms-next-arrow {
  display:        none;
  align-items:    center;
  justify-content: center;
  gap:            8px;
  padding:        10px 0 2px;
  font-size:      .82rem;
  font-weight:    600;
  color:          rgba(124,77,255,.75);
  text-align:     center;
}

.ms-next-arrow.is-visible {
  display: flex;
}

.ms-next-arrow-icon {
  font-size: 1.1rem;
}

/* ─── FIRST-FIELD PULSE (initial focus hint) ─────────────────────── */

.ms-first-field-hint {
  position:      absolute;
  top:           -32px;
  left:          0;
  right:         0;
  text-align:    center;
  font-size:     .76rem;
  font-weight:   600;
  color:         rgba(124,77,255,.7);
  pointer-events: none;
  opacity:       0;
}

/* ─── SHAKE FALLBACK (no anime.js) ──────────────────────────────── */

@keyframes ms-shake-kf {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-9px); }
  30%  { transform: translateX(9px); }
  45%  { transform: translateX(-7px); }
  60%  { transform: translateX(7px); }
  75%  { transform: translateX(-4px); }
  90%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

.ms-shake {
  animation: ms-shake-kf .45s ease-out both;
}

/* ─── TOAST CONTAINER: always above modals ──────────────────────── */

#toast_container {
  position:       fixed !important;
  top:            1.2rem !important;
  right:          1.5rem !important;
  left:           auto !important;
  z-index:        99999 !important;
  pointer-events: none;
  display:        flex;
  flex-direction: column;
  gap:            8px;
  min-width:      280px;
  max-width:      400px;
}

#toast_container .ug-toast {
  pointer-events: auto;
}

/* ─── SIDEBAR BOTTOM SECTION (universal, all pages) ─────────────── */

.ms-sidebar-bottom {
  margin-top:     auto;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  padding-top:    8px;
}

/* ─── ADVANCED MODE TOGGLE (settings modal) ──────────────────────── */

.ms-advanced-toggle-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             14px;
  padding:         14px 16px;
  background:      rgba(124,77,255,.06);
  border:          1px solid rgba(124,77,255,.16);
  border-radius:   14px;
  margin-top:      8px;
}

.ms-advanced-toggle-text {
  flex: 1;
  min-width: 0;
}

.ms-advanced-toggle-text strong {
  display:     block;
  font-size:   .94rem;
  color:       var(--text, #f4f4f5);
  margin-bottom: 4px;
}

.ms-advanced-toggle-text small {
  display:    block;
  font-size:  .78rem;
  color:      rgba(151, 151, 151,.6);
  line-height: 1.45;
}

.ms-toggle-switch {
  position: relative;
  display:  inline-block;
  width:    52px;
  height:   28px;
  flex-shrink: 0;
}

.ms-toggle-switch input {
  opacity: 0;
  width:   0;
  height:  0;
  position: absolute;
}

.ms-toggle-slider {
  position:   absolute;
  cursor:     pointer;
  inset:      0;
  background: rgba(138, 138, 138,.32);
  border:     1px solid rgba(151, 151, 151,.18);
  border-radius: 999px;
  transition: background .25s, border-color .25s;
}

.ms-toggle-slider::before {
  content:    "";
  position:   absolute;
  height:     22px;
  width:      22px;
  left:       2px;
  top:        2px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  transition: transform .28s cubic-bezier(.4,.7,.3,1);
}

.ms-toggle-switch input:checked + .ms-toggle-slider {
  background:   linear-gradient(135deg, #7c4dff, #8b5cf6);
  border-color: rgba(139,92,246,.4);
}

.ms-toggle-switch input:checked + .ms-toggle-slider::before {
  transform: translateX(24px);
}

.ms-toggle-switch input:focus-visible + .ms-toggle-slider {
  box-shadow: 0 0 0 3px rgba(124,77,255,.35);
}

/* ═══════════════════════════════════════════════════════════════════
   MOBIL NAVIGÁCIÓ — hamburger + off-canvas (lebegő) sidebar
   ───────────────────────────────────────────────────────────────────
   • Csak telefon-nézetben (<768px) aktív; a desktop kinézetet
     SEMMILYEN módon nem érinti (a hamburger gomb desktopon display:none).
   • A megnyitott menü a tartalom FÖLÖTT lebeg (position:fixed + backdrop),
     ezért NEM tolja el a fő tartalmat.
   • Közös minden oldalon: az ux-enhancements.css mindenhol be van húzva
     és utolsóként töltődik, így felülírja a lap-specifikus szabályokat.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── HAMBURGER GOMB (desktopon rejtett) ─────────────────────────── */
.ms-hamburger {
  display:        none;        /* desktopon nincs */
  align-items:    center;
  justify-content: center;
  width:          40px;
  height:         40px;
  flex-shrink:    0;
  margin:         0 4px 0 10px;
  border-radius:  11px;
  border:         1px solid rgba(255,255,255,.10);
  background:     rgba(255,255,255,.04);
  color:          #f4f4f5;
  cursor:         pointer;
  -webkit-tap-highlight-color: transparent;
  transition:     background .18s ease, border-color .18s ease, transform .12s ease;
}

.ms-hamburger:hover  { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.ms-hamburger:active { transform: scale(.93); }

/* három csík — a középső maga a span, a másik kettő ::before/::after */
.ms-hamburger-bars,
.ms-hamburger-bars::before,
.ms-hamburger-bars::after {
  display:       block;
  width:         18px;
  height:        2px;
  border-radius: 2px;
  background:    currentColor;
  transition:    transform .25s ease, opacity .2s ease, background .2s ease;
}

.ms-hamburger-bars { position: relative; }
.ms-hamburger-bars::before { content: ""; position: absolute; top: -6px; left: 0; }
.ms-hamburger-bars::after  { content: ""; position: absolute; top:  6px; left: 0; }

/* nyitott állapotban X-szé alakul */
body.ms-nav-open .ms-hamburger-bars            { background: transparent; }
body.ms-nav-open .ms-hamburger-bars::before    { transform: translateY(6px)  rotate(45deg); }
body.ms-nav-open .ms-hamburger-bars::after     { transform: translateY(-6px) rotate(-45deg); }

/* ─── BACKDROP (a fiók mögötti elsötétítés) ──────────────────────── */
.ms-nav-backdrop {
  position:        fixed;
  inset:           0;
  z-index:         150;       /* topbar (200) alatt, tartalom fölött */
  background:      rgba(8, 8, 8,.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity:         0;
  visibility:      hidden;
  transition:      opacity .25s ease, visibility .25s ease;
}

body.ms-nav-open .ms-nav-backdrop { opacity: 1; visibility: visible; }

/* ─── NYITOTT HAMBURGER-MENÜ ALATT: MINDEN ms-tutorial ELREJTVE
   (UX-FIX KÖR B4, 2026-07-12) ─────────────────────────────────────────
   A .ms-hamburger gomb desktopon display:none (ld. lent), így valódi
   kattintással a body.ms-nav-open állapot a gyakorlatban csak mobil
   nézetben jöhet létre — nincs szükség külön @media-gate-re, a class
   maga a mobil-jelző. Amíg a lebegő off-canvas fiók nyitva van, a
   tutorial-buborékok (ms-tutorial-overlay/ms-tutorial-floating) ne
   takarják ki / ne zavarják a menüt; a fiók zárásakor (closeNav a
   shared-utils.js-ben) újra megjelennek. */
body.ms-nav-open .ms-tutorial-overlay,
body.ms-nav-open .ms-tutorial-floating {
  display: none !important;
}

/* ─── MOBIL BREAKPOINT ───────────────────────────────────────────── */
/* 767.98px: így a Tailwind `md` (min-width:768px) határral nincs 1px-es
   átfedés az Analizáció oldalon. */
@media (max-width: 767.98px) {

  /* hamburger megjelenítése a logó mellett */
  .ms-hamburger { display: inline-flex; }

  /* a brand ne foglaljon fix 220px-t, férjen el a hamburger */
  .ms-brand { min-width: auto !important; }

  /* SIDEBAR → off-canvas, lebegő fiók (a tartalom NEM tolódik el) */
  .ms-sidebar {
    display:    flex   !important;   /* felülírja a lap-specifikus display:none-t és a Tailwind .hidden-t */
    position:   fixed  !important;
    top:        56px;                /* topbar magassága (mindenhol 56px) */
    left:       0;
    bottom:     0;
    height:     auto   !important;
    width:      270px;
    max-width:  82vw;
    margin:     0      !important;
    transform:  translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index:    180;                 /* backdrop (150) fölött, topbar (200) alatt */
    overflow-y: auto;
    box-shadow: none;
  }

  body.ms-nav-open .ms-sidebar {
    transform:  translateX(0);
    box-shadow: 12px 0 40px rgba(0,0,0,.5);
  }

  /* PROFIL: csak a kör alakú avatar marad, a név/szöveg eltűnik */
  .ms-user-meta { display: none !important; }

  /* ─── RÉTEGZŐDÉS JAVÍTÁS (kattinthatóság) ──────────────────────────
     A .ms-layout `position:relative; z-index:1` SAJÁT rétegkontextust hoz
     létre, ami "bezárja" a benne lévő fixed sidebart: a sidebar z-index:180
     csak a layouton BELÜL érvényes, kifelé az egész layout z-index:1-ként
     viselkedik. Így a body-szintű backdrop (z-index:150) a sidebar FÖLÉ
     került → kitakarta a gombokat (blur + nem kattintható).

     Megoldás: a layout ne hozzon létre rétegkontextust (z-index:auto), így
     a fixed sidebar (180) a backdrop (150) FÖLÉ kerül és kattintható lesz.
     A fő tartalmat külön emeljük a háttér-gradiens (body::before, z-index:0)
     fölé, hogy az ne takarja ki. */
  .ms-layout { z-index: auto !important; }
  .ms-main   { position: relative; z-index: 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   LOGIN: MOBIL CSOMAGVÁLASZTÓ-MEGNYITÓ GOMB ELREJTÉSE (UX-FIX KÖR B2)
   ───────────────────────────────────────────────────────────────────
   A login.php #msOpenPackageFromLogin gombja (utils/js/package_selector_
   before_login.js bindLoginViewPackageOpen()) a Tailwind `lg:hidden`
   osztállyal desktopon MÁR eleve rejtve van — csak <1024px-en látszott.
   Ádám kérésére mobilon (a projekt hamburger-breakpontja, <768px) is
   tűnjön el; desktopon a meglévő viselkedés VÁLTOZATLAN marad (ott már
   eddig is rejtett volt). A gomb elrejtése CSAK vizuális — a
   click-listener a DOM-ban marad, de nem elérhető, így a csomagválasztó
   ALAPÉRTELMEZETT nyitási logikáját (force_open / !savedPackage a
   package_selector_before_login.js initPackageSelector()-jében) nem
   érinti, az változatlanul működik.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  #msOpenPackageFromLogin {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP: bal oldali sidebar görgetősávjának elrejtése
   ───────────────────────────────────────────────────────────────────
   Csak nem-telefonos nézetben (≥768px): a scrollbar vizuálisan eltűnik,
   de a görgetés (overflow-y:auto) változatlanul működik. A telefonos
   off-canvas fiókot nem érinti. A !important felülírja az Analizáció
   oldal .ms-scroll-area egyedi scrollbar stílusát is.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .ms-sidebar {
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* régi Edge / IE */
  }

  .ms-sidebar::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;     /* Chrome, Safari, új Edge */
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ONBOARDING — KÜLDÉSI CSATORNA HIÁNYA (FÁZIS G)
   ───────────────────────────────────────────────────────────────────
   A shared-utils.js DOM-ba injektálja (a .ms-topbar UTÁNI testvérként),
   ha a <meta name="ms-capabilities" data-csatorna="0">. Figyelmeztető
   sárga tónus a sötét paletta felett — nem a hibapiros (nem hiba,
   csak teendő), a settings-modal (#msSettingsModal, z-index 20001+)
   ALATT, hogy az a sáv/modal fölé nyíljon.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── EMLÉKEZTETŐ-SÁV (a topbar alatt, nem eltüntethető) ─────────────── */
.ms-csatorna-sav {
  position:        sticky;
  top:              0;              /* a saját sticky-kontextusában (a topbar UTÁN) a doksi tetejéhez ragad */
  z-index:          190;             /* topbar (200) alatt, sidebar (180) fölött */
  display:          flex;
  align-items:      center;
  gap:              10px;
  flex-wrap:        wrap;
  padding:          9px 20px;
  background:       linear-gradient(90deg, rgba(234,179,8,.16), rgba(234,179,8,.09));
  border-bottom:    1px solid rgba(234,179,8,.35);
  color:            #fde68a;
  font-size:        .84rem;
  font-weight:      600;
  line-height:      1.4;
}

.ms-csatorna-sav-icon {
  font-size:   .95rem;
  flex:        0 0 auto;
}

.ms-csatorna-sav-text {
  flex: 1 1 auto;
  min-width: 200px;
  color: var(--text, #f4f4f5);
}

.ms-csatorna-sav-btn {
  flex:            0 0 auto;
  border:          1px solid rgba(234,179,8,.55);
  border-radius:   999px;
  background:      rgba(234,179,8,.16);
  color:           #fde68a;
  font-size:       .78rem;
  font-weight:     700;
  padding:         6px 14px;
  cursor:          pointer;
  transition:      background .18s ease, transform .18s ease;
  font-family:     inherit;
}

.ms-csatorna-sav-btn:hover {
  background:  rgba(234,179,8,.28);
  transform:   translateY(-1px);
}

/* Fullscreen szekvencia-builder módban a sáv rejtve — ott a vászon az úr. */
body.szq-fullscreen .ms-csatorna-sav {
  display: none !important;
}

@media (max-width: 767.98px) {
  .ms-csatorna-sav {
    padding: 8px 14px;
    font-size: .78rem;
  }
}

/* ─── ÜDVÖZLŐ MODAL (bezárható, session-enként egyszer) ──────────────── */
.ms-onboarding-modal-overlay {
  position:         fixed;
  inset:            0;
  z-index:          15000;          /* msPlanModal (10000) fölött, settings-modal (20000+) alatt */
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          1.5rem;
  background:       rgba(4,6,14,.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter:  blur(12px);
}

.ms-onboarding-modal-card {
  position:      relative;
  width:         100%;
  max-width:     460px;
  max-height:    90vh;
  overflow-y:    auto;
  border-radius: 26px;
  border:        1px solid rgba(234,179,8,.22);
  background:    linear-gradient(180deg, rgba(19,27,50,.98), rgba(14,20,38,.98));
  padding:       2.1rem 1.9rem;
  box-shadow:    0 28px 80px rgba(0,0,0,.55);
  text-align:    center;
}

.ms-onboarding-modal-close {
  position:      absolute;
  top:           14px;
  right:         14px;
  width:         30px;
  height:        30px;
  border-radius: 50%;
  border:        1px solid rgba(255,255,255,.12);
  background:    rgba(255,255,255,.04);
  color:         #dbe5ff;
  font-size:     .9rem;
  line-height:   1;
  cursor:        pointer;
  display:       grid;
  place-items:   center;
}

.ms-onboarding-modal-close:hover {
  background: rgba(255,255,255,.1);
}

.ms-onboarding-modal-icon {
  font-size:     2.2rem;
  line-height:   1;
  margin-bottom: .6rem;
}

.ms-onboarding-modal-title {
  font-size:     1.3rem;
  font-weight:   800;
  color:         #f5f7ff;
  margin:        0 0 .5rem;
  line-height:   1.25;
}

.ms-onboarding-modal-lead {
  color:         #8b96bc;
  font-size:     .9rem;
  line-height:   1.6;
  margin:        0 0 1.4rem;
}

.ms-onboarding-modal-steps {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-bottom:  1.4rem;
  text-align:     left;
}

.ms-onboarding-step {
  display:       flex;
  align-items:   center;
  gap:           12px;
  border-radius: 16px;
  border:        1px solid rgba(234,179,8,.28);
  background:    rgba(234,179,8,.07);
  padding:       .85rem 1rem;
}

.ms-onboarding-step.is-optional {
  border-color: rgba(255,255,255,.1);
  background:   rgba(255,255,255,.03);
}

.ms-onboarding-step-num {
  flex:          0 0 auto;
  width:         26px;
  height:        26px;
  border-radius: 50%;
  display:       grid;
  place-items:   center;
  font-size:     .82rem;
  font-weight:   800;
  background:    linear-gradient(135deg, #eab308, #f59e0b);
  color:         #221800;
}

.ms-onboarding-step.is-optional .ms-onboarding-step-num {
  background: rgba(255,255,255,.1);
  color:      #dbe5ff;
}

.ms-onboarding-step-body {
  flex:           1 1 auto;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.ms-onboarding-step-body strong {
  font-size: .88rem;
  color:     #f5f7ff;
}

.ms-onboarding-step-body span {
  font-size:   .78rem;
  color:       #8b96bc;
  line-height: 1.45;
}

.ms-onboarding-step-btn,
.ms-onboarding-step-link {
  flex:          0 0 auto;
  border-radius: 12px;
  border:        1px solid rgba(234,179,8,.4);
  background:    rgba(234,179,8,.14);
  color:         #fde68a;
  font-size:     .78rem;
  font-weight:   700;
  padding:       .5rem .8rem;
  cursor:        pointer;
  text-decoration: none;
  white-space:   nowrap;
  font-family:   inherit;
}

.ms-onboarding-step-link {
  border-color: rgba(255,255,255,.14);
  background:   rgba(255,255,255,.05);
  color:        #dbe5ff;
}

.ms-onboarding-modal-later {
  width:         100%;
  border-radius: 16px;
  background:    rgba(255,255,255,.05);
  border:        1px solid rgba(255,255,255,.1);
  padding:       .8rem 1rem;
  font-size:     .9rem;
  font-weight:   700;
  color:         #dbe5ff;
  cursor:        pointer;
  font-family:   inherit;
}

.ms-onboarding-modal-later:hover {
  background: rgba(255,255,255,.09);
}

/* ═══════════════════════════════════════════════════════════════════
   ÍRÓ-A, A4-KIEGÉSZÍTÉS (UX-FIX KÖR, 2026-07-13) — onboarding-modal X
   Az X-gomb vizuális/fókusz-viselkedése a tutorial-X (.ms-tutorial-close,
   Író-B B3) mintájával konzisztens: azonos hover-nyelv + látható
   :focus-visible gyűrű (a shared-utils.js megnyitáskor az X-re fókuszál,
   így a gyűrű egyben jelzi is, hogy modal fedi a lapot). CSAK HOZZÁFŰZÉS —
   a meglévő .ms-onboarding-modal-close alap-blokk érintetlen.
═══════════════════════════════════════════════════════════════════ */

.ms-onboarding-modal-close {
  transition: background .15s ease, color .15s ease;
}

.ms-onboarding-modal-close:hover {
  background: rgba(255,255,255,.18);
  color:      #fff;
}

.ms-onboarding-modal-close:focus-visible {
  outline:        2px solid #7c4dff;
  outline-offset: 2px;
  background:     rgba(255,255,255,.18);
  color:          #fff;
}

/* ═══════════════════════════════════════════════════════════════════
   KANONIKUS LIMIT-SÁV (4. ÜTEM, 2026-08-04, T21 — RÖGZÍTETT INTERFÉSZ 3. pont)
   ───────────────────────────────────────────────────────────────────
   A MS.limitSav() helper (shared-utils.js) által renderelt "<n> / <max>"
   stat-sor + a teli-limit warn-sáv EGY osztálypárja — 9 fogyasztó-oldal
   (ugyfel/csoport/sablon/szegmensek/cimkék/domain/kerdoivek/
   sequenceBuilder/urlapok) osztozik rajta. Az `ux-enhancements.css`
   MINDEN authed nézetbe be van húzva (ld. a fájl tetejét), ezért ez az
   EGYETLEN hely, ahol egy közös osztály minden fogyasztóra elér — a
   `.mtar-limit-warn` (mediatar.css:156-165) borostyán vizuálja a minta,
   a 3 MEGLÉVŐ warn (mediatar/webhook/rss) VÁLTOZATLAN marad, saját
   osztályokkal, saját fájljukban.
   ═══════════════════════════════════════════════════════════════════ */

.ms-limit-stat {
  margin:      6px 0 0;
  font-size:   .8rem;
  font-weight: 700;
  color:       var(--muted, rgba(151, 151, 151,.75));
}

.ms-limit-warn {
  margin:        10px 0 0;
  padding:       10px 14px;
  border-radius: 10px;
  background:    rgba(245, 158, 11, .12);
  border:        1px solid rgba(245, 158, 11, .35);
  color:         var(--text, #f4f4f5);
  font-size:     .84rem;
  line-height:   1.5;
}