/* מתכנן מסכי הקרנה – v2 */
.sp-app{
  --sp-accent:#e8412c;--sp-ink:#15171c;--sp-mute:#6b7080;--sp-line:#e6e7ec;--sp-soft:#f5f6f8;
  --sp-stage:#101217;--sp-wall:#1c1f27;--sp-ok:#14995b;--sp-warn:#c27c00;--sp-bad:#d93636;
  direction:rtl;text-align:right;color:var(--sp-ink);font-family:inherit;line-height:1.5;margin:28px 0;
}
.sp-app *,.sp-app *::before,.sp-app *::after{box-sizing:border-box}
.sp-app [hidden]{display:none!important}
.sp-app button,.sp-app input,.sp-app output{font-family:inherit}
.sp-card{background:#fff;border:1px solid var(--sp-line);border-radius:20px;padding:26px;box-shadow:0 12px 40px -18px rgba(16,18,23,.18);overflow:hidden}
.sp-head{margin-bottom:20px}
.sp-kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--sp-accent)}
.sp-kicker::before{content:"";width:18px;height:2px;background:var(--sp-accent);border-radius:2px}
.sp-title{font-size:clamp(22px,2.8vw,30px);line-height:1.25;margin:6px 0;font-weight:800;color:var(--sp-ink)}
.sp-pname{color:var(--sp-accent)}
.sp-sub{margin:0;color:var(--sp-mute);font-size:16px}
.sp-sub b{color:var(--sp-ink)}
.sp-q{font-size:17px;font-weight:800;margin:0 0 10px}

