/* Quilly app — neutrals local, brand (--accent/--accent-soft/--gradient) from /brand.css,
		   design tokens (--font-sans, scales) from /campmoney-ui.css. */
		:root { --bg:#faf9fe; --card:#ffffff; --line:#eee9f6; --txt:#1b1626;
			--muted:#6b6377; --ok:#16a34a; --err:#dc2626; --sidebar-w:224px;
			/* Egységes fejléc-tónus (oldalfejléc + modal-fejléc) — halvány accent. */
			--head-tint:#f7f4fd;
			/* Egységes áttetsző lila „üveg" (mobil: cégváltó / avatar-menü / alsó sáv). */
			--glass:linear-gradient(135deg,rgba(124,58,237,.13),rgba(147,51,234,.09));
			--glass-strong:linear-gradient(135deg,rgba(124,58,237,.2),rgba(147,51,234,.13));
			--glass-bd:rgba(124,58,237,.22); }
		* { box-sizing:border-box; }
		body { margin:0; font-family:var(--font-sans,"Inter","Helvetica Neue",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
			background:var(--bg); color:var(--txt);
			min-height:100vh; display:flex; flex-direction:column; }
		#appWrap { display:flex; flex-direction:column; min-height:100vh; }
		/* ===== Fix, sötét felső sáv — fiók-/globális hatókör (Quilly-only; a családi
		   .cm-sidebar/.cm-drawer mechanikát NEM érinti). A bal menü így tiszta navigáció. ===== */
		.q-topband { display:flex; align-items:center; gap:14px; height:54px; padding:0 16px;
			background:#1b1626; color:#ede9f6; position:sticky; top:0; z-index:40; }
		.q-topband .cm-hamburger { color:#ede9f6; border-color:#39304a; background:transparent; }
		/* NAV TESZT fejléc-badge elengedve (desktop+mobil) — a „NAV TESZT mód" info úgyis az Értesítésekben van. */
		#testBadge { display:none; }
		.q-brand { display:flex; align-items:center; gap:9px; }
		.q-brand .q-logo { width:28px; height:28px; border-radius:8px; background:var(--accent);
			display:grid; place-items:center; flex:none; }
		.q-brand .q-logo svg { width:17px; height:17px; fill:none; stroke:#fff; stroke-width:3;
			stroke-linecap:round; stroke-linejoin:round; display:block; }
		.q-brand .q-wordmark { font-weight:700; font-size:16px; letter-spacing:-.01em; color:#fff; }
		/* Mobil alsó navigációs sáv — desktopon rejtve (a @media <=640px kapcsolja be). */
		.q-bottomnav { display:none; }
		.cm-sheet-grab { display:none; }   /* csak a mobil Menü-lap tetején (grab-fogantyú) */
		.cm-sidebar nav button .ico-quill { display:none; }   /* Áttekintés = Quilly-toll CSAK mobilon (a @media kapcsolja) */
		/* Mozgó kijelölés-„pill": a .bn.active háttere helyett egy külön csúszó elem (animált + húzható).
		   Pozíció CSS-változókból (--bn-i = aktív index, --bn-n = látható elemek száma) → a nav szélességétől
		   függetlenül pontos, mert a flex:1 egyenlő szélességekhez igazodik (padding 6px, nincs gap). */
		.q-bottomnav .bn-pill { position:absolute; top:5px; bottom:5px; border-radius:14px;
			left:calc(6px + var(--bn-i,0) * (100% - 12px) / var(--bn-n,4));
			width:calc((100% - 12px) / var(--bn-n,4));
			background:var(--accent); z-index:0; opacity:0; pointer-events:none;
			transition:left .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1), opacity .2s ease, top .2s ease, bottom .2s ease; }
		.q-bottomnav.compact .bn-pill { top:3px; bottom:3px; }
		.q-bottomnav .bn { position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
			background:none; border:0; cursor:pointer; padding:6px 0 5px; border-radius:14px;
			color:var(--accent-dark); opacity:.62; font:600 9.5px/1.1 var(--font-sans,"Inter",sans-serif);
			transition:padding .24s ease, color .18s ease; touch-action:none; }
		.q-bottomnav .bn svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:width .24s ease, height .24s ease; }
		.q-bottomnav .bn svg.quill { stroke-width:3.2; }
		.q-bottomnav .bn.active { opacity:1; color:#fff; }
		.q-bottomnav .bn:active { transform:scale(.94); }
		/* Görgetéskor összecsukódó (Revolut-szerű) sáv: lefelé görgetve a címke eltűnik → csak ikon, és a
		   sáv is ÖSSZÉBB HÚZÓDIK (kisebb ikon + vékonyabb padding). */
		.q-bottomnav .bn span { max-height:14px; overflow:hidden; opacity:1;
			transition:max-height .24s ease, opacity .18s ease; }
		.q-bottomnav.compact { padding:3px 6px; }
		.q-bottomnav.compact .bn { padding:6px 0; }
		.q-bottomnav.compact .bn span { max-height:0; opacity:0; }
		.q-bottomnav.compact .bn svg { width:18px; height:18px; }
		.q-band-right { margin-left:auto; display:flex; align-items:center; gap:10px; min-width:0; }
		/* ===== User-chip = avatar-kör MINDEN szélességen (a teljes név/szerep a lenyíló menü fejlécében). ===== */
		#userMenu .q-userchip { position:relative; width:34px; height:34px; padding:0; border:0; border-radius:50%;
			background:none; cursor:pointer; flex:0 0 auto; display:inline-grid; place-items:center; }
		#userMenu .q-userchip .uav { width:34px; height:34px; border-radius:50%; background:var(--accent);
			color:#fff; font-weight:700; font-size:14px; display:grid; place-items:center; line-height:1; }
		/* PRO: TÖMÖR FEHÉR sarok-lapka accent szikrával (a fejléc-PRO-lapka nyelvén; a sötét sávtól a
		   box-shadow választja el). Nincs gradient-gyűrű — tiszta accent avatar + fehér PRO-jel. */
		#userMenu .q-userchip .q-pro-dot { position:absolute; right:-3px; bottom:-3px; width:16px; height:16px;
			border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 0 0 2px #1b1626; }
		#userMenu .q-userchip .q-pro-dot svg, #userMenu .q-userchip .q-pro-dot .cm-ic { width:10px; height:10px; stroke:var(--accent); fill:none; }
		/* A menü fejléce: avatar + név + szerep + (PRO) — mert a név már nem a sávban van. */
		.acct-menu .um-head { display:flex; align-items:center; gap:10px; padding:4px 10px 10px; margin-bottom:4px;
			border-bottom:1px solid var(--line); }
		.acct-menu .um-head .uav.sm { width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff;
			font-weight:700; font-size:14px; display:grid; place-items:center; flex:0 0 auto; }
		.acct-menu .um-head .um-name { font-weight:600; color:var(--txt); font-size:14px; word-break:break-word; }
		.acct-menu .um-head .um-role2 { font-size:12px; color:var(--muted); margin-top:1px; }
		.acct-menu .um-head .um-pro { color:var(--accent-dark,#6d28d9); font-weight:700; white-space:nowrap; }
		.acct-menu .um-head .um-pro svg, .acct-menu .um-head .um-pro .cm-ic { width:11px; height:11px; vertical-align:-1px; }
		/* #who a sávban: világos szöveg; a cégváltó halvány pill. A fehér legördülő
		   (.acct-menu / .um-item) NEM company.switch → érintetlen marad. */
		.q-topband #who { color:#b7aec6; margin-left:0; position:relative; }
		/* App-váltó lenyíló a jobb klaszter (avatar) széléhez simuljon (Google-szerű),
		   ne a kis pontrács-gombhoz → #who a pozicionáló, a .cm-appsw statikus.
		   A #userMenu-t külön pozicionáljuk, hogy az ő legördülője NE a #who-hoz
		   ugorjon (az #acctSwitch már position:relative). */
		.q-topband #who .cm-appsw { position:static; }
		.q-topband #who #userMenu { position:relative; }
		.q-topband #who .company { color:#fff; }
		.q-topband #who button.company.switch { color:#fff; }
		.q-topband #who button.company.switch::after { color:#b7aec6; }
		.q-topband #who #acctSwitch button.company.switch { background:rgba(255,255,255,.07);
			border:1px solid #39304a; border-radius:9px; padding:6px 11px; }
		/* Törzs: sidebar + tartalom a sáv alatt egymás mellett */
		.q-body { display:flex; flex:1; min-height:0; }
		/* Desktopon a sidebar a SÁV ALÁ tapad (a megosztott top:0/100vh helyett). Min-width
		   blokkban, hogy a <=880px drawer-mechanikát (.cm-drawer fixed/top:0) ne írja felül. */
		@media (min-width:881px) {
			.q-body .cm-sidebar { top:54px; height:calc(100vh - 54px); }
		}
		/* A nav kitölti a sidebart → a Fiók-csoport margin-top:auto-val alulra kerül. */
		#sidebar > nav { flex:1 1 auto; }
		.q-navfoot { margin-top:auto; }
		/* Menü-szekció feliratok (Séma A) */
		.q-navsec { font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
			font-weight:700; padding:14px 10px 5px; }
		/* Blog: diszkrét, külső lapot nyitó alsó link (nem sima menüpont) */
		.cm-sidebar nav button.q-bloglink { color:var(--muted); border-top:1px solid var(--line);
			margin-top:6px; border-radius:0; }
		.cm-sidebar nav button.q-bloglink:hover { background:transparent; color:var(--txt); }
		.cm-sidebar nav button.q-bloglink .q-ext { margin-left:auto; font-size:11px; opacity:.7; }
		/* Sidebar visuals come from the shared .cm-sidebar (campmoney-ui.css). */
		.ico { width:1.1em; height:1.1em; fill:none; stroke:currentColor; stroke-width:1.8;
			stroke-linecap:round; stroke-linejoin:round; vertical-align:-0.16em; flex-shrink:0; }
		.main-col { flex:1; min-width:0; display:flex; flex-direction:column; }
		header { padding:12px 22px; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30;
			background:var(--card); display:flex; align-items:center; gap:12px; }
		#who { font-size:13px; color:var(--muted); display:flex; align-items:center; gap:10px;
			flex-wrap:wrap; margin-left:auto; }
		#who .company { font-weight:600; color:var(--txt); font-size:14px; }
		#acctSwitch { position:relative; }
		#who button.company.switch { cursor:pointer; background:none; border:none; padding:0; display:inline-flex; align-items:center; gap:6px; font-family:inherit; }
		#who button.company.switch::after { content:'▾'; font-size:11px; color:var(--muted); }
		.acct-menu { position:absolute; top:100%; right:0; margin-top:8px; min-width:240px; max-height:60vh; overflow:auto;
			background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.14); padding:6px; }
		.acct-menu button { display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; text-align:left;
			background:none; border:none; padding:9px 11px; border-radius:8px; cursor:pointer; }
		.acct-menu button:hover { background:#f3f4f6; }
		/* Aktív cég: jól látható accent-kiemelés (bal accent-sáv + halvány accent háttér) — nem a korábbi alig-látszó. */
		.acct-menu button.cur { background:rgba(124,58,237,.14); box-shadow:inset 3px 0 0 var(--accent); }
		.acct-menu button.cur .nm { color:var(--accent-dark); }
		.acct-menu .nm { font-weight:600; color:var(--txt); font-size:14px; }
		.acct-menu .rl { font-size:12px; color:var(--muted); }
		.acct-menu .acct-add { border-top:1px solid var(--line); margin-top:4px; color:var(--accent); font-weight:600; }
		/* Tiszta könyvelő (0 saját cég): „Új cég" helyett meghívó-súgó — nem kattintható, halvány. */
		.acct-menu .acct-hint { display:flex; align-items:flex-start; gap:8px; border-top:1px solid var(--line);
			margin-top:4px; padding:10px 11px; color:var(--muted); font-size:12.5px; line-height:1.45; }
		.acct-menu .acct-hint svg, .acct-menu .acct-hint .cm-ic { width:14px; height:14px; flex:none; margin-top:1px; }
		/* Cég-avatar a cégváltóban: feltöltött logó (fehér csempén, contain — nem-négyzetes se vágódjon)
		   vagy monogram (accent háttér, fehér betű). */
		.cavatar { border-radius:50%; background:var(--accent); color:#fff; font-weight:700; display:inline-grid;
			place-items:center; line-height:1; flex:0 0 auto; overflow:hidden; }
		.cavatar.img { color:transparent; background-color:#fff; background-repeat:no-repeat;
			background-position:center; background-size:contain; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
		#who .company { display:inline-flex; align-items:center; gap:7px; }
		#who .cavatar { width:24px; height:24px; font-size:12px; }
		.acct-menu .cavatar { width:30px; height:30px; font-size:13px; }
		.acct-menu button.corow { flex-direction:row; align-items:center; gap:10px; }
		.acct-menu button.corow .acol { display:flex; flex-direction:column; gap:2px; min-width:0; align-items:flex-start; }
		#userMenu { position:relative; }
		.acct-menu .um-role { font-size:12px; color:var(--muted); padding:4px 11px 6px; border-bottom:1px solid var(--line); margin-bottom:4px; }
		/* Könyvelői ügyfél-áttekintő kártyák */
		.co-row { display:block; width:100%; text-align:left; border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px; background:#fff; cursor:pointer; }
		.co-row:hover { border-color:var(--accent); }
		.co-row.cur { border-color:var(--accent); background:rgba(124,58,237,.1); box-shadow:0 0 0 1px var(--accent); }
		.co-main { display:flex; gap:12px; align-items:flex-start; }
		.co-body { flex:1; min-width:0; }
		.co-row .cavatar { width:38px; height:38px; font-size:15px; }
		.co-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px; }
		.co-name { font-weight:600; font-size:15px; }
		.co-role { font-size:12px; color:var(--muted); white-space:nowrap; }
		.co-stats { display:flex; flex-wrap:wrap; gap:6px; }
		.co-chip { font-size:12px; color:var(--muted); background:#f3f4f6; border-radius:999px; padding:3px 10px; }
		.co-chip strong { color:var(--txt); }
		.co-chip.alert { background:#fef2f2; color:#b91c1c; }
		.co-chip.alert strong { color:#b91c1c; }
		.acct-menu button.um-item { flex-direction:row; align-items:center; gap:8px; font-weight:500; color:var(--txt); }
		.pill { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; background:#f3f4f6; border:1px solid var(--line); }
		main { padding:22px; max-width:1080px; width:100%; margin:0 auto; }
		/* Görgetősávok: app-szerte elrejtve (a tartalom görgethető marad wheel/érintéssel); CSAK a nagy
		   táblázatoknál (.tablewrap) hagyjuk meg, ahol a vízszintes görgetés jelzése hasznos. A fő oldal
		   görgetősávja (html) érintetlen — a :where(body) miatt a body/html kimarad. */
		:where(body) * { scrollbar-width:none; }
		:where(body) *::-webkit-scrollbar { width:0; height:0; }
		.tablewrap { scrollbar-width:thin; scrollbar-color:#cfc6e6 transparent; }
		.tablewrap::-webkit-scrollbar { width:8px; height:8px; }
		.tablewrap::-webkit-scrollbar-thumb { background:#cfc6e6; border-radius:99px; }
		.tablewrap::-webkit-scrollbar-track { background:transparent; }
		.card { background:var(--card); border:1px solid var(--line); border-radius:14px;
			padding:18px; margin-bottom:18px; overflow-x:auto; box-shadow:0 1px 2px rgba(16,24,40,.04); }
		/* Széles táblák .tablewrap-be csomagolva (a szabály a közös campmoney-ui.css-ben): CSAK a tábla
		   görög vízszintesen, NE az egész .card/.modal — így a gradient fejléc-sáv a helyén marad, nincs
		   „árva" tábla mobilon. A fenti .card overflow-x:auto csak biztonsági háló (becsomagolt táblánál
		   sosem aktiválódik). */
		h2 { font-size:13px; margin:0 0 14px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
		label { display:block; font-size:12px; color:var(--muted); margin:8px 0 4px; }
		input, select, textarea { width:100%; padding:8px 10px; border-radius:9px; border:1px solid var(--line);
			background:#fff; color:var(--txt); font-size:14px; }
		/* Checkbox/radio SOHA ne nyúljon teljes szélességre (különben a mellettük lévő címke kicsúszik).
		   Célzott (típus-)szabály — NEM inflálja a generic `input` specificitását, így nem üti a
		   .q-search-field/.cm-* stb. háttér-szabályokat; csak a szélességet állítja checkbox/radióra. */
		input[type="checkbox"], input[type="radio"] { width:auto; }

		/* PRO-előfizetés megünneplése sikeres aktiválás után (konfetti + kártya). */
		.pro-celebrate { position:fixed; inset:0; z-index:100001; display:flex; align-items:center; justify-content:center;
			background:rgba(27,22,38,.5); backdrop-filter:blur(3px); animation:proFadeIn .3s ease; }
		.pro-celebrate.closing { animation:proFadeOut .35s ease forwards; }
		.pro-celebrate-card { position:relative; z-index:2; background:#fff; border-radius:20px; padding:32px 30px 26px;
			max-width:380px; width:88%; text-align:center; box-shadow:0 30px 80px -28px rgba(60,40,110,.7);
			animation:proPop .5s cubic-bezier(.2,.9,.3,1.3); }
		.pro-celebrate-badge { display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:13px; color:#fff;
			background:var(--gradient,linear-gradient(100deg,#7c3aed,#5566f0 55%,#22a7e0)); padding:6px 14px; border-radius:20px; letter-spacing:.04em; }
		.pro-celebrate-badge svg, .pro-celebrate-badge .cm-ic { stroke:#fff; }
		.pro-celebrate-card h2 { margin:16px 0 6px; font-size:22px; letter-spacing:-.01em; }
		.pro-celebrate-card p { margin:0 0 20px; color:var(--muted); font-size:14px; line-height:1.55; }
		/* Feldolgozó-overlay spinnere (fizetés-visszatérés, IPN bevárása) — a cmspin keyframe-et használja. */
		.pro-processing-spin { width:44px; height:44px; margin:2px auto 8px; border:4px solid var(--line);
			border-top-color:var(--accent); border-radius:50%; animation:cmspin .8s linear infinite; }
		@media (prefers-reduced-motion:reduce){ .pro-processing-spin{ animation:none; } }
		/* Sikertelen fizetés overlay ikonja (piros figyelmeztető kör). */
		.pro-fail-ic { width:54px; height:54px; margin:2px auto 10px; border-radius:50%; background:#fee2e2;
			color:#dc2626; font-size:30px; font-weight:800; line-height:54px; text-align:center; }
		.pro-confetti { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
		.pro-confetti i { position:absolute; top:-14px; display:block; will-change:transform; opacity:.95;
			animation:proConfetti linear forwards; }
		@keyframes proFadeIn { from{opacity:0} to{opacity:1} }
		@keyframes proFadeOut { to{opacity:0} }
		@keyframes proPop { from{transform:scale(.82);opacity:0} to{transform:scale(1);opacity:1} }
		@keyframes proConfetti { to { transform:translateY(108vh) rotate(720deg); opacity:.15; } }
		@media (prefers-reduced-motion:reduce){ .pro-confetti{display:none} .pro-celebrate,.pro-celebrate-card{animation:none} }
		input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent);
			box-shadow:0 0 0 3px var(--accent-soft); }
		.row { display:flex; gap:10px; flex-wrap:wrap; }
		.row > div { flex:1; min-width:130px; }
		/* .act / .mini / .modal / .mfoot — family components in /campmoney-ui.css */
		.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:#1e2233;
			color:#fff; padding:11px 18px; border-radius:10px; font-size:14px; z-index:60;
			box-shadow:0 8px 28px rgba(16,24,40,.28); max-width:90%; }
		.toast.err { background:#dc2626; }
		/* Egységes háttér-feladat jelző (pl. kivonat AI-beolvasása, Gmail-import) — a toasttól balra, amíg fut.
		   Kattintható: kinyílik egy infópanel a futó folyamatokkal. */
		.bgtask { position:fixed; bottom:22px; left:22px; display:inline-flex; align-items:center; cursor:pointer;
			background:#1e2233; color:#fff; padding:10px 16px; border-radius:10px; font-size:13px; z-index:59;
			box-shadow:0 8px 28px rgba(16,24,40,.28); max-width:calc(100% - 44px); }
		.bgtask-more { margin-left:9px; opacity:.65; font-size:11px; }
		.bgtask-panel { position:fixed; bottom:68px; left:22px; z-index:60; background:#1e2233; color:#fff;
			border-radius:12px; box-shadow:0 12px 32px rgba(16,24,40,.30); padding:4px;
			max-width:min(380px, calc(100% - 44px)); }
		.bgtask-panel.hidden { display:none; }
		.bgtask-item { display:flex; align-items:center; gap:14px; justify-content:space-between; padding:10px 12px; font-size:13px; }
		.bgtask-item + .bgtask-item { border-top:1px solid rgba(255,255,255,.12); }
		.bgtask-item .bgtask-detail { color:rgba(255,255,255,.7); font-size:12px; margin-top:3px; line-height:1.35; }
		.bgtask-item button { background:rgba(255,255,255,.16); color:#fff; border:none; border-radius:7px;
			padding:5px 11px; font-size:12px; cursor:pointer; white-space:nowrap; }
		.bgtask-item button:hover { background:rgba(255,255,255,.26); }
		/* Költések-kimutatás: bevétel/kiadás tile-ok + kördiagramok + jelmagyarázat */
		.sp-tiles { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
		.sp-tile { flex:1; min-width:150px; border:1px solid var(--border,#e5e7eb); border-radius:12px; padding:12px 14px; }
		.sp-tile .lbl { color:var(--muted); font-size:12px; }
		.sp-tile .val { font-size:22px; font-weight:700; margin-top:2px; }
		.sp-donuts { display:flex; gap:14px; flex-wrap:wrap; }
		.sp-donut { flex:1; min-width:290px; border:1px solid var(--border,#e5e7eb); border-radius:12px; padding:14px; }
		.sp-donut h4 { margin:0 0 12px; font-size:14px; }
		.sp-legend { display:flex; flex-direction:column; gap:4px; font-size:13px; min-width:0; flex:1; }
		.sp-legend .row { display:flex; align-items:center; gap:8px; cursor:pointer; padding:3px 5px; border-radius:6px; }
		.sp-legend .row:hover { background:var(--accent-soft); }
		.sp-legend .sw { width:10px; height:10px; border-radius:3px; flex:none; }
		.sp-legend .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
		.sp-legend .amt { font-weight:600; white-space:nowrap; }
		.sp-legend .pct { color:var(--muted); font-size:11px; width:36px; text-align:right; }
		/* Interaktív donut-szeletek: egér fölé húzva kiemelkednek (vastagabb gyűrű). */
		.donut-seg { transition:stroke-width .13s ease; cursor:pointer; }
		.donut-seg:hover { stroke-width:8.5; }
		/* Dashboard-donut a közepén kétsoros felirattal (összeg/darab + címke). */
		.dash-donut { position:relative; display:inline-grid; place-items:center; flex:none; }
		.dash-donut > svg { display:block; }
		.dash-donut-c { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
			justify-content:center; pointer-events:none; text-align:center; }
		.dash-donut-c .dc-top { font-size:16px; font-weight:700; line-height:1.05; color:var(--txt); white-space:nowrap; }
		.dash-donut-c .dc-bot { font-size:10px; color:var(--muted); margin-top:2px; }
		/* 2-oszlopos dashboard-elrendezés: BAL = donut + jelmagyarázat, JOBB = hasznos infó (stat-rács /
		   heti bontás). Kitölti a szélességet (nincs üres folt); mobilon a két oszlop egymás alá csúszik. */
		/* align-items:stretch → a bal (diagram) oszlop olyan magas, mint a jobb (pl. heti táblázat); a
		   dd-main középre igazítja a diagramot vízszintesen (justify) ÉS függőlegesen (align) is. */
		.dash-split { display:flex; gap:26px; align-items:stretch; flex-wrap:wrap; }
		.dash-split .dd-main { display:flex; gap:18px; align-items:center; justify-content:center; flex-wrap:wrap; flex:1 1 300px; min-width:0; }
		.dash-split .dd-side { flex:1 1 300px; min-width:0; }
		/* Hasznos számok rácsa (2 oszlop) a jobb oldalon — pl. kintlévőség, lejárt, NAV, ügyfél. */
		.dash-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
		.dash-stat { border:1px solid var(--line); border-radius:11px; padding:10px 13px; transition:border-color .12s ease; }
		.dash-stat[onclick] { cursor:pointer; }
		.dash-stat[onclick]:hover { border-color:var(--accent); }
		.dash-stat .v { font-size:17px; font-weight:700; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
		.dash-stat .l { font-size:11px; color:var(--muted); margin-top:2px; }
		.dash-stat.alert .v { color:#dc2626; }
		/* Likviditás heti bontása — összecsukható, hogy a kártya kompakt maradjon. */
		.dash-weeks { margin-top:12px; }
		.dash-weeks summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--accent); padding:2px 0;
			list-style:none; }
		.dash-weeks summary::-webkit-details-marker { display:none; }
		.dash-weeks summary::before { content:'▸ '; }
		.dash-weeks[open] summary::before { content:'▾ '; }
		/* AI pénzügyi elemzés kártya — visszafogott, kisebb betű, accent bal szegély. */
		.sp-insight-card { border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px;
			padding:12px 14px; background:var(--card,#fff); }
		.sp-insight-head { display:flex; align-items:center; gap:8px; font-weight:600; font-size:13.5px; margin-bottom:8px; }
		.sp-insight-card .ai-md { font-size:13.5px; line-height:1.55; }
		.sp-insight-note { color:var(--muted); font-size:11px; margin-top:10px; }
		.qa { display:flex; flex-wrap:wrap; gap:10px; }
		.qa button { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; margin:0; }
		#quickActions { gap:12px; }
		#quickActions button { padding:14px 20px; font-size:14.5px; }
		#quickActions .ico { width:20px; height:20px; }
		.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:18px; }
		.kpi { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px;
			cursor:pointer; box-shadow:0 1px 2px rgba(16,24,40,.04); }
		.kpi:hover { border-color:var(--accent); }
		.kpi .num { font-size:28px; font-weight:700; line-height:1.1; }
		.kpi .lbl { font-size:13px; color:var(--muted); margin-top:4px; }
		.kpi.alert .num { color:#dc2626; }
		.dash-alert { display:flex; align-items:center; gap:12px; background:#fffbeb; border:1px solid #fde68a;
			color:#92400e; border-radius:12px; padding:14px 16px; margin-bottom:14px; cursor:pointer; }
		.dash-alert:hover { background:#fef3c7; }
		.dash-alert .da-ico { font-size:20px; flex-shrink:0; }
		.dash-alert .da-go { margin-left:auto; font-weight:600; white-space:nowrap; }
		.dash-note { display:flex; align-items:center; gap:12px; background:#f1f5f9; border:1px solid #e2e8f0;
			color:#475569; border-radius:12px; padding:11px 16px; margin-bottom:14px; cursor:pointer; font-size:13px; }
		.dash-note:hover { background:#e9eef4; }
		.dash-note .da-go { margin-left:auto; font-weight:600; white-space:nowrap; }
		.dash-note .da-x, .dash-alert .da-x { background:none; border:none; color:var(--muted); font-size:15px;
			cursor:pointer; padding:2px 7px; margin-left:6px; border-radius:6px; line-height:1; flex-shrink:0; }
		.dash-note .da-x:hover, .dash-alert .da-x:hover { background:#dde3ea; color:var(--txt); }
		/* Bezárható dashboard info-kártya (pl. AI Asszisztens, likviditás) — jobb felső ✕ */
		/* A ✕ a színátmenetes fejléc-sávon ül (a kártya jobb-felső sarka) → fehér. */
		.card-x { position:absolute; top:10px; right:12px; background:none; border:none; color:rgba(255,255,255,.8);
			font-size:15px; cursor:pointer; padding:2px 7px; border-radius:6px; line-height:1; z-index:1; }
		.card-x:hover { background:rgba(255,255,255,.22); color:#fff; }
		/* „Elrejtett kártyák visszaállítása" fogaskerék az áttekintőn (csak ha van elrejtett) */
		#dashGear { display:flex; justify-content:flex-end; margin:0 0 6px; }
		.dash-gear { background:none; border:1px solid var(--line); color:var(--muted); font-size:12.5px;
			cursor:pointer; padding:4px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; }
		.dash-gear:hover { background:var(--line); color:var(--txt); }
		.badge.test { background:#fde68a; color:#92400e; border-color:#fcd34d; font-weight:700; }
		table { width:100%; border-collapse:collapse; font-size:13.5px; }
		th, td { text-align:left; padding:9px; border-bottom:1px solid var(--line); vertical-align:top; }
		th { color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; }
		tbody tr:hover { background:#faf9ff; }
		.msg { font-size:13px; margin-top:8px; min-height:16px; }
		.msg.ok { color:var(--ok); } .msg.err { color:var(--err); }
		.hidden { display:none !important; }
		.badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600;
			border:1px solid var(--line); background:#f3f4f6; }
		.b-ISSUED{color:#0e7490} .b-PAID{color:#047857} .b-CANCELLED{color:#dc2626}
		.b-NONE{color:#6b7280} .b-SUBMITTING{color:#b45309} .b-PENDING{color:#b45309} .b-SUBMITTED{color:#b45309}
		.b-DONE{color:#047857} .b-ERROR{color:#dc2626} .b-WARN{color:#b45309}
		.badge.b-VOID { background:#fde68a; color:#92400e; }
		/* Importált (archív) számla — jól látható, eltérő (ibolya) szín + halvány sor-háttér. */
		.badge.archiv { background:#ede9fe; color:#6d28d9; border-color:#ddd6fe; font-weight:700; }
		/* Számlatípus-badge-ek: halvány, egymástól elkülönülő, a designba illő pasztell színek. */
		.badge.k-ADVANCE { background:#dbeafe; color:#1e40af; border-color:#bfdbfe; }
		.badge.k-FINAL   { background:#cffafe; color:#155e75; border-color:#a5f3fc; }
		.badge.k-STORNO  { background:#ffe4e6; color:#9f1239; border-color:#fecdd3; }
		.badge.k-MODIFY  { background:#fef3c7; color:#92400e; border-color:#fde68a; }
		/* Kapcsolódó bizonylatok folyamat-csíkja (miből mi készült), nyilakkal. */
		.cm-flow { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 12px; padding:8px 10px;
			background:var(--accent-soft,#f5f3ff); border:1px solid var(--line); border-radius:10px; }
		.cm-flow-node { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
			background:#fff; border:1px solid var(--line); font-size:12px; font-weight:600; color:var(--txt); text-decoration:none; }
		a.cm-flow-node:hover { border-color:var(--accent); }
		.cm-flow-cur { background:var(--accent); color:#fff; border-color:var(--accent); }
		.cm-flow-t { font-weight:400; opacity:.75; font-size:11px; }
		.cm-flow-arrow { color:var(--muted); font-weight:700; }
		/* Kelt-oszlop dátum-tartomány szűrő (tól/ig) — kompakt, egymás alatt, illeszkedik a szűrősorba. */
		.date-range-filter { display:flex; flex-direction:column; gap:3px; }
		.date-range-filter input[type=date] { width:100%; font-size:11px; padding:2px 5px; box-sizing:border-box; }
		tbody tr.arch-row td { background:#faf8ff; }
		@keyframes cmspin { to { transform:rotate(360deg); } }
		.spinner { display:inline-block; width:14px; height:14px; border:2px solid var(--line);
			border-top-color:var(--accent); border-radius:50%; animation:cmspin .7s linear infinite;
			vertical-align:-2px; margin-right:7px; }
		.naverr { color:#b91c1c; font-size:11px; margin-top:3px; max-width:280px; white-space:normal; line-height:1.3; }
		tbody tr.rowlink { cursor:pointer; }
		tbody tr.rowlink:hover { background:var(--accent-soft); }
		.chat-doclink { color:var(--accent); text-decoration:underline; cursor:pointer; }
		.chat-doclink:hover { opacity:.85; }
		tbody tr.inactive-row td { color:#9ca3af; }
		tbody tr.inactive-row td:first-child { text-decoration:line-through; }
		.navbanner { border-radius:8px; padding:10px 12px; font-size:13px; margin:6px 0 4px; border:1px solid; }
		.navbanner.ok { background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
		.navbanner.warn { background:#fffbeb; border-color:#fde68a; color:#92400e; }
		.navfacts { margin:6px 0; }
		.navfacts > div { display:flex; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); }
		.navfacts dt { width:180px; color:#6b7280; margin:0; }
		.navfacts dd { margin:0; font-weight:600; }
		/* Szerep-módosító a felhasználó-részletezőben (könyvelő olvasó ↔ számlázhat). */
		.urole-edit { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
		.urole-lbl { display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
		.urole-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
		.urole-row select { flex:1; min-width:180px; }
		.urole-hint { margin:8px 0 0; font-size:12px; color:var(--muted); line-height:1.45; }
		.block-title { color:var(--accent); font-weight:700; font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; margin:2px 0 8px; }
		/* Ismétlődő-sablon varázsló (több lépés, mobilbarát blokkok) */
		.rcwiz-dots { display:flex; gap:6px; justify-content:center; margin:4px 0 14px; }
		.rcwiz-dot { width:8px; height:8px; border-radius:50%; background:var(--line); transition:background .15s; }
		.rcwiz-dot.on { background:var(--accent); }
		.rcwiz-steptitle { font-weight:700; font-size:15px; margin:0 0 4px; color:var(--txt); }
		.rcwiz-help { color:var(--muted); font-size:13px; margin:0 0 14px; line-height:1.55; }
		.rcwiz-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:18px; }
		.rcwiz-foot .act { margin:0; }
		/* Ismétlődő = PRO: FREE-nél a tartalom helyett upsell látszik */
		#tab-recurring.gated #sub-recurring, #tab-recurring.gated [data-sub] { display:none; }
		.block-sep { border-top:1px solid var(--line); margin:14px 0 12px; }
		/* Egységes nézet-fejléc: tónusos sáv a kártya tetején + elválasztó vonal (mint a
		   modal-fejléc). A -18px negatív margó a .card 18px paddingjéig ér ki → teljes szélesség.
		   Minden .cardhead a .card első gyereke, így a sáv a kártya tetejét fedi. */
		.cardhead { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
			margin:-18px -18px 18px; padding:10px 18px; background:var(--gradient,var(--accent));
			border-radius:14px 14px 0 0; color:#fff; }
		/* Egységes nézet-cím: rendes cím (nem a pici uppercase h2), minden .cardhead nézetre. Fehér a
		   színátmenetes sávon; az ikon a currentColorból örökli a fehéret. */
		.cardhead h2 { margin:0; font-size:16px; font-weight:700; text-transform:none;
			letter-spacing:-.01em; color:#fff; }
		/* Kompakt fejléc-gombok (a sáv magasságát ne a gombok húzzák fel). */
		.cardhead button:not(.card-x) { padding:7px 13px; font-size:13px; }
		/* Másodlagos fejléc-gombok (ghost / mini): „üveges" fehérek a színátmeneten. */
		.cardhead button:not(.card-x) { background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.5);
			color:#fff; }
		.cardhead button:not(.card-x):hover { background:rgba(255,255,255,.28); border-color:#fff; }
		/* Fő művelet (.act, nem ghost): TÖMÖR FEHÉR lapka, accent szöveg — a leghangsúlyosabb hívás a sávon. */
		.cardhead .act:not(.ghost) { background:#fff; border-color:#fff; color:var(--accent-dark);
			box-shadow:0 2px 8px rgba(60,30,120,.22); }
		.cardhead .act:not(.ghost):hover { background:#f3edff; border-color:#f3edff;
			box-shadow:0 4px 14px rgba(60,30,120,.3); }
		/* PRO- és AI-lapka a színátmenetes fejlécen: tömör fehér, accent felirat (a chip ott elveszne). */
		.cardhead .cm-pro-tag, .modal > h2 .cm-pro-tag,
		.cardhead .ai-badge, .modal > h2 .ai-badge { background:#fff; color:var(--accent-dark); }
		/* Az AI-kártya körvonalas ikonja (.ai-ico, alapból accent) a színátmeneten fehér legyen — különben
		   beleolvad a lila háttérbe (a hely megvan, de az ikon nem látszik). */
		.cardhead h2 .ai-ico, .modal > h2 .ai-ico { stroke:#fff; }
		/* Fejléc-beli select (pl. Pénzügyek időszak) olvasható marad: fehér mező, sötét szöveg. */
		.cardhead select { background:#fff; color:var(--txt); border-color:rgba(255,255,255,.6); }
		/* A fejléc alcím-feliratai (pl. időszak) világosak legyenek a sávon. */
		.cardhead .headsub { color:rgba(255,255,255,.82); }
		/* Kártya-akciók a kártya alján, jobbra igazítva (a fejlécben csak a cím + ✕ marad). */
		.card-actions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin-top:14px; }

		/* ==========================================================================
		   ÁTTEKINTŐ (dashboard) — tömörített, fejléc-sáv nélküli kártyák + dinamikus
		   rács. MINDEN szabály #tab-dashboard-ra szűkítve → a többi fül változatlan.
		   ========================================================================== */
		/* A dashboard szélesebb (kihasználja a többoszlopos rácsot); csak amíg ez a fül aktív. */
		main:has(> #tab-dashboard:not(.hidden)) { max-width:1280px; }

		/* Gyorsműveletek: vékony felső pill-sor (kártya/fejléc nélkül). */
		.qa-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
		.qa-bar .qa-lead { font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
		#tab-dashboard .qa { gap:8px; }
		#tab-dashboard .qa .act.ghost { background:#fff; border:1px solid var(--line); border-radius:999px;
			color:var(--txt); padding:8px 15px; font-weight:600; margin:0; box-shadow:none; }
		#tab-dashboard .qa .act.ghost:hover { border-color:var(--accent); color:var(--accent-dark); }
		/* A leggyakoribb gyorsművelet (első) tömör accent-pill — a hangsúlyos hívás. */
		#tab-dashboard .qa .act.ghost:first-child { background:var(--accent); border-color:var(--accent);
			color:#fff; box-shadow:0 4px 14px rgba(124,58,237,.28); }
		#tab-dashboard .qa .act.ghost:first-child:hover { background:var(--accent-dark); color:#fff; }
		#tab-dashboard .qa .act.ghost .ico { width:16px; height:16px; }
		/* „Több ▾" gyorsművelet-toggle: CSAK mobilon (a @media kapcsolja be); desktopon minden pill látszik. */
		#quickBar .qa-more { display:none; }

		/* Könnyű kártya-fejléc (a .cardhead színátmenetes sáv HELYETT, csak itt). A jobb padding a ✕-nek. */
		#tab-dashboard .dh { display:flex; align-items:center; justify-content:space-between; gap:10px;
			margin:0 0 14px; padding:0 24px 12px 0; border-bottom:1px solid var(--line); }
		#tab-dashboard .dh h2 { margin:0; font-size:15px; font-weight:700; color:var(--txt); text-transform:none;
			letter-spacing:-.01em; display:flex; align-items:center; gap:9px; min-width:0; }
		/* Cím-ikon: halvány accent, lekerekített négyzetben. */
		#tab-dashboard .dh h2 > svg:first-child { width:26px; height:26px; padding:5px; border-radius:8px;
			background:var(--accent-soft); color:var(--accent-dark); box-sizing:border-box; flex:0 0 auto; }
		#tab-dashboard .dh .dh-cnt { color:var(--muted); font-weight:600; font-size:13px; }
		#tab-dashboard .dh .dh-actions { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
		#tab-dashboard .dh .dh-link { background:none; border:none; color:var(--accent-dark); font-weight:600;
			font-size:13px; cursor:pointer; padding:4px 2px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
		#tab-dashboard .dh .dh-link:hover { text-decoration:underline; }
		#tab-dashboard .dh .dh-link svg { width:15px; height:15px; }
		#tab-dashboard .dh .dh-add { background:var(--accent-soft); color:var(--accent-dark); border:1px solid #e4d7ff;
			border-radius:9px; padding:7px 12px; font-weight:600; font-size:12.5px; cursor:pointer; white-space:nowrap;
			display:inline-flex; align-items:center; gap:5px; }
		#tab-dashboard .dh .dh-add:hover { background:#e9ddff; }
		#tab-dashboard .dh .dh-add svg { width:14px; height:14px; }
		#tab-dashboard .dh select { width:auto; padding:5px 9px; font-size:13px; }

		/* Bezárás (✕): sötét/halk a világos kártyán (a fehér gradient-változat helyett). */
		#tab-dashboard .card-x { top:14px; right:14px; color:var(--muted); }
		#tab-dashboard .card-x:hover { background:var(--accent-soft); color:var(--accent-dark); }

		/* „Bento" rács: a rendszer a LÁTSZÓ kártyákból számolja az elrendezést (layoutDashGrid JS).
		   A tartalom-gazdag kártyák (Likviditás, Pénzügyek) 2 oszlop szélesek, ha van hely; a többi 1.
		   A magasságot 8px-es sor-egységre snap-eljük (grid-row span) → valódi masonry (se üres nyúlás,
		   se sor-lyuk); grid-auto-flow:dense → a kisebb kártyák kitöltik a réseket. A vízszintes köz a
		   column-gap, a függőleges a kártya margó (row-gap:0, hogy a snap pontos legyen). */
		#tab-dashboard .dgrid { display:grid; grid-template-columns:repeat(var(--dcols,3),1fr);
			grid-auto-rows:8px; column-gap:14px; row-gap:0; grid-auto-flow:row dense; align-items:start; }
		#tab-dashboard .dcell { min-width:0; }
		#tab-dashboard .dcell.span2 { grid-column:span 2; }
		#tab-dashboard .dcell:empty { display:none; }
		#tab-dashboard .dcell > .card { margin-bottom:14px; display:flex; flex-direction:column; }

		/* Cégeim/Ügyfeleim — sűrű vízszintes tile-ok. Fix tile-szélesség (auto-fill): 2 cég ugyanolyan
		   széles tile, mint 5-nél (nem húzódik szét); max ~5 fér egy sorba, fölötte tördel. */
		#tab-dashboard .cogrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
		#tab-dashboard .cotile { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line);
			border-radius:12px; padding:11px 12px; cursor:pointer; background:#fff; min-width:0; text-align:left; font:inherit; }
		#tab-dashboard .cotile:hover { border-color:var(--accent); }
		#tab-dashboard .cotile.cur { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); background:#faf7ff; }
		#tab-dashboard .cotile .cavatar { width:34px; height:34px; flex:0 0 34px; font-size:14px; }
		#tab-dashboard .cotile .cobody { min-width:0; flex:1; }
		#tab-dashboard .cotile .cohead { display:flex; align-items:center; gap:5px; min-width:0; }
		#tab-dashboard .cotile .coname { font-size:13px; font-weight:700; color:var(--txt); min-width:0;
			white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
		#tab-dashboard .cotile .corole { font-size:11px; color:var(--muted); margin:1px 0 6px;
			white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
		#tab-dashboard .cotile .chips { display:flex; flex-wrap:wrap; gap:4px; }
		#tab-dashboard .cotile .chip { font-size:10.5px; color:var(--muted); background:#f3f4f6; border-radius:999px; padding:2px 7px; white-space:nowrap; }
		#tab-dashboard .cotile .chip b { color:var(--txt); font-weight:700; }
		#tab-dashboard .cotile .chip.alert { background:#fef2f2; color:#b91c1c; }
		#tab-dashboard .cotile .chip.alert b { color:#b91c1c; }
		#tab-dashboard .cotile .chip.ok { background:#f0fdf4; color:#166534; }
		#tab-dashboard .cotile .cm-pro-tag { font-size:9px; padding:1px 5px; }
		/* Cégrács lapozó-pöttyök: CSAK mobilon (a @media kapcsolja be). */
		#tab-dashboard .co-dots { display:none; }

		/* PRO lakat-chip (csak FREE-nek, a gated kártya címe mellett) + tömör upsell-teaser. */
		#tab-dashboard .prolock { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:800;
			letter-spacing:.02em; background:linear-gradient(135deg,var(--accent),#9333ea); color:#fff;
			border-radius:6px; padding:2px 7px; cursor:pointer; flex:0 0 auto; }
		#tab-dashboard .prolock svg { width:11px; height:11px; }
		#tab-dashboard .up-teaser { flex:1; display:flex; flex-direction:column; gap:12px; justify-content:center; }
		#tab-dashboard .up-lead { font-size:13px; color:var(--muted); line-height:1.55; }
		#tab-dashboard .up-lead b { color:var(--txt); }
		#tab-dashboard .up-feats { display:flex; flex-wrap:wrap; gap:6px; }
		#tab-dashboard .up-ft { font-size:11.5px; background:var(--accent-soft); color:var(--accent-dark); border-radius:999px; padding:3px 9px; }
		#tab-dashboard .up-cta { align-self:flex-start; display:inline-flex; align-items:center; gap:7px;
			background:linear-gradient(135deg,var(--accent),#9333ea); color:#fff; border:none; border-radius:10px;
			padding:10px 16px; font-weight:700; font-size:13px; cursor:pointer; box-shadow:0 4px 14px rgba(124,58,237,.3); }
		#tab-dashboard .up-cta:hover { filter:brightness(1.05); }
		#tab-dashboard .up-cta svg { width:14px; height:14px; }

		/* AI (PRO) teaser: kattintható példa-kérdés chipek. */
		#tab-dashboard .ai-teaser { flex:1; display:flex; flex-direction:column; gap:12px; }
		#tab-dashboard .ai-qchips { display:flex; flex-wrap:wrap; gap:7px; }
		#tab-dashboard .ai-qc { font-size:12px; background:#faf9fe; border:1px solid var(--line); border-radius:999px;
			padding:6px 11px; color:var(--txt); cursor:pointer; text-align:left; font:inherit; }
		#tab-dashboard .ai-qc:hover { border-color:var(--accent); color:var(--accent-dark); }
		#tab-dashboard .ai-ask { display:flex; gap:8px; margin-top:auto; }
		#tab-dashboard .ai-ask input { flex:1; min-width:0; margin:0; }
		#tab-dashboard .ai-ask .act { margin:0; white-space:nowrap; }

		/* Értesítések (#dashAlerts): egy doboz, kis kártyák reszponzív rácsban, súlyozva. */
		#tab-dashboard #dashAlerts:empty { display:none; }
		#tab-dashboard .nbox { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:13px; margin-bottom:14px; }
		#tab-dashboard .nhead { display:flex; align-items:center; gap:9px; margin-bottom:10px; flex-wrap:wrap; }
		#tab-dashboard .nhead h3 { margin:0; font-size:14px; font-weight:700; color:var(--txt); display:flex; align-items:center; gap:8px; }
		#tab-dashboard .nhead h3 svg { width:24px; height:24px; padding:5px; border-radius:8px; background:var(--accent-soft); color:var(--accent-dark); box-sizing:border-box; }
		#tab-dashboard .nbadge { font-size:11px; font-weight:800; border-radius:999px; padding:2px 8px; }
		#tab-dashboard .nbadge.d { background:#fdecec; color:#dc2626; }
		#tab-dashboard .nbadge.w { background:#fef3c7; color:#b45309; }
		#tab-dashboard .ngrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px; grid-auto-flow:row dense; }
		/* Tömör kártya: 2 sor (címsor + max 2-soros leírás) + opcionális vékony csík. */
		#tab-dashboard .ntile { position:relative; display:flex; flex-direction:column; gap:4px; background:#fff;
			border:1px solid var(--line); border-left-width:3px; border-radius:10px; padding:9px 11px; }
		#tab-dashboard .ntile.clickable { cursor:pointer; }
		#tab-dashboard .ntile.clickable:hover { border-color:var(--accent); }
		#tab-dashboard .ntile.d { border-left-color:#dc2626; background:#fdf7f7; border-color:#f3dede; }
		#tab-dashboard .ntile.w { border-left-color:#f59e0b; background:#fffdf6; border-color:#f6e6c8; }
		#tab-dashboard .ntile.sys { border-left-color:var(--accent); background:#faf7ff; border-color:#e7dcfb; }
		#tab-dashboard .ntile.i { border-left-color:#cbd5e1; }
		/* Lenyílt kártya: teljes szélesség (minden infó kifér) + kiemelés + tovább-gomb. */
		#tab-dashboard .ntile.open { grid-column:1 / -1; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
		#tab-dashboard .ntile.open .ndesc { -webkit-line-clamp:unset; display:block; }
		#tab-dashboard .ngo { align-self:flex-start; margin-top:6px; background:var(--accent); color:#fff; border:none;
			border-radius:8px; padding:7px 14px; font-weight:600; font-size:12.5px; cursor:pointer; }
		#tab-dashboard .ngo:hover { background:var(--accent-dark); }
		#tab-dashboard .ntop { display:flex; align-items:center; gap:8px; }
		#tab-dashboard .nic { width:22px; height:22px; border-radius:6px; display:inline-grid; place-items:center; flex:0 0 auto; }
		#tab-dashboard .nic svg { width:13px; height:13px; }
		#tab-dashboard .nic.d { background:#fbe3e3; color:#dc2626; }
		#tab-dashboard .nic.w { background:#fef0cf; color:#b45309; }
		#tab-dashboard .nic.sys { background:var(--accent-soft); color:var(--accent-dark); }
		#tab-dashboard .nic.i { background:#eef2f7; color:#475569; }
		#tab-dashboard .nttl { font-size:13px; font-weight:700; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
		#tab-dashboard .nchev-go { color:var(--accent-dark); font-weight:700; font-size:16px; line-height:1; flex:0 0 auto; opacity:.7; }
		#tab-dashboard .nx { background:none; border:none; color:#c9c2d6; font-size:12px; cursor:pointer; flex:0 0 auto; padding:0 2px; }
		#tab-dashboard .nx:hover { color:var(--muted); }
		/* Leírás max 2 sor, utána „…" — a kártya alacsony marad. */
		#tab-dashboard .ndesc { font-size:12px; color:var(--muted); line-height:1.4; display:-webkit-box;
			-webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
		#tab-dashboard .nmeter { height:4px; border-radius:99px; background:#00000010; overflow:hidden; margin-top:2px; }
		#tab-dashboard .nmeter > i { display:block; height:100%; background:linear-gradient(90deg,#f59e0b,#dc2626); }
		#tab-dashboard .nmore { margin-top:9px; font-size:12.5px; color:var(--accent-dark); font-weight:600; cursor:pointer; }

		/* sub-tabs within a section (családi minta) */
		.subtabs { display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
		.subtabs button { background:transparent; border:0; border-bottom:2px solid transparent;
			color:var(--muted); padding:9px 13px; cursor:pointer; font-size:14px; margin-bottom:-1px; }
		.subtabs button:hover { color:var(--txt); }
		.subtabs button.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
		thead tr.filterrow th { padding:4px 6px; font-weight:400; text-transform:none; }
		thead tr.filterrow input, thead tr.filterrow select { padding:5px 7px; font-size:13px; }
		/* Soron belüli kategória-választó a banki tranzakcióknál — kompakt, a bal él a kategória színe. */
		select.bankcat-inline { width:auto; max-width:160px; margin-top:5px; padding:3px 6px; font-size:12px;
			border-radius:7px; border-left-width:4px; }
		/* „Besorolatlan tételek" gyors-link a Tranzakciók fülön. */
		.uncat-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; border:1px solid var(--line);
			border-radius:8px; padding:8px 12px; font-size:13px; background:var(--bg2, #f8fafc); }
		.uncat-bar a { color:var(--accent); font-weight:600; text-decoration:none; }
		.uncat-bar a:hover { text-decoration:underline; }
		/* Hírek-kártya (áttekintő): blog/adózási hírek listája, „Új” jelzéssel. */
		.news-new-badge { font-size:10px; font-weight:800; background:#fff; color:var(--accent-dark,#6d28d9); border-radius:999px; padding:2px 8px; vertical-align:1px; }
		.news-list { display:flex; flex-direction:column; }
		.news-item { display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--txt); }
		.news-item:last-child { border-bottom:0; }
		.news-item:hover { background:#f7f5fc; }
		.news-chip { flex:0 0 auto; font-size:10.5px; font-weight:800; letter-spacing:.03em; padding:3px 8px; border-radius:999px; }
		.news-blog { background:var(--accent-soft); color:var(--accent-dark,#6d28d9); }
		.news-tax { background:#fef3c7; color:#92400e; }
		.news-news { background:#dbeafe; color:#1e40af; }
		.news-t { flex:1; min-width:0; font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
		.news-d { flex:0 0 auto; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
		.news-pill { flex:0 0 auto; font-size:9.5px; font-weight:800; color:#fff; background:var(--gradient,var(--accent)); border-radius:999px; padding:2px 7px; }
		.news-all { display:inline-block; margin-top:10px; font-size:13px; font-weight:600; color:var(--accent); text-decoration:none; }
		.news-all:hover { text-decoration:underline; }
		/* Modal-lábléc: akciógombok fent (balra, tördelve), a Bezárás/Mégse MINDIG jobb alul.
		   (Az egysoros változat több-gombos modaloknál eltörte a sorrendet — ez a stabil minta.) */
		.mfoot { display:flex; flex-direction:column; gap:8px; margin-top:16px; }
		.mfoot-acts { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-start; }
		.mfoot-close { display:flex; justify-content:flex-end; }
		/* Csak-olvasó szerep (könyvelő-olvasó / megtekintő): a számlázási írás-elemek rejtve.
		   A számlázó könyvelő (ACCOUNTANT_BILLING) NEM kap role-readonly-t, így látja őket. */
		body.role-readonly .bill-only { display:none !important; }
		/* Fiók-/tag-/előfizetés-kezelés kizárólag a tulajdonosé. */
		body.role-nonowner .owner-only { display:none !important; }
		/* A kiadás-írás OWNER+ACCOUNTANT(+BILLING) joga; csak a VIEWER elől rejtjük. */
		body.role-viewer .expense-write { display:none !important; }
		/* Egységes AI-badge — CSAK ott, ahol valódi LLM fut (OCR, AI ÁFA-javaslat, „kérdezz", AI emlékeztető).
		   A determinisztikus „okos" funkciók NEM kapják meg. */
		/* Modal: app-local (the .modal class collides with the landings' full-screen
		   overlay, so it is not in the shared /campmoney-ui.css). Matches the family look. */
		/* A HÁTTÉR görget (nem a modal belül): margin:auto rövid modalt középre tesz, a viewportnál
		   magasabbat felülre tapasztja (a teteje mindig látszik), és az overlay görgethető lefelé. */
		.modal-bg { position:fixed; inset:0; background:rgba(16,24,40,.45); display:flex;
			padding:24px 12px; z-index:50; overflow-y:auto; -webkit-overflow-scrolling:touch; }
		.modal { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px;
			max-width:620px; width:94%; margin:auto; box-shadow:0 12px 40px rgba(16,24,40,.18); }
		.modal h2 { margin-top:0; }
		/* Egységes modal-fejléc: tónusos sáv a modal tetején (mind a ~18 modalra, egy szabály).
		   A -22px negatív margó a .modal 22px paddingjéig ér ki, így teljes szélességű a sáv. */
		.modal > h2 { margin:-22px -22px 18px; padding:14px 22px; background:var(--gradient,var(--accent));
			border-radius:14px 14px 0 0;
			font-size:16px; font-weight:700; text-transform:none; letter-spacing:0;
			color:#fff; text-align:left; }
		/* 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). */
		/* Felülre rögzítve (nem függőlegesen középre): a fülek eltérő magassága lefelé nő, a fejléc a
		   helyén marad → nincs fel-le ugrálás váltáskor. Csak a Csomag fül szélesedik (animálva). */
		#accountModal { max-width:480px; margin-top:0; margin-bottom:auto; transition:max-width .18s ease; }
		#accountModal.acc-wide { max-width:840px; }
		/* Csomag-fül checkout: a feature-lista hosszú lehet → a panel BELÜL görög, a Fizetés-lábléc a
		   modál alján RAGAD (mindig látszik, a család „gomb alul" mintája sértetlen — nem a tetejére tesszük).
		   Csak a fiók-modálra szkópolt; a görgetés a .modal-bg-ről ide (a modálba) kerül. */
		#accountModal { max-height:92vh; display:flex; flex-direction:column; overflow:hidden; }
		#accountModal > h2 { flex:0 0 auto; }
		#accountPanel { flex:1 1 auto; overflow-y:auto; min-height:0;
			/* A görgetősáv ne tapadjon a jobb oldali (PRO) kártya lekerekített széléhez → gutter-térköz. */
			scrollbar-gutter:stable; padding-right:10px; }
		#accountModal .mfoot { flex:0 0 auto; }
		#accountModal .cm-wiz-foot { position:sticky; bottom:0; background:var(--card);
			margin-top:12px; padding:12px 0 2px; border-top:1px solid var(--line); }
		@media (min-width:820px) {
			/* Csak a Csomag fül „aktuális" nézetén (FREE kártya + PRO upsell) tesszük egymás mellé; a
			   varázsló-lépések (választás/megerősítés) egyoszloposak maradnak — azoknál nincs .cm-upsell-inline. */
			#accountModal.acc-wide .cm-plan-flow-host:has(> .cm-upsell-inline) {
				display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; }
			/* Mindkét kártya margóját nullázzuk: a PRO (.cm-upsell) alapból margin:10px auto-t visz, a
			   FREE semmit — gridben ez az aszimmetria eltérő border-box magasságot adna stretch mellett.
			   A térközt a grid gap adja, így a két oszlop teteje és alja is egy vonalban van. */
			#accountModal.acc-wide .cm-plan-flow-host:has(> .cm-upsell-inline) > * { margin:0; }
			/* A CTA-lábléc feszüljön át MINDKÉT oszlopon → teljes szélességű, alul ragadó gomb-sáv
			   (nem egy szűk grid-cella a bal oszlop 2. sorában). */
			#accountModal.acc-wide .cm-plan-flow-host:has(> .cm-upsell-inline) > .cm-wiz-foot {
				grid-column:1 / -1; background:var(--card); box-shadow:0 -6px 14px -8px rgba(16,24,40,.18); }
		}
		small { color:var(--muted); }
		.right { text-align:right; }
		.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(--txt); font-size:26px; font-weight:700; margin:0 0 6px; }
		.login-shell .tagline { text-align:center; color:var(--muted); font-size:13px; margin:0 0 18px; }
		.login-shell small { display:block; margin-top:22px; text-align:center; color:var(--muted); font-size:.85rem; }
		.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; }
		/* Sidebar drawer + scrim + hamburger collapse at <=880px come from the shared
		   .cm-drawer / .cm-scrim / .cm-hamburger (campmoney-ui.css). */
		@media (max-width:640px) {
			header { padding:10px 12px; } main { padding:12px; } .card { padding:14px; }
			.cardhead { margin:-14px -14px 14px; }
			/* Anchor both header dropdowns to the full-width sticky <header> (not their
			 * narrow triggers) so neither the company switcher nor the user menu can
			 * hang off the left edge; clip the long company name so the row stays put. */
			#userMenu, #acctSwitch { position:static; }
			.acct-menu { left:10px; right:10px; min-width:0; max-width:none; }
			#who { gap:8px; }
			#who .company { max-width:50vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
			th, td { padding:7px 6px; font-size:13px; }
			/* Gyorsműveletek mobilon: EGY sor (Gyors + elsődleges művelet + „Több ▾"); a többi lenyitható. */
			#quickBar .qa-more { display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; cursor:pointer;
				background:var(--accent-soft); border:1px solid #e4d7ff; color:var(--accent-dark);
				border-radius:999px; padding:8px 13px; font:700 12.5px "Inter",sans-serif; white-space:nowrap; }
			#quickBar:not(.qa-open) .qa .act.ghost:not(:first-child) { display:none; }
			#quickBar:not(.qa-open) .qa-more { margin-left:auto; }
			/* Cégeim mobilon: vízszintes lapozó (scroll-snap), a szélén „kilóg" a következő cég;
			   alul pötty-jelző (aktív = megnyúlt pill). A negatív margó a kártya-padding széléig húz. */
			/* A scroller a kártya-tartalom széléhez igazodik (NEM lóg ki balra) → az első tile bal széle
			   egy vonalban a fejléc „Cégeim" ikonjával. A kis függőleges padding a kijelölésnek/térköznek. */
			#tab-dashboard .cogrid { display:flex; grid-template-columns:none; overflow-x:auto; gap:10px;
				margin:0; padding:4px 0; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
				scrollbar-width:none; }                       /* a görgetősáv elrejtve — a pöttyök jelzik a lapozást */
			#tab-dashboard .cogrid::-webkit-scrollbar { display:none; }
			#tab-dashboard .cotile { flex:0 0 78%; scroll-snap-align:start; }
			/* Aktív kijelölés mobilon: BELSŐ 2px keret (nincs kilógó box-shadow-gyűrű, amit az overflow levágna). */
			#tab-dashboard .cotile.cur { box-shadow:none; border-width:2px; }
			/* Fejléc mobilon ne zsúfolódjon: engedjük tördelni (a cím marad az 1. sorban, az akciók alá kerülhetnek). */
			#tab-dashboard .dh { flex-wrap:wrap; row-gap:8px; }
			#tab-dashboard .dh-actions { gap:8px; }
			#tab-dashboard .co-dots { display:flex; justify-content:center; gap:6px; margin-top:11px; }
			#tab-dashboard .co-dot { width:6px; height:6px; border-radius:99px; background:#d6cfe6; cursor:pointer;
				transition:width .2s, background .2s; }
			#tab-dashboard .co-dot.active { width:18px; background:var(--accent); }
		}
		.g-or { display:flex; align-items:center; gap:10px; margin:14px 0 10px; color:var(--muted,#64748b); font-size:12px; }
		.g-or::before, .g-or::after { content:""; flex:1; height:1px; background:#e6e0f2; }
		.pw-toggle { display:block; text-align:center; margin-top:14px; font-size:.9rem; color:var(--accent); text-decoration:none; }
		.pw-toggle:hover { text-decoration:underline; }
		/* AI Asszisztens — chat */
		.chat-thread { display:flex; flex-direction:column; gap:12px; max-height:52vh; overflow-y:auto;
			padding:4px 2px 2px; margin:4px 0 12px; }
		.chat-empty { color:var(--muted); font-size:13px; text-align:center; padding:18px 8px; }
		.chat-msg { display:flex; }
		.chat-msg.me { justify-content:flex-end; }
		.chat-bub { max-width:82%; padding:10px 13px; border-radius:14px; font-size:14px; line-height:1.55;
			border:1px solid var(--line); }
		.chat-msg.me .chat-bub { background:var(--accent-soft); border-color:transparent;
			border-bottom-right-radius:5px; color:var(--txt); }
		.chat-msg.ai .chat-bub { background:var(--card); border-bottom-left-radius:5px; }
		.chat-msg.ai .chat-bub.pending { color:var(--muted); }
		/* Formázott AI-válasz tipográfiája */
		.ai-md > :first-child { margin-top:0; } .ai-md > :last-child { margin-bottom:0; }
		.ai-md p { margin:0 0 8px; } .ai-md ul, .ai-md ol { margin:6px 0 8px; padding-left:20px; }
		.ai-md li { margin:2px 0; } .ai-md h4 { margin:10px 0 4px; font-size:14px; color:var(--accent); }
		.ai-md strong { font-weight:700; }
		.ai-md code { background:var(--accent-soft); padding:1px 5px; border-radius:5px; font-size:12.5px; }
		.chat-avatar { flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--accent-soft);
			display:flex; align-items:center; justify-content:center; font-size:14px; margin-right:8px; align-self:flex-start; }
		/* Saját körvonalas AI-ikon — a termék brand-színét (--accent) örökli. */
		.ai-ico { stroke:var(--accent); fill:none; vertical-align:-3px; }
		/* Küldés/kérdezés ikon-gomb: négyzetes, középre igazított papírrepülő.
		   FONTOS: `button.act` (közös CSS) padding-ja specifikusabb, ezért a padding:0-t is
		   `button.ask-send`-del kell írni, különben a padding felhúzza a gombot (és a stretch az inputot is). */
		button.ask-send, button.ask-mic { display:inline-flex; align-items:center; justify-content:center; margin:0; padding:0; width:42px; flex:0 0 auto; }
		.ask-send svg { display:block; width:18px; height:18px; transition:transform .12s ease; }
		.ask-send:not(:disabled):hover svg { transform:translateX(2px) translateY(-1px); }
		/* Hangvezérlés: mikrofon (beszéd→szöveg) ikon-gomb a beviteli sorban. */
		.ask-mic svg { display:block; width:18px; height:18px; }
		.ask-mic.listening { background:var(--err); border-color:var(--err); color:#fff; animation:micPulse 1.1s ease-in-out infinite; }
		@keyframes micPulse { 0%,100% { box-shadow:0 0 0 0 rgba(220,38,38,.45); } 50% { box-shadow:0 0 0 7px rgba(220,38,38,0); } }
		.ask-mic.busy { opacity:.6; cursor:progress; }
		/* AI Asszisztens intro-panel: első alkalommal / az ℹ️ gombbal nyitva. Halk accent-háttér, lekerekített. */
		.ai-intro { position:relative; border:1px solid var(--border); background:var(--accent-soft);
			border-radius:14px; padding:15px 17px; margin:10px 0 14px; }
		.ai-intro h3 { margin:0 0 4px; font-size:14.5px; display:flex; align-items:center; gap:7px; }
		.ai-intro p { margin:0; color:var(--muted); font-size:12.7px; line-height:1.55; padding-right:26px; }
		.ai-intro-close { position:absolute; top:9px; right:11px; border:0; background:transparent; cursor:pointer;
			color:var(--muted); font-size:17px; line-height:1; padding:2px; border-radius:6px; }
		.ai-intro-close:hover { background:rgba(0,0,0,.06); color:var(--txt); }
		.ai-caps { display:flex; flex-wrap:wrap; gap:6px; margin:11px 0 0; }
		.ai-cap { font-size:11px; padding:3px 10px; border-radius:999px; background:var(--card);
			border:1px solid var(--border); color:var(--muted); white-space:nowrap; }
		.ai-egs { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; }
		.ai-eg { font-size:12px; padding:6px 11px; border-radius:999px; background:var(--card); border:1px solid var(--border);
			color:var(--txt); cursor:pointer; transition:border-color .12s ease, background .12s ease; }
		.ai-eg:hover { border-color:var(--accent); background:var(--accent-soft); }
		/* Súgó-ikon (ℹ️) a cím mellett — letisztult kör; nyitva accent-kitöltés. */
		.ai-info-btn { display:inline-flex; align-items:center; justify-content:center; margin:0; padding:0;
			width:30px; height:30px; flex:0 0 auto; border-radius:50%; border:1px solid var(--border);
			background:var(--card); color:var(--muted); cursor:pointer; transition:color .12s ease, border-color .12s ease, background .12s ease; }
		.ai-info-btn:hover { color:var(--accent); border-color:var(--accent); }
		.ai-info-btn.open { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
		.ai-info-btn svg { display:block; }
		.ask-mic.busy svg { animation:micSpin .8s linear infinite; }
		@keyframes micSpin { to { transform:rotate(360deg); } }
		/* Kisegítő „Felolvasás" gomb a fejlécben: az „Új beszélgetés" (.act) INVERZE — körvonalas (.act.ghost),
		   bekapcsolva kitöltött. Ikonméret az „Új beszélgetés"-hez igazítva; szűk kijelzőn csak az ikon marad. */
		.a11y-toggle svg { width:15px; height:15px; }
		@media (max-width:520px){ .a11y-toggle span { display:none; } }
		/* Vizuálisan rejtett, de képernyőolvasónak elérhető (aria-live státusz-régió). */
		.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; }

		/* ===== Univerzális kereső (fejléc közepén) =====
		   FREE: keresés minden adatban + oldal-ugrás. PRO-tulajdonos: AI-utasítás felismerés + mikrofon. */
		/* Valódi középre helyezés: a két szélső zóna EGYENLŐ flexet kap, a kereső fix marad — így a mező a
		   fejléc (viewport) közepére esik, függetlenül attól, hogy a jobb oldal (cégváltó+név) szélesebb. */
		.q-topband .q-brand { flex:1 1 0; min-width:0; }
		.q-topband .q-band-right { flex:1 1 0; justify-content:flex-end; margin-left:0; }
		.q-search { flex:0 0 auto; display:flex; justify-content:center; min-width:0; position:relative; }
		.q-search-icon { display:none; }
		.q-search-field { display:flex; align-items:center; gap:9px; width:min(460px,100%); height:38px;
			padding:0 10px 0 12px; background:rgba(255,255,255,.09); border:1px solid transparent; border-radius:10px;
			cursor:text; transition:background .15s, box-shadow .15s; }
		.q-search-field .q-search-lens { width:17px; height:17px; stroke:#b7aec6; fill:none; flex:0 0 auto; transition:stroke .15s; }
		.q-search-field input { flex:1; min-width:0; border:0; background:transparent; outline:none; font:inherit;
			font-size:14px; color:#fff; caret-color:var(--accent); }
		.q-search-field input::placeholder { color:#b7aec6; }
		.q-search-kbd { font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace; color:#b7aec6;
			border:1px solid #39304a; border-radius:5px; padding:3px 6px; flex:0 0 auto; }
		.q-search-mic { display:none; align-items:center; justify-content:center; width:28px; height:28px; border-radius:7px;
			border:0; background:transparent; cursor:pointer; color:#b7aec6; flex:0 0 auto; transition:.15s; }
		.q-search-mic svg { width:17px; height:17px; }
		.q-search-mic:hover { background:rgba(124,58,237,.18); }
		body.q-can-voice .q-search-mic { display:inline-flex; }
		.q-search-mic.live { color:#fff; background:var(--accent); animation:qmicPulse 1s ease-in-out infinite; }
		@keyframes qmicPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(124,58,237,.5);} 50%{ box-shadow:0 0 0 7px rgba(124,58,237,0);} }
		/* Fókuszban: a mező kivilágosodik (a sötét sávban „kiemelt" fehér) */
		body.q-searching .q-search-field { background:#fff; box-shadow:0 10px 28px -10px rgba(0,0,0,.55); }
		body.q-searching .q-search-field .q-search-lens { stroke:var(--accent); }
		body.q-searching .q-search-field input { color:var(--txt); }
		body.q-searching .q-search-field input::placeholder { color:var(--muted); }
		body.q-searching .q-search-mic { color:var(--accent); }
		body.q-searching .q-search-kbd { display:none; }

		.q-search-scrim { position:fixed; inset:0; background:rgba(20,10,35,.22); z-index:39; opacity:0;
			pointer-events:none; transition:opacity .15s; }
		body.q-searching .q-search-scrim { opacity:1; pointer-events:auto; }
		.q-search-panel { position:fixed; top:60px; left:50%; transform:translateX(-50%) translateY(-8px);
			width:min(560px,calc(100vw - 24px)); max-height:min(72vh,440px); overflow:auto; background:var(--card);
			border:1px solid var(--line); border-radius:14px; box-shadow:0 26px 60px -18px rgba(25,10,55,.5);
			z-index:45; opacity:0; pointer-events:none; transition:opacity .16s, transform .16s; }
		body.q-searching .q-search-panel { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
		.q-search-grp { padding:2px 6px 6px; }
		.q-search-grplab { font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
			font-weight:700; padding:10px 12px 5px; }
		.q-search-res { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:9px; cursor:pointer; }
		.q-search-res .ic { width:30px; height:30px; border-radius:8px; background:var(--accent-soft); color:var(--accent-dark);
			display:grid; place-items:center; flex:0 0 auto; }
		.q-search-res .ic .cm-ic { width:16px; height:16px; }
		.q-search-res .tx { min-width:0; flex:1; }
		.q-search-res .tx .t { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
		.q-search-res .tx .t mark { background:transparent; color:var(--accent-dark); font-weight:800; }
		.q-search-res .tx .s { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
		.q-search-res .meta { font-size:12px; color:var(--muted); flex:0 0 auto; font-variant-numeric:tabular-nums; }
		.q-search-res .go { opacity:0; font-size:11px; color:var(--accent); font-weight:700; flex:0 0 auto; }
		.q-search-res.sel { background:var(--accent-soft); }
		.q-search-res.sel .go { opacity:1; }
		.q-search-res:hover { background:#f7f5fc; }
		/* Parancs-sorok az üres keresőben (számla / díjbekérő kitöltő) */
		.q-search-cmd .tx .t { display:flex; align-items:baseline; gap:8px; }
		.q-search-cmd .tx .t code { font:700 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
			background:var(--accent-soft); color:var(--accent-dark); border-radius:6px; padding:2px 8px; }
		.q-search-cmd .tx .t .ph { font-size:12px; color:var(--muted); font-weight:500; }
		.q-search-cmdhint { padding:8px 12px 4px; font-size:11.5px; color:var(--muted); line-height:1.6; }
		.q-search-cmdhint b { color:var(--accent-dark); font-weight:700; background:var(--accent-soft); border-radius:5px; padding:1px 6px; }
		.q-search-cmdhint i { font-style:italic; }
		/* Parancs-mód jelző (csupasz „számla"/„díjbekérő" beírásakor) */
		.q-search-cmdmode { display:flex; align-items:flex-start; gap:11px; margin:6px; padding:11px 13px; border-radius:11px;
			background:var(--accent-soft); border:1px dashed rgba(124,58,237,.35); }
		.q-search-cmdmode .ic { width:28px; height:28px; border-radius:8px; background:var(--gradient); display:grid; place-items:center; flex:0 0 auto; }
		.q-search-cmdmode .ic .cm-ic { width:15px; height:15px; stroke:#fff; }
		.q-search-cmdmode .tx .t { font-size:13px; font-weight:700; color:var(--accent-dark); }
		.q-search-cmdmode .tx .s { font-size:12px; color:var(--muted); margin-top:2px; line-height:1.5; }
		.q-search-cmdmode .tx .s code { font:700 11.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
			background:#fff; color:var(--accent-dark); border-radius:5px; padding:1px 6px; }
		/* AI-akció hero-sor (PRO) */
		.q-search-ai { margin:6px; padding:13px 14px; border-radius:12px; cursor:pointer; display:flex; align-items:center; gap:13px;
			background:linear-gradient(135deg,rgba(124,58,237,.09),rgba(34,167,224,.09)); border:1px solid rgba(124,58,237,.25); }
		.q-search-ai.sel { box-shadow:0 0 0 2px var(--accent); }
		.q-search-ai .ic { width:34px; height:34px; border-radius:9px; background:var(--gradient); display:grid; place-items:center; flex:0 0 auto; }
		.q-search-ai .ic .cm-ic { width:18px; height:18px; stroke:#fff; }
		.q-search-ai .tx { flex:1; min-width:0; }
		.q-search-ai .tx .t { font-size:13.5px; font-weight:700; }
		.q-search-ai .tx .t .aitag { font-size:9.5px; font-weight:800; letter-spacing:.06em; color:#fff; background:var(--gradient);
			border-radius:999px; padding:2px 7px; margin-left:7px; vertical-align:middle; }
		.q-search-ai .tx .s { font-size:12px; color:var(--accent-dark); margin-top:2px; }
		.q-search-ai .go { font-size:11px; font-weight:800; color:var(--accent); flex:0 0 auto; }
		/* FREE upsell-sor (utasításra) */
		.q-search-up { margin:6px; padding:13px 14px; border-radius:12px; cursor:pointer; display:flex; align-items:center; gap:13px;
			background:#fbf7ff; border:1px dashed rgba(124,58,237,.4); }
		.q-search-up.sel { box-shadow:0 0 0 2px var(--accent); }
		.q-search-up .ic { width:34px; height:34px; border-radius:9px; background:var(--accent-soft); color:var(--accent-dark);
			display:grid; place-items:center; flex:0 0 auto; }
		.q-search-up .ic .cm-ic { width:18px; height:18px; }
		.q-search-up .tx { flex:1; min-width:0; } .q-search-up .tx .t { font-size:13.5px; font-weight:700; }
		.q-search-up .tx .s { font-size:12px; color:var(--muted); margin-top:2px; }
		.q-search-up .cta { font-size:11.5px; font-weight:800; color:#fff; background:var(--gradient); border-radius:999px; padding:5px 11px; flex:0 0 auto; }
		.q-search-empty { padding:26px 16px; text-align:center; color:var(--muted); font-size:13px; }
		.q-search-foot { display:flex; align-items:center; gap:14px; padding:8px 14px; border-top:1px solid var(--line);
			font-size:11px; color:var(--muted); position:sticky; bottom:0; background:var(--card); }
		.q-search-foot .sp { margin-left:auto; }
		.q-search-foot kbd { font:600 10.5px/1 ui-monospace,Menlo,monospace; background:var(--accent-soft);
			border:1px solid #e6e0f3; border-radius:5px; padding:2px 5px; color:var(--accent-dark); }
		/* Élő számla-/díjbekérő-tervezet a keresőben (PRO-tulajdonos) */
		.q-search-draft { margin:6px; border:1px solid rgba(124,58,237,.28); border-radius:12px; overflow:hidden; cursor:pointer;
			background:linear-gradient(135deg,rgba(124,58,237,.06),rgba(34,167,224,.06)); }
		.q-search-draft.sel { box-shadow:0 0 0 2px var(--accent); }
		.q-search-draft .dh { display:flex; align-items:center; gap:9px; padding:10px 13px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.55); }
		.q-search-draft .dh .ic { width:26px; height:26px; border-radius:7px; background:var(--gradient); display:grid; place-items:center; flex:0 0 auto; }
		.q-search-draft .dh .ic .cm-ic { width:15px; height:15px; stroke:#fff; }
		.q-search-draft .dh b { font-size:13.5px; }
		.q-search-draft .dh .ok { margin-left:auto; font-size:10.5px; font-weight:800; letter-spacing:.05em; color:#0f7a37; background:#e7f6ec; border-radius:999px; padding:2px 9px; }
		.q-search-draft .dh .miss { margin-left:auto; font-size:11px; font-weight:600; color:#8a5a00; background:#fdf3d9; border-radius:999px; padding:2px 9px; }
		.q-search-draft .db { padding:8px 13px; }
		.q-search-draft .fld { display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:4px 0; }
		.q-search-draft .fld span { color:var(--muted); } .q-search-draft .fld b { font-weight:600; text-align:right; }
		.q-search-draft .fld i { color:var(--muted); font-weight:400; }
		.q-search-draft .fld.tot { border-top:1px solid var(--line); margin-top:4px; padding-top:8px; }
		.q-search-draft .fld.tot b { font-weight:800; }
		.q-search-draft .acts { display:flex; flex-wrap:wrap; gap:8px; padding:11px 13px; border-top:1px solid var(--line); background:rgba(255,255,255,.4); }
		.qbtn { border:1px solid var(--line); background:#fff; color:var(--txt); font:inherit; font-weight:650; font-size:12.5px; padding:8px 13px; border-radius:9px; cursor:pointer; }
		.qbtn.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
		.qbtn.primary:hover { background:var(--accent-dark); }
		.qbtn:hover { border-color:var(--accent); }
		/* PRO badge a találat-sorban és a tervezet-kártya fejlécében (a gyorskereső parancs-paletta). */
		.q-search-res .cta { font-size:10px; font-weight:800; letter-spacing:.04em; color:#fff; background:var(--gradient);
			border-radius:999px; padding:3px 9px; flex:0 0 auto; }
		.q-search-res.q-search-pro .go { display:none; }
		.q-search-draft .dh .cta { margin-left:auto; font-size:10.5px; font-weight:800; letter-spacing:.04em; color:#fff;
			background:var(--gradient); border-radius:999px; padding:2px 9px; flex:0 0 auto; }
		/* Mobil: a Keresés ALULRÓL nyíló lapként — a beviteli mező LENT (hüvelykujj-közel, a billentyűzet
		   fölött), a találatok/parancsok FÖLÖTTE. A kereső-ikon a fejlécből eltűnt (a bottom nav nyitja). */
		@media (max-width:640px){
			.q-search-field { display:none; }
			.q-search-icon { display:none; }
			body.q-searching .q-search { position:static; }
			/* A kereső-mező FELÜL (az iOS billentyűzet a mező alá jön, nem tolja szét) — teljes-képernyős
			   kereső-lap: mező fent, találatok szorosan alatta, normál (fentről lefelé) sorrendben. */
			body.q-searching .q-search-field { display:flex; position:fixed; left:10px; right:10px;
				top:calc(10px + env(safe-area-inset-top)); bottom:auto; width:auto; height:52px; z-index:47;
				border-radius:16px; box-shadow:0 12px 34px rgba(20,10,35,.28); }
			body.q-searching .q-search-field input { font-size:16px; }   /* iOS: 16px → nincs auto-zoom */
			/* A cégváltó pill + avatar (#who) NE kandikáljon ki a fixed mező alól keresés közben. */
			body.q-searching .q-topband #who { display:none; }
			.q-search-panel { top:calc(70px + env(safe-area-inset-top)); left:10px; right:10px; bottom:auto; transform:none; z-index:46;
				max-height:calc(100vh - 92px - env(safe-area-inset-top)); border-radius:18px; }
			/* Teljes-oldalas finom LILA áttetsző háttér a keresés mögé (a sötét scrim helyett). */
			body.q-searching .q-search-scrim { background:linear-gradient(160deg, rgba(124,58,237,.18), rgba(147,51,234,.11));
				backdrop-filter:blur(7px) saturate(1.3); -webkit-backdrop-filter:blur(7px) saturate(1.3); }
			body.q-searching .q-search-panel { transform:none; }
			.q-search-foot { display:none; }                 /* a billentyű-súgó mobilon felesleges */
			/* Egyértelmű kilépés: ✕ a mező jobb szélén (a kereső-lap bezárása). */
			body.q-searching .q-search-x { display:inline-flex; align-items:center; justify-content:center;
				width:30px; height:30px; flex:0 0 auto; border:0; border-radius:8px; cursor:pointer;
				background:rgba(124,58,237,.1); color:var(--accent-dark); font-size:15px; }
		}
		/* Háttér-görgés zárolása, amíg a Menü-lap vagy a Keresés-lap nyitva van. */
		body:has(#sidebar.cm-drawer.open), body.q-searching { overflow:hidden; }
		.q-search-x { display:none; }   /* csak mobilon, keresés közben látszik */

		/* ===== Mobil (<=640px): SEAMLESS felső rész (nincs sötét sáv) + egységes lila „üveg" a cégváltón,
		   az avatar-/cégváltó-menün és a lebegő alsó sávon. A hamburger→„Menü", kereső→„Keresés" alsó gomb,
		   logó elrejtve. Desktop érintetlen. ===== */
		@media (max-width:640px){
			/* A felső gombok LEBEGNEK (sticky, mint a Revolutnál). Nincs látható csík: a háttér az oldal
			   alap-színe LEFELÉ FADELVE (átlátszó alul) → a görgő tartalom lágyan eltűnik a gombok alatt
			   (nincs átfedés/„elvágás"), de nincs kemény sáv-él sem. A felső opak rész a státuszsáv-zónát is
			   világosan tartja (olvasható óra). */
			.q-topband { position:sticky; top:0; z-index:40; height:auto; gap:8px; box-shadow:none;
				padding:calc(12px + env(safe-area-inset-top)) 14px 14px;
				background:linear-gradient(to bottom, var(--bg) 0%, var(--bg) 62%, rgba(250,249,254,0) 100%);
				backdrop-filter:none; -webkit-backdrop-filter:none; }
			/* A legördülő menük a SAJÁT gombjukhoz igazodjanak (nem sticky fejléchez) → jó helyre nyílnak. */
			.q-topband #who #acctSwitch { position:relative; }
			/* Avatar-menü mobilon TELJES SZÉLESSÉGŰ (mint Voyában): #userMenu STATIC → a pop
			   igazítási kerete a teljes szélességű #who (position:relative), nem a keskeny avatar.
			   Így a left/right:10px él-től-élig nyílik — a korábbi right:0/min-width:210px egy szűk
			   sarok-menüt adott, ami sokkal kisebbnek hatott a Voya-belinél. */
			.q-topband #who #userMenu { position:static; }
			#acctMenu { left:0; right:auto; min-width:230px; max-width:calc(100vw - 22px); }
			#userMenuPop { left:10px; right:10px; min-width:0; max-width:none; }
			.q-topband .cm-hamburger, .q-topband .q-brand, .q-topband .q-search-icon { display:none; }
			.q-topband .q-search { flex:0 0 0; min-width:0; }   /* üres — csak a kereső-overlay hordozója */
			.q-topband .q-band-right { flex:1 1 auto; margin-left:0; }
			.q-topband #who { width:100%; flex-wrap:nowrap; gap:8px; align-items:center; }
			.q-topband #who #acctSwitch { min-width:0; }
			/* Cég balra; az app-váltó + avatar EGYÜTT a jobb szélre (nem space-between → nem lóg középre a váltó). */
			.q-topband #who #appSwitch { margin-left:auto; }
			.q-topband #who #acctSwitch .company { display:inline-flex; align-items:center; gap:6px; min-width:0; max-width:72vw; }
			/* Cégváltó = lila üveg pill (a sötét-sávos fehér helyett). */
			.q-topband #who #acctSwitch button.company.switch { padding:7px 13px; background:var(--glass);
				border:1px solid var(--glass-bd); backdrop-filter:blur(14px) saturate(1.6); -webkit-backdrop-filter:blur(14px) saturate(1.6);
				color:var(--accent-dark); border-radius:999px; }
			.q-topband #who .company .cnm, .q-topband #who button.company.switch { color:var(--accent-dark); }
			.q-topband #who button.company.switch::after { color:var(--accent); opacity:.7; }
			.q-topband #who #acctSwitch .company .cnm { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
			.q-topband #who #userMenu { flex:0 0 auto; }

			/* Cégváltó- és avatar-menü (közös .acct-menu): frosted lila ÜVEG, de OLVASHATÓ — egy lista-menü
			   nem lehet áttetsző (átütne a tartalom → kása). Sűrű, halvány-lila frosted háttér + blur. */
			.acct-menu { background:linear-gradient(135deg,rgba(243,237,255,.96),rgba(250,248,255,.96));
				backdrop-filter:blur(22px) saturate(1.4); -webkit-backdrop-filter:blur(22px) saturate(1.4);
				border:1px solid var(--glass-bd); box-shadow:0 18px 46px rgba(60,30,120,.28); }

			/* Lebegő, lekerekített, áttetsző (frosted) alsó sáv — a tartalom átüt rajta. */
			.q-bottomnav { display:flex; position:fixed; left:50%; transform:translateX(-50%); touch-action:none;
				width:calc(100% - 28px); max-width:520px; bottom:12px; z-index:38; border-radius:19px; overflow:hidden;
				background:var(--glass); backdrop-filter:blur(20px) saturate(1.7); -webkit-backdrop-filter:blur(20px) saturate(1.7);
				border:1px solid var(--glass-bd); box-shadow:0 12px 34px rgba(60,30,120,.16); padding:5px 6px;
				transition:padding .24s ease, width .26s cubic-bezier(.4,0,.2,1); }
			/* Compact: keskenyebb, középre húzott sáv (vízszintesen is kisebb). Konkrét szélesség → animálható. */
			.q-bottomnav.compact { width:min(62%, 270px); }
			.main-col { padding-bottom:calc(80px + env(safe-area-inset-bottom)); }

			/* „Menü" drawer mobilon = ALULRÓL nyíló lap (a bal oldali becsúszás helyett). Lekerekített teteje,
			   grab-fogantyú, a lista görög. A base .cm-drawer translateX-ét felülírjuk translateY-ra. */
			#sidebar.cm-drawer { left:0; right:0; top:auto; bottom:0; width:auto; height:auto; max-height:82vh;
				transform:translateY(100%); border-radius:24px 24px 0 0; box-shadow:0 -14px 44px rgba(20,10,35,.28);
				/* Fehér, áttetsző üveg-lap — a lila áttetsző fátyol (.cm-scrim) MÖGÖTTE marad és halványan átüt.
				   Így a menü tiszta/olvasható, de az arculat lila hangulata megőrződik. */
				background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.64));
				backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5);
				border-top:1px solid rgba(255,255,255,.6); overflow:hidden; padding-top:24px;
				transition:transform .24s ease, opacity .24s ease; }
			#sidebar.cm-drawer.open { transform:translateY(0); }
			/* Áttekintés menüpont ikonja mobilon a Quilly-toll (az alsó sávval egyezően). */
			.cm-sidebar nav button .ico-grid { display:none; }
			.cm-sidebar nav button .ico-quill { display:inline-block; }
			/* A menü mögötti fátyol = a keresésével egyező finom lila (nem sötét). A lehúzáskori arányos
			   világosodás/snap-back animálásához opacity-átmenet. */
			.cm-scrim { background:linear-gradient(160deg, rgba(124,58,237,.18), rgba(147,51,234,.11));
				backdrop-filter:blur(7px) saturate(1.3); -webkit-backdrop-filter:blur(7px) saturate(1.3);
				transition:opacity .24s ease; }
			/* Kattintható grab-fogantyú (fentről bezárás) — nagyobb tap-terület a vékony sáv körül. */
			#sidebar .cm-sheet-grab { display:block; position:absolute; top:0; left:0; right:0; height:22px; margin:0; padding:0;
				background:none; border:0; cursor:pointer; }
			#sidebar .cm-sheet-grab::before { content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%);
				width:40px; height:5px; border-radius:99px; background:#d6cfe6; }
			#sidebar.cm-drawer nav { overflow-y:auto; max-height:calc(82vh - 30px); padding:6px 10px calc(16px + env(safe-area-inset-bottom)); }
		}