/* Szárnyaskapu tervező – stílusok. Szigorú CSP: nincs inline stílus; minden itt.
   Elrendezés: fejléc + fülek; a Tervező fül mérnöki munkapult (bal oldalt paraméterek, jobbra eredménysáv + nézetek). */
@font-face{font-family:"DejaVuSans";src:url(fonts/DejaVuSans-sub.ttf) format("truetype");font-weight:400}
@font-face{font-family:"DejaVuSans";src:url(fonts/DejaVuSans-Bold-sub.ttf) format("truetype");font-weight:700}
/* Layout: egy képernyős munkapult görgetés nélkül – bal oldalt lépésenkénti beállítás, középen a nézetek (felülnézet / 3D / diagramok /
   villamos terv / dokumentáció) és a szögcsúszka, jobbra az eredmény és a hibák–javaslatok. Csak a panelek görgetnek önállóan. */
: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}
.app{display:grid;grid-template-columns:clamp(300px,24vw,370px) minmax(0,1fr) clamp(280px,22vw,360px);gap:8px;flex:1 1 auto;min-height:0;padding:8px max(8px,env(safe-area-inset-right,0px)) 8px max(8px,env(safe-area-inset-left,0px))}
aside{background:var(--panel);border:1px solid var(--line);border-radius:6px;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
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}
/* bal oszlop: lépések – egyszerre egy csoport, a lista a panelen belül görget */
.cfghead{padding:8px 10px;border-bottom:1px solid var(--line);display:grid;gap:8px}
.steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:4px}
.step{display:flex;align-items:center;gap:5px;padding:4px 6px;font-size:12px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step[aria-selected="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.step .stepno{flex:none;width:17px;height:17px;font-size:10px}
.cfgtools{display:flex;gap:8px;align-items:center}.cfgtools select{flex:1;font:12.5px var(--f-sans)}
.cfgbody{flex:1 1 auto;min-height:0;overflow:auto;padding:4px 0 10px}
.cfgfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-top:1px solid var(--line)}
.mini.primary{background:var(--accent);border-color:var(--accent);color:#fff}.mini:disabled{opacity:.4;cursor:default}
.grp .gh{display:flex;align-items:center;gap:8px;margin:0;padding:10px 14px 6px;font:600 13px var(--f-sans);color:var(--ink)}
.fields{display:grid;gap:8px;padding:0 14px 12px}
.fld{display:grid;grid-template-columns:1fr 128px;gap:4px 8px;align-items:center;font-size:12.5px}
.fld .lb{min-width:0}
.fld .hint{grid-column:1/-1;color:var(--muted);font-size:11px;margin-top:-3px}
.fld .hint:empty{display:none}
.fld.warn .hint{color:var(--bad);font-weight:600}
.fld.warn input{border-color:var(--bad)}
.num{display:flex;align-items:center;gap:4px}.num i{font:normal 11px var(--f-mono);color:var(--muted);width:20px}
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}
input[type=text]{font-size:11.5px}
.fld:has(input[type=text]){grid-template-columns:1fr}
.optbox{display:grid;gap:8px}
table.opt{width:100%;border-collapse:collapse;font:12px var(--f-mono);font-variant-numeric:tabular-nums}
table.opt th,table.opt td{padding:3px 4px;border-bottom:1px solid var(--line);text-align:right}
.muted{color:var(--muted);font-size:12px}
.gloss{padding:10px 14px 16px;font-size:12px;line-height:1.5;color:var(--muted)}
.gloss b{color:var(--ink)}
/* jobb oszlop: eredmény + hibák / javaslatok (mindig látszik) */
#res .summary{display:grid;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.vrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.vrow .muted{font-size:11.5px}
.kvg{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.reshead{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 12px 4px;font-size:12.5px}
.resbody{flex:1 1 auto;min-height:0;overflow:auto;padding:4px 12px 12px}
.kv{min-width:0}.kv span{display:block;font-size:10.5px;color:var(--muted);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kv b{font:500 13.5px var(--f-mono);font-variant-numeric:tabular-nums}
.why{font-size:11.5px;color:var(--muted);line-height:1.35}.why b{color:var(--ink);font-weight:600}
#issues{display:grid;gap:8px;align-content:start}
.isg{display:grid;gap:5px}.ish{font:600 11.5px var(--f-sans);letter-spacing:.05em;text-transform:uppercase}
.isg.error .ish{color:var(--bad)}.isg.warn .ish{color:var(--warn)}.isg.info .ish{color:#4f6d8f}.isg.ignored .ish{color:var(--muted)}
.iss{border-left:3px solid var(--line);padding:4px 8px;background:var(--sunk);border-radius:0 4px 4px 0;font-size:12.5px;display:grid;gap:4px}
.iss.error{border-color:var(--bad)}.iss.warn{border-color:var(--warn)}.iss.info{border-color:#4f6d8f}.iss.ign{opacity:.65;border-style:dashed}
.isb{display:flex;flex-wrap:wrap;gap:5px}.isb .fix{border-color:var(--ok);color:var(--ink)}.isb .fix.weak{border-color:var(--line);color:var(--muted)}.isb .ovr{margin-left:auto}
.pill{display:inline-block;font:600 11.5px var(--f-sans);letter-spacing:.04em;padding:4px 9px;border-radius:999px;color:#fff;white-space:nowrap}
.pill.ok{background:var(--ok)}.pill.bad{background:var(--bad)}.pill.warn{background:var(--warn)}.pill.info{background:#4f6d8f}
/* a csúszka sora rögzített rács: a szög, az állapot és a gomb állandó szélességű, az értékek külön sorban, rögzített mezőszélességgel –
   mozgatáskor semmi nem tolja el a csúszkát */
.ctrl{display:grid;grid-template-columns:auto minmax(160px,1fr) auto auto;gap:4px 14px;align-items:center;border-top:1px solid var(--line);padding:6px 10px}
.ctrl .big{font:500 19px var(--f-mono);width:7ch;text-align:right;font-variant-numeric:tabular-nums}
#angState{width:250px;overflow:hidden;text-overflow:ellipsis;text-align:center}
#play{width:11em;white-space:nowrap}
.slider{position:relative;min-width:0}
.slider input{width:100%;accent-color:var(--accent)}
#okMark,#geoMark{position:absolute;top:-6px;width:2px;height:28px;background:var(--ok);pointer-events:none}#geoMark{background:var(--bad)}
#track{position:absolute;left:0;right:0;top:50%;height:5px;margin-top:-1px;border-radius:3px;opacity:.55;pointer-events:none}
.angwhy{grid-column:1/-1;margin:0;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}.dot.ok{background:#4f6d8f}.dot.bad{background:var(--bad)}
table.opt td.nf{color:var(--warn);font-weight:600}
.rd{grid-column:1/-1;display:flex;gap:4px 14px;font-size:12px;color:var(--muted);flex-wrap:wrap}.rd b{display:inline-block;min-width:7ch;font:500 12.5px var(--f-mono);color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:760px){.ctrl{grid-template-columns:auto minmax(120px,1fr)}#angState,#play{grid-column:span 1}}
.stage{background:var(--panel);border:1px solid var(--line);border-radius:6px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;min-width:0;overflow:hidden}
.panes{position:relative;min-height:0}
.tabs{display:flex;gap:5px;flex-wrap:wrap;padding:6px 8px;border-bottom:1px solid var(--line);align-items:center}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.tabs .sp{flex:1}
.tabs label{font-size:12px;color:var(--muted);display:flex;gap:4px;align-items:center}
.pane{position:absolute;inset:0;overflow:hidden}.pane.scroll{overflow:auto}
#plan{display:block;width:100%;height:100%;cursor:grab;touch-action:none;background:var(--scene)}
#tabPlan.split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
#yard{display:block;width:100%;height:100%;background:#fff}#yard[hidden]{display:none}
@media (max-aspect-ratio:1/1){#tabPlan.split{grid-template-columns:1fr;grid-template-rows:1fr 1fr}}
#cv3d{display:block;width:100%;height:100%}
#v3dmsg{position:absolute;inset:auto 12px 12px;color:var(--muted)}
#charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:10px;padding:10px;justify-content:center}
.chart{width:100%;height:auto;background:var(--sunk);border-radius:4px}
.chart .ct{font:600 12px var(--f-sans);fill:var(--ink)}.chart .tk{font:10px var(--f-mono);fill:var(--muted)}
.chart .gr{stroke:var(--line);stroke-width:1}.chart .ok{fill:none;stroke:var(--ok);stroke-width:2}.chart .soft{fill:none;stroke:#4f6d8f;stroke-width:2;stroke-dasharray:6 3}.chart .hard{fill:none;stroke:var(--bad);stroke-width:2;stroke-dasharray:2 3}.chart .mkb{stroke:var(--bad);stroke-dasharray:3 3}
.chart .lim{stroke:var(--bad);stroke-dasharray:4 3}.chart .limt{font:10px var(--f-sans);fill:var(--bad)}.chart .mk{stroke:var(--ok);stroke-dasharray:3 3}.chart .dot{fill:var(--ink)}
.docbar{display:flex;gap:8px;flex-wrap:wrap;padding:10px;align-items:center;border-bottom:1px solid var(--line)}
#sheets{display:grid;gap:16px;padding:12px}
.sheet{margin:0}.sheet figcaption{font:600 12.5px var(--f-sans);margin-bottom:6px}
.paper{background:#fff;border:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.08);overflow:auto}
.paper svg{display:block;width:100%;height:auto;min-width:640px}
#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}
@media (max-width:1180px){.app{grid-template-columns:clamp(290px,32vw,360px) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,38vh)}#cfg{grid-row:1/3}#res{grid-column:2}}
@media (max-width:820px){body{height:auto;min-height:100vh;overflow:visible}.app{display:flex;flex-direction:column;height:auto}#cfg .cfgbody{max-height:70vh}.stage{height:80vh}#res .resbody{max-height:60vh}}
@media (prefers-reduced-motion:reduce){#play{display:none}}
.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}
/* projekt-sáv */
#projbar{display:flex;align-items:center;gap:6px;min-width:0;position:relative}
.pstate{font-size:12px;color:var(--muted);max-width:28vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.projdd>summary{list-style:none;cursor:pointer}.projdd>summary::-webkit-details-marker{display:none}
.projdd[open]>.projcard{position:absolute;z-index:40;top:calc(100% + 6px);left:0;width:min(560px,90vw);display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.projcard input,.projcard select{width:100%;font:13px var(--f-sans)}
.projcard input.grow,.projcard .row{grid-column:1/-1}
.projcard .meta{font-size:11.5px;color:var(--muted)}
.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}
#elec{padding:10px}.elg{display:grid;gap:10px}

/* lépésenkénti beállítás, súgó, haladó mezők */
.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}
.gdesc{grid-column:1/-1;margin:0 0 4px;font-size:12px;color:var(--muted);line-height:1.45}
.fld .lb{display:flex;gap:4px;align-items:center}
.info{border:none;background:none;color:var(--accent);font-size:13px;line-height:1;padding:0 2px;cursor:pointer}
.tip-pop{position:absolute;z-index:50;background:var(--ink);color:var(--panel);font:12.5px/1.45 var(--f-sans);padding:8px 10px;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.advtgl{display:flex;gap:6px;align-items:center;padding:8px 14px 0;font-size:12.5px;color:var(--muted)}
/* hibák, javaslatok fül */
.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)}
.isssum{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.isssum:empty{display:none}
.ic{font:600 12px var(--f-sans);padding:2px 9px;border-radius:999px;border:1px solid var(--line)}
.ic.err{color:var(--bad);border-color:var(--bad)}.ic.wrn{color:var(--warn);border-color:var(--warn)}.ic.inf{color:#4f6d8f;border-color:#4f6d8f}.ic.ign{color:var(--muted)}

/* 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}
/* bélyegképek a beállítópanelen (kattintásra nagyítva) */
.fld .thumb{grid-column:1/-1;justify-self:start;width:132px;height:88px;padding:0;border:1px solid var(--line);border-radius:4px;background:#fff;cursor:zoom-in;overflow:hidden}
.fld .thumb svg{display:block;width:100%;height:100%}
.tmodal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.tmodal .tbox{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px;width:min(1100px,96vw);display:grid;gap:8px;position:relative}
.tmodal .tsvg svg{display:block;width:100%;height:auto;background:#fff;border-radius:4px}.tmodal .tcap{margin:0 32px 0 0;font-weight:600}
.tmodal .tclose{position:absolute;top:8px;right:8px}
/* a főablak felosztása (1–4 panel, mindegyikben választható nézet) */
.tabs .lay{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}.tabs .lay select{width:auto;font:12px var(--f-sans)}
.stage.multiOn .pane{display:none!important}.stage.multiOn .tabs [role=tab]{display:none}
.multi{position:absolute;inset:0;display:grid;gap:4px;padding:4px;background:var(--line)}
.multi.L2v{grid-template-columns:1fr 1fr}.multi.L2h{grid-template-rows:1fr 1fr}
.multi.L3{grid-template-columns:3fr 2fr;grid-template-rows:1fr 1fr}.multi.L3 .cell:first-child{grid-row:1/3}
.multi.L4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.cell{background:var(--panel);display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;border-radius:4px;overflow:hidden}
.cell>select{margin:4px;width:auto;max-width:calc(100% - 8px);font:12px var(--f-sans)}
.cellBody{position:relative;min-height:0;min-width:0;overflow:auto}
.cellBody>svg,.cellBody>canvas{display:block;width:100%;height:100%}
.cellBody[data-kind="yard"]>svg{background:#fff}
.cellBody[data-kind^="chart:"]>svg{width:100%;height:100%}
.cellBody .cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:6px;padding:6px}
.cellBody .paper svg{min-width:0;width:100%;height:auto;background:#fff}
.cellBody[data-kind^="sheet:"] .paper,.cellBody[data-kind^="sheet:"] .paper svg{height:100%}
.cellBody .sheet{margin:6px}.cellBody[data-kind="dup"]{padding:12px;color:var(--muted)}
.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}
/* lépések, nézetfülek: szegmentált vezérlő */
.step{background:var(--sunk);border-color:transparent;font-weight:600;color:var(--muted)}
.step:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,var(--sunk))}
.step[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 14%,var(--panel));color:var(--ink);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.stepno{background:linear-gradient(135deg,var(--accent2),var(--accent))!important;color:#fff!important}
.tabs{gap:6px;padding:8px 10px}
.tabs button{border-color:transparent;background:transparent;color:var(--muted);font-weight:600}
.tabs button:hover{background:var(--sunk);color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--sunk);color:var(--ink);border-color:var(--line);box-shadow:inset 0 -2px 0 var(--accent)}
/* 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}
.ctrl{background:color-mix(in srgb,var(--sunk) 70%,var(--panel))}
.multi{background:var(--bg);gap:6px;padding:6px}.cell{border-radius:10px;box-shadow:var(--sh)}
.tmodal{backdrop-filter:blur(4px)}.tmodal .tbox{border-radius:16px;box-shadow:var(--sh-lg)}
/* 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 egy sorban: a verzió röviden (a teljes a címkében), a projekt állapota rövidül; szűkebb ablakban csak a logó, ~1240 px alatt két sor */
header{flex-wrap:nowrap;gap:10px}header h1{flex:none}
nav{flex:none;min-width:0;overflow-x:auto;scrollbar-width:none}nav::-webkit-scrollbar{display:none}nav button{white-space:nowrap;padding:6px 9px}
#projbar{flex:0 1 auto}#projbar>*{flex:none}#projbar .btn,#projbar summary{white-space:nowrap}.pstate{flex:0 1 auto!important;min-width:0;max-width:170px}
.hright{flex:none;flex-wrap:nowrap;gap:8px}#who{max-width:180px;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}
@media (max-width:1700px){.verbadge{display:none}}
@media (max-width:1380px){header h1{font-size:0;gap:0}}
@media (max-width:1240px){header{flex-wrap:wrap}.hright{flex-wrap:wrap}}
@media (max-width:700px){header h1{font-size:15px;gap:10px;flex:1 1 auto}nav{flex:1 1 100%;order:5;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}}
/* 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)}
/* szögcsúszka: a #track színsávja maga a pálya, fölötte kerek fogantyú */
.slider input[type=range]{-webkit-appearance:none;appearance:none;display:block;height:22px;margin:0;background:transparent;position:relative;z-index:1;cursor:pointer}
.slider input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:transparent}
.slider input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:transparent}
.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 6px rgba(15,23,42,.35)}
.slider input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 6px rgba(15,23,42,.35)}
.slider input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--ring)}
#track{height:6px;margin-top:-3px;border-radius:999px;opacity:.75}
#okMark,#geoMark{top:-3px;height:28px;border-radius:2px}
/* eredménysáv: a hosszú ítélet törik, nem tolja ki a panelt */
.vrow .pill{white-space:normal;max-width:100%;line-height:1.3}.kvg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pill.info{color:#fff;font:600 11.5px var(--f-sans);padding:4px 9px;cursor:default}   /* a ⓘ gomb (.info) stílusa ne írja felül */
.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 */
/* motorjavaslat ablak */
.tmodal .tbox.rec{width:min(1320px,96vw);max-height:92vh;overflow:auto;align-content:start}
.tmodal .recf{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}.tmodal .recf select{margin-left:6px}
table.grid.rec td{vertical-align:top}table.grid.rec td .nf{color:var(--warn);font-size:12px}table.grid.rec td .muted{font-size:12px}
/* gyári képes bélyegkép (fehér alapon, arányosan) és a nagyított nézet fotója */
.fld .thumb.photo{background:#fff;display:grid;place-items:center}.fld .thumb.photo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.tmodal .tsvg .tphoto{display:block;max-width:100%;max-height:42vh;margin:0 auto 10px;object-fit:contain;background:#fff;border-radius:8px}
.tmodal .tbox{max-height:94vh;overflow:auto}.tmodal .tsvg svg{max-height:56vh;width:auto;max-width:100%;margin:0 auto}