/* ============================================================================================
   DESIGN TOKENS — single source of truth for the whole app set (portal + all integrations).
   Pixel-exact: every token holds the value the app already uses, so this layer is a pure
   refactor (no visual change). Two tiers:
     1. Raw palette primitives (--c-*): the actual color values, grouped by hue/ramp.
     2. Semantic aliases (--color-*): role-based names that components reference.
   Legacy names (--bg, --panel, --primary, --line, --radius, --shadow, …) are kept as aliases
   so existing rules keep working. To re-theme: change the primitives (and optionally remap the
   semantic aliases); components need no edits.
   ============================================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* Adlogic-brand betűk (SPEC-totaldashboard-keret §4.2): Quicksand = szöveg, Oswald = címsor. Helyben
   csomagolva (@fontsource, SIL OFL 1.1), a böngésző csak akkor tölti le, ha egy szabály ténylegesen
   használja a családot — a FlowFactory-brandnek nem kerül semmibe. A magyar ő/ű a latin-ext készletben van. */
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/quicksand-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/quicksand-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/quicksand-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/quicksand-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/quicksand-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/quicksand-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/static/fonts/quicksand-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/static/fonts/quicksand-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/oswald-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/oswald-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/oswald-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/oswald-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  /* --- Neutral ramp (fehér alap) --- */
  --c-neutral-0:   #ffffff;
  --c-neutral-50:  #f7f7f7;
  --c-neutral-100: #f0f0f0;
  --c-neutral-150: #ebebeb;
  --c-neutral-200: #e4e4e4;
  --c-neutral-250: #f7f7f7;
  --c-neutral-300: #e4e4e4;
  --c-neutral-350: #e4e4e4;
  --c-neutral-400: #d8d8d8;
  --c-neutral-450: #f0f0f0;
  --c-neutral-500: #d8d8d8;
  --c-neutral-550: #d8d8d8;
  --c-neutral-600: #c8c8c8;
  --c-neutral-650: #a8a8a8;

  /* --- Ink ramp (semleges, nem meleg) --- */
  --c-ink-400: #9A9A93;
  --c-ink-500: #6b6b6b;
  --c-ink-600: #444444;
  --c-ink-700: #333333;
  --c-ink-750: #333333;
  --c-ink-800: #555555;
  --c-ink-850: #333333;
  --c-ink-900: #222222;

  /* --- Brand: navy --- */
  --c-navy:       #102A3D;
  --c-navy-hover: #0d2233;

  /* --- Brand: green --- */
  --c-green-50:  #EDF5E2;
  --c-green-500: #7FB83D;
  --c-green-600: #5E9E2E;
  --c-green-700: #4a7d22;

  /* --- Amber (warning) --- */
  --c-amber-400: #c8870c;
  --c-amber-600: #9a6606;
  --c-amber-700: #9a6606;

  /* --- Red (danger) --- */
  --c-red-50:  #fdecec;
  --c-red-100: #f7d7d7;
  --c-red-500: #d24545;
  --c-red-600: #b83838;
  --c-red-700: #962d2d;

  /* --- Translucent --- */
  --c-overlay-strong: rgba(16, 42, 61, 0.50);
  --c-overlay-soft:   rgba(16, 42, 61, 0.40);
  --c-white-94: rgba(255, 255, 255, 0.94);
  --c-white-78: rgba(255, 255, 255, 0.78);
  --c-white-72: rgba(255, 255, 255, 0.72);
  --c-focus-ring: rgba(127, 184, 61, 0.30);
  --c-green-tint: rgba(127, 184, 61, 0.15);
  --c-amber-tint: rgba(200, 135, 12, 0.18);
  --c-red-tint:   rgba(210, 69, 69, 0.16);
  --c-shadow:     rgba(16, 42, 61, 0.12);

  /* --- Semantic aliases --- */
  --color-bg:               var(--c-neutral-250);
  --color-surface:          var(--c-neutral-0);
  --color-surface-subtle:   var(--c-neutral-100);
  --color-surface-subtle-2: var(--c-neutral-50);
  --color-surface-raised:   var(--c-neutral-150);
  --color-surface-inset:    var(--c-neutral-200);
  --color-surface-alt:      var(--c-neutral-300);
  --color-surface-muted:    var(--c-neutral-350);
  --color-surface-hover:    var(--c-neutral-400);
  --color-surface-sidebar:  var(--c-navy);
  --color-border:           var(--c-neutral-550);
  --color-border-strong:    var(--c-neutral-650);
  --color-text:             var(--c-ink-800);
  --color-text-row:         var(--c-ink-700);
  --color-text-strong:      var(--c-ink-600);
  --color-text-subtle:      var(--c-ink-500);
  --color-text-muted:       var(--c-ink-400);
  --color-primary:          var(--c-green-600);
  --color-primary-hover:    var(--c-green-700);
  --color-primary-soft:     var(--c-green-50);
  --color-danger:           var(--c-red-600);
  --color-danger-hover:     var(--c-red-700);
  --color-danger-soft:      var(--c-red-50);
  --color-warning:          var(--c-amber-400);
  --color-focus:            var(--c-green-500);
  --color-on-primary:       var(--c-neutral-0);
  --color-overlay:          var(--c-overlay-strong);

  /* --- Navy: direkt hivatkozáshoz --- */
  --navy: var(--c-navy);
  --navy-hover: var(--c-navy-hover);
  --green: var(--c-green-500);
  --green-strong: var(--c-green-600);
  --green-soft-bg: var(--c-green-50);
  --green-soft-text: #3F6B16;

  /* --- Header + Sidebar reskin v2 (fejléc/menüsáv látványterv) --- */
  --navy-header:  #0C2230;               /* fejléc háttér (a sávnál sötétebb navy) */
  --navy-raise:   #193C52;               /* kiemelt panel a sávban (szinkron-kártya) */
  --navy-overlay: rgba(255,255,255,.07); /* hover-overlay sötét felületen */
  --navy-line:    rgba(255,255,255,.09); /* hajszálvonal sötét felületen */
  --green-dark:   #4E872A;               /* zöld gomb hover */
  --on-navy:       #FFFFFF;              /* elsődleges szöveg sötét sávon */
  --on-navy-muted: #B9C7CF;              /* halványabb szöveg sötét sávon */
  --on-navy-faint: #7E939E;              /* tompított szöveg/ikon sötét sávon */
  --radius-ctl:   9px;                   /* vezérlők sarka a v2 fejléc/sávban */
  /* Keret-felületek brand-tokenje (PLATFORM-STACK §21) — az alapérték a mai FlowFactory-érték, a brand-blokk írja át. */
  --header-bg:       var(--navy-header);
  --header-ctl-line: var(--navy-line);     /* a fejléc gombjainak és profil-chipjének kerete */
  --header-ctl-ink:  #D7E1E6;              /* a fejléc gombjainak szövege */
  --sidebar-bg:      var(--navy);
  --sidebar-line:    var(--navy-line);

  /* --- Legacy aliases (megtartva, komponensek ezekre hivatkoznak) --- */
  --bg: var(--color-bg);
  --panel: var(--color-surface);
  --panel-muted: var(--color-surface-muted);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --line-strong: var(--color-border-strong);
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-soft: var(--color-primary-soft);
  --error: var(--color-danger);
  --error-soft: var(--color-danger-soft);
  --focus: var(--color-focus);
  --ink: var(--c-ink-750);

  /* --- Tipográfia --- */
  --font-sans: "Outfit", system-ui, -apple-system, sans-serif;
  --font-head: var(--font-sans);          /* címsor-család; az Adlogic-brand Oswaldra állítja */
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-base:14px;
  --text-md:  15px;
  --text-lg:  17px;
  --text-xl:  18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 26px;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-heavy:    700;
  --leading-tight: 1.35;
  --leading-normal: 1.5;

  /* --- Spacing (változatlan) --- */
  --space-1: 2px;   --space-2: 4px;   --space-3: 6px;
  --space-4: 8px;   --space-5: 10px;  --space-6: 12px;
  --space-7: 14px;  --space-8: 16px;  --space-9: 18px;
  --space-10: 20px; --space-12: 24px; --space-14: 28px;
  --space-16: 32px;

  /* --- Radius (változatlan) --- */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* --- Elevation --- */
  --shadow-md: 0 4px 24px var(--c-shadow);
  --shadow: var(--shadow-md);

  /* --- Motion (változatlan) --- */
  --transition-fast: 160ms ease;

  /* --- Layout (változatlan) --- */
  --sidebar-width: 310px;

  /* --- Login brand-panel díszgyűrűi (brandenként más) --- */
  --login-ring-1: rgba(127, 184, 61, 0.08);
  --login-ring-2: rgba(94, 158, 46, 0.06);
  --login-ring-3: rgba(255, 122, 33, 0.05);
  --login-ring-4: rgba(127, 184, 61, 0.05);
  --login-panel-bg: var(--navy);
  --login-tagline-sub: #4a6a7a;
  --login-feature: #3a5a6a;
  --login-grad-from: var(--green);
  --login-grad-to: var(--green-strong);

  /* --- Total dashboard diagram- és státusz-színek (SPEC-totaldashboard-keret §4.2, §9).
         A diagramon a szín maga az adat: a sorrend rögzített, ne rendezd át. --- */
  --td-chart-1: #5E9E2E;
  --td-chart-2: #102A3D;
  --td-chart-3: #c8870c;
  --td-chart-4: #ff7a21;
  --td-chart-up: #5E9E2E;
  --td-chart-down: #d24545;
  --td-chart-up-soft: #EDF5E2;
  --td-chart-down-soft: #fdecec;
  --td-chart-neutral: #9A9A93;
  --td-chart-grid: #e4e4e4;
  /* többvonalas idődiagram (TOP 20 termék): 10 szín, a rang szerint; a 11–20. szaggatott ugyanezekben.
     Színtévesztés-validált sorrend (szomszédos párok) — ne rendezd át. */
  --td-line-1: #5E9E2E;
  --td-line-2: #2a78d6;
  --td-line-3: #eb6834;
  --td-line-4: #6250d6;
  --td-line-5: #c98500;
  --td-line-6: #1593b0;
  --td-line-7: #d55181;
  --td-line-8: #a0662a;
  --td-line-9: #1baf7a;
  --td-line-10: #e34948;
  --td-status-good: #5E9E2E;
  --td-status-warning: #c8870c;
  --td-status-serious: #d24545;
  --td-status-critical: #962d2d;
  /* Teendősorok (Javaslatok / Kampánymenedzseri teendők): háttér + oldalsáv súlyosság szerint. */
  --td-advice-good-bg: #EEF6E6;
  --td-advice-good-bar: var(--td-status-good);
  --td-advice-warn-bg: #FBEDED;
  --td-advice-warn-bar: #E9A3A3;
  --td-advice-bad-bg: #F7DADA;
  --td-advice-bad-bar: var(--td-status-serious);
  --td-advice-bad-ink: #9B2C2C;
}

/* ============================================================================================
   BRAND: Adlogic (html[data-brand="adlogic"]) — SPEC-totaldashboard-keret §4.2.
   Csak a PRIMITÍV tokeneket írja felül (a komponensek nem változnak); a brand-forrás az
   AdlogicERPNew brand.json-ja: bordó #581041 · navy #293d5f · olíva · zöld kiemelés #6fe882,
   Oswald címsor + Quicksand szöveg. Az arculatnak nincs sötét változata: a brand világos marad.
   ============================================================================================ */
html[data-brand="adlogic"] {
  --brand-bordo: #581041;
  --brand-bordo-dark: #3d0b2d;
  --brand-bordo-light: #7a2a63;
  --brand-bordo-tint: #f6eef3;
  --brand-bordo-tint2: #ecdbe5;
  --brand-olive-1: #c9d1b4;
  --brand-olive-2: #a8b28e;
  --brand-olive-3: #7f8d59;
  --brand-olive-4: #546921;
  --brand-highlight: #6fe882;

  /* navy → az Adlogic navyja (címsorok, táblafejek, oldalsáv) */
  --c-navy:       #293d5f;
  --c-navy-hover: #1f2f4a;
  /* a zöld-ramp szerepe itt az elsődleges szín → bordó */
  --c-green-50:  var(--brand-bordo-tint);
  --c-green-500: var(--brand-bordo-light);
  --c-green-600: var(--brand-bordo);
  --c-green-700: var(--brand-bordo-dark);
  --c-focus-ring: rgba(88, 16, 65, 0.30);
  --c-green-tint: rgba(88, 16, 65, 0.12);
  --c-overlay-strong: rgba(61, 11, 45, 0.50);
  --c-overlay-soft:   rgba(61, 11, 45, 0.40);
  --c-shadow:         rgba(41, 61, 95, 0.12);
  --green: #2f9a4a;
  --green-strong: #257a3b;
  --green-soft-bg: #eaf2dd;
  --green-soft-text: #3d5a16;
  /* fejléc + oldalsáv: bordó-sötét, a kiemelt panel bordó */
  --navy-header: var(--brand-bordo-dark);
  --navy-raise:  var(--brand-bordo);
  --color-surface-sidebar: var(--brand-bordo-dark);
  --green-dark:  var(--brand-bordo-light);
  --on-navy-muted: #d7c5d0;
  --on-navy-faint: #a98da0;
  /* tipográfia */
  --font-sans: "Quicksand", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  --font-head: "Oswald", "Arial Narrow", "Segoe UI", sans-serif;
  /* login-panel: a brand.json „hero” gradiense */
  --login-panel-bg: linear-gradient(160deg, var(--brand-bordo-dark), var(--brand-bordo), var(--brand-bordo-light));
  --login-ring-1: rgba(255, 255, 255, 0.13);
  --login-ring-2: rgba(255, 255, 255, 0.09);
  --login-ring-3: rgba(111, 232, 130, 0.12);
  --login-ring-4: rgba(255, 255, 255, 0.08);
  --login-tagline-sub: #f3f0ee;
  --login-feature: #d7dfbf;
  --login-grad-from: var(--brand-highlight);
  --login-grad-to: #d7dfbf;
  /* diagram + státusz: a brand.json chart/status blokkja (színtévesztés-biztos sorrend) */
  --td-chart-1: #a63373;
  --td-chart-2: #5d8a24;
  --td-chart-3: #2f63b0;
  --td-chart-4: #b87c12;
  --td-chart-up: #5d8a24;
  --td-chart-down: #a63373;
  --td-chart-up-soft: #eaf2dd;
  --td-chart-down-soft: #f7e6ef;
  --td-chart-neutral: #8a919c;
  --td-chart-grid: #e4e6ea;
  --td-line-1: #a63373;
  --td-line-2: #5d8a24;
  --td-line-3: #2f63b0;
  --td-line-4: #b87c12;
  --td-line-5: #6250d6;
  --td-line-6: #1baf7a;
  --td-line-7: #e34948;
  --td-line-8: #1593b0;
  --td-line-9: #c98500;
  --td-line-10: #8a5a9e;
  --td-status-good: #2f9a4a;
  --td-status-warning: #b87c12;
  --td-status-serious: #a63373;
  --td-status-critical: #8a1f2d;
  --td-advice-good-bg: #E9F4EC;
  --td-advice-warn-bg: #F8EBEE;
  --td-advice-warn-bar: #DDA3AE;
  --td-advice-bad-bg: #F2D6DB;
  --td-advice-bad-bar: var(--td-status-critical);
  --td-advice-bad-ink: #8a1f2d;
}
html[data-brand="adlogic"] h1,
html[data-brand="adlogic"] h2,
html[data-brand="adlogic"] h3,
html[data-brand="adlogic"] .content-page-title,
html[data-brand="adlogic"] .login-tagline-lead { font-family: var(--font-head); letter-spacing: 0.01em; }

/* --- Adlogic-arc: a keret az ERP (erp.adlogic.hu, AdlogicERPNew/adlogicerp/ui/styles.css) mintájára -----------------
   Világos oldalsáv bordó csoport-sávval · bordó gradiens fejléc dekoratív körökkel · eyebrow + navy Oswald oldalcím
   zöld aláhúzással · szekció-fej darabszámmal és hajszálvonallal · bordó felső szegélyű kártya olíva címke-pillel,
   törtfehér tartalom-háttér. Csak tokenek + `html[data-brand="adlogic"]` alá zárt komponens-szabályok; a szerkezeti
   horgok (`.menu-flat-head`, `.content-page-eyebrow`, `.td-section-head`, `.td-cell-tag`) a FlowFactory-arcon
   rejtettek (PLATFORM-STACK §21). */
html[data-brand="adlogic"] {
  /* az ERP semleges rámpája */
  --ad-paper: #f7f7f8;
  --ad-sunken: #f0f1f3;
  --ad-line: #e4e6ea;
  --ad-line-strong: #c9ccd2;
  --ad-ink: #1d1d1b;
  --ad-ink-soft: #4b5361;
  --ad-muted: #6f7682;
  --ad-faint: #8a919c;
  --ad-olive-line: rgba(168, 178, 142, 0.55);
  --ad-olive-soft: #eef1e6;
  --ad-on-bordo: #ffffff;
  --ad-on-bordo-soft: rgba(255, 255, 255, 0.85);
  --ad-on-bordo-line: rgba(255, 255, 255, 0.4);
  --ad-on-bordo-badge: rgba(255, 255, 255, 0.18);
  --ad-circle: rgba(255, 255, 255, 0.05);
  --ad-shadow: 0 1px 2px rgba(29, 29, 27, 0.06), 0 4px 16px rgba(41, 61, 95, 0.06);
  --ad-group-shadow: 0 1px 2px rgba(61, 11, 45, 0.25);
  --ad-bar-gradient: linear-gradient(100deg, var(--brand-bordo-dark) 0%, var(--brand-bordo) 55%, var(--brand-bordo-light) 100%);
  --ad-group-gradient: linear-gradient(100deg, var(--brand-bordo-dark) 0%, var(--brand-bordo) 70%, var(--brand-bordo-light) 100%);
  /* a közös primitívek az ERP értékeire: törtfehér háttér, hajszálvonalak, tinta */
  --c-neutral-250: var(--ad-paper);
  --c-neutral-100: var(--ad-sunken);
  --c-neutral-550: var(--ad-line);
  --c-neutral-650: var(--ad-line-strong);
  --c-ink-400: var(--ad-faint);
  --c-ink-500: var(--ad-muted);
  --c-ink-600: var(--ad-ink);
  --c-ink-700: var(--ad-ink);
  --c-ink-750: var(--ad-ink);
  --c-ink-800: var(--ad-ink-soft);
  /* keret-tokenek */
  --header-bg: var(--ad-bar-gradient);
  --header-ctl-line: var(--ad-on-bordo-line);
  --header-ctl-ink: var(--ad-on-bordo);
  --sidebar-bg: var(--panel);
  --sidebar-line: var(--ad-line);
  /* táblák (DataGrid v2 / .ff-table): bordó fejléc Oswald-felirattal, sötétbordó szűrőmezők, zöld kiemelés a
     fejlécen; a sorok az ERP semleges rámpáján (törtfehér csík), egérre és kijelölésre halvány bordó */
  --ff-head-bg: var(--brand-bordo);
  --ff-filter-bg: var(--brand-bordo-dark);
  --ff-filter-placeholder: var(--on-navy-muted);
  --ff-head-font: var(--font-head);
  --ff-head-line: rgba(255, 255, 255, 0.14);
  --ff-head-accent: var(--brand-highlight);
  --ff-accent: var(--brand-bordo);
  --ff-current-bg: var(--brand-bordo);
  --ff-text: var(--ad-ink);
  --ff-text-faint: var(--ad-faint);
  --ff-grid-color: var(--ad-line);
  --ff-row-line: var(--ad-line);
  --ff-zebra: var(--ad-paper);
  --ff-hover: var(--brand-bordo-tint);
  --ff-select-bg: var(--brand-bordo-tint);
  --ff-select-bg-strong: var(--brand-bordo-tint2);
}

/* Fejléc: bordó gradiens, a sablon-borító halvány körei; a cím nagybetűs, ritkított Oswald. Az ügynökség-chip itt nem
   értelmes (egyetlen app, az ERP-kollégák mind adminok) — a „Ügyfelek” gombot az `apps_scope` adja (app.js). */
html[data-brand="adlogic"] .app-header { border-bottom: 0; }
html[data-brand="adlogic"] .app-header::after {
  content: "";
  position: absolute;
  left: 46%;
  top: 0;
  width: 150px;
  height: 100%;
  pointer-events: none;
  background:
    radial-gradient(circle at 45px -1px, var(--ad-circle) 0 21px, transparent 22px),
    radial-gradient(circle at 93px -1px, var(--ad-circle) 0 21px, transparent 22px),
    radial-gradient(circle at 69px 44px, var(--ad-circle) 0 21px, transparent 22px);
}
html[data-brand="adlogic"] .app-header > * { position: relative; z-index: 1; }
html[data-brand="adlogic"] .app-brand-logo { height: 36px; }
html[data-brand="adlogic"] .app-header-sep { background: var(--ad-on-bordo-line); }
html[data-brand="adlogic"] .header-shop-icon,
html[data-brand="adlogic"] .role-badge { display: none; }
html[data-brand="adlogic"] .header-datasource {
  font-family: var(--font-head);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ad-on-bordo-soft);
}

/* Oldalsáv: világos, a csoport feje bordó lekerekített sáv (nagybetűs Oswald + darabszám), alatta a menüpontok sötét
   szöveggel, olíva bal vonallal; a kijelölt pont halvány bordó háttér + bordó bal csík. */
html[data-brand="adlogic"] .app-sidebar { padding: 14px 10px 8px; }
html[data-brand="adlogic"] .menu-flat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--ad-group-gradient);
  box-shadow: var(--ad-group-shadow);
  color: var(--ad-on-bordo);
  font-family: var(--font-head);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
html[data-brand="adlogic"] .menu-flat-head::before { content: "▾"; width: 12px; color: var(--brand-highlight); font-size: 11px; }
html[data-brand="adlogic"] .menu-flat-count {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--ad-on-bordo-badge);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}
html[data-brand="adlogic"] .menu-list--flat { margin: 6px 0 0 10px; padding-left: 6px; border-left: 2px solid var(--ad-olive-line); }
html[data-brand="adlogic"] .sidebar-menu .nav-item {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--ad-ink);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}
html[data-brand="adlogic"] .sidebar-menu .nav-item > i { color: var(--ad-muted); font-size: 18px; }
html[data-brand="adlogic"] .sidebar-menu .nav-item:hover { background: var(--ad-sunken); color: var(--ad-ink); }
html[data-brand="adlogic"] .sidebar-menu .nav-item:hover > i { color: var(--ad-ink-soft); }
html[data-brand="adlogic"] .sidebar-menu .nav-item.is-active {
  background: var(--brand-bordo-tint);
  color: var(--brand-bordo);
  box-shadow: inset 3px 0 0 var(--brand-bordo);
}
html[data-brand="adlogic"] .sidebar-menu .nav-item.is-active > i { color: var(--brand-bordo); }
html[data-brand="adlogic"] .sidebar-menu .nav-item.is-active::before { display: none; }
html[data-brand="adlogic"] .sidebar-foot { border-top-color: var(--ad-line); }
html[data-brand="adlogic"] .sidebar-collapse { color: var(--ad-muted); }
html[data-brand="adlogic"] .sidebar-collapse:hover { background: var(--ad-sunken); color: var(--ad-ink); }
html[data-brand="adlogic"] .app-sidebar.collapsed .menu-flat-head { display: none; }
html[data-brand="adlogic"] .app-sidebar.collapsed .menu-list--flat { margin: 0; padding: 0; border-left: 0; }

/* Oldalcím: kis nagybetűs felső címke (az app neve) + nagy navy Oswald cím + rövid zöld aláhúzó-csík; a fehér sáv
   helyett a törtfehér tartalom-háttéren. */
html[data-brand="adlogic"] .content-page-header {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  padding: 26px var(--ff-page-pad-x) 4px;
  background: transparent;
  border-bottom: 0;
}
html[data-brand="adlogic"] .content-page-eyebrow {
  font-family: var(--font-head);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-bordo);
}
html[data-brand="adlogic"] .content-page-title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  color: var(--c-navy);
}
html[data-brand="adlogic"] .content-page-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--brand-highlight);
}

/* Total dashboard: szekció-fej (nagybetűs, ritkított, darabszám-chip, olíva hajszálvonal) + ERP-kártya (vastag bordó
   felső szegély, finom árnyék, olíva címke-pill, navy Oswald cím). */
html[data-brand="adlogic"] .td-section-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-6);
}
html[data-brand="adlogic"] .td-grid > .td-section-head:first-child { margin-top: 0; }
html[data-brand="adlogic"] .td-section-head h2 {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-bordo);
}
html[data-brand="adlogic"] .td-section-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--brand-bordo-tint);
  color: var(--brand-bordo);
  font-size: 11.5px;
  font-weight: var(--weight-bold);
}
html[data-brand="adlogic"] .td-section-head::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: var(--ad-olive-line);
}
html[data-brand="adlogic"] .td-cell {
  padding: 14px 16px;
  border: 1px solid var(--ad-line);
  border-top: 4px solid var(--brand-bordo);
  border-radius: var(--radius-md);
  box-shadow: var(--ad-shadow);
}
html[data-brand="adlogic"] .td-cell.is-off { border-top-color: var(--ad-line-strong); box-shadow: none; }
html[data-brand="adlogic"] .td-cell-head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-4); }
html[data-brand="adlogic"] .td-cell-head h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  color: var(--c-navy);
}
html[data-brand="adlogic"] .td-cell-tag {
  display: inline-flex;
  margin-left: auto;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--ad-olive-soft);
  color: var(--brand-olive-4);
  font-size: 11.5px;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
html[data-brand="adlogic"] .td-tile-value { font-size: var(--text-4xl); font-weight: var(--weight-semibold); color: var(--c-navy); }

/* FF-TABLE szabályzók — az egyetlen hely, ahol a platform táblázatainak kinézete állítható.
   Forrás: specs/platform/ff-table-referencia.html (elfogadott vizuális igazság). Ahol a referencia
   értéke pontosan vagy közelítőleg megfelel egy meglévő szemantikus tokennek, arra hivatkozunk;
   ahol nincs megfelelő, a referencia nyers értéke marad — kizárólag ebben a blokkban. */
:root {
  --ff-cell-pad-y: var(--space-3);     /* 6px — kompakt sormagasság */
  --ff-cell-pad-x: var(--space-6);     /* 12px */
  --ff-head-pad-y: var(--space-4);     /* 8px */
  --ff-grid-width: 1px;                /* cellák közti függőleges vonal */
  --ff-grid-color: #E6EBEF;            /* nincs pontos szemantikus megfelelő */
  --ff-row-line: #E1E7EB;              /* nincs pontos szemantikus megfelelő */
  --ff-zebra: #F1F5F8;                 /* sorcsíkozás — elfogadott, egyedi árnyalat */
  --ff-hover: #E9F1F6;                 /* nincs pontos szemantikus megfelelő */
  --ff-row-positive: #EEF6E6;          /* sorállapot: kedvező (halványzöld, átlátszatlan — a rögzített oszlop miatt) */
  --ff-row-negative: #FBEDED;          /* sorállapot: kedvezőtlen (halványpiros, átlátszatlan) */
  --ff-font-size: var(--text-base);    /* 14px */
  --ff-head-font-size: 12.5px;         /* nincs pontos szemantikus megfelelő */
  --ff-head-bg: var(--navy);           /* #102A3D — pontos egyezés */
  --ff-filter-bg: #0B1F2E;             /* nincs pontos szemantikus megfelelő */
  /* brand-horgok (PLATFORM-STACK §21): a mai értékkel alapértelmezve, egy brand-blokk írhatja felül */
  --ff-head-font: inherit;             /* fejléc-betű */
  --ff-head-line: var(--navy-line);    /* hajszálvonal a sötét fejlécen (cellák, szűrőmező, méretező) */
  --ff-head-accent: var(--green);      /* kiemelés a sötét fejlécen: aktív rendezés, szűrő-fókusz, méretezés */
  --ff-accent: var(--green);           /* kiemelés világos felületen: kereső-fókusz */
  --ff-current-bg: var(--navy);        /* lapozó: aktuális oldal */

  /* A referencia komponens-törzse további, névvel el nem látott egyedi színeket is használ
     (badge/bulkbar/kijelölés/kiemelés árnyalatok). Hogy a szekció törzsében ne maradjon nyers
     hex, ezeket is szabályzóként nevezzük meg — ahol volt közeli szemantikus token, azt a
     törzsben közvetlenül használjuk (ld. lent), ez a lista csak azokat tartalmazza, amikhez nem
     volt megfelelő. */
  --ff-text: #16202B;                  /* elsődleges cellaszöveg — nincs pontos szemantikus megfelelő */
  --ff-text-faint: #93A1AC;            /* halvány szöveg/ikon — nincs pontos szemantikus megfelelő */
  --ff-danger-border: #E7CFCC;
  --ff-danger-bg-hover: #FBF1F0;
  --ff-bulk-border: #CFE0BE;
  --ff-bulk-text: #2F5417;
  --ff-runstate-bg: #FBFCFD;
  --ff-filter-placeholder: #7E97A8;
  --ff-link-underline: rgba(16, 42, 61, 0.25);
  --ff-flag-bg-strong: #DCEAD1;
  --ff-select-bg: #E4EEF6;
  --ff-select-bg-strong: #D9E7F2;
  --ff-count-active-bg: rgba(255, 255, 255, 0.16);

  /* Portfólió — a tábla három oszlopblokkjának árnyalatai (SPEC-portfolio-riport.md §14.3).
     Szándékosan halványak: a blokkot jelezniük kell, nem elvonniuk a figyelmet a számokról.
     Blokkonként négy állapot: alap · sorcsíkozás · hover · összesítő sor, plusz a sötét fejléc. */
  --pf-google-bg: #EDF3FA;  --pf-google-zebra: #E4EDF7;  --pf-google-hover: #D8E6F4;
  --pf-google-foot: #D6E3F1; --pf-google-head: #16354F;
  --pf-meta-bg:   #F3EFFA;  --pf-meta-zebra:   #EBE5F7;  --pf-meta-hover:   #E1D8F3;
  --pf-meta-foot:   #DED5F0; --pf-meta-head:   #24274F;
  --pf-other-bg:  #EFF6E9;  --pf-other-zebra:  #E6F1DD;  --pf-other-hover:  #DBEBCE;
  --pf-other-foot:  #D9E9CB; --pf-other-head:  #14362A;
  --pf-axis-foot: #DCE6ED;
  --pf-block-line: #AEBECD;                 /* blokk-elválasztó világos felületen */
  --pf-block-line-head: rgba(255,255,255,.30); /* ugyanaz a navy fejlécben */
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--c-focus-ring);
  outline-offset: 2px;
}

.is-hidden {
  display: none !important;
}

.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;
}

.shop-select-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 40px 24px;
  background: var(--login-panel-bg);  /* FlowFactory: var(--navy); brandenként a login-panel felülete */
  position: relative;
  overflow: hidden;
}

.shop-select-screen::before {
  content: '';
  position: absolute;
  right: -160px;
  top: -160px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 56px solid rgba(127, 184, 61, 0.07);
  pointer-events: none;
}

.shop-select-screen::after {
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 36px solid rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.login-screen {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background: var(--navy);
  position: relative;
  overflow: hidden;
}

.login-screen::before {
  content: '';
  position: absolute;
  right: -160px;
  top: -160px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  border: 56px solid rgba(127, 184, 61, 0.07);
  pointer-events: none;
}

.login-screen::after {
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 36px solid rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.shop-select-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 820px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 36px 32px;
  box-shadow: 0 8px 48px rgba(16, 42, 61, 0.28);
}

.shop-select-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}

.login-panel {
  width: min(100%, 420px);
  padding: 36px 36px 32px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 48px rgba(16, 42, 61, 0.28);
  position: relative;
  z-index: 1;
}

.login-panel h1 {
  margin: 28px 0 20px;
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  color: var(--navy);
}

/* FlowFactory wordmark — tömör, egyszínű szöveg (a színes/kéttónusú lockup a
   logó-SVG-ben él). Fehér felületen navy; navy fejléceken a kontextus felülírja fehérre. */
.login-brand-name {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.3px;
}

.login-brand-sub {
  margin-top: 4px;
  font-size: var(--text-xs);
  color: var(--muted);
}

/* FlowFactory színes lockup a világos-hátterű képernyők fejlécein (shop-választó,
   landing, admin) — a korábbi szöveges wordmark helyett. */
.screen-brand-logo {
  height: 28px;
  width: auto;
  display: block;
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  color: var(--text);
}

.brand-logo {
  display: block;
  width: 150px;
  height: auto;
}

.brand-product {
  padding-left: 10px;
  border-left: 1px solid var(--line);
  color: var(--color-text-strong);
  font-weight: var(--weight-heavy);
  white-space: nowrap;
}

.sidebar-brand {
  align-items: flex-start;
  flex-direction: column;
  gap: var(--space-3);
}

.sidebar-brand .brand-logo {
  width: 180px;
}

.sidebar-brand .brand-product {
  padding-left: 0;
  border-left: 0;
}

/* The app name under the sidebar logo is redundant (the shop/app is shown in the header). */
#app-brand-product {
  display: none;
}

.shop-select-header {
  margin-bottom: 24px;
}

.shop-select-header h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  color: var(--navy);
  margin: 0 0 6px;
}

.shop-select-header p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* Kilépés — ghost, navy háttéren fehér, panel felett */
.shop-logout-btn {
  position: absolute;
  top: 20px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color var(--transition-fast);
}

.shop-logout-btn:hover { color: #fff; }

/* Vissza gomb — másodlagos, panel bal felső */
.shop-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 14px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-strong);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.shop-back-btn:hover { background: var(--color-surface-subtle); }

/* Kártyák */
.shop-select-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 0;
}

.select-shop-card {
  background: var(--color-surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

/* Admin kártya — navy */
.select-shop-card.is-admin {
  background: var(--navy);
  border-color: var(--navy);
}

/* Monogram háttér-elem */
.select-shop-card .card-monogram {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 72px;
  font-weight: var(--weight-bold);
  color: rgba(16, 42, 61, 0.07);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.select-shop-card.is-admin .card-monogram {
  color: rgba(255, 255, 255, 0.06);
}

/* Kártya ikon */
.card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(16, 42, 61, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
  color: var(--navy);
}

.select-shop-card.is-admin .card-icon {
  background: rgba(255, 255, 255, 0.12);
  color: var(--green);
}

/* App kártya — vertikális layout */
.select-shop-card.is-app {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.select-shop-card.is-app .card-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.select-shop-card.is-app .card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--navy);
  color: var(--green);
  font-size: 22px;
  flex-shrink: 0;
}

/* Kártya tartalom */
.card-body {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.card-name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--navy);
  margin-bottom: 5px;
}

.select-shop-card.is-admin .card-name { color: #fff; }

.card-badges {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.card-badge-type {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.3px;
  background: rgba(16, 42, 61, 0.10);
  color: var(--navy);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}

.select-shop-card.is-admin .card-badge-type {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
}

.card-badge-active {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  background: var(--green-soft-bg);
  color: var(--green-soft-text);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}

.card-badge-admin {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  background: rgba(127, 184, 61, 0.25);
  color: var(--green);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}

.card-meta {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.6;
}

.select-shop-card.is-admin .card-meta { color: rgba(255, 255, 255, 0.5); }

/* CTA gomb a kártyán */
.select-shop-button {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: var(--primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius);
  padding: 9px 18px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-family: var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.select-shop-button:hover { background: var(--primary-hover); }

.select-shop-button:disabled {
  background: var(--color-border-strong);
  cursor: not-allowed;
}

/* App kártya gombja — teljes szélesség */
.select-shop-card.is-app .select-shop-button {
  width: 100%;
}

/* Háttér ikon app kártyákon */
.card-bg-icon {
  position: absolute;
  right: -4px;
  bottom: -8px;
  font-size: 64px;
  color: rgba(16, 42, 61, 0.05);
  pointer-events: none;
}

/* === NAV CONTEXT ===
   A két felső szintű admin-rács (Ügyfelek / Alkalmazások) vizuális kontextus-jelzése:
   színes shell + kontextus-fejléc + kártya-szintű bal-szegély. A Beállítások platform-elem
   önálló gombként a fejlécben (nem app-típus kártya). */

/* Beállítások gomb — az Alkalmazások nézet kontextus-fejlécében, navy primary */
.nav-settings-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: #fff;
  background: var(--c-navy);
  border: none;
  border-radius: var(--radius);
  padding: 7px 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.nav-settings-btn:hover { background: var(--c-navy-hover); }

/* A rács maga lesz a shell: színezett háttér + padding; a fejléc full-width grid-elem */
.shop-select-list.nav-context-shell {
  padding: 14px;
  border-radius: var(--radius-md);
}
.shop-select-list.ctx-clients { background: #EBF4FF; }
.shop-select-list.ctx-apps    { background: #EEF6E4; }

.nav-context-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(16, 42, 61, 0.08);
}
.nav-ctx-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  color: #fff;
}
.nav-ctx-icon.ctx-clients { background: #378ADD; }
.nav-ctx-icon.ctx-apps    { background: #639922; }

.nav-ctx-titles { line-height: 1.25; }
.nav-ctx-title  { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--navy); }
.nav-ctx-sub    { font-size: var(--text-xs); color: var(--muted); margin-top: 1px; }

/* Réteg 3 — kártya-szintű jelzés. Az Adminisztráció (.is-admin) navy kártya változatlan. */
.shop-select-list.ctx-clients .select-shop-card:not(.is-admin) {
  border-left: 3px solid #378ADD;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.shop-select-list.ctx-clients .select-shop-card:not(.is-admin) .card-icon {
  background: #E6F1FB;
  color: #378ADD;
}
.shop-select-list.ctx-clients .select-shop-card:not(.is-admin) .card-badge-type {
  background: #E6F1FB;
  color: #185FA5;
  border: 1px solid #B5D4F4;
}

.shop-select-list.ctx-apps .select-shop-card {
  border-left: 3px solid #639922;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.shop-select-list.ctx-apps .select-shop-card .card-badge-type {
  background: #EAF3DE;
  color: #3B6D11;
  border: 1px solid #C0DD97;
}

.login-form {
  display: grid;
  gap: var(--space-8);
}

.field-group {
  display: grid;
  gap: 7px;
}

.field-group label {
  color: var(--color-text-strong);
  font-size: var(--text-base);
  font-weight: 650;
}

.field-group input,
.composer textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--text);
}

.field-group input {
  height: 44px;
  padding: 0 12px;
}

.password-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
}

.ghost-button,
.primary-button,
.sync-action-button {
  min-height: 40px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: 0 14px;
  font-weight: var(--weight-bold);
}

.primary-button,
.sync-action-button {
  background: var(--primary);
  color: var(--color-on-primary);
}

.primary-button:hover,
.sync-action-button:hover {
  background: var(--primary-hover);
}

.primary-button:disabled,
.sync-action-button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.sync-cancel-button {
  margin-top: 8px;
  background: var(--color-danger);
}

.sync-cancel-button:hover {
  background: var(--color-danger-hover);
}

.ghost-button {
  background: var(--color-surface);
  border-color: var(--line);
  color: var(--color-text-strong);
}

.ghost-button:hover {
  background: var(--panel-muted);
}

/* Letiltott állapot: enélkül a gomb kattinthatónak LÁTSZIK, pedig nem az (a wizard-váz az első
   lépésen letiltja a „Vissza"-t, ha nincs hova kilépnie). */
.ghost-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ghost-button:disabled:hover {
  background: var(--color-surface);
}

.password-toggle {
  min-width: 78px;
}

.form-error,
.sync-message {
  min-height: 20px;
  margin: 0;
  color: var(--error);
  font-size: var(--text-base);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* === LOGIN RESKIN — FlowFactory split layout =======================
   Csak a #login-view-t érinti. A meglévő auth-logika változatlan: az
   #login-form / #email / #password / #login-button / #show-pricing hookok
   megmaradnak; a stílus scope-olva van a .login-form-panel-re, hogy más
   űrlapokat ne befolyásoljon. */

/* A login-screen full-bleed konténer, ha a split benne van (a régi navy
   középre-igazítás + dekor-körök kikapcsolva ennél a nézetnél). */
.login-screen:has(.login-split) {
  display: block;
  padding: 0;
  background: var(--navy);
}
.login-screen:has(.login-split)::before,
.login-screen:has(.login-split)::after { display: none; }

.login-split {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* --- Bal: brand panel --- */
.login-brand-panel {
  position: relative;
  flex: 0 0 52%;
  background: var(--login-panel-bg);
  padding: 56px 56px 48px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.login-brand-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.login-bg-ring--1 { stroke: var(--login-ring-1); }
.login-bg-ring--2 { stroke: var(--login-ring-2); }
.login-bg-ring--3 { stroke: var(--login-ring-3); }
.login-bg-ring--4 { stroke: var(--login-ring-4); }
.login-brand-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.login-logo {
  height: 144px;
  width: auto;
  align-self: flex-start;
}
.login-tagline-lead {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 14px;
}
.login-tagline-grad {
  background: linear-gradient(90deg, var(--login-grad-from), var(--login-grad-to));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.login-tagline-white { color: #ffffff; }
.login-tagline-sub {
  font-size: 17px;
  color: var(--login-tagline-sub);
  max-width: 340px;
  line-height: 1.65;
  margin: 0;
}
.login-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: var(--login-feature);
}
.login-feature-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--login-grad-from), var(--login-grad-to));
  flex-shrink: 0;
}

/* --- Jobb: form panel --- */
.login-form-panel {
  flex: 1 1 48%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 58px 48px;
}
.login-form-inner { width: min(100%, 432px); }
.login-form-head { margin-bottom: 34px; }
.login-form-head h1 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
  color: var(--navy);
}
.login-form-sub {
  margin: 0;
  font-size: 16px;
  color: #7a8fa0;
}

/* Mezők — scoped a login form panelre */
.login-form-panel .field-group label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #3a5068;
}
.login-form-panel .field-group input {
  height: 50px;
  font-size: 16px;
  border: 1.5px solid #dde6f0;
  border-radius: 8px;
  background: #f6fafc;
  color: var(--navy);
}
.login-form-panel .field-group input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(94, 158, 46, 0.12);
}
.login-form-panel .password-control {
  display: block;
  position: relative;
}
.login-form-panel .password-control input { padding-right: 72px; }
.login-form-panel .password-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 600;
  color: var(--primary);
}
.login-form-panel .password-toggle:hover { background: none; opacity: 0.8; }

.login-form-panel .primary-button {
  width: 100%;
  height: 53px;
  margin-top: 4px;
  background: var(--primary);
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}
.login-form-panel .primary-button:hover { background: var(--primary-hover); }

.login-divider {
  height: 1px;
  background: #edf2f7;
  margin: 24px 0 16px;
}
.login-form-panel .pricing-link {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  font-size: 16px;
  color: #9aacbe;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.login-form-panel .pricing-link:hover { color: var(--primary); }

/* Mobil: egymás alá (brand felül, form alatta) */
@media (max-width: 768px) {
  .login-split { flex-direction: column; }
  .login-brand-panel { flex: none; padding: 32px 28px; min-height: 360px; gap: 28px; }
  .login-brand-content { gap: 28px; }
  .login-logo { height: 104px; }
  .login-form-panel { flex: none; padding: 36px 28px; }
}

/* ── APP SHELL ───────────────────────────────────────────── */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── HEADER ──────────────────────────────────────────────── */
/* === HEADER (reskin v2) ============================================
   Bal: FlowFactory logó + shop-kijelzés (nem interaktív) + szerep-badge.
   Jobb: Alkalmazások gomb + profil-chip legördülővel. A navigáció/logout/
   dispatch funkció változatlan; csak a megjelenés + profil-legördülő új. */
.app-header {
  background: var(--header-bg);
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  gap: 14px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--navy-line);
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

/* FlowFactory márkajel (világos lockup — minden aloldalon látszik) */
.app-brand { display: flex; align-items: center; flex-shrink: 0; }
.app-brand-logo { height: 26px; width: auto; display: block; }

.app-header-sep {
  width: 1px;
  height: 26px;
  background: var(--navy-line);
  flex-shrink: 0;
}

/* Shop = csak kijelzés (nem kattintható, nincs nyíl/keret) */
.header-shop { display: flex; align-items: center; gap: 9px; min-width: 0; }
.header-shop-icon { color: var(--green); font-size: 18px; flex-shrink: 0; }
.header-datasource {
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--on-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Szerep-badge (a korábbi "Agency nézet" indikátor átstílozva; a megjelenítés
   feltétele változatlan — a JS ugyanúgy tölti/üríti a #client-label szöveget) */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(127, 184, 61, 0.5);
  color: var(--green);
  font-size: 11.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
}
.role-badge i { font-size: 14px; }

.app-header-spacer { flex: 1; }

/* ── HEADER: jobb klaszter (Alkalmazások gomb + profil-chip) ── */
.hbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--header-ctl-line);
  color: var(--header-ctl-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--weight-medium);
  padding: 8px 13px;
  border-radius: var(--radius-ctl);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.hbtn:hover { background: var(--navy-overlay); color: #fff; }
.hbtn i { font-size: 17px; }

.header-profile { position: relative; }
.header-profile-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--navy-overlay);
  border: 1px solid var(--header-ctl-line);
  padding: 5px 11px 5px 6px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background var(--transition-fast);
}
.header-profile-chip:hover { background: rgba(255, 255, 255, 0.12); }
.header-profile-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: var(--weight-semibold);
  font-size: 12.5px;
  flex-shrink: 0;
}
.header-profile-name {
  font-size: 14px;
  color: #EAF0F2;
  font-weight: var(--weight-medium);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-profile-chev { color: #8DA2AD; font-size: 15px; transition: transform var(--transition-fast); }
.header-profile.is-open .header-profile-chev { transform: rotate(180deg); }

.header-profile-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 230px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(16, 42, 61, 0.18);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
.header-profile.is-open .header-profile-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.header-profile-who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.header-profile-who-name { font-weight: var(--weight-semibold); font-size: 14px; }
.header-profile-who-email { font-size: 12.5px; color: var(--muted); margin-top: 2px; word-break: break-all; }
.header-profile-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.header-profile-item i { font-size: 18px; color: var(--muted); width: 18px; text-align: center; }
.header-profile-item:hover { background: var(--panel-muted); }
.header-profile-item--danger, .header-profile-item--danger i { color: var(--color-danger); }

/* ── HEADER: content-creation buttons ── */
.btn-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--weight-regular);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  padding: 5px 13px;
  transition: opacity 0.15s;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.82);
}

.btn-header:hover { opacity: 0.80; }

.btn-header--secondary { color: rgba(255, 255, 255, 0.65); }

.btn-header--cta {
  background: var(--color-primary);
  border: 2px solid transparent;
  color: #fff;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  box-shadow: 0 0 0 3px rgba(127, 184, 61, 0.28);
}

.btn-header--cta:hover { opacity: 0.88; }

.btn-header-icon { font-size: 15px; }

.app-header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-nav {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.80);
  font-family: var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.btn-nav:hover { background: rgba(255, 255, 255, 0.14); }

.btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px 8px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.40);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.btn-logout:hover { color: rgba(255, 255, 255, 0.75); }

/* ── BODY (sidebar + content) ────────────────────────────── */
.app-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: calc(100vh - 60px);
}

/* === SIDEBAR (reskin v2) ===========================================
   266px navy sáv: szinkron-kártya (felül), ikonos könnyed navigációs sorok,
   alul összecsukó. A dispatch/aktív-állapot/szinkron-handler változatlan. */
.app-sidebar {
  width: 266px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 14px;
  overflow-y: auto;
  border-right: 1px solid var(--sidebar-line);
}

/* Szinkron-kártya (kiemelt panel a sávban) */
.sync-card {
  background: var(--navy-raise);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  padding: 12px;
}

.sidebar-sync {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-sync-btn {
  width: 100%;
  background: var(--primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-ctl);
  padding: 11px 12px;
  font-size: 14.5px;
  font-weight: var(--weight-semibold);
  font-family: var(--font-sans);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: background var(--transition-fast);
}

.sidebar-sync-btn:hover { background: var(--green-dark); }

.sidebar-sync-btn:disabled {
  cursor: wait;
  opacity: 0.68;
}

.sidebar-sync-cancel {
  background: var(--color-danger);
}

.sidebar-sync-cancel:hover { background: var(--color-danger-hover); }

.sidebar-sync-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--on-navy-muted);
}

.sidebar-sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(127, 184, 61, 0.18);
  flex-shrink: 0;
}

/* Last sync older than 2 days: flag it in red as a gentle "data may be stale" hint. */
.sidebar-sync-meta.is-stale { color: var(--c-red-500); font-weight: var(--weight-semibold); }
.sidebar-sync-meta.is-stale .sidebar-sync-dot { background: var(--c-red-500); box-shadow: 0 0 0 3px rgba(210, 69, 69, 0.18); }

/* Szekció-címke + összecsukó */

.sidebar-foot {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--navy-line);
}

.sidebar-collapse {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  color: var(--on-navy-faint);
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 9px 13px;
  border-radius: var(--radius-ctl);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar-collapse:hover { background: var(--navy-overlay); color: var(--on-navy-muted); }
.sidebar-collapse i { font-size: 20px; width: 20px; text-align: center; }

/* Sync progress (kept; recoloured for the navy sidebar) */
.sync-progress {
  display: grid;
  gap: var(--space-5);
}

.sync-progress-bar {
  height: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
}

.sync-progress-fill {
  display: block;
  /* Width is data, not style: JS sets the --sync-progress custom property (0%–100%). */
  width: var(--sync-progress, 0%);
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-pill);
  transition: width 180ms ease;
}

.sync-progress-steps {
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.sync-progress-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--text-sm);
}

.sync-progress-step strong {
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--text-xs);
}

.sync-step-main {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.sync-step-detail {
  min-height: 15px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.40);
  font-size: var(--text-2xs);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-step-dot {
  width: 9px;
  height: 9px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill);
}

.sync-progress-step.is-running .sync-step-dot {
  background: var(--color-warning);
}

.sync-progress-step.is-running strong {
  color: var(--c-amber-400);
}

.sync-progress-step.is-done .sync-step-dot {
  background: var(--primary);
}

.sync-progress-step.is-done strong {
  color: var(--green);
}

.sync-progress-step.is-failed .sync-step-dot {
  background: var(--c-red-500);
}

.sync-progress-step.is-failed strong {
  color: var(--c-red-500);
}

.sync-message {
  color: var(--c-red-500);
}

.sync-message:empty {
  display: none;
}

/* ── SIDEBAR MENU ────────────────────────────────────────── */
.sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sidebar-menu:empty { display: none; }

/* The collapsible wrapper is kept (the existing toggle handler drives `.is-open`),
   but visually it reads as a flat group of headers + items per the new design. */
.menu-section {
  display: block;
}

.menu-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 4px;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.30);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition-fast);
  background: none;
  border: none;
  width: 100%;
  font-family: var(--font-sans);
  text-align: left;
}

.menu-group-header:hover { color: rgba(255, 255, 255, 0.55); }

.menu-group-chevron {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.20);
  transition: transform var(--transition-fast);
}

.menu-section.is-open .menu-group-chevron {
  transform: rotate(180deg);
}

.menu-section:not(.is-open) .menu-section-content {
  display: none;
}

.menu-list {
  display: block;
}

.menu-item {
  display: block;
  width: 100%;
  padding: 7px 14px 7px 22px;
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: rgba(255, 255, 255, 0.55);
  background: none;
  border: none;
  border-left: 2px solid transparent;
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.menu-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

/* Admin: UNAS menüsorrend-szerkesztő (SPEC-unas-modularizacio.md §7). Fel/le gombos lista —
   nem drag&drop, mert billentyűvel is működnie kell. */
.admin-order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); max-width: 560px; }
.admin-order-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.admin-order-index { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 1.8em; }
.admin-order-label { flex: 1; }

/* Admin: modul-kapcsolók a datasource-szerkesztőben (SPEC-unas-modularizacio.md §5.2). */
.admin-modules { display: grid; gap: var(--space-3); }
.admin-module-row { display: flex; align-items: center; gap: var(--space-5); cursor: pointer; }
.admin-module-row input { margin: 0; }
.admin-module-label { flex: 1; }
.admin-module-tag {
  font-size: var(--text-xs);
  padding: 1px var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
  color: var(--color-text-subtle);
}
.admin-module-row.is-core .admin-module-tag { background: var(--color-surface-subtle); }

/* Alap- és extra modulok határa a sávban: hajszálvonal + halvány felirat (SPEC-unas-modularizacio.md §8). */
.menu-extra-sep {
  margin: 8px 13px 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.30);
}
/* Az extra-blokk ZÁRÓ határa: csak vonal, felirat nélkül (utána jön az Archívum). */
.menu-extra-sep--plain { padding-top: 0; margin: 6px 13px 4px; }
.app-sidebar.collapsed .menu-extra-sep { font-size: 0; margin: 8px 8px 2px; padding-top: 8px; }

/* Zárolt (meg nem vett) modul menüpontja: LÁTSZIK, szaggatott kerettel és „EXTRA" címkével —
   kattintásra upsell. A szaggatott keret jelzi, hogy más állapotú, a címke pedig megmondja, miért. */
/* FIGYELEM a szelektorra: a lapos menüpontokra a `.sidebar-menu .nav-item` szabály él (KÉT
   osztály), ezért egy puszta `.menu-item--locked` (egy osztály) NEM ütné meg — se a szín, se a
   keret nem érvényesülne, és a zárolt sor pontosan úgy nézne ki, mint a többi. Ezért kell a
   `.nav-item` is a szelektorba. */
.sidebar-menu .nav-item.menu-item--locked {
  /* Lényegesen halványabb, mint az engedélyezett menüpont — a kettőnek első ránézésre
     meg kell különböztethetőnek lennie, mert az „EXTRA" címkét mindkettő viseli. */
  color: rgba(255, 255, 255, 0.24);
  cursor: pointer;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  /* A keret 2px-et adna a magassághoz — a paddingból vesszük vissza, hogy a zárolt sorok
     pontosan egy vonalban maradjanak a többivel (6px/11px a .sidebar-menu .nav-item-en). */
  padding: 5px 10px;
}
.sidebar-menu .nav-item.menu-item--locked:hover {
  color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.32);
}
.menu-item-extra {
  margin-left: auto;
  /* SOSEM zsugorodhat (különben „EXT…"-re csonkul) — a helyet a felirattól vesszük el. */
  flex: none;
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.55);
}
/* A zárolt sor címkéje is halványabb, hogy az egész sor egységesen tompább legyen. */
.sidebar-menu .nav-item.menu-item--locked .menu-item-extra { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.30); }
/* Aktív (zöld hátterű) menüponton a címke a zöldön is olvasható maradjon. */
.menu-item.is-active .menu-item-extra { background: rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.88); }
.app-sidebar.collapsed .menu-item-extra { display: none; }

/* Inaktív fiók („Nincs hozzáférés") ablak — a `.set-modal` vázára épül (app.js `showAccountInactiveModal`). */
.account-inactive-modal { max-width: 480px; }
.account-inactive-lead { margin: 0; color: var(--color-text); font-size: var(--text-base); line-height: var(--leading-normal); }
.account-inactive-lead a { color: var(--navy); font-weight: var(--weight-semibold); }

/* Modul-upsell ablak (a Beállítások modal-vázára épül, l. `.set-modal`). */
.upsell-modal { max-width: 520px; }
.upsell-lead { margin: 0 0 var(--space-8); color: var(--color-text); font-size: var(--text-base); line-height: var(--leading-normal); }
.upsell-note { margin: 0; color: var(--muted); font-size: var(--text-sm); }

.menu-item.is-active {
  color: #fff;
  font-weight: var(--weight-semibold);
  border-left-color: var(--green);
  background: rgba(127, 184, 61, 0.10);
}

/* Navigációs sorok (reskin v2): könnyed, ikonos sorok a UNAS flat menühöz. Az elem
   megtartja a .menu-item osztályt (is-active + data-action dispatch változatlan);
   a .nav-item adja az új sor-alapú megjelenést + ikont. */
.sidebar-menu .nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  /* 8px (a korábbi 11px helyett): a UNAS modularizáció 13 menüpontja 11px-nél 813px-re nőtt, ami
     még egy 1440x900-as gépen sem fér el. A sáv BELSŐ görgetése hatástalan (PLATFORM-STACK §11),
     tehát kilógásnál az egész ablak görögne. Mérve: SPEC-unas-modularizacio.md §9.
     A vízszintes 11px (a korábbi 13 helyett) az „EXTRA" címkének ad helyet: mérve a
     „Teljes Webshop SEO" felirat 134px-t kér, 13px-es paddinggel viszont csak 124-et
     kapott, tehát csonkolódott. */
  padding: 6px 11px;
  border: none;
  border-radius: var(--radius-ctl);
  background: none;
  color: var(--on-navy-muted);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-medium);
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar-menu .nav-item > i {
  font-size: 20px;
  width: 20px;
  text-align: center;
  color: var(--on-navy-faint);
  flex-shrink: 0;
  transition: color var(--transition-fast);
}
.sidebar-menu .nav-item > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-menu .nav-item:hover { background: var(--navy-overlay); color: #fff; }
.sidebar-menu .nav-item:hover > i { color: var(--on-navy-muted); }
.sidebar-menu .nav-item.is-active { background: var(--primary); color: #fff; font-weight: var(--weight-semibold); }
.sidebar-menu .nav-item.is-active > i { color: #fff; }
.sidebar-menu .nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--green);
}
.menu-list--flat { display: flex; flex-direction: column; gap: 2px; }
/* A lapos menücsoport feje (cím + darabszám): szerkezeti horog, alapból rejtett — a brand-blokk kapcsolja be
   (PLATFORM-STACK §21). A FlowFactory-arcon a lapos menü fej nélküli marad. */
.menu-flat-head { display: none; }
/* Egy MÁSODIK lapos csoport (pl. a Total dashboard „Teendők”-je) a FlowFactory-arcon is kap egy halk, feliratos
   elválasztót — az első csoport feje továbbra is rejtett; az Adlogic-arc saját csoport-sávja érintetlen. */
html:not([data-brand="adlogic"]) .menu-list--flat ~ .menu-flat-head {
  display: block;
  margin: 10px 13px 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
html:not([data-brand="adlogic"]) .menu-list--flat ~ .menu-flat-head .menu-flat-count { display: none; }
html:not([data-brand="adlogic"]) .app-sidebar.collapsed .menu-list--flat ~ .menu-flat-head { font-size: 0; margin: 8px 8px 2px; }
/* Menüpont-számláló (pl. a sürgős teendők száma) — az app teszi ki, ha van mit mutatni. */
.menu-item-count {
  margin-left: auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--td-advice-bad-bar);
  color: var(--color-on-primary);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  line-height: 18px;
  text-align: center;
}
.app-sidebar.collapsed .menu-item-count { display: none; }

/* Összecsukott sáv (74px, csak-ikonos) — munkamenet-szintű (in-memory) állapot. */
.app-sidebar.collapsed { width: 74px; }
.app-sidebar.collapsed .sync-card,
.app-sidebar.collapsed .nav-item > span,
.app-sidebar.collapsed .sidebar-collapse-label { display: none; }
.app-sidebar.collapsed .nav-item { justify-content: center; padding: 11px 0; }
.app-sidebar.collapsed .nav-item.is-active::before { display: none; }
.app-sidebar.collapsed .sidebar-collapse { justify-content: center; padding: 9px 0; }

.empty-list {
  color: var(--muted);
  font-size: var(--text-base);
}

.recent-section {
  min-height: 0;
}

/* ── CONTENT ─────────────────────────────────────────────── */
.app-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: var(--bg);
}

.content-page-header {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 13px 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.content-page-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--navy);
}
/* Az oldalcím fölötti felső címke (eyebrow, `{{brand.app_label}}`): FlowFactory-n üres → rejtett. */
.content-page-eyebrow { margin: 0; }
.content-page-eyebrow:empty { display: none; }

.client-label {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.app-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.count-separator {
  color: var(--line-strong);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 24px;
  padding: 0 8px;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-heavy);
}

.status-pill.is-muted {
  background: var(--panel-muted);
  color: var(--muted);
}

.content-region {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--ff-page-pad-y) var(--ff-page-pad-x);
}

.empty-state {
  width: min(100%, 640px);
  margin: 16vh auto 0;
  text-align: center;
}

.empty-state h2 {
  margin: 0 0 10px;
  font-size: var(--text-3xl);
}

.empty-state p {
  margin: 0;
  color: var(--muted);
}

.message {
  display: grid;
  gap: 7px;
  width: min(100%, 760px);
  margin: 0 auto 18px;
}

.message-role {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 750;
}

.message-bubble {
  padding: 13px 15px;
  border-radius: var(--radius);
  line-height: 1.55;
  white-space: pre-wrap;
}

.message.user .message-bubble {
  margin-left: auto;
  background: var(--primary);
  color: var(--color-on-primary);
}

.message.assistant .message-bubble {
  background: var(--color-surface-alt);
  color: var(--text);
}

.composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  padding: 16px 26px 22px;
  border-top: 1px solid var(--line);
  background: var(--c-white-94);
}

.composer textarea {
  min-height: 48px;
  max-height: 180px;
  resize: none;
  padding: 13px 14px;
  line-height: 1.45;
}

.send-button {
  align-self: end;
  min-width: 92px;
  height: 48px;
}

.selected-shop-card {
  width: 100%;
}

/* ---- Report chat-bubble + input primitives (shared, not table-related) --------------- */

.report-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  line-height: 1.45;
  margin: 0;
}

.report-msg.is-bot {
  align-self: flex-start;
  background: var(--panel-muted);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.report-msg.is-user {
  align-self: flex-end;
  background: var(--primary-soft);
  color: var(--primary-hover);
  font-weight: var(--weight-semibold);
  border-bottom-right-radius: 4px;
}

.report-input {
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--color-surface);
}

.report-input:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.report-error {
  color: var(--error);
  font-size: var(--text-sm);
  min-height: 0;
}

.report-error:empty {
  display: none;
}

.report-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.report-result {
  /* Allow the result section to span the full content width, regardless of any parent
     wizard / chat column. */
  width: 100%;
  min-width: 0;
}

/* ---- Report parameter bar (compact chips; replaces the old chat-style wizard) --------- */

.report-loading,
.report-error {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.report-error { color: var(--c-red-500); }

.report-params {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

/* Vízszintes elrendezés: a kérdés-blokkok egymás mellett, függőleges hajszálvonallal elválasztva. */
.report-params-blocks { display: flex; align-items: stretch; }
.report-params-blocks > .param-row + .param-row {
  border-left: 1px solid var(--line);
}

.param-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 2px 12px;
  min-width: 0;
  flex: 1 1 0;
}
/* A riport-választó kapja a maradék helyet (ott van a legtöbb chip); a többi blokk a tartalmához
   igazodik, így a „Bontás" nem foglal fölöslegesen széles sávot. */
.report-params-blocks > .param-row { flex: 0 1 auto; }

.param-label {
  font-size: 11px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Szűk tartalom-területen a blokkok egymás alá kerülnek, vízszintes vonallal elválasztva
   (a mockup „B" változata) — így sok chip mellett sem törik szét az elrendezés. */
@media (max-width: 1100px) {
  .report-params-blocks { flex-direction: column; }
  .report-params-blocks > .param-row + .param-row {
    border-left: none;
    border-top: 1px solid var(--line);
    padding-top: 6px;
    margin-top: 2px;
  }
  .param-row { flex-direction: row; align-items: center; gap: 10px; }
  .report-params-blocks > .param-row{ flex: 1 1 auto; }
  .param-label { min-width: 78px; }
}

.param-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.param-option {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-subtle);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.param-option:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.param-option.is-selected {
  background: var(--primary);
  color: var(--color-on-primary);
  border-color: var(--primary);
}

.param-custom-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.param-dash { color: var(--muted); }

.param-input {
  min-height: 30px;
  padding: 4px 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.param-input:focus {
  outline: none;
  border-color: var(--primary);
}

.report-params-meta {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}

/* ---- Költségelemzés — „Frissítés most" sáv + kapcsolat-hiány üzenet --------------------- */

/* Figyelmeztető sáv a riport fölött (jelenleg: Költségelemzés Google Ads kapcsolat nélkül —
   a report lefut, csak a hirdetési oszlopok 0-k). A korábbi, teljes képernyős
   `.report-connect-required` blokkoló nézet ezzel megszűnt. */
.report-notice {
  display: flex; align-items: center; gap: var(--space-4);
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--color-danger-soft, rgba(200, 60, 40, .08));
  color: var(--color-text-strong);
  font-size: var(--text-sm);
}
.report-notice i { color: var(--color-danger, #c8442c); }

/* ---- .report-table — navy-header, striped table style ---------------------------------- */
/* Legacy: the live UNAS report tables migrated to the shared `.ff-table` (FF-TABLE) system. */

.report-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.report-table thead tr { background: var(--navy); }

.report-table thead th {
  padding: 9px 13px;
  text-align: left;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.70);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  /* Header may wrap onto multiple lines so a long label doesn't dictate column width —
     the table fills the available width and only scrolls horizontally as a last resort. */
  white-space: normal;
  line-height: 1.2;
  vertical-align: bottom;
  cursor: pointer;
  user-select: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.report-table thead th:last-child { border-right: none; }

.report-table thead th:hover { background: var(--navy-hover); }

/* Section title above each table in the combined fizetés+szállítás view. */
.report-section-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
  margin: 18px 0 8px;
}

.report-table tbody tr:nth-child(odd)  { background: var(--panel); }
.report-table tbody tr:nth-child(even) { background: var(--color-surface-subtle); }
.report-table tbody tr:hover { background: var(--primary-soft); }

.report-table tbody td {
  padding: 8px 13px;
  color: var(--color-text-row);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.report-table tbody td:last-child { border-right: none; }

.report-table tbody td:first-child {
  color: var(--muted);
  font-size: var(--text-xs);
}

@media (max-width: 960px) {
  :root {
    --sidebar-width: 260px;
  }

  .shop-select-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  /* Fejléc: keskeny nézetben a klaszterek ne fussanak egymásra — a szerep-badge
     és a profil-név elrejtve (a monogram marad), kisebb köz/padding. */
  .app-header { gap: 10px; padding: 0 14px; }
  .role-badge { display: none; }
  .header-profile-name { display: none; }
  .header-profile-chip { padding: 5px 8px 5px 5px; }

  .app-body {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  .app-sidebar {
    width: 100%;
    border-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .app-content {
    overflow: visible;
  }

  .content-page-header {
    flex-wrap: wrap;
  }

  .content-region,
  .composer {
    padding-right: 16px;
    padding-left: 16px;
  }

  .composer {
    grid-template-columns: 1fr;
  }

  .send-button {
    width: 100%;
  }
}

@media (max-width: 460px) {
  .login-panel {
    padding: 24px;
  }

  .password-control {
    grid-template-columns: 1fr;
  }

  .brand-mark {
    align-items: flex-start;
    flex-direction: column;
  }

  .brand-product {
    padding-left: 0;
    border-left: 0;
  }
}

/* ===== SocialMedia: prompt-schema editor (admin.schema_edit) ===== */

.ps-editor {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-8);
  align-items: start;
  width: 100%;
}

.ps-list-pane {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 12px;
}

.ps-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ps-pane-head h3 {
  margin: 0;
  font-size: var(--text-md);
}

/* Category filter above the schema list (prompt_categories-driven tabs). */
.ps-list-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: 10px;
}

/* Required category select at the top of the schema editor body. */
.ps-category-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

.ps-category-row select {
  max-width: 220px;
}

.ps-list-item .ps-list-btn .badge {
  margin-left: var(--space-2);
}

.ps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ps-list-item .ps-list-btn {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius);
  padding: 7px 9px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.ps-list-item .ps-list-btn:hover {
  background: var(--primary-soft);
}

.ps-list-item.is-active .ps-list-btn {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: var(--weight-bold);
}

.ps-list-empty,
.ps-hint,
.ps-empty {
  color: var(--muted);
  font-size: var(--text-sm);
}

.ps-edit-pane {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 14px;
  min-width: 0;
}

.ps-edit-head {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ps-current {
  font-weight: 750;
}

.ps-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-left: auto;
}

.ps-status {
  min-height: 18px;
  margin: 4px 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.ps-status.is-error {
  color: var(--color-danger);
}

.ps-edit-title {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

/* A séma egész szerkesztője egy függőleges folyam: mező-kártyák → "+ hozzáadás" → előnézet. */
.ps-edit-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.ps-tree {
  min-width: 0;
}

/* Mező = összecsukható kártya (a közös .card primitívre épül). */
.ps-card .card-head {
  flex-wrap: wrap;
}

.ps-card-title {
  flex: 1 1 200px;
  min-width: 140px;
  font-weight: var(--weight-medium);
}

.ps-type-select {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--color-surface-subtle);
  color: var(--color-text-strong);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 6px 8px;
  cursor: pointer;
}

/* A fel/le nyilak a drag-fogantyú melletti fallback — kompakt, halvány. */
.ps-move {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.ps-move-btn {
  width: 26px;
  height: 18px;
  color: var(--muted);
}

.ps-move-btn .icon-svg {
  width: 12px;
  height: 12px;
}

/* A technikai `name` háttérben: halvány azonosító-sor, igény esetén szerkeszthető. */
.ps-id-line {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: 8px;
}

.ps-id-line code {
  font-family: var(--font-mono);
  color: var(--color-text-strong);
}

.ps-id-edit {
  border: none;
  background: transparent;
  color: var(--color-focus);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-xs);
  padding: 0;
}

.ps-field-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ps-field-help {
  font-size: var(--text-xs);
  color: var(--muted);
}

.ps-children {
  margin: 10px 0 0 14px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
}

.ps-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Értékkészlet: fejléces, párba rendezett opciósorok (megjelenő szöveg / érték a promptba). */
.ps-option {
  display: grid;
  grid-template-columns: 1fr 1fr 32px;
  gap: var(--space-4);
  align-items: center;
}

.ps-option-head {
  padding: 0 2px;
}

.ps-add-sub,
.ps-add-opt {
  margin-top: 10px;
}

.ps-add-opt {
  width: auto;
}

/* Előnézet: alapból olvasható Prompt-előnézet; a nyers JSON diszkrét kapcsoló mögött. */
.ps-preview {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: 12px 14px;
}

.ps-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: 10px;
}

.ps-preview-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}

.ps-preview-tabs {
  display: flex;
  gap: var(--space-3);
}

.ps-preview-prompt {
  font-size: var(--text-base);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ps-pv-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.ps-pv-label {
  color: var(--muted);
}

.ps-pv-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-left: 12px;
  border-left: 2px solid var(--line);
}

.ps-preview-json {
  margin: 0;
  max-height: 50vh;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-row);
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 900px) {
  .ps-editor {
    grid-template-columns: 1fr;
  }
}

/* Általános gomb-variánsok — a SocialMedia image editor (és bárki) használja. */
.ps-btn {
  border: 1px solid var(--line);
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 6px 10px;
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  color: inherit;
}

.ps-btn:hover {
  background: var(--primary-soft);
}

/* Letiltott gomb — 2026-09-03, mérve. A `.ps-btn`-nek eddig NEM volt letiltott állapota: a
   megerősítő ablakok (tartalomgenerálás becslése, árazási előnézet) letiltják a „Indítás" gombot,
   ha nincs mit indítani, de a gomb ugyanúgy zöld és kattinthatónak látszott — a felhasználó
   rákattint, és NEM TÖRTÉNIK SEMMI, magyarázat nélkül. A hover-kiemelést is vissza kell venni,
   különben a letiltott gomb a kurzor alatt „életre kel". */
.ps-btn:disabled, .ps-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.35);
}
.ps-btn:disabled:hover, .ps-btn[disabled]:hover { background: var(--color-surface); }
.ps-btn.ps-primary:disabled:hover, .ps-btn.ps-primary[disabled]:hover { background: var(--primary); }

.ps-btn.ps-mini {
  padding: 3px 7px;
  font-size: var(--text-xs);
}

/* Nagy méret az elsődleges, „ez a lap fő művelete” gombokhoz (mentés, indítás). A `ps-mini`
   szimmetrikus párja: a méret a gomb SÚLYÁT közli, nem a színe egyedül. */
.ps-btn.ps-lg {
  padding: 10px 22px;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
}

.ps-btn.ps-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--color-on-primary);
}

.ps-btn.ps-primary:hover {
  filter: brightness(0.96);
}

.ps-btn.ps-danger {
  color: var(--color-danger);
}

.ps-btn.ps-danger:hover {
  background: var(--c-red-100);
}

/* ===== SocialMedia: image editor (creative.image_editor) ===== */

.img-editor {
  width: 100%;
}

.img-tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.img-tab {
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 9px 14px;
  font: inherit;
  cursor: pointer;
  color: var(--muted);
}

.img-tab:hover {
  background: var(--primary-soft);
}

.img-tab.is-active {
  background: var(--color-surface);
  border-color: var(--line);
  color: var(--primary);
  font-weight: var(--weight-bold);
}

/* === Prompt Garden ====================================================================== */
/* A lista + szerkesztő nézet apró elrendezés-segédei; minden más a közös primitívekből jön
   (.ff-table, .img-field, .img-tabs, .ps-btn, .empty-state). */

.garden-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.garden-toolbar .img-tabs {
  margin-bottom: 0;
}

.garden-editor {
  max-width: 720px;
}

/* Name cell rendered as an inline link-style button (no native button chrome). */
.garden-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--primary);
  font-weight: var(--weight-bold);
  cursor: pointer;
  text-align: left;
}

.garden-link:hover {
  text-decoration: underline;
}

.garden-actions {
  white-space: nowrap;
}

.garden-actions .ps-btn {
  margin-right: var(--space-2);
}

.garden-missing {
  color: var(--color-danger);
  font-size: var(--text-xs);
}

/* === Kép-készítő v2 + Archívum ========================================================== */
/* Prompt-mód választó (galéria / szabad szöveg), inline mentési panel, archívum-lightbox.
   A többi a meglévő img-* / ff-table / empty-state primitívekből jön. */

.img-mode {
  display: flex;
  gap: var(--space-9);
  flex-wrap: wrap;
  padding: var(--space-4) 0;
}

.img-mode-opt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  color: var(--color-text-strong);
}

.img-save-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-7);
  margin-top: var(--space-6);
  background: var(--color-surface-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.img-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  padding: var(--space-9);
}

.img-lightbox-panel {
  background: var(--color-surface);
  border-radius: var(--radius);
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.img-lightbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-7);
  border-bottom: 1px solid var(--line);
  color: var(--color-text-strong);
  font-weight: var(--weight-bold);
}

.img-lightbox-panel img {
  max-width: 86vw;
  max-height: 78vh;
  object-fit: contain;
}

.img-pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  max-width: 760px;
}

.img-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--text-sm);
  font-weight: 650;
}

.img-textarea {
  resize: vertical;
  min-height: 84px;
  font-weight: var(--weight-regular);
}

/* Tall multiline boxes on Tab 1: free-text prompt + generated-prompt preview (>= ~15 rows). */
.img-textarea-tall {
  min-height: 320px;
  line-height: 1.45;
}

.img-textarea-tall[readonly] {
  background: var(--color-surface-inset);
  color: var(--ink);
}

.img-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--color-surface-subtle-2);
}

/* A "none"-type schema field: fixed prompt text, shown as a marker (no input). */
.img-fixed {
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-4);
}

/* A "text"/"multiline" schema field: predefined value shown read-only as "label: value". */
.img-fixed-pair {
  flex-wrap: wrap;
}

.img-fixed-key {
  font-weight: 650;
}

.img-fixed-val {
  font-weight: var(--weight-regular);
  white-space: pre-wrap;
}

.img-group {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.img-group > legend {
  padding: 0 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--primary);
  text-transform: uppercase;
}

.img-req {
  color: var(--color-danger);
}

.img-buttons {
  display: flex;
  gap: var(--space-4);
}

.img-result {
  position: relative;
  min-height: 220px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--color-surface-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  overflow: hidden;
}

.img-placeholder {
  color: var(--muted);
  font-size: var(--text-sm);
  text-align: center;
}

.img-output {
  max-width: 100%;
  max-height: 460px;
  border-radius: var(--radius);
}

.img-progress {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  height: 6px;
  background: var(--line);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.img-progress span {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--primary);
  border-radius: var(--radius-pill);
  animation: img-indeterminate 1.1s infinite ease-in-out;
}

@keyframes img-indeterminate {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}

.img-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
}

.img-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.img-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  font-weight: 650;
}

@media (max-width: 900px) {
  .img-split {
    grid-template-columns: 1fr;
  }
}

/* ===== SocialMedia: video creator (creative.video_editor) =====
   Reuses the image-editor layout (.img-*); only the result media is a <video> player. */

.vid-output {
  width: 100%;
  max-height: 460px;
  background: #000;
}

.img-lightbox-panel video {
  max-width: 86vw;
  max-height: 78vh;
}

/* ===== SocialMedia: post creator (creative.post_editor) =====
   Two styled platform cards (Instagram + Meta). The platform accent colours below are
   third-party BRAND identities (not theme tokens) — they must not recolour with the app theme. */

.post-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
}

.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}

.post-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-weight: var(--weight-bold);
  color: #fff;
}

.post-card-head .ti {
  font-size: 1.15em;
}

/* Instagram brand gradient + Meta brand blue (third-party identities). */
.post-card-instagram .post-card-head {
  background: linear-gradient(95deg, #f58529, #dd2a7b 45%, #8134af 75%, #515bd4);
}

.post-card-meta .post-card-head {
  background: #1877f2;
}

.post-card-body {
  position: relative;
  flex: 1;
  min-height: 180px;
  padding: var(--space-6);
}

.post-text {
  white-space: pre-wrap;
  line-height: 1.5;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.post-hashtag {
  color: var(--primary);
  font-weight: 650;
}

.post-empty {
  color: var(--muted);
  font-size: var(--text-sm);
  font-style: italic;
}

.img-lightbox-panel .post-cards {
  padding: var(--space-7);
  max-width: 86vw;
  max-height: 78vh;
  overflow: auto;
}

@media (max-width: 900px) {
  .post-cards {
    grid-template-columns: 1fr;
  }
}

/* ===== SocialMedia: SEO content creator (seo.keyword_research / seo.topic_research / seo.content_generation) ===== */

.seo-actions-cell { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.seo-form,
.seo-readonly,
.seo-topic-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: var(--space-5) 0;
}

.seo-readonly {
  gap: 4px;
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-inset);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}

/* Generation phase steps */
.seo-phases {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: var(--space-6) 0;
}
.seo-phase {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
}
.seo-phase-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--line);
}
.seo-phase-active { color: var(--primary); }
.seo-phase-active .seo-phase-dot { background: var(--primary); animation: img-indeterminate 1.1s infinite ease-in-out; }
.seo-phase-done { color: var(--color-text-strong); }
.seo-phase-done .seo-phase-dot { background: var(--primary); }
.seo-phase-error { color: var(--color-danger); }
.seo-phase-error .seo-phase-dot { background: var(--color-danger); }

/* Result panels */
.seo-result { display: flex; flex-direction: column; gap: var(--space-7); margin-top: var(--space-7); }
.seo-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-7);
  background: var(--color-surface);
}
.seo-panel > h3 { margin: 0 0 var(--space-5); }
.seo-panel > summary { font-weight: var(--weight-bold); cursor: pointer; }
.seo-report h4 { margin: var(--space-6) 0 var(--space-3); }

/* Rulebook admin-diagnostics panel (agency_admin only): effective composed rulebook + brand book. */
.seo-rb-debug h4 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-sm); }
.seo-rb-pre {
  margin: 0;
  padding: var(--space-4);
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--text-xs);
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.seo-title-opts { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.seo-title-opt { font-size: var(--text-sm); }

.seo-article-frame {
  width: 100%;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  margin: var(--space-5) 0;
}

.seo-hero {
  max-width: 100%;
  max-height: 280px;
  border-radius: var(--radius);
}

.seo-archive-view { display: flex; flex-direction: column; gap: var(--space-6); max-width: 86vw; width: 760px; max-height: 80vh; overflow: auto; padding: var(--space-6); }
.seo-archive-head { border: 0; }

/* ---- SEO content creator module: topic table, keyword wizard, result pager, settings ---- */

.seo-toolbar-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.seo-check-cell { width: 2.5rem; text-align: center; }

/* Keyword wizard: seed form + suggestion tables */
.seo-wizard-form { display: flex; flex-direction: column; gap: var(--space-5); max-width: 520px; }
.seo-wizard-table { width: 100%; }
.seo-topic-groups { display: flex; flex-direction: column; gap: var(--space-6); margin: var(--space-5) 0; }
.seo-topic-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
}
.seo-topic-group h4 { margin: 0 0 var(--space-4); }
.seo-topic-check { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) 0; font-size: var(--text-sm); }

/* Keyword wizard step 1: source selector (AI / DataForSEO) */
.seo-source-select { display: flex; flex-direction: column; gap: var(--space-2); }
.seo-source-select .img-field-label { font-size: var(--text-sm); color: var(--muted); }
.seo-source-checks { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.seo-source-check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.seo-source-check.is-disabled { color: var(--muted); }

/* Generation setup: topic checklist */
.seo-topic-select {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
}

/* Result pager (multi-topic) + resolved (saved/discarded) state */
.seo-pager { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.seo-pager-info { font-size: var(--text-sm); color: var(--muted); }
.seo-result-actions { flex-wrap: wrap; }
.seo-resolved {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
}

/* Title-options label (the radio list = the article's SEO title choices) */
.seo-title-label { display: block; font-size: var(--text-sm); font-weight: var(--weight-bold); margin-bottom: var(--space-3); }

/* Visible generation progress (sequential, per-topic) */
.seo-generating { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-9) var(--space-6); }
.seo-generating h3 { margin: 0 0 var(--space-3); }
.seo-generating-spinner {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--primary);
  animation: seo-spin 0.9s linear infinite;
}
@keyframes seo-spin { to { transform: rotate(360deg); } }

/* Client settings editors (brand book + rulebook extension): big textarea */
.seo-settings-textarea { width: 100%; min-height: 320px; resize: vertical; font-family: var(--font-mono); }

/* ===========================================================================
   Admin CRUD surface (agency_admin only). Central stylesheet — no per-app CSS.
   =========================================================================== */

.admin-tile .status-pill {
  background: var(--primary-soft);
  color: var(--primary);
}

.admin-screen {
  min-height: 100vh;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 28px 48px;
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.admin-tab {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  font-weight: var(--weight-semibold);
}

.admin-tab:hover {
  border-color: var(--line-strong);
}

.admin-tab.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--color-on-primary);
}

.admin-message {
  margin: 0;
  min-height: 18px;
  font-size: var(--text-base);
  color: var(--primary);
}

.admin-message.is-error {
  color: var(--error);
}

.admin-content {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}

.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: 14px;
}

.admin-toolbar h2 {
  margin: 0;
  font-size: var(--text-xl);
}

/* Layer 2 insights admin tab: manual "Frissítés most" controls + run log. */
.admin-help {
  color: var(--muted);
  font-size: var(--text-sm);
  margin: 0 0 12px;
}

.admin-insights-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-7);
  margin-bottom: 18px;
}

.admin-insights-controls label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--muted);
}

.admin-insights-controls select {
  min-width: 200px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: inherit;
  font-size: var(--text-base);
}

/* Kulcsszó-API hitelesítő űrlap (DataForSEO) — egyoszlopos, széles beviteli mezők. */
.admin-kw-form {
  flex-direction: column;
  align-items: flex-start;
}

.admin-kw-form input {
  min-width: 340px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: inherit;
  font-size: var(--text-base);
}

.admin-insights-error {
  white-space: normal;
  max-width: 320px;
  color: var(--c-red-500);
  font-size: var(--text-xs);
}

.admin-empty {
  color: var(--muted);
  text-align: center;
  padding: 22px 12px;
}

.admin-actions-cell {
  display: flex;
  gap: var(--space-4);
}

.admin-row-action {
  padding: 5px 12px;
  font-size: var(--text-sm);
}

.admin-row-delete {
  color: var(--error);
  border-color: var(--error);
}

.admin-row-delete:hover {
  background: var(--error-soft);
}

/* Modal (forms + delete confirm) */
.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  z-index: 1000;
  overflow-y: auto;
}

.admin-modal-panel {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 540px;
  padding: 22px 24px;
}

.admin-confirm-panel {
  max-width: 480px;
}

.admin-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: 16px;
}

.admin-modal-header h3 {
  margin: 0;
  font-size: var(--text-lg);
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.admin-form-section {
  margin: 14px 0 2px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}

/* M:N hozzárendelés — kereshető chip/tag multi-select (datasource↔kliens, mindkét irányból) */
.admin-tags {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--color-surface-subtle, var(--panel));
}
.admin-tags-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-tags-empty { color: var(--color-text-muted); font-size: var(--text-sm); }
.admin-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 2px 10px;
  background: var(--color-primary, var(--primary));
  color: #fff;
  border-radius: 999px;
  font-size: var(--text-sm);
}
.admin-tag-x {
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 1.05em;
  line-height: 1;
  padding: 0 2px;
}
.admin-tag-x:hover { opacity: 0.7; }
.admin-tags-input { position: relative; }
.admin-tags-search {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.admin-tags-dropdown {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  margin-top: 2px;
  max-height: 220px;
  overflow-y: auto;
  background: var(--color-surface, #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.admin-tags-option {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 7px 10px;
  cursor: pointer;
  font-size: var(--text-sm);
}
.admin-tags-option:hover { background: var(--color-surface-subtle, var(--panel)); }

.admin-field label {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}

.admin-field input[type="text"],
.admin-field input[type="password"],
.admin-field select,
.admin-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  background: var(--color-surface);
  color: var(--text);
}

.admin-field textarea {
  resize: vertical;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.admin-field-check label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-weight: var(--weight-medium);
}

.admin-app-visibility { display: flex; flex-direction: column; gap: var(--space-2); }

.admin-app-hidden-toggle {
  margin-left: var(--space-16);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  color: var(--muted);
}

.admin-app-hidden-toggle:has(input:disabled) { opacity: 0.5; }

.admin-field-help {
  color: var(--muted);
  font-size: var(--text-xs);
}

.admin-secret-status {
  color: var(--muted);
  font-weight: var(--weight-medium);
}

.admin-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-5);
  margin-top: 4px;
}

.admin-form-error {
  margin: 0;
  min-height: 0;
}

.danger-button {
  border: 1px solid var(--error);
  background: var(--error);
  color: var(--color-on-primary);
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  font-weight: 650;
}

.danger-button:hover {
  background: var(--color-danger-hover);
}

.danger-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.admin-confirm-body {
  font-size: var(--text-base);
  line-height: 1.5;
}

.admin-impact-list {
  margin: 8px 0;
  padding-left: 20px;
}

.admin-impact-nested {
  color: var(--muted);
  font-size: var(--text-sm);
}

.admin-warn {
  color: var(--error);
  font-weight: var(--weight-semibold);
}

/* ============================================================================================
   Mini-PIM (prompt-admin sub-nav + terméktáblázat + ellenőrző ablak)
   ============================================================================================ */

/* Prompt-admin sub-navigation (Promptok tab inner switching) */
.admin-subnav {
  display: flex;
  gap: var(--space-4);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.admin-subtab {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.admin-subtab.is-active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

.admin-assignment-client {
  max-width: 360px;
  margin-bottom: 14px;
}

.admin-assignment-select {
  min-width: 240px;
}

/* Mini-PIM table view */
.pim {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

/* Mini-PIM ellenőrző ablak (a táblázatot az újrahasználható .dg-* adatrács adja). */
.pim-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.pim-count {
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Mini-PIM: a már legyártott tartalmú termékek sor-kiemelése (DataGrid rowClass="pim-has-content";
   a has_content backend-mező alapján). Jól látható zöld háttér + zöld bal-jelölő. A `.dg-grid`
   scope a frozen cella- és hover-háttér fölé visz (különben elnyomnák a kiemelést). */
.dg-grid tbody tr.pim-has-content td {
  background: rgba(94, 158, 46, 0.22);
}
/* A fixált (sticky) oszlop háttere ÁTLÁTSZATLAN kell legyen: vízszintes görgetéskor a mögé úszó
   cellák különben átütnek a féláttetsző zöldön. A #dcead1 a 22% zöld fehérre olvasztott tömör párja
   (a hover a 30%-é: #cfe2c0) — vizuálisan azonos, de takar. */
.dg-grid tbody tr.pim-has-content td.dg-frozen {
  background: #dcead1;
}

.dg-grid tbody tr.pim-has-content:hover td {
  background: rgba(94, 158, 46, 0.30);
}
.dg-grid tbody tr.pim-has-content:hover td.dg-frozen {
  background: #cfe2c0;
}

.dg-grid tbody tr.pim-has-content td:first-child {
  box-shadow: inset 4px 0 0 0 var(--color-primary, var(--primary));
}

.pim-generate-label {
  margin: 0;
  font-weight: 650;
}

.pim-col-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
}

.pim-generate-msg {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Column config modal */
.pim-col-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 8px 0;
}

.pim-content-link {
  color: var(--primary);
  font-weight: var(--weight-semibold);
}

.pim-publish {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.pim-publish .pim-generate-label {
  width: 100%;
}

.pim-content-text {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--panel-muted);
  border-radius: var(--radius);
  padding: 14px;
  font-size: var(--text-sm);
  line-height: 1.5;
  max-height: 60vh;
  overflow: auto;
}

/* ============================================================================================
   REUSABLE UI PRIMITIVES — single definition, reused across the whole app set.
   Added for the Mini-PIM data-grid + prompt-editor redesign; usable anywhere.
   Style comes only from here (no per-app CSS, no inline style) — components reference tokens.
   ============================================================================================ */

/* Inline SVG icons inherit color/size via currentColor; sized centrally here. */
.icon-svg {
  width: 16px;
  height: 16px;
  display: block;
  flex: none;
}

/* Small type/status marker (e.g. field type, product state). */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 9px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.badge.is-accent {
  background: var(--primary-soft);
  color: var(--primary);
}

/* Neutral context chip + accent (value-pill) variant. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px 9px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--color-surface-subtle);
  color: var(--color-text-strong);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.chip-accent {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: transparent;
}

/* Accessible on/off switch. Markup: <label class="toggle"><input type="checkbox"><span class="toggle-track"></span> label</label> */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-strong);
  cursor: pointer;
  user-select: none;
}

.toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.toggle-track {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  transition: background 0.15s ease;
  flex: none;
}

.toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: 0 1px 2px var(--c-shadow);
  transition: left 0.15s ease;
}

.toggle input:checked + .toggle-track {
  background: var(--primary);
}

.toggle input:checked + .toggle-track::after {
  left: 16px;
}

.toggle input:focus-visible + .toggle-track {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Square, icon-only button (32px). */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-strong);
  cursor: pointer;
  line-height: 1;
}

.icon-btn:hover {
  background: var(--panel-muted);
}

.icon-btn.is-danger {
  color: var(--color-danger);
}

.icon-btn.is-danger:hover {
  background: var(--color-danger-soft);
}

.icon-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Dashed "+ add" affordance, full width. */
.add-dashed {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: 11px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--text-base);
  cursor: pointer;
}

.add-dashed:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text-strong);
}

/* Collapsible card. Markup: <div class="card"><div class="card-head">…</div><div class="card-body">…</div></div> */
.card {
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-bottom: 10px;
}

.card-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.card-body {
  margin-top: 10px;
}

.card.is-collapsed .card-body {
  display: none;
}

.card-grip {
  color: var(--muted);
  cursor: grab;
  border-color: transparent;
  background: transparent;
}

.card-grip:active {
  cursor: grabbing;
}

.card.is-dragging {
  opacity: 0.55;
}

.card.is-drop-target {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.card-chevron {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 2px;
  transition: transform 0.15s ease;
}

.card.is-collapsed .card-chevron {
  transform: rotate(-90deg);
}

/* ============================================================================================
   REUSABLE DATA GRID — config-driven grid component (app/static/datagrid.js).
   Built on the shared .data-table/.data-table-wrapper; adds frozen columns, per-column filter
   row, hover bubble, row expand, contextual action bars and a full-window mode. The Mini-PIM
   product table is one instance; other lists (orders, customers, …) can reuse it.
   Frozen-column left offsets are passed as DATA via the --dg-left custom property (same pattern
   as the sync progress bar's --sync-progress) — never as inline formatting.
   ============================================================================================ */

.dg {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.dg-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.dg-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.dg-search {
  flex: 1 1 320px;
  max-width: 560px;
  position: relative;
  display: flex;
  align-items: center;
}
.dg-search-icon {
  position: absolute;
  left: 12px;
  font-size: 18px;
  color: var(--color-text-muted, var(--muted));
  pointer-events: none;
}
.dg-search-input {
  flex: 1;
  padding-left: 38px;
}

/* Jobb oldali klaszter: darabszám · elválasztó · Oszlopok · Teljes ablak (a screenshot szerint). */
.dg-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
  flex-wrap: wrap;
}
.dg-toolbar-sep {
  width: 1px;
  align-self: stretch;
  min-height: 22px;
  background: var(--color-border, var(--line));
}

.dg-count {
  color: var(--muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.dg-count strong {
  color: var(--primary-hover);
  font-weight: var(--weight-semibold);
}

.dg-check-col {
  width: 40px;
  text-align: center;
}

/* Grid-specific z-index layering on top of the reused .data-table sticky header. */
.dg-grid {
  width: max-content;
  min-width: 100%;
}

.dg-grid thead th {
  z-index: 3;
}

.dg-grid td {
  vertical-align: middle;
}

.dg-grid th.is-right,
.dg-grid td.is-right {
  text-align: right;
}

/* Per-column width carried as DATA via --dg-w (same pattern as --sync-progress / --dg-left). */
.dg-sized {
  width: var(--dg-w);
  min-width: var(--dg-w);
  max-width: var(--dg-w);
}

.dg-grid tbody tr:hover td {
  background: var(--color-surface-subtle);
}

.dg-frozen {
  position: sticky;
  left: var(--dg-left, 0);
  z-index: 2;
  background: var(--color-surface);
}

.dg-grid thead th.dg-frozen {
  z-index: 5;
  background: var(--color-surface-raised);
}

.dg-grid tbody tr:hover td.dg-frozen {
  background: var(--color-surface-subtle);
}

.dg-frozen.is-edge::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-strong);
}

/* Per-column filter row (second header row), sticky just below the header row. */
.dg-filter-row th {
  top: var(--dg-head-h, 38px);
  background: var(--color-surface-subtle);
  padding: 6px 10px;
  text-transform: none;
  font-weight: var(--weight-regular);
}

.dg-filter-input {
  width: 100%;
  min-width: 64px;
  font: inherit;
  font-size: var(--text-xs);
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--text);
}

.dg-filter-input:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.dg-filter-range {
  display: flex;
  gap: 4px;
}

/* Text-oszlop szűrő: típusváltó (tartalmaz / üres / nem üres) + szövegmező egy sorban. */
.dg-filter-text {
  display: flex;
  gap: 4px;
  align-items: center;
}

.dg-filter-op {
  font: inherit;
  font-size: var(--text-xs);
  padding: 4px 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--text-muted);
  flex: 0 0 auto;
  max-width: 92px;
}

.dg-filter-op:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.dg-filter-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Generikus PIM-akció paraméter-modál (a leszűrt táblából indított tömeges művelet előtt). */
.pim-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 16px;
  z-index: 1100;
  overflow-y: auto;
}

.pim-modal {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 460px;
  padding: 20px 22px;
}

.pim-modal h3 {
  margin: 0 0 14px;
}

.pim-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pim-modal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.pim-modal-field input,
.pim-modal-field select {
  font: inherit;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--text);
}

.pim-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

/* Single-line truncated cell + JS-positioned hover bubble. The clip bound comes from the
   column's --dg-w (.dg-sized); a default caps un-sized columns. */
.cell-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.cell-truncate.dg-sized {
  max-width: var(--dg-w);
}

.cell-tooltip {
  position: fixed;
  z-index: 1100;
  max-width: 320px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 2px 12px var(--c-shadow);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text);
  pointer-events: none;
}

/* `image` oszloptípus: kis bélyegkép; egérre a nagyobb kép a közös `.cell-tooltip` buborékban (datagrid.js
   `_showImage`) — a cellán belüli felugró képet a `td` `overflow: hidden`-je levágná. */
.dg-thumb { display: inline-block; vertical-align: middle; line-height: 0; }
.dg-thumb-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-sm, 6px);
  background: var(--color-surface-subtle);
}
.cell-tooltip--image { max-width: none; padding: var(--space-3); line-height: 0; }
.cell-tooltip-img { display: block; width: 200px; height: 200px; object-fit: contain; }

/* Row-expand toggle + detail row. */
.dg-expand {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px 0 0;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.dg-detail-row td {
  background: var(--color-surface-subtle);
}

.dg-detail {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 6px 16px;
  padding: 4px 2px;
  font-size: var(--text-sm);
}

.dg-detail-key {
  color: var(--muted);
}

.dg-detail-val {
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.dg-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Contextual action bar — shown on selection, above the table and stuck to the bottom. */
.action-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
  border: 1px solid var(--c-green-tint);
}

.action-bar-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--primary-hover);
}

.action-bar-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.action-bar-hint {
  font-size: var(--text-xs);
  color: var(--primary-hover);
}

.action-bar.is-sticky-bottom {
  position: sticky;
  bottom: 0;
  z-index: 30;
  box-shadow: 0 -2px 10px var(--c-shadow);
}

/* Rectangular on/off chip (e.g. content-type pick in the Mini-PIM bulk action). */
.toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 11px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--color-surface);
  color: var(--muted);
  font-size: var(--text-xs);
  cursor: pointer;
}

.toggle-chip.is-on {
  background: var(--primary-soft);
  color: var(--primary-hover);
  border-color: transparent;
}

/* Full-window mode: hide the portal sidebar so a wide, many-column grid gets the whole width.
   The shell is flex now (.app-body row of .app-sidebar + .app-content), so hiding the sidebar
   lets the content take the full width on its own. */
body.is-grid-maximized .app-sidebar {
  display: none;
}

/* ── PRICING (v2 — csomagok, modulok, AI-kredit) ──────────────
   A látványterv: specs/platform/DONE-SPEC-pricing-page-v2.md + a hozzá tartozó mockup.
   A tartalom a /static/pricing.json-ból renderel (pricing_renderer.js).

   MINDEN szabály a `.pricing-v2` konténerre van szűkítve — a látványterv elemnevei
   (.card, .hero, .wrap, td, h1) túl általánosak ahhoz, hogy globálisan éljenek.

   A mockup lokális `:root` tokenjei NEM kerültek a globális token-rétegbe (felhasználói
   döntés): amire van platform-token, az ARRA hivatkozik, a többi ezen a konténeren belül
   él. Figyelem a `--green`-re: a mockupban #5E9E2E (= platform `--primary`), a platform
   globális `--green`-je viszont a világosabb #7FB83D — ezért itt felül kell írni, különben
   az egész oldal egy árnyalattal világosabb zöldet kapna.
   ============================================================ */

.pricing-v2 {
  --navy-2: #17384F;
  --navy-3: #20506F;
  --green: var(--primary);
  --green-2: var(--c-green-500);
  --green-soft: var(--green-soft-bg);
  --green-ink: #3F7A17;
  --orange: #E8833A;
  --paper: #F6F8F7;
  --ink: var(--navy);
  --ink-2: #4A5C69;
  --ink-3: #8394A0;
  --line: var(--color-border);
  --line-d: var(--navy-line);
  --r: var(--radius-lg, 16px);
  --sh: 0 1px 2px rgba(16,42,61,.06), 0 10px 30px rgba(16,42,61,.08);
  --sh-lg: 0 2px 6px rgba(16,42,61,.1), 0 24px 60px rgba(16,42,61,.16);
  --sp: clamp(16px, 3vw, 32px);

  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
}
.pricing-v2 *, .pricing-v2 *::before, .pricing-v2 *::after { box-sizing: border-box; }
.pricing-v2 h1, .pricing-v2 h2, .pricing-v2 h3, .pricing-v2 p, .pricing-v2 ul { margin: 0; padding: 0; }
.pricing-v2 ul { list-style: none; }

/* A bejelentkezés-előtti önálló nézet: a `#pricing-view` a teljes képernyőt viszi (a
   `#login-view` ilyenkor rejtve van, ezért a sticky fejléc nem ütközik semmivel). */
/* A `--paper` a `.pricing-v2`-n van definiálva, tehát a SZÜLŐ nem hivatkozhat rá (a custom
   property lefelé öröklődik, nem felfelé) — itt literál kell. */
.pricing-view { min-height: 100vh; overflow-y: auto; background: #F6F8F7; }
.pricing-v2 { min-height: 100vh; }

.pricing-v2 .wrap {max-width:1080px;margin:0 auto;padding:0 var(--sp)}
.pricing-v2 .site-head {position:sticky;top:0;z-index:60;background:var(--navy);border-bottom:1px solid var(--line-d)}
.pricing-v2 .site-head .wrap {display:flex;align-items:center;gap:16px;height:68px}
.pricing-v2 .brand-mark {display:inline-flex;align-items:center;gap:0;font-size:21px;font-weight:600;letter-spacing:-.02em;
 color:#fff;text-decoration:none;line-height:1}
.pricing-v2 .brand-mark .b2 {color:var(--orange)}
.pricing-v2 .brand-mark img {height:26px;width:auto;display:block}
.pricing-v2 .back-link {margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:400;
 color:rgba(255,255,255,.72);text-decoration:none;padding:9px 15px;border-radius:10px;
 border:1px solid rgba(255,255,255,.2);white-space:nowrap;
 /* A látványtervben <a> volt, itt <button> (a #pricing-view -> login váltás nem navigáció):
    a böngésző gomb-alapértelmezéseit (szürke háttér, saját betűtípus) semlegesíteni kell. */
 background:transparent;font-family:inherit;cursor:pointer}
.pricing-v2 .back-link:hover {color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.34)}
.pricing-v2 .hero {background:var(--navy);color:#fff;padding:clamp(40px,6vw,68px) 0 clamp(84px,11vw,124px);
 position:relative;overflow:hidden}
.pricing-v2 .hero::after {content:"";position:absolute;inset:auto -10% -65% 42%;height:78%;
 background:radial-gradient(closest-side,rgba(127,184,61,.22),transparent 70%);pointer-events:none}
.pricing-v2 .hero .wrap {position:relative;z-index:1}
.pricing-v2 .eyebrow {display:inline-flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
 color:var(--green-2);font-weight:600;margin-bottom:15px}
.pricing-v2 .eyebrow::before {content:"";width:24px;height:2px;background:var(--green-2);border-radius:2px}
.pricing-v2 h1 {font-size:clamp(29px,4.4vw,47px);line-height:1.08;font-weight:600;letter-spacing:-.028em;max-width:17ch}
.pricing-v2 .hero p {margin-top:16px;max-width:60ch;color:rgba(255,255,255,.74);font-size:clamp(15px,1.5vw,17.5px);font-weight:300}
.pricing-v2 main {padding-bottom:clamp(48px,7vw,88px)}
.pricing-v2 .lift {margin-top:clamp(-72px,-9vw,-108px);position:relative;z-index:5}
.pricing-v2 .card {background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);overflow:hidden}
.pricing-v2 .scroll {overflow-x:auto}
.pricing-v2 table {width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
.pricing-v2 thead th {background:var(--navy-2);color:#fff;font-weight:500;font-size:15px;padding:16px 20px;text-align:center;
 border-left:1px solid rgba(255,255,255,.1);white-space:nowrap}
.pricing-v2 thead th:first-child {text-align:left;border-left:0;font-size:13px;letter-spacing:.07em;text-transform:uppercase;
 color:rgba(255,255,255,.55);font-weight:600}
.pricing-v2 thead th.hi {background:#2A5E80}
.pricing-v2 thead th .pn {font-size:17px;font-weight:600;letter-spacing:-.01em;display:block}
.pricing-v2 td {padding:12px 20px;border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
.pricing-v2 td:first-child {border-left:0}
.pricing-v2 td:not(:first-child) {text-align:center}
.pricing-v2 tbody tr:last-child td {border-bottom:0}
.pricing-v2 .lbl {font-weight:400;color:var(--ink)}
.pricing-v2 .lbl small {display:block;font-size:12.5px;color:var(--ink-3);font-weight:300;margin-top:1px}
.pricing-v2 tr.var td {background:var(--green-soft);padding-top:14px;padding-bottom:14px;
 border-left-color:rgba(94,158,46,.18);border-bottom-color:rgba(94,158,46,.18)}
.pricing-v2 tr.var td:first-child {color:var(--green-ink);font-weight:500}
.pricing-v2 tr.var td:not(:first-child) {color:var(--green-ink);font-weight:700;font-size:19px;letter-spacing:-.02em;
 font-variant-numeric:tabular-nums}
.pricing-v2 tr.pricerow td {background:var(--navy);color:#fff;border-color:rgba(255,255,255,.12);
 padding-top:16px;padding-bottom:16px}
.pricing-v2 tr.pricerow td:first-child {font-weight:600;font-size:16px}
.pricing-v2 tr.pricerow td:not(:first-child) {font-size:24px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pricing-v2 tr.pricerow td .u {font-size:13px;font-weight:300;color:rgba(255,255,255,.6);letter-spacing:0}
.pricing-v2 tr.grp .gl {display:inline-block}
.pricing-v2 tr.grp td {background:#F2F6F4;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
 color:var(--ink-3);padding:11px 20px;border-left:0}
.pricing-v2 tr.feat:hover td {background:#FAFCFB}
.pricing-v2 .chk {display:inline-flex;
 /* Az SVG `stroke=currentColor` — enélkül a sor navy szövegszínét örökölné, nem a zöldet. */
 color:var(--green)}
.pricing-v2 tr.mod td:first-child {vertical-align:top;padding-top:15px;padding-bottom:15px;font-weight:500}
.pricing-v2 tr.mod td:not(:first-child) {font-weight:600;font-variant-numeric:tabular-nums;font-size:15.5px}
.pricing-v2 .mfeat {list-style:none;margin:8px 0 2px;display:flex;flex-direction:column;gap:4px}
.pricing-v2 .mfeat li {display:flex;gap:7px;align-items:flex-start;font-size:13px;color:var(--ink-2);font-weight:300;line-height:1.4}
.pricing-v2 .mfeat li::before {content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--green);margin-top:6px}
.pricing-v2 .card-foot {padding:14px 20px;background:#FAFCFB;border-top:1px solid var(--line);
 font-size:13px;color:var(--ink-3);font-weight:300}
.pricing-v2 .credits {background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
 overflow:hidden;margin-top:clamp(26px,4vw,40px)}
.pricing-v2 .credits .ch {background:var(--navy);color:#fff;padding:18px 24px}
.pricing-v2 .credits .ch h2 {font-size:18px;font-weight:600;letter-spacing:-.01em}
.pricing-v2 .credits .ch p {font-size:13.5px;color:rgba(255,255,255,.62);font-weight:300;margin-top:3px}
.pricing-v2 .credits .cb {padding:24px}
.pricing-v2 .sel-lbl {font-size:13px;color:var(--ink-2);font-weight:500;margin-bottom:10px}
.pricing-v2 .cpacks {display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px}
.pricing-v2 .cpack {position:relative;overflow:hidden;border:1px solid var(--line);border-radius:14px;padding:22px 20px;
 background:#F2F5F4;cursor:pointer;text-align:left;font:inherit;color:var(--ink);transition:.14s}
.pricing-v2 .cpack:hover {border-color:#C4D2D8;background:#EDF2F0}
.pricing-v2 .cpack.on {background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 6px 18px rgba(94,158,46,.28)}
.pricing-v2 .cpack .cp {display:block;font-size:32px;font-weight:700;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1.05}
.pricing-v2 .cpack .cr {display:block;font-size:14.5px;color:var(--ink-2);font-weight:300;margin-top:8px;font-variant-numeric:tabular-nums}
.pricing-v2 .cpack.on .cr {color:rgba(255,255,255,.85)}
.pricing-v2 .cpack .cu {display:block;font-size:12px;color:var(--ink-3);font-weight:300;margin-top:2px}
.pricing-v2 .cpack.on .cu {color:rgba(255,255,255,.65)}
.pricing-v2 .rib {position:absolute;top:0;right:0;width:104px;height:104px;pointer-events:none}
.pricing-v2 .rib i {position:absolute;top:19px;right:-30px;transform:rotate(45deg);display:block;width:132px;text-align:center;
 background:var(--navy-3);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:4px 0;font-style:normal}
.pricing-v2 .cpack.on .rib i {background:var(--navy)}
.pricing-v2 .cnext {margin-top:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pricing-v2 .cnext button {font:inherit;font-size:15px;font-weight:500;padding:11px 22px;border-radius:11px;border:0;
 background:var(--navy);color:#fff;cursor:pointer}
.pricing-v2 .cnext button:hover {background:var(--navy-3)}
.pricing-v2 .cnext .cs {font-size:13.5px;color:var(--ink-3);font-weight:300}
.pricing-v2 .cnext .cs b {color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.pricing-v2 .cex {margin-top:24px;border-top:1px dashed var(--line);padding-top:20px}
.pricing-v2 .cex h3 {font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:4px}
.pricing-v2 .cex .cxn {font-size:13.5px;color:var(--ink-3);font-weight:300;margin-bottom:14px}
.pricing-v2 .cxgrid {display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:6px 24px}
.pricing-v2 .cxgrid div {display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;
 padding:8px 0;border-bottom:1px solid var(--line)}
.pricing-v2 .cxgrid div span:first-child {color:var(--ink-2);font-weight:300}
.pricing-v2 .cxgrid div b {font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--navy)}
@media(max-width:720px){
.pricing-v2 thead th:first-child,
.pricing-v2 tbody td:first-child {position:sticky;left:0;z-index:2}
.pricing-v2 thead th:first-child {background:var(--navy-2)}
.pricing-v2 tbody td:first-child {background:#fff}
.pricing-v2 tbody tr.var td:first-child {background:var(--green-soft)}
.pricing-v2 tbody tr.pricerow td:first-child {background:var(--navy)}
.pricing-v2 tbody tr.grp td {position:static}
.pricing-v2 tbody tr.grp .gl {position:sticky;left:0}
.pricing-v2 tbody td:first-child::after {content:"";position:absolute;top:0;right:0;bottom:0;width:1px;background:var(--line)}
.pricing-v2 tbody tr.pricerow td:first-child::after {background:rgba(255,255,255,.12)}
.pricing-v2 td {position:relative}
}
.pricing-v2 .site-foot {background:var(--navy);color:rgba(255,255,255,.55);padding:clamp(28px,4vw,40px) 0;font-size:13.5px;font-weight:300}
.pricing-v2 .site-foot .wrap {display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pricing-v2 .site-foot .brand-mark {font-size:18px}
.pricing-v2 .site-foot .fnote {margin-left:auto;text-align:right}
.pricing-v2 .site-foot a {color:rgba(255,255,255,.72);text-decoration:none}
.pricing-v2 .site-foot a:hover {color:#fff}
@media(max-width:640px){
.pricing-v2 .site-foot .fnote {margin-left:0;text-align:left}
}

/* A „Tovább a fizetéshez" LÁTHATÓAN inaktív: a vásárlási folyamat külön spec (SPEC §7). */
.pricing-v2 .cnext button[disabled] {
  background: var(--color-surface-muted, #EDF1F0);
  color: var(--ink-3);
  cursor: not-allowed;
  border: 1px solid var(--line);
}
.pricing-v2 .cnext button[disabled]:hover { background: var(--color-surface-muted, #EDF1F0); }
.pricing-v2 .csoon {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  background: #EDF2F0;
  border-radius: var(--radius-pill, 20px);
  padding: 3px 10px;
}

/* A login-oldali belépési pont linkje (a régi szekcióból megtartva — a `#show-pricing`
   gombot ÉS az „Ingyenes Webshop Audit" linket is ez stílusozza). */
.pricing-link {
  margin-top: 2px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: center;
  transition: color var(--transition-fast);
}

.pricing-link:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* ============================================================================
   Batch tartalomgyártás (Mini-PIM × SocialMedia): előkészítő mátrix + státusz oldal
   ============================================================================ */

.batch { display: grid; gap: var(--space-6); }

/* A mátrix celláiban kompakt dropdownok; az oszlop-fejléc "Összes beállítása" kisebb. */
.batch-matrix select { width: 100%; min-width: 120px; }
.batch-matrix .batch-default { font-size: var(--text-xs, 12px); font-weight: var(--weight-regular); margin-top: var(--space-4); }
.batch-remove { padding: 2px 10px; line-height: 1; }

/* "Képek száma" batch-szintű 1/2/3 váltó (SPEC-pim-tobbkepes-termekgeneralas.md). */
.batch-imgcount { display: flex; align-items: center; gap: var(--space-3); margin-left: var(--space-6); }
.batch-imgcount-label { font-size: var(--text-sm); color: var(--muted); margin: 0; }
.batch-imgcount .ghost-button { padding: 2px 12px; min-width: 32px; }
.batch-imgcount .ghost-button.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
/* image_2/image_3 oszlop rejtése a "Képek száma" váltónál (batch_prepare.js, nincs inline style). */
.imgcol-hidden { display: none; }

.batch-actions { display: flex; align-items: center; gap: var(--space-6); }

/* Státusz oldal: összesítő sor + progress (a --sync-progress mintát követi, világos sávon). */
.batch-summary { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.batch-progress {
  flex: 1 1 220px;
  height: 8px;
  min-width: 160px;
  overflow: hidden;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.batch-counts { font-size: var(--text-sm); color: var(--text); }

/* Státusz-badge (job-szintű) + tétel-szintű állapotjelzés. */
.batch-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  background: var(--panel-muted);
  color: var(--text);
}
.batch-badge.is-running { background: var(--c-green-tint); color: var(--color-primary-hover); }
.batch-badge.is-done { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.batch-badge.is-error { background: var(--error-soft); color: var(--error); }

/* v2 — Mini-PIM bulk-sáv: a kijelölt termékek művelet-csoportja (ikon + címke + gomb). */
.batch-bulkbar { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.batch-bulk-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--muted);
}

/* v2 — letiltott oszlop (nincs batch-generátor / aktív modell): halvány fejléc + tiltott cellák. */
.batch-matrix th.batch-col-off { color: var(--muted); }
.batch-matrix th.batch-col-off .ti-alert-triangle { color: var(--error); }
.batch-matrix td.batch-col-off select { opacity: 0.5; cursor: not-allowed; }

/* v2 — eredmény-mátrix cella-státuszok (ikon + szín); a done cella kattintható link. */
.batch-cell-st { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.batch-cell-st.is-pending { color: var(--muted); }
.batch-cell-st.is-running { color: var(--color-primary-hover); }
.batch-cell-st.is-done { color: var(--color-primary-hover); text-decoration: none; font-size: var(--text-md); }
.batch-cell-st.is-error { color: var(--error); font-size: var(--text-xs, 12px); }
.batch-cell-st.is-running .ti-loader-2 { animation: batch-spin 0.9s linear infinite; }
.batch-cell-empty { color: var(--muted); text-align: center; }
@keyframes batch-spin { to { transform: rotate(360deg); } }

/* v2 — poszt-cella lightbox nézet (Meta + Instagram szöveg kártyákban). */
.batch-post-view { display: grid; gap: var(--space-5); }
.batch-post-view .post-card { padding: var(--space-5); }
.batch-post-view .post-card h4 { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--muted); }
.batch-post-view .post-card p { margin: 0; white-space: pre-wrap; }

/* ============================================================================
   === BATCH MODEL ROW ===
   v3 — provider/modell-választó sor a mátrix FEJLÉCÉBEN: content_type-onként egy
   kompakt dropdown, pontosan az oszlop szélességéhez illesztve (a th-ban ül).
   ============================================================================ */

.batch-matrix .batch-model-headrow th {
  background: var(--panel-muted);
  padding: var(--space-4);
  vertical-align: middle;
}
.batch-model-corner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--muted);
  white-space: nowrap;
}
/* A dropdown az oszlop teljes szélességét kitölti; ha a provider nem fér ki, lenyitáskor látszik. */
.batch-model-cell select { width: 100%; max-width: 100%; }

/* A „Termék neve" cella egy sorban marad (mint a Mini-PIM rácsban); túlcsordulás → ellipszis,
   a teljes név egér ráhúzáskor (title) látszik. */
.batch-matrix .batch-prod-name {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === BATCH PREVIEW ===
   v3 — dry-run előnézet popup (lapozós, type-tabos): feldolgozott prompt + CURL.
   A .img-lightbox overlay-re épül; itt csak a panel belső szerkezete. */

.batch-preview-modal .batch-pv-panel {
  width: min(820px, 94vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  text-align: left;
}
.batch-pv-head { display: flex; align-items: center; gap: var(--space-5); }
.batch-pv-title { flex: 1; font-weight: var(--weight-medium); color: var(--text); }
.batch-pv-nav { padding: 2px 10px; line-height: 1; }
.batch-pv-close { margin-left: auto; }

.batch-pv-tabs { display: flex; flex-wrap: wrap; gap: var(--space-4); border-bottom: 1px solid var(--line); padding-bottom: var(--space-4); }
.batch-pv-tab {
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--muted);
  font-size: var(--text-sm);
  cursor: pointer;
}
.batch-pv-tab.is-active { background: var(--color-primary-soft); color: var(--color-primary-hover); border-color: transparent; }

.batch-pv-body { overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.batch-pv-label { font-size: var(--text-xs, 12px); font-weight: var(--weight-medium); color: var(--muted); }
.batch-pv-prompt {
  width: 100%;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: var(--panel-muted);
  color: var(--text);
}
.batch-pv-img { margin: 0; font-size: var(--text-xs, 12px); color: var(--muted); word-break: break-all; }
.batch-pv-curlhead { display: flex; align-items: center; gap: var(--space-5); }
.batch-pv-curl {
  margin: 0;
  white-space: pre;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs, 12px);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: var(--navy, #102A3D);
  color: #e6edf3;
}
.batch-pv-copymsg { font-size: var(--text-xs, 12px); color: var(--color-primary-hover); }
.batch-pv-foot { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: var(--space-5); }
.batch-pv-warn { display: inline-flex; align-items: center; gap: var(--space-4); font-size: var(--text-sm); color: var(--muted); }

/* v3 — Mini-PIM „Fotó" oszlop linkje (szöveges link, nem <img>). */
.photo-link { white-space: nowrap; text-decoration: none; }

/* Mini-PIM v2 — fotó hover-kép: a link marad, de hoverre (kattintás nélkül) megjelenik a kép. */
.photo-hover { position: relative; display: inline-block; }
.photo-pop {
  display: none;
  position: absolute;
  z-index: 50;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  width: 200px;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  padding: var(--space-3);
  background: var(--color-surface, var(--panel));
  border: 1px solid var(--color-border, var(--line));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg, var(--shadow));
}
.photo-hover:hover .photo-pop { display: block; }

/* ============================================================================
   === PIM CONTENT ===
   Mini-PIM v2 termékoldali tartalomgyártás eredménynézet (PDS-stílus): Kész /
   UNAS-ba feltöltve tabok, per-cella státusz, megtekintő popup, writeback.
   ============================================================================ */
/* Tartalomgyártás: a keret (fülek, visszajelzés) 2026-09-30 óta a közös UI-keret (FF-PAGE blokk). Az
   alábbi `.pimc-*` osztályokat az Okos hirdetések (ads.js) még használja — az F4-ig maradnak. */
.pimc { display: flex; flex-direction: column; gap: var(--space-5); }

.pimc-err { color: var(--color-danger, #c0392b); font-weight: 600; }

/* Megtekintő popup */
.pimc-vpanel { max-width: 760px; width: 90vw; display: flex; flex-direction: column; gap: var(--space-4); }
.pimc-vhead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.pimc-vbody { max-height: 60vh; overflow: auto; }
.pimc-vimg { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.pimc-vframe { width: 100%; height: 50vh; border: 1px solid var(--color-border, var(--line)); border-radius: var(--radius-md); background: #fff; }
.pimc-vtext { white-space: pre-wrap; line-height: 1.5; }
/* Debug (teszt-időszak): a kimenő API-hívás curl-előnézete a megtekintő popupban. */
.pimc-apicall { margin-top: var(--space-4); border-top: 1px dashed var(--color-border, var(--line)); padding-top: var(--space-3); }
.pimc-apicall > summary { cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted, var(--muted)); }
.pimc-curl {
  margin: var(--space-3) 0 0;
  padding: var(--space-4);
  background: var(--navy, #102A3D);
  color: #e6edf3;
  border-radius: var(--radius-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
/* Beállítások → Prompt kezelés: a helyettesítők súgó-listája a szerkesztőben. */
.set-ph-help { margin: 0; padding: var(--space-4); background: var(--color-surface-subtle, #eef1f4); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-text-muted, var(--muted)); }
.set-ph-title { display: block; margin-bottom: var(--space-2); font-weight: var(--weight-medium); }
.set-ph-help ul { margin: 0; padding-left: var(--space-6); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--space-6); }
.set-ph-help code { background: var(--color-surface, #fff); padding: 1px 5px; border-radius: var(--radius-sm); font-size: 12px; }
/* Beállítások → Prompt kezelés: „Új prompt" gomb-sáv + a szerkesztő MODAL (magas prompt-mező). */
.set-toolbar { margin-bottom: var(--space-4); }
.set-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(16, 42, 61, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
}
.set-modal {
  background: var(--color-surface, #fff);
  border-radius: var(--radius-lg, 14px);
  width: min(780px, 96vw); max-height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
}
.set-modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border, var(--line)); }
.set-modal-head h3 { margin: 0; }
.set-modal-body { padding: var(--space-6); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.set-modal-foot { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-top: 1px solid var(--color-border, var(--line)); }
.set-field--grow { flex: 1 1 auto; }
.set-prompt-textarea { width: 100%; min-height: 40vh; resize: vertical; line-height: 1.5; font-family: inherit; }

/* ============================================================================
   === LANDING PAGE ===
   Role-specific home screen after login (agency_admin: 3 cards + 4 widgets;
   client_user: app cards + 2 widgets). Token-driven; navy shell, white surfaces.
   ============================================================================ */

.landing-screen {
  min-height: 100vh;
  background: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-10) var(--space-12) var(--space-16);
  overflow-y: auto;
}

.landing-header {
  width: min(100%, 1120px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-12);
}

.landing-body {
  width: min(100%, 1120px);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* ---- agency_admin: the 3 summary cards ---- */

.landing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
}

.landing-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  box-shadow: var(--shadow-md);
}

/* The admin card matches the others (light text on a light surface), only its background is a
   light grey instead of white so it reads as the distinct "platform" tile without sinking into
   the navy shell. */
.landing-card--admin {
  background: var(--color-surface-inset);
  border-color: var(--line);
}

.landing-card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-2xl);
}

.landing-card__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--navy);
}

.landing-card__desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.landing-card__stat-row {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.landing-card__stat-row strong {
  font-size: var(--text-lg);
  color: var(--navy);
  font-weight: var(--weight-bold);
}

.landing-card__app-mini-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.landing-card__app-mini-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.landing-card__app-mini-list li:last-child { border-bottom: none; padding-bottom: 0; }
.landing-card__app-mini-list strong { color: var(--color-text-strong); font-weight: var(--weight-semibold); }

.landing-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.landing-chip--warn {
  background: var(--c-amber-tint);
  color: var(--c-amber-700);
}

/* Pushes the card button to the bottom so the 3 cards align regardless of body length. */
.landing-card__spacer { flex: 1 1 auto; }

/* ---- Dashboard section (both roles) ---- */

.dashboard__title {
  margin: 0 0 var(--space-8);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: #fff;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-10);
}

/* === TÁRHELY-FOGLALTSÁG (SPEC-tarhely-dashboard.md) ===
   Az agency landing két tárhely-panelje. A széles csempe a teljes rácsot elfoglalja; a
   telítettség-sáv kitöltése CSS-változóból jön (adat, nem formázás — a sync progress mintája). */
.dashboard-widget--wide { grid-column: 1 / -1; }

.dashboard-widget__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
}
.dashboard-widget__actions { display: flex; align-items: center; gap: var(--space-5); }
.storage-measured { font-size: var(--text-xs); color: var(--muted); }

.disk-row {
  display: grid;
  grid-template-columns: 12rem auto 1fr 4rem;
  align-items: center; gap: var(--space-5);
  padding: var(--space-3) 0;
  font-size: var(--text-sm);
}
.disk-row__label { font-weight: var(--weight-medium); color: var(--color-text-strong); }
.disk-row__value { color: var(--muted); white-space: nowrap; }
.disk-row__note { display: block; font-size: var(--text-2xs); color: var(--muted); white-space: nowrap; }
.disk-row__pct { text-align: right; font-weight: var(--weight-semibold); }

.disk-bar {
  position: relative; height: 10px; border-radius: var(--radius-pill);
  background: var(--color-surface-muted, rgba(0,0,0,.08)); overflow: hidden;
}
.disk-bar__fill {
  display: block; height: 100%; width: var(--disk-pct, 0%);
  border-radius: var(--radius-pill);
  transition: width .3s ease;
}
.disk-bar.is-ok .disk-bar__fill { background: var(--primary); }
.disk-bar.is-warning .disk-bar__fill { background: var(--color-warning, #d99100); }
.disk-bar.is-critical .disk-bar__fill { background: var(--color-danger, #c8442c); }
.disk-row__pct.is-ok { color: var(--primary); }
.disk-row__pct.is-warning { color: var(--color-warning, #d99100); }
.disk-row__pct.is-critical { color: var(--color-danger, #c8442c); }

/* A széles csempe táblázata tíz oszlopos — KOMPAKT módban jelenik meg, hogy vízszintes görgetés
   nélkül elférjen egy nézetben: törhető fejléc, kisebb betű, szűkebb cella-padding.
   (Ez a tárhely-táblára szűkített kivétel az FF-TABLE alapméretezése alól — a `.ff-*` elemnevek
   változatlanok, csak a méretezés más ebben a csempében.) */
.dashboard-widget--wide .ff-scroll { max-height: 26rem; }
.dashboard-widget--wide .ff-table { font-size: var(--text-xs); }
.dashboard-widget--wide .ff-table th,
.dashboard-widget--wide .ff-table td { padding: var(--space-3) var(--space-4); }
.dashboard-widget--wide .ff-th { white-space: normal; }
.dashboard-widget--wide .ff-th-label {
  white-space: normal;          /* a fejléc TÖRHET — ez engedi a szűk oszlopokat */
  line-height: var(--leading-tight, 1.2);
  hyphens: auto;
}
/* A lemez-oszlopok közös felső címkéje ("Lemezterület"), alatta a rövid megkülönböztető. */
.st-th-group {
  display: block;
  font-size: var(--text-2xs);
  font-weight: var(--weight-regular);
  opacity: .7;
}
/* Az első két oszlop hosszú szöveget hordoz — kapjanak korlátot, hogy a számoszlopok elférjenek. */
.dashboard-widget--wide .ff-table td:first-child,
.dashboard-widget--wide .ff-table td:nth-child(2) {
  max-width: 14rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dashboard-widget {
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  box-shadow: var(--shadow-md);
}

.dashboard-widget__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-7);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--navy);
}

.dashboard-empty {
  list-style: none;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* Platform statistics: small number cards. */

/* Sync rows (recent jobs / per-datasource status). */
.sync-row-list,
.health-list,
.notification-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sync-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  background: var(--color-surface-subtle-2);
}

.sync-row__name { flex: 1 1 auto; font-weight: var(--weight-medium); color: var(--color-text-strong); }
.sync-row__time { color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.sync-row__status { white-space: nowrap; font-size: var(--text-xs); }

.sync-row.is-error { border-left-color: var(--color-danger); background: var(--c-red-tint); }
.sync-row.is-warn  { border-left-color: var(--color-warning); background: var(--c-amber-tint); }
.sync-row.is-running { border-left-color: var(--color-primary); background: var(--c-green-tint); }

/* System health rows. */
.health-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-size: var(--text-sm);
}

.health-row__icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
}

.health-row.is-ok  .health-row__icon { background: var(--c-green-tint); color: var(--color-primary); }
.health-row.is-bad .health-row__icon { background: var(--c-red-tint); color: var(--color-danger); }

.health-row__label { flex: 1 1 auto; color: var(--color-text); }
.health-row__count { font-weight: var(--weight-bold); color: var(--navy); }
.health-row.is-bad .health-row__count { color: var(--color-danger); }

/* Quick links. */

/* Notifications. */
.notification-item {
  font-size: var(--text-sm);
  color: var(--color-text);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-surface-subtle-2);
}

.notification-item--warning { border-left-color: var(--color-warning); background: var(--c-amber-tint); }
.notification-item--error   { border-left-color: var(--color-danger);  background: var(--c-red-tint); }
.notification-item--ok      { border-left-color: var(--color-primary);  background: var(--c-green-tint); color: var(--color-text-strong); }

/* ---- client_user: app cards ---- */

.landing-app-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-10);
}

.landing-app-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  box-shadow: var(--shadow-md);
}

.landing-app-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
}

.landing-app-card .card-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-xl);
}

.landing-app-card__title { display: flex; flex-direction: column; gap: var(--space-3); }
.landing-app-card .card-name { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--navy); }

.landing-app-card__actions {
  display: flex;
  gap: var(--space-5);
  margin-top: auto;
}

.landing-app-card__actions .primary-button,
.landing-app-card__actions .ghost-button { flex: 1 1 0; }

/* Inactive / locked app card. */
.app-card--locked { opacity: 0.55; }
.app-card--locked .card-icon { background: var(--color-surface-inset); color: var(--muted); }

/* ---- Responsive: stack everything on narrow screens ---- */
@media (max-width: 880px) {
  .landing-cards,
  .dashboard-grid,
  .dashboard-grid--two,
  .disk-row { grid-template-columns: 1fr auto; }
  .disk-row .disk-bar { grid-column: 1 / -1; }
}

/* Landing header sits directly on the navy shell, so the brand needs light text (the navy
   default would be invisible); the green accent span stays as-is. */
.landing-header .login-brand-name { color: #fff; }
.landing-header .login-brand-sub { color: var(--c-white-72); }

/* === RECOMMENDATIONS PANEL ("Javaslatok" — UNAS app homepage) ============================
   Diagnostic/advice panel: severity-dot rows with actionable CTA buttons. Loaded as the UNAS
   landing (menu.json home_action). Data + behavior live in app/apps/unas/static/recommendations.js. */
.recommendations-view {
  max-width: 760px;
}

.rec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.rec-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.rec-loading {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Run button (top-right / empty-state): bordered, with a leading icon that spins while running. */
.rec-run-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}
.rec-run-btn:hover:not([disabled]) { background: var(--color-surface-subtle); }
.rec-run-btn[disabled] { opacity: 0.6; cursor: default; }

.rec-spin { animation: rec-spin 0.9s linear infinite; }
@keyframes rec-spin { to { transform: rotate(360deg); } }

.rec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.rec-item {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Severity dot — explicit brand-status colors (spec). */
.rec-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  margin-top: 5px;
}
.rec-dot--urgent  { background: #E24B4A; }
.rec-dot--warning { background: #EF9F27; }
.rec-dot--success { background: #639922; }

.rec-item-body {
  flex: 1 1 auto;
  min-width: 0;
}

.rec-message {
  margin: 0 0 var(--space-6);
  font-size: var(--text-base);
  color: var(--color-text);
}

.rec-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

/* Primary CTA: filled dark background, white text, no border (multiple wrap with flex). */
.rec-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-text);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}
.rec-cta:hover { opacity: 0.9; }

.rec-footer {
  margin-top: var(--space-8);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.rec-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-7);
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.rec-empty-list {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* info severity dot (order_spikes neutral) */
.rec-dot--info { background: #60a5fa; }

/* Revenue inline compare table */
.rec-revenue-detail.is-hidden { display: none; }

.rec-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin: var(--space-5) 0 var(--space-6);
}
.rec-compare-table th,
.rec-compare-table td {
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border);
  text-align: left;
}
.rec-compare-table th {
  background: var(--color-surface-subtle);
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rec-compare-table td:first-child { color: var(--color-text-muted); }
.rec-compare-table td:not(:first-child) { font-weight: 500; }

/* Product mini-table (top_products / zombie / incomplete) */
.rec-product-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin: var(--space-4) 0 var(--space-6);
}
.rec-product-table th,
.rec-product-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
.rec-product-table th {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rec-prod-name {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rec-prod-sku { color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
.rec-prod-num { text-align: right; white-space: nowrap; }

/* Incomplete products — field check icons */
.rec-field-ok { color: #ef4444; }
.rec-field-ok--ok { color: #639922; }

/* Chart card */
.rec-item--chart { flex-direction: column; }
.rec-item--chart .rec-dot { margin-top: 0; }
.rec-item--chart > .rec-item-body { width: 100%; }
.rec-chart-wrap {
  position: relative;
  height: 180px;
  margin-top: var(--space-5);
}

/* Placeholder toast */
.rec-toast {
  position: fixed;
  bottom: var(--space-10);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text);
  color: #fff;
  padding: var(--space-5) var(--space-8);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  z-index: 9999;
  pointer-events: none;
  animation: rec-toast-in 0.2s ease;
}
@keyframes rec-toast-in { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ============================================================================================
   RECOMMENDATION CARDS (Javaslatok v3) — akció-vezérelt kezdőlap-kártyák
   Egységes kártya-króm (akcent-sáv + ikon-csempe + badge + meta-sor + navy-fejlécű tábla + CTA-k),
   design-tokenekre építve. A súlyosság (urgent/warning/success) a --rec-accent + tintjeit vezérli.
   ============================================================================================ */

.rec-v3-header { margin-bottom: var(--space-8); }
.rec-v3-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-strong, var(--color-text));
  margin: 0;
}

.rec-cards { display: flex; flex-direction: column; gap: var(--space-8); }

.rec-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  /* Súlyosság-vezérelt akcentus (bal sáv + ikon-csempe + badge). */
  --rec-accent: var(--color-warning);
  --rec-tint: var(--c-amber-tint);
  --rec-strong: var(--c-amber-600);
}
.rec-card--urgent  { --rec-accent: var(--color-danger);  --rec-tint: var(--c-red-tint);   --rec-strong: var(--c-red-600); }
.rec-card--warning { --rec-accent: var(--c-amber-400);   --rec-tint: var(--c-amber-tint); --rec-strong: var(--c-amber-600); }
.rec-card--success { --rec-accent: var(--primary);       --rec-tint: var(--c-green-tint); --rec-strong: var(--c-green-700); }

.rec-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--rec-accent);
}
.rec-card__inner {
  padding: var(--space-10) var(--space-10) var(--space-9) calc(var(--space-10) + var(--space-3));
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Fejléc: ikon-csempe + cím-sor + leírás */
.rec-card__head { display: flex; gap: var(--space-7); align-items: flex-start; }
.rec-card__icon {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--rec-tint);
  color: var(--rec-strong);
  font-size: 26px;
}
.rec-card__titles { flex: 1 1 auto; min-width: 0; }
.rec-card__title-row { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.rec-card__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-strong, var(--color-text));
}
.rec-card__badge {
  display: inline-flex; align-items: center;
  padding: 2px var(--space-5);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--rec-tint);
  color: var(--rec-strong);
}
.rec-card__subtitle {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.5;
}

/* Meta-sor: N termék + CSV-gomb */
.rec-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.rec-card__meta-count { color: var(--color-text-muted); font-size: var(--text-sm); }
.rec-card__csv {
  display: inline-flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.rec-card__csv:hover:not(:disabled) { background: var(--panel-muted); border-color: var(--color-border-strong); }
.rec-card__csv:disabled { opacity: 0.5; cursor: default; }

/* Kártya nyitás/zárás toggle */
.rec-card__toggle {
  flex: 0 0 auto;
  align-self: flex-start;
  border: none; background: none;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  cursor: pointer;
  padding: var(--space-2);
  line-height: 1;
}
.rec-card__toggle:hover { color: var(--color-text); }
.rec-card__toggle i { display: inline-block; transition: transform 0.15s ease; }
.rec-card.is-collapsed .rec-card__toggle i { transform: rotate(180deg); }
.rec-card.is-collapsed .rec-card__meta,
.rec-card.is-collapsed .rec-card__table,
.rec-card.is-collapsed .rec-card__ctas { display: none; }

/* Tábla — közös, navy-fejléc, rendezhető. A kártyán fix magasság-korlát: nagy tábla belül görget,
   a navy fejléc ragadós marad (a modál-táblát nem korlátozza — az a rec-modal__body-ban él). */
.rec-table-wrap { overflow-x: auto; border-radius: var(--radius-md); }
.rec-card__table .rec-table-wrap { max-height: 340px; overflow: auto; }
.rec-card__table .rec-table thead th { position: sticky; top: 0; z-index: 1; }
.rec-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.rec-table thead th {
  background: var(--navy);
  color: var(--on-navy);
  font-weight: var(--weight-semibold);
  text-align: left;
  padding: var(--space-6) var(--space-7);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.rec-table thead th:first-child { border-top-left-radius: var(--radius-md); }
.rec-table thead th:last-child { border-top-right-radius: var(--radius-md); }
.rec-th { }
.rec-th > span:first-child { margin-right: var(--space-4); }
.rec-th--num { text-align: right; }
.rec-th-arrow { color: var(--on-navy-faint); font-size: var(--text-xs); }
.rec-th-arrow.is-active { color: var(--on-navy); }
.rec-table tbody td {
  padding: var(--space-6) var(--space-7);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
}
.rec-table tbody tr:last-child td { border-bottom: none; }
.rec-td--num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.rec-cell-link {
  border: none; background: none; padding: 0;
  color: var(--navy);
  font: inherit; font-weight: var(--weight-semibold);
  cursor: pointer;
}
.rec-cell-link:hover { text-decoration: underline; }
.rec-cell-photo { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-sm, 6px); display: block; }

.rec-pill {
  display: inline-block;
  padding: 2px var(--space-5);
  border-radius: 999px;
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  background: var(--rec-tint);
  color: var(--rec-strong);
  white-space: nowrap;
}

/* CTA-lábléc */
.rec-card__ctas { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.rec-cta {
  display: inline-flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-8);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  border: 1px solid transparent;
}
.rec-cta--primary { background: var(--primary); color: #fff; }
.rec-cta--primary:hover { background: var(--green-dark); }
.rec-cta--secondary { background: var(--panel); color: var(--color-text); border-color: var(--color-border); }
.rec-cta--secondary:hover { background: var(--panel-muted); border-color: var(--color-border-strong); }

.rec-card__loading, .rec-card__empty, .rec-card__error { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.rec-card__error { color: var(--color-danger); }

/* Akció-modál (ár-szerkesztő / kiegészítő termék) */
.rec-modal-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(16, 42, 61, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-8);
}
.rec-modal {
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, var(--shadow-md));
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.rec-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-8);
  background: var(--navy); color: var(--on-navy);
}
.rec-modal__title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); }
.rec-modal__close {
  border: none; background: none; color: var(--on-navy);
  font-size: var(--text-lg); cursor: pointer; line-height: 1; padding: var(--space-2);
}
.rec-modal__body { padding: var(--space-8); overflow-y: auto; }
.rec-modal__desc { margin: 0 0 var(--space-7); color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.5; }
.rec-modal__field { display: flex; align-items: center; gap: var(--space-6); margin-bottom: var(--space-7); font-size: var(--text-sm); }
.rec-modal__field input { width: 90px; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); font: inherit; }
.rec-modal__foot { display: flex; justify-content: flex-end; gap: var(--space-5); padding: var(--space-7) var(--space-8); border-top: 1px solid var(--color-border); }

/* Tömeges áremelés fejléc-sávja (stars_list.js) — % / Ft választó + mérték, ami a táblázat
   `.rec-edit-price` celláit tölti fel (soronként még felülírhatóak marad). */
.rec-bulk-price-bar {
  display: flex; align-items: center; gap: var(--space-5);
  margin: 0 0 var(--space-7); padding: var(--space-5) var(--space-6);
  background: var(--panel-muted); border-radius: var(--radius-md); font-size: var(--text-sm);
}
.rec-bulk-price-bar select,
.rec-bulk-price-bar input {
  padding: var(--space-3) var(--space-5); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px); font: inherit;
}
.rec-bulk-price-bar input { width: 90px; }

.rec-edit-table .rec-edit-price {
  width: 110px; padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px);
  font: inherit; text-align: right;
}
.rec-edit-table .rec-edit-check { width: 16px; height: 16px; cursor: pointer; }

@media (max-width: 768px) {
  .rec-card__inner { padding: var(--space-8) var(--space-8) var(--space-8) calc(var(--space-8) + var(--space-3)); gap: var(--space-7); }
  .rec-card__icon { width: 48px; height: 48px; font-size: 22px; }
  .rec-card__meta { flex-wrap: wrap; }
  .rec-cta { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================================
   PRODUCT DATA SCRAPER (PDS) — gyártói adatgyűjtő app
   A terméktáblázat a közös .report-table komponenst örökli; itt csak a toolbar,
   a gombok és a státusz-cellák self-contained, token-vezérelt stílusai.
   ========================================================================== */
.pds { display: flex; flex-direction: column; gap: var(--space-6); }

/* A platform-shell `min-height: 100vh`-val él, és a .app-body `flex: 1 1 0%`-ának százalékos flex-basise
   határozatlan magasságú szülőn a TARTALOMRA oldódik fel — ezért a shell a tartalommal együtt nő, valójában
   az ABLAK görget, a .content-region { overflow-y: auto } pedig sosem lép működésbe. Egy sticky elem a
   (nem görgő) .content-region scrollportjához tapadna, vagyis hatástalan maradna.
   A PDS-oldalon a shellt a viewporthoz kötjük, így a .content-region tényleg görgetővé válik — pontosan
   úgy, ahogy a shell CSS-e eleve szánta (app-body height/overflow, app-sidebar overflow-y, sticky
   app-header). A `:has()` miatt a hatókör szándékosan CSAK a PDS-nézet: a többi képernyő görgetés-modellje
   érintetlen. (A shell általános rendbetétele külön, teljes körű átnézést igénylő feladat.) */
.app-shell:has(.pds) { height: 100vh; }

/* A toolbar a tartalom-régió tetejére tapad, hogy hosszú táblázatnál ne kelljen a lista elejére
   visszagörgetni egy művelethez. A --pds-toolbar-h-t a JS méri (lásd trackToolbarHeight) — ez alá
   tapad a tábla fejléce. */
.pds-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg);
}

/* A .content-region 28px felső paddingja a megtapadt sáv FÖLÖTT marad, és az alá csúszó sorok ott
   kilátszanának. Ez a takaró-csík ugyanazzal a háttérrel tölti ki azt a sávot — nyugalomban láthatatlan
   (a padding amúgy is üres háttér), görgetéskor viszont takar. A magassága a .content-region
   padding-topjához igazodik. */
.pds-toolbar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 28px;
  background: var(--bg);
}
.pds-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.pds-scraper { font-size: var(--text-sm); color: var(--color-text-muted); }
.pds-scraper strong { color: var(--navy); }

/* Közös nézet-navigáció — saját sor (teljes szélesség), minden tabon ugyanaz. */
.pds-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex-basis: 100%;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-2);
}
.pds-nav-btn {
  padding: var(--space-4) var(--space-7);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--navy);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pds-nav-btn:hover:not(:disabled) { background: var(--color-surface-subtle); border-color: var(--navy); }
.pds-nav-btn.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  cursor: default;
}

.pds-btn {
  padding: var(--space-5) var(--space-9);
  border: 1px solid var(--green-strong);
  border-radius: var(--radius);
  background: var(--green-strong);
  color: var(--color-on-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.pds-btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.pds-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.pds-btn--ghost {
  background: var(--color-surface);
  color: var(--navy);
  border-color: var(--color-border-strong);
}
.pds-btn--ghost:hover { background: var(--color-surface-subtle); border-color: var(--navy); }
/* Megszakítás — futás közben jelenik meg. */
.pds-btn--cancel {
  background: var(--color-danger);
  color: var(--color-on-primary);
  border-color: var(--color-danger);
}
.pds-btn--cancel:hover { background: var(--color-danger-hover); border-color: var(--color-danger-hover); }
.pds-btn--cancel:disabled { opacity: 0.6; cursor: not-allowed; }
/* Elsődleges kiemelés — UNAS feltöltés indítása gomb. */
.pds-btn--primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.pds-btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.pds-btn--primary:disabled { opacity: 0.55; cursor: not-allowed; }
/* Tartalomgyártás placeholder — vizuálisan aktív, de „hamarosan" jelzéssel. */
.pds-btn--disabled {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  border-color: var(--color-border);
  cursor: not-allowed;
}
.pds-btn--disabled:hover { background: var(--color-surface-muted); border-color: var(--color-border); }

.pds-progress {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--navy);
  font-weight: var(--weight-semibold);
}

/* Sticky tábla-fejléc a sticky toolbar alatt. A .report-table a hátteret a <tr>-en hordozza, ami a sticky
   <th>-vel nem mozdul együtt — ezért itt a cella kapja meg a navy hátteret. */
.pds-table thead th {
  position: sticky;
  top: var(--pds-toolbar-h, 0px);
  z-index: 2;
  background: var(--navy);
  vertical-align: top;
}

.pds-table .pds-name { max-width: 360px; }

/* Státusz-cellák */
.pds-err { color: var(--color-danger); font-weight: var(--weight-semibold); }
/* UNAS write-back per-termék hibaszöveg a státusz-oszlopban (tördelt, halvány, olvasható). */
.pds-err-detail {
  display: block;
  margin-top: 2px;
  max-width: 360px;
  color: var(--color-text-muted, #64748b);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs, 0.75rem);
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}
/* Letöltött anyagok cella — kind szerinti csoportok (PDF / Termékkép / App-kép) */
.pds-asset-group { display: inline-block; }
.pds-asset-group b { color: var(--navy); font-weight: var(--weight-semibold); }
.pds-table td a { color: var(--color-primary); }

/* --- 2. fázis: tartalom-oszlop + megtekintő popup --- */
.pds-muted { color: var(--color-text-muted); }
.pds-progress--content { color: var(--navy); }
.pds-open { cursor: pointer; }
.pds-table td a.pds-open { font-weight: var(--weight-semibold); }

/* Megtekintő popup — overlay + panel (a Mini-PIM ellenőrző-ablak mintájára) */
.pds-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-6);
}
.pds-popup {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: min(960px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pds-popup-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: var(--navy);
  color: var(--color-on-primary);
}
.pds-popup-title {
  flex: 1;
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pds-popup-nav,
.pds-popup-close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--color-on-primary);
  border-radius: var(--radius-sm);
  width: 2rem;
  height: 2rem;
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}
.pds-popup-nav:hover:not(:disabled),
.pds-popup-close:hover { background: rgba(255, 255, 255, 0.16); }
.pds-popup-nav:disabled { opacity: 0.35; cursor: not-allowed; }

.pds-popup-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}
.pds-tab {
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}
.pds-tab.is-active {
  background: var(--color-surface);
  color: var(--navy);
  font-weight: var(--weight-semibold);
  border-color: var(--color-border-strong);
}
.pds-tab--err { color: var(--color-danger); }
.pds-tab--wait { font-style: italic; }

.pds-popup-body {
  flex: 1;
  overflow: auto;
  padding: var(--space-5);
  background: var(--color-surface);
}
/* Az AI-generált HTML izolált konténere (sandbox-iframe) — az Unas-megjelenést közelíti */
.pds-popup-frame {
  width: 100%;
  min-height: 60vh;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
}
.pds-popup-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text);
}
.pds-popup-msg { padding: var(--space-6) 0; text-align: center; }

/* --- Prompt beállítások (szerkeszthető prompt-admin + modell) --- */
.pds-prompt { display: flex; flex-direction: column; gap: var(--space-5); }
.pds-prompt-help {
  background: var(--color-surface-subtle);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
}
.pds-prompt-help h2 { margin: 0 0 var(--space-2); color: var(--navy); }
.pds-prompt-help p { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; }
.pds-prompt-help code {
  background: var(--color-surface-muted);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
}
.pds-prompt-editor {
  width: 100%;
  min-height: 60vh;
  resize: vertical;
  padding: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.55;
  box-sizing: border-box;
}
.pds-prompt-editor:focus { outline: none; border-color: var(--color-primary); }
.pds-prompt-form { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.pds-prompt-form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--navy);
  font-weight: var(--weight-semibold);
}
.pds-prompt-form select,
.pds-prompt-form input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-md);
  min-width: 260px;
}
.pds-prompt-bar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.pds-prompt-status { font-size: var(--text-sm); color: var(--color-text-muted); }
.pds-prompt-status--ok { color: var(--color-primary); font-weight: var(--weight-semibold); }
.pds-prompt-status--err { color: var(--color-danger); font-weight: var(--weight-semibold); }
.pds-prompt-status--muted { color: var(--color-text-muted); }

/* ============================================================================================
   APP-SZINTŰ BEÁLLÍTÁSOK HUB (agency_admin) — az App-ok böngésző "Beállítások" kártyájáról.
   Token-vezérelt, a közös felület-stílusra épül; külön/inline CSS nélkül.
   ============================================================================================ */
.select-shop-card.is-settings .card-icon { color: var(--color-primary); }

.app-settings {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}
.app-settings-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.app-settings-section h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--navy);
}
.app-settings-hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.app-settings-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  max-width: 360px;
}
.app-settings-field select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
}
.app-settings-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.ps-status.is-ok { color: var(--green-strong); }
/* Figyelmeztetés: nem hiba (a művelet sikerült), de a felhasználónak látnia kell a következményét
   — pl. az akkushop kategóriafa visszaesett a levezetett forrásra, vagy a csere termékeket érint. */
.ps-status.is-warning { color: var(--c-amber-700); }

/* Egyedi (csomag nélküli) tétel a builderben. */

/* Kétsoros összesítő (előnézet + detail) — Üzembehelyezés/testreszabás + havidíj. */

/* Archívum törlés gomb — finom veszély-jelzés. */

/* ── AI CHAT (Kérdezz az AI-tól) ─────────────────────────── */
.ai-chat {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 140px);
  min-height: 420px;
  gap: var(--space-6);
}

.ai-chat__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.ai-chat__title {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-text-strong);
  font-weight: 650;
  font-size: var(--text-md);
}

.ai-chat__title .ti { color: var(--color-primary); font-size: 20px; }

.ai-chat__model {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.ai-chat__model select {
  min-height: 36px;
  padding: 0 var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.ai-chat__stream {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-8);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.ai-chat__hint {
  margin: auto;
  max-width: 540px;
  text-align: center;
  color: var(--color-text-subtle);
  font-size: var(--text-base);
  line-height: 1.5;
}

.ai-msg { display: flex; }
.ai-msg--user { justify-content: flex-end; }
.ai-msg--assistant { justify-content: flex-start; }

.ai-msg__bubble {
  max-width: 76%;
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ai-msg--user .ai-msg__bubble {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-bottom-right-radius: var(--radius-sm);
}

.ai-msg--assistant .ai-msg__bubble {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-bottom-left-radius: var(--radius-sm);
}

/* Markdown render az asszisztens-buborékban — tömör, olvasható tipográfia. */
.ai-msg__md { white-space: normal; }
.ai-msg__md p { margin: 0 0 var(--space-5); }
.ai-msg__md p:last-child { margin-bottom: 0; }
.ai-msg__md ul, .ai-msg__md ol { margin: 0 0 var(--space-5); padding-left: var(--space-12); }
.ai-msg__md li { margin-bottom: var(--space-2); }
.ai-msg__md strong { font-weight: 650; color: var(--color-text-strong); }
.ai-msg__md table { border-collapse: collapse; margin: var(--space-4) 0; font-size: var(--text-sm); }
.ai-msg__md th, .ai-msg__md td { border: 1px solid var(--color-border); padding: var(--space-3) var(--space-5); text-align: left; }
.ai-msg__md code { background: var(--color-surface-inset); padding: 1px 4px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-xs); }

.ai-chat__status {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  min-height: 18px;
}

.ai-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-pill);
  display: inline-block;
  animation: ai-spin 0.7s linear infinite;
}

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

.ai-chat__composer {
  display: flex;
  gap: var(--space-6);
  align-items: flex-end;
}

.ai-chat__composer textarea {
  flex: 1;
  resize: vertical;
  min-height: 48px;
  max-height: 180px;
  padding: var(--space-6) var(--space-8);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.5;
}

.ai-chat__composer .primary-button { min-width: 100px; }

/* ── AI CHAT archívum ────────────────────────────────────── */
.ai-archive__bar { margin-bottom: var(--space-10); }
.ai-archive__heading {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-xl);
  color: var(--color-text-strong);
}
.ai-archive__heading .ti { color: var(--color-primary); }
.ai-archive__loading { color: var(--color-text-muted); font-size: var(--text-sm); }

.ai-archive__list {
  list-style: none;
  margin: 0 0 var(--space-12);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ai-archive__card {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.ai-archive__open {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-8);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}

.ai-archive__open:hover { background: var(--color-surface-subtle); }
.ai-archive__card-title { font-weight: 650; color: var(--color-text-strong); font-size: var(--text-base); }
.ai-archive__card-meta { font-size: var(--text-xs); color: var(--color-text-muted); }

.ai-archive__del {
  margin: var(--space-5);
  min-width: 40px;
  color: var(--color-danger);
}
.ai-archive__del:hover { background: var(--error-soft); }

.ai-archive__detail {
  padding: var(--space-8);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.ai-archive__thread { display: flex; flex-direction: column; gap: var(--space-6); }

/* =========================================================================
   TARTALOMGYARTO PORTAL  (SocialMedia wizard-redesign — M1)
   CTA-almenük (navy sidebar) + wizard-váz: progress bar, kontextus-sáv,
   forrásválasztó, lépés-keret, navigáció. Token-vezérelt; nincs per-app CSS.
   ========================================================================= */

/* --- CTA-almenük a navy sidebarban (menu.json `"cta": true` szekciók) ------
   A `.menu-item` megmarad (is-active + dispatch változatlan); a `.menu-item-cta`
   gomb-formát ad: zöld-keretes pill, hoverre/aktívan zöld kitöltés. */
.menu-list .menu-item-cta {
  margin: 4px 12px;
  width: calc(100% - 24px);
  padding: 9px 14px;
  border: 1px solid rgba(127, 184, 61, 0.45);
  border-left: 1px solid rgba(127, 184, 61, 0.45);
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.82);
  font-weight: var(--weight-semibold);
  background: rgba(127, 184, 61, 0.08);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.menu-list .menu-item-cta:hover {
  background: rgba(127, 184, 61, 0.20);
  border-color: var(--green);
  color: #fff;
}

.menu-list .menu-item-cta.is-active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

/* --- Wizard-konténer ------------------------------------------------------- */
.wizard {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  max-width: 980px;
}

/* --- Progress bar (N szegmens, az aktuális lépésig zöld) -------------------- */
.wizard-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.wizard-progress {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.wizard-progress-seg {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.wizard-progress-seg .wizard-progress-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  transition: background var(--transition-fast);
}

.wizard-progress-seg.is-done .wizard-progress-bar { background: var(--green); }
.wizard-progress-seg.is-current .wizard-progress-bar { background: var(--green); }

.wizard-progress-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wizard-progress-seg.is-current .wizard-progress-label,
.wizard-progress-seg.is-done .wizard-progress-label {
  color: var(--color-text-strong);
}

/* --- Kontextus-sáv (kiválasztott termékkép / sablonkép / prompt chip-jei) --- */
.wizard-context {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.wizard-ctx-chip {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--muted);
}

.wizard-ctx-chip.is-filled {
  border-color: var(--green);
  color: var(--color-text-strong);
  font-weight: var(--weight-medium);
}

.wizard-ctx-thumb {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.wizard-ctx-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
}

.wizard-ctx-chip.is-filled .wizard-ctx-dot { background: var(--green); }

/* Kiválasztott kiindulás — jól látható termék/kép előnézet az opciós lépés tetején. */
.wiz-product-preview:empty { display: none; }
.wiz-product-preview {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-md);
}
.wiz-preview-img {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.wiz-preview-meta { display: flex; flex-direction: column; gap: var(--space-2); }
.wiz-preview-cap {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.wiz-preview-name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-strong); }

/* === API DEBUG („API hívás" gomb + modal; átmeneti, kikapcsolható) === */
.api-debug-btn { opacity: 0.85; }
.api-debug-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background: rgba(5, 17, 28, 0.55);
}
.api-debug-panel {
  width: min(720px, 100%);
  max-height: 80vh;
  overflow: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.api-debug-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  font-weight: var(--weight-bold);
  color: var(--color-text-strong);
}
.api-debug-note { margin: 0 0 var(--space-6); font-size: var(--text-sm); color: var(--muted); }
.api-debug-curl {
  margin: 0 0 var(--space-6);
  padding: var(--space-6);
  background: var(--navy);
  color: #e6f0f5;
  border-radius: var(--radius-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.api-debug-actions { display: flex; justify-content: flex-end; }

/* --- Lépés-test ------------------------------------------------------------ */
.wizard-step-intro { margin-bottom: var(--space-10); }

.wizard-step-intro h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-2xl);
  color: var(--navy);
}

.wizard-step-hint,
.wizard-placeholder-tag {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Forrásválasztó CTA-k (File1) */
.wizard-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-8);
}

.wizard-source-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-12);
  text-align: left;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.wizard-source-cta:hover {
  border-color: var(--green);
  box-shadow: 0 6px 18px rgba(20, 33, 61, 0.08);
  transform: translateY(-2px);
}

.wizard-source-icon {
  font-size: 28px;
  color: var(--green);
}

.wizard-source-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--navy);
}

.wizard-source-desc {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.4;
}

/* „hamarosan" lépés-placeholder (M1 váz) */
.wizard-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  padding: var(--space-16) var(--space-8);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
}

.wizard-placeholder-icon {
  font-size: 36px;
  color: var(--green);
}

.wizard-placeholder h2 {
  margin: 0;
  font-size: var(--text-xl);
  color: var(--navy);
}

.wizard-placeholder p {
  margin: 0;
  max-width: 520px;
  color: var(--text);
  font-size: var(--text-base);
}

/* --- Navigáció ------------------------------------------------------------- */
.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
  /* A nav a lépés-törzs fölött ül (a fejléc alatt) — a szeparátor és a térköz alulra kerül,
     hogy elváljon a tartalomtól (pl. UNAS terméktábla). */
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-16);
  border-bottom: 1px solid var(--color-border);
}

.wizard-nav-spacer { flex: 0 0 auto; }
.wizard-nav .wizard-nav-next { margin-left: auto; }

/* =========================================================================
   TARTALOMGYARTO PORTAL — M2 (Track A: Webshop képkészítő)
   A wizard-vázra épülő track-lépések: terméktábla / kép-feltöltés, Prompt
   Garden 3 mód + méret/minőség/modell, eredmény-rács. Token-vezérelt; a
   terméktábla a közös .dg-*, a promptok a közös .img-* primitíveket használják.
   ========================================================================= */

/* A track szélesebb lehet, mint az alap wizard (terméktábla + eredmény-rács). */
.wizard:has(.wiz-select),
.wizard:has(.wiz-options),
.wizard:has(.wiz-result) { max-width: 1180px; }

/* --- 2. lépés: UNAS terméktábla --------------------------------------------- */
.wiz-select-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.wiz-shop-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-strong);
}

.wiz-shop-label .ps-input { width: auto; min-width: 220px; }
.wiz-shop-label .ti { color: var(--green); }

/* --- 2. lépés: kép-feltöltés ------------------------------------------------ */
.wiz-upload-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-16) var(--space-8);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
  text-align: center;
}

.wiz-upload-icon { font-size: 34px; color: var(--green); }

.wiz-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.wiz-thumb {
  position: relative;
  width: 104px;
  height: 104px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-subtle);
}

.wiz-thumb img { width: 100%; height: 100%; object-fit: cover; }

.wiz-thumb-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(20, 33, 61, 0.78);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.wiz-thumb-del:hover { background: var(--navy); }

/* --- 3. lépés: prompt-módok + generálási opciók ----------------------------- */
.wiz-pmode { margin: var(--space-8) 0; }

.wiz-genopts {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.wiz-sizes {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 220px;
}

.wiz-sizes legend {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-strong);
  padding: 0;
  margin-bottom: var(--space-4);
}

.wiz-size-opt {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text);
  margin-bottom: var(--space-3);
  cursor: pointer;
}

.wiz-genopts .img-field { min-width: 200px; }

/* --- 4. lépés: eredmény-rács ------------------------------------------------ */
.wiz-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

.wiz-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.wiz-cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.wiz-cell-name {
  font-weight: var(--weight-semibold);
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wiz-cell-size {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  color: var(--muted);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}

.wiz-cell-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  overflow: hidden;
}

.wiz-cell-img img { width: 100%; height: 100%; object-fit: contain; }

.wiz-cell-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.wiz-cell-msg { margin: 0; font-size: var(--text-xs); }

/* =========================================================================
   TARTALOMGYARTO PORTAL — M3 (Sablontár kezelő-UI)
   A Beállítások → "Sablon képek csatolása" per-ügyfél sablonkép-galériája.
   A toolbar/form a közös .garden / .img-* / .ps-* primitíveket használja; itt
   csak a kártyás galéria saját elemei. Token-vezérelt, nincs inline CSS.
   ========================================================================= */
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.tpl-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.tpl-card.is-inactive { opacity: 0.6; }

.tpl-thumb {
  aspect-ratio: 4 / 3;
  background: var(--color-surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tpl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tpl-thumb span { font-size: var(--text-xs); color: var(--color-text-muted); }

.tpl-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}

.tpl-label { font-weight: 600; font-size: var(--text-sm); }

.tpl-badge {
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.tpl-prompt {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tpl-actions { display: flex; gap: var(--space-2); margin-top: auto; }

.tpl-active-field {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

/* =========================================================================
   TARTALOMGYARTO PORTAL — M4 (Track B: Sablon tartalomgyártás)
   A sablonválasztó (újrahasznált .tpl-* kártyák, választható állapottal) +
   a kép+szöveg eredmény-elrendezés. Token-vezérelt; a közös .wiz-*/.img-*
   primitívekre épül. Nincs per-app/inline CSS.
   ========================================================================= */
.tpl-card.tpl-pick {
  cursor: pointer;
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
  transition: border-color var(--transition-fast, 0.15s), box-shadow var(--transition-fast, 0.15s);
}

.tpl-card.tpl-pick.is-selected {
  border-color: var(--color-primary, var(--primary));
  box-shadow: 0 0 0 2px var(--color-primary, var(--primary));
}

.wiz-tpl-pick { border: none; padding: 0; margin: 0 0 var(--space-4); }
.wiz-tpl-pick > legend { font-weight: 600; padding: 0; margin-bottom: var(--space-2); }

.wiz-text-opts { margin-top: var(--space-5); border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.wiz-subhead { margin: 0 0 var(--space-3); font-size: var(--text-md); }

.wiz-post-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 760px) { .wiz-post-layout { grid-template-columns: 1fr; } }

.wiz-post-image {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
}

.wiz-post-image img { width: 100%; height: auto; border-radius: var(--radius-sm); }

.wiz-post-texts { display: flex; flex-direction: column; gap: var(--space-4); }

.wiz-text-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.wiz-text-head { font-weight: 600; font-size: var(--text-sm); }

.wiz-text-block { display: flex; flex-direction: column; gap: var(--space-1); }
.wiz-text-block p { margin: 0; white-space: pre-wrap; font-size: var(--text-sm); }

.wiz-text-tag {
  align-self: flex-start;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary, var(--primary));
}

/* =========================================================================
   TARTALOMGYARTO PORTAL — M5 (Track C: Hirdetésikép)
   A nulláról-ág két-kép feltöltő slotjai + a méretenkénti hirdetés-cellák.
   Token-vezérelt; a közös .wiz-*/.img-* primitívekre épül. Nincs inline CSS.
   ========================================================================= */
.wiz-twoslot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

@media (max-width: 640px) { .wiz-twoslot { grid-template-columns: 1fr; } }

.wiz-slot {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.wiz-slot h3 { margin: 0; font-size: var(--text-sm); }

.wiz-slot-preview {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.wiz-slot-preview img { width: 100%; height: 100%; object-fit: contain; }
.wiz-slot-empty { font-size: var(--text-xs); color: var(--color-text-muted); }

.wiz-ad-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-surface);
}

.wiz-ad-cell + .wiz-ad-cell { margin-top: var(--space-3); }
.wiz-ad-cell .wiz-cell-img img { width: 100%; height: auto; border-radius: var(--radius-sm); }

/* =========================================================================
   TARTALOMGYARTO PORTAL — M6 (Jóváhagyó link)
   A track eredmény-nézet „Ügyfélnek küldöm" megosztás-doboza + a publikus
   /review/{token} oldal. Token-vezérelt; a közös primitívekre épül.
   ========================================================================= */
.review-share-box {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.review-share-label { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.review-share-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.review-share-row .ps-input { flex: 1 1 240px; }

/* Publikus review-oldal (önálló, a styles.css-re kötve) */
.review-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.review-head { display: flex; flex-direction: column; gap: var(--space-2); }
.review-brand { font-size: var(--text-lg); color: var(--color-primary, var(--primary)); }
.review-title { margin: 0; font-size: var(--text-xl); }

.review-body { display: flex; flex-direction: column; gap: var(--space-4); }

.review-image {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.review-image img { width: 100%; height: auto; display: block; }

.review-texts { display: flex; flex-direction: column; gap: var(--space-3); }

.review-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.review-comment { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }

.review-decided {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.review-decided.review-approved { border-color: var(--color-primary, var(--primary)); }
.review-note { margin: 0; font-style: italic; }

/* ============================================================================
   === UNAS REDESIGN — REPORTS HOME ===
   A „Riportok" menüpont KPI-kártyarácsa (2×3) + detail nézet (alriport-választó
   chat-wizard). Lásd reports_home.js. (UNAS app redesign §3.)
   ============================================================================ */

/* Flat (csoport-fejléc nélküli) menü-lista a UNAS redesign 6 menüpontjához. */
.menu-list--flat { padding-top: var(--space-2); }

.rh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
  width: min(100%, 1000px);
  margin: 0 auto;
  padding-top: var(--space-4);
}

@media (max-width: 900px) {
  .rh-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .rh-grid { grid-template-columns: 1fr; }
}

.rh-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 150px;
  padding: var(--space-12) var(--space-12) var(--space-10);
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.rh-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
}

.rh-card-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.rh-card-kpi {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-strong);
  line-height: 1.1;
}

.rh-card-caption {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: auto;
}

.rh-spark {
  width: 100%;
  height: 40px;
  color: var(--primary);
  margin-top: var(--space-2);
}

/* „Kérdezz az AI-tól" CTA-kártya — márkás kiemelés. */
.rh-card--cta {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  border-color: transparent;
  color: #fff;
}
.rh-card--cta .rh-card-title,
.rh-card--cta .rh-card-kpi,
.rh-card--cta .rh-card-caption { color: #fff; }
.rh-card--cta:hover { border-color: transparent; }

/* Detail nézet — vissza-gomb + alriport-választó wizard. */
.rh-detail { width: min(100%, 760px); margin: 0 auto; }

.rh-wizard-q {
  margin: 0 0 var(--space-8);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}

.rh-pills { display: flex; flex-wrap: wrap; gap: var(--space-5); }

.rh-pill {
  padding: var(--space-5) var(--space-9);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-strong);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.rh-pill:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ============================================================================
   === UNAS REDESIGN — ARCHIVE ===
   Egyesített archívum-tábla (Okos hirdetések + Tartalomgyártás kimenetei) +
   típus-badge (hirdetés = kék, webshop-tartalom = zöld) + megtekintő popup.
   Lásd unas_archive.js. (UNAS app redesign §7.)
   ============================================================================ */

.arch { width: min(100%, 980px); margin: 0 auto; }

.arch-tabs { display: flex; gap: var(--space-4); margin-bottom: var(--space-10); }

.arch-tab {
  padding: var(--space-4) var(--space-9);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-strong);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.arch-tab.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }

.badge-ad { background: rgba(26, 143, 255, 0.14); color: #1a8fff; }
.badge-content { background: var(--primary-soft); color: var(--primary); }

.arch-table { width: 100%; border-collapse: collapse; }
.arch-table th, .arch-table td {
  padding: var(--space-6) var(--space-7);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.arch-table thead th {
  background: var(--c-navy);
  color: #fff;
  font-weight: var(--weight-semibold);
}
.arch-table tbody tr:hover { background: var(--color-surface-subtle); }
.arch-actions { display: flex; gap: var(--space-4); white-space: nowrap; }

.arch-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-strong);
  cursor: pointer;
}
.arch-btn:hover { border-color: var(--primary); color: var(--primary); }
.arch-btn--danger:hover { border-color: #d24; color: #d24; }

/* Megtekintő popup. */
.arch-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16, 42, 61, 0.55);
  padding: var(--space-10);
}
.arch-modal {
  width: min(100%, 640px);
  max-height: 86vh;
  overflow: auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.arch-modal-head {
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-8) var(--space-10);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; background: var(--color-surface);
}
.arch-modal-head strong { flex: 1; }
.arch-modal-close {
  background: transparent; border: none; cursor: pointer;
  color: var(--muted); font-size: var(--text-xl);
}
.arch-modal-body { padding: var(--space-10); }
.arch-media { max-width: 100%; border-radius: var(--radius-md); }
.arch-text { white-space: pre-wrap; line-height: var(--leading-normal); color: var(--color-text); }

/* ============================================================================
   === UNAS REDESIGN — ADS ===
   Okos hirdetések: 5 szegmens-kártya (2-2-1) + detail (tartalom-típus pillek +
   előszűrt DataGrid) + eredmény-popup (lapozható, vágólap). Lásd ads.js. (§6.)
   ============================================================================ */

/* Az 5. kártya („Én választok") a két oszlop alatt középre kerül (2-2-1). */

/* Detail nézet. */

.ads-types {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5);
  margin: var(--space-6) 0 var(--space-10);
}
.ads-types-label { font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.ads-pill {
  padding: var(--space-4) var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-strong);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.ads-pill.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Eredmény-popup. */
.ads-result { width: min(100%, 680px); }
.ads-result-counter { flex: 1; font-size: var(--text-sm); color: var(--color-text-strong); }
.ads-result-body { min-height: 120px; }
.ads-result-foot {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-7) var(--space-10);
  border-top: 1px solid var(--color-border);
}
.ads-foot-spacer { flex: 1; }
.ads-pager {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text-strong);
}
.ads-pager:hover { border-color: var(--primary); color: var(--primary); }
.ads-result-foot .secondary-button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-8);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); color: var(--color-text-strong);
  font-weight: var(--weight-medium); cursor: pointer;
}
.ads-result-foot .secondary-button:hover { border-color: var(--primary); color: var(--primary); }
.ads-error { color: #d24; margin-top: var(--space-5); }

.ads-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 1100;
  background: var(--c-navy); color: #fff;
  padding: var(--space-6) var(--space-10);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
}

/* ============================================================================
   === UNAS REDESIGN — SETTINGS ===
   Beállítások (SPEC-beallitasok-harom-szint.md §2): egy ablak, két rész — Ügyfél (Kapcsolatok ·
   Prompt kezelés · AI-modellek · Marketing · Brand Book) | <App> (UNAS: Kapcsolatok · Árfigyelés ·
   Költségek · Árrés és besorolás). A keret a `UI.page` csoportos mappafül-sora (`views.groups`) —
   ITT NINCS saját fül-szabály. Lásd app/static/settings.js.
   ============================================================================ */

.set { width: min(100%, 760px); margin: 0 auto; display: grid; gap: var(--space-12); }

.set-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-12);
}
.set-card h3 { margin: 0 0 var(--space-3); font-size: var(--text-xl); color: var(--color-text-strong); }
.set-hint { margin: 0 0 var(--space-10); color: var(--muted); font-size: var(--text-sm); }
/* Ügyfélszintű fül sávja: a beállítás az ügyfél minden webshopjára hat (§3.1). */
.set-scope {
  display: flex; align-items: center; gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-8); padding: var(--space-5) var(--space-7);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface-subtle); color: var(--color-text-strong); font-size: var(--text-sm);
}

.set-field { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); }
.set-field > span { font-weight: var(--weight-medium); color: var(--color-text-strong); font-size: var(--text-sm); }
.set-field input, .set-field select, .set-field textarea {
  padding: var(--space-5) var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-base);
}
.set-field textarea { resize: vertical; }
.set-field input:focus, .set-field select:focus, .set-field textarea:focus {
  outline: none; border-color: var(--primary);
}

.set-actions { display: flex; align-items: center; gap: var(--space-6); }
.set-msg { color: var(--primary); font-size: var(--text-sm); font-weight: var(--weight-medium); }

.set-editor {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-10);
  margin-bottom: var(--space-10);
}
.set-editor-head { margin-bottom: var(--space-6); }

.set-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.set-item {
  display: flex; align-items: flex-start; gap: var(--space-8);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}
.set-item-main { flex: 1; display: grid; gap: var(--space-3); }
.set-item-text { margin: 0; color: var(--muted); font-size: var(--text-sm); white-space: pre-wrap; }
.set-item-actions { display: flex; gap: var(--space-4); white-space: nowrap; }
.set-empty { color: var(--muted); font-size: var(--text-sm); }

/* Saját AI-modellek (SPEC-kliens-szintu-ai-modellek.md): checkbox-mező a modell-modalban. */
.set-field--check {
  display: flex; align-items: center; gap: var(--space-4);
}
.set-field--check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); }
.set-field--check > span { font-weight: var(--weight-medium); color: var(--color-text-strong); font-size: var(--text-sm); }

/* ============================================================================
   === UNAS — KÖLTSÉG-BEÁLLÍTÁS ===
   A Beállítások „Költségek beállítása" szekciója (SPEC-unas-koltseg-modul.md §4):
   havi fix költségek CRUD-táblája, árrés-mód választó az öröklődő kategória-fával,
   és a marketing-bekötések állapotjelzése. Lásd cost_settings.js.
   ============================================================================ */

.cost-block { margin-bottom: var(--space-12); }
.cost-block:last-child { margin-bottom: 0; }
.cost-block h4 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text-strong);
}

/* Árrés-mód választó (rádiógombok + a hozzájuk tartozó, egyszerre csak egy látszó törzs). */
.cost-modes { display: grid; gap: var(--space-4); margin-bottom: var(--space-8); }
.cost-mode {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  cursor: pointer;
  font-size: var(--text-sm);
}
.cost-mode input[type="radio"] { margin-top: 2px; accent-color: var(--primary); }
.cost-mode:has(input:checked) { border-color: var(--primary); background: var(--color-surface); }
.cost-mode-body { padding: 0 var(--space-6) var(--space-4) calc(var(--space-6) + 18px); }
.cost-mode-body.is-hidden { display: none; }

.set-field--inline { display: flex; align-items: center; gap: var(--space-5); margin-bottom: 0; }
.set-field--inline > span { white-space: nowrap; }
.set-field--inline input { width: 8rem; }

/* Kitöltöttség-visszajelzés a kategóriás módban (hiányzó árrés = 0 haszon — látszania kell). */
.cost-warn, .cost-ok {
  display: flex; align-items: center; gap: var(--space-4);
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.cost-warn { background: var(--color-danger-soft, rgba(200, 60, 40, .08)); color: var(--color-text-strong); }
.cost-ok { background: var(--color-success-soft, rgba(94, 158, 46, .10)); color: var(--color-text-strong); }

.cost-search {
  flex: 1; min-width: 12rem;
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--text-sm);
}
.cost-check { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--muted); }
.cost-check input { accent-color: var(--primary); }
.cost-block .set-toolbar { display: flex; align-items: center; gap: var(--space-5); }

/* Kategória-fa: soronként nyitó-nyíl + név + termékszám + árrés-mező. A behúzást FIX
   mélység-osztály adja (a feed-kezelő `feedm-lvl*` mintája) — inline `style` a platformon tilos. */
.cost-tree {
  max-height: 26rem; overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.cost-tree-row {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle, var(--color-border));
  font-size: var(--text-sm);
}
.cost-tree-row:last-child { border-bottom: none; }
.cost-lvl0 { padding-left: var(--space-6); }
.cost-lvl1 { padding-left: 2rem; }
.cost-lvl2 { padding-left: 3.5rem; }
.cost-lvl3 { padding-left: 5rem; }
.cost-lvl4 { padding-left: 6.5rem; }
.cost-lvl5 { padding-left: 8rem; }

.cost-tree-toggle {
  width: 1.5rem; height: 1.5rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer;
  color: var(--muted);
}
.cost-tree-toggle.is-leaf { cursor: default; }
.cost-tree-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cost-tree-count { flex: none; font-size: var(--text-2xs); }
.cost-tree-input {
  flex: none; width: 6rem; text-align: right;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--text-sm);
}
.cost-tree-input:focus { outline: none; border-color: var(--primary); }
/* Örökölt érték: a mező ÜRES, a placeholder mutatja, honnan jön — így egyértelmű, hogy nem saját. */
.cost-tree-input.is-inherited::placeholder { color: var(--primary); opacity: .75; }
.cost-tree-unit { flex: none; color: var(--muted); }

/* Marketing-bekötés állapotsorok (csak jelzés — a bekötés agency admin hatáskör). */
.cost-conn {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}
.cost-conn.is-on { border-color: var(--primary); }
.cost-conn.is-on i { color: var(--primary); }
.cost-conn.is-off i { color: var(--muted); }
.cost-conn span { color: var(--muted); }

/* Költségelemzés „Részletek" modál (cost_day_modal.js). Két fül: a költség-bontás tétel-listája
   (2 oszlopos `.ff-table`, a sortípust a `kind` adja) és a rendelés-szintű tábla. A fülcsík a közös
   `.ff-tabs`/`.ff-tab`; itt csak a tétel-lista sortípusai és a negatív szám színe él.
   (SPEC-koltseg-modul-finomhangolas.md §5.) */
.cd-neg { color: var(--color-danger, #c8442c); }
.cd-warn-text { color: var(--color-danger, #c8442c); font-weight: var(--weight-medium); }
/* Behúzott altétel (Google-csatorna, egy-egy fix költségsor) — a szülő szekció alá tagolva. */
.cd-sub td:first-child { padding-left: var(--space-12); color: var(--muted); }
/* Záró „Nettó haszon" sor: kiemelt, felül elválasztó vonallal. */
.cd-total td { font-weight: var(--weight-semibold); border-top: 2px solid var(--line); }
/* Érték nélküli magyarázó sor (pl. „nincs felvett működési költség"). */
.cd-note td { font-style: italic; color: var(--muted); }
.cd-foot { margin: var(--space-6) 0 0; color: var(--muted); font-size: var(--text-sm); }

/* === UNAS REDESIGN — ADS mátrix (Hirdetéskezelés) === */
.ads-cell { text-align: center; }
.ads-cell .ads-check { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary); }
.ads-colall {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-2xs); font-weight: var(--weight-regular);
  color: var(--muted); cursor: pointer;
}
.ads-colall input { accent-color: var(--primary); cursor: pointer; }
.ads-result-body .arch-text { white-space: pre-wrap; line-height: var(--leading-normal); }

/* === RIPORTOK — ELEMZÉSEK (időszak-összevetés: bázis vs jelenlegi idődiagram) === */
.analysis-summary {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.analysis-kpi {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2, rgba(0,0,0,.03));
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: var(--radius-md, 8px);
  min-width: 140px;
}
.analysis-kpi-label { font-size: var(--text-2xs); color: var(--muted); }
.analysis-kpi strong { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.analysis-delta.is-up strong { color: #16a34a; }
.analysis-delta.is-down strong { color: #dc2626; }
.analysis-chart-wrap { position: relative; height: 340px; width: 100%; }

/* === PRODUCT DETAIL MODAL ===
   Egy termék részletes pillanatképe (termékstatisztika-táblákból a névre kattintva megnyílik).
   Csak design-tokeneket használ; a felépítést a product_modal.js adja. */

/* Kattintható terméknév a report-táblákban (a nem-termék sorok sima szövegek maradnak). */
.pm-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--primary);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.pm-link:hover { color: var(--primary-hover); text-decoration: underline; }

.product-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  z-index: 1100;
  overflow-y: auto;
}

.product-modal {
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 720px;
  overflow: hidden;
}

.pm-header {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  background: var(--navy);
  color: #fff;
  padding: var(--space-10) var(--space-12);
}
.pm-header-thumb {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.pm-header-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pm-header-text { flex: 1 1 auto; min-width: 0; }
.pm-header-text h2 { margin: 0; color: #fff; font-size: 1.25rem; font-weight: var(--weight-bold); }
.pm-subtitle { margin: 2px 0 0; color: rgba(255, 255, 255, 0.72); font-size: 0.85rem; }
.pm-close {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
  padding: var(--space-2);
}
.pm-close:hover { color: #fff; }

.pm-body {
  padding: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.pm-top { display: flex; gap: var(--space-12); }
.pm-photo {
  width: 148px;
  height: 148px;
  flex: 0 0 148px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--color-surface-subtle);
  border: 1px solid var(--line);
}
.pm-photo-empty { display: block; }
.pm-descs { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); }

.pm-field-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.pm-shortdesc, .pm-descs .pm-field p, .pm-seo p { margin: 0; color: var(--color-text-row); }
.pm-longdesc { color: var(--color-text-row); }
.pm-longdesc.is-collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pm-more {
  margin-top: var(--space-3);
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pm-more:hover { color: var(--primary-hover); }

.pm-seo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  background: var(--color-surface-subtle-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-10) var(--space-12);
}

.pm-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}
.pm-kpi {
  background: var(--color-surface-subtle);
  border-radius: var(--radius);
  padding: var(--space-8) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pm-kpi.is-stock { background: var(--green-soft-bg); }
.pm-kpi-label { font-size: 0.8rem; color: var(--color-text-subtle); }
.pm-kpi.is-stock .pm-kpi-label { color: var(--primary); }
.pm-kpi-value { font-size: 1.4rem; font-weight: var(--weight-bold); color: var(--color-text); }
.pm-kpi.is-stock .pm-kpi-value { color: var(--primary); }
.pm-kpi-sub { font-size: 0.8rem; color: var(--color-text-muted); }
.pm-kpi.is-stock .pm-kpi-sub { color: var(--primary); }

.pm-chart-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-10) var(--space-12) var(--space-12);
}
.pm-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-8);
}
.pm-chart-title { font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.pm-chart-total { font-size: 0.85rem; color: var(--color-text-muted); }
.pm-chart-wrap { position: relative; height: 220px; width: 100%; }

/* „Ezeket vették még a termékhez" — társ-termék lista a termék-modálban (kattintható tételek). */
.pm-bought { display: flex; flex-direction: column; gap: var(--space-6); }
.pm-bought-empty { margin: 0; color: var(--color-text-muted); }
.pm-bought-list { display: flex; flex-direction: column; gap: var(--space-4); }
.pm-bought-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-8);
  background: var(--color-surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--color-text);
}
.pm-bought-item:hover { border-color: var(--primary); color: var(--primary); }
.pm-bought-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-bought-qty { flex: 0 0 auto; font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.pm-bought-item:hover .pm-bought-qty { color: var(--primary); }

/* Co-purchase drill-down modál: nézet-váltó. */
.pm-toggle { margin-bottom: var(--space-4); }
/* Tartalom-megtekintő (batch jóváhagyás + UNAS archívum) a report/co-purchase modal designnal —
   szélesebb panel a képek/HTML-előnézetek kényelmes megjelenítéséhez. */
.pimc-vmodal { max-width: 860px; }
.cp-note { margin: var(--space-6) 0 0; font-size: 0.8rem; color: var(--color-text-muted); }

@media (max-width: 640px) {
  .pm-top { flex-direction: column; }
  .pm-photo { width: 120px; height: 120px; flex-basis: 120px; }
  .pm-seo { grid-template-columns: 1fr; }
  .pm-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   UNAS FEED KEZELÉS — általános feed-kezelő (unas.feed)
   Belépő (Feedek + Feed típusok táblázat) · típus-szerkesztő · feed-szerkesztő
   (3-termékes élő minta-panel + attribútum-táblázat + keletkeztetés-modal:
   chip-kompozíció / csereszabályok / AI) · „Megnézem" nézet. Lásd feed_manager.js.
   Gombok: a közös .ps-btn készlet; saját világos-panel vezérlők: .feedm-input/-select.

   FIGYELEM (2026-08-17) — a MÓD-MODAL osztályai MEGOSZTOTTAK:
   .feedm-modal* · .feedm-mode-tabs · .feedm-compose* · .feedm-chip* · .feedm-rule* ·
   .feedm-field · .feedm-help · .feedm-input/-select/-textarea (+ .feedm-op/.feedm-num)
   — ezeket a közös app/static/mapping_editor.js is használja, tehát rajtuk KÍVÜL az
   Akkuwebshop termékforrás-szerkesztője (akkushop.js) is fut. A `feedm-` prefix TÖRTÉNETI
   név (innen emeltük ki a komponenst); módosításuk MINDKÉT felületre hat, ezért változtatás
   után a feed-szerkesztő ÉS az akkushop mezőmapping-modal is ellenőrizendő.
   ============================================================================ */

.feedm { display: flex; flex-direction: column; gap: var(--space-7); }

.feedm-section { display: flex; flex-direction: column; gap: var(--space-4); }
.feedm-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.feedm-section-head h2 { margin: 0; font-size: var(--text-lg); }

.feedm-toolbar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.feedm-spacer { flex: 1; }
.feedm-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.feedm-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.feedm-muted { color: var(--color-text-muted); font-size: var(--text-sm); }
.feedm-help { display: block; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-regular); }

/* --- űrlap-vezérlők (világos panelen) --- */
.feedm-fields { display: flex; gap: var(--space-7); flex-wrap: wrap; }
.feedm-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.feedm-fields > .feedm-field { min-width: 220px; flex: 1 1 220px; }
.feedm-inline-controls { display: flex; gap: var(--space-3); }
.feedm-input,
.feedm-select,
.feedm-textarea {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-ctl);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  width: 100%;
}
.feedm-textarea { resize: vertical; }
.feedm-input:focus,
.feedm-select:focus,
.feedm-textarea:focus { outline: none; border-color: var(--color-primary); }
.feedm-input:disabled { background: var(--color-surface-muted); color: var(--color-text-muted); }

/* --- termékkör (kategória-checkboxok) --- */
.feedm-scope { display: flex; flex-direction: column; gap: var(--space-3); }
.feedm-scope-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.feedm-cats {
  display: flex;
  flex-direction: column;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-ctl);
}
.feedm-cat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  cursor: pointer;
}
.feedm-cat:nth-child(even) { background: var(--color-surface-muted); }
.feedm-cat > span:first-of-type { flex: 1; }
.feedm-cat--hidden { display: none; }

/* --- minta-panel --- */
.feedm-sample {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.feedm-sample-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }

/* --- attribútum-táblázat --- */
.feedm-attrs td { vertical-align: top; }
.feedm-attr-meta { color: var(--color-text-muted); font-size: var(--text-xs); }
.feedm-result { font-size: var(--text-sm); max-width: 420px; overflow-wrap: anywhere; }

/* Alak-választó a konténer-attribútum sorában (SPEC-feed-blokk-ai-rangsor.md §2.8): blokkonkénti
   beállítás VAGY egyetlen AI-hívás az egész szerkezetre. A cellában a gomb FÖLÖTT áll, hogy a
   „+ blokk" / „Keletkeztetés…" gomb ne csússzon mellé keskeny nézetben. */
.feedm-shape { margin-bottom: var(--space-2); width: 100%; max-width: 280px; }

/* Fészkelt / ismétlődő elemek (SPEC-feed-feszkelt-ismetlodo-elemek.md): a csoport gyerekei és
   a blokkok behúzott AL-SORKÉNT jelennek meg — ugyanabban az .ff-table táblázatban, saját
   táblázat-osztály nélkül (FF-TABLE szabály).

   A szülő balra zárva marad, a gyerek egy bekezdésnyivel beljebb kerül (a blokk gyereke még
   eggyel). A behúzás a CELLÁN él, nem inline elemen: a beviteli mezők `width: 100%`-osak, egy
   inline behúzó elem mellől a következő sorba csúsztak volna. A `.feedm` prefix az FF-TABLE
   zebra-szabályánál (0,2,2) erősebb specificitást ad, hogy a cella-padding érvényre jusson. */
.feedm .ff-table tbody td.feedm-lvl1,
.feedm .ff-table tbody td.feedm-lvl2 { position: relative; }
.feedm .ff-table tbody td.feedm-lvl1 { padding-left: 2.5rem; }
.feedm .ff-table tbody td.feedm-lvl2 { padding-left: 4.5rem; }
.feedm .ff-table tbody td.feedm-lvl1::before,
.feedm .ff-table tbody td.feedm-lvl2::before {
  content: "└";
  position: absolute;
  top: var(--ff-cell-pad-y);
  color: var(--color-border-strong);
}
.feedm .ff-table tbody td.feedm-lvl1::before { left: 1.1rem; }
.feedm .ff-table tbody td.feedm-lvl2::before { left: 3.1rem; }
.feedm-check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }

/* --- előnézet: táblázat / XML kapcsoló --- */
.feedm-preview-tabs { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }
.feedm-xml {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.feedm-xml-head {
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.feedm-xml-body {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.5;
  white-space: pre;
}

/* --- keletkeztetés-modal --- */
.feedm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-8);
}
.feedm-modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  width: min(720px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-7);
}
.feedm-modal-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.feedm-mode-tabs { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.feedm-modal-body { display: flex; flex-direction: column; gap: var(--space-4); }
.feedm-modal-foot { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* --- kompozíció (chip) szerkesztő --- */
.feedm-compose-wrap { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.feedm-compose {
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-ctl);
  font-size: var(--text-sm);
  line-height: 1.9;
}
.feedm-compose:focus { outline: none; border-color: var(--color-primary); }
.feedm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-primary-soft, #e6f4ef);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill, 999px);
  padding: 0 var(--space-3);
  margin: 0 2px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  user-select: none;
}
.feedm-chip-x {
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: var(--text-sm);
  padding: 0;
  line-height: 1;
}
.feedm-compose-picker { display: flex; gap: var(--space-3); align-items: center; }
.feedm-compose-picker .feedm-select { flex: 1; }

/* --- csereszabályok --- */
.feedm-rules { display: flex; flex-direction: column; gap: var(--space-5); }
.feedm-rule {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-ctl);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.feedm-rule-cond { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); }
.feedm-rule-cond .feedm-select { width: auto; min-width: 180px; }
.feedm-rule-cond .feedm-input { width: auto; min-width: 160px; flex: 1; }
.feedm-rule-cond .feedm-select.feedm-op { min-width: 120px; flex: 0 0 auto; }
.feedm-rule-cond .feedm-input.feedm-num { min-width: 90px; flex: 0 1 120px; }
.feedm-rule-out { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); }
.feedm-rule-default { display: flex; flex-direction: column; gap: var(--space-3); }

/* --- futás-állapot + publikus URL-ek + eredmény --- */
.feedm-run:empty { display: none; }
.feedm-urls { display: flex; flex-direction: column; gap: var(--space-3); }
.feedm-url-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.feedm-url {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-ctl);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}
.feedm-url-label {
  background: var(--color-surface-muted);
  border-radius: var(--radius-pill, 999px);
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.feedm-warn {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-6);
  color: var(--color-warning-text, #8a6d1a);
  font-size: var(--text-sm);
}
.feedm-items { display: flex; flex-direction: column; gap: var(--space-3); }

/* --- AI-determinizmus kör (SPEC-feed-ai-determinizmus.md) --- */
/* A mód-modal közös opció-sávja (minden módra érvényes kapcsolók, pl. üres tag). */
.feedm-modal-common {
  padding: var(--space-4) var(--space-8);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-subtle-2);
}
/* Slotonkénti AI-státusz sor a minta-panel / Megnézem nézet lábában. */
.feedm-ai-status {
  margin: var(--space-4) 0 0;
  padding-left: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}
.feedm-ai-status code { font-family: var(--font-mono); font-size: var(--text-xs); }

@media (max-width: 720px) {
  .feedm-fields { flex-direction: column; }
  .feedm-rule-cond { align-items: stretch; flex-direction: column; }
  .feedm-modal-overlay { padding: var(--space-4); }
}

/* ============================================================================================
   KÍVÁNSÁGLISTA WIDGET (SPEC-wishlist-feedback-widget.md) — shell-szintű lebegő mini-panel,
   jobb alsó sarok, minden appon és a landingon is elérhető bejelentkezés után.
   ============================================================================================ */
.wishlist-widget {
  position: fixed;
  right: var(--space-8);
  bottom: var(--space-8);
  z-index: 9000;
  font-family: inherit;
}
.wishlist-widget.is-hidden { display: none; }
/* Nyitott jobboldali fiók mellett a gomb a fiók bal szélére húzódik, különben a fiók alján lévő
   mentés-gombot takarná (2026-10-15, Tartalomnaptár „Felvétel”); ahol a fiók teljes szélességű, elrejtjük. */
body:has(.ff-drawer:not([hidden])) .wishlist-widget { right: calc(min(var(--ff-drawer-w), 100vw) + var(--space-8)); }
@media (max-width: 720px) {
  body:has(.ff-drawer:not([hidden])) .wishlist-widget { display: none; }
}

.wishlist-widget-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-danger);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: var(--space-5) var(--space-7);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
.wishlist-widget-toggle:hover { background: var(--color-danger-hover); }

.wishlist-widget-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-5));
  width: min(340px, calc(100vw - var(--space-8) * 2));
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.wishlist-widget-panel.is-hidden { display: none; }

.wishlist-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
}
.wishlist-widget-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-2);
}
.wishlist-widget-close:hover { color: var(--color-text); }

.wishlist-widget-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.wishlist-widget-empty { color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-4) 0; }

.wishlist-widget-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  background: var(--panel-muted);
}
.wishlist-widget-row-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.wishlist-widget-row-delete {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0;
}
.wishlist-widget-row-delete:hover { color: var(--color-danger); }
.wishlist-widget-row-text { font-size: var(--text-sm); overflow-wrap: break-word; }

.wishlist-widget-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--color-border);
}
.wishlist-widget-form textarea {
  resize: vertical;
  font-family: inherit;
  font-size: var(--text-sm);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--color-text);
}
.wishlist-widget-error {
  margin: 0 var(--space-6) var(--space-4);
  color: var(--color-danger);
  font-size: var(--text-xs);
}
.wishlist-widget-error:empty { display: none; }

/* ============================================================================================
   Ads Monitor (Google Ads agency monitoring) app — Session 1 (Beállítások: kapcsolat, párosítás,
   ügyfelek). A közös design-tokenekre épül; nincs per-app CSS-fájl (a konvenció szerint minden
   osztály ide, a közös styles.css-be kerül, `amon-` prefixszel).
   ============================================================================================ */
.amon-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-12);
  margin-bottom: var(--space-10);
}
.amon-panel > h2 { margin: 0 0 var(--space-4); font-size: var(--text-lg, 1.05rem); color: var(--color-text-strong); }
.amon-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-4); }
.amon-panel__head h2 { margin: 0; font-size: var(--text-lg, 1.05rem); color: var(--color-text-strong); }
.amon-muted { color: var(--color-text-muted); font-size: var(--text-sm, .9rem); margin: 0 0 var(--space-8); }
.amon-ok { color: var(--color-primary); font-size: var(--text-sm, .9rem); margin: var(--space-6) 0 0; }
.amon-err { color: var(--color-danger); font-size: var(--text-sm, .9rem); margin: var(--space-6) 0 0; }

.amon-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); margin-bottom: var(--space-8); }
.amon-form-grid label,
.amon-form-inline label { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-sm, .9rem); color: var(--color-text-strong); }
.amon-form-inline { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: flex-end; margin-bottom: var(--space-8); }
.amon-panel input[type="text"],
.amon-panel input[type="email"],
.amon-panel input[type="password"],
.amon-panel select {
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle-2);
  color: var(--color-text);
  font: inherit;
  min-width: 220px;
}
.amon-panel input:focus, .amon-panel select:focus { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.amon-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-4); }
.amon-link-danger { background: none; border: none; color: var(--color-danger); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.amon-link-danger:hover { color: var(--color-danger-hover); }
@media (max-width: 720px) { .amon-form-grid { grid-template-columns: 1fr; } }

/* ── Session 3 UI: dashboard / riasztás-nézetek / ügyfelek / config-mátrix ─────────────────── */
.amon-view { display: flex; flex-direction: column; gap: var(--space-10); }
.amon-view__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
.amon-view__head h2 { margin: 0; font-size: var(--text-lg, 1.1rem); color: var(--color-text-strong); display: flex; align-items: center; gap: var(--space-4); }

/* Ügyfélnek szóló magyarázat-box a táblázatok/nézetek fölött */
.amon-intro { display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-6) var(--space-8); background: var(--color-primary-soft); border-left: 3px solid var(--color-primary); border-radius: var(--radius-sm); }
.amon-intro > i { color: var(--color-primary); font-size: 1.05rem; margin-top: 1px; flex: 0 0 auto; }
.amon-intro p { margin: 0; font-size: var(--text-sm, .9rem); color: var(--color-text-row); line-height: 1.5; }

/* Link-gomb (sima szöveg-akció márkaszínnel) */
.amon-link { background: none; border: none; color: var(--color-primary); cursor: pointer; font: inherit; padding: 0; text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-3); }
.amon-link:hover { color: var(--color-primary-hover); text-decoration: underline; }

/* Toolbar + vezérlők */

.amon-chip { border: none; background: none; color: var(--color-text-muted); font: inherit; font-size: var(--text-sm, .9rem); padding: var(--space-3) var(--space-7); border-radius: var(--radius-sm); cursor: pointer; }
.amon-chip:hover { color: var(--color-text-strong); }
.amon-chip.is-active { background: var(--color-primary); color: #fff; }
.amon-select { padding: var(--space-5) var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-subtle-2); color: var(--color-text); font: inherit; }
.amon-search { position: relative; display: inline-flex; align-items: center; }
.amon-search > i { position: absolute; left: var(--space-5); color: var(--color-text-muted); pointer-events: none; }
.amon-search input { padding: var(--space-5) var(--space-6) var(--space-5) calc(var(--space-8) + 12px); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-subtle-2); color: var(--color-text); font: inherit; min-width: 220px; }

.amon-view input:focus, .amon-view select:focus { outline: 2px solid var(--color-focus); outline-offset: 1px; }

/* Dashboard kártyarács */

/* Trend SVG */

/* Legfrissebb riasztások lista */

.amon-row-actions { display: flex; gap: var(--space-6); white-space: nowrap; }
.amon-view table input[type="text"], .amon-view table input[type="email"], .amon-view table input[type="number"] {
  padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface-subtle-2); color: var(--color-text); font: inherit; width: 100%; min-width: 90px;
}

/* Chip / badge */

/* Pager */

/* Ügyfél mini-jelzők */

/* Tabok */
.amon-tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--color-border); }
.amon-tab { border: none; background: none; color: var(--color-text-muted); font: inherit; font-size: var(--text-sm, .92rem); padding: var(--space-6) var(--space-8); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: var(--space-3); }
.amon-tab:hover { color: var(--color-text-strong); }
.amon-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }

/* Config-mátrix + tömeges alkalmazás */
.amon-bulk { display: flex; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap; padding: var(--space-8); background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-8); }
.amon-bulk__f { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-xs, .8rem); color: var(--color-text-muted); }
.amon-bulk__f input { padding: var(--space-3) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-subtle-2); color: var(--color-text); font: inherit; width: 110px; }
.amon-col-check { width: 32px; text-align: center; }

/* Modal */

/* Riasztás-motor futás-progress */

/* ============================================================================================
   Adlogic Ads Monitor — fázis-5 UI (riport-nézetek). Design-token vezérelt, az amon- réteg része;
   nincs per-app CSS. Kiegészíti a fázis-1 amon- paneljeit.
   ============================================================================================ */

/* Közös fejléc-vezérlő: ügyfél-választó + időszak-preset (spec §5.2) */
.amon-report-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-8); padding: var(--space-6) var(--space-8); background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.amon-field-label { display: block; font-size: var(--text-sm, .82rem); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.amon-client-pick { display: flex; flex-direction: column; min-width: 240px; }
.amon-client-pick input { padding: var(--space-4) var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-strong); font: inherit; }
.amon-client-pick input:focus { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.amon-period-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.amon-period-group .amon-field-label { width: 100%; margin-bottom: var(--space-2); }
.amon-period-btn, .amon-toggle-btn { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-row); font: inherit; font-size: var(--text-sm, .88rem); padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm); cursor: pointer; }
.amon-period-btn:hover, .amon-toggle-btn:hover { border-color: var(--color-border-strong); color: var(--color-text-strong); }
.amon-period-btn.is-active, .amon-toggle-btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.amon-report-body { display: flex; flex-direction: column; gap: var(--space-8); }

/* Dashboard — stat-kártyák + TOP-táblák (spec §5.2) */
.amon-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.amon-stat { background: var(--color-surface-raised, var(--color-surface)); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-7) var(--space-8); box-shadow: var(--shadow); }
.amon-stat__label { font-size: var(--text-sm, .82rem); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.amon-stat__value { font-size: 1.5rem; font-weight: 600; color: var(--color-text-strong); }
.amon-dash-tables { display: flex; flex-direction: column; gap: var(--space-8); }

/* Vezetői összefoglaló kártya */
.amon-summary__out { margin-top: var(--space-4); }
.amon-summary__text { color: var(--color-text-row); line-height: 1.6; }
.amon-summary__meta { margin-top: var(--space-4); font-size: var(--text-sm, .82rem); }

/* Prompt-szerkesztő */
.amon-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.amon-chip-row .amon-chip { border: 1px solid var(--color-border); background: var(--color-surface-inset, var(--color-surface-subtle)); font-family: var(--font-mono); font-size: var(--text-sm, .82rem); }
.amon-chip-row .amon-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.amon-textarea { width: 100%; box-sizing: border-box; padding: var(--space-5) var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-strong); font-family: var(--font-mono); font-size: var(--text-sm, .85rem); line-height: 1.5; resize: vertical; }
.amon-textarea:focus { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.amon-inline-msg { align-self: center; font-size: var(--text-sm, .85rem); }
.amon-sm { padding: var(--space-2) var(--space-5) !important; font-size: var(--text-sm, .82rem) !important; }

/* §3.6 téma-kártyák (bespoke, összecsukható) */
.amon-theme-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.amon-theme-card > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-5) var(--space-7); cursor: pointer; list-style: none; }
.amon-theme-card > summary::-webkit-details-marker { display: none; }
.amon-theme-name { font-weight: 600; color: var(--color-text-strong); }
.amon-theme-meta { font-size: var(--text-sm, .82rem); color: var(--color-text-muted); }
.amon-theme-inner { padding: 0 var(--space-7) var(--space-6); border-top: 1px solid var(--color-border); }
.amon-theme-toolbar { padding: var(--space-5) 0; }
.amon-theme-terms { display: flex; flex-direction: column; gap: var(--space-1); }
.amon-theme-term { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); cursor: pointer; }
.amon-theme-term:hover { background: var(--color-surface-hover, var(--color-surface-subtle)); }
.amon-term-txt { flex: 1 1 auto; color: var(--color-text-row); }
.amon-term-cost { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* §3.9 idővonal — táblázat/grafikon kapcsoló + reszponzív, cellát kitöltő sparkline */
.amon-tl-controls { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-4); }
.amon-toggle { display: inline-flex; gap: var(--space-2); background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2); }
/* table-layout: fixed → a terméknév fix keskeny oszlop, a grafikon/érték a maradék helyet tölti ki (reszponzív) */
.amon-tl-table { width: 100%; table-layout: fixed; }
.amon-tl-table td, .amon-tl-table th { vertical-align: middle; }
.amon-tl-name { width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amon-spark-cell { padding: var(--space-2) var(--space-4); }
.amon-spark-wrap { position: relative; height: 34px; color: var(--color-primary); }
.amon-spark { display: block; width: 100%; height: 34px; }
.amon-spark-max, .amon-spark-min { position: absolute; right: 3px; font-size: .68rem; line-height: 1; color: var(--color-text-muted); font-variant-numeric: tabular-nums; background: var(--color-surface); padding: 0 2px; border-radius: 2px; pointer-events: none; }
.amon-spark-max { top: 0; }
.amon-spark-min { bottom: 0; }
@media (max-width: 700px) { .amon-tl-name { width: 120px; } }

/* Google Ads kapcsolat — becsukható szekció a Dashboardon */
.amon-details { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); }
.amon-details > summary { padding: var(--space-5) var(--space-7); cursor: pointer; color: var(--color-text-row); font-size: var(--text-sm, .9rem); display: flex; align-items: center; gap: var(--space-4); list-style: none; }
.amon-details > summary::-webkit-details-marker { display: none; }
.amon-details > summary > i { color: var(--color-primary); }
.amon-details[open] > summary { border-bottom: 1px solid var(--color-border); }
.amon-details > div { padding: var(--space-6); }

/* Ügyfelek áttekintő kártyák */
.amon-client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-6); }
.amon-client-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); text-align: left; padding: var(--space-7) var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; box-shadow: var(--shadow); }
.amon-client-card:hover { border-color: var(--color-primary); }
.amon-client-card__name { font-weight: 600; color: var(--color-text-strong); }
.amon-client-card__id { font-size: var(--text-sm, .82rem); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.amon-client-card__go { margin-top: var(--space-3); font-size: var(--text-sm, .82rem); color: var(--color-primary); display: flex; align-items: center; gap: var(--space-2); }

.amon-research-meta p { margin: 0 0 var(--space-2); }

@media (max-width: 900px) {
  .amon-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================================
   Adlogic Ads Monitor — "Kampánymenedzsment feladatok" checklist (SPEC-adlogic-account-checklist-
   draft.md, A. fázis). Kategória-kártya + tétel-sor, design-token-vezérelt, az amon- réteg része;
   nincs per-app CSS. Az admin küszöb-mátrix a meglévő FF-TABLE elemneveket használja (lásd lent).
   ============================================================================================ */

.amon-task-list { display: flex; flex-direction: column; gap: var(--space-6); }

.amon-task-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.amon-task-card.is-gate-red { border-color: var(--color-danger); box-shadow: 0 0 0 1px var(--color-danger) inset; }
.amon-task-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-5) var(--space-7); cursor: pointer; }
.amon-task-card__head h3 { margin: 0; font-size: var(--text-md, 1rem); color: var(--color-text-strong); }
.amon-task-card__meta { font-size: var(--text-sm, .82rem); color: var(--color-text-muted); }
.amon-task-card__body { padding: 0 var(--space-7) var(--space-7); border-top: 1px solid var(--color-border); }
.amon-task-card.is-collapsed .amon-task-card__body { display: none; }

.amon-task-warning { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-radius: var(--radius-sm); background: var(--c-amber-tint); color: var(--color-warning); font-size: var(--text-sm, .85rem); margin-top: var(--space-6); }

.amon-task-items { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.amon-task-item { display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); border-left: 3px solid var(--color-border); background: var(--color-surface-subtle); }
.amon-task-item__badge { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 2px var(--space-5); border-radius: 999px; font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; }
.amon-task-item__body { flex: 1 1 auto; min-width: 0; }
.amon-task-item__label { color: var(--color-text-strong); font-weight: 500; }
.amon-task-item__meta { font-size: var(--text-sm, .82rem); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.amon-task-item__todo { font-size: var(--text-sm, .85rem); color: var(--color-text-row); margin-top: var(--space-1); }
.amon-task-item__note { font-size: var(--text-sm, .78rem); color: var(--color-text-muted); margin-top: var(--space-1); font-style: italic; }

.amon-task-item--ok { border-left-color: var(--primary); }
.amon-task-item--ok .amon-task-item__badge { background: var(--c-green-tint); color: var(--c-green-700, var(--primary)); }
.amon-task-item--action { border-left-color: var(--color-danger); background: var(--c-red-tint); }
.amon-task-item--action .amon-task-item__badge { background: var(--color-danger); color: #fff; }
.amon-task-item--opportunity { border-left-color: var(--primary); }
.amon-task-item--opportunity .amon-task-item__badge { background: var(--primary); color: #fff; }
.amon-task-item--warn { border-left-color: var(--color-warning); background: var(--c-amber-tint); }
.amon-task-item--warn .amon-task-item__badge { background: var(--color-warning); color: #3a2a00; }
.amon-task-item--na { border-left-color: var(--color-border); opacity: .7; }
.amon-task-item--na .amon-task-item__badge { background: var(--color-border); color: var(--color-text-muted); }

.amon-task-table { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.amon-task-table h4 { margin: 0; font-size: var(--text-sm, .88rem); color: var(--color-text-strong); }

/* Shopping riport ROAS-badge (javítási kör §F) — a meglévő Kampányfeladat-küszöb szerinti zöld/piros
   jelzés, a fenti .amon-task-item badge-mintáját követve (nincs új szín bevezetve). */
.amon-roas-badge { display: inline-flex; align-items: center; padding: 2px var(--space-4); border-radius: 999px; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.amon-roas-badge.amon-roas-over { background: var(--c-green-tint); color: var(--c-green-700, var(--primary)); }
.amon-roas-badge.amon-roas-under { background: var(--c-red-tint); color: var(--color-danger); }

/* ===== FF-TABLE — EGYSÉGES TÁBLÁZAT-RENDSZER · KEZDET =====================================
   Vizuális igazság: specs/platform/ff-table-referencia.html. A szabályzók (--ff-*) a fájl
   elején, a design-token réteg után élnek. Ez a szekció a platform EGYETLEN táblázat-rendszere —
   új táblázat csak ezekkel az elemnevekkel készülhet (SPEC-ff-table.md §7).
   ============================================================================================ */

/* 1. Keret */
.ff-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* 2. Nézetváltó fülek */
.ff-tabs {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-7) var(--space-8);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.ff-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ff-text);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.ff-tab:hover { border-color: var(--ff-text-faint); }
.ff-tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.ff-tab .ff-count {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 1px var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}
.ff-tab[aria-selected="true"] .ff-count { background: var(--ff-count-active-bg); color: var(--on-navy); }

/* Opt-in: tördelhető oszlopfejléc. Sok oszlopos táblán (Költségelemzés) a hosszú címke + a
   fejléc-szűrő együtt vízszintes görgetést okozna; ezzel a címke több sorba törhet.
   A `createTable` az `opts.wrapHead` flagből teszi ki — más tábla viselkedése változatlan. */
.ff-table--wrap-head .ff-th-label { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.ff-table--wrap-head .ff-th { min-width: 0; }

/* Opt-in oszlop-meták (SPEC-unas-termek-besorolas.md §6): forrás-jelvény és magyarázó sor a fejlécben,
   a cella halvány második sora (`sub`), és a származtatott érték jelölése (`derived_by`). A meta nélküli
   oszlop markupja változatlan, tehát más riportra nem hatnak. A színek a fejléc SAJÁT szövegszínéből
   képződnek (currentColor), így világos és sötét fejlécen is olvashatók. */
.ff-th-src {
  display: inline-block; align-self: flex-start; margin-top: 2px; padding: 0 6px;
  border-radius: var(--radius-sm); background: color-mix(in srgb, currentColor 12%, transparent);
  font-size: var(--text-xs, .7rem); font-weight: var(--weight-medium, 500); white-space: nowrap; opacity: .9;
}
.ff-th-hint { display: block; margin-top: 2px; font-size: var(--text-xs, .7rem); font-weight: normal; line-height: 1.25; white-space: normal; opacity: .72; }
.ff-cell-sub { display: block; margin-top: 2px; color: var(--muted); font-size: var(--text-xs, .72rem); line-height: 1.3; white-space: normal; }
.ff-derived { color: var(--c-amber-600, #b26b00); font-style: italic; }
.report-notice--info { background: var(--c-amber-tint, rgba(239, 159, 39, .12)); }
.report-notice--info i { color: var(--color-warning, #b26b00); }

/* 3. Eszköztár + gombok */
.ff-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.ff-search { position: relative; flex: 1 1 280px; max-width: 420px; }
.ff-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ff-text-faint); }
.ff-search input {
  width: 100%;
  padding: var(--space-5) var(--space-6) var(--space-5) 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-base);
  color: var(--ff-text);
  background: var(--panel);
}
.ff-search input::placeholder { color: var(--ff-text-faint); }
.ff-search input:focus { outline: 2px solid var(--ff-accent); outline-offset: -1px; border-color: var(--ff-accent); }
.ff-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.ff-rowcount { color: var(--color-text-subtle); font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ff-sep { width: 1px; height: 22px; background: var(--line); }

.ff-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ff-text);
  padding: var(--space-4) var(--space-7);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.ff-btn:hover { background: var(--color-surface-subtle); border-color: var(--ff-text-faint); }
.ff-btn svg { flex: none; }
.ff-btn.is-primary { background: var(--green-strong); border-color: var(--green-strong); color: var(--color-on-primary); font-weight: var(--weight-semibold); }
.ff-btn.is-primary:hover { background: var(--green); border-color: var(--green); }
.ff-btn.is-danger { color: var(--color-danger); border-color: var(--ff-danger-border); }
.ff-btn.is-danger:hover { background: var(--ff-danger-bg-hover); border-color: var(--color-danger); }
.ff-btn.is-quiet { border-color: transparent; background: transparent; color: var(--color-text-subtle); }
.ff-btn.is-quiet:hover { background: var(--color-surface-subtle); color: var(--ff-text); }
.ff-btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* .ff-btn sets its own `display`, which otherwise beats the UA [hidden] rule at equal specificity
   (author origin always wins over user-agent styles) — without this, a hidden .ff-btn still renders. */
.ff-btn[hidden] { display: none; }

/* 4. Kijelölés-sáv + futásállapot */
.ff-bulkbar {
  display: none;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-5) var(--space-8);
  background: var(--color-primary-soft);
  border-bottom: 1px solid var(--ff-bulk-border);
}
.ff-bulkbar.is-on { display: flex; }
.ff-bulkbar .ff-selinfo { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--ff-bulk-text); }
.ff-bulkbar .ff-selinfo em { font-style: normal; font-variant-numeric: tabular-nums; }
.ff-bulk-actions { margin-left: auto; display: flex; gap: var(--space-4); flex-wrap: wrap; }
.ff-runstate {
  padding: var(--space-5) var(--space-8);
  border-bottom: 1px solid var(--line);
  background: var(--ff-runstate-bg);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  display: flex;
  gap: var(--space-9);
  flex-wrap: wrap;
}
.ff-runstate b { color: var(--ff-text); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

/* 5. Táblázat */
.ff-scroll { overflow: auto; max-height: 520px; }
.ff-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ff-font-size); }

.ff-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--ff-head-bg);
  color: var(--on-navy);
  text-align: left;
  vertical-align: top;
  padding: var(--ff-head-pad-y) var(--ff-cell-pad-x);
  font-weight: var(--weight-semibold);
  font-family: var(--ff-head-font);
  font-size: var(--ff-head-font-size);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-right: 1px solid var(--ff-head-line);
  border-bottom: 1px solid var(--ff-head-line);
}
.ff-table thead th:last-child { border-right: 0; }
.ff-th { display: flex; flex-direction: column; gap: var(--space-3); }
.ff-th-label { display: flex; align-items: center; gap: var(--space-3); line-height: 1.25; cursor: pointer; user-select: none; }
.ff-th-label:hover .ff-sort { opacity: 1; }
.ff-sort { opacity: 0.6; flex: none; transition: opacity 0.12s; }
.ff-th-label.is-sorted .ff-sort { opacity: 1; color: var(--ff-head-accent); }

.ff-filter { display: flex; }
.ff-filter input, .ff-filter select {
  width: 100%;
  min-width: 0;
  padding: 5px var(--space-4);
  border-radius: 5px;
  font: inherit;
  font-size: var(--text-sm);
  border: 1px solid var(--ff-head-line);
  background: var(--ff-filter-bg);
  color: var(--on-navy);
}
.ff-filter input::placeholder { color: var(--ff-filter-placeholder); }
.ff-filter input:focus, .ff-filter select:focus { outline: 2px solid var(--ff-head-accent); outline-offset: -1px; }
.ff-filter.is-range { gap: 5px; }

.ff-table tbody td {
  padding: var(--ff-cell-pad-y) var(--ff-cell-pad-x);
  border-bottom: 1px solid var(--ff-row-line);
  border-right: var(--ff-grid-width) solid var(--ff-grid-color);
  background: var(--panel);
  vertical-align: middle;
  color: var(--ff-text);
}
.ff-table tbody td:last-child { border-right: 0; }
.ff-table tbody tr:nth-child(even) td { background: var(--ff-zebra); }
/* Sorállapot (`cfg.rowClass` → `tr.is-positive` / `tr.is-negative`): a zebránál erősebb, a hovernél és a
   kijelölésnél gyengébb — ezért áll a kettő között. Első használó: Árfigyelés (olcsóbbak / drágábbak vagyunk). */
.ff-table tbody tr.is-positive td { background: var(--ff-row-positive); }
.ff-table tbody tr.is-negative td { background: var(--ff-row-negative); }
.ff-table tbody tr:hover td { background: var(--ff-hover); }

/* Opcionális összegző sor (§H — `cfg.showSummaryRow`), a fejléc alá vizuálisan "lezáró" sáv. */
.ff-table tfoot td {
  padding: var(--ff-cell-pad-y) var(--ff-cell-pad-x);
  border-top: 2px solid var(--navy-line);
  border-right: var(--ff-grid-width) solid var(--ff-grid-color);
  background: var(--ff-zebra);
  color: var(--ff-text);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.ff-table tfoot td:last-child { border-right: 0; }
.ff-table tfoot .ff-num { text-align: right; }

.ff-num { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
th.ff-num .ff-th-label { justify-content: flex-end; }
.ff-unit { color: var(--ff-text-faint); font-size: 0.92em; margin-left: 2px; }
.ff-muted { color: var(--ff-text-faint); }
.ff-trunc { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
/* A referencia .ff-link-et <a>-ra szánta; több hívó <button>-re teszi (JS-kattintás, nincs navigáció).
   A böngésző alap <button> stílusa (keret/háttér/padding/betűtípus) enélkül átüt — ez adta az élesben
   látott "dobozos" cellát terméknév/link oszlopokon. Elem-típustól függetlenül nullázva. */
.ff-link {
  display: inline;
  background: none;
  border: none;
  border-bottom: 1px solid var(--ff-link-underline);
  border-radius: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  color: var(--navy);
  text-decoration: none;
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.ff-link:hover { color: var(--green-strong); border-bottom-color: var(--green-strong); }

.ff-fix { position: sticky; z-index: 2; }
.ff-table thead th.ff-fix { z-index: 4; }
.ff-col-check { left: 0; width: 44px; text-align: center; }
.ff-col-name { left: 44px; box-shadow: 6px 0 8px -8px var(--c-overlay-soft); }
.ff-table tbody td.ff-fix { background: var(--panel); }
.ff-table tbody tr:nth-child(even) td.ff-fix { background: var(--ff-zebra); }
.ff-table tbody tr.is-positive td.ff-fix { background: var(--ff-row-positive); }
.ff-table tbody tr.is-negative td.ff-fix { background: var(--ff-row-negative); }
.ff-table tbody tr:hover td.ff-fix { background: var(--ff-hover); }

tr.is-flagged td { background: var(--color-primary-soft) !important; }
tr.is-flagged td.ff-fix { background: var(--ff-flag-bg-strong) !important; }
tr.is-flagged td:first-child { box-shadow: inset 3px 0 0 var(--green-strong); }
tr.is-selected td { background: var(--ff-select-bg) !important; }
tr.is-selected td.ff-fix { background: var(--ff-select-bg-strong) !important; }

.ff-check { width: 16px; height: 16px; accent-color: var(--green-strong); cursor: pointer; vertical-align: middle; }

.ff-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.6;
  white-space: nowrap;
}
.ff-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ff-badge.is-ok { background: var(--color-primary-soft); color: var(--green-soft-text); }
.ff-badge.is-wait { background: var(--c-amber-tint); color: var(--color-warning); }
.ff-badge.is-err { background: var(--color-danger-soft); color: var(--color-danger); }
.ff-badge.is-idle { background: var(--color-surface-subtle); color: var(--color-text-subtle); }

.ff-bar { display: flex; align-items: center; gap: var(--space-4); flex-direction: row-reverse; }
.ff-bar-track { flex: 1 1 54px; max-width: 64px; height: 5px; border-radius: var(--radius-pill); background: var(--line); }
.ff-bar-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--green); }

.ff-tablefoot {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-5) var(--space-8);
  border-top: 1px solid var(--line);
  background: var(--panel);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}
.ff-pager { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.ff-pager button {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 6px;
  width: 30px;
  height: 30px;
  font: inherit;
  cursor: pointer;
  color: var(--ff-text);
}
.ff-pager button[aria-current="true"] { background: var(--ff-current-bg); border-color: var(--ff-current-bg); color: var(--on-navy); font-weight: var(--weight-semibold); }
.ff-empty { padding: 44px var(--space-8); text-align: center; color: var(--color-text-subtle); }
.ff-empty strong { display: block; color: var(--ff-text); font-size: var(--text-md); margin-bottom: var(--space-4); }

/* Kinyitható sor (SPEC-dashboard-redesign.md §8, l. reports.js createTable `rowExpand`) — csak a
   `.ff-table--expandable` módosítót viselő táblákon aktív; a többi (nagy többség) FF-TABLE
   érintetlen marad. A sorcsíkozás itt EXPLICIT osztályból jön (nem `:nth-child`-ből), hogy egy
   kinyitott al-sor ne tolja el a párosítást a lentebbi adatsorokon — ezért ez a szabály a törzs
   `:nth-child` szabálya UTÁN áll a fájlban (azonos specificitásnál a forrás-sorrend dönt). */
.ff-table--expandable tbody tr.ff-datarow.ff-row-even td { background: var(--ff-zebra); }
.ff-table--expandable tbody tr.ff-datarow:hover td { background: var(--ff-hover); }
.ff-expand-col { width: 36px; text-align: center; }
.ff-expand-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-subtle);
  width: 26px;
  height: 26px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ff-expand-btn:hover { background: var(--panel-muted); color: var(--ff-text); }
.ff-expand-btn i { transition: transform 0.15s ease; }
.ff-expand-btn.is-open i { transform: rotate(90deg); }
.ff-table--expandable tbody tr.ff-subrow td {
  background: var(--panel-muted);
  padding: var(--space-5) var(--space-6) var(--space-5) 44px;
  border-bottom: 1px solid var(--color-border);
}
.ff-subtable { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ff-subtable th, .ff-subtable td { padding: var(--space-4) var(--space-5); text-align: left; }
.ff-subtable thead th { color: var(--color-text-subtle); font-weight: var(--weight-semibold); border-bottom: 1px solid var(--color-border); }
.ff-subtable tbody tr:not(:last-child) td { border-bottom: 1px solid var(--color-border); }
.ff-subempty { margin: 0; padding: var(--space-4) 0; color: var(--color-text-subtle); font-size: var(--text-sm); }
.ff-subnote { margin: 0; padding: var(--space-4) var(--space-8) 0; color: var(--color-text-subtle); font-size: var(--text-sm); }

/* --- DataGrid (app/static/datagrid.js) kiterjesztések --------------------------------------
   A referencia két fixált oszlopot (checkbox + név) fix 0/44px bal-offszettel mutat be; a
   megosztott DataGrid ezzel szemben tetszőleges számú/szélességű oszlopot fagyaszthat be, ezért
   a bal-offset és az oszlopszélesség JS-mért adat-változóként érkezik (--dg-w / --dg-left — a
   --sync-progress mintájára, adat, nem formázás). Az alábbi szabályok NEM új táblázat-osztályok,
   csak a meglévő .ff-fix / .ff-table mechanizmus általánosítása változó oszlopszámra — a
   kötelező elemnevek (.ff-fix, .ff-col-check, .is-edge) változatlanok. */
.ff-table thead th, .ff-table tbody td { width: var(--dg-w, auto); min-width: var(--dg-w, auto); max-width: var(--dg-w, auto); }
/* A fenti általános szabály --dg-w nélkül auto-ra esik vissza — ez a DataGridEN KÍVÜLI (kézzel épített)
   FF-TABLE checkbox-oszlopokat (PDS, admin-mátrixok, SocialMedia kijelölések stb.) is érintette: a
   --dg-w-t sosem állítják be, ezért a checkbox-oszlop a rendelkezésre álló hellyel arányosan
   kiszélesedett ("szükségtelenül széles" checkbox-oszlop + csúnya fejléc élesben). Nagyobb
   specificitású szabály garantálja a kötelező 44px-et FÜGGETLENÜL attól, hogy --dg-w be van-e állítva.*/
.ff-table thead th.ff-col-check, .ff-table tbody td.ff-col-check { width: 44px; min-width: 44px; max-width: 44px; }
.ff-fix { left: var(--dg-left, 0); }
.ff-fix.is-edge { box-shadow: 6px 0 8px -8px var(--c-overlay-soft); }

/* Rögzített oszlopszélességű rács (`.ff-table--cols`, csak a DataGrid teszi ki) — 2026-09-03.
   A fenti szabály `max-width`-ot is ír, tehát a tartalom NEM tágíthatja az oszlopot: egy hosszú,
   szóköz nélküli cikkszám kilógott a szomszédjába, és RÁÍRÓDOTT az ottani szövegre (a táblázat
   festési sorrendje minden cella-hátteret előbb rajzol meg, mint bármelyik cella-tartalmat, ezért
   a szomszéd háttere nem takarta el — ez a termékek listáján látott „átcsúszás"). A cella ezért
   VÁG, a hosszú szó pedig előbb tördelődik, mint hogy vágni kelljen: így semmi nem tűnik el
   szó nélkül, és az átcsúszás egy jövőbeli új oszlopnál sem jöhet vissza. A `.ff-num` és a
   `.ff-trunc` `white-space: nowrap`-je változatlan — azok szándékosan egy sorosak.
   Kivétel a sor-kinyitó részletsor: az nem oszlop, hanem teljes szélességű panel. */
.ff-table--cols thead th,
.ff-table--cols tbody td,
.ff-table--cols tfoot td { overflow: hidden; }
.ff-table--cols tbody td { overflow-wrap: anywhere; }
.ff-table--cols tbody tr.dg-detail-row td { overflow: visible; overflow-wrap: normal; }
/* A DataGrid fejléce SZÓHATÁRON tördel (2026-09-27, SPEC-konkurens-arfigyeles §13 F4). A közös `.ff-num`
   `white-space: nowrap`-je a jobbra igazított (szám/ár) oszlopok FEJLÉCÉRE is hatott, ezért azok nem
   tördeltek: a címke balra kilógott és a cella levágta („…RUNK A GOOGLE-NÉL"). A cellák számai
   továbbra is egy sorosak — csak a fejlécet oldjuk fel. Betűnkénti törés nincs (`overflow-wrap:
   normal`); egy oszlopnál hosszabb szót a `hyphens: auto` választ el (`<html lang="hu">`). */
.ff-table--cols thead th { white-space: normal; }
.ff-table--cols .ff-th-label { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: auto; min-width: 0; }
.ff-table--cols thead th.ff-num .ff-th-label { text-align: right; }
/* A sor-kinyitó „›" a (levágott) név MELLETT álljon, egy sorban — a `.ff-trunc` blokk-eleme új sorba
   törte, és a jel magában állt a név fölött (Árfigyelés-visszajelzés, 2026-09-27). */
.ff-table--cols td .dg-expand + .ff-trunc {
  display: inline-block;
  vertical-align: middle;
  max-width: calc(100% - 24px);
}
.ff-table--cols td .dg-expand { vertical-align: middle; }

/* Oszlopszélesség-fogantyú a fejlécben. A `th` `position: sticky`, tehát pozicionált elem — a
   fogantyú abszolút helyzete hozzá igazodik, külön `position: relative` nélkül. */
.ff-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 11px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  z-index: 1;
}
.ff-resizer::after {
  content: "";
  position: absolute;
  top: 25%;
  bottom: 25%;
  right: 4px;
  width: 2px;
  border-radius: 1px;
  background: var(--ff-head-line);
}
.ff-resizer:hover::after, .ff-resizer.is-active::after {
  top: 0;
  bottom: 0;
  background: var(--ff-head-accent);
}
/* Húzás közben az egész oldalon a méretező kurzor él, és nem lehet szöveget kijelölni —
   enélkül a húzás a fejléc feliratait jelölgetné ki. */
body.is-dg-resizing { cursor: col-resize; }
body.is-dg-resizing * { user-select: none !important; }
.ff-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ff-text-faint); font-size: 15px; }
.ff-rowcount strong { color: var(--color-primary-hover); font-weight: var(--weight-semibold); }
.ff-filter select[data-dg-filter-op] { flex: 0 0 auto; width: auto; min-width: 84px; }
.ff-filter input:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== FF-TABLE · VÉGE ===================================================================== */

/* ===== FF-PAGE — UNAS OLDALVÁZ · KEZDET ====================================================
   Forrás: specs/unas/SPEC-unas-ui-keret.md (vizuális igazság: SPEC-unas-ui-keret-latvanyterv.html,
   élő referencia: UNAS → Mintaoldal). Egy UNAS-oldal szekciói felülről: szűrősáv → magyarázó doboz
   → nézet-fülek → táblakártya (DataGrid `look: "v2"`). Az elemeket az `app/static/ui.js` és a
   DataGrid rajzolja — oldal NEM ír hozzájuk saját HTML-t vagy CSS-t (spec §7).
   Átmenet (F1–F4): a meglévő `.ff-tabs` / `.ff-bulkbar` / DataGrid kinézete érintetlen; az új forma
   MÓDOSÍTÓKON él (`.ff-tabs--folder`, `.ff-bulkbar--inline`, `.ff-panel--v2`, `.ff-table--v2`).
   Az F5-ben ezek lesznek az alapértelmezések, és a módosítók megszűnnek.
   A szekció törzsében csak var(--…) áll; nyers érték kizárólag az alábbi szabályzó-blokkban.
   ============================================================================================ */
:root {
  --ff-page-pad-y: 28px;          /* a .content-region belső térköze — a szűrősáv ezt húzza ki */
  --ff-page-pad-x: 26px;
  --ff-col-fill-min: 240px;       /* a kitöltő (szöveges) oszlop legkisebb szélessége */
  --ff-th-lines: 3;               /* a fejléc-címke legfeljebb ennyi sorra törik (a szélesség nem nő tőle) */
  --ff-toolbar-min-h: 56px;       /* az eszközsáv ne ugráljon, amikor megjelenik a kijelölés-blokk */
  --ff-folder-accent: 3px;        /* az aktív mappafül felső zöld csíkja */
}

/* 1. Szűrősáv — közvetlenül a címsor alatt, teljes szélességben, felső térköz nélkül (spec §1). */
.ff-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6) var(--space-8);
  margin: calc(-1 * var(--ff-page-pad-y)) calc(-1 * var(--ff-page-pad-x)) var(--space-12);
  padding: var(--space-6) var(--ff-page-pad-x);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.ff-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.ff-seg button {
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  padding: var(--space-3) var(--space-7);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.ff-seg button:hover { color: var(--color-text-strong); background: var(--panel); }
.ff-seg button.is-active { background: var(--color-primary); color: var(--color-on-primary); font-weight: var(--weight-medium); }
.ff-select {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-strong);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  max-width: 100%;
}
.ff-select:focus { outline: 2px solid var(--green); outline-offset: -1px; }
.ff-filterbar-actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.ff-filterbar-note { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; cursor: default; }
.ff-input {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-strong);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.ff-input:focus { outline: 2px solid var(--green); outline-offset: -1px; }
.ff-field { display: inline-flex; align-items: center; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-text-subtle); }
.ff-field .ff-input { width: 7.5em; }
.ff-daterange { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text-subtle); }

/* 2. Magyarázó doboz — az Ads Monitor mintája. */
.ff-intro {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-10);
  background: var(--color-primary-soft);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
}
.ff-intro > i { color: var(--color-primary); font-size: var(--text-md); margin-top: 1px; flex: none; }
.ff-intro p { margin: 0; font-size: var(--text-sm); color: var(--color-text-row); line-height: 1.5; }
.ff-intro ul { margin: 0; padding-left: var(--space-8); font-size: var(--text-sm); color: var(--color-text-row); line-height: 1.5; }
.ff-intro li + li { margin-top: var(--space-2); }

/* 1b. Visszaút — kis link-gomb az oldal tetején (pl. „Vissza a kezdőlapra"). */
.ff-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  padding: var(--space-2) 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-subtle);
  cursor: pointer;
}
.ff-back:hover { color: var(--color-primary); }

/* 2b. Visszajelzés-sáv — egy művelet eredménye (siker / hiba / folyamatban), a magyarázó doboz helyén
       (F3, a Tartalomgyártás pilotja hozta: a kijelölés-blokk kijelölés nélkül eltűnik, az üzenet nem). */
.ff-notice {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-8);
  margin-bottom: var(--space-10);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.ff-notice p { margin: 0; line-height: 1.45; }
.ff-notice > i { font-size: var(--text-md); flex: none; }
.ff-notice.is-ok { background: var(--color-primary-soft); border-color: var(--ff-bulk-border); color: var(--green-soft-text); }
.ff-notice.is-err { background: var(--color-danger-soft); border-color: var(--ff-danger-border); color: var(--color-danger); }
.ff-notice.is-busy,
.ff-notice.is-info { background: var(--color-surface-subtle); color: var(--color-text-row); }
.ff-notice.is-info > i { color: var(--color-text-subtle); }
.ff-notice.is-warn { background: var(--c-amber-tint); border-color: var(--c-amber-tint); color: var(--c-amber-700); }
.ff-notice + .ff-notice { margin-top: calc(-1 * var(--space-6)); }
.ff-notice p { flex: 1 1 auto; }
.ff-notice .ff-btn { flex: none; font-size: var(--text-sm); padding: var(--space-3) var(--space-6); }
.ff-notice.is-busy > i { animation: ff-spin 1s linear infinite; }
@keyframes ff-spin { to { transform: rotate(360deg); } }

/* 3. Nézet-fülek — mappafül, a táblakártyára „ráül" (spec §1, B változat). */
.ff-tabs--folder {
  padding: 0;
  gap: var(--space-2);
  border-bottom: 0;
  background: transparent;
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}
.ff-tabs--folder .ff-tab {
  border: 1px solid var(--line);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-surface-subtle);
  color: var(--color-text-subtle);
  padding: var(--space-5) var(--space-8);
}
.ff-tabs--folder .ff-tab:hover { background: var(--panel); color: var(--color-text-strong); border-color: var(--line); }
.ff-tabs--folder .ff-tab[aria-selected="true"] {
  background: var(--panel);
  border-color: var(--line);
  border-bottom-color: var(--panel);
  color: var(--navy);
  font-weight: var(--weight-semibold);
  box-shadow: inset 0 var(--ff-folder-accent) 0 var(--color-primary);
}
.ff-tabs--folder .ff-tab .ff-count { background: var(--color-surface-inset); }
.ff-tabs--folder .ff-tab[aria-selected="true"] .ff-count { background: var(--color-primary-soft); color: var(--green-soft-text); }
.ff-page-body.has-tabs > .ff-panel { border-top-left-radius: 0; }
/* 3b. Csoportos fülsor (`views.groups`): a csoportok egy sorban, csoport-címkével; a második csoporttól elválasztó
       vonal (pl. Beállítások: Ügyfél | UNAS — SPEC-beallitasok-harom-szint.md §2.1). */
.ff-tabs--grouped { flex-wrap: wrap; align-items: flex-end; }
.ff-tab-group { display: flex; align-items: flex-end; gap: var(--space-2); }
.ff-tab-group + .ff-tab-group { margin-left: var(--space-4); padding-left: var(--space-6); border-left: 1px solid var(--line); }
.ff-tab-group-label {
  align-self: center;
  margin-right: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* 4. Eszközsáv — egyetlen sáv; kijelöléskor a kijelölés-blokk a darabszám mögé kerül, a jobb
      oldali eszközök ikonra szűkülnek (spec §1, 2-es változat). */
.ff-panel--v2 .ff-toolbar { min-height: var(--ff-toolbar-min-h); box-sizing: border-box; }
.ff-panel--v2 .ff-toolbar[hidden] { display: none; }
.ff-panel--v2 .ff-search { flex: 0 1 360px; min-width: 160px; }
.ff-panel--v2 .ff-rowcount b { color: var(--ff-text); font-weight: var(--weight-semibold); }
.ff-panel--v2 [data-dg-bar-top]:empty { display: none; }
.ff-panel--v2 .ff-btn { font-size: var(--text-sm); padding: var(--space-3) var(--space-6); }
.ff-panel--v2.has-sel .ff-tools .ff-btn-label { display: none; }
.ff-panel--v2.has-sel .ff-tools .ff-btn { padding: var(--space-3) var(--space-4); }
.ff-bulkbar--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-6);
  border: 0;
  border-radius: var(--radius-md);
}
.ff-bulkbar--inline .ff-selinfo { font-size: var(--text-sm); white-space: nowrap; }
.ff-bulkbar--inline .ff-bulk-actions { margin-left: 0; align-items: center; }
.ff-pager-pos { font-size: var(--text-sm); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }

/* 5. Tábla — kétsoros fejléc: címkék (alulra igazítva, max. --ff-th-lines sor) + szűrők egy vonalban. */
.ff-table--v2 thead { position: sticky; top: 0; z-index: 3; }
.ff-table--v2 thead th { position: relative; top: auto; }
.ff-table--v2 thead th.ff-fix { position: sticky; }
.ff-table--v2 .ff-head-labels th { vertical-align: bottom; border-bottom: 0; padding-bottom: var(--space-3); }
.ff-table--v2 .ff-head-labels th.ff-col-check { vertical-align: middle; border-bottom: 1px solid var(--navy-line); }
.ff-table--v2 .ff-head-filters th { padding-top: 0; padding-bottom: var(--space-5); }
.ff-table--v2 .ff-th-label { display: flex; align-items: flex-end; gap: var(--space-3); }
.ff-table--v2 .ff-th-text {
  display: -webkit-box;
  -webkit-line-clamp: var(--ff-th-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Az elválasztás a `.ff-table--cols`-tól öröklött `hyphens: auto` — csak akkor választ el, ha a
     szó nem fér ki (hosszú összetett szó: „TARTALOMKÉSZÍTÉS"); a típus-szélességek úgy vannak
     méretezve, hogy a szokásos fejlécek (pl. „MÓDOSÍTVA" a 130 px-es dátum-oszlopban) ne törjenek. */
}
.ff-table--v2 th.ff-num .ff-th-text { text-align: right; }
.ff-filter input.is-invalid { border-color: var(--color-danger); outline: 2px solid var(--color-danger); outline-offset: -1px; }
.ff-table--v2 th.ff-col-fill,
.ff-table--v2 td.ff-col-fill { width: auto; min-width: var(--ff-col-fill-min); max-width: 0; }
.ff-table--v2 td .ff-trunc { max-width: none; }
/* A sor-lenyitó oszlop (riport-táblák `row_expand`-ja) fix keskeny — a tartalomhoz igazodó tábla
   különben a maradék helyet ide is szétosztaná. */
.ff-table--v2 th.ff-expand-col,
.ff-table--v2 td.ff-expand-col { width: 44px; min-width: 44px; max-width: 44px; text-align: center; }

/* 6. Oldalsó fiók (`UI.drawer`, 2026-10-07 — első használója a Tartalom & Riport Posztok-szerkesztője).
   Jobbról nyíló, nem modális panel a fejléc alatt. Széles képernyőn az oldal helyet hagy neki
   (`.ff-page.has-drawer`), így a kártyák nem csúsznak alá; keskenyen a teljes szélességet takarja. */
:root {
  --ff-drawer-w: 480px;           /* a fiók szélessége széles képernyőn */
  --ff-drawer-top: 60px;          /* az .app-header magassága — a fiók alatta kezdődik */
}
.ff-drawer {
  position: fixed;
  top: var(--ff-drawer-top);
  right: 0;
  bottom: 0;
  z-index: 90; /* az .app-header (100) alatt, a tartalom fölött */
  width: min(var(--ff-drawer-w), 100vw);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.ff-drawer[hidden] { display: none; }
.ff-drawer-head {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-10);
  border-bottom: 1px solid var(--line);
}
.ff-drawer-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}
.ff-drawer-status { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); white-space: nowrap; }
.ff-drawer-status.is-ok { color: var(--green-soft-text); }
.ff-drawer-status.is-busy { color: var(--color-text-subtle); }
.ff-drawer-status.is-err { color: var(--color-danger); }
.ff-drawer-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text-subtle);
  font-size: var(--text-lg);
  cursor: pointer;
}
.ff-drawer-close:hover { background: var(--color-surface-hover); color: var(--color-text-strong); }
.ff-drawer-close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.ff-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-8) var(--space-10) var(--space-12); }
.ff-drawer-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-10);
  border-top: 1px solid var(--line);
}
.ff-drawer-foot:empty { display: none; }
/* 1100 px alatt nem hagyunk helyet: a fiók a tartalom fölé nyílik (keskenyen a teljes szélességben). */
@media (min-width: 1100px) {
  .ff-page.has-drawer { padding-right: var(--ff-drawer-w); }
}

/* ===== FF-PAGE · VÉGE ====================================================================== */

/* ============================================================================================
   === HELP — ügyfél-oldali funkcióismertető oldalak (app/static/help/*.html) ===
   Kizárólag `help-` prefixű osztályok; a design-token rétegen kívül nincs nyers hex/px.
   Nulla visszahatás az alkalmazás-képernyőkre — ez a szekció csak a /help oldalakon fut le.
   Forrás: specs/platform/SPEC-help-dokumentacio.md
   ============================================================================================ */

.help-page {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.help-section__inner {
  width: min(100%, 920px);
  margin: 0 auto;
  padding: 0 var(--space-12);
}

/* --- Nyitóblokk --- */

.help-hero {
  background: var(--navy);
  padding: var(--space-16) 0;
}

.help-hero__inner {
  width: min(100%, 920px);
  margin: 0 auto;
  padding: 0 var(--space-12);
}

.help-hero__eyebrow {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
}

.help-hero__title {
  margin: 0 0 var(--space-6);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  color: var(--on-navy);
}

.help-hero__subtitle {
  margin: 0 0 var(--space-10);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--on-navy-muted);
}

.help-hero__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 68ch;
}

.help-hero__intro p {
  margin: 0;
  color: var(--on-navy-muted);
}

/* --- Szakasz-fejlécek (előnyök / tartalomjegyzék / funkciók) --- */

.help-benefits,
.help-toc,
.help-features {
  padding: var(--space-16) 0;
}

.help-toc {
  background: var(--color-surface-subtle-2);
}

.help-section__title {
  margin: 0 0 var(--space-12);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--navy);
}

/* --- Üzleti előnyök kártyarács --- */

.help-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
}

.help-benefit-card {
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-10);
}

.help-benefit-card__title {
  margin: 0 0 var(--space-5);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--navy);
}

.help-benefit-card__text {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* --- Tartalomjegyzék --- */

.help-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-12);
}

.help-toc__list a {
  color: var(--color-primary-hover);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.help-toc__list a:hover {
  border-bottom-color: var(--color-primary-hover);
}

/* --- Funkcióleírás --- */

.help-feature {
  padding-block: var(--space-14);
  border-top: 1px solid var(--line);
}

.help-feature:first-of-type {
  border-top: none;
  padding-top: 0;
}

.help-feature__title {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: 0 0 var(--space-8);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--navy);
}

.help-feature__title i {
  color: var(--color-primary);
  font-size: var(--text-2xl);
}

.help-feature__subtitle {
  margin: var(--space-10) 0 var(--space-5);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--navy);
}

.help-feature p {
  margin: 0 0 var(--space-6);
  max-width: 74ch;
}

.help-feature p:last-child {
  margin-bottom: 0;
}

/* Felsorolás a funkcióleírásban (pl. állapotok, riasztás-alesetek) — a bekezdésekkel azonos
   szövegsáv és ritmus. */
.help-list {
  margin: 0 0 var(--space-6);
  padding-left: var(--space-10);
  max-width: 74ch;
}

.help-list li {
  margin-bottom: var(--space-4);
}

.help-list li:last-child {
  margin-bottom: 0;
}

/* Számozott lépéssor beállítási útmutatókhoz — a sorszám navy korongban, a lépés szövege
   a bekezdésekkel azonos sávban. */
.help-steps {
  list-style: none;
  counter-reset: help-step;
  margin: 0 0 var(--space-6);
  padding: 0;
  max-width: 74ch;
}

.help-steps > li {
  counter-increment: help-step;
  position: relative;
  padding-left: var(--space-16);
  margin-bottom: var(--space-9);
}

.help-steps > li:last-child {
  margin-bottom: 0;
}

.help-steps > li::before {
  content: counter(help-step);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: var(--on-navy);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  display: grid;
  place-items: center;
}

.help-steps__title {
  display: block;
  margin-bottom: var(--space-4);
  font-weight: var(--weight-semibold);
  color: var(--navy);
}

.help-substeps {
  margin: var(--space-5) 0 0;
  padding-left: var(--space-10);
}

.help-substeps li {
  margin-bottom: var(--space-4);
}

.help-substeps li:last-child {
  margin-bottom: 0;
}

/* Kiemelt figyelmeztetés/megjegyzés doboz. */
.help-callout {
  max-width: 74ch;
  margin: 0 0 var(--space-6);
  padding: var(--space-8) var(--space-10);
  border-left: 4px solid var(--c-amber-400);
  border-radius: var(--radius-md);
  background: var(--c-amber-tint);
}

.help-callout--danger {
  border-left-color: var(--c-red-600);
  background: var(--c-red-tint);
}

.help-callout--ok {
  border-left-color: var(--c-green-600);
  background: var(--c-green-tint);
}

.help-callout p {
  margin: 0 0 var(--space-5);
}

.help-callout p:last-child {
  margin-bottom: 0;
}

.help-callout__title {
  display: block;
  margin-bottom: var(--space-4);
  font-weight: var(--weight-semibold);
  color: var(--navy);
}

/* Szövegközi hivatkozás (pl. másik /help oldalra). */
.help-link {
  color: var(--color-primary-hover);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary-hover);
}

.help-link:hover {
  color: var(--navy);
  border-bottom-color: var(--navy);
}

/* Pontosan bemásolandó érték (URL, scope, azonosító). */
.help-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 2px var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--color-surface-subtle);
  word-break: break-all;
}

/* --- Nyomtatás --- */

@media print {
  .help-hero {
    background: none;
    padding: 0 0 var(--space-10);
  }

  .help-hero__title,
  .help-hero__subtitle,
  .help-hero__intro p {
    color: #000;
  }

  .help-hero__eyebrow {
    color: #000;
  }

  .help-toc {
    display: none;
  }

  .help-benefit-card {
    box-shadow: none;
    border: 1px solid #999;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .help-feature {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .help-feature__title {
    break-after: avoid;
    page-break-after: avoid;
  }

  .help-feature__subtitle {
    break-after: avoid;
    page-break-after: avoid;
  }

  .help-list,
  .help-steps > li,
  .help-callout {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .help-callout {
    background: none;
    border: 1px solid #999;
    border-left-width: 4px;
  }

  .help-steps > li::before {
    background: none;
    color: #000;
    border: 1px solid #000;
  }

  .help-code {
    background: none;
    border-color: #999;
  }
}

/* WEBSHOP AUDIT (SPEC-webshop-audit-checklist.md) — admin checklist-tab + publikus /ingyenes-audit */

.ff-center {
  text-align: center;
}

.admin-wa-category {
  margin-bottom: 16px;
}

.admin-wa-category > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 8px 4px;
}

.admin-wa-row-off td {
  color: var(--ff-text-faint);
}

.admin-wa-detail-row td {
  background: var(--c-neutral-100, #f4f7f9);
}

.admin-wa-detail-list {
  margin: 8px 0;
  padding-left: 20px;
  font-size: 0.9em;
}

.admin-wa-detail-list li {
  margin-bottom: 4px;
}

.webshop-audit-public {
  min-height: 100vh;
  display: flex;
}

.webshop-audit-public .login-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.webshop-audit-result {
  margin-top: 20px;
}

.webshop-audit-result-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border, var(--line));
}

.webshop-audit-status {
  font-weight: 600;
  margin-right: 8px;
}

.webshop-audit-status.is-pass { color: var(--color-primary); }
.webshop-audit-status.is-fail { color: var(--color-danger); }
.webshop-audit-status.is-error,
.webshop-audit-status.is-skipped { color: var(--ff-text-faint); }

/* ============================================================================================
   DASHBOARD V2 (feladat-csempés kezdőlap — specs/unas/SPEC-dashboard-redesign.md, Fázis 1)
   Ideiglenes előnézeti nézet (`dashboard.preview_v2` action, app/apps/unas/static/dashboard_v2.js).
   A prototípus (specs/unas/dashboard-egyben (2).html) 1:1 átvétele, a fenti meglévő tokenekre
   hivatkozva — nem vezet be új tokent. A `.cpt-row`/`.cpt-title`/`.freshness` ezen az oldalon
   kívül máshol nem használt, kizárólag ehhez a fejléc-sorhoz tartozó osztályok.
   ============================================================================================ */

/* --- Tartalom-fejléc sor: cím+dátum balra, frissesség-jelző jobbra (#app-heading innerHTML) --- */
.cpt-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); width: 100%; }
.cpt-title .date { font-size: var(--text-sm); font-weight: 400; color: var(--color-text-muted); margin-left: 10px; }
.freshness {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: 5px 12px; font-size: var(--text-sm); color: var(--color-text-subtle);
}
.freshness .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-green-500); }

/* --- KPI-sáv (sötét horgony) --- */
.hero-band {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--navy); padding: var(--space-12); margin-bottom: var(--space-12);
}
.hero-motif { position: absolute; right: -140px; top: -190px; pointer-events: none; }
.kpi-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }

.kpi {
  position: relative; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: 0 10px 30px rgba(0, 0, 0, .24); overflow: hidden;
  padding: var(--space-9) var(--space-10) var(--space-10) calc(var(--space-10) + var(--space-3));
  --accent: var(--c-red-600); --tint: var(--c-red-tint); --strong: var(--c-red-600);
}
.kpi--clear { --accent: var(--c-green-600); --tint: var(--c-green-tint); --strong: var(--c-green-700); }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent); }

.kpi-head { display: flex; align-items: center; gap: var(--space-7); margin-bottom: var(--space-8); }
.kpi-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--tint); color: var(--strong); }
.kpi-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.kpi-when { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.kpi-value { font-size: var(--text-4xl); font-weight: var(--weight-bold); color: var(--navy); letter-spacing: -.02em; line-height: 1.1; }
.kpi-unit { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text-muted); margin-left: 6px; }
.delta { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-6); font-size: var(--text-base); font-weight: var(--weight-semibold); }
.delta--down { color: var(--c-red-600); }
.delta--up { color: var(--c-green-700); }
.delta--warn { color: var(--c-red-600); }
.delta .ref { font-weight: 400; color: var(--color-text-muted); font-size: var(--text-sm); }
.kpi-note { margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--color-text-subtle); line-height: 1.5; }
.kpi-note b { font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.kpi-note .up { color: var(--c-green-700); font-weight: var(--weight-semibold); }

/* --- Szekció --- */
.sec { margin-bottom: var(--space-12); }
.sec-h { display: flex; align-items: center; gap: var(--space-6); margin-bottom: var(--space-8); }
.sec-h h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--navy); }
.sec-h .line { flex: 1; height: 1px; background: var(--color-border); }
.sec-h .cnt { font-size: var(--text-sm); color: var(--color-text-muted); }

/* --- Csempe --- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--space-8); }
.tile {
  position: relative; display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden;
  padding: var(--space-10) var(--space-10) var(--space-9) calc(var(--space-10) + var(--space-3));
  /* alapértelmezés: VAN FELADAT (piros) */
  --accent: var(--c-red-600); --tint: var(--c-red-tint); --strong: var(--c-red-600);
}
.tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent); }
/* NINCS FELADAT (zöld) */
.tile--clear { --accent: var(--c-green-600); --tint: var(--c-green-tint); --strong: var(--c-green-700); background: #FBFDF8; }
/* NINCS ADAT (semleges navy, spec §6.4) — se nem piros, se nem zöld: a felhasználó nem hiheti,
   hogy rendben van, amiről nem tudunk semmit (pl. ad_spend, amíg nem futott költés-szinkron). */
.tile--nodata { --accent: var(--c-navy); --tint: rgba(16, 42, 61, 0.08); --strong: var(--c-navy); }

.tile-top { display: flex; align-items: flex-start; gap: var(--space-6); margin-bottom: var(--space-7); }
.tile-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--tint); color: var(--strong); display: grid; place-items: center; }
.tile-name { flex: 1 1 auto; min-width: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--navy); line-height: 1.3; }
.cadence {
  flex: 0 0 auto; display: inline-flex; align-items: center; padding: 3px var(--space-6); border-radius: var(--radius-pill);
  background: var(--tint); color: var(--strong);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .04em; white-space: nowrap;
}

.tile-desc { margin: 0; font-size: var(--text-base); color: var(--color-text-subtle); line-height: 1.6; }

.tile-kpi {
  display: flex; align-items: baseline; gap: var(--space-5);
  margin: var(--space-9) 0 0; padding: var(--space-7) var(--space-8);
  border-radius: var(--radius-md); background: var(--tint);
}
.tile-kpi .n { font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--strong); line-height: 1; letter-spacing: -.02em; }
.tile-kpi .t { font-size: var(--text-sm); color: var(--strong); line-height: 1.4; }
.tile-kpi .tick { color: var(--c-green-600); flex: 0 0 auto; }

.tile-cta { margin-top: var(--space-9); }
.tile-cta .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); width: 100%;
  padding: 11px var(--space-9); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); font-family: inherit;
  font-size: var(--text-base); font-weight: var(--weight-semibold); cursor: pointer;
}
.tile-cta .btn:hover { background: var(--color-surface-subtle); border-color: var(--color-border-strong); }
.tile-cta .btn--go { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.tile-cta .btn--go:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.tile-cta .btn--quiet { color: var(--color-text-subtle); }
.tile-cta .btn svg { transition: transform .15s ease; }
.tile-cta .btn:hover svg { transform: translateX(2px); }

/* §6.5 kiugró-változás csempék: két egymás alatti CTA + halvány piros (negatív irány) gomb-változat
   — a negatív változások meglévő piros token-családjából, nem új szín. */
.tile-cta--stack { display: flex; flex-direction: column; gap: var(--space-4); }
.tile-cta .btn--neg { background: var(--c-red-50); border-color: var(--c-red-100); color: var(--c-red-600); }
.tile-cta .btn--neg:hover { background: var(--c-red-100); border-color: var(--c-red-100); color: var(--c-red-700); }

@media (max-width: 1200px) { .kpi-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: 1fr; } }

/* --- Kiugró-változás modál (swings_modal.js, spec §6.5) — a termék-modál vázára (.product-modal,
   .pm-header, .pm-body) épül, ezek csak a TOP 10 termék-blokk saját elemei. --- */
.swings-modal { max-width: 760px; }
.sw-list { display: flex; flex-direction: column; gap: var(--space-10); }
.sw-item { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-8) var(--space-10) var(--space-10); }
.sw-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; margin-bottom: var(--space-6); }
.sw-item-title { display: flex; align-items: baseline; gap: var(--space-6); flex-wrap: wrap; min-width: 0; }
.sw-name {
  background: none; border: none; padding: 0; font: inherit; text-align: left; cursor: pointer;
  font-weight: var(--weight-semibold); color: var(--color-text-strong);
}
.sw-name:hover { color: var(--primary); text-decoration: underline; }
.sw-sku { color: var(--color-text-muted); font-size: 0.8rem; }
.sw-sum { font-size: 0.85rem; color: var(--color-text-muted); white-space: nowrap; }
.sw-sum strong { color: var(--color-text-strong); }
.sw-pct { font-weight: var(--weight-semibold); }
.sw-pct--down { color: var(--c-red-600); }
.sw-pct--up { color: var(--primary); }
.sw-chart-wrap { position: relative; height: 170px; width: 100%; }
.sw-empty { margin: 0; color: var(--color-text-muted); }

/* ===== HELP · VÉGE =========================================================================== */

/* =============================================================================================
   === CHANGELOG — ügyfél-nyelvű fejlesztési napló oldal (GET /changelog) ======================
   Kizárólag `changelog-` prefixű osztályok; a design-token rétegen kívül nincs nyers hex/px.
   Forrás-adat: changelog_entries tábla (seed: app/data/changelog_entries.json).
   ============================================================================================= */

.changelog-page {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.changelog-hero {
  background: var(--navy);
  padding: var(--space-12) 0;
}

.changelog-hero__inner {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 0 var(--space-12);
}

.changelog-hero__eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
}

.changelog-hero__title {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--on-navy);
}

.changelog-main {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: var(--space-12) var(--space-12) var(--space-16);
}

.changelog-day {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--line);
}

.changelog-day:last-child {
  border-bottom: none;
}

.changelog-day__date {
  margin: 0 0 var(--space-6);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--navy);
}

.changelog-group__title {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}

.changelog-list {
  margin: 0;
  padding-left: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.changelog-item::marker {
  color: var(--green);
}

.changelog-item__app {
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}

.changelog-empty {
  margin: 0;
  color: var(--color-text-muted);
}

@media print {
  .changelog-hero { background: none; padding: 0; }
  .changelog-hero__title { color: var(--color-text-strong); }
  .changelog-day { break-inside: avoid; page-break-inside: avoid; }
}

/* ===== CHANGELOG · VÉGE ====================================================================== */

/* ===== AKKUSHOP · Webshop termékkezelés (akkushop.*) =========================================
   Az Akkuwebshop client app felülete: bejövő források, mezőmapping, próbaelőnézet.
   Kizárólag a meglévő design-tokenekre épül (nincs új szín, nincs per-app CSS-fájl); a táblák a
   közös .ff-table rendszert, a gombok a .ps-btn / .ps-primary primitívet használják.
   ============================================================================================= */

/* A shell a viewporthoz kötve, hogy a .content-region TÉNYLEGESEN görgessen — enélkül az ablak
   görget, és a mentés-sáv `position: sticky`-je némán hatástalan maradna (PLATFORM-STACK §11).
   A `:has()` miatt a hatókör CSAK az akkushop-nézetek; a többi képernyő görgetés-modellje
   érintetlen — ugyanaz a bevált, szűkített minta, mint a PDS-nél. */
.app-shell:has(.akks-wrap) { height: 100vh; }

.akks-wrap { display: flex; flex-direction: column; gap: var(--space-8); padding-bottom: var(--space-4); }

.akks-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.akks-card h3 { margin: 0; color: var(--color-text-strong); }

.akks-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }

/* A magyarázó szövegek olvashatósága: a sorköz itt fontosabb, mint a helytakarékosság — ezek a
   mondatok döntést támogatnak (mit csinál a gomb, mi lesz a mezővel), nem díszítés. */
.akks-muted {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: var(--leading-normal);
  margin: 0;
  max-width: 78ch;
}

.akks-help {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  line-height: var(--leading-normal);
  margin-top: var(--space-3);
}

.akks-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }

/* SEO karakterszámláló a mezőszerkesztőben (OPEN-18). A túllépés JELZÉS, nem tiltás — ezért kap
   figyelmeztető színt, de sem keretet, sem hibás-mező állapotot: a mentés és a jóváhagyás
   változatlanul mehet. */
.akks-seocount { margin-top: var(--space-2); font-variant-numeric: tabular-nums; }
.akks-seocount.is-over { color: var(--c-amber-700); }

.akks-back { align-self: flex-start; }

/* --- Fülek (a többi fül a következő fejlesztési lépésekben aktiválódik) --- */
.akks-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.akks-tab {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  cursor: pointer;
}

.akks-tab.is-active { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.akks-tab.is-disabled { opacity: 0.45; cursor: not-allowed; }

/* --- Űrlap ---
   RÁCS, nem sorba-tördelés: a flex-wrap ragged, egyenetlen oszlopokat adott (egy hosszú címke
   eltolta a mellette lévőt), a rács viszont igazított sávokba rendezi a mezőket, és minden sorban
   ugyanott kezdődik a következő. A sávszélesség 280px — ennyi kell, hogy egy magyar mezőcímke
   tördelés nélkül elférjen. */
.akks-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-10) var(--space-12);
  align-items: start;
}

.akks-form-row label {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: 0.88rem;
  font-weight: var(--weight-medium);
  color: var(--color-text-strong);
  min-width: 0; /* rács-cellában enélkül a hosszú tartalom szétfeszítené a sávot */
}

/* Árazás fül (A3): a rövid, SZÁMOS mezők (ÁFA, szorzó, kerekítés) nem érdemelnek 280px-es sávot
   — itt a szűkebb rács olvashatóbb, mert a hat mező egy pillantással átfogható. A `.akks-form-row`
   címke-szabályait ettől függetlenül örökli. */
.akks-pricing-form { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-6); }
.akks-num { max-width: 10rem; }

.akks-check {
  flex-direction: row !important;
  align-items: center;
  gap: var(--space-4) !important;
  align-self: center;
}

.akks-input {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font: inherit;
  font-weight: var(--weight-regular);
  color: var(--color-text);
  background: var(--color-surface);
  width: 100%;
}

.akks-input:focus { outline: 2px solid var(--c-focus-ring); border-color: var(--color-focus); }
.akks-input:disabled { background: var(--color-surface-subtle); color: var(--color-text-muted); }
.akks-input-narrow { max-width: 140px; }
/* Kártya-fejlécbe kerülő beviteli mező (Kategóriák fül: forrás-választó, fa-kereső): ne nyúljon
   a kártya széléig, de férjen el benne egy teljes kategória-útvonal. */
.akks-input-wide { max-width: 22rem; }
.akks-textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }

.akks-actions { display: flex; gap: var(--space-6); flex-wrap: wrap; align-items: center; }

/* Lépés-címke a szerkesztőn belül: egy hosszú űrlap három szakaszra bontva („Alapadatok" →
   „Kapcsolat" → „Beolvasás") sokkal könnyebben pásztázható, mint egy egybefüggő mezőtömb. */
.akks-subhead {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  font-size: 0.78rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.akks-card > .akks-subhead:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

/* --- Mentés-sáv ---
   A lap fő művelete nem lehet egy apró gomb a tartalom legalján: a sáv a tartalom-régió aljához
   tapad, végig látszik, és a MENTÉS a legnagyobb elem rajta. A bal oldali mondat azt mondja ki,
   amit a felhasználónak tudnia kell: a mentésig semmi nem íródik a DB-be. */
.akks-sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-4);
  padding: var(--space-10) var(--space-12);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.akks-sticky-note { color: var(--color-text-muted); font-size: 0.85rem; margin: 0; }
.akks-sticky-buttons { display: flex; align-items: center; gap: var(--space-6); }

/* --- Állapot-jelzések (hiba / figyelmeztetés / rendben) --- */
.akks-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  font-size: 0.78rem;
  white-space: nowrap;
}

/* A hibaszám a Futások listán KATTINTHATÓ (megnyitja a naplót a hibás tételeknél). A böngésző
   alap <button>-stílusa (keret, betűtípus, háttér) enélkül átütne a címkén — ugyanaz a csapda,
   amit a `.ff-link` már egyszer megevett. */
button.akks-badge {
  border: 0;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
button.akks-badge:hover, button.akks-badge:focus-visible { filter: brightness(0.94); }

.akks-badge.is-ok { background: var(--c-green-tint); color: var(--green-soft-text); }
.akks-badge.is-warning { background: var(--c-amber-tint); color: var(--c-amber-700); }
.akks-badge.is-error { background: var(--c-red-tint); color: var(--c-red-700); }
/* V1 · kézi-védelem: a zárolás-címke nem figyelmeztetés, hanem garancia — ezért semleges és
   halvány. Színnel kiabálva a lista minden kézzel javított terméke hibásnak látszana. */
.akks-badge.is-quiet {
  background: var(--color-surface-muted);
  color: var(--color-text-subtle);
  border: 1px solid var(--color-border);
}

/* --- „Mi fog változni?" (E2) ---
   A fájlcsere összevetésének fejléc-sávja. A négy-öt szám a döntés alapja, ezért NAGY és egy
   sorban áll; a nulla értékű tétel viszont halvány marad, hogy a lényeg (ami tényleg változik)
   kiugorjon belőle. Enélkül egy „0 új · 0 változó · 361 eltűnt" ugyanúgy nézne ki, mint egy
   normális havi frissítés — pedig az épp a rossz fájl jele. */
.akks-changebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
  margin: var(--space-6) 0;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.akks-changestat { font-size: 0.85rem; color: var(--color-text-muted); }
.akks-changestat strong { font-size: 1.15rem; font-weight: var(--weight-semibold); color: var(--color-text); }
.akks-changestat.is-zero, .akks-changestat.is-zero strong { color: var(--color-text-subtle); }
.akks-changestat.is-new strong { color: var(--green-soft-text); }
.akks-changestat.is-error strong { color: var(--c-red-700); }
.akks-changestat.is-missing strong { color: var(--c-amber-700); }

/* A tételes listák (eltűnt termékek, hibás sorok) saját görgetőt kapnak: egy 300 soros eltérés
   nem tolhatja le az ablak gombjait a képernyőről (a futásnapló-tábla bevált mintája). */
.akks-changelist {
  max-height: 14rem;
  overflow-y: auto;
  font-size: 0.85rem;
  line-height: var(--leading-normal);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.akks-issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.akks-issues li { font-size: 0.85rem; line-height: var(--leading-normal); }
.akks-issues li.is-ok, .akks-summary .is-ok { color: var(--green-soft-text); }
.akks-issues li.is-warning, .akks-summary .is-warning { color: var(--c-amber-700); }
.akks-issues li.is-error, .akks-summary .is-error { color: var(--c-red-700); }

/* Ellenőrzőlista: minden sor UGRÁS a hibájához (a mezőhöz, a szekcióhoz vagy a kép-panelhez).
   A sor ezért gomb — így a billentyűzet is eléri —, de listasornak látszik: az ikon, a sorszám és
   a szöveg három oszlopban áll, hogy a szövegek egy vonalban kezdődjenek. */
.akks-checklist { gap: var(--space-2); }
.akks-checklist li { display: block; }
.akks-checkjump {
  display: grid;
  grid-template-columns: 1rem 2rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.akks-checkjump:hover, button.akks-checkjump:focus-visible { background: var(--color-surface-muted); }
button.akks-checkjump:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 1px; }
/* Amihez nincs hova ugrani (ütközés), az ugyanígy áll, csak nem kattintható. */
span.akks-checkjump { cursor: default; }
.akks-checkno { color: var(--color-text-subtle); font-variant-numeric: tabular-nums; font-weight: 600; }
.akks-checktext { overflow-wrap: anywhere; }
.akks-checksummary { margin-bottom: var(--space-4); font-size: 0.85rem; font-weight: 600; }

.akks-cred-ok { margin: 0; color: var(--green-soft-text); }
.akks-cred-missing { margin: 0; color: var(--c-amber-700); }

.akks-req { color: var(--c-red-600); font-weight: 700; }

/* --- Felismert oszlopok (chip-sor) --- */
.akks-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.akks-chip {
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: 0.8rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
}

.akks-chip.is-ok { border-color: var(--green); background: var(--c-green-tint); color: var(--green-soft-text); }
.akks-chip.is-warning { border-color: var(--c-amber-400); background: var(--c-amber-tint); color: var(--c-amber-700); }
.akks-chip.is-error { border-color: var(--c-red-500); background: var(--c-red-tint); color: var(--c-red-700); }

/* --- Onboarding-sáv (U3) --- */
/* Az „első lépések" chip-sora a Beállítások MINDEN fülének a tetején; a chipek ide kattinthatóak
   (a releváns fülre ugranak), ezért kapnak mutató kurzort — a `.akks-chip` egyébként statikus. */
.akks-onboarding { padding: var(--space-6) var(--space-7); }
.akks-onboarding .akks-muted { margin: 0 0 var(--space-6); }
.akks-onboarding .akks-chip { cursor: pointer; }
.akks-onboarding .akks-chip:hover { border-color: var(--color-primary); }

/* --- Mapping-táblázat --- */
/* A mapping-tábla nem adat-lista, hanem ŰRLAP: 25 soron át kell benne dönteni, ezért a sorok
   levegősebbek, mint egy sima riport-táblában. */
.akks-map-table td { vertical-align: top; padding-top: var(--space-7); padding-bottom: var(--space-7); }
.akks-map-table td:first-child { line-height: var(--leading-normal); }
.akks-map-table tr.akks-group td { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.akks-map-table tr.akks-group td {
  background: var(--color-surface-subtle);
  font-weight: 600;
  color: var(--color-text-strong);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.akks-preview-cell { color: var(--color-text-subtle); font-size: 0.85rem; max-width: 260px; overflow-wrap: anywhere; }

/* A tömeges duplikátum-döntés előnézete TELJES listát mutat (a korábbi 50 soros vágás csendes
   volt: a végrehajtás többet tett, mint amit az előnézet mutatott). Hosszú listánál a táblázat
   itt görgethető, hogy az ablak gombjai a képernyőn maradjanak. */
.akks-preview-scroll { max-height: 42vh; overflow-y: auto; }

/* --- Próbaelőnézet (forrás ↔ normalizált, egymás mellett) --- */
.akks-summary { margin: 0; }
.akks-preview-table td { vertical-align: top; }
.akks-rownum { color: var(--color-text-muted); white-space: nowrap; }
.akks-cellblock {
  font-size: 0.82rem;
  line-height: var(--leading-normal);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 420px;
  overflow-wrap: anywhere;
}
.akks-inline-issue { font-size: 0.78rem; }
.akks-inline-issue.is-warning { color: var(--c-amber-700); }
.akks-inline-issue.is-error { color: var(--c-red-700); }
.akks-inline-issue.is-ok { color: var(--green-soft-text); }

/* --- Üres állapot (Termékek) --- */
.akks-empty {
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}

.akks-empty h2 { margin: 0; color: var(--color-text-strong); }
.akks-empty p { margin: 0; max-width: 560px; color: var(--color-text-subtle); }

/* --- Modál (service account kulcs) --- */
.akks-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
}

.akks-modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  width: min(680px, 100%);
  max-height: 90vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.akks-modal h3 { margin: 0; color: var(--color-text-strong); }
.akks-modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* Széles ablak táblázatos tartalomhoz (futásnapló) — 2026-09-03. A napló korábban a lap alján,
   a többi kártya közé ékelődve nyílt meg; külön ablakban nincs mögötte semmi, amit pásztázni
   kellene. A `min()` miatt kis képernyőn is a rendelkezésre álló szélességet kapja. */
.akks-modal-wide { width: min(1100px, 100%); }

.akks-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Bezáró × a fejlécben. A böngésző alap <button>-stílusát nullázni kell (a `.ff-link` csapdája). */
.akks-modal-x {
  flex: none;
  border: 0;
  background: none;
  padding: 2px 6px;
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
}
.akks-modal-x:hover, .akks-modal-x:focus-visible {
  background: var(--color-surface-muted);
  color: var(--color-text-strong);
}

/* A napló táblája SAJÁT görgetőt kap: egy 400 hibás tételes futás így sem tolja ki az ablakot,
   és a ragadó fejléc ehhez a konténerhez tapad. */
.akks-runmodal-table { overflow: auto; max-height: 55vh; }

/* ===== AKKUSHOP · VÉGE ======================================================================= */

/* --- Akkushop: adapter-fejléc a forrás-szerkesztőben (a generált kapcsolat-űrlap fölött) --- */
.akks-adapter-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.akks-cred {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.akks-form-row label .akks-help { margin-top: 2px; }

/* --- Akkushop: Termékek munkafelület (állapotkártyák · szűrősáv · futás-panel · rács-cellák) ---
   A terméklista maga a megosztott DataGrid (a dg- és ff- elemnevekkel) — itt csak az AFÖLÖTTI
   vezérlők és a cellákban használt apró jelzések élnek. Új táblázat-osztálynév NEM keletkezik
   (FF-TABLE szabály). */

.akks-statcards { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.akks-statcard {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.akks-statcard:hover { border-color: var(--navy); }
.akks-statcard.is-active { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.akks-statcard-label { font-size: 0.78rem; opacity: 0.85; }
.akks-statcard-value { font-size: 1.35rem; font-weight: 600; line-height: 1.1; }

.akks-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.akks-filterbar label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.akks-filterbar label.akks-check { flex-direction: row; align-items: center; gap: var(--space-2); }

.akks-runpanel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.akks-runpanel.is-running { border-color: var(--navy); }
.akks-runpanel.is-ok { border-color: var(--color-primary); }
.akks-runpanel.is-warning { border-color: var(--color-warning); }
.akks-runpanel.is-error { border-color: var(--color-danger); }
.akks-runpanel-error { color: var(--color-text-muted); font-size: 0.85rem; }

/* Terméknév-cella a Termékek rácsban. A nevek hosszúak („Yuasa – YBX1012, 12V, 45Ah, 380A,
   Ca-Ca Indító Akkumulátor"), a `.ff-btn` viszont `white-space: nowrap` — a gomb ezért
   KILÓGOTT a 280 px-es cellából és ráúszott a Beszállító/Tartalom oszlopra (a `td` `max-width`-je
   önmagában nem vág: nincs `overflow`, és az átlátszó hátterű `is-quiet` gomb miatt a két szöveg
   egymásra íródott). A gomb itt TÖRHET — szövegként viselkedik, csak kattinthatóan. */
.akks-namebtn {
  display: inline-block;
  max-width: 100%;
  padding: 0;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
  color: var(--ff-text);
}
.akks-namebtn:hover { background: transparent; text-decoration: underline; }

/* --- Kategóriák fül (2026-08-29 · újratervezés) ---
   Az érvényes kör HÁROM forrásból áll (webshop-fa · beszállítói munkalap · kézi lista), és eddig
   három külön kártyán látszott — a felhasználó sehol nem látta egyben, mi érvényes, és azt sem,
   hogy egy kategória honnan való. Az eredet-címke a lista minden során ott van. */
.akks-origin-tag {
  display: inline-block;
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  margin-right: var(--space-3);
  font-size: 0.78rem;
  white-space: nowrap;
  border: 1px solid transparent;
}
.akks-origin-tag.is-tree { background: var(--c-green-tint); color: var(--green-soft-text); }
.akks-origin-tag.is-sheet { background: var(--color-surface-subtle); color: var(--color-text-strong); }
.akks-origin-tag.is-manual { border-color: var(--color-border); color: var(--color-text-subtle); }

/* A „honnan jönnek" táblázat: a három forrás egy sora. A művelet-oszlop cellája a saját gombjait
   sorba rendezi (a webshop-sorban a forrásválasztó + két gomb is elfér). */
.akks-catsources td { vertical-align: top; }
.akks-catsource-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}
.akks-catsource-actions .akks-input { width: auto; min-width: 150px; }

/* Feltöltési szabályok: a két szabály KÜLÖN blokkban áll, és a magyarázat a saját vezérlője
   MELLETT van — korábban a kártya alján állt két hosszú bekezdés, amiről nem derült ki, melyik
   melyikre vonatkozik. */
.akks-rule {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.akks-rule:first-of-type { border-top: 0; }
.akks-rule h4 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}
.akks-rule-list { margin: 0; padding-left: var(--space-8); color: var(--color-text-muted); }
.akks-rule-list li { line-height: var(--leading-normal); }

/* Termékparaméterek: a kiolvasás JAVASLATAI, kipipálható listaként. A rendszer felkínál, a
   felhasználó dönt (§9.2) — ezért nem írjuk bele magunktól a katalógusba. */
.akks-candidates {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

/* A munkalap-beolvasás ELŐNÉZETE: mit találtunk, és a gomb, ami rögzíti. */
.akks-sheet-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.akks-content { white-space: nowrap; }
.akks-dots { letter-spacing: 1px; color: var(--color-text-muted); }
.akks-origin { color: var(--color-text-muted); font-size: 0.8rem; }
.akks-bulk-note { font-size: 0.85rem; }

/* Tartalomgenerálás (F2): a típusválasztó modal és a mezőnkénti előzmény-sor. */
.akks-slotlist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2);
}

.akks-slot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.akks-estimate {
  padding: var(--space-3);
  background: var(--color-surface-muted);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.akks-estimate p { margin: 0 0 var(--space-2); }
.akks-estimate p:last-child { margin-bottom: 0; }

.akks-history > td { background: var(--color-surface-muted); }

/* Ellenőrzés és jóváhagyás (F3): a termék-ellenőrző képernyő kéthasábos elrendezése, a mezőnkénti
   műveletek és az újragenerálás összehasonlító ablaka (SPEC-akkuwebshop-WORKING-app.md §8.2). */
.akks-detail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }

.akks-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: var(--space-8);
  align-items: start;
}

/* A mezőlista ŰRLAP négy oszloppal (mező · érték · eredet · műveletek) — ehhez kb. 700 px kell.
   A tartalom-régió a 340 px-es jobb sávval együtt ezt csak ~1400 px-es ablaktól adja meg, ezért az
   alatt a jobb sáv a mezők ALÁ kerül, és a táblázat kapja a teljes szélességet. (A korábbi 1100 px-es
   határnál egy 1280-as laptopon a mezők ~520 px-re szorultak, és a táblázat vízszintesen kilógott.) */
@media (max-width: 1400px) {
  .akks-detail { grid-template-columns: minmax(0, 1fr); }
  .akks-sidepanel { position: static; }
}

.akks-sidepanel { position: sticky; top: var(--space-4); }
.akks-sidepanel h3 { margin-top: var(--space-4); font-size: 0.95rem; }
.akks-sidepanel h3:first-child { margin-top: 0; }

/* --- Ragadós döntés-sáv a termék-ellenőrzésen (2026-09-03 · UX-kör) --------------------------
   A jobb sáv (ellenőrzőlista · előrejelzés · döntés) 1400 px FÖLÖTT ragadós, tehát végig látszik.
   Az alatt a fenti szabály a mezők ALÁ ejti — ez a helyes döntés a táblázat szélessége miatt —,
   csakhogy ott a három döntés-gomb ~2840 px-re kerül a lap tetejétől: egy 1280-as vagy 1366-os
   laptopon négy képernyőnyire, TERMÉKENKÉNT. A sáv csak ezen a sávszélességen jelenik meg:
   1400 px fölött két egyforma gombsor csak bizonytalanságot szülne. */
.akks-decisionbar { display: none; }

@media (max-width: 1400px) {
  .akks-decisionbar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    margin-top: calc(-1 * var(--space-4));
    padding: var(--space-6) var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
}

.akks-decisionbar-info { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
/* Az ellenőrzőlista összegzője itt EGY sorban áll a többi elemmel — a saját bekezdés-margója
   a sávban felesleges üres helyet nyitna. */
.akks-decisionbar-info .akks-summary { margin: 0; }
.akks-decisionbar-actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

/* --- A termékrács sora EGÉSZBEN nyit (2026-09-03 · UX-kör) -----------------------------------
   Az osztályt a rács `rowClass`-a teszi ki, tehát KIZÁRÓLAG az Akkuwebshop termékrácsára hat —
   a közös DataGrid többi fogyasztója nem mozdul. A sor-hover hátterét az `.ff-table` már adja;
   itt csak a mutató jelzi, hogy a sor kattintható. */
.akks-rowlink { cursor: pointer; }

/* --- A Futások lista szűrői (2026-09-03 · UX-kör) ------------------------------------------- */
.akks-runfilters { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: center; }
.akks-runfilters label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Biztonsági háló: ha a felület mégis a minimum alá szorul, a táblázat SAJÁT MAGA görgessen —
   a lap teste sosem (PLATFORM-STACK §11). */
.akks-fieldtable-wrap { overflow-x: auto; }

/* A min-width a VÍZSZINTES GÖRGETÉS küszöbe: az oszlopok deklarált szélessége (11 + 6,5 + 17rem)
   plusz az értékoszlopnak hagyott hely. 44rem-ről 48rem-re nőtt, hogy a szűk panelen se préselődjön
   össze az érték-oszlop — a `.akks-fieldtable-wrap` ilyenkor görget. */
.akks-fieldtable { table-layout: fixed; width: 100%; min-width: 48rem; }
.akks-fieldtable td { vertical-align: middle; }
.akks-fieldname { white-space: normal; font-weight: 500; width: 11rem; }
.akks-fieldvalue { overflow-wrap: anywhere; }
/* Az EREDET cella a V1 óta a feloldó gombot is tartja: a művelet ott van, ahol a lakat — és így
   a mezőtábla nem nő egy TELJES gomboszloppal (az a vízszintes görgetésbe nyomta a táblát, pedig a
   feloldás ritka művelet). A cella oszlopként rendez, hogy a gomb a címke ALÁ kerüljön. */
.akks-fieldorigin { width: 6.5rem; }
.akks-fieldorigin .akks-release { margin-top: var(--space-2); width: 100%; }

/* A mezőtábla OSZLOPSZÉLESSÉGEI — a táblára szűkítve, mind a három tulajdonsággal.
   A közös FF-TABLE szabály (`.ff-table thead th, .ff-table tbody td`) minden cellát
   `width/min-width/max-width: var(--dg-w, auto)`-ra állít, és a specificitása magasabb egy sima
   osztályénál — ezért a fenti szélességek eddig HATÁSTALANOK voltak: a négy oszlop egyenlően
   osztozott, a 17rem-es művelet-rács pedig kilógott a saját cellájából a szomszédra. Ez addig
   csak csúnya volt (üres helyre lógott); a V1 feloldó gombjának viszont a JOBB SZÉLÉT tette
   kattinthatatlanná. A közös `.ff-*` szabályhoz nem nyúlunk (PLATFORM-STACK §11) — a saját
   nevünket szűkítjük. */
.akks-fieldtable .akks-fieldname { width: 11rem; min-width: 11rem; max-width: 11rem; }
.akks-fieldtable .akks-fieldorigin { width: 6.5rem; min-width: 6.5rem; max-width: 6.5rem; }
.akks-fieldtable .akks-rowactions { width: 17rem; min-width: 17rem; max-width: 17rem; }

/* A három művelet FIX SZÉLESSÉGŰ helyen áll, és a nem elérhető helye üresen marad — így a gombok
   sorok között is egymás alá esnek. A ragadozó (soronként változó szélességű) gombsor volt az, ami
   a táblázatot funkció szerint olvashatatlanná tette. */
.akks-rowactions { width: 17rem; }
.akks-actiongrid {
  display: grid;
  grid-template-columns: 5.25rem 6.25rem 4.5rem;
  gap: var(--space-1);
  justify-content: end;
}
.akks-rowactions .ps-btn { width: 100%; }

/* Amit a jóváhagyás BLOKKOL, az a mezőlistán is látszik — nem csak a jobb sáv listáján. */
.akks-fieldtable tr.is-blocking > td:first-child { box-shadow: inset 3px 0 0 var(--c-red-500); }
.akks-fieldtable tr.is-blocking .akks-muted { color: var(--c-red-700); }

/* Ami nem blokkol, de figyelmeztet (pl. túl hosszú SEO title) — halványabb, borostyán jelöléssel:
   a két szint így NEM mosódik össze, a piros marad a „ezt kötelező javítani". */
.akks-fieldtable tr.is-warned > td:first-child { box-shadow: inset 3px 0 0 var(--c-amber-400); }

/* Mezők sorszáma (szekció.mező) — az ellenőrzőlista UGYANEZT a számot mutatja, ez köti össze a
   jobb sávot a táblázattal akkor is, ha a felhasználó nem kattint, csak keres. */
.akks-fieldno {
  display: inline-block;
  min-width: 2.1rem;
  margin-right: var(--space-2);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.78rem;
}
.akks-imagepanel h3 .akks-fieldno { min-width: 0; }
.akks-docpanel h3 .akks-fieldno { min-width: 0; }

/* Ide ugrott az ellenőrzőlistáról: a kiemelés MEGMARAD (nem villan el), hogy a hosszú táblázatban
   a felhasználó akkor is lássa a helyét, ha közben görgetett vagy mentett egyet. */
/* A `tbody` azért van a szelektorban, mert a `.ff-table` zebra-szabálya (`tbody tr:nth-child(even)
   td`) enélkül ERŐSEBB, és a páros sorokon elnyelné a kiemelést. */
.akks-fieldtable tbody tr.is-focused > td { background: var(--c-amber-tint); }
.akks-fieldtable tr.akks-group.is-focused td { background: var(--c-amber-tint); }
.akks-imagepanel.is-focused { box-shadow: 0 0 0 2px var(--c-amber-400); }
.akks-docpanel.is-focused { box-shadow: 0 0 0 2px var(--c-amber-400); }

/* Eredet-címke: chip, nem szögletes zárójel — a három eredet így egy pillantással elkülönül. */
.akks-origin.is-source { background: var(--color-surface-muted); color: var(--color-text-subtle); }
.akks-origin.is-ai { background: var(--c-green-tint); color: var(--green-soft-text); }
.akks-origin.is-manual { background: var(--c-amber-tint); color: var(--c-amber-700); }
/* A SZÁMÍTOTT érték (A1) — se nem a forrásé, se nem kézi. Saját, hűvös színe van, hogy a
   „honnan jött ez az ár?" kérdésre egy pillantás válaszoljon; lakat viszont NINCS rajta, mert
   nem a felhasználó zárolta (l. `USER_LOCK_ORIGINS` az akkushop.js-ben). */
.akks-origin.is-calc { background: rgba(16, 42, 61, 0.09); color: var(--c-navy); }

.akks-origin.is-source,
.akks-origin.is-ai,
.akks-origin.is-manual,
.akks-origin.is-calc {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* A lakat az eredet-chip ELŐTAGJA (V1): a védett mező egy pillantással megkülönböztethető, de a
   chip mérete és színe nem változik tőle. */
.akks-lockmark { font-size: 0.7rem; line-height: 1; }

.akks-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Csoport-fejléc a mezőlistán — a mapping-tábla mintája (a `.akks-group` eddig CSAK ott volt
   megstílusozva, ezért a mezőlistán a szekciók sima sorként olvadtak a többibe). */
.akks-fieldtable tr.akks-group td {
  background: var(--color-surface-subtle);
  font-weight: 600;
  color: var(--color-text-strong);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.akks-versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.akks-versions li { display: flex; align-items: center; gap: var(--space-2); font-size: 0.85rem; }
.akks-versionvalue { flex: 1 1 auto; overflow-wrap: anywhere; color: var(--color-text-subtle); }

.akks-inline-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.akks-field-label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 4px; }

.akks-decision-actions { display: flex; flex-direction: column; gap: var(--space-2); }

.akks-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.akks-compare h4 { margin: 0 0 var(--space-2); font-size: 0.85rem; color: var(--color-text-muted); }

.akks-compare > div {
  padding: var(--space-3);
  background: var(--color-surface-muted);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.akks-compare > div:last-child { background: var(--c-green-tint); }

/* --- UNAS feltöltés (F4 · §8.3) -------------------------------------------------------------
   A fülsáv a KÖZÖS `.pds-nav` (a Tartalomgyártás munkatáblájával azonos komponens) — itt csak a
   sáv körüli térköz és a lista-tételek élnek. Új fül-stílus szándékosan NEM készült. */

.akks-upload-nav { margin: var(--space-4) 0 var(--space-3); }

/* A futás tételtáblája a futás-panel alatt, a fülek FÖLÖTT — nézetváltás közben is látszik. */
.akks-runitems { margin-top: var(--space-2); }

.akks-uplist { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }

.akks-upitem {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* A blokkolt tétel bal éle piros — ugyanaz a jelölés, mint a mezőtáblázat blokkoló soránál. */
.akks-upitem.is-blocked { border-left-color: var(--color-danger); }

.akks-upitem-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.akks-upitem-head span:not([class]) { color: var(--color-text-muted); }

/* --- Kép-panel (§16.4) — miniatűrök, átrendezés, Alt szerkesztés -----------------------------
   A panel a mezőlista ALÁ kerül, a bal oszlopban: ezért van a `.akks-detail` bal oldalán saját
   burkoló (`.akks-detail-main`) — enélkül a rács a panelt a jobb sávba, a jobb sávot pedig a
   második sorba tolná. */
.akks-detail-main { display: grid; gap: var(--space-8); min-width: 0; }

.akks-imagegrid {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--space-4);
}

.akks-image {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: grab;
}
.akks-image.is-dragging { opacity: 0.5; cursor: grabbing; }

/* A státusz a kártya bal élén is látszik — a hibás kép így a miniatűr nélkül is felismerhető. */
.akks-image.is-ok { border-left-color: var(--c-green-500); }
.akks-image.is-error { border-left-color: var(--c-red-500); }
.akks-image.is-warning { border-left-color: var(--c-amber-400); }
.akks-image.is-muted { border-left-color: var(--color-border); }
.akks-image.is-skipped { background: var(--color-surface-subtle); }

.akks-image-thumb {
  position: relative;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  overflow: hidden;
}
.akks-image-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* A be nem töltő kép NEM tünteti el a kártyát (K-4): a helyén a keret és a hibaüzenet marad. */
.akks-image-thumb.is-broken img { display: none; }
.akks-image-thumb.is-broken::after {
  content: "nincs előnézet";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2);
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.akks-image-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.akks-image-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.akks-image-facts { font-size: 0.75rem; margin: 0; overflow-wrap: anywhere; }
.akks-image-error { margin: 0; font-size: 0.78rem; color: var(--c-red-700); overflow-wrap: anywhere; }
.akks-image-move { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* A ZÁROLÁS kimondása a kép-panelen (V-2). A képeknél ez a felhasználó fő kérdése („ha frissül a
   termék, megmarad-e a képem?"), ezért nem elég a mezőtáblázat „Eredet" oszlopában látszania. */
.akks-image-lock {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--c-green-600);
  border-radius: var(--radius-sm);
  background: var(--c-green-tint);
  color: var(--c-green-700);
  font-size: 0.85rem;
}

/* --- Termékek · kijelölés-sáv „Továbbiak ▾" menüje (G-1…G-3) --------------------------------
   A sáv korábban KILENC egyenrangú gombot rakott ki. Mostantól egy elsődleges gomb marad kint,
   a többi ide kerül, szakasz-fejlécekkel — a törlés pedig a legalsó, elválasztó vonallal leválasztott
   piros tételbe. Fejléc-szöveg („Veszélyes") nincs fölötte: a piros szín + a vonal + a művelet neve
   maga („Termékek törlése…") ugyanazt mondja el, egy sorral kevesebből.

   A menü NEM natív `<details>`: az ebben az SPA-ban nem nyílik/csukódik megbízhatóan (a DataGrid
   újrarajzolja a sávot, és a natív `open` attribútum nem éli túl). A nyitást a saját `is-open`
   osztály adja, a kapcsolást a sáv delegált kezelője.

   A lista `position: absolute`, hogy a sáv magassága ne ugorjon nyitáskor; a `bottom: 100%` pedig
   azért kell, mert a kijelölés-sáv a rács ALJÁN ragad — lefelé nyitva a képernyőn kívülre esne.

   A DataGrid viszont a kijelölés-sávot KÉTSZER rendereli (`_renderActionBars`): a rács tetején is,
   közvetlenül az eszköztár alatt. Ott a felfelé nyíló lista kilóg a kártya tetején, a kártyát pedig
   `.ff-panel { overflow: hidden }` levágja — a felső sávból emiatt csak a lista alja (a törlés)
   látszott. A FELSŐ példány ezért lefelé nyílik; ott a táblázat fölé úszik be, a kártyán belül. */
.akks-bulkmenu { position: relative; display: inline-block; }

.akks-bulkmenu-list {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 40;
  min-width: 15rem;
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px var(--c-shadow);
}
.akks-bulkmenu.is-open .akks-bulkmenu-list { display: block; }

/* A rács TETEJÉN álló kijelölés-sáv menüje lefelé nyílik (l. a fenti indoklást). */
[data-dg-bar-top] .akks-bulkmenu-list {
  top: 100%;
  bottom: auto;
  margin-top: var(--space-4);
  margin-bottom: 0;
}

/* …és amíg NYITVA van, a kártya ne vágja le. Az irány önmagában nem elég: rövid listán (pl. egy
   szűkítő szűrő után) a lefelé nyíló menü a kártya ALJÁN lógna ki, tehát ugyanúgy elveszne. Az
   `overflow: hidden` csak a nyitás idejére és csak azon a kártyán oldódik fel, amelyikben a menü
   áll — a többi rács (minden más app) változatlan. A táblázat saját görgetését a `.ff-scroll`
   végzi, azt ez nem érinti. */
.ff-panel:has(.akks-bulkmenu.is-open) { overflow: visible; }

.akks-bulkmenu-list button {
  display: block;
  width: 100%;
  padding: var(--space-5) var(--space-6);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.akks-bulkmenu-list button:hover { background: var(--color-surface-subtle); }
/* A törlés elkülönítése fejléc nélkül: saját vonal fölötte, hogy a szomszéd gomb elvétéséből
   soha ne történhessen meg. */
.akks-bulkmenu-list button.is-danger {
  margin-top: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  color: var(--color-danger);
}

.akks-bulkmenu-head {
  display: block;
  padding: var(--space-5) var(--space-6) var(--space-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

/* A törlés-ablak kiemelt sora: „ez a termék a webshopban MEGMARAD" (T-4). Nem lábjegyzet —
   a félreértés ára itt visszavonhatatlan. */
.akks-warn {
  margin: 0;
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--c-amber-600);
  border-radius: var(--radius-sm);
  background: var(--c-amber-tint);
  color: var(--c-amber-700);
}

/* --- Dokumentum-panel (P4) — gyári PDF adatlapok ---------------------------------------------
   A kép-panel párja, ugyanazzal a kártya-ritmussal és ugyanazokkal az állapot-osztályokkal
   (`is-ok`/`is-error`/`is-warning`/`is-muted`), hogy a két szakasz egy nyelvet beszéljen.

   Két szándékos eltérés:
     · nincs miniatűr, mert egy PDF-ből nem tudunk előnézetet készíteni szerver-oldali
       renderelés nélkül — a helyén egy szöveges „PDF" jelölés áll. SZÖVEG, nem ikon: egy
       CDN-ből jövő ikon-glyph hibás névnél NÉMÁN üres helyet adna;
     · a kártya nem húzható (`cursor: grab` nélkül), mert a dokumentumoknál nincs „fő kép"
       megfelelője — a sorrend csak megjelenítési, és a ‹ › gombokkal állítható.

   A `.akks-doc-actions .ps-btn` szűkítés a művelet-sor egységes középre-igazítását tartja: a
   „Megnyitás"/„Letöltés" és a ‹ › gombok azonos magasságban álljanak. (Ez a két művelet eredetileg
   LINK volt, de a platform Bearer-fejléccel hitelesít, amit egy `<a>` navigáció nem visz magával —
   azóta gomb, ami fetch-csel kéri le a fájlt; l. `openDocument`.) A közös `.ps-btn` szabályhoz nem
   nyúlunk: minden app használja. */
.akks-docgrid {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--space-4);
}

.akks-doc {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* A státusz a kártya bal élén is látszik — a hibás adatlap egy pillantással felismerhető. */
.akks-doc.is-ok { border-left-color: var(--c-green-500); }
.akks-doc.is-error { border-left-color: var(--c-red-500); }
.akks-doc.is-warning { border-left-color: var(--c-amber-400); }
.akks-doc.is-muted { border-left-color: var(--color-border); }
/* `is-skipped` = nincs letöltött fájl, tehát nincs mit megnyitni (nem hiba önmagában). */
.akks-doc.is-skipped { background: var(--color-surface-subtle); }

.akks-doc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.akks-doc-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.akks-doc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.akks-doc-facts { font-size: 0.75rem; margin: 0; overflow-wrap: anywhere; }
.akks-doc-error { margin: 0; font-size: 0.78rem; color: var(--c-red-700); overflow-wrap: anywhere; }
.akks-doc-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.akks-doc-actions .ps-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* --- Beállítások › Termékmezők (U1 · termékprofil) -------------------------------------------
   A paraméter-katalógus szerkesztője. Ugyanaz a táblázat-ritmus, mint a mapping-táblázaté
   (`akks-map-table`), két saját oszloppal: a bal szélen a sorrend-nyilak, a jobb szélen az
   archiválás/törlés. Mindkettő KESKENY és jobbra zárt, hogy a szerkeszthető két mező (név,
   mértékegység) kapja a szélességet — azon van a felhasználó dolga. */
.akks-param-table .akks-param-order { width: 5.5rem; white-space: nowrap; }
.akks-param-table .akks-param-order .ps-btn { padding-inline: var(--space-3); }
.akks-param-table .akks-param-actions,
.akks-card .akks-param-actions { width: 9rem; text-align: right; }
.akks-param-table td { vertical-align: middle; }
.akks-param-table .akks-input { width: 100%; }

/* --- M4 · Adatvizsgálat (F6 · Átállás) -------------------------------------------------------
   Nyolc egyforma szerkezetű blokk egymás alatt: állapot-jelvény + cím, a kérdés, a válasz egy
   mondatban, a magyarázat, és — csak ha van találat — a megoszlás és a minta-tábla. A bal
   oldali színes sáv adja a végigfuttatható ritmust: zöld, ha rendben, borostyán, ha megnézendő. */
.akks-audit-finding {
  margin-top: var(--space-8);
  padding: var(--space-6) 0 var(--space-6) var(--space-8);
  border-left: 3px solid var(--color-border);
}

.akks-audit-finding.is-ok { border-left-color: var(--c-green-500); }
.akks-audit-finding.is-warning { border-left-color: var(--c-amber-400); }
.akks-audit-finding.is-error { border-left-color: var(--c-red-500); }

.akks-audit-finding h4 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-strong);
}

.akks-audit-question { margin: var(--space-2) 0 0; font-size: 0.85rem; color: var(--color-text-muted); }
.akks-audit-summary { margin: var(--space-4) 0 0; font-size: 0.9rem; line-height: var(--leading-normal); }
.akks-audit-summary.is-ok { color: var(--green-soft-text); }
.akks-audit-summary.is-warning { color: var(--c-amber-700); }
.akks-audit-summary.is-error { color: var(--c-red-700); }

/* A nyitott spec-kérdés száma: ez köti a riport sorát a specifikációhoz, ezért látszania kell. */
.akks-audit-ref {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-subtle);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* Megoszlás (hibaokok, forrásonkénti darabszám, ÁFA-arányok): címke balra, szám jobbra. */
.akks-audit-groups {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 42rem;
}

.akks-audit-groups li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  padding: 2px var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  font-size: 0.82rem;
}

/* A minta-tábla oszlopszáma ellenőrzésenként más (az árnál hét) — sosem törheti szét a lapot. */
.akks-audit-table { margin-top: var(--space-6); overflow-x: auto; }
.akks-audit-table .ff-table { font-size: 0.82rem; }
.akks-audit-table + .akks-muted, .akks-audit-table .akks-muted { margin-top: var(--space-4); }

/* --- Új termékforrás: fájlbehúzás · felismerés · finomhangolás ------------------------------
   A forrásfelvétel belépője egy nagy behúzó felület, nem egy üres űrlap: a formátumot, az
   oszlopokat, a nevet és a beszállítót a feltöltött fájlból ismerjük fel. A felismert értékek egy
   megerősítő panelen látszanak, a ritkán állítandó technikai mezők pedig összecsukva. */

.akks-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-12);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.akks-drop:hover, .akks-drop:focus-visible, .akks-drop.is-over {
  border-color: var(--navy);
  background: var(--color-surface);
}

/* A behúzás visszajelzése akkor is látszódjon, ha a felhasználó a kártya közepén tartja a fájlt. */
.akks-drop.is-over { outline: 2px solid var(--c-focus-ring); outline-offset: 2px; }

.akks-drop-icon { font-size: 1.6rem; line-height: 1; color: var(--color-text-muted); }
.akks-drop-title { font-weight: var(--weight-medium); color: var(--color-text-strong); }
.akks-drop-note { font-size: 0.8rem; color: var(--color-text-muted); }

/* A tényleges fájlválasztó rejtett: a KATTINTHATÓ felület maga a doboz (a natív gomb kicsi és
   nem illik a képernyőhöz), de a mező a DOM-ban marad, hogy a `click()` és a billentyűzetes
   elérés is működjön. */
.akks-drop-input { display: none; }

.akks-detect-grid { display: flex; flex-direction: column; gap: var(--space-5); }

.akks-detect-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--space-2) var(--space-8);
  align-items: baseline;
}

.akks-detect-label { color: var(--color-text-muted); font-size: 0.85rem; }
.akks-detect-value { color: var(--color-text-strong); font-size: 0.9rem; }
.akks-detect-value.is-ok { color: var(--green-soft-text); }
.akks-detect-value.is-warning { color: var(--c-amber-700); }
.akks-detect-row .akks-help { grid-column: 2; margin-top: 0; }

@media (max-width: 720px) {
  .akks-detect-row { grid-template-columns: minmax(0, 1fr); }
  .akks-detect-row .akks-help { grid-column: 1; }
}

.akks-disclose { align-self: flex-start; }

/* Összecsukható blokk. Szándékosan NEM natív <details>: az SPA újrarajzolásakor a natív elem
   nyitottsága elveszne, ezért az állapot a JS-ben él, és ez az osztály hordozza. A `display:none`
   azért kell a `max-height` helyett, hogy az összecsukott mezők a TAB-sorrendből is kiessenek. */
.akks-collapse { display: none; }
.akks-collapse.is-open { display: grid; }

/* --- Duplikátumok (D3) — PÁROS összehasonlító -------------------------------------------------
   A képernyő párokban gondolkodik, nem sorokban: egy kártya = egy pár, két oszlopban a két
   termék. A tábla itt rossz forma lenne — a döntéshez a KÉT termék egymás mellett kell, és az
   ÁR-nak kell a legnagyobb súlyt kapnia (az ügyfél szerint az a fő szempont). */

.akks-dup-list { display: grid; gap: var(--space-6); }

.akks-dup-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-5);
}
.akks-dup-card.is-revisit { border-color: var(--c-amber-400, var(--c-amber-700)); }

.akks-dup-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.akks-dup-score {
  font-weight: var(--weight-semibold);
  background: var(--navy);
  color: var(--on-navy);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-5);
  font-size: var(--text-xs);
}
.akks-dup-reasons { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.akks-dup-reason {
  font-size: var(--text-xs);
  background: var(--color-surface-subtle-2);
  color: var(--color-text-subtle);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
}

/* Két egyenrangú oszlop. Egyenrangú SZÁNDÉKOSAN: a rendszer nem sugallhatja, melyiket tartsd meg
   — az egyetlen kiemelés az OLCSÓBB ár, mert azt maga az ügyfél kérte döntési szempontnak. */
.akks-dup-sides { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 860px) {
  .akks-dup-sides { grid-template-columns: minmax(0, 1fr); }
}

.akks-dup-side {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.akks-dup-side.is-cheaper { border-color: var(--green); }

.akks-dup-title { display: flex; gap: var(--space-4); align-items: flex-start; }
.akks-dup-thumb {
  width: 56px; height: 56px; flex: none;
  object-fit: contain;
  background: var(--color-surface-subtle-2);
  border-radius: var(--radius-sm);
}
.akks-dup-name { font-weight: var(--weight-medium); color: var(--color-text-strong); }

.akks-dup-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); }
.akks-dup-facts dt { color: var(--color-text-muted); }
.akks-dup-facts dd { margin: 0; color: var(--color-text-strong); }
/* Az AZONOS érték halványul, az ELTÉRŐ marad erős — a szem így a döntési pontra esik. */
.akks-dup-facts dd.is-same { color: var(--color-text-muted); }

.akks-dup-price { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.akks-dup-price.is-cheaper { color: var(--green-soft-text); }
.akks-dup-gap { font-size: var(--text-xs); color: var(--color-text-muted); }

.akks-dup-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.akks-dup-filters { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: flex-end; }
.akks-dup-filters label { display: grid; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
/* A jelölőnégyzetes címke SORBAN áll a szövegével — a `grid` alapszabály alatta törné, és a
   négyzet a felirata FÖLÉ kerülne (mérve: 2026-09-03). A `max-width` a hosszú magyarázó
   szövegeket tartja olvasható sorhosszon. */
.akks-dup-filters label.is-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  max-width: 40rem;
}
.akks-dup-counts { display: flex; gap: var(--space-5); flex-wrap: wrap; }

/* ============================================================================================
   === ÁRFIGYELÉS — konkurens árak (`unas.price_watch`) ===
   Kizárólag `pw-`/`cp-` prefixű osztályok; a tábla maga a megosztott DataGrid (FF-TABLE elemnevek),
   itt csak a fejléc-sáv, az állapot/összegzés és a cella-jelölések élnek.
   Forrás: specs/unas/SPEC-konkurens-arfigyeles.md (§6, §13)
   ============================================================================================ */

.pw {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pw-muted {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

/* Figyelmeztető/hibasáv: hiányzó konfiguráció vagy hibára futott lekérdezés. */

.pw-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.15rem var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

.pw-badge.is-ok { background: var(--c-green-tint); color: var(--c-green-700); }
.pw-badge.is-running { background: var(--c-green-tint); color: var(--c-green-700); }
.pw-badge.is-muted,
.pw-badge.is-cancelled { background: var(--color-surface-alt); color: var(--color-text-muted); }
/* „Ellenőrizendő" párosítás: nézd meg, és erősítsd meg vagy vesd el. */
.pw-badge.is-warn { background: var(--c-amber-tint); color: var(--color-warning); }
.pw-badge.is-error { background: var(--color-danger-soft); color: var(--color-danger-hover); }

/* A funkció lényege egyetlen cellában: drágábbak vagyunk-e a piacnál (piros) vagy olcsóbbak (zöld). */
.pw-gap { font-weight: 600; }
.pw-gap.is-expensive { color: var(--color-danger); }
.pw-gap.is-cheap { color: var(--c-green-700); }
/* Az eltérés forintban, a % mellett (SPEC-arfigyeles-finomhangolas §4). */
.pw-gap-huf { font-weight: 400; color: var(--color-text-muted); }
/* Nem megerősített párosítás (§1.3 A3): a szám halvány és kérdőjeles — nem tény, amíg nem erősíted meg. */
.pw-unsure { color: var(--color-text-muted); font-weight: 400; }
.pw-unsure::after { content: " ?"; font-weight: 600; }
/* A „Mi árunk" második sora: akciós ár, az eredeti (normál) árral. */
.pw-sub { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }

/* A Google-nél látott saját ár eltér a webshopétól — elavult feed. */
.pw-mismatch { color: var(--color-danger); }
.pw-mismatch .ti { font-size: var(--text-sm); }

/* Árfigyelés: a „Miért nincs adat?" ok-csoportok, a párosítás-magyarázat és a lenyitott sor ajánlat-táblája. */

.cp-offers { padding: var(--space-2) 0; }
.cp-offers-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.cp-offers-table th,
.cp-offers-table td {
  padding: var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.cp-offers-table th { color: var(--color-text-muted); font-weight: 600; }
.cp-offers-table td.ff-num { text-align: right; white-space: nowrap; }
.cp-offers-table tr.is-own td { background: var(--c-green-tint); }
.cp-offers-table tr.is-suspect td { color: var(--color-text-muted); }
.cp-offers-table tr.is-suspect td a { color: inherit; }

/* Konkurensek illeszkedése (SPEC-arfigyeles-ajanlat-illeszkedes §3): pirostól zöldig tartó sáv, a jelölő
   az arány helyén (`--cp-fit`, 0–100%, a JS adja át — adat, nem formázás). */
.cp-fitbar {
  position: relative;
  display: block;
  width: 100%;
  max-width: 120px;
  height: 8px;
  margin: 4px 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-red-500) 0%, var(--c-amber-400) 50%, var(--c-green-600) 100%);
  cursor: help;
}
.cp-fitbar__marker {
  position: absolute;
  top: 50%;
  left: var(--cp-fit, 0%);
  width: 14px;
  height: 14px;
  border: 3px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-text);
  box-shadow: 0 0 0 1px var(--line-strong);
  transform: translate(-50%, -50%);
}

/* Futó kutatás (§10): mozgó csík + eltelt idő + a két lépés állapota. */

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

/* Ajánlatonkénti sáv a lenyitott sorban. */
.cp-fit-band {
  display: inline-block;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: help;
}
.cp-fit-band.is-sure { background: var(--c-green-tint); color: var(--c-green-700); }
.cp-fit-band.is-likely { background: var(--c-amber-tint); color: var(--c-amber-700); }
.cp-fit-band.is-suspect { background: var(--c-red-tint); color: var(--c-red-700); }
/* A hover-buborék tartalma (a keret a közös `.cell-tooltip`). */
.cp-tip { max-width: 330px; }
.cp-tip p { margin: var(--space-1) 0 0; }
.cp-tip ul { margin: var(--space-1) 0 0; padding-left: 1.1rem; }

/* ===== ÁRFIGYELÉS · VÉGE ===================================================================== */

/* =============================================================================================
   ===== UNAS SÚGÓ (HELP) · KEZDET ===========================================================
   Az UNAS app súgó-rendszere: kontextusos modál, kézikönyv-nézet, publikus /sugo/unas oldal.
   Forrás: specs/unas/SPEC-unas-sugo.md §6.3 + specs/unas/SPEC-unas-sugo-latvanyterv.html.

   FONTOS — a szekció MINDEN szelektora a `.unas-help` konténerre van szűkítve. A styles.css-ben
   már él egy korábbi HELP szekció (`app/static/help/*.html` ügyfél-oldali oldalak, fentebb),
   ami szintén `help-` prefixű osztályokat használ, és a `.help-contents` ott teljes szélességű
   oldalsávot jelent. A szűkítés (a `.pricing-v2` precedens szerint) garantálja, hogy a két
   készlet ne hasson egymásra — nulla globálisan szivárgó szelektor.

   Nyers hex/px csak ott, ahol nincs rá token (a látványterv finom-értékei); minden szín a
   design-token rétegből jön.
   ============================================================================================= */

/* --- Súgó gomb a tartalom-fejlécben (a látványterv `.qbtn`-je) --- */
.help-trigger {
  flex: 0 0 auto;
  /* A fejléc-cím egyes nézetekben kinő (pl. a kezdőlap `.cpt-row`-ja 100% széles) — a
     `margin-left: auto` garantálja, hogy a gomb akkor is a jobb szélen maradjon. */
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill);
  background: var(--green-soft-bg);
  color: var(--green-soft-text);
  padding: var(--space-3) var(--space-7);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.help-trigger:hover { background: var(--color-primary); color: var(--color-on-primary); }
.help-trigger:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* --- Modál (a félbehagyott munka megőrzése miatt modál, nem tartalom-régió — spec §6.1) --- */
.help-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px var(--space-8);
  z-index: 1100;
  overflow-y: auto;
}
.help-modal {
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 860px;
  overflow: hidden;
}
.help-modal-close {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--text-2xl);
  line-height: 1;
  padding: var(--space-2);
  cursor: pointer;
}
.help-modal-close:hover { color: var(--color-text-strong); }
.help-modal .unas-help { position: relative; }

/* =============================================================================================
   A SÚGÓ-DOKUMENTUM — közös a modálban, a kézikönyv-fejezetben és a publikus oldalon
   ============================================================================================= */

.unas-help { color: var(--color-text); font-size: var(--text-md); line-height: 1.62; }
.unas-help .help-doc { padding: var(--space-14) 34px var(--space-16); max-width: 860px; }

.unas-help .help-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}
.unas-help .help-eyebrow .sep { color: var(--color-border-strong); }

.unas-help .help-doc > h1 {
  margin: var(--space-5) 0 0;
  font-size: 32px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.025em;
  line-height: 1.22;
  color: var(--color-text-strong);
}

.unas-help .help-meta {
  margin-top: var(--space-6);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-9);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.unas-help .help-meta b { font-weight: var(--weight-medium); color: var(--color-text-subtle); }

/* Vázlat-jelölés: csak agency_admin láthat vázlatot (spec §5.3). */
.unas-help .help-draft-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--c-amber-tint);
  color: var(--c-amber-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.unas-help .help-lead {
  margin: var(--space-12) 0 0;
  font-size: var(--text-xl);
  line-height: 1.62;
  color: var(--color-text-subtle);
  max-width: 68ch;
}
.unas-help .help-lead + .help-lead { margin-top: var(--space-6); }

.unas-help .help-section { margin-top: 34px; max-width: 68ch; }
.unas-help .help-section--benefits { max-width: none; }
.unas-help .help-section > h2 {
  margin: 0 0 var(--space-8);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}
.unas-help .help-section p { margin: 0; }
.unas-help .help-section p + p { margin-top: var(--space-6); }

/* --- Üzleti előnyök — kiemelt, inverz (navy) panel a jóváhagyott látványterv szerint.
   A dokumentum egyetlen hangsúlyos eleme: a többi szekció világos és visszafogott, ez a
   sáv emeli ki, mit nyer a felhasználó a modullal. A tételeket hajszálvonal választja el,
   tételenként tömör zöld pipa-négyzettel. --- */
.unas-help .help-gain {
  background: var(--navy);
  border: 1px solid var(--navy-raise);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: var(--space-14) var(--space-14);
}
.unas-help .help-gain > h2 {
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: var(--weight-semibold);
  color: var(--green);
}
.unas-help .help-gain-sub {
  margin: 0 0 var(--space-10);
  font-size: var(--text-base);
  color: var(--on-navy-faint);
}
.unas-help .help-gain-list { list-style: none; margin: 0; padding: 0; }
.unas-help .help-gain-list li {
  display: flex;
  gap: var(--space-7);
  align-items: flex-start;
  padding: var(--space-8) 0;
  border-top: 1px solid var(--navy-line);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--on-navy-muted);
}
.unas-help .help-gain-list li:first-child { border-top: 0; padding-top: 0; }
.unas-help .help-gain-list li:last-child { padding-bottom: 0; }
.unas-help .help-gain-check {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.unas-help .help-gain-check .ti { font-size: var(--text-sm); }
.unas-help .help-gain-list b {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.005em;
  color: var(--on-navy);
}
/* A magyarázó mondat — a pipa-négyzet IS a tételen belül van, ezért `:not()`-tal zárjuk ki,
   különben ez a szabály (specifikusabb) felülírná az ikon fehér színét. */
.unas-help .help-gain-list span:not(.help-gain-check) {
  color: var(--on-navy-muted);
  font-size: var(--text-md);
}

/* --- Funkciók felsorolása: csíkozott lista --- */
.unas-help .help-fnlist {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.unas-help .help-fnlist li {
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-md);
}
.unas-help .help-fnlist li:last-child { border-bottom: 0; }
.unas-help .help-fnlist li:nth-child(even) { background: var(--color-surface-subtle-2); }
.unas-help .help-fnlist b { font-weight: var(--weight-semibold); color: var(--color-text-strong); }

/* --- Használata: számozott lépéssor --- */
.unas-help .help-howto {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: help-step;
  display: grid;
  gap: var(--space-8);
}
.unas-help .help-howto li {
  counter-increment: help-step;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--space-7);
  align-items: start;
}
.unas-help .help-howto li::before {
  content: counter(help-step);
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: var(--on-navy);
  display: grid;
  place-items: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.unas-help .help-howto b {
  display: block;
  margin-bottom: var(--space-1);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}
.unas-help .help-howto span { color: var(--color-text-subtle); font-size: var(--text-md); }

/* --- Kiemelt tudnivaló (`> ` sor) --- */
.unas-help .help-tip {
  background: var(--color-surface-subtle-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-7) var(--space-8);
  font-size: var(--text-md);
  color: var(--color-text-subtle);
}
.unas-help .help-tip + .help-tip { margin-top: var(--space-5); }
.unas-help .help-tip b { color: var(--color-text-strong); font-weight: var(--weight-semibold); }

/* --- Képernyőkép (a hely elkészül; kép később, fejlesztés nélkül tehető be — spec §4.4) --- */
.unas-help .help-figure { margin: var(--space-8) 0 0; }
.unas-help .help-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

/* --- Dokumentum-lábléc (modálban: „Teljes kézikönyv megnyitása") --- */
.unas-help .help-doc-foot {
  margin-top: var(--space-16);
  padding-top: var(--space-9);
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-7);
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 68ch;
}
.unas-help .help-pill {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  text-decoration: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.unas-help .help-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* =============================================================================================
   KÉZIKÖNYV-NÉZET — bal oldali tartalomjegyzék + egymás utáni fejezetek (spec §6.2)
   ============================================================================================= */

.unas-help .help-manual { display: grid; grid-template-columns: 262px 1fr; }

.unas-help .help-contents {
  border-right: 1px solid var(--color-border);
  background: var(--color-surface-subtle-2);
  padding: var(--space-12) var(--space-8);
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow: auto;
}
.unas-help .help-contents-label {
  margin-bottom: var(--space-6);
  padding-left: var(--space-6);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}
.unas-help .help-contents a {
  display: block;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  font-size: var(--text-base);
  color: var(--color-text-subtle);
  text-decoration: none;
}
.unas-help .help-contents a:hover { background: var(--color-surface-raised); color: var(--color-text-strong); }
.unas-help .help-contents a.is-active {
  background: var(--color-surface);
  border-left-color: var(--color-primary);
  color: var(--navy);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow);
}

.unas-help .help-manual-body { padding: 34px 40px 50px; max-width: 820px; }
.unas-help .help-chapter { scroll-margin-top: var(--space-10); }
.unas-help .help-chapter + .help-chapter {
  margin-top: 46px;
  padding-top: 40px;
  border-top: 1px solid var(--color-border);
}
.unas-help .help-chapter > h2 {
  margin: 0;
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.022em;
  color: var(--color-text-strong);
}
.unas-help .help-chapter .help-kicker {
  margin-bottom: var(--space-3);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

/* Üres állapot: még egyetlen leírás sincs `kesz` állapotban. */
.unas-help .help-empty {
  padding: var(--space-16);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

/* =============================================================================================
   LEFEDETTSÉG-LISTA — csak agency_admin, a kézikönyv-nézet alján (spec §6.2)
   ============================================================================================= */

.unas-help .help-coverage { margin: 46px 40px 50px; }
.unas-help .help-coverage > h3 {
  margin: 0 0 var(--space-8);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}
.unas-help .help-coverage-scroll { overflow-x: auto; }
.unas-help .help-coverage table { width: 100%; border-collapse: collapse; font-size: var(--text-base); min-width: 560px; }
.unas-help .help-coverage th {
  text-align: left;
  padding: var(--space-6) var(--space-8);
  background: var(--navy);
  color: var(--on-navy-muted);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: var(--weight-semibold);
}
.unas-help .help-coverage th:first-child { border-top-left-radius: var(--radius-sm); }
.unas-help .help-coverage th:last-child { border-top-right-radius: var(--radius-sm); }
.unas-help .help-coverage td {
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-subtle);
}
.unas-help .help-coverage tr:nth-child(even) td { background: var(--color-surface-subtle-2); }
.unas-help .help-coverage td:first-child { color: var(--color-text-strong); font-weight: var(--weight-medium); }
.unas-help .help-coverage code { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }

.unas-help .help-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.unas-help .help-badge::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }
.unas-help .help-badge--kesz { background: var(--green-soft-bg); color: var(--green-soft-text); }
.unas-help .help-badge--vazlat { background: var(--c-amber-tint); color: var(--c-amber-700); }
.unas-help .help-badge--nincs { background: var(--color-surface-raised); color: var(--color-text-muted); }

/* =============================================================================================
   PUBLIKUS OLDAL (/sugo/unas) — belépés nélkül, szerver-oldalon renderelve (spec §5.3)
   ============================================================================================= */

.unas-help--public { background: var(--color-surface); min-height: 100vh; }
.unas-help .help-public-head { background: var(--navy); color: var(--on-navy); padding: var(--space-14) 40px; }
.unas-help .help-public-brand { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.unas-help .help-public-brand span { color: var(--green); }
.unas-help .help-public-head h1 {
  margin: var(--space-7) 0 0;
  font-size: 27px;
  font-weight: var(--weight-semibold);
  color: var(--on-navy);
}
.unas-help .help-public-head p { margin: var(--space-4) 0 0; color: var(--on-navy-muted); font-size: var(--text-md); max-width: 60ch; }

/* =============================================================================================
   RESPONZÍV — a rács egy oszlopra vált (a látványterv 940px-es töréspontja)
   ============================================================================================= */

@media (max-width: 940px) {
  .unas-help .help-gain { padding: var(--space-10); }
  .unas-help .help-manual { grid-template-columns: 1fr; }
  .unas-help .help-contents {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
  .unas-help .help-doc { padding: var(--space-12) var(--space-10) var(--space-14); }
  .unas-help .help-manual-body { padding: var(--space-12) var(--space-10) var(--space-16); }
  .unas-help .help-coverage { margin: var(--space-12) var(--space-10); }
  .unas-help .help-public-head { padding: var(--space-12) var(--space-10); }
}

/* ===== UNAS SÚGÓ (HELP) · VÉGE ============================================================== */

/* =============================================================================================
   AI KVÓTA REPORT MODÁL (SPEC-unas-ai-kvota-report.md) — a modál a termék-modál vázát és a
   kanonikus FF-TABLE elemneveket használja; egyetlen saját szabály a lefedettség-lábjegyzet.
   ============================================================================================= */

.aiq-foot { margin: var(--space-6) 0 0; color: var(--muted); font-size: var(--text-sm); }

/* ===== AI KVÓTA REPORT MODÁL · VÉGE ========================================================= */

/* =============================================================================================
   SUPPLIER OFFERS — Beszállítói ajánlatfeldolgozó
   (specs/pelenka/IMPLEMENTATION-PLAN-supplier-offers.md §6.7)

   A modul a közös vázra épül: `.admin-toolbar` fejléc + `.ff-table` táblák + a platform
   gomb-/űrlap-osztályai. Csak az itt hiányzó, modul-specifikus elemek kapnak saját szabályt.
   ============================================================================================= */

.supplier-offers { display: flex; flex-direction: column; gap: var(--space-8); }

.supplier-offers-hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* A menüből kivett képernyők (`supplier.profiles` · `supplier.aliases` · `supplier.templates`)
   fejlécjegyzete. A `.supplier-offers-hint` MÓDOSÍTÓJA, nem új elemtípus: aki ide URL-ből
   érkezett, az első sorból tudja meg, hogy nem a napi úton jár. Halk, de nem néma — a puszta
   `--muted` szöveg beleolvadna a képernyő többi súgójába, és pont az elhatárolás veszne el. */
.supplier-offers-hidden-note {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-border);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-sm);
}

/* Az M2–M6-ban készülő nézetek placeholdere: nem hibaüzenet, hanem őszinte állapotjelzés. */
.supplier-offers-planned {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-12);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.supplier-offers-planned p { margin: 0; }

.supplier-offers-planned-badge {
  padding: var(--space-2) var(--space-5);
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* --- Űrlapok és beviteli sorok ------------------------------------------------------------- */

.supplier-offers-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-6);
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.supplier-offers-form.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: end;
}

/* A grid-űrlap gombja ne nyúljon a teljes cellaszélességre. */
.supplier-offers-form.is-grid > button { justify-self: start; }

.supplier-offers-form label {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 180px;
  flex: 1 1 200px;
  color: var(--color-text-strong);
  font-size: var(--text-sm);
}

.supplier-offers-form label.supplier-offers-check {
  flex-direction: row;
  align-items: center;
  flex: 0 0 auto;
}

.supplier-offers-check { display: inline-flex; align-items: center; gap: var(--space-3); }

.supplier-offers-inline { width: 100%; }
.supplier-offers-inline.is-narrow { max-width: 90px; }

.supplier-offers-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* A jóváhagyás alatti MÁSODLAGOS kiutak („Később döntök”, „Feldolgozás elvetése”). Halkabb sáv,
   elválasztó vonallal: legyen elérhető, de ne versenyezzen a jóváhagyás gombjával. */
.supplier-offers-actions-secondary {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

/* --- Lenyíló panelek -----------------------------------------------------------------------
   A natív <details> viselkedés ebben az SPA-ban nem megbízható (l. supplier_offers.js delegált
   toggle), ezért a nyitottságot itt expliciten az [open] attribútum vezérli. */

.supplier-offers-panel {
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.supplier-offers-panel > summary,
.supplier-offers-diff > summary {
  cursor: pointer;
  list-style: none;
  color: var(--color-text-strong);
  font-weight: 600;
}

.supplier-offers-panel > summary::-webkit-details-marker,
.supplier-offers-diff > summary::-webkit-details-marker { display: none; }

.supplier-offers-panel > summary::before,
.supplier-offers-diff > summary::before {
  content: "▸ ";
  color: var(--color-text-muted);
}

.supplier-offers-panel[open] > summary::before,
.supplier-offers-diff[open] > summary::before { content: "▾ "; }

/* Csak a CSUKOTT panelre rejtünk — így a nyitott panel gyerekei megtartják a saját
   display-üket (a .is-grid űrlap grid marad, a tábla table). */
.supplier-offers-panel:not([open]) > *:not(summary),
.supplier-offers-diff:not([open]) > *:not(summary) { display: none; }

.supplier-offers-panel[open] > *:not(summary) { margin-top: var(--space-6); }

.supplier-offers-diff pre {
  max-height: 320px;
  overflow: auto;
  padding: var(--space-5);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

/* --- Mapping-tábla, állapotok, címkék -------------------------------------------------------- */

.supplier-offers-mapping textarea { width: 100%; font-size: var(--text-xs); }

.supplier-offers-mapping tr.supplier-offers-group th {
  background: var(--color-surface-subtle);
  color: var(--color-text-strong);
  text-align: left;
}

.supplier-offers-mapping tr.is-selected,
.supplier-offers .ff-table tr.is-selected { background: var(--color-primary-soft); }

.supplier-offers-muted { color: var(--muted); font-size: var(--text-xs); }

.supplier-offers-tag {
  display: inline-block;
  margin-left: var(--space-3);
  padding: 0 var(--space-4);
  background: var(--color-primary-soft);
  color: var(--color-primary-hover);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
}

.supplier-offers-tag.is-critical {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.supplier-offers-status {
  display: inline-block;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-surface-inset);
  color: var(--color-text-strong);
  font-size: var(--text-xs);
}

.supplier-offers-status.is-active { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.supplier-offers-status.is-validated { background: var(--color-surface-subtle); }
.supplier-offers-status.is-superseded { color: var(--muted); }

/* --- Validációs észrevételek és visszajelzés ------------------------------------------------- */

.supplier-offers-issues { margin: var(--space-6) 0 0; padding-left: var(--space-10); }
.supplier-offers-issues li { margin-bottom: var(--space-3); font-size: var(--text-sm); }
.supplier-offers-issues li.is-error { color: var(--color-danger); }
.supplier-offers-issues li.is-warning { color: var(--color-warning); }

.supplier-offers-toast {
  margin: 0;
  padding: var(--space-5) var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
  color: var(--color-text-strong);
  font-size: var(--text-sm);
}

.supplier-offers-toast.is-success { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.supplier-offers-toast.is-warning { background: var(--color-surface-inset); color: var(--color-warning); }
.supplier-offers-toast.is-error { background: var(--color-danger-soft); color: var(--color-danger); }

.supplier-offers-error { margin: 0; color: var(--color-danger); }

/* --- Feltöltés: behúzás · felismerés · teendő vs. archívum -----------------------------------
   A képernyő belépője egy nagy, teljes felületén kattintható behúzó zóna (a natív fájlválasztó
   gomb rejtve), nem egy űrlapdoboz. Alatta a FELISMERÉS-kártya mondja meg, mit olvastunk ki a
   fájlból és miből; a beérkezett fájlok listája pedig teendőre és archívumra válik szét, hogy ne
   egyforma súlyú gombok sora fogadja a felhasználót. Minta: az akkushop forrásfelvétele. */

/* Az első használat négy lépése — csak addig látszik, amíg egyetlen fájl sincs. */
.supplier-offers-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: so-step;
}

.supplier-offers-steps > li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  counter-increment: so-step;
}

.supplier-offers-steps > li strong { color: var(--color-text-strong); }
.supplier-offers-steps > li strong::before {
  content: counter(so-step) ". ";
  color: var(--color-primary);
}

/* A behúzó zóna. Az `is-over` az egykori `is-active` szerepét viszi tovább; mivel a felület
   mostantól maga a kattintható gomb, a hover és a fókusz is ugyanezt a visszajelzést kapja. */
.supplier-offers-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-16) var(--space-12);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.supplier-offers-drop:hover,
.supplier-offers-drop:focus-visible,
.supplier-offers-drop.is-over {
  border-color: var(--color-primary);
  background: var(--color-surface);
}

/* A behúzás visszajelzése akkor is látszódjon, ha a fájl a zóna közepén áll meg. */
.supplier-offers-drop.is-over { outline: 2px solid var(--c-focus-ring); outline-offset: 2px; }

.supplier-offers-drop-icon { font-size: 1.8rem; line-height: 1; color: var(--color-primary); }
.supplier-offers-drop-title { font-weight: var(--weight-medium); color: var(--color-text-strong); }
.supplier-offers-drop-note { font-size: var(--text-xs); color: var(--color-text-muted); }

/* A natív fájlválasztó rejtve: a kattintható felület maga a doboz (a natív gomb kicsi, és idegen
   a témától). A mező a DOM-ban marad, hogy a `click()` és a billentyűzetes elérés is működjön. */
.supplier-offers-drop-input { display: none; }

/* Az auto-indítás kapcsolója a zóna ALATT él, nem benne: a ledobási célpont maradjon célpont. */
.supplier-offers-autorun {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  cursor: pointer;
}

.supplier-offers-autorun input[type="checkbox"] { flex: none; margin: 3px 0 0; }
.supplier-offers-autorun > span { display: flex; flex-direction: column; gap: var(--space-2); }

/* Felismerés-kártyák: fájlonként egy, a feltöltés után. */
.supplier-offers-intake { display: flex; flex-direction: column; gap: var(--space-6); }
.supplier-offers-intake:empty { display: none; }

.supplier-offers-intake-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-10);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.supplier-offers-intake-card.is-error { border-left-color: var(--color-danger); }

/* A globális `button:disabled` `cursor: wait`-et ad (folyamatban levő művelethez való). Itt a gomb
   nem várakozik, hanem hiányzik hozzá a beszállító — a kurzor ezt mondja meg. */
.supplier-offers-intake-card .primary-button:disabled { cursor: not-allowed; }

.supplier-offers-detect-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--space-2) var(--space-8);
  align-items: baseline;
}

.supplier-offers-detect-label { color: var(--color-text-muted); font-size: var(--text-xs); }
.supplier-offers-detect-value { color: var(--color-text-strong); font-size: var(--text-sm); }
.supplier-offers-detect-value.is-ok { color: var(--green-soft-text); }
.supplier-offers-detect-value.is-warning { color: var(--c-amber-700); }
.supplier-offers-detect-value.is-error { color: var(--color-danger); }
.supplier-offers-detect-row > .supplier-offers-muted { grid-column: 2; }

@media (max-width: 720px) {
  .supplier-offers-detect-row { grid-template-columns: minmax(0, 1fr); }
  .supplier-offers-detect-row > .supplier-offers-muted { grid-column: 1; }
}

/* A teendő-blokk fejléce (az archívumé a `.supplier-offers-panel` összecsukható summary-ja). */
.supplier-offers-subhead {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  font-size: var(--text-md);
  color: var(--color-text-strong);
}

/* --- Futás: fülek, összegzés, előnézet ------------------------------------------------------ */

.supplier-offers-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.supplier-offers-summary p { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* A modul minden széles táblája ebben ül: kis kijelzőn oldalra görög, nem nyomódik össze, és a
   lap törzse NEM csordul túl vízszintesen. A jobb szélen egy halk árnyék jelzi, hogy van még
   tartalom oldalt — `background-attachment: local` trükk, nem kell hozzá JS. */
.supplier-offers-scroll {
  /* A takaró-gradiens színe a MÖGÖTTES háttér; enélkül fehér sáv villanna a lap alapszínén. */
  --so-scroll-bg: var(--bg);
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--so-scroll-bg) 30%, transparent) left center / 24px 100% no-repeat local,
    linear-gradient(to left, var(--so-scroll-bg) 30%, transparent) right center / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--c-shadow), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--c-shadow), transparent) right center / 12px 100% no-repeat scroll;
}

/* A „Sor eredete" bizonyítéklánc. */
.supplier-offers-prov {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-4) var(--space-8);
  margin: 0;
  font-size: var(--text-sm);
}

.supplier-offers-prov dt { color: var(--color-text-strong); font-weight: 600; }
.supplier-offers-prov dd { margin: 0; }

/* --- Jóváhagyó képernyő: csoportosított mezőlista + állandó élő előnézet -------------------- */

/* Megállító vs. halasztható okok (terv: „Automatizálás as-built"). A `review_blockers` a
   `review_reasons` részhalmaza — egy sávba mosva nem látszana, melyik miatt maradt el az
   ajánlattábla, és melyik kér csak utólagos átnézést. */
.supplier-offers-reasons { margin-top: var(--space-8); }

.supplier-offers-reasons > strong {
  font-size: var(--text-sm);
  color: var(--color-text-strong);
}

.supplier-offers-reasons.is-blocking > strong { color: var(--color-danger); }

/* Számláló-sáv: hány mező kap forrást, hány bizonytalan, hány marad üresen.
   (Külön osztály: a `.supplier-offers-summary` a futás fejlécéé, és oszlopirányú.) */
/* A számláló-sáv (hány mező kap forrást / bizonytalan / marad üresen) a jóváhagyó képernyő
   eszköztárában ül, ezért nem hoz saját margót — a térköz a `.ff-toolbar` dolga. */
.supplier-offers-counts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
}

/* A jóváhagyó képernyő kontextussora: MELYIK feldolgozott adaton állunk. A fülcsík a
   munkalapokat sorolja — fájlnévnek nézett ki —, ezért a futás azonosítója külön sorba került. */
.supplier-offers-review-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

/* Élő előnézet — a feed-kezelő `.feedm-sample` paneljének a párja: mindig látszik, nem egy
   gomb mögött, és a hozzárendelés változására magától frissül. A bal oldali accent-sáv teszi a
   képernyő horgonyává: ez az, amiért az egész képernyő van (UX-kör, 2026-09-08). */
.supplier-offers-preview {
  margin-top: var(--space-10);
  padding: var(--space-5) var(--space-7);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.supplier-offers-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.supplier-offers-preview-actions {
  display: flex;
  gap: var(--space-3);
  margin-left: auto;
}

/* A magasság a kijelzőhöz igazodik, nem egy fix 340 px-hez; a fejléc kapcsolója feloldja. */
.supplier-offers-preview .supplier-offers-scroll {
  --so-scroll-bg: var(--color-surface);      /* a panel háttere, nem a lapé */
  max-height: min(52vh, 460px);
  overflow-y: auto;
}

.supplier-offers-preview.is-expanded .supplier-offers-scroll { max-height: none; }

/* Az előnézet 15+ oszlop széles: a fejléc és az „Excel-sor" horgonyoszlop a helyén marad,
   különben görgetés közben nem látszik, melyik sort/mezőt nézzük.

   [SZABÁLY] A fejléc HÁTTERÉT itt nem írjuk felül. A kanonikus `.ff-table thead th` sötét
   navy sávot ad `--on-navy` (fehér) szöveggel; egy világos háttér-override a szövegszínt
   nem vitte magával, így a fejlécsor fehér lett világosszürkén — olvashatatlanul (2026-09-10).
   Csak a rétegsorrend marad: fejléc 2 < horgony-fejléc 3, hogy vízszintes görgetéskor az
   „Excel-sor" cella a többi fejléc FÖLÉ kerüljön. */
.supplier-offers-preview-table thead th { z-index: 2; }

.supplier-offers-preview-table .is-anchor {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-surface);
}

/* A horgony-fejléc mindkét irányban ragad. A háttér itt KELL: a `.is-anchor` szabály
   (0,2,0) erősebb, mint a kanonikus `.ff-table thead th` (0,1,1), tehát különben a világos
   cella-hátteret örökölné — fehér szöveggel, vagyis megint olvashatatlanul. */
.supplier-offers-preview-table thead th.is-anchor { z-index: 3; background: var(--ff-head-bg); }

/* ── Hiányzó EAN az előnézetben (2026-09-10) ─────────────────────────────────
   A két cikkszám-oszlop az UNAS-ból jön, EAN alapján: ha az EAN nincs meg, két oszlop marad
   üresen a szállított táblában. Az üres cella önmagában néma — ezért kap a SOR halvány piros
   alapot, a következményes cellák (EAN + a három UNAS-oszlop) pedig erősebb jelölést.
   A jel nem csak szín: a bal oldali sáv és a dőlt „nincs UNAS-találat" jelölés színérzékelés
   nélkül is olvasható (WCAG 1.4.1). */
.supplier-offers-preview-table tr.is-unas-missing > td { background: var(--color-danger-soft); }

.supplier-offers-preview-table td.is-unas-missing {
  color: var(--color-danger);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--color-danger);
}

.supplier-offers-preview-table tr.is-unas-missing td.is-unas-missing:empty::after {
  content: "nincs UNAS-találat";
  font-style: italic;
  font-weight: 400;
  opacity: .75;
}

/* Az előnézet fölötti összegző mondat: hány sor EAN-ja hiányzik az UNAS-ból. */
.supplier-offers-unas-note {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-border);
  background: var(--color-surface-subtle);
  font-size: 13px;
  line-height: 1.45;
}
.supplier-offers-unas-note.is-error {
  border-left-color: var(--color-danger);
  background: var(--color-danger-soft);
}
.supplier-offers-unas-note.is-warning { border-left-color: var(--color-warning); }
.supplier-offers-unas-note.is-ok { border-left-color: var(--color-primary); }

/* Mezőtábla: minden sor magától megmondja az eredményt is, ezért a cellák felül igazodnak.
   A `min-width` az, amitől kis kijelzőn oldalra görög a négy oszlop, nem összenyomódik. */
.supplier-offers-fields { min-width: 880px; }
.supplier-offers-fields td { vertical-align: top; }
.supplier-offers-fields select { width: 100%; }

/* Árrés-eloszlás — a szám, amiből egy ránézésre látszik, hogy az olvasat jó-e. Nem chip-sor:
   egy-egy mező (alap/akciós/speciál) egy dobozban tartja össze a mediánt és a szélsőértékeket. */
.supplier-offers-margins {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.supplier-offers-margin {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  font-size: var(--text-xs);
}

.supplier-offers-margin > strong { color: var(--color-text-strong); }

/* A figyelmeztetés-szám a futás fejlécében GOMB, nem szöveg: a magyarázat a Napló fülön van,
   és eddig senki nem talált oda (éles lelet, 2026-09-08). */
.supplier-offers-linkish {
  border: 0;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* „Ebből N oszlop üresen marad a szállított táblában" — az előnézet fejléce alatt. */
.supplier-offers-empty-cols > summary { cursor: pointer; font-size: var(--text-sm); }
.supplier-offers-empty-cols.is-error > summary { color: var(--color-danger); }
.supplier-offers-empty-cols.is-warning > summary { color: var(--color-warning); }

.supplier-offers-empty-cols > ul {
  margin: var(--space-4) 0 0;
  padding-left: var(--space-8);
  columns: 2;
  font-size: var(--text-xs);
  color: var(--muted);
}

/* A „tartalom szerint" felkínált jelölt nem javaslat: szaggatott kerettel el is válik tőle. */
.supplier-offers-alt.is-shape {
  border-style: dashed;
  color: var(--muted);
}

.supplier-offers-alt.is-shape:hover { color: var(--color-primary-hover); }

/* „Bekötve, de nem megy ki a szállított fájlba." */
.supplier-offers-tag.is-muted {
  background: var(--color-surface-inset);
  color: var(--muted);
}

/* A futásrészletező Munkalapok fülén: az alkalmazott mapping `mező ← [betű] fejléc` soronként. */
.supplier-offers-applied {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.supplier-offers-applied li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.supplier-offers-pick { font-size: var(--text-sm); color: var(--color-text-strong); }

/* A motor 2–3 legjobb másik jelöltje egy kattintásra (`matcher._alternatives()`). */
.supplier-offers-alts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.supplier-offers-alt {
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
  color: var(--color-text-strong);
  font-size: var(--text-2xs);
  cursor: pointer;
}

.supplier-offers-alt:hover { background: var(--color-primary-soft); color: var(--color-primary-hover); }

/* Az üresen maradó mezők alapból nem látszanak. Ez NEM natív `details`: sorokat rejtünk, és a
   csoport-fejlécnek is el kell tűnnie, ha az egész csoport üres — a kapcsoló a táblán ül. */
.supplier-offers-fields.is-hiding-empty tr.is-empty,
.supplier-offers-fields.is-hiding-empty tbody.is-all-empty { display: none; }

/* Forrásoszlop-referencia: csukható panel a tábla alatt (a mintaértékek már a sorokban ott vannak). */
/* Forrásoszlopok a jóváhagyó képernyőn: rács, nem lista. 15 oszlop egymás alatt 15 sor magas
   volt, ezért a panel saját görgetést kapott a lap görgetésén BELÜL — a rács ezt megszünteti.
   A már bekötött oszlop halványabb: aki idenyit, azt keresi, mi maradt szabadon. */
.supplier-offers-sources > summary > .supplier-offers-muted {
  margin-left: var(--space-4);
  font-weight: var(--weight-regular);
}

.supplier-offers-sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.supplier-offers-source-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.supplier-offers-source-card.is-used { background: var(--color-surface-subtle); opacity: 0.72; }

.supplier-offers-source-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.supplier-offers-source-head > strong { min-width: 0; overflow-wrap: anywhere; }

.supplier-offers-source-letter {
  flex: 0 0 auto;
  padding: 0 var(--space-3);
  background: var(--navy);
  color: var(--on-navy);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.supplier-offers-source-card > .supplier-offers-muted { overflow-wrap: anywhere; }

/* --- Állapot-színek (futás, munkalap, javaslat, naplószint) --------------------------------- */

.supplier-offers-status.is-done,
.supplier-offers-status.is-parsed,
.supplier-offers-status.is-auto { background: var(--color-primary-soft); color: var(--color-primary-hover); }

.supplier-offers-status.is-running,
.supplier-offers-status.is-waiting_for_mapping,
.supplier-offers-status.is-done_review_pending,
.supplier-offers-status.is-needs_review,
.supplier-offers-status.is-review,
.supplier-offers-status.is-warning { background: var(--color-surface-inset); color: var(--color-warning); }

.supplier-offers-status.is-error { background: var(--color-danger-soft); color: var(--color-danger); }

/* Kézi felülírás a jóváhagyó képernyőn: nem a motor pontszáma, hanem emberi döntés. */
.supplier-offers-status.is-manual {
  background: var(--color-surface-inset);
  color: var(--color-text-strong);
  border: 1px solid var(--color-border);
}

.supplier-offers-status.is-cancelled,
.supplier-offers-status.is-discarded,
.supplier-offers-status.is-skipped,
.supplier-offers-status.is-ignored_empty,
.supplier-offers-status.is-none,
.supplier-offers-status.is-info { color: var(--muted); }

/* Kattintható sor a futás Sorok fülén (a „Sor eredete" panelhez). */
.supplier-offers tbody tr[data-so-row] { cursor: pointer; }
.supplier-offers tbody tr[data-so-row]:hover { background: var(--color-surface-subtle); }

/* --- UNAS-egyeztetés (M5): a felderítés → döntés → keresőtábla lépéssor ---------------------- */

.supplier-offers-panel-group {
  margin-top: var(--space-16);
  padding: var(--space-14);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.supplier-offers-panel-group > h3 {
  margin: 0 0 var(--space-6);
  font-size: var(--text-base);
}

.supplier-offers-panel-group > .ff-table { margin: var(--space-10) 0; }

.supplier-offers-panel-group button { margin-top: var(--space-8); }

/* A forrás-adatforrás bekötése: legördülő + mentés egy sorban. A select kapja a szabad helyet
   (a datasource neve hosszú), a gomb nem törik le fölöslegesen. */
.supplier-offers-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}

.supplier-offers-inline-form select { flex: 1 1 260px; min-width: 0; }
.supplier-offers-inline-form button { margin-top: 0; flex: none; }

/* A számadatok (indexméret, utolsó építés, „sérült” darabszámok) halkabbak a magyarázatnál. */
.supplier-offers-meta {
  margin: var(--space-6) 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Tanult felismerési jelek a beszállító Felismerés fülén. A csík a közös `.ff-badge`-ekből áll;
   itt csak az elrendezés és az „elfelejtés" gomb él — új komponens-családot nem nyitunk
   (PLATFORM-STACK §11: a `.supplier-offers-*` már meglévő család, a `.ff-badge` kanonikus). */
.supplier-offers-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-7);
}
.supplier-offers-forget {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  padding: 0 0 0 var(--space-2);
  cursor: pointer;
  opacity: 0.7;
}
.supplier-offers-forget:hover { opacity: 1; }

/* Beállítás-javaslatok a lefutott futásokból (`engine/advice.py`) a beszállító lapjának tetején.
   A `.supplier-offers-planned` dobozt vettük mintának — ugyanaz a felület-nyelv, de saját név,
   mert itt lista van benne, gombokkal. */
.supplier-offers-advice {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-10) var(--space-12);
  margin-bottom: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
}
.supplier-offers-advice > h3 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}
.supplier-offers-advice-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4) var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.supplier-offers-advice-item > div { flex: 1 1 22rem; min-width: 0; }
.supplier-offers-advice-item p { margin: var(--space-2) 0 0; }
.supplier-offers-advice-evidence {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* Mezőnkénti felülírások (ár-hatókör, tizedesjegyek) a beszállító Számítás fülén. A blokk azt
   mutatja, ami a partnernél MÁS az alapértelmezésnél — a többi mező a legördülőből hívható elő.
   Enélkül a fülön 22 üres beviteli mező állt, és ettől lett olvashatatlan. */
.supplier-offers-overrides {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  margin-top: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.supplier-offers-overrides > header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.supplier-offers-overrides > header > strong { font-size: var(--text-md); }
.supplier-offers-overrides > p { margin: 0; }
.supplier-offers-overrides-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}
.supplier-offers-overrides-row > span { flex: 1 1 14rem; min-width: 0; font-size: var(--text-sm); }
.supplier-offers-overrides-row > input,
.supplier-offers-overrides-row > select { flex: 0 1 16rem; min-width: 8rem; }
.supplier-offers-overrides-add {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  align-self: flex-start;
  font-size: var(--text-sm);
  color: var(--color-text-strong);
}

/* --- Hiányzó EAN-ok: szűrő, összegző csempék, beszállító → dokumentum csoportok --------------
   A képernyő korábban egyetlen lapos táblát adott, amiben a `Fájl`/`Beszállító`/`Munkalap`
   oszlop soronként ismétlődött. A csoportosítás átvette ezt a három oszlopot, ezért itt a
   CSOPORTFEJLÉC-nek kell hordoznia mindent: nevet, darabszámot és azt, hogy a sor kinek a
   teendője. Új osztálynév nincs a táblákra — azok maradnak kanonikus `.ff-table`-ök
   (PLATFORM-STACK §11). */

.supplier-offers-missing-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-6);
}

.supplier-offers-missing-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-md);
}

.supplier-offers-missing-tile > strong {
  font-size: var(--text-3xl);
  line-height: 1.1;
  color: var(--color-text-strong);
  font-variant-numeric: tabular-nums;
}

.supplier-offers-missing-tile > span {
  color: var(--muted);
  font-size: var(--text-xs);
}

/* A színes él a csempe ÜZENETE: melyik szám kinek szól. */
.supplier-offers-missing-tile.is-key { border-left-color: var(--color-primary); }
.supplier-offers-missing-tile.is-unas { border-left-color: var(--color-danger); }
.supplier-offers-missing-tile.is-supplier { border-left-color: var(--color-warning); }

.supplier-offers-missing-filters { align-items: end; }

/* Egy beszállító blokkja: névsor, alatta dokumentumonként egy lenyíló panel. */
.supplier-offers-missing-supplier {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.supplier-offers-missing-supplier > h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-lg);
}

/* A panel-summary több információt hordoz (fájlnév + futás + jelvények), ezért törhető sor.
   A `::before` nyíl flex-elemként is a helyén marad. */
.supplier-offers-missing-file > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
}

.supplier-offers-missing-file > summary > .supplier-offers-muted { font-weight: 400; }

/* Az „Ok" cella: a szöveg mellett a SZÍN mondja meg, kinek a teendője a sor. */
.supplier-offers-missing-reason {
  display: inline-block;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  background: var(--color-surface-inset);
  color: var(--color-text-strong);
}

.supplier-offers-missing-reason.is-unas {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.supplier-offers-missing-reason.is-supplier {
  background: var(--c-amber-tint);
  color: var(--color-warning);
}

/* ===== SUPPLIER OFFERS · VÉGE =============================================================== */

/* =============================================================================================
   PORTFÓLIÓ (app/apps/portfolio) — több-webshopos aggregáló nézetek (SPEC-portfolio-riport.md)
   A tábla a kanonikus FF-TABLE elemneveket használja, az időszak-sáv a riportok `.report-params`
   osztályait (pixelre azonos a UNAS riportokéval). Itt csak a `.pf` konténerre szűkített
   kiegészítések élnek (PLATFORM-STACK §11): cím, lábjegyzet, és a jóváhagyott tábla-formázás
   (oszlopblokkok, kiemelt bevétel-oszlopok, összesítő sor — SPEC-portfolio-riport.md §14.3).
   ============================================================================================= */
.pf { display: flex; flex-direction: column; gap: var(--space-6); }
.pf-title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.pf-note { margin: 0; max-width: 90ch; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-subtle); }
/* „Frissítés most" állapot-szövege az eszköztárban */
.pf-refresh-status { font-size: var(--text-sm); color: var(--color-text-subtle); max-width: 48ch; }
.pf-refresh-status.is-error { color: var(--color-danger); }
/* D18: hiányzó / halott kapcsolat jelvénye a cellában (a kanonikus .ff-badge, gombként) */
.pf .pf-conn { border: 0; cursor: pointer; font-family: inherit; }
.pf-incomplete { display: block; margin-top: 2px; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-warning); }
.pf-total-label { text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--text-xs); color: var(--navy); }

/* --- §14.3 A tábla formázása ---------------------------------------------------------------
   (1) Az oszlop szélességét a TÍPUSA adja, nem a fejléc szövegének hossza — különben egy hosszú
   címke szétfeszíti a hozzá tartozó számoszlopot. A blokk-fejléc miatt a címke amúgy is rövid
   („Költség", „Bevétel", „ROAS"), a maradékot pedig tördeljük.
   (2) A tizenegy oszlop három BLOKKBA áll össze (Google Ads · Meta · Webshop); mindegyik saját
   háttérszínt és a blokk elején elválasztót kap, a fejlécben a blokk nevével.
   (3) A három bevétel-oszlop félkövér.
   (4) Az összesítő sor lezáró sáv, a tábla aljához tapadva.
   Változás-oszlop nincs (D19): a szerver nem is számol előző időszakot. */
.pf-table { table-layout: fixed; }
.pf-table .ff-th-label { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.pf-table .ff-th { min-width: 0; }
.pf-table col.pf-w-axis { width: 180px; }
.pf-table col.pf-w-money { width: 124px; }
.pf-table col.pf-w-ratio { width: 80px; }
.pf-table col.pf-w-percent { width: 86px; }
/* Termékbesorolás (SPEC-unas-termek-besorolas-finomhangolas.md §3.4) — ugyanez a tábla, további oszloptípusokkal. */
.pf-table col.pf-w-text { width: 120px; }
.pf-table col.pf-w-number { width: 96px; }
.pf-table col.pf-w-pct { width: 96px; }
.pf-table col.pf-w-poas { width: 108px; }
.pf-table col.pf-w-label { width: 180px; }
.pf-table col.pf-w-gate { width: 150px; }
.pf-table col.pf-w-action { width: 280px; }
.pf-table col.pf-w-axis-wide { width: 230px; }
/* A fejléc-címke itt szóhatáron törjön, ne betű közben (a Portfólió rövid címkéinél az `anywhere` elég volt). */
.pf-table thead tr.pf-labelhead th .ff-th-label { overflow-wrap: normal; word-break: normal; }
.pf-table td .pf-sub { display: block; margin-top: 2px; font-size: var(--text-xs); font-weight: var(--weight-regular, 400); color: var(--color-text-subtle); white-space: normal; }
.pf-table td.pf-wrap { white-space: normal; line-height: 1.35; }
.pf-table td { height: 34px; }
.pf-table td.ff-num { white-space: nowrap; }
/* A jelvény `white-space: nowrap`, a pénzoszlop viszont fix 124 px — egy hosszú címke ezért
   ÁTFOLYT a szomszédos oszlopra és letakarta a számot (2026-09-12). A címkék azóta rövidek; ez a
   szabály a védőháló, hogy egy jövőbeli hosszabb szöveg csúfoljon el inkább, mint takarjon. */
.pf-table td .ff-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.pf-table td.pf-google { background: var(--pf-google-bg); }
.pf-table td.pf-meta   { background: var(--pf-meta-bg); }
.pf-table td.pf-other  { background: var(--pf-other-bg); }
.pf-table td.pf-axis   { background: var(--panel); }
.pf-table tbody tr:nth-child(even) td.pf-google { background: var(--pf-google-zebra); }
.pf-table tbody tr:nth-child(even) td.pf-meta   { background: var(--pf-meta-zebra); }
.pf-table tbody tr:nth-child(even) td.pf-other  { background: var(--pf-other-zebra); }

/* --- Több nyelvű webshop: alap (HU) sor + országsorok + csoport-összesen
   (SPEC-portfolio-nyelvi-shopok.md §3, SPEC-portfolio-alap-shop-orszag-bontas.md §3.1) ---
   Egy adatforrás, amely több nyelvi webshopot futtat, CSOPORTKÉNT jelenik meg: az alap sor a HU
   webshop (a közös hirdetési fiókkal), alatta az országok saját sorai, a végén a csoport összesen-sora.
   Egynyelvű adatforrás nem kap csoportot — annak a sora `.pf-row` marad, változatlanul.
   A behúzás csak a tengely-cellán van: a számoszlopok maradnak egy vonalban, különben a szemnek
   nem lehetne őket összevetni. */
.pf-table tr.pf-row-base td.pf-axis { font-weight: var(--weight-semibold); }
.pf-table tr.pf-row-child td.pf-axis { padding-left: var(--space-5); color: var(--color-text-subtle); }
/* Az országsor tengely-cellája kapja a bekötő vonalat — így látszik, melyik webshophoz tartozik. */
.pf-table tr.pf-row-child td.pf-axis { box-shadow: inset 2px 0 0 var(--color-border); }
/* A csoport-összesen: félkövér, felül elválasztó vonal — a csoport lezárása. */
.pf-table tr.pf-row-total td { font-weight: var(--weight-semibold); border-top: 1px solid var(--color-border); }
/* Jelvény szám mellett (korábbi adat hibás kapcsolat mögött, D18): a szám ALÁ kerül, nem rá. */
.pf-table td .pf-conn--below { display: block; margin: 2px 0 0 auto; }
.pf-table tbody tr:nth-child(even) td.pf-axis   { background: var(--ff-zebra); }
.pf-table tbody tr:hover td.pf-google { background: var(--pf-google-hover); }
.pf-table tbody tr:hover td.pf-meta   { background: var(--pf-meta-hover); }
.pf-table tbody tr:hover td.pf-other  { background: var(--pf-other-hover); }
.pf-table tbody tr:hover td.pf-axis   { background: var(--ff-hover); }

.pf-table th.pf-block-start,
.pf-table td.pf-block-start { border-left: 2px solid var(--pf-block-line); }
.pf-table thead th.pf-block-start { border-left: 2px solid var(--pf-block-line-head); }

/* A fejléc is hordozza a blokk színét, a navy sötét változatában. */
.pf-table thead th.pf-google { background: var(--pf-google-head); }
.pf-table thead th.pf-meta   { background: var(--pf-meta-head); }
.pf-table thead th.pf-other  { background: var(--pf-other-head); }
.pf-table thead th.pf-axis   { background: var(--ff-head-bg); }
.pf-table thead tr.pf-grouphead th {
  top: 0;
  z-index: 5;
  padding: var(--space-2) var(--ff-cell-pad-x);
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: 0.10em;
}
.pf-table thead tr.pf-labelhead th { top: 25px; }

.pf-table td.pf-rev { font-weight: var(--weight-semibold); color: var(--color-text-strong); }

.pf-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-top: 2px solid var(--navy);
}
.pf-table tfoot td.pf-google { background: var(--pf-google-foot); }
.pf-table tfoot td.pf-meta   { background: var(--pf-meta-foot); }
.pf-table tfoot td.pf-other  { background: var(--pf-other-foot); }
.pf-table tfoot td.pf-axis   { background: var(--pf-axis-foot); }
.pf-table tfoot td.pf-rev    { color: var(--navy); }
/* ===== PORTFÓLIÓ · VÉGE ===================================================================== */

/* =============================================================================================
   KAPCSOLATOK — ügyfélszintű Google / Meta bejelentkezés (SPEC-beallitasok-egysegesites.md §13)
   A bejelentkezés-blokk az azonosító-mező alatt (connections.js: .cx-login); a .cx-card az Admin ›
   Kapcsolatok Meta app kártyája; a .set-acc a UNAS Beállítások „Kapcsolatok" fülének blokkjai.
   ============================================================================================= */
.landing-header-actions { display: flex; align-items: center; gap: var(--space-4); }
.cx-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.cx-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.cx-card-title { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.cx-login { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.cx-login .cx-actions { align-items: center; }
.cx-meta { margin: 0; font-size: var(--text-sm); color: var(--color-text-subtle); }
.cx-error { margin: 0; font-size: var(--text-sm); color: var(--color-danger); }
.cx-accounts summary { cursor: pointer; font-size: var(--text-sm); color: var(--color-text-strong); }
.cx-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
/* A felderített fiókok választólistája a bejelentkezés-blokkban (connections.js `data-cl-pick`). */
.cx-pick { display: grid; gap: var(--space-2); max-width: 32rem; font-size: var(--text-sm); color: var(--color-text-subtle); }
.cx-token { display: flex; gap: var(--space-4); }
.cx-token input {
  flex: 1 1 auto;
  padding: var(--space-5) var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--text-base);
}
.cx-msg { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--primary); }
.cx-msg.is-err { color: var(--color-danger); }
.admin-meta-app { margin-bottom: var(--space-8); }
.cx-accounts > .cx-token { margin-top: var(--space-3); }

.set-acc { display: grid; gap: var(--space-3); padding: var(--space-8) 0; border-top: 1px solid var(--color-border); }
.set-acc .set-field { margin-bottom: 0; }
.set-acc .set-hint { margin: 0; }
.set-acc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.set-acc-title { font-weight: var(--weight-semibold); color: var(--color-text-strong); }
/* Nyelvi webshopok fiók-hozzárendelése (SPEC-portfolio-nyelvi-shopok.md §3, N3). Táblás forma, mert
   itt EGY sor = egy nyelvi webshop, és platformonként kell melléjük egy-egy fiók — a mezőlistás
   forma ugyanezt tízszer ismételné. */
.set-lang-table th[scope="row"] { display: grid; gap: 2px; text-align: left; white-space: nowrap; }
.set-lang-table .set-lang-orders { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--color-text-subtle); }
.set-lang-table td { min-width: 220px; }
.set-lang-table select { width: 100%; }
.set-acc-status { margin: 0; font-size: var(--text-xs); color: var(--color-text-subtle); }
.set-acc-warn { margin: 0; font-size: var(--text-sm); color: var(--color-danger); }
.admin-conn-status { margin: 0; padding-left: 1.2em; display: grid; gap: 2px; font-size: var(--text-sm); }
/* ===== KAPCSOLATOK · VÉGE =================================================================== */

/* === UNAS — TERMÉKBESOROLÁS BEÁLLÍTÁS (SPEC-unas-termek-besorolas.md §8) ========================
   A Beállítások „Termékbesorolás" fülének szakaszai (product_scoring_settings.js). Minden szabály a
   `.psc` konténerre szűkítve; a mezők a meglévő `.set-field`, a táblák az FF-TABLE elemneveit használják. */
.psc { display: grid; gap: var(--space-8); }
.psc .psc-block + .psc-block { border-top: 1px solid var(--line); padding-top: var(--space-8); }
.psc .psc-block h4 { margin: 0 0 var(--space-3); font-size: var(--text-lg, 1rem); color: var(--color-text-strong); }
.psc .psc-lead { margin: 0 0 var(--space-6); color: var(--muted); font-size: var(--text-sm); }
.psc .psc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 var(--space-8); }
.psc .psc-status { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3) var(--space-6); margin: 0 0 var(--space-6); font-size: var(--text-sm); align-items: center; }
.psc .psc-status dt { color: var(--muted); }
.psc .psc-status dd { margin: 0; }
.psc .psc-note { margin: 0 0 var(--space-6); color: var(--muted); font-size: var(--text-sm); }
.psc .psc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.psc .psc-errors { margin: var(--space-4) 0 0; padding-left: var(--space-8); font-size: var(--text-sm); color: var(--color-danger, #c8442c); }
.psc .psc-warn { margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-6) var(--space-4) var(--space-12, 2rem); border-radius: var(--radius-sm); background: var(--c-amber-tint, rgba(239, 159, 39, .12)); color: var(--color-text-strong); font-size: var(--text-sm); }
.psc .psc-tiers { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.psc .psc-tier { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm); }
.psc .psc-tier.is-on { border-color: var(--green); background: color-mix(in srgb, var(--green) 6%, transparent); }
.psc .psc-tier-body { margin: 0 0 var(--space-4) var(--space-8); padding: var(--space-4) 0 var(--space-2) var(--space-6); border-left: 2px solid var(--line); }
.psc .psc-subs { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-4); }
.psc .psc-sub { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.psc .psc-h5 { margin: var(--space-8) 0 var(--space-3); font-size: var(--text-base, .95rem); color: var(--color-text-strong); }
.psc .psc-scroll { max-height: 28rem; overflow: auto; margin: var(--space-4) 0 var(--space-6); }
.psc .psc-scroll input { width: 6rem; }
.psc .psc-preview td { white-space: nowrap; }
.psc .psc-preview tr.psc-preview-head td { font-weight: var(--weight-medium, 500); color: var(--muted); }
.psc .psc-preview td.psc-col-sku { background: var(--pf-google-bg); }
.psc .psc-preview td.psc-col-cost { background: var(--pf-other-bg); }

/* Egyetlen mentés-sáv a Beállítások „Árrés és besorolás" fülén (2026-09-14), a fül tetején ÉS alján. Nem sticky: az appban
   az ablak görget, a .content-region nem, így egy sticky sáv hatástalan lenne (l. a PDS-shell megjegyzését). */
.psc .psc-savebar { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-6); padding: var(--space-4) var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.psc .psc-savebar--top { margin-bottom: var(--space-8); }
.psc .psc-savebar--bottom { margin-top: var(--space-8); }
.psc .psc-savebar-msg { font-size: var(--text-sm); color: var(--muted); }
.psc .psc-savebar.is-dirty { border-color: var(--color-warning); background: var(--c-amber-tint); }
.psc .psc-savebar.is-dirty .psc-savebar-msg { color: var(--color-warning); font-weight: var(--weight-semibold); }

/* === UNAS — TERMÉKBESOROLÁS KÉPERNYŐ (SPEC-unas-termek-besorolas-finomhangolas.md §3) ============
   A `unas.product_scoring` képernyő fejléce (jelmagyarázat + két gomb), a `.pscr` konténerre szűkítve. */
.pscr { display: grid; gap: var(--space-6); }
/* Grid-elem alapból a tartalma szélességére nő (min-width: auto) — e nélkül a széles tábla nem a saját `.ff-scroll` keretében görgetne, hanem kitolná az oldalt. */
.pscr > * { min-width: 0; }
.pscr .pscr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); }
.pscr .pscr-legend { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); font-size: var(--text-sm); color: var(--color-text-strong); }
.pscr .pscr-legend-item { display: inline-flex; align-items: center; gap: var(--space-3); }
.pscr .pscr-legend-item span { color: var(--muted); }
/* A jelmagyarázat címkéje PONTOSAN a tábla csoport-fejlécének színét viseli (a `.pf-table thead th.pf-*` tokenjei). */
.pscr .pscr-chip { display: inline-block; padding: 3px 10px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-navy); }
.pscr .pscr-chip--other { background: var(--pf-other-head); }
.pscr .pscr-chip--google { background: var(--pf-google-head); }
.pscr .pscr-chip--meta { background: var(--pf-meta-head); }
.pscr .pscr-chip--axis { background: var(--ff-head-bg); }
.pscr .pscr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.pscr .pscr-empty-actions { margin-top: var(--space-6); }

/* ===== CTP — TARTALOM & RIPORT ÜGYFÉLPORTÁL (content_portal) · KEZDET ==========================
   Spec: specs/tartalomgyartas/SPEC-tartalomgyartas-ugyfelportal.md §13 · terv M1.2. Előtag: `.ctp-`
   (D1 — a `.cp-` foglalt). A portál oldalai a közös UI.page + DataGrid v2 elemeiből állnak; itt CSAK a
   portál saját darabjai élnek, és táblázat/gomb/fül/szűrő-stílus NEM (UI-kapu, D6).
   Kétirányú névütközés-vizsgálat (PLATFORM-STACK §11, 2026-10-07): a `.ctp-` előtag a fájlban máshol
   nem fordul elő; a kártya a `.sidebar-menu`-be kerül, ahol csak osztály-szelektorok élnek
   (`.menu-*`, `.nav-item`) — elem-szintű (`p`, `a`) szabály onnan nem szivárog bele.
   ============================================================================================ */

/* UI1 — a portál palettája EGY helyen (SPEC-tartalomgyartas-ui-overhaul.md §1, UI-K1 + UI-K2). Két külön család:
   * STÁTUSZ (`--ctp-st-*`): a címke színe + ikonja és a kártya felső sávja — Tervezet szürke · Döntésre vár sárga ·
     Módosítás kérve piros · Elfogadva zöld · Kiposztolva / Feltöltve / Publikálva sötétkék · Elvetve halvány, áthúzott.
   * TÍPUS (`--ctp-ty-*`): az ikon és a bal oldali sáv színe (naptár) — Poszt kék · Hirdetés narancs · Blog türkiz ·
     Esemény lila · Ötlet szaggatott szürke. A blog szándékosan NEM zöld: a zöld az „Elfogadva” státuszé.
   * SZERZŐ (`--ctp-by-*`, E5 / KU-E2): a naptár KÉZI bejegyzésének háttere és sávja — a tartalomgyártóé indigókék (nem a
     poszt-kék), az ügyfélé fűzöld (nem az „Elfogadva” zöldje); a típust ilyenkor az ikon mutatja, a szerző neve ott áll.
   Szín sosem egyedüli jel: a címkén mindig ikon + szöveg is áll. */
:root {
  --ctp-st-draft: #8C98A4;    --ctp-st-draft-bg: #F1F4F6;    --ctp-st-draft-ink: #46525C;
  --ctp-st-review: #E3A008;   --ctp-st-review-bg: #FFF5D6;   --ctp-st-review-ink: #7A5300;
  --ctp-st-changes: #D64545;  --ctp-st-changes-bg: #FDECEC;  --ctp-st-changes-ink: #9B1C1C;
  --ctp-st-approved: #2E9E5B; --ctp-st-approved-bg: #E5F5EC; --ctp-st-approved-ink: #1B6B3C;
  --ctp-st-done: #1F3A68;     --ctp-st-done-bg: #E5EBF5;     --ctp-st-done-ink: #1F3A68;
  --ctp-st-dropped: #C9D0D6;  --ctp-st-dropped-bg: #F7F8F9;  --ctp-st-dropped-ink: #8A949C;
  --ctp-st-plan: #6C8EBF;     --ctp-st-plan-bg: #EDF2F9;     --ctp-st-plan-ink: #34507A;
  --ctp-ty-post: #3D7CC9;  --ctp-ty-post-bg: #EAF2FB;  --ctp-ty-post-ink: #1D4F86;
  --ctp-ty-promo: #E07B24; --ctp-ty-promo-bg: #FDF0E4; --ctp-ty-promo-ink: #8C4610;
  --ctp-ty-blog: #14979B;  --ctp-ty-blog-bg: #E2F4F4;  --ctp-ty-blog-ink: #0B5F62;
  --ctp-ty-event: #8559C9; --ctp-ty-event-bg: #F3EDFB; --ctp-ty-event-ink: #55308D;
  --ctp-ty-idea: #AAB6C0;
  --ctp-by-agency: #4257D6; --ctp-by-agency-bg: #ECEEFC; --ctp-by-agency-ink: #27358F;
  --ctp-by-client: #6A9F1C; --ctp-by-client-bg: #F0F7E4; --ctp-by-client-ink: #3F6310;
  /* Poszt-kártya (2026-10-16, mockup): platform-márkaszínek, hashtag, az ügyfél-avatar átmenete. */
  --ctp-fb: #1877F2; --ctp-ig: #C13584; --ctp-pv-tag: #1E5FA8;
  --ctp-pv-avatar-from: #FFE29A; --ctp-pv-avatar-to: #F28C38;
}
/* A tónus-osztály három változót ad; a címke, a kártya sávja és a naptár státusz-jele ebből fogyaszt. */
.ctp-tone-draft { --ctp-tone: var(--ctp-st-draft); --ctp-tone-bg: var(--ctp-st-draft-bg); --ctp-tone-ink: var(--ctp-st-draft-ink); }
.ctp-tone-review { --ctp-tone: var(--ctp-st-review); --ctp-tone-bg: var(--ctp-st-review-bg); --ctp-tone-ink: var(--ctp-st-review-ink); }
.ctp-tone-changes { --ctp-tone: var(--ctp-st-changes); --ctp-tone-bg: var(--ctp-st-changes-bg); --ctp-tone-ink: var(--ctp-st-changes-ink); }
.ctp-tone-approved { --ctp-tone: var(--ctp-st-approved); --ctp-tone-bg: var(--ctp-st-approved-bg); --ctp-tone-ink: var(--ctp-st-approved-ink); }
.ctp-tone-done { --ctp-tone: var(--ctp-st-done); --ctp-tone-bg: var(--ctp-st-done-bg); --ctp-tone-ink: var(--ctp-st-done-ink); }
.ctp-tone-dropped { --ctp-tone: var(--ctp-st-dropped); --ctp-tone-bg: var(--ctp-st-dropped-bg); --ctp-tone-ink: var(--ctp-st-dropped-ink); }
.ctp-tone-plan { --ctp-tone: var(--ctp-st-plan); --ctp-tone-bg: var(--ctp-st-plan-bg); --ctp-tone-ink: var(--ctp-st-plan-ink); }

/* Státusz-címke (UI-K1): ikon + szöveg + szín. */
.ctp-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 1px var(--space-4) 1px var(--space-3);
  border-radius: 999px;
  background: var(--ctp-tone-bg, var(--color-surface-subtle));
  color: var(--ctp-tone-ink, var(--color-text));
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.6;
  white-space: nowrap;
}
.ctp-status .ti { font-size: var(--text-sm); color: var(--ctp-tone, currentColor); }
.ctp-status.ctp-tone-dropped { text-decoration: line-through; font-weight: var(--weight-normal); }

/* Egysoros üres állapot (UI-K5): ikon + mondat + a teendő gombja — nem fél képernyős doboz. */
.ctp-empty-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-5) var(--space-7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}
.ctp-empty-line > .ti { font-size: var(--text-lg); color: var(--color-text-muted); }
.ctp-empty-line > span { flex: 1 1 16rem; min-width: 0; }

/* A hiány a kártyán (UI-K6): kis piros sor, legfeljebb két sorban; a teljes szöveg a `title`-ben. */
.ctp-miss {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-danger);
  font-size: var(--text-xs);
  line-height: 1.4;
}
.ctp-miss > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ctp-miss .ti { flex: none; margin-top: 1px; }
.ctp-week-sum {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-sm);
  background: var(--ctp-st-changes-bg);
  color: var(--ctp-st-changes-ink);
  font-size: var(--text-sm);
}
.ctp-week-sum .ti { flex: none; margin-top: 2px; }

/* A szerkesztők egységes lába (UI-K8): balra a mentés-állapot. */
.ctp-foot-state { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--text-xs); color: var(--color-text-subtle); }
.ctp-foot-state:empty { display: none; }
.ctp-foot-state.is-ok { color: var(--green-soft-text); }
.ctp-foot-state.is-err { color: var(--color-danger); }
.ctp-foot-main { display: inline-flex; }

/* „Tartalomgyártód" kártya az oldalsáv menüje alatt (spec §1.3, mockup). A szinkron-kártya
   (`.sync-card`) tokenjeivel, hogy a sávban egy családba tartozzon. */
.ctp-creator {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--navy-raise);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
}
.ctp-creator .ctp-creator-label {
  margin: 0 0 var(--space-4);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-navy-faint);
}
.ctp-creator .ctp-creator-row { display: flex; align-items: center; gap: var(--space-5); }
.ctp-creator .ctp-creator-av {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green);
  color: var(--navy);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.ctp-creator .ctp-creator-text { min-width: 0; }
.ctp-creator .ctp-creator-name { margin: 0; color: var(--on-navy); font-size: var(--text-base); font-weight: var(--weight-semibold); }
.ctp-creator .ctp-creator-mail {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--on-navy-muted);
  font-size: var(--text-xs);
  text-decoration: none;
}
.ctp-creator .ctp-creator-mail:hover { color: var(--on-navy); text-decoration: underline; }
.ctp-creator .ctp-creator-none { margin: 0; color: var(--on-navy-muted); font-size: var(--text-sm); }
/* Összecsukott sávban nincs hely a névnek — a kártya rejtve, a menü ikonjai maradnak. */
.app-sidebar.collapsed .ctp-creator { display: none; }

/* Beállítások → Szerződés / Tartalomgyártó: egyszerű, egymás alatti mezők a közös `.ff-panel` keretben. */
.ctp-form { display: grid; gap: var(--space-10); padding: var(--space-12); max-width: 640px; }
.ctp-form .ctp-form-row { display: grid; gap: var(--space-3); justify-items: start; }
.ctp-form .ctp-form-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.ctp-form .ctp-form-hint { font-size: var(--text-sm); color: var(--color-text-subtle); line-height: var(--leading-normal); }
.ctp-form .ctp-form-foot { display: flex; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.ctp-form .ff-input { width: min(100%, 360px); }
/* Tartalomgyártó fül: kijelölés · (nyitott jelszó/teszt űrlap) · fiók-rács egymás alatt; az üres blokk nem foglal helyet. */
/* `minmax(0, 1fr)`: a széles DataGrid a saját görgetőjében marad, nem tolja szét az oszlopot (és vele az űrlapot). */
.ctp-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
.ctp-stack > :empty { display: none; }

/* Posztok — ügynökségi heti tábla (M2.3, spec §4.1, mockup „Ügynökség · Posztok + szerkesztő"). Egy hét = fejléc
   (cím · állapot-összegzés · „Beküldés jóváhagyásra (N)") + kártyasor „+" kártyával. A gombok a közös `.ff-btn`. */
.ctp-board { display: grid; gap: var(--space-14); }
.ctp-week { display: grid; gap: var(--space-6); }
.ctp-week-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.ctp-week-head h3 { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.ctp-week-meta { flex: 1; font-size: var(--text-sm); color: var(--color-text-subtle); }
.ctp-week-hint {
  padding: var(--space-5) var(--space-7);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  font-size: var(--text-sm);
  color: var(--color-text-row);
}
.ctp-week-hint p { margin: 0 0 var(--space-2); }
.ctp-week-hint ul { margin: 0; padding-left: var(--space-10); }
.ctp-week-empty { margin: 0; font-size: var(--text-sm); color: var(--color-text-subtle); }
.ctp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-6); }
.ctp-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  font: inherit;
  text-align: left;
  color: inherit;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.ctp-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ctp-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ctp-card.is-open { outline: 2px solid var(--green); outline-offset: 1px; }
/* UI-K1: a kártya felső sávja a státusz színe (a `ctp-tone-*` osztályból). */
.ctp-card[class*="ctp-tone-"] { border-top: 4px solid var(--ctp-tone); }
/* UI-K5: kép nélküli kártyán a szöveg első sorai, a státusz halvány tónusán. */
.ctp-card-thumb.is-empty { background: var(--ctp-tone-bg, var(--color-surface-subtle)); }
.ctp-card-quote {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  align-self: stretch;
  justify-self: stretch;
  padding: var(--space-6);
  color: var(--ctp-tone-ink, var(--color-text));
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-line;
  text-align: left;
}
.ctp-card-thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  font-size: var(--text-2xl);
}
.ctp-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ctp-card-count {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-overlay);
  color: var(--color-on-primary);
  font-size: var(--text-2xs);
}
.ctp-card-body { display: grid; gap: var(--space-3); padding: var(--space-5) var(--space-6); min-width: 0; }
.ctp-card-meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-subtle); }
.ctp-card-icons { margin-left: auto; display: inline-flex; gap: var(--space-2); font-size: var(--text-sm); }
.ctp-card-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--text-sm); color: var(--color-text-strong); }
.ctp-card-option { font-size: var(--text-xs); color: var(--color-text-subtle); }
.ctp-add {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  min-height: 250px;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  background: var(--color-surface-subtle);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.ctp-add .ti { font-size: var(--text-3xl); color: var(--green); }
.ctp-add small { font-size: var(--text-xs); }
.ctp-add:hover,
.ctp-add.is-over { border-color: var(--green); color: var(--color-text-strong); }
.ctp-add:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ctp-confirm ul { margin: 0; padding-left: var(--space-10); font-size: var(--text-sm); }
.ctp-confirm p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); }
.ctp-confirm .ctp-confirm-warn { color: var(--color-warning); }

/* Posztok — a szerkesztő a közös oldalsó fiókban (`UI.drawer`). */
.ctp-editor { display: grid; gap: var(--space-10); }
.ctp-editor .ff-notice { margin: 0; }
.ctp-editor-state { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-subtle); }
.ctp-field { display: grid; gap: var(--space-3); }
.ctp-field-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.ctp-field-label small { font-weight: var(--weight-regular); color: var(--color-text-subtle); }
.ctp-field-hint { margin: 0; font-size: var(--text-xs); color: var(--color-text-subtle); line-height: var(--leading-normal); }
.ctp-text { width: 100%; box-sizing: border-box; resize: vertical; line-height: var(--leading-normal); }
.ctp-wide { width: 100%; box-sizing: border-box; }
.ctp-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
.ctp-check { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-strong); cursor: pointer; }
.ctp-counter { margin: 0; text-align: right; font-size: var(--text-xs); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.ctp-counter.is-over { color: var(--color-danger); font-weight: var(--weight-semibold); }
/* UI-BL2: a SEO-számláló zöld, ha belefér (piros, ha hosszú). */
.ctp-counter.is-ok { color: var(--ctp-st-approved-ink); }
.ctp-media {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}
.ctp-media.is-over { border-color: var(--green); background: var(--color-primary-soft); }
.ctp-media.is-readonly { border-style: solid; border-width: 1px; }
.ctp-media-item { position: relative; width: 76px; height: 76px; flex: none; cursor: grab; }
.ctp-media.is-readonly .ctp-media-item { cursor: default; }
.ctp-media-item img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.ctp-media-item.is-dragging { opacity: 0.4; }
.ctp-media-item.is-broken,
.ctp-card-thumb.is-broken { background: var(--color-danger-soft); }
.ctp-media-no {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  min-width: 18px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-overlay);
  color: var(--color-on-primary);
  font-size: var(--text-2xs);
  text-align: center;
}
.ctp-media-x {
  position: absolute;
  top: calc(-1 * var(--space-3));
  right: calc(-1 * var(--space-3));
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--color-text-row);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.ctp-media-x:hover { color: var(--color-danger); }
.ctp-media-add {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  flex: none;
  border: 2px dashed var(--green);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--green);
  font-size: var(--text-2xl);
  cursor: pointer;
}
.ctp-media-add:focus-visible,
.ctp-media-x:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.ctp-media-help { flex: 1 1 180px; margin: 0; font-size: var(--text-xs); color: var(--color-text-row); line-height: var(--leading-normal); }
.ctp-uploads { display: grid; gap: var(--space-3); }
.ctp-uploads:empty { display: none; }
.ctp-upload { display: grid; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-row); }
.ctp-upload progress { width: 100%; height: 6px; accent-color: var(--green); }
.ctp-upload.is-err { color: var(--color-danger); }
.ctp-upload-line { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.ctp-upload-line > span { min-width: 0; overflow-wrap: anywhere; }
.ctp-upload-cancel { flex: none; }
/* Videó (M4.1 + M4.2): csempe a poszterképpel (ha már elkészült), középen lejátszás-jel, a sarokban a hossz. A fiókban
   és az ügyfél-nézetben a csempe gomb — kattintásra `<video>` kerül a helyére (aláírt link); a videófájlt a bélyeghez
   sosem töltjük le, a poszter egy kis JPEG. */
.ctp-video-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  background: var(--color-surface-muted, var(--color-surface-subtle));
  color: var(--color-text-muted);
  font-size: var(--text-2xl);
}
button.ctp-video-tile { padding: 0; border: 0; font: inherit; cursor: pointer; }
button.ctp-video-tile:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
button.ctp-video-tile.is-loading { cursor: progress; opacity: 0.7; }
.ctp-video-tile > img.ctp-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
}
.ctp-video-tile.has-poster { background: var(--c-navy); }
.ctp-video-play {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-lg);
  box-shadow: var(--shadow);
}
.ctp-video-len {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-normal);
}
.ctp-video-player {
  display: block;
  width: 100%;
  max-height: 420px;
  border-radius: var(--radius-sm);
  background: var(--c-navy);
}
/* A fiók médiadobozában a videó (posztonként egy, K15) nagyobb, nem bélyegméretű: így ott helyben lejátszható. */
.ctp-media-item.is-video { width: 100%; max-width: 360px; height: 220px; cursor: default; }
.ctp-media-item.is-video .ctp-video-tile { border-radius: var(--radius-sm); }
.ctp-media-item.is-video .ctp-video-tile > img.ctp-video-poster { object-fit: contain; }
.ctp-media-item.is-video .ctp-video-player { height: 100%; }
.ctp-media-help.ctp-video-facts { flex-basis: 100%; }
.ctp-video-state { flex-basis: 100%; margin: 0; font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--color-text-row); }
.ctp-video-state.is-ok { color: var(--green-soft-text); }
.ctp-video-state.is-warn { color: var(--c-amber-700); }
.ctp-video-state.is-err { color: var(--color-danger); }
.ctp-preview-img .ctp-video-tile { min-height: 160px; }
.ctp-rv-main.is-video { cursor: default; min-height: 200px; }
.ctp-rv-main.is-video .ctp-video-tile { min-height: 200px; }
.ctp-rv-main.is-video .ctp-video-tile.has-poster { min-height: 0; height: auto; }
.ctp-rv-main.is-video .ctp-video-tile > img.ctp-video-poster { position: static; width: auto; max-width: 100%; max-height: 420px; object-fit: contain; }
.ctp-rv-main.is-video .ctp-video-tile.has-poster .ctp-video-play { position: absolute; }
.ctp-rv-mini .ctp-video-tile { font-size: var(--text-base); }
.ctp-rv-mini .ctp-video-len { display: none; }
.ctp-rv-mini .ctp-video-play,
.ctp-card-thumb .ctp-video-play { width: 2rem; height: 2rem; font-size: var(--text-base); }
/* Előnézet: a SocialMedia poszt-készítő `.post-card` kártyái, a fiók szélességén egymás alatt. */
.ctp-preview { grid-template-columns: 1fr; }
.ctp-preview .post-card-body { display: grid; gap: var(--space-4); min-height: 0; }
.ctp-preview .post-text { margin: 0; }
.ctp-preview-img {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 160px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  font-size: var(--text-2xl);
}
.ctp-preview-img img { width: 100%; max-height: 420px; object-fit: contain; display: block; }
.ctp-preview-link { margin: 0; font-size: var(--text-xs); color: var(--color-text-subtle); overflow-wrap: anywhere; }
/* M6.1: UTM-es link platformonként a Link-mező alatt (felirat · csak olvasható mező · műveletek; keskenyen tördel). */
.ctp-utm { display: grid; gap: var(--space-3); }
.ctp-utm-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.ctp-utm-label { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 92px; font-size: var(--text-sm); color: var(--color-text-strong); }
.ctp-utm-link { flex: 1 1 220px; min-width: 0; font-size: var(--text-xs); color: var(--color-text-subtle); }
.ctp-utm-ops { display: inline-flex; flex-wrap: wrap; gap: var(--space-3); }
/* E6 (E-RL2): a rövid link kiemelve (erősebb szín), alatta a „Rövidítés” sor */
.ctp-utm-link.is-short { font-size: var(--text-sm); color: var(--color-text-strong); }
.ctp-utm-short { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0; }
.ctp-utm-short .ctp-field-hint { margin: 0; }
.ctp-foot-ask { font-size: var(--text-sm); color: var(--color-danger); }
.ctp-grow { flex: 1; }
/* A fiókban: az ügyfél szó szerinti kérése (M3.1) és az „ügyfél nevében” / újranyitás űrlap. */
.ctp-quote {
  padding: var(--space-5) var(--space-7);
  border-left: 3px solid var(--color-danger);
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
  font-size: var(--text-sm);
  color: var(--color-text-strong);
}
.ctp-quote p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ctp-quote .ctp-quote-head { margin-bottom: var(--space-2); font-size: var(--text-xs); color: var(--color-text-subtle); white-space: normal; }
.ctp-behalf { display: grid; gap: var(--space-6); }
.ctp-behalf > p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); }
.ctp-undo { margin: 0; }
/* Kiposztolás (M3.3, K17): a másolás-gombok sora + a jelölés panelje. A gomb a közös `.ff-btn`. */
.ctp-publish { display: grid; gap: var(--space-6); }
.ctp-publish > p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); }
.ctp-copy { flex-wrap: wrap; }
.ctp-copy-buffer { position: fixed; top: 0; left: -9999px; opacity: 0; } /* a másolás tartalék-útja (execCommand) */
/* Napló-idővonal (M3.3, spec §3.4) — mindkét félnek ugyanaz a jelölés: időpont balra, a lépés jobbra. */
.ctp-timeline { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.ctp-timeline li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-border);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.ctp-tl-at { color: var(--color-text-subtle); font-size: var(--text-xs); padding-top: 1px; }
.ctp-tl-text { color: var(--color-text-strong); overflow-wrap: anywhere; }
.ctp-tl-note,
.ctp-tl-sub { display: block; margin-top: var(--space-1); color: var(--color-text-subtle); white-space: pre-wrap; }
.ctp-tl-note { color: var(--color-text); }
.ctp-rv-history { display: grid; gap: var(--space-4); justify-items: start; }
/* Az ügyfél-sor szöveg-oszlopa keskeny: ott (és telefonon mindenhol) az időpont a lépés fölé kerül. */
.ctp-rv-info .ctp-timeline li,
.ctp-rv-history .ctp-timeline li { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
@media (max-width: 760px) {
  .ctp-timeline li { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}

/* Posztok — ügyfél-nézet: jóváhagyás (M3.1, spec §4.2, mockup „Ügyfél · jóváhagyás"). Egy sor = egy poszt, egy
   görgetés = egy poszt: asztalon balra a kép, jobbra a szöveg és a két gomb; telefonon egymás alatt. A gombok a
   közös `.ff-btn`; a méretüket a rácsuk adja (`.ctp-rv-actions`), a gombot magát nem formázzuk. */
.app-shell:has(.ctp-review) { height: 100vh; } /* a ragadós haladássávhoz (PLATFORM-STACK §11, a PDS-minta) */
.ctp-review { display: grid; gap: var(--space-14); max-width: 1060px; }
.ctp-rv-progress {
  position: sticky;
  top: calc(-1 * var(--ff-page-pad-y)); /* a görgető felső széléhez, ne a padding alá — fölötte ne látszódjon tartalom */
  z-index: 3;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.ctp-rv-progress-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); font-size: var(--text-sm); color: var(--color-text-strong); }
.ctp-rv-progress progress { width: 100%; height: 8px; accent-color: var(--green); }
.ctp-rv-week { display: grid; gap: var(--space-8); }
.ctp-rv-week h3 { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.ctp-rv-week h3 small { margin-left: var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-text-subtle); }
.ctp-rv-row {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
  padding: var(--space-10);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  scroll-margin-top: 96px; /* a ragadós haladássáv alá görgessen */
}
.ctp-rv-row.is-choice { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.ctp-rv-row.is-done { grid-template-columns: minmax(0, 1fr); padding: var(--space-6) var(--space-8); }
.ctp-rv-info { display: grid; gap: var(--space-6); min-width: 0; }
.ctp-rv-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); font-size: var(--text-sm); color: var(--color-text-subtle); }
.ctp-rv-meta .ctp-card-icons { margin-left: 0; font-size: var(--text-md); }
.ctp-rv-meta .ff-badge { margin-left: auto; }
/* A döntésre váró poszt fejléce Facebook-szerűen (mockup): márka-jel, név, idő + platformok, jobbra a státusz. */
.ctp-rv-brand { display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
.ctp-rv-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--c-amber-400);
  color: var(--color-on-primary);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}
.ctp-rv-brand-text { flex: 1 1 auto; min-width: 0; }
.ctp-rv-brand-name { margin: 0; font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text-strong); overflow-wrap: anywhere; }
.ctp-rv-brand-when { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: var(--text-xs); color: var(--color-text-subtle); }
.ctp-rv-brand-when .ctp-card-icons { margin-left: 0; font-size: var(--text-sm); }
.ctp-rv-brand .ff-badge { flex: none; }
.ctp-rv-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-md); line-height: var(--leading-normal); color: var(--color-text-strong); }
.ctp-rv-label { margin: 0 0 calc(-1 * var(--space-3)); display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-subtle); }
.ctp-rv-link { margin: 0; display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); overflow-wrap: anywhere; }
.ctp-rv-link a { color: var(--navy-3, var(--color-text-strong)); }
.ctp-rv-media { display: grid; gap: var(--space-4); }
.ctp-rv-media.is-empty { place-items: center; min-height: 200px; border-radius: var(--radius-md); background: var(--color-surface-subtle); color: var(--color-text-muted); font-size: var(--text-2xl); }
.ctp-rv-main {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  cursor: zoom-in;
}
.ctp-rv-main img { display: block; max-width: 100%; max-height: 420px; object-fit: contain; }
.ctp-rv-main:focus-visible,
.ctp-rv-thumb:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ctp-rv-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ctp-rv-thumb { width: 52px; height: 52px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: var(--radius-sm); background: var(--color-surface-subtle); cursor: pointer; }
.ctp-rv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ctp-rv-thumb.is-on { border-color: var(--green); }
.ctp-rv-thumb.is-broken,
.ctp-rv-main.is-broken,
.ctp-rv-mini.is-broken { background: var(--color-danger-soft); }
/* A két döntés-gomb: a rács adja a méretüket (nagy, hüvelykujjal elérhető), az elsődleges a szélesebb. */
.ctp-rv-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-auto-rows: minmax(46px, auto); gap: var(--space-5); }
.ctp-rv-actions:has(> :nth-child(2)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.ctp-rv-request { display: grid; gap: var(--space-5); padding: var(--space-8); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--color-surface-subtle); }
.ctp-rv-request-title { margin: 0; display: flex; align-items: center; gap: var(--space-3); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.ctp-rv-quick { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ctp-rv-yours { margin: 0; padding: var(--space-5) var(--space-7); border-left: 3px solid var(--color-danger); border-radius: var(--radius-sm); background: var(--color-surface-subtle); font-size: var(--text-sm); color: var(--color-text-strong); overflow-wrap: anywhere; }
.ctp-rv-ab { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-10); }
.ctp-rv-option { display: grid; gap: var(--space-6); align-content: start; padding: var(--space-8); border: 1px solid var(--line); border-radius: var(--radius-md); }
.ctp-rv-option-head { margin: 0; display: flex; align-items: baseline; gap: var(--space-3); color: var(--color-text-strong); }
.ctp-rv-option-head small { font-size: var(--text-xs); color: var(--color-text-subtle); }
.ctp-rv-option .ctp-rv-main img { max-height: 320px; }
.ctp-rv-done { display: flex; align-items: center; gap: var(--space-6); }
.ctp-rv-mini { flex: none; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface-subtle); color: var(--color-text-muted); }
.ctp-rv-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ctp-rv-done-text { flex: 1; display: grid; gap: var(--space-2); min-width: 0; font-size: var(--text-sm); color: var(--color-text-strong); }
.ctp-rv-done-text strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: var(--weight-semibold); }
.ctp-rv-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); color: var(--color-text-subtle); overflow-wrap: anywhere; }
.ctp-rv-detail { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--space-10); margin-top: var(--space-8); }
.ctp-rv-bulk { display: grid; justify-items: center; gap: var(--space-4); }
.ctp-rv-bulk .ctp-confirm { justify-self: stretch; }
@media (max-width: 760px) {
  .ctp-rv-row,
  .ctp-rv-detail { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); padding: var(--space-7); }
  .ctp-rv-main img { max-height: 300px; }
  .ctp-rv-main.is-video .ctp-video-tile > img.ctp-video-poster,
  .ctp-rv-main .ctp-video-player { max-height: 300px; }
  .ctp-rv-actions,
  .ctp-rv-actions:has(> :nth-child(2)) { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .ctp-rv-actions > .is-primary { order: -1; } /* az elsődleges gomb felül, a hüvelykujj alatt */
  .ctp-rv-done { flex-wrap: wrap; }
}
/* Telefonon (≤720 px) a shell szándékosan a DOKUMENTUMOT görgeti (`.app-body { height: auto }`), a régió
   `overflow: auto`-ja viszont görgető-konténert csinálna belőle, és a sáv ahhoz a nem görgő dobozhoz tapadna.
   Csak ezen az oldalon: a régió nem görgető, a shell nem 100vh, a sáv a ragadós (60 px-es) fejléc alá tapad. */
@media (max-width: 720px) {
  .app-shell:has(.ctp-review) { height: auto; }
  .app-shell:has(.ctp-review) .content-region { overflow: visible; overflow-x: clip; } /* a clip nem görgető-konténer */
  .ctp-rv-progress { top: 60px; } /* az `.app-header` magassága */
  .ctp-rv-row { scroll-margin-top: 150px; }
}

/* Hirdetési kreatívok (M5.2, spec §5, mockup „Ügyfél · Hirdetési kreatívok"). Előtag: `.ctp-cr-` (a `.ctp-ad` a
   `.ctp-add` miatt kerülve). Kétirányú névütközés-vizsgálat (PLATFORM-STACK §11, 2026-10-11): a `ctp-cr-` a fájlban
   máshol nem fordul elő, és a jelölés csak `.ctp-*` / `.ff-*` osztályt használ. A keret a méret VALÓS arányában rajzol:
   közös magasság, a szélességet a `--ctp-ar` adja (a jelölés CSS-változóként adja át — a UI-kapu ezt engedi). Az ügyfél-
   blokk a posztok `.ctp-rv-row` / `.ctp-rv-actions` / ragadós sávját használja, egy oszlopban. */
.ctp-rv-row.ctp-cr-block { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
/* A döntés gombjai a csomag alján, jobbra (mockup); keskeny képernyőn teljes szélességben. */
.ctp-rv-row.ctp-cr-block > .ctp-rv-actions { justify-self: end; width: min(100%, 34rem); }
.ctp-cr-head { display: flex; align-items: flex-start; gap: var(--space-6); }
.ctp-cr-head-text { flex: 1; min-width: 0; display: grid; gap: var(--space-2); }
.ctp-cr-title { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: -0.01em; color: var(--color-text-strong); overflow-wrap: anywhere; }
.ctp-cr-period { margin: 0; display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-subtle); }
.ctp-cr-sizes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-6); }
/* A képaláírás a keret szélességéhez igazodik (min. 7,5rem), így a méretek egymás mellett maradnak. */
.ctp-cr-size { margin: 0; display: grid; gap: var(--space-3); justify-items: center; width: min-content; min-width: 7.5rem; max-width: 100%; }
.ctp-cr-frame {
  --ctp-cr-h: 170px; /* a négy alapméret (1:1 · 4:5 · 9:16 · 1,91:1) így asztalon egy sorban fér el (mockup) */
  position: relative;
  display: grid;
  place-items: center;
  height: var(--ctp-cr-h);
  width: calc(var(--ctp-cr-h) * (var(--ctp-ar, 1 / 1))); /* határozott szélesség: a képaláírás ehhez igazodik */
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
  font: inherit;
}
.ctp-cr-frame.is-small { --ctp-cr-h: 120px; }
button.ctp-cr-frame { cursor: zoom-in; }
button.ctp-cr-frame:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ctp-cr-frame > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ctp-cr-frame .ctp-video-player { height: 100%; max-height: none; object-fit: contain; }
.ctp-cr-frame.is-broken { background: var(--color-danger-soft); }
.ctp-cr-frame.is-missing {
  border: 2px dashed var(--color-danger);
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: var(--text-xs);
  text-align: center;
}
.ctp-cr-frame.is-missing > span { padding: var(--space-3); }
.ctp-cr-label { font-size: var(--text-xs); color: var(--color-text-subtle); text-align: center; overflow-wrap: anywhere; }
.ctp-cr-label b { font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.ctp-cr-copy {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-3) var(--space-8);
  padding: var(--space-7) var(--space-8);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  font-size: var(--text-sm);
}
.ctp-cr-copy dt { color: var(--color-text-subtle); }
.ctp-cr-copy dd { margin: 0; color: var(--color-text-strong); white-space: pre-wrap; overflow-wrap: anywhere; }
.ctp-cr-detail { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
.ctp-rv-option .ctp-cr-sizes { gap: var(--space-5); }
/* Ügynökség: méret-jelzők a kártyán (`.ff-badge`), méretenkénti hely a fiók médiadobozában. */
.ctp-cr-aspects { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* a méret-jelzők a közös `.ff-badge`-ek */
.ctp-cr-slots { align-items: flex-end; }
.ctp-cr-slot { position: relative; display: grid; gap: var(--space-2); justify-items: center; max-width: 100%; }
.ctp-cr-slot .ctp-cr-frame { --ctp-cr-h: 96px; }
@media (max-width: 760px) {
  .ctp-cr-frame { --ctp-cr-h: 110px; }
  .ctp-cr-frame.is-small { --ctp-cr-h: 84px; }
  .ctp-cr-size { min-width: 5.5rem; }
  .ctp-cr-sizes { gap: var(--space-5); }
  .ctp-cr-title { font-size: var(--text-xl); }
  .ctp-cr-head { flex-wrap: wrap; }
  .ctp-cr-copy { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .ctp-cr-copy dd + dt { margin-top: var(--space-3); }
}

/* Tartalomnaptár (M7.2, spec §8) — havi rács (CSS grid, nem táblázat) + heti lista. A típus-színek itt, CSS-változóként
   élnek (a JS csak `is-post` / `is-promo` / `is-blog` / `is-event` osztályt tesz), a mockup palettájával. */
.ctp-cal-top,
.ctp-cal,
.ctp-cal-week,
.ctp-cal-daylist,
.ctp-cal-facts,
.ctp-editor {
  /* UI-K2: a típus-színek a közös palettából (`--ctp-ty-*`, a CTP-szekció elején) — itt csak a rövid nevek. */
  --ctp-cal-post: var(--ctp-ty-post);   --ctp-cal-post-bg: var(--ctp-ty-post-bg);   --ctp-cal-post-ink: var(--ctp-ty-post-ink);
  --ctp-cal-promo: var(--ctp-ty-promo); --ctp-cal-promo-bg: var(--ctp-ty-promo-bg); --ctp-cal-promo-ink: var(--ctp-ty-promo-ink);
  --ctp-cal-blog: var(--ctp-ty-blog);   --ctp-cal-blog-bg: var(--ctp-ty-blog-bg);   --ctp-cal-blog-ink: var(--ctp-ty-blog-ink);
  --ctp-cal-event: var(--ctp-ty-event); --ctp-cal-event-bg: var(--ctp-ty-event-bg); --ctp-cal-event-ink: var(--ctp-ty-event-ink);
  --ctp-cal-idea: var(--ctp-ty-idea);
}
.ctp-cal-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-12); margin-bottom: var(--space-8); }
/* UI-NP2 / NP4: nagy cím + alcím, és az időszak-navigáció egy vezérlőben (a közös gombokkal). */
.ctp-cal-head { display: grid; gap: var(--space-1); margin-bottom: var(--space-6); }
.ctp-cal-h1 { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: 1.2; color: var(--color-text-strong); }
.ctp-cal-h1-sub { margin: 0; font-size: var(--text-sm); color: var(--color-text-subtle); }
.ctp-cal-nav { display: inline-flex; align-items: center; gap: var(--space-2); }
.ctp-cal-title { margin: 0; min-width: 10ch; text-align: center; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.ctp-cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-8); font-size: var(--text-sm); color: var(--color-text-subtle); }
.ctp-cal-key { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-3); font: inherit; color: inherit; background: none; border: 1px solid transparent; border-radius: 999px; }
/* UI-NP5: a jelmagyarázat-címke kapcsoló — a kikapcsolt halvány és áthúzott. */
button.ctp-cal-key { cursor: pointer; }
button.ctp-cal-key:hover { border-color: var(--line); }
button.ctp-cal-key:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.ctp-cal-key.is-off { opacity: 0.45; text-decoration: line-through; }
.ctp-cal-key-note { font-size: var(--text-xs); }
.ctp-cal-sw { display: inline-block; width: 12px; height: 12px; border-radius: 4px; background: var(--ctp-cal-c, var(--color-border)); }
.ctp-cal-sw.is-idea { background: transparent; border: 1px dashed var(--ctp-cal-idea); }
.ctp-cal-hint { margin: var(--space-6) 0; font-size: var(--text-sm); color: var(--color-text-subtle); }

/* A típus → szín hozzárendelés egy helyen (a rács bejegyzése, a lista sora és a jelmagyarázat is ezt kapja). */
.ctp-cal-top .is-post, .ctp-cal .is-post, .ctp-cal-week .is-post { --ctp-cal-c: var(--ctp-cal-post); --ctp-cal-bg: var(--ctp-cal-post-bg); --ctp-cal-ink: var(--ctp-cal-post-ink); }
.ctp-cal-top .is-promo, .ctp-cal .is-promo, .ctp-cal-week .is-promo { --ctp-cal-c: var(--ctp-cal-promo); --ctp-cal-bg: var(--ctp-cal-promo-bg); --ctp-cal-ink: var(--ctp-cal-promo-ink); }
.ctp-cal-top .is-blog, .ctp-cal .is-blog, .ctp-cal-week .is-blog { --ctp-cal-c: var(--ctp-cal-blog); --ctp-cal-bg: var(--ctp-cal-blog-bg); --ctp-cal-ink: var(--ctp-cal-blog-ink); }
.ctp-cal-top .is-event, .ctp-cal .is-event, .ctp-cal-week .is-event { --ctp-cal-c: var(--ctp-cal-event); --ctp-cal-bg: var(--ctp-cal-event-bg); --ctp-cal-ink: var(--ctp-cal-event-ink); }
/* E5 (KU-E2): a kézi bejegyzés a SZERZŐ színét kapja (a rács, a heti lista, a nap listája, a fiók és a jelmagyarázat is). */
.ctp-cal-top .is-from-agency, .ctp-cal .is-from-agency, .ctp-cal-week .is-from-agency,
.ctp-cal-daylist .is-from-agency, .ctp-editor .is-from-agency { --ctp-cal-c: var(--ctp-by-agency); --ctp-cal-bg: var(--ctp-by-agency-bg); --ctp-cal-ink: var(--ctp-by-agency-ink); }
.ctp-cal-top .is-from-client, .ctp-cal .is-from-client, .ctp-cal-week .is-from-client,
.ctp-cal-daylist .is-from-client, .ctp-editor .is-from-client { --ctp-cal-c: var(--ctp-by-client); --ctp-cal-bg: var(--ctp-by-client-bg); --ctp-cal-ink: var(--ctp-by-client-ink); }
.ctp-cal-daylist .is-post { --ctp-cal-c: var(--ctp-cal-post); --ctp-cal-bg: var(--ctp-cal-post-bg); --ctp-cal-ink: var(--ctp-cal-post-ink); }
.ctp-cal-daylist .is-promo { --ctp-cal-c: var(--ctp-cal-promo); --ctp-cal-bg: var(--ctp-cal-promo-bg); --ctp-cal-ink: var(--ctp-cal-promo-ink); }
.ctp-cal-daylist .is-blog { --ctp-cal-c: var(--ctp-cal-blog); --ctp-cal-bg: var(--ctp-cal-blog-bg); --ctp-cal-ink: var(--ctp-cal-blog-ink); }
.ctp-cal-daylist .is-event { --ctp-cal-c: var(--ctp-cal-event); --ctp-cal-bg: var(--ctp-cal-event-bg); --ctp-cal-ink: var(--ctp-cal-event-ink); }
/* A jelmagyarázat típus-kulcsa ikon a típus színében (a kézi bejegyzésen is az ikon jelzi a típust). */
.ctp-cal-key-icon { color: var(--ctp-cal-c, currentColor); font-size: var(--text-base); }

/* Havi rács: fejléc-sor + 4–6 hét, hétfőtől vasárnapig. */
.ctp-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ctp-cal-wd {
  padding: var(--space-4) var(--space-5);
  background: var(--navy);
  color: var(--color-on-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.ctp-cal-wd-long { display: inline-block; }
.ctp-cal-wd-long::first-letter { text-transform: uppercase; }
.ctp-cal-wd-short { display: none; }
.ctp-cal-day {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  min-height: 118px;
  padding: var(--space-3) var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ctp-cal-day:nth-child(7n) { border-right: 0; }
.ctp-cal-day.is-weekend { background: var(--color-surface-subtle-2); }
.ctp-cal-day.is-out { background: var(--color-surface-subtle); }
.ctp-cal-day.is-out .ctp-cal-dn { color: var(--color-text-muted); }
.ctp-cal-day.is-today { background: var(--color-primary-soft); }
.ctp-cal-day.is-today .ctp-cal-dn > span:first-child {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  height: 1.6em;
  border-radius: var(--radius-pill);
  background: var(--green-strong);
  color: var(--color-on-primary);
}
.ctp-cal-day.is-over,
.ctp-cal-wday.is-over { outline: 2px dashed var(--green); outline-offset: -3px; background: var(--color-primary-soft); }
.ctp-cal-dn { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.ctp-cal-add {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--green-strong);
  font-size: var(--text-base);
  cursor: pointer;
  opacity: 0;
}
.ctp-cal-day:hover .ctp-cal-add,
.ctp-cal-wday:hover .ctp-cal-add,
.ctp-cal-add:focus-visible { opacity: 1; }
.ctp-cal-add:hover { background: var(--color-primary-soft); }
.ctp-cal-add:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
/* E5: napra kattintva mindkét fél felvesz (az ügyfél saját javaslatot). */
.ctp-cal .ctp-cal-day,
.ctp-cal-week .ctp-cal-wday { cursor: cell; }
.ctp-cal .ctp-cal-evs { display: grid; gap: var(--space-2); min-width: 0; }

/* Egy bejegyzés / tétel a rácsban: bal oldali típus-csík, típus-háttér; az ötlet szaggatott. */
.ctp-cal-ev {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-left: 3px solid var(--ctp-cal-c);
  border-radius: var(--radius-sm);
  background: var(--ctp-cal-bg);
  color: var(--ctp-cal-ink);
  font: inherit;
  font-size: var(--text-xs);
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}
.ctp-cal-ev[draggable="true"] { cursor: grab; }
.ctp-cal-ev.is-dragging { opacity: 0.45; }
.ctp-cal-ev:hover { filter: brightness(0.96); }
.ctp-cal-ev:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
/* Az ötlet szaggatott keretet kap; E5 óta a szerző színében (a kézi bejegyzés mindig szerző-színű — KU-E2). */
.ctp-cal-ev.is-idea { border: 1px dashed var(--ctp-cal-c); border-left: 3px dashed var(--ctp-cal-c); }
.ctp-cal-ev.is-cont { opacity: 0.75; }
.ctp-cal-ev-icon { flex: none; font-size: var(--text-sm); }
.ctp-cal-ev-title { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* E5 (§5.2): a szerző neve kicsiben, a sor alján — a szín sosem egyedüli jel (UI-K1). */
.ctp-cal-ev-by { flex: 1 0 100%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--text-xs); opacity: 0.85; }
.ctp-cal-ev-state { flex: none; margin-left: auto; font-size: var(--text-sm); }
/* UI-K2: a státusz-jel a státusz színében (a típus a sáv és az ikon); cím nélküli sor dőlt helykitöltővel (UI-K7). */
.ctp-cal-ev-state[class*="ctp-tone-"] { color: var(--ctp-tone); }
.ctp-cal-ev-title.is-untitled { font-style: italic; }
.ctp-cal-ev-meta { flex: 1 0 100%; font-size: var(--text-xs); color: var(--color-text-subtle); }

/* Heti lista: napok egymás alatt, a sorok szélesebben (cím + típus + időszak + státusz-jelvény). */
.ctp-cal-week { display: grid; gap: var(--space-6); }
.ctp-cal-wday {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.ctp-cal-wday.is-today { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.ctp-cal-wday-head { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-text-subtle); }
.ctp-cal-wday-head strong { color: var(--color-text-strong); font-size: var(--text-base); }
.ctp-cal-wday-head strong::first-letter { text-transform: uppercase; }
.ctp-cal-week .ctp-cal-evs { display: grid; gap: var(--space-3); }
.ctp-cal-week .ctp-cal-ev { flex-wrap: wrap; padding: var(--space-4) var(--space-6); font-size: var(--text-sm); }
.ctp-cal-week .ctp-cal-ev .ctp-status,
.ctp-cal-daylist .ctp-cal-ev .ctp-status { margin-left: auto; }
.ctp-cal-wday.is-weekend { background: var(--color-surface-subtle-2); }
/* UI-NP6: „+N további” egy zsúfolt napon; kattintásra a nap listája a fiókban. */
.ctp-cal-more { justify-self: start; padding: 0 var(--space-3); font: inherit; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-primary); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.ctp-cal-more:hover { text-decoration: underline; }
.ctp-cal-more:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.ctp-cal-daylist { display: grid; gap: var(--space-3); }
.ctp-cal-daylist .ctp-cal-ev { flex-wrap: wrap; padding: var(--space-4) var(--space-6); font-size: var(--text-sm); }
.ctp-cal-week .ctp-cal-ev-title { flex: 1 1 12rem; font-weight: var(--weight-semibold); }
.ctp-cal-none { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* A fiók: olvasó-nézet tényei + a kötött tétel doboza + törlés-megerősítés. */
.ctp-cal-facts { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-4) var(--space-8); font-size: var(--text-sm); }
.ctp-cal-facts dt { color: var(--color-text-subtle); }
.ctp-cal-facts dd { margin: 0; color: var(--color-text-strong); white-space: pre-wrap; overflow-wrap: anywhere; }
.ctp-cal-item {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-8);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}
.ctp-cal-item p { margin: 0; }
.ctp-cal-item-lead { font-size: var(--text-sm); color: var(--color-text-subtle); }
.ctp-cal-item-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); font-size: var(--text-base); color: var(--color-text-strong); }

@media (max-width: 760px) {
  .ctp-cal-wd { padding: var(--space-3) var(--space-1); text-align: center; }
  .ctp-cal-wd-long { display: none; }
  .ctp-cal-wd-short { display: inline; }
  .ctp-cal-day { min-height: 72px; padding: var(--space-2) var(--space-1); }
  .ctp-cal-dn { justify-content: center; font-size: var(--text-xs); }
  .ctp-cal-add { display: none; }
  /* Keskenyen csak a típus-ikon látszik a rácsban; a címet a fiók (koppintás) vagy a Hét nézet adja. */
  .ctp-cal .ctp-cal-ev { justify-content: center; padding: var(--space-1); }
  .ctp-cal .ctp-cal-ev-title,
  .ctp-cal .ctp-cal-ev-state,
  .ctp-cal .ctp-cal-ev-by { display: none; }
  .ctp-cal-wday { padding: var(--space-5) var(--space-6); }
}

/* Riportok (M8.1, spec §9, mockup „Riport”): a riport fejléce, blokkonként egy `.ff-panel`, a számok statisztika-
   csempékben (nagy szám, felirat, típus-bontás, változás az előző időszakhoz). A „Teendőid” sáv a közös UI.page
   visszajelzés-sávja — itt nincs saját stílusa. */
.ctp-rep { display: grid; gap: var(--space-10); }
/* „Teendőid” sáv a riport fölött (mockup): borostyán háttér, harang, a szerver szövege, jobbra a közös elsődleges gomb. */
.ctp-rep-todo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  margin-bottom: var(--space-10);
  padding: var(--space-7) var(--space-10);
  border: 1px solid var(--c-amber-tint);
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--c-amber-tint), var(--panel));
}
.ctp-rep-todo > i { font-size: var(--text-2xl); color: var(--c-amber-700); }
.ctp-rep-todo p { flex: 1 1 240px; margin: 0; font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.ctp-rep-block { padding: var(--space-10) var(--space-12); }
.ctp-rep-title {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 var(--space-8);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}
.ctp-rep-sub { margin-left: auto; font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-text-subtle); }
.ctp-rep-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.ctp-rep-stat {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-7) var(--space-8);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}
.ctp-rep-stat b { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: 1.15; color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
.ctp-rep-stat span { font-size: var(--text-sm); color: var(--color-text-strong); }
.ctp-rep-stat small { font-size: var(--text-xs); color: var(--color-text-subtle); }
.ctp-rep-note { margin: var(--space-8) 0 0; font-size: var(--text-sm); color: var(--color-text-subtle); }
.ctp-rep-note strong { color: var(--color-text-strong); font-weight: var(--weight-semibold); }

/* Mérési források sáv + Hirdetések blokk (M8.2, mockup „Mit mérünk” + KPI-kártyák). A platform-színek itt élnek, CSS-
   változóként (a JS csak `is-meta` / `is-google` / `is-ok` / `is-warn` / `is-no` osztályt tesz), a mockup palettájával. */
.ctp-rep,
.ctp-rep-sources {
  --ctp-rep-meta: #1877F2;
  --ctp-rep-google: #EA4335;
}
.ctp-rep-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-8);
}
.ctp-rep-sources-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-subtle); }
.ctp-rep-source {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-6) var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-strong);
}
.ctp-rep-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-neutral-600); }
.ctp-rep-source.is-ok .ctp-rep-dot { background: var(--c-green-500); }
.ctp-rep-source.is-warn .ctp-rep-dot { background: var(--c-amber-600); }
.ctp-rep-source.is-no { border-style: dashed; color: var(--color-text-subtle); }
.ctp-rep-src {
  display: inline-block;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1.4;
  color: var(--panel);
  background: var(--c-ink-500);
}
.ctp-rep-src.is-meta { background: var(--ctp-rep-meta); }
.ctp-rep-src.is-google { background: var(--ctp-rep-google); }
.ctp-rep-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-6); }
.ctp-rep-kpi {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-8);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}
.ctp-rep-kpi-label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-subtle); }
.ctp-rep-kpi b { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: 1.15; color: var(--color-text-strong); font-variant-numeric: tabular-nums; }
.ctp-rep-kpi small { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-subtle); }
.ctp-rep-delta.is-up { color: var(--c-green-700); }
.ctp-rep-delta.is-down { color: var(--c-red-600); }
.ctp-rep-notes { display: grid; gap: var(--space-2); margin: var(--space-8) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--color-text-subtle); }
.ctp-rep-notes li { display: flex; align-items: center; gap: var(--space-3); }
.ctp-rep-notes strong { color: var(--color-text-strong); font-weight: var(--weight-semibold); }
.ctp-rep-subtitle {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin: var(--space-10) 0 var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}
/* Bekötetlen forrás helye: szaggatott keret, felirat — sosem nulla (D18). */
/* Beállítások → Mérési források: a fiók-választó görgethető lista (egy ügynökségi kapcsolat alatt sok fiók lehet). */
.ctp-src-accounts {
  display: grid;
  gap: var(--space-3);
  max-height: 260px;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

/* Riport-összefoglaló (M8.3, K21): az AI- (vagy átírt) szöveg olvasható bekezdésekben, alatta az ügynökség gombjai és az
   „Újragenerálás” megerősítő panelje (kézzel átírt szövegnél). */
.ctp-rep-summary { display: grid; gap: var(--space-6); }
.ctp-rep-summary .ctp-rep-title { margin-bottom: 0; }
.ctp-rep-summary-text { margin: 0; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text-strong); max-width: 72ch; }
.ctp-rep-summary .ctp-form-foot { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.ctp-rep-confirm {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-8);
  border: 1px solid var(--c-amber-tint);
  border-radius: var(--radius-md);
  background: var(--c-amber-tint);
}

/* Beállítások → Riport: a prompt-szerkesztő a teljes űrlap-szélességen, alatta a helyőrzők listája. */
.ctp-form .ctp-prompt { width: 100%; }
.ctp-prompt-tokens { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-10); font-size: var(--text-sm); color: var(--color-text-subtle); }
.ctp-prompt-tokens code { color: var(--color-text-strong); }

@media (max-width: 640px) {
  .ctp-rep-block { padding: var(--space-8); }
  .ctp-rep-stats { grid-template-columns: minmax(0, 1fr); }
  .ctp-rep-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Blogcikkek — a cikk-törzs tipográfiája (M9.1). CSAK a `.ctp-blog-body` alatt él (a szerver tisztított HTML-je: címsor,
   bekezdés, lista, idézet, link). Táblázat-stílus szándékosan nincs (UI-kapu U4) — a cikk táblázata a böngésző alapját kapja.
   A kártya elrendezése az E4-es blokkban (a CTP-szekció végén). */
.ctp-blog-body { font-size: var(--text-md); line-height: 1.65; color: var(--color-text-row); overflow-wrap: anywhere; }
.ctp-blog-body h2 { margin: var(--space-10) 0 var(--space-3); font-size: var(--text-xl); line-height: 1.25; color: var(--color-text-strong); }
.ctp-blog-body h3,
.ctp-blog-body h4 { margin: var(--space-8) 0 var(--space-2); font-size: var(--text-lg); line-height: 1.3; color: var(--color-text-strong); }
.ctp-blog-body p,
.ctp-blog-body ul,
.ctp-blog-body ol,
.ctp-blog-body blockquote { margin: 0 0 var(--space-5); }
.ctp-blog-body ul,
.ctp-blog-body ol { padding-left: var(--space-10); }
.ctp-blog-body dl { margin: 0 0 var(--space-5); }
.ctp-blog-body dt { font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.ctp-blog-body dd { margin: 0 0 var(--space-3) var(--space-6); }
.ctp-blog-body blockquote { padding-left: var(--space-6); border-left: 3px solid var(--line); color: var(--color-text-subtle); }
.ctp-blog-body a { color: var(--color-primary); }
.ctp-blog-edit {
  min-height: 200px;
  margin: 0 calc(-1 * var(--space-4));
  padding: var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  outline: none;
}
.ctp-blog-edit:focus { border-color: var(--green); background: var(--color-surface-subtle); }

/* UI7 — Riport elrendezés (SPEC-tartalomgyartas-ui-overhaul.md §3.1): nagy cím + alcím, KPI-sáv teljes szélességben,
   két oszlop (1,55fr / 1fr, 1100 px alatt egy), kiemelt „A hét röviden”, tömör „Nincs bekötve”, kompakt csempék. */
.ctp-rep-head { display: grid; gap: var(--space-1); }
.ctp-rep-h1 { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: 1.2; color: var(--color-text-strong); }
.ctp-rep-h1-sub { margin: 0; font-size: var(--text-sm); color: var(--color-text-subtle); }
.ctp-rep-kpis.is-top { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ctp-rep-kpis.is-top .ctp-rep-kpi { background: var(--panel); }
.ctp-rep-kpi.is-off b { color: var(--color-text-muted); }
.ctp-rep-kpi.is-off small { font-weight: var(--weight-normal); }
.ctp-rep-off {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-5) var(--space-8);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}
.ctp-rep-off > .ti { font-size: var(--text-lg); color: var(--color-text-muted); }
.ctp-rep-off p { flex: 1 1 18rem; margin: 0; }
.ctp-rep-off strong { color: var(--color-text-strong); }
.ctp-rep-off + .ctp-rep-notes { margin-top: 0; }
.ctp-rep-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-10); align-items: start; }
.ctp-rep-cols.is-single { grid-template-columns: minmax(0, 1fr); }
.ctp-rep-main, .ctp-rep-side { display: grid; gap: var(--space-10); min-width: 0; }
.ctp-rep-brief {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius);
  background: var(--ctp-st-done);
  color: var(--ctp-ty-post-bg);
}
.ctp-rep-brief-tag { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; }
.ctp-rep-brief-title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--panel); }
.ctp-rep-brief .ctp-rep-summary-text { color: var(--panel); }
.ctp-rep-brief-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: var(--text-xs); opacity: 0.9; }
.ctp-rep-stats.is-compact { gap: var(--space-4); }
.ctp-rep-compact .ctp-rep-stat { padding: var(--space-5) var(--space-6); }
.ctp-rep-compact .ctp-rep-stat b { font-size: var(--text-xl); }
.ctp-rep-none { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-size: var(--text-sm); color: var(--color-text-subtle); }
@media (max-width: 1100px) {
  .ctp-rep-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ctp-rep-brief { padding: var(--space-8); }
}

/* UI3 — Posztok lista (SPEC-tartalomgyartas-ui-overhaul.md §3.3): kártyafej, behúzási cél a kártyán, heti haladás. */
.ctp-card-head { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.ctp-card-day { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text-strong); white-space: nowrap; }
.ctp-card-date { font-size: var(--text-xs); color: var(--color-text-subtle); white-space: nowrap; }
.ctp-card-drop { display: grid; justify-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--ctp-tone-ink, var(--color-text-subtle)); }
.ctp-card-drop .ti { font-size: var(--text-2xl); }
.ctp-card.is-over { outline: 2px dashed var(--ctp-st-approved); outline-offset: 2px; }
.ctp-week-progress { display: inline-flex; align-items: center; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-text-strong); }
.ctp-week-progress progress { width: 96px; height: 6px; accent-color: var(--ctp-st-approved); }
.ctp-week-counts { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ctp-add.is-slim { min-height: 0; aspect-ratio: auto; align-self: start; padding: var(--space-8) var(--space-6); }
.ctp-add.is-slim .ti { font-size: var(--text-xl); }

/* UI8 — Beállítások (SPEC-tartalomgyartas-ui-overhaul.md §3.7): fül-fejléc címke, „Első lépések” ellenőrzőlista,
   kapcsolós ügyfél-felhasználó lista, a Tartalomgyártó fül két része. */
.ctp-need {
  display: inline-block;
  margin-right: var(--space-2);
  padding: 0 var(--space-4);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  vertical-align: 1px;
}
.ctp-need.is-must { background: var(--ctp-st-changes-bg); color: var(--ctp-st-changes-ink); }
.ctp-need.is-opt { background: var(--ctp-st-draft-bg); color: var(--ctp-st-draft-ink); }

.ctp-setup { display: grid; gap: var(--space-8); max-width: 820px; padding-top: var(--space-6); }
.ctp-setup-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); font-size: var(--text-md); color: var(--color-text-strong); }
.ctp-setup-head progress { flex: 1 1 12rem; max-width: 320px; height: 8px; accent-color: var(--ctp-st-approved); }
.ctp-setup-done {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-7);
  border-radius: var(--radius-sm);
  background: var(--ctp-st-approved-bg);
  color: var(--ctp-st-approved-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.ctp-setup-part { padding: var(--space-8) var(--space-10); }
.ctp-setup-title { margin: 0 0 var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.ctp-setup-title small { font-weight: var(--weight-normal); color: var(--color-text-subtle); }
.ctp-setup-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ctp-setup-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--line);
}
.ctp-setup-step:first-child { border-top: 0; }
.ctp-setup-step > .ti { font-size: var(--text-xl); }
.ctp-setup-step.is-done > .ti { color: var(--ctp-st-approved); }
.ctp-setup-step.is-todo > .ti { color: var(--ctp-st-changes); }
.ctp-setup-step.is-opt > .ti { color: var(--ctp-st-draft); }
.ctp-setup-text { display: grid; gap: var(--space-1); min-width: 0; }
.ctp-setup-text strong { font-size: var(--text-sm); color: var(--color-text-strong); }
.ctp-setup-text span { font-size: var(--text-sm); color: var(--color-text-subtle); }
.ctp-setup-soon { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }

.ctp-people { display: grid; gap: 0; padding: var(--space-4) var(--space-10); max-width: 820px; }
.ctp-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--line);
}
.ctp-person-av {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--ctp-ty-post-bg);
  color: var(--ctp-ty-post-ink);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.ctp-person-text { display: grid; min-width: 0; }
.ctp-person-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); color: var(--color-text-strong); }
.ctp-person-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); color: var(--color-text-subtle); }
.ctp-people-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin: var(--space-6) 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-subtle); }
/* Kapcsoló: a natív jelölőnégyzet `role="switch"`-csel (billentyűvel, képernyőolvasóval ugyanúgy működik), csak a kinézet saját. */
.ctp-switch { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-strong); cursor: pointer; white-space: nowrap; }
.ctp-switch input {
  appearance: none;
  position: relative;
  flex: none;
  width: 2.25rem;
  height: 1.25rem;
  margin: 0;
  border-radius: 999px;
  background: var(--color-border);
  cursor: pointer;
  transition: background 0.15s;
}
.ctp-switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.25rem - 4px);
  height: calc(1.25rem - 4px);
  border-radius: 50%;
  background: var(--panel);
  box-shadow: var(--shadow);
  transition: transform 0.15s;
}
.ctp-switch input:checked { background: var(--ctp-st-approved); }
.ctp-switch input:checked::after { transform: translateX(1rem); }
.ctp-switch input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ctp-switch input:disabled { opacity: 0.45; cursor: not-allowed; }
.ctp-switch input:disabled + span { color: var(--color-text-muted); }
.ctp-set-part { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.ctp-mail-state { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
@media (max-width: 700px) {
  .ctp-person { grid-template-columns: auto minmax(0, 1fr); }
  .ctp-person .ctp-switch { grid-column: 2; }
  .ctp-setup-step { grid-template-columns: auto minmax(0, 1fr); }
  .ctp-setup-go { grid-column: 2; justify-self: start; }
  .ctp-people, .ctp-setup-part { padding-left: var(--space-6); padding-right: var(--space-6); }
}

/* E2 — Posztok egy felületen (SPEC-tartalomgyartas-egyszerusites.md §2, E-PO1–PO8). Oldalsó fiók nincs: ügynökségnél minden
   poszt egy helyben szerkeszthető sor (`.ctp-prow`), a beküldött / eldöntött sor tömör; ügyfélnél a kép felül, egy sorban.
   A fülek a közös `.ff-tabs` / `.ff-tab` — itt csak a tartójuk térköze él (`.ctp-opt-switch`), a fület magát nem formázzuk. */
.ctp-week-top { display: grid; gap: var(--space-6); }
.ctp-prows { display: grid; gap: var(--space-8); }
.ctp-prow {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-10);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ctp-tone, var(--line));
  border-radius: var(--radius);
  scroll-margin-top: var(--space-14);
}
.ctp-prow.is-compact { padding: var(--space-5) var(--space-8); }
.ctp-prow.is-over { border-color: var(--green); background: var(--color-primary-soft); }
.ctp-prow-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); min-width: 0; }
.ctp-prow-when {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: 0;
  font: inherit;
  color: var(--color-text-strong);
  background: none;
  border: 0;
}
.ctp-prow-when .ctp-card-day { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.ctp-prow-when.is-edit { cursor: pointer; border-radius: var(--radius-sm); }
.ctp-prow-when.is-edit .ti { align-self: center; color: var(--color-text-subtle); }
.ctp-prow-when.is-edit:hover .ti { color: var(--green); }
.ctp-prow-when:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ctp-prow-picker { display: inline-flex; flex-wrap: wrap; gap: var(--space-3); }
.ctp-prow-plats { display: inline-flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.ctp-prow-state { display: inline-flex; align-items: center; gap: var(--space-3); }
.ctp-prow-rounds { font-size: var(--text-xs); color: var(--color-text-subtle); }
.ctp-prow-topic { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 24rem; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.ctp-prow-topic > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ctp-prow-clicks { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-subtle); }
.ctp-prow-save:empty { display: none; }
.ctp-prow-ops { display: inline-flex; flex-wrap: wrap; gap: var(--space-3); }
.ctp-prow-more { position: relative; display: inline-flex; }
.ctp-prow-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  width: max-content;
  max-width: min(22rem, 80vw);
  padding: var(--space-5);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}
.ctp-prow-mini { flex: none; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface-subtle); color: var(--color-text-muted); }
.ctp-prow-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ctp-prow-mini .ctp-video-len { display: none; }
.ctp-prow-mini .ctp-video-play { width: 2rem; height: 2rem; font-size: var(--text-base); }
.ctp-prow-first { flex: 1 1 12rem; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--text-sm); color: var(--color-text-strong); }
.ctp-prow-body { display: grid; gap: var(--space-7); min-width: 0; }
.ctp-prow-body .ff-notice { margin: 0; }
.ctp-prow .ctp-media-item { width: 112px; height: 112px; }
.ctp-prow .ctp-media-item.is-video { width: 100%; max-width: 360px; height: 220px; }
.ctp-prow-more-toggle { justify-self: start; }
.ctp-prow-extra { display: grid; gap: var(--space-8); padding: var(--space-8); border-radius: var(--radius-md); background: var(--color-surface-subtle); }
.ctp-prow-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.ctp-prow-foot > [data-ctp-row-miss]:empty,
.ctp-prow-foot > [data-ctp-send-slot]:empty { display: none; }
.ctp-prow-foot:not(:has(.ctp-miss, .ctp-foot-main)) { display: none; }
.ctp-opt-switch { padding: 0; gap: var(--space-3); border-bottom: 0; background: transparent; }
.ctp-add.is-line { min-height: 0; grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--space-4); padding: var(--space-6) var(--space-8); }
.ctp-add.is-line .ti { font-size: var(--text-xl); }
@media (max-width: 700px) {
  .ctp-prow { padding: var(--space-7); }
  .ctp-prow.is-compact { padding: var(--space-5) var(--space-6); }
  .ctp-prow-plat-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ctp-prow .ctp-media-item { width: 88px; height: 88px; }
  .ctp-prow-ops { flex-basis: 100%; }
}
/* Bal hasáb (2026-10-16, az ügyfél-kártya mockupjának mintájára — posztnál és kreatívnál): a kép / videó helye egy kompakt,
   fix szélességű (20rem), legalább négyzetes doboz a sor bal oldalán; mellette a szöveg, a link és a többi. Üresen a doboz
   KÖZEPÉN egy nagy „+”, és az egész doboz kattintható. Telefonon a kép felül, a többi alatta. */
.ctp-prow-body.is-split { grid-template-columns: 20rem minmax(0, 1fr); align-items: stretch; gap: var(--space-8) var(--space-10); }
.ctp-prow-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ctp-prow-main { display: grid; gap: var(--space-7); align-content: start; min-width: 0; }
.ctp-prow-side > .ctp-media { flex: 1 1 auto; min-height: 20rem; align-content: flex-start; }
.ctp-prow-side > .ctp-media:not(.ctp-crow-media) { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.ctp-prow-side .ctp-media-item,
.ctp-prow-side .ctp-media:not(.ctp-crow-media) .ctp-media-add { width: auto; height: auto; aspect-ratio: 1; }
.ctp-prow-side .ctp-media-help,
.ctp-prow-side .ctp-video-state { grid-column: 1 / -1; }
.ctp-prow-side .ctp-media.is-single .ctp-media-item:first-child,
.ctp-prow-side .ctp-media-item.is-video { grid-column: 1 / -1; width: auto; max-width: none; height: auto; aspect-ratio: 4 / 5; }
.ctp-prow-side .ctp-media.is-single .ctp-media-item:first-child img { object-fit: contain; background: var(--panel); }
/* A kreatív-keret magassága a hasáb szélességéhez igazodik: a fekvő (1,91:1) kép sem lóg ki, az aránya marad. */
.ctp-prow-side > .ctp-crow-media { container-type: inline-size; }
.ctp-prow-side .ctp-crow-tile .ctp-cr-frame { --ctp-cr-h: min(200px, calc(100cqi / (var(--ctp-ar, 1 / 1)))); }
.ctp-prow-side > .ctp-media.is-empty {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap; /* a `.ctp-media` alapja `wrap` — azzal a sor csak a súgó szélességéig érne, és balra pakolódna */
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  text-align: center;
  cursor: pointer;
}
.ctp-prow-side > .ctp-media.is-empty:hover { border-color: var(--green); background: var(--color-primary-soft); }
.ctp-prow-side .ctp-media.is-empty .ctp-media-add { width: 7.5rem; height: 7.5rem; aspect-ratio: auto; align-self: center; font-size: var(--text-4xl); }
.ctp-prow-side .ctp-media.is-empty .ctp-media-help { flex: none; max-width: 17rem; }
@media (max-width: 760px) {
  .ctp-prow-body.is-split { grid-template-columns: minmax(0, 1fr); }
  .ctp-prow-side > .ctp-media { min-height: 0; }
  .ctp-prow-side > .ctp-media.is-empty { min-height: 12rem; }
  .ctp-prow-side .ctp-media.is-empty .ctp-media-add { width: 5.5rem; height: 5.5rem; }
  .ctp-prow-side .ctp-crow-tile .ctp-cr-frame { --ctp-cr-h: min(150px, calc(100cqi / (var(--ctp-ar, 1 / 1)))); }
}

/* Ügyfél (E-PO4, PO8): a sor egy oszlop — fejléc, alatta a képek egy sorban, a szöveg, a link, alul a döntés. */
.ctp-rv-row.is-stack { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.ctp-rv-strip { display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-2); scroll-snap-type: x mandatory; }
.ctp-rv-shot {
  position: relative;
  flex: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  cursor: zoom-in;
  scroll-snap-align: start;
}
.ctp-rv-shot img { display: block; height: 300px; width: auto; max-width: 80vw; object-fit: cover; }
.ctp-rv-strip.is-single .ctp-rv-shot img { height: auto; max-height: 460px; max-width: 100%; object-fit: contain; }
.ctp-rv-shot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ctp-rv-shot.is-broken { background: var(--color-danger-soft); min-width: 120px; min-height: 120px; }
.ctp-rv-option .ctp-rv-shot img { height: 220px; }
.ctp-rv-decide { display: grid; gap: var(--space-4); }
.ctp-rv-rounds { justify-self: end; font-size: var(--text-sm); color: var(--color-text-subtle); }
.ctp-rv-norounds { margin: 0; display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-subtle); line-height: var(--leading-normal); }
.ctp-rv-norounds .ti { flex: none; margin-top: 2px; }
/* D-E8: asztalon az opciók egymás mellett (a fülsor rejtve), telefonon fülek (csak a kiválasztott opció látszik). */
.ctp-rv-row .ctp-opt-switch { display: none; }
@media (max-width: 760px) {
  .ctp-rv-row .ctp-opt-switch { display: flex; }
  .ctp-rv-ab .ctp-rv-option:not(.is-on) { display: none; }
  .ctp-rv-shot img { height: 220px; }
  .ctp-rv-rounds { justify-self: center; }
}

/* E3 — Kreatív-sorok (SPEC-tartalomgyartas-egyszerusites.md §3, E-KR1–KR4). Ugyanaz a sor-minta, mint a posztnál (`.ctp-prow`),
   két eltéréssel: a sornak nagy, szerkeszthető címe van, és a képek a VALÓS arányukban állnak egy sorban (a keret a
   `.ctp-cr-frame`, a `--ctp-ar` CSS-változóval), alattuk a tájolás-címke és a variáció-felirat. Előtag: `.ctp-crow-`. */
.ctp-crow-title {
  flex: 1 1 18rem;
  min-width: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-strong);
}
.ctp-crow-name { display: grid; gap: var(--space-1); flex: 1 1 14rem; min-width: 0; }
.ctp-crow-name strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--text-base); color: var(--color-text-strong); }
.ctp-crow-name.is-big strong { white-space: normal; overflow-wrap: anywhere; font-size: var(--text-xl); font-weight: var(--weight-bold); }
.ctp-crow-period { font-size: var(--text-xs); color: var(--color-text-subtle); }
.ctp-crow-dates { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); }
.ctp-crow-date { display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-strong); }
.ctp-crow-date small { color: var(--color-text-subtle); font-weight: var(--weight-normal); }
.ctp-crow-media { align-items: flex-end; gap: var(--space-7) var(--space-6); }
.ctp-crow-media .ctp-media-add { width: 96px; height: 96px; align-self: center; }
.ctp-crow-tile { position: relative; margin: 0; display: grid; gap: var(--space-2); justify-items: center; width: min-content; min-width: 7.5rem; max-width: 100%; }
.ctp-crow-tile[draggable="true"] { cursor: grab; }
.ctp-crow-tile.is-dragging { opacity: 0.4; }
.ctp-crow-tile .ctp-cr-frame { --ctp-cr-h: 140px; }
.ctp-crow-label { width: 100%; min-width: 0; font-size: var(--text-xs); }
.ctp-crow-variant { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-strong); text-align: center; overflow-wrap: anywhere; }
.ctp-crow-get { font-size: var(--text-xs); }
@media (max-width: 700px) {
  .ctp-crow-title { flex-basis: 100%; font-size: var(--text-lg); }
  .ctp-crow-tile { min-width: 5.5rem; }
  .ctp-crow-tile .ctp-cr-frame { --ctp-cr-h: 104px; }
  .ctp-crow-media .ctp-media-add { width: 76px; height: 76px; }
}

/* E4 — Blog-kártyák (SPEC-tartalomgyartas-egyszerusites.md §4, E-BL1–BL4). Ugyanaz a sor-minta, mint a posztnál és a
   kreatívnál (`.ctp-prow`): cím → szöveg → kép, oldalsó panel, AI-generálás és SEO-fül nélkül. Az ügyfél-kártya a `.ctp-rv-row`
   egy oszlopa; a B után asztalon egymás mellett, telefonon fülek (D-E8, a közös `.ctp-rv-ab` szabálya). Előtag: `.ctp-blog-`. */
.ctp-blog-text { max-width: 760px; }
.ctp-blog-edit.ctp-blog-text { margin: 0; }
.ctp-blog-head { margin: 0; max-width: 760px; font-size: var(--text-2xl); line-height: 1.2; color: var(--color-text-strong); overflow-wrap: anywhere; }
.ctp-blog-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ctp-blog-pic {
  display: block;
  margin: 0;
  padding: 0;
  max-width: 760px;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}
.ctp-blog-pic img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.ctp-blog-pic.is-zoom { cursor: zoom-in; }
.ctp-blog-pic.is-zoom:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ctp-blog-pic.is-over { outline: 2px dashed var(--ctp-st-approved); outline-offset: -4px; }
.ctp-blog-detail { display: grid; gap: var(--space-6); padding-top: var(--space-6); }
.ctp-rv-option .ctp-blog-head { font-size: var(--text-xl); }
.ctp-rv-option .ctp-blog-body { font-size: var(--text-base); }
@media (max-width: 700px) {
  .ctp-blog-head { font-size: var(--text-xl); }
}

/* Poszt-kártya a mockup szerint (2026-10-16, MOCKUP-tartalomgyartas.html „függő poszt”; Laci: „teljesen másold le”). Az
   ügyfél-nézet és az ügynökség NEM szerkeszthető poszt-sora is ez (`ContentPortalPosts.shared.postCardHtml`): balra egy
   340 px-es, 4:5-ös kép (több képnél nyilakkal lapozható, „1 / 3”), jobbra az ügyfél neve + a megjelenés, a két platform-
   ikon (az aktív színes, a másik halvány), a státusz, a szöveg, a link-doboz (rövid link → cél), alul a nagy gombok.
   A kép `contain`: jóváhagyáskor a teljes képet kell látni, nem egy kivágást. Előtag: `.ctp-pv-`. */
.ctp-pv {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  min-height: 425px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
/* A kerekítést a kép-rész vágja (nem a kártya), hogy a tükör-nézet „···” menüje kilóghasson a kártyából. */
.ctp-pv-media { position: relative; min-height: 425px; overflow: hidden; border-radius: var(--radius-lg) 0 0 var(--radius-lg); background: var(--color-surface-subtle); }
.ctp-pv-media.is-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.ctp-pv-media.is-empty > .ti { font-size: var(--text-4xl); }
.ctp-pv-slide { position: absolute; inset: 0; display: none; }
.ctp-pv-slide.is-on { display: block; }
.ctp-pv-slide > img,
.ctp-pv-zoom > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ctp-pv-zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ctp-pv-zoom:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.ctp-pv-slide .ctp-video-tile { border-radius: 0; }
.ctp-pv-slide .ctp-video-player { height: 100%; max-height: none; border-radius: 0; object-fit: contain; }
.ctp-pv-slide.is-broken { background: var(--color-danger-soft); }
.ctp-pv-nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: var(--panel);
  color: var(--color-text-strong);
  box-shadow: var(--shadow);
  font-size: var(--text-lg);
  cursor: pointer;
}
.ctp-pv-nav.is-prev { left: var(--space-5); }
.ctp-pv-nav.is-next { right: var(--space-5); }
.ctp-pv-nav:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ctp-pv-count {
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  z-index: 1;
  transform: translateX(-50%);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-overlay);
  color: var(--color-on-primary);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.ctp-pv-body { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; padding: var(--space-9, 18px) var(--space-11, 22px); }
.ctp-pv-top { display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
.ctp-pv-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ctp-pv-avatar-from), var(--ctp-pv-avatar-to));
  color: var(--color-on-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.ctp-pv-who { display: grid; min-width: 0; }
.ctp-pv-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: 1.2; color: var(--color-text-strong); }
.ctp-pv-when { font-size: var(--text-xs); color: var(--color-text-subtle); }
.ctp-pv-plats { display: inline-flex; gap: var(--space-2); font-size: var(--text-lg); }
.ctp-pv-plat { color: var(--color-text-muted); opacity: 0.35; }
.ctp-pv-plat.is-on { opacity: 1; }
.ctp-pv-plat.is-on.is-facebook { color: var(--ctp-fb); }
.ctp-pv-plat.is-on.is-instagram { color: var(--ctp-ig); }
.ctp-pv-note { margin: 0; display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-subtle); line-height: var(--leading-normal); }
.ctp-pv-note > .ti { flex: none; margin-top: 2px; }
.ctp-pv-note.is-warn { color: var(--ctp-st-changes-ink); }
.ctp-pv-note.is-ok { color: var(--ctp-st-approved-ink); }
.ctp-pv-body > .ctp-rv-rounds { align-self: flex-start; }
.ctp-pv-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: var(--text-md); line-height: 1.55; color: var(--color-text-strong); }
.ctp-pv-tag { color: var(--ctp-pv-tag); }
.ctp-pv-label { margin: 0; display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-subtle); }
/* A szöveg után a link és a gombok a kártya aljára kerülnek (mint a mockupon). */
.ctp-pv-text + .ctp-pv-link,
.ctp-pv-text + .ctp-pv-actions { margin-top: auto; }
.ctp-pv-link {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  font-size: var(--text-sm);
  color: var(--color-text-strong);
  text-decoration: none;
}
a.ctp-pv-link:hover { background: var(--color-primary-soft); }
a.ctp-pv-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ctp-pv-link > .ti { flex: none; font-size: var(--text-lg); color: var(--ctp-st-done); }
.ctp-pv-link-text { display: grid; min-width: 0; }
.ctp-pv-link-text b { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.ctp-pv-to { font-size: var(--text-xs); color: var(--color-text-subtle); overflow-wrap: anywhere; }
.ctp-pv-actions { display: flex; flex-wrap: wrap; gap: var(--space-5); padding-top: var(--space-7); border-top: 1px solid var(--line); }
.ctp-pv-actions > * { flex: 1 1 0; min-height: 48px; justify-content: center; }
/* Ügyfél-nézet: a sor maga a kártya (keret nélkül körülötte); a kinyitott lezárt poszt is kártya. */
.ctp-rv-row.is-card { display: block; padding: 0; background: none; border: 0; }
.ctp-rv-detail.is-card { display: block; }
/* A / B választás (mockup „opt”): az opción belül kis kártya — 150 px-es kép balra, szöveg + link jobbra; fejléc nélkül
   (a választás feje fölötte áll); a legutóbbi opció zöld keretes. */
.ctp-pv.is-mini { grid-template-columns: 150px minmax(0, 1fr); min-height: 0; border: 0; box-shadow: none; background: none; }
.ctp-pv.is-mini .ctp-pv-media { min-height: 0; aspect-ratio: 4 / 5; align-self: start; border-radius: var(--radius-md); overflow: hidden; }
.ctp-pv.is-mini .ctp-pv-top { display: none; }
.ctp-pv.is-mini .ctp-pv-body { padding: 0 0 0 var(--space-6); gap: var(--space-4); }
.ctp-pv.is-mini .ctp-pv-text { font-size: var(--text-sm); color: var(--color-text-row); }
.ctp-pv.is-mini .ctp-pv-nav { width: 28px; height: 28px; font-size: var(--text-base); }
.ctp-pv.is-mini .ctp-pv-nav.is-prev { left: var(--space-2); }
.ctp-pv.is-mini .ctp-pv-nav.is-next { right: var(--space-2); }
.ctp-rv-option.ctp-pv-opt.is-latest { border-color: var(--green); background: var(--color-primary-soft); }
/* Blogcikk-kártya a mockup szerint (2026-10-16, MOCKUP „blog”): felül teljes szélességű kép, alatta státusz, nagy cím,
   olvasási idő, a szöveg, alul jobbra a gombok. Az ügyfél minden cikke (lenyitás nélkül) és az ügynökség kész cikke. */
.ctp-blog-sheet {
  display: grid;
  max-width: 820px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.ctp-blog-hero { display: block; width: 100%; height: 260px; padding: 0; border: 0; background: var(--color-surface-subtle); overflow: hidden; }
button.ctp-blog-hero { cursor: zoom-in; }
button.ctp-blog-hero:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.ctp-blog-hero > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ctp-blog-hero.is-broken { background: var(--color-danger-soft); }
.ctp-blog-sheet-body { display: grid; gap: var(--space-5); padding: var(--space-12) var(--space-14) var(--space-8); min-width: 0; }
.ctp-blog-sheet-body > .ctp-blog-head { font-size: var(--text-3xl); line-height: 1.2; }
.ctp-blog-meta { margin: calc(-1 * var(--space-3)) 0 0; font-size: var(--text-xs); color: var(--color-text-subtle); }
.ctp-blog-sheet-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-14);
  border-top: 1px solid var(--line);
}
.ctp-blog-sheet-foot > .ctp-rv-rounds { justify-self: auto; }
.ctp-blog-sheet-after { display: grid; gap: var(--space-6); padding: 0 var(--space-14) var(--space-10); }
.ctp-blog-sheet-after:empty { display: none; }
/* Az A / B opción belül kis kártya (keret és árnyék nélkül, az opció kerete adja). */
.ctp-blog-sheet.is-mini { border: 0; box-shadow: none; background: none; border-radius: var(--radius-md); }
.ctp-blog-sheet.is-mini .ctp-blog-hero { height: 180px; border-radius: var(--radius-md); }
.ctp-blog-sheet.is-mini .ctp-blog-sheet-body { padding: var(--space-6) 0 0; }
.ctp-blog-sheet.is-mini .ctp-blog-sheet-body > .ctp-blog-head { font-size: var(--text-xl); }
.ctp-rv-row.is-card.ctp-blog-card { max-width: 820px; }
/* Szerkesztő: a kép-mező a posztok „+” logikájával — üresen a doboz közepén nagy „+” (az egész doboz kattintható),
   kép esetén a kép nagyban, a sarkában „×”. */
.ctp-blog-media { max-width: 760px; }
.ctp-blog-media.is-empty {
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--space-8);
  min-height: 15rem;
  text-align: center;
  cursor: pointer;
}
.ctp-blog-media.is-empty:hover { border-color: var(--green); background: var(--color-primary-soft); }
.ctp-blog-media.is-empty .ctp-media-add { width: 7.5rem; height: 7.5rem; font-size: var(--text-4xl); }
.ctp-blog-media.is-empty .ctp-media-help { flex: none; max-width: 26rem; }
.ctp-blog-media.is-filled { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.ctp-blog-media.is-filled .ctp-media-help { flex: none; }
.ctp-blog-media-pic { position: relative; }
.ctp-blog-media-pic > img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: contain; border-radius: var(--radius-sm); background: var(--panel); }
.ctp-blog-media-pic.is-broken { min-height: 120px; background: var(--color-danger-soft); }
@media (max-width: 760px) {
  .ctp-blog-hero { height: 180px; }
  .ctp-blog-sheet-body { padding: var(--space-8) var(--space-8) var(--space-6); }
  .ctp-blog-sheet-body > .ctp-blog-head { font-size: var(--text-2xl); }
  .ctp-blog-sheet-foot { padding: var(--space-6) var(--space-8); flex-direction: column-reverse; align-items: stretch; }
  .ctp-blog-sheet-foot > .ctp-grow { display: none; }
  .ctp-blog-sheet-after { padding: 0 var(--space-8) var(--space-8); }
  .ctp-blog-media.is-empty { min-height: 12rem; }
  .ctp-blog-media.is-empty .ctp-media-add { width: 5.5rem; height: 5.5rem; }
}
/* Kreatív (2026-10-16, KU-E9): az elsődleges szöveg és a link olvasva — a poszt-kártya szöveg- és link-dobozával. */
.ctp-crow-copy { display: grid; gap: var(--space-5); max-width: 760px; }
@media (max-width: 760px) {
  .ctp-pv { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ctp-pv-media { min-height: 280px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .ctp-pv-body { padding: var(--space-7) var(--space-8); }
  .ctp-pv-actions { flex-direction: column-reverse; }
  .ctp-pv-actions > * { flex: none; }
  .ctp-pv.is-mini { grid-template-columns: 110px minmax(0, 1fr); }
}

/* Tükör-nézet (2026-10-18, Laci): beküldéstől az ügynökség az ügyfél sorát látja. A döntés-gombok ugyanúgy néznek ki, de nem
   kattinthatók (`ctp-rv-preview`); az ügynökség műveletei a „···” menüben (listaként), a menüből nyíló űrlap a sor alján. */
.ctp-rv-preview { pointer-events: none; }
.ctp-prow-menu.is-list { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: var(--space-2); }
.ctp-prow-menu-note { margin: 0; padding: var(--space-2) var(--space-4) 0; display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-subtle); }
.ctp-mirror-aside { display: grid; gap: var(--space-6); }
.ctp-mirror-aside .ctp-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.ctp-mirror-next { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); padding: var(--space-6) var(--space-7); border-radius: var(--radius-md); background: var(--color-surface-subtle); }
.ctp-mirror-next p { margin: 0; flex: 1 1 16rem; display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-strong); }

/* ===== CTP · VÉGE ============================================================================== */

/* ===== TD · TOTAL DASHBOARD · KEZDET ==========================================================
   Forrás: specs/totaldashboard/SPEC-totaldashboard-keret.md §9–§10 + SPEC-totaldashboard-elemek.md §1–§3.
   A fejléc a közös UI.page (szűrősáv: fiók · időszak · összehasonlítás · „Frissítés most"); ez a szekció csak a
   widget-RÁCSOT (12 oszlop), a cellák állapotát (töltés · halvány · részben bekötött) és a kis csempét adja.
   Színek: a diagram/irány a `--td-chart-*` / `--td-status-*` tokenekből (brandenként más), minden más a közös
   tokenekből. Osztály-előtag: `.td-`.
   ============================================================================================ */
.td-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-8);
}
.td-cell {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 9.5rem;
  padding: var(--space-6) var(--space-8);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.td-size-t { grid-column: span 4; }
.td-size-h { grid-column: span 6; }
.td-size-tt { grid-column: span 8; }
.td-size-f { grid-column: 1 / -1; min-height: 14rem; }
.td-cell.is-off { min-height: 6.5rem; }
@media (max-width: 1400px) {
  .td-size-q { grid-column: span 6; }
  /* a fél szélességű tábla (DataGrid) itt már olvashatatlanul keskeny volna — egész sor */
  .td-size-h { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .td-grid { grid-template-columns: minmax(0, 1fr); }
  .td-cell, .td-size-q, .td-size-t, .td-size-h, .td-size-tt { grid-column: 1 / -1; }
}
.td-cell-head h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-subtle);
  letter-spacing: 0.01em;
}
.td-cell-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* Szerkezeti horgok, alapból rejtve (a brand-blokk kapcsolja be — PLATFORM-STACK §21): a cella forrás-címkéje és a
   rácson belüli szekció-fej (cím + darabszám). A FlowFactory-arcon a rács és a cella változatlan. */
.td-cell-tag, .td-section-head { display: none; }
.td-cell-note { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.td-cell-note:empty { display: none; }
.td-loading { font-size: var(--text-sm); color: var(--color-text-muted); }
/* Halvány cella: nincs bekötve / fejlesztés alatt — az ok egérre (title) és a cellában is olvasható. */
.td-cell.is-off { background: var(--color-surface-subtle); border-style: dashed; opacity: 0.6; cursor: help; }
.td-off {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}
.td-off i { font-size: var(--text-md); flex: none; }

/* Kis csempe: nagy szám · Δ% · kis idődiagram. */
.td-tile { display: flex; flex-direction: column; gap: var(--space-4); flex: 1; min-height: 0; }
.td-tile-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.td-tile-value {
  font-family: var(--font-head);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-strong);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}
.td-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 1px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.td-delta.is-good { color: var(--td-chart-up); background: var(--td-chart-up-soft); }
.td-delta.is-bad { color: var(--td-chart-down); background: var(--td-chart-down-soft); }
.td-delta.is-flat { color: var(--color-text-subtle); background: var(--color-surface-subtle); }
.td-spark { position: relative; height: 3.5rem; margin-top: auto; }

/* Többvonalas idődiagram (TOP 20 termék, elemek §3.2): diagram · forrás-sor · kapcsolható jelmagyarázat.
   A vonal- és a minta-szín a rangból (`data-slot` → `--td-line-N`), a 11–20. szaggatott. */
.td-lines { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.td-lines-plot { position: relative; height: 22rem; }
.td-lines-source { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.td-lines-empty { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
/* Google Ads oldal (SPEC-totaldashboard-google-ads §5): a Labelizer összesítő sora, a cellán belüli kategória-fülek és a
   rács alatti halvány megjegyzés (pl. a Fiókkezelés 30 napos API-korlátja, a Labelizer figyelmeztetései). */
.td-labelizer { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.td-labelizer-summary { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.td-cell-hint { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.td-cell-hint .ti { color: var(--td-status-serious); }
/* Search Console céloldal: a további forgalmat kapott oldalak száma a link mellett (td_widgets.js `urlCell`). */
.td-url-more { margin-left: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); cursor: help; }
/* hasábos: a rangsor oszloponként lefelé olvasható (1–4 · 5–8 · …) */
.td-legend {
  columns: 20rem;
  column-gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.td-legend > li { break-inside: avoid; }
.td-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: opacity 0.12s ease, background-color 0.12s ease;
}
.td-legend-item:hover, .td-legend-item:focus-visible { background: var(--color-surface-subtle); }
.td-legend-item:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 1px; }
.td-legend-item.is-dimmed { opacity: 0.45; }
.td-legend-item.is-hidden { opacity: 0.4; }
.td-legend-item.is-hidden .td-legend-name { text-decoration: line-through; }
.td-legend-item.is-hidden .td-legend-swatch { background: transparent; border-top-color: var(--color-text-muted); }
.td-legend-swatch {
  --td-swatch: var(--td-chart-neutral);
  flex: none;
  width: 1.5rem;
  height: 0;
  border-top: 3px solid var(--td-swatch);
  border-radius: 2px;
}
.td-legend-swatch.is-dashed { border-top-style: dashed; }
.td-legend-swatch[data-slot="1"] { --td-swatch: var(--td-line-1); }
.td-legend-swatch[data-slot="2"] { --td-swatch: var(--td-line-2); }
.td-legend-swatch[data-slot="3"] { --td-swatch: var(--td-line-3); }
.td-legend-swatch[data-slot="4"] { --td-swatch: var(--td-line-4); }
.td-legend-swatch[data-slot="5"] { --td-swatch: var(--td-line-5); }
.td-legend-swatch[data-slot="6"] { --td-swatch: var(--td-line-6); }
.td-legend-swatch[data-slot="7"] { --td-swatch: var(--td-line-7); }
.td-legend-swatch[data-slot="8"] { --td-swatch: var(--td-line-8); }
.td-legend-swatch[data-slot="9"] { --td-swatch: var(--td-line-9); }
.td-legend-swatch[data-slot="10"] { --td-swatch: var(--td-line-10); }
.td-legend-rank { flex: none; min-width: 1.5rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.td-legend-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-legend-value { flex: none; color: var(--color-text-strong); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.td-legend-item .td-delta { flex: none; }

/* A Total dashboardon nincs külön tartalom-fejléc: a cím a felső sávban áll („<app> — <ügyfél> — <menüpont>"),
   így a szűrősáv feljebb kerül (Laci, 2026-10-17). A horog az app.js `#app-view[data-app]`-ja. */
#app-view[data-app="total_dashboard"] .content-page-header { display: none; }

.td-empty {
  padding: var(--space-16) var(--space-8);
  text-align: center;
  color: var(--color-text-subtle);
  background: var(--panel);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}
.td-empty i { font-size: var(--text-3xl); color: var(--color-text-muted); }
.td-empty p { margin: var(--space-4) 0 0; }

/* Kapcsoló a közös szűrősávban (UI.page `type: "toggle"`). */
.ff-filterbar .ff-toggle-field { color: var(--color-text-subtle); }

/* Halvány menüpont (menu.json `"soon": true` vagy nem bekötött `source`) — LÁTSZIK, de tompább; az ok a title-ben. */
.sidebar-menu .nav-item.menu-item--dim { opacity: 0.45; cursor: help; }
.sidebar-menu .nav-item.menu-item--dim:hover { opacity: 0.7; }

/* Az ERP-átlépés hibaoldala (`GET /sso/erp`, keret §5.2) — brand-arcú, a `data-brand` tokenjeivel. */
.sso-page { min-height: 100vh; display: grid; place-items: center; margin: 0; background: var(--bg); font-family: var(--font-sans); }
.sso-card {
  max-width: 28rem;
  padding: var(--space-16);
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.sso-logo { height: 2.5rem; }
.sso-card h1 { margin: var(--space-8) 0 var(--space-4); font-family: var(--font-head); font-size: var(--text-xl); color: var(--color-text-strong); }
.sso-card p { margin: 0 0 var(--space-8); color: var(--color-text-subtle); }

/* Teendősorok — Javaslatok / Kampánymenedzseri teendők (SPEC-totaldashboard-teendok.md §2, §6). Egy sor = súlyosság-
   sáv · ikon · terület + cím + üzenet · kulcsszám + „Megnézem”; a súlyosság a sor osztálya (is-bad · is-warn · is-setup ·
   is-good · is-nodata · is-loading). Színek a `--td-advice-*` tokenekből (brandenként más). */
.td-advice { display: flex; flex-direction: column; gap: var(--space-6); }
.td-advice-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.td-advice-period { margin: 0; font-size: var(--text-sm); color: var(--color-text-subtle); }
.td-advice-period .ti { margin-right: var(--space-2); }
.td-advice-list { display: flex; flex-direction: column; gap: var(--space-4); }
.td-advice-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-8) var(--space-5) var(--space-6);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 5px solid var(--line);
  border-radius: var(--radius-lg);
}
.td-advice-row.is-good { background: var(--td-advice-good-bg); border-left-color: var(--td-advice-good-bar); }
.td-advice-row.is-warn { background: var(--td-advice-warn-bg); border-left-color: var(--td-advice-warn-bar); }
.td-advice-row.is-bad { background: var(--td-advice-bad-bg); border-color: var(--td-advice-bad-bar); }
.td-advice-row.is-setup { background: var(--color-surface-subtle); border-left-color: var(--color-text-muted); }
.td-advice-row.is-nodata,
.td-advice-row.is-loading { background: var(--color-surface-subtle); border-style: dashed; border-left-style: solid; }
.td-advice-row.is-nodata { opacity: 0.7; }
.td-advice-icon { display: flex; justify-content: center; font-size: 1.4rem; color: var(--color-text-muted); }
.td-advice-row.is-good .td-advice-icon { color: var(--td-advice-good-bar); }
.td-advice-row.is-warn .td-advice-icon { color: var(--td-status-serious); }
.td-advice-row.is-bad .td-advice-icon { color: var(--td-advice-bad-ink); }
.td-advice-row.is-loading .td-advice-icon .ti { animation: td-advice-spin 1s linear infinite; }
@keyframes td-advice-spin { to { transform: rotate(360deg); } }
.td-advice-main { min-width: 0; }
.td-advice-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.td-advice-title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.td-advice-area,
.td-advice-urgent {
  padding: 1px var(--space-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}
.td-advice-urgent { border-color: var(--td-advice-bad-bar); background: var(--td-advice-bad-bar); color: var(--color-on-primary); font-weight: var(--weight-semibold); }
.td-advice-msg { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-subtle); line-height: var(--leading-normal); }
.td-advice-row.is-bad .td-advice-msg { color: var(--td-advice-bad-ink); font-weight: var(--weight-medium); }
.td-advice-when { margin-left: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.td-advice-side { display: flex; align-items: center; gap: var(--space-6); white-space: nowrap; }
.td-advice-metric { font-size: var(--text-md); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; color: var(--color-text-strong); }
.td-advice-detail {
  margin: calc(-1 * var(--space-2)) 0 var(--space-2) 2.75rem;
  padding: var(--space-6) var(--space-8);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.td-advice-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-4); }
.td-advice-kpi { padding: var(--space-4) var(--space-6); background: var(--color-surface-subtle); border-radius: var(--radius-md); }
.td-advice-kpi span,
.td-advice-kpi small { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.td-advice-kpi strong { display: block; margin: var(--space-1) 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; color: var(--color-text-strong); }
@media (max-width: 760px) {
  .td-advice-row { grid-template-columns: 1.75rem minmax(0, 1fr); }
  .td-advice-side { grid-column: 2; justify-content: space-between; }
  .td-advice-detail { margin-left: 0; }
}

/* ===== TD · VÉGE =============================================================================== */