/* Rezsi - iPhone-elsodleges PWA.

   Tartas: sik feluletek, keret nelkul. A csoportokat hatter es hajszalvonal
   valasztja el, nem 1px-es keret - a keret + lekerekites + szinatmenet egyutt
   az, amitol egy felulet olcsonak nez ki.

   Szin: EGY kiemeloszin, az is csak az elsodleges gombon es az aktiv fulon.
   Minden mas semleges tinta. Egyetlen kivetel a lejart hatarido, mert azt
   tenyleg eszre kell venni - az is csak szoveg, nem szines cimke.

   Tema: az alapertelmezes a sotet. A rendszer vilagos beallitasat koveti,
   es kezzel is felulirhato (data-tema a <html>-en). Minden szin valtozobol
   jon, ezert a modvaltas egyetlen helyen dol el. */
:root {
  /* A hatter es a kartya kozotti kulonbseg SZANDEKOSAN nagyobb, mint elsore:
     keret nelkul ez az EGYETLEN jel, ami elvalasztja oket. A korabbi ertekek
     (#0d0f14 / #171a21) csatornankent alig 10 lepesre voltak egymastol, es
     sotetben egybefolytak. */
  --bg: #0a0c11;
  --surface: #1e232d;
  --surface-2: #272d39;
  --line: #272c36;
  --ink: #f0f2f5;
  --ink-2: #9198a5;
  --ink-3: #676e7c;
  --accent: #3b82f6;
  --on-accent: #ffffff;
  --bad: #f26a6a;
  --bar: #3b82f6;
  --r: 14px;
  --tap: 44px;
  color-scheme: dark;
}
/* vilagos mod: rendszerbeallitasbol... */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="sotet"]) {
    --bg: #f1f3f6;
    --surface: #ffffff;
    --surface-2: #e8ebef;
    --line: #e3e6ea;
    --ink: #14171c;
    --ink-2: #5b6270;
    --ink-3: #8a919d;
    --accent: #2563eb;
    --bad: #d23f3f;
    --bar: #2563eb;
    color-scheme: light;
  }
}
/* ...vagy kezi valasztasbol */
:root[data-tema="vilagos"] {
  --bg: #f1f3f6;
  --surface: #ffffff;
  --surface-2: #e8ebef;
  --line: #e3e6ea;
  --ink: #14171c;
  --ink-2: #5b6270;
  --ink-3: #8a919d;
  --accent: #2563eb;
  --bad: #d23f3f;
  --bar: #2563eb;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent;
    scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 400 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  /* Az oldal FIX: nem gorgethetjuk egeszben, nem nagyithato, es a dupla
     koppintas sem zoomol. Gorgetni csak a tartalom teruletet lehet. */
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }

/* APP-VAZ: fix magassagu oszlop. A fejlec es az also sav nem gorog egyutt a
   tartalommal, ezert nem tud "elmaszni" a bongeszo savjainak mozgasakor. */
#app { position: fixed; inset: 0; display: flex; flex-direction: column;
       padding: env(safe-area-inset-top) env(safe-area-inset-right) 0
                env(safe-area-inset-left); }

/* Minden ikon egyszinu vonalas rajz, a szoveg szinet orokli. */
.i { width: 20px; height: 20px; flex: none; display: block;
     stroke: currentColor; stroke-width: 1.75; stroke-linecap: round;
     stroke-linejoin: round; fill: none; }
.i-sm { width: 16px; height: 16px; }

/* ---------- belepes ---------- */
.login { flex: 1; display: grid; place-items: center; overflow-y: auto;
         padding: 28px 24px calc(28px + env(safe-area-inset-bottom)); }
.login-card { width: 100%; max-width: 320px; text-align: center; }

/* HOS: szamlakoteg, ugyanabbol a vonalas nyelvbol, mint az app ikonjai.
   A ket hatso lap kitoltese a hatter szine - igy takarnak, es nem kell
   arnyekot vagy szinatmenetet hasznalni a melyseghez. */
