/* ============================================================
   DANUSA árajánlat — 2. lépés: vizuális tervező (iframe nélkül, beágyazva)
   A wizard arculatához hangolva (app.css :root változói). Minden a .dsg alá
   scope-olva, hogy ne ütközzön az app.css-szel (pl. a .sw színkorong-gombbal).
   Rajz-központú: a vezérlők LÁTHATÓAN a rajzhoz kapcsolódnak.
   ============================================================ */
.dsg{color:var(--text)}
.dsg .lab{font-size:10.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.dsg .dsg-hidden{display:none!important}

/* ===== több nyílászáró: tétel-lista (összecsukott képes sorok) + szerkesztő ===== */
.dsg .dsg-items{display:flex;flex-direction:column;gap:12px}
.dsg .dsg-item.expanded{position:relative}
.dsg .dsg-item-row{display:flex;align-items:center;gap:14px;background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:10px 14px;transition:.13s}
.dsg .dsg-item-row:hover{border-color:var(--green);box-shadow:var(--shadow-sm)}
.dsg .dsg-thumb{flex:none;width:76px;height:58px;display:flex;align-items:center;justify-content:center;background:var(--rail-bg);border:1px solid var(--border);border-radius:8px;overflow:hidden;color:var(--muted)}
.dsg .dsg-thumb svg{height:48px!important;width:auto!important;max-width:70px!important;max-height:52px!important;filter:none}
.dsg .dsg-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dsg .dsg-item-info b{font-size:13.5px;font-weight:800;color:var(--navy)}
.dsg .dsg-item-info span{font-size:12px;color:var(--muted)}
.dsg .dsg-item-edit{flex:none;border:1.5px solid var(--border);background:var(--card);color:var(--navy);border-radius:8px;padding:8px 14px;font-size:12.5px;font-weight:700;cursor:pointer;transition:.12s}
.dsg .dsg-item-edit:hover{border-color:var(--navy);background:var(--green-soft)}
.dsg .dsg-item-del{flex:none;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--border);background:var(--card);color:var(--muted);border-radius:8px;cursor:pointer;transition:.12s}
.dsg .dsg-item-del:hover{border-color:#c0392b;color:#c0392b}
.dsg .dsg-item-del svg{width:16px;height:16px}
/* „Másik nyílászáró hozzáadása" sáv */
.dsg .dsg-add-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;flex-wrap:wrap}
.dsg .dsg-add{display:inline-flex;align-items:center;gap:9px;border:1.6px dashed var(--green);background:var(--green-soft);color:var(--navy);border-radius:12px;padding:12px 18px;font-weight:800;font-size:14px;cursor:pointer;transition:.14s}
.dsg .dsg-add:hover{background:var(--card);border-color:var(--navy)}
.dsg .dsg-add svg{width:18px;height:18px}
.dsg .dsg-count{font-size:13px;font-weight:800;color:var(--navy);background:var(--green-soft);padding:6px 14px;border-radius:999px;white-space:nowrap}

/* 2. lépésben a tervező TELJES SZÉLESSÉGET kap: a jobb oldali „Az Ön ajánlata" sáv
   elrejtve, a rács egyoszlopos (az app.js a .wz-body-ra teszi az .is-designer-t). */
.wz-body.is-designer{grid-template-columns:1fr}
.wz-body.is-designer .rail{display:none}