/* בחירת סוג מסך */
.sp-types{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px}
.sp-type{border:2px solid var(--sp-line);background:#fff;border-radius:16px;padding:18px;text-align:right;cursor:pointer;display:grid;grid-template-columns:52px 1fr;column-gap:14px;align-items:start;transition:.15s;color:var(--sp-ink)}
.sp-type svg{grid-row:span 3;width:52px;height:52px;color:var(--sp-mute);transition:.15s}
.sp-type b{font-size:19px;font-weight:800}
.sp-type span{font-size:14px;color:var(--sp-mute);line-height:1.4}
.sp-type em{font-style:normal;font-size:13.5px;font-weight:700;color:var(--sp-accent);margin-top:6px}
.sp-type:hover{border-color:#c9ccd5}
.sp-type.is-on{border-color:var(--sp-accent);background:color-mix(in srgb,var(--sp-accent) 5%,#fff)}
.sp-type.is-on svg{color:var(--sp-accent)}
.sp-types.is-picked .sp-type:not(.is-on){opacity:.6}
.sp-types.is-picked .sp-type:not(.is-on):hover{opacity:1}
.sp-body{border-top:1px solid var(--sp-line);margin-top:20px;padding-top:22px;animation:spIn .3s ease}
@keyframes spIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* פריסה */
.sp-grid{display:grid;grid-template-columns:330px 1fr;gap:28px;align-items:start}
.sp-controls{display:flex;flex-direction:column;gap:18px}
.sp-out{display:flex;flex-direction:column;gap:14px;min-width:0}

/* שדות */
.sp-field{background:var(--sp-soft);border-radius:14px;padding:12px 14px}
.sp-field-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.sp-field-top label{font-size:15px;font-weight:700}
.sp-step{display:flex;align-items:center;gap:6px}
.sp-step output{font-size:20px;font-weight:800;min-width:40px;text-align:center}
.sp-step span{font-size:13px;color:var(--sp-mute);font-weight:600}
.sp-step button{width:32px;height:32px;border-radius:10px;border:1px solid var(--sp-line);background:#fff;font-size:19px;font-weight:700;line-height:1;cursor:pointer;color:var(--sp-ink);display:grid;place-items:center;padding:0}
.sp-step button:hover{border-color:var(--sp-ink)}
.sp-app input[type=range]{width:100%;accent-color:var(--sp-accent);height:24px;margin:0;cursor:pointer;direction:rtl}
.sp-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sp-presets button{border:1px solid var(--sp-line);background:#fff;border-radius:12px;padding:8px 4px;cursor:pointer;font-size:12.5px;color:var(--sp-mute);display:flex;flex-direction:column;align-items:center;line-height:1.3}
.sp-presets button b{font-size:18px;color:var(--sp-ink)}
.sp-presets button:hover{border-color:var(--sp-accent)}

/* תוצאה */
.sp-big{display:flex;flex-direction:column;border-radius:16px;padding:16px 18px;background:color-mix(in srgb,var(--sp-accent) 7%,#fff);border:1.5px solid color-mix(in srgb,var(--sp-accent) 30%,#fff)}
.sp-big span{font-size:15px;font-weight:700;color:var(--sp-accent)}
.sp-big b{font-size:60px;font-weight:800;line-height:1;letter-spacing:-.03em;margin:4px 0}
.sp-big b small{font-size:22px;font-weight:700;margin-right:6px;letter-spacing:0}
.sp-big em{font-style:normal;font-size:14px;font-weight:600;color:var(--sp-ink)}
.sp-big.sp-bad{background:#fdf0f0;border-color:#f3c9c9}
.sp-big.sp-bad span{color:var(--sp-bad)}
.sp-why{margin:2px 0 0;font-size:15px}
.sp-adj{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--sp-mute);font-weight:600}
.sp-adj button{border:1px solid var(--sp-line);background:#fff;border-radius:999px;padding:6px 14px;font-size:14px;font-weight:700;cursor:pointer;color:var(--sp-ink)}
.sp-adj button:hover:not(:disabled){border-color:var(--sp-ink)}
.sp-adj button:disabled{opacity:.35;cursor:default}
.sp-stage{background:var(--sp-stage);border-radius:16px;overflow:hidden;line-height:0}
.sp-stage svg{width:100%;height:auto;display:block}
.sp-t-lbl{fill:rgba(255,255,255,.65);font-size:14px;font-family:inherit}
.sp-t-dim{fill:#fff;font-size:15px;font-weight:700;font-family:inherit}
.sp-note{border-radius:12px;padding:10px 14px;font-size:14.5px;background:#eef4fe;border:1px solid #cbdcf7;color:#1d4a91}

/* תשובה בעמוד מוצר */
.sp-verdict{display:flex;gap:14px;align-items:flex-start;border-radius:16px;padding:16px 18px;border:1.5px solid}
.sp-verdict i{flex:0 0 40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-style:normal;font-size:22px;font-weight:800}
.sp-verdict b{display:block;font-size:22px;font-weight:800;line-height:1.25;margin-bottom:4px}
.sp-verdict span{display:block;font-size:14.5px}
.sp-verdict.sp-ok{background:#ecf8f2;border-color:#bfe6d2}.sp-verdict.sp-ok i{background:var(--sp-ok)}.sp-verdict.sp-ok i::before{content:"✓"}.sp-verdict.sp-ok b{color:var(--sp-ok)}
.sp-verdict.sp-warn{background:#fff7e8;border-color:#f3dcae}.sp-verdict.sp-warn i{background:var(--sp-warn)}.sp-verdict.sp-warn i::before{content:"!"}.sp-verdict.sp-warn b{color:var(--sp-warn)}
.sp-verdict.sp-bad{background:#fdf0f0;border-color:#f3c9c9}.sp-verdict.sp-bad i{background:var(--sp-bad)}.sp-verdict.sp-bad i::before{content:"✕"}.sp-verdict.sp-bad b{color:var(--sp-bad)}

/* כפתורים ולידים */
.sp-lead{margin:24px -26px -26px;padding:18px 26px;background:var(--sp-ink);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sp-lead-txt{display:flex;flex-direction:column}
.sp-lead-txt strong{font-size:16px}
.sp-lead-txt span{font-size:13.5px;color:rgba(255,255,255,.7)}
.sp-lead-btns{display:flex;gap:8px;flex-wrap:wrap}
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:12px 18px;font-weight:700;font-size:15px;text-decoration:none!important;transition:.15s;line-height:1.2}
.sp-btn-wa{background:#25d366;color:#0b2e17!important}.sp-btn-wa:hover{background:#2ee072}
.sp-btn-call{background:rgba(255,255,255,.1);color:#fff!important;border:1px solid rgba(255,255,255,.25)}.sp-btn-call:hover{background:rgba(255,255,255,.18)}
.sp-btn-ghost{border:1.5px solid var(--sp-ink);color:var(--sp-ink)!important;background:#fff;align-self:flex-start}.sp-btn-ghost:hover{background:var(--sp-ink);color:#fff!important}

@media (max-width:860px){.sp-grid{grid-template-columns:1fr}}
@media (max-width:560px){
  .sp-card{padding:18px 16px;border-radius:16px}
  .sp-lead{margin:20px -16px -18px;padding:16px}
  .sp-lead-btns,.sp-lead .sp-btn{width:100%}
  .sp-types{grid-template-columns:1fr}
  .sp-type{padding:14px}
  .sp-big b{font-size:50px}
  .sp-t-lbl{font-size:18px}.sp-t-dim{font-size:19px}
}