.hero { margin: 0 auto 26px; width: 148px; height: 148px; }
.hero svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hero use, .hero path { stroke-linecap: round; stroke-linejoin: round; }
/* A hatso lapok halvanyabbak - ettol lesz melyseg, szinatmenet nelkul. */
.lap { fill: var(--bg); stroke: var(--ink-3); stroke-width: 2; }
.lap-h2 { opacity: .35; }
.lap-h1 { opacity: .6; }
.lap-fo { fill: var(--surface); stroke: var(--ink-2); }
.sorok .sor { fill: none; stroke: var(--ink-3); stroke-width: 3.5; }
.sorok .osszeg { stroke: var(--accent); stroke-width: 4; }

.login h1 { font-size: 30px; font-weight: 700; margin: 0 0 8px;
            letter-spacing: -.03em; }
.login .mott { color: var(--ink-2); font-size: 14.5px; line-height: 1.45;
               margin: 0 auto 30px; max-width: 260px; }

/* Belepteto mozgas: minden elem egy hajszallal kesobb erkezik, mint az elotte
   allo. Egyszer fut le, es a rendszer "kevesebb mozgas" beallitasat tiszteli. */
@keyframes bejon { from { opacity: 0; transform: translateY(12px); } }
.login-card > * { animation: bejon .5s cubic-bezier(.2, .7, .3, 1) backwards; }
.hero        { animation-delay: .00s; }
.login h1    { animation-delay: .06s; }
.login .mott { animation-delay: .12s; }
#gbtn        { animation-delay: .18s; }
.login .apro { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .login-card > * { animation: none; }
}

/* A Google gombot a Google rendereli - a megjelenesebe alig lehet beleszolni.
   Ket dolog kell hozza:
   - 'outline' tema, mert a Google nehany bongeszoben IFRAME-be teszi a gombot,
     es annak a hattere FEHER. Kek gombbal ez idegen feher teglalapkent latszott
     a sotet kepernyon; feher gombbal a ketto egybeolvad.
   - a lekerekites az iframe-re is ravonatkozik, kulonben sarkos marad. */
#gbtn { display: flex; justify-content: center; min-height: 44px; }
/* A Google a kert szelesseghez meg hozzaad ~20px-t; ez a korlat gondoskodik
   rola, hogy akkor se logjon ki, ha ez a raadas valtozik. */
#gbtn iframe { border-radius: 999px; max-width: 100%; }

.err { color: var(--bad); font-size: 13px; min-height: 18px; margin: 14px 0 0; }
/* Ures hibasor ne hagyjon lyukat a gomb es a labjegyzet kozott. */
.err:empty { min-height: 0; margin: 0; }
.login .apro { color: var(--ink-3); font-size: 12.5px; line-height: 1.4;
               margin: 20px 0 0; }

/* ---------- fejlec ---------- */
#topbar { flex: none; display: flex; align-items: center; gap: 8px;
          padding: 12px 12px 10px 16px; background: var(--bg); }
.prop-switch { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px;
               background: none; border: 0; color: var(--ink); padding: 4px 0;
               font-weight: 700; font-size: 22px; line-height: 1.2;
               letter-spacing: -.025em; text-align: left; }
.prop-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prop-icon { display: flex; flex: none; color: var(--ink-2); }
.prop-icon .i { width: 21px; height: 21px; }
.prop-switch .caret { width: 15px; height: 15px; stroke-width: 2.5;
                      color: var(--ink-3); margin-left: -3px; }
.icon-btn { background: none; border: 0; color: var(--ink-2); width: 40px; height: 40px;
            border-radius: 10px; flex: none; display: grid; place-items: center; }
.icon-btn:active { background: var(--surface-2); }
/* a frissites alatt forog az ikon, hogy latszodjon: dolgozik */
.icon-btn.forog .i { animation: porog .9s linear infinite; color: var(--accent); }
@keyframes porog { to { transform: rotate(360deg) } }

/* ---------- tartalom: az EGYETLEN gorgetheto terulet ---------- */
#main { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain; padding: 8px 16px 28px; }


/* osszegzo: nincs kartya, csak a szam */
.sum { padding: 10px 2px 26px; }
.sum .label { color: var(--ink-2); font-size: 13px; }
.sum .value { font-size: 38px; font-weight: 700; letter-spacing: -.035em;
              line-height: 1.05; margin-top: 6px; }