/* --- alapok sor (teljes szélesség, tágas) --- */
.dsg .ess{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 24px;padding:0 0 18px;border-bottom:1px solid var(--border);margin-bottom:18px}
.dsg .ess-grp{display:flex;flex-direction:column;gap:8px}
.dsg .seg{display:inline-flex;border:1.5px solid var(--border);border-radius:10px;overflow:hidden}
.dsg .seg button{border:0;background:var(--card);padding:10px 15px;font-size:13.5px;font-weight:700;color:var(--muted);min-width:44px;white-space:nowrap;cursor:pointer}
.dsg .seg button:hover{color:var(--text)}
.dsg .seg button.on{background:var(--navy);color:#fff}
/* színkorongok — az app.css .sw pill-stílusát felül kell írni (reset) */
.dsg .sw{display:flex;gap:9px;flex-wrap:wrap;align-items:center;border:0;background:none;padding:0;border-radius:0;box-shadow:none}
.dsg .swb{width:32px;height:32px;border-radius:50%;border:2px solid var(--border);cursor:pointer;padding:0}
.dsg .swb.on{border-color:var(--navy);box-shadow:0 0 0 3px var(--green-soft)}
/* alap 4 szín látszik, a többi (.extra) a „+ N szín" gombra nyílik ki */
.dsg .sw .swb.extra{display:none}
.dsg .sw.open .swb.extra{display:block}
.dsg .sw-more{border:1.5px dashed var(--border);background:transparent;color:var(--muted);border-radius:999px;padding:7px 12px;font-size:11px;font-weight:800;letter-spacing:.2px;cursor:pointer;white-space:nowrap;line-height:1}
.dsg .sw-more:hover{border-color:var(--green);color:var(--navy)}
/* Belső/Külső oldal — animált kapcsoló (mutatja, épp minek a színét választod) */
.dsg .side-toggle{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;background:var(--bg);border:1.5px solid var(--border);border-radius:999px;padding:3px;margin:0 0 10px;width:max-content}
.dsg .side-toggle button{position:relative;z-index:1;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:800;padding:7px 16px;border-radius:999px;cursor:pointer;transition:color .2s;white-space:nowrap}
.dsg .side-toggle button.on{color:#fff}
.dsg .side-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);background:var(--navy);border-radius:999px;transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:0}
.dsg .side-toggle.is-out .side-thumb{transform:translateX(100%)}

/* Kilincs: típus-kapcsoló + KILINCS-IKONOS színválasztó (nem téveszthető össze az ablak színével) */
.dsg .kilincs{display:flex;flex-direction:column;gap:9px;transition:opacity .15s}
.dsg .kilincs.dim{opacity:.45}
.dsg .seg.h-type button{padding:8px 13px;font-size:12.5px;min-width:0}
.dsg .h-colors{display:flex;gap:8px;flex-wrap:wrap}
.dsg .hbtn{width:36px;height:36px;border-radius:9px;border:1.5px solid var(--border);background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:.12s}
.dsg .hbtn:hover{border-color:var(--green)}
.dsg .hbtn.on{border-color:var(--navy);box-shadow:0 0 0 3px var(--green-soft)}
.dsg .hbtn svg{width:20px;height:20px;display:block}
.dsg .h-hint{font-size:11px;color:var(--muted)}
/* dinamikus felirat a nyílászáró-színnél: „A KÜLSŐ / BELSŐ oldal színe" */
.dsg .side-cap{font-size:11.5px;font-weight:800;color:var(--navy);letter-spacing:.2px;margin:2px 0 2px}

