/* Házöltöztető (F4) — minden szabály #hz alá zárva, a téma stílusaival nem ütközik */

/* Elrendezés: bal oldalt a nagy jelenet (a munkafelület), jobb oldalt keskeny fémes vezérlőoszlop; mobilon egymás alatt. */
#hz{
  --bg:#EEF2F7; --surface:#FFFFFF; --surface-2:#F6F8FB; --ink:#14202B; --muted:#4A5868; --line:#D5DEE8;
  --navy:#0A3D66; --blue:#1F6FB2; --gold:#D4AE3A; --gold-ink:#8A6A1F; --cta-ink:#0A3D66;
  --rail:linear-gradient(180deg,#E9EEF3,#C9D1D9); --steel:linear-gradient(180deg,#2A6CA8,#174E80);
  --frame:linear-gradient(180deg,#CDD2D8,#B9C0C7); --shadow:0 1px 2px rgba(10,30,50,.08),0 8px 24px rgba(10,30,50,.08);
  --f-display:"Oswald","Arial Narrow",Arial,sans-serif; --f-body:"Barlow","Segoe UI",Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){html:not([data-theme="light"]) #hz{
  --bg:#0B1622; --surface:#12222F; --surface-2:#162A3A; --ink:#E6EDF4; --muted:#A3B3C4; --line:#28405A;
  --navy:#8CC0EA; --blue:#5FA2DA; --gold:#D4AE3A; --gold-ink:#E2C060; --cta-ink:#0A3D66;
  --rail:linear-gradient(180deg,#24384B,#162A3A); --frame:linear-gradient(180deg,#3A4D60,#2A3C4E);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); color-scheme:dark }}
html[data-theme="dark"] #hz{
  --bg:#0B1622; --surface:#12222F; --surface-2:#162A3A; --ink:#E6EDF4; --muted:#A3B3C4; --line:#28405A;
  --navy:#8CC0EA; --blue:#5FA2DA; --gold:#D4AE3A; --gold-ink:#E2C060; --cta-ink:#0A3D66;
  --rail:linear-gradient(180deg,#24384B,#162A3A); --frame:linear-gradient(180deg,#3A4D60,#2A3C4E);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); color-scheme:dark }
#hz *,#hz *::before,#hz *::after{box-sizing:border-box}
#hz [hidden]{display:none!important}
#hz{background:var(--bg);color:var(--ink);font:16px/1.5 var(--f-body);margin:0}
#hz .wrap{max-width:1400px;margin:0 auto;padding-inline:clamp(16px,3vw,32px);padding-block:20px 40px}
#hz header.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px;margin-bottom:16px}
#hz .eyebrow{font:600 12px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
#hz h1{font:700 clamp(30px,4vw,44px)/1.05 var(--f-display);color:var(--navy);margin:6px 0 0;letter-spacing:.01em;text-wrap:balance}
#hz .lead{color:var(--muted);max-width:60ch;margin:6px 0 0}
#hz .badge{font:600 12px/1 var(--f-body);color:var(--muted);border:1px dashed var(--line);border-radius:999px;padding:6px 10px}
#hz .layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
#hz .col1{position:sticky;top:calc(var(--wp-admin--admin-bar--height,0px) + var(--tl-header-h,0px) + 12px)}
@media (max-width:980px){#hz .panel{order:2}#hz .actions{order:3}#hz .layout{display:flex;flex-direction:column;align-items:stretch;gap:14px}
#hz .layout>*,#hz .stage,#hz .actions,#hz .panel{min-width:0;max-width:100%}
#hz .col1{display:contents}
#hz .layout .stage{flex:none;position:sticky;top:calc(var(--wp-admin--admin-bar--height,0px) + var(--tl-header-h,0px));z-index:5}
#hz .actions{margin-top:0}}
#hz .stage{position:relative;border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow);padding:6px;background-image:var(--frame)}
#hz .stage-in{position:relative;width:100%;border-radius:9px;overflow:hidden;aspect-ratio:3/2;background:#cfd6dd}
#hz .stage canvas,#hz .stage img{position:absolute;inset:0;width:100%;height:100%;display:block}
#hz #hl{pointer-events:none}
#hz #orig{clip-path:inset(0 100% 0 0);pointer-events:none}
#hz .split{position:absolute;top:0;bottom:0;width:2px;background:var(--gold);box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
#hz .split::after{content:"Előtte | Utána";position:absolute;top:10px;left:50%;transform:translateX(-50%);white-space:nowrap;font:600 12px/1 var(--f-body);background:rgba(10,30,50,.75);color:#fff;padding:5px 8px;border-radius:999px}
#hz .hint{position:absolute;left:10px;bottom:10px;font:500 clamp(11px,1.6vw,13px)/1.2 var(--f-body);background:rgba(10,30,50,.72);color:#fff;padding:7px 10px;border-radius:8px;pointer-events:none;transition:opacity .4s}
#hz .loading{position:absolute;inset:0;display:grid;place-items:center;font:600 15px var(--f-body);color:#fff;background:rgba(10,30,50,.35)}
#hz .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;align-items:center}
#hz .btn{font:600 15px/1 var(--f-body);border:0;border-radius:10px;padding:12px 16px;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
#hz .btn:focus-visible,#hz .chip:focus-visible,#hz .sw:focus-visible,#hz .prof:focus-visible,#hz .surf:focus-visible,#hz .tab:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#hz .btn-gold{background:linear-gradient(180deg,#F1D77A,#D4AE3A 55%,#B8922E);color:var(--cta-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.2)}
#hz .btn-steel{background:var(--steel);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
#hz .btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
#hz .btn[aria-pressed="true"]{outline:2px solid var(--gold)}
#hz .split-ctl{display:flex;align-items:center;gap:10px;flex:1 1 220px;min-width:0}
#hz .split-ctl input{flex:1;min-width:0;accent-color:var(--gold)}
#hz .panel{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden}
#hz .panel h2{font:500 13px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
#hz .sec{padding:16px;border-top:1px solid var(--line)}
#hz .sec:first-child{border-top:0}
#hz .scenes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#hz .scene{display:flex;flex-direction:column;gap:6px;padding:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;cursor:pointer;color:var(--ink);font:600 13.5px/1.2 var(--f-body);text-align:left;min-width:0}
/* v42: a sor elejen allo szo szerinti '\\n' miatt ez a szabaly eddig nem ervenyesult -> a 'Szendvicspanel-csarnok' kilogott */
#hz .scene span{min-width:0;overflow-wrap:anywhere;hyphens:auto}
#hz .scene img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:6px;display:block}
#hz .scene[aria-pressed="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
#hz .scene:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#hz .surfs{display:flex;flex-direction:column;gap:6px}
@media (max-width:980px){#hz .surfs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
#hz .surf{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer;color:var(--ink);font:500 15px/1.2 var(--f-body);min-height:48px}

#hz .surf small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
#hz .surf[aria-pressed="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);background:var(--surface)}
#hz .dot{width:26px;height:26px;border-radius:6px;flex:none;border:1px solid rgba(0,0,0,.18);background-size:cover}
#hz .profs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
#hz .prof{display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer;color:var(--ink);font:600 14px/1.15 var(--f-body);text-align:left;min-height:44px}
#hz .prof svg{width:100%;height:18px;display:block}
#hz .prof svg path{fill:none;stroke:var(--blue);stroke-width:1.6}
#hz .prof[aria-pressed="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
#hz .prof[aria-pressed="true"] svg path{stroke:var(--gold-ink)}
#hz .ptabs{display:grid;grid-template-columns:repeat(var(--nt,4),minmax(0,1fr));background:var(--rail);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2}
#hz .ptab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:8px 4px;border:0;border-bottom:3px solid transparent;background:transparent;cursor:pointer;color:var(--muted);font:600 14px/1.1 var(--f-body);min-width:0}
#hz .ptab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hz .ptab small{font:500 11.5px/1.1 var(--f-body);color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hz .ptab b{font:inherit}#hz .ptab .sh{display:none}
@media (max-width:360px){#hz .ptab .lg{display:none}#hz .ptab .sh{display:inline}#hz .ptab{font-size:13px;padding-inline:2px}#hz .ptab small{font-size:11px}}
#hz .ptab[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--gold);background:var(--surface)}
#hz .ptab:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
#hz .panel .pane{display:none;border-top:0}
#hz .panel .pane.on{display:block}
#hz .tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
#hz .tab{font:600 13px/1 var(--f-body);background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 11px;cursor:pointer;min-height:34px}
#hz .tab[aria-selected="true"]{background:var(--navy);color:var(--surface);border-color:var(--navy)}
#hz .sws{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px 8px}
#hz .sw{background:none;border:0;padding:0;cursor:pointer;color:var(--ink);text-align:center;font:500 11.5px/1.15 var(--f-body)}
#hz .sw i{display:block;height:38px;border-radius:6px;border:1px solid rgba(0,0,0,.2);margin-bottom:4px;background-size:cover;position:relative;overflow:hidden}
#hz .sw i::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 3px,rgba(0,0,0,0) 3px 7px,rgba(0,0,0,.16) 7px 9px,rgba(0,0,0,0) 9px 14px)}
#hz .sw.flat i::after{display:none}
#hz .sw[aria-pressed="true"] i{outline:3px solid var(--gold);outline-offset:2px}
#hz .sw b{display:block;font-weight:600;font-variant-numeric:tabular-nums}
#hz .sw span{display:block;font-size:10.5px;color:var(--muted);overflow-wrap:anywhere;hyphens:auto}
#hz .note{font-size:13px;color:var(--muted);margin:10px 0 0}
#hz .sum{margin-top:20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
@media (max-width:820px){#hz .sum{grid-template-columns:minmax(0,1fr)}}
#hz .card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
#hz .card h3{font:700 20px/1.2 var(--f-display);color:var(--navy);margin:0 0 10px;letter-spacing:.01em}
#hz .card dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 14px;margin:0}
#hz .card dt{color:var(--muted)}
#hz .card dd{margin:0;font-weight:600}
#hz .card dd a{color:var(--blue)}
@media (max-width:520px){#hz .card dl{grid-template-columns:minmax(0,1fr);gap:2px}
#hz .card dd{margin-bottom:8px}}
#hz .card ul{margin:0;padding-left:18px;color:var(--muted)}
#hz .card li{margin:4px 0}
#hz .modal{position:fixed;inset:0;background:rgba(5,15,25,.72);display:grid;place-items:center;padding:16px;z-index:10}
#hz .modal-in{background:var(--surface);border-radius:14px;max-width:min(1100px,100%);max-height:100%;overflow:auto;padding:14px}
#hz .modal-in img{width:100%;height:auto;border-radius:8px;display:block}
#hz .modal-in p{margin:10px 0;color:var(--muted)}
#hz .toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--navy);color:var(--surface);padding:10px 14px;border-radius:10px;font-weight:600;z-index:11}
@media (prefers-reduced-motion:reduce){#hz *{transition:none!important}}

/* v41 (2026-10-11): mobilon a 4 ful (Felulet / Lemez / Szin / Epulet) is ragados, kozvetlenul a kep alatt.
   - A panel overflow:hidden gorgetesi kontenert csinal, abban a sticky nem a lapgorgeteshez tapad;
     az overflow:clip ugyanugy levagja a sarkokat, de nem kontener. Regi Safari (clip nelkul): marad
     a hidden, a fulsor nem ragad, mas nem romlik.
   - --hz-stage-h: a kep magassaga, a hazoltozteto.js vegen levo ResizeObserver irja.
   - min-height:600px: fekvo telefonon a fejlec + kep + fulsor nagyobb lenne a kepernyonel. */
@media (max-width:980px) and (min-height:600px){
  #hz .panel{overflow:hidden;overflow:clip}
  #hz .ptabs{top:calc(var(--wp-admin--admin-bar--height,0px) + var(--tl-header-h,0px) + var(--hz-stage-h,0px));z-index:4}
}