.sum .meta { color: var(--ink-3); font-size: 13px; margin-top: 8px; }

/* szakaszcim */
.sec { color: var(--ink-3); font-size: 13px; font-weight: 500; margin: 24px 2px 8px; }
.sec:first-child { margin-top: 2px; }

/* szoveges gomb a szakaszcimben (pl. "Kijelölés") */
.szoveggomb { background: none; border: 0; padding: 4px 2px; margin: -4px 0;
              color: var(--accent); font-size: 13px; font-weight: 600;
              letter-spacing: normal; text-transform: none; }
.szoveggomb:active { opacity: .6; }
/* sor vegen allo szoveges gomb (pl. "Visszavonás"): nem zsugorodhat, kulonben
   a hosszabb cimke ket sorba torik, amikor a sor szovege sok helyet kap */
.row .szoveggomb { flex: none; }

/* jelolo kor a valaszto modban */
.pipa { width: 22px; height: 22px; border-radius: 11px; flex: none;
        display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line);
        color: var(--on-accent); }
.pipa.on { background: var(--accent); box-shadow: none; }
.row.kijelolt { background: var(--surface-2); }

/* muveleti sav a kijelolesekhez - a lista alatt, az also sav folott */
.kijelolo-sav { position: sticky; bottom: 0; display: flex; align-items: center;
                gap: 14px; margin-top: 14px; padding: 12px 4px;
                background: var(--bg); }
.kijelolo-sav .db { flex: 1; color: var(--ink-2); font-size: 14px; }
.kijelolo-sav .btn[disabled] { opacity: .4; }

/* CSOPORT: sik felulet, keret nelkul */
.card { background: var(--surface); border-radius: var(--r); overflow: hidden; }
.card-pad { padding: 16px; }

/* SOR.
   A szovegoszlop blokk-elrendezesu (flex column) - kulonben a cim es az alcim
   inline spankent egy sorba folyna, szokoz nelkul. */
.row { display: flex; align-items: center; gap: 14px; padding: 13px 16px;
       min-height: 58px; border: 0; text-align: left; width: 100%;
       background: none; color: inherit; font: inherit; position: relative; }
/* Hajszalvonal a sorok kozott, a SZOVEG vonalatol indulva (iOS-modra).
   A szandek eddig is ez volt, de 16 px-nel kezdodott - az pont az IKON bal
   szele. Igy se nem ert vegig, se nem igazodott a szoveghez: felig behuzott
   vonal, ami hibanak latszik, nem dontesnek.
   A szoveg 16 (padding) + 20 (ikon) + 14 (res) = 50 px-nel kezdodik.
   A :has() csak finomit: ha a bongeszo nem ismeri, a vonal 16 px-nel indul,
   tehat semmi nem torik el. */
.row + .row::before { content: ""; position: absolute; left: 16px; right: 0; top: 0;
                      height: 1px; background: var(--line); }
.row + .row:has(> .ico)::before { left: 50px; }
.row.tap:active { background: var(--surface-2); }
.row .ico { color: var(--ink-3); flex: none; }
.row .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.row .t { display: block; font-weight: 500; font-size: 15px; line-height: 1.3;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .s { display: block; color: var(--ink-3); font-size: 13px; line-height: 1.35;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .s.late { color: var(--bad); }
.row .amt { font-weight: 600; font-size: 15px; white-space: nowrap;
            letter-spacing: -.01em; flex: none; }
.row .chev { color: var(--ink-3); flex: none; opacity: .7; }
.row.paid .t, .row.paid .amt { color: var(--ink-3); }
.row.paid .amt { text-decoration: line-through; }

/* ures allapot: egy ikon, egy mondat */
.empty { text-align: center; color: var(--ink-3); padding: 64px 24px 40px; }
.empty .i { width: 26px; height: 26px; margin: 0 auto 14px; }
.empty p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.empty .btn { max-width: 240px; margin: 24px auto 0; }

/* lenyithato szakasz (pl. a kifizetett szamlak havonta) */
.osszecsukhato { border: 0; padding: 0; margin: 0; }
.osszecsukhato > summary { list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 8px; padding: 10px 2px;
    color: var(--ink-3); font-size: 13px; font-weight: 500; }
.osszecsukhato > summary::-webkit-details-marker { display: none; }
.osszecsukhato > summary .caret { transition: transform .18s ease; }
.osszecsukhato[open] > summary .caret { transform: rotate(90deg); }
.osszecsukhato > summary .db { margin-left: auto; color: var(--ink-3); }
.osszecsukhato .card { margin-bottom: 10px; }
.honap-cim { color: var(--ink-3); font-size: 12.5px; margin: 14px 2px 7px; }

/* ---------- statisztika ---------- */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--surface); border-radius: var(--r); padding: 14px 16px; }
.stat .k { color: var(--ink-3); font-size: 12.5px; }
.stat .v { font-size: 21px; font-weight: 700; letter-spacing: -.025em; margin-top: 5px; }

