/* =============================================================================
 * Campmoney design language — the SINGLE source of the family's frontend design
 * tokens (fonts, type scale, spacing, radius, shadows) and base principles.
 *
 * Lives once in saas-common; every app/landing loads it (served at
 * /campmoney-ui.css by each Java app, copied into each *-web/ landing at deploy).
 * BRAND-specific values (accent colour, gradient) do NOT live here — they come
 * from /brand.css, generated from the Java Brand, so there is still ONE source
 * of truth per concern: design = this file, brand = the Brand.
 *
 * PRINCIPLES (elvek)
 *  - Type: one family (Inter). Use the --fs-* scale, not ad-hoc px.
 *  - Spacing: 4px base; use the --sp-* scale for paddings/margins/gaps.
 *  - Radius: --radius-sm controls (8), --radius cards (10), --radius-lg panels (14),
 *    --radius-pill chips/badges.
 *  - Colour: one accent (from /brand.css). Light backgrounds/borders are tints of
 *    it (--accent-soft); neutrals (--ink/--muted/--line) are brandless greys here.
 *  - Components: primary button = filled accent; ghost = outline; modals centre on a
 *    scrim; toasts bottom; badges = pill. Keep these consistent across apps.
 *  - Tables & actions: EVERY list entity has a detail view (részletező) — the row is
 *    clickable (.rowlink) and opens it; the full set of function buttons lives THERE
 *    (modal/panel footer or header). The row itself stays clean: data + status badges.
 *    Inline action buttons in the last cell are allowed only as shortcuts and MAX 2
 *    (right-aligned .mini / .mini.danger). Need a 3rd action? It belongs in the detail
 *    view, not the row.
 *  - Button style by context (the SAME action must look the SAME in the same context):
 *    in a popup/detail (felugró) it is a FULL filled button (.act; destructive = .act.danger
 *    red-filled) — same size as every other modal's buttons, never .mini. In a table row the
 *    shortcut is the SMALL OUTLINE variant (.mini / .mini.danger). E.g. Delete = red filled
 *    .act.danger in the detail modal, outline .mini.danger in the row.
 *  - Responsive / mobile (family rule — why apps diverged before this was written):
 *    LAYOUT: default is a doc-scroll page (header + ONE content column) — it degrades
 *    on a phone for free (sidebar -> off-canvas drawer, tighter padding). A fixed
 *    app-shell (height:100dvh, fixed bars, internally-scrolling panes) is allowed ONLY
 *    when genuinely justified (offline-first / installable PWA), because it must then
 *    handle every mobile gotcha (dvh, safe-area, internal scroll). NEVER a two-pane
 *    desktop master-detail: one content column + a detail view/modal (see the Tables
 *    rule above) so the phone needs no separate layout. The left panel is the
 *    .cm-sidebar + .cm-drawer standard (defined below); Tine's POS icon-rail and
 *    Tilly's offline app-shell rail are the two documented justified exceptions.
 *    BREAKPOINTS: exactly two, family-wide — tablet 880px (sidebar collapses to a
 *    drawer) and phone 640px (single column, tighter padding). Use these values; do
 *    not invent new ones. (CSS vars can't be used inside @media, so the numbers are
 *    hard-coded in queries and mirrored as --bp-* tokens below for JS / reference.)
 *    BASELINE: every app needs <meta name="viewport" content="width=device-width,
 *    initial-scale=1">; the >=16px mobile input rule below (iOS focus-zoom) is shared
 *    here so no app has to remember it.
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
	/* ---- type ---- */
	--font-sans: "Inter", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fs-2xs: 11px;
	--fs-xs: 12px;
	--fs-sm: 13px;
	--fs-base: 14px;
	--fs-md: 15px;
	--fs-lg: 17px;
	--fs-xl: 19px;
	--fs-2xl: 24px;
	--fs-3xl: 28px;
	--lh-tight: 1.2;
	--lh-normal: 1.55;

	/* ---- spacing (4px base) ---- */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-8: 32px;

	/* ---- radius ---- */
	--radius-sm: 8px;
	--radius: 10px;
	--radius-lg: 14px;
	--radius-pill: 999px;

	/* ---- elevation ---- */
	--shadow-sm: 0 1px 2px rgba(20, 16, 40, .06);
	--shadow: 0 4px 16px rgba(20, 16, 40, .10);

	/* ---- neutral palette (brandless; accent + accent-soft come from /brand.css) ---- */
	--ink: #1b1626;
	--muted: #6b6377;
	--line: #ece7f3;
	--card: #ffffff;
	--ok: #16a34a;
	--err: #dc2626;

	/* ---- layout ---- */
	--sidebar-w: 224px;

	/* ---- breakpoints (canonical, family-wide) ---- */
	/* NB: CSS vars cannot be used in @media conditions — these mirror the hard-coded
	   query values for JS (matchMedia) and as the single documented source of truth. */
	--bp-tablet: 880px;   /* sidebar -> off-canvas drawer */
	--bp-phone: 640px;    /* single column, tighter padding, >=16px inputs */
}

/* Family inline icon (Campmoney.icon) — outline glyph that matches the sidebar/nav
   language and inherits the surrounding text colour. Sized to the text it sits in. */
.cm-ic { width: 1.1em; height: 1.1em; vertical-align: -.16em; flex: 0 0 auto;
	stroke: currentColor; fill: none; }

/* =============================================================================
 * Shared LOGIN/AUTH component (family rule) — every app's sign-in looks the same:
 * icon + app name on top, a one-line tagline, then a clean WHITE card with the
 * email/password fields, a full-width pill primary ("Bejelentkezés"), and the
 * Google button below. All scoped under .login-shell so it never collides with
 * app-body styles. Accent/accent-soft come from /brand.css.
 * ========================================================================== */
.login-shell { max-width: 420px; margin: 7vh auto; padding: 0 16px; }
.login-shell .brand-lg { display: flex; align-items: center; justify-content: center; gap: 11px;
	color: var(--ink); font-size: 26px; font-weight: 700; margin: 0 0 6px; }
.login-shell .brand-logo-svg { display: block; box-sizing: border-box; padding: 9px;
	background: var(--accent-soft); border-radius: 11px; fill: none; stroke: var(--accent);
	stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.login-shell .tagline { text-align: center; color: var(--muted); font-size: var(--fs-sm, 13px); margin: 0 0 18px; }
.login-shell .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg, 14px);
	padding: 18px; box-shadow: var(--shadow-sm); }
.login-shell label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; font-weight: 500; }
.login-shell input { width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line);
	background: #fff; color: var(--ink); font-size: 15px; line-height: 1.2; font-family: var(--font-sans); }
.login-shell input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.login-shell .act { width: 100%; margin-top: 16px; padding: 12px; border: 0; border-radius: 9px;
	background: var(--accent); color: #fff; font-weight: 600; font-size: 15px; line-height: 1.2; cursor: pointer;
	font-family: var(--font-sans); }
.login-shell .act:hover { background: var(--accent-dark, var(--accent)); }
.login-shell .g-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px;
	color: var(--muted); font-size: var(--fs-xs, 12px); }
.login-shell .g-or::before, .login-shell .g-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-shell .msg { font-size: var(--fs-sm, 13px); margin-top: 8px; min-height: 16px; }
.login-shell .msg.err { color: var(--err); }
.login-shell .msg.ok { color: var(--ok); }
.login-shell small { display: block; margin-top: 22px; text-align: center; color: var(--muted); font-size: .85rem; }
.login-shell small a { color: var(--accent); text-decoration: none; }
.login-shell small a:hover { text-decoration: underline; }
.login-shell .hint { display: block; text-align: center; color: var(--muted); font-size: var(--fs-xs, 12px);
	margin-top: 14px; line-height: 1.5; }
.login-shell .hint a { color: var(--accent); }

