/* ==========================================================================
   pin.css — PIN modal, keypad, dots.
   Part of منصة عقاب dashboard styles. Split from the former app.css.
   Cascade order is significant; see docs/flows/INDEX.md.
   ========================================================================== */
/* ══════════════════════════════════════════════════════
   PIN MODAL
══════════════════════════════════════════════════════ */
#pin-modal {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); backdrop-filter: blur(10px); padding: 24px;
}
[data-theme="light"] #pin-modal { background: rgba(100,80,50,.25); }
.pin-card {
  background: var(--s1); border: 1px solid var(--b1);
  border-radius: var(--r4); padding: 28px 22px 22px;
  width: 100%; max-width: 290px;
  box-shadow: 0 32px 80px var(--sh);
  position: relative;
}
.pin-close {
  position: absolute; top: 10px; left: 10px;
  color: var(--t3); font-size: 13px;
  width: 26px; height: 26px; border-radius: var(--r1);
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
.pin-close:hover { color: var(--red); background: rgba(232,96,96,.1); }
.pin-top { text-align: center; margin-bottom: 22px; }
#pin-av {
  width: 54px; height: 54px; border-radius: var(--rf);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fh); font-size: 17px; font-weight: 900;
  margin: 0 auto 10px;
}
#pin-name { font-family: var(--fh); font-size: 15.5px; font-weight: 700; color: var(--t1); }
.pin-hint { font-size: 12px; color: var(--t2); margin-top: 3px; }
#pin-dots { display: flex; justify-content: center; gap: 10px; margin: 16px 0; }
.pdot {
  width: 12px; height: 12px; border-radius: var(--rf);
  border: 1.5px solid var(--g); background: transparent;
  transition: background .12s, transform .12s;
}
.pdot.on { background: var(--g); transform: scale(1.25); }
.pin-pad { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 6px; }
.pkey {
  background: var(--s2); border: 1px solid var(--b1);
  color: var(--t1); font-family: var(--fh); font-size: 18px; font-weight: 700;
  padding: 12px; border-radius: var(--r2);
  transition: background .1s, transform .08s, border-color .1s;
}
.pkey:hover { background: var(--s3); border-color: var(--b2); }
.pkey:active { transform: scale(.9); background: var(--gd); }
.pkey.clr { font-size: 11px; color: var(--red); }
.pkey.del { font-size: 16px; color: var(--g); }
#pin-err { font-size: 12px; color: var(--red); text-align: center; margin-top: 8px; display: none; }