/* fank-diagram: egy szin arnyalatai, a legnagyobb szelet a legerosebb */
.kor-doboz { padding: 18px 16px 8px; }
.kor { display: block; width: 168px; height: 168px; margin: 0 auto 6px;
       transform: rotate(-90deg); }
.szelet { fill: none; stroke: var(--bar); stroke-width: 18; }
.kor-ossz, .kor-cimke { transform: rotate(90deg); transform-origin: 60px 60px;
                        text-anchor: middle; fill: var(--ink); }
.kor-ossz { font-size: 12px; font-weight: 700; letter-spacing: -.02em; }
.kor-cimke { font-size: 7px; fill: var(--ink-3); font-weight: 400; }

.jelek { margin-top: 8px; }
.jel { display: flex; align-items: center; gap: 10px; padding: 9px 0;
       font-size: 13.5px; position: relative; }
.jel + .jel::before { content: ""; position: absolute; left: 0; right: 0; top: 0;
                      height: 1px; background: var(--line); }
.jel .folt { width: 11px; height: 11px; border-radius: 3px; flex: none;
             background: var(--bar); }
.jel .jk { flex: 1; min-width: 0; color: var(--ink); overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; }
.jel .jsz { color: var(--ink-3); flex: none; }
.jel .je { font-weight: 600; flex: none; min-width: 78px; text-align: right; }

/* vizszintes savok: az ertek aranyaban. Egy szin, csak az atlatszosag valt. */
.bars { padding: 4px 16px 14px; }
.bar-row { padding: 9px 0; }
/* kattinthato honap: a kiemeles a kartya teljes szelesseget fogja,
   ezert lep ki a .bars 16px-es paddingjabol */
.bar-row.tap { margin: 0 -16px; padding: 9px 16px; border-radius: 10px; }
.bar-row.tap:active { background: var(--surface-2); }
.bar-top .bv { display: flex; align-items: center; gap: 4px; }
.bar-top .chev { color: var(--ink-3); opacity: .7; margin-right: -4px; }
.bar-top { display: flex; justify-content: space-between; align-items: baseline;
           gap: 12px; font-size: 13.5px; }
.bar-top .bk { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis;
               white-space: nowrap; }
.bar-top .bv { font-weight: 600; flex: none; }
.bar-track { height: 6px; border-radius: 3px; background: var(--surface-2);
             margin-top: 7px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 3px; background: var(--bar); }

/* ---------- also sav: a vaz utolso eleme, ezert nem mozdul ---------- */
/* A also biztonsagi terulet a sav SAJAT paddingja - igy a hattere leer a
   kepernyo aljaig. A hatter SZANDEKOSAN elter az oldaletol: ha ugyanolyan,
   a home-indicator ala eso 34pt ures savnak latszik, es a menu ugy tunik,
   mintha lebegne. Igy viszont latszik, hogy a sav vegig leer. */
#tabs { flex: none; display: flex; background: var(--surface);
        border-top: 1px solid var(--line);
        padding-bottom: env(safe-area-inset-bottom); }
#tabs button { flex: 1; background: none; border: 0; color: var(--ink-3);
               padding: 9px 0 7px; display: flex; flex-direction: column;
               align-items: center; gap: 4px; font-weight: 500; font-size: 10.5px;
               line-height: 1; position: relative; }
