/*
	A három illusztrált útmutató-lap KÖZÖS stílusa (utmutato-nyugta / -szamla / -nav).

	Korábban ugyanez a 216 sor inline állt mindkét lapon, bájtra azonosan. A harmadik lapnál
	kiemeltük: egy stílusváltozás így nem tud kimaradni az egyik lapról. A ?v= bélyeget a
	deploy.sh adja (tartalom-hash), ahogy a style.css-nek és a blog.css-nek.

	Az --accent a /app/brand.css-ből jön. Ha az bármiért nem töltődik be (pl. a lap helyben,
	fájlból nyitva), a márkaszín tartaléka nélkül a lila elemek olvashatatlanná válnának —
	ezért minden saját szabályban van fallback érték.
*/
.ug { max-width: 940px; margin: 0 auto; padding: 8px 22px 90px; }
.ug .back { display: inline-flex; align-items: center; gap: 6px; margin: 26px 0 20px;
	font-weight: 600; text-decoration: none; color: var(--accent, #7c3aed); }

.ug-head { background: #fff; border: 1px solid var(--line); border-radius: 18px;
	padding: 30px 32px; box-shadow: var(--shadow); }
.ug-head .eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .09em;
	text-transform: uppercase; color: var(--accent, #7c3aed); margin: 0 0 8px; }
.ug-head h1 { font-size: clamp(1.7rem, 4.4vw, 2.3rem); margin: 0 0 10px; letter-spacing: -.015em; }
.ug-head .lead { margin: 0; color: var(--muted); font-size: 1.05rem; }

/* „Amit jó előre tudni" — a három félreértés, ami ezt a felhasználói kört jellemzi. */
.facts { display: grid; gap: 12px; margin: 18px 0 0;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.fact { background: var(--accent-soft, #f5f0ff); border: 1px solid color-mix(in srgb, var(--accent, #7c3aed) 22%, #fff);
	border-radius: 13px; padding: 14px 16px; }
.fact > b { display: block; font-size: .95rem; margin-bottom: 3px; }
.fact span { font-size: .88rem; color: #4b4557; line-height: 1.5; }

/* Eszköz-kapcsoló. Sticky, mert a lap hosszú, és a váltás bármelyik lépésnél kellhet. */
.devbar { position: sticky; top: 0; z-index: 40; display: flex; justify-content: center;
	padding: 12px 0 10px; margin: 26px 0 6px;
	background: linear-gradient(180deg, var(--bg, #f7f8f5) 72%, transparent); }
.devsw { display: inline-flex; background: #fff; border: 1px solid var(--line);
	border-radius: 999px; padding: 4px; box-shadow: var(--shadow); }
.devsw button { border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600;
	font-size: .92rem; color: var(--muted); padding: 8px 18px; border-radius: 999px;
	display: inline-flex; align-items: center; gap: 7px; }
.devhint { text-align: center; color: var(--muted); font-size: .84rem; margin: -2px 0 14px; }
.devsw button[aria-pressed="true"] { background: var(--grad, linear-gradient(135deg, #7c3aed, #22a7e0)); color: #fff; }

/* Tartalomjegyzék */
.toc { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; margin: 10px 0 0; }
.toc h2 { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
	margin: 0 0 10px; }
.toc ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 30px; }
.toc li { margin: 0 0 6px; font-size: .94rem; break-inside: avoid; padding-left: 15px; position: relative; }
.toc li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px;
	border-radius: 50%; background: var(--accent, #7c3aed); opacity: .55; }
@media (max-width: 620px) { .toc ul { columns: 1; } }

.ug h2.sec { font-size: 1.35rem; margin: 46px 0 6px; padding-top: 26px;
	border-top: 1px solid var(--line); letter-spacing: -.01em; }
.ug h2.sec:first-of-type { border-top: 0; }
.ug .sec-sub { margin: 0 0 4px; color: var(--muted); }

/* Egy lépés: sorszám-korong + cím + szöveg + kép. */
.step { margin: 26px 0 0; }
.step > h3 { display: flex; align-items: flex-start; gap: 12px; font-size: 1.08rem;
	margin: 0 0 8px; letter-spacing: -.005em; }
.step > h3 .n.ph { background: none; font-size: 1.1rem; }
.step > h3 .n { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
	background: var(--grad, linear-gradient(135deg, #7c3aed, #22a7e0)); color: #fff;
	font-size: .88rem; font-weight: 700; display: grid; place-items: center; margin-top: 1px; }
.step p { margin: 0 0 10px; }
.step ul { margin: 0 0 10px; padding-left: 22px; }
.step li { margin: 0 0 5px; }

/* Gombfelirat / begépelendő szöveg a folyószövegben — hogy pontosan felismerhető legyen,
   melyik feliratot keresse a képernyőn. */
.btn-lit { display: inline-block; background: var(--accent, #7c3aed); color: #fff;
	border-radius: 7px; padding: 1px 9px 2px; font-size: .88em; font-weight: 600; white-space: nowrap; }
.ui { display: inline-block; background: #fff; border: 1px solid var(--line); border-radius: 7px;
	padding: 0 7px 1px; font-size: .9em; font-weight: 600; white-space: nowrap; }
kbd.cmd { font-family: var(--mono); background: #1b1626; color: #f3f0ff; border-radius: 7px;
	padding: 2px 9px 3px; font-size: .9em; }

/* Kiemelt dobozok */
.note, .warn, .tip { border-radius: 13px; padding: 13px 16px; margin: 12px 0 0;
	font-size: .95rem; line-height: 1.6; border: 1px solid; }
.note { background: #f4f7ff; border-color: #dbe4fb; }
.warn { background: #fdf6e7; border-color: #f0e2c2; color: #6b5210; }
.tip { background: #eefaf3; border-color: #cfeddd; color: #14532d; }
.note b, .warn b, .tip b { font-weight: 700; }

/* --- Képkeretek --------------------------------------------------------------------
   Asztali nézetben böngésző-keret (pontok + címsor), telefonos nézetben készülék-keret.
   Ugyanaz a <figure>, csak a body osztálya dönti el, melyik látszik — így a kapcsoló
   egyetlen helyen vált, és nem kell minden lépéshez két blokkot karbantartani. */
.fig { margin: 14px 0 0; }
.fig figcaption { color: var(--muted); font-size: .87rem; margin-top: 8px; text-align: center; }
/* Az asztali felvétel 1440 px-es ablakról készült, a lapon ~860 px-en jelenik meg — a
   feliratok ott már aprók. A képre kattintva a teljes méretű felvétel nyílik meg. */
.fig a.full { display: block; cursor: zoom-in; }
.fig .shot { display: block; width: 100%; height: auto; }

body.dev-a .fig .frame { border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
	background: #fff; box-shadow: var(--shadow); }
body.dev-a .fig .chrome { display: flex; align-items: center; gap: 7px; padding: 9px 13px;
	background: #f3f2f7; border-bottom: 1px solid var(--line); }
body.dev-a .fig .chrome i { width: 9px; height: 9px; border-radius: 50%; background: #d8d5e2; }
body.dev-a .fig .chrome span { flex: 1; text-align: center; font-size: .76rem; color: #8a839a;
	font-family: var(--mono); }

/* Telefon-keret: iPhone-arányú perem. A kép 390×844 CSS-pixeles felvétel, tehát a keret
   szélessége is ekörül mozog — nagyítva pixeles lenne. */
body.dev-m .fig .frame { max-width: 340px; margin: 0 auto; background: #1b1626;
	border-radius: 34px; padding: 9px; box-shadow: 0 14px 40px rgba(27, 22, 38, .22); }
body.dev-m .fig .chrome { display: none; }
body.dev-m .fig .shot { border-radius: 26px; }

/* A MEGHÍVÓ LEVÉL MAGAS (mobilon 1473 CSS-pixel). Teljes egészében mutatva a telefonos
   nézetben egy vékony, olvashatatlan szalag lett belőle. Ezért a levél TETEJÉT mutatjuk,
   pont annyit, amennyi egy telefon-képernyőre fér — vagyis pontosan azt, amit a
   felhasználó is lát, amikor megnyitja. A lényeg (hozzáférés-kérés + gomb) a levél alján
   van: azt külön, kinagyítva hozzuk alatta, a teljes levél pedig a képre kattintva nyílik. */
body.dev-m .fig.mail .shot { aspect-ratio: 390 / 844; object-fit: cover; object-position: top center; }
body.dev-a .fig.mail .shot { max-height: 520px; object-fit: cover; object-position: top center; }

/* Levél-keret: postafiók-fejléc a valódi levél fölött. */
.fig.mail .chrome { display: block !important; text-align: left; background: #fff;
	border-bottom: 1px solid var(--line); padding: 12px 16px; }
.fig.mail .chrome i { display: none; }
.fig.mail .mail-from { font-size: .86rem; color: var(--muted); }
.fig.mail .mail-from b { color: var(--ink); }
.fig.mail .mail-subj { font-weight: 700; font-size: .98rem; margin-top: 2px; }
body.dev-m .fig.mail .frame { max-width: 340px; background: #1b1626; padding: 9px; border-radius: 34px; }
body.dev-m .fig.mail .chrome { border-radius: 24px 24px 0 0; }
body.dev-m .fig.mail .shot { border-radius: 0 0 24px 24px; }

/* Csak az egyik eszközön értelmes lépések (pl. főképernyőre helyezés). */
body.dev-a .only-m, body.dev-m .only-a { display: none; }

/* Kinagyított részlet: az asztali képernyőkép lekicsinyítve olvashatatlan lenne. */
.zoom { margin: 12px 0 0; border: 1px solid var(--line); border-radius: 13px; overflow: hidden;
	background: #fff; box-shadow: var(--shadow); }
.zoom img { display: block; width: 100%; height: auto; }
.zoom .cap { font-size: .84rem; color: var(--muted); padding: 8px 14px; border-top: 1px solid var(--line); }

/* --- Rajzolt telefon-mockupok a főképernyőre helyezéshez -----------------------------
   Ez a KÉT képernyő nem a Quillyé, hanem a böngészőé (Safari / Chrome), ezért nem lehet
   róluk felvételt készíteni — rajzoltak, de a feliratok szó szerint azok, amiket a
   készüléken látni fog. */
.osm-wrap { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 16px 0 0; }
.osm { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px;
	box-shadow: var(--shadow); }
.osm > h4 { margin: 0 0 4px; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.osm > p { margin: 0 0 14px; font-size: .9rem; color: var(--muted); }
.osm-phone { background: #1b1626; border-radius: 26px; padding: 7px; max-width: 260px; margin: 0 auto; }
.osm-screen { background: #fff; border-radius: 20px; overflow: hidden; font-size: 12px; }
.osm-top { background: #f2f2f6; padding: 7px 10px; display: flex; align-items: center; gap: 8px;
	border-bottom: 1px solid #e3e2ea; color: #6b6377; font-size: 11px; }
.osm-top .u { flex: 1; background: #fff; border-radius: 7px; padding: 3px 8px; color: #3d3748;
	text-align: center; }
.osm-body { padding: 14px 12px; min-height: 78px; color: #8b8496; text-align: center; font-size: 11px; }
.osm-sheet { border-top: 1px solid #e3e2ea; background: #fbfbfd; }
.osm-sheet div { padding: 9px 12px; border-bottom: 1px solid #ededf2; display: flex;
	align-items: center; justify-content: space-between; color: #3d3748; }
.osm-sheet div:last-child { border-bottom: 0; }
.osm-sheet div.hit { background: var(--accent-soft, #f5f0ff); font-weight: 700;
	box-shadow: inset 3px 0 0 var(--accent, #7c3aed); }
.osm-bottom { background: #f2f2f6; border-top: 1px solid #e3e2ea; padding: 8px 14px;
	display: flex; justify-content: space-around; align-items: center; color: #8b8496; }
.osm-bottom .hit { color: var(--accent, #7c3aed); }
.osm-bottom svg { display: block; }
.osm ol { margin: 14px 0 0; padding-left: 20px; font-size: .93rem; }
.osm ol li { margin: 0 0 5px; }
.dots { letter-spacing: 2px; font-weight: 700; color: #3d3748; }

/* --- Főképernyő-mockupok: MI LESZ A VÉGE ------------------------------------------
   Két telefon: iOS-es és Android-os ízű főképernyő, a Quilly ikonjával a többi app között.
   Rajzoltak (a felhasználó saját készülékének főképernyőjét nem tudjuk lefotózni), de az
   ikon a VALÓDI: ugyanaz a gradiens + toll-glyph, amit a telepítés kirak. A vizuális nyelv
   a `blog/szamlazo-app-telefonra-pwa.html` mockupjaiból jön — ne csússzon szét a kettő. */
.hs-pair { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin: 16px 0 0; }
.hs-col { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.hs-col > b { font-size: .92rem; }
.hs-phone { width: 208px; border: 6px solid #15111e; border-radius: 38px; background: #15111e;
	box-shadow: 0 16px 40px -14px rgba(27, 22, 38, .5); overflow: hidden; }
.hs-scr { border-radius: 32px; overflow: hidden; aspect-ratio: 9 / 14.5; display: flex; flex-direction: column;
	background: linear-gradient(160deg, #efe9fb 0%, #e7eefb 45%, #e3f4fb 100%); }
.hs-stat { display: flex; justify-content: space-between; font-size: 9px; font-weight: 700;
	color: #4b4358; padding: 7px 13px 0; }
.hs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px 8px; padding: 14px 14px 6px; }
.hs-app { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.hs-ico { width: 100%; max-width: 40px; aspect-ratio: 1; border-radius: 23%; background: #fff;
	box-shadow: 0 4px 10px -4px rgba(40, 20, 80, .3); display: grid; place-items: center; }
.hs-lbl { font-size: 9px; color: #4b4358; font-weight: 600; }
/* A Quilly ikonja: a márka-gradiens + a fehér toll — ugyanaz, amit a `pwa-install.js` rajzol. */
.hs-ico.q { background: linear-gradient(135deg, #7c3aed 0%, #5566f0 50%, #22a7e0 100%); box-shadow: 0 6px 14px -4px rgba(90, 40, 200, .55); }
.hs-ico.q svg { width: 58%; height: 58%; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.hs-app.q .hs-lbl { color: var(--accent, #7c3aed); font-weight: 800; }
.hs-dot { width: 17px; height: 17px; border-radius: 5px; background: linear-gradient(135deg, #c7bce6, #a9b6e0); }
/* iOS: dokk a képernyő alján. Android: kereső-pirula + navigációs csík. */
.hs-dock { margin: auto 10px 12px; background: rgba(255, 255, 255, .55); border-radius: 20px;
	padding: 9px 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hs-dock .hs-ico { max-width: none; border-radius: 26%; }
.hs-search { margin: auto 14px 8px; background: #fff; border-radius: 999px; padding: 7px 12px;
	display: flex; align-items: center; gap: 7px; font-size: 9px; color: #8b8496;
	box-shadow: 0 4px 12px -6px rgba(40, 20, 80, .4); }
.hs-navbar { height: 3px; width: 74px; border-radius: 2px; background: #4b4358; opacity: .5;
	margin: 0 auto 9px; }
.hs-ios .hs-ico { border-radius: 23%; }
.hs-android .hs-ico { border-radius: 50%; }
.hs-android .hs-ico.q { border-radius: 50%; }

/* Gyakori kérdések — összecsukva, hogy ne nyomja szét a lapot. */
.faq { margin: 14px 0 0; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px;
	padding: 12px 16px; margin: 0 0 8px; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: 9px 0 0; font-size: .95rem; }

.closing { background: var(--accent-soft, #f5f0ff); border: 1px solid color-mix(in srgb, var(--accent, #7c3aed) 22%, #fff);
	border-radius: 16px; padding: 22px 24px; margin: 40px 0 0; }
.closing h2 { margin: 0 0 6px; font-size: 1.15rem; }
.closing p { margin: 0; }

@media print {
	.site-header, .site-footer, .devbar, .ug .back, .cm-beta-bar { display: none !important; }
	.ug { max-width: none; padding: 0; }
}