/* کادوپیچ – بادکنک هلیومی v2.1 */
#kp-helium-app{--kp-primary:#FF0101;--kp-ink:#1f2430;--kp-muted:#6b7280;--kp-line:#e9ecf2;--kp-bg:#fff;--kp-soft:#f6f7fb;color:var(--kp-ink);max-width:1100px;margin:0 auto;padding:8px;line-height:1.7;-webkit-text-size-adjust:100%}
#kp-helium-app *{box-sizing:border-box}
#kp-helium-app button{font:inherit;cursor:pointer}

/* دکمه‌ها */
.kp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:14px;padding:13px 22px;font-weight:700;font-size:16px;transition:transform .12s,box-shadow .2s,background .2s}
.kp-btn:active{transform:translateY(1px) scale(.99)}
.kp-btn-primary{background:var(--kp-primary);color:#fff;box-shadow:0 8px 20px -8px var(--kp-primary)}
.kp-btn-primary:hover{filter:brightness(1.05)}
.kp-btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.kp-btn-ghost{background:var(--kp-soft);color:var(--kp-ink);border:1px solid var(--kp-line)}
.kp-btn-ghost:hover{background:#eef0f6}
.kp-link{background:none;border:none;color:var(--kp-muted);text-decoration:underline;margin-top:8px;font-size:14px}

/* گیت / شهرستان */
.kp-gate,.kp-outside{display:flex;justify-content:center;padding:36px 16px}
.kp-gate-inner,.kp-outside-inner{max-width:460px;text-align:center;background:var(--kp-bg);border:1px solid var(--kp-line);border-radius:22px;padding:34px 26px;box-shadow:0 20px 50px -30px rgba(20,30,60,.35)}
.kp-balloon-emoji{font-size:46px;line-height:1;margin-bottom:8px}
.kp-gate-q{font-size:23px;margin:6px 0}
.kp-gate-help,.kp-outside-inner p{color:var(--kp-muted);margin:8px 0 18px;font-size:15px}
.kp-gate-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.kp-outside-inner h2{font-size:21px;margin:6px 0}

/* هدر */
.kp-header{text-align:center;margin:10px 0 18px}
.kp-title{font-size:26px;margin:0 0 4px;font-weight:800}
.kp-em{filter:saturate(1.2)}
.kp-subtitle{color:var(--kp-muted);margin:0;font-size:15px}

/* چیدمان دو ستونه */
.kp-layout{display:grid;grid-template-columns:1.25fr .95fr;gap:18px;align-items:start}

/* صحنه SVG */
.kp-stage-wrap{position:sticky;top:14px}
.kp-stage{position:relative;background:linear-gradient(180deg,#fafbff 0%,#f1f4fb 100%);border:1px solid var(--kp-line);border-radius:22px;overflow:hidden;aspect-ratio:600/560;min-height:320px;box-shadow:inset 0 1px 0 #fff}
.kp-stage.is-hidden .kp-svg-host,.kp-stage.is-hidden #kp-empty{visibility:hidden}
.kp-svg-host{position:absolute;inset:0}
.kp-svg-host svg{width:100%;height:100%;display:block;touch-action:none;-webkit-user-select:none;user-select:none}
.kp-svg-host svg.kp-dragging{cursor:grabbing}
#kp-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--kp-muted);font-size:15px;padding:24px}

/* دکمه چشم */
.kp-eye{position:absolute;top:10px;left:10px;z-index:3;width:40px;height:40px;border-radius:12px;border:1px solid var(--kp-line);background:rgba(255,255,255,.92);backdrop-filter:blur(4px);font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px -8px rgba(20,30,60,.4)}
.kp-eye:hover{background:#fff}
.kp-stage-hidden{margin-top:10px;text-align:center;color:var(--kp-muted);background:var(--kp-soft);border:1px dashed var(--kp-line);border-radius:14px;padding:18px;font-size:15px}
.kp-stage-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.kp-stage-tip{color:var(--kp-muted);font-size:13px}
.kp-tool{background:var(--kp-soft);border:1px solid var(--kp-line);border-radius:10px;padding:7px 12px;font-size:13px;color:var(--kp-ink)}
.kp-tool:hover{background:#eef0f6}

/* بادکنک‌ها */
.kp-bg{transition:opacity .26s ease}
.kp-bg-out{opacity:0;pointer-events:none}
.kp-pop{transform-box:fill-box;transform-origin:center}
.kp-pop-in{animation:kp-pop .36s cubic-bezier(.18,1.3,.4,1) both}
@keyframes kp-pop{0%{opacity:0;transform:scale(.15)}100%{opacity:1;transform:scale(1)}}

/* پنل‌ها */
.kp-side{display:flex;flex-direction:column;gap:14px}
.kp-panel{background:var(--kp-bg);border:1px solid var(--kp-line);border-radius:18px;padding:16px}
.kp-panel-title{margin:0 0 4px;font-size:16px;font-weight:800}
.kp-panel-sub{margin:0 0 12px;color:var(--kp-primary);font-size:13.5px;font-weight:700}
.kp-panel-hint{margin:0 0 12px;color:var(--kp-muted);font-size:13px}
.kp-opt{color:var(--kp-muted);font-weight:500;font-size:12.5px}

/* تب‌های فینیش (ساده/پاستلی/کروم/...) */
.kp-finish-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.kp-finish-tab{appearance:none;border:1px solid var(--kp-line);background:var(--kp-bg);color:var(--kp-muted);font:inherit;font-size:13px;font-weight:700;padding:6px 14px;border-radius:999px;cursor:pointer;transition:color .18s cubic-bezier(.22,1,.36,1),border-color .18s cubic-bezier(.22,1,.36,1),background .18s cubic-bezier(.22,1,.36,1),box-shadow .18s cubic-bezier(.22,1,.36,1)}
.kp-finish-tab:hover{color:var(--kp-ink);border-color:#d6dae3}
.kp-finish-tab.is-active{color:#fff;background:var(--kp-primary);border-color:var(--kp-primary);box-shadow:0 6px 16px -8px var(--kp-primary)}

/* پالت رنگ */
.kp-colors{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:9px;max-height:240px;overflow-y:auto;overflow-x:hidden;padding:2px}
.kp-color{width:100%;aspect-ratio:1;border-radius:50%;border:2.5px solid #fff;box-shadow:0 0 0 1px var(--kp-line),0 4px 10px -6px rgba(20,30,60,.5);transition:transform .12s,box-shadow .15s}
.kp-color:hover{transform:translateY(-2px) scale(1.08);box-shadow:0 0 0 1px var(--kp-line),0 8px 16px -8px rgba(20,30,60,.55)}
.kp-color.is-light{box-shadow:0 0 0 1px #cfd4de,0 4px 10px -6px rgba(20,30,60,.5)}
/* سواچ مبتنی بر عکس */
.kp-color-img{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
/* اشاره‌ی ظریف فینیش روی سواچ */
.kp-color.kp-fin-chrome{box-shadow:0 0 0 1px #c7ccd6,0 4px 10px -6px rgba(20,30,60,.5),inset 0 2px 6px rgba(255,255,255,.55),inset 0 -3px 7px rgba(0,0,0,.18)}
.kp-color.kp-fin-crystal{opacity:.92}
.kp-color.kp-fin-sequin{box-shadow:0 0 0 1px var(--kp-line),0 4px 10px -6px rgba(20,30,60,.5),inset 0 0 8px rgba(255,255,255,.5)}
.kp-pulse{animation:kp-pulse .35s ease}
@keyframes kp-pulse{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}

/* تمپلیت‌ها */
.kp-templates{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.kp-template{display:flex;flex-direction:column;align-items:flex-start;gap:7px;background:var(--kp-soft);border:1px solid var(--kp-line);border-radius:14px;padding:11px;text-align:right;transition:border-color .15s,transform .12s,box-shadow .15s}
.kp-template:hover{border-color:var(--kp-primary);transform:translateY(-1px);box-shadow:0 8px 18px -12px rgba(20,30,60,.5)}
.kp-tpl-dots{display:flex;gap:4px}
.kp-tpl-dot{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.kp-tpl-name{font-size:13.5px;font-weight:700;color:var(--kp-ink)}

/* فاکتور */
.kp-summary-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;max-height:220px;overflow:auto}
.kp-summary-empty{color:var(--kp-muted);font-size:13px;background:var(--kp-soft);border:1px dashed var(--kp-line);border-radius:12px;padding:14px;text-align:center}
.kp-summary-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--kp-soft);border:1px solid var(--kp-line);border-radius:12px;padding:7px 11px}
.kp-summary-color{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;min-width:0}
.kp-summary-dot{width:16px;height:16px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.kp-summary-dot-img{background-size:cover;background-position:center;background-repeat:no-repeat}
.kp-summary-fin{font-size:11px;font-weight:700;color:var(--kp-muted);background:var(--kp-soft);border:1px solid var(--kp-line);border-radius:999px;padding:1px 8px;margin-inline-start:6px;flex:0 0 auto}
.kp-stepper{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.kp-stepper b{min-width:26px;text-align:center;font-size:15px}
.kp-step{width:30px;height:30px;border-radius:9px;border:1px solid var(--kp-line);background:#fff;font-size:17px;line-height:1;color:var(--kp-ink);display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.kp-step:hover{background:var(--kp-primary);color:#fff;border-color:var(--kp-primary)}
.kp-summary-line{display:flex;justify-content:space-between;align-items:center;padding:7px 0;color:var(--kp-muted);font-size:14px;border-top:1px dashed var(--kp-line)}
.kp-summary-line strong{color:var(--kp-ink)}
.kp-summary-total{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:13px 14px;background:linear-gradient(180deg,#fff5f5,#ffeaea);border:1px solid #ffd4d4;border-radius:14px;font-size:16px}
.kp-summary-total strong{color:var(--kp-primary);font-size:20px;font-weight:800}
.kp-ribbon-note{color:var(--kp-muted);font-size:12.5px;margin:12px 0;text-align:center}
.kp-btn-cart{width:100%;padding:15px;font-size:17px}
.kp-cart-msg{margin-top:10px;text-align:center;font-size:14px;font-weight:700;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.kp-cart-msg.show{opacity:1;transform:none}
.kp-cart-msg.is-ok{color:#0a7f3f}
.kp-cart-msg.is-err{color:#c1121f}

/* ریسپانسیو */
@media(max-width:880px){
  .kp-layout{grid-template-columns:1fr}
  .kp-stage-wrap{position:static}
  .kp-stage{aspect-ratio:auto;height:58vw;min-height:280px;max-height:460px}
}
@media(max-width:480px){
  #kp-helium-app{padding:4px}
  .kp-title{font-size:21px}
  .kp-subtitle{font-size:13px}
  .kp-colors{grid-template-columns:repeat(auto-fill,minmax(36px,1fr));max-height:180px;gap:7px}
  .kp-templates{grid-template-columns:1fr}
  .kp-gate-actions{flex-direction:column}
  .kp-gate-actions .kp-btn{width:100%}
  .kp-stage{height:72vw;min-height:260px;max-height:400px}
  .kp-panel{padding:12px}
  .kp-btn-cart{padding:13px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  .kp-bg,.kp-pop-in,.kp-pulse,.kp-btn,.kp-color,.kp-template{transition:none!important;animation:none!important}
}