/* ═══════════════════════════════════════════════════════
   SHARED / WIDGETS — مكوّنات بصرية عامة مُعاد استخدامها
   عبر عدة شاشات (Progress Ring يُستخدم في home و tree و stats)
   ═══════════════════════════════════════════════════════ */

/* ── PROGRESS RING ── */
.ring-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}
.ring-svg {
  transform: rotate(-90deg);
  width: 72px;
  height: 72px;
}
.ring-bg {
  fill: none;
  stroke: var(--brd);
  stroke-width: 5;
}
.ring-fg {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset .6s cubic-bezier(.4, 0, .2, 1);
}
.ring-txt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ring-pct {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
}
.ring-lbl {
  font-size: .3rem;
  color: var(--muted);
  margin-top: 1px;
}
.ring-ic {
  font-size: .9rem;
  line-height: 1;
}


/* ═══ تجربة أول استخدام (Onboarding) ═══ */
.onb {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: onbIn .25s ease;
}
@keyframes onbIn { from { opacity: 0; } to { opacity: 1; } }
.onb-card {
  position: relative;
  background: var(--sur);
  border: 1.5px solid var(--brd);
  border-radius: var(--r);
  box-shadow: var(--sh2);
  padding: 28px 22px 20px;
  max-width: 360px;
  width: 100%;
  text-align: center;
}
.onb-skip {
  position: absolute;
  top: 10px;
  left: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .55rem;
  color: var(--muted);
}
.onb-skip:hover { color: var(--sub); }
.onb-ic { font-size: 2.6rem; }
.onb-t { font-size: .95rem; font-weight: 900; color: var(--txt); margin-top: 10px; }
.onb-v { margin: 14px 0; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.onb-b { font-size: .66rem; color: var(--sub); line-height: 1.9; }
.onb-dots { display: flex; gap: 6px; justify-content: center; margin: 16px 0 12px; }
.onb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brd2); transition: background .2s, transform .2s; }
.onb-dot.on { background: var(--v); transform: scale(1.25); }
.onb-next {
  background: var(--v);
  color: #fff;
  border: none;
  border-radius: var(--rsm);
  padding: 10px 26px;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
  width: 100%;
}
.onb-next:hover { opacity: .92; }