/* =============================================================================
 * Password STRENGTH meter — a slim bar + label shown under a "new password"
 * field. Wired automatically by /campmoney-ui.js to every
 * input[autocomplete="new-password"]; it appears once the field has a value.
 * Score 1–4 → Gyenge / Megfelelő / Erős / Nagyon erős.
 * ========================================================================== */
.pw-meter { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; }
.pw-meter.hidden { display: none; }
.pw-meter-track { flex: 1; height: 4px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pw-meter-track i { display: block; height: 100%; width: 0; border-radius: 3px;
	transition: width .15s ease, background .15s ease; }
.pw-meter-label { font-size: var(--fs-2xs, 11px); color: var(--muted); white-space: nowrap;
	font-variant-numeric: tabular-nums; }
.pw-meter[data-score="1"] i { background: var(--err); }
.pw-meter[data-score="2"] i { background: #C99A3E; }
.pw-meter[data-score="3"] i { background: var(--accent); }
.pw-meter[data-score="4"] i { background: var(--ok); }

/* =============================================================================
 * Email-first auth card (Campmoney.mountAuth) — shared sign-in/sign-up flow.
 * Leans on the brand tokens (--accent etc.); each app's login shell provides the
 * surrounding card chrome. Scoped under .cm-auth so it can't leak into the app.
 * ========================================================================== */
.cm-auth .hidden { display: none; }
.cm-account .hidden { display: none; }
.cm-auth label, .cm-account label { display: block; font-size: var(--fs-sm, 13px); color: var(--ink);
	margin: 12px 0 5px; font-weight: 500; }
.cm-auth input, .cm-account input { width: 100%; padding: 10px 12px; border-radius: var(--radius-sm, 8px);
	border: 1px solid var(--line); font-size: 15px; box-sizing: border-box; background: var(--card, #fff);
	color: var(--ink); }
.cm-auth input:focus, .cm-account input:focus { outline: none; border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft); }
.cm-auth .cm-primary, .cm-account .cm-primary { width: 100%; margin-top: 16px; padding: 12px; border: 0;
	border-radius: var(--radius-sm, 9px); background: var(--accent); color: #fff; font-weight: 600;
	font-size: 15px; line-height: 1.2; cursor: pointer; }
.cm-auth .cm-primary:hover, .cm-account .cm-primary:hover { background: var(--accent-dark, var(--accent)); }
.cm-auth .cm-primary:disabled, .cm-account .cm-primary:disabled { opacity: .55; cursor: default; }
/* "Kód a Tilly-ből" a login 2FA-lépésen: teljes szélességű másodlagos gomb, térközzel a Belépés alatt */
.cm-auth .cm-2fa-fromtilly, .cm-auth .cm-2fa-qr, .cm-auth .cm-qr-login-btn { width: 100%; margin-top: 12px;
	padding: 12px; border: 1px solid var(--accent); border-radius: var(--radius-sm, 9px);
	background: var(--accent-soft); color: var(--accent-dark, var(--accent)); font-weight: 600; font-size: 15px;
	line-height: 1.2; cursor: pointer; }
.cm-auth .cm-2fa-fromtilly:hover, .cm-auth .cm-2fa-qr:hover, .cm-auth .cm-qr-login-btn:hover {
	background: var(--accent); color: #fff; }
.cm-auth .cm-2fa-fromtilly:disabled, .cm-auth .cm-2fa-qr:disabled, .cm-auth .cm-qr-login-btn:disabled {
	opacity: .55; cursor: default; }
/* Jelszó nélküli "Belépés telefonnal" a Google ALATT: külön "vagy"-elválasztóval, középre igazított ikon+szöveg. */
.cm-auth .cm-qr-login-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 0; }
.cm-auth .cm-qr-login-btn .cm-qr-ic { font-size: 17px; line-height: 1; }
/* Cross-device QR-belépés panel (a 2FA-lépésen): középre igazított, kártyás megjelenés bő térközökkel. */
.cm-auth .cm-qr-panel { margin-top: 18px; text-align: center; display: flex; flex-direction: column;
	align-items: center; gap: 16px; padding: 20px 18px; border: 1px solid var(--line);
	border-radius: var(--radius-lg, 14px); background: var(--accent-soft); }
.cm-auth .cm-qr-intro { font-size: var(--fs-sm, 13px); color: var(--muted); line-height: 1.55; margin: 0;
	max-width: 300px; }
.cm-auth .cm-qr-svg { position: relative; display: flex; justify-content: center; margin: 0; }
.cm-auth .cm-qr-svg svg { width: 210px; height: 210px; border: 1px solid var(--line);
	border-radius: 12px; padding: 12px; background: #fff;
	box-shadow: 0 6px 22px rgba(16, 24, 40, .10); }
/* Az app logója a QR közepén: kis, fehér lekerekített badge-en (a QR ECC-je elbírja a takarást). */
.cm-auth .cm-qr-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 34px; height: 34px; padding: 5px; border-radius: 9px; background: #fff; object-fit: contain;
	box-shadow: 0 0 0 3px #fff, 0 1px 4px rgba(16, 24, 40, .18); }
.cm-auth .cm-qr-status { display: flex; align-items: center; justify-content: center; gap: 8px;
	font-size: var(--fs-sm, 13px); color: var(--ink); font-weight: 500; margin: 0; }
/* Pörgő jelző a várakozás alatt (terminál-állapotban a .cm-qr-done elrejti). */
.cm-auth .cm-qr-spin { width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%;
	border: 2px solid var(--accent); border-top-color: transparent; animation: cm-qr-spin .8s linear infinite; }
@keyframes cm-qr-spin { to { transform: rotate(360deg); } }
/* Visszaszámláló: fogyó csík + m:ss címke. Az utolsó 20 mp-ben figyelmeztető színre vált. */
.cm-auth .cm-qr-timer { width: 210px; max-width: 100%; display: flex; flex-direction: column; gap: 6px; }
.cm-auth .cm-qr-timer-track { height: 6px; border-radius: var(--radius-pill, 999px);
	background: rgba(16, 24, 40, .10); overflow: hidden; }
.cm-auth .cm-qr-timer-fill { display: block; height: 100%; width: 100%;
	border-radius: var(--radius-pill, 999px); background: var(--accent);
	transition: width 1s linear, background-color .3s ease; }
.cm-auth .cm-qr-timer-label { font-size: var(--fs-xs, 12px); color: var(--muted);
	font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.cm-auth .cm-qr-timer.low .cm-qr-timer-fill { background: var(--err); }
.cm-auth .cm-qr-timer.low .cm-qr-timer-label { color: var(--err); font-weight: 600; }
/* Terminál-állapot (lejárt / elutasított / sikeres): pörgő + visszaszámláló eltűnik. */
.cm-auth .cm-qr-panel.cm-qr-done .cm-qr-spin,
.cm-auth .cm-qr-panel.cm-qr-done .cm-qr-timer { display: none; }
/* Mégse: teljes szélességű, letisztult másodlagos gomb (nem a stílustalan natív gomb). */
.cm-auth .cm-qr-cancel { width: 100%; padding: 11px; border: 1px solid var(--line);
	border-radius: var(--radius-sm, 9px); background: #fff; color: var(--muted);
	font-weight: 600; font-size: var(--fs-base, 14px); line-height: 1.2; cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.cm-auth .cm-qr-cancel:hover { border-color: var(--muted); color: var(--ink); background: rgba(16, 24, 40, .04); }
.cm-auth .cm-msg, .cm-account .cm-msg { font-size: var(--fs-sm, 13px); margin-top: 8px; min-height: 16px; }
.cm-auth .cm-msg.err, .cm-account .cm-msg.err { color: var(--err); }
.cm-auth .cm-msg.ok, .cm-account .cm-msg.ok { color: var(--ok); }
/* Account panel — tabs (Campmoney.mountAccount) */
.cm-account .cm-acc-tabs { display: flex; gap: 4px; background: var(--accent-soft, #f3f4f6);
	border-radius: 10px; padding: 4px; margin-bottom: 16px; overflow: hidden; }
/* Az aktív fül fehér háttere ne lógjon ki a sávból: a gomb lekerekítése = a sáv BELSŐ lekerekítése
   (10 − 4px padding = 6px). Korábban a --radius-sm (8px) > belső 4px → a fehér sarok kilógott. */
.cm-account .cm-acc-tab { flex: 1; border: 0; background: none; cursor: pointer; padding: 8px 10px;
	border-radius: 6px; font-size: 14px; font-weight: 600; color: var(--muted); }
.cm-account .cm-acc-tab.active { background: var(--card, #fff); color: var(--ink);
	box-shadow: 0 1px 3px rgba(16, 24, 40, .08); }
.cm-account .cm-acc-pane.hidden { display: none; }
.cm-account .cm-acc-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.cm-account .cm-acc-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
/* Adataim és adatvédelem — a Profil fül alján (GDPR export + fiók-törlés wizard) */
.cm-account .cm-acc-dr { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cm-account .cm-acc-dr-title { font-size: 14px; font-weight: 600; margin: 0 0 10px; color: var(--ink); }
.cm-account .cm-acc-dr-export {
	background: none; border: 1px solid var(--line); color: var(--ink);
	border-radius: var(--radius-sm, 8px); padding: 9px 14px; cursor: pointer; font-size: 14px; }
.cm-account .cm-acc-dr-flow { margin-top: 12px; }
.cm-account .cm-acc-dr-link { padding: 0; color: var(--err); font-size: 13px; }
.cm-account .cm-acc-dr-link:hover { color: var(--err); filter: brightness(.9); text-decoration: underline; }
/* Kisegítő lehetőségek szekció (a dataRights-szal egységes tagolás a Profil fül alján). */
.cm-account .cm-acc-a11y { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cm-account .cm-acc-a11y-title { font-size: 14px; font-weight: 600; margin: 0 0 10px; color: var(--ink); }
.cm-account .cm-acc-a11y-row { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; }
.cm-account .cm-acc-a11y-row input { width: auto; margin: 0; flex: 0 0 auto; }
/* a törlés-megerősítő kártya a PRO-kártya danger-párja (piros keret + halvány piros háttér) */
.cm-account .cm-plan-card-danger { border-color: var(--err); background: rgba(185, 28, 28, .05); }
.cm-account .cm-acc-plan-lines { margin: 6px 0 4px; padding-left: 18px; font-size: var(--fs-sm, 13px); color: var(--ink); }
.cm-account .cm-acc-badge { display: inline-block; font-size: 12px; font-weight: 600; color: var(--accent);
	background: var(--accent-soft); border-radius: 999px; padding: 1px 9px; vertical-align: middle; }
.cm-account .cm-acc-logout { background: none; border: 1px solid var(--line); color: var(--muted);
	border-radius: var(--radius-sm, 8px); padding: 9px 14px; cursor: pointer; font-size: 14px; }
/* ---- Csomag (plan) flow: upsell-esztétika + több-lépcsős előfizetés-wizard ---- */
.cm-account .cm-plan-card { border: 1px solid var(--line); border-radius: var(--radius-lg, 14px); padding: 16px; }
.cm-account .cm-plan-card-pro { border-color: var(--accent); background: var(--accent-soft); }
.cm-account .cm-plan-head { display: flex; align-items: center; gap: 8px; }
.cm-account .cm-plan-head strong { font-size: 15px; color: var(--ink); }
.cm-account .cm-plan-sub { color: var(--muted); font-size: var(--fs-sm, 13px); margin: 6px 0 0; }
.cm-account .cm-plan-feats { margin: 10px 0 0; padding-left: 18px; font-size: var(--fs-sm, 13px); color: var(--ink); }
.cm-account .cm-plan-feats li { margin: 3px 0; }
.cm-account .cm-plan-price { margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--ink); }
/* Fókuszált PRO-„plusz" kártya a wizard 1. lépésén (choose): egy hangsúlyos hero-kártya, csak a
   PRO által hozzáadott funkciókkal — nincs FREE↔PRO oszlop-összevetés, így keskeny mobilon is szép. */
.cm-account .cm-plan-hero { border: 1.5px solid var(--accent); background: var(--accent-soft);
	border-radius: var(--radius-lg, 14px); padding: 18px 18px 16px; }
.cm-account .cm-plan-hero-h { display: flex; align-items: center; gap: 10px; }
.cm-account .cm-plan-hero-t { font-weight: 700; font-size: 16px; color: var(--ink); }
.cm-account .cm-plan-hero-sub { margin: 10px 0 2px; font-size: var(--fs-sm, 13px); color: var(--muted); line-height: 1.5; }
.cm-account .cm-plan-hero .cm-plan-feats { font-size: 14px; }
.cm-account .cm-plan-hero .cm-plan-feats li { margin: 6px 0; }
.cm-account .cm-plan-hero .cm-plan-feats li::marker { color: var(--accent); }
.cm-account .cm-plan-hero .cm-plan-price { margin-top: 14px; font-size: 18px; }
/* az upsell-kártya beágyazva a Csomag fülre */
.cm-account .cm-upsell-inline { margin-top: 14px; padding: 22px 20px; max-width: none; box-shadow: none;
	border-color: var(--accent); }
.cm-account .cm-upsell-inline .cm-upsell-desc { text-align: left; }
.cm-account .cm-upsell-inline .cm-plan-feats { display: inline-block; text-align: left; }
/* wizard lépés-pöttyök + lábléc */
.cm-account .cm-wiz-dots { display: flex; gap: 6px; justify-content: center; margin: 2px 0 14px; }
.cm-account .cm-wiz-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.cm-account .cm-wiz-dot.on { background: var(--accent); }
.cm-account .cm-wiz-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; }
.cm-account .cm-wiz-foot .cm-primary { width: auto; margin-top: 0; padding: 10px 18px; }
.cm-account .cm-plan-link { background: none; border: none; color: var(--muted); cursor: pointer;
	font-family: var(--font-sans, inherit); font-size: 14px; padding: 6px 4px; text-decoration: underline; }
.cm-account .cm-plan-link:hover { color: var(--ink); }
.cm-account .cm-plan-danger { background: var(--err); }
.cm-account .cm-plan-danger:hover { filter: brightness(.94); }
/* összevetés két oszlopban */
.cm-account .cm-plan-compare { display: flex; gap: 10px; }
.cm-account .cm-plan-opt { flex: 1; border: 1px solid var(--line); border-radius: var(--radius-sm, 8px); padding: 12px; }
.cm-account .cm-plan-opt-pro { border-color: var(--accent); background: var(--accent-soft); }
.cm-account .cm-plan-opt-h { font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.cm-account .cm-plan-summary { display: flex; justify-content: space-between; align-items: baseline;
	margin-top: 12px; font-size: 15px; color: var(--ink); }
.cm-account .cm-plan-note { margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.5; }
/* folyamatban + kész */
.cm-account .cm-plan-proc { text-align: center; padding: 30px 0; color: var(--muted); }
.cm-account .cm-spin { width: 30px; height: 30px; margin: 0 auto 12px; border-radius: 50%;
	border: 3px solid var(--line); border-top-color: var(--accent); animation: cm-spin 0.8s linear infinite; }
@keyframes cm-spin { to { transform: rotate(360deg); } }
.cm-account .cm-plan-done { text-align: center; padding: 26px 0; }
.cm-account .cm-plan-done-ic { font-size: 38px; }
.cm-account .cm-plan-done p { margin: 10px 0 0; font-weight: 600; color: var(--ink); }
.cm-auth .cm-crossapp { font-size: var(--fs-sm, 13px); color: var(--muted); margin-top: 18px;
	line-height: 1.5; text-align: center; }
.cm-auth .cm-reg-intro { font-size: var(--fs-sm, 13px); color: var(--muted); margin: 4px 0 0;
	line-height: 1.5; }
.cm-auth .cm-consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm, 13px);
	color: var(--ink); line-height: 1.5; margin: 14px 0 4px; cursor: pointer;
	padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm, 9px);
	transition: border-color .15s ease, background .15s ease; }
.cm-auth .cm-consent:hover { border-color: var(--accent); }
.cm-auth .cm-consent:has(.cm-consent-cb:checked) { border-color: var(--accent); background: var(--accent-soft); }
.cm-auth .cm-consent input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto;
	accent-color: var(--accent); cursor: pointer; }
.cm-auth .cm-consent a { color: var(--accent); font-weight: 600; }
.cm-auth .cm-google-consent { font-size: var(--fs-sm, 12px); color: var(--muted); line-height: 1.45;
	margin: 10px 0 0; text-align: center; }
.cm-auth .cm-google-consent a { color: var(--accent); font-weight: 600; }
/* Login 2FA step + account Security section (TOTP). Brand-token driven (--accent etc.). */
.cm-auth .cm-2fa-intro { font-size: var(--fs-sm, 13px); color: var(--muted); line-height: 1.5; margin: 2px 0 10px; }
.cm-auth .cm-2fa-hint, .cm-account .cm-2fa-secret { font-size: var(--fs-sm, 12px); color: var(--muted); line-height: 1.45; margin: 10px 0 0; }
/* "Visszaállítás emailben" link-gomb a 2FA-lépésben + a reset-confirm képernyő */
.cm-auth .cm-2fa-forgot { background: none; border: 0; padding: 0; color: var(--accent);
	font: inherit; cursor: pointer; text-decoration: underline; }
.cm-auth .cm-2fa-forgot:hover { filter: brightness(.9); }
.cm-auth .cm-verify-resend { display: block; width: 100%; background: none; border: 0; padding: 10px 0 0;
	margin: 0; color: var(--accent); font: inherit; font-size: var(--fs-sm, 13px); cursor: pointer; text-align: center; }
.cm-auth .cm-verify-resend:hover { filter: brightness(.9); text-decoration: underline; }
.cm-auth .cm-verify-resend:disabled { opacity: .55; cursor: default; text-decoration: none; }
.cm-auth .cm-2fa-reset-cancel { display: block; width: 100%; margin-top: 12px; text-align: center; }
.cm-auth .cm-2fa-reset-title { font-size: 16px; margin: 0 0 8px; color: var(--ink); }
.cm-auth .cm-2fa-code, .cm-account .cm-2fa-confirm, .cm-account .cm-2fa-off-code {
	letter-spacing: .25em; font-variant-numeric: tabular-nums; }
.cm-account .cm-2fa-status { font-size: var(--fs-sm, 14px); margin: 2px 0 8px; }
.cm-account .cm-2fa-status.on { color: var(--accent-dark, var(--accent)); }
.cm-account .cm-2fa-status.off { color: var(--muted); }
.cm-account .cm-2fa-qr { display: flex; justify-content: center; margin: 12px 0; }
.cm-account .cm-2fa-qr svg { width: 184px; height: 184px; border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: #fff; }
.cm-account .cm-2fa-secret code { font-family: var(--font-mono, monospace); font-size: 13px; letter-spacing: .12em;
	background: var(--accent-soft); color: var(--ink); padding: 2px 8px; border-radius: 6px; }
.cm-account .cm-2fa-codes { list-style: none; padding: 12px; margin: 10px 0; display: grid;
	grid-template-columns: 1fr 1fr; gap: 6px 18px; background: var(--accent-soft); border-radius: 10px;
	font-family: var(--font-mono, monospace); font-size: 14px; letter-spacing: .1em; }
.cm-account .cm-acc-secondary { display: inline-block; background: transparent; color: var(--accent);
	border: 1px solid var(--line); border-radius: var(--radius-sm, 9px); padding: 9px 14px; font-weight: 600;
	cursor: pointer; font-family: var(--font-sans, inherit); }
.cm-account .cm-acc-secondary:hover { background: var(--accent-soft); }
.cm-account .cm-acc-danger { background: #b91c1c; color: #fff; border: none; border-radius: var(--radius-sm, 9px);
	padding: 10px 14px; font-weight: 600; cursor: pointer; font-family: var(--font-sans, inherit); }
.cm-account .cm-acc-danger:hover { background: #991b1b; }
/* Passkey-lista: minden bejegyzés önálló kártya, a név és a Törlés gomb közé rendes térköz kerül. */
.cm-account .cm-pk-list { list-style: none; padding: 0; margin: 12px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.cm-account .cm-pk-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 10px 12px; background: var(--accent-soft); border: 1px solid var(--line); border-radius: 10px; }
.cm-account .cm-pk-label { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.cm-account .cm-pk-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-account .cm-pk-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-account .cm-pk-when { font-size: 12px; color: var(--muted); }
.cm-account .cm-pk-del { flex: none; padding: 7px 14px; }
/* Két gomb egymás mellett: rendes térköz + egységes méret (azonos padding/font/magasság). */
.cm-account .cm-2fa-actions { display: flex; gap: 10px; margin-top: 16px; }
.cm-account .cm-2fa-actions .cm-primary,
.cm-account .cm-2fa-actions .cm-acc-secondary {
	flex: 1; margin-top: 0; padding: 12px; font-size: 15px; line-height: 1.2; text-align: center; }
.cm-auth .cm-whoami { display: flex; align-items: baseline; justify-content: space-between;
	gap: 10px; font-size: var(--fs-sm, 13px); color: var(--ink); }
.cm-auth .cm-whoami .cm-email-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.cm-auth .cm-change { color: var(--accent); text-decoration: none; white-space: nowrap; }
.cm-auth .cm-change:hover { text-decoration: underline; }
.cm-auth .cm-or { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px;
	color: var(--muted); font-size: var(--fs-sm, 13px); }
.cm-auth .cm-or::before, .cm-auth .cm-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cm-auth .cm-google-btn { display: flex; justify-content: center; }
/* Alternatív belépések egy csoportban (egy „vagy" alatt: Google → passkey → telefon) — egyenletes térköz. */
.cm-auth .cm-alts { display: flex; flex-direction: column; gap: 12px; }
.cm-auth .cm-alts .cm-or { margin: 6px 0 2px; }
.cm-auth .cm-alts .cm-qr-login-btn { margin-top: 0; }
/* Béta-kód a módszerek ALATT (ritkábban kell) — finom elválasztóval. */
.cm-auth .cm-gcode-row { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.cm-auth .cm-gcode-hint { color: var(--muted); font-weight: 400; }

/* =====================================================================
 * Account modal SHELL + user menu — a teljes Fiók-felugró és a jobb felső
 * név-lenyíló a KÖZÖS utilból (Quilly-look), hogy mind a 4 app egyforma
 * legyen. A panel tartalma a .cm-account; ez csak a keret + a menü.
 * ===================================================================== */
.cm-modal-bg { position: fixed; inset: 0; background: rgba(16, 24, 40, .45);
	display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px;
	overflow: auto; z-index: 1000; }
.cm-modal-bg.cm-hidden { display: none; }
.cm-modal { background: var(--card, #fff); border: 1px solid var(--line); border-radius: var(--radius-lg, 14px);
	padding: 22px; width: 100%; max-width: 480px; box-shadow: 0 20px 60px rgba(16, 24, 40, .25); }
.cm-modal h2 { margin: 0 0 14px; font-size: 18px; color: var(--ink); }
.cm-modal-foot { display: flex; justify-content: flex-end; margin-top: 16px; }
.cm-modal-close { background: none; border: 1px solid var(--line); color: var(--ink);
	border-radius: var(--radius-sm, 8px); padding: 9px 16px; cursor: pointer; font: inherit; }
.cm-modal-close:hover { background: var(--accent-soft); }
/* Fiók-modal: a form-fülek keskenyek (480), a Csomag fül szélesebb (a FREE+PRO lista ne tördelődjön
 * csúnyán) — a .cm-acc-wide class-t a mountAccount tab-váltója teszi a .cm-modal-ra. Animált. */
.cm-modal { transition: max-width .18s ease; }
.cm-modal.cm-acc-wide { max-width: 840px; }
@media (min-width: 820px) {
	/* Csak a Csomag fül „aktuális" nézetén (FREE + PRO upsell egymás mellé); a varázsló-lépések
	 * (választás/megerősítés) egyoszloposak maradnak — azoknál nincs .cm-upsell-inline. */
	.cm-modal.cm-acc-wide .cm-plan-flow-host:has(> .cm-upsell-inline) {
		display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
	.cm-modal.cm-acc-wide .cm-plan-flow-host:has(> .cm-upsell-inline) > * { margin: 0; }
}
/* Visszajelzés-felugró (Campmoney.openFeedback) */
.cm-fb-send { background: var(--accent); border: 1px solid var(--accent); color: #fff; border-radius: var(--radius-sm, 8px);
	padding: 9px 18px; cursor: pointer; font: inherit; font-weight: 600; margin-left: 8px; }
.cm-fb-send:hover { filter: brightness(1.05); }
.cm-fb-send:disabled { opacity: .6; cursor: progress; }
/* Branded fejléc-sáv: a modal tetejére ragadó gradient (apponként a saját --gradient márkaszíne). */
.cm-fb .cm-fb-title { display: flex; align-items: center; gap: 9px; margin: -22px -22px 16px; padding: 15px 22px;
	background: var(--gradient, var(--accent)); color: #fff; border-radius: var(--radius-lg, 14px) var(--radius-lg, 14px) 0 0;
	font-size: 17px; }
.cm-fb .cm-fb-title .cm-ic { width: 20px; height: 20px; color: #fff; flex: none; }
.cm-fb-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
/* 1–5 csillagos elégedettség (csak visszajelzésnél) */
.cm-fb-rate { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cm-fb-rate-lbl { font-size: 13px; color: var(--muted); }
.cm-fb-stars { display: inline-flex; gap: 2px; }
.cm-fb-star { background: none; border: none; padding: 2px; cursor: pointer; font-size: 24px; line-height: 1;
	color: var(--line, #ddd); transition: color .1s, transform .1s; }
.cm-fb-star:hover { transform: scale(1.12); }
.cm-fb-star.on, .cm-fb-star.hover { color: #eab308; }
.cm-fb-msg { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm, 8px); padding: 11px 13px;
	font: inherit; font-size: 15px; resize: vertical; min-height: 104px; box-sizing: border-box; background: var(--card, #fff); color: var(--ink); }
.cm-fb-msg:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Diszkrét váltó a visszajelzés ↔ hibabejelentés között (nem hangsúlyos link) + „válaszunk ide" jegyzet. */
.cm-fb-sub { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 9px; }
.cm-fb-switch { font-size: 12.5px; color: var(--muted); text-decoration: none; border-bottom: 1px dashed var(--line); }
.cm-fb-switch:hover { color: var(--accent); border-bottom-color: var(--accent); }
.cm-fb-note { font-size: 12px; color: var(--muted); }
.cm-fb-err { color: var(--err, #dc2626); font-size: 13px; margin-top: 10px; }
.cm-fb-done { display: flex; align-items: center; gap: 12px; padding: 8px 2px; }
.cm-fb-done .cm-ic { width: 30px; height: 30px; color: var(--accent); flex: none; }

.cm-usermenu { position: relative; display: inline-block; }
.cm-usermenu-chip { cursor: pointer; background: none; border: none; padding: 0; font-family: var(--font-sans, inherit);
	display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--ink); }
.cm-usermenu-chip::after { content: '▾'; font-size: 11px; color: var(--muted); }
.cm-usermenu-pop { position: absolute; top: 100%; right: 0; margin-top: 8px; min-width: 220px;
	background: var(--card, #fff); border: 1px solid var(--line); border-radius: 11px;
	box-shadow: 0 12px 32px rgba(16, 24, 40, .16); padding: 5px; z-index: 1001; }
.cm-usermenu-pop.cm-hidden { display: none; }
.cm-usermenu-role { font-size: 12px; color: var(--muted); padding: 4px 11px 6px;
	border-bottom: 1px solid var(--line); margin-bottom: 4px; }
/* Fix betűcsalád+méret — NE örökölje az app környezeti fontját (Tine alap-betűje
 * nagyobb volt, ezért ott nagyobbnak látszottak a menüpontok). */
.cm-usermenu-pop button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
	background: none; border: none; padding: 8px 11px; border-radius: 7px; cursor: pointer;
	font-family: var(--font-sans, inherit); font-size: 14px; font-weight: 500; line-height: 1.3;
	color: var(--ink); }
.cm-usermenu-pop button:hover { background: var(--accent-soft); }
/* Avatar-kör mód (opt-in): monogramos kör chip + teljes név a lenyíló fejlécében. */
.cm-usermenu-chip.cm-um-avatar { width: 34px; height: 34px; border-radius: 50%; padding: 0;
	justify-content: center; align-items: center; color: #fff; font-weight: 700; font-size: 13px;
	background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #d63384)); }
.cm-usermenu-chip.cm-um-avatar::after { content: none; }
.cm-usermenu-chip.cm-um-avatar.cm-um-pro { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }
.cm-usermenu-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
/* Monogramos avatar-kör a lenyíló fejlécében (ugyanaz a stílus, mint a chip) — a chip csak ikon,
 * a menü tetején a teljes név mellett is látszik a kör. */
.cm-um-head-av { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; display: inline-flex;
	align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px;
	background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #d63384)); }
.cm-um-head-av.cm-um-pro { box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--accent); }
.cm-um-head-txt { min-width: 0; }
.cm-usermenu-name { font-weight: 700; font-size: 13.5px; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.cm-usermenu-role2 { font-size: 12px; color: var(--muted); margin-top: 1px; }
.cm-um-pro-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700;
	color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 1px 6px; }

/* ===== App-váltó (Google-stílusú rács) ===== */
.cm-appsw { position: relative; display: inline-flex; }
.cm-appsw-btn { cursor: pointer; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
	background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); color: currentColor; padding: 0; }
.cm-appsw-btn:hover { background: rgba(255,255,255,.16); }
.cm-appsw-btn.cm-appsw-on { background: color-mix(in srgb, var(--accent) 30%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.cm-appsw-dots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.cm-appsw-dots i { width: 4.5px; height: 4.5px; border-radius: 50%; background: currentColor; display: block; }
.cm-appsw-pop { position: absolute; top: 100%; right: 0; margin-top: 10px; width: 340px; max-width: calc(100vw - 24px);
	background: var(--card, #fff); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
	box-shadow: 0 24px 60px -22px rgba(16,24,40,.4), 0 6px 18px -10px rgba(16,24,40,.28); z-index: 1001; }
.cm-appsw-pop.cm-hidden { display: none; }
.cm-appsw-head { display: flex; align-items: center; gap: 9px; padding: 14px 16px 10px; }
.cm-appsw-mark { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
	background: linear-gradient(135deg, #1fa85c, #12b596, #1e90d8); }
.cm-appsw-mark svg { width: 14px; height: 14px; }
.cm-appsw-title { font-weight: 800; font-size: 14px; letter-spacing: -.01em; color: var(--ink); }
.cm-appsw-title b { font-weight: 800; }
.cm-appsw-lbl { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 4px 16px 8px; }
.cm-appsw-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 0 12px 10px; }
.cm-app-tile { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; text-decoration: none;
	color: var(--ink); position: relative; border: 1px solid transparent; cursor: pointer; }
.cm-app-tile:hover { background: color-mix(in srgb, var(--bg, #f6f7f9) 55%, var(--card)); border-color: var(--line); }
.cm-app-cur { background: color-mix(in srgb, var(--accent) 10%, var(--card)); border-color: color-mix(in srgb, var(--accent) 35%, transparent); cursor: default; }
.cm-app-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto;
	box-shadow: 0 4px 12px -4px rgba(0,0,0,.4); }
.cm-app-ic svg { width: 26px; height: 26px; }
.cm-app-txt { display: flex; flex-direction: column; min-width: 0; }
.cm-app-nm { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.cm-app-sub { font-size: 11px; color: var(--muted); font-weight: 500; }
.cm-app-here { position: absolute; top: 6px; right: 8px; font-size: 9px; font-weight: 800; letter-spacing: .03em;
	text-transform: uppercase; padding: 2px 6px; border-radius: 999px; background: var(--accent); color: #fff; }
.cm-appsw-foot { padding: 11px 16px 14px; background: color-mix(in srgb, var(--bg, #f6f7f9) 45%, var(--card));
	border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); line-height: 1.45; }

/* Diszkrét PRO-jelzés a fejlécben (ha fizetős a csomag) — visszafogott, nem tolakodó. */
.cm-pro-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700;
	letter-spacing: .02em; color: var(--accent); background: var(--accent-soft); border-radius: 999px;
	padding: 2px 8px; vertical-align: middle; white-space: nowrap; }

/* Upsell — egységes „fizetős (PRO) funkció" kártya (Campmoney.mountUpsell). Önálló
 * kártya-look + középre rendezett tartalom + egy elsődleges CTA (pl. a Csomag fülre). */
.cm-upsell { background: var(--card, #fff); border: 1px solid var(--line); border-radius: var(--radius-lg, 14px);
	text-align: center; padding: 36px 28px; max-width: 560px; margin: 10px auto;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .06); }
.cm-upsell-badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em;
	color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 12px; }
/* Egységes „✨ AI" jelölés a teljes Campmoney családra (fix indigó, hogy minden brandnél azonos
   legyen — szándékosan NEM a brand-accent). Mindenhol: <span class="ai-badge">✨ AI</span>. */
.ai-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700;
	padding: 1px 7px; border-radius: 999px; background: #eef2ff; color: #4338ca; vertical-align: middle;
	letter-spacing: .02em; line-height: 1.6; }
.cm-upsell-title { margin: 14px 0 8px; font-size: 19px; font-weight: 700; color: var(--ink); }
.cm-upsell-desc { color: var(--muted); font-size: var(--fs-sm, 14px); line-height: 1.6; margin: 0 auto; max-width: 440px; }
.cm-upsell-desc strong { color: var(--ink); }
.cm-upsell-cta { margin-top: 20px; padding: 11px 22px; border: 0; border-radius: var(--radius-sm, 8px);
	background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; font-family: var(--font-sans, inherit); }
.cm-upsell-cta:hover { background: var(--accent-dark, var(--accent)); }

/* =============================================================================
 * ONBOARDING — shared first-run wizard + dashboard checklist (Campmoney.mount-
 * Onboarding / openOnboardingWizard). Chrome only; each app renders its own
 * fields into .cm-wiz-body. Leans on the brand tokens like the rest.
 * ========================================================================== */
.cm-wiz-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center;
	justify-content: center; padding: 16px; background: rgba(16, 24, 40, .48); }
.cm-wiz { position: relative; width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto;
	background: var(--card, #fff); border-radius: var(--radius-lg, 14px); padding: 22px 22px 18px;
	box-shadow: 0 20px 60px rgba(16, 24, 40, .28); }
.cm-wiz-x { position: absolute; top: 12px; right: 14px; background: transparent; border: 0;
	font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; }
.cm-wiz-title { font-size: var(--fs-lg, 18px); font-weight: 700; color: var(--ink); }
.cm-wiz-dots { display: flex; gap: 6px; margin: 12px 0 6px; }
.cm-wiz-dots i { width: 22px; height: 4px; border-radius: 3px; background: var(--line); }
.cm-wiz-dots i.on { background: var(--accent); }
.cm-wiz-dots i.done { background: var(--ok); }
.cm-wiz-steptitle { font-size: var(--fs-base, 14px); font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.cm-wiz-body label { display: block; font-size: var(--fs-sm, 13px); color: var(--ink);
	margin: 12px 0 5px; font-weight: 500; }
.cm-wiz-body input, .cm-wiz-body select { width: 100%; padding: 10px 12px;
	border-radius: var(--radius-sm, 8px); border: 1px solid var(--line); font-size: 15px;
	box-sizing: border-box; background: var(--card, #fff); color: var(--ink); }
.cm-wiz-body input:focus, .cm-wiz-body select:focus { outline: none; border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft); }
.cm-wiz-body .cm-wiz-hint { font-size: var(--fs-xs, 12px); color: var(--muted); margin-top: 5px; line-height: 1.5; }
.cm-wiz-body .row { display: flex; gap: 10px; }
.cm-wiz-body .row > * { flex: 1; min-width: 0; }
.cm-wiz-msg { font-size: var(--fs-sm, 13px); min-height: 16px; margin-top: 10px; }
.cm-wiz-msg.err { color: var(--err); }
.cm-wiz-msg.ok { color: var(--ok); }
.cm-wiz-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.cm-wiz-spacer { flex: 1; }
.cm-wiz .cm-primary { padding: 10px 18px; border: 0; border-radius: var(--radius-sm, 8px);
	background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; }
.cm-wiz .cm-primary:hover { background: var(--accent-dark, var(--accent)); }
.cm-wiz .cm-primary:disabled { opacity: .55; cursor: default; }
.cm-wiz .cm-ghost { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm, 8px);
	background: transparent; color: var(--ink); font-size: 14px; cursor: pointer; }
.cm-wiz .cm-wiz-skip { background: transparent; border: 0; color: var(--muted); font-size: 13px;
	cursor: pointer; text-decoration: underline; }
.cm-wiz .hidden { display: none; }

/* ── Welcome modal — branded intro shown before the onboarding wizard ─────── */
.cm-welcome-overlay { position: fixed; inset: 0; z-index: 62; display: flex; align-items: center;
	justify-content: center; padding: 16px; background: rgba(16, 24, 40, .52);
	animation: cm-welcome-fade .18s ease; }
@keyframes cm-welcome-fade { from { opacity: 0; } to { opacity: 1; } }
.cm-welcome { position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
	background: var(--card, #fff); border-radius: var(--radius-lg, 14px); overflow: hidden;
	box-shadow: 0 24px 64px rgba(16, 24, 40, .32); animation: cm-welcome-rise .22s cubic-bezier(.2, .7, .3, 1); }
@keyframes cm-welcome-rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.cm-welcome-x { position: absolute; top: 10px; right: 12px; z-index: 1; background: rgba(255, 255, 255, .18);
	border: 0; width: 30px; height: 30px; border-radius: 50%; font-size: 22px; line-height: 1;
	color: #fff; cursor: pointer; transition: background .15s ease; }
.cm-welcome-x:hover { background: rgba(255, 255, 255, .32); }
.cm-welcome-hero { background: var(--gradient, linear-gradient(135deg, var(--accent), var(--accent-dark, var(--accent))));
	color: #fff; padding: 30px 26px 26px; text-align: center; }
.cm-welcome-logo { width: 56px; height: 56px; border-radius: 14px; object-fit: contain; background: #fff;
	padding: 8px; box-shadow: 0 6px 18px rgba(16, 24, 40, .22); margin-bottom: 12px; }
.cm-welcome-title { font-size: var(--fs-2xl, 24px); font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.cm-welcome-lead { font-size: var(--fs-md, 15px); line-height: 1.5; margin: 8px 0 0; opacity: .92;
	max-width: 340px; margin-left: auto; margin-right: auto; }
.cm-welcome-body { padding: 20px 24px 4px; }
.cm-welcome-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.cm-welcome-points li { display: flex; align-items: flex-start; gap: 13px; }
.cm-welcome-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft);
	display: flex; align-items: center; justify-content: center; font-size: 19px; }
.cm-welcome-pt { display: flex; flex-direction: column; gap: 2px; }
.cm-welcome-pt b { font-size: var(--fs-base, 14px); color: var(--ink); font-weight: 600; }
.cm-welcome-pt span { font-size: var(--fs-sm, 13px); color: var(--muted); line-height: 1.5; }
.cm-welcome-note { font-size: var(--fs-xs, 12px); color: var(--muted); text-align: center;
	margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.cm-welcome-foot { display: flex; align-items: center; gap: 8px; padding: 16px 24px 20px; }
.cm-welcome-spacer { flex: 1; }
.cm-welcome-skip { background: transparent; border: 0; color: var(--muted); font-size: var(--fs-sm, 13px);
	cursor: pointer; padding: 8px 4px; }
.cm-welcome-skip:hover { color: var(--ink); text-decoration: underline; }
.cm-welcome .cm-primary { padding: 11px 22px; border: 0; border-radius: var(--radius-sm, 8px);
	background: var(--accent); color: #fff; font-weight: 600; font-size: var(--fs-base, 14px); cursor: pointer; }
.cm-welcome .cm-primary:hover { background: var(--accent-dark, var(--accent)); }
@media (prefers-reduced-motion: reduce) {
	.cm-welcome-overlay, .cm-welcome { animation: none; }
}

.cm-onboard { border: 1px solid var(--accent); background: var(--accent-soft);
	border-radius: var(--radius, 10px); padding: 14px 16px; margin-bottom: 16px; }
.cm-onboard.soft { border-color: var(--line); background: var(--card, #fff); }
.cm-onboard-head { display: flex; align-items: center; justify-content: space-between; }
.cm-onboard-head strong { font-size: var(--fs-base, 14px); color: var(--ink); }
.cm-onboard-count { margin-left: 8px; font-size: var(--fs-xs, 12px); color: var(--muted); }
.cm-onboard-hide { background: transparent; border: 0; font-size: 20px; line-height: 1;
	color: var(--muted); cursor: pointer; }
.cm-onboard-bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 10px 0; }
.cm-onboard-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.cm-onboard-sub { font-size: var(--fs-sm, 13px); color: var(--muted); margin: 0 0 8px; line-height: 1.5; }
.cm-onboard-steps { display: flex; flex-direction: column; gap: 6px; }
.cm-onboard-step { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
	background: var(--card, #fff); border: 1px solid var(--line); border-radius: var(--radius-sm, 8px);
	padding: 9px 12px; cursor: pointer; font-family: var(--font-sans); }
.cm-onboard-step:hover { border-color: var(--accent); }
.cm-onboard-step.done { cursor: default; opacity: .72; }
.cm-onboard-step.done:hover { border-color: var(--line); }
.cm-onboard-tick { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex;
	align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
	background: var(--accent-soft); color: var(--accent); }
.cm-onboard-step.done .cm-onboard-tick { background: var(--ok); color: #fff; }
.cm-onboard-text { flex: 1; min-width: 0; }
.cm-onboard-text strong { display: block; font-size: var(--fs-sm, 13px); color: var(--ink); font-weight: 600; }
.cm-onboard-text small { display: block; font-size: var(--fs-xs, 12px); color: var(--muted); }
.cm-onboard-opt { font-style: normal; font-weight: 500; color: var(--muted); font-size: var(--fs-2xs, 11px); }
.cm-onboard-go { flex-shrink: 0; font-size: var(--fs-xs, 12px); color: var(--accent); font-weight: 600; }

/* =============================================================================
 * SIDEBAR + off-canvas DRAWER (family standard). The left panel existed as three
 * inline copies under three names (.sidebar, .side, .rail) with drifting
 * breakpoints (880/800/860) and toggle conventions. One standard here:
 *   .cm-sidebar  — nav sidebar visuals (width from --sidebar-w, brand, nav buttons).
 *   .cm-drawer   — off-canvas MECHANICS: normal flow above tablet (880px), a
 *                  slide-in panel with a backdrop below it. Put it on the sidebar.
 *                  Toggle: add .open to the .cm-drawer element AND its .cm-scrim
 *                  sibling; the .cm-hamburger shows at <=tablet to do it.
 * Two JUSTIFIED local variants stay outside this (not drift — verified):
 *   - Tine (POS): collapses to an always-visible slim icon rail, not a hidden
 *     drawer (a till wants its actions on screen). Its .on/.ic conventions are
 *     app-wide (chips, subtabs), so it keeps a local sidebar.
 *   - Tilly (offline PWA): a filter rail (not nav) inside a fixed app-shell
 *     (100dvh, safe-area), tuned to that shell. Keeps its local .rail drawer.
 * ========================================================================== */
.cm-sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--card);
	border-right: 1px solid var(--line); display: flex; flex-direction: column;
	position: sticky; top: 0; height: 100vh; }
.cm-sidebar .brand { padding: 18px 18px 10px; font-size: var(--fs-lg, 18px); font-weight: 700;
	color: var(--ink); display: flex; align-items: center; gap: 9px; }
.cm-sidebar .brand small { display: block; color: var(--muted); font-weight: 400; font-size: var(--fs-2xs, 11px); }
.cm-sidebar nav { display: flex; flex-direction: column; gap: 2px; padding: 8px; overflow-y: auto; }
.cm-sidebar nav button { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
	background: transparent; color: var(--ink); border: 0; border-radius: 9px; padding: 10px 12px;
	cursor: pointer; font-size: var(--fs-base, 14px); font-family: var(--font-sans); }
.cm-sidebar nav button:hover { background: var(--accent-soft); }
.cm-sidebar nav button.active { background: var(--accent); color: #fff; }
.cm-sidebar nav button .ico { width: 19px; height: 19px; stroke: var(--accent); flex-shrink: 0; }
.cm-sidebar nav button.active .ico { stroke: #fff; }

.cm-hamburger { display: none; background: transparent; border: 1px solid var(--line);
	border-radius: var(--radius-sm, 8px); padding: 6px 11px; font-size: 17px; cursor: pointer; color: var(--ink); }
.cm-scrim { display: none; position: fixed; inset: 0; background: rgba(16, 24, 40, .4); z-index: 39; }

@media (max-width: 880px) {
	.cm-drawer { position: fixed; left: 0; top: 0; height: 100vh; z-index: 40;
		transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .18); }
	.cm-drawer.open { transform: translateX(0); }
	.cm-scrim.open { display: block; }
	.cm-hamburger { display: inline-flex; align-items: center; }
}

/* =============================================================================
 * ACTION BUTTONS + FOOTER (family standard). These were inline copies the
 * Components/Button principles above describe — now defined ONCE here.
 *  - Buttons by context (see the principle up top): in a popup/detail the FULL
 *    filled button is .act (.act.ghost outline, .act.danger red-filled); a row
 *    shortcut is the small outline .mini (.mini.danger). The SAME action looks the
 *    SAME everywhere. Names match what the apps already use, so no markup changes.
 *  - Footer: the one-line "A Campmoney család tagja" strip.
 * Values lifted verbatim from the Quilly/Voya copies (the consistent pair); tokens
 * used where they map cleanly. Generic enough to be global (as they already were).
 * NB: the MODAL (.modal / .modal-bg / .mfoot) is intentionally NOT shared here — the
 * static *-web landings already own a `.modal` class for a full-screen overlay, so a
 * global `.modal` would leak card styling into them. Each SaaS app keeps its own
 * .modal (all matching the family look: card on a scrim, .mfoot footer).
 * ========================================================================== */
button.act { margin-top: 12px; padding: 9px 16px; border: 0; border-radius: 9px;
	background: var(--accent); color: #fff; font-weight: 600; cursor: pointer;
	font-size: var(--fs-base, 14px); font-family: var(--font-sans); }
button.act:hover { filter: brightness(1.08); }
button.act.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); }
button.act.danger { background: var(--err); border-color: var(--err); color: #fff; }
button:disabled { opacity: .5; cursor: not-allowed; filter: none; pointer-events: none; }
button.mini { padding: 5px 10px; font-size: var(--fs-xs, 12px); border: 1px solid var(--line);
	border-radius: var(--radius-sm, 8px); background: #fff; color: var(--ink); cursor: pointer;
	font-family: var(--font-sans); }
button.mini:hover { background: var(--accent-soft); }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
button.danger { border-color: #fecaca; color: var(--err); background: #fff; }
button.danger:hover { background: var(--err); color: #fff; border-color: var(--err); }
button.mini.danger { color: #b91c1c; border-color: #f3b4b4; }

.cm-footer { text-align: center; padding: 16px; font-size: var(--fs-xs, 12px); color: var(--muted);
	border-top: 1px solid var(--line); background: var(--card); margin-top: auto; }
.cm-footer a { color: var(--accent); text-decoration: none; }
.cm-footer a:hover { text-decoration: underline; }
@media print { .cm-footer { display: none; } }

/* =============================================================================
 * Mobile baseline (family rule) — see the Responsive principle at the top.
 * Shared here so no app re-discovers it. Currently: the iOS focus-zoom fix.
 * Safari/iOS zooms the viewport when a focused text field's font-size is < 16px;
 * pinning text-entry controls to 16px at phone width stops it. Apps may set any
 * size on desktop — this only lifts to 16px on small screens.
 * ========================================================================== */
@media (max-width: 640px) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
	select,
	textarea { font-size: 16px; }

	/* Fiók-fülek keskeny modálban: kisebb padding/betű + szűkebb köz, hogy mind a 4 fül (Profil/Jelszó/
	   Biztonság/Csomag) elférjen egyenletes térközzel — különben a jobb szélső „Csomag" fehér háttere a
	   sáv szélére szorul / kilóg. (Az overflow:hidden a sávon a végső biztosíték bármi maradék kilógásra.) */
	.cm-account .cm-acc-tabs { gap: 3px; }
	.cm-account .cm-acc-tab { padding: 8px 4px; font-size: 13px; }

	/* User-menu popover on phones. The desktop dropdown is a small card anchored
	 * right:0 to its (narrow) chip — on a narrow screen its left edge can fall off
	 * the viewport. Drop the .cm-usermenu wrapper to static so the popover's
	 * containing block becomes the positioned full-width header bar, then pin it
	 * edge-to-edge: right:0 can no longer overflow the left. The chip name is
	 * clipped so a long e-mail/name can't blow out the header row. */
	.cm-usermenu { position: static; }
	.cm-usermenu-chip { max-width: 60vw; overflow: hidden; white-space: nowrap; }
	.cm-usermenu-pop { left: 10px; right: 10px; min-width: 0; max-width: none; }
}

/* =============================================================================
 * Add-to-home-screen hint (behaviour in campmoney-ui.js). A slim dismissible
 * banner suggesting the user install the app to the home screen.
 * ========================================================================== */
.a2hs {
	position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%); z-index: 50;
	display: flex; align-items: center; gap: 12px;
	width: min(440px, calc(100% - 24px));
	background: var(--card); color: var(--ink);
	border: 1px solid var(--line); border-radius: var(--radius-lg, 14px);
	box-shadow: 0 12px 40px rgba(16, 24, 40, .22); padding: 12px 14px;
}
.a2hs-icon { flex: none; width: 38px; height: 38px; border-radius: 9px; display: block; }
.a2hs-body { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; display: flex; flex-direction: column; gap: 2px; }
.a2hs-body b { color: var(--ink); font-size: 13.5px; font-weight: 700; }
.a2hs-body .a2hs-share { vertical-align: -3px; margin: 0 1px; color: var(--accent-dark); }
.a2hs-actions { flex: none; display: flex; gap: 6px; }
.a2hs-install { border: none; background: var(--accent-dark); color: #fff; font-weight: 600; font-size: 13px; padding: 8px 14px; border-radius: var(--radius-sm, 9px); white-space: nowrap; cursor: pointer; }
.a2hs-install:hover { filter: brightness(1.05); }
.a2hs-close { flex: none; border: none; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; }
.a2hs-close:hover { background: var(--line); color: var(--ink); }
/* points down toward the bottom-RIGHT share/⋯ button (current iOS Safari toolbar) */
.a2hs-arrow { position: absolute; right: 16px; bottom: -15px; color: var(--accent-dark); animation: a2hsBounce 1.4s ease-in-out infinite; }
.a2hs-arrow svg { display: block; filter: drop-shadow(0 1px 1px rgba(16, 24, 40, .25)); }
.a2hs-body .a2hs-share { animation: a2hsPulse 1.4s ease-in-out infinite; }
@keyframes a2hsBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes a2hsPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (max-width: 560px) {
	.a2hs { flex-wrap: wrap; }
	.a2hs-actions { width: 100%; }
	.a2hs-install { width: 100%; }
	.a2hs-close { position: absolute; top: 6px; right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
	.a2hs-arrow, .a2hs-body .a2hs-share { animation: none !important; }
}

/* ── Feature tour — spotlight coach-marks (Campmoney.startTour) ────────────
   Overlay blocks the app; the "hole" is a transparent rect whose huge box-shadow
   dims everything else, so it spotlights any element regardless of its z-index. */
.cm-tour-overlay { position: fixed; inset: 0; z-index: 2000; }
.cm-tour-hole { position: fixed; border-radius: 10px; pointer-events: none;
	box-shadow: 0 0 0 9999px rgba(16, 24, 40, .55);
	outline: 2px solid var(--accent); outline-offset: 3px; }
.cm-tour-animate .cm-tour-hole { transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
.cm-tour-animate .cm-tour-pop { transition: left .25s ease, top .25s ease; }
.cm-tour-pop { position: fixed; width: min(300px, calc(100vw - 20px)); box-sizing: border-box;
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg, 14px);
	box-shadow: 0 16px 44px rgba(16, 24, 40, .28); padding: 16px 16px 12px; }
.cm-tour-step { font-size: var(--fs-2xs, 11px); color: var(--accent); font-weight: 700; letter-spacing: .06em; }
.cm-tour-title { font-size: var(--fs-lg, 17px); font-weight: 700; color: var(--ink); margin: 5px 0 6px; }
.cm-tour-body { font-size: var(--fs-sm, 13px); color: var(--muted); line-height: 1.55; }
.cm-tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.cm-tour-foot .cm-tour-spacer { flex: 1; }
.cm-tour-foot .hidden { display: none; }
.cm-tour-skip { background: none; border: none; color: var(--muted); font-size: var(--fs-xs, 12px);
	cursor: pointer; padding: 6px 2px; }
.cm-tour-skip:hover { color: var(--ink); text-decoration: underline; }
.cm-tour-back { padding: 8px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm, 8px);
	background: #fff; color: var(--ink); font-weight: 600; font-size: var(--fs-sm, 13px); cursor: pointer; }
.cm-tour-back:hover { background: var(--accent-soft); }
.cm-tour-next { padding: 8px 17px; border: none; border-radius: var(--radius-sm, 8px);
	background: var(--accent); color: #fff; font-weight: 600; font-size: var(--fs-sm, 13px); cursor: pointer; }
.cm-tour-next:hover { background: var(--accent-dark, var(--accent)); }
@media (prefers-reduced-motion: reduce) {
	.cm-tour-animate .cm-tour-hole, .cm-tour-animate .cm-tour-pop { transition: none; }
}

/* Wide data tables: wrap a table in <div class="tablewrap"> so ONLY the table scrolls horizontally,
 * never the surrounding card/modal — otherwise the gradient header bar scrolls away with it and the
 * table looks headerless ("orphan table") on mobile. Family-wide so shared components (invoice detail,
 * line editors) get it in every app. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }