/* ==============================================================
   Processor Matcher — استایل جداگانه
   شامل: دکمه تریگر، مودال، انیمیشن چیپ‌های پردازنده، لجند
   ============================================================== */

:root{
  --pm-teal-900: #0a3b32;
  --pm-teal-700: #0f6b58;
  --pm-teal-600: #12967c;
  --pm-teal-500: #1cb597;
  --pm-teal-400: #3fd2af;
  --pm-ink-950:  #081a17;
  --pm-ink:      #0b201c;
  --pm-muted:    #5c7a73;
  --pm-line:     #e3eeea;

  --pm-arm:    #4c8dff;
  --pm-arm64:  #7c5cff;
  --pm-x86:    #ff9a4d;
  --pm-x8664:  #ff5f8f;
}

/* ---------- Trigger button ---------- */
.pm-trigger-btn {
    width: 100%;
    margin-top: 5px;
    border: 1px solid var(--pm-line);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 6px 16px rgba(10,59,50,.06);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.pm-trigger-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(10,59,50,.12);
  border-color:var(--pm-teal-400);
}
.pm-trigger-txt{
  font-size:12.5px; font-weight:600; color:var(--pm-teal-900); line-height:1.7; text-align:right;
}
.pm-trigger-go{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--pm-teal-500), var(--pm-teal-700));
  color:#fff; display:flex; align-items:center; justify-content:center;
}
.pm-trigger-go svg{ width:14px; height:14px; }

/* ---------- Modal shell ---------- */
.pm-modal .modal-content{
  border-radius:20px; overflow:hidden; border:none;
  font-family:"Vazirmatn", Tahoma, sans-serif;
}
.pm-modal .modal-header{
  background:linear-gradient(155deg, var(--pm-teal-500), var(--pm-teal-700));
  border:none; padding:16px 20px;
}
.pm-modal .modal-title{ color:#fff; font-weight:700; font-size:15px; }
.pm-modal .btn-close{ filter:invert(1) brightness(2); opacity:.9; }
.pm-modal .modal-footer{ background:#fff; border-top:1px solid var(--pm-line); }
.pm-modal .modal-body{ padding:22px; }

.pm-h{ margin:0 0 6px; font-size:15px; color:var(--pm-teal-900); font-weight:800; }
.pm-p{ margin:0 0 16px; font-size:13px; color:var(--pm-muted); line-height:2; }
.pm-p b{ color:var(--pm-teal-700); }

/* ---------- Matcher card ---------- */
.pm-matcher{
  background:
    radial-gradient(500px 260px at 50% -30%, rgba(63,210,175,.18), transparent),
    linear-gradient(165deg, var(--pm-ink-950), var(--pm-teal-900));
  border-radius:20px;
  padding:26px 18px 20px;
  display:flex; flex-direction:column; align-items:center;
  position:relative; overflow:hidden;
}
.pm-matcher::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:16px 16px;
}

.pm-stage{
  position:relative; width:100%; max-width:280px; height:160px; margin:0 auto 14px; z-index:1;
}

.pm-phone{
  position:absolute; left:50%; top:50%;
  width:48px; height:86px; border-radius:12px;
  background:linear-gradient(160deg,#123f36,#0a2620);
  border:2px solid rgba(63,210,175,.35);
  transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 30px rgba(63,210,175,.15);
}
.pm-phone::after{
  content:""; width:28px; height:28px; border-radius:8px;
  background:rgba(63,210,175,.18);
  animation:pm-pulse 1.8s ease-in-out infinite;
}
@keyframes pm-pulse{ 0%,100%{opacity:.4} 50%{opacity:1} }

.pm-chip{
  position:absolute; width:46px; height:46px; border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:"JetBrains Mono", monospace; font-size:8.5px; font-weight:700; color:#fff;
  opacity:0; transform:scale(.5);
  animation:pm-orbit-in 2.6s cubic-bezier(.34,1.56,.64,1) forwards;
  box-shadow:0 8px 18px rgba(0,0,0,.4);
}
.pm-chip svg{ width:16px; height:16px; margin-bottom:3px; }

.pm-c-arm{   background:linear-gradient(150deg, var(--pm-arm),   #2f6fe0); top:4%;  right:8%; animation-delay:.1s; }
.pm-c-arm64{ background:linear-gradient(150deg, var(--pm-arm64), #5c3fe0); top:4%;  left:6%;  animation-delay:.35s; }
.pm-c-x86{   background:linear-gradient(150deg, var(--pm-x86),   #e0722a); bottom:2%; right:8%; animation-delay:.6s; }
.pm-c-x8664{ background:linear-gradient(150deg, var(--pm-x8664), #e0406f); bottom:2%; left:6%;  animation-delay:.85s; }

@keyframes pm-orbit-in{
  0%{ opacity:0; transform:scale(.4) translateY(10px); }
  60%{ opacity:1; }
  100%{ opacity:1; transform:scale(1) translateY(0); }
}

.pm-chip.pm-matched{
  animation: pm-matched-move 1s cubic-bezier(.4,0,.2,1) 2.4s forwards,
             pm-glow 1.3s ease-in-out 3.4s infinite;
}
@keyframes pm-matched-move{
  to{ top:50%; left:50%; right:auto; bottom:auto; transform:translate(-50%,-50%) scale(1.08); }
}
@keyframes pm-glow{
  0%,100%{ box-shadow:0 0 0 0 rgba(63,210,175,.55), 0 8px 18px rgba(0,0,0,.4); }
  50%{ box-shadow:0 0 0 12px rgba(63,210,175,0), 0 8px 18px rgba(0,0,0,.4); }
}

.pm-chip.pm-fade-out{ animation: pm-fade-away 1s forwards 2.4s; }
@keyframes pm-fade-away{ to{ opacity:0; transform:scale(.4); } }

.pm-check{
  position:absolute; left:50%; top:50%;
  width:22px; height:22px; border-radius:50%;
  background:#fff; color:var(--pm-teal-700);
  display:flex; align-items:center; justify-content:center;
  transform:translate(8px,-32px) scale(0);
  animation:pm-pop-check .4s ease-out 3.4s forwards;
  z-index:2; box-shadow:0 4px 10px rgba(0,0,0,.3);
}
.pm-check svg{ width:12px; height:12px; }
@keyframes pm-pop-check{ to{ transform:translate(24px,-32px) scale(1); } }

.pm-caption{
  z-index:1; color:#e9fdf5; font-size:12.5px; text-align:center;
  line-height:1.95; min-height:42px; max-width:280px; margin:0 auto;
}
.pm-caption b{ color:var(--pm-teal-400); }

.pm-replay-btn{
  z-index:1; margin-top:8px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  color:#e9fdf5; font-family:inherit; font-size:12px; font-weight:600;
  padding:9px 17px; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; gap:6px; transition:background .2s;
}
.pm-replay-btn:hover{ background:rgba(255,255,255,.16); }
.pm-replay-btn svg{ width:13px; height:13px; }

/* ---------- Legend ---------- */
.pm-legend{
  display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:18px;
}
.pm-legend-row{
  display:flex; align-items:center; gap:9px;
  background:#fff; border:1px solid var(--pm-line); border-radius:12px;
  padding:9px 11px; font-size:11.5px; color:var(--pm-muted);
}
.pm-dot{ width:11px; height:11px; border-radius:4px; flex-shrink:0; }
.pm-legend-row b{ color:var(--pm-ink); font-size:12px; }

/* ---------- Legacy explanation divider ---------- */
.pm-divider{
  border:none; border-top:1px dashed var(--pm-line);
  margin:22px 0 16px;
}
.pm-modal .modal-body img{
  border-radius:12px; border:1px solid var(--pm-line);
}