/* فاز ۴: شکل‌های مثلثی و مربعیِ قابل مشاهده، واکنش‌گرا و بدون وابستگی خارجی. */
.pattern-visual{display:flex;align-items:stretch;justify-content:center;gap:12px;margin:16px auto 22px;padding:14px 8px;border:2px dashed #afded0;border-radius:18px;background:#f1fff9;max-width:100%;overflow-x:auto}
.pattern-figure{display:flex;flex:1 1 0;min-width:0;max-width:210px;flex-direction:column;align-items:center;gap:7px;text-align:center;color:#176a60;font-size:.9rem}
.pattern-figure strong{font-size:.86rem}.pattern-figure small{font-size:.77rem;color:#426c66}
.pattern-dot-shape{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:112px;gap:4px;padding:6px 2px}
.pattern-dot-row{display:flex;justify-content:center;gap:4px;min-height:7px}
.pattern-dot{width:9px;height:9px;background:#31a68f;border-radius:50%;box-shadow:0 1px 2px #006b5f20;display:block;flex:0 0 auto}
.pattern-dot-shape--square .pattern-dot{background:#7259d0}
@media(max-width:480px){.pattern-visual{gap:5px;padding:10px 3px}.pattern-dot-row{gap:2px}.pattern-dot-shape{gap:3px;min-height:87px}.pattern-dot{width:7px;height:7px}.pattern-figure{gap:4px;font-size:.75rem}.pattern-figure strong{font-size:.75rem}.pattern-figure small{font-size:.7rem}}