:root{
      --bg:#f8fafc;
      --card:#ffffff;
      --text:#0f172a;
      --muted:#475569;
      --accent:#3b82f6;
      --accent-weak:#dbeafe;
      --border:#c0dbfd;
      --shadow:0 6px 18px rgba(15,23,42,.08);
      --radius:16px;
      --gap:14px;
      --pad:30px;
      --arrow: 14px; /* גובה החץ */
      --maxw: 820px;
    }
    .flow{
		display:block;
		max-width: 700px;
		margin: 0 auto;
	}

    /* שלד של שלבים */
    .flow-track{
      position: relative;
    }
    .flow-step{
      position: relative;
      background:var(--card);
      border:1px solid var(--border);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:var(--pad);
      margin-bottom: calc(var(--gap) + var(--arrow));
	  text-align: center;
    }
    .flow-step .step-title{
      font-weight:700;
      font-size:1.05rem;
      margin:0 0 10px;
    }
    .flow-step .step-subtitle{
      color:var(--muted);
      font-size:.92rem;
      margin:0 0 12px;
    }

    /* חץ למטה בין קוביות */
    .flow-step::after{
      content:"";
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      bottom: calc(-1 * var(--arrow));
      border: var(--arrow) solid transparent;
      border-top-color: var(--border);
      filter: drop-shadow(0 2px 2px rgba(15,23,42,.04));
	  margin-bottom: -14px;
    }

    /* רשימת תשובות */
    .answers{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
	      align-items: center;
    justify-content: center;
    }
    .answer-btn{
      appearance:none;
      border:1px solid var(--accent);
      background:linear-gradient(0deg, var(--accent-weak), #fff);
      color:var(--text);
      padding:10px 14px;
      border-radius:12px;
      cursor:pointer;
      font:inherit;
      transition:.15s ease;
	  min-width: 120px;
    }
    .answer-btn:hover{ transform: translateY(-1px); box-shadow:0 4px 12px rgba(59,130,246,.18); }
    .answer-btn:active{ transform: translateY(0); box-shadow:none; }

    /* אזור תוכן סופי */
    .content-box{
      /*background:#fff;
      border:1px dashed var(--border);
      border-radius:12px;
      padding:14px;*/
    }

    /* שורת טעינה/שגיאה */
    .flow-status{
      color:var(--muted);
      font-size:.95rem;
      padding:8px 2px;
    }
    .flow-error{
      color:#b91c1c;
      background:#fee2e2;
      border:1px solid #fecaca;
      padding:10px 12px;
      border-radius:12px;
    }

    /* אנימציות קטנות */
    .fade-in{
      animation:fade .25s ease-out both;
    }
    @keyframes fade { from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }

    /* תמיכה במסכים צרים */
    @media (max-width:560px){
      .answer-btn{ width:100%; justify-content:center; }
    }


.flow .btn-primary {
  appearance: none;
  border: 1px solid var(--accent);
  background: linear-gradient(0deg, var(--accent-weak), #fff);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  transition: .15s ease;
  min-width: 120px;
}

.flow .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, .18);
}