#tabs button.active { color: var(--accent); }
#tabs .badge { position: absolute; top: 4px; left: 50%; margin-left: 5px;
               width: 8px; height: 8px; border-radius: 4px; background: var(--bad);
               font-size: 0; }

/* ---------- lebego gomb ---------- */
.fab { position: fixed; right: 16px; z-index: 21;
       bottom: calc(74px + env(safe-area-inset-bottom));
       width: 52px; height: 52px; border-radius: 26px; border: 0;
       background: var(--accent); color: var(--on-accent);
       display: grid; place-items: center; transition: transform .12s ease; }
.fab .i { width: 22px; height: 22px; stroke-width: 2.5; }
.fab:active { transform: scale(.93); }

/* ---------- also lap (sheet) ---------- */
/* A nyitas es a zaras ATMENET, nem @keyframes. A keyframe csak akkor indul
   ujra, ha az elem display:none-bol jon vissza - ha egy lapot rogton masik
   kovet (szamla -> atnevezes), az animacio el sem indult, csak kicserelodott a
   tartalom: ez volt a "villanas". Az atmenetnek mindig van honnan es hova,
   huzas kozben is. */
.sheet { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,0);
         display: flex; align-items: flex-end;
         transition: background-color .28s ease; }
.sheet.nyit { background: rgba(0,0,0,.5); }

.sheet-card { width: 100%; max-height: 90dvh; overflow-y: auto;
              overscroll-behavior: contain; background: var(--bg);
              border-radius: 18px 18px 0 0; position: relative;
              padding: 6px 16px calc(24px + env(safe-area-inset-bottom));
              transform: translateY(100%);
              transition: transform .3s cubic-bezier(.32,.72,0,1); }
.sheet.nyit .sheet-card { transform: translateY(0); }
/* Almenu-valtas: a lap magassaga is atmegy, nem ugrik. */
.sheet-card.lap-magas { transition: height .22s cubic-bezier(.2,.7,.3,1),
                                    transform .3s cubic-bezier(.32,.72,0,1); }
/* Huzas kozben a kez vezeti a lapot, nem az atmenet. */
.sheet-card.huzas { transition: none; }

/* A lap tartalma oldalra csuszik, amikor almenube lepunk vagy visszajovunk -
   igy latszik, hogy hova kerultunk, es hogy van visszaut. */
.lap-tart { transition: transform .22s cubic-bezier(.2,.7,.3,1),
                        opacity .16s ease; }
.lap-tart.belep { transform: translateX(calc(var(--irany, 1) * 30px));
                  opacity: 0; }

/* X a lap sarkaban. Mobilon a lehuzas es az also gomb az utja, ezert ott
   elrejtve; asztalin viszont ez az egyetlen kezreeso zaras - ott a lap
   aljara gorogni csak a bezarasert rossz. */
.lap-x { display: none; position: absolute; top: 12px; right: 12px; z-index: 2;
         width: 32px; height: 32px; border: 0; border-radius: 16px;
         background: var(--surface); color: var(--ink-2);
         place-items: center; }
.lap-x:active { background: var(--surface-2); }

/* Vissza-nyil: csak almenuben van, es telefonon is latszik - ott ez a
   legkezenfekvobb jelzes, hogy nem az egesz zarodik be. */
.lap-vissza { position: absolute; top: 12px; left: 12px; z-index: 2;
              width: 32px; height: 32px; border: 0; border-radius: 16px;
              background: var(--surface); color: var(--ink-2);
              display: grid; place-items: center; }
.lap-vissza:active { background: var(--surface-2); }
.sheet-card.almenu .lap-tart > h2 { padding-left: 38px; }

.grab { width: 36px; height: 4px; border-radius: 2px; background: var(--line);
        margin: 8px auto 18px; }
