/* Kapuszerződések – stílusok. A GateDesigner (swingdesigner/static/app.css) megjelenése: ugyanazok a színek, fejléc, menü, kártyák,
   táblázatok, gombok, belépő oldal, világos / sötét téma. Szigorú CSP: nincs inline stílus; minden itt. */
:root{
  --bg:#eceff2; --panel:#ffffff; --sunk:#f5f7f9; --ink:#17202a; --muted:#5a6774; --line:#d3d9e0;
  --accent:#d97000; --steel:#1f4fa8; --ok:#2e7d32; --bad:#c62828; --warn:#b45309; --scene:#f3f5f7;
  --f-sans:system-ui,-apple-system,"Segoe UI",sans-serif; --f-mono:ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#11161c;--panel:#192028;--sunk:#141a21;--ink:#e5eaf0;--muted:#98a4b1;--line:#2b3541;--accent:#f0962e;--steel:#7aa7e8;--ok:#4caf50;--bad:#ef5350;--warn:#e0912f;--scene:#e9edf1;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#11161c;--panel:#192028;--sunk:#141a21;--ink:#e5eaf0;--muted:#98a4b1;--line:#2b3541;--accent:#f0962e;--steel:#7aa7e8;--ok:#4caf50;--bad:#ef5350;--warn:#e0912f;--scene:#e9edf1;color-scheme:dark}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.4 var(--f-sans);margin:0;display:flex;flex-direction:column;height:100vh;overflow:hidden}
body:has(.page.active){overflow:auto;height:auto;min-height:100vh}
*{box-sizing:border-box}
h1{font:600 17px/1.25 var(--f-sans);margin:0;text-wrap:balance}
.sub{color:var(--muted);font-size:12px;margin:4px 0 0}
.btn,.mini,.tabs button,.step{font:500 12.5px var(--f-sans);border:1px solid var(--line);background:var(--sunk);color:var(--ink);padding:6px 10px;border-radius:4px;cursor:pointer}
.btn.primary{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.btn:disabled{opacity:.5;cursor:wait}
.mini{padding:2px 7px;font-size:11.5px}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[type=number],input[type=text],select{width:100%;font:13px var(--f-mono);padding:5px 6px;border:1px solid var(--line);border-radius:4px;background:var(--sunk);color:var(--ink);min-width:0}
.muted{color:var(--muted);font-size:12px}
#toast{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--panel);padding:8px 12px;border-radius:4px;font-size:13px}
.contents{display:contents}
.contents[hidden]{display:none}
/* ---- fejléc, fülek (a kaputervező mintájára) ---- */
header{display:flex;align-items:center;gap:10px;padding:6px max(10px,env(safe-area-inset-left,0px));background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
header h1{display:flex;align-items:center;gap:8px;white-space:nowrap}
header h1 .logo{width:22px;height:22px;border-radius:6px;background:var(--accent);display:inline-block;position:relative}
header h1 .logo::after{content:"";position:absolute;inset:6px 5px 5px;border:2px solid #fff;border-top:none}
.hright{margin-left:auto;display:flex;gap:10px;align-items:center;color:var(--muted);font-size:12px;flex-wrap:wrap}
.hright select{width:auto;font:12px var(--f-sans);padding:3px 6px}
.verbadge{font:11px var(--f-mono)}
.btn.warnnew{background:var(--warn);color:#fff;border-color:var(--warn)}
nav{display:flex;gap:4px;overflow-x:auto}
nav button{font:600 11px var(--f-sans);letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--line);background:var(--panel);color:var(--muted);padding:5px 11px;border-radius:999px;cursor:pointer;white-space:nowrap}
nav button:hover{color:var(--ink)}nav button.active{background:var(--accent);border-color:var(--accent);color:#fff}
.tab{display:none}.tab.active{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
#tab-design.active{overflow:hidden}
.page.active{display:block;padding:6px max(12px,env(safe-area-inset-left,0px)) 40px;max-width:1500px;width:100%;margin:0 auto}
.btn.ok{background:var(--ok);color:#fff;border-color:var(--ok)}.btn.bad{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn.sm{padding:3px 8px;font-size:11.5px}
/* oldalak: kártyák, táblázatok */
h2.title{font:600 20px/1.2 var(--f-sans);margin:8px 0 2px}
.lead{color:var(--muted);font-size:13px;margin:0 0 12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 14px;margin-bottom:12px}
.card>h3{font:600 14px var(--f-sans);margin:0 0 10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card>h3 .sp{margin-left:auto;display:flex;gap:6px;align-items:center;font-weight:400}
table.grid{width:100%;border-collapse:collapse;font-size:12.5px}
table.grid th,table.grid td{padding:5px 7px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.grid th{color:var(--muted);font-weight:500;font-size:11.5px}
table.grid td.r,table.grid th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.grid tr.off td{opacity:.5}
table.grid tr.click{cursor:pointer}
table.grid tbody tr:hover{background:var(--sunk)}
.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.small{font-size:11.5px}.faint{color:var(--muted);opacity:.8}
.tag{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11px;background:var(--sunk);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.tag.ok{color:var(--ok);border-color:var(--ok)}.tag.warn{color:var(--warn);border-color:var(--warn)}.tag.bad{color:var(--bad);border-color:var(--bad)}
.edit{background:var(--sunk);border:1px solid var(--line);border-radius:6px;padding:10px;display:grid;gap:8px}
.edit textarea{width:100%;min-height:260px;font:12px/1.4 var(--f-mono);padding:6px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink)}
.diff .o{color:var(--bad)}.diff .n{color:var(--ok)}
.kvl{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:12.5px}.kvl .k{color:var(--muted)}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.form label{display:grid;gap:3px;font-size:12px;color:var(--muted)}
.form label input{font:13px var(--f-sans)}
.empty{padding:26px;text-align:center;color:var(--muted)}
.spec{font:11.5px/1.5 var(--f-mono);color:var(--muted)}
#toast.err{background:var(--bad);color:#fff}
.stepno{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font:600 11px var(--f-sans);letter-spacing:0}
.badge{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--warn);color:#fff;font:600 11px var(--f-sans);margin-left:4px}
.badge.err{background:var(--bad)}
/* belépő oldal (login.html): belépés, 2FA-kód, a fiók első beállítása */
body.loginpage{overflow:auto;align-items:center;justify-content:center;padding:24px 16px}
.login{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:22px 24px;width:min(420px,100%);display:grid;gap:12px}
.login h1{display:flex;align-items:center;gap:8px}.login h1 .logo{width:22px;height:22px;border-radius:6px;background:var(--accent);display:inline-block}
.login form,.login section{display:grid;gap:10px}.login p{margin:0}
.login label{display:grid;gap:4px;font-size:12.5px;color:var(--muted)}
.login input[type=text],.login input[type=password]{font:15px var(--f-sans);padding:8px 9px;border:1px solid var(--line);border-radius:4px;background:var(--sunk);color:var(--ink);width:100%}
.login label.chk{display:flex;align-items:center;gap:8px;color:var(--ink)}
.login .qr{width:220px;height:220px;justify-self:center;image-rendering:pixelated;background:#fff;border-radius:4px}
.login code{font:13px var(--f-mono);user-select:all}
.login .codes{font:14px/1.6 var(--f-mono);background:var(--sunk);border:1px solid var(--line);border-radius:4px;padding:10px 14px;margin:0;columns:2;user-select:all}
#lMsg.err{color:var(--bad);font-weight:600}
.login .foot{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center}.login .foot a{color:var(--muted)}
/* szerepkör szerinti felület (a szerver úgyis ellenőriz): need2 = tervezőtől, need3 = csak adminnak */
body.lvl1 .need2,body.lvl1 .need3,body.lvl2 .need3{display:none!important}
.card .qr{width:200px;height:200px;image-rendering:pixelated;background:#fff;border-radius:4px;display:block;margin:6px 0}
.card .codes{font:14px/1.6 var(--f-mono);background:var(--sunk);border:1px solid var(--line);border-radius:4px;padding:10px 14px;columns:2;max-width:420px;user-select:all}
.card.notice{border-color:var(--warn)}.card code.big{font:16px var(--f-mono);user-select:all}
.card code.link{font:12px var(--f-mono);word-break:break-all;user-select:all}
/* ===================== modern megjelenés (2026-11-01): színek, lekerekítés, árnyék, tipográfia – a munkapult elrendezése változatlan ===================== */
:root{
  --bg:#f3f5f8; --panel:#ffffff; --sunk:#f6f8fb; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0;
  --accent:#ea7a10; --accent2:#f59e0b; --steel:#2563eb; --ok:#16a34a; --bad:#dc2626; --warn:#d97706; --scene:#f5f7fa;
  --f-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:12px; --r-sm:8px; --sh:0 1px 2px rgba(15,23,42,.05),0 6px 20px -8px rgba(15,23,42,.12); --sh-lg:0 20px 60px -20px rgba(15,23,42,.35);
  --ring:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0a0e13;--panel:#111821;--sunk:#0d131a;--ink:#e6edf5;--muted:#8a98aa;--line:#1e2935;--accent:#f59e0b;--accent2:#fbbf24;--steel:#60a5fa;--ok:#22c55e;--bad:#f87171;--warn:#fbbf24;--scene:#eef2f6;--sh:0 1px 2px rgba(0,0,0,.4),0 8px 24px -10px rgba(0,0,0,.6)}}
:root[data-theme="dark"]{--bg:#0a0e13;--panel:#111821;--sunk:#0d131a;--ink:#e6edf5;--muted:#8a98aa;--line:#1e2935;--accent:#f59e0b;--accent2:#fbbf24;--steel:#60a5fa;--ok:#22c55e;--bad:#f87171;--warn:#fbbf24;--scene:#eef2f6;--sh:0 1px 2px rgba(0,0,0,.4),0 8px 24px -10px rgba(0,0,0,.6)}
body{font-family:var(--f-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.003em}
/* fejléc */
header{background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(15,23,42,.02);padding:8px max(14px,env(safe-area-inset-left,0px));gap:14px}
header h1{font:650 16px/1.2 var(--f-sans);letter-spacing:-.01em}
header h1 .logo,.login h1 .logo{width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,var(--accent2),var(--accent));box-shadow:0 4px 12px -4px color-mix(in srgb,var(--accent) 60%,transparent)}
header h1 .logo::after{inset:8px 7px 7px}
nav{gap:2px;padding:3px;background:var(--sunk);border:1px solid var(--line);border-radius:10px}
nav button{font:600 12.5px var(--f-sans);letter-spacing:0;text-transform:none;border:0;background:transparent;color:var(--muted);padding:6px 12px;border-radius:7px;transition:background .15s,color .15s}
nav button:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
nav button.active{background:var(--panel);color:var(--ink);box-shadow:var(--sh)}
#who{border-radius:999px;padding:5px 12px 5px 10px;font-weight:600}
/* panelek, kártyák */
aside,.stage,.card{border-radius:var(--r);border-color:var(--line);box-shadow:var(--sh)}
.card{padding:16px 18px}.card>h3{font:650 14.5px var(--f-sans);letter-spacing:-.01em}
.page.active h2.title{font:700 22px/1.2 var(--f-sans);letter-spacing:-.02em;margin:18px 0 4px}.page .lead{color:var(--muted)}
/* gombok */
.btn,.mini,.tabs button,.step{border-radius:var(--r-sm);transition:background .15s,border-color .15s,box-shadow .15s,color .15s}
.btn{padding:7px 13px;font-weight:600;background:var(--panel);box-shadow:0 1px 2px rgba(15,23,42,.06)}
.btn:hover,.mini:hover{border-color:color-mix(in srgb,var(--ink) 25%,var(--line))}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--panel)}
.btn.ok{background:linear-gradient(180deg,color-mix(in srgb,var(--ok) 92%,#fff),var(--ok));border-color:var(--ok)}
.btn.bad{background:linear-gradient(180deg,color-mix(in srgb,var(--bad) 92%,#fff),var(--bad));border-color:var(--bad)}
.btn.warnnew{border-radius:999px}
/* mezők */
input[type=number],input[type=text],input[type=password],select,textarea{border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);padding:6px 9px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
button:focus-visible,summary:focus-visible{outline:none;box-shadow:var(--ring)}
.fld .thumb{border-radius:var(--r-sm);box-shadow:var(--sh)}
/* táblázatok, címkék */
table.grid th{text-transform:uppercase;letter-spacing:.04em;font-size:10.5px;font-weight:650}
table.grid th,table.grid td{padding:8px 9px;border-bottom-color:var(--line)}
table.grid tbody tr:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.tag{border:0;background:var(--sunk);font-weight:600;padding:2px 9px}
.tag.ok{background:color-mix(in srgb,var(--ok) 13%,transparent)}.tag.warn{background:color-mix(in srgb,var(--warn) 15%,transparent)}.tag.bad{background:color-mix(in srgb,var(--bad) 13%,transparent)}
.pill{border-radius:999px;letter-spacing:.02em}
/* belépő oldal */
body.loginpage{background:radial-gradient(1200px 600px at 10% -10%,color-mix(in srgb,var(--accent2) 30%,transparent),transparent 60%),
  radial-gradient(900px 600px at 110% 110%,color-mix(in srgb,var(--steel) 25%,transparent),transparent 60%),var(--bg)}
.login{width:min(440px,100%);padding:30px 32px 24px;border-radius:20px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  background:color-mix(in srgb,var(--panel) 85%,transparent);backdrop-filter:blur(16px) saturate(1.3);box-shadow:var(--sh-lg);gap:16px}
.login h1{font:700 21px/1.2 var(--f-sans);letter-spacing:-.02em;gap:12px}
.login .lsub{margin:-8px 0 2px;color:var(--muted);font-size:13px}
.login label{font-size:12.5px;font-weight:600;color:var(--ink)}
.login input[type=text],.login input[type=password]{height:44px;padding:0 13px;font-size:15px;border-radius:10px;background:var(--panel)}
.login .btn.primary{height:44px;border:0;border-radius:10px;font-size:14.5px;background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff;box-shadow:0 8px 20px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.login .btn.primary:hover{filter:brightness(1.05)}
.login .qr{border-radius:12px;box-shadow:var(--sh)}
.login .foot{justify-content:center;margin-top:4px}
/* kontraszt: a borostyán kitöltésen sötét szöveg, a zöld / piros / sárga kitöltés mély árnyalat (fehér szöveggel is olvasható) – mindkét témában */
:root{--on-accent:#1a1205;--okS:#15803d;--badS:#dc2626;--warnS:#b45309;--infoS:#475d7a;--seg:var(--panel)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--seg:#233142}}
:root[data-theme="dark"]{--seg:#233142}
nav button.active,.tabs button[aria-selected="true"]{background:var(--seg)}
.stepno{color:var(--on-accent)!important}
.mini.primary,.login .btn.primary{background:linear-gradient(135deg,var(--accent2),var(--accent));border-color:transparent;color:var(--on-accent)}
.btn.ok,.btn.bad,.btn.warnnew{color:#fff}
.btn.ok{background:linear-gradient(180deg,color-mix(in srgb,var(--okS) 88%,#fff),var(--okS));border-color:var(--okS)}
.btn.bad{background:linear-gradient(180deg,color-mix(in srgb,var(--badS) 88%,#fff),var(--badS));border-color:var(--badS)}
.btn.warnnew{background:var(--warnS);border-color:var(--warnS)}
.pill.ok{background:var(--okS)}.pill.bad{background:var(--badS)}.pill.warn{background:var(--warnS)}.pill.info{background:var(--infoS)}
.badge{background:var(--warnS)}#toast.err{background:var(--badS)}
/* fejléc (a kaputervező szerkezete, 2026-11-03): felül logó + „GateDesigner” + modulváltó + jobb oldali elemek; alatta külön sorban a modul
   menüje és a közös admin pontok; a Tervező fülön alatta a projektsáv. A sorok rögzített magasságúak – a munkapult a maradékot tölti ki. */
header{flex-wrap:nowrap;gap:14px;flex:none}header h1{flex:none}
.modsw{display:flex;gap:2px;padding:3px;background:var(--sunk);border:1px solid var(--line);border-radius:10px;flex:none}
.modsw button{font:650 13px var(--f-sans);border:0;background:transparent;color:var(--muted);padding:6px 14px;border-radius:7px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.modsw button:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.modsw button[aria-selected="true"]{background:linear-gradient(135deg,var(--accent2),var(--accent));color:var(--on-accent);box-shadow:0 4px 12px -6px color-mix(in srgb,var(--accent) 70%,transparent)}
.modname{font:650 12.5px var(--f-sans);color:var(--muted);padding:4px 11px;border:1px solid var(--line);border-radius:999px;background:var(--sunk);white-space:nowrap}
#nav{flex:none;display:flex;align-items:center;gap:10px;padding:5px max(14px,env(safe-area-inset-left,0px));background:var(--panel);border:0;border-bottom:1px solid var(--line);border-radius:0;overflow-x:auto;scrollbar-width:none}
#nav::-webkit-scrollbar{display:none}
#nav .navgrp{display:flex;gap:2px;padding:3px;background:var(--sunk);border:1px solid var(--line);border-radius:10px;flex:none}
#nav .navgrp.adm{margin-left:auto}
#nav button{white-space:nowrap;padding:5px 11px}
#projbar{flex:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px max(14px,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--sunk) 55%,var(--panel));border-bottom:1px solid var(--line);position:relative;z-index:30}
#projbar>*{flex:none}#projbar .btn,#projbar summary{white-space:nowrap}
.pstate{flex:0 1 auto!important;min-width:0;max-width:min(46vw,560px);font-weight:600;color:var(--ink);margin-right:4px}
.hright{flex:none;flex-wrap:nowrap;gap:8px}#who{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.verbadge{padding:3px 8px;border-radius:999px;background:var(--sunk);border:1px solid var(--line);color:var(--muted);cursor:help}
.projdd[open]>.projcard{border-radius:var(--r);box-shadow:var(--sh-lg);padding:12px}
#tab-sl-design.active{overflow:hidden}
.page h3.sect{font:650 12px var(--f-sans);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:22px 0 10px}
@media (max-width:1100px){.verbadge{display:none}}
@media (max-width:820px){header{flex-wrap:wrap}.hright{flex-wrap:wrap;margin-left:auto}#nav .navgrp.adm{margin-left:0}}
@media (max-width:560px){header h1{font-size:0;gap:0}.modsw button{padding:6px 10px}}
/* tartalmi oldalak */
.page.active{max-width:1320px;padding:10px max(24px,env(safe-area-inset-left,0px)) 56px}
.page.active h2.title{margin:22px 0 4px}.page .lead{margin:0 0 18px;font-size:13.5px}
.empty{padding:44px 24px;border:1.5px dashed var(--line);border-radius:var(--r);background:color-mix(in srgb,var(--sunk) 60%,transparent);font-size:14px}
.empty::before{content:"";display:block;width:44px;height:44px;margin:0 auto 14px;border-radius:12px;background:linear-gradient(135deg,var(--accent2),var(--accent));box-shadow:0 8px 20px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.card:has(>.empty:only-child){padding:0;border:0;box-shadow:none;background:transparent}
/* beviteli mezők sötétben: a panelnél mélyebb mező, látható keret */
:root{--field:var(--panel);--fline:var(--line)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--field:#0b1118;--fline:#2a3746}}
:root[data-theme="dark"]{--field:#0b1118;--fline:#2a3746}
input[type=number],input[type=text],input[type=password],input[type=email],select,textarea{background:var(--field);border-color:var(--fline)}
@media (max-width:820px){.page.active{padding:6px 14px 40px}.card{overflow-x:auto;padding:14px}.page.active h2.title{margin-top:14px}}
.login h1 .logo{position:relative;flex:none}.login h1 .logo::after{content:"";position:absolute;inset:8px 7px 7px;border:2px solid #fff;border-top:none}   /* ugyanaz a jel, mint a fejlécben */

/* ===================== Kapuszerződések – saját elemek (a fenti GateDesigner-alapra) ===================== */
input[type=email],input[type=date],input[type=time],input[type=search],textarea{width:100%;font:13px var(--f-sans);padding:6px 9px;border:1px solid var(--fline);border-radius:var(--r-sm);background:var(--field);color:var(--ink);min-width:0}
input[type=text],input[type=number]{font:13px var(--f-sans)}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
textarea{min-height:64px;resize:vertical}
.form label select,.form label textarea{font:13px var(--f-sans)}
.form .wide{grid-column:1/-1}
.form label.chk{display:flex;align-items:center;gap:8px;color:var(--ink)}
input.money{text-align:right;font-variant-numeric:tabular-nums}
.money-wrap{position:relative;display:block}.money-wrap input{padding-right:34px}
.money-wrap::after{content:"Ft";position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:12px;pointer-events:none}
.money-wrap.pct::after{content:"%"}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.toolbar input[type=search]{max-width:420px}
.toolbar .sp{flex:1}
.crumbs{font-size:12.5px;color:var(--muted);margin:14px 0 0}.crumbs a{color:var(--muted)}
a{color:var(--steel);text-decoration:none}a:hover{text-decoration:underline}
h2.title small{font-size:14px;font-weight:500;color:var(--muted);margin-left:8px}
.titlerow{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.titlerow .row{margin:18px 0 4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}
.kvl dd,.kvl dt{margin:0}
.tag.blue{color:var(--steel);background:color-mix(in srgb,var(--steel) 13%,transparent)}
tr.late td{background:color-mix(in srgb,var(--bad) 8%,transparent)}
table.grid tr.deleted td{opacity:.5;text-decoration:line-through}
.card.danger{border-color:var(--bad)}
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 12px}
.stat .card{margin:0;cursor:pointer}.stat b{display:block;font:700 26px var(--f-sans);letter-spacing:-.02em}.stat span{color:var(--muted);font-size:12.5px}
.stat .card.bad b{color:var(--bad)}.stat .card.warn b{color:var(--warn)}.stat .card.ok b{color:var(--ok)}
.picklist{display:grid;gap:6px}
.pick{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--sunk);cursor:pointer}
.pick input{margin-top:2px}.pick.off{opacity:.55;cursor:default}.pick .small{display:block}
.items td input,.items td select{font-size:12.5px}
.items td.num{width:80px}.items td.act{width:40px;text-align:right}
table.check td{vertical-align:middle}table.check td.c{text-align:center;width:90px}
.doc{max-width:980px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:22px 28px;font:13.5px/1.5 var(--f-sans)}
.doc h1{font:700 20px var(--f-sans);margin:0 0 10px}.doc h2{font:650 16px var(--f-sans);margin:20px 0 8px}.doc h3{font:650 14px var(--f-sans);margin:14px 0 6px}
.doc table.doc{border-collapse:collapse;width:100%;margin:6px 0 12px;font-size:12.5px}
.doc table.doc th,.doc table.doc td{border:1px solid var(--line);padding:4px 7px;text-align:left;vertical-align:top}
.doc table.doc th{background:var(--sunk)}
.contents-sum{font-size:12px;color:var(--muted)}
.foot-ver{color:var(--muted);font-size:11.5px;text-align:center;padding:16px 0 28px}
dialog.modal{border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--ink);box-shadow:var(--sh-lg);padding:18px 20px;width:min(900px,96vw);max-height:90vh}
dialog.modal::backdrop{background:rgba(0,0,0,.45);backdrop-filter:blur(3px)}
dialog.modal h3{margin:0 0 10px;font:650 15px var(--f-sans)}
.catpick{max-height:55vh;overflow:auto}
@media print{
  header,#nav,.noprint,#toast,.foot-ver{display:none!important}
  body,body:has(.page.active){background:#fff;overflow:visible;height:auto}
  .page.active{padding:0;max-width:none}
  .doc{border:0;box-shadow:none;padding:0;max-width:none;font-size:11pt}
  .doc table.doc tr{break-inside:avoid}
}

/* ===== lazább elrendezés (Gábor, 2026-11-12: „kicsit zsúfolt”): nagyobb betű és térköz, kétsoros cellák ===== */
body{font-size:14.5px}
.page.active{max-width:1180px;padding-top:14px}
.page.active h2.title{font-size:24px;margin:20px 0 6px}
.titlerow{margin-bottom:14px}.titlerow .row{gap:8px}
.card{padding:20px 22px;margin-bottom:18px}
.card>h3{font-size:15.5px;margin-bottom:14px}
table.grid{font-size:14px}
table.grid th,table.grid td{padding:12px 12px}
table.grid th{font-size:11px}
table.grid td .tag{margin-top:4px}
.sub2{color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.35}
.sub2:empty{display:none}
.faint{color:var(--muted)}
.form{gap:14px 18px}
.form label{font-size:12.5px;gap:5px}
.form label input,.form label select,.form label textarea{font-size:14px;padding:8px 10px}
.toolbar{margin-bottom:16px;gap:10px}
.toolbar input[type=search]{padding:8px 11px;font-size:14px}
.kvl{gap:9px 22px;font-size:14px}
.stat{gap:16px;margin-bottom:18px}.stat .card{padding:18px 20px}
.grid2{gap:18px}
.btn{padding:8px 14px}
.btn.sm{padding:5px 10px;font-size:12.5px}
.row.actions{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);gap:10px}.row.actions .sp{flex:1}
.row.actions label{display:flex;align-items:center;gap:8px;color:var(--muted)}
.kvl{grid-template-columns:minmax(150px,max-content) 1fr}
.row.actions label{white-space:nowrap}
/* a mentés gomb mindig látszik: az űrlap alján, a képernyő aljához tapadva (Ctrl / Cmd + S is ment) */
.savebar{position:sticky;bottom:0;z-index:20;margin:8px -4px 0;padding:12px 4px 14px;gap:10px;
  background:linear-gradient(to top,var(--bg) 70%,color-mix(in srgb,var(--bg) 0%,transparent));}
.savebar::after{content:"Ctrl / ⌘ + S";margin-left:auto;color:var(--muted);font-size:11.5px}
@media print{.savebar{display:none}}
.doc hr.pagebreak{border:0;border-top:2px dashed var(--line);margin:28px -28px}
@media print{.doc hr.pagebreak{border:0;margin:0;break-before:page}}
/* aláírómező (tablet) */
.sigbox{display:grid;gap:8px;margin-top:12px}
canvas.sigpad{width:100%;height:220px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);touch-action:none;cursor:crosshair}
.sigline{border-top:1px dashed var(--muted);margin:-46px 18px 0;padding-top:4px;font-size:11px;color:var(--muted);pointer-events:none;position:relative}
.doc img.alairas{max-width:220px;max-height:90px;display:block;background:#fff}
/* érintőképernyő (tablet): nagyobb vezérlők, 16 px-es mezők (iOS nem nagyít) */
@media (pointer:coarse){
  input,select,textarea,.form label input,.form label select,.form label textarea{font-size:16px!important;min-height:44px}
  input[type=checkbox],input[type=radio]{width:26px;height:26px;min-height:0}
  table.check td{padding:14px 10px}
  .btn{padding:11px 16px;font-size:15px}.btn.sm{padding:8px 12px;font-size:14px}
  #nav button{padding:9px 14px}
  canvas.sigpad{height:260px}
}
.picklist.arculat{margin-top:14px}.picklist.arculat .pick{align-items:center;cursor:default}.picklist.arculat .sp{flex:1}