*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --cw: 378px; --ch: 283px;
      --a1: #7c3aed; --a2: #06b6d4; --a3: #f59e0b;
      --g1: rgba(124,58,237,.6); --g2: rgba(6,182,212,.5);
      --gb: rgba(255,255,255,.1);
      --pb: rgba(15,12,30,.88);
      --tp: #f1f5f9; --ts: #94a3b8;
      --ib: rgba(255,255,255,.06);
      --tr: .22s cubic-bezier(.4,0,.2,1);
    }

    html, body { height:100%; font-family:'Segoe UI',Arial,sans-serif; background:#060410; color:var(--tp); overflow-x:hidden; }

    /* Background */
    .bg { position:fixed;inset:0;z-index:0;pointer-events:none;
      background:
        radial-gradient(ellipse 80% 60% at 20% 10%,rgba(124,58,237,.22) 0%,transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 80%,rgba(6,182,212,.18) 0%,transparent 55%),
        linear-gradient(135deg,#060410 0%,#0d0820 50%,#060c18 100%); }
    .orb { position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;animation:of linear infinite; }
    .o1 { width:500px;height:500px;background:rgba(124,58,237,.12);top:-150px;left:-150px;animation-duration:28s; }
    .o2 { width:350px;height:350px;background:rgba(6,182,212,.1);bottom:-100px;right:-100px;animation-duration:22s;animation-delay:-11s; }
    .o3 { width:250px;height:250px;background:rgba(245,158,11,.07);top:35%;right:25%;animation-duration:32s;animation-delay:-7s; }
    @keyframes of { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(25px,-25px) scale(1.04)} 66%{transform:translate(-18px,18px) scale(.96)} }

    .app { position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column; }

    /* Header */
    .hdr { padding:16px 32px;display:flex;align-items:center;justify-content:space-between;
      background:rgba(6,4,16,.75);backdrop-filter:blur(24px);
      border-bottom:1px solid var(--gb);position:sticky;top:0;z-index:10;
      box-shadow:0 1px 40px rgba(124,58,237,.12); }
    .logo { display:flex;align-items:center;gap:11px;font-size:1.4rem;font-weight:800;
      background:linear-gradient(135deg,#a78bfa 0%,#38bdf8 50%,#fbbf24 100%);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
    .logo-i { width:38px;height:38px;border-radius:10px;flex-shrink:0;
      background:linear-gradient(135deg,var(--a1),var(--a2));
      display:grid;place-items:center;font-size:1.1rem;
      box-shadow:0 0 22px var(--g1);animation:lp 3s ease-in-out infinite; }
    @keyframes lp { 0%,100%{box-shadow:0 0 22px var(--g1)} 50%{box-shadow:0 0 38px var(--g1),0 0 65px rgba(6,182,212,.28)} }
    .badge { padding:4px 13px;border-radius:20px;background:linear-gradient(135deg,rgba(124,58,237,.28),rgba(6,182,212,.18));border:1px solid rgba(124,58,237,.38);font-size:.73rem;color:#a78bfa;font-weight:600; }

    /* ── Language Select (Combo) ── */
    .lang-select {
      padding:5px 10px;border-radius:20px;
      background:#1a1230;
      border:1px solid rgba(124,58,237,.45);
      color:#c4b5fd;font-size:.8rem;font-weight:600;
      cursor:pointer;outline:none;
      appearance:auto;
    }
    .lang-select:hover { border-color:#7c3aed; }
    .lang-select option { background:#1a1230;color:#e2d9f3; }

    /* Main */
    .main { flex:1;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:22px 26px;max-width:1380px;margin:0 auto;width:100%; }

    /* Panel */
    .panel { background:var(--pb);backdrop-filter:blur(28px);border:1px solid var(--gb);border-radius:22px;overflow:hidden;
      box-shadow:0 8px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);animation:fu .5s ease both; }
    .panel:nth-child(2) { animation-delay:.12s; }
    @keyframes fu { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
    .ph { padding:15px 20px 12px;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--gb); }
    .phi { width:28px;height:28px;border-radius:7px;display:grid;place-items:center;font-size:.82rem;flex-shrink:0; }
    .phi.v{background:rgba(124,58,237,.22)} .phi.e{background:rgba(6,182,212,.22)}
    .pt{font-size:.95rem;font-weight:700;direction:rtl;text-align:right}
    .ps{font-size:.7rem;color:var(--ts);margin-top:1px;direction:rtl;text-align:right}

    /* ── PREVIEW ── */
    .preview-panel { display:flex;flex-direction:column; }
    .prev-body { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 18px;gap:14px; }

    .card-stage { position:relative;width:var(--cw);height:var(--ch); }
    .card-glow { position:absolute;inset:-14px;background:linear-gradient(135deg,var(--a1),var(--a2),var(--a3));border-radius:22px;opacity:.38;filter:blur(20px);pointer-events:none;animation:gp 3s ease-in-out infinite; }
    @keyframes gp { 0%,100%{opacity:.32;transform:scale(1)} 50%{opacity:.52;transform:scale(1.015)} }
    .card-frame { position:relative;z-index:1;width:var(--cw);height:var(--ch);
      border-radius:11px;overflow:hidden;border:1px solid rgba(255,255,255,.14);
      box-shadow:0 20px 55px rgba(0,0,0,.55);background:#111;
      user-select:none;-webkit-user-select:none; }
    .card-bg { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;pointer-events:none; }
    .empty-st { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(6,182,212,.08));pointer-events:none; }
    .empty-ic { font-size:2.6rem;filter:drop-shadow(0 0 10px rgba(124,58,237,.5)); }
    .empty-tx { font-size:.8rem;color:rgba(255,255,255,.38); }

    /* Draggable text blocks */
    .ov-block {
      position:absolute; z-index:3;
      cursor:grab; padding:2px 5px;
      border-radius:4px; border:1px dashed transparent;
      transition:border-color .15s, background .15s, box-shadow .15s;
      white-space:nowrap; line-height:1.25;
      text-shadow:0 2px 8px rgba(0,0,0,.6);
    }
    .ov-block:hover { border-color:rgba(6,182,212,.5); background:rgba(0,0,0,.12); }
    .ov-block.selected {
      border-color:rgba(245,158,11,.8) !important;
      background:rgba(245,158,11,.08) !important;
      box-shadow:0 0 12px rgba(245,158,11,.35);
    }
    .ov-block.is-drag { cursor:grabbing !important; border-color:#06b6d4 !important; background:rgba(0,0,0,.18) !important; z-index:20; box-shadow:0 0 10px rgba(6,182,212,.4); }

    .drag-hint { font-size:.67rem;color:rgba(148,163,184,.38);text-align:center;direction:rtl; }
    .card-meta { display:flex;gap:7px;font-size:.71rem;color:var(--ts); }
    .card-meta span { padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid var(--gb); }
    .btn-dl { display:flex;align-items:center;gap:8px;padding:10px 22px;border-radius:10px;
      font-size:.86rem;font-weight:700;cursor:pointer;border:none;
      background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;font-family:'Segoe UI',Arial,sans-serif;
      box-shadow:0 4px 18px var(--g1);transition:all var(--tr); }
    .btn-dl:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--g1)} .btn-dl:active{transform:none}
    .btn-sec { padding:8px 14px;border-radius:9px;font-size:.74rem;font-weight:600;cursor:pointer;
      border:1px solid var(--gb);background:var(--ib);color:var(--ts);font-family:'Segoe UI',Arial,sans-serif;transition:all var(--tr); }
    .btn-sec:hover{border-color:var(--a1);color:var(--tp)}
    .btn-sig { padding:8px 14px;border-radius:9px;font-size:.74rem;font-weight:700;cursor:pointer;
      border:1px solid rgba(6,182,212,.4);background:rgba(6,182,212,.1);color:#38bdf8;
      font-family:'Segoe UI',Arial,sans-serif;transition:all var(--tr);white-space:nowrap; }
    .btn-sig:hover{background:rgba(6,182,212,.22);border-color:var(--a2);transform:translateY(-1px)}
    .btn-vc  { padding:8px 14px;border-radius:9px;font-size:.74rem;font-weight:700;cursor:pointer;
      border:1px solid rgba(245,158,11,.4);background:rgba(245,158,11,.1);color:#fbbf24;
      font-family:'Segoe UI',Arial,sans-serif;transition:all var(--tr);white-space:nowrap; }
    .btn-vc:hover{background:rgba(245,158,11,.22);border-color:var(--a3);transform:translateY(-1px)}
    .btn-wa  { padding:8px 14px;border-radius:9px;font-size:.74rem;font-weight:700;cursor:pointer;
      border:1px solid rgba(37,211,102,.4);background:rgba(37,211,102,.1);color:#25d366;
      font-family:'Segoe UI',Arial,sans-serif;transition:all var(--tr);white-space:nowrap; }
    .btn-wa:hover{background:rgba(37,211,102,.22);border-color:#25d366;transform:translateY(-1px)}
    .btn-pdf { padding:8px 14px;border-radius:9px;font-size:.74rem;font-weight:700;cursor:pointer;
      border:1px solid rgba(239,68,68,.4);background:rgba(239,68,68,.1);color:#f87171;
      font-family:'Segoe UI',Arial,sans-serif;transition:all var(--tr);white-space:nowrap; }
    .btn-pdf:hover{background:rgba(239,68,68,.22);border-color:#ef4444;transform:translateY(-1px)}

    /* ── Secondary language tabs ── */
    .lang2-tab { border-color:rgba(6,182,212,.35) !important; color:rgba(6,182,212,.85) !important; }
    .lang2-tab.active { background:rgba(6,182,212,.22) !important; border-color:#06b6d4 !important; color:#38bdf8 !important; }

    /* ── QR Overlay on card ── */
    .ov-qr { padding:0 !important; background:transparent !important; border:none !important; overflow:visible !important; }
    .ov-qr canvas { display:block; image-rendering:pixelated; image-rendering:crisp-edges; border-radius:3px; }
    .ov-qr:hover { outline:2px dashed rgba(6,182,212,.6); outline-offset:2px; }
    .ov-qr.is-drag { outline:2px solid #06b6d4 !important; cursor:grabbing !important; }
    .qr-resize-handle {
      position:absolute; bottom:-5px; right:-5px;
      width:14px; height:14px; background:#06b6d4; border-radius:3px;
      cursor:nwse-resize; z-index:25;
      box-shadow:0 0 6px rgba(6,182,212,.6);
      opacity:0; transition:opacity .18s;
    }
    .ov-qr:hover .qr-resize-handle { opacity:1; }
    /* ── QR Controls in editor ── */
    .qr-toggle-row { display:flex; align-items:center; padding:5px 0 3px; }
    .qr-toggle-lbl { display:flex; align-items:center; gap:9px; cursor:pointer; font-size:.83rem; color:var(--tp); }
    .qr-toggle-lbl input[type=checkbox] { width:16px; height:16px; accent-color:var(--a2); cursor:pointer; flex-shrink:0; }
    .qr-size-row { display:flex; align-items:center; gap:8px; padding:6px 0 2px; font-size:.78rem; color:var(--ts); }
    .qr-size-row input[type=range] { flex:1; accent-color:var(--a2); }
    .qr-hint { font-size:.68rem; color:rgba(148,163,184,.5); padding:3px 0 4px; }
    .btn-clr { position:absolute;left:0;
      padding:3px 10px;border-radius:7px;font-size:.68rem;font-weight:600;cursor:pointer;
      border:1px solid rgba(239,68,68,.3);background:rgba(239,68,68,.08);color:rgba(239,68,68,.7);
      font-family:'Segoe UI',Arial,sans-serif;transition:all var(--tr);white-space:nowrap; }
    .btn-clr:hover{border-color:rgba(239,68,68,.7);background:rgba(239,68,68,.18);color:#fca5a5}

    /* ── EDITOR ── */
    .editor-panel { display:flex;flex-direction:column;max-height:calc(100vh - 92px); }
    .esc { flex:1;overflow-y:auto;padding:16px 20px 22px;display:flex;flex-direction:column;gap:17px; }
    .esc::-webkit-scrollbar{width:3px} .esc::-webkit-scrollbar-thumb{background:rgba(124,58,237,.3);border-radius:2px}

    /* Gallery — horizontal carousel */
    .gal-hd { display:flex;align-items:center;justify-content:space-between;margin-bottom:9px; }
    .gal-lbl { font-size:.72rem;font-weight:700;color:var(--ts);text-transform:uppercase;letter-spacing:.9px;direction:rtl; }
    .gal-ct  { font-size:.69rem;color:rgba(148,163,184,.4); }
    .gal-wrap { position:relative; }
    .gal-arrow { position:absolute;top:50%;transform:translateY(-50%);z-index:5;
      width:28px;height:28px;border-radius:50%;border:none;cursor:pointer;
      background:rgba(124,58,237,.55);color:#fff;font-size:.85rem;
      display:flex;align-items:center;justify-content:center;
      transition:all var(--tr);box-shadow:0 2px 10px rgba(0,0,0,.4);padding:0;line-height:1; }
    .gal-arrow:hover{background:rgba(124,58,237,.85);box-shadow:0 4px 16px var(--g1)}
    .gal-arrow:disabled{opacity:.2;cursor:default}
    .gal-arrow.prev{left:-12px} .gal-arrow.next{right:-12px}
    .gallery { display:flex;gap:8px;overflow-x:auto;overflow-y:visible;scroll-behavior:smooth;
      padding:6px 2px 10px;scrollbar-width:thin;scrollbar-color:rgba(124,58,237,.3) transparent;min-height:80px; }
    .gallery::-webkit-scrollbar{height:3px} .gallery::-webkit-scrollbar-thumb{background:rgba(124,58,237,.3);border-radius:2px}
    .gal-spin { display:flex;align-items:center;justify-content:center;gap:8px;font-size:.75rem;color:var(--ts);animation:pulse 1.5s ease-in-out infinite;white-space:nowrap;padding:10px; }
    @keyframes pulse { 0%,100%{opacity:.5} 50%{opacity:1} }

    .tpl-thumb { flex-shrink:0;width:106px;height:80px;border-radius:7px;overflow:hidden;
      cursor:pointer;border:2.5px solid rgba(255,255,255,.07);transition:all var(--tr);
      box-shadow:0 4px 12px rgba(0,0,0,.4);user-select:none;-webkit-user-select:none; }
    .tpl-thumb > * { pointer-events:none; }
    .tpl-thumb img { width:100%;height:100%;object-fit:cover;display:block; }
    .tpl-thumb:hover{transform:translateY(-4px) scale(1.06);border-color:rgba(124,58,237,.55);box-shadow:0 10px 24px rgba(124,58,237,.38)}
    .tpl-thumb.active{border-color:#06b6d4;box-shadow:0 0 0 1px #06b6d4,0 10px 24px rgba(6,182,212,.5);transform:translateY(-4px) scale(1.06)}
    .tpl-num{position:absolute;bottom:3px;right:5px;font-size:.57rem;font-weight:700;background:rgba(0,0,0,.65);color:#fff;padding:1px 5px;border-radius:4px}
    .tpl-chk{position:absolute;top:4px;left:4px;width:16px;height:16px;border-radius:50%;background:#06b6d4;color:#fff;display:none;align-items:center;justify-content:center;font-size:.57rem;font-weight:700;box-shadow:0 0 8px rgba(6,182,212,.7)}
    .tpl-thumb.active .tpl-chk{display:flex}

    /* Divider */
    .dv{display:flex;align-items:center;gap:9px;color:var(--ts);font-size:.7rem;font-weight:700;letter-spacing:.9px;text-transform:uppercase;direction:rtl}
    .dv::before,.dv::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}

    /* Form */
    .fg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .fi-g{display:flex;flex-direction:column;gap:4px}
    .fi-g.full{grid-column:1/-1}
    .fl{font-size:.7rem;font-weight:700;color:var(--ts);direction:rtl;text-align:right}
    .fi{padding:8px 11px;border-radius:9px;background:var(--ib);border:1px solid var(--gb);
      color:var(--tp);font-family:'Segoe UI',Arial,sans-serif;font-size:.85rem;outline:none;
      transition:all var(--tr);direction:rtl}
    .fi::placeholder{color:rgba(148,163,184,.35)}
    .fi:focus{border-color:var(--a1);background:rgba(124,58,237,.07);box-shadow:0 0 0 3px rgba(124,58,237,.14)}
    select.fi{cursor:pointer;appearance:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat:no-repeat;background-position:left 10px center;padding-left:30px}
    select.fi option{background:#1a1230;color:#f1f5f9}

    /* ── Block selector tabs ── */
    .block-tabs { display:flex;flex-direction:column;gap:5px; }
    .btab-row   { display:flex;gap:5px; }
    .btab {
      flex:1;padding:7px 4px;border-radius:8px;cursor:pointer;
      border:1px solid var(--gb);background:var(--ib);
      color:var(--ts);font-family:'Segoe UI',Arial,sans-serif;
      font-size:.72rem;font-weight:700;text-align:center;
      transition:all var(--tr);
    }
    .btab.sm { font-size:.64rem;padding:5px 2px; }
    .btab:hover { border-color:var(--a3);color:var(--tp); }
    .btab.active { background:rgba(245,158,11,.18);border-color:var(--a3);color:#fbbf24; }
    .block-label {
      font-size:.65rem;color:rgba(245,158,11,.65);
      direction:rtl;text-align:right;margin-top:3px;min-height:14px;
    }

    /* Text style toggles */
    .style-row{display:flex;gap:6px}
    .stb{flex:1;padding:7px 4px;border-radius:8px;cursor:pointer;border:1px solid var(--gb);background:var(--ib);
      color:var(--ts);font-family:'Segoe UI',Arial,sans-serif;font-size:.82rem;font-weight:600;text-align:center;transition:all var(--tr);line-height:1}
    .stb:hover{border-color:var(--a1);color:var(--tp)}
    .stb.active{background:rgba(124,58,237,.22);border-color:var(--a1);color:#a78bfa}
    .stb[data-s="bold"]     {font-weight:800}
    .stb[data-s="italic"]   {font-style:italic}
    .stb[data-s="underline"]{text-decoration:underline}
    .stb[data-s="shadow"]   {text-shadow:0 1px 4px rgba(0,0,0,.8)}

    /* Style controls */
    .sc{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .sg{display:flex;flex-direction:column;gap:4px}
    .sg.full{grid-column:1/-1}
    .sl{font-size:.7rem;font-weight:700;color:var(--ts);direction:rtl;text-align:right}

    /* Font selector */
    .font-row{display:flex;gap:6px;align-items:stretch}
    .font-row select{flex:1}
    .btn-fonts{padding:0 11px;border-radius:9px;border:1px solid var(--gb);background:var(--ib);color:var(--ts);font-family:'Segoe UI',Arial,sans-serif;font-size:.72rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:all var(--tr)}
    .btn-fonts:hover{border-color:var(--a1);color:var(--tp)}
    .font-status{font-size:.64rem;color:rgba(148,163,184,.45);margin-top:3px;min-height:13px;direction:rtl}

    /* Sliders */
    .rr{display:flex;align-items:center;gap:8px}
    .ri{flex:1;-webkit-appearance:none;height:4px;border-radius:2px;background:rgba(255,255,255,.1);outline:none;cursor:pointer}
    .ri::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--a1);cursor:pointer;box-shadow:0 0 8px var(--g1)}
    .rv{min-width:24px;font-size:.73rem;color:var(--ts);text-align:center}

    /* Colors */
    .cr{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
    .co{width:23px;height:23px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all var(--tr);flex-shrink:0}
    .co:hover{transform:scale(1.2)} .co.active{border-color:#fff;box-shadow:0 0 10px rgba(255,255,255,.4);transform:scale(1.15)}
    input[type="color"].fi{padding:2px 3px;height:32px;width:32px;border-radius:50%;cursor:pointer}

    /* Direction */
    .dr{display:flex;gap:6px}
    .db{flex:1;padding:7px;border-radius:8px;cursor:pointer;border:1px solid var(--gb);background:var(--ib);color:var(--ts);font-size:.73rem;font-weight:700;text-align:center;transition:all var(--tr);font-family:'Segoe UI',Arial,sans-serif}
    .db.active{background:rgba(6,182,212,.18);border-color:var(--a2);color:#38bdf8}

    /* ── Saved Layouts ── */
    .layouts-hd { display:flex;align-items:center;justify-content:space-between;margin-bottom:9px; }
    .layouts-lbl { font-size:.72rem;font-weight:700;color:var(--ts);text-transform:uppercase;letter-spacing:.9px;direction:rtl; }
    .layouts-list { display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;
      scrollbar-width:thin;scrollbar-color:rgba(124,58,237,.3) transparent;min-height:80px; }
    .layouts-list::-webkit-scrollbar{height:3px}
    .layouts-list::-webkit-scrollbar-thumb{background:rgba(124,58,237,.3);border-radius:2px}
    .lc { flex-shrink:0;width:90px;border-radius:9px;padding:7px 6px 8px;cursor:pointer;
      border:2px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);
      display:flex;flex-direction:column;align-items:center;gap:5px;
      transition:all var(--tr);user-select:none;-webkit-user-select:none; }
    .lc>*{pointer-events:none}
    .lc:hover { border-color:rgba(124,58,237,.5);background:rgba(124,58,237,.08);transform:translateY(-3px); }
    .lc.active { border-color:#f59e0b;background:rgba(245,158,11,.1);box-shadow:0 0 14px rgba(245,158,11,.3); }
    .lc-mini { width:72px;height:54px;border-radius:5px;background:rgba(0,0,0,.4);
      border:1px solid rgba(255,255,255,.1);overflow:hidden;flex-shrink:0; }
    .lc-name { font-size:.61rem;font-weight:700;color:var(--ts);text-align:center;
      direction:rtl;line-height:1.3;word-break:break-word; }
    .lc.active .lc-name { color:#fbbf24; }
    .lc-num { font-size:.56rem;color:rgba(148,163,184,.4); }
    .btn-save-layout { padding:5px 11px;border-radius:7px;font-size:.69rem;font-weight:700;cursor:pointer;
      border:1px solid rgba(245,158,11,.38);background:rgba(245,158,11,.09);color:#fbbf24;
      font-family:'Segoe UI',Arial,sans-serif;transition:all var(--tr);white-space:nowrap; }
    .btn-save-layout:hover { border-color:#f59e0b;background:rgba(245,158,11,.2); }
    .no-layouts { font-size:.73rem;color:rgba(148,163,184,.38);padding:10px;direction:rtl;align-self:center;white-space:nowrap; }

    #dl-canvas{display:none}
    @media(max-width:1050px){.main{grid-template-columns:1fr}.editor-panel{max-height:none}}
    @media(max-width:580px){.hdr{padding:12px 16px}.main{padding:12px}.fg,.sc{grid-template-columns:1fr}}

    /* ── Template Picker Modal ── */
    .tpl-modal-overlay {
      position:fixed;inset:0;z-index:1000;
      background:rgba(4,2,14,.92);backdrop-filter:blur(14px);
      display:flex;align-items:center;justify-content:center;
      opacity:0;pointer-events:none;transition:opacity .22s ease;
    }
    .tpl-modal-overlay.open { opacity:1;pointer-events:all; }
    .tpl-modal {
      width:min(96vw,1100px);height:min(88vh,820px);
      background:rgba(13,10,28,.98);border:1px solid rgba(255,255,255,.1);
      border-radius:22px;display:flex;flex-direction:column;overflow:hidden;
      box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(124,58,237,.2);
      transform:scale(.96);transition:transform .22s ease;
    }
    .tpl-modal-overlay.open .tpl-modal { transform:scale(1); }

    .tpl-modal-head {
      padding:16px 20px 12px;border-bottom:1px solid rgba(255,255,255,.08);
      display:flex;align-items:center;gap:11px;flex-shrink:0;
    }
    .tpl-modal-title {
      flex:1;font-size:1.05rem;font-weight:800;direction:rtl;
      background:linear-gradient(135deg,#a78bfa,#38bdf8);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    }
    .tpl-modal-close {
      width:30px;height:30px;border-radius:50%;flex-shrink:0;
      border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);
      color:var(--ts);cursor:pointer;font-size:.9rem;
      display:grid;place-items:center;transition:all var(--tr);
    }
    .tpl-modal-close:hover { background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.4);color:#fca5a5; }

    .tpl-modal-toolbar {
      padding:10px 20px;border-bottom:1px solid rgba(255,255,255,.06);
      display:flex;align-items:center;gap:9px;flex-wrap:wrap;flex-shrink:0;
    }
    .tpl-search {
      flex:1;min-width:160px;padding:7px 12px;border-radius:9px;
      background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
      color:var(--tp);font-family:'Segoe UI',Arial,sans-serif;font-size:.85rem;
      outline:none;transition:all var(--tr);direction:rtl;
    }
    .tpl-search::placeholder { color:rgba(148,163,184,.38); }
    .tpl-search:focus { border-color:var(--a1);background:rgba(124,58,237,.07);box-shadow:0 0 0 3px rgba(124,58,237,.14); }
    .tpl-modal-ct { font-size:.71rem;color:var(--ts);white-space:nowrap; }

    .cat-tabs { display:flex;gap:5px;flex-wrap:wrap; }
    .cat-tab {
      padding:5px 12px;border-radius:20px;cursor:pointer;
      border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);
      color:var(--ts);font-size:.73rem;font-weight:600;
      font-family:'Segoe UI',Arial,sans-serif;white-space:nowrap;transition:all var(--tr);
    }
    .cat-tab:hover { border-color:rgba(124,58,237,.4);color:var(--tp); }
    .cat-tab.active { background:rgba(124,58,237,.22);border-color:var(--a1);color:#a78bfa; }

    .tpl-modal-body {
      flex:1;overflow-y:auto;padding:16px 20px 20px;
    }
    .tpl-modal-body::-webkit-scrollbar { width:4px; }
    .tpl-modal-body::-webkit-scrollbar-thumb { background:rgba(124,58,237,.3);border-radius:2px; }

    .tpl-modal-grid {
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
      gap:11px;
    }
    .tpl-modal-thumb {
      position:relative;aspect-ratio:10/7.5;border-radius:8px;overflow:hidden;
      cursor:pointer;border:2.5px solid rgba(255,255,255,.07);
      transition:all var(--tr);box-shadow:0 4px 14px rgba(0,0,0,.4);
      user-select:none;-webkit-user-select:none;
    }
    .tpl-modal-thumb>* { pointer-events:none; }
    .tpl-modal-thumb img { width:100%;height:100%;object-fit:cover;display:block; }
    .tpl-modal-thumb:hover { transform:translateY(-4px) scale(1.04);border-color:rgba(124,58,237,.55);box-shadow:0 10px 28px rgba(124,58,237,.38); }
    .tpl-modal-thumb.selected { border-color:#06b6d4;box-shadow:0 0 0 1px #06b6d4,0 10px 28px rgba(6,182,212,.5); }
    .tpl-modal-thumb .tpl-num { position:absolute;bottom:4px;right:6px;font-size:.6rem;font-weight:700;background:rgba(0,0,0,.65);color:#fff;padding:1px 5px;border-radius:4px; }
    .tpl-modal-thumb .tpl-chk { position:absolute;top:5px;left:5px;width:20px;height:20px;border-radius:50%;background:#06b6d4;color:#fff;display:none;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;box-shadow:0 0 8px rgba(6,182,212,.7); }
    .tpl-modal-thumb.selected .tpl-chk { display:flex; }
    .tpl-modal-thumb .tpl-cat-badge { position:absolute;top:4px;right:5px;font-size:.56rem;background:rgba(0,0,0,.6);color:rgba(255,255,255,.75);padding:1px 5px;border-radius:4px; }

    .tpl-modal-foot {
      padding:12px 20px;border-top:1px solid rgba(255,255,255,.07);
      display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0;
    }
    .tpl-modal-sel-info { flex:1;font-size:.79rem;color:var(--ts);direction:rtl; }
    .tpl-modal-sel-info strong { color:var(--tp); }
    .btn-modal-confirm {
      padding:9px 22px;border-radius:10px;cursor:pointer;border:none;
      background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;
      font-family:'Segoe UI',Arial,sans-serif;font-size:.86rem;font-weight:700;
      box-shadow:0 4px 18px var(--g1);transition:all var(--tr);
    }
    .btn-modal-confirm:hover { transform:translateY(-2px);box-shadow:0 8px 28px var(--g1); }
    .btn-modal-confirm:disabled { opacity:.35;cursor:not-allowed;transform:none; }
    .btn-modal-cancel {
      padding:8px 16px;border-radius:10px;cursor:pointer;
      border:1px solid var(--gb);background:var(--ib);color:var(--ts);
      font-family:'Segoe UI',Arial,sans-serif;font-size:.84rem;font-weight:600;transition:all var(--tr);
    }
    .btn-modal-cancel:hover { border-color:var(--a1);color:var(--tp); }
    .tpl-modal-empty,.tpl-cat-loading {
      grid-column:1/-1;text-align:center;padding:40px 20px;
      font-size:.82rem;color:rgba(148,163,184,.4);direction:rtl;
    }
    .tpl-cat-loading { animation:pulse 1.5s ease-in-out infinite; }

    .btn-open-picker {
      padding:4px 11px;border-radius:8px;cursor:pointer;
      border:1px solid rgba(124,58,237,.38);background:rgba(124,58,237,.11);
      color:#a78bfa;font-size:.7rem;font-weight:700;
      font-family:'Segoe UI',Arial,sans-serif;white-space:nowrap;transition:all var(--tr);
    }
    .btn-open-picker:hover { background:rgba(124,58,237,.24);border-color:var(--a1); }
    .btn-local-tpl { border-color:rgba(16,185,129,.38) !important; background:rgba(16,185,129,.11) !important; color:#6ee7b7 !important; }
    .btn-local-tpl:hover { background:rgba(16,185,129,.24) !important; border-color:#10b981 !important; }

    /* ── Drag & drop onto card ── */
    .card-frame.drop-hover::after {
      content:'גרור תמונה לכאן';
      position:absolute;inset:0;border-radius:inherit;
      background:rgba(16,185,129,.18);
      border:2px dashed #10b981;
      display:flex;align-items:center;justify-content:center;
      font-size:1rem;color:#6ee7b7;font-weight:700;
      pointer-events:none;z-index:999;
    }

    /* ── AD Search ──────────────────────────────── */
    .ad-box {
      background: linear-gradient(135deg,rgba(124,58,237,.1),rgba(6,182,212,.07));
      border: 1px solid rgba(124,58,237,.3);
      border-radius: 13px; padding: 13px 14px;
      display: flex; flex-direction: column; gap: 9px;
    }
    .ad-title {
      font-size: .72rem; font-weight: 700; color: #a78bfa;
      text-transform: uppercase; letter-spacing: .8px;
      display: flex; align-items: center; gap: 6px;
      direction: rtl;
    }
    .ad-title span { opacity: .6; font-size: .68rem; font-weight: 500; text-transform: none; }
    .ad-row { display: flex; gap: 7px; align-items: center; }
    .ad-input {
      flex: 1; padding: 8px 12px; border-radius: 9px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(124,58,237,.35);
      color: var(--tp); font-family: 'Segoe UI',Arial,sans-serif; font-size: .86rem;
      outline: none; transition: all var(--tr); direction: rtl;
    }
    .ad-input::placeholder { color: rgba(148,163,184,.4); }
    .ad-input:focus { border-color: var(--a1); background: rgba(124,58,237,.1); box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
    .ad-btn {
      padding: 8px 14px; border-radius: 9px; cursor: pointer; border: none;
      background: linear-gradient(135deg,var(--a1),var(--a2));
      color: #fff; font-size: .8rem; font-weight: 700; font-family: 'Segoe UI',Arial,sans-serif;
      white-space: nowrap; transition: all var(--tr);
      box-shadow: 0 2px 10px rgba(124,58,237,.35);
    }
    .ad-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(124,58,237,.5); }
    .ad-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

    /* Results dropdown */
    .ad-results {
      display: none; flex-direction: column; gap: 4px;
      max-height: 190px; overflow-y: auto;
    }
    .ad-results.open { display: flex; }
    .ad-result-item {
      padding: 8px 12px; border-radius: 8px; cursor: pointer;
      background: rgba(255,255,255,.05); border: 1px solid transparent;
      transition: all var(--tr); direction: rtl;
    }
    .ad-result-item:hover { background: rgba(124,58,237,.2); border-color: rgba(124,58,237,.4); }
    .ad-result-name { font-size: .86rem; font-weight: 700; color: var(--tp); }
    .ad-result-sub  { font-size: .72rem; color: var(--ts); margin-top: 1px; }

    /* Status messages */
    .ad-msg {
      padding: 7px 11px; border-radius: 8px; font-size: .78rem;
      text-align: right; direction: rtl; display: none;
    }
    .ad-msg.show { display: block; }
    .ad-msg.err  { background: rgba(239,68,68,.12); color: #fca5a5; border: 1px solid rgba(239,68,68,.25); }
    .ad-msg.info { background: rgba(6,182,212,.1);  color: #67e8f9; border: 1px solid rgba(6,182,212,.2); }
    .ad-msg.ok   { background: rgba(16,185,129,.1); color: #6ee7b7; border: 1px solid rgba(16,185,129,.2); }