.sheet h2 { font-size: 20px; line-height: 1.3; margin: 0; letter-spacing: -.02em; }
/* cim + ceruza egy sorban; a gomb a sor vegen all, es nem nyomja szet a cimet */
.sheet h2.cimsor { display: flex; align-items: center; gap: 6px; }
.sheet h2.cimsor > span { flex: 1; min-width: 0; }
.sheet h2.cimsor .icon-btn { width: 32px; height: 32px; margin: -6px -6px -6px 0; }
.sheet .hint { color: var(--ink-3); font-size: 13.5px; margin: 5px 0 0; }
.sheet .hint b { color: var(--ink); font-weight: 600; }
.sheet h2 + .card, .sheet .hint + .card, .amt-big + .card,
.sheet h2 + .field, .sheet .hint + .field, .sheet h2 + .steps { margin-top: 20px; }
.amt-big { font-size: 30px; font-weight: 700; letter-spacing: -.03em; margin-top: 10px; }
.amt-big .when { display: block; font-size: 13.5px; font-weight: 400;
                 letter-spacing: 0; color: var(--ink-3); margin-top: 4px; }
.amt-big .when.late { color: var(--bad); }

/* ADATSOR a reszleteknel.
   A cimke a SAJAT soraban all, az ertek alatta - igy hosszu ertek eseten
   sem tud a ketto egymasba csuszni, es sosem kell tordelni. */
.d { padding: 12px 16px; position: relative; }
.d + .d::before { content: ""; position: absolute; left: 16px; right: 0; top: 0;
                  height: 1px; background: var(--line); }
.d dt { color: var(--ink-3); font-size: 12.5px; line-height: 1.3; }
.d dd { margin: 3px 0 0; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
dl { margin: 0; }

/* szamozott lepesek (a Gmail-beallitas magyarazataban) */
.steps { counter-reset: s; padding: 0; margin: 0; list-style: none; }
.steps li { counter-increment: s; position: relative; padding: 0 0 0 32px;
            color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.steps li + li { margin-top: 14px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 1px;
                    width: 22px; height: 22px; border-radius: 11px;
                    background: var(--surface); color: var(--ink-2);
                    font-weight: 600; font-size: 11px; line-height: 22px;
                    text-align: center; }
.steps b { color: var(--ink); font-weight: 600; }

/* ---------- urlapok ---------- */
.field { margin-top: 18px; }
.field:first-child { margin-top: 0; }
label { display: block; font-size: 13px; color: var(--ink-2); margin: 0 0 7px; }
label .opt { color: var(--ink-3); }
input, select, textarea {
  width: 100%; min-height: var(--tap); padding: 11px 13px; border-radius: 11px;
  border: 0; background: var(--surface); color: var(--ink);
  font-family: inherit; font-weight: 400;
  font-size: 16px; /* 16px alatt az iOS ranagyit a mezore fokuszkor */
  appearance: none; -webkit-appearance: none;
}
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a919d' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center;
  background-size: 16px; padding-right: 40px;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
  outline: 0; box-shadow: inset 0 0 0 1.5px var(--accent);
}

/* ikonvalaszto racs */
.iconpick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ip { display: grid; place-items: center; height: 52px; border: 0; border-radius: 11px;
      background: var(--surface); color: var(--ink-3); }
.ip.on { background: var(--accent); color: var(--on-accent); }
.ip:active { opacity: .75; }

/* szegmens-valaszto (tema) */
.seg { display: flex; background: var(--surface); border-radius: 11px; padding: 3px; }
.seg button { flex: 1; border: 0; background: none; color: var(--ink-2);
              padding: 9px 4px; border-radius: 9px; font-size: 14px; }
.seg button.on { background: var(--surface-2); color: var(--ink); font-weight: 600; }

/* kapcsolo (ertesites-tipusok) */
.kapcsolo { position: relative; flex: none; margin: 0; width: 46px; height: 28px; }
.kapcsolo input { position: absolute; opacity: 0; width: 100%; height: 100%;
                  min-height: 0; margin: 0; z-index: 1; }
.kapcsolo .sin { position: absolute; inset: 0; border-radius: 14px;
                 background: var(--surface-2); transition: background .18s ease; }
.kapcsolo .sin::after { content: ""; position: absolute; top: 3px; left: 3px;
                        width: 22px; height: 22px; border-radius: 11px;
                        background: var(--ink-3); transition: transform .18s ease,
                        background .18s ease; }
.kapcsolo input:checked + .sin { background: var(--accent); }
.kapcsolo input:checked + .sin::after { transform: translateX(18px);
                                        background: var(--on-accent); }

/* jelolonegyzet cimkevel (pl. "a szolgaltato osszes szamlaja") */
.valaszto { display: flex; align-items: flex-start; gap: 11px; margin: 0;
            color: var(--ink); font-size: 14px; line-height: 1.4; cursor: pointer; }
.valaszto input[type=checkbox] { width: 22px; height: 22px; min-height: 0;
    flex: none; margin: 0; border-radius: 6px; background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--line); position: relative; }
.valaszto input[type=checkbox]:checked { background: var(--accent);
    box-shadow: none; }
.valaszto input[type=checkbox]:checked::after { content: ""; position: absolute;
    left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--on-accent);
    border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* fotovalaszto: a natv vezerlot elrejtjuk, a cimke lesz a gomb */
.filepick { position: relative; }
.filepick input[type=file] { position: absolute; width: 1px; height: 1px;
                             opacity: 0; pointer-events: none; }
.filebtn { display: flex; align-items: center; gap: 10px; margin: 0;
           min-height: var(--tap); padding: 11px 13px; border-radius: 11px;
           background: var(--surface); color: var(--ink-2); font-size: 14px;
           cursor: pointer; }
.filebtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filebtn.has { color: var(--ink); }
/* a fo utvonal: ez a legegyszerubb mod szamlat rogziteni, ezert kiemelt */
.filebtn.kiemelt { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--ink); }
.filebtn:active { background: var(--surface-2); }

.btn { width: 100%; min-height: 50px; padding: 14px; border-radius: 12px; border: 0;
       margin-top: 24px; background: var(--accent); color: var(--on-accent);
       font-family: inherit; font-weight: 600; font-size: 16px;
       display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn .i { width: 18px; height: 18px; stroke-width: 2.25; }
.btn.sec { background: var(--surface); color: var(--ink); margin-top: 10px; }
/* Rombolo muvelet. Eddig NEM volt megkulonboztetve: a "Torles" pontosan ugy
   nezett ki, mint a "Kifizettem" - a legveszelyesebb gomb, mint a legartalmatlanabb.
   Nem szines tabla lett belole, csak piros szoveg semleges alapon: a hazi
   szabaly szerint egy kiemeloszin van, a piros ugyanaz a kivetel, mint a
   lejart hatarido - jelzes, nem dekoracio. */
.btn.danger { background: var(--surface); color: var(--bad); margin-top: 10px; }
.btn.quiet { background: none; color: var(--ink-2); margin-top: 6px;
             font-weight: 400; min-height: 44px; }
.btn:active { opacity: .75; }
/* Kifele vivo gomb. Keretes, nem kitoltott: a kitoltott kiemeloszin a sajat
   elsodleges muveletunke ("Kifizettem"). Igy a ketto egymas mellett sem
   keverheto ossze. */
.btn.kulso { background: none; color: var(--accent); margin-top: 20px;
             box-shadow: inset 0 0 0 1.5px var(--accent); text-decoration: none; }
.btn.kulso .i { stroke-width: 2.25; }
.fizet-hol { text-align: center; color: var(--ink-3); font-size: 12px;
             margin: 7px 0 0; word-break: break-all; }
/* A "Kifizettem" a fizeto gomb utan jon: az elso a penz, a masodik a pipa. */
.fizet-blokk + .btn { margin-top: 12px; }
.tetel-kezeles { margin-top: 18px; }
.tetel-kezeles .btn { margin-top: 8px; }

/* ---------- tovabbitasi cim ---------- */
.addr { display: flex; align-items: center; gap: 8px; background: var(--surface);
        border-radius: 11px; padding: 12px 8px 12px 14px; }
.addr code { flex: 1; min-width: 0;
             font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
             font-weight: 500; font-size: 14px; line-height: 1.35;
             color: var(--ink); word-break: break-all; }

/* ---------- szamlanezegeto ----------
   Sajat, teljes kepernyos reteg. Az oldal egesze nem nagyithato, ezert a
   nagyitast itt magunk vezereljuk (csippentes / dupla koppintas). */
#viewer { position: fixed; inset: 0; z-index: 50; background: var(--bg);
          display: flex; flex-direction: column;
          padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.v-bar { flex: none; display: flex; align-items: center; gap: 8px;
         padding: 6px 8px; border-bottom: 1px solid var(--line); }
.v-title { flex: 1; text-align: center; font-size: 14px; color: var(--ink-2); }
.v-scroll { flex: 1; overflow: auto; overscroll-behavior: contain;
            background: var(--surface-2); touch-action: pan-y; }
.v-inner { transform-origin: 50% 0; transition: transform .08s linear;
           padding: 14px 0; }
.v-inner .pg { display: block; width: calc(100% - 20px); max-width: 700px;
               margin: 0 auto 14px; border-radius: 4px;
               box-shadow: 0 2px 10px rgba(0,0,0,.22); background: #fff; }
.v-inner .pg:last-child { margin-bottom: 0; }
/* ha a levelhez nincs PDF, a nyers szoveget mutatjuk - tordelve, olvashatoan */
.v-megj { margin: 0 14px 12px; padding: 11px 14px; border-radius: 10px;
           background: var(--surface); color: var(--ink-2);
           font-size: 13px; line-height: 1.5; }
.v-text { margin: 0 14px; padding: 16px; border-radius: 10px; background: var(--surface);
          color: var(--ink); font: 400 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
          white-space: pre-wrap; word-break: break-word; }

/* a lebego + gomb fole, kulonben ratakar (74px gomb + 52px magassag + koz) */
.toast { position: fixed; left: 50%; transform: translateX(-50%); z-index: 60;
         bottom: calc(144px + env(safe-area-inset-bottom));
         background: var(--surface-2); color: var(--ink); padding: 11px 18px;
         border-radius: 11px; font-weight: 500; font-size: 14px; max-width: 86vw;
         text-align: center; animation: up .2s ease-out;
         box-shadow: 0 6px 20px rgba(0,0,0,.18); }


/* ASZTALI NEZET: olvasasi szelessegre fogjuk a tartalmat, es kozepre tesszuk.
   A hatter vegig a lap sajat szine marad - nincs "keret" es nincs kulon panel,
   csak a sor hossza lesz emberi. */
@media (min-width: 640px) {
  #main > .view, #topbar { max-width: 560px; margin-inline: auto; width: 100%; }
  #topbar { padding-left: 16px; padding-right: 16px; }
  /* Az also sav VEGIG er - kulonben lebego csik lenne a kepernyo aljan.
     Csak a gombjait huzzuk be a tartalom szelessegere. */
  #tabs { padding-left: calc(50% - 280px); padding-right: calc(50% - 280px); }
  /* Asztalin nem also lap, hanem KOZEPRE nyilo ablak: a kepernyo aljara
     gorogni csak a bezarasert felesleges munka. */
  .sheet { align-items: center; justify-content: center; padding: 24px; }
  .sheet-card { width: 100%; max-width: 560px; max-height: 84dvh;
                border-radius: 18px; padding: 22px 20px 20px;
                transform: translateY(10px) scale(.985); opacity: 0;
                transition: transform .22s cubic-bezier(.2,.7,.3,1),
                            opacity .18s ease; }
  .sheet.nyit .sheet-card { transform: none; opacity: 1; }
  .sheet-card .grab { display: none; }
  .lap-x { display: grid; }
  .lap-tart > h2 { padding-right: 34px; }
  .fab { right: calc(50% - 280px + 16px); }
}

/* Ha a rendszerben be van kapcsolva a mozgas csokkentese: ne csusszon semmi,
   de ne is villanjon - marad egy rovid athalas. */
@media (prefers-reduced-motion: reduce) {
  .sheet { transition: background-color .12s linear; }
  .sheet-card { transform: none; opacity: 0; transition: opacity .12s linear; }
  .sheet.nyit .sheet-card { transform: none; opacity: 1; }
}

/* verzio a Beallitasok aljan */
.verzio { text-align: center; color: var(--ink-3); font-size: 12px; margin: 22px 0 4px;
  font-variant-numeric: tabular-nums; }