/* C — rámutatós kiemelés: a rajzon a keret ill. a kilincs kigyullad */
.dsg .draw.hl-frame .dsg-frame{filter:drop-shadow(0 0 3px var(--green)) drop-shadow(0 0 4px var(--green))}
.dsg .draw.hl-handle .dsg-handle{filter:drop-shadow(0 0 3px var(--green)) drop-shadow(0 0 5px var(--green))}
.dsg .size{display:flex;gap:8px}
.dsg .size input{width:96px;padding:10px;border:1.5px solid var(--border);border-radius:9px;font-size:14px;font-family:inherit;color:var(--text);font-weight:700;text-align:center}
.dsg .size input:focus{outline:0;border-color:var(--green)}
.dsg .reset{margin-left:auto;align-self:flex-end;border:1.5px solid var(--border);background:var(--card);border-radius:9px;padding:10px 15px;font-size:12.5px;font-weight:700;color:var(--muted);transition:.12s;cursor:pointer}
.dsg .reset:hover{border-color:#c0392b;color:#c0392b}

/* --- vászon (hero) --- */
.dsg .canvas{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.dsg .draw{position:relative;display:flex;align-items:center;justify-content:center;min-height:360px;max-height:62vh;padding:26px;background:radial-gradient(120% 120% at 50% 0%,#fbfdfc,#eef3f5);background-image:radial-gradient(circle,rgba(46,90,60,.06) 1px,transparent 1.4px);background-size:22px 22px}
.dsg .draw-svg{width:100%;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 12px 26px rgba(18,44,70,.14))}
/* MAGASSÁG-alapú méretezés: az azonos magasságú ablakok azonos képernyő-magasságúak,
   több szárny = szélesebb rajz (nem kisebb) — egységes szárny- és vonalméret */
.dsg .draw svg{height:clamp(300px,42vh,420px)!important;width:auto!important;max-width:100%!important;max-height:none!important}
.dsg .dim{position:absolute;right:12px;bottom:12px;background:var(--navy);color:#fff;font-size:12px;font-weight:800;letter-spacing:.3px;padding:6px 12px;border-radius:999px;box-shadow:var(--shadow-sm);font-variant-numeric:tabular-nums;pointer-events:none}
.dsg .live{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);border:1px solid var(--border);color:var(--navy);font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:4px 9px;border-radius:999px;pointer-events:none}
.dsg .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(74,140,88,.25)}
.dsg .stage-tip{font-size:12px;color:var(--muted);margin:12px 2px 0;line-height:1.5;display:flex;align-items:center;gap:7px}
.dsg .stage-tip::before{content:"↕";display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--green-soft);color:var(--navy);font-weight:800;font-size:11px;flex:none}
/* segéd-chip a vásznon (egyedi név, hogy ne ütközzön a .vsz .hint-tel) */
.dsg .dsg-cue{position:absolute;top:12px;left:50%;transform:translateX(-50%);max-width:calc(100% - 40px);text-align:center;background:var(--navy);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.2px;padding:5px 13px;border-radius:999px;box-shadow:var(--shadow-sm);pointer-events:none;z-index:4}
.dsg .dsg-cue[hidden]{display:none}

/* finomhangoló eszköz-sáv a rajz FELETT (önálló kártya) */
.dsg .tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:var(--card);margin-bottom:12px}
.dsg .tools .tl-h{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-right:4px}
.dsg .tools button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--card);border-radius:8px;padding:6px 11px;font-size:12px;font-weight:700;color:var(--text);transition:.12s;cursor:pointer}
.dsg .tools button:hover{border-color:var(--green);color:var(--navy)}
.dsg .tools button .ic{font-size:14px;line-height:1;color:var(--muted)}
.dsg .tools button.on{border-color:var(--navy);background:var(--navy);color:#fff}
.dsg .tools button.on .ic{color:#fff}
/* elválasztó + Felülvilágító be/ki kapcsoló a Finomhangolás sorban */
.dsg .tools .tl-div{width:1px;height:22px;background:var(--border);margin:0 3px}
.dsg .tools .tl-toggle{border-color:var(--gold)}
.dsg .tools .tl-toggle.on{background:var(--gold);border-color:var(--gold);color:#fff}
.dsg .tools .tl-toggle.on .ic{color:#fff}

/* Toktoldó — kerettoldás (4 oldal, mm) a szárny-vezérlők közt */
.dsg .tok-box{margin-top:14px;padding-top:12px;border-top:1px solid var(--line,#eef2f5)}
.dsg .tok-h{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--navy);margin:0 0 10px}
.dsg .tok-h .tok-sub{font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}
.dsg .tok-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:520px){.dsg .tok-grid{grid-template-columns:repeat(2,1fr)}}
.dsg .tok-f{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--muted)}
.dsg .tok-f input{padding:9px 10px;border:1.5px solid var(--border);border-radius:9px;font-size:14px;font-family:inherit;color:var(--text);font-weight:700;text-align:center;background:var(--card)}
.dsg .tok-f input:focus{outline:0;border-color:var(--green)}

/* Üveg osztás (függőleges) */
.dsg .uo-box{margin-top:14px;padding-top:12px;border-top:1px solid var(--line,#eef2f5)}
.dsg .uo-h{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--navy);margin:0 0 10px}
.dsg .uo-seg{display:inline-flex}
.dsg .uo-seg button{padding:7px 12px;font-size:12.5px}
.dsg .uo-row{display:flex;align-items:center;gap:12px;margin-bottom:9px;flex-wrap:wrap}
.dsg .uo-rl{font-size:12.5px;font-weight:800;color:var(--navy);min-width:70px;display:inline-flex;align-items:center;gap:6px}
.dsg .uo-target{display:flex;align-items:center;gap:9px;margin-top:10px;flex-wrap:wrap}
.dsg .uo-tl{font-size:12px;font-weight:700;color:var(--muted)}
.dsg .uo-target select{padding:8px 10px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;color:var(--text);background:var(--card);font-weight:600}
.dsg .uo-target select:focus{outline:0;border-color:var(--green)}

/* Extrák — jelölőnégyzetek (ajánlathoz) */
.dsg .ex-box{margin-top:14px;padding-top:12px;border-top:1px solid var(--line,#eef2f5)}
.dsg .ex-h{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--navy);margin:0 0 10px}
.dsg .ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.dsg .ex-item{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--text);background:var(--card);border:1.5px solid var(--border);border-radius:9px;padding:9px 12px;cursor:pointer;transition:.12s}
.dsg .ex-item:hover{border-color:var(--green)}
.dsg .ex-item.on{border-color:var(--navy);background:var(--green-soft)}
.dsg .ex-item input{width:17px;height:17px;accent-color:var(--navy);flex:none}

/* --- kiemelő réteg a rajzon --- */
.dsg .ovl{position:absolute;inset:0;pointer-events:none}
.dsg .ovl-sash{position:absolute;pointer-events:auto;cursor:pointer;border-radius:5px;transition:background .13s,box-shadow .13s}
.dsg .ovl-sash:hover{background:rgba(74,140,88,.07)}
.dsg .ovl-sash.hov{background:rgba(74,140,88,.13);box-shadow:inset 0 0 0 2px var(--green)}
.dsg .ovl-sash.sel{background:rgba(46,90,60,.14);box-shadow:inset 0 0 0 2.5px var(--navy)}
.dsg .ovl-sash.pulse{animation:dsg-pulse .65s ease}
@keyframes dsg-pulse{0%{background:rgba(199,154,62,.5);box-shadow:inset 0 0 0 3px var(--gold)}100%{background:rgba(74,140,88,0);box-shadow:inset 0 0 0 0 transparent}}
.dsg .ovl-num{position:absolute;top:7px;left:7px;width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.8);transition:.13s;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.dsg .ovl-sash.hov .ovl-num,.dsg .ovl-sash.sel .ovl-num{opacity:1;transform:scale(1)}
/* húzható fogantyú (finomhangolás) */
.dsg .ovl-guide{position:absolute;height:0;border-top:2px dashed var(--navy);pointer-events:none}
.dsg .ovl-guide.vert{width:0;border-top:0;border-left:2px dashed var(--navy)}
.dsg .ovl-knob{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;cursor:ns-resize;pointer-events:auto;box-shadow:0 3px 10px rgba(0,0,0,.3);border:2px solid #fff;touch-action:none;z-index:3}
.dsg .ovl-knob:hover{background:var(--green)}
.dsg .ovl-badge{position:absolute;transform:translate(-50%,-125%);background:var(--navy);color:#fff;font-size:11px;font-weight:800;padding:2px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:3}

/* --- szárny-vezérlők (tágas kártyák, a rajzhoz kötve) --- */
.dsg .ctl-head{display:flex;align-items:center;gap:10px;margin:22px 0 12px;flex-wrap:wrap}
.dsg .ctl-head>span{font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--navy)}
.dsg .ctl-head .hint-sm{font-size:11.5px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}
.dsg .sashes{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.dsg .sash{border:1.5px solid var(--border);border-radius:12px;padding:14px;background:var(--card);transition:border-color .13s,box-shadow .13s;cursor:pointer}
.dsg .sash.hov{border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.dsg .sash.sel{border-color:var(--navy);box-shadow:0 0 0 3px var(--green-soft),var(--shadow-sm)}
.dsg .sash-n{font-size:12px;font-weight:800;color:var(--navy);margin-bottom:10px;display:flex;align-items:center;gap:7px}
.dsg .sash-n b{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--navy);color:#fff;font-size:11px}
.dsg .sash select{width:100%;padding:9px 10px;border:1.5px solid var(--border);border-radius:9px;font-size:13px;font-family:inherit;color:var(--text);background:var(--card);font-weight:600}
.dsg .sash select:focus{outline:0;border-color:var(--green)}
.dsg .dir{display:flex;gap:6px;margin-top:9px}
.dsg .dir button{flex:1;border:1.5px solid var(--border);background:var(--card);border-radius:8px;padding:8px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer}
.dsg .dir button.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* szárny-kártyán belüli extra: üveg osztás (4 gomb / sor) */
.dsg .sash-x{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line,#eef2f5)}
.dsg .sash-xl{display:block;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.dsg .sash-uoseg{display:flex;width:100%;border:1.5px solid var(--border);border-radius:8px;overflow:hidden}
.dsg .sash-uoseg button{flex:1 1 0;min-width:0;border:0;border-left:1px solid var(--border);background:var(--card);padding:7px 2px;font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap}
.dsg .sash-uoseg button:first-child{border-left:0}
.dsg .sash-uoseg button:hover{color:var(--text)}
.dsg .sash-uoseg button.on{background:var(--navy);color:#fff}
.dsg .sash-uoseg button.on:hover{color:#fff}

/* Felülvilágító — az EGÉSZ elemre húzható fogantyú a rajzon (arany, hogy elváljon a szárny-fogantyútól) */
.dsg .ovl-guide.feluv-whole{border-top:2.5px dashed var(--gold)}
.dsg .ovl-knob.feluv-knob{background:var(--gold)}
.dsg .ovl-knob.feluv-knob:hover{background:#b9862f}
.dsg .ovl-badge.feluv-badge{background:var(--gold)}

/* váltószárnyas */
.dsg .vsz{display:none;flex-direction:column;gap:10px;margin-top:14px;padding:12px 14px;border:1.5px dashed var(--border);border-radius:12px;background:var(--rail-bg)}
.dsg .vsz.show{display:flex}
.dsg .vsz .vsz-title{font-size:13px;font-weight:800;color:var(--navy)}
.dsg .vsz .vsz-line{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.dsg .vsz .vsz-line.dis{opacity:.4}
.dsg .vsz .sw{position:relative;width:46px;height:25px;border-radius:999px;background:#cfd6d1;border:none;cursor:pointer;transition:background .15s;flex:none;padding:0}
.dsg .vsz .sw::after{content:"";position:absolute;top:2.5px;left:2.5px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.dsg .vsz .sw.on{background:var(--green)}
.dsg .vsz .sw.on::after{left:23.5px}
.dsg .vsz .pair{font-size:13px;font-weight:700;color:var(--text)}
.dsg .vsz .hint{font-size:12px;color:var(--muted)}
.dsg .vsz .side{display:flex;gap:6px;margin-left:auto;align-items:center}
.dsg .vsz .side .sl{font-size:12px;font-weight:700;color:var(--muted)}
.dsg .vsz .side button{border:1.5px solid var(--border);background:var(--card);border-radius:7px;padding:6px 13px;font-size:12px;font-weight:700;color:var(--muted)}
.dsg .vsz .side button.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ── Sablon-gomb (a rajz alatt, a szárnyak felett) — a galéria felugró modalban ── */
.dsg .tpl-bar{margin:12px 0 4px}
.dsg .tpl-open{display:flex;align-items:center;gap:11px;width:100%;padding:12px 16px;border:1.5px solid var(--green);border-radius:12px;background:var(--card);color:var(--green);font-family:inherit;font-weight:800;font-size:14px;cursor:pointer;transition:.13s}
.dsg .tpl-open:hover{background:var(--green-soft);box-shadow:0 6px 16px rgba(74,140,88,.14)}
.dsg .tpl-open .i{font-size:17px}
.dsg .tpl-open-txt{}
.dsg .tpl-open-sub{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--muted)}

/* ── Felugró sablon-választó (a body-ra kerül, ezért NEM .dsg-scope-olt) ── */
.tsel-ov{position:fixed;inset:0;z-index:4000;background:rgba(18,44,70,.5);display:flex;align-items:center;justify-content:center;padding:20px;font-family:'Montserrat',system-ui,sans-serif}
.tsel-ov[hidden]{display:none}
.tsel-modal{background:var(--card,#fff);display:flex;flex-direction:column;overflow:hidden;width:660px;max-width:100%;max-height:100%;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.32)}
.tsel-head{display:flex;align-items:center;gap:10px;padding:16px 18px 13px;border-bottom:1px solid var(--border,#e6ebf0);position:relative}
.tsel-eyebrow{font-size:9.5px;font-weight:800;letter-spacing:2px;color:var(--green,#4a8c58);position:absolute;top:9px;left:18px}
.tsel-title{font-size:17px;font-weight:800;color:var(--navy,#122c46);margin-top:9px}
.tsel-x{margin-left:auto;margin-top:9px;border:0;background:var(--rail-bg,#eef3ef);width:33px;height:33px;border-radius:50%;font-size:14px;color:var(--muted,#67757f);cursor:pointer;font-family:inherit}
.tsel-x:hover{background:#e2e8ee}
.tsel-tabs{display:flex;gap:7px;padding:12px 15px;overflow-x:auto;border-bottom:1px solid var(--border,#e6ebf0);-webkit-overflow-scrolling:touch}
.tsel-tab{flex:0 0 auto;padding:8px 15px;border:0;border-radius:999px;background:var(--rail-bg,#eef3ef);color:var(--muted,#67757f);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.tsel-tab em{font-style:normal;opacity:.65;font-size:11px}
.tsel-tab.on{background:var(--navy,#122c46);color:#fff}
.tsel-body{flex:1;overflow-y:auto;padding:14px;-webkit-overflow-scrolling:touch;background:var(--bg,#edf1f4)}
.tsel-pane{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
.tsel-card{border:1px solid var(--border,#e6ebf0);border-radius:12px;overflow:hidden;background:var(--card,#fff);cursor:pointer;padding:0;display:flex;flex-direction:column;text-align:left;font-family:inherit;transition:.13s}
.tsel-card:hover{border-color:var(--green,#4a8c58);box-shadow:0 9px 20px rgba(18,44,70,.12);transform:translateY(-2px)}
/* Fix magasságú doboz + flex-középre; az SVG px-méretét a JS állítja (viewBox-arány).
   FONTOS: NINCS %/auto méret az SVG-n — a régi Chrome (109) azt 0 magasra ejti / balra tolja. */
.tsel-thumb{height:122px;display:flex;align-items:center;justify-content:center;padding:9px;background:#f4f7f8;border-bottom:1px solid var(--border,#e6ebf0);box-sizing:border-box;overflow:hidden}
.tsel-thumb svg{display:block}
.tsel-err{color:#b23;font-size:10px}
.tsel-lab{font-size:11.5px;font-weight:800;color:var(--navy,#122c46);padding:8px 10px 0;line-height:1.25}
.tsel-meta{font-size:10px;font-weight:600;color:var(--muted,#67757f);padding:2px 10px 10px;font-variant-numeric:tabular-nums}
.tsel-foot{padding:11px 16px;border-top:1px solid var(--border,#e6ebf0);font-size:11px;color:var(--muted,#67757f)}
/* MOBIL: alulról felcsúszó, közel teljes képernyős lap */
@media(max-width:640px){
  .tsel-ov{padding:0;align-items:flex-end}
  .tsel-modal{width:100%;height:94%;max-height:94%;border-radius:20px 20px 0 0}
  .tsel-pane{grid-template-columns:repeat(2,1fr)}
}

/* Sablon-választó modal (Hozzáad/Lecserél — a body-ra kerül, ezért NEM .dsg-scope-olt) */
.pmodal{position:fixed;inset:0;z-index:4200;display:flex;align-items:center;justify-content:center;padding:20px}
.pmodal[hidden]{display:none}
.pmodal-bd{position:absolute;inset:0;background:rgba(18,44,70,.55)}
.pmodal-card{position:relative;background:var(--card,#fff);border-radius:16px;box-shadow:0 22px 55px rgba(0,0,0,.32);max-width:420px;width:100%;padding:24px}
.pmodal-card h4{margin:0 0 5px;color:var(--navy,#122c46);font-size:18px}
.pmodal-card>p{margin:0 0 18px;color:var(--muted,#64748b);font-size:13.5px}
.pmodal-btns{display:flex;flex-direction:column;gap:9px}
.pbtn{border:1.6px solid var(--border,#e2e8f0);border-radius:10px;padding:12px;font-weight:700;font-size:14px;cursor:pointer;background:var(--card,#fff);color:var(--text,#1e293b);font-family:inherit}
.pbtn:hover{border-color:var(--green,#4a8c58)}
.pbtn.primary{background:var(--navy,#122c46);color:#fff;border-color:var(--navy,#122c46)}
.pbtn.ghost{border:0;color:var(--muted